feat(dashboard): 首页请求趋势拆分状态码并合并容量到业务流量

- 24 小时请求趋势拆分展示请求总量与 200/400/500 状态码请求量，独占一行；时间桶聚合新增 status_200/400/500_count（CH countIf、PG FILTER），请求趋势改为基于原始桶聚合（小时 rollup 无状态码口径） - 首页移除宿主机磁盘指标，容量趋势（CPU/内存）并入业务流量卡片展示 - 压缩协议 traffic_24h 扩展为 7 元组，前端归一化同步更新
2026-10-14 02:46:37 +08:00 · 2026-08-13 10:57:21 +08:00
parent a9e4237bbf
commit a4dd5ca9e1
15 changed files with 196 additions and 160 deletions
@@ -0,0 +1,90 @@
+'use client';
+
+import { TrendChart } from '@/components/data/trend-chart';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type {
+  CapacityTrendPoint,
+  NetworkTrendPoint,
+} from '@/lib/services/openflare';
+
+import {
+  formatBytes,
+  formatPercent,
+  formatTrendHour,
+} from './dashboard-utils';
+
+/** 业务流量（来自访问日志）与容量趋势（节点 Agent 宿主机指标）合并展示。 */
+export function TrafficCapacityTrendChart({
+  networkPoints,
+  capacityPoints,
+}: {
+  networkPoints: NetworkTrendPoint[];
+  capacityPoints: CapacityTrendPoint[];
+}) {
+  return (
+    <Card className='border-dashed shadow-none'>
+      <CardHeader>
+        <CardTitle className='text-sm font-semibold'>
+          24 小时业务流量与容量趋势
+        </CardTitle>
+      </CardHeader>
+      <CardContent className='space-y-6'>
+        <TrendChart
+          labels={networkPoints.map((point) =>
+            formatTrendHour(point.bucket_started_at),
+          )}
+          height={180}
+          summaryScope='total'
+          summaryHint='近 24 小时 · 来自访问日志'
+          yAxisValueFormatter={formatBytes}
+          series={[
+            {
+              label: '接收数据',
+              color: '#22c55e',
+              fillColor: 'rgba(34, 197, 94, 0.14)',
+              variant: 'area',
+              values: networkPoints.map((point) => point.bytes_received),
+              valueFormatter: formatBytes,
+            },
+            {
+              label: '已提供数据',
+              color: '#38bdf8',
+              values: networkPoints.map((point) => point.bytes_provided),
+              valueFormatter: formatBytes,
+            },
+          ]}
+        />
+
+        <TrendChart
+          labels={capacityPoints.map((point) =>
+            formatTrendHour(point.bucket_started_at),
+          )}
+          height={180}
+          summaryScope='average'
+          summaryHint='近 24 小时 · 宿主机容量 · 平均值'
+          yAxisValueFormatter={formatPercent}
+          series={[
+            {
+              label: '平均 CPU',
+              color: '#0f766e',
+              fillColor: 'rgba(15, 118, 110, 0.15)',
+              variant: 'area',
+              values: capacityPoints.map(
+                (point) => point.average_cpu_usage_percent,
+              ),
+              valueFormatter: formatPercent,
+            },
+            {
+              label: '平均内存',
+              color: '#2563eb',
+              values: capacityPoints.map(
+                (point) => point.average_memory_usage_percent,
+              ),
+              valueFormatter: formatPercent,
+            },
+          ]}
+        />
+      </CardContent>
+    </Card>
+  );
+}