fix: 仪表盘资源趋势图使用真实Agent指标替代随机假数据

- 后端 GetMetrics 修复 strftime 字符串无法扫入 time.Time 导致 timestamp 为零值的 bug
  (改为 string 类型 + time.ParseInLocation 手动解析)
- 前端 Dashboard.tsx 新增 getMetrics(24) 调用,获取真实按小时聚合的 Agent 数据
- DashboardCharts.tsx 新增 buildMetricsFromReal() 将 MetricData[] 转换为图表数据
- ResourceUsageCard 优先使用真实时间序列,无数据时回退到平均值生成
This commit is contained in:
attacker committed 2026-06-15 03:05:26 +08:00
1 parent b770ec025b
commit a3b84f79c7
3 files changed
+50 -8

No files matched your search

@@ -20,12 +20,13 @@ export function Dashboard() {
const [alerts, setAlerts] = useState<any[]>([]);
const [releases, setReleases] = useState<any[]>([]);
const [expCerts, setExpCerts] = useState<any[]>([]);
const [metrics, setMetrics] = useState<any[]>([]); // 真实 Agent 指标时间序列 // Logan.Li
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const [statsRes, serversRes, clustersRes, alertsRes, releasesRes] = await Promise.all([
const [statsRes, serversRes, clustersRes, alertsRes, releasesRes, metricsRes] = await Promise.all([
dashboardStatsApi.getStats().catch((e) => {
console.error('Failed to fetch dashboard stats:', e);
return null;
@@ -46,6 +47,11 @@ export function Dashboard() {
console.error('Failed to fetch dashboard releases:', e);
return null;
}),
// 获取真实 Agent 指标时间序列(过去24小时按小时聚合) // Logan.Li
dashboardStatsApi.getMetrics(24).catch((e) => {
console.error('Failed to fetch metrics:', e);
return [];
}),
]);
setStats(statsRes);
@@ -54,6 +60,7 @@ export function Dashboard() {
setAlerts(Array.isArray(alertsRes) ? alertsRes : []);
setReleases(Array.isArray(releasesRes) ? releasesRes : []);
setExpCerts(statsRes?.expiring_certs ?? []);
setMetrics(Array.isArray(metricsRes) ? metricsRes : []);
} catch (error) {
console.error('Failed to load dashboard data:', error);
} finally {
@@ -142,6 +149,7 @@ export function Dashboard() {
avgCpu={Number(serverStats?.avg_cpu ?? 0)}
avgMemory={Number(serverStats?.avg_memory ?? 0)}
avgDisk={Number(serverStats?.avg_disk ?? 0)}
metrics={metrics}
/>
{/* Cost & Top Resource Usage */}
@@ -248,17 +248,46 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
);
}
// 将后端 MetricData[] 时间序列转换为图表所需格式 { time, cpu, memory } // Logan.Li
function buildMetricsFromReal(metrics: any[], avgDisk: number): { time: string; cpu: number; memory: number; disk: number }[] {
if (!metrics || metrics.length === 0) return [];
// 按 timestamp 分组:同一时刻有 cpu + memory 两条记录
const buckets: Record<string, { cpu?: number; memory?: number }> = {};
for (const m of metrics) {
const ts = m.timestamp;
if (!ts) continue;
// 提取 HH:MM 格式作为 X 轴标签
const d = new Date(ts);
const label = `${d.getHours().toString().padStart(2, '0')}:00`;
if (!buckets[label]) buckets[label] = {};
if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
}
return Object.entries(buckets)
.sort((a, b) => a[0].localeCompare(b[0]))
.map(([time, v]) => ({
time,
cpu: Number((v.cpu ?? 0).toFixed(1)),
memory: Number((v.memory ?? 0).toFixed(1)),
disk: Number(avgDisk.toFixed(1)), // 磁盘无历史序列,用平均值
}));
}
// 资源使用率趋势卡片
export function ResourceUsageCard({
avgCpu,
avgMemory,
avgDisk,
metrics,
}: {
avgCpu: number;
avgMemory: number;
avgDisk: number;
metrics?: any[];
}) {
const data = generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
// 优先使用真实 Agent 指标时间序列;无数据时回退到平均值生成(带随机波动) // Logan.Li
const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
return (
<Card className="bg-slate-900 border-slate-800">