From d2201fc8c082ee940bac0097fc5242decb3a3af0 Mon Sep 17 00:00:00 2001 From: attacker Date: Thu, 18 Jun 2026 14:04:26 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=91=E6=8E=A7=E5=A4=A7=E5=B1=8F=20?= =?UTF-8?q?Grafana=20=E9=A3=8E=E6=A0=BC=E5=A2=9E=E5=BC=BA=20=E2=80=94=206?= =?UTF-8?q?=E5=8D=A1=E7=BB=9F=E8=AE=A1=20+=20bargauge=20=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E6=9D=A1=E7=8A=B6=E5=9B=BE=20(=E5=8F=82=E7=85=A7=20k8s/node/jv?= =?UTF-8?q?m=20dashboard)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 统计卡片: 3→6 (主机总数/在线/离线/平均CPU/平均内存) 带阈值颜色 - 资源条状图: Top 5 CPU + 内存排行, 渐变色进度条 (绿<60%<黄<85%<红) - 参照: Grafana k8s-dashboard bargauge / node-dashboard 表格 / jvm Quick Facts --- .../dashboard/HostMonitorDashboard.tsx | 147 ++++++++++++++++-- 1 file changed, 131 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx b/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx index c46879c..0ca1078 100644 --- a/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx +++ b/frontend/src/components/monitor/dashboard/HostMonitorDashboard.tsx @@ -1,10 +1,11 @@ -// 主机监控大屏 — 列表视图 + 可排序 + 操作栏 // Logan.Li +// 主机监控大屏 — Grafana 风格：统计卡片 + 资源条状图 + 可排序列表 // Logan.Li +// 参照: Grafana node-dashboard.json (表格+时序) / k8s-dashboard.json (bargauge+阈值) import { useState, useEffect, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { Server, Cpu, HardDrive, Activity, Monitor, Bell, ArrowUpDown, ArrowUp, ArrowDown, RefreshCw, Search, - ChevronLeft, ChevronRight + ChevronLeft, ChevronRight, Zap, AlertTriangle, Wifi, WifiOff } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; @@ -133,37 +134,151 @@ export default function HostMonitorDashboard() { return (
- {/* 统计卡片 */} -
+ {/* 统计卡片 — Grafana Quick Facts 风格 (参照 JVM Dashboard) */} +
- -
+ +
-
{stats.online}
-
Agent 在线
+
{stats.total}
+
主机总数
 - -
+ +
-
{stats.offline}
-
Agent 离线
+
{stats.online}
+
Agent 在线
 - -
+ +
-
{stats.total}
-
主机总数
+
{stats.offline}
+
离线
 + {(() => { + const onlines = hosts.filter((h: any) => h.agent_status === 'online'); + const avgCpu = onlines.length > 0 ? onlines.reduce((s: number, h: any) => s + (h.cpu_usage || 0), 0) / onlines.length : 0; + const avgMem = onlines.length > 0 ? onlines.reduce((s: number, h: any) => s + (h.memory_usage || 0), 0) / onlines.length : 0; + const cpuColor = avgCpu > 85 ? 'text-red-400' : avgCpu > 60 ? 'text-amber-400' : 'text-emerald-400'; + const memColor = avgMem > 85 ? 'text-red-400' : avgMem > 60 ? 'text-amber-400' : 'text-emerald-400'; + return (<> + + +
+
+
{avgCpu.toFixed(1)}%
+
平均 CPU
+
+ + + + +
+
+
{avgMem.toFixed(1)}%
+
平均内存
+
+ + + ); + })()}
+ {/* 资源条状图 — Grafana Bargauge 风格 (参照 K8s Node CPU/Memory Ratio) */} + {hosts.filter((h: any) => h.agent_status === 'online').length > 0 && ( +
+ {/* CPU 排行 */} + + + + + CPU 使用率 Top 5 + 阈值: 60% / 85% + + + + {[...hosts] + .filter((h: any) => h.agent_status === 'online') + .sort((a: any, b: any) => (b.cpu_usage || 0) - (a.cpu_usage || 0)) + .slice(0, 5) + .map((h: any) => { + const val = h.cpu_usage || 0; + return ( +
+ {h.hostname} +
+
= 85 + ? 'linear-gradient(90deg, #ef4444, #f87171)' + : val >= 60 + ? 'linear-gradient(90deg, #f59e0b, #fbbf24)' + : 'linear-gradient(90deg, #10b981, #34d399)' + }} + /> +
+ = 85 ? 'text-red-400' : val >= 60 ? 'text-amber-400' : 'text-emerald-400' + }`}>{val.toFixed(1)}% +
+ ); + })} + + + + {/* 内存排行 */} + + + + + 内存使用率 Top 5 + 阈值: 60% / 85% + + + + {[...hosts] + .filter((h: any) => h.agent_status === 'online') + .sort((a: any, b: any) => (b.memory_usage || 0) - (a.memory_usage || 0)) + .slice(0, 5) + .map((h: any) => { + const val = h.memory_usage || 0; + return ( +
+ {h.hostname} +
+
= 85 + ? 'linear-gradient(90deg, #ef4444, #f87171)' + : val >= 60 + ? 'linear-gradient(90deg, #f59e0b, #fbbf24)' + : 'linear-gradient(90deg, #10b981, #34d399)' + }} + /> +
+ = 85 ? 'text-red-400' : val >= 60 ? 'text-amber-400' : 'text-emerald-400' + }`}>{val.toFixed(1)}% +
+ ); + })} + + +
+ )} + {/* 表格卡片 */}