Home

Awesome

Backstage GitLab Plugin

Version Contributions welcome Downloads License Stars Badge Maintenance

Build Status

Language Repo Size Hits

Website: https://gitlab.com/

<img src="https://raw.githubusercontent.com/loblaw-sre/backstage-plugin-gitlab/main/src/assets/Backstage_Gitlab_Pipeline_Information.png" alt="Contributors Languages Pipeline Status"/> <img src="https://raw.githubusercontent.com/loblaw-sre/backstage-plugin-gitlab/main/src/assets/Backstage_Gitlab_Merge_Request_information.png" alt="Merge Request Information"/> <img src="https://raw.githubusercontent.com/loblaw-sre/backstage-plugin-gitlab/main/src/assets/Backstage_Gitlab_Issue_Information.png" alt="Issue Information"/>

Setup

  1. If you have a standalone app (you didn't clone this repo), then do
# From your Backstage root directory
cd packages/app
yarn add @loblaw/backstage-plugin-gitlab
  1. Add a new GitLab tab to the entity page.
// packages/app/src/components/catalog/EntityPage.tsx

import { isGitlabAvailable, EntityGitlabContent } from '@loblaw/backstage-plugin-gitlab';

// Farther down at the serviceEntityPage declaration
const serviceEntityPage = (
  <EntityLayout>
    {/* Place the following section where you want the tab to appear */}
    <EntityLayout.Route if={isGitlabAvailable} path="/gitlab" title="Gitlab">
       <EntityGitlabContent />
    </EntityLayout.Route>
  </EntityLayout>
);
  1. Add the GitLab cards to the Overview tab on the entity page(Optional).
// packages/app/src/components/catalog/EntityPage.tsx

import {
  isGitlabAvailable,
  EntityGitlabContent,
  EntityGitlabLanguageCard,
  EntityGitlabContributorsCard,
  EntityGitlabMergeRequestsTable,
  EntityGitlabMergeRequestStatsCard,
  EntityGitlabPipelinesTable
} from '@loblaw/backstage-plugin-gitlab';

//Farther down at the overviewContent declaration
//You can add only selected widgets or all of them.
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    <EntitySwitch>
      <EntitySwitch.Case if={isGitlabAvailable}>
        <Grid item md={6}>
          <EntityGitlabContributorsCard />
          <EntityGitlabLanguageCard />
          <EntityGitlabMergeRequestStatsCard />
          <EntityGitlabPipelinesTable />
          <EntityGitlabMergeRequestsTable />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);
  1. Add integration: In app-config.yaml add the integration for gitlab:
integrations:
  gitlab:
    - host: gitlab.com
      token: ${GITLAB_TOKEN}
  1. Add proxy config:
  '/gitlabci':
    target: '${GITLAB_URL}/api/v4'
    allowedMethods: ['GET']
    headers:
      PRIVATE-TOKEN: '${GITLAB_TOKEN}'
  1. Add a gitlab.com/project-id annotation to your respective catalog-info.yaml files, on the format
# Example catalog-info.yaml entity definition file
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  # ...
  annotations:
      gitlab.com/project-id: 'project-id' #1234. This must be in quotes and can be found under Settings --> General
      or
      gitlab.com/project-slug: 'project-slug' # group_name/project_name
spec:
  type: service
  # ...

Note: spec.type can take values in ['website','library','service'] but to render GitLab Entity, Catalog must be of type service

Features