feat: generic configActions plugin slot for api-keys & model-routes
Introduce `pages/api-keys/plugin.tsx` and `pages/model-routes/plugin.tsx`
defining a unified `{ key, labelId, icon, priority, danger, form,
useCreate }` contract that plugins use to contribute per-row
"configure this record" actions. The host renders one dropdown entry
per registered action and mounts each entry's form, ordered by a
single numeric priority (built-ins are ranked on the same scale; rows
flagged `danger` sink to the bottom).
Drops the older `apiKeys.rowActions` / `modelRoutes.rowActions` slots
and the implicit drawer half of
`<PluginExtraFields name="APIKeysPageGlobal" />`. The model-routes
mount point stays for the page-level quota-defaults bulk-fetch and now
also accepts a `refreshToken` so per-row saves can invalidate derived
page data without changing the row set.
This commit is contained in:
Yuxing Deng
@@ -1,32 +1,185 @@
|
||||
// columns.ts
|
||||
import { tableSorter } from '@/config/settings';
|
||||
import ModelTag from '@/pages/_components/model-tag';
|
||||
import { getGPUStackPlugin } from '@/plugins';
|
||||
import {
|
||||
AutoTooltip,
|
||||
DropdownButtons,
|
||||
icons,
|
||||
type TableColumnProps
|
||||
} from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { MenuProps } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
import { useMemo } from 'react';
|
||||
import { rowActionList } from '../config';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { RouteItem } from '../config/types';
|
||||
const useAccessColumns = (
|
||||
handleSelect: (val: string, record: RouteItem) => void,
|
||||
onCellClick?: (record: RouteItem, dataIndex: string) => void
|
||||
): TableColumnProps[] => {
|
||||
const intl = useIntl();
|
||||
import type { ModelRouteConfigAction } from '../plugin';
|
||||
|
||||
const filterActions = (record: RouteItem) => {
|
||||
return rowActionList.filter((action) => {
|
||||
if (action.key === 'chat' || action.key === 'api') {
|
||||
return record.ready_targets > 0;
|
||||
// Plugin slot: enterprise plugins can contribute extra columns to the
|
||||
// route-list table via `modelRoutes.extraColumns`. `placement` decides
|
||||
// where in the existing column order they land; `span` is the column
|
||||
// width in the SealTable grid. The host adjusts the built-in spans to
|
||||
// make room when plugin columns are present.
|
||||
type PluginColumn = {
|
||||
key: string;
|
||||
titleId: string;
|
||||
span?: number;
|
||||
placement?: 'before-time' | 'before-operation';
|
||||
render: (record: RouteItem) => React.ReactNode;
|
||||
};
|
||||
|
||||
// Local ranked-action shape used for the unified priority sort. Mirrors
|
||||
// the api-keys page approach: every entry — built-in or plugin —
|
||||
// participates in the same numeric ordering.
|
||||
type RankedAction = {
|
||||
label: string;
|
||||
key: string;
|
||||
icon?: React.ReactNode;
|
||||
props?: { danger?: boolean };
|
||||
priority: number;
|
||||
show?: (route: RouteItem) => boolean;
|
||||
onClick?: (record: RouteItem) => void;
|
||||
};
|
||||
|
||||
interface ColumnsHookProps {
|
||||
handleSelect: (val: string, record: RouteItem) => void;
|
||||
configActions?: ModelRouteConfigAction[];
|
||||
// Dispatches a click for a plugin-contributed dropdown entry to the
|
||||
// controller `useCreate()` returned for that entry.
|
||||
onConfigAction?: (actionKey: string, record: RouteItem) => void;
|
||||
}
|
||||
|
||||
// SealTable's grid is 24 units. With the built-in `targets` column
|
||||
// contributing slack (preferred 10, min 4), there's room for plugin
|
||||
// columns up to a combined span of 6 before we have to take from
|
||||
// other built-ins. Layout above this threshold is preserved by also
|
||||
// shrinking `createTime` (min 3); `name` and `operation` stay fixed
|
||||
// so the action dropdown alignment isn't disturbed. Plugins whose
|
||||
// combined span would exceed what these reductions can absorb fall
|
||||
// back to their declared widths and may visibly wrap — that's a
|
||||
// plugin-author concern, not a host one.
|
||||
const TARGETS_PREFERRED_SPAN = 10;
|
||||
const TARGETS_MIN_SPAN = 4;
|
||||
const CREATE_TIME_PREFERRED_SPAN = 5;
|
||||
const CREATE_TIME_MIN_SPAN = 3;
|
||||
|
||||
const useAccessColumns = ({
|
||||
handleSelect,
|
||||
configActions = [],
|
||||
onConfigAction
|
||||
}: ColumnsHookProps): TableColumnProps[] => {
|
||||
const intl = useIntl();
|
||||
const pluginColumns: PluginColumn[] =
|
||||
getGPUStackPlugin()?.modelRoutes?.extraColumns ?? [];
|
||||
|
||||
// Sort-order is row-independent: priority and danger are fixed at
|
||||
// registration time. Compute the sorted list once and only do the
|
||||
// `show` filter per row.
|
||||
const sortedActions = useMemo<RankedAction[]>(() => {
|
||||
const builtIns: RankedAction[] = [
|
||||
{
|
||||
label: 'common.button.edit',
|
||||
key: 'edit',
|
||||
icon: icons.EditOutlined,
|
||||
priority: 0
|
||||
},
|
||||
{
|
||||
label: 'models.openinplayground',
|
||||
key: 'chat',
|
||||
icon: icons.ExperimentOutlined,
|
||||
priority: 10,
|
||||
show: (r) => r.ready_targets > 0
|
||||
},
|
||||
{
|
||||
label: 'models.table.button.apiAccessInfo',
|
||||
key: 'api',
|
||||
icon: icons.ApiOutlined,
|
||||
priority: 20,
|
||||
show: (r) => r.ready_targets > 0
|
||||
},
|
||||
{
|
||||
label: 'models.button.accessSettings',
|
||||
key: 'accessControl',
|
||||
icon: icons.Permission,
|
||||
priority: 30
|
||||
},
|
||||
{
|
||||
label: 'common.button.delete',
|
||||
key: 'delete',
|
||||
icon: icons.DeleteOutlined,
|
||||
props: { danger: true },
|
||||
priority: 9999
|
||||
}
|
||||
return true;
|
||||
];
|
||||
const fromPlugins: RankedAction[] = configActions.map((a) => ({
|
||||
label: a.labelId,
|
||||
key: a.key,
|
||||
icon: a.icon,
|
||||
priority: a.priority ?? 100,
|
||||
props: a.danger ? { danger: true } : undefined,
|
||||
show: a.show,
|
||||
onClick: (record: RouteItem) => onConfigAction?.(a.key, record)
|
||||
}));
|
||||
return [...builtIns, ...fromPlugins].sort((a, b) => {
|
||||
const aDanger = a.props?.danger ? 1 : 0;
|
||||
const bDanger = b.props?.danger ? 1 : 0;
|
||||
if (aDanger !== bDanger) return aDanger - bDanger;
|
||||
return a.priority - b.priority;
|
||||
});
|
||||
};
|
||||
}, [configActions, onConfigAction]);
|
||||
|
||||
const filterActions = useCallback(
|
||||
(record: RouteItem) =>
|
||||
sortedActions.filter((a) => (a.show ? a.show(record) : true)),
|
||||
[sortedActions]
|
||||
);
|
||||
|
||||
// Plugin entries carry their own `onClick` (wired to `onConfigAction`
|
||||
// during action construction above), so the dispatcher just runs it
|
||||
// when present. Built-ins fall through to the page's `handleSelect`
|
||||
// dispatcher keyed by `val`. Mirrors the api-keys page's onSelect
|
||||
// path — no key lookup needed.
|
||||
const onSelectAction = useCallback(
|
||||
(val: string, record: RouteItem, item?: RankedAction) => {
|
||||
if (item?.onClick) {
|
||||
item.onClick(record);
|
||||
return;
|
||||
}
|
||||
handleSelect(val, record);
|
||||
},
|
||||
[handleSelect]
|
||||
);
|
||||
|
||||
return useMemo(() => {
|
||||
// When plugin columns are present we first steal width from
|
||||
// `targets` (down to its 4-unit min), then from `createTime`
|
||||
// (down to 3). Stays within the 24-unit grid as long as the
|
||||
// combined plugin span is ≤ 8.
|
||||
const pluginSpan = pluginColumns.reduce((sum, c) => sum + (c.span ?? 4), 0);
|
||||
const targetsSpan = Math.max(
|
||||
TARGETS_MIN_SPAN,
|
||||
TARGETS_PREFERRED_SPAN - pluginSpan
|
||||
);
|
||||
const overflow = Math.max(
|
||||
0,
|
||||
pluginSpan - (TARGETS_PREFERRED_SPAN - TARGETS_MIN_SPAN)
|
||||
);
|
||||
const createTimeSpan = Math.max(
|
||||
CREATE_TIME_MIN_SPAN,
|
||||
CREATE_TIME_PREFERRED_SPAN - overflow
|
||||
);
|
||||
const pluginColsRendered: TableColumnProps[] = pluginColumns.map((c) => ({
|
||||
title: intl.formatMessage({ id: c.titleId }),
|
||||
dataIndex: c.key,
|
||||
span: c.span ?? 4,
|
||||
render: (_value: any, record: RouteItem) => c.render(record)
|
||||
}));
|
||||
const beforeTime = pluginColsRendered.filter(
|
||||
(_c, i) => (pluginColumns[i].placement ?? 'before-time') === 'before-time'
|
||||
);
|
||||
const beforeOperation = pluginColsRendered.filter(
|
||||
(_c, i) => pluginColumns[i].placement === 'before-operation'
|
||||
);
|
||||
return [
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.name' }),
|
||||
@@ -45,37 +198,41 @@ const useAccessColumns = (
|
||||
{
|
||||
title: intl.formatMessage({ id: 'routes.table.routeTargets' }),
|
||||
dataIndex: 'targets',
|
||||
span: 10,
|
||||
span: targetsSpan,
|
||||
render: (value: number, record: RouteItem) => (
|
||||
<span>
|
||||
{record.ready_targets} / {value}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
...beforeTime,
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.createTime' }),
|
||||
dataIndex: 'created_at',
|
||||
sorter: tableSorter(6),
|
||||
span: 5,
|
||||
span: createTimeSpan,
|
||||
render: (value: string) => (
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}
|
||||
</AutoTooltip>
|
||||
)
|
||||
},
|
||||
...beforeOperation,
|
||||
{
|
||||
title: intl.formatMessage({ id: 'common.table.operation' }),
|
||||
dataIndex: 'operations',
|
||||
span: 4,
|
||||
render: (value: string, record: RouteItem) => (
|
||||
<DropdownButtons
|
||||
items={filterActions(record)}
|
||||
onSelect={(val) => handleSelect(val, record)}
|
||||
items={filterActions(record) as MenuProps['items']}
|
||||
onSelect={(val, item) =>
|
||||
onSelectAction(val, record, item as RankedAction)
|
||||
}
|
||||
></DropdownButtons>
|
||||
)
|
||||
}
|
||||
];
|
||||
}, [handleSelect, onCellClick]);
|
||||
}, [intl, pluginColumns, filterActions, onSelectAction]);
|
||||
};
|
||||
|
||||
export default useAccessColumns;
|
||||
|
||||
Reference in New Issue
Block a user