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