feat: per-page extra-columns slot for list tables

Add `usePluginListColumns(pageKey)` so a registered plugin can splice
extra columns into a list page's columns hook keyed by page id. The
slot is wired into 11 list pages (Models, Model Routes, Clusters,
Cloud Credentials, MaaS Providers, Model Files, Model Instances,
GPU Service Instances / Public Keys / Storage / Storage Types) so any
consumer of the seam reaches every org-scoped list without per-page
plumbing.

The slot accepts either a static array or a hook function — the hook
form lets the registrant use React hooks to decide visibility without
the host having to evaluate it. Columns carry a `placement`:
`after-name` is the default (sits next to the row's identifying
column); `before-time` / `before-operation` are kept for back-compat
with the existing per-page `modelRoutes.extraColumns` slot.

SealTable-grid pages (Models / Model Routes / Clusters) absorb the
plugin column's span by shrinking the widest right-side columns so
the 24-unit grid stays balanced. Model Routes' `CREATE_TIME_MIN_SPAN`
drops from 3 to 2 because with two plugin columns active the grid
was 1 unit over and the action dropdown wrapped onto a new row; the
date string ellipsizes cleanly at the lower min.

ListItem types for Model Instances, MaaS Providers, Cloud Credentials,
and Model Files gain an optional `owner_principal_id` field — the
backend already emits it (denormalized from the parent resource), the
TS types just hadn't declared it.

The GPU Instances page splices the plugin column right before the
Cluster column (rather than after Name); the two read together since
Cluster narrows down to one Org.
This commit is contained in:
gitlawr
2026-06-09 16:28:59 +08:00
committed by jialin
parent 7ce1faaf6c
commit 26ce456bde
20 changed files with 349 additions and 32 deletions
+8
View File
@@ -38,6 +38,10 @@ export interface GPUDeviceItem {
worker_id: number;
worker_name: string;
worker_ip: string;
cluster_id?: number;
// Denormalized from the parent worker → cluster on the wire so
// per-row tenant filtering works without joining.
owner_principal_id?: number | null;
}
export interface Filesystem {
@@ -65,6 +69,9 @@ export interface ListItem {
state: string;
ip: string;
cluster_id: number;
// Denormalized from the parent cluster on the wire so per-row
// tenant filtering works without joining.
owner_principal_id?: number | null;
state_message: string;
ssh_key_id: string;
advertise_address: string;
@@ -116,6 +123,7 @@ export interface ModelFile {
local_path: string;
local_dir: string;
worker_id: number;
owner_principal_id?: number | null;
size: number;
download_progress: number;
resolved_paths: string[];
@@ -1,6 +1,7 @@
import { tableSorter } from '@/config/settings';
import { modelSourceMap } from '@/pages/llmodels/config';
import { modelFileActions } from '@/pages/llmodels/config/button-actions';
import { usePluginListColumns } from '@/plugins/list-extra-columns';
import { convertFileSize } from '@/utils';
import {
CheckCircleFilled,
@@ -270,8 +271,15 @@ const useFilesColumns = (props: {
}): ColumnsType<ListItem> => {
const { workersList, sortOrder, handleSelect } = props;
const intl = useIntl();
const pluginCols = usePluginListColumns('modelFiles');
return useMemo(() => {
const pluginRendered = pluginCols.map((c) => ({
title: intl.formatMessage({ id: c.titleId }),
key: c.key,
ellipsis: { showTitle: false },
render: (_text: any, record: ListItem) => c.render(record)
}));
return [
{
title: intl.formatMessage({ id: 'models.form.source' }),
@@ -294,6 +302,7 @@ const useFilesColumns = (props: {
);
}
},
...pluginRendered,
{
title: intl.formatMessage({ id: 'resources.worker' }),
dataIndex: 'worker_id',
@@ -370,7 +379,7 @@ const useFilesColumns = (props: {
)
}
];
}, [intl, workersList, handleSelect]);
}, [intl, workersList, handleSelect, pluginCols]);
};
export default useFilesColumns;
+10 -1
View File
@@ -1,4 +1,5 @@
import { tableSorter } from '@/config/settings';
import { usePluginListColumns } from '@/plugins/list-extra-columns';
import { convertFileSize } from '@/utils';
import { AutoTooltip, InfoColumn, ProgressBar } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
@@ -41,8 +42,15 @@ const useGPUColumns = (props: {
}): ColumnsType<GPUDeviceItem> => {
const { clusterList, loadend, firstLoad, sortOrder } = props;
const intl = useIntl();
const pluginCols = usePluginListColumns('gpus');
return useMemo(() => {
const pluginRendered = pluginCols.map((c) => ({
title: intl.formatMessage({ id: c.titleId }),
key: c.key,
ellipsis: { showTitle: false },
render: (_text: any, record: GPUDeviceItem) => c.render(record)
}));
return [
{
title: intl.formatMessage({ id: 'common.table.name' }),
@@ -62,6 +70,7 @@ const useGPUColumns = (props: {
sorter: tableSorter(2),
render: (text: string, record: GPUDeviceItem) => <span>{text}</span>
},
...pluginRendered,
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster_id',
@@ -141,7 +150,7 @@ const useGPUColumns = (props: {
}
}
];
}, [intl, clusterList, loadend, firstLoad]);
}, [intl, clusterList, loadend, firstLoad, pluginCols]);
};
export default useGPUColumns;
@@ -1,6 +1,7 @@
import { systemConfigAtom } from '@/atoms/system';
import { GPUStackVersionAtom } from '@/atoms/user';
import { tableSorter } from '@/config/settings';
import { usePluginListColumns } from '@/plugins/list-extra-columns';
import { convertFileSize } from '@/utils';
import {
DeleteOutlined,
@@ -249,6 +250,7 @@ const useWorkerColumns = ({
const intl = useIntl();
const systemConfig = useAtomValue(systemConfigAtom);
const [version] = useAtom(GPUStackVersionAtom);
const pluginCols = usePluginListColumns('workers');
const renderIP = (text: string, record: ListItem) => {
if (record.advertise_address === record.ip) {
@@ -383,6 +385,13 @@ const useWorkerColumns = ({
);
};
const pluginRendered = pluginCols.map((c) => ({
title: intl.formatMessage({ id: c.titleId }),
key: c.key,
ellipsis: { showTitle: false },
render: (_text: any, record: ListItem) => c.render(record)
}));
return useMemo<ColumnsType<ListItem>>(
() => [
{
@@ -405,6 +414,7 @@ const useWorkerColumns = ({
width: 200,
render: (_, record) => <LabelCell labels={record.labels} />
},
...pluginRendered,
{
title: intl.formatMessage({ id: 'clusters.title' }),
dataIndex: 'cluster_id',
@@ -532,7 +542,16 @@ const useWorkerColumns = ({
)
}
],
[intl, sortOrder, clusterData, loadend, source, firstLoad, handleSelect]
[
intl,
sortOrder,
clusterData,
loadend,
source,
firstLoad,
handleSelect,
pluginRendered
]
);
};