feat: add process resource monitor

2026-05-06 06:09:29 +00:00
parent cd784f5e4b
commit a0b9f8fb97
13 changed files with 543 additions and 19 deletions
@@ -718,6 +718,126 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
  margin-top: 8px;
 }

+.process-resource-panel {
+  margin-top: 8px;
+  border: 1px solid var(--line-soft);
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 28%),
+    #0b141b;
+}
+.process-resource-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  padding: 8px 9px;
+  border-bottom: 1px solid var(--line-soft);
+}
+.process-resource-head h3 {
+  margin: 0;
+  font-size: 15px;
+  letter-spacing: 0.06em;
+}
+.process-resource-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 5px;
+  align-items: center;
+}
+.process-table-wrap {
+  max-height: 420px;
+  overflow: auto;
+}
+.process-resource-table {
+  min-width: 1120px;
+}
+.process-resource-table th,
+.process-resource-table td {
+  padding: 6px 8px;
+}
+.process-sort-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  text-transform: inherit;
+  letter-spacing: inherit;
+}
+.process-sort-button span {
+  color: var(--faint);
+  font-size: 10px;
+}
+.process-sort-button.active span {
+  color: var(--accent-2);
+}
+.process-name-cell {
+  display: grid;
+  gap: 2px;
+  min-width: 260px;
+  max-width: 420px;
+}
+.process-name-cell strong {
+  color: #e3eef0;
+}
+.process-command {
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.process-state {
+  display: inline-flex;
+  min-width: 22px;
+  justify-content: center;
+  padding: 1px 5px;
+  border: 1px solid var(--line-soft);
+  color: var(--muted);
+  background: rgba(255,255,255,0.025);
+  font-family: "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", monospace;
+}
+.process-meter {
+  position: relative;
+  min-width: 104px;
+  height: 20px;
+  overflow: hidden;
+  border: 1px solid var(--line-soft);
+  background: rgba(255,255,255,0.025);
+}
+.process-meter span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, rgba(78, 183, 168, 0.58), rgba(78, 183, 168, 0.12));
+}
+.process-meter.cpu span {
+  background: linear-gradient(90deg, rgba(215, 161, 58, 0.64), rgba(215, 161, 58, 0.12));
+}
+.process-meter b {
+  position: relative;
+  z-index: 1;
+  display: block;
+  padding: 2px 6px;
+  color: #eaf3f2;
+  font-family: "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", monospace;
+  font-size: 11px;
+}
+.process-io-cell {
+  display: grid;
+  gap: 2px;
+  min-width: 146px;
+}
+.process-io-cell strong {
+  color: #d7e3e7;
+}
+.process-io-cell span {
+  color: var(--muted);
+  font-size: 11px;
+}
+
 .monitor-side-stack {
  display: grid;
  gap: 10px;
@@ -1833,6 +1953,16 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
  }
  .metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid, .gateway-record-grid, .met-detail-kv { grid-template-columns: 1fr; }
  .compact-row, .heartbeat-row, .log-row, .endpoint-list article, .volume-route, .findjob-hero, .pipeline-hero { grid-template-columns: 1fr; align-items: start; }
