プロジェクト

全般

プロフィール

操作
リンクをコピー

バグ #745

未完了

ダッシュボード機能実装 - 統合監視画面 (子チケット)

Redmine Admin さんが約12時間前に追加. 約5時間前に更新.

ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-26
期日:
進捗率:

0%

予定工数:

説明

ダッシュボード機能実装 - 統合監視画面

🎯 概要

システム全体状況を一画面で把握できる統合ダッシュボード機能を実装します。

📋 実装対象

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接続による即座更新
  • レスポンシブデザイン対応

✅ 完了条件

  • ダッシュボードAPI実装完了
  • ダッシュボード関数群実装完了
  • ダッシュボードUI実装完了
  • リアルタイム更新機能動作確認
  • クイックアクション機能動作確認

🔗 関連チケット

親チケット: インフラヘルパーサービス基盤構築

📅 期限

Phase 1 - 基盤実装: 2025年6月30日まで

操作
リンクをコピー
 #1

Redmine Admin さんが約5時間前に更新

📋 ダッシュボード機能実装 - 現状・詳細仕様追記

🔍 現在の実装状況

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