refactor(quality): Q27 前端巨型组件拆分 — HostMonitor 547L→224L (-59%), 提取 host-monitor/tabs/ 8 个文件 (BasicTab + DiskTab + NetworkTab + PortMonitorTab + ProcessTable + FDUsageCard + ContextSwitchCard + ProcessTab), TABS 常量数组提取为模块级, PCT_REF_LINES 常量提升到 types.ts, 端口/进程数组类型 JsonData→JsonData[] 类型安全升级, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓ (17.64s), go build=0, 17/17 测试通过

2026-07-09 05:48:54 +08:00
1 parent 03a84049fb
commit 470832342e
@@ -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 (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.sdf969221')} value={currentVal('disk')} icon={<HardDrive />} iconTone="orange"
+        data={metrics.disk} color="#f97316" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s20296121')} value={inodeVal} icon={<HardDrive />} iconTone="purple"
+        data={metrics.inode} color="#8b5cf6" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s72e3c273')} value={currentVal('ioR')} icon={<Disc />} iconTone="blue"
+        data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.sa9b96f9b')} value={currentVal('ioW')} icon={<Disc />} iconTone="green"
+        data={metrics.ioWrite} color="#10b981" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
+      <MetricChartCard title={i18n.t('monitor.hostmonitortsx.s996adabd')} value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc />} iconTone="red"
+        data={metrics.ioUtil} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} referenceLines={pctRefLines} />
+    </div>
+  );
+}