SonarQube Plugin

The SonarQube Plugin displays code statistics from SonarCloud or SonarQube.

Getting Started

1. Install the SonarQube Plugin:

# From your Backstage root directory
yarn --cwd packages/app add @backstage-community/plugin-sonarqube

2. Add the EntitySonarQubeCard to the EntityPage:

  // packages/app/src/components/catalog/EntityPage.tsx
+ import { EntitySonarQubeCard } from '@backstage-community/plugin-sonarqube';

 ...

 const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     <Grid item md={6}>
       <EntityAboutCard variant="gridItem" />
     </Grid>
+    <Grid item md={6}>
+      <EntitySonarQubeCard variant="gridItem" />
+    </Grid>
   </Grid>
 );

The "Read more" link that shows in the MissingAnnotationEmptyState is also configurable.

  // packages/app/src/components/catalog/EntityPage.tsx
+ import { EntitySonarQubeCard } from '@backstage-community/plugin-sonarqube';

+ const MISSING_ANNOTATION_READ_MORE_URL = 'https://backstage.io/docs/features/software-catalog/descriptor';

 ...

 const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     <Grid item md={6}>
       <EntityAboutCard variant="gridItem" />
     </Grid>
+    <Grid item md={6}>
+      <EntitySonarQubeCard variant="gridItem" readMoreUrl={MISSING_ANNOTATION_READ_MORE_URL} />
+    </Grid>
   </Grid>
 );

3. Run the following commands in the root folder of the project to install and compile the changes.

yarn install
yarn tsc

4. Add the sonarqube.org/project-key annotation to the catalog-info.yaml file of the target repo for which code quality analysis is needed.

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: backstage
  description: |
    Backstage is an open-source developer portal that puts the developer experience first.
  annotations:
    sonarqube.org/project-key: YOUR_INSTANCE_NAME/YOUR_PROJECT_KEY
spec:
  type: library
  owner: CNCF
  lifecycle: experimental

YOUR_INSTANCE_NAME/ is optional and will query the default instance if not provided.

Integrating with EntityPage (New Frontend System)

Follow this section if you are using Backstage's new frontend system.

1. Import githubActionsPlugin in your App.tsx and add it to your app's features array:

import sonarQubePlugin from '@backstage-community/plugin-sonarqube/alpha';

// ...

export const app = createApp({
  features: [
    // ...
    sonarQubePlugin,
    // ...
  ],
});

2. Next, enable your desired extensions in app-config.yaml

app:
  extensions:
    - entity-content:sonarqube/entity
    - entity-card:sonarqube/card

3. Whichever extensions you've enabled should now appear in your entity page.

You can also control which entity kinds the sonarqube card appears on by adding a config underneath the entity-content, like so:

# app-config.yaml
app:
  extensions:
    - entity-content:sonarqube/entity
        config:
          filter: kind:component,system

Links

• Sonarqube Backend