rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: HostMonitor Brush图表缩放 + avg/max/min下拉选择器

Browse Source 
- 添加 BucketPoint 结构 (avg/max/min/count)
- 时间范围切换自动调整聚合窗口 (1h→60s, 6h→5min, 12h→10min...)
- 每张指标卡片支持平均值/最大值/最小值切换
- Recharts Brush 组件实现鼠标拖选时间范围缩放
- 参考线显示整体均值
- 图表高度增大到 48 适配 Brush 条
- 磁盘分区列表兼容 agent 上报的原始字段名
This commit is contained in:
attacker committed 2026-06-19 01:15:42 +00:00
1 parent feb8530999
commit 228b6b52f9
1 file changed
+167 -115
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/HostMonitor.tsx
+167 -115
View File
@@ -1,4 +1,4 @@
// 主机监控详情 — 阿里云云监控风格 (分类指标 + 时间范围 + 时序图表) // 主机监控详情 — 阿里云云监控风格 (Brush缩放 + avg/max/min选择器)
import { useState, useEffect, useCallback, useMemo } from 'react'; import { useState, useEffect, useCallback, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom'; import { useSearchParams } from 'react-router-dom';
import { agentApi } from '@/services/api'; import { agentApi } from '@/services/api';
@@ -12,29 +12,52 @@ import {
Info, Monitor, Disc, Zap, Clock Info, Monitor, Disc, Zap, Clock
} from 'lucide-react'; } from 'lucide-react';
import { import {
AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip,
ResponsiveContainer, Brush, ReferenceLine,
} from 'recharts'; } from 'recharts';
// 时间范围配置 // 时间范围 → 聚合窗口 → 目标桶数
const TIME_RANGES = [ const TIME_RANGES = [
{ label: '1小时', hours: 1 }, { label: '1小时', hours: 1, window: 60, buckets: 60 },
{ label: '6小时', hours: 6 }, { label: '6小时', hours: 6, window: 300, buckets: 72 },
{ label: '12小时', hours: 12 }, { label: '12小时', hours: 12, window: 600, buckets: 72 },
{ label: '1天', hours: 24 }, { label: '1天', hours: 24, window: 1800, buckets: 96 },
{ label: '3天', hours: 72 }, { label: '3天', hours: 72, window: 3600, buckets: 72 },
{ label: '7天', hours: 168 }, { label: '7天', hours: 168, window: 10800, buckets: 56 },
{ label: '14天', hours: 336 }, { label: '14天', hours: 336, window: 21600, buckets: 48 },
] as const; ] as const;
// 聚合：把原始数据压缩到 targetBuckets 个桶 type AggType = 'avg' | 'max' | 'min';
function bucketData(data: number[], targetBuckets: number = 48): { time: string; value: number }[] {
if (!data || data.length === 0) return []; interface BucketPoint {
const perBucket = Math.max(1, Math.ceil(data.length / targetBuckets)); time: string;
const result: { time: string; value: number }[] = []; timestamp: number;
for (let i = 0; i < data.length; i += perBucket) { avg: number;
const slice = data.slice(i, i + perBucket); max: number;
const avg = slice.reduce((a, b) => a + b, 0) / slice.length; min: number;
result.push({ time: `-${Math.round((data.length - i) * 10 / 3600)}h`, value: Number(avg.toFixed(1)) }); count: number;
}
function bucketWithStats(raw: number[], timestamps: number[], windowSec: number, targetBuckets: number): BucketPoint[] {
if (!raw || raw.length === 0) return [];
const perBucket = Math.max(1, Math.ceil(raw.length / targetBuckets));
const result: BucketPoint[] = [];
for (let i = 0; i < raw.length; i += perBucket) {
const slice = raw.slice(i, i + perBucket);
const tsSlice = timestamps.slice(i, i + perBucket);
const sum = slice.reduce((a, b) => a + b, 0);
const avg = sum / slice.length;
const max = Math.max(...slice);
const min = Math.min(...slice);
const ts = tsSlice[Math.floor(tsSlice.length / 2)] || 0;
result.push({
time: new Date(ts * 1000).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
timestamp: ts,
avg: Number(avg.toFixed(2)),
max: Number(max.toFixed(2)),
min: Number(min.toFixed(2)),
count: slice.length,
});
} }
return result.slice(-targetBuckets); return result.slice(-targetBuckets);
} }
@@ -60,15 +83,14 @@ export function HostMonitor() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState('basic'); const [activeTab, setActiveTab] = useState('basic');
const [rangeHours, setRangeHours] = useState(1); const [rangeHours, setRangeHours] = useState(1);
const [aggType, setAggType] = useState<AggType>('avg');
// 原始历史数据
const [history, setHistory] = useState<any[]>([]); const [history, setHistory] = useState<any[]>([]);
// 最新快照
const [latest, setLatest] = useState<any>(null); const [latest, setLatest] = useState<any>(null);
// 服务器信息（来自 asset_servers）：OS、内核、总内存等，不与 history 混淆
const [serverInfo, setServerInfo] = useState<any>(null); const [serverInfo, setServerInfo] = useState<any>(null);
const timeConfig = TIME_RANGES.find(tr => tr.hours === rangeHours) || TIME_RANGES[0];
// 加载主机列表 // 加载主机列表
useEffect(() => { useEffect(() => {
agentApi.getLatest().then((data: any) => { agentApi.getLatest().then((data: any) => {
@@ -103,54 +125,56 @@ export function HostMonitor() {
.finally(() => setLoading(false)); .finally(() => setLoading(false));
}, [selectedHost, rangeHours]); }, [selectedHost, rangeHours]);
// 提取指标数组 // 从原始历史数据提取指标 + 分桶聚合
const metrics = useMemo(() => { const metrics = useMemo(() => {
const cpu: number[] = []; const rawCpu: number[] = [];
const mem: number[] = []; const rawMem: number[] = [];
const load1: number[] = []; const rawLoad1: number[] = [];
const disk: number[] = []; const rawDisk: number[] = [];
const tcpEst: number[] = []; const rawTcp: number[] = [];
const rx: number[] = []; const rawRx: number[] = [];
const tx: number[] = []; const rawTx: number[] = [];
const ioRead: number[] = []; const rawIoR: number[] = [];
const ioWrite: number[] = []; const rawIoW: number[] = [];
const ioReadOps: number[] = []; const rawIoRops: number[] = [];
const ioWriteOps: number[] = []; const rawIoWops: number[] = [];
const timestamps: number[] = [];
for (const r of history) { for (const r of history) {
cpu.push(r.cpu_usage || 0); const ts = r.report_time ? new Date(r.report_time).getTime() / 1000 : (r.created_at ? new Date(r.created_at).getTime() / 1000 : 0);
mem.push(r.mem_usage || 0); timestamps.push(ts);
load1.push(r.load1 || 0);
disk.push(r.disk_usage || 0); rawCpu.push(r.cpu_usage || 0);
rawMem.push(r.mem_usage || 0);
rawLoad1.push(r.load1 || 0);
rawDisk.push(r.disk_usage || 0);
const net = parseJSON(r.net_info); const net = parseJSON(r.net_info);
tcpEst.push(net.tcp_established || 0); rawTcp.push(net.tcp_established || 0);
rx.push(net.net_rx_bps || 0); rawRx.push(net.net_rx_bps || 0);
tx.push(net.net_tx_bps || 0); rawTx.push(net.net_tx_bps || 0);
const dio = parseJSON(r.disk_io_info); const dio = parseJSON(r.disk_io_info);
ioRead.push(dio.read_bps || 0); rawIoR.push(dio.read_bps || 0);
ioWrite.push(dio.write_bps || 0); rawIoW.push(dio.write_bps || 0);
ioReadOps.push(dio.read_iops || 0); rawIoRops.push(dio.read_iops || 0);
ioWriteOps.push(dio.write_iops || 0); rawIoWops.push(dio.write_iops || 0);
} }
const target = rangeHours <= 1 ? 60 : rangeHours <= 6 ? 72 : rangeHours <= 24 ? 96 : 120;
return { return {
cpu: bucketData(cpu, target), cpu: bucketWithStats(rawCpu, timestamps, timeConfig.window, timeConfig.buckets),
mem: bucketData(mem, target), mem: bucketWithStats(rawMem, timestamps, timeConfig.window, timeConfig.buckets),
load1: bucketData(load1, target), load1: bucketWithStats(rawLoad1, timestamps, timeConfig.window, timeConfig.buckets),
disk: bucketData(disk, target), disk: bucketWithStats(rawDisk, timestamps, timeConfig.window, timeConfig.buckets),
tcpEst: bucketData(tcpEst, target), tcpEst: bucketWithStats(rawTcp, timestamps, timeConfig.window, timeConfig.buckets),
rx: bucketData(rx.map(v => v / 1024), target), // KB/s rx: bucketWithStats(rawRx.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
tx: bucketData(tx.map(v => v / 1024), target), tx: bucketWithStats(rawTx.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
ioRead: bucketData(ioRead.map(v => v / 1024), target), // KB/s ioRead: bucketWithStats(rawIoR.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
ioWrite: bucketData(ioWrite.map(v => v / 1024), target), // KB/s ioWrite: bucketWithStats(rawIoW.map(v => v / 1024), timestamps, timeConfig.window, timeConfig.buckets),
ioReadOps: bucketData(ioReadOps, target), // count/s ioReadOps: bucketWithStats(rawIoRops, timestamps, timeConfig.window, timeConfig.buckets),
ioWriteOps: bucketData(ioWriteOps, target), // count/s ioWriteOps: bucketWithStats(rawIoWops, timestamps, timeConfig.window, timeConfig.buckets),
}; };
}, [history, rangeHours]); }, [history, timeConfig]);
const netInfo = parseJSON(latest?.net_info); const netInfo = parseJSON(latest?.net_info);
const portInfo: any[] = Array.isArray(latest?.port_info) ? latest.port_info : (Array.isArray(parseJSON(latest?.port_info)) ? parseJSON(latest?.port_info) : []); const portInfo: any[] = Array.isArray(latest?.port_info) ? latest.port_info : (Array.isArray(parseJSON(latest?.port_info)) ? parseJSON(latest?.port_info) : []);
@@ -178,7 +202,7 @@ export function HostMonitor() {
return ( return (
<div className="space-y-3"> <div className="space-y-3">
{/* 顶栏：主机选择 + 时间范围 */} {/* 顶栏 */}
<div className="flex items-center justify-between flex-wrap gap-2"> <div className="flex items-center justify-between flex-wrap gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Server className="h-4 w-4 text-blue-400" /> <Server className="h-4 w-4 text-blue-400" />
@@ -199,6 +223,19 @@ export function HostMonitor() {
)} )}
</div> </div>
<div className="flex items-center gap-2">
{/* 聚合类型选择 */}
<Select value={aggType} onValueChange={(v) => setAggType(v as AggType)}>
<SelectTrigger className="w-24 h-7 text-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-slate-800 border-slate-700 text-slate-200">
<SelectItem value="avg">平均值</SelectItem>
<SelectItem value="max">最大值</SelectItem>
<SelectItem value="min">最小值</SelectItem>
</SelectContent>
</Select>
{/* 时间范围 */} {/* 时间范围 */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{TIME_RANGES.map(tr => ( {TIME_RANGES.map(tr => (
@@ -212,7 +249,8 @@ export function HostMonitor() {
{tr.label} {tr.label}
</Button> </Button>
))} ))}
<Badge variant="outline" className="text-[10px] h-6">周期: 15秒</Badge> </div>
<Badge variant="outline" className="text-[10px] h-6">聚合: {aggType}</Badge>
</div> </div>
</div> </div>
@@ -220,10 +258,10 @@ export function HostMonitor() {
<Tabs value={activeTab} onValueChange={setActiveTab}> <Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0"> <TabsList className="h-8 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] gap-0">
{[ {[
{ id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" />, desc: 'CPU/内存/负载' }, { id: 'basic', label: '基础监控', icon: <Monitor className="w-3 h-3" /> },
{ id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" />, desc: '使用率/IO' }, { id: 'disk', label: '磁盘监控', icon: <HardDrive className="w-3 h-3" /> },
{ id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" />, desc: 'TCP/流量' }, { id: 'network', label: '网络监控', icon: <Network className="w-3 h-3" /> },
{ id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" />, desc: 'OS/内核/运行时间' }, { id: 'system', label: '系统信息', icon: <Info className="w-3 h-3" /> },
].map(tab => ( ].map(tab => (
<TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1 data-[state=active]:bg-[var(--dg-bg-primary)]"> <TabsTrigger key={tab.id} value={tab.id} className="text-[11px] h-7 gap-1 data-[state=active]:bg-[var(--dg-bg-primary)]">
{tab.icon}{tab.label} {tab.icon}{tab.label}
@@ -231,78 +269,67 @@ export function HostMonitor() {
))} ))}
</TabsList> </TabsList>
{/* ═══ 基础监控: CPU / 内存 / 负载 ═══ */} {/* 基础监控 */}
<TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3"> <TabsContent value="basic" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
<MetricChartCard <MetricChartCard
title="CPU使用率(%)" value={currentVal('cpu')} icon={<Cpu className="h-4 w-4 text-blue-400" />} title="CPU使用率(%)" value={currentVal('cpu')} icon={<Cpu className="h-4 w-4 text-blue-400" />}
data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType}
period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
/> />
<MetricChartCard <MetricChartCard
title="内存使用率(%)" value={currentVal('mem')} icon={<Server className="h-4 w-4 text-emerald-400" />} title="内存使用率(%)" value={currentVal('mem')} icon={<Server className="h-4 w-4 text-emerald-400" />}
data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType}
period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
/> />
<MetricChartCard <MetricChartCard
title="系统平均负载(count)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 text-purple-400" />} title="系统平均负载(count)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 text-purple-400" />}
data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType}
period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
/> />
</TabsContent> </TabsContent>
{/* ═══ 磁盘监控: 使用率 / BPS / IOPS ═══ */} {/* 磁盘监控 */}
<TabsContent value="disk" className="mt-3 space-y-3"> <TabsContent value="disk" className="mt-3 space-y-3">
<div className="grid grid-cols-1 md:grid-cols-3 gap-3"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<MetricChartCard <MetricChartCard
title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive className="h-4 w-4 text-orange-400" />} title="磁盘使用率(%)" value={currentVal('disk')} icon={<HardDrive className="h-4 w-4 text-orange-400" />}
data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType}
period={`周期: ${rangeHours <= 1 ? '15' : rangeHours <= 6 ? '1m' : '5m'}秒`}
/> />
<MetricChartCard <MetricChartCard
title="所有磁盘读取BPS(B/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 text-blue-400" />} title="所有磁盘读取BPS(KB/s)" value={currentVal('ioR')} icon={<Disc className="h-4 w-4 text-blue-400" />}
data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
period="平均值"
/> />
<MetricChartCard <MetricChartCard
title="所有磁盘写入BPS(B/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 text-emerald-400" />} title="所有磁盘写入BPS(KB/s)" value={currentVal('ioW')} icon={<Disc className="h-4 w-4 text-emerald-400" />}
data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
period="平均值"
/> />
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<MetricChartCard <MetricChartCard
title="所有磁盘每秒读取次数(count/s)" value={currentVal('ioR_ops')} icon={<Zap className="h-4 w-4 text-blue-400" />} title="所有磁盘每秒读取次数(count/s)" value={currentVal('ioR_ops')} icon={<Zap className="h-4 w-4 text-blue-400" />}
data={metrics.ioReadOps} color="#6366f1" unit="count/s" domain={[0, 'auto']} data={metrics.ioReadOps} color="#6366f1" unit="count/s" domain={[0, 'auto']} aggType={aggType}
period="平均值"
/> />
<MetricChartCard <MetricChartCard
title="所有磁盘每秒写入次数(count/s)" value={currentVal('ioW_ops')} icon={<Zap className="h-4 w-4 text-emerald-400" />} title="所有磁盘每秒写入次数(count/s)" value={currentVal('ioW_ops')} icon={<Zap className="h-4 w-4 text-emerald-400" />}
data={metrics.ioWriteOps} color="#22d3ee" unit="count/s" domain={[0, 'auto']} data={metrics.ioWriteOps} color="#22d3ee" unit="count/s" domain={[0, 'auto']} aggType={aggType}
period="平均值"
/> />
</div> </div>
</TabsContent> </TabsContent>
{/* ═══ 网络监控: TCP连接 / 接收 / 发送 ═══ */} {/* 网络监控 */}
<TabsContent value="network" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3"> <TabsContent value="network" className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
<MetricChartCard <MetricChartCard
title="TCP连接数(个)" value={currentVal('tcp')} icon={<Network className="h-4 w-4 text-purple-400" />} title="TCP连接数(个)" value={currentVal('tcp')} icon={<Network className="h-4 w-4 text-purple-400" />}
data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} aggType={aggType}
period={`ESTABLISHED / TIME_WAIT ${netInfo.tcp_time_wait || 0}`}
/> />
<MetricChartCard <MetricChartCard
title="网络接收速率(KB/s)" value={currentVal('rx')} icon={<Network className="h-4 w-4 text-blue-400" />} title="网络接收速率(KB/s)" value={currentVal('rx')} icon={<Network className="h-4 w-4 text-blue-400" />}
data={metrics.rx} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} data={metrics.rx} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
period={netInfo.nic_name ? `网卡: ${netInfo.nic_name}` : '平均值'}
/> />
<MetricChartCard <MetricChartCard
title="网络发送速率(KB/s)" value={currentVal('tx')} icon={<Network className="h-4 w-4 text-emerald-400" />} title="网络发送速率(KB/s)" value={currentVal('tx')} icon={<Network className="h-4 w-4 text-emerald-400" />}
data={metrics.tx} color="#10b981" unit="KB/s" domain={[0, 'auto']} data={metrics.tx} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType}
period={netInfo.nic_name ? `网卡: ${netInfo.nic_name}` : '平均值'}
/> />
</TabsContent> </TabsContent>
{/* ═══ 系统信息 ═══ */} {/* 系统信息 */}
<TabsContent value="system" className="mt-3 space-y-3"> <TabsContent value="system" className="mt-3 space-y-3">
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4"> <CardContent className="p-4">
@@ -346,10 +373,10 @@ export function HostMonitor() {
</Card> </Card>
)} )}
{/* 磁盘分区详情 */} {/* 磁盘分区 */}
{latest?.disk_info && (() => { {latest?.disk_info && (() => {
const disk = parseJSON(latest.disk_info); const disk = parseJSON(latest.disk_info);
const parts = disk.partitions || []; const parts = Array.isArray(disk) ? disk : (disk.partitions || []);
if (!parts.length) return null; if (!parts.length) return null;
return ( return (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
@@ -361,12 +388,12 @@ export function HostMonitor() {
<div className="space-y-1.5"> <div className="space-y-1.5">
{parts.map((p: any, i: number) => ( {parts.map((p: any, i: number) => (
<div key={i} className="flex items-center gap-2 text-xs"> <div key={i} className="flex items-center gap-2 text-xs">
<span className="text-[var(--dg-text-muted)] w-24 font-mono truncate">{p.mountpoint || p.path}</span> <span className="text-[var(--dg-text-muted)] w-24 font-mono truncate">{p.mount || p.mountpoint || p.device || `disk${i}`}</span>
<div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden"> <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.min(p.used_percent || 0, 100)}%` }} /> <div className="h-full rounded-full bg-blue-500" style={{ width: `${Math.min(p.usage_percent || p.used_percent || 0, 100)}%` }} />
</div> </div>
<span className="text-[var(--dg-text-primary)] w-20 text-right tabular-nums">{p.used || '?'}/{p.total || '?'}</span> <span className="text-[var(--dg-text-primary)] w-20 text-right tabular-nums">{p.used_gb?.toFixed(1) || p.used || '?'}/{p.total_gb?.toFixed(0) || p.total || '?'}GB</span>
<span className="text-blue-400 w-12 text-right tabular-nums">{p.used_percent || 0}%</span> <span className="text-blue-400 w-12 text-right tabular-nums">{p.usage_percent || p.used_percent || 0}%</span>
</div> </div>
))} ))}
</div> </div>
@@ -375,7 +402,7 @@ export function HostMonitor() {
); );
})()} })()}
{/* 网络接口详情 */} {/* 网络接口 */}
{netInfo && ( {netInfo && (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-4"> <CardContent className="p-4">
@@ -387,7 +414,7 @@ export function HostMonitor() {
<div><span className="text-[var(--dg-text-muted)]">网卡：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.nic_name || '—'}</span></div> <div><span className="text-[var(--dg-text-muted)]">网卡：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.nic_name || '—'}</span></div>
<div><span className="text-[var(--dg-text-muted)]">接收：</span><span className="text-blue-400 font-mono">{netInfo.net_rx_bps ? `${(netInfo.net_rx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div> <div><span className="text-[var(--dg-text-muted)]">接收：</span><span className="text-blue-400 font-mono">{netInfo.net_rx_bps ? `${(netInfo.net_rx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div>
<div><span className="text-[var(--dg-text-muted)]">发送：</span><span className="text-emerald-400 font-mono">{netInfo.net_tx_bps ? `${(netInfo.net_tx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div> <div><span className="text-[var(--dg-text-muted)]">发送：</span><span className="text-emerald-400 font-mono">{netInfo.net_tx_bps ? `${(netInfo.net_tx_bps/1024).toFixed(1)} KB/s` : '—'}</span></div>
<div><span className="text-[var(--dg-text-muted)]">EST/TW/LN：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.tcp_established || 0}/{netInfo.tcp_time_wait || 0}/{netInfo.tcp_listen || 0}</span></div> <div><span className="text-[var(--dg-text-muted)]">EST/TW：</span><span className="text-[var(--dg-text-primary)] font-mono">{netInfo.tcp_established || 0}/{netInfo.tcp_time_wait || 0}</span></div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -398,13 +425,20 @@ export function HostMonitor() {
); );
} }
// ═══════ 指标图表卡片 ═══════ // ═══════ 指标图表卡片 (带 Brush 缩放 + avg/max/min 数据) ═══════
function MetricChartCard({ function MetricChartCard({
title, value, icon, data, color, unit, domain, period, title, value, icon, data, color, unit, domain, aggType,
}: { }: {
title: string; value: string; icon: React.ReactNode; data: { time: string; value: number }[]; title: string; value: string; icon: React.ReactNode;
color: string; unit: string; domain: [number, number | 'auto']; period: string; data: BucketPoint[]; color: string; unit: string;
domain: [number, number | 'auto']; aggType: AggType;
}) { }) {
// 选择当前聚合类型的值
const chartData = data.map(d => ({
...d,
value: d[aggType],
}));
return ( return (
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"> <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
<CardContent className="p-3"> <CardContent className="p-3">
@@ -414,7 +448,9 @@ function MetricChartCard({
{icon} {icon}
<span className="text-xs text-[var(--dg-text-primary)] font-medium truncate">{title}</span> <span className="text-xs text-[var(--dg-text-primary)] font-medium truncate">{title}</span>
</div> </div>
<span className="text-[10px] text-[var(--dg-text-muted)]">{period}</span> <span className="text-[10px] text-[var(--dg-text-muted)]">
{aggType === 'avg' ? '平均值' : aggType === 'max' ? '最大值' : '最小值'}
</span>
</div> </div>
{/* 当前值 */} {/* 当前值 */}
@@ -423,15 +459,15 @@ function MetricChartCard({
{unit && <span className="text-xs text-[var(--dg-text-muted)] ml-1">{unit}</span>} {unit && <span className="text-xs text-[var(--dg-text-muted)] ml-1">{unit}</span>}
</div> </div>
{/* 趋势图 */} {/* 趋势图 + Brush 缩放 */}
<div className="h-36"> <div className="h-48">
{data.length === 0 ? ( {chartData.length === 0 ? (
<div className="h-full flex items-center justify-center text-xs text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-md"> <div className="h-full flex items-center justify-center text-xs text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-md">
暂无数据 暂无数据
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<AreaChart data={data} margin={{ top: 2, right: 2, bottom: 0, left: -10 }}> <AreaChart data={chartData} margin={{ top: 2, right: 2, bottom: 0, left: -10 }}>
<defs> <defs>
<linearGradient id={`grad-${title}`} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={`grad-${title}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={color} stopOpacity={0.3} /> <stop offset="5%" stopColor={color} stopOpacity={0.3} />
@@ -440,18 +476,34 @@ function MetricChartCard({
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" strokeOpacity={0.5} /> <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" strokeOpacity={0.5} />
<XAxis dataKey="time" hide /> <XAxis dataKey="time" hide />
<YAxis <YAxis hide domain={domain[1] === 'auto' ? [0, (max: number) => max * 1.1] : domain as [number, number]} />
hide
domain={domain[1] === 'auto' ? [0, (max: number) => max * 1.1] : domain as [number, number]}
/>
<Tooltip <Tooltip
contentStyle={{ contentStyle={{
backgroundColor: '#0f172a', border: '1px solid #1e293b', backgroundColor: '#0f172a', border: '1px solid #1e293b',
borderRadius: '4px', color: '#f8fafc', fontSize: '11px', padding: '4px 8px', borderRadius: '4px', color: '#f8fafc', fontSize: '11px', padding: '4px 8px',
}} }}
formatter={(v: number) => [`${v.toFixed(2)} ${unit}`, title.replace(/\(.+\)/, '')]} formatter={(v: number) => [`${v.toFixed(2)} ${unit}`, title.replace(/\(.+\)/, '')]}
labelFormatter={(label) => `时间: ${label}`}
/> />
<Area type="monotone" dataKey="value" stroke={color} strokeWidth={1.5} fill={`url(#grad-${title})`} /> <Area type="monotone" dataKey="value" stroke={color} strokeWidth={1.5} fill={`url(#grad-${title})`} />
{/* Brush 缩放条 — 可拖动选择时间范围，鼠标滚轮精细调整 */}
<Brush
dataKey="time"
height={24}
stroke="#334155"
fill="#0f172a"
tickFormatter={(t: string) => t}
startIndex={Math.max(0, chartData.length - Math.min(20, chartData.length))}
/>
{/* 参考线：平均值 */}
{chartData.length > 0 && (
<ReferenceLine
y={chartData.reduce((s, d) => s + d.value, 0) / chartData.length}
stroke={color}
strokeOpacity={0.3}
strokeDasharray="4 4"
/>
)}
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
)} )}