feat(usage): plugin slot for Models tab extra columns

Lets enterprise plugins contribute per-route columns and a global
mount point on the Usage page's Models tab. Mirrors the existing
modelRoutes pattern: `usage.modelsExtraColumns` for cells,
`<PluginExtraFields name="UsageModelsPageGlobal" />` for the
page-level data lifecycle (receives the visible route ids so a
plugin can bulk-fetch per-row data in one call).
This commit is contained in:
Yuxing Deng
2026-05-25 10:42:59 +08:00
parent dc69e51042
commit 4b14fa6ca8
3 changed files with 65 additions and 6 deletions
+37 -4
View File
@@ -1,18 +1,50 @@
// columns.ts
import { getGPUStackPlugin } from '@/plugins';
import { AutoTooltip } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Tag } from 'antd';
import { useMemo } from 'react';
import { BreakdownItem as ListItem } from '../config/types';
const useModelsColumns = (): Array<{
title: string;
dataIndex: string | string[];
// Plugin slot: enterprise plugins can contribute extra columns to the
// usage breakdown Models table via `usage.modelsExtraColumns`. Each
// entry renders a per-row cell keyed off `record.route.identity.current
// .route_id`. `placement` decides where in the existing column order
// the column lands (currently only `before-last-active` is supported,
// which is the natural spot for per-route quota / usage indicators).
export type UsageModelsPluginColumn = {
key: string;
}> => {
titleId: string;
placement?: 'before-last-active';
render: (record: ListItem) => React.ReactNode;
};
type ColumnDef = {
title: React.ReactNode;
dataIndex?: string | string[];
key: string;
sorter?: boolean;
ellipsis?: { showTitle: boolean };
render?: (text: any, record: ListItem) => React.ReactNode;
};
const useModelsColumns = (): ColumnDef[] => {
const intl = useIntl();
return useMemo(() => {
const pluginColumns: UsageModelsPluginColumn[] =
getGPUStackPlugin()?.usage?.modelsExtraColumns ?? [];
const pluginCols: ColumnDef[] = pluginColumns.map((c) => ({
title: intl.formatMessage({ id: c.titleId }),
key: c.key,
render: (_text: any, record: ListItem) => c.render(record)
}));
const beforeLastActive = pluginCols.filter(
(_c, i) =>
(pluginColumns[i].placement ?? 'before-last-active') ===
'before-last-active'
);
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
@@ -95,6 +127,7 @@ const useModelsColumns = (): Array<{
},
render: (text: number) => <AutoTooltip ghost>{text}</AutoTooltip>
},
...beforeLastActive,
{
title: intl.formatMessage({ id: 'usage.table.lastActive' }),
dataIndex: 'last_active',