feat(k8s): M14 Namespace 管理看板（资源配额 + 命名空间 CRUD）

- 后端: ListNamespacesDetailed/CreateNamespace/DeleteNamespace/ListResourceQuotas/ListLimitRanges - 后端: GetNamespacesDetail handler (6 API calls aggregate, not N×3) - 后端: CreateNamespaceHandler + DeleteNamespaceHandler (system NS protection) - 前端: NamespaceManagementPage.tsx (~280行) — 表格+概览卡片+创建/删除弹框 - 路由: GET/POST/DELETE /:clusterCode/namespaces + GET /namespace/:ns/detail - 验证: 9/9 通过 (urllib), TS 零错误, Vite 构建成功
2026-06-24 23:46:52 +08:00
1 parent c7b61968bc
commit 8240a88a84
@@ -102,6 +102,36 @@ export function HostMonitor() {
    }).catch(() => setProbes([]));
  }, [selectedHost]);

+  // 端口策略 // Logan.Li
+  const [portPolicyMode, setPortPolicyMode] = useState('blacklist');
+  const [portWhitelist, setPortWhitelist] = useState<number[]>([]);
+  const [portPolicyDialogOpen, setPortPolicyDialogOpen] = useState(false);
+  const [portPolicySaving, setPortPolicySaving] = useState(false);
+
+  const fetchPortPolicy = useCallback(() => {
+    if (!selectedHost) return;
+    agentApi.getPortPolicy(selectedHost).then((data: any) => {
+      if (data?.data) {
+        setPortPolicyMode(data.data.port_filter_mode || 'blacklist');
+        setPortWhitelist(data.data.port_whitelist || []);
+      }
+    }).catch(() => {});
+  }, [selectedHost]);
+
+  useEffect(() => { fetchPortPolicy(); }, [fetchPortPolicy]);
+
+  const handleSavePortPolicy = async () => {
+    if (!selectedHost) return;
+    setPortPolicySaving(true);
+    try {
+      await agentApi.savePortPolicy(selectedHost, {
+        port_filter_mode: portPolicyMode,
+        port_whitelist: portWhitelist,
+      });
+      setPortPolicyDialogOpen(false);
+    } catch { } finally { setPortPolicySaving(false); }
+  };
+
  useEffect(() => {
    fetchProbes();
  }, [fetchProbes]);
@@ -143,25 +173,35 @@ export function HostMonitor() {
    const rawRx: number[] = []; const rawTx: number[] = [];
    const rawIoR: number[] = []; const rawIoW: number[] = [];
    const rawSwap: number[] = []; const rawFD: number[] = [];
+    // ──── v2.2 新增指标 ────
+    const rawIOWait: number[] = []; const rawMemAvail: number[] = [];
+    const rawIoUtil: number[] = []; const rawConnTotal: number[] = [];
+    const rawRxErr: number[] = []; const rawTxErr: number[] = [];
    const timestamps: number[] = [];

    for (const r of history) {
      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);
+      rawIOWait.push(r.cpu_iowait || 0);
      rawMem.push(r.mem_usage || 0);
+      rawMemAvail.push(r.mem_available || 0);
      rawLoad1.push(r.load1 || 0);
      rawDisk.push(r.disk_usage || 0);

      const net = parseJSON(r.net_info);
      rawTcp.push(net.tcp_established || 0);
      rawTw.push(net.tcp_time_wait || 0);
+      rawConnTotal.push((net.tcp_established || 0) + (net.tcp_time_wait || 0) + (net.tcp_close_wait || 0));
      rawRx.push(net.net_rx_bps || 0);
      rawTx.push(net.net_tx_bps || 0);
+      rawRxErr.push(net.net_rx_errors || 0);
+      rawTxErr.push(net.net_tx_errors || 0);

      const dio = parseJSON(r.disk_io_info);
      rawIoR.push(dio.read_bps || 0);
      rawIoW.push(dio.write_bps || 0);
+      rawIoUtil.push(dio.util || 0);

      const swap = parseJSON(r.swap_info);
      rawSwap.push(swap?.usage_percent || 0);
@@ -183,6 +223,13 @@ export function HostMonitor() {
      ioWrite: bucketWithStats(rawIoW.map(v => v / 1024), timestamps, timeConfig.buckets),
      swap:    bucketWithStats(rawSwap, timestamps, timeConfig.buckets),
      fd:      bucketWithStats(rawFD, timestamps, timeConfig.buckets),
+      // ──── v2.2 新增指标 ────
+      iowait:    bucketWithStats(rawIOWait, timestamps, timeConfig.buckets),
+      memAvail:  bucketWithStats(rawMemAvail, timestamps, timeConfig.buckets),
+      ioUtil:    bucketWithStats(rawIoUtil, timestamps, timeConfig.buckets),
+      connTotal: bucketWithStats(rawConnTotal, timestamps, timeConfig.buckets),
+      rxErr:     bucketWithStats(rawRxErr, timestamps, timeConfig.buckets),
+      txErr:     bucketWithStats(rawTxErr, timestamps, timeConfig.buckets),
    };
  }, [history, timeConfig]);

