feat(dashboard): enhance risk summary and peak node display in dashboard overview

- Added risk summary metrics including critical alerts, high CPU/memory nodes, and lagging nodes to the dashboard overview. - Introduced peak node metrics for busiest and riskiest nodes with detailed display. - Updated types for dashboard overview to include risk and peak summaries. - Implemented new components for displaying risk signals and peak cards. - Enhanced unit tests to cover new risk and peak metrics in the dashboard overview. fix(update): improve error messages for server upgrade processes - Translated and clarified error messages related to server upgrades and binary uploads. - Ensured consistent error handling and messaging throughout the upgrade process. test(update): refactor test utilities for server upgrade - Renamed roundTripFunc to serverUpdateRoundTripFunc for clarity in test code. - Updated test cases to utilize the new naming convention. feat(node-detail): add traffic structure distribution and health event timeline - Implemented traffic breakdown visualization for status codes and top domains in node detail page. - Added health event timeline to display active and resolved events for better observability. feat(rank-chart): create reusable rank chart component - Developed a new RankChart component for visualizing ranked data distributions. - Integrated RankChart into node detail page for displaying status code and domain distributions.
2026-10-03 15:06:36 +08:00 · 2026-03-14 12:12:38 +08:00
parent 16bb9e5879
commit 497289b462
9 changed files with 689 additions and 57 deletions
@@ -0,0 +1,126 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { EChartsOption } from 'echarts';
+import ReactECharts from 'echarts-for-react';
+
+type RankChartItem = {
+  label: string;
+  value: number;
+};
+
+type RankChartProps = {
+  items: RankChartItem[];
+  color: string;
+  valueFormatter?: (value: number) => string;
+  emptyMessage?: string;
+};
+
+const defaultFormatter = (value: number) => value.toLocaleString('zh-CN');
+
+export function RankChart({
+  items,
+  color,
+  valueFormatter = defaultFormatter,
+  emptyMessage = '暂无分布数据',
+}: RankChartProps) {
+  if (items.length === 0) {
+    return (
+      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
+        {emptyMessage}
+      </div>
+    );
+  }
+
+  const option = useMemo<EChartsOption>(
+    () => ({
+      animationDuration: 400,
+      grid: {
+        left: 16,
+        right: 24,
+        top: 12,
+        bottom: 12,
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+        backgroundColor: 'rgba(15, 23, 42, 0.92)',
+        borderWidth: 0,
+        textStyle: {
+          color: '#e2e8f0',
+          fontSize: 12,
+        },
+        formatter: (params: unknown) => {
+          const item = Array.isArray(params) ? params[0] : params;
+          const data = item as { name?: string; value?: number };
+          return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
+        },
+      },
+      xAxis: {
+        type: 'value',
+        axisLabel: {
+          color: '#94a3b8',
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(148, 163, 184, 0.16)',
+            type: 'dashed',
+          },
+        },
+      },
+      yAxis: {
+        type: 'category',
+        data: items.map((item) => item.label),
+        axisTick: { show: false },
+        axisLine: { show: false },
+        axisLabel: {
+          color: '#cbd5e1',
+          width: 120,
+          overflow: 'truncate',
+        },
+      },
+      series: [
+        {
+          type: 'bar',
+          data: items.map((item) => item.value),
+          barWidth: 12,
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(148, 163, 184, 0.12)',
+            borderRadius: 999,
+          },
+          itemStyle: {
+            color,
+            borderRadius: 999,
+          },
+          label: {
+            show: true,
+            position: 'right',
+            color: '#e2e8f0',
+            formatter: (params: any) => {
+              const rawValue = Array.isArray(params.value)
+                ? params.value[0]
+                : params.value;
+              return valueFormatter(
+                typeof rawValue === 'number' ? rawValue : 0,
+              );
+            },
+          },
+        },
+      ],
+    }),
+    [color, items, valueFormatter],
+  );
+
+  return (
+    <ReactECharts
+      option={option}
+      notMerge
+      lazyUpdate
+      style={{ height: Math.max(220, items.length * 44), width: '100%' }}
+    />
+  );
+}