Grafanaチャートの埋め込み

GrafanaメトリクスはGitLab Flavored Markdownに埋め込むことができます。

Grafanaレンダリング画像によるChartの埋め込み

イシューにライブのGrafanaチャートを、直接リンクされたレンダリング画像として埋め込むことが可能です。

Grafana内の共有ダイアログは、以下のハイライトのようにリンクを提供します。

Grafana Direct Linked Rendered Image

注意:この埋め込みが正しく表示されるためには、Grafana インスタンスが公開ダッシュボードとして、または同じネットワーク上でターゲットユーザーが利用可能である必要があります。

リンクをコピーし、Markdown にインライン HTMLとして image タグを追加します。 クエリパラメータは必要に応じて変更してください。例えば、&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

Grafana HTTP APIとのインテグレーションによるChartの埋め込み

GitLab 12.5で導入されました。

各プロジェクトは1つのGrafanaインスタンスとのインテグレーションをサポートすることができます。 この設定により、ユーザーはGrafanaのパネルへのリンクをコピーし、GitLab Markdownフィールドに貼り付けることができます。 チャートはGitLabチャート形式でレンダリングされます。

Grafanaインスタンスから埋め込むための前提条件：

  1. データソースは Prometheus インスタンスでなければなりません。
  2. データソースはプロキシ可能でなければならないので、HTTPアクセス設定はServerに設定する必要があります。

HTTP Proxy Access

Grafanaインテグレーション設定

  1. Grafanaで管理者レベルのAPIトークンを生成します。
  2. GitLabプロジェクトで、Settings > Operations > Grafana Authenticationに移動します。
  3. インテグレーションを有効にするには、「アクティブ」チェックボックスをオンにします。
  4. Grafana URL」には、GrafanaインスタンスのベースURLを入力します。
  5. API Token」には、先ほど生成したAdmin API Tokenを入力します。
  6. 変更を保存］をクリックします。
  1. Grafanaで、パネルを埋め込みたいダッシュボードに移動します。Grafana Metric Panel
  2. ページの左上で、Chartのクエリに必要な各変数の特定の値を選択します。Select Query Variables
  3. Grafanaでは、パネルのタイトルをクリックし、共有(Share)をクリックしてパネルの共有ダイアログをリンクタブに開きます。_ダッシュボードの_共有パネルを代わりにクリックすると、GitLabはダッシュボードの最初にサポートされているパネルを埋め込もうとします（利用可能な場合）。
  4. PrometheusクエリがGrafanaのカスタムテンプレート変数を使用する場合、「テンプレート変数」オプションがOnに切り替わっていることを確認してください。 Grafanaグローバルテンプレート変数のうち、現在サポートされているのは$__interval、$__from、$__to のみです。 「現在の時間範囲」オプションをOnに切り替えて、チャートの時間範囲を指定します。 そうでない場合、デフォルトの範囲は過去8時間になります。Grafana Sharing Dialog
  5. コピー]をクリックすると、URLがクリップボードにコピーされます。
  6. GitLab の Markdown フィールドに URL を貼り付けて保存します。 Chart がレンダリングされるまで少し時間がかかります。GitLab Rendered Grafana Panel