Embedding Grafana charts · Gitlab 中文文檔

# Embedding Grafana charts > 原文：[https://docs.gitlab.com/ee/operations/metrics/embed_grafana.html](https://docs.gitlab.com/ee/operations/metrics/embed_grafana.html) * [Embedding charts via Grafana Rendered Images](#embedding-charts-via-grafana-rendered-images) * [Embedding charts via integration with Grafana HTTP API](#embedding-charts-via-integration-with-grafana-http-api) * [Setting up the Grafana integration](#setting-up-the-grafana-integration) * [Generating a link to a chart](#generating-a-link-to-a-chart) # Embedding Grafana charts[](#embedding-grafana-charts "Permalink") Grafana 指標可以嵌入到[GitLab 風味 Markdown 中](../../user/markdown.html) . ## Embedding charts via Grafana Rendered Images[](#embedding-charts-via-grafana-rendered-images "Permalink") 可以在問題中嵌入實時[Grafana](https://docs.gitlab.com/omnibus/settings/grafana.html)圖表，作為[直接鏈接的渲染圖像](https://grafana.com/docs/grafana/latest/reference/share_panel/#direct-link-rendered-image) . Grafana 中的共享對話框提供了鏈接，如下所示. [![Grafana Direct Linked Rendered Image](https://img.kancloud.cn/ca/8a/ca8a2a89656852c2920144df06d7670d_1554x896.png)](../../user/project/integrations/img/grafana_live_embed.png) **注意：**為了使此嵌入正確顯示，Grafana 實例必須可作為公共儀表板或在同一網絡上供目標用戶使用. 復制鏈接并在 Markdown 中將圖像標簽添加為[內聯 HTML](../../user/markdown.html#inline-html) . 您可以根據需要調整查詢參數. 例如，刪除`&from=`和`&to=`參數將為您提供實時圖表. 這是來自 GitLab 公共儀表板的實時圖表的示例標記： ``` <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"/> ``` 這將呈現為： [![Grafana dashboard embedded preview](https://img.kancloud.cn/c6/d2/c6d26fdf98688c33fc9cb2ee0b7c1458_1277x734.png)](../../user/project/integrations/img/grafana_embedded.png) ## Embedding charts via integration with Grafana HTTP API[](#embedding-charts-via-integration-with-grafana-http-api "Permalink") 在 GitLab 12.5 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/31376) . 每個項目可以支持與一個 Grafana 實例的集成. 此配置允許用戶將鏈接復制到 Grafana 中的面板，然后將其粘貼到 GitLab Markdown 字段中. 該圖表將以 GitLab 圖表格式呈現. 從 Grafana 實例嵌入的先決條件： 1. 數據源必須是 Prometheus 實例. 2. 數據源必須是可代理的，因此 HTTP 訪問設置應設置為`Server` . [![HTTP Proxy Access](https://img.kancloud.cn/ed/c6/edc670219caeb7c7861c243d5ffa344f_1200x382.png)](../../user/project/integrations/img/http_proxy_access_v12_5.png) ## Setting up the Grafana integration[](#setting-up-the-grafana-integration "Permalink") 1. [Generate an Admin-level API Token in Grafana.](https://grafana.com/docs/grafana/latest/http_api/auth/#create-api-token) 2. 在您的 GitLab 項目中，導航至**設置>操作> Grafana 身份驗證** . 3. 要啟用集成，請選中"活動"復選框. 4. 對于" Grafana URL"，輸入 Grafana 實例的基本 URL. 5. 對于" API 令牌"，輸入您剛生成的 Admin API 令牌. 6. Click **保存更改**. ## Generating a link to a chart[](#generating-a-link-to-a-chart "Permalink") 1. 在 Grafana 中，導航到要嵌入面板的儀表板. [![Grafana 公制面板](https://img.kancloud.cn/4f/16/4f161edb9598b36d7682db13f22e1b19_1200x705.png)](../../user/project/integrations/img/grafana_panel_v12_5.png) 2. 在頁面的左上角，為圖表中查詢所需的每個變量選擇一個特定值. [![選擇查詢變量](https://img.kancloud.cn/77/07/770730011b64e78b891940c61bdbe937_500x208.png)](../../user/project/integrations/img/select_query_variables_v12_5.png) 3. 在 Grafana 中，單擊面板的標題，然后單擊" **共享"**以將面板的共享對話框打開到" **鏈接"**選項卡. 如果您單擊*儀表板的*共享面板，則 GitLab 將嘗試在儀表板上嵌入第一個受支持的面板（如果有）. 4. 如果您的普羅米修斯查詢使用 Grafana 的自定義模板變量，確保"模板變量"選項切換為**開** . 在 Grafana 全局模板變量中，目前僅支持`$__interval` ， `$__from`和`$__to` . 切換**"**當前時間范圍"選項來指定圖表的時間范圍. 否則，默認范圍將是最近 8 小時. [![Grafana 共享對話框](https://img.kancloud.cn/9e/f6/9ef683769866bf9ad424751a560afc13_1200x673.png)](../../user/project/integrations/img/grafana_sharing_dialog_v12_5.png) 5. 單擊**復制**將 URL **復制**到剪貼板. 6. 在 GitLab 中，將該 URL 粘貼到 Markdown 字段中并保存. 該圖表將需要一些時間來呈現. [![GitLab 渲染的 Grafana 面板](https://img.kancloud.cn/91/82/9182059b4146da0dc1d41281c315509b_1044x952.png)](../../user/project/integrations/img/rendered_grafana_embed_v12_5.png)