Website: https://github.com/actions
TBD
Create an OAuth App in your GitHub organization, setting the callback URL to:
http://localhost:7007/api/auth/github/handler/frame
Replacing localhost:7007
with the base URL of your backstage backend instance.
Note: This setup can also be completed with a personal GitHub account.
Keep in mind that using a personal account versus an organization account will affect which repositories the app can access.
-
Take the Client ID and Client Secret from the newly created app's settings page and you can do either:
- Put them into
AUTH_GITHUB_CLIENT_ID
andAUTH_GITHUB_CLIENT_SECRET
environment variables. - Add them to the app-config like below:
auth: providers: github: development: clientId: ${AUTH_GITHUB_CLIENT_ID} clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
- Put them into
-
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
- Install the plugin dependency in your Backstage app package:
# From your Backstage root directory
yarn --cwd packages/app add @backstage-community/plugin-github-actions
Note: If you are using GitHub auth to sign in, you may already have the GitHub provider, if it is not the case, install it by running:
yarn --cwd packages/backend add @backstage/plugin-auth-backend-module-github-providerAnd add the following dependency to your backend index file:
backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));
- 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" if={isGithubActionsAvailable}>
<EntityGithubActionsContent />
</EntityLayout.Route>
- Run the app with
yarn start
and the backend withyarn start-backend
. Then navigate to/github-actions/
under any entity.
Follow this section if you are using Backstage's new frontend system.
Import githubActionsPlugin
in your App.tsx
and add it to your app's features
array:
import githubActionsPlugin from '@backstage-community/plugin-github-actions/alpha';
// ...
export const app = createApp({
features: [
// ...
githubActionsPlugin,
// ...
],
});
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.
- Add the
host
andapiBaseUrl
to yourapp-config.yaml
# app-config.yaml
integrations:
github:
- host: 'your-github-host.com'
apiBaseUrl: 'https://api.your-github-host.com'
- List workflow runs for a project
- Dive into one run to see a job steps
- Retry runs
- Pagination for runs
- There is a limit of 100 apps for one OAuth client/token pair
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>