See your servers, your clouds, your metrics all in one place
With this plugin, you can embed Datadog graphs and dashboards into your instance of Backstage. Datadog is a monitoring service for cloud-scale applications, providing monitoring of servers, databases, tools, and services through a SaaS-based data analytics platform.
Install the Datadog plugin into Backstage.
cd packages/app
yarn add @roadiehq/backstage-plugin-datadog
Add the Datadog plugin to the list of plugins.
// packages/app/src/plugins.ts
export { plugin as Datadog } from '@roadiehq/backstage-plugin-datadog';
Add a Datadog card to the overview tab of the EntityPage.tsx source file
// packages/app/src/components/catalog/EntityPage.tsx
import {
Router as DatadogRouter,
GraphWidget as DatadogGraphWidget,
isDatadogGraphAvailable as isDatadogWidgetAvailable,
} from '@backstage/backstage-plugin-datadog';
const ServiceEntityPage = ({ entity }: { entity: Entity }) => (
<EntityPageLayout>
<EntityPageLayout.Content
path="/datadog/*"
title="datadog"
element={ }
/>
</EntityPageLayout>
</EntityPageLayout>
);
Add widget to your Overview tab.
// packages/app/src/plugins.ts
const OverviewContent = ({ entity }: { entity: Entity }) => (
<Grid container spacing={3} alignItems="stretch">
...
{isDatadogWidgetAvailable(entity) && (
<Grid item>
<DatadogGraphWidget entity={entity} />
</Grid>
)}
...
</Grid>
);
Navigate to the dashboards list by hovering over dashboards on the page’s left-hand side and selecting the dashboard list.
Select a dashboard from this list.
Within the dashboard you have chosen, click the settings cog on the screen’s right-hand side, circled in red.
Copy the URL from the Sharing textbox.
This URL is the value you need for the datadoghq.com/dashboard-url
annotation.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: sample-service
description: |
A sample service
annotations:
datadoghq.com/dashboard-url: <<DATADOGURL>>
Click on the Share tab, choose a timeframe, graph size and legend. Click generate the embedded code.
Copy the token value that is highlighted in the red square.
this token is the value you need for the datadoghq.com/graph-token
annotation
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: sample-service
description: |
A sample service
annotations:
datadoghq.com/graph-token: <<TOKEN>
Sharing Datadog dashboards and graphs makes them public on the internet and accessible by anyone with the URL.
Make sure you do not share these URLs with untrusted actors.
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.