1008 lines
38 KiB
TypeScript
1008 lines
38 KiB
TypeScript
import {
|
||
Activity,
|
||
AlertTriangle,
|
||
CheckCircle2,
|
||
Clock3,
|
||
Filter,
|
||
PlayCircle,
|
||
RefreshCcw,
|
||
RotateCcw,
|
||
Send,
|
||
SquareTerminal,
|
||
StopCircle,
|
||
TimerReset,
|
||
Workflow,
|
||
} from "lucide-react";
|
||
import {
|
||
startTransition,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useState,
|
||
} from "react";
|
||
import { useSearchParams } from "react-router-dom";
|
||
import { toast } from "sonner";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Select } from "@/components/ui/select";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { adminApi, ApiError } from "@/lib/api";
|
||
import { formatDateTime } from "@/lib/admin-format";
|
||
import {
|
||
formatWorkerProgress,
|
||
getWorkerProgressPercent,
|
||
} from "@/lib/worker-progress";
|
||
import type { WorkerJobRecord, WorkerOverview, WorkerStats } from "@/lib/types";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
function prettyJson(value: unknown) {
|
||
if (value === null || value === undefined) {
|
||
return "—";
|
||
}
|
||
|
||
try {
|
||
return JSON.stringify(value, null, 2);
|
||
} catch {
|
||
return String(value);
|
||
}
|
||
}
|
||
|
||
function statusVariant(status: string) {
|
||
switch (status) {
|
||
case "succeeded":
|
||
return "success" as const;
|
||
case "running":
|
||
return "default" as const;
|
||
case "queued":
|
||
return "secondary" as const;
|
||
case "failed":
|
||
return "danger" as const;
|
||
case "cancelled":
|
||
return "warning" as const;
|
||
default:
|
||
return "outline" as const;
|
||
}
|
||
}
|
||
|
||
function summaryIconTone(status: string) {
|
||
switch (status) {
|
||
case "running":
|
||
return "border-blue-500/20 bg-blue-500/10 text-blue-600";
|
||
case "succeeded":
|
||
return "border-emerald-500/20 bg-emerald-500/10 text-emerald-600";
|
||
case "failed":
|
||
return "border-rose-500/20 bg-rose-500/10 text-rose-600";
|
||
case "queued":
|
||
return "border-sky-500/20 bg-sky-500/10 text-sky-600";
|
||
default:
|
||
return "border-primary/20 bg-primary/10 text-primary";
|
||
}
|
||
}
|
||
|
||
function workerStatTotal(item: WorkerStats) {
|
||
return (
|
||
item.queued + item.running + item.succeeded + item.failed + item.cancelled
|
||
);
|
||
}
|
||
|
||
function workerHealthLabel(item: WorkerStats) {
|
||
if (item.failed > 0) {
|
||
return "有失败";
|
||
}
|
||
if (item.running > 0) {
|
||
return "执行中";
|
||
}
|
||
if (item.queued > 0) {
|
||
return "排队中";
|
||
}
|
||
return "稳定";
|
||
}
|
||
|
||
function workerHealthTone(item: WorkerStats) {
|
||
if (item.failed > 0) {
|
||
return "text-rose-600";
|
||
}
|
||
if (item.running > 0) {
|
||
return "text-blue-600";
|
||
}
|
||
if (item.queued > 0) {
|
||
return "text-sky-600";
|
||
}
|
||
return "text-emerald-600";
|
||
}
|
||
|
||
function relatedEntityText(job: WorkerJobRecord) {
|
||
if (!job.related_entity_type || !job.related_entity_id) {
|
||
return "—";
|
||
}
|
||
|
||
return `${job.related_entity_type}:${job.related_entity_id}`;
|
||
}
|
||
|
||
function jobTitle(job: WorkerJobRecord) {
|
||
return job.display_name ?? job.worker_name;
|
||
}
|
||
|
||
function SummaryCard({
|
||
label,
|
||
value,
|
||
hint,
|
||
icon: Icon,
|
||
tone,
|
||
}: {
|
||
label: string;
|
||
value: string | number;
|
||
hint: string;
|
||
icon: typeof SquareTerminal;
|
||
tone: string;
|
||
}) {
|
||
return (
|
||
<Card className="bg-gradient-to-br from-card via-card to-background/70">
|
||
<CardContent className="flex items-start justify-between gap-4 pt-6">
|
||
<div className="min-w-0">
|
||
<div className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
|
||
{label}
|
||
</div>
|
||
<div className="mt-3 text-3xl font-semibold tracking-tight text-foreground">
|
||
{value}
|
||
</div>
|
||
<div className="mt-2 text-sm leading-6 text-muted-foreground">
|
||
{hint}
|
||
</div>
|
||
</div>
|
||
<div className={cn("rounded-2xl border p-3", tone)}>
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
const EMPTY_OVERVIEW: WorkerOverview = {
|
||
total_jobs: 0,
|
||
queued: 0,
|
||
running: 0,
|
||
succeeded: 0,
|
||
failed: 0,
|
||
cancelled: 0,
|
||
active_jobs: 0,
|
||
worker_stats: [],
|
||
catalog: [],
|
||
};
|
||
|
||
export function WorkersPage() {
|
||
const [searchParams] = useSearchParams();
|
||
const [overview, setOverview] = useState<WorkerOverview>(EMPTY_OVERVIEW);
|
||
const [jobs, setJobs] = useState<WorkerJobRecord[]>([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [loading, setLoading] = useState(true);
|
||
const [refreshing, setRefreshing] = useState(false);
|
||
const [actioning, setActioning] = useState<string | null>(null);
|
||
const [selectedJobId, setSelectedJobId] = useState<number | null>(null);
|
||
const [statusFilter, setStatusFilter] = useState(
|
||
searchParams.get("status") || "all",
|
||
);
|
||
const [kindFilter, setKindFilter] = useState(
|
||
searchParams.get("kind") || "all",
|
||
);
|
||
const [workerFilter, setWorkerFilter] = useState(
|
||
searchParams.get("worker") || "all",
|
||
);
|
||
const [search, setSearch] = useState(searchParams.get("search") || "");
|
||
|
||
const requestedJobId = useMemo(() => {
|
||
const raw = Number.parseInt(searchParams.get("job") || "", 10);
|
||
return Number.isFinite(raw) ? raw : null;
|
||
}, [searchParams]);
|
||
|
||
useEffect(() => {
|
||
setStatusFilter(searchParams.get("status") || "all");
|
||
setKindFilter(searchParams.get("kind") || "all");
|
||
setWorkerFilter(searchParams.get("worker") || "all");
|
||
setSearch(searchParams.get("search") || "");
|
||
}, [searchParams]);
|
||
|
||
const loadData = useCallback(
|
||
async (showToast = false) => {
|
||
try {
|
||
if (showToast) {
|
||
setRefreshing(true);
|
||
}
|
||
const [nextOverview, nextJobs] = await Promise.all([
|
||
adminApi.getWorkersOverview(),
|
||
adminApi.listWorkerJobs({
|
||
status: statusFilter === "all" ? undefined : statusFilter,
|
||
jobKind: kindFilter === "all" ? undefined : kindFilter,
|
||
workerName: workerFilter === "all" ? undefined : workerFilter,
|
||
search: search.trim() || undefined,
|
||
limit: 120,
|
||
}),
|
||
]);
|
||
let nextJobList = nextJobs.jobs;
|
||
if (
|
||
requestedJobId &&
|
||
!nextJobList.some((item) => item.id === requestedJobId)
|
||
) {
|
||
try {
|
||
const requestedJob = await adminApi.getWorkerJob(requestedJobId);
|
||
nextJobList = [requestedJob, ...nextJobList];
|
||
} catch {
|
||
// ignore deep-link miss and keep current list
|
||
}
|
||
}
|
||
startTransition(() => {
|
||
setOverview(nextOverview);
|
||
setJobs(nextJobList);
|
||
setTotal(nextJobs.total);
|
||
});
|
||
if (showToast) {
|
||
toast.success("Worker 面板已刷新。");
|
||
}
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError ? error.message : "无法加载 worker 面板。",
|
||
);
|
||
} finally {
|
||
setLoading(false);
|
||
setRefreshing(false);
|
||
}
|
||
},
|
||
[kindFilter, requestedJobId, search, statusFilter, workerFilter],
|
||
);
|
||
|
||
useEffect(() => {
|
||
void loadData(false);
|
||
}, [loadData]);
|
||
|
||
useEffect(() => {
|
||
const timer = window.setInterval(() => {
|
||
void loadData(false);
|
||
}, 5000);
|
||
|
||
return () => window.clearInterval(timer);
|
||
}, [loadData]);
|
||
|
||
useEffect(() => {
|
||
setSelectedJobId((current) => {
|
||
if (requestedJobId) {
|
||
return requestedJobId;
|
||
}
|
||
if (current && jobs.some((item) => item.id === current)) {
|
||
return current;
|
||
}
|
||
return jobs[0]?.id ?? null;
|
||
});
|
||
}, [jobs, requestedJobId]);
|
||
|
||
const selectedJob = useMemo(
|
||
() => jobs.find((item) => item.id === selectedJobId) ?? null,
|
||
[jobs, selectedJobId],
|
||
);
|
||
|
||
const selectedWorkerLabel = useMemo(() => {
|
||
if (workerFilter === "all") {
|
||
return null;
|
||
}
|
||
return (
|
||
overview.catalog.find((item) => item.worker_name === workerFilter)
|
||
?.label ?? workerFilter
|
||
);
|
||
}, [overview.catalog, workerFilter]);
|
||
|
||
const selectedProgressText = selectedJob
|
||
? formatWorkerProgress(selectedJob)
|
||
: null;
|
||
const selectedProgressPercent = selectedJob
|
||
? getWorkerProgressPercent(selectedJob)
|
||
: null;
|
||
|
||
const runTask = useCallback(
|
||
async (task: "weekly" | "monthly" | "retry") => {
|
||
try {
|
||
setActioning(task);
|
||
const result =
|
||
task === "retry"
|
||
? await adminApi.runRetryDeliveriesWorker(80)
|
||
: await adminApi.runDigestWorker(task);
|
||
toast.success(
|
||
`已入队：#${result.job.id} ${result.job.display_name ?? result.job.worker_name}`,
|
||
);
|
||
await loadData(false);
|
||
setSelectedJobId(result.job.id);
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError ? error.message : "任务入队失败。",
|
||
);
|
||
} finally {
|
||
setActioning(null);
|
||
}
|
||
},
|
||
[loadData],
|
||
);
|
||
|
||
const workerOptions = overview.catalog.map((item) => ({
|
||
value: item.worker_name,
|
||
label: item.label,
|
||
}));
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<Skeleton className="h-56 rounded-3xl" />
|
||
<Skeleton className="h-[820px] rounded-3xl" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
|
||
<div className="space-y-3">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="secondary">Workers / Queue</Badge>
|
||
<Badge variant="outline">每 5 秒自动刷新</Badge>
|
||
{selectedWorkerLabel ? (
|
||
<Badge variant="outline">当前聚焦 {selectedWorkerLabel}</Badge>
|
||
) : null}
|
||
</div>
|
||
|
||
<div>
|
||
<h2 className="text-3xl font-semibold tracking-tight">
|
||
异步任务控制台
|
||
</h2>
|
||
<p className="mt-2 max-w-3xl text-sm leading-7 text-muted-foreground">
|
||
统一查看队列堆积、执行进度和失败任务。把手动调度、失败排查和运行状态都收在同一页里。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-3">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => void loadData(true)}
|
||
disabled={refreshing}
|
||
>
|
||
<RefreshCcw
|
||
className={cn("h-4 w-4", refreshing && "animate-spin")}
|
||
/>
|
||
{refreshing ? "刷新中..." : "刷新"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
|
||
<SummaryCard
|
||
label="总任务"
|
||
value={overview.total_jobs}
|
||
hint={`${overview.worker_stats.length} 种 worker`}
|
||
icon={SquareTerminal}
|
||
tone={summaryIconTone("total")}
|
||
/>
|
||
<SummaryCard
|
||
label="活跃任务"
|
||
value={overview.active_jobs}
|
||
hint={`${overview.queued} queued · ${overview.running} running`}
|
||
icon={Activity}
|
||
tone={summaryIconTone("running")}
|
||
/>
|
||
<SummaryCard
|
||
label="成功 / 失败"
|
||
value={`${overview.succeeded} / ${overview.failed}`}
|
||
hint="完成情况"
|
||
icon={CheckCircle2}
|
||
tone={summaryIconTone(overview.failed > 0 ? "failed" : "succeeded")}
|
||
/>
|
||
<SummaryCard
|
||
label="人工操作"
|
||
value={`${jobs.filter((item) => item.can_retry || item.can_cancel).length}`}
|
||
hint="可取消或重跑"
|
||
icon={PlayCircle}
|
||
tone={summaryIconTone("queued")}
|
||
/>
|
||
<Card className="bg-gradient-to-br from-card via-card to-background/70">
|
||
<CardContent className="space-y-3 pt-6">
|
||
<div>
|
||
<div className="text-xs uppercase tracking-[0.22em] text-muted-foreground">
|
||
快捷操作
|
||
</div>
|
||
<div className="mt-2 text-sm leading-6 text-muted-foreground">
|
||
保留手动调度入口，但不再做成一整块独立视觉。
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
|
||
<Button
|
||
variant="secondary"
|
||
data-testid="workers-run-weekly"
|
||
disabled={actioning !== null}
|
||
onClick={() => void runTask("weekly")}
|
||
>
|
||
<Send className="h-4 w-4" />
|
||
{actioning === "weekly" ? "入队中..." : "发送周报"}
|
||
</Button>
|
||
<Button
|
||
data-testid="workers-run-monthly"
|
||
disabled={actioning !== null}
|
||
onClick={() => void runTask("monthly")}
|
||
>
|
||
<Workflow className="h-4 w-4" />
|
||
{actioning === "monthly" ? "入队中..." : "发送月报"}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
data-testid="workers-run-retry"
|
||
disabled={actioning !== null}
|
||
onClick={() => void runTask("retry")}
|
||
>
|
||
<TimerReset className="h-4 w-4" />
|
||
{actioning === "retry" ? "处理中..." : "重试待投递"}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<Card className="border-border/70">
|
||
<CardHeader className="pb-4">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<CardTitle>Worker 视图</CardTitle>
|
||
<CardDescription>
|
||
每张卡代表一个 worker，优先显示失败、排队和最近一次活动。
|
||
</CardDescription>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||
<Filter className="h-4 w-4" />
|
||
点击任意卡片即可快速锁定该 worker。
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{overview.worker_stats.length ? (
|
||
<div className="grid gap-4 lg:grid-cols-2 2xl:grid-cols-3">
|
||
{overview.worker_stats.map((item) => {
|
||
const totalJobs = Math.max(workerStatTotal(item), 1);
|
||
const isSelected = workerFilter === item.worker_name;
|
||
return (
|
||
<button
|
||
key={item.worker_name}
|
||
type="button"
|
||
className={cn(
|
||
"rounded-3xl border p-4 text-left transition",
|
||
"hover:border-primary/25 hover:bg-accent/40",
|
||
isSelected
|
||
? "border-primary/30 bg-primary/[0.05] shadow-[0_18px_45px_rgba(37,99,235,0.08)]"
|
||
: "border-border/70 bg-gradient-to-br from-card via-card to-background/70",
|
||
)}
|
||
onClick={() =>
|
||
setWorkerFilter((current) =>
|
||
current === item.worker_name ? "all" : item.worker_name,
|
||
)
|
||
}
|
||
>
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="min-w-0">
|
||
<div className="font-medium text-foreground">
|
||
{item.label}
|
||
</div>
|
||
<div className="mt-1 text-xs text-muted-foreground">
|
||
{item.worker_name}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2 text-right">
|
||
<Badge variant="outline">{item.job_kind}</Badge>
|
||
<div
|
||
className={cn(
|
||
"text-xs font-medium",
|
||
workerHealthTone(item),
|
||
)}
|
||
>
|
||
{workerHealthLabel(item)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 h-2 overflow-hidden rounded-full bg-border/70">
|
||
<div className="flex h-full">
|
||
<div
|
||
className="bg-sky-500/80"
|
||
style={{
|
||
width: `${(item.queued / totalJobs) * 100}%`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="bg-blue-500/85"
|
||
style={{
|
||
width: `${(item.running / totalJobs) * 100}%`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="bg-emerald-500/85"
|
||
style={{
|
||
width: `${(item.succeeded / totalJobs) * 100}%`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="bg-rose-500/85"
|
||
style={{
|
||
width: `${(item.failed / totalJobs) * 100}%`,
|
||
}}
|
||
/>
|
||
<div
|
||
className="bg-amber-500/85"
|
||
style={{
|
||
width: `${(item.cancelled / totalJobs) * 100}%`,
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 grid grid-cols-5 gap-2 text-center">
|
||
{[
|
||
["Q", item.queued],
|
||
["R", item.running],
|
||
["OK", item.succeeded],
|
||
["ERR", item.failed],
|
||
["X", item.cancelled],
|
||
].map(([label, value]) => (
|
||
<div
|
||
key={String(label)}
|
||
className="rounded-2xl border border-border/60 bg-background/70 px-2 py-2"
|
||
>
|
||
<div className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
|
||
{label}
|
||
</div>
|
||
<div className="mt-1 text-base font-semibold text-foreground">
|
||
{value}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-4 flex items-center justify-between gap-4 text-xs text-muted-foreground">
|
||
<span>最近活动</span>
|
||
<span>
|
||
{item.last_job_at
|
||
? formatDateTime(item.last_job_at)
|
||
: "—"}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-3xl border border-dashed border-border/70 bg-background/60 px-5 py-10 text-center text-sm text-muted-foreground">
|
||
还没有可展示的 worker 统计。
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1.45fr)_minmax(0,24rem)]">
|
||
<Card className="border-border/70">
|
||
<CardHeader className="space-y-4">
|
||
<div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<CardTitle>任务流</CardTitle>
|
||
<CardDescription>
|
||
当前筛选后共 {total} 条，列表保留最近 120 条记录。
|
||
</CardDescription>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{statusFilter !== "all" ? (
|
||
<Badge variant={statusVariant(statusFilter)}>
|
||
{statusFilter}
|
||
</Badge>
|
||
) : null}
|
||
{kindFilter !== "all" ? (
|
||
<Badge variant="outline">{kindFilter}</Badge>
|
||
) : null}
|
||
{selectedWorkerLabel ? (
|
||
<Badge variant="outline">{selectedWorkerLabel}</Badge>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-3 lg:grid-cols-[180px_180px_220px_1fr]">
|
||
<Select
|
||
value={statusFilter}
|
||
onChange={(event) => setStatusFilter(event.target.value)}
|
||
>
|
||
<option value="all">全部状态</option>
|
||
<option value="queued">queued</option>
|
||
<option value="running">running</option>
|
||
<option value="succeeded">succeeded</option>
|
||
<option value="failed">failed</option>
|
||
<option value="cancelled">cancelled</option>
|
||
</Select>
|
||
<Select
|
||
value={kindFilter}
|
||
onChange={(event) => setKindFilter(event.target.value)}
|
||
>
|
||
<option value="all">全部类型</option>
|
||
<option value="worker">worker</option>
|
||
<option value="task">task</option>
|
||
</Select>
|
||
<Select
|
||
value={workerFilter}
|
||
onChange={(event) => setWorkerFilter(event.target.value)}
|
||
>
|
||
<option value="all">全部 worker</option>
|
||
{workerOptions.map((item) => (
|
||
<option key={item.value} value={item.value}>
|
||
{item.label}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
<Input
|
||
data-testid="workers-search"
|
||
placeholder="按 worker / display / entity 搜索"
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
/>
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent>
|
||
{jobs.length ? (
|
||
<div className="space-y-3">
|
||
{jobs.map((item) => {
|
||
const progressText = formatWorkerProgress(item);
|
||
const progressPercent = getWorkerProgressPercent(item);
|
||
const isSelected = selectedJobId === item.id;
|
||
return (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
data-testid={`worker-job-row-${item.id}`}
|
||
className={cn(
|
||
"w-full rounded-3xl border p-4 text-left transition",
|
||
"hover:border-primary/25 hover:bg-accent/40",
|
||
isSelected
|
||
? "border-primary/30 bg-primary/[0.05] shadow-[0_20px_50px_rgba(37,99,235,0.08)]"
|
||
: item.status === "failed"
|
||
? "border-rose-500/15 bg-rose-500/[0.03]"
|
||
: "border-border/70 bg-gradient-to-br from-card via-card to-background/70",
|
||
)}
|
||
onClick={() => setSelectedJobId(item.id)}
|
||
>
|
||
<div className="flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="min-w-0 space-y-2">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline">#{item.id}</Badge>
|
||
<Badge variant={statusVariant(item.status)}>
|
||
{item.status}
|
||
</Badge>
|
||
<Badge variant="outline">{item.job_kind}</Badge>
|
||
{item.cancel_requested ? (
|
||
<Badge variant="warning">cancel requested</Badge>
|
||
) : null}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="break-all text-base font-semibold text-foreground [overflow-wrap:anywhere]">
|
||
{jobTitle(item)}
|
||
</div>
|
||
<div className="mt-1 break-all text-sm text-muted-foreground [overflow-wrap:anywhere]">
|
||
{item.worker_name}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid min-w-0 gap-2 text-sm text-muted-foreground lg:min-w-[18rem] lg:text-right">
|
||
<div>
|
||
入队：
|
||
{formatDateTime(item.queued_at ?? item.created_at)}
|
||
</div>
|
||
<div>
|
||
完成：
|
||
{item.finished_at
|
||
? formatDateTime(item.finished_at)
|
||
: "—"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 grid gap-3 text-sm text-muted-foreground md:grid-cols-3">
|
||
<div className="min-w-0 rounded-2xl border border-border/60 bg-background/80 px-3 py-3">
|
||
<div className="text-[11px] uppercase tracking-[0.18em]">
|
||
请求来源
|
||
</div>
|
||
<div className="mt-2 break-all text-foreground [overflow-wrap:anywhere]">
|
||
{item.requested_by ?? "system"}
|
||
<span className="text-muted-foreground">
|
||
{" · "}
|
||
{item.requested_source ?? "system"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="min-w-0 rounded-2xl border border-border/60 bg-background/80 px-3 py-3">
|
||
<div className="text-[11px] uppercase tracking-[0.18em]">
|
||
关联实体
|
||
</div>
|
||
<div className="mt-2 text-foreground break-all">
|
||
{relatedEntityText(item)}
|
||
</div>
|
||
</div>
|
||
<div className="min-w-0 rounded-2xl border border-border/60 bg-background/80 px-3 py-3">
|
||
<div className="text-[11px] uppercase tracking-[0.18em]">
|
||
尝试
|
||
</div>
|
||
<div className="mt-2 text-foreground">
|
||
{item.attempts_count} / {item.max_attempts}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{progressText ? (
|
||
<div className="mt-4 rounded-2xl border border-border/60 bg-background/80 px-3 py-3">
|
||
<div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
|
||
<span>进度</span>
|
||
{progressPercent !== null ? (
|
||
<span>{progressPercent}%</span>
|
||
) : null}
|
||
</div>
|
||
{progressPercent !== null ? (
|
||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-border/70">
|
||
<div
|
||
className="h-full rounded-full bg-primary transition-[width] duration-300"
|
||
style={{ width: `${progressPercent}%` }}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
<div className="mt-2 break-all text-sm leading-6 text-foreground [overflow-wrap:anywhere]">
|
||
{progressText}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div className="rounded-3xl border border-dashed border-border/70 bg-background/60 px-5 py-10 text-center text-sm text-muted-foreground">
|
||
当前筛选没有匹配任务。
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="min-w-0 xl:sticky xl:top-6 xl:self-start">
|
||
<Card className="overflow-hidden border-border/70">
|
||
<CardHeader className="space-y-4">
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div>
|
||
<CardTitle>任务详情</CardTitle>
|
||
<CardDescription>
|
||
选中左侧任务后，这里展示上下文、进度和原始数据。
|
||
</CardDescription>
|
||
</div>
|
||
<Clock3 className="h-5 w-5 text-muted-foreground" />
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent className="min-w-0 overflow-hidden">
|
||
{selectedJob ? (
|
||
<div className="min-w-0 space-y-4">
|
||
<div className="min-w-0 space-y-3 rounded-3xl border border-border/70 bg-background/70 p-4">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Badge variant="outline">#{selectedJob.id}</Badge>
|
||
<Badge variant={statusVariant(selectedJob.status)}>
|
||
{selectedJob.status}
|
||
</Badge>
|
||
<Badge variant="secondary">{selectedJob.job_kind}</Badge>
|
||
</div>
|
||
|
||
<div className="min-w-0 overflow-hidden">
|
||
<div className="break-all text-lg font-semibold text-foreground [overflow-wrap:anywhere]">
|
||
{jobTitle(selectedJob)}
|
||
</div>
|
||
<div className="mt-1 break-all text-sm text-muted-foreground [overflow-wrap:anywhere]">
|
||
{selectedJob.worker_name}
|
||
</div>
|
||
</div>
|
||
|
||
{selectedProgressText ? (
|
||
<div className="rounded-2xl border border-border/60 bg-background/85 px-3 py-3">
|
||
<div className="flex items-center justify-between gap-3 text-xs text-muted-foreground">
|
||
<span>执行进度</span>
|
||
{selectedProgressPercent !== null ? (
|
||
<span>{selectedProgressPercent}%</span>
|
||
) : null}
|
||
</div>
|
||
{selectedProgressPercent !== null ? (
|
||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-border/70">
|
||
<div
|
||
className="h-full rounded-full bg-primary transition-[width] duration-300"
|
||
style={{ width: `${selectedProgressPercent}%` }}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
<div className="mt-2 break-all text-sm leading-6 text-foreground [overflow-wrap:anywhere]">
|
||
{selectedProgressText}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{[
|
||
["请求人", selectedJob.requested_by ?? "system"],
|
||
["来源", selectedJob.requested_source ?? "system"],
|
||
["关联实体", relatedEntityText(selectedJob)],
|
||
[
|
||
"尝试次数",
|
||
`${selectedJob.attempts_count} / ${selectedJob.max_attempts}`,
|
||
],
|
||
[
|
||
"排队时间",
|
||
formatDateTime(
|
||
selectedJob.queued_at ?? selectedJob.created_at,
|
||
),
|
||
],
|
||
[
|
||
"开始时间",
|
||
selectedJob.started_at
|
||
? formatDateTime(selectedJob.started_at)
|
||
: "—",
|
||
],
|
||
[
|
||
"完成时间",
|
||
selectedJob.finished_at
|
||
? formatDateTime(selectedJob.finished_at)
|
||
: "—",
|
||
],
|
||
[
|
||
"上游任务",
|
||
selectedJob.parent_job_id
|
||
? `#${selectedJob.parent_job_id}`
|
||
: "—",
|
||
],
|
||
].map(([label, value]) => (
|
||
<div
|
||
key={String(label)}
|
||
className="min-w-0 rounded-2xl border border-border/70 bg-background/70 px-4 py-3"
|
||
>
|
||
<div className="text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
|
||
{label}
|
||
</div>
|
||
<div className="mt-2 break-all text-sm text-foreground [overflow-wrap:anywhere]">
|
||
{value}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<Button
|
||
variant="outline"
|
||
disabled={
|
||
!selectedJob.can_cancel ||
|
||
actioning === `cancel-${selectedJob.id}`
|
||
}
|
||
data-testid="workers-cancel-job"
|
||
onClick={async () => {
|
||
try {
|
||
setActioning(`cancel-${selectedJob.id}`);
|
||
const result = await adminApi.cancelWorkerJob(
|
||
selectedJob.id,
|
||
);
|
||
toast.success(`任务 #${result.id} 已标记取消。`);
|
||
await loadData(false);
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError
|
||
? error.message
|
||
: "取消任务失败。",
|
||
);
|
||
} finally {
|
||
setActioning(null);
|
||
}
|
||
}}
|
||
>
|
||
<StopCircle className="h-4 w-4" />
|
||
{actioning === `cancel-${selectedJob.id}`
|
||
? "取消中..."
|
||
: "取消任务"}
|
||
</Button>
|
||
<Button
|
||
disabled={
|
||
!selectedJob.can_retry ||
|
||
actioning === `retry-${selectedJob.id}`
|
||
}
|
||
data-testid="workers-retry-job"
|
||
onClick={async () => {
|
||
try {
|
||
setActioning(`retry-${selectedJob.id}`);
|
||
const result = await adminApi.retryWorkerJob(
|
||
selectedJob.id,
|
||
);
|
||
toast.success(`已重跑，新的任务 #${result.job.id}`);
|
||
await loadData(false);
|
||
setSelectedJobId(result.job.id);
|
||
} catch (error) {
|
||
toast.error(
|
||
error instanceof ApiError
|
||
? error.message
|
||
: "重跑任务失败。",
|
||
);
|
||
} finally {
|
||
setActioning(null);
|
||
}
|
||
}}
|
||
>
|
||
<RotateCcw className="h-4 w-4" />
|
||
{actioning === `retry-${selectedJob.id}`
|
||
? "重跑中..."
|
||
: "重跑任务"}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="min-w-0 rounded-3xl border border-border/70 bg-background/70 p-4">
|
||
<div className="mb-3 flex items-center gap-2 text-sm font-medium text-foreground">
|
||
<SquareTerminal className="h-4 w-4 text-muted-foreground" />
|
||
Payload
|
||
</div>
|
||
<Textarea
|
||
readOnly
|
||
value={prettyJson(selectedJob.payload)}
|
||
className="min-h-[180px] break-all font-mono text-[12px] leading-6 [overflow-wrap:anywhere]"
|
||
/>
|
||
</div>
|
||
|
||
<div className="min-w-0 rounded-3xl border border-border/70 bg-background/70 p-4">
|
||
<div className="mb-3 flex items-center gap-2 text-sm font-medium text-foreground">
|
||
<Workflow className="h-4 w-4 text-muted-foreground" />
|
||
Result
|
||
</div>
|
||
<Textarea
|
||
readOnly
|
||
value={prettyJson(selectedJob.result)}
|
||
className="min-h-[180px] break-all font-mono text-[12px] leading-6 [overflow-wrap:anywhere]"
|
||
/>
|
||
</div>
|
||
|
||
<div
|
||
className={cn(
|
||
"min-w-0 rounded-3xl border p-4",
|
||
selectedJob.error_text
|
||
? "border-rose-500/20 bg-rose-500/[0.04]"
|
||
: "border-border/70 bg-background/70",
|
||
)}
|
||
>
|
||
<div className="mb-3 flex items-center gap-2 text-sm font-medium text-foreground">
|
||
<AlertTriangle className="h-4 w-4 text-muted-foreground" />
|
||
Error
|
||
</div>
|
||
<Textarea
|
||
readOnly
|
||
value={selectedJob.error_text ?? "—"}
|
||
className="min-h-[132px] break-all font-mono text-[12px] leading-6 [overflow-wrap:anywhere]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="rounded-3xl border border-dashed border-border/70 bg-background/60 px-5 py-10 text-center text-sm text-muted-foreground">
|
||
暂无可查看的任务详情。
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|