画面構成と UI/UX 設計

インフラ監視画面レイアウト、対話設計、コンポーネント構成

1. インフラダッシュボード（ノード一覧）

すべての登録ノードの状態とリソースを一元管理するポータル画面です。各カードには CPU、メモリ使用率のほかに、未適用のOS更新パッチ数やVPN接続状態などのセキュリティ関連指標をコンパクトに表示します。

インフラストラクチャ一元管理ダッシュボード

Tokyo-DB-01 Online

10.0.1.15 • Worker • Tokyo

CPU / Mem 18% / 48%

Docker 4 running

OS 更新最新 (パッチ不要)

VPN / SSH wg0 接続中 / 1セッション

更新: 5秒前詳細管理

Osaka-Edge-02 Online

10.2.4.8 • Gateway • Osaka

CPU / Mem 85% / 92%

Docker 1 stopped

OS 更新 ⚠️ 3 パッチ保留中

VPN / SSH wg0 未接続 / 3セッション

更新: 12秒前詳細管理

「ノード追加」をクリックした際に表示されるモーダルダイアログです。ノードの名前と基本情報を入力して「登録」すると、自動的に一度きり有効なAPIキーを埋め込んだインストールワンライナーコマンドが生成されます。

⚙️ エージェントのインストールと導入手順

ノード ID: tokyo-db-01

対象のサーバー上でターミナルを開き、以下のワンライナーコマンドを実行してください。Node.js (>=18) のインストール、エージェントコードの展開、サービス化 (systemd) まで全自動でセットアップされます。

curl -sS https://meshconsole.example.com/api/infra/nodes/install/tokyo-db-01 | bash

⚠️ API キーの保管

エージェント設定用のAPIキーは一度きりしか表示されません。ワンライナーを実行しない場合は、手動設定用に以下のAPIキーを安全に記録してください。
mc_key_9af3e16b710f7a9348e02b88137a89ff

待機中... エージェントからの初回の疎通確認 (ping) を待っています

ノード詳細画面の「セキュリティ & システム管理」タブです。OS更新の適用、SSHセッション監視、Fail2banの防御状況、およびVPNトンネルの制御をすべてこの単一ビューから実行・制御できます。

システム概要・メトリクス

Docker コンテナ (4)

セキュリティ & サービス管理

APIキー・詳細設定

🛡️ OS アップデート管理アップデートあり

保留中: 3件 (セキュリティ関連: 1件, 一般パッチ: 2件)

🧱 Fail2ban 防御ステータス正常稼働中

稼働 Jail: sshd, nginx-http-auth

現在のアクティブブロックIP数: 14件

🔑 Active SSH 接続 2 セッション

👤 root@192.168.1.100 強制切断

👤 operator@203.0.113.12 強制切断

🌐 VPN 接続 (WireGuard) 接続中

I/F 名: wg0 • トラフィック: Rx: 1.2 GB / Tx: 4.8 GB

接続先エンドポイント: vpn-gateway.example.com:51820