Embedding Grafana charts

Grafana metrics can be embedded in GitLab Flavored Markdown.

Embedding charts via Grafana Rendered Images

It is possible to embed live Grafana charts in issues, as a direct linked rendered image.

The sharing dialog within Grafana provides the link, as highlighted below.

Grafana Direct Linked Rendered Image

Note: For this embed to display correctly, the Grafana instance must be available to the target user, either as a public dashboard, or on the same network.

Copy the link and add an image tag as inline HTML in your Markdown. You may tweak the query parameters as required. For instance, removing the &from= and &to= parameters will give you a live chart. Here is example markup for a live chart from GitLab’s public dashboard: 

<img src="https://dashboards.gitlab.com/d/RZmbBr7mk/gitlab-triage?orgId=1&refresh=30s&var-env=gprd&var-environment=gprd&var-prometheus=prometheus-01-inf-gprd&var-prometheus_app=prometheus-app-01-inf-gprd&var-backend=All&var-type=All&var-stage=main&from=1580444107655&to=1580465707655"/>

This will render like so:

Grafana dashboard embedded preview

Embedding charts via integration with Grafana HTTP API

GitLab 12.5で導入されました。

Each project can support integration with one Grafana instance. This configuration allows a user to copy a link to a panel in Grafana, then paste it into a GitLab Markdown field. The chart will be rendered in the GitLab chart format.

Prerequisites for embedding from a Grafana instance:

  1. The datasource must be a Prometheus instance.
  2. The datasource must be proxyable, so the HTTP Access setting should be set to Server.

HTTP Proxy Access

Setting up the Grafana integration

  1. Generate an Admin-level API Token in Grafana.
  2. In your GitLab project, navigate to Settings > Operations > Grafana Authentication.
  3. To enable the integration, check the “Active” checkbox.
  4. For “Grafana URL”, enter the base URL of the Grafana instance.
  5. For “API Token”, enter the Admin API Token you just generated.
  6. Click Save Changes.
  1. In Grafana, navigate to the dashboard you wish to embed a panel from. Grafana Metric Panel
  2. In the upper-left corner of the page, select a specific value for each variable required for the queries in the chart. Select Query Variables
  3. In Grafana, click on a panel’s title, then click Share to open the panel’s sharing dialog to the Link tab. If you click the dashboard’s share panel instead, GitLab will attempt to embed the first supported panel on the dashboard (if available).
  4. If your Prometheus queries use Grafana’s custom template variables, ensure that the “Template variables” option is toggled to On. Of Grafana global template variables, only $__interval, $__from, and $__to are currently supported. Toggle On the “Current time range” option to specify the time range of the chart. Otherwise, the default range will be the last 8 hours. Grafana Sharing Dialog
  5. Click Copy to copy the URL to the clipboard.
  6. In GitLab, paste the URL into a Markdown field and save. The chart will take a few moments to render. GitLab Rendered Grafana Panel