336 lines
11 KiB
TypeScript
336 lines
11 KiB
TypeScript
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|||
|
|
import { api, JobRun } from "../api/haixun";
|
|||
|
|
import { Badge, Button } from "./ui";
|
|||
|
|
import { formatNano } from "../lib/format";
|
|||
|
|
import { canCancelJob, canRetryJob } from "../lib/jobActions";
|
|||
|
|
import { jobTemplateLabel } from "../lib/jobLabels";
|
|||
|
|
import { jobStatusBadgeClass, jobStatusLabel } from "../lib/jobStatus";
|
|||
|
|
import { AcIcon } from "./AcIcon";
|
|||
|
|
import type { JobCreatedDetail } from "../lib/jobEvents";
|
|||
|
|
|
|||
|
|
const ACTIVE_STATUSES = ["running", "queued", "pending", "waiting_worker", "cancel_requested"];
|
|||
|
|
const PANEL_STATUSES = [...ACTIVE_STATUSES, "failed"];
|
|||
|
|
|
|||
|
|
function nowNano() {
|
|||
|
|
return Date.now() * 1_000_000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function optimisticJob(detail: JobCreatedDetail): JobRun {
|
|||
|
|
return {
|
|||
|
|
id: detail.jobId,
|
|||
|
|
template_type: detail.templateType || detail.label || "任務",
|
|||
|
|
status: detail.status || "queued",
|
|||
|
|
progress: { percentage: 0, summary: "剛建立，等待執行…" },
|
|||
|
|
create_at: nowNano(),
|
|||
|
|
update_at: nowNano()
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function JobMonitorItem({
|
|||
|
|
job,
|
|||
|
|
actionLoading,
|
|||
|
|
onCancel,
|
|||
|
|
onRetry,
|
|||
|
|
showError
|
|||
|
|
}: {
|
|||
|
|
job: JobRun;
|
|||
|
|
actionLoading: boolean;
|
|||
|
|
onCancel: () => void;
|
|||
|
|
onRetry: () => void;
|
|||
|
|
showError: boolean;
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="job-panel-item"
|
|||
|
|
style={{
|
|||
|
|
border: `1px solid ${job.status === "failed" ? "color-mix(in srgb, var(--hx-danger) 40%, var(--hx-line))" : "var(--hx-line)"}`,
|
|||
|
|
borderRadius: "var(--radius-md)",
|
|||
|
|
padding: "0.55rem 0.7rem",
|
|||
|
|
marginBottom: "0.5rem",
|
|||
|
|
background: "var(--hx-surface)"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.25rem" }}>
|
|||
|
|
<strong style={{ fontSize: "0.9rem" }}>{jobTemplateLabel(job.template_type)}</strong>
|
|||
|
|
<Badge variant={jobStatusBadgeClass(job.status)}>{jobStatusLabel(job.status)}</Badge>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{job.progress ? (
|
|||
|
|
<div style={{ fontSize: "0.8rem", color: "var(--hx-ink-secondary)", marginBottom: "0.2rem" }}>
|
|||
|
|
{job.progress.percentage ?? 0}%
|
|||
|
|
{job.progress.summary ? ` · ${job.progress.summary}` : ""}
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{showError && job.error?.trim() ? (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
fontSize: "0.78rem",
|
|||
|
|
color: "var(--hx-danger)",
|
|||
|
|
marginBottom: "0.35rem",
|
|||
|
|
whiteSpace: "pre-wrap",
|
|||
|
|
wordBreak: "break-word",
|
|||
|
|
lineHeight: 1.45
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{job.error.trim()}
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "0.35rem", fontSize: "0.72rem", flexWrap: "wrap" }}>
|
|||
|
|
<span className="muted">{formatNano(job.update_at)}</span>
|
|||
|
|
<div className="button-row" style={{ gap: "0.35rem" }}>
|
|||
|
|
{canCancelJob(job) ? (
|
|||
|
|
<Button
|
|||
|
|
variant="danger"
|
|||
|
|
onClick={onCancel}
|
|||
|
|
loading={actionLoading}
|
|||
|
|
style={{ fontSize: "0.7rem", padding: "0.15rem 0.5rem", minHeight: "1.6rem" }}
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
) : null}
|
|||
|
|
{canRetryJob(job) ? (
|
|||
|
|
<Button
|
|||
|
|
variant="primary"
|
|||
|
|
onClick={onRetry}
|
|||
|
|
loading={actionLoading}
|
|||
|
|
style={{ fontSize: "0.7rem", padding: "0.15rem 0.5rem", minHeight: "1.6rem" }}
|
|||
|
|
>
|
|||
|
|
重作
|
|||
|
|
</Button>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function JobMonitor() {
|
|||
|
|
const [jobs, setJobs] = useState<JobRun[]>([]);
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
const [actionJobId, setActionJobId] = useState("");
|
|||
|
|
const [hot, setHot] = useState(false);
|
|||
|
|
const pendingRef = useRef<Map<string, JobRun>>(new Map());
|
|||
|
|
|
|||
|
|
const mergeWithPending = useCallback((serverList: JobRun[]) => {
|
|||
|
|
const serverIds = new Set(serverList.map((j) => j.id));
|
|||
|
|
for (const id of [...pendingRef.current.keys()]) {
|
|||
|
|
if (serverIds.has(id)) pendingRef.current.delete(id);
|
|||
|
|
}
|
|||
|
|
const pending = [...pendingRef.current.values()].filter((j) => !serverIds.has(j.id));
|
|||
|
|
return [...pending, ...serverList];
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
try {
|
|||
|
|
const data = await api.jobs(1, 20);
|
|||
|
|
setJobs(mergeWithPending(data.list || []));
|
|||
|
|
} catch {
|
|||
|
|
// 背景浮層靜默失敗，完整錯誤到任務中心看
|
|||
|
|
}
|
|||
|
|
}, [mergeWithPending]);
|
|||
|
|
|
|||
|
|
const burstRefresh = useCallback(() => {
|
|||
|
|
void load();
|
|||
|
|
window.setTimeout(() => void load(), 350);
|
|||
|
|
window.setTimeout(() => void load(), 900);
|
|||
|
|
window.setTimeout(() => void load(), 1800);
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
const panelJobs = jobs.filter((j) => PANEL_STATUSES.includes(j.status));
|
|||
|
|
const activeJobs = panelJobs.filter((j) => ACTIVE_STATUSES.includes(j.status));
|
|||
|
|
const failedJobs = panelJobs.filter((j) => j.status === "failed").slice(0, 3);
|
|||
|
|
const hasActive = activeJobs.length > 0;
|
|||
|
|
const hasFailed = failedJobs.length > 0;
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const intervalMs = hasActive ? 1000 : 4500;
|
|||
|
|
const timer = window.setInterval(() => void load(), intervalMs);
|
|||
|
|
return () => window.clearInterval(timer);
|
|||
|
|
}, [hasActive, load]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
function onJobCreated(event: Event) {
|
|||
|
|
const detail = (event as CustomEvent<JobCreatedDetail>).detail;
|
|||
|
|
if (!detail?.jobId) return;
|
|||
|
|
const job = optimisticJob(detail);
|
|||
|
|
pendingRef.current.set(detail.jobId, job);
|
|||
|
|
setJobs((prev) => {
|
|||
|
|
if (prev.some((j) => j.id === detail.jobId)) return prev;
|
|||
|
|
return [job, ...prev];
|
|||
|
|
});
|
|||
|
|
setOpen(true);
|
|||
|
|
setHot(true);
|
|||
|
|
burstRefresh();
|
|||
|
|
window.setTimeout(() => setHot(false), 2400);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onRefresh() {
|
|||
|
|
burstRefresh();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.addEventListener("haixun:job-created", onJobCreated);
|
|||
|
|
window.addEventListener("haixun:jobs-refresh", onRefresh);
|
|||
|
|
return () => {
|
|||
|
|
window.removeEventListener("haixun:job-created", onJobCreated);
|
|||
|
|
window.removeEventListener("haixun:jobs-refresh", onRefresh);
|
|||
|
|
};
|
|||
|
|
}, [burstRefresh]);
|
|||
|
|
|
|||
|
|
async function cancel(job: JobRun) {
|
|||
|
|
setActionJobId(job.id);
|
|||
|
|
try {
|
|||
|
|
await api.cancelJob(job.id);
|
|||
|
|
pendingRef.current.delete(job.id);
|
|||
|
|
await load();
|
|||
|
|
window.dispatchEvent(new CustomEvent("haixun:jobs-refresh"));
|
|||
|
|
} catch {
|
|||
|
|
// 錯誤細節到任務中心看
|
|||
|
|
} finally {
|
|||
|
|
setActionJobId("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function retry(job: JobRun) {
|
|||
|
|
setActionJobId(job.id);
|
|||
|
|
try {
|
|||
|
|
await api.retryJob(job.id);
|
|||
|
|
pendingRef.current.delete(job.id);
|
|||
|
|
await load();
|
|||
|
|
window.dispatchEvent(new CustomEvent("haixun:jobs-refresh"));
|
|||
|
|
} catch {
|
|||
|
|
// 錯誤細節到任務中心看
|
|||
|
|
} finally {
|
|||
|
|
setActionJobId("");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const count = activeJobs.length;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setOpen(!open)}
|
|||
|
|
className={`job-fab${hot || count > 0 || hasFailed ? " job-fab--hot" : ""}`}
|
|||
|
|
style={{
|
|||
|
|
position: "fixed",
|
|||
|
|
bottom: "calc(4.5rem + env(safe-area-inset-bottom, 0px))",
|
|||
|
|
right: "1rem",
|
|||
|
|
zIndex: 110,
|
|||
|
|
background: count > 0 || hasFailed ? "var(--hx-brand)" : "var(--hx-surface-muted)",
|
|||
|
|
color: count > 0 || hasFailed ? "white" : "var(--hx-muted)",
|
|||
|
|
border: count > 0 || hasFailed ? "none" : "1px solid var(--hx-line)",
|
|||
|
|
borderRadius: "999px",
|
|||
|
|
padding: "0.4rem 0.85rem",
|
|||
|
|
fontSize: "0.78rem",
|
|||
|
|
fontWeight: 700,
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
gap: "0.4rem",
|
|||
|
|
boxShadow: "var(--shadow-card)",
|
|||
|
|
cursor: "pointer"
|
|||
|
|
}}
|
|||
|
|
title={count > 0 ? `${count} 個任務進行中` : hasFailed ? "有任務失敗" : "查看任務狀態"}
|
|||
|
|
>
|
|||
|
|
<AcIcon name="job" size={17} />
|
|||
|
|
<span>
|
|||
|
|
{count > 0 ? `${count} 進行中` : hasFailed ? "有失敗" : "任務"}
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{open && (
|
|||
|
|
<div
|
|||
|
|
className="job-panel"
|
|||
|
|
style={{
|
|||
|
|
position: "fixed",
|
|||
|
|
bottom: "calc(6.5rem + env(safe-area-inset-bottom, 0px))",
|
|||
|
|
right: "1rem",
|
|||
|
|
zIndex: 120,
|
|||
|
|
width: "min(360px, calc(100vw - 2rem))",
|
|||
|
|
maxHeight: "58vh",
|
|||
|
|
background: "var(--hx-surface)",
|
|||
|
|
border: "1px solid var(--hx-line)",
|
|||
|
|
borderRadius: "var(--radius-lg)",
|
|||
|
|
boxShadow: "var(--shadow-card)",
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
overflow: "hidden"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "space-between",
|
|||
|
|
padding: "0.6rem 0.85rem",
|
|||
|
|
borderBottom: "1px solid var(--hx-line)",
|
|||
|
|
background: "var(--hx-surface-muted)"
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ fontWeight: 700, display: "flex", alignItems: "center", gap: "0.4rem" }}>
|
|||
|
|
<AcIcon name="job" size={16} />
|
|||
|
|
任務狀態 {count > 0 ? `（${count} 進行中）` : ""}
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setOpen(false)}
|
|||
|
|
style={{ background: "transparent", border: "none", fontSize: "1.1rem", lineHeight: 1, cursor: "pointer", color: "var(--hx-muted)" }}
|
|||
|
|
aria-label="關閉"
|
|||
|
|
>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ overflowY: "auto", padding: "0.5rem", flex: 1 }}>
|
|||
|
|
{activeJobs.length === 0 && failedJobs.length === 0 ? (
|
|||
|
|
<p className="muted" style={{ padding: "0.5rem 0.3rem" }}>目前沒有進行中或失敗的任務。</p>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{activeJobs.map((job) => (
|
|||
|
|
<JobMonitorItem
|
|||
|
|
key={job.id}
|
|||
|
|
job={job}
|
|||
|
|
actionLoading={actionJobId === job.id}
|
|||
|
|
onCancel={() => void cancel(job)}
|
|||
|
|
onRetry={() => void retry(job)}
|
|||
|
|
showError={false}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{failedJobs.length > 0 ? (
|
|||
|
|
<>
|
|||
|
|
<p className="muted hx-text-sm" style={{ margin: "0.35rem 0.15rem 0.45rem", fontWeight: 700 }}>最近失敗</p>
|
|||
|
|
{failedJobs.map((job) => (
|
|||
|
|
<JobMonitorItem
|
|||
|
|
key={job.id}
|
|||
|
|
job={job}
|
|||
|
|
actionLoading={actionJobId === job.id}
|
|||
|
|
onCancel={() => void cancel(job)}
|
|||
|
|
onRetry={() => void retry(job)}
|
|||
|
|
showError
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ padding: "0.4rem 0.7rem", borderTop: "1px solid var(--hx-line)", background: "var(--hx-surface-muted)" }}>
|
|||
|
|
<Button
|
|||
|
|
onClick={() => {
|
|||
|
|
window.location.hash = "jobs";
|
|||
|
|
setOpen(false);
|
|||
|
|
}}
|
|||
|
|
style={{ width: "100%", fontSize: "0.75rem" }}
|
|||
|
|
>
|
|||
|
|
前往任務中心看完整紀錄
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|