3.11.3 カスタムアプリケーションへの組み込み

ダッシュボードをカスタムアプリケーションで表示する方法を示します。

  1. 組み込みたいダッシュボードを作成します。
    詳細は「ダッシュボードの作成・編集・削除」を参照してください。
  2. 作成したダッシュボードのURLを取得します。
    取得方法は「ダッシュボードのURL取得方法」を参照してください。
  3. 取得したダッシュボードのURLを変更します。
    • ドメインを「{{ .System.domain }}」に変更：別環境でも同一の定義を使用できます。
    • クエリパラメータにkiosk=trueを追加：kioskを有効にすることでメニューなどを非表示にすることができます。
    URLの例：
    https://dash.{{ .System.domain }}/d/syrgrdq/new-dashboard?orgId=1&from=now-6h&to=now&timezone=browser&var-pageSize=100&kiosk=true
  4. UIのYAML定義にIframeコンポーネントを配置します。
    • urlラベル：ダッシュボードのURLを指定
    • allowラベル：Iframeの内部からクリップボード操作を行うために以下を指定
      clipboard-read https://dash.{{.System.domain}}; clipboard-write https://dash.{{.System.domain}}
    Iframeコンポーネントの詳細は「（表）Iframeのプロパティ（UIバージョン1.1）」を参照してください。
メモメモ
Grafanaのキーボードショートカット機能は、Iframeコンポーネントを用いてカスタムアプリケーションにダッシュボードを組み込んだ場合も有効です。
Escキーはkioskモードを終了するショートカットで、iframeの中でkioskモードを終了することでメニューなどが表示されます。

【ダッシュボードのURL取得方法】

ダッシュボードを開いて画面の右上に表示される[Share]ボタンをクリックすると、URLを取得できます。
取得するURLの設定を変更してからURLを取得する場合は、以下の方法で行ってください。

  1. [Share]ボタンのドロップダウンを開きます。
  2. 「Share internally」を選択し、以下を設定します。
    • Lock time range：ダッシュボードを表示したときのデータの表示期間が、相対時間（現時点からの相対的な時間）か絶対時間（実際の日付や日時）かを指定します。
    • Shorten link：OFF
      ONにするとその環境のみで有効な環境となるため、検証環境から本番環境に移行すると無効なURLになります。また一定時間が経つと自動的に無効なURLになります。
    • Theme：通常はCurrentを指定します。Dark、Lightも指定可能です。
  3. [Copy link]ボタンをクリックします。