Roadie

Backstage GitHub Pull Requests Plugin

See Pull Requests for your service in Backstage

Getting started is simple

Install the plugin into Backstage.

yarn add @roadiehq/backstage-plugin-github-pull-requests

Import it into your Backstage application.

// packages/app/src/plugins.ts
export { plugin as GithubPullRequests } from '@roadiehq/backstage-plugin-github-pull-requests';

Add plugin API to your Backstage instance.

// packages/app/src/components/catalog/EntityPage.tsx
import { Router as GithubPullRequestsRouter } from '@roadiehq/backstage-plugin-github-pull-requests';

...

const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
  ...
  <EntityPageLayout>
    <EntityPageLayout.Content
      path="/github-pull-requests"
      title="Github Pull Requests"
      element={<GithubPullRequestsRouter entity={entity} />}
    />
    </EntityPageLayout>
  </EntityPageLayout>
)

Run the backstage app with the following command and navigate to the services tab.

yarn start

Add widget to your Overview tab.

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

...

const OverviewContent = ({ entity }: { entity: Entity }) => (
  <Grid container spacing={3} alignItems="stretch">
    ...
    <Grid item md={6}>
      <PullRequestsStatsCard entity={entity} />
    </Grid>
  </Grid>
);

How it looks

Pull requests for Backstage rendered inside a Backstage plugin.
The statistics widget is alongside, showing the average time to merge a PR.

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.