{toolbar}
{!loading && history.length > 0 && (
-
+
)}
{loading && !history.length ?
: monitorBody}
{dialogs}
@@ -530,16 +212,11 @@ export function HostMonitor({ embedded = false }: { embedded?: boolean }) {
}
return (
-
}
- toolbar={toolbar}
- loading={loading && !history.length}
- loadingLabel={i18n.t('monitor.hostmonitortsx.sc23e802e')}
- contentClassName="space-y-3"
- >
+ icon={
} toolbar={toolbar}
+ loading={loading && !history.length} loadingLabel={i18n.t('monitor.hostmonitortsx.sc23e802e')}
+ contentClassName="space-y-3">
{monitorBody}
{dialogs}
diff --git a/frontend/src/pages/monitor/host-monitor/tabs/BasicTab.tsx b/frontend/src/pages/monitor/host-monitor/tabs/BasicTab.tsx
new file mode 100644
index 0000000..534159f
--- /dev/null
+++ b/frontend/src/pages/monitor/host-monitor/tabs/BasicTab.tsx
@@ -0,0 +1,35 @@
+// 主机监控 — 基础监控 Tab (CPU/IO等待/内存/可用内存/Swap/负载)
+import { Cpu, Clock, Server, HardDrive, Activity } from 'lucide-react';
+import type { AggType, BucketPoint, HostRecord, RefLine } from '../types';
+import { MetricChartCard } from '../MetricChartCard';
+import i18n from '@/i18n';
+
+export interface BasicTabProps {
+ metrics: {
+ cpu: BucketPoint[]; iowait: BucketPoint[]; mem: BucketPoint[];
+ memAvail: BucketPoint[]; swap: BucketPoint[]; load1: BucketPoint[];
+ };
+ latest: HostRecord;
+ currentVal: (key: string, fallback?: string) => string;
+ aggType: AggType;
+ pctRefLines: RefLine[];
+}
+
+export function BasicTab({ metrics, latest, currentVal, aggType, pctRefLines }: BasicTabProps) {
+ return (
+
+ } iconTone="blue"
+ data={metrics.cpu} color="#3b82f6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+ } iconTone="orange"
+ data={metrics.iowait} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+ } iconTone="green"
+ data={metrics.mem} color="#10b981" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+ } iconTone="green"
+ data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="red"
+ data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
+ } iconTone="purple"
+ data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
+
+ );
+}
diff --git a/frontend/src/pages/monitor/host-monitor/tabs/ContextSwitchCard.tsx b/frontend/src/pages/monitor/host-monitor/tabs/ContextSwitchCard.tsx
new file mode 100644
index 0000000..6637e3b
--- /dev/null
+++ b/frontend/src/pages/monitor/host-monitor/tabs/ContextSwitchCard.tsx
@@ -0,0 +1,55 @@
+// 主机监控 — 上下文切换/中断卡片 (CTX/IRQ 大数字 + 比例条)
+import type { JsonData } from '@/types/common';
+import { Card, CardContent } from '@/components/ui/card';
+import { RefreshCw } from 'lucide-react';
+import i18n from '@/i18n';
+
+export function ContextSwitchCard({ csInfo }: { csInfo: JsonData }) {
+ return (
+
+
+
+ 上下文切换
+
+ {csInfo?.ctx_per_sec != null ? (
+
+
+
+
CTX 切换/秒
+
+ {(csInfo.ctx_per_sec / 1e6).toFixed(1)}M
+
+
{csInfo.ctx_per_sec?.toLocaleString()} 次
+
+
+
IRQ 中断/秒
+
+ {(csInfo.irq_per_sec / 1e6).toFixed(1)}M
+
+
{csInfo.irq_per_sec?.toLocaleString()} 次
+
+
+
+
+ CTX
+ IRQ
+
+
+ {csInfo.ctx_per_sec + csInfo.irq_per_sec > 0 && (
+ <>
+
+
+
+ )}
+
+
+
{i18n.t('monitor.hostmonitortsx.sae1a30b7')}
+ )}
+
+
+ );
+}
diff --git a/frontend/src/pages/monitor/host-monitor/tabs/DiskTab.tsx b/frontend/src/pages/monitor/host-monitor/tabs/DiskTab.tsx
new file mode 100644
index 0000000..61f3649
--- /dev/null
+++ b/frontend/src/pages/monitor/host-monitor/tabs/DiskTab.tsx
@@ -0,0 +1,42 @@
+// 主机监控 — 磁盘监控 Tab (磁盘使用/Inode/IO读写/IO繁忙度)
+import { HardDrive, Disc } from 'lucide-react';
+import type { AggType, BucketPoint, RefLine } from '../types';
+import type { JsonData } from '@/types/common';
+import { MetricChartCard } from '../MetricChartCard';
+import { parseJSON } from '../utils';
+import i18n from '@/i18n';
+
+export interface DiskTabProps {
+ metrics: {
+ disk: BucketPoint[]; inode: BucketPoint[]; ioRead: BucketPoint[];
+ ioWrite: BucketPoint[]; ioUtil: BucketPoint[];
+ };
+ latest: JsonData;
+ currentVal: (key: string, fallback?: string) => string;
+ aggType: AggType;
+ pctRefLines: RefLine[];
+ diskIOInfo: JsonData;
+}
+
+export function DiskTab({ metrics, latest, currentVal, aggType, pctRefLines, diskIOInfo }: DiskTabProps) {
+ const inodeVal = (() => {
+ const dArr = Array.isArray(parseJSON(latest?.disk_info)) ? parseJSON(latest?.disk_info) : [];
+ const root = dArr.find((d: JsonData) => d.mount === '/') || dArr[0];
+ return root?.inode_usage_pct != null ? `${root.inode_usage_pct.toFixed(1)}%` : '--';
+ })();
+
+ return (
+
+ } iconTone="orange"
+ data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+ } iconTone="purple"
+ data={metrics.inode} color="#8b5cf6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+ } iconTone="blue"
+ data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="green"
+ data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="red"
+ data={metrics.ioUtil} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+
+ );
+}
diff --git a/frontend/src/pages/monitor/host-monitor/tabs/FDUsageCard.tsx b/frontend/src/pages/monitor/host-monitor/tabs/FDUsageCard.tsx
new file mode 100644
index 0000000..0aafaa3
--- /dev/null
+++ b/frontend/src/pages/monitor/host-monitor/tabs/FDUsageCard.tsx
@@ -0,0 +1,79 @@
+// 主机监控 — FD 文件句柄卡片 (已分配/Max/使用率 + 趋势图)
+import type { RefObject } from 'react';
+import { HardDrive } from 'lucide-react';
+import type { AggType, BucketPoint } from '../types';
+import type { JsonData } from '@/types/common';
+import { Card, CardContent } from '@/components/ui/card';
+import { MetricIconBox } from '../MetricIconBox';
+import { ChartToolbar } from '../ChartToolbar';
+import { ZoomableAreaChart, type ZoomableChartHandle } from '../ZoomableAreaChart';
+import i18n from '@/i18n';
+
+export interface FDUsageCardProps {
+ fdInfo: JsonData;
+ fdMetrics: BucketPoint[];
+ aggType: AggType;
+ fdChartRef: RefObject
;
+ fdChartZoomed: boolean;
+ setFdChartZoomed: (v: boolean) => void;
+}
+
+export function FDUsageCard({ fdInfo, fdMetrics, aggType, fdChartRef, fdChartZoomed, setFdChartZoomed }: FDUsageCardProps) {
+ return (
+
+
+
+
+ } tone="purple" />
+ FD 文件句柄
+
+ {fdMetrics.length > 0 && (
+ fdChartRef.current?.expand()}
+ onResetZoom={() => fdChartRef.current?.resetZoom()}
+ />
+ )}
+
+ {fdInfo?.allocated != null ? (
+ <>
+
+
+ {i18n.t('deploy.toast.assigned')}
+ {fdInfo.allocated.toLocaleString()}
+
+
+ {i18n.t('monitor.metricCatalog.colMax')}
+ {fdInfo.max === -1 ? i18n.t('monitor.hostmonitortsx.sbc436447') : fdInfo.max?.toLocaleString() || '—'}
+
+
+ {i18n.t('server.usage')}
+ 80 ? 'text-rose-400' : 'dg-text-purple'}`}>
+ {fdInfo.usage_pct != null ? `${fdInfo.usage_pct.toFixed(1)}%` : '—'}
+
+
+
{i18n.t('monitor.hostmonitortsx.sae1a30b7')}
+ )}
+
+
+ );
+}
diff --git a/frontend/src/pages/monitor/host-monitor/tabs/NetworkTab.tsx b/frontend/src/pages/monitor/host-monitor/tabs/NetworkTab.tsx
new file mode 100644
index 0000000..d89babf
--- /dev/null
+++ b/frontend/src/pages/monitor/host-monitor/tabs/NetworkTab.tsx
@@ -0,0 +1,51 @@
+// 主机监控 — 网络监控 Tab (TCP连接/网卡带宽/网卡错误)
+import { Network, Clock, XCircle } from 'lucide-react';
+import type { AggType, BucketPoint } from '../types';
+import type { JsonData } from '@/types/common';
+import { MetricChartCard } from '../MetricChartCard';
+import { DualLineChart } from '../DualLineChart';
+import { formatBPS } from '../utils';
+import i18n from '@/i18n';
+
+export interface NetworkTabProps {
+ metrics: {
+ tcpEst: BucketPoint[]; tcpTW: BucketPoint[]; tcpCW: BucketPoint[];
+ connTotal: BucketPoint[]; rx: BucketPoint[]; tx: BucketPoint[];
+ rxErr: BucketPoint[]; txErr: BucketPoint[];
+ };
+ netInfo: JsonData;
+ currentVal: (key: string, fallback?: string) => string;
+ aggType: AggType;
+}
+
+export function NetworkTab({ metrics, netInfo, currentVal, aggType }: NetworkTabProps) {
+ const connTotal = netInfo ? String((netInfo.tcp_established || 0) + (netInfo.tcp_time_wait || 0) + (netInfo.tcp_close_wait || 0)) : '--';
+
+ return (
+
+
+ } iconTone="purple"
+ data={metrics.tcpEst} color="#8b5cf6" unit={i18n.t('monitor.hostMonitorPanel.portUnit')} domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="yellow"
+ data={metrics.tcpTW} color="#f59e0b" unit="个" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="red"
+ data={metrics.tcpCW} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="cyan"
+ data={metrics.connTotal} color="#22d3ee" unit="个" domain={[0, 'auto']} aggType={aggType} />
+
+
+
+ } iconTone="red"
+ data={metrics.rxErr} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
+ } iconTone="orange"
+ data={metrics.txErr} color="#f97316" unit="个" domain={[0, 'auto']} aggType={aggType} />
+
+
+ 监听端口 {portInfo.length}
+
+ {portPolicyMode === 'blacklist' && portWhitelist.length > 0 && (
+
+ 黑名单: {portWhitelist.join(',')}
+
+ )}
+ {portPolicyMode === 'whitelist' && (
+
+ 白名单模式
+
+ )}
+
+
+
+ {portInfo.length === 0 ? (
+
+ 暂无端口数据
+
+ ) : (
+
+
+
+
+ | {i18n.t('system.ldapPort')} |
+ {i18n.t('kubernetes.service.protocol')} |
+ {i18n.t('monitor.hostmonitortsx.sf88522cf')} |
+ {i18n.t('system.terminalStatus')} |
+
+
+
+ {portInfo.map((p: JsonData, i: number) => (
+
+ | {p.port} |
+
+ {p.protocol || 'tcp'}
+ |
+ {p.process || '—'} |
+
+ LISTEN
+ |
+
+ ))}
+
+
+
+
进程 TOP {processTop.length}
+
+ {processTop.length === 0 ? (
+
+ Agent v2.0+ 支持，等待数据上报…
+
+ ) : (
+
+
+
+
+ | {i18n.t('monitor.hostmonitortsx.s23ecaf10')} |
+ PID |
+ {i18n.t('monitor.hostmonitortsx.s78262b59')} |
+ CPU使用率(%) |
+ {i18n.t('monitor.hostmonitortsx.s8fe5ed35')} |
+
+
+
+ {processTop.map((p: JsonData, i: number) => {
+ const cmd = p.cmdline || p.name || '?';
+ const cpup = p.cpu_pct != null ? Number(p.cpu_pct) : null;
+ const memp = p.mem_pct != null ? Number(p.mem_pct) : null;
+ return (
+
+
+
+
+ {cmd}
+
+
+ |
+ {p.pid} |
+
+ 50 ? 'text-rose-400' : 'dg-text-cyan'}>
+ {memp != null ? memp.toFixed(2) : '--'}
+
+ |
+
+ 50 ? 'text-rose-400' : 'text-[var(--dg-text-primary)]'}>
+ {cpup != null ? cpup.toFixed(2) : '--'}
+
+ |
+ {p.fd_count ?? '--'} |
+
+ );
+ })}
+
+
+