Rootly Integrations

⌘K
Back
Overview
Slack
Installation
Workflows
Commands
Mattermost
Installation
PagerDuty
Installation
Workflows
Alerts
Opsgenie
VictorOps (Splunk On-Call)
Jira
Jira (On-Premise)
Confluence
Confluence (On-Premise)
Service Now
Installation
Workflows
Google Docs
Statuspage.io
Importing Status Pages
Importing Templates
Creating a StatusPage Incident
Using Status Page Templates
Dropbox Paper
Notion
Quip
Grafana
Looker
New Relic
Installation
Alerts
Datadog
Installation
Alerts
Kubernetes
Honeycomb
Heroku
AWS Elastic Beanstalk
Gitlab
GitHub
Google Meet
Zoom
Webex
GoToMeeting
Microsoft Teams
Zendesk
Linear
Installation
Workflows
Shortcut
Airtable
Trello
Installation
Workflows
Asana
Installation
Workflows
Freshdesk
Installation
Workflows
Nobl9
Backstage
Installation
Twitter
Email
SMTP
SendGrid
Sentry
Rollbar
Prometheus
Zapier
API
Terraform
Pulumi
HashiCorp Vault
SSO
SCIM
Docs powered by
Archbee
Backstage

Installation

17min


The Rootly plugin is a frontend plugin that displays Rootly services, incidents in Backstage and can be found here: https://github.com/rootlyhq/backstage-plugin. The plugin includes three components that can be integrated into Backstage:

  • The RootlyPage routable extension component which produces a standalone page with the following capabilities:
    • View and search a list of entities and import/link them to rootly services
    • View and search a list of services
    • View and search a list of incidents
  • The RootlyOverviewCard component which produces a summary of your entity with incidents over last 30 days and ongoing incidents.
  • The RootlyIncidentsPage component which produces a dedicated page within your entity with details about ongoing and past incidents.

You can link and import entities in rootly services through Backstage Web UI or through annotations.

Creating an Rootly API key

Because of the features provided by the plugin, an API key with full access to your Rootly domain is required.

  • Read access on services is needed to list services, write access to link entities to services.
  • Read access on incidents needed to list incidents.
  1. Go to Profile -> Manage API Keys.
  2. Click on Generate New API Key button.
  3. Copy the key.

Backstage Setup

Add the plugin to your frontend app:

Text
|
cd packages/app && yarn add @rootly/backstage-plugin


Configure the plugin in app-config.yaml. The proxy endpoint described below will allow the frontend to authenticate with Rootly without exposing your API key to users.

YAML
|
# app-config.yaml
proxy:
  '/rootly/api':
    target: https://api.rootly.com
    headers:
      Authorization: Bearer ${ROOTLY_API_KEY}


Annotations

Available annotations are the following:

YAML
|
rootly.com/service-id: 7a328a08-6701-445e-a1ad-ca2fb913ed1e # Use service-id or service-slug. Not both.
rootly.com/service-slug: elasticsearch-staging # Use service-id or service-slug. Not both.
rootly.com/service-auto-import: enabled # This will auto import the entity as a rootly service if we don't find any.


Example

YAML
|
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: elasticsearch-prod
  description: |
   elasticsearch-prod
  annotations:
    github.com/project-slug: backstage/backstage
    backstage.io/techdocs-ref: dir:.
    lighthouse.com/website-url: https://rootly.com
    rootly.com/service-slug: elasticsearch-prod
spec:
  type: grpc
  owner: guests
  lifecycle: experimental


Global

RootlyPage component

Document image

Document image

Document image


Expose the Rootly global page:

JS
|
// packages/app/src/App.tsx
import { RootlyPage } from '@rootly/backstage-plugin';

// ...
const AppRoutes = () => (
  <FlatRoutes>
    // ...
    <Route path="/Rootly" element={<RootlyPage />} />
    // ...
  </FlatRoutes>
);


Add a link to the sidebar:

JS
|
// packages/app/src/components/Root/Root.tsx
import ExtensionIcon from '@material-ui/icons/ExtensionIcon';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      // ...
      <SidebarItem icon={ExtensionIcon} to="rootly" text="Rootly" />
      // ...
    </Sidebar>
  </SidebarPage>
);


Entity

RootlyOverviewCard component

Document image

JS
|
// packages/app/src/components/catalog/EntityPage.tsx
import { RootlyOverviewCard } from '@rootly/backstage-plugin/src/components/Entity';

// ...
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    // ...
    <Grid item md={6}>
      <RootlyOverviewCard />
    </Grid>
    // ...
  </Grid>
);


RootlyIncidentsPage component

Document image

JS
|
// packages/app/src/components/catalog/EntityPage.tsx
import { RootlyIncidentsPage } from '@rootly/backstage-plugin';

// ...
const websiteEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      {overviewContent}
    </EntityLayout.Route>

    // ...

    <EntityLayout.Route path="/docs" title="Docs">
      <EntityTechdocsContent />
    </EntityLayout.Route>

    <EntityLayout.Route path="/rootly" title="Rootly">
      <RootlyIncidentsPage />
    </EntityLayout.Route>
  </EntityLayout>
);

// ...
const serviceEntityPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      {overviewContent}
    </EntityLayout.Route>

    // ...

    <EntityLayout.Route path="/docs" title="Docs">
      <EntityTechdocsContent />
    </EntityLayout.Route>

    <EntityLayout.Route path="/rootly" title="Rootly">
      <RootlyIncidentsPage />
    </EntityLayout.Route>
  </EntityLayout>
);


Support

If you need help or more information about this integration, please contact support@rootly.com or use the lower right chat widget to get connected with an engineer.

Updated 13 Jun 2023
Did this page help you?
PREVIOUS
Nobl9
NEXT
Twitter
Docs powered by
Archbee
TABLE OF CONTENTS
Creating an Rootly API key
Backstage Setup
Annotations
Example
Global
RootlyPage component
Entity
RootlyOverviewCard component
RootlyIncidentsPage component
Support
Docs powered by
Archbee