9dd78a7d2e
Implements the /metrics route with DateRangePicker bar, 5 KPI StatCards with sparklines (throughput, latency p99, error rate, success rate, active routes), per-route DataTable with trend sparklines, and a 2x2 chart grid (AreaChart throughput, LineChart latency with SLA threshold, BarChart errors, AreaChart volume). Uses AppShell + Sidebar + TopBar layout with mock data from src/mocks/metrics.ts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
347 lines
11 KiB
TypeScript
347 lines
11 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import styles from './Metrics.module.css'
|
|
|
|
// Layout
|
|
import { AppShell } from '../../design-system/layout/AppShell/AppShell'
|
|
import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
|
|
import { TopBar } from '../../design-system/layout/TopBar/TopBar'
|
|
|
|
// Composites
|
|
import { AreaChart } from '../../design-system/composites/AreaChart/AreaChart'
|
|
import { LineChart } from '../../design-system/composites/LineChart/LineChart'
|
|
import { BarChart } from '../../design-system/composites/BarChart/BarChart'
|
|
import { DataTable } from '../../design-system/composites/DataTable/DataTable'
|
|
import type { Column } from '../../design-system/composites/DataTable/types'
|
|
|
|
// Primitives
|
|
import { StatCard } from '../../design-system/primitives/StatCard/StatCard'
|
|
import { DateRangePicker } from '../../design-system/primitives/DateRangePicker/DateRangePicker'
|
|
import { Sparkline } from '../../design-system/primitives/Sparkline/Sparkline'
|
|
import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
|
|
import { Badge } from '../../design-system/primitives/Badge/Badge'
|
|
|
|
// Mock data
|
|
import {
|
|
throughputSeries,
|
|
latencySeries,
|
|
errorCountSeries,
|
|
routeMetrics,
|
|
type RouteMetricRow,
|
|
} from '../../mocks/metrics'
|
|
import { routes } from '../../mocks/routes'
|
|
import { agents } from '../../mocks/agents'
|
|
|
|
// ─── Sidebar data (shared) ────────────────────────────────────────────────────
|
|
const APPS = [
|
|
{ id: 'order-service', name: 'order-service', agentCount: 2, health: 'live' as const, execCount: 1433 },
|
|
{ id: 'payment-svc', name: 'payment-svc', agentCount: 1, health: 'live' as const, execCount: 912 },
|
|
{ id: 'shipment-tracker', name: 'shipment-tracker', agentCount: 2, health: 'live' as const, execCount: 471 },
|
|
{ id: 'notification-hub', name: 'notification-hub', agentCount: 1, health: 'stale' as const, execCount: 128 },
|
|
]
|
|
|
|
const SIDEBAR_ROUTES = routes.slice(0, 3).map((r) => ({
|
|
id: r.id,
|
|
name: r.name,
|
|
execCount: r.execCount,
|
|
}))
|
|
|
|
// ─── Metrics KPI cards (5 cards per spec) ─────────────────────────────────────
|
|
const METRIC_KPIS = [
|
|
{
|
|
label: 'Throughput',
|
|
value: '47.2',
|
|
unit: 'msg/s',
|
|
trend: 'neutral' as const,
|
|
trendValue: '→',
|
|
detail: 'Capacity: 120 msg/s · 39%',
|
|
accent: 'running' as const,
|
|
sparkline: [44, 46, 45, 47, 48, 46, 47, 48, 46, 47, 48, 47, 46, 47],
|
|
},
|
|
{
|
|
label: 'Latency p99',
|
|
value: '287ms',
|
|
trend: 'up' as const,
|
|
trendValue: '+23ms',
|
|
detail: 'SLA: <300ms · CLOSE',
|
|
accent: 'warning' as const,
|
|
sparkline: [198, 212, 205, 218, 224, 231, 238, 245, 252, 261, 268, 275, 281, 287],
|
|
},
|
|
{
|
|
label: 'Error Rate',
|
|
value: '2.9%',
|
|
trend: 'up' as const,
|
|
trendValue: '+0.4%',
|
|
detail: '38 errors this shift',
|
|
accent: 'error' as const,
|
|
sparkline: [1.2, 1.8, 1.5, 2.1, 2.4, 2.2, 2.5, 2.6, 2.7, 2.8, 2.7, 2.9, 2.8, 2.9],
|
|
},
|
|
{
|
|
label: 'Success Rate',
|
|
value: '97.1%',
|
|
trend: 'down' as const,
|
|
trendValue: '-0.4%',
|
|
detail: '3,147 ok · 56 warn · 38 err',
|
|
accent: 'success' as const,
|
|
sparkline: [98.2, 97.9, 98.1, 97.8, 97.5, 97.6, 97.4, 97.2, 97.3, 97.1, 97.0, 97.1, 97.2, 97.1],
|
|
},
|
|
{
|
|
label: 'Active Routes',
|
|
value: 7,
|
|
trend: 'neutral' as const,
|
|
trendValue: '→',
|
|
detail: '4 healthy · 2 degraded · 1 stale',
|
|
accent: 'amber' as const,
|
|
sparkline: [7, 7, 7, 7, 7, 7, 7, 6, 7, 7, 7, 7, 7, 7],
|
|
},
|
|
]
|
|
|
|
// ─── Route metric row with id field (required by DataTable) ──────────────────
|
|
type RouteMetricRowWithId = RouteMetricRow & { id: string }
|
|
|
|
const routeMetricsWithId: RouteMetricRowWithId[] = routeMetrics.map((r) => ({
|
|
...r,
|
|
id: r.routeId,
|
|
}))
|
|
|
|
// ─── Route performance table columns ──────────────────────────────────────────
|
|
const ROUTE_COLUMNS: Column<RouteMetricRowWithId>[] = [
|
|
{
|
|
key: 'routeName',
|
|
header: 'Route',
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<span className={styles.routeNameCell}>{row.routeName}</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'execCount',
|
|
header: 'Executions',
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<MonoText size="sm">{row.execCount.toLocaleString()}</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'successRate',
|
|
header: 'Success %',
|
|
sortable: true,
|
|
render: (_, row) => {
|
|
const cls = row.successRate >= 99 ? styles.rateGood : row.successRate >= 97 ? styles.rateWarn : styles.rateBad
|
|
return <MonoText size="sm" className={cls}>{row.successRate.toFixed(1)}%</MonoText>
|
|
},
|
|
},
|
|
{
|
|
key: 'avgDurationMs',
|
|
header: 'Avg Duration',
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<MonoText size="sm">{row.avgDurationMs}ms</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'p99DurationMs',
|
|
header: 'p99 Duration',
|
|
sortable: true,
|
|
render: (_, row) => {
|
|
const cls = row.p99DurationMs > 300 ? styles.rateBad : row.p99DurationMs > 200 ? styles.rateWarn : styles.rateGood
|
|
return <MonoText size="sm" className={cls}>{row.p99DurationMs}ms</MonoText>
|
|
},
|
|
},
|
|
{
|
|
key: 'errorCount',
|
|
header: 'Errors',
|
|
sortable: true,
|
|
render: (_, row) => (
|
|
<MonoText size="sm" className={row.errorCount > 10 ? styles.rateBad : styles.rateNeutral}>
|
|
{row.errorCount}
|
|
</MonoText>
|
|
),
|
|
},
|
|
{
|
|
key: 'sparkline',
|
|
header: 'Trend',
|
|
render: (_, row) => (
|
|
<Sparkline data={row.sparkline} width={80} height={24} />
|
|
),
|
|
},
|
|
]
|
|
|
|
// ─── Build bar chart data from error series ────────────────────────────────────
|
|
function buildErrorBarSeries() {
|
|
// Take every 5th point and format x as time label
|
|
const sampleInterval = 5
|
|
return errorCountSeries.map((s) => ({
|
|
label: s.label,
|
|
data: s.data
|
|
.filter((_, i) => i % sampleInterval === 0)
|
|
.map((pt) => ({
|
|
x: pt.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
|
y: Math.round(pt.value),
|
|
})),
|
|
}))
|
|
}
|
|
|
|
// ─── Build volume area chart (derived from throughput) ─────────────────────────
|
|
function buildVolumeSeries() {
|
|
return throughputSeries.map((s) => ({
|
|
label: s.label,
|
|
data: s.data.map((pt) => ({
|
|
x: pt.timestamp,
|
|
y: Math.round(pt.value * 60), // approx msg/min
|
|
})),
|
|
}))
|
|
}
|
|
|
|
const ERROR_BAR_SERIES = buildErrorBarSeries()
|
|
const VOLUME_SERIES = buildVolumeSeries()
|
|
|
|
// Convert MetricSeries (from mocks) to ChartSeries format
|
|
function convertSeries(series: typeof throughputSeries) {
|
|
return series.map((s) => ({
|
|
label: s.label,
|
|
data: s.data.map((pt) => ({ x: pt.timestamp, y: pt.value })),
|
|
}))
|
|
}
|
|
|
|
// ─── Metrics page ─────────────────────────────────────────────────────────────
|
|
export function Metrics() {
|
|
const navigate = useNavigate()
|
|
const [activeItem, setActiveItem] = useState('order-service')
|
|
const [dateRange, setDateRange] = useState({
|
|
start: new Date('2026-03-18T06:00:00'),
|
|
end: new Date('2026-03-18T09:15:00'),
|
|
})
|
|
|
|
function handleItemClick(id: string) {
|
|
setActiveItem(id)
|
|
// Navigate to route detail if it's a route
|
|
const route = routes.find((r) => r.id === id)
|
|
if (route) navigate(`/routes/${id}`)
|
|
}
|
|
|
|
return (
|
|
<AppShell
|
|
sidebar={
|
|
<Sidebar
|
|
apps={APPS}
|
|
routes={SIDEBAR_ROUTES}
|
|
agents={agents}
|
|
activeItem={activeItem}
|
|
onItemClick={handleItemClick}
|
|
/>
|
|
}
|
|
>
|
|
{/* Top bar */}
|
|
<TopBar
|
|
breadcrumb={[
|
|
{ label: 'Dashboard', href: '/' },
|
|
{ label: 'Metrics' },
|
|
]}
|
|
environment="PRODUCTION"
|
|
shift="Day (06:00-18:00)"
|
|
user={{ name: 'hendrik' }}
|
|
/>
|
|
|
|
{/* Scrollable content */}
|
|
<div className={styles.content}>
|
|
|
|
{/* Date range picker bar */}
|
|
<div className={styles.dateRangeBar}>
|
|
<DateRangePicker value={dateRange} onChange={setDateRange} />
|
|
<div className={styles.refreshIndicator}>
|
|
<span className={styles.refreshDot} />
|
|
<span className={styles.refreshText}>Auto-refresh: 30s</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI stat cards (5) */}
|
|
<div className={styles.kpiStrip}>
|
|
{METRIC_KPIS.map((kpi, i) => (
|
|
<StatCard
|
|
key={i}
|
|
label={kpi.label}
|
|
value={kpi.value}
|
|
detail={kpi.detail}
|
|
trend={kpi.trend}
|
|
trendValue={kpi.trendValue}
|
|
accent={kpi.accent}
|
|
sparkline={kpi.sparkline}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Per-route performance table */}
|
|
<div className={styles.tableSection}>
|
|
<div className={styles.tableHeader}>
|
|
<span className={styles.tableTitle}>Per-Route Performance</span>
|
|
<div className={styles.tableRight}>
|
|
<span className={styles.tableMeta}>{routeMetrics.length} routes</span>
|
|
<Badge label="SHIFT" color="primary" />
|
|
</div>
|
|
</div>
|
|
<DataTable
|
|
columns={ROUTE_COLUMNS}
|
|
data={routeMetricsWithId}
|
|
sortable
|
|
onRowClick={(row) => navigate(`/routes/${row.routeId}`)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 2x2 chart grid */}
|
|
<div className={styles.chartGrid}>
|
|
{/* Throughput area chart */}
|
|
<div className={styles.chartCard}>
|
|
<div className={styles.chartTitle}>Throughput (msg/s)</div>
|
|
<AreaChart
|
|
series={convertSeries(throughputSeries)}
|
|
yLabel="msg/s"
|
|
height={200}
|
|
width={500}
|
|
className={styles.chart}
|
|
/>
|
|
</div>
|
|
|
|
{/* Latency line chart with SLA threshold */}
|
|
<div className={styles.chartCard}>
|
|
<div className={styles.chartTitle}>Latency (ms)</div>
|
|
<LineChart
|
|
series={convertSeries(latencySeries)}
|
|
yLabel="ms"
|
|
threshold={{ value: 300, label: 'SLA 300ms' }}
|
|
height={200}
|
|
width={500}
|
|
className={styles.chart}
|
|
/>
|
|
</div>
|
|
|
|
{/* Error bar chart */}
|
|
<div className={styles.chartCard}>
|
|
<div className={styles.chartTitle}>Errors by Route</div>
|
|
<BarChart
|
|
series={ERROR_BAR_SERIES}
|
|
stacked
|
|
height={200}
|
|
width={500}
|
|
className={styles.chart}
|
|
/>
|
|
</div>
|
|
|
|
{/* Volume area chart */}
|
|
<div className={styles.chartCard}>
|
|
<div className={styles.chartTitle}>Message Volume (msg/min)</div>
|
|
<AreaChart
|
|
series={VOLUME_SERIES}
|
|
yLabel="msg/min"
|
|
height={200}
|
|
width={500}
|
|
className={styles.chart}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</AppShell>
|
|
)
|
|
}
|