feat(web): IA-3 navigation, legacy redirects and top-bar inbox (FE-1)
Sidebar becomes 5 groups (overview / resources / subscriptions / organize / system). Pending items move to a top-bar inbox with badge and grouped dropdown. Engine panel, schedules and identity pages redirect to the task page, its plan tab and media overview views; the download plan becomes a second tab of the download panel. nav.test and smoke cover the new routes. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
4bb2583f6c
commit
738d4ce752
18 files changed
+647
-1104
No files matched your search
@@ -1,225 +1,8 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { EngineRun } from "@umt/contracts";
|
||||
import { Ban, CheckCircle2, Clock, Cpu, LoaderCircle, RotateCw, XCircle } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router";
|
||||
import { useEngineRuns, useEngineStats } from "~/api/engine.ts";
|
||||
import { DataTable } from "~/components/console/data-table.tsx";
|
||||
import { FilterBar, FilterSelect } from "~/components/console/filter-bar.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatTile } from "~/components/console/stat-tile.tsx";
|
||||
import { StatusBadge } from "~/components/console/status-badge.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { engineRunLabel, formatDuration, formatRelative, spanSec as runDurationSec } from "~/lib/labels.ts";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { useSse } from "~/lib/sse.ts";
|
||||
import { legacyRedirectLoader } from "./redirects.ts";
|
||||
|
||||
export const meta = () => [{ title: "引擎面板 · UHD 媒体自动化控制台" }];
|
||||
// IA-3:引擎面板并入任务页
|
||||
export const clientLoader = legacyRedirectLoader;
|
||||
|
||||
const STAT_ORDER = [
|
||||
{ status: "pending", label: "待执行", icon: Clock, tone: "neutral" },
|
||||
{ status: "running", label: "运行中", icon: LoaderCircle, tone: "neutral" },
|
||||
{ status: "completed", label: "完成", icon: CheckCircle2, tone: "success" },
|
||||
{ status: "failed", label: "失败", icon: XCircle, tone: "destructive" },
|
||||
{ status: "canceled", label: "已取消", icon: Ban, tone: "warning" },
|
||||
] as const;
|
||||
|
||||
const STATUS_OPTIONS = ["pending", "running", "completed", "failed", "canceled", "sleeping", "succeeded"].map((s) => ({
|
||||
value: s,
|
||||
label: engineRunLabel(s).label,
|
||||
}));
|
||||
|
||||
/** 持续任务事件到达时节流刷新引擎视图(引擎本身不发事件,业务任务事件足以代表它在动) */
|
||||
const ENGINE_EVENTS = [
|
||||
"task.created",
|
||||
"task.status_changed",
|
||||
"download.status_changed",
|
||||
"organization.changed",
|
||||
"agent.run_status",
|
||||
];
|
||||
|
||||
function useDebounced<T>(value: T, ms = 350): T {
|
||||
const [v, setV] = useState(value);
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setV(value), ms);
|
||||
return () => clearTimeout(t);
|
||||
}, [value, ms]);
|
||||
return v;
|
||||
}
|
||||
|
||||
export default function EnginePage() {
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
const [params, setParams] = useSearchParams();
|
||||
const status = params.get("status") ?? "";
|
||||
const [name, setName] = useState(params.get("workflow") ?? "");
|
||||
const workflowName = useDebounced(name.trim());
|
||||
|
||||
useEffect(() => {
|
||||
setParams(
|
||||
(p) => {
|
||||
if (workflowName) p.set("workflow", workflowName);
|
||||
else p.delete("workflow");
|
||||
return p;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
}, [workflowName, setParams]);
|
||||
|
||||
const setStatus = (s: string) =>
|
||||
setParams(
|
||||
(p) => {
|
||||
if (s) p.set("status", s);
|
||||
else p.delete("status");
|
||||
return p;
|
||||
},
|
||||
{ replace: true },
|
||||
);
|
||||
|
||||
const runs = useEngineRuns({ status: status || undefined, workflowName: workflowName || undefined });
|
||||
const stats = useEngineStats();
|
||||
|
||||
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
useSse(ENGINE_EVENTS, () => {
|
||||
if (timer.current) return;
|
||||
timer.current = setTimeout(() => {
|
||||
timer.current = null;
|
||||
qc.invalidateQueries({ queryKey: qk.all("engine") });
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
const rows = runs.data?.pages.flatMap((p) => p.items);
|
||||
const s = stats.data;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="引擎面板"
|
||||
description={
|
||||
<>
|
||||
排查用,只读。业务进度看
|
||||
<Link to={consolePath("tasks")} className="mx-1 underline underline-offset-4">
|
||||
业务任务
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => qc.invalidateQueries({ queryKey: qk.all("engine") })}
|
||||
disabled={runs.isFetching}
|
||||
>
|
||||
<RotateCw className={runs.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mb-3 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
|
||||
{STAT_ORDER.map((t) => (
|
||||
<StatTile
|
||||
key={t.status}
|
||||
label={t.label}
|
||||
icon={t.icon}
|
||||
tone={(s?.byStatus[t.status] ?? 0) > 0 ? t.tone : "neutral"}
|
||||
value={stats.isPending ? "…" : stats.isError ? "—" : (s?.byStatus[t.status] ?? 0)}
|
||||
active={status === t.status}
|
||||
onClick={() => setStatus(status === t.status ? "" : t.status)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mb-5 flex flex-wrap gap-x-5 gap-y-1 text-meta text-muted-foreground">
|
||||
<span>
|
||||
最老待执行：
|
||||
{s?.oldestPending ? (
|
||||
<button
|
||||
type="button"
|
||||
className="cursor-pointer text-foreground underline-offset-2 hover:underline"
|
||||
onClick={() => navigate(consolePath("engine", s.oldestPending?.id ?? ""))}
|
||||
>
|
||||
{s.oldestPending.workflowName} · 已等 {formatDuration(s.oldestPending.ageSec)}
|
||||
</button>
|
||||
) : (
|
||||
"无"
|
||||
)}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<Cpu className="h-3.5 w-3.5" />
|
||||
持有租约的 worker：
|
||||
{s && s.activeWorkers.length > 0
|
||||
? s.activeWorkers.map((w) => `${w.workerId}(${w.running})`).join("、")
|
||||
: "无"}
|
||||
<span className="text-muted-foreground/80">(快照)</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<FilterBar
|
||||
search={{ value: name, onChange: setName, placeholder: "按工作流名称筛选" }}
|
||||
onReset={
|
||||
status || name
|
||||
? () => {
|
||||
setName("");
|
||||
setStatus("");
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<FilterSelect label="状态" value={status} onChange={setStatus} options={STATUS_OPTIONS} />
|
||||
</FilterBar>
|
||||
|
||||
<DataTable<EngineRun>
|
||||
rows={rows}
|
||||
rowKey={(r) => r.id}
|
||||
loading={runs.isPending}
|
||||
error={runs.error}
|
||||
onRetry={() => runs.refetch()}
|
||||
empty={{
|
||||
title: status || workflowName ? "没有符合条件的运行" : "引擎还没有运行记录",
|
||||
description: status || workflowName ? undefined : "任务入队后出现在这里。",
|
||||
}}
|
||||
onRowClick={(r) => navigate(consolePath("engine", r.id))}
|
||||
hasMore={!!runs.hasNextPage}
|
||||
onLoadMore={() => runs.fetchNextPage()}
|
||||
loadingMore={runs.isFetchingNextPage}
|
||||
columns={[
|
||||
{
|
||||
key: "status",
|
||||
header: "状态",
|
||||
cell: (r) => {
|
||||
const l = engineRunLabel(r.status);
|
||||
return <StatusBadge tone={l.tone}>{l.label}</StatusBadge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
header: "工作流",
|
||||
cell: (r) => (
|
||||
<div className="min-w-0 max-w-[16rem] sm:max-w-none">
|
||||
<p className="truncate font-medium">
|
||||
{r.workflowName}
|
||||
{r.version ? <span className="ml-1.5 text-meta text-muted-foreground">{r.version}</span> : null}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground">{r.id}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: "attempts", header: "尝试", hideBelow: "md", align: "right", cell: (r) => r.attempts },
|
||||
{
|
||||
key: "dur",
|
||||
header: "耗时",
|
||||
hideBelow: "sm",
|
||||
cell: (r) => <span className="tabular-nums">{formatDuration(runDurationSec(r))}</span>,
|
||||
},
|
||||
{
|
||||
key: "created",
|
||||
header: "创建",
|
||||
hideBelow: "md",
|
||||
cell: (r) => <span className="whitespace-nowrap text-muted-foreground">{formatRelative(r.createdAt)}</span>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
export default function LegacyRedirect() {
|
||||
return null;
|
||||
}
|
||||
Reference in new issue
Block a user