OpsGenie logo

Backstage OpsGenie Plugin

View OpsGenie alerts and incidents inside Backstage.

Created by K-Phoen

Available on Roadie
A screenshot of the OpsGenie plugin.

See the OpsGenie Backstage plugin in action

Installation steps

Install the plugin.

cd packages/app
yarn add @k-phoen/backstage-plugin-opsgenie

Configure the plugin in app-config.yaml. Add a proxy API endpoint and OpsGenie domain name. See Creating an OpsGenie API key for more information.

# app-config.yaml
    target: https://api.opsgenie.com
      Authorization: GenieKey ${OPSGENIE_API_KEY}

  domain: https://myaccount.app.opsgenie.com/

Add a route to the OpsGeniePage component.

// packages/app/src/App.tsx
import { OpsgeniePage } from '@k-phoen/backstage-plugin-opsgenie';

// ...

const AppRoutes = () => (
    /// ...
    <Route path="/opsgenie" element={<OpsgeniePage />} />
    // ...

Add a link to the sidebar.

// packages/app/src/components/Root/Root.tsx
<SidebarItem icon={ExtensionIcon} to="/opsgenie" text="OpsGenie" />

Select the OpsGenie link on the sidebar to view who is on call, alerts and incidents.

Found a mistake? Update these instructions.

Things to know

The OpsGenie plugin is a frontend plugin that displays OpsGenie alerts, incidents and on-call information in Backstage. The plugin includes two components that can be integrated into Backstage:

  1. The OpsGeniePage routable extension component which produces a standalone page with the following capabilities:
    • view a summary of who is currently on call
    • view and search a list of active alerts with the option of acknowledging or closing alerts directly from Backstage
    • view and search a list of incidents
  2. The EntityOpsgenieAlertsCard component which can display recent alerts for a specific component.

Creating an OpsGenie API key

An OpsGenie API key with full access rights is required for the plugin to connect to your OpsGenie domain. Write access is required to allow the plugin to make updates, for example to be able to acknowledge an alert directly from Backstage.

An API key can be created within the Settings area of your OpsGenie account:

Create an OpsGenie API key

Save your API key to the OPSGENIE_API_KEY environment available to make it available to the plugin.

Display alerts on the component overview page

The EntityOpsgenieAlertsCard component can be added to EntityPage.tsx to display a list of the most recent alerts for components that have the an OpsGenie annotation. For example, to add the alert card to the Overview tab:

  1. Add the EntityOpsgenieAlertsCard component to EntityPage.tsx:

    // packages/app/src/components/catalog/EntityPage.tsx
    import {
    } from '@k-phoen/backstage-plugin-opsgenie';
    // ...
    const overviewContent = (
      <Grid container spacing={3} alignItems="stretch">
        <Grid item md={6}>
          <EntityAboutCard variant="gridItem" />
        <Grid item md={6}>
          {/* OpsGenie alert card start */}
            <EntitySwitch.Case if={isOpsgenieAvailable}>
              <EntityOpsgenieAlertsCard title="OpsGenie Alerts" />
          {/* OpsGenie alert card end */}
        <Grid item md={4} xs={12}>
          <EntityLinksCard />
        <Grid item md={8} xs={12}>
          <EntityHasSubcomponentsCard variant="gridItem" />
  2. Add the OpsGenie annotation to the component’s catalog-info.yaml file:

        opsgenie.com/component-selector: 'tag:"service:backstage-sample-service"'
  3. Log into app.opsgenie.com and create an alert on the Alerts tab.

    Create an OpsGenie alert

    Make sure the alert’s tag matches the tag in the annotation added in step 2.

  4. View the component in Backstage to see the list of alerts:

    View component alerts on the overview page

Prefer a no-code Backstage setup?

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.

We will never sell or share your email address.