Skip to content
Snippets Groups Projects
Commit 4ecff147 authored by Sarah Yasonik's avatar Sarah Yasonik
Browse files

Add docs for Grafana integration and embeds

Monitoring features now include the ability to embed grafana
metrics directly in GitLab Flavored Markdown. Added as a part of
#31376
parent 22c497f3
No related branches found
No related tags found
No related merge requests found
Pipeline #88752551 failed
doc/user/project/integrations/img/grafana_integration.png

160 KiB

doc/user/project/integrations/img/grafana_panel.png

248 KiB

doc/user/project/integrations/img/grafana_sharing_dialog.png

171 KiB

doc/user/project/integrations/img/http_proxy_access.png

155 KiB

doc/user/project/integrations/img/rendered_grafana_embed.png

298 KiB

doc/user/project/integrations/img/select_query_variables.png

40.2 KiB

......@@ -389,6 +389,8 @@ Prometheus server.
## Embedding metric charts within GitLab Flavored Markdown
### Embedding GitLab-managed Kubernetes metrics
> [Introduced][ce-29691] in GitLab 12.2.
It is possible to display metrics charts within [GitLab Flavored Markdown](../../markdown.md#gitlab-flavored-markdown-gfm).
......@@ -414,9 +416,14 @@ The following requirements must be met for the metric to unfurl:
![Embedded Metrics](img/embed_metrics.png)
### Embedding live Grafana charts
### Embedding Grafana charts
Metrics managed in Grafana can be embedded within GitLab Flavored Markdown.
It is also possible to embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html) charts within issues, as a [Direct Linked Rendered Image](https://grafana.com/docs/reference/sharing/#direct-link-rendered-image).
#### Embedding charts from a public instance
It is possible to embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html) charts within issues, as a [Direct Linked Rendered Image](https://grafana.com/docs/reference/sharing/#direct-link-rendered-image).
The sharing dialog within Grafana provides the link, as highlighted below.
......@@ -435,6 +442,51 @@ This will render like so:
<img src="https://dashboards.gitlab.com/render/d-solo/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&panelId=1247&width=1000&height=300"/>
#### Embedding charts from a private instance as GitLab charts
> [Introduced][ce-29691] in GitLab 12.4.
Settings for integration with a Grafana instance are on a per-project basis. This will allow a user to generate 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.
Pre-requisites for embedding from a private 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](img/http_proxy_access.png)
##### Setting up the Grafana integration
1. [Generate an Admin-level API Token in Grafana.](https://grafana.com/docs/http_api/auth/#create-api-token)
2. In GitLab, navigate to the project you wish to configure embeds for.
3. Navigate to **Settings > Operations > Grafana Authentication**.
![Grafana Integration Form](img/grafana_integration.png)
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*.
##### Generating a link to a chart
1. In Grafana, navigate to the dashboard you wish to embed a panel from.
![Grafana Metric Panel](img/grafana_panel.png)
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](img/select_query_variables.png)
3. Open the sharing dialog within Grafana, navigating to the **Link** tab.
4. Ensure the *Current time range* and *Template variable* options are toggled *On*.
![Grafana Sharing Dialog](img/grafana_sharing_dialog.png)
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](img/rendered_grafana_embed.png)
## Troubleshooting
If the "No data found" screen continues to appear, it could be due to:
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment