The Rootly plugin is a frontend plugin that displays Rootly services, incidents in Backstage. 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.
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.
Add the plugin to your frontend app:
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.
# app-config.yaml
proxy:
'/rootly/api':
target: https://api.rootly.com
headers:
Authorization: Bearer ${ROOTLY_API_KEY}
Available annotations are the following:
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.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: elasticsearch-staging
description: |
elasticsearch-staging
annotations:
github.com/project-slug: backstage/backstage
backstage.io/techdocs-ref: dir:.
lighthouse.com/website-url: https://rootly.com
rootly.com/service-slug: elasticsearch-staging
rootly.com/service-auto-import: enabled
spec:
type: grpc
owner: guests
lifecycle: experimental
Expose the Rootly global page:
// 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:
// 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>
);
// packages/app/src/components/catalog/EntityPage.tsx
import { RootlyOverviewCard, isRootlyAvailable } from '@rootly/backstage-plugin';
// ...
const overviewContent = (
<Grid container spacing={3} alignItems="stretch">
// ...
<EntitySwitch>
<EntitySwitch.Case if={isRootlyAvailable}>
<Grid item sm={6}>
<RootlyOverviewCard />
</Grid>
</EntitySwitch.Case>
</EntitySwitch>
// ...
</Grid>
);
// 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">
<EntitySwitch.Case if={isRootlyAvailable}>
<Grid item sm={6}>
<RootlyIncidentsPage />
</Grid>
</EntitySwitch.Case>
</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>
);
This library is under the MIT license.