feat(web): status page and home regrouped around tasks, inbox and plan (FE-1)
Status page reads /system/health and history: level banner, process table, event-loop lag and SSE charts (monochrome recharts), database, engine, schedules, disks with thresholds and mount roots. Home now shows in-progress tasks, items needing attention, media overview, a plan strip with quick toggles, recent finished/failed tasks, cache and retention, source health with site account status, and a run-status summary. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
d8b9bd9662
commit
4bb2583f6c
5 files changed
+1023
-193
No files matched your search
@@ -1,7 +1,8 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { Dashboard } from "@umt/contracts";
|
||||
import { cursorPage, type Dashboard, SiteListItem } from "@umt/contracts";
|
||||
import { apiData } from "~/lib/api.ts";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { apiParsed } from "./parse.ts";
|
||||
|
||||
/** 首页聚合;SSE 事件触发 invalidate,另有 60 秒兜底轮询 */
|
||||
export function useDashboard() {
|
||||
@@ -11,3 +12,15 @@ export function useDashboard() {
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
const SitePage = cursorPage(SiteListItem);
|
||||
|
||||
/** 首页"来源健康":站点 + 整体账号状态(GET /sites?include=accounts) */
|
||||
export function useSitesWithAccounts() {
|
||||
return useQuery({
|
||||
queryKey: [...qk.dashboard, "sites-accounts"],
|
||||
queryFn: ({ signal }) =>
|
||||
apiParsed(SitePage, "/api/v1/sites", { params: { limit: 200, include: "accounts" }, signal }),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { SystemHealth, SystemHealthHistory } from "@umt/contracts";
|
||||
import { apiData } from "~/lib/api.ts";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
|
||||
// 进程与健康(W9-I):GET /system/health、/system/health/history,仅 admin。
|
||||
|
||||
export function useSystemHealth(refetchMs = 15_000) {
|
||||
return useQuery({
|
||||
queryKey: qk.sub("system", "health"),
|
||||
queryFn: ({ signal }) => apiData<SystemHealth>("/system/health", { signal }),
|
||||
refetchInterval: refetchMs,
|
||||
});
|
||||
}
|
||||
|
||||
export function useSystemHealthHistory(hours: number) {
|
||||
return useQuery({
|
||||
queryKey: qk.sub("system", "history", hours),
|
||||
queryFn: ({ signal }) => apiData<SystemHealthHistory>("/system/health/history", { params: { hours }, signal }),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import type { SystemHealthHistory } from "@umt/contracts";
|
||||
import { useMemo } from "react";
|
||||
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import { EmptyState } from "~/components/console/empty-state.tsx";
|
||||
|
||||
// 心跳采样折线:无彩(前景色),多进程靠线型 + 图例区分,不靠颜色。
|
||||
|
||||
type Metric = "lagMaxMs" | "lagMs" | "sseConnections" | "runningRuns";
|
||||
|
||||
/** 同一色,不同线型;第 5 个起循环线型但图例仍带进程名 */
|
||||
const DASH = ["", "6 3", "2 3", "10 3 2 3"];
|
||||
const OPACITY = [0.9, 0.7, 0.55, 0.45];
|
||||
|
||||
function clock(iso: string, spanHours: number) {
|
||||
const d = new Date(iso);
|
||||
return spanHours > 24
|
||||
? d.toLocaleString("zh-CN", { month: "2-digit", day: "2-digit", hour: "2-digit", hour12: false })
|
||||
: d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false });
|
||||
}
|
||||
|
||||
export function seriesLabel(s: { processKind: string; instanceId: string }) {
|
||||
const pid = s.instanceId.split(":").at(-1);
|
||||
return `${s.processKind} · ${pid}`;
|
||||
}
|
||||
|
||||
export function HistoryChart({
|
||||
data,
|
||||
metric,
|
||||
unit,
|
||||
hours,
|
||||
height = 200,
|
||||
}: {
|
||||
data: SystemHealthHistory;
|
||||
metric: Metric;
|
||||
unit: string;
|
||||
hours: number;
|
||||
height?: number;
|
||||
}) {
|
||||
const series = data.series.filter((s) => s.points.some((p) => p[metric] !== null));
|
||||
const rows = useMemo(() => {
|
||||
const m = new Map<string, Record<string, number | string | null>>();
|
||||
for (const s of series)
|
||||
for (const p of s.points) {
|
||||
const row = m.get(p.at) ?? { at: p.at };
|
||||
row[s.instanceId] = p[metric];
|
||||
m.set(p.at, row);
|
||||
}
|
||||
return [...m.values()].sort((a, b) => String(a.at).localeCompare(String(b.at)));
|
||||
}, [series, metric]);
|
||||
|
||||
if (rows.length === 0) return <EmptyState plain title="这段时间没有采样" className="py-8" />;
|
||||
|
||||
return (
|
||||
<div className="text-muted-foreground" style={{ height }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={rows} margin={{ top: 8, right: 8, bottom: 0, left: -8 }}>
|
||||
<CartesianGrid stroke="var(--color-border)" strokeDasharray="2 4" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="at"
|
||||
tickFormatter={(v: string) => clock(v, hours)}
|
||||
tick={{ fontSize: 11, fill: "var(--color-muted-foreground)" }}
|
||||
stroke="var(--color-border)"
|
||||
minTickGap={40}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, fill: "var(--color-muted-foreground)" }}
|
||||
stroke="var(--color-border)"
|
||||
width={44}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
labelFormatter={(v) => new Date(String(v)).toLocaleString("zh-CN", { hour12: false })}
|
||||
formatter={(v) => [`${Math.round(Number(v) * 10) / 10} ${unit}`]}
|
||||
contentStyle={{
|
||||
background: "var(--color-popover)",
|
||||
border: "1px solid var(--color-border)",
|
||||
borderRadius: 12,
|
||||
fontSize: 12,
|
||||
color: "var(--color-foreground)",
|
||||
}}
|
||||
cursor={{ stroke: "var(--color-muted-foreground)", strokeDasharray: "3 3" }}
|
||||
/>
|
||||
{series.length > 1 ? <Legend iconType="plainline" wrapperStyle={{ fontSize: 12 }} /> : null}
|
||||
{series.map((s, i) => (
|
||||
<Line
|
||||
key={s.instanceId}
|
||||
type="monotone"
|
||||
dataKey={s.instanceId}
|
||||
name={seriesLabel(s)}
|
||||
stroke="var(--color-foreground)"
|
||||
strokeOpacity={OPACITY[i % OPACITY.length]}
|
||||
strokeDasharray={DASH[i % DASH.length]}
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
activeDot={{ r: 4, strokeWidth: 2, stroke: "var(--color-background)" }}
|
||||
connectNulls
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,47 +4,50 @@ import {
|
||||
Activity,
|
||||
AlertTriangle,
|
||||
ArrowRight,
|
||||
CalendarClock,
|
||||
CircleCheck,
|
||||
Gauge,
|
||||
HardDrive,
|
||||
Library as LibraryIcon,
|
||||
ListTodo,
|
||||
type LucideIcon,
|
||||
Pause,
|
||||
Play,
|
||||
Radio,
|
||||
ShieldAlert,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
import { useRef } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { toast } from "sonner";
|
||||
import { useDashboard } from "~/api/dashboard.ts";
|
||||
import { useDashboard, useSitesWithAccounts } from "~/api/dashboard.ts";
|
||||
import { useDecisions } from "~/api/decisions.ts";
|
||||
import { useEngineRunsPage, useEngineStats } from "~/api/engine.ts";
|
||||
import { useUpdateSchedule } from "~/api/schedules.ts";
|
||||
import { useUpdateSettings } from "~/api/settings.ts";
|
||||
import { useSystemHealth } from "~/api/system.ts";
|
||||
import { ConfirmDialog } from "~/components/console/confirm-dialog.tsx";
|
||||
import { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { consolePath } from "~/components/console/nav.ts";
|
||||
import { consolePath, settingsPath } 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 { StatusBadge, type StatusTone } from "~/components/console/status-badge.tsx";
|
||||
import { useVolumeLabel } from "~/components/downloads/cache-volumes.tsx";
|
||||
import { countdown, RUN_STATUS } from "~/components/schedules/labels.ts";
|
||||
import { useLiveSchedules, useNow } from "~/components/schedules/schedule-board.tsx";
|
||||
import { runStatus, runTitle, workflowLabel } from "~/components/tasks/labels.ts";
|
||||
import { useLiveTasks } from "~/components/tasks/task-stream.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Switch } from "~/components/ui/switch.tsx";
|
||||
import { errorMessage } from "~/lib/api.ts";
|
||||
import {
|
||||
agentRunLabel,
|
||||
decisionKindLabel,
|
||||
downloadLabel,
|
||||
formatRelative,
|
||||
healthLabel,
|
||||
organizationActionLabel,
|
||||
organizationLabel,
|
||||
} from "~/lib/labels.ts";
|
||||
import { decisionKindLabel, formatDuration, formatRelative, healthLabel, spanSec } from "~/lib/labels.ts";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { useSse, useSseStatus } from "~/lib/sse.ts";
|
||||
import { cn, formatBytes } from "~/lib/utils.ts";
|
||||
|
||||
/** 首页关心的事件:任意一个到达就(节流)刷新聚合 */
|
||||
const DASHBOARD_EVENTS = [
|
||||
"schedule.changed",
|
||||
"task.created",
|
||||
"task.status_changed",
|
||||
"download.submitted",
|
||||
@@ -78,18 +81,22 @@ function Section({
|
||||
to,
|
||||
children,
|
||||
className,
|
||||
extra,
|
||||
}: {
|
||||
title: string;
|
||||
icon: LucideIcon;
|
||||
to?: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
/** 标题右侧的摘要(计数、状态) */
|
||||
extra?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className={cn("pg-slab flex min-w-0 flex-col rounded-xl p-5", className)}>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<h2 className="text-body font-semibold text-foreground">{title}</h2>
|
||||
{extra}
|
||||
{to ? (
|
||||
<Link
|
||||
to={to}
|
||||
@@ -204,95 +211,66 @@ function AutomationBanner({ a }: { a: Dashboard["automation"] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Overview({ a }: { a: Dashboard["automation"] }) {
|
||||
const t = a.today;
|
||||
// ─── 正在进行:任务流 top N ───
|
||||
function InProgress({ w }: { w: Dashboard["currentWork"] }) {
|
||||
const running = useEngineRunsPage({ status: "running" }, 6, 10_000);
|
||||
const stats = useEngineStats();
|
||||
const rows = running.data?.items ?? [];
|
||||
return (
|
||||
<Section title="自动化概览" icon={Sparkles} to={consolePath("subscriptions")}>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<StatTile plain label="今日新计划" value={t.plansCreated} />
|
||||
<StatTile plain label="今日提交下载" value={t.downloadsSubmitted} />
|
||||
<StatTile plain label="今日入库文件" value={t.filesImported} />
|
||||
<StatTile plain label="今日升级" value={t.upgrades} />
|
||||
</div>
|
||||
<p className="mt-3 text-meta text-muted-foreground">
|
||||
整理成功 {t.recordsSucceeded} · 失败 {t.recordsFailed} · 满足的版本目标 {a.slotCounts.satisfied} · 需关注{" "}
|
||||
{a.slotCounts.attention}
|
||||
<Section title="正在进行" icon={Activity} to="/console/tasks?tab=active">
|
||||
{running.isPending ? (
|
||||
<LoadingState rows={3} />
|
||||
) : running.isError ? (
|
||||
<ErrorState plain error={running.error} onRetry={() => running.refetch()} />
|
||||
) : rows.length === 0 ? (
|
||||
<EmptyState plain icon={CircleCheck} title="没有进行中的任务" className="py-6" />
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{rows.slice(0, 5).map((r) => (
|
||||
<Row key={r.id}>
|
||||
<Link to={`/console/tasks?run=${encodeURIComponent(r.id)}`} className="min-w-0 flex-1 hover:underline">
|
||||
<span className="block truncate">{runTitle(r)}</span>
|
||||
<span className="block truncate text-meta text-muted-foreground">{workflowLabel(r.workflowName)}</span>
|
||||
</Link>
|
||||
<span className="shrink-0 text-meta text-muted-foreground tabular-nums">
|
||||
{formatDuration(spanSec(r))}
|
||||
</span>
|
||||
</Row>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<p className="mt-auto pt-3 text-meta text-muted-foreground">
|
||||
排队 {stats.data?.byStatus.pending ?? "—"} · 下载中 {w.downloading} · 无进展 {w.stalled} · 入库中 {w.importing}
|
||||
</p>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function CurrentWork({ w }: { w: Dashboard["currentWork"] }) {
|
||||
const counts = [
|
||||
{ label: "下载中", v: w.downloading },
|
||||
{ label: "已暂停", v: w.paused },
|
||||
{ label: "无进展", v: w.stalled },
|
||||
{ label: "入库中", v: w.importing },
|
||||
];
|
||||
const idle = counts.every((c) => c.v === 0) && w.items.length === 0 && w.agentRuns.length === 0;
|
||||
// ─── 需要我处理:计数 + 前 3 条 ───
|
||||
function NeedsMe({ n }: { n: Dashboard["needsAttention"] }) {
|
||||
const list = useDecisions({});
|
||||
const top = (list.data?.pages[0]?.items ?? []).slice(0, 3);
|
||||
return (
|
||||
<Section title="当前工作" icon={Activity} to={consolePath("downloads")}>
|
||||
<div className="mb-2 flex flex-wrap gap-x-4 gap-y-1 text-meta text-muted-foreground">
|
||||
{counts.map((c) => (
|
||||
<span key={c.label}>
|
||||
{c.label} <span className="font-medium text-foreground tabular-nums">{c.v}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{idle ? (
|
||||
<EmptyState plain icon={CircleCheck} title="没有进行中的工作" className="py-6" />
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{w.items.slice(0, 5).map((it) => {
|
||||
const s = downloadLabel(it.status);
|
||||
return (
|
||||
<Row key={it.downloadTaskId}>
|
||||
<Link
|
||||
to={consolePath("downloads", it.downloadTaskId)}
|
||||
className="min-w-0 flex-1 truncate hover:underline"
|
||||
>
|
||||
{it.name}
|
||||
</Link>
|
||||
<span className="shrink-0 text-meta text-muted-foreground tabular-nums">
|
||||
{Math.round(it.progress * 100)}%
|
||||
</span>
|
||||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
{w.agentRuns.slice(0, 3).map((r) => {
|
||||
const s = agentRunLabel(r.status);
|
||||
return (
|
||||
<Row key={r.id}>
|
||||
<Link to={consolePath("agent", r.id)} className="min-w-0 flex-1 truncate hover:underline">
|
||||
Agent：{r.goal}
|
||||
</Link>
|
||||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function NeedsAttention({ n }: { n: Dashboard["needsAttention"] }) {
|
||||
return (
|
||||
<Section title="待处理" icon={AlertTriangle} to={consolePath("inbox")}>
|
||||
<Section title="需要我处理" icon={AlertTriangle} to={consolePath("inbox")}>
|
||||
{n.total === 0 ? (
|
||||
<EmptyState plain icon={CircleCheck} title="没有待处理事项" className="py-6" />
|
||||
) : (
|
||||
<>
|
||||
<p className="mb-2 text-title-sm font-semibold text-warning tabular-nums">
|
||||
{n.total}
|
||||
<span className="ml-1.5 text-caption font-normal text-muted-foreground">项待处理</span>
|
||||
<span className="ml-1.5 text-caption font-normal text-muted-foreground">
|
||||
项 · {n.byKind.map((k) => `${decisionKindLabel(k.kind)} ${k.count}`).join(" · ")}
|
||||
</span>
|
||||
</p>
|
||||
<ul className="divide-y divide-border/60">
|
||||
{n.byKind.map((k) => (
|
||||
<Row key={k.kind}>
|
||||
<span className="truncate">{decisionKindLabel(k.kind)}</span>
|
||||
<span className="text-meta text-muted-foreground tabular-nums">{k.count}</span>
|
||||
{top.map((d) => (
|
||||
<Row key={d.id}>
|
||||
<Link to={`/console/inbox?kind=${d.kind}`} className="min-w-0 flex-1 hover:underline">
|
||||
<span className="block truncate">{d.title}</span>
|
||||
<span className="block truncate text-meta text-muted-foreground">
|
||||
{decisionKindLabel(d.kind)} · {formatRelative(d.createdAt)}
|
||||
</span>
|
||||
</Link>
|
||||
</Row>
|
||||
))}
|
||||
</ul>
|
||||
@@ -302,10 +280,326 @@ function NeedsAttention({ n }: { n: Dashboard["needsAttention"] }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 媒体概览:版本目标满足率 + 今日产出(作品/季/资产计数待 /dashboard 提供) ───
|
||||
function MediaOverview({ a }: { a: Dashboard["automation"] }) {
|
||||
const c = a.slotCounts;
|
||||
const total = Object.values(c).reduce((x, y) => x + y, 0);
|
||||
const rate = total ? Math.round((c.satisfied / total) * 100) : null;
|
||||
const lib = (a as { library?: { entities?: number; seasons?: number; assets?: number } }).library;
|
||||
const num = (v: number | undefined) => (v === undefined ? "—" : v);
|
||||
return (
|
||||
<Section title="媒体概览" icon={LibraryIcon} to={consolePath("library")}>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<StatTile plain label="作品" value={num(lib?.entities)} />
|
||||
<StatTile plain label="季" value={num(lib?.seasons)} />
|
||||
<StatTile plain label="资产" value={num(lib?.assets)} />
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="flex items-baseline justify-between text-sm">
|
||||
<span>版本目标满足率</span>
|
||||
<span className="font-semibold tabular-nums">{rate === null ? "—" : `${rate}%`}</span>
|
||||
</div>
|
||||
<div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-foreground/[0.08]" aria-hidden>
|
||||
<div className="h-full rounded-full bg-foreground/60" style={{ width: `${rate ?? 0}%` }} />
|
||||
</div>
|
||||
<p className="mt-1.5 text-meta text-muted-foreground">
|
||||
满足 {c.satisfied} / {total} · 需关注 {c.attention} · 下载中 {c.downloading}
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-auto pt-3 text-meta text-muted-foreground">
|
||||
今日 新计划 {a.today.plansCreated} · 提交下载 {a.today.downloadsSubmitted} · 入库文件 {a.today.filesImported} ·
|
||||
升级 {a.today.upgrades}
|
||||
</p>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 计划带:下一次运行的 5 项 + 计数 + 快速开关 ───
|
||||
function PlanStrip() {
|
||||
const board = useLiveSchedules();
|
||||
const now = useNow(1000);
|
||||
const update = useUpdateSchedule();
|
||||
const items = board.data?.items ?? [];
|
||||
const next = items
|
||||
.filter((j) => j.available && j.enabled && j.nextRunAt)
|
||||
.sort((x, y) => (x.nextRunAt ?? "").localeCompare(y.nextRunAt ?? ""))
|
||||
.slice(0, 5);
|
||||
const s = board.data?.stats;
|
||||
return (
|
||||
<Section
|
||||
title="计划"
|
||||
icon={CalendarClock}
|
||||
to="/console/tasks?tab=plan"
|
||||
className="md:col-span-2 xl:col-span-3"
|
||||
extra={
|
||||
s ? (
|
||||
<span className="text-meta text-muted-foreground">
|
||||
启用 <span className="font-medium text-foreground tabular-nums">{s.enabled}</span> / {s.total}
|
||||
{s.failed ? (
|
||||
<>
|
||||
{" · "}
|
||||
<span className="font-medium text-destructive tabular-nums">上次失败 {s.failed}</span>
|
||||
</>
|
||||
) : null}
|
||||
{board.data && !board.data.schedulerOnline ? <span className="text-warning"> · 调度器未在线</span> : null}
|
||||
</span>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{board.isPending ? (
|
||||
<LoadingState rows={2} />
|
||||
) : board.isError ? (
|
||||
<ErrorState plain error={board.error} onRetry={() => board.refetch()} />
|
||||
) : next.length === 0 ? (
|
||||
<EmptyState plain icon={CalendarClock} title="没有待运行的定时任务" className="py-4" />
|
||||
) : (
|
||||
<ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{next.map((j) => {
|
||||
const last = j.lastStatus ? RUN_STATUS[j.lastStatus] : null;
|
||||
return (
|
||||
<li key={j.id} className="flex min-w-0 flex-col gap-1.5 rounded-xl border border-border/70 px-3 py-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
to={`/console/tasks?tab=plan&job=${encodeURIComponent(j.id)}`}
|
||||
className="min-w-0 flex-1 truncate text-sm font-medium hover:underline"
|
||||
title={j.name}
|
||||
>
|
||||
{j.name}
|
||||
</Link>
|
||||
<Switch
|
||||
checked={j.enabled}
|
||||
disabled={update.isPending}
|
||||
aria-label={`${j.enabled ? "停用" : "启用"}${j.name}`}
|
||||
onCheckedChange={(v) =>
|
||||
update.mutate(
|
||||
{ id: j.id, body: { enabled: v } },
|
||||
{
|
||||
onSuccess: () => toast.success(v ? `已启用${j.name}` : `已停用${j.name}`),
|
||||
onError: (e) => toast.error(errorMessage(e)),
|
||||
},
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<p className="flex items-center justify-between gap-2 text-meta text-muted-foreground">
|
||||
<span className="tabular-nums">
|
||||
{j.runningSince ? "运行中" : j.nextRunAt ? countdown(j.nextRunAt, now) : "—"}
|
||||
</span>
|
||||
{last ? <StatusBadge tone={last.tone}>{last.label}</StatusBadge> : null}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 最近完成 / 失败 ───
|
||||
function RecentRuns() {
|
||||
const done = useEngineRunsPage({ status: "completed" }, 6);
|
||||
const failed = useEngineRunsPage({ status: "failed" }, 6);
|
||||
const rows = [...(done.data?.items ?? []), ...(failed.data?.items ?? [])]
|
||||
.sort((x, y) => (y.finishedAt ?? y.createdAt).localeCompare(x.finishedAt ?? x.createdAt))
|
||||
.slice(0, 6);
|
||||
const loading = done.isPending || failed.isPending;
|
||||
const err = done.error ?? failed.error;
|
||||
return (
|
||||
<Section title="最近完成 / 失败" icon={ListTodo} to="/console/tasks">
|
||||
{loading ? (
|
||||
<LoadingState rows={3} />
|
||||
) : err ? (
|
||||
<ErrorState
|
||||
plain
|
||||
error={err}
|
||||
onRetry={() => {
|
||||
void done.refetch();
|
||||
void failed.refetch();
|
||||
}}
|
||||
/>
|
||||
) : rows.length === 0 ? (
|
||||
<EmptyState plain icon={ListTodo} title="还没有结束的任务" className="py-6" />
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{rows.map((r) => {
|
||||
const s = runStatus(r.status);
|
||||
return (
|
||||
<Row key={r.id}>
|
||||
<Link to={`/console/tasks?run=${encodeURIComponent(r.id)}`} className="min-w-0 flex-1 hover:underline">
|
||||
<span className="block truncate">{runTitle(r)}</span>
|
||||
<span className="block truncate text-meta text-muted-foreground">
|
||||
{workflowLabel(r.workflowName)} · {formatRelative(r.finishedAt)}
|
||||
</span>
|
||||
</Link>
|
||||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 来源健康:站点(含账号状态)+ Feed / 下载器 / 媒体服务器,有问题的排前 ───
|
||||
const ACCOUNT: Record<string, { label: string; tone: StatusTone }> = {
|
||||
unconfigured: { label: "未配置账号", tone: "neutral" },
|
||||
unknown: { label: "账号未验证", tone: "neutral" },
|
||||
active: { label: "账号正常", tone: "success" },
|
||||
invalid: { label: "账号失效", tone: "destructive" },
|
||||
expired: { label: "登录过期", tone: "warning" },
|
||||
challenge: { label: "需人工验证", tone: "warning" },
|
||||
};
|
||||
|
||||
function SourcesSection({ s }: { s: Dashboard["sources"] }) {
|
||||
const sites = useSitesWithAccounts();
|
||||
const siteRows = (sites.data?.items ?? s.sites).map((x) => {
|
||||
const acc = "accountStatus" in x && x.accountStatus ? ACCOUNT[x.accountStatus] : undefined;
|
||||
return {
|
||||
id: x.id,
|
||||
kind: "站点",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: "healthStatus" in x ? x.healthStatus : x.health,
|
||||
account: acc,
|
||||
to: `/console/sites/${x.id}`,
|
||||
};
|
||||
});
|
||||
const rows = [
|
||||
...siteRows,
|
||||
...s.feeds.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "Feed",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
account: undefined,
|
||||
to: consolePath("sources"),
|
||||
})),
|
||||
...s.downloaders.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "下载器",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
account: undefined,
|
||||
to: settingsPath("downloaders"),
|
||||
})),
|
||||
];
|
||||
const bad = (r: (typeof rows)[number]) =>
|
||||
(r.enabled && healthLabel(r.health).tone !== "success" ? 2 : 0) +
|
||||
(r.account && r.account.tone !== "success" ? 1 : 0);
|
||||
rows.sort((x, y) => bad(y) - bad(x));
|
||||
const accountIssues = siteRows.filter(
|
||||
(r) => r.account && (r.account.tone === "destructive" || r.account.tone === "warning"),
|
||||
).length;
|
||||
return (
|
||||
<Section title="来源健康" icon={Radio} to={consolePath("sites")}>
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState plain icon={Radio} title="还没有来源" description="登记站点或新建 Feed 后显示。" className="py-6" />
|
||||
) : (
|
||||
<>
|
||||
{accountIssues ? <p className="mb-1 text-meta text-warning">{accountIssues} 个站点的账号需要处理</p> : null}
|
||||
<ul className="divide-y divide-border/60">
|
||||
{rows.slice(0, 7).map((r) => {
|
||||
const h = r.enabled ? healthLabel(r.health) : healthLabel("disabled");
|
||||
return (
|
||||
<Row key={`${r.kind}-${r.id}`}>
|
||||
<Link to={r.to} className="min-w-0 flex-1 hover:underline">
|
||||
<span className="block truncate">
|
||||
<span className="mr-1.5 text-meta text-muted-foreground">{r.kind}</span>
|
||||
{r.name}
|
||||
</span>
|
||||
{r.account ? (
|
||||
<span
|
||||
className={cn(
|
||||
"block truncate text-meta",
|
||||
r.account.tone === "destructive"
|
||||
? "text-destructive"
|
||||
: r.account.tone === "warning"
|
||||
? "text-warning"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{r.account.label}
|
||||
</span>
|
||||
) : null}
|
||||
</Link>
|
||||
<StatusBadge tone={h.tone}>{h.label}</StatusBadge>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 运行状态摘要(/system/health) ───
|
||||
const LEVEL: Record<string, { label: string; tone: StatusTone }> = {
|
||||
ok: { label: "正常", tone: "success" },
|
||||
warn: { label: "需要关注", tone: "warning" },
|
||||
critical: { label: "需要处理", tone: "destructive" },
|
||||
unknown: { label: "未知", tone: "neutral" },
|
||||
};
|
||||
|
||||
function StatusSummary() {
|
||||
const h = useSystemHealth(30_000);
|
||||
const d = h.data;
|
||||
const stale = d?.processes.filter((p) => p.stale) ?? [];
|
||||
const alive = (d?.processes.length ?? 0) - stale.length;
|
||||
const mountsBad = d?.mounts.filter((m) => m.status !== "online").length ?? 0;
|
||||
const lv = LEVEL[d?.level ?? "unknown"] ?? LEVEL.unknown;
|
||||
return (
|
||||
<Section
|
||||
title="运行状态"
|
||||
icon={Gauge}
|
||||
to={consolePath("status")}
|
||||
className="md:col-span-2 xl:col-span-3"
|
||||
extra={d ? <StatusBadge tone={lv.tone}>{lv.label}</StatusBadge> : null}
|
||||
>
|
||||
{h.isPending ? (
|
||||
<LoadingState rows={1} />
|
||||
) : h.isError ? (
|
||||
<ErrorState plain error={h.error} onRetry={() => h.refetch()} />
|
||||
) : d ? (
|
||||
<div className="flex flex-wrap gap-x-6 gap-y-1.5 text-sm">
|
||||
<span>
|
||||
进程 <span className="font-medium tabular-nums">{alive}</span> 在线
|
||||
{stale.length ? (
|
||||
<span className="text-warning">
|
||||
{" "}
|
||||
· {stale.length} 个无心跳({stale.map((p) => `${p.processKind} ${p.pid}`).join("、")})
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span>
|
||||
待执行 <span className="font-medium tabular-nums">{d.engine.pending}</span>
|
||||
{d.engine.oldestPendingAgeSec ? ` · 最久 ${formatDuration(d.engine.oldestPendingAgeSec)}` : ""}
|
||||
</span>
|
||||
<span>
|
||||
24 小时失败率{" "}
|
||||
<span className="font-medium tabular-nums">
|
||||
{d.engine.failureRate24h === null ? "—" : `${(d.engine.failureRate24h * 100).toFixed(1)}%`}
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
数据库{" "}
|
||||
<span className="font-medium tabular-nums">{d.db.latencyMs === null ? "—" : `${d.db.latencyMs} 毫秒`}</span>
|
||||
</span>
|
||||
{mountsBad ? <span className="text-destructive">{mountsBad} 个挂载根不可用</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function CacheSection({ c }: { c: Dashboard["cache"] }) {
|
||||
const volumeLabel = useVolumeLabel();
|
||||
return (
|
||||
<Section title="缓存水位" icon={HardDrive} to={consolePath("downloads")}>
|
||||
<Section title="缓存与保留" icon={HardDrive} to={consolePath("downloads")}>
|
||||
{c.volumes.length === 0 ? (
|
||||
<EmptyState
|
||||
plain
|
||||
@@ -357,106 +651,12 @@ function CacheSection({ c }: { c: Dashboard["cache"] }) {
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function SourcesSection({ s }: { s: Dashboard["sources"] }) {
|
||||
const rows = [
|
||||
...s.sites.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "站点",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
at: x.lastSnapshotAt,
|
||||
err: null as string | null,
|
||||
})),
|
||||
...s.feeds.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "Feed",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
at: x.lastSuccessAt,
|
||||
err: x.lastError,
|
||||
})),
|
||||
...s.downloaders.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "下载器",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
at: x.lastSeenAt,
|
||||
err: null,
|
||||
})),
|
||||
...s.mediaServers.map((x) => ({
|
||||
id: x.id,
|
||||
kind: "媒体服务器",
|
||||
name: x.name,
|
||||
enabled: x.enabled,
|
||||
health: x.health,
|
||||
at: x.lastSeenAt,
|
||||
err: null,
|
||||
})),
|
||||
];
|
||||
return (
|
||||
<Section title="来源健康" icon={Radio} to={consolePath("sources")}>
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState plain icon={Radio} title="还没有来源" description="登记站点或新建 Feed 后显示。" className="py-6" />
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{rows.slice(0, 8).map((r) => {
|
||||
const h = r.enabled ? healthLabel(r.health) : healthLabel("disabled");
|
||||
return (
|
||||
<Row key={`${r.kind}-${r.id}`}>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate">
|
||||
<span className="mr-1.5 text-meta text-muted-foreground">{r.kind}</span>
|
||||
{r.name}
|
||||
</p>
|
||||
{r.err ? <p className="truncate text-meta text-destructive">{r.err}</p> : null}
|
||||
</div>
|
||||
<span className="hidden shrink-0 text-meta text-muted-foreground sm:inline">
|
||||
{formatRelative(r.at)}
|
||||
</span>
|
||||
<StatusBadge tone={h.tone}>{h.label}</StatusBadge>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function RecentOutput({ items }: { items: Dashboard["recentOutput"] }) {
|
||||
return (
|
||||
<Section title="最近产出" icon={ListTodo} to={consolePath("organize")}>
|
||||
{items.length === 0 ? (
|
||||
<EmptyState plain icon={ListTodo} title="还没有整理记录" className="py-6" />
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{items.slice(0, 6).map((r) => {
|
||||
const s = organizationLabel(r.status);
|
||||
return (
|
||||
<li key={r.recordId} className="min-w-0 py-2">
|
||||
<div className="flex items-center justify-between gap-3 text-sm">
|
||||
<Link to={consolePath("organize", r.recordId)} className="min-w-0 truncate hover:underline">
|
||||
{r.title ?? "未关联作品"}
|
||||
<Link
|
||||
to={settingsPath("automation", "retention")}
|
||||
className="mt-3 text-meta text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
|
||||
>
|
||||
调整阈值与保留天数
|
||||
</Link>
|
||||
<StatusBadge tone={s.tone}>{s.label}</StatusBadge>
|
||||
</div>
|
||||
<p className="truncate text-meta text-muted-foreground">
|
||||
{organizationActionLabel(r.action)} · {r.counts.succeeded}/{r.counts.total} 个文件 ·{" "}
|
||||
{formatRelative(r.finishedAt)}
|
||||
{r.targetPath ? ` · ${r.targetPath}` : ""}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -470,11 +670,12 @@ function LiveIndicator() {
|
||||
|
||||
export default function Home() {
|
||||
const q = useLiveDashboard();
|
||||
useLiveTasks();
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="首页"
|
||||
description="目标进度、今日产出、缺口和待处理事项。"
|
||||
description="正在进行的任务、需要处理的事项、计划和最近结果。"
|
||||
actions={
|
||||
<div className="flex items-center gap-2">
|
||||
<LiveIndicator />
|
||||
@@ -500,12 +701,14 @@ export default function Home() {
|
||||
<>
|
||||
<AutomationBanner a={q.data.automation} />
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Overview a={q.data.automation} />
|
||||
<CurrentWork w={q.data.currentWork} />
|
||||
<NeedsAttention n={q.data.needsAttention} />
|
||||
<InProgress w={q.data.currentWork} />
|
||||
<NeedsMe n={q.data.needsAttention} />
|
||||
<MediaOverview a={q.data.automation} />
|
||||
<PlanStrip />
|
||||
<RecentRuns />
|
||||
<CacheSection c={q.data.cache} />
|
||||
<SourcesSection s={q.data.sources} />
|
||||
<RecentOutput items={q.data.recentOutput} />
|
||||
<StatusSummary />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,488 @@
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type { HealthLevel, SystemHealth, SystemProcess } from "@umt/contracts";
|
||||
import { AlertTriangle, CircleCheck, Cpu, Database, HardDrive, ListTodo, RotateCw, Timer, XCircle } from "lucide-react";
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { useSystemHealth, useSystemHealthHistory } from "~/api/system.ts";
|
||||
import { DataTable } from "~/components/console/data-table.tsx";
|
||||
import { DetailSection } from "~/components/console/detail-sheet.tsx";
|
||||
import { ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
|
||||
import { KvList } from "~/components/console/kv-list.tsx";
|
||||
import { PageHeader } from "~/components/console/page-header.tsx";
|
||||
import { StatusBadge, type StatusTone } from "~/components/console/status-badge.tsx";
|
||||
import { HistoryChart } from "~/components/status/history-chart.tsx";
|
||||
import { Button } from "~/components/ui/button.tsx";
|
||||
import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
|
||||
import { formatDuration, formatRelative } from "~/lib/labels.ts";
|
||||
import { qk } from "~/lib/query-keys.ts";
|
||||
import { cn, formatBytes, formatDateTime } from "~/lib/utils.ts";
|
||||
|
||||
export const meta = () => [{ title: "运行状态 · UHD 媒体自动化控制台" }];
|
||||
|
||||
// 运行状态(W9-I):进程心跳、事件循环、SSE、DB、磁盘、挂载根、引擎与定时任务。阈值见 docs/runbook/ops.md。
|
||||
|
||||
const LEVEL: Record<HealthLevel, { label: string; tone: StatusTone }> = {
|
||||
ok: { label: "正常", tone: "success" },
|
||||
warn: { label: "需要关注", tone: "warning" },
|
||||
critical: { label: "需要处理", tone: "destructive" },
|
||||
unknown: { label: "取不到数据", tone: "neutral" },
|
||||
};
|
||||
|
||||
const KIND_LABEL: Record<string, string> = {
|
||||
api: "API",
|
||||
worker: "Worker(io)",
|
||||
"worker:agent": "Worker(Agent)",
|
||||
all: "单进程(all)",
|
||||
};
|
||||
|
||||
const MOUNT_REASON: Record<string, string> = {
|
||||
root_missing: "目录不存在",
|
||||
sentinel_missing: "哨兵文件缺失",
|
||||
permission_denied: "没有权限",
|
||||
error: "检查出错",
|
||||
timeout: "检查超时",
|
||||
};
|
||||
|
||||
const HOURS = [1, 6, 24, 168];
|
||||
|
||||
function Card({
|
||||
title,
|
||||
icon: Icon,
|
||||
level,
|
||||
children,
|
||||
action,
|
||||
}: {
|
||||
title: string;
|
||||
icon: typeof Cpu;
|
||||
level?: HealthLevel;
|
||||
children: ReactNode;
|
||||
action?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="pg-slab min-w-0 rounded-xl p-5">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
<h2 className="text-body font-semibold text-foreground">{title}</h2>
|
||||
{level ? <StatusBadge tone={LEVEL[level].tone}>{LEVEL[level].label}</StatusBadge> : null}
|
||||
{action ? <span className="ml-auto">{action}</span> : null}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** 顶部横幅:整体档位 + 需要看的几条 */
|
||||
function problems(d: SystemHealth): string[] {
|
||||
const out: string[] = [];
|
||||
const stale = d.processes.filter((p) => p.stale);
|
||||
if (stale.length) out.push(`${stale.length} 个进程超过 45 秒没有心跳`);
|
||||
if (!d.processes.some((p) => !p.stale && p.processKind !== "api")) out.push("没有在线的 worker,任务不会被执行");
|
||||
const lag = d.processes.filter((p) => !p.stale && p.eventLoopLagMaxMs >= 1000);
|
||||
if (lag.length) out.push(`${lag.length} 个进程事件循环延迟超过 1 秒`);
|
||||
if (d.db.level === "warn" || d.db.level === "critical") out.push("数据库延迟或连接数偏高");
|
||||
const disks = d.disks.filter((x) => x.level === "warn" || x.level === "critical");
|
||||
if (disks.length) out.push(`${disks.length} 个磁盘用量超过阈值`);
|
||||
const mounts = d.mounts.filter((m) => m.status !== "online");
|
||||
if (mounts.length) out.push(`${mounts.length} 个挂载根不可用`);
|
||||
if (d.engine.level === "warn" || d.engine.level === "critical") out.push("任务积压或失败率偏高");
|
||||
if (d.schedules.failing.length) out.push(`${d.schedules.failing.length} 个定时任务上次运行失败`);
|
||||
return out;
|
||||
}
|
||||
|
||||
function Banner({ d }: { d: SystemHealth }) {
|
||||
const lv = LEVEL[d.level];
|
||||
const list = problems(d);
|
||||
const ok = d.level === "ok";
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className={cn(
|
||||
"mb-4 flex items-start gap-3 rounded-xl border px-4 py-3",
|
||||
ok
|
||||
? "border-success/30 bg-success/10"
|
||||
: d.level === "critical"
|
||||
? "border-destructive/30 bg-destructive/10"
|
||||
: "border-warning/30 bg-warning/10",
|
||||
)}
|
||||
>
|
||||
{ok ? (
|
||||
<CircleCheck className="mt-0.5 h-4 w-4 shrink-0 text-success" />
|
||||
) : d.level === "critical" ? (
|
||||
<XCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
|
||||
) : (
|
||||
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warning" />
|
||||
)}
|
||||
<div className="min-w-0 text-caption">
|
||||
<p className="font-medium text-foreground">
|
||||
{ok ? "全部正常" : lv.label}
|
||||
<span className="ml-2 font-normal text-muted-foreground">
|
||||
检查于 {formatRelative(d.checkedAt)} · API {d.api.version},已运行 {formatDuration(d.api.uptimeSec)}
|
||||
</span>
|
||||
</p>
|
||||
{list.length ? (
|
||||
<ul className="mt-1 list-disc space-y-0.5 pl-4 text-muted-foreground">
|
||||
{list.map((x) => (
|
||||
<li key={x}>{x}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Processes({ d }: { d: SystemHealth }) {
|
||||
return (
|
||||
<DataTable<SystemProcess>
|
||||
rows={d.processes}
|
||||
rowKey={(p) => p.instanceId}
|
||||
empty={{ title: "24 小时内没有进程心跳", description: "进程启动后每 15 秒写一次心跳。" }}
|
||||
columns={[
|
||||
{
|
||||
key: "kind",
|
||||
header: "进程",
|
||||
cell: (p) => (
|
||||
<div className="min-w-0">
|
||||
<p className="flex items-center gap-2 font-medium">
|
||||
{KIND_LABEL[p.processKind] ?? p.processKind}
|
||||
{p.stale ? <StatusBadge tone="warning">无心跳</StatusBadge> : null}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground" title={p.instanceId}>
|
||||
{p.host} · pid {p.pid}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "ver",
|
||||
header: "版本",
|
||||
hideBelow: "lg",
|
||||
cell: (p) => <span className="font-mono text-meta">{p.version}</span>,
|
||||
},
|
||||
{
|
||||
key: "start",
|
||||
header: "启动",
|
||||
hideBelow: "md",
|
||||
cell: (p) => (
|
||||
<span className="whitespace-nowrap text-muted-foreground" title={formatDateTime(p.startedAt)}>
|
||||
{formatRelative(p.startedAt)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "beat",
|
||||
header: "最后心跳",
|
||||
cell: (p) => (
|
||||
<span className={cn("whitespace-nowrap tabular-nums", p.stale ? "text-warning" : "text-muted-foreground")}>
|
||||
{formatDuration(p.beatAgeSec)}前
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "lag",
|
||||
header: "延迟 / 峰值",
|
||||
align: "right",
|
||||
cell: (p) => (
|
||||
<span
|
||||
className={cn(
|
||||
"whitespace-nowrap tabular-nums",
|
||||
p.eventLoopLagMaxMs >= 5000 ? "text-destructive" : p.eventLoopLagMaxMs >= 1000 ? "text-warning" : "",
|
||||
)}
|
||||
>
|
||||
{p.eventLoopLagMs} / {p.eventLoopLagMaxMs} 毫秒
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "conc",
|
||||
header: "并发",
|
||||
hideBelow: "md",
|
||||
align: "right",
|
||||
cell: (p) =>
|
||||
p.concurrency.io === undefined && p.concurrency.agent === undefined ? (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
) : (
|
||||
<span className="whitespace-nowrap tabular-nums">
|
||||
io {p.concurrency.io ?? 0} · Agent {p.concurrency.agent ?? 0}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "running",
|
||||
header: "运行中",
|
||||
hideBelow: "sm",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{p.runningRuns ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "sse",
|
||||
header: "SSE",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (p) => <span className="tabular-nums">{p.sseConnections ?? "—"}</span>,
|
||||
},
|
||||
{
|
||||
key: "mem",
|
||||
header: "内存",
|
||||
hideBelow: "lg",
|
||||
align: "right",
|
||||
cell: (p) => {
|
||||
const rss = p.extra.rssBytes;
|
||||
return <span className="tabular-nums">{typeof rss === "number" ? formatBytes(rss, 0) : "—"}</span>;
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function History() {
|
||||
const [hours, setHours] = useState(6);
|
||||
const h = useSystemHealthHistory(hours);
|
||||
return (
|
||||
<section className="pg-slab min-w-0 rounded-xl p-5">
|
||||
<div className="mb-3 flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-body font-semibold text-foreground">趋势</h2>
|
||||
{h.data ? (
|
||||
<span className="text-meta text-muted-foreground">每点 {formatDuration(h.data.bucketSec)}</span>
|
||||
) : null}
|
||||
<Tabs value={String(hours)} onValueChange={(v) => setHours(Number(v))} className="ml-auto">
|
||||
<TabsList className="pb-0">
|
||||
{HOURS.map((n) => (
|
||||
<TabsTrigger key={n} value={String(n)} className="h-7 px-2.5 text-caption">
|
||||
{n === 168 ? "7 天" : `${n} 小时`}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
{h.isPending ? (
|
||||
<LoadingState rows={4} />
|
||||
) : h.isError ? (
|
||||
<ErrorState plain error={h.error} onRetry={() => h.refetch()} />
|
||||
) : (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<DetailSection title="事件循环延迟峰值(毫秒)">
|
||||
<HistoryChart data={h.data} metric="lagMaxMs" unit="毫秒" hours={hours} />
|
||||
</DetailSection>
|
||||
<DetailSection title="SSE 连接数">
|
||||
<HistoryChart data={h.data} metric="sseConnections" unit="个" hours={hours} />
|
||||
</DetailSection>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Disks({ d }: { d: SystemHealth }) {
|
||||
const t = d.diskThresholds;
|
||||
const scope = { data_dir: "数据目录", library_root: "库根", download_dir: "下载目录" } as const;
|
||||
return (
|
||||
<Card title="磁盘" icon={HardDrive} level={worst(d.disks.map((x) => x.level))}>
|
||||
<p className="mb-3 text-meta text-muted-foreground">
|
||||
阈值:{t.warnPercent}% 需要关注,{t.criticalPercent}% 需要处理(取自缓存设置)
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{d.disks.map((x) => {
|
||||
const pct = x.usedRatio === null ? null : x.usedRatio * 100;
|
||||
return (
|
||||
<li key={`${x.scope}-${x.id ?? x.path}`} className="min-w-0">
|
||||
<div className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="min-w-0 truncate">
|
||||
<span className="mr-1.5 text-meta text-muted-foreground">{scope[x.scope]}</span>
|
||||
{x.name}
|
||||
</span>
|
||||
<StatusBadge tone={LEVEL[x.level].tone}>
|
||||
{pct === null ? (x.error ? `不可读 ${x.error}` : "用量未知") : `${pct.toFixed(0)}%`}
|
||||
</StatusBadge>
|
||||
</div>
|
||||
<div className="relative mt-1.5 h-1.5 overflow-hidden rounded-full bg-foreground/[0.08]" aria-hidden>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full rounded-full",
|
||||
x.level === "critical" ? "bg-destructive" : x.level === "warn" ? "bg-warning" : "bg-foreground/60",
|
||||
)}
|
||||
style={{ width: `${pct ?? 0}%` }}
|
||||
/>
|
||||
<span className="absolute inset-y-0 w-px bg-warning" style={{ left: `${t.warnPercent}%` }} />
|
||||
<span className="absolute inset-y-0 w-px bg-destructive" style={{ left: `${t.criticalPercent}%` }} />
|
||||
</div>
|
||||
<p className="mt-1 truncate font-mono text-meta text-muted-foreground" title={x.path}>
|
||||
{x.path}
|
||||
{x.totalBytes !== null && x.availableBytes !== null
|
||||
? ` · 剩余 ${formatBytes(x.availableBytes, 1)} / ${formatBytes(x.totalBytes, 1)}`
|
||||
: ""}
|
||||
</p>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function worst(levels: HealthLevel[]): HealthLevel {
|
||||
if (levels.includes("critical")) return "critical";
|
||||
if (levels.includes("warn")) return "warn";
|
||||
if (levels.includes("ok")) return "ok";
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
function Mounts({ d }: { d: SystemHealth }) {
|
||||
const bad = d.mounts.filter((m) => m.status !== "online").length;
|
||||
return (
|
||||
<Card title="挂载根" icon={HardDrive} level={d.mounts.length ? (bad ? "critical" : "ok") : undefined}>
|
||||
{d.mounts.length === 0 ? (
|
||||
<p className="text-caption text-muted-foreground">没有启用的库根或下载目录映射。</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-border/60">
|
||||
{d.mounts.map((m) => (
|
||||
<li key={`${m.kind}-${m.id}`} className="flex min-w-0 items-center gap-3 py-2 text-sm">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate">
|
||||
<span className="mr-1.5 text-meta text-muted-foreground">
|
||||
{m.kind === "library_root" ? "库根" : "下载目录"}
|
||||
</span>
|
||||
{m.name}
|
||||
</p>
|
||||
<p className="truncate font-mono text-meta text-muted-foreground" title={m.path}>
|
||||
{m.path}
|
||||
{m.sentinelChecked ? "" : " · 只查目录可读"}
|
||||
</p>
|
||||
</div>
|
||||
<StatusBadge tone={m.status === "online" ? "success" : "destructive"}>
|
||||
{m.status === "online" ? "在线" : m.status === "timeout" ? "超时" : "离线"}
|
||||
{m.reason && m.status !== "timeout" ? ` · ${MOUNT_REASON[m.reason] ?? m.reason}` : ""}
|
||||
</StatusBadge>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default function StatusPage() {
|
||||
const qc = useQueryClient();
|
||||
const h = useSystemHealth();
|
||||
const d = h.data;
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="运行状态"
|
||||
description="进程心跳、数据库、磁盘与挂载根。15 秒刷新一次。"
|
||||
actions={
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => qc.invalidateQueries({ queryKey: qk.all("system") })}
|
||||
disabled={h.isFetching}
|
||||
>
|
||||
<RotateCw className={h.isFetching ? "animate-spin" : undefined} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{h.isPending ? (
|
||||
<LoadingState rows={8} />
|
||||
) : h.isError ? (
|
||||
<ErrorState title="运行状态加载失败" error={h.error} onRetry={() => h.refetch()} />
|
||||
) : d ? (
|
||||
<div className="space-y-4">
|
||||
<Banner d={d} />
|
||||
<section className="min-w-0">
|
||||
<h2 className="mb-2 flex items-center gap-2 text-body font-semibold text-foreground">
|
||||
<Cpu className="h-4 w-4 text-muted-foreground" />
|
||||
进程
|
||||
<span className="text-meta font-normal text-muted-foreground">SSE 连接合计 {d.sse.connections}</span>
|
||||
</h2>
|
||||
<Processes d={d} />
|
||||
</section>
|
||||
<History />
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<Card title="数据库" icon={Database} level={d.db.level}>
|
||||
{d.db.error ? <p className="mb-2 text-caption text-destructive">{d.db.error}</p> : null}
|
||||
<KvList
|
||||
items={[
|
||||
{ label: "延迟", value: d.db.latencyMs === null ? "—" : `${d.db.latencyMs} 毫秒` },
|
||||
{ label: "库大小", value: d.db.sizeBytes === null ? "—" : formatBytes(d.db.sizeBytes, 1) },
|
||||
{
|
||||
label: "连接",
|
||||
value: d.db.connections ? `${d.db.connections.total} / ${d.db.connections.max}` : "—",
|
||||
},
|
||||
{
|
||||
label: "活跃 / 空闲 / 事务中空闲",
|
||||
value: d.db.connections
|
||||
? `${d.db.connections.active} / ${d.db.connections.idle} / ${d.db.connections.idleInTransaction}`
|
||||
: "—",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
title="任务引擎"
|
||||
icon={ListTodo}
|
||||
level={d.engine.level}
|
||||
action={
|
||||
<Link to="/console/tasks?tab=active" className="text-meta text-muted-foreground hover:text-foreground">
|
||||
查看任务
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<KvList
|
||||
items={[
|
||||
{ label: "待执行", value: d.engine.pending },
|
||||
{ label: "执行中", value: d.engine.running },
|
||||
{ label: "最久待执行", value: formatDuration(d.engine.oldestPendingAgeSec) },
|
||||
{
|
||||
label: "24 小时失败率",
|
||||
value:
|
||||
d.engine.failureRate24h === null
|
||||
? "—"
|
||||
: `${(d.engine.failureRate24h * 100).toFixed(1)}%(${d.engine.failed24h} / ${d.engine.finished24h})`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
<Card
|
||||
title="定时任务"
|
||||
icon={Timer}
|
||||
level={d.schedules.level}
|
||||
action={
|
||||
<Link to="/console/tasks?tab=plan" className="text-meta text-muted-foreground hover:text-foreground">
|
||||
查看计划
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<KvList
|
||||
items={[
|
||||
{ label: "启用 / 全部", value: `${d.schedules.enabled} / ${d.schedules.total}` },
|
||||
{ label: "运行中", value: d.schedules.running },
|
||||
{ label: "24 小时失败运行", value: d.schedules.failedRuns24h },
|
||||
]}
|
||||
/>
|
||||
{d.schedules.failing.length ? (
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
{d.schedules.failing.map((f) => (
|
||||
<li key={f.id} className="min-w-0 text-caption">
|
||||
<Link
|
||||
to={`/console/tasks?tab=plan&job=${encodeURIComponent(f.id)}`}
|
||||
className="font-medium text-foreground hover:underline"
|
||||
>
|
||||
{f.name}
|
||||
</Link>
|
||||
<span className="ml-1.5 text-meta text-muted-foreground">{formatRelative(f.lastRunAt)}</span>
|
||||
{f.lastError ? <p className="truncate text-meta text-destructive">{f.lastError}</p> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</Card>
|
||||
<Disks d={d} />
|
||||
<Mounts d={d} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user