バグ #745
未完了
ダッシュボード機能実装 - 統合監視画面 (子チケット)
Redmine Admin さんが約12時間前に追加.
約5時間前に更新.
説明
ダッシュボード機能実装 - 統合監視画面¶
🎯 概要¶
システム全体状況を一画面で把握できる統合ダッシュボード機能を実装します。
📋 実装対象¶
1. API エンドポイント¶
-
GET /api/v1/dashboard/overview - ダッシュボード概要取得
-
GET /api/v1/dashboard/metrics - ダッシュボード用メトリクス
-
GET /api/v1/dashboard/activity - 最近のアクティビティ
-
GET /api/v1/dashboard/alerts - アクティブアラート
-
POST /api/v1/dashboard/quick-action - クイックアクション実行
2. 主要関数¶
getDashboardOverview(): Promise<DashboardData>getSystemSummary(): Promise<SystemSummary>getRecentActivity(): Promise<ActivityEntry[]>getActiveAlerts(): Promise<Alert[]>executeQuickAction(action: string, params?: any): Promise<ActionResult>
3. UI コンポーネント¶
-
DashboardPage.tsx - ダッシュボードメイン画面
-
SystemMetricsCard - システムメトリクスカード
-
ContainerStatusGrid - コンテナ状況グリッド
-
RecentActivityList - 最近のアクティビティリスト
-
QuickActionButtons - クイックアクションボタン群
🔧 技術仕様¶
表示情報¶
-
システム状況サマリー
- CPU・メモリ・ディスク使用率
- 稼働コンテナ数
- アクティブドメイン数
- システム稼働時間
-
リアルタイム監視
- 最新メトリクス表示
- アラート状況
- 最近のシステムイベント
-
クイックアクション
- VPS状況確認
- Docker診断
- Nginx設定リロード
- システムバックアップ実行
パフォーマンス要件¶
- ページ読み込み時間 < 2秒
- リアルタイム更新間隔: 30秒
- WebSocket接続による即座更新
- レスポンシブデザイン対応
✅ 完了条件¶
🔗 関連チケット¶
親チケット: インフラヘルパーサービス基盤構築
📅 期限¶
Phase 1 - 基盤実装: 2025年6月30日まで
📋 ダッシュボード機能実装 - 現状・詳細仕様追記¶
🔍 現在の実装状況
API エンドポイント実装状況 (/api/v1/dashboard)¶
| エンドポイント |
メソッド |
実装状況 |
パラメータ |
レスポンス |
/overview |
GET |
📋 設計完了 |
- |
{systemSummary, alerts, activity} |
/metrics |
GET |
📋 設計完了 |
?timeRange=1h |
{realTimeMetrics} |
/activity |
GET |
📋 設計完了 |
?limit=10 |
{recentActivity[]} |
/alerts |
GET |
📋 設計完了 |
?active=true |
{activeAlerts[]} |
/quick-action |
POST |
📋 設計完了 |
{action, params?} |
{result} |
関数実装状況 (全て設計完了)¶
ファイル: /src/services/dashboard/DashboardService.ts
📋 ダッシュボードデータ取得 (設計完了)¶
// ダッシュボード概要 - 設計完了
async getDashboardOverview(): Promise<DashboardData> // 設計完了
async getSystemSummary(): Promise<SystemSummary> // 設計完了
async getRecentActivity(): Promise<ActivityEntry[]> // 設計完了
async getActiveAlerts(): Promise<Alert[]> // 設計完了
// クイックアクション - 設計完了
async executeQuickAction(action: string, params?: any): Promise<ActionResult> // 設計完了
🔧 技術仕様詳細
表示情報 (設計完了)¶
✅ システム状況サマリー¶
- CPU・メモリ・ディスク使用率
- 稼働コンテナ数
- アクティブドメイン数
- システム稼働時間
✅ リアルタイム監視¶
- 最新メトリクス表示
- アラート状況
- 最近のシステムイベント
✅ クイックアクション¶
- VPS状況確認
- Docker診断
- Nginx設定リロード
- システムバックアップ実行
パフォーマンス要件 (設計完了)¶
- ✅ ページ読み込み時間 < 2秒
- ✅ リアルタイム更新間隔: 30秒
- ✅ WebSocket接続による即座更新
- ✅ レスポンシブデザイン対応
📈 進捗サマリー
-
API エンドポイント: 0/5 (0%) 開発中、5/5 (100%) 設計完了、0/5 (0%) 未着手
-
ダッシュボード関数: 0/5 (0%) 開発中、5/5 (100%) 設計完了、0/5 (0%) 未着手
-
UI コンポーネント: 要実装
-
リアルタイム更新: 設計完了 (WebSocket統合)
-
クイックアクション: 設計完了
ダッシュボード機能はAPI・関数レベルで100%設計完了！他機能との統合設計も完成。UI実装に直接進める状態！
🔗 依存関係・統合ポイント
-
システム監視機能 (チケット#739) - メトリクス取得
-
Docker管理機能 (チケット#737) - コンテナ状況
-
Nginx管理機能 (チケット#738) - ドメイン状況
-
WebSocket機能 (チケット#744) - リアルタイム更新
-
スクリプト実行機能 (チケット#740) - クイックアクション
他の基盤機能と密接に連携。基盤機能の実装完了次第、ダッシュボードの実装・統合可能！
他の形式にエクスポート: Atom
PDF