MMAM Guide / dashboard

dashboard

Dashboard / ダッシュボード

起動直後に運用状況を俯瞰できる画面です。Flow件数、MQTTイベント、Checker実行結果、デバッグログを1画面に集約しています。

画面構成

Summary

Flow 総数と Active Count を表示。GET /api/flows?limit=0 の結果を使用し、ステータス毎の件数を保持します。

Total Flows: DB 上の flows テーブル全件
Active: flow_status=active の件数

Realtime Updates

MQTT トピック mmam/flows/events を購読して差分を時系列表示。Action（created/updated/deleted）と diffKeys がそのまま UI に出ます。

接続状態は realtime.connected に反映され、Mosquitto が停止すると offline 表示になります。

Latest Check Results

Automation API GET /api/automation/summary のレスポンスを表示。総アラート、Collision 件数、NMOS 差分件数が個別カードで出ます。

更新ボタンは同APIを再度呼び出し、結果時間を last_updated で表示。

Flow List Snapshot

ダッシュボード内のミニテーブル。フィルタ／ソート／ページングは GET /api/flows パラメータ (limit, offset, sort_by) を UI から直接指定します。

Details/Edit ボタンは Flows ビューに遷移せず、その場で詳細モーダル／編集ダイアログを開きます。

Debug Console

API で取得した実行ログを配列 logs に格納し、末尾追記で描画。主に管理者向けの確認用領域です。

内容は mmam コンテナの /log/api.log と同期します。

データ取得とイベント

Automation Summary API

curl -k https://localhost:8443/api/automation/summary \
  -H "Authorization: Bearer <token>"

{
  "total_alerts": 2,
  "collision_count": 1,
  "nmos_difference_count": 1,
  "last_updated": "2025-01-25T01:20:00Z"
}

結果は UI のカードにそのまま反映され、詳細確認リンクから Checker 画面へ遷移します。

MQTT ペイロード

{
  "event": "updated",
  "flow_id": "f1a2b3...",
  "display": "STUDIO-A CAM-01 Video",
  "diff": {"alias1": {"old": "CAM-01", "new": "CAM-01 MAIN"}},
  "timestamp": "2025-01-25T01:18:34.000Z"
}

UI は diff キーだけを抽出し、item.diffKeys として表示します。イベント順序は MQTT の到達順です。