diff --git a/web/src/pages/Public/MonitorDetail.tsx b/web/src/pages/Public/MonitorDetail.tsx index 076a43b..dacd4c3 100644 --- a/web/src/pages/Public/MonitorDetail.tsx +++ b/web/src/pages/Public/MonitorDetail.tsx @@ -240,10 +240,23 @@ const CustomTooltip = ({active, payload, label, unit = ' ms'}: TooltipProps -

{label}

+

{displayLabel}

{payload.map((entry, index) => { if (!entry) { @@ -394,7 +407,7 @@ const MonitorDetail = () => { }); if (!acc[time]) { - acc[time] = {time}; + acc[time] = {time, timestamp: item.timestamp}; } // 根据选择的探针过滤 diff --git a/web/src/pages/Public/ServerDetail.tsx b/web/src/pages/Public/ServerDetail.tsx index 395388a..0e241ef 100644 --- a/web/src/pages/Public/ServerDetail.tsx +++ b/web/src/pages/Public/ServerDetail.tsx @@ -450,10 +450,16 @@ const CustomTooltip = ({active, payload, label, unit = '%'}: MetricsTooltipProps return null; } + // 从 payload 中获取完整的时间戳信息(如果有的话) + const fullTimestamp = payload[0]?.payload?.timestamp; + const displayLabel = fullTimestamp + ? dayjs(fullTimestamp).format('YYYY-MM-DD HH:mm:ss') + : label; + return (
-

{label}

+

{displayLabel}

{payload.map((entry, index) => { if (!entry) { @@ -517,6 +523,7 @@ const ServerDetail = () => { minute: '2-digit', }), usage: Number(item.maxUsage.toFixed(2)), + timestamp: item.timestamp, })), [metricsData.cpu] ); @@ -529,6 +536,7 @@ const ServerDetail = () => { minute: '2-digit', }), usage: Number(item.maxUsage.toFixed(2)), + timestamp: item.timestamp, })), [metricsData.memory] ); @@ -585,7 +593,7 @@ const ServerDetail = () => { }); if (!acc[time]) { - acc[time] = {time}; + acc[time] = {time, timestamp: item.timestamp}; } // 后端已经根据 interface 参数返回了对应的数据 @@ -605,7 +613,7 @@ const ServerDetail = () => { // Disk I/O 图表数据(汇总所有磁盘) const diskIOChartData = useMemo(() => { - const aggregated: Record = {}; + const aggregated: Record = {}; metricsData.diskIO.forEach((item) => { const time = new Date(item.timestamp).toLocaleTimeString('zh-CN', { @@ -614,7 +622,7 @@ const ServerDetail = () => { }); if (!aggregated[time]) { - aggregated[time] = {time, read: 0, write: 0}; + aggregated[time] = {time, read: 0, write: 0, timestamp: item.timestamp}; } // 转换为 MB/s @@ -635,7 +643,8 @@ const ServerDetail = () => { time: string; utilization: number; temperature: number; - count: number + count: number; + timestamp: number; }> = {}; metricsData.gpu.forEach((item) => { @@ -645,7 +654,7 @@ const ServerDetail = () => { }); if (!aggregated[time]) { - aggregated[time] = {time, utilization: 0, temperature: 0, count: 0}; + aggregated[time] = {time, utilization: 0, temperature: 0, count: 0, timestamp: item.timestamp}; } aggregated[time].utilization += item.maxUtilization; @@ -657,12 +666,13 @@ const ServerDetail = () => { time: item.time, utilization: Number((item.utilization / item.count).toFixed(2)), temperature: Number((item.temperature / item.count).toFixed(2)), + timestamp: item.timestamp, })); }, [metricsData.gpu]); // Temperature 图表数据(所有传感器的平均温度) const temperatureChartData = useMemo(() => { - const aggregated: Record = {}; + const aggregated: Record = {}; metricsData.temperature.forEach((item) => { const time = new Date(item.timestamp).toLocaleTimeString('zh-CN', { @@ -671,7 +681,7 @@ const ServerDetail = () => { }); if (!aggregated[time]) { - aggregated[time] = {time, temperature: 0, count: 0}; + aggregated[time] = {time, temperature: 0, count: 0, timestamp: item.timestamp}; } aggregated[time].temperature += item.maxTemperature; @@ -681,6 +691,7 @@ const ServerDetail = () => { return Object.values(aggregated).map((item) => ({ time: item.time, temperature: Number((item.temperature / item.count).toFixed(2)), + timestamp: item.timestamp, })); }, [metricsData.temperature]); @@ -1266,6 +1277,7 @@ const ServerDetail = () => { timeWait: item.maxTimeWait, closeWait: item.maxCloseWait, listen: item.maxListen, + timestamp: item.timestamp, }))}>