refactor(web): ApmPanel 抽取 — /observability 的 monitoring+apm 兩個 Tab 無雙重 Layout

apps/web/src/components/panels/ApmPanel.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+/**
+ * ApmPanel — APM 黃金指標面板 (不含 AppLayout)
+ * Sprint 5: 從 /apm/page.tsx 抽取
+ */
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { TimeSeriesChart } from '@/components/charts/time-series-chart'
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? ''
+const SIGNOZ_URL = 'http://192.168.0.188:3301'
+
+interface GoldMetricItem {
+  label: string; value: number | string; unit: string | null; trend: number[]; status: string
+}
+interface GoldMetricsResponse {
+  timestamp: string; service_name: string; metrics: GoldMetricItem[]
+}
+
+const STATUS_COLOR: Record<string, string> = { healthy: '#22C55E', warning: '#F59E0B', critical: '#cc2200', unknown: '#87867f' }
+const STATUS_CHART_COLOR: Record<string, 'success' | 'warning' | 'error' | 'primary'> = { healthy: 'success', warning: 'warning', critical: 'error', unknown: 'primary' }
+
+export function ApmPanel() {
+  const t = useTranslations('apm')
+  const [data, setData] = useState<GoldMetricsResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/api/v1/metrics/gold?service_name=awoooi-api&time_window_minutes=10`)
+      .then(r => r.json())
+      .then((d: GoldMetricsResponse) => { setData(d); setLoading(false) })
+      .catch(err => { setError(String(err)); setLoading(false) })
+  }, [])
+
+  return (
+    <div style={{ padding: '24px', background: '#f5f4ed', minHeight: '100%' }}>
+      <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+        <div>
+          <h1 style={{ fontSize: 18, fontWeight: 700, color: '#141413', margin: 0, fontFamily: 'var(--font-body), monospace' }}>{t('title')}</h1>
+          <p style={{ fontSize: 12, color: '#87867f', margin: '4px 0 0', fontFamily: 'var(--font-body), monospace' }}>{t('subtitle')}</p>
+        </div>
+        <a href={SIGNOZ_URL} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, fontWeight: 600, color: '#4A90D9', border: '0.5px solid rgba(74,144,217,0.3)', borderRadius: 6, padding: '5px 12px', textDecoration: 'none', fontFamily: 'var(--font-body), monospace', background: 'rgba(74,144,217,0.05)' }}>
+          ↗ {t('openSignoz')}
+        </a>
+      </div>
+      {loading ? (
+        <div style={{ padding: '32px', textAlign: 'center', color: '#87867f', fontSize: 13 }}>{t('loading')}</div>
+      ) : error ? (
+        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '32px', textAlign: 'center', color: '#cc2200', fontSize: 13 }}>{t('error')}</div>
+      ) : data && data.metrics.length > 0 ? (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12, marginBottom: 16 }}>
+            {data.metrics.map((m, i) => {
+              const trendPoints = (m.trend ?? []).map((v, idx) => ({ timestamp: idx, value: v }))
+              const hasTrend = trendPoints.length > 1
+              const chartColor = STATUS_CHART_COLOR[m.status] ?? 'primary'
+              return (
+                <div key={i} style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '16px 18px 12px' }}>
+                  <div style={{ fontSize: 11, color: '#87867f', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{m.label}</div>
+                  <div style={{ fontSize: 24, fontWeight: 700, color: '#141413', lineHeight: 1.2 }}>
+                    {typeof m.value === 'number' ? m.value.toFixed(2) : m.value}
+                    {m.unit && <span style={{ fontSize: 13, color: '#87867f', marginLeft: 4 }}>{m.unit}</span>}
+                  </div>
+                  <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: STATUS_COLOR[m.status] ?? '#87867f', display: 'inline-block' }} />
+                    <span style={{ fontSize: 11, fontWeight: 600, color: STATUS_COLOR[m.status] ?? '#87867f', textTransform: 'uppercase' }}>{m.status}</span>
+                  </div>
+                  {hasTrend && <TimeSeriesChart data={trendPoints} height={48} color={chartColor} unit={m.unit ?? undefined} showYAxis={false} showGradient={true} className="mt-1" />}
+                </div>
+              )
+            })}
+          </div>
+          <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '12px 16px' }}>
+            <span style={{ fontSize: 11, color: '#87867f' }}>
+              Service: <strong style={{ color: '#141413' }}>{data.service_name}</strong>{' · '}{new Date(data.timestamp).toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' })}
+            </span>
+          </div>
+        </>
+      ) : (
+        <div style={{ background: '#fff', border: '0.5px solid #e0ddd4', borderRadius: 12, padding: '60px 24px', textAlign: 'center' }}>
+          <div style={{ fontSize: 32, color: '#e0ddd4', marginBottom: 16 }}>◎</div>
+          <div style={{ fontSize: 15, fontWeight: 700, color: '#141413', marginBottom: 8 }}>{t('noData')}</div>
+          <div style={{ fontSize: 12, color: '#87867f', maxWidth: 340, margin: '0 auto' }}>{t('noDataDescription')}</div>
+        </div>
+      )}
+    </div>
+  )
+}

apps/web/src/components/panels/index.ts

@@ -13,3 +13,4 @@
  */
 
 export { MonitoringPanel } from './MonitoringPanel'
+export { ApmPanel } from './ApmPanel'