Embed Datadog graphs and dashboards into 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.
This readme will show you how to
- Setup and integrate the plugin into Backstage.
- Obtain the dashboard URL and graph tokens from Datadog that you will need for your metadata.
- Adding the annotations and the values from Datadog to your component's metadata file.
In order to make testing and deployment of our plugins easier we are migrating all Roadie plugins to a monorepo at https://github.com/RoadieHQ/roadie-backstage-plugins. The plugins will still be published to the same place on NPM and will have the same package names so nothing should change for consumers of these plugins.
- In the packages/app directory of your backstage instance, add the plugin as a package.json dependency:
$ yarn add @roadiehq/backstage-plugin-datadog- import the plugin to the entityPage.tsx source file:
import {
EntityDatadogContent,
EntityDatadogGraphCard,
isDatadogGraphAvailable
} from '@roadiehq/backstage-plugin-datadog';- Add a Datadog card to the overview tab to the entityPage.tsx source file:
const overviewContent = (
<Grid container spacing={3} alignItems="stretch">
...
<EntitySwitch>
<EntitySwitch.Case if={isDatadogGraphAvailable}>
<Grid item>
<EntityDatadogGraphCard/>
</Grid>
</EntitySwitch.Case>
</EntitySwitch>
...
</Grid>
);- Add a Datadog tab to the entityPage.tsx source file:
const serviceEntityPage = (
<EntityPageLayout>
...
<EntityLayout.Route path="/datadog" title="Datadog">
<EntityDatadogContent />
</EntityLayout.Route>
...
</EntityPageLayout>
)Datadog embedded graph is using datadoghq.euas default top-level domain, when other is not specified. If you are using other domain, you need to specify it with corresponding annotations datadoghq.com/site.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: sample-service
description: |
A sample service
annotations:
datadoghq.com/site: <<DATADOGDOMAIN>>- Login to your Datadog account.
-
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-urlannotation.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: sample-service
description: |
A sample service
annotations:
datadoghq.com/dashboard-url: <<DATADOGURL>>- Login to your Datadog account.
- Click on the graph pencil, circled in red, from your dashboard.
-
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-tokenannotation
-
In order to customize size of the graph you may specify
datadoghq.com/graph-sizeannotations and specify one of the following options: -
'small'
-
'medium'
-
'large'
-
'x-large';
If not specified, your graph will be 'medium' size per default.
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: sample-service
description: |
A sample service
annotations:
datadoghq.com/graph-token: <<TOKEN>
Navigate to the Datadog tab, and you will see your dashboard.
Navigate to the overview tab for your component. And you will see the graph.
A word of note regarding the security of the datadog dashboards and graphs.
The instructions provided for sharing dashboards and graphs generate a URL.
This URL is public to anyone who bears it.
If obtained by another actor, it is usable by them.
Everyone is welcome to contribute to this repository. Feel free to raise issues or to submit Pull Requests.
Join us on Discord.
- Get hosted, managed Backstage for your company: https://roadie.io
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent