513 lines
16 KiB
TypeScript
513 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { AlertCircle,CheckCircle2, Download, Loader2 } from "lucide-react";
|
||
import { useMemo, useState } from "react";
|
||
import { toast } from "sonner";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { ToolMetricsPanel } from "@/components/workspace/admin/tool-metrics-panel";
|
||
import {
|
||
downloadLlmMetricsExcel,
|
||
type LlmMetricsFilters,
|
||
} from "@/core/llm-metrics/api";
|
||
import { useLlmMetrics } from "@/core/llm-metrics/hooks";
|
||
import { cn } from "@/lib/utils";
|
||
import { useTheme } from "@/contexts/ThemeContext";
|
||
|
||
const PAGE_SIZE = 50;
|
||
|
||
type StatusFilter = "all" | "success" | "error";
|
||
|
||
function displayUser(row: { user_name?: string | null; user_id?: string | null }): string {
|
||
// Prefer the resolved email's local part (sent by the backend). Fall back to
|
||
// the raw UUID only when no account record exists for the recorded user_id —
|
||
// showing a UUID is uglier but preserves the link to who triggered the call.
|
||
if (row.user_name && row.user_name.trim()) return row.user_name.trim();
|
||
const id = (row.user_id ?? "").trim();
|
||
return id || "—";
|
||
}
|
||
|
||
function formatDate(value?: string | null): string {
|
||
if (!value) return "—";
|
||
try {
|
||
return new Date(value).toLocaleString();
|
||
} catch {
|
||
return value;
|
||
}
|
||
}
|
||
|
||
function formatNumber(value?: number | null, fractionDigits = 0): string {
|
||
if (value === null || value === undefined || Number.isNaN(value)) return "—";
|
||
return value.toLocaleString(undefined, {
|
||
minimumFractionDigits: fractionDigits,
|
||
maximumFractionDigits: fractionDigits,
|
||
});
|
||
}
|
||
|
||
function formatDuration(value?: number | null): string {
|
||
if (value === null || value === undefined || Number.isNaN(value)) return "—";
|
||
if (value === 0) return "0 ms";
|
||
if (value < 1000) return `${value} ms`;
|
||
if (value < 60_000) return `${(value / 1000).toFixed(1)} s`;
|
||
const minutes = Math.floor(value / 60_000);
|
||
const seconds = Math.round((value % 60_000) / 1000);
|
||
return `${minutes}m ${seconds}s`;
|
||
}
|
||
|
||
function speedColor(tps?: number | null): string {
|
||
if (tps == null) return "#9ca3af";
|
||
if (tps >= 50) return "#16a34a";
|
||
if (tps >= 30) return "#65a30d";
|
||
if (tps >= 15) return "#eab308";
|
||
if (tps >= 5) return "#f97316";
|
||
return "#ef4444";
|
||
}
|
||
|
||
/** The original LLM-call metrics view, now one tab of the metrics page. */
|
||
function LlmMetricsPanel() {
|
||
const { theme } = useTheme();
|
||
const [page, setPage] = useState(0);
|
||
const [model, setModel] = useState("");
|
||
const [user, setUser] = useState("");
|
||
const [status, setStatus] = useState<StatusFilter>("all");
|
||
const [since, setSince] = useState("");
|
||
const [until, setUntil] = useState("");
|
||
const [exporting, setExporting] = useState(false);
|
||
/** 成功 toast：仅暗色模式，浅色走 Sonner 默认 */
|
||
const successToastDarkOptions = {
|
||
classNames: {
|
||
toast:
|
||
"!rounded-[2px] !border !border-[#106455] !bg-[#052934] !text-[#FFFFFF] shadow-md",
|
||
title: "!text-[#FFFFFF]",
|
||
description: "!text-[#FFFFFF]",
|
||
},
|
||
icon: <CheckCircle2 className="size-4 shrink-0 text-[#2FD69A]" />,
|
||
} as const;
|
||
|
||
/** 失败 toast：仅暗色模式，浅色走 Sonner 默认 */
|
||
const errorToastDarkOptions = {
|
||
classNames: {
|
||
toast:
|
||
"!rounded-[2px] !border !border-[#7F1A2A] !bg-[#311629] !text-[#FFFFFF] shadow-md",
|
||
title: "!text-[#FFFFFF]",
|
||
description: "!text-[#FFFFFF]",
|
||
},
|
||
icon: <AlertCircle className="size-4 shrink-0 text-[#F5222D]" />,
|
||
} as const;
|
||
const darkToastOpts =
|
||
theme === "dark"
|
||
? { success: successToastDarkOptions, error: errorToastDarkOptions }
|
||
: { success: undefined, error: undefined };
|
||
|
||
const filters = useMemo<LlmMetricsFilters>(() => {
|
||
const out: LlmMetricsFilters = {};
|
||
if (model.trim()) out.model_name = model.trim();
|
||
if (user.trim()) out.user_name = user.trim();
|
||
if (status !== "all") out.status = status;
|
||
if (since) out.since = new Date(since).toISOString();
|
||
if (until) out.until = new Date(until).toISOString();
|
||
return out;
|
||
}, [model, user, status, since, until]);
|
||
|
||
const query = useMemo(
|
||
() => ({ ...filters, limit: PAGE_SIZE, offset: page * PAGE_SIZE }),
|
||
[filters, page],
|
||
);
|
||
|
||
const { data, isLoading, error, isFetching } = useLlmMetrics(query);
|
||
|
||
const handleExport = async () => {
|
||
setExporting(true);
|
||
try {
|
||
await downloadLlmMetricsExcel(filters);
|
||
toast.success("已导出为 Excel",darkToastOpts.success);
|
||
} catch (e) {
|
||
toast.error(e instanceof Error ? e.message : "导出失败",darkToastOpts.error);
|
||
} finally {
|
||
setExporting(false);
|
||
}
|
||
};
|
||
|
||
const resetFilters = () => {
|
||
setModel("");
|
||
setUser("");
|
||
setStatus("all");
|
||
setSince("");
|
||
setUntil("");
|
||
setPage(0);
|
||
};
|
||
|
||
const items = data?.items ?? [];
|
||
const total = data?.total ?? 0;
|
||
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||
|
||
// Hide columns that are empty for every visible row. Keeps the table dense
|
||
// when older records lack a tokens breakdown — better to drop the column
|
||
// than fill the page with placeholder dashes.
|
||
const visibleColumns = useMemo(() => {
|
||
type Col = {
|
||
id: string;
|
||
header: string;
|
||
align?: "left" | "right";
|
||
alwaysShow?: boolean;
|
||
hasValue: (row: typeof items[number]) => boolean;
|
||
render: (row: typeof items[number]) => React.ReactNode;
|
||
title?: (row: typeof items[number]) => string | undefined;
|
||
className?: string;
|
||
};
|
||
const columns: Col[] = [
|
||
{
|
||
id: "time",
|
||
header: "时间",
|
||
alwaysShow: true,
|
||
hasValue: () => true,
|
||
render: (row) => formatDate(row.created_at),
|
||
},
|
||
{
|
||
id: "user",
|
||
header: "用户",
|
||
alwaysShow: true,
|
||
hasValue: () => true,
|
||
render: (row) => displayUser(row),
|
||
title: (row) => row.user_id ?? undefined,
|
||
},
|
||
{
|
||
id: "model",
|
||
header: "模型",
|
||
alwaysShow: true,
|
||
hasValue: () => true,
|
||
render: (row) => row.model_name ?? "—",
|
||
},
|
||
{
|
||
id: "agent",
|
||
header: "Agent",
|
||
hasValue: (row) => Boolean(row.agent_name),
|
||
render: (row) => row.agent_name ?? "—",
|
||
},
|
||
{
|
||
id: "input",
|
||
header: "输入",
|
||
align: "right",
|
||
hasValue: (row) => row.input_tokens != null && row.input_tokens > 0,
|
||
render: (row) => formatNumber(row.input_tokens),
|
||
className: "tabular-nums",
|
||
},
|
||
{
|
||
id: "output",
|
||
header: "输出",
|
||
align: "right",
|
||
hasValue: (row) => row.output_tokens != null && row.output_tokens > 0,
|
||
render: (row) => formatNumber(row.output_tokens),
|
||
className: "tabular-nums",
|
||
},
|
||
{
|
||
id: "total",
|
||
header: "总 Token",
|
||
align: "right",
|
||
hasValue: (row) => row.total_tokens != null && row.total_tokens > 0,
|
||
render: (row) => formatNumber(row.total_tokens),
|
||
className: "tabular-nums",
|
||
},
|
||
{
|
||
id: "duration",
|
||
header: "耗时",
|
||
align: "right",
|
||
alwaysShow: true,
|
||
hasValue: (row) => row.duration_ms != null && row.duration_ms > 0,
|
||
render: (row) => formatDuration(row.duration_ms),
|
||
title: (row) => `${row.duration_ms} ms`,
|
||
className: "tabular-nums",
|
||
},
|
||
{
|
||
id: "tokens_per_sec",
|
||
header: "tok/s",
|
||
align: "right",
|
||
hasValue: (row) => row.tokens_per_sec != null && row.tokens_per_sec > 0,
|
||
render: (row) =>
|
||
row.tokens_per_sec != null ? (
|
||
<span
|
||
className="font-mono tabular-nums"
|
||
style={{ color: speedColor(row.tokens_per_sec) }}
|
||
>
|
||
{row.tokens_per_sec.toFixed(1)}
|
||
</span>
|
||
) : (
|
||
"—"
|
||
),
|
||
},
|
||
{
|
||
id: "status",
|
||
header: "状态",
|
||
alwaysShow: true,
|
||
hasValue: () => true,
|
||
render: (row) => (
|
||
<Badge
|
||
variant={row.status === "success" ? "default" : "destructive"}
|
||
>
|
||
{row.status === "success" ? "成功" : "失败"}
|
||
</Badge>
|
||
),
|
||
},
|
||
{
|
||
id: "error",
|
||
header: "错误",
|
||
hasValue: (row) => Boolean(row.error_type || row.error_message),
|
||
render: (row) => row.error_type ?? row.error_message ?? "—",
|
||
title: (row) => row.error_message ?? undefined,
|
||
className: "text-muted-foreground max-w-[260px] truncate",
|
||
},
|
||
];
|
||
return columns.filter(
|
||
(col) => col.alwaysShow || items.some((row) => col.hasValue(row)),
|
||
);
|
||
}, [items]);
|
||
|
||
const colSpan = visibleColumns.length || 1;
|
||
|
||
return (
|
||
<div className="flex flex-col gap-4">
|
||
<div className="flex flex-wrap items-end justify-between gap-3">
|
||
<div>
|
||
<h2 className="text-lg font-semibold">大模型调用统计</h2>
|
||
<p className="text-muted-foreground mt-1 text-sm">
|
||
记录每一次大模型的实际调用，包括 token 数、耗时、估算速度和失败原因。
|
||
后台无条件记录，与前端速度指示器开关无关。
|
||
</p>
|
||
</div>
|
||
<Button onClick={handleExport} disabled={exporting}>
|
||
{exporting ? (
|
||
<Loader2 className="mr-1 size-4 animate-spin" />
|
||
) : (
|
||
<Download className="mr-1 size-4" />
|
||
)}
|
||
导出 Excel
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-5 dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white">
|
||
<div className="flex flex-col gap-1 ">
|
||
<label className="text-muted-foreground text-xs dark:text-white">模型</label>
|
||
<Input
|
||
value={model}
|
||
placeholder="按模型名筛选"
|
||
onChange={(e) => {
|
||
setModel(e.target.value);
|
||
setPage(0);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<label className="text-muted-foreground text-xs dark:text-white">用户名</label>
|
||
<Input
|
||
value={user}
|
||
placeholder="按用户名模糊搜索（@ 前部分）"
|
||
onChange={(e) => {
|
||
setUser(e.target.value);
|
||
setPage(0);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<label className="text-muted-foreground text-xs dark:text-white">状态</label>
|
||
<Select
|
||
value={status}
|
||
onValueChange={(value) => {
|
||
setStatus(value as StatusFilter);
|
||
setPage(0);
|
||
}}
|
||
>
|
||
<SelectTrigger className="w-full dark:bg-[#0D2D54] dark:hover:bg-[#0D2D54]">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent position="popper" side="bottom" sideOffset={4}>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
<SelectItem value="success">成功</SelectItem>
|
||
<SelectItem value="error">失败</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<label className="text-muted-foreground text-xs dark:text-white">开始时间</label>
|
||
<Input
|
||
type="datetime-local"
|
||
value={since}
|
||
onChange={(e) => {
|
||
setSince(e.target.value);
|
||
setPage(0);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="flex flex-col gap-1">
|
||
<label className="text-muted-foreground text-xs dark:text-white">结束时间</label>
|
||
<Input
|
||
type="datetime-local"
|
||
value={until}
|
||
onChange={(e) => {
|
||
setUntil(e.target.value);
|
||
setPage(0);
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="md:col-span-5 flex justify-end">
|
||
<Button variant="outline" size="sm" onClick={resetFilters}>
|
||
清空筛选
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-xl border bg-white dark:border-[#213D5E] dark:bg-[#02244C] ">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full min-w-[1080px] text-sm">
|
||
<thead className="bg-muted/60 text-muted-foreground dark:text-white">
|
||
<tr>
|
||
{visibleColumns.map((col) => (
|
||
<Th
|
||
key={col.id}
|
||
className={col.align === "right" ? "text-right" : undefined}
|
||
>
|
||
{col.header}
|
||
</Th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{isLoading && (
|
||
<tr>
|
||
<td colSpan={colSpan} className="py-10 text-center">
|
||
<Loader2 className="text-muted-foreground inline size-5 animate-spin" />
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{!isLoading && error && (
|
||
<tr>
|
||
<td colSpan={colSpan} className="text-destructive py-10 text-center text-sm">
|
||
加载失败：{error.message}
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{!isLoading && !error && items.length === 0 && (
|
||
<tr>
|
||
<td colSpan={colSpan} className="text-muted-foreground py-10 text-center text-sm">
|
||
暂无符合条件的调用记录。
|
||
</td>
|
||
</tr>
|
||
)}
|
||
{items.map((row) => (
|
||
<tr key={row.id} className="border-t">
|
||
{visibleColumns.map((col) => (
|
||
<Td
|
||
key={col.id}
|
||
className={cn(
|
||
col.align === "right" && "text-right",
|
||
col.className,
|
||
)}
|
||
title={col.title?.(row)}
|
||
>
|
||
{col.render(row)}
|
||
</Td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="flex items-center justify-between border-t px-4 py-2 text-xs">
|
||
<span className="text-muted-foreground">
|
||
{isFetching && !isLoading ? "更新中..." : `共 ${total} 条`}
|
||
</span>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={page <= 0 || isLoading}
|
||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||
>
|
||
上一页
|
||
</Button>
|
||
<span className="text-muted-foreground">
|
||
第 {page + 1} / {totalPages} 页
|
||
</span>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
disabled={page + 1 >= totalPages || isLoading}
|
||
onClick={() => setPage((p) => p + 1)}
|
||
>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Th({
|
||
children,
|
||
className,
|
||
}: {
|
||
children: React.ReactNode;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<th
|
||
className={`px-3 py-2 text-left text-xs font-medium ${className ?? ""}`}
|
||
>
|
||
{children}
|
||
</th>
|
||
);
|
||
}
|
||
|
||
function Td({
|
||
children,
|
||
className,
|
||
title,
|
||
}: {
|
||
children: React.ReactNode;
|
||
className?: string;
|
||
title?: string;
|
||
}) {
|
||
return (
|
||
<td
|
||
className={`px-3 py-2 align-top text-sm ${className ?? ""}`}
|
||
title={title}
|
||
>
|
||
{children}
|
||
</td>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Admin metrics page. Two tabs: LLM provider calls and tool / skill calls —
|
||
* the latter surfaces retrieval/IP-block/rate-limit failures.
|
||
*/
|
||
export default function LlmMetricsPage() {
|
||
const [tab, setTab] = useState<"llm" | "tool">("llm");
|
||
return (
|
||
<div className="flex size-full min-h-0 w-full">
|
||
<ScrollArea className="min-h-0 flex-1">
|
||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-8">
|
||
<Tabs value={tab} onValueChange={(v) => setTab(v as "llm" | "tool")}>
|
||
<TabsList>
|
||
<TabsTrigger value="llm">大模型调用</TabsTrigger>
|
||
<TabsTrigger value="tool">工具调用</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
{tab === "llm" ? <LlmMetricsPanel /> : <ToolMetricsPanel />}
|
||
</div>
|
||
</ScrollArea>
|
||
</div>
|
||
);
|
||
}
|