backstage
GitHub Issues plugin
Welcome to the GitHub Issues plugin!
Based on the well-known GitHub slug annotation associated with the Entity, it renders the list of Open issues in GitHub.
The plugin is designed to work with four Entity kinds, and it behaves a bit differently depending on that kind:
- Kind: Group/User: plugin renders issues from all repositories for which the Entity is the owner.
- Kind: API/Component: plugin renders issues from only one repository assigned to the Entity
Issues are sorted from the recently updated DESC order (the plugin might not render all issues from a single repo next to each other).
Prerequisites
Usage
Install the plugin by running the following command from your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-github-issues
After installation, the plugin can be used as a Card or as a Page.
import { GithubIssuesCard, GithubIssuesPage,} from '@backstage/plugin-github-issues';
// To use as a page Plugin needs to be wrapped in EntityLayout.Routeconst RenderGitHubIssuesPage = () => ( <EntityLayoutWrapper> <EntityLayout.Route path="/" title="Overview"> <EntityLayout.Route path="github-issues" title="GitHub Issues"> <GithubIssuesPage /> </EntityLayout.Route> </EntityLayout.Route> </EntityLayoutWrapper>);
// To use as a card and make it render correctly please place it inside appropriate Grid elementsconst RenderGitHubIssuesCard = () => ( <EntityLayoutWrapper> <EntityLayout.Route path="/" title="Overview"> <Grid container spacing={3}> <Grid item xs={12}> <GithubIssuesCard /> </Grid> </Grid> </EntityLayout.Route> </EntityLayoutWrapper>);
Configuration
Both GithubIssuesPage
and GithubIssuesCard
provide default configuration. It is ready to use out of the box.
However, you can configure the plugin with props:
itemsPerPage: number = 10
- Issues in the list are paginated, number of issues on a single page is controlled with this propitemsPerRepo: number = 40
- the plugin doesn't download all Issues available on GitHub. By default, it will get at most 40 Issues - this prop controls this behaviourfilterBy: object
- the plugin can be configured to filter the query byassignee
,createdBy
,labels
,states
,mentioned
ormilestone
.orderBy: object = { field: 'UPDATED_AT', direction: 'DESC' }
- The ordering that the issues are returned can be configured by theorderBy
field.
filterBy
and orderBy
example
<GithubIssuesCard filterBy={{ labels: ['bug', 'enhancement'], states: ['OPEN'], }} orderBy={{ field: 'COMMENTS', direction: 'ASC', }}/>