GitHub Insights Plugin for Backstage

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:
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:
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
import { EntityGithubInsightsComplianceCard } from '@roadiehq/backstage-plugin-github-insights';

Contributors Card
import { EntityGithubInsightsContributorsCard } from '@roadiehq/backstage-plugin-github-insights';

Languages Card
import { EntityGithubInsightsLanguagesCard } from '@roadiehq/backstage-plugin-github-insights';

ReadMeCard
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
import { EntityGithubInsightsReleasesCard } from '@roadiehq/backstage-plugin-github-insights';

EnvironmentsCard
import { EntityGithubInsightsEnvironmentsCard } from '@roadiehq/backstage-plugin-github-insights';

Links
Roadie gives you a hassle-free, fully customisable SaaS Backstage. Find out more here: https://roadie.io.