@roadiehq/backstage-plugin-github-insights NPM

GitHub Insights Plugin for Backstage

a preview of the GitHub insights plugin

Features

Add GitHub Insights plugin tab.
Show widgets about repository contributors, languages, readme, environments and release at overview page.

Plugin Setup

Install the plugin:

cd packages/app
yarn add @roadiehq/backstage-plugin-github-insights

Add plugin API to your Backstage instance:

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsContent } from '@roadiehq/backstage-plugin-github-insights';

...

const serviceEntityPage = (
  <EntityLayoutWrapper>
    ...
    <EntityLayout.Route
      path="/code-insights"
      title="Code Insights">
      <EntityGithubInsightsContent />
    </EntityLayout.Route>
    ...
  </EntityLayoutWrapper>
);

Run backstage app with yarn start and navigate to services tabs.

Widgets setup

You must install plugin by following the steps above to add widgets to your Overview. You might add only selected widgets or all of them.
Add widgets to your Overview tab:

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubInsightsContent,
  EntityGithubInsightsLanguagesCard,
  EntityGithubInsightsReadmeCard,
  EntityGithubInsightsReleasesCard,
  isGithubInsightsAvailable,
} from '@roadiehq/backstage-plugin-github-insights';

...

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
   <EntitySwitch>
      <EntitySwitch.Case if={isGithubInsightsAvailable}>
        <Grid item md={6}>
          <EntityGithubInsightsLanguagesCard />
          <EntityGithubInsightsReleasesCard />
        </Grid>
        <Grid item md={6}>
          <EntityGithubInsightsReadmeCard maxHeight={350} />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

Readme path

By default the plugin will use the annotation github.com/project-slug and get the root README.md from the repository. You can use a specific path by using the annotation 'github.com/project-readme-path': 'packages/sub-module/README.md'. It can be useful if you have a component inside a monorepos.

Widgets

Compliance Card

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsComplianceCard } from '@roadiehq/backstage-plugin-github-insights';

Contributors Card

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsContributorsCard } from '@roadiehq/backstage-plugin-github-insights';

Languages Card

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsLanguagesCard } from '@roadiehq/backstage-plugin-github-insights';

ReadMeCard

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsReadmeCard } from '@roadiehq/backstage-plugin-github-insights';

Please note that the workflow status badge feature in GitHub will not work with the Readme plugin.

ReleasesCard

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsReleasesCard } from '@roadiehq/backstage-plugin-github-insights';

EnvironmentsCard

// packages/app/src/components/catalog/EntityPage.tsx
import { EntityGithubInsightsEnvironmentsCard } from '@roadiehq/backstage-plugin-github-insights';