【入門編】Grafanaキャンバスパネル（Canvas Panel）の極意：社内向けカスタムUI・インフラ系統図の作成手法 – 運用監視・オブザーバビリティ活用バイブル

Grafana Canvasパネルの極意：システムの状態を「一瞬で直感する」ためのUI構築術

こんにちは。オブザーバビリティの世界へようこそ。
多くのエンジニアが「メトリクスの海」で溺れています。数百ものパネルが並ぶダッシュボードを見て、「結局、今どこが死んでいるのか？」を判断するのに時間をかけていませんか。

今日教えるのは、Grafana Canvasパネルを用いた「直感的なインフラ系統図」の作り方です。これは単なるお絵描きではありません。「システムが何を感じているか」をオペレーターに瞬時に伝えるための、動的なインターフェース構築術です。

これをマスターすれば、アラートメールの山に埋もれる日々から解放され、障害発生時に「ここだ！」と即座に指を指せるようになります。

—

従来のグラフ（Time Seriesなど）は「過去の推移」を見るのには適していますが、「現在の依存関係」を把握するには不向きです。

Canvasパネルを使うと、以下が可能になります。

「数字」を「状況」に変える力。それがCanvasパネルです。

—

まずは、Grafana（v9.2以降）で「キャンバス」を配置しましょう。

1. ダッシュボードで「Add visualization」を選択。
2. 「Canvas」を選択。
3. 右側の設定パネルで「Elements」をクリック。

まずは、単純な矩形（Rectangle）を配置し、CPU負荷率が80%を超えたら赤く点灯する仕組みを作ります。

1. Elements から「Rectangle」を追加。
2. 右側の設定項目にある 「Fill」 を見つけ、色の横にある「データ連携（Data linkアイコン）」をクリック。
3. 「Color mapping」 を選択し、以下のように閾値を設定します。

これで、指定したメトリクス（例: `node_cpu_utilization`）が80を超えると、パネル上の箱が自動的に赤く染まります。これが「動的UI」の第一歩です。

—

ここからが本番です。巷の解説記事では触れられない「プロの技」を伝授します。

系統図のアイコンを自作する場合、InkscapeやFigmaでSVGを作成しますが、「IDの整理」が命です。

1. Canvasパネルの Elements から「SVG」を選択。
2. 作成したSVGファイルをドラッグ＆ドロップ。
3. 重要: インポートしたSVG内の各要素は、Canvas上で個別のオブジェクトとして認識されます。

これが「現場で震えるほど役立つ」テクニックです。
Canvas上の特定のアイコン（例：DBアイコン）に対し、以下の「Data mapping」を行います。

// 擬似的なロジックの概念
// メトリクス：db_connection_errors > 0 なら「警告状態」とみなす
// Elementsの「Text」要素に、最新の値を動的にバインドする

アイコンの `opacity`（透明度）や `fill`（塗りつぶし）を、エラートラッキングのクエリ結果と連動させてください。例えば、「エラー率が急上昇した瞬間に、そのサービスのアイコンだけが点滅し、周辺のサービスとの通信線が赤くなる」という演出が可能です。

—

系統図を作る際、初心者は情報を詰め込みすぎます。しかし、オブザーバビリティの神髄は「異常時以外は主張しないこと」です。

こうすることで、オペレーターは「脳のメモリ」を消費せずに、異常箇所を瞬時に発見できるようになります。

—

1. まずはシンプルに: 1つのノードと1つのメトリクスから始めてください。
2. SVGを整備: アイコンのID管理を徹底するだけで、修正コストが劇的に下がります。
3. 動的演出を実装: 閾値による色変化を試し、次にアニメーション（回転や点滅）を加えてみてください。

「監視」は、単なる記録ではありません。システムと対話するためのインターフェースです。
Grafana Canvasで、あなた自身の「最強の地図」を作り上げてください。

もし、設定で行き詰まったら……その時は、またこの場所に戻ってきてください。次は、より深い「クエリ最適化とCanvas連動の極意」を伝授します。

さあ、あなたのダッシュボードに命を吹き込みに行きましょう！