diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-15 09:09:35 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-03-15 09:09:35 +0300 |
commit | 458af51866708509781619ba1ead051f4b80cb63 (patch) | |
tree | a352cd03566a1356c5689f22a337ff27fa6fd036 /doc/operations/metrics | |
parent | 6ed45110539553d7154c874bc94fbac4c24b46be (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'doc/operations/metrics')
-rw-r--r-- | doc/operations/metrics/embed_grafana.md | 101 | ||||
-rw-r--r-- | doc/operations/metrics/img/grafana_embedded.png | bin | 28071 -> 0 bytes | |||
-rw-r--r-- | doc/operations/metrics/img/grafana_live_embed.png | bin | 44603 -> 0 bytes | |||
-rw-r--r-- | doc/operations/metrics/img/grafana_panel_v12_5.png | bin | 44193 -> 0 bytes | |||
-rw-r--r-- | doc/operations/metrics/img/grafana_sharing_dialog_v12_5.png | bin | 41203 -> 0 bytes | |||
-rw-r--r-- | doc/operations/metrics/img/http_proxy_access_v12_5.png | bin | 47813 -> 0 bytes | |||
-rw-r--r-- | doc/operations/metrics/img/select_query_variables_v12_5.png | bin | 7368 -> 0 bytes |
7 files changed, 51 insertions, 50 deletions
diff --git a/doc/operations/metrics/embed_grafana.md b/doc/operations/metrics/embed_grafana.md index f9db3750bb9..2548e81813b 100644 --- a/doc/operations/metrics/embed_grafana.md +++ b/doc/operations/metrics/embed_grafana.md @@ -4,75 +4,76 @@ group: Health info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments --- -# Embedding Grafana charts **(FREE)** +# Embed Grafana panels in Markdown **(FREE)** -Grafana metrics can be embedded in [GitLab Flavored Markdown](../../user/markdown.md). +Grafana panels can be embedded in [GitLab Flavored Markdown](../../user/markdown.md). You can +embed Grafana panels using either: -## Embedding charts via Grafana rendered images +- [Grafana-rendered images](#use-grafana-rendered-images). +- [Grafana API](#use-integration-with-grafana-api). -You can embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html) -charts in issues as a -[direct linked rendered image](https://grafana.com/docs/grafana/latest/reference/share_panel/#direct-link-rendered-image). Your Grafana instance must be available to the -target user, either as a public dashboard or on the same network. The -**Direct link rendered image** sharing dialog within Grafana provides the link: +## Use Grafana-rendered images -![Grafana Direct Linked Rendered Image](img/grafana_live_embed.png) +You can embed live [Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html) panels as a +[direct linked rendered image](https://grafana.com/docs/grafana/latest/reference/share_panel/#direct-link-rendered-image). +Your Grafana instance must: -For this embed to display correctly, the +- Be available to the target user, either as a public dashboard or on the same network. +- Have [Grafana Image Renderer](https://grafana.com/grafana/plugins/grafana-image-renderer) installed. -Copy the link and add an image tag as [inline HTML](../../user/markdown.md#inline-html) -in your Markdown. You can tweak the query parameters to meet your needs, such as -removing the `&from=` and `&to=` parameters to display a live chart. Here is example -markup for a live chart from a GitLab public dashboard: +To use Grafana-rendered images: -```html -<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"/> -``` +1. Go to the dashboard containing the panel in Grafana. +1. From the panel's menu, select **Share**. +1. Select the **Direct link rendered image** button, which provides the link. +1. Copy the link and add an image tag as [inline HTML](../../user/markdown.md#inline-html) in your + Markdown in the format `<img src="your_link"/>`. You can tweak the query parameters to meet your needs, such as removing the `&from=` + and `&to=` parameters to display a live panel. -This markup renders a graph of `5xx` errors, like this: - -![Grafana dashboard embedded preview](img/grafana_embedded.png) - -## Embedding charts via integration with Grafana HTTP API +## Use integration with Grafana API > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/31376) in GitLab 12.5. -Each project can support integration with one Grafana instance. This configuration -enables you to copy a link to a panel in Grafana, then paste it into a GitLab Markdown -field. The chart renders in the GitLab chart format. To embed charts -from a Grafana instance, the data source must: +Each project can support integration with one Grafana instance. This enables you to copy a link to a +panel in Grafana, then paste it into a GitLab Markdown field. The panel renders in the GitLab panel +format. To embed panels from a Grafana instance, the data source must be: -1. Be a Prometheus instance. -1. Be proxyable, so the HTTP Access setting should be set to `Server`: +- A Prometheus instance. +- Proxyable, so the **HTTP > Access** setting for the Grafana data source should be set to + **Server (default)**. - ![HTTP Proxy Access](img/http_proxy_access_v12_5.png) +### Set up Grafana integration -## Setting up the Grafana integration +To set up the Grafana API in Grafana: 1. In Grafana, [generate an Admin-level API Token](https://grafana.com/docs/grafana/latest/http_api/auth/#create-api-token). -1. In your GitLab project, navigate to **Settings > Operations > Grafana Authentication**. +1. In your GitLab project, go to **Settings > Operations** and expand the **Grafana authentication** + section. 1. To enable the integration, check the **Active** checkbox. 1. For **Grafana URL**, enter the base URL of the Grafana instance. -1. For **API Token**, enter the Admin API Token you just generated. +1. For **API Token**, enter the Admin API token you just generated. 1. Click **Save Changes**. -## Generating a link to a chart +### Generate a link to a panel + +To generate a link to a panel: -1. In Grafana, navigate to the dashboard you wish to embed a panel from. - ![Grafana Metric Panel](img/grafana_panel_v12_5.png) -1. 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_v12_5.png) -1. 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 attempts to embed the first supported panel on the dashboard (if available). +1. In Grafana, go to the dashboard you wish to embed a panel from. +1. In the upper-left corner of the page, select a specific value for each variable required for the + queries in the dashboard. +1. 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 button instead, GitLab attempts to embed the first supported + panel on the dashboard (if available). 1. If your Prometheus queries use Grafana's custom template variables, ensure the - **Template variables** option is toggled to **On**. Of Grafana global template - variables, only `$__interval`, `$__from`, and `$__to` are supported. -1. Toggle **On** the **Current time range** option to specify the time range of - the chart. Otherwise, the default range is the last 8 hours. - ![Grafana Sharing Dialog](img/grafana_sharing_dialog_v12_5.png) -1. Click **Copy** to copy the URL to the clipboard. -1. In GitLab, paste the URL into a Markdown field and save. The chart takes a few - moments to render. - ![GitLab Rendered Grafana Panel](img/rendered_grafana_embed_v12_5.png) + **Template variables** option is set to on. Only the Grafana global template variables + `$__interval`, `$__from`, and `$__to` are supported. +1. Set the **Current time range** option to on, to specify the time range of the panel. Otherwise, + the default range is the last 8 hours. +1. Select **Copy** to copy the URL to the clipboard. +1. In GitLab, paste the URL into a Markdown field and save. The panel takes a few moments to render. + +See the following example of a rendered panel. + +![GitLab Rendered Grafana Panel](img/rendered_grafana_embed_v12_5.png) diff --git a/doc/operations/metrics/img/grafana_embedded.png b/doc/operations/metrics/img/grafana_embedded.png Binary files differdeleted file mode 100644 index c7946aa4b10..00000000000 --- a/doc/operations/metrics/img/grafana_embedded.png +++ /dev/null diff --git a/doc/operations/metrics/img/grafana_live_embed.png b/doc/operations/metrics/img/grafana_live_embed.png Binary files differdeleted file mode 100644 index 91970cd379a..00000000000 --- a/doc/operations/metrics/img/grafana_live_embed.png +++ /dev/null diff --git a/doc/operations/metrics/img/grafana_panel_v12_5.png b/doc/operations/metrics/img/grafana_panel_v12_5.png Binary files differdeleted file mode 100644 index 18c17b910cd..00000000000 --- a/doc/operations/metrics/img/grafana_panel_v12_5.png +++ /dev/null diff --git a/doc/operations/metrics/img/grafana_sharing_dialog_v12_5.png b/doc/operations/metrics/img/grafana_sharing_dialog_v12_5.png Binary files differdeleted file mode 100644 index fae62dd50df..00000000000 --- a/doc/operations/metrics/img/grafana_sharing_dialog_v12_5.png +++ /dev/null diff --git a/doc/operations/metrics/img/http_proxy_access_v12_5.png b/doc/operations/metrics/img/http_proxy_access_v12_5.png Binary files differdeleted file mode 100644 index 0036a916a12..00000000000 --- a/doc/operations/metrics/img/http_proxy_access_v12_5.png +++ /dev/null diff --git a/doc/operations/metrics/img/select_query_variables_v12_5.png b/doc/operations/metrics/img/select_query_variables_v12_5.png Binary files differdeleted file mode 100644 index 23503577327..00000000000 --- a/doc/operations/metrics/img/select_query_variables_v12_5.png +++ /dev/null |