ClickStack を用いた可視化とダッシュボード
ClickStack はイベントの可視化をサポートしており、ClickStack UI (HyperDX) にはチャート機能が組み込まれています。これらのチャートはダッシュボードに追加し、他のユーザーと共有できます。
可視化は、トレース、メトリクス、ログ、または任意のユーザー定義のワイドイベントスキーマに基づいて作成できます.
可視化の作成
HyperDX の Chart Explorer インターフェイスを使用すると、メトリクス、トレース、ログを時間経過とともに可視化でき、データ分析用の簡易な可視化をすばやく作成できます。このインターフェイスは、ダッシュボード作成時にも再利用されます。以下のセクションでは、Chart Explorer を使用して可視化を作成する手順を説明します。
各可視化は、まず データソース を選択し、その後に メトリクス を指定し、必要に応じて フィルター式 と GROUP BY フィールドを設定するところから始まります。概念的には、HyperDX における可視化は、内部的には SQL の GROUP BY クエリとして表現されます。選択したディメンションに対して集計するメトリクスを定義します。
ClickStack は、text-to-chart 機能を使用して、自然言語のプロンプトからチャートを作成することもサポートしています。表示したい内容を記述すると、ClickStack が自動的に可視化を生成します。
たとえば、サービス名ごとのエラー数 (count()) をグラフ化することができます。
以下の例では、ガイド「Remote Demo Dataset」で説明している、sql.clickhouse.com で利用可能なリモートデータセットを使用します。play-clickstack.clickhouse.com にアクセスすることで、これらの例を再現することもできます。
可視化を作成する
次の例では、サービス名ごとに時間経過に沿って平均リクエスト時間をグラフ化します。これには、メトリクス、列 (SQL 式でも可) 、および集計フィールドを指定する必要があります。
上部メニューから Line/Bar の可視化タイプを選択し、その後 Traces (または play-clickstack.clickhouse.com を使用している場合は Demo Traces) データセットを選択します。次の値を設定します。
- Metric:
Average - Column:
Duration/1000 - Where:
<empty> - Group By:
ServiceName - Alias:
Average Time
SQL の WHERE 句または Lucene 構文を使用してイベントをフィルタリングできるほか、イベントを可視化する時間範囲も設定できます。複数系列にも対応しています。
たとえば、フィルター ServiceName:"frontend" を追加して、サービス frontend でフィルタリングします。さらに Add Series をクリックし、エイリアス Count を指定して、時間経過におけるイベント数を表す 2つ目の系列を追加します。
可視化は、メトリクス、トレース、ログなど、任意のデータソースから作成できます。ClickStack はこれらすべてをワイドイベント (wide event) として扱います。任意の 数値列 を時間経過でグラフ化でき、文字列、日付、数値 列をグループ化に使用できます。
この統一されたアプローチにより、一貫性があり柔軟なモデルを用いて、さまざまなテレメトリ種別にまたがるダッシュボードを構築できます。
ダッシュボードの作成
ダッシュボードは、関連する可視化をまとめて扱えるようにし、ユーザーがメトリクスを比較したり、パターンを並べて確認したりして、システム内の潜在的な根本原因を特定できるようにします。これらのダッシュボードは、アドホックな調査にも、継続的なモニタリング用として保存して利用することもできます。
グローバルフィルターはダッシュボード単位で適用でき、そのダッシュボード内のすべての可視化に自動的に伝播します。これにより、チャート間で一貫したドリルダウンが可能になり、サービスやテレメトリ種別をまたいだイベントの相関付けが容易になります。
以下では、ログとトレースのデータソースを使用して 2 つの可視化を持つダッシュボードを作成します。これらの手順は、ガイド「Remote Demo Dataset」で説明されているように、play-clickstack.clickhouse.com 上、もしくはローカルから sql.clickhouse.com 上のデータセットに接続することで再現できます。
Dashboards 画面に移動する
左側のメニューから Dashboards を選択します。続いて New Dashboard をクリックし、一時的なダッシュボードまたは保存済みのダッシュボードを作成します。
可視化を作成する – サービスごとの平均リクエスト時間
Add New Tile を選択して、可視化作成パネルを開きます。
上部メニューから可視化タイプとして Line/Bar を選択し、続いてデータセットとして Traces (もしくは play-clickstack.clickhouse.com を使用している場合は Demo Traces) を選択します。サービス名ごとの時間経過に伴う平均リクエスト時間を表示するチャートを作成するため、以下の値を設定します:
- Chart Name:
Average duration by service - Metric:
Average - Column:
Duration/1000 - Where:
<empty> - Group By:
ServiceName - Alias:
Average Time
Save をクリックする前に 再生 (play) ボタンをクリックします。
可視化のサイズを変更し、ダッシュボードの幅いっぱいに配置します。
可視化を作成する – サービスごとの時間経過に伴うイベント数
Add New Tile を選択して、可視化作成パネルを開きます。
上部メニューから可視化タイプとして Line/Bar を選択し、続いてデータセットとして Logs (もしくは play-clickstack.clickhouse.com を使用している場合は Demo Logs) を選択します。サービス名ごとの時間経過に伴うイベント数を表示するチャートを作成するため、以下の値を設定します:
- Chart Name:
Event count by service - Metric:
Count of Events - Where:
<empty> - Group By:
ServiceName - Alias:
Count of events
Save をクリックする前に 再生 (play) ボタンをクリックします。
可視化のサイズを変更し、ダッシュボードの幅いっぱいに配置します。
スパンのDurationのヒートマップタイルを追加する
ヒートマップのタイルは、各 (時間, 値) バケットに該当するイベント数を色付きのグリッドとして描画します。平均値や単一のパーセンタイルだけでなく、時間経過に伴う分布の形状を把握したい場合にヒートマップを使用します。レイテンシのヒートマップは、双峰性の Duration パターン、スロー・テールのクラスター、または折れ線グラフでは平均化されてしまうような急激な広がりを明らかにします。
ヒートマップタイルを追加するには:
Add New Tileをクリックします。- 上部メニューから可視化タイプとして
Heatmapを選択します。データソースのドロップダウンには、ソースタイプがTracesである ソースのみが表示されます。ヒートマップではトレースソースでのみ提供される span の継続時間カラムが必要になるため、ログ、メトリクス、セッションのソースは除外されます。 - 任意のトレースソースを名前で選択します。名前自体は任意で、重要なのはタイプのみです。
ソースを選択すると、ヒートマップに値が自動入力されます:
- 値: ソースの
Duration Expressionを現在の表示単位に合わせてスケーリングしたもの (たとえば、各イベントの span の Duration をナノ秒からミリ秒に変換するには(Duration)/1e6) - 件数:
count()
- チャート名を設定し、
Whereを使用して、パフォーマンスを観測したい特定のサービスまたは一連の操作にヒートマップの範囲を絞ります。 - 確認したい期間に合わせてタイムレンジを調整します。タイムレンジを広げると、短い時間枠では見えにくい分布の変化やレイテンシの二峰性パターンを捉えやすくなります。
以下の例では、24 時間のウィンドウにわたる単一サービスを示しており、そのスパンの Duration における高速パスと低速パスが 2 つの水平帯に明確に分離されています。
ヒートマップをさらにカスタマイズするには、Display Settings をクリックして、Scale (Log または Linear)、Value、および Count 式のドロワーを開きます。オプションの全一覧は、イベントデルタページの Customize the heatmap に記載されています。同じドロワーが再利用されます。
チャートをプレビューするには、Run をクリックしてから Save をクリックします。
保存されたタイルは、ダッシュボード上でヒートマップとして表示されます。任意のセルにカーソルを合わせると、バケットの範囲とイベント数を確認できます。
ヒートマップは 2 つの順次クエリとして実行されます。まず値の範囲を解決する小さな bounds クエリ、次にバケットごとのイベント数を集計する heatmap クエリです。両方のクエリは、確認またはコピーしたい場合、エディター内の Generated SQL から参照できます。
イベントデルタへのドリルダウン
レンダリングされたヒートマップタイルの任意のセルをクリックすると、イベントデルタで表示 (View in Event Deltas) アクションが開きます。
これを選択すると、タイルのデータソース、Where 句、およびタイムレンジを引き継いだ状態で イベントデルタ ビューが開きます。そこから、同じ分布をインタラクティブに確認したり、属性でスライスして遅いスパンと速いスパンの違いを調べたり、クエリを手動で再構築することなく任意のセルの背後にある個々のスパンを検査したりすることができます。
ダッシュボードをフィルタリングする
Lucene または SQL フィルターとタイムレンジは、ダッシュボードレベルで適用でき、すべての可視化に自動的に伝播します。
例として、ダッシュボードに Lucene フィルター ServiceName:"frontend" を適用し、時間範囲を直近 3 時間 (Last 3 hours) を対象とするように変更します。これにより、可視化が frontend サービスのデータのみを反映していることを確認できます。
ダッシュボードは自動的に保存されます。ダッシュボード名を設定するには、タイトルを選択して編集し、Save Name をクリックします。
ダッシュボード - 可視化の編集
可視化を削除、編集、または複製するには、その上にマウスオーバーして表示されるアクションボタンを使用します。
ダッシュボード - 一覧と検索
ダッシュボードはダッシュボードページからアクセスできます。タグごとに整理されており、内蔵の検索機能とフィルタリングにより、特定のダッシュボードをすばやく見つけることができます。
ダッシュボードはお気に入りに登録でき、サイドバーや一覧ページの上部から簡単にアクセスできます。お気に入りはユーザーごとに個別に管理されます。
ダッシュボードのタグ付け
ダッシュボードや保存済み検索にタグを追加して、整理しやすくできます。 タグは、用途に応じて項目を分類したりフィルタリングしたりするための柔軟な手段です。
タグの仕組み
- 整理: タグは左サイドバーに表示され、ダッシュボードや保存済み検索は割り当てられたタグごとにグループ化されます
- 複数タグ: より細かく分類できるように、1つのアイテムに1つ以上のタグを追加できます
- 自動作成: まだ存在しないタグを割り当てた場合、そのタグは自動的に作成されます
- 簡単な管理: 構成を調整できるように、いつでもタグを追加・削除できます
これにより、関連するアイテムを簡単に見つけられ、コレクションが増えても整理されたワークスペースを維持できます。
複数のタグを選択して、異なるカテゴリにまたがるアイテムを絞り込んで表示することもできます。
カスタムフィルタ
すべてのダッシュボードで利用できるフリーテキストフィルタに加え、保存済みダッシュボードでは、ClickHouse にクエリして取得したデータから値が入力されるカスタムのドロップダウンフィルタを利用できます。これにより、再利用可能なクリック操作ベースのフィルタコントロールが提供されるため、ダッシュボードの閲覧者は式を手動で記述せずにフィルタリングできます。
以下の手順では、"ダッシュボードの作成"セクションで作成したダッシュボードにカスタムフィルタを追加する方法を示します。
新しいフィルタを追加する
Add new filter をクリックします。Name を入力し、Data source を選択して、Filter expression にフィルタ式 (ドロップダウンに表示される一意の値を取得する SQL のカラムまたは式) を入力し、フィルタを設定します。Save filter をクリックします。
たとえば、トレースデータ用のサービスフィルタを追加するには、Traces データソースで ServiceName をフィルタ式として使用します。"Dropdown values filter" は任意で、ドロップダウンに表示する値を絞り込むために使用できます。
Filters モーダルには、そのダッシュボードに設定されているすべてのフィルタが表示されます。ここから既存のフィルタを編集または削除したり、追加のフィルタを加えたりできます。
フィルタを使用する
Filters モーダルを閉じます。新しいドロップダウンフィルタが検索バーの下に表示されます。これをクリックして利用可能な値を確認し、1 つ選択すると、ダッシュボード上のすべての可視化をフィルタリングできます。
(任意) フィルタ値をデフォルトとして保存する
選択したフィルタをダッシュボードのデフォルトとして保持するには、ダッシュボードメニューから Save Query & Filters as Default を選択します。以後、そのダッシュボードは選択したフィルタが適用された状態で常に開きます。リセットするには、同じメニューから Remove Default Query & Filters を選択します。
カスタムのドロップダウンフィルタは保存済みダッシュボードで利用できます。このパターンの実例については、Kubernetes ダッシュボードを参照してください。ここでは、ポッド、デプロイメント、ノード名、ネームスペース、クラスター向けの組み込みドロップダウンフィルタが提供されています。 :::"
検索 へのドリルダウン
ダッシュボードのタイルでは、検索 ページへのドリルダウンを利用できます。ビジュアライゼーション内のデータポイントをクリックすると、次のオプションを含むコンテキストメニューが開きます。
- View All Events — 選択した時間範囲内のすべてのイベントを表示する検索ページに移動します。
- Filter by group — 特定の系列でフィルタリングされた検索ページに移動します。
これは、ダッシュボードで見つけた特定のスパイクや異常を調査する際に役立ちます。集計ビューから、基になる個々のイベントへすばやく切り替えられます。
プリセット
HyperDX は、標準のダッシュボード付きでデプロイされます。
ClickHouse ダッシュボード
このダッシュボードは、ClickHouse を監視するための可視化を提供します。このダッシュボードに移動するには、左側のメニューからこのダッシュボードを選択します。
このダッシュボードでは、Selects、Inserts、ClickHouse Infrastructure の監視をタブで切り替えて表示します。
このダッシュボードは、主要なメトリクスを可視化するために ClickHouse の system テーブル を参照します。以下の権限が必要です。
GRANT SHOW COLUMNS, SELECT(CurrentMetric_MemoryTracking, CurrentMetric_S3Requests, ProfileEvent_OSCPUVirtualTimeMicroseconds, ProfileEvent_OSReadChars, ProfileEvent_OSWriteChars, ProfileEvent_S3GetObject, ProfileEvent_S3ListObjects, ProfileEvent_S3PutObject, ProfileEvent_S3UploadPart, event_time) ON system.metric_log
GRANT SHOW COLUMNS, SELECT(active, database, partition, rows, table) ON system.parts
GRANT SHOW COLUMNS, SELECT(event_date, event_time, memory_usage, normalized_query_hash, query, query_duration_ms, query_kind, read_rows, tables, type, written_bytes, written_rows) ON system.query_log
GRANT SHOW COLUMNS, SELECT(event_date, event_time, hostname, metric, value) ON system.transposed_metric_log
サービスダッシュボード
サービスダッシュボードは、トレースデータに基づいて現在アクティブなサービスを表示します。これには、トレースが収集されており、有効な Traces データソースが構成されている必要があります。
サービス名はトレースデータから自動検出され、HTTP Services、Database、Errors の 3 つのタブに整理された一連の事前構築済みの可視化が提供されます。
可視化は Lucene または SQL の構文を使用してフィルタリングでき、時間範囲を調整して分析対象を絞り込むことができます。
Kubernetes ダッシュボード
このダッシュボードでは、OpenTelemetry を通じて収集された Kubernetes イベントを確認・探索できます。高度なフィルタリング機能を備えており、Kubernetes のポッド、デプロイメント、ノード名、ネームスペース、クラスターでの絞り込みに加えて、フリーテキスト検索も実行できます。
Kubernetes のデータは、容易にナビゲーションできるように「Pods」「Nodes」「Namespaces」の 3 つのタブに整理されています。