+  .process-resource-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .process-resource-actions {
+    justify-content: flex-start;
+  }
+  .process-table-wrap {
+    max-height: 360px;
+  }
  .met-tree-header, .met-tree-row {
    grid-template-columns: minmax(220px, 1fr) 72px 62px 76px 96px;
    min-width: 560px;
@@ -104,6 +104,17 @@ function fmtPercent(value: any): string {
  return Number.isFinite(number) ? `${Math.max(0, Math.min(100, number)).toFixed(1)}%` : "--";
 }

+function fmtLoosePercent(value: any): string {
+  const number = Number(value);
+  return Number.isFinite(number) ? `${Math.max(0, number).toFixed(1)}%` : "--";
+}
+
+function fmtBytesRate(value: any): string {
+  const bytes = Number(value);
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B/s";
+  return `${fmtBytes(bytes)}/s`;
+}
+
 function asNumber(value: any, fallback = 0): number {
  const number = Number(value);
  return Number.isFinite(number) ? number : fallback;
@@ -719,6 +730,7 @@ function NodeMonitorPage({ nodes, systemStatuses, tasks, onRaw, refresh }: AnyRe
              h(MetricCard, { label: "硬盘已用", value: fmtBytes(disk.usedBytes), hint: fmtPercent(disk.percent) }),
              h(MetricCard, { label: "更新时间", value: fmtDate(active.systemUpdatedAt || current.collectedAt), hint: active.providerId }),
            ),
+            h(ProcessResourceTable, { current, onRaw }),
          ),
      ),
      h("div", { className: "monitor-side-stack" },
@@ -729,6 +741,7 @@ function NodeMonitorPage({ nodes, systemStatuses, tasks, onRaw, refresh }: AnyRe
            h("article", null, h("b", null, "CPU"), h("span", null, "从 /proc/stat 计算相邻采样差值，首个采样用 load/cores 近似")),
            h("article", null, h("b", null, "Memory"), h("span", null, "实际内存 = MemTotal - MemFree - Buffers - Cached - SReclaimable + Shmem，不把 page cache / buffer 计入占用")),
            h("article", null, h("b", null, "Disk"), h("span", null, "使用 df -PB1 对配置路径采样，默认监控根文件系统")),
+            h("article", null, h("b", null, "Process"), h("span", null, "从 /proc/[pid] 采集进程 CPU、实际内存 RSS、线程数和磁盘 I/O 速率；表格默认按内存占用降序")),
          ),
        ),
      ),
@@ -736,6 +749,119 @@ function NodeMonitorPage({ nodes, systemStatuses, tasks, onRaw, refresh }: AnyRe
  );
 }

+type ProcessSortKey = "memory" | "cpu" | "disk" | "pid" | "name" | "user" | "threads" | "runtime";
+
+function processSortValue(row: AnyRecord, key: ProcessSortKey): string | number {
+  if (key === "memory") return asNumber(row.rssBytes);
+  if (key === "cpu") return asNumber(row.cpuPercent);
+  if (key === "disk") return asNumber(row.readBytesPerSecond) + asNumber(row.writeBytesPerSecond);
+  if (key === "pid") return asNumber(row.pid);
+  if (key === "threads") return asNumber(row.threads);
+  if (key === "runtime") return asNumber(row.elapsedSeconds);
+  if (key === "user") return String(row.user || "");
+  return String(row.name || row.command || "");
+}
+
+function ProcessMeter({ value, label, tone }: AnyRecord) {
+  const width = Math.max(1, Math.min(100, asNumber(value)));
+  return h("div", { className: `process-meter ${tone || ""}` },
+    h("span", { style: { width: `${width}%` } }),
+    h("b", null, label),
+  );
+}
+
+function ProcessResourceTable({ current, onRaw }: AnyRecord) {
+  const [sort, setSort] = useState({ key: "memory", direction: "desc" });
+  const processSummary = current?.processSummary && typeof current.processSummary === "object" ? current.processSummary : {};
+  const processes = Array.isArray(current?.processes) ? current.processes : [];
+  const rows = useMemo(() => {
+    const direction = sort.direction === "asc" ? 1 : -1;
+    return [...processes].sort((left: AnyRecord, right: AnyRecord) => {
+      const a = processSortValue(left, sort.key);
+      const b = processSortValue(right, sort.key);
+      if (typeof a === "string" || typeof b === "string") return String(a).localeCompare(String(b), "zh-CN") * direction;
+      return (a - b) * direction || asNumber(left.pid) - asNumber(right.pid);
+    });
+  }, [processes, sort.key, sort.direction]);
+
+  const sortHeader = (label: string, key: ProcessSortKey) => {
+    const active = sort.key === key;
+    const ariaSort = active ? (sort.direction === "asc" ? "ascending" : "descending") : "none";
+    return h("th", { "aria-sort": ariaSort },
+      h("button", {
+        type: "button",
+        className: `process-sort-button ${active ? "active" : ""}`,
+        "data-testid": `process-sort-${key}`,
+        onClick: () => setSort((previous: AnyRecord) => ({
+          key,
+          direction: previous.key === key && previous.direction === "desc" ? "asc" : "desc",
+        })),
+      }, label, h("span", null, active ? (sort.direction === "desc" ? "↓" : "↑") : "↕")),
+    );
+  };
+
+  return h("section", { className: "process-resource-panel", "data-testid": "process-resource-panel" },
+    h("div", { className: "process-resource-head" },
+      h("div", null,
+        h("p", { className: "panel-eyebrow" }, "Windows Resource Monitor Style"),
+        h("h3", null, "进程资源占用"),
+      ),
+      h("div", { className: "process-resource-actions" },
+        h("span", { className: "data-chip" }, "默认按内存排序"),
+        h("span", { className: "data-chip" }, `${asNumber(processSummary.visible, rows.length)} / ${asNumber(processSummary.total, rows.length)} 进程`),
+        h(RawButton, { title: "Process Resource Snapshot", data: { processSummary, processes }, onOpen: onRaw, testId: "raw-process-resources" }),
+      ),
+    ),
+    rows.length === 0 ? h(EmptyState, { title: "暂无进程资源数据", text: "等待 provider-gateway 上报 /proc/[pid] 采样；旧版 provider 需要先升级到支持进程资源表的版本" }) :
+      h("div", { className: "process-table-wrap" },
+        h("table", { className: "process-resource-table", "data-testid": "process-resource-table" },
+          h("thead", null, h("tr", null,
+            sortHeader("进程", "name"),
+            sortHeader("PID", "pid"),
+            sortHeader("用户", "user"),
+            h("th", null, "状态"),
+            sortHeader("CPU", "cpu"),
+            sortHeader("内存", "memory"),
+            h("th", null, "RSS"),
+            sortHeader("磁盘 I/O", "disk"),
+            sortHeader("线程", "threads"),
+            sortHeader("运行时长", "runtime"),
+          )),
+          h("tbody", null, rows.map((row: AnyRecord) => {
+            const diskRate = asNumber(row.readBytesPerSecond) + asNumber(row.writeBytesPerSecond);
+            return h("tr", {
+              key: `${row.pid}-${row.startedAt}`,
+              "data-testid": `process-row-${safeId(row.pid)}`,
+              "data-memory-bytes": String(asNumber(row.rssBytes)),
+              "data-cpu-percent": String(asNumber(row.cpuPercent)),
+              "data-disk-bps": String(diskRate),
+              "data-pid": String(asNumber(row.pid)),
+            },
+              h("td", null,
+                h("div", { className: "process-name-cell" },
+                  h("strong", null, row.name || "--"),
+                  h("span", { className: "process-command" }, row.command || "--"),
+                ),
+              ),
+              h("td", null, h("code", null, row.pid || "--")),
+              h("td", null, row.user || `uid:${row.uid ?? "--"}`),
+              h("td", null, h("span", { className: `process-state state-${safeId(row.state || "unknown")}` }, row.state || "?")),
+              h("td", null, h(ProcessMeter, { value: row.cpuPercent, label: fmtLoosePercent(row.cpuPercent), tone: "cpu" })),
+              h("td", null, h(ProcessMeter, { value: row.memoryPercent, label: fmtPercent(row.memoryPercent), tone: "memory" })),
+              h("td", null, fmtBytes(row.rssBytes)),
+              h("td", null, h("div", { className: "process-io-cell" },
+                h("strong", null, fmtBytesRate(diskRate)),
+                h("span", null, `R ${fmtBytesRate(row.readBytesPerSecond)} / W ${fmtBytesRate(row.writeBytesPerSecond)}`),
+              )),
+              h("td", null, row.threads || 0),
+              h("td", null, fmtDuration(asNumber(row.elapsedSeconds))),
+            );
+          })),
+        ),
+      ),
+  );
+}
+
 function MetricChart({ title, metricKey, current, points, detail, tone, testId }: AnyRecord) {
  const values = points.map((point: any) => Math.max(0, Math.min(100, asNumber(point[metricKey]))));
  const chartValues = values.length > 1 ? values : [values[0] || 0, values[0] || 0];