DISTRIBUTED BRAIN METRICS UI
分散脳:メトリクス UI とフロントエンド統合
このドキュメントは、distributed_brain のリアルタイムメトリクス表示に関連する最近の変更点をまとめます。目的は運用中に送信失敗/バックプレッシャーの指標を可視化し、簡易的なフロントエンド表示と将来的なグラフ化のための受け口を提供することです。
変更されたファイル(概要)
evospikenet/api_modules/distributed_ws.py:- 新規/変更エンドポイント
GET /distributed_brain/metrics— 現在のカウンタ(send_timeouts,broadcast_drops,persist_drops,connected_clientsなど)を JSON で返します。POST /distributed_brain/publish_log— 既存のログ公開 REST API(継続)WebSocket /ws/distributed_brain/logs— フロントエンド向けリアルタイム配信(認証あり)
-
内部: バックプレッシャー用のキュー、永続化バッチフラッシャ、Redis Pub/Sub(オプション)などを実装しています。
-
frontend/pages/distributed_brain.py: - ログ表示ツールバーにメトリクス用の小さなテキスト表示領域を追加しました(
div#distributed-metrics)。 - メトリクス描画用の
canvas#distributed-metrics-canvasをツールバーに追加しました(Chart.js 等でのグラフ描画用プレースホルダ)。 - クライアント側で
fetch('/distributed_brain/metrics')を5秒間隔でポーリングし、受け取った JSON をdiv#distributed-metricsに整形して表示します(現在は数値表示)。
API スキーマ(簡易)
GET /distributed_brain/metrics→ 200 JSON
{
"send_timeouts": 12,
"broadcast_drops": 3,
"persist_drops": 0,
"connected_clients": 2,
"last_update": "2026-03-09T12:34:56.789Z"
}
フロントエンド挙動(現在)
- ページ読み込み後に WS の接続を開始します(
/ws/distributed_brain/logs)。 - 同時に
/distributed_brain/metricsを5秒間隔でフェッチし、簡易ステータスをツールバーに表示します。表示場所: ツールバー右側のdistributed-metricsと、グラフ用のcanvas。 - 現在はテキスト表示のみで、
canvasはグラフ表示のためのプレースホルダです。
Chart.js / グラフ化について(現状と次のステップ)
- 変更は
canvas#distributed-metrics-canvasを追加済みです。Chart.js 等のライブラリ導入と初期化スクリプトは未適用です。次の作業候補: - Chart.js を読み込み、時系列データのバッファ(例: 60点)を保持して折れ線グラフを描画する。
- フェッチ間隔・バッファ長・描画スタイルをフロントの設定で変更可能にする。
有効化・確認手順
apiコンテナを再起動して最新コードを読み込ませます。例:
docker compose up -d --build api
-
API が起動したらブラウザでダッシュボード(
frontend/pages/distributed_brain.py)を開き、画面右上にメトリクスが 5 秒ごとに更新されることを確認します。 -
メトリクスの確認用に curl で直接取得できます:
curl -sS http://localhost:8000/distributed_brain/metrics | jq
環境変数・運用メモ
DISTRIBUTED_WS_REDIS(オプション): Redis URL を与えるとインスタンス間ブロードキャストを有効化します。DISTRIBUTED_WS_SEND_TIMEOUT等の環境変数で送信タイムアウトやキューサイズを調整してください(evospikenet/api_modules/distributed_ws.py内で参照)。- Prometheus を使う場合は
prometheus-clientがインストールされている必要があります(Docker イメージに既に含めています)。
リリースノート案(短文)
- フロントエンドに分散ブレインのリアルタイムメトリクス表示を追加(ツールバーに数値表示とグラフ用キャンバスを追加)。バックエンドはメトリクス用の
GET /distributed_brain/metricsを提供します。Chart.js を利用した時系列グラフは次フェーズで有効化予定。
必要なら英語版 docs/DISTRIBUTED_BRAIN_METRICS_UI.en.md を作成します。チャート実装(Chart.js 組み込み)を今すぐ適用する場合は続けて実装しますか?