@@ -280,8 +327,14 @@ export function HostMonitor() {
        <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]} aggType={aggType} />
+          <MetricChartCard title="CPU IO等待(%)" value={latest?.cpu_iowait != null ? `${latest.cpu_iowait.toFixed(1)}%` : '--'} icon={<Clock className="h-4 w-4 text-orange-400" />}
+            data={metrics.iowait} color="#f97316" 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]} aggType={aggType} />
+          <MetricChartCard title="可用内存(GB)" value={latest?.mem_available != null ? `${latest.mem_available.toFixed(1)}GB` : '--'} icon={<Server className="h-4 w-4 text-emerald-400" />}
+            data={metrics.memAvail} color="#34d399" unit="GB" domain={[0, 'auto']} aggType={aggType} />
+          <MetricChartCard title="Swap 使用率(%)" value={currentVal('swap')} icon={<HardDrive className="h-4 w-4 text-red-400" />}
+            data={metrics.swap} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
          <MetricChartCard title="系统负载(1m)" value={currentVal('load1')} icon={<Activity className="h-4 w-4 text-purple-400" />}
            data={metrics.load1} color="#8b5cf6" unit="" domain={[0, 'auto']} aggType={aggType} />
        </TabsContent>
@@ -295,6 +348,8 @@ export function HostMonitor() {
              data={metrics.ioRead} color="#3b82f6" unit="KB/s" domain={[0, 'auto']} aggType={aggType} />
            <MetricChartCard title="磁盘写入(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} />
+            <MetricChartCard title="磁盘IO繁忙度(%)" value={diskIOInfo?.util != null ? `${diskIOInfo.util.toFixed(1)}%` : '--'} icon={<Disc className="h-4 w-4 text-red-400" />}
+              data={metrics.ioUtil} color="#ef4444" unit="%" domain={[0, 100]} aggType={aggType} />
          </div>
        </TabsContent>

@@ -305,6 +360,8 @@ export function HostMonitor() {
              data={metrics.tcpEst} color="#8b5cf6" unit="个" domain={[0, 'auto']} aggType={aggType} />
            <MetricChartCard title="TCP TIME_WAIT" value={currentVal('tw')} icon={<Clock className="h-4 w-4 text-amber-400" />}
              data={metrics.tcpTW} color="#f59e0b" unit="个" domain={[0, 'auto']} aggType={aggType} />
+            <MetricChartCard title="TCP 总连接数" value={netInfo ? String((netInfo.tcp_established||0)+(netInfo.tcp_time_wait||0)+(netInfo.tcp_close_wait||0)) : '--'} icon={<Network className="h-4 w-4 text-cyan-400" />}
+              data={metrics.connTotal} color="#22d3ee" unit="个" domain={[0, 'auto']} aggType={aggType} />
          </div>
          {/* 网卡带宽吞吐 — 双线 rx/tx */}
          <DualLineChart
@@ -314,6 +371,12 @@ export function HostMonitor() {
            rxData={metrics.rx} txData={metrics.tx}
            aggType={aggType} unit="KB/s"
          />
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
+            <MetricChartCard title="网卡接收错误" value={netInfo?.net_rx_errors != null ? String(netInfo.net_rx_errors) : '--'} icon={<XCircle className="h-4 w-4 text-red-400" />}
+              data={metrics.rxErr} color="#ef4444" unit="个" domain={[0, 'auto']} aggType={aggType} />
+            <MetricChartCard title="网卡发送错误" value={netInfo?.net_tx_errors != null ? String(netInfo.net_tx_errors) : '--'} icon={<XCircle className="h-4 w-4 text-orange-400" />}
+              data={metrics.txErr} color="#f97316" unit="个" domain={[0, 'auto']} aggType={aggType} />
+          </div>
        </TabsContent>

        {/* ═══ 端口监控 ═══ */}
@@ -322,6 +385,22 @@ export function HostMonitor() {
            <CardContent className="p-4">
              <h3 className="text-xs font-medium text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
                <Server className="h-4 w-4 text-emerald-400" />监听端口 {portInfo.length}
+                <span className="ml-auto flex items-center gap-2">
+                  {portPolicyMode === 'blacklist' && portWhitelist.length > 0 && (
+                    <Badge variant="outline" className="text-[10px] text-amber-400 border-amber-500/30">
+                      黑名单: {portWhitelist.join(',')}
+                    </Badge>
+                  )}
+                  {portPolicyMode === 'whitelist' && (
+                    <Badge variant="outline" className="text-[10px] text-blue-400 border-blue-500/30">
+                      白名单模式
+                    </Badge>
+                  )}
+                  <Button variant="outline" size="sm" className="h-6 text-[10px] px-2"
+                    onClick={() => { fetchPortPolicy(); setPortPolicyDialogOpen(true); }}>
+                    策略配置
+                  </Button>
+                </span>
              </h3>
              {portInfo.length === 0 ? (
                <div className="text-center py-6 text-xs text-[var(--dg-text-muted)] border border-dashed border-[var(--dg-border)] rounded-lg">
@@ -492,6 +571,39 @@ export function HostMonitor() {
            </Card>
          )}

+          {/* FD 文件句柄 + 上下文切换 */}
+          {(fdInfo || csInfo) && (
+            <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+              <CardContent className="p-4">
+                <div className="flex items-center gap-2 mb-2">
+                  <HardDrive className="h-4 w-4 text-[var(--dg-text-muted)]" />
+                  <h3 className="text-xs font-medium text-[var(--dg-text-primary)]">FD 文件句柄 &amp; 上下文切换</h3>
+                </div>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-xs">
+                  {fdInfo?.allocated != null && [
+                    ['FD 已分配', <span className="font-mono">{fdInfo.allocated.toLocaleString()}</span>],
+                    ['FD 上限', <span className="font-mono">{fdInfo.max === -1 ? '无限制' : fdInfo.max?.toLocaleString() || '—'}</span>],
+                    ['FD 使用率', <span className={`font-mono ${fdInfo.usage_pct > 80 ? 'text-rose-400' : 'text-[var(--dg-text-primary)]'}`}>{fdInfo.usage_pct != null ? `${fdInfo.usage_pct.toFixed(1)}%` : '—'}</span>],
+                  ].map(([label, val]) => (
+                    <div key={label as string}>
+                      <span className="text-[var(--dg-text-muted)]">{label}：</span>
+                      {val}
+                    </div>
+                  ))}
+                  {csInfo?.ctx_per_sec != null && [
+                    ['CTX 累计', <span className="font-mono">{(csInfo.ctx_per_sec / 1e6).toFixed(1)}M</span>],
+                    ['IRQ 累计', <span className="font-mono">{(csInfo.irq_per_sec / 1e6).toFixed(1)}M</span>],
+                  ].map(([label, val]) => (
+                    <div key={label as string}>
+                      <span className="text-[var(--dg-text-muted)]">{label}：</span>
+                      {val}
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
          {/* 磁盘分区 + 网络接口 (保持原样) */}
          {latest?.disk_info && (() => {
            const disk = parseJSON(latest.disk_info);
@@ -695,6 +807,73 @@ export function HostMonitor() {
          </div>
        </div>
      )}
+
+      {/* 端口策略对话框 */}
+      {portPolicyDialogOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setPortPolicyDialogOpen(false)}>
+          <div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg p-5 w-[440px] max-h-[90vh] overflow-y-auto shadow-xl" onClick={e => e.stopPropagation()}>
+            <h3 className="text-sm font-semibold text-[var(--dg-text-primary)] mb-4">端口监控策略</h3>
+            <div className="space-y-4">
+              {/* 模式选择 */}
+              <div>
+                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block">过滤模式</label>
+                <div className="flex gap-2">
+                  <button
+                    className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'whitelist' ? 'bg-blue-500/20 border-blue-500 text-blue-400' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+                    onClick={() => setPortPolicyMode('whitelist')}
+                  >
+                    白名单 ─ 全量上报
+                  </button>
+                  <button
+                    className={`flex-1 h-9 rounded text-xs font-medium border transition-colors ${portPolicyMode === 'blacklist' ? 'bg-amber-500/20 border-amber-500 text-amber-400' : 'bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+                    onClick={() => setPortPolicyMode('blacklist')}
+                  >
+                    黑名单 ─ 仅上报选中
+                  </button>
+                </div>
+                <p className="text-[10px] text-[var(--dg-text-muted)] mt-1.5 leading-relaxed">
+                  {portPolicyMode === 'whitelist'
+                    ? '所有发现的端口都上报，任意端口变化都会触发告警 + 恢复通知。'
+                    : '仅上报选中端口的变化，其余端口变化静默忽略（不告警）。系统进程端口（sshd/rpcbind/systemd等）永远忽略。'}
+                </p>
+              </div>
+
+              {/* 端口白名单 */}
+              <div>
+                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 block">
+                  端口列表 <span className="text-[var(--dg-text-muted)]">(逗号分隔，如: 80,443,3306,6379)</span>
+                </label>
+                <textarea
+                  className="w-full h-20 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded px-2 py-1.5 text-xs font-mono text-[var(--dg-text-primary)] resize-none"
+                  value={portWhitelist.join(',')}
+                  onChange={e => {
+                    const val = e.target.value;
+                    const nums = val.split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n) && n > 0 && n <= 65535);
+                    setPortWhitelist(nums);
+                  }}
+                  placeholder="80,443,3306,6379"
+                />
+                <p className="text-[10px] text-[var(--dg-text-muted)] mt-1">
+                  已输入 {portWhitelist.length} 个端口
+                </p>
+              </div>
+
+              {/* 系统排除说明 */}
+              <div className="bg-amber-500/5 border border-amber-500/20 rounded p-2.5">
+                <p className="text-[10px] text-amber-300/80 leading-relaxed">
+                  ⚠️ 无论选择哪种模式，以下系统进程端口<b>永远不上报</b>：sshd、rpcbind、master、systemd、dbus-daemon、rsyslogd 等。Agent 采集时自动跳过。
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2 mt-5">
+              <Button variant="outline" size="sm" className="h-7 text-[11px]" onClick={() => setPortPolicyDialogOpen(false)}>取消</Button>
+              <Button size="sm" className="h-7 text-[11px] bg-blue-600 hover:bg-blue-500" onClick={handleSavePortPolicy} disabled={portPolicySaving}>
+                {portPolicySaving ? '保存中…' : '保存策略'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
    </div>
  );
 }