Add the plugin to your frontend app:
cd packages/app && yarn add @k-phoen/backstage-plugin-grafana
Configure the plugin in app-config.yaml
. The proxy endpoint described below will allow the frontend
to authenticate with Grafana without exposing your API key to users.
Create an API key if you don't already have one. Viewer
access will be enough.
# app-config.yaml
proxy:
'/grafana/api':
# May be a public or an internal DNS
target: https://grafana.host/
headers:
Authorization: Bearer ${GRAFANA_TOKEN}
grafana:
# Publicly accessible domain
domain: https://monitoring.company.com
# Is unified alerting enabled in Grafana?
# See: https://grafana.com/blog/2021/06/14/the-new-unified-alerting-system-for-grafana-everything-you-need-to-know/
# Optional. Default: false
unifiedAlerting: false
Expose the plugin to Backstage:
// packages/app/src/plugins.tsx
// other plugins...
export { grafanaPlugin } from '@k-phoen/backstage-plugin-grafana';
That's it! You can now update your entities pages to display alerts or dashboards related to them.