Files
model-platform/frontend/app/features/schedules/RunHistory.tsx
T
2026-08-05 15:58:18 +08:00

65 lines
1.8 KiB
TypeScript

import { type ScheduleRunSummary } from "../../services/api";
import Icon from "../../components/common/Icon";
import { formatTime, formatDuration } from "./utils";
const RUN_STATUS_LABELS: Record<string, string> = {
queued: "排队中",
running: "运行中",
succeeded: "成功",
failed: "失败",
cancelled: "已取消",
timed_out: "已超时",
};
export function RunHistory({
runs,
loading,
disabled,
onRefresh,
}: {
runs: ScheduleRunSummary[];
loading: boolean;
disabled: boolean;
onRefresh: () => void;
}) {
return (
<section className="schedule-run-history">
<header>
<div>
<strong>运行记录</strong>
<span>{runs.length}</span>
</div>
<button
type="button"
aria-label="刷新运行记录"
disabled={disabled || loading}
onClick={onRefresh}
>
<Icon name="refresh" size={13} />
</button>
</header>
<div className="schedule-run-list">
{loading && runs.length === 0 ? (
<p>正在加载运行记录…</p>
) : 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>
))
)}
</div>
</section>
);
}