@diliprenkila/backstage-plugin-bitbucket v0.1.21

Backstage Bitbucket Plugin

Website: https://bitbucket.com/

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-bitbucket

2. Add a new Bitbucket tab to the entity page.

// packages/app/src/components/catalog/EntityPage.tsx

import { isBitbucketAvailable, EntityBitbucketContent } from '@loblaw/backstage-plugin-bitbucket';

// Farther down at the serviceEntityPage declaration
const serviceEntityPage = (
  <EntityLayout>
    {/* Place the following section where you want the tab to appear */}
    <EntityLayout.Route if={isBitbucketAvailable} path="/bitbucket" title="Bitbucket">
       <EntityBitbucketContent />
    </EntityLayout.Route>
  </EntityLayout>
);

3. Add the Bitbucket cards to the Overview tab on the entity page(Optional).

// packages/app/src/components/catalog/EntityPage.tsx

import { 
  isBitbucketAvailable, 
  EntityBitbucketContent, 
  EntityBitbucketLanguageCard, 
  EntityBitbucketContributorsCard, 
  EntityBitbucketMergeRequestsTable, 
  EntityBitbucketMergeRequestStatsCard, 
  EntityBitbucketPipelinesTable 
} from '@loblaw/backstage-plugin-bitbucket';

//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={isBitbucketAvailable}>
        <Grid item md={6}>
          <EntityBitbucketContributorsCard />
          <EntityBitbucketLanguageCard />
          <EntityBitbucketMergeRequestStatsCard />
          <EntityBitbucketPipelinesTable />
          <EntityBitbucketMergeRequestsTable />
        </Grid> 
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

4. Add integration: In app-config.yaml add the integration for bitbucket:

integrations:
  bitbucket:
    - host: bitbucket.com
      token: ${GITLAB_TOKEN}

5. Add proxy config:

  '/bitbucketci':
    target: '${GITLAB_URL}/api/v4'
    allowedMethods: ['GET']
    headers:
      PRIVATE-TOKEN: '${GITLAB_TOKEN}'

• Default GitLab URL: https://bitbucket.com
• GitLab Token should be with of scope read_api and can be generated from this URL

5. Add a bitbucket.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:
      bitbucket.com/project-id: 'project-id' #1234. This must be in quotes and can be found under Settings --> General
      or
      bitbucket.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

• List top 20 builds for a project
• List top 20 Merge Requests for a project
• View Contributors for a project
• View Languages used for a project
• View Pipeline status for a project
• Works for both project and personal tokens
• Pagination for builds
• Pagination for Merge Requests
• Merge Requests Statistics