root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: custom backend and versions ux

Browse Source
This commit is contained in:
jialin
2025-11-04 13:37:53 +08:00
parent 9be465a8cf
commit 23b7936924
19 changed files with 247 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/atoms/models.ts
+2 -10
View File
@@ -1,3 +1,4 @@
import { BackendOption } from '@/pages/llmodels/config/types';
import { atom, getDefaultStore } from 'jotai';
// models expand keys: create, update , delete,
@@ -24,13 +25,4 @@ export const clusterListAtom = atom<
}[]
>([]);
export const backendOptionsAtom = atom<
{
value: string;
label: string;
default_backend_param: string[];
default_version: string;
isBuiltIn: boolean;
versions: { label: string; value: string }[];
}[]
>([]);
export const backendOptionsAtom = atom<BackendOption[]>([]);
src/locales/en-US/backends.ts
+4 -1
View File
@@ -29,5 +29,8 @@ export default {
'backend.versionInfo.autoImage': 'Automatically selected at runtime',
'backend.version.rules.builtin': 'Must end with "-custom"',
'backend.version.no.tips':
'The name of a custom version must end with "-custom."'
'The built-in backend’s custom version name must end with "-custom".',
'backend.backend.rules.custom':
'The custom backend name must end with "-custom".',
'backend.quickConfig': 'Quick Config'
};
src/locales/ja-JP/backends.ts
+4 -1
View File
@@ -29,5 +29,8 @@ export default {
'backend.versionInfo.autoImage': 'Automatically selected at runtime',
'backend.version.rules.builtin': 'Must end with "-custom"',
'backend.version.no.tips':
'The name of a custom version must end with "-custom."'
'The built-in backend’s custom version name must end with "-custom".',
'backend.backend.rules.custom':
'The custom backend name must end with "-custom".',
'backend.quickConfig': 'Quick Config'
};
src/locales/ru-RU/backends.ts
+7 -2
View File
@@ -29,10 +29,15 @@ export default {
'backend.versionInfo.autoImage': 'Автоматически выбор во время запуска',
'backend.version.rules.builtin': 'Должен заканчиваться на "-custom"',
'backend.version.no.tips':
'The name of a custom version must end with "-custom."'
'The built-in backend’s custom version name must end with "-custom".',
'backend.backend.rules.custom':
'The custom backend name must end with "-custom".',
'backend.quickConfig': 'Quick Config'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'backend.form.defaultExecuteCommand.tips': '{{model_path}} is the model path, and {{port}} is the service port. These variable names cannot be modified.'
// 2. 'backend.version.no.tips': 'The name of a custom version must end with "-custom."'
// 2. 'backend.version.no.tips': 'The built-in backend’s custom version name must end with "-custom".'
// 3. 'backend.backend.rules.custom': 'The custom backend name must end with "-custom".',
// 4. 'backend.quickConfig': 'Quick Config'
// ========== End of To-Do List ==========
src/locales/zh-CN/backends.ts
+3 -1
View File
@@ -28,5 +28,7 @@ export default {
'backend.noVersion': '未找到版本',
'backend.versionInfo.autoImage': '运行时自动选择',
'backend.version.rules.builtin': '须以 "-custom" 结尾',
'backend.version.no.tips': '自定义版本名称必须以 "-custom" 结尾。'
'backend.version.no.tips': '内置后端自定义版本名称必须以 "-custom" 结尾。',
'backend.backend.rules.custom': '自定义后端名称须以 "-custom" 结尾。',
'backend.quickConfig': '快速配置'
};
src/pages/backends/components/add-modal.tsx
+5 -3
View File
@@ -53,7 +53,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const [yamlContent, setYamlContent] = useState<string>('');
const [formContent, setFormContent] = useState<FormData>({} as FormData);
const genertateCurrentData = (values: ListItem): ListItem => {
// remove '-custom' suffix from version_no in currentData, when action is EDIT
const genertateCurrentVersionData = (values: ListItem): ListItem => {
const data = { ...values };
data.version_configs = Object.entries(data.version_configs || {}).reduce(
(acc, [key, value]) => {
@@ -105,7 +106,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
useEffect(() => {
const iniFormContent = (data: ListItem) => {
const values: any = genertateCurrentData(data);
const values: any = genertateCurrentVersionData(data);
// custom versions
const versionConfigs = Object.keys(values.version_configs || {}).map(
@@ -133,6 +134,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
return {
...values,
backend_name: values.backend_name.replace(/-custom$/, ''),
version_configs: versionConfigs,
built_in_version_configs: builtInVersions
};
@@ -158,7 +160,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
if (action === PageAction.EDIT && open) {
const yaml = initYamlContent(currentData || {});
const formData = iniFormContent(currentData || {});
const formData = iniFormContent(currentData || ({} as ListItem));
setYamlContent(yaml);
setFormContent(formData);
formRef.current?.setFieldsValue?.(formData);
src/pages/backends/components/import-yaml.tsx
+13 -4
View File
@@ -104,13 +104,22 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
const jsonData = yaml2Json(content);
const exsistingVersions = Object.keys(jsonData.version_configs || {});
const invalidVersion = exsistingVersions.find(
(v) => !v.endsWith('-custom')
);
if (invalidVersion) {
if (
actionStatus.isBuiltIn &&
exsistingVersions.find((v) => !v.endsWith('-custom'))
) {
setError(intl.formatMessage({ id: 'backend.version.no.tips' }));
return false;
}
if (
!actionStatus.isBuiltIn &&
actionStatus.action === PageAction.CREATE &&
!jsonData.backend_name.endsWith('-custom')
) {
setError(intl.formatMessage({ id: 'backend.backend.rules.custom' }));
return false;
}
return content;
} catch (error) {
src/pages/backends/config/index.ts
+3 -3
View File
@@ -144,7 +144,7 @@ export const frameworks = [
];
export const yamlTemplate = `# backend configuration template
backend_name: my-backend
backend_name: my-backend-custom
description: this is my-backend
default_version: v0.5.1
health_check_path: /v1/models
@@ -152,11 +152,11 @@ default_backend_param:
- --host
default_run_command: myBackend serve {{model_path}} --port {{port}}
version_configs:
v0.0.1-custom:
v0.0.1:
image_name: lm/mybackend:latest
run_command: myBackend serve {{model_path}} --port {{port}}
custom_framework: cuda
v0.0.2-custom:
v0.0.2:
image_name: lm/mybackend:test
run_command:
custom_framework:
src/pages/backends/config/schema/create.json
+1
View File
@@ -3,6 +3,7 @@
"properties": {
"backend_name": {
"type": "string",
"pattern": "^-custom$",
"description": "backend name",
"severity": "error"
},
src/pages/backends/forms/basic.tsx
+4 -2
View File
@@ -7,12 +7,13 @@ import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { FormData } from '../config/types';
import { FormData, ListItem } from '../config/types';
type AddModalProps = {
action: PageActionType;
currentData?: ListItem;
};
const BasicForm: React.FC<AddModalProps> = ({ action }) => {
const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
@@ -30,6 +31,7 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
>
<SealInput.Input
trim
addAfter={currentData?.is_built_in ? null : '-custom'}
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'common.table.name' })}
required
src/pages/backends/forms/index.tsx
+10 -3
View File
@@ -34,12 +34,19 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
};
const handleOnFinish = (values: FormData) => {
const data = { ...values };
const data = {
...values,
backend_name: currentData?.is_built_in
? values.backend_name
: `${values.backend_name}-custom`
};
data.version_configs = data.version_configs?.map((item) => {
if (item.version_no) {
return {
...item,
version_no: `${item.version_no}-custom`
version_no: currentData?.is_built_in
? `${item.version_no}-custom`
: item.version_no
};
}
return item;
@@ -82,7 +89,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
initialValues={_.omit(currentData, ['version_configs'])}
onFinishFailed={onFinishFailed}
>
<BasicForm action={action}></BasicForm>
<BasicForm action={action} currentData={currentData}></BasicForm>
<VersionsForm
action={action}
currentData={currentData}
src/pages/backends/forms/versions-config.tsx
+1 -1
View File
@@ -283,7 +283,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
>
<SealInput.Input
trim
addAfter="-custom"
addAfter={currentData?.is_built_in ? '-custom' : null}
onChange={handleVersionChange}
label={intl.formatMessage({ id: 'backend.version' })}
required
src/pages/llmodels/config/types.ts
+8 -2
View File
@@ -288,13 +288,19 @@ export interface EvaluateResult {
};
}
export interface BackendOption {
export interface BackendGroupOption {
value: string;
label: string;
title?: string;
default_backend_param: string[];
default_version: string;
isBuiltIn: boolean;
versions: { label: string; value: string }[];
versions: { label: string; value: string; title?: string }[];
}
export interface BackendOption {
label: string;
options: BackendGroupOption[];
}
export interface AccessControlFormData {
src/pages/llmodels/forms/advance-config.tsx
+8 -5
View File
@@ -5,11 +5,13 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import { useCallback } from 'react';
import { modelCategories, ScheduleValueMap } from '../config';
import { DeployFormKeyMap, modelCategories, ScheduleValueMap } from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import Backend from './backend';
import BackendForm from './backend';
import BackendParametersList from './backend-parameters-list';
import CustomBackend from './custom-backend';
const AdvanceConfig = () => {
const intl = useIntl();
@@ -17,7 +19,7 @@ const AdvanceConfig = () => {
const EnviromentVars = Form.useWatch('env', form);
const scheduleType = Form.useWatch('scheduleType', form);
const backend = Form.useWatch('backend', form);
const { onValuesChange } = useFormContext();
const { onValuesChange, formKey } = useFormContext();
const handleEnviromentVarsChange = useCallback(
(labels: Record<string, any>) => {
@@ -62,8 +64,9 @@ const AdvanceConfig = () => {
options={modelCategories}
></SealSelect>
</Form.Item>
<Backend></Backend>
{formKey === DeployFormKeyMap.CATALOG && <BackendForm></BackendForm>}
<CustomBackend></CustomBackend>
<BackendParametersList></BackendParametersList>
<Form.Item<FormData> name="env">
<LabelSelector
label={intl.formatMessage({
src/pages/llmodels/forms/backend.tsx
+60 -58
View File
@@ -1,12 +1,11 @@
import IconFont from '@/components/icon-font';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import SealTextArea from '@/components/seal-form/seal-textarea';
import TooltipList from '@/components/tooltip-list';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import {
backendLabelMap,
backendTipsList,
@@ -14,23 +13,20 @@ import {
} from '../config';
import { backendOptionsMap } from '../config/backend-parameters';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import BackendParametersList from './backend-parameters-list';
const Box = styled.div`
&.default-backend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
`;
const BackendFields: React.FC = () => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const {
isGGUF,
formKey,
action,
source,
gpuOptions,
onValuesChange,
backendOptions,
onBackendChange
} = useFormContext();
const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
const backend = Form.useWatch('backend', form);
const handleBackendVersionOnBlur = () => {
@@ -45,10 +41,53 @@ const BackendFields: React.FC = () => {
if (!backend || backend === backendOptionsMap.custom) {
return [];
}
return (
backendOptions.find((item) => item.value === backend)?.versions || []
// find the backend item from backendOptions
const backendItem = backendOptions
.flatMap((group) => group.options)
.find((item) => item.value === backend);
const versions = backendItem?.versions || [];
// if it's a custom backend,
if (backendItem && !backendItem.isBuiltIn) {
return versions;
}
// check the value if endts with '-custom', if true, remove the suffix add to "Cutom" group, if not , add to "Built-in" group
const builtInVersions = versions.filter(
(item) => !item.value?.endsWith('-custom')
);
}, [backend, backendOptions]);
const customVersions = versions.filter((item) =>
item.value?.endsWith('-custom')
);
const options = [];
if (builtInVersions.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.builtin' }),
options: builtInVersions
});
}
if (customVersions.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.custom' }),
options: customVersions
});
}
return options;
}, [backend, backendOptions, intl]);
const optionRender = (option: any) => {
return option.data.title;
};
const labelRender = (option: any) => {
return option.title;
};
return (
<>
@@ -67,12 +106,16 @@ const BackendFields: React.FC = () => {
label={intl.formatMessage({ id: 'models.form.backend' })}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={backendOptions}
optionRender={optionRender}
labelRender={labelRender}
></SealSelect>
</Form.Item>
{backendOptionsMap.custom !== backend && (
<Form.Item name="backend_version">
<SealSelect
options={backendVersions}
optionRender={optionRender}
labelRender={labelRender}
placeholder={intl.formatMessage({
id: 'models.form.backendVersion.holder'
})}
@@ -114,47 +157,6 @@ const BackendFields: React.FC = () => {
></SealSelect>
</Form.Item>
)}
{backend === backendOptionsMap.custom && (
<>
<Form.Item<FormData>
name="image_name"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.imageName')
}
]}
>
<SealInput.Input
required
allowClear
label={intl.formatMessage({ id: 'backend.imageName' })}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="run_command"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.runCommand')
}
]}
>
<SealTextArea
allowClear
required
scaleSize={true}
alwaysFocus={true}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({ id: 'backend.runCommand' })}
placeholder={intl.formatMessage({
id: 'models.form.runCommandPlaceholder'
})}
></SealTextArea>
</Form.Item>
</>
)}
<BackendParametersList></BackendParametersList>
</>
);
};
src/pages/llmodels/forms/basic.tsx
+5 -1
View File
@@ -8,8 +8,10 @@ import {
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useMemo } from 'react';
import { sourceOptions } from '../config';
import { DeployFormKeyMap, sourceOptions } from '../config';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
import BackendForm from './backend';
import LocalPathSource from './local-path-source';
import OnlineSource from './online-source';
@@ -32,6 +34,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
onSourceChange
} = props;
const intl = useIntl();
const { formKey } = useFormContext();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
@@ -115,6 +118,7 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
></SealSelect>
}
</Form.Item>
{formKey === DeployFormKeyMap.DEPLOYMENT && <BackendForm></BackendForm>}
<Form.Item<FormData>
name="replicas"
rules={[
src/pages/llmodels/forms/custom-backend.tsx
+66
View File
@@ -0,0 +1,66 @@
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { backendOptionsMap } from '../config/backend-parameters';
import { FormData } from '../config/types';
const CustomBackend: React.FC = () => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance();
const backend = Form.useWatch('backend', form);
return (
<>
{backend === backendOptionsMap.custom && (
<>
<Form.Item<FormData>
name="image_name"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.imageName')
}
]}
>
<SealInput.Input
required
allowClear
label={intl.formatMessage({ id: 'backend.imageName' })}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="run_command"
rules={[
{
required: true,
message: getRuleMessage('input', 'backend.runCommand')
}
]}
>
<SealTextArea
allowClear
required
scaleSize={true}
alwaysFocus={true}
autoSize={{ minRows: 2, maxRows: 4 }}
label={intl.formatMessage({ id: 'backend.runCommand' })}
description={intl.formatMessage({
id: 'backend.form.defaultExecuteCommand.tips'
})}
placeholder={intl.formatMessage(
{ id: 'common.help.eg' },
{ content: 'vllm serve {{model_path}} --port {{port}}' }
)}
></SealTextArea>
</Form.Item>
</>
)}
</>
);
};
export default CustomBackend;
src/pages/llmodels/forms/index.tsx
+8 -3
View File
@@ -16,7 +16,7 @@ import {
import { backendOptionsMap } from '../config/backend-parameters';
import { FormContext } from '../config/form-context';
import {
BackendOption,
BackendGroupOption,
DeployFormKey,
FormData,
SourceType
@@ -188,7 +188,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
};
};
const updateKVCacheConfig = (backend: string, option: BackendOption) => {
const updateKVCacheConfig = (backend: string, option: BackendGroupOption) => {
if (
!option.isBuiltIn &&
[backendOptionsMap.SGLang, backendOptionsMap.vllm].includes(backend)
@@ -202,7 +202,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
return {};
};
const handleBackendChange = async (val: string, option: BackendOption) => {
const handleBackendChange = async (
val: string,
option: BackendGroupOption
) => {
console.log('handleBackendChange option===>', val, option);
const isGGUF = checkIsGGUF();
form.setFieldsValue({
env: null,
backend_version: option.default_version || '',
src/pages/llmodels/hooks/use-query-backends.ts
+35 -4
View File
@@ -1,28 +1,59 @@
import { backendOptionsAtom } from '@/atoms/models';
import { useIntl } from '@umijs/max';
import { useAtom } from 'jotai';
import { queryBackendList } from '../apis';
import { backendOptionsMap } from '../config/backend-parameters';
import { BackendGroupOption } from '../config/types';
export default function useQueryBackends() {
const [backendOptions, setBackendOptions] = useAtom(backendOptionsAtom);
const intl = useIntl();
const getBackendOptions = async (params?: { cluster_id: number }) => {
try {
const res = await queryBackendList(params);
const list = res?.items?.map((item) => {
const list: BackendGroupOption[] = res?.items?.map((item) => {
return {
value: item.backend_name,
label: item.backend_name,
label:
item.backend_name === backendOptionsMap.custom
? intl.formatMessage({ id: 'backend.quickConfig' })
: item.backend_name,
title:
item.backend_name === backendOptionsMap.custom
? intl.formatMessage({ id: 'backend.quickConfig' })
: item.backend_name.replace(/-custom$/, ''),
default_backend_param: item.default_backend_param || [],
default_version: item.default_version,
isBuiltIn: item.is_built_in,
versions: (item.versions || []).map((vItem) => ({
label: vItem.version,
value: vItem.version
value: vItem.version,
title: vItem.version.replace(/-custom$/, '')
}))
};
});
const builtInBackends = list?.filter((item) => item.isBuiltIn);
const customBackends = list?.filter((item) => !item.isBuiltIn);
const options = [];
if (builtInBackends && builtInBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.builtin' }),
options: builtInBackends
});
}
if (customBackends && customBackends.length > 0) {
options.push({
label: intl.formatMessage({ id: 'backend.custom' }),
options: customBackends
});
}
if (res?.items) {
setBackendOptions(list || []);
setBackendOptions(options);
}
return list || [];
} catch (error) {