Grafana Sceneの真髄：ダッシュボードを「静的な監視板」から「動的なオペレーション基盤」へ変貌させる技術
エンジニア諸君、既存のGrafanaダッシュボードに飽き飽きしていないか？
単に時系列データを眺め、閾値を超えたらアラートを飛ばす。そんな「監視」の時代は終わった。現代のオブザーバビリティにおいて、ダッシュボードは「システムと対話するためのUI」であるべきだ。
そこで登場するのが「Grafana Scene」だ。これは単なるダッシュボードのアップデートではない。GrafanaをReactフレームワークとして再定義し、ダッシュボード自体を一つの「業務アプリケーション」へと昇華させるためのアーキテクチャだ。
本稿では、お飾りのダッシュボードを卒業し、現場で圧倒的な速度でトラブルシューティングを完結させるための「極限のカスタムUI開発」を伝授する。
—
1. なぜ「Grafana Scene」なのか？（アーキテクチャの核心）
従来のダッシュボードは「パネルの集合体」だったが、Sceneは「状態を持つツリー構造（Scene Tree）」だ。
- 状態の集中管理: 全てのパネル、変数、クエリがオブジェクトモデルとして定義される。
- Reactネイティブ: これまでJSONのパッチワークに苦しんでいたダッシュボード定義が、TypeScriptのコードとして記述可能になる。
- 動的なUX: 「ボタンを押したら特定の時間範囲で、特定のクエリを再実行し、結果を外部APIへ投げ、そのレスポンスを別パネルに表示する」といった複雑なインタラクションを、ネイティブなReactコンポーネントとして実装できる。
—
2. 現場で震えるほど役立つ：開発効率を爆速にする「神」テクニック
A. 開発スピードを上げるショートカット＆設定
まず、Dashboard開発でマウスを握っている時間は無駄だ。
- `d + e`: ダッシュボード編集画面への即時遷移。
- `Shift + Space`: クエリの再実行（リロード）。
- Dashboard JSON Modelを直接叩け: 複雑なレイアウトはGUIで作るな。VS CodeでJSONを直接編集し、`Ctrl + S`で保存、ブラウザ即リロードのループを組め。
B. 絶対に入れるべき「神プラグイン」
- [Dynamic Text](https://grafana.com/grafana/plugins/marcusolsson-dynamictext-panel/): データに基づいて動的にHTML/Markdownを生成する。Sceneと組み合わせれば、独自の業務管理画面が完成する。
- [Business Intelligence (Business Insights)](https://grafana.com/grafana/plugins/volkovlabs-variable-panel/): 変数操作を極限まで自由にする。Sceneとの相性は抜群。
—
3. 実践：SceneでカスタムUXを実装する（ハンズオン構成）
Sceneを用いたカスタムパネルの核となるのは、`SceneObject`の拡張だ。以下のコードは、特定のボタン操作で「現在のメトリクスを一時的にフリーズし、そのスナップショットをチームに共有する」という独自機能を実装するイメージだ。
import { SceneObject, SceneObjectState, SceneComponentProps } from ‘@grafana/scenes’;
// 1. 独自のステートを定義
interface MyCustomState extends SceneObjectState {
isFrozen: boolean;
}
// 2. 独自のReactコンポーネントを実装
export const MyCustomToolbar = ({ model }: SceneComponentProps
const { isFrozen } = model.useState();
return (
);
};
【ベストプラクティス】:
業務アプリとして運用する場合、ダッシュボードの責務を分離せよ。
- データ収集層: クエリ結果を保持する`SceneQueryRunner`
- UI制御層: ユーザーの入力を受け取る`SceneObject`
- プレゼンテーション層: Reactコンポーネント
このレイヤー分けを意識するだけで、保守性が劇的に向上する。
—
4. チーム開発における「共有化の掟」
ダッシュボードが「誰でも触れるが、誰も編集できないゴミ箱」になっていないか？
1. Dashboard as Code (Terraform/Provisioning):
ダッシュボードは手動で触るな。`/var/lib/grafana/dashboards/`にJSONをデプロイし、Grafanaのプロビジョニング機能で管理せよ。
2. YAML/JSON構成の標準化:
全てのダッシュボードは以下の規約に従う。
# provision/dashboards/standard.yaml
apiVersion: 1
providers:
- name: ‘Infrastructure-Team’
folder: ‘General’
options:
path: /var/lib/grafana/dashboards/infra
# チーム全員で編集ルールを統一
disableDeletion: true
3. 変数の命名規則:
`$cluster`, `$namespace`, `$pod` は全ダッシュボードで共通化する。グローバル変数は `__` プレフィックスを付けるルールを徹底せよ。
—
5. テックリードからの提言
Grafana Sceneは、監視ツールという枠組みを超えた「インフラ・エンジニアのためのIDE」になりつつある。
ただグラフを並べるだけのダッシュボードは、もう誰も見ない。「次に何をすべきか」がUI上にガイドされ、クリック一つでアクションが完了する。 そんなオブザーバビリティの究極形を、Sceneを使って自らの手で描き出せ。
技術は使うためにあるのではない。支配するためにある。
さあ、コードを書いて、自分たちの運用環境を「最高のアート」へと昇華させよう。
質問があれば、いつでもコードレビューを依頼してくれ。現場からは以上だ。