Backstage GitHub Insights Plugin

See GitHub Insights for your components in Backstage

Created by Roadie

Getting started is simple

Don't want to spend your time installing and upgrading Backstage plugins? Get managed Backstage from Roadie.

Installation steps

Install the plugin into Backstage.

// 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 the backstage app with the following command and navigate to the services tab.

yarn start

Widgets setup.

You must install this plugin by following the steps above to add the 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={e => Boolean(isGithubInsightsAvailable(e))}>
        <Grid item md={6}>
          <EntityGithubInsightsLanguagesCard />
          <EntityGithubInsightsReleasesCard />
        </Grid>
        <Grid item md={6}>
          <EntityGithubInsightsReadmeCard maxHeight={350} />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

Found a mistake? Update these instructions.

How it looks

A screenshot of the GitHub Insights plugin. It is showing a code details for a sample component.

Things to know

Repository migration notice (June/July 2021)

In order to make testing and deployment of our plugins easier we are migrating all Roadie plugins to a monorepo at https://github.com/RoadieHQ/backstage-roadie-plugins.

The plugins will still be published to the same place on NPM and will have the same package names so nothing should change for consumers of these plugins.

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.

We will never sell or share your email address.