refactor: extract components

frontend/app/features/schedules/RunHistory.tsx

@@ -1,27 +1,223 @@
-import { type ScheduleRunSummary } from "../../services/api";
-import Icon from "../../components/common/Icon";
-import { formatTime, formatDuration } from "./utils";
+import { useEffect } from "react";
 
-const RUN_STATUS_LABELS: Record<string, string> = {
-  queued: "排队中",
-  running: "运行中",
-  succeeded: "成功",
-  failed: "失败",
-  cancelled: "已取消",
-  timed_out: "已超时",
-};
+import {
+  type ScheduleNode,
+  type ScheduleRunSummary,
+} from "../../services/api";
+
+import { useApi } from "../../context/AuthContext";
+import Icon from "../../components/common/Icon";
+import { useSchedulesStore } from "./state/schedulesStore";
+import {
+  formatDuration,
+  formatSize,
+  formatTime,
+  NODE_STATUS_LABELS,
+  RUN_STATUS_LABELS,
+  TRIGGER_TYPE_LABELS,
+} from "./utils";
 
 export function RunHistory({
   runs,
+  nodes,
   loading,
   disabled,
   onRefresh,
 }: {
   runs: ScheduleRunSummary[];
+  nodes: ScheduleNode[];
   loading: boolean;
   disabled: boolean;
   onRefresh: () => void;
 }) {
+  const api = useApi();
+  const expandedRunId = useSchedulesStore((s) => s.expandedRunId);
+  const runDetails = useSchedulesStore((s) => s.runDetails);
+  const detailLoadingId = useSchedulesStore((s) => s.detailLoadingId);
+  const detailErrors = useSchedulesStore((s) => s.detailErrors);
+  const openLogNodeRunIds = useSchedulesStore((s) => s.openLogNodeRunIds);
+  const logStates = useSchedulesStore((s) => s.logStates);
+  const artifactBusyKey = useSchedulesStore((s) => s.artifactBusyKey);
+  const artifactErrors = useSchedulesStore((s) => s.artifactErrors);
+  const setExpandedRunId = useSchedulesStore((s) => s.setExpandedRunId);
+  const setRunDetails = useSchedulesStore((s) => s.setRunDetails);
+  const setDetailLoadingId = useSchedulesStore((s) => s.setDetailLoadingId);
+  const setDetailErrors = useSchedulesStore((s) => s.setDetailErrors);
+  const setOpenLogNodeRunIds = useSchedulesStore((s) => s.setOpenLogNodeRunIds);
+  const setLogStates = useSchedulesStore((s) => s.setLogStates);
+  const setArtifactBusyKey = useSchedulesStore((s) => s.setArtifactBusyKey);
+  const setArtifactErrors = useSchedulesStore((s) => s.setArtifactErrors);
+
+  const expandedSummary = runs.find((run) => run.run_id === expandedRunId);
+
+  useEffect(() => {
+    if (expandedRunId && !expandedSummary) {
+      setExpandedRunId(null);
+      setOpenLogNodeRunIds(() => new Set<string>());
+    }
+  }, [expandedRunId, expandedSummary]);
+
+  useEffect(() => {
+    const runId = expandedRunId;
+    if (!runId) return undefined;
+    let cancelled = false;
+    setDetailLoadingId(runId);
+    setDetailErrors((current) => {
+      const next = { ...current };
+      delete next[runId];
+      return next;
+    });
+    api.getScheduleRun(runId)
+      .then((detail) => {
+        if (!cancelled) {
+          setRunDetails((current) => ({ ...current, [runId]: detail }));
+        }
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setDetailErrors((current) => ({
+            ...current,
+            [runId]: error instanceof Error ? error.message : "运行详情加载失败",
+          }));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setDetailLoadingId(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, expandedRunId, expandedSummary?.state_version]);
+
+  const toggleRun = (runId: string): void => {
+    setExpandedRunId(expandedRunId === runId ? null : runId);
+    setOpenLogNodeRunIds(() => new Set<string>());
+  };
+
+  const toggleLog = async (runId: string, nodeRunId: string): Promise<void> => {
+    if (openLogNodeRunIds.has(nodeRunId)) {
+      setOpenLogNodeRunIds((current) => {
+        const next = new Set(current);
+        next.delete(nodeRunId);
+        return next;
+      });
+      return;
+    }
+    setOpenLogNodeRunIds((current) => new Set(current).add(nodeRunId));
+    if (logStates[nodeRunId]?.content) return;
+
+    setLogStates((current) => ({
+      ...current,
+      [nodeRunId]: {
+        loading: true,
+        content: null,
+        fileName: null,
+        error: null,
+      },
+    }));
+    try {
+      const artifacts = await api.getScheduleNodeRunArtifacts(runId, nodeRunId);
+      if (!artifacts.log) throw new Error("本次节点执行没有可用日志");
+      const response = await fetch(artifacts.log.url, {
+        credentials: "same-origin",
+        cache: "no-store",
+      });
+      if (!response.ok) {
+        throw new Error(`日志读取失败（HTTP ${response.status}）`);
+      }
+      const content = await response.text();
+      setLogStates((current) => ({
+        ...current,
+        [nodeRunId]: {
+          loading: false,
+          content,
+          fileName: artifacts.log?.file_name ?? null,
+          error: null,
+        },
+      }));
+    } catch (error) {
+      setLogStates((current) => ({
+        ...current,
+        [nodeRunId]: {
+          loading: false,
+          content: null,
+          fileName: null,
+          error: error instanceof Error ? error.message : "日志读取失败",
+        },
+      }));
+    }
+  };
+
+  const downloadResult = async (
+    runId: string,
+    nodeRunId: string,
+  ): Promise<void> => {
+    const busyKey = `${nodeRunId}:result`;
+    setArtifactBusyKey(busyKey);
+    setArtifactErrors((current) => {
+      const next = { ...current };
+      delete next[nodeRunId];
+      return next;
+    });
+    try {
+      const artifacts = await api.getScheduleNodeRunArtifacts(runId, nodeRunId);
+      if (!artifacts.result) throw new Error("本次节点执行没有可下载结果");
+      const link = document.createElement("a");
+      link.href = artifacts.result.url;
+      link.download = artifacts.result.file_name;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    } catch (error) {
+      setArtifactErrors((current) => ({
+        ...current,
+        [nodeRunId]: error instanceof Error ? error.message : "结果下载失败",
+      }));
+    } finally {
+      setArtifactBusyKey(null);
+    }
+  };
+
+  const downloadLog = async (
+    runId: string,
+    nodeRunId: string,
+  ): Promise<void> => {
+    const busyKey = `${nodeRunId}:log-download`;
+    setArtifactBusyKey(busyKey);
+    setArtifactErrors((current) => {
+      const next = { ...current };
+      delete next[nodeRunId];
+      return next;
+    });
+    try {
+      const artifacts = await api.getScheduleNodeRunArtifacts(runId, nodeRunId);
+      if (!artifacts.log) throw new Error("本次节点执行没有可下载日志");
+      const response = await fetch(artifacts.log.url, {
+        credentials: "same-origin",
+        cache: "no-store",
+      });
+      if (!response.ok) {
+        throw new Error(`日志下载失败（HTTP ${response.status}）`);
+      }
+      const objectUrl = URL.createObjectURL(await response.blob());
+      const link = document.createElement("a");
+      link.href = objectUrl;
+      link.download = artifacts.log.file_name;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (error) {
+      setArtifactErrors((current) => ({
+        ...current,
+        [nodeRunId]:
+          error instanceof Error ? error.message : "日志下载失败",
+      }));
+    } finally {
+      setArtifactBusyKey(null);
+    }
+  };
+
   return (
     <section className="schedule-run-history">
       <header>
@@ -42,21 +238,176 @@ export function RunHistory({
         {loading && runs.length === 0 ? (
           <p>正在加载运行记录…</p>
         ) : runs.length === 0 ? (
-          <p>点击右上角"立即运行"后，这里会显示状态和耗时。</p>
+          <p>点击右上角“立即运行”后，这里会显示状态和耗时。</p>
         ) : (
-          runs.map((run) => (
-            <article className="schedule-run-card" key={run.run_id}>
-              <span className={`run-status-dot is-${run.run_status}`} />
-              <div>
-                <strong>{RUN_STATUS_LABELS[run.run_status]}</strong>
-                <small>
-                  {formatTime(run.queued_at)} · {formatDuration(run.duration_ms)}
-                </small>
-                {run.error_message && <p>{run.error_message}</p>}
-              </div>
-              <code title={run.run_id}>{run.run_id.slice(-8)}</code>
-            </article>
-          ))
+          runs.map((run) => {
+            const expanded = expandedRunId === run.run_id;
+            const detail = runDetails[run.run_id];
+            return (
+              <article
+                className={`schedule-run-card${expanded ? " is-expanded" : ""}`}
+                key={run.run_id}
+              >
+                <div
+                  className="schedule-run-summary"
+                >
+                  <span className={`run-status-dot is-${run.run_status}`} />
+                  <span className="schedule-run-summary-copy">
+                    <strong>{RUN_STATUS_LABELS[run.run_status]}</strong>
+                    <small>
+                      {formatTime(run.queued_at)} · {formatDuration(run.duration_ms)}
+                    </small>
+                    {run.error_message && <span>{run.error_message}</span>}
+                  </span>
+                  <code title={run.run_id}>{run.run_id.slice(-8)}</code>
+                  <button
+                    className="schedule-run-result-button"
+                    type="button"
+                    aria-haspopup="dialog"
+                    onClick={() => toggleRun(run.run_id)}
+                  >
+                    查看结果
+                  </button>
+                </div>
+
+                {expanded && (
+                  <>
+                    <button
+                      className="schedule-run-result-backdrop"
+                      type="button"
+                      aria-label="关闭运行结果"
+                      onClick={() => toggleRun(run.run_id)}
+                    />
+                    <section
+                      className="schedule-run-result-modal"
+                      role="dialog"
+                      aria-modal="true"
+                      aria-label="调度运行结果"
+                    >
+                      <header className="schedule-run-result-modal__header">
+                        <div>
+                          <span>调度运行结果</span>
+                          <strong>{RUN_STATUS_LABELS[run.run_status]}</strong>
+                          <code>{run.run_id}</code>
+                        </div>
+                        <button
+                          className="icon-button"
+                          type="button"
+                          aria-label="关闭运行结果"
+                          onClick={() => toggleRun(run.run_id)}
+                        >
+                          <Icon name="close" size={16} />
+                        </button>
+                      </header>
+                      <div className="schedule-run-detail">
+                    {detailLoadingId === run.run_id && !detail ? (
+                      <p className="run-detail-message">正在加载运行详情…</p>
+                    ) : detailErrors[run.run_id] ? (
+                      <p className="run-detail-message is-error">
+                        {detailErrors[run.run_id]}
+                      </p>
+                    ) : detail ? (
+                      <>
+                        <dl className="schedule-run-meta">
+                          <div><dt>触发方式</dt><dd>{TRIGGER_TYPE_LABELS[detail.trigger_type]}</dd></div>
+                          <div><dt>工作流版本</dt><dd>v{detail.workflow_version}</dd></div>
+                          <div><dt>开始时间</dt><dd>{formatTime(detail.started_at)}</dd></div>
+                          <div><dt>完成时间</dt><dd>{formatTime(detail.finished_at)}</dd></div>
+                        </dl>
+                        {(detail.error_code || detail.error_message) && (
+                          <div className="schedule-run-error">
+                            {detail.error_code && <code>{detail.error_code}</code>}
+                            {detail.error_message && <p>{detail.error_message}</p>}
+                          </div>
+                        )}
+                        <div className="schedule-node-run-list">
+                          {detail.node_runs.length === 0 ? (
+                            <p className="run-detail-message">节点尚未开始执行</p>
+                          ) : detail.node_runs.map((nodeRun) => {
+                            const node = nodes.find((item) => item.node_id === nodeRun.node_id);
+                            const logState = logStates[nodeRun.node_run_id];
+                            const logOpen = openLogNodeRunIds.has(nodeRun.node_run_id);
+                            return (
+                              <article className="schedule-node-run" key={nodeRun.node_run_id}>
+                                <header>
+                                  <span className={`run-status-dot is-${nodeRun.node_status}`} />
+                                  <strong>{node?.node_name ?? nodeRun.node_id.slice(-8)}</strong>
+                                  <span>{NODE_STATUS_LABELS[nodeRun.node_status]}</span>
+                                </header>
+                                <div className="schedule-node-run-meta">
+                                  <span>第 {nodeRun.attempt_no} 次</span>
+                                  <span>{formatDuration(nodeRun.duration_ms)}</span>
+                                  <span>退出码 {nodeRun.exit_code ?? "—"}</span>
+                                </div>
+                                {nodeRun.message && <p>{nodeRun.message}</p>}
+                                <div className="schedule-node-run-actions">
+                                  <button
+                                    type="button"
+                                    disabled={!nodeRun.logs_object_id || logState?.loading}
+                                    onClick={() => void toggleLog(run.run_id, nodeRun.node_run_id)}
+                                  >
+                                    {logState?.loading ? "读取中…" : logOpen ? "收起日志" : "查看日志"}
+                                  </button>
+                                  <button
+                                    type="button"
+                                    disabled={
+                                      !nodeRun.logs_object_id
+                                      || artifactBusyKey === `${nodeRun.node_run_id}:log-download`
+                                    }
+                                    onClick={() => void downloadLog(run.run_id, nodeRun.node_run_id)}
+                                  >
+                                    {artifactBusyKey === `${nodeRun.node_run_id}:log-download`
+                                      ? "准备中…"
+                                      : "下载日志"}
+                                  </button>
+                                  <button
+                                    type="button"
+                                    disabled={
+                                      !nodeRun.result_object_id
+                                      || artifactBusyKey === `${nodeRun.node_run_id}:result`
+                                    }
+                                    onClick={() => void downloadResult(run.run_id, nodeRun.node_run_id)}
+                                  >
+                                    {artifactBusyKey === `${nodeRun.node_run_id}:result`
+                                      ? "准备中…"
+                                      : "下载结果"}
+                                  </button>
+                                </div>
+                                {artifactErrors[nodeRun.node_run_id] && (
+                                  <p className="schedule-artifact-error">
+                                    {artifactErrors[nodeRun.node_run_id]}
+                                  </p>
+                                )}
+                                {logOpen && (
+                                  <div className="schedule-node-log">
+                                    {logState?.fileName && (
+                                      <header>
+                                        <span>{logState.fileName}</span>
+                                        <small>
+                                          {formatSize(new TextEncoder().encode(logState.content ?? "").length)}
+                                        </small>
+                                      </header>
+                                    )}
+                                    {logState?.error ? (
+                                      <p>{logState.error}</p>
+                                    ) : (
+                                      <pre>{logState?.content ?? "正在读取日志…"}</pre>
+                                    )}
+                                  </div>
+                                )}
+                              </article>
+                            );
+                          })}
+                        </div>
+                      </>
+                    ) : null}
+                      </div>
+                    </section>
+                  </>
+                )}
+              </article>
+            );
+          })
         )}
       </div>
     </section>