feat(fleet): card-only UI with progressive load and restart ops

Drop the redundant advanced table so fleet stays resource-first cards. Keep multi-select batch service/system restart via prepare→execute, card restarts, overview system ops, and progressive fleet loading.
2026-07-21 22:56:55 +08:00
parent ebed4c1969
commit 9ea8021cce
20 changed files with 1207 additions and 346 deletions
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';

 import {
  buildFleetTableViewModel,
@@ -15,13 +15,21 @@ import type {
  FleetMessagesDataSource,
 } from './fleet-messages-api-data-source.js';
 import { loadFleetMessageSummaries } from './fleet-messages-api-data-source.js';
+import {
+  createOperationClient,
+  type OperationClient,
+} from '../operations/operation-client.js';
+import { safeUiError } from '../ui/locale.js';

 export interface FleetSnapshot {
  readonly instances: readonly FleetInstance[];
  readonly statuses: ReadonlyMap<string, FleetStatus>;
 }
 export interface FleetDataSource {
-  load(signal?: AbortSignal): Promise<FleetSnapshot>;
+  load(
+    signal?: AbortSignal,
+    onPartial?: (snapshot: FleetSnapshot) => void,
+  ): Promise<FleetSnapshot>;
 }
 export interface FleetPageProps {
  readonly dataSource?: FleetDataSource;
@@ -29,6 +37,7 @@ export interface FleetPageProps {
  readonly instanceDataSource?: InstanceDataSource;
  readonly initialData?: FleetSnapshot;
  readonly refreshSignal?: number;
+  readonly operationClient?: OperationClient;
 }
 type FleetMessageState = FleetMessageLoadState;

@@ -39,7 +48,7 @@ const STATUS_LABELS: Readonly<Record<string, string>> = {
  offline: '离线',
  unknown: '未知',
 };
-const COLUMN_LABELS: Readonly<Record<FleetSortColumn | 'origin', string>> = {
+const SORT_COLUMN_LABELS: Readonly<Record<FleetSortColumn, string>> = {
  name: '名称',
  status: '状态',
  latency: '延迟',
@@ -48,9 +57,7 @@ const COLUMN_LABELS: Readonly<Record<FleetSortColumn | 'origin', string>> = {
  tags: '标签',
  freshness: '数据新鲜度',
  anomalies: '异常',
-  origin: '源地址',
 };
-const ALL_COLUMNS = Object.keys(COLUMN_LABELS) as readonly (FleetSortColumn | 'origin')[];
 const CAPABILITY_LABELS: Readonly<Record<string, string>> = {
  overview: '概览',
  cellular: '蜂窝网络',
@@ -62,11 +69,6 @@ const CAPABILITY_LABELS: Readonly<Record<string, string>> = {
  automation: '自动化',
  ota: 'OTA',
 };
-const FRESHNESS_LABELS: Readonly<Record<string, string>> = {
-  fresh: '最新',
-  stale: '可能过期',
-  unknown: '未知',
-};

 function capabilityLabel(value: string): string {
  return CAPABILITY_LABELS[value] ?? value;
@@ -100,12 +102,35 @@ export function canonicalHttpOrigin(value: string): string | null {
  }
 }

+type BatchActionKind = 'service-restart' | 'system-reboot';
+type BatchProgress = Readonly<{
+  action: BatchActionKind;
+  total: number;
+  completed: number;
+  succeeded: number;
+  failed: number;
+  message: string;
+}>;
+
+const SERVICE_RESTART = {
+  operationId: 'postServiceRestart',
+  parameterSchemaId: 'simadmin.58e2204.postServiceRestart.parameters.v1',
+  title: '重启服务',
+} as const;
+const SYSTEM_REBOOT = {
+  operationId: 'postSystemReboot',
+  parameterSchemaId: 'simadmin.58e2204.postSystemReboot.parameters.v1',
+  title: '系统重启',
+  delaySeconds: 3,
+} as const;
+
 export function FleetPage({
  dataSource,
  messagesDataSource,
  instanceDataSource,
  initialData,
  refreshSignal = 0,
+  operationClient,
 }: FleetPageProps) {
  const [snapshot, setSnapshot] = useState<FleetSnapshot | null>(initialData ?? null);
  const [error, setError] = useState<string | null>(null);
@@ -122,9 +147,15 @@ export function FleetPage({
    direction: 'asc',
  });
  const [selectedIds, setSelectedIds] = useState<ReadonlySet<string>>(new Set());
-  const [shownColumns, setShownColumns] = useState<ReadonlySet<string>>(new Set(ALL_COLUMNS));
-  const [columnsOpen, setColumnsOpen] = useState(false);
  const [batchOpen, setBatchOpen] = useState(false);
+  const [batchBusy, setBatchBusy] = useState(false);
+  const [batchProgress, setBatchProgress] = useState<BatchProgress | null>(null);
+  const [cardAction, setCardAction] = useState<{
+    id: string;
+    busy: boolean;
+    message?: string;
+    error?: string;
+  } | null>(null);
  const [deleteId, setDeleteId] = useState<string>();
  const [deleteOwner, setDeleteOwner] = useState<Readonly<{ id: string; revision: number }>>();
  const [deleteConfirmation, setDeleteConfirmation] = useState('');
@@ -132,11 +163,14 @@ export function FleetPage({
  const deleteRequestRef = useRef(0);
  const [deleteStatus, setDeleteStatus] =
    useState<Readonly<{ id: string; kind: 'success' | 'error'; message: string }>>();
-  const selectAllRef = useRef<HTMLInputElement>(null);
  const messagesOwner = useRef(0);
  const [messageStates, setMessageStates] = useState<ReadonlyMap<string, FleetMessageState>>(
    new Map(),
  );
+  const resolvedOperationClient = useMemo(
+    () => operationClient ?? createOperationClient(),
+    [operationClient],
+  );

  useEffect(() => {
    if (initialData && refreshSignal === 0) {
@@ -149,18 +183,27 @@ export function FleetPage({
      return;
    }
    let active = true;
-    setSnapshot(null);
+    const controller = new AbortController();
+    // Keep the last known instances visible while refreshing so the homepage stays interactive.
+    setSnapshot((current) => current);
    setError(null);
-    void dataSource.load().then(
-      (data) => {
-        if (active) setSnapshot(data);
-      },
-      () => {
-        if (active) setError('实例加载失败。');
-      },
-    );
+    void dataSource
+      .load(controller.signal, (partial) => {
+        if (active) setSnapshot(partial);
+      })
+      .then(
+        (data) => {
+          if (active) setSnapshot(data);
+        },
+        (reason: unknown) => {
+          if (!active) return;
+          if (reason instanceof DOMException && reason.name === 'AbortError') return;
+          setError('实例加载失败。');
+        },
+      );
    return () => {
      active = false;
+      controller.abort();
    };
  }, [attempt, dataSource, initialData, refreshSignal]);

@@ -209,11 +252,6 @@ export function FleetPage({
    };
  }, [snapshot]);

-  useEffect(() => {
-    if (selectAllRef.current) {
-      selectAllRef.current.indeterminate = model.visibleSelection.indeterminate;
-    }
-  }, [model.visibleSelection.indeterminate]);
  useEffect(() => {
    if (page !== model.page) setPage(model.page);
  }, [model.page, page]);
@@ -222,13 +260,6 @@ export function FleetPage({
    action();
    setPage(1);
  }
-  function changeSort(column: FleetSortColumn): void {
-    setSort((current) => ({
-      column,
-      direction: current.column === column && current.direction === 'asc' ? 'desc' : 'asc',
-    }));
-    setPage(1);
-  }
  function toggleOne(id: string, checked: boolean): void {
    setSelectedIds((current) => {
      const next = new Set(current);
@@ -247,14 +278,6 @@ export function FleetPage({
      return next;
    });
  }
-  function toggleColumn(column: string): void {
-    setShownColumns((current) => {
-      const next = new Set(current);
-      if (next.has(column)) next.delete(column);
-      else next.add(column);
-      return next;
-    });
-  }

  async function beginDelete(id: string): Promise<void> {
    const request = ++deleteRequestRef.current;
@@ -297,6 +320,155 @@ export function FleetPage({
    }
  }

+  function selectedTargets(): Array<{ instanceId: string; revision: number }> {
+    const instances = snapshot?.instances ?? [];
+    return model.selectedIds.flatMap((id) => {
+      const instance = instances.find((item) => item.id === id);
+      if (!instance || !instance.revision || instance.revision < 1) return [];
+      return [{ instanceId: id, revision: instance.revision }];
+    });
+  }
+
+  async function runOperation(
+    kind: BatchActionKind,
+    targets: ReadonlyArray<{ instanceId: string; revision: number }>,
+  ): Promise<{ succeeded: number; failed: number }> {
+    const catalog = await resolvedOperationClient.list({ pageSize: 100 });
+    const op = kind === 'service-restart' ? SERVICE_RESTART : SYSTEM_REBOOT;
+    const entry = catalog.items.find((item) => item.operationId === op.operationId);
+    if (!entry || entry.parameterSchemaId !== op.parameterSchemaId)
+      throw new Error('Operation is not available.');
+    let succeeded = 0;
+    let failed = 0;
+    let completed = 0;
+    for (const target of targets) {
+      try {
+        const prepared = await resolvedOperationClient.prepare({
+          operationId: op.operationId,
+          targets: [target],
+          parameters: {
+            parameterSchemaId: op.parameterSchemaId,
+            fields:
+              kind === 'system-reboot'
+                ? [{ fieldId: 'delay_seconds', kind: 'number', value: SYSTEM_REBOOT.delaySeconds }]
+                : [],
+          },
+        });
+        const confirmed =
+          typeof window === 'undefined'
+            ? true
+            : window.confirm(
+                `${prepared.confirmationPrompt}
+风险等级 ${prepared.risk}。确认继续？`,
+              );
+        if (!confirmed) {
+          failed += 1;
+        } else {
+          const job = await resolvedOperationClient.execute(prepared.id);
+          if (job.status === 'succeeded') succeeded += 1;
+          else failed += 1;
+        }
+      } catch {
+        failed += 1;
+      }
+      completed += 1;
+      setBatchProgress({
+        action: kind,
+        total: targets.length,
+        completed,
+        succeeded,
+        failed,
+        message: `${op.title}进度 ${completed}/${targets.length}`,
+      });
+    }
+    return { succeeded, failed };
+  }
+
+  async function runBatch(kind: BatchActionKind): Promise<void> {
+    const targets = selectedTargets();
+    if (targets.length === 0) {
+      setBatchProgress({
+        action: kind,
+        total: 0,
+        completed: 0,
+        succeeded: 0,
+        failed: 0,
+        message: '所选实例缺少配置版本，请刷新后重试。',
+      });
+      return;
+    }
+    const title = kind === 'service-restart' ? SERVICE_RESTART.title : SYSTEM_REBOOT.title;
+    if (
+      typeof window !== 'undefined' &&
+      !window.confirm(`将对 ${targets.length} 个实例执行「${title}」。此操作为高风险，确认继续？`)
+    )
+      return;
+    setBatchBusy(true);
+    setBatchProgress({
+      action: kind,
+      total: targets.length,
+      completed: 0,
+      succeeded: 0,
+      failed: 0,
+      message: `正在执行${title}…`,
+    });
+    try {
+      const result = await runOperation(kind, targets);
+      setBatchProgress({
+        action: kind,
+        total: targets.length,
+        completed: targets.length,
+        succeeded: result.succeeded,
+        failed: result.failed,
+        message: `${title}完成：成功 ${result.succeeded}，失败 ${result.failed}。`,
+      });
+    } catch (error) {
+      setBatchProgress({
+        action: kind,
+        total: targets.length,
+        completed: 0,
+        succeeded: 0,
+        failed: targets.length,
+        message: safeUiError(error, `${title}失败，请稍后重试。`),
+      });
+    } finally {
+      setBatchBusy(false);
+    }
+  }
+
+  async function runCardAction(id: string, kind: BatchActionKind): Promise<void> {
+    const instance = snapshot?.instances.find((item) => item.id === id);
+    if (!instance?.revision || instance.revision < 1) {
+      setCardAction({ id, busy: false, error: '缺少配置版本，请刷新后重试。' });
+      return;
+    }
+    const title = kind === 'service-restart' ? SERVICE_RESTART.title : SYSTEM_REBOOT.title;
+    if (
+      typeof window !== 'undefined' &&
+      !window.confirm(`将对该实例执行「${title}」。此操作为高风险，确认继续？`)
+    )
+      return;
+    setCardAction({ id, busy: true, message: `正在${title}…` });
+    try {
+      const result = await runOperation(kind, [{ instanceId: id, revision: instance.revision }]);
+      setCardAction({
+        id,
+        busy: false,
+        message:
+          result.succeeded === 1
+            ? `${title}已提交成功。`
+            : `${title}失败，请稍后重试。`,
+        ...(result.failed === 1 ? { error: `${title}失败，请稍后重试。` } : {}),
+      });
+    } catch (error) {
+      setCardAction({
+        id,
+        busy: false,
+        error: safeUiError(error, `${title}失败，请稍后重试。`),
+      });
+    }
+  }
+
  const selectFilter = (
    label: string,
    value: string,
@@ -362,7 +534,32 @@ export function FleetPage({
      ) : null}
      {batchOpen ? (
        <div className="batch-entry" role="region" aria-label="批量操作入口">
-          请为已选择的 {model.selectedIds.length} 项选择操作。
+          <div className="batch-entry-copy">
+            <strong>批量操作</strong>
+            <p>已选择 {model.selectedIds.length} 项。重启将逐个实例安全确认后执行。</p>
+          </div>
+          <div className="batch-entry-actions" role="group" aria-label="批量重启操作">
+            <button
+              type="button"
+              disabled={batchBusy || model.selectedIds.length === 0}
+              onClick={() => void runBatch('service-restart')}
+            >
+              批量重启服务
+            </button>
+            <button
+              type="button"
+              className="danger-button"
+              disabled={batchBusy || model.selectedIds.length === 0}
+              onClick={() => void runBatch('system-reboot')}
+            >
+              批量系统重启
+            </button>
+          </div>
+          {batchProgress ? (
+            <p role="status" className="batch-progress">
+              {batchProgress.message}
+            </p>
+          ) : null}
        </div>
      ) : null}
      <div className="fleet-toolbar">
@@ -393,7 +590,7 @@ export function FleetPage({
          </label>
        </div>
        <details className="fleet-advanced-filters">
-          <summary>更多筛选与列设置</summary>
+          <summary>更多筛选</summary>
          <div className="fleet-advanced-filter-grid">
            <label>
              <span>认证</span>
@@ -419,30 +616,44 @@ export function FleetPage({
            )}
            {selectFilter('版本', version, setVersion, model.facets.versions, '全部版本')}
            {selectFilter('标签', tag, setTag, model.facets.tags, '全部标签')}
-            <div className="column-picker">
+            <label>
+              <span>排序</span>
+              <select
+                aria-label="排序"
+                value={`${sort.column}:${sort.direction}`}
+                onChange={(event) => {
+                  const [column, direction] = event.currentTarget.value.split(':') as [
+                    FleetSortColumn,
+                    SortDirection,
+                  ];
+                  resetPage(() => setSort({ column, direction }));
+                }}
+              >
+                {(Object.keys(SORT_COLUMN_LABELS) as FleetSortColumn[]).flatMap((column) => [
+                  <option key={`${column}:asc`} value={`${column}:asc`}>
+                    {SORT_COLUMN_LABELS[column]} · 升序
+                  </option>,
+                  <option key={`${column}:desc`} value={`${column}:desc`}>
+                    {SORT_COLUMN_LABELS[column]} · 降序
+                  </option>,
+                ])}
+              </select>
+            </label>
+            <div className="fleet-select-all">
              <button
                type="button"
-                aria-expanded={columnsOpen}
-                onClick={() => setColumnsOpen((open) => !open)}
+                onClick={() => toggleVisible(true)}
+                disabled={model.rows.length === 0}
              >
-                选择列
+                全选本页
+              </button>
+              <button
+                type="button"
+                onClick={() => toggleVisible(false)}
+                disabled={model.selectedIds.length === 0}
+              >
+                清空选择
              </button>
-              {columnsOpen ? (
-                <fieldset>
-                  <legend>显示的列</legend>
-                  {ALL_COLUMNS.map((column) => (
-                    <label key={column}>
-                      <input
-                        type="checkbox"
-                        aria-label={`显示${COLUMN_LABELS[column]}列`}
-                        checked={shownColumns.has(column)}
-                        onChange={() => toggleColumn(column)}
-                      />
-                      {COLUMN_LABELS[column]}
-                    </label>
-                  ))}
-                </fieldset>
-              ) : null}
            </div>
          </div>
        </details>
@@ -450,7 +661,7 @@ export function FleetPage({

      {!snapshot && !error ? (
        <p role="status" aria-label="实例加载状态">
-          正在加载实例…
+          正在加载实例列表…
        </p>
      ) : null}
      {error ? (
@@ -481,11 +692,19 @@ export function FleetPage({
            <div className="fleet-card-grid">
              {model.rows.map((row) => (
                <article
-                  className="fleet-card"
+                  className={`fleet-card${row.selected ? ' is-selected' : ''}`}
                  aria-label={`${row.displayName} 实例概览`}
                  key={row.id}
                >
                  <header>
+                    <label className="fleet-card-select touch-target">
+                      <input
+                        type="checkbox"
+                        aria-label={`选择 ${row.displayName}`}
+                        checked={row.selected}
+                        onChange={(event) => toggleOne(row.id, event.currentTarget.checked)}
+                      />
+                    </label>
                    <a
                      className="fleet-card-entry"
                      href={`/instances/${encodeURIComponent(row.id)}/overview`}
@@ -499,6 +718,19 @@ export function FleetPage({
                      {STATUS_LABELS[row.statusKind]}
                    </span>
                  </header>
+                  {(() => {
+                    const origin = canonicalHttpOrigin(row.instance.url);
+                    return (
+                      <p className="fleet-card-origin" aria-label={`${row.displayName} 源地址`}>
+                        {origin ?? '源地址无效'}
+                      </p>
+                    );
+                  })()}
+                  {row.anomalies.length > 0 ? (
+                    <p className="fleet-card-anomalies" aria-label={`${row.displayName} 异常`}>
+                      {row.anomalies.join(', ')}
+                    </p>
+                  ) : null}
                  <dl className="fleet-card-metrics">
                    <div className="fleet-card-phone">
                      <dt>手机号</dt>
@@ -582,6 +814,23 @@ export function FleetPage({
                    role="group"
                    aria-label="实例管理操作"
                  >
+                    <button
+                      type="button"
+                      aria-label={`重启服务 ${row.displayName}`}
+                      disabled={cardAction?.id === row.id && cardAction.busy}
+                      onClick={() => void runCardAction(row.id, 'service-restart')}
+                    >
+                      重启服务
+                    </button>
+                    <button
+                      type="button"
+                      className="danger-button"
+                      aria-label={`系统重启 ${row.displayName}`}
+                      disabled={cardAction?.id === row.id && cardAction.busy}
+                      onClick={() => void runCardAction(row.id, 'system-reboot')}
+                    >
+                      系统重启
+                    </button>
                    <a
                      href={`/settings/instances/${encodeURIComponent(row.id)}`}
                      aria-label={`编辑 ${row.displayName}`}
@@ -597,6 +846,14 @@ export function FleetPage({
                      删除
                    </button>
                  </div>
+                  {cardAction?.id === row.id ? (
+                    <p
+                      role={cardAction.error ? 'alert' : 'status'}
+                      className={cardAction.error ? 'card-operation-error' : 'card-operation-success'}
+                    >
+                      {cardAction.error ?? cardAction.message}
+                    </p>
+                  ) : null}
                  {deleteId === row.id ? (
                    <div className="card-delete-confirmation">
                      <p>删除后无法撤销。</p>
@@ -650,123 +907,27 @@ export function FleetPage({
              ))}
            </div>
          </section>
-          <section className="fleet-details" aria-labelledby="fleet-details-title">
-            <h2 id="fleet-details-title">高级详细列表</h2>
-            <div className="table-scroll" tabIndex={0}>
-              <table className="dense-table">
-                <caption>实例列表</caption>
-                <thead>
-                  <tr>
-                    <th scope="col" className="select-column">
-                      <label className="touch-target">
-                        <input
-                          ref={selectAllRef}
-                          type="checkbox"
-                          aria-label="选择当前页全部实例"
-                          checked={model.visibleSelection.checked}
-                          onChange={(event) => toggleVisible(event.currentTarget.checked)}
-                        />
-                      </label>
-                    </th>
-                    {ALL_COLUMNS.filter((column) => shownColumns.has(column)).map((column) => (
-                      <th
-                        key={column}
-                        scope="col"
-                        aria-sort={
-                          column !== 'origin' && sort.column === column
-                            ? sort.direction === 'asc'
-                              ? 'ascending'
-                              : 'descending'
-                            : undefined
-                        }
-                      >
-                        {column === 'origin' ? (
-                          COLUMN_LABELS[column]
-                        ) : (
-                          <button
-                            type="button"
-                            onClick={() => changeSort(column)}
-                            aria-label={`按${COLUMN_LABELS[column]}排序`}
-                          >
-                            {COLUMN_LABELS[column]}
-                          </button>
-                        )}
-                      </th>
-                    ))}
-                  </tr>
-                </thead>
-                <tbody>
-                  {model.rows.map((row) => {
-                    const origin = canonicalHttpOrigin(row.instance.url);
-                    const cells: Readonly<Record<string, React.ReactNode>> = {
-                      name: (
-                        <th scope="row">
-                          <a href={`/instances/${encodeURIComponent(row.id)}/overview`}>
-                            {row.displayName}
-                          </a>
-                          <small>{row.id}</small>
-                        </th>
-                      ),
-                      status: (
-                        <td>
-                          <span className={`status status-${row.statusKind}`}>
-                            {STATUS_LABELS[row.statusKind]}
-                          </span>
-                        </td>
-                      ),
-                      latency: <td>{row.latencyMs === undefined ? '—' : `${row.latencyMs} ms`}</td>,
-                      version: <td>{row.version ?? '—'}</td>,
-                      capabilities: (
-                        <td>{row.capabilities.map(capabilityLabel).join(', ') || '—'}</td>
-                      ),
-                      tags: <td>{row.tags.join(', ') || '—'}</td>,
-                      freshness: <td>{FRESHNESS_LABELS[row.freshness] ?? row.freshness}</td>,
-                      anomalies: <td>{row.anomalies.join(', ') || '—'}</td>,
-                      origin: <td>{origin ? <span>{origin}</span> : <span>源地址无效</span>}</td>,
-                    };
-                    return (
-                      <tr key={row.id} aria-selected={row.selected}>
-                        <td>
-                          <label className="touch-target">
-                            <input
-                              type="checkbox"
-                              aria-label={`选择 ${row.displayName}`}
-                              checked={row.selected}
-                              onChange={(event) => toggleOne(row.id, event.currentTarget.checked)}
-                            />
-                          </label>
-                        </td>
-                        {ALL_COLUMNS.filter((column) => shownColumns.has(column)).map((column) => (
-                          <Fragment key={column}>{cells[column]}</Fragment>
-                        ))}
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-            <nav className="pagination" aria-label="实例分页">
-              <button
-                type="button"
-                aria-label="上一页"
-                disabled={model.page === 1}
-                onClick={() => setPage((value) => value - 1)}
-              >
-                上一页
-              </button>
-              <span>
-                第 {model.page} 页，共 {model.pageCount} 页
-              </span>
-              <button
-                type="button"
-                aria-label="下一页"
-                disabled={model.page === model.pageCount}
-                onClick={() => setPage((value) => value + 1)}
-              >
-                下一页
-              </button>
-            </nav>
-          </section>
+          <nav className="pagination" aria-label="实例分页">
+            <button
+              type="button"
+              aria-label="上一页"
+              disabled={model.page === 1}
+              onClick={() => setPage((value) => value - 1)}
+            >
+              上一页
+            </button>
+            <span>
+              第 {model.page} 页，共 {model.pageCount} 页
+            </span>
+            <button
+              type="button"
+              aria-label="下一页"
+              disabled={model.page === model.pageCount}
+              onClick={() => setPage((value) => value + 1)}
+            >
+              下一页
+            </button>
+          </nav>
        </>
      ) : null}
    </section>