添加查看调度运行结果

frontend/app/features/schedules/SchedulePage.tsx

@@ -16,6 +16,8 @@ import {
   type ScheduleArtifact,
   type ScheduleEdge,
   type ScheduleNode,
+  type ScheduleNodeRun,
+  type ScheduleRunDetail,
   type ScheduleRunSummary,
 } from "../../services/api";
 
@@ -129,6 +131,18 @@ const RUN_STATUS_LABELS: Record<ScheduleRunSummary["run_status"], string> = {
   timed_out: "已超时",
 };
 
+const NODE_STATUS_LABELS: Record<ScheduleNodeRun["node_status"], string> = {
+  ...RUN_STATUS_LABELS,
+  skipped: "已跳过",
+};
+
+const TRIGGER_TYPE_LABELS: Record<ScheduleRunSummary["trigger_type"], string> = {
+  manual: "手动触发",
+  cron: "Cron 定时",
+  api: "API 触发",
+  retry: "失败重试",
+};
+
 function formatDuration(value: number | null): string {
   if (value === null) return "—";
   if (value < 1000) return `${value} ms`;
@@ -136,6 +150,12 @@ function formatDuration(value: number | null): string {
   return `${Math.floor(value / 60_000)}m ${Math.round((value % 60_000) / 1000)}s`;
 }
 
+function formatSize(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  return `${(value / 1024 / 1024).toFixed(1)} MB`;
+}
+
 function parseObject(text: string, label: string): Record<string, unknown> {
   let value: unknown;
   try {
@@ -1399,6 +1419,7 @@ export default function SchedulePage({
           </div>
           <RunHistory
             runs={runs}
+            nodes={schedule?.nodes ?? []}
             loading={runsLoading}
             disabled={!schedule || Boolean(busy)}
             onRefresh={() => {
@@ -1562,15 +1583,203 @@ export default function SchedulePage({
 
 function RunHistory({
   runs,
+  nodes,
   loading,
   disabled,
   onRefresh,
 }: {
   runs: ScheduleRunSummary[];
+  nodes: ScheduleNode[];
   loading: boolean;
   disabled: boolean;
   onRefresh: () => void;
 }) {
+  const api = useApi();
+  const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
+  const [runDetails, setRunDetails] = useState<Record<string, ScheduleRunDetail>>({});
+  const [detailLoadingId, setDetailLoadingId] = useState<string | null>(null);
+  const [detailErrors, setDetailErrors] = useState<Record<string, string>>({});
+  const [openLogNodeRunIds, setOpenLogNodeRunIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [logStates, setLogStates] = useState<Record<string, {
+    loading: boolean;
+    content: string | null;
+    fileName: string | null;
+    error: string | null;
+  }>>({});
+  const [artifactBusyKey, setArtifactBusyKey] = useState<string | null>(null);
+  const [artifactErrors, setArtifactErrors] = useState<Record<string, string>>({});
+
+  const expandedSummary = runs.find((run) => run.run_id === expandedRunId);
+
+  useEffect(() => {
+    if (expandedRunId && !expandedSummary) {
+      setExpandedRunId(null);
+      setOpenLogNodeRunIds(new Set());
+    }
+  }, [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((current) => current === runId ? null : runId);
+    setOpenLogNodeRunIds(new Set());
+  };
+
+  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>
@@ -1593,19 +1802,174 @@ function RunHistory({
         ) : runs.length === 0 ? (
           <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>