Files
backstage/plugins/github-actions
KaemonIsland 7efee0f94c Prevent error message when owner/repo has not been set
The owner/repo variables are set to undefined during the first render of the WorkflowRunDetails component.

These undefined values are then passed to the useWorkflowRunsDetails hook and are returned as an error.

This causes a false error message to show for a split second.

The next render succesfully triggers when the owner/repo values get set, updating the details variable and returning the correct react component.

A new "loading" variable has been added that checks for loading values in addition to the details value existing.

I've also added an extra check for the error.message value considering it's used within the error message.

This prevents the false error message from displaying.

Signed-off-by: KaemonIsland <kaemonlovendahl@outlook.com>
2022-02-16 09:26:49 -07:00
..
2022-02-03 09:42:25 +00:00
2022-02-03 09:42:25 +00:00

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.
    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
cd packages/app
yarn add @backstage/plugin-github-actions
  1. Add to the app EntityPage component:
// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubActionsContent,
  isGithubActionsAvailable,
} from '@backstage/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>
  1. Run the app with yarn start and the backend with yarn start-backend. Then navigate to /github-actions/ under any entity.

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.