diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json index 5f84ed07..a1e2b4a5 100644 --- a/apps/web/messages/en.json +++ b/apps/web/messages/en.json @@ -140,7 +140,10 @@ "stable": "Stable", "normal": "Normal", "openclawEngine": "OPENCLAW COGNITIVE ENGINE", - "infrastructure": "INFRASTRUCTURE" + "infrastructure": "INFRASTRUCTURE", + "podHealth": "POD Health", + "allRunning": "All Running", + "servicesUp": "Services Up" }, "openclaw": { "name": "OpenClaw", diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json index 5b75299b..c89f8bbf 100644 --- a/apps/web/messages/zh-TW.json +++ b/apps/web/messages/zh-TW.json @@ -141,7 +141,10 @@ "stable": "穩定", "normal": "正常", "openclawEngine": "OPENCLAW 認知引擎", - "infrastructure": "基礎架構" + "infrastructure": "基礎架構", + "podHealth": "POD 健康", + "allRunning": "全部運行中", + "servicesUp": "服務上線" }, "openclaw": { "name": "OpenClaw", diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx index ae2ad20f..0f2fb259 100644 --- a/apps/web/src/app/[locale]/page.tsx +++ b/apps/web/src/app/[locale]/page.tsx @@ -1,45 +1,70 @@ 'use client' /** - * AWOOOI AI Center 主頁 (Task 10 重構) + * AWOOOI AI Center 主頁 * ==================================== * 2欄佈局（Sidebar 由 AppLayout 提供）: Feed + RightPanel * * 統帥鐵律: 使用真實數據 Hook，禁止假數據！ + * + * @updated 2026-04-02 Claude Code — Metrics Strip 7指標視覺強化 + * 串接: incidents(count/P0/MTTR/autoRemediation) + dashboard(serviceHealth/pendingApprovals/podHealth) */ import { useTranslations } from 'next-intl' import { useGlobalPulseMetrics } from '@/hooks/useGlobalPulseMetrics' import { useIncidents } from '@/hooks/useIncidents' -import { useHosts } from '@/stores/dashboard.store' +import { useHosts, useDashboardStore } from '@/stores/dashboard.store' import { IncidentCard } from '@/components/incident' import { OpenClawPanel } from '@/components/ai/openclaw-panel' import { HostGrid, type HostInfo } from '@/components/infra/host-grid' import { AppLayout } from '@/components/layout' +// ============================================================================= +// Mini Sparkline (SVG inline) +// ============================================================================= + +function MiniSparkline({ values, color }: { values: number[]; color: string }) { + if (!values || values.length < 2) return null + const min = Math.min(...values) + const max = Math.max(...values) + const range = max - min || 1 + const w = 48, h = 16 + const pts = values.map((v, i) => { + const x = (i / (values.length - 1)) * w + const y = h - ((v - min) / range) * h + return `${x},${y}` + }).join(' ') + return ( + + + + ) +} + // ============================================================================= // Main Page // ============================================================================= export default function Home({ params }: { params: { locale: string } }) { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const t = useTranslations() const tDashboard = useTranslations('dashboard') const tCommon = useTranslations('common') - // eslint-disable-next-line @typescript-eslint/no-unused-vars const locale = params.locale const hosts = useHosts() - // 統帥鐵律: 使用真實數據 Hook，禁止假數據！ + // dashboard store — pending approvals + overall pod health + const pendingApprovals = useDashboardStore(s => s.pendingApprovals) + const dashboardHosts = useDashboardStore(s => s.hosts) + + // Gold metrics (RPS / Error Rate / P99 / AI Success + sparklines) const { metrics: pulseMetrics } = useGlobalPulseMetrics({ pollInterval: 30000, enablePolling: true, }) - // Phase 7: 真實 Incident 數據 + // Real incidents const { incidents, - pendingApprovals, isLoading: isIncidentsLoading, error: incidentsError, } = useIncidents({ @@ -47,189 +72,281 @@ export default function Home({ params }: { params: { locale: string } }) { enablePolling: true, }) - // Metrics Strip 計算 + // ── Metrics 計算 ──────────────────────────────────────────────────────────── + + // 服務健康: dashboard hosts healthy services count + const { healthyServices, totalServices } = (() => { + let healthy = 0, total = 0 + for (const h of dashboardHosts) { + for (const s of h.services) { + total++ + if (s.status === 'up' || s.status === 'healthy') healthy++ + } + } + return { healthyServices: healthy, totalServices: total } + })() + + // P0 count + const p0Count = incidents?.filter(i => i.severity === 'P0').length ?? 0 + + // 自動處置率 const autoRemediationRate = (() => { - if (!incidents || incidents.length === 0) return '--' + if (!incidents?.length) return '--' const resolved = incidents.filter(i => i.status === 'resolved' || i.status === 'closed').length - if (resolved === 0) return '0%' return `${((resolved / incidents.length) * 100).toFixed(0)}%` })() + // MTTR 均值 const mttrAvg = (() => { - if (!incidents || incidents.length === 0) return '--' + if (!incidents?.length) return '--' const resolved = incidents.filter(i => i.updated_at && (i.status === 'resolved' || i.status === 'closed')) - if (resolved.length === 0) return '--' - const avgMs = resolved.reduce((sum, i) => { - return sum + (new Date(i.updated_at).getTime() - new Date(i.created_at).getTime()) - }, 0) / resolved.length + if (!resolved.length) return '--' + const avgMs = resolved.reduce((sum, i) => + sum + (new Date(i.updated_at).getTime() - new Date(i.created_at).getTime()), 0 + ) / resolved.length const mins = Math.round(avgMs / 60000) - if (mins < 60) return `${mins}m` - return `${(mins / 60).toFixed(1)}h` + return mins < 60 ? `${mins}m` : `${(mins / 60).toFixed(1)}h` })() + // Gold metric sparklines + const errorRateMetric = pulseMetrics?.find(m => m.label === 'Error Rate') + const rpsMetric = pulseMetrics?.find(m => m.label === 'RPS') + + // POD health: healthy services / total + const podHealthStr = totalServices > 0 ? `${healthyServices}/${totalServices}` : '--' + const podAllRunning = totalServices > 0 && healthyServices === totalServices + + // ── 7 Metrics Strip ───────────────────────────────────────────────────────── + + type MetricItem = { + label: string + value: string | number + sub?: string + badge?: { text: string; color: string; bg: string } + sparkline?: { values: number[]; color: string } + valueColor?: string + } + + const metrics: MetricItem[] = [ + { + label: tDashboard('activeIncidents'), + value: incidents?.length ?? '--', + sub: p0Count > 0 ? undefined : tDashboard('stable'), + badge: p0Count > 0 ? { text: `P0 ×${p0Count}`, color: '#cc2200', bg: 'rgba(204,34,0,0.08)' } : undefined, + valueColor: p0Count > 0 ? '#cc2200' : undefined, + }, + { + label: tDashboard('serviceHealth'), + value: totalServices > 0 ? `${healthyServices}/${totalServices}` : '--', + sub: tDashboard('normal'), + sparkline: rpsMetric?.trend ? { values: rpsMetric.trend, color: '#22C55E' } : undefined, + }, + { + label: tDashboard('pendingApprovals'), + value: pendingApprovals ?? '--', + sub: pendingApprovals > 0 ? undefined : tDashboard('stable'), + badge: pendingApprovals > 0 ? { text: tDashboard('pendingApprovals'), color: '#F59E0B', bg: 'rgba(245,158,11,0.08)' } : undefined, + valueColor: pendingApprovals > 0 ? '#F59E0B' : undefined, + }, + { + label: tDashboard('autoRemediationRate'), + value: autoRemediationRate, + sparkline: errorRateMetric?.trend ? { values: errorRateMetric.trend.map(v => 100 - v), color: '#4A90D9' } : undefined, + }, + { + label: tDashboard('mttrAvg'), + value: mttrAvg, + }, + { + label: tDashboard('podHealth'), + value: podHealthStr, + sub: podAllRunning ? tDashboard('allRunning') : undefined, + badge: !podAllRunning && totalServices > 0 + ? { text: `${totalServices - healthyServices} down`, color: '#cc2200', bg: 'rgba(204,34,0,0.08)' } + : undefined, + valueColor: podAllRunning ? '#22C55E' : totalServices > 0 ? '#cc2200' : undefined, + }, + ] + return ( -
- {/* ── Metrics Strip (50px) ────────────────────────────────────── */}
- {[ - { label: tDashboard('activeIncidents'), value: incidents?.length ?? '--', sub: incidents?.filter((i) => i.severity === 'P0').length ? `+${incidents.filter((i) => i.severity === 'P0').length} P0` : tDashboard('stable') }, - { label: tDashboard('serviceHealth'), value: `${pulseMetrics?.length ?? '--'}/${pulseMetrics?.length ?? '--'}`, sub: tDashboard('normal') }, - { label: tDashboard('todayIncidents'), value: incidents?.length ?? '--', sub: '' }, - { label: tDashboard('autoRemediationRate'), value: autoRemediationRate, sub: '' }, - { label: tDashboard('mttrAvg'), value: mttrAvg, sub: '' }, - ].map((m, i, arr) => ( -
+ {metrics.map((m, i) => ( +
+ {/* Label */} + + {m.label} + + {/* Value row */} +
+ + {String(m.value)} + + {m.sparkline && ( + + )} +
+ {/* Sub row */} +
+ {m.badge ? ( + + {m.badge.text} + + ) : m.sub ? ( + {m.sub} + ) : null} +
+
+ ))} +
+ + {/* ── 主體 2 欄 ─────────────────────────────────────────────────────── */} +
+ + {/* ── Feed：活躍事件 (flex:1) ───────────────────────────────────── */} +
- - {m.label} - - - {String(m.value)} - - {m.sub && {m.sub}} -
- ))} -
- - {/* ── 主體 2 欄（Sidebar 外部）────────────────────────────────── */} -
- - {/* ── Feed：活躍事件（flex:1）──────────────────────────────── */} -
- {/* Feed 標題列 */} -
- - {tDashboard('activeIncidents')} - - {(incidents?.length ?? 0) > 0 && ( - - {incidents?.length} +
+ + {tDashboard('activeIncidents')} - )} + {(incidents?.length ?? 0) > 0 && ( + + {incidents?.length} + + )} +
+ +
+ {isIncidentsLoading ? ( +
+ {tCommon('loading')} +
+ ) : incidentsError ? ( +
{incidentsError}
+ ) : (incidents?.length ?? 0) === 0 ? ( +
+
+ {tDashboard('stable')} · 0 {tDashboard('activeIncidents')} +
+ ) : ( + incidents?.map((incident) => ( + + )) + )} +
- {/* Feed 內容 */} -
- {isIncidentsLoading ? ( -
- {tCommon('loading')} -
- ) : incidentsError ? ( -
{incidentsError}
- ) : (incidents?.length ?? 0) === 0 ? ( -
-
- {tDashboard('stable')} · 0 {tDashboard('activeIncidents')} -
- ) : ( - incidents?.map((incident) => ( - +
+ + {/* WoooClaw + Reasoning Stream */} +
+
+ {tDashboard('openclawEngine')} +
+ 0 ? 'analyzing' : 'patrolling'} /> - )) - )} -
-
- - {/* ── Right Panel：AI + Infra（flex:1）─────────────────────── */} -
-
- - {/* 7.1 NemoClaw + Reasoning Stream */} -
-
- {tDashboard('openclawEngine')}
- 0 ? 'analyzing' : 'patrolling' - } - /> -
- {/* 7.3 基礎架構 2×2 Grid */} -
-
- {tDashboard('infrastructure')} + {/* 基礎架構 Grid */} +
+
+ {tDashboard('infrastructure')} +
+ ({ + hostname: h.name, + ip: h.ip, + cpuPct: h.metrics?.cpu_percent ?? null, + ramPct: h.metrics?.memory_percent ?? null, + services: h.services.map(s => ({ + name: s.name, + healthy: s.status === 'up' || s.status === 'healthy', + })), + }))} />
- ({ - hostname: h.name, - ip: h.ip, - cpuPct: h.metrics?.cpu_percent ?? null, - ramPct: h.metrics?.memory_percent ?? null, - services: h.services.map(s => ({ - name: s.name, - healthy: s.status === 'up' || s.status === 'healthy', - })), - }))} /> -
+
-
) }