@backstage-community/plugin-github-actions

GitHub Actions Plugin

Website: https://github.com/actions

Screenshots

TBD

Setup

Generic Requirements

1. Provide OAuth credentials:

   1. Create an OAuth App in the GitHub organization with the callback URL set to http://localhost:7007/api/auth/github/handler/frame.
   2. Take the Client ID and Client Secret from the newly created app's settings page and put them into AUTH_GITHUB_CLIENT_ID and AUTH_GITHUB_CLIENT_SECRET environment variables.

2. Annotate your component with a correct GitHub Actions repository and owner:

   The annotation key is github.com/project-slug.

   Example:

   apiVersion: backstage.io/v1alpha1
   kind: Component
   metadata:
     name: backstage
     description: backstage.io
     annotations:
       github.com/project-slug: 'backstage/backstage'
   spec:
     type: website
     lifecycle: production
     owner: user:guest

Standalone app requirements

1. Install the plugin dependency in your Backstage app package:

# From your Backstage root directory
yarn --cwd packages/app add @backstage-community/plugin-github-actions

2. Add to the app EntityPage component:

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubActionsContent,
  isGithubActionsAvailable,
} from '@backstage-community/plugin-github-actions';

// You can add the tab to any number of pages, the service page is shown as an
// example here
const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs... */}
    <EntityLayout.Route path="/github-actions" title="GitHub Actions">
      <EntityGithubActionsContent />
    </EntityLayout.Route>

3. Run the app with yarn start and the backend with yarn start-backend. Then navigate to /github-actions/ under any entity.

Self-hosted / Enterprise GitHub

The plugin will try to use backstage.io/source-location or backstage.io/managed-by-location annotations to figure out the location of the source code.

1. Add the host and apiBaseUrl to your app-config.yaml

# app-config.yaml

integrations:
  github:
    - host: 'your-github-host.com'
      apiBaseUrl: 'https://api.your-github-host.com'

Features

• List workflow runs for a project
• Dive into one run to see a job steps
• Retry runs
• Pagination for runs

Limitations

• There is a limit of 100 apps for one OAuth client/token pair
• The OAuth application must be at the GitHub organization level in order to display the workflows. If you do not see any workflows, confirm the OAuth application was created in the organization and not a specific user account.

Optional Workflow Runs Card View

Github Workflow Runs optional UI to show in Card view instead of table, with branch selection option

// You can add the tab to any number of pages, the service page is shown as an
// example given here
const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs... */}
    <EntityLayout.Route path="/github-actions" title="GitHub Actions">
      <EntityGithubActionsContent view='cards' />
    </EntityLayout.Route>