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

chore: update env vars from backend version

Browse Source
This commit is contained in:
jialin
2026-01-30 20:48:55 +08:00
committed by Lawrence Li
parent 4000aacb2c
commit 4a4a02eb0d
18 changed files with 240 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/atoms/models.ts
+1 -1
View File
@@ -47,7 +47,7 @@ export const workerListAtom = atom<
}[]
>([]);
interface BackGroupOption {
export interface BackGroupOption {
label: string;
value: string;
title?: string;
src/locales/en-US/backends.ts
+2 -1
View File
@@ -40,5 +40,6 @@ export default {
'backend.entrypoint.tips':
'If specified, the ENTRYPOINT defined in the image will be ignored, and the command below will be used as the container startup entrypoint.',
'backend.form.defaultEnvironment': 'Default Environment Variables',
'backend.recommendModels': 'Recommended Models'
'backend.recommendModels': 'Recommended Models',
'backend.filter.source': 'Filter by source'
};
src/locales/ja-JP/backends.ts
+2 -1
View File
@@ -40,5 +40,6 @@ export default {
'backend.entrypoint.tips':
'If specified, the ENTRYPOINT defined in the image will be ignored, and the command below will be used as the container startup entrypoint.',
'backend.form.defaultEnvironment': 'Default Environment Variables',
'backend.recommendModels': 'Recommended Models'
'backend.recommendModels': 'Recommended Models',
'backend.filter.source': 'Filter by source'
};
src/locales/ru-RU/backends.ts
+4 -2
View File
@@ -40,10 +40,12 @@ export default {
'backend.entrypoint.tips':
'Если указано, ENTRYPOINT, заданный в образе, будет проигнорирован, а вместо него для запуска контейнера будет использована команда ниже.',
'backend.form.defaultEnvironment': 'Default Environment Variables',
'backend.recommendModels': 'Recommended Models'
'backend.recommendModels': 'Recommended Models',
'backend.filter.source': 'Filter by source'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'backend.form.defaultEnvironment': 'Default Environment Variables',
// 2. 'backend.recommendModels': 'Recommended Models'
// 2. 'backend.recommendModels': 'Recommended Models',
// 3. 'backend.filter.source': 'Filter by source'
// ========== End of To-Do List ==========
src/locales/zh-CN/backends.ts
+2 -1
View File
@@ -37,5 +37,6 @@ export default {
'backend.entrypoint.tips':
'如指定，镜像中定义的 ENTRYPOINT 将被忽略，下面的命令将作为容器启动入口命令使用。',
'backend.form.defaultEnvironment': '默认环境变量',
'backend.recommendModels': '推荐模型'
'backend.recommendModels': '推荐模型',
'backend.filter.source': '按来源过滤'
};
src/pages/backends/components/backend-card.tsx
+24 -19
View File
@@ -308,6 +308,28 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
);
};
const renderEnabledTag = () => {
if (data.backend_source !== BackendSourceValueMap.COMMUNITY) {
return null;
}
return (
<ThemeTag
className="font-400"
variant="outlined"
color={data.enabled ? 'green' : 'default'}
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{data.enabled
? `${intl.formatMessage({ id: 'common.status.enabled' })}`
: `${intl.formatMessage({ id: 'common.status.disabled' })}`}
</ThemeTag>
);
};
return (
<StyledCard
onClick={handleClick}
@@ -344,27 +366,10 @@ const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
<InfoItem>
<span className="label">
<IconFont type="icon-source" className="icon" />
<span>Source:</span>
<span>{intl.formatMessage({ id: 'models.form.source' })}:</span>
</span>
{renderSource()}
{data.backend_source === BackendSourceValueMap.COMMUNITY && (
<>
<ThemeTag
className="font-400"
variant="outlined"
color={data.enabled ? 'green' : 'default'}
style={{
borderRadius: 'var(--ant-border-radius)',
margin: 0,
width: 'max-content'
}}
>
{data.enabled
? `${intl.formatMessage({ id: 'common.status.enabled' })}`
: `${intl.formatMessage({ id: 'common.status.disabled' })}`}
</ThemeTag>
</>
)}
{renderEnabledTag()}
</InfoItem>
{renderRecommendModels()}
</SourceWrapper>
src/pages/backends/components/version-info-modal.tsx
+3 -1
View File
@@ -69,7 +69,9 @@ const VersionInfoModal: React.FC<VersionInfoModalProps> = ({
open={open}
title={
<div className="flex-center gap-16">
<span>{intl.formatMessage({ id: 'backend.versions' })}</span>
<span style={{ fontSize: 14 }}>
{intl.formatMessage({ id: 'backend.versions' })}
</span>
<Button onClick={addVersion} type="link" size="small">
<PlusOutlined /> {intl.formatMessage({ id: 'backend.addVersion' })}
</Button>
src/pages/backends/config/form-context.ts
+19
View File
@@ -0,0 +1,19 @@
import { PageActionType } from '@/config/types';
import { createContext, useContext } from 'react';
interface FormContextProps {
action: PageActionType;
backendSource: string;
}
export const FormContext = createContext<FormContextProps | null>(
{} as FormContextProps
);
export const useFormContext = () => {
const context = useContext(FormContext);
if (!context) {
throw new Error('useFormContext must be used within a FormContextProvider');
}
return context;
};
src/pages/backends/config/index.ts
+18
View File
@@ -49,6 +49,24 @@ export const TagColorMap: Record<string, string> = {
[BackendSourceValueMap.COMMUNITY]: 'cyan'
};
export const backendSourceOptions = [
{
label: BackendSourceLabelMap[BackendSourceValueMap.BUILTIN],
value: BackendSourceValueMap.BUILTIN,
locale: true
},
{
label: BackendSourceLabelMap[BackendSourceValueMap.COMMUNITY],
value: BackendSourceValueMap.COMMUNITY,
locale: true
},
{
label: BackendSourceLabelMap[BackendSourceValueMap.CUSTOM],
value: BackendSourceValueMap.CUSTOM,
locale: true
}
];
export const backendActions = [
{
label: 'common.button.edit',
src/pages/backends/forms/basic.tsx
+12 -15
View File
@@ -3,22 +3,19 @@ import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import SealTextArea from '@/components/seal-form/seal-textarea';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import { BackendSourceValueMap } from '../config';
import { FormData, ListItem } from '../config/types';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
type AddModalProps = {
action: PageActionType;
currentData?: ListItem;
};
const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const BasicForm = () => {
const form = Form.useFormInstance();
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const { action, backendSource } = useFormContext();
const defaultEnvs = Form.useWatch('default_environment', form);
const handleEnviromentVarsChange = (labels: Record<string, any>) => {
@@ -44,18 +41,18 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
>
<SealInput.Input
trim
addAfter={currentData?.is_built_in ? null : '-custom'}
addAfter={
backendSource === BackendSourceValueMap.CUSTOM ? '-custom' : null
}
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'common.table.name' })}
required
></SealInput.Input>
</Form.Item>
{action === PageAction.CREATE && (
<Form.Item<FormData> hidden name="backend_source">
<SealInput.Input></SealInput.Input>
</Form.Item>
)}
{!currentData?.is_built_in && (
<Form.Item<FormData> hidden name="backend_source">
<SealInput.Input></SealInput.Input>
</Form.Item>
{backendSource !== BackendSourceValueMap.BUILTIN && (
<>
<Form.Item<FormData>
name="health_check_path"
src/pages/backends/forms/index.tsx
+21 -15
View File
@@ -3,6 +3,7 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { FormContext } from '../config/form-context';
import { FormData, ListItem } from '../config/types';
import BasicForm from './basic';
import VersionsForm from './versions-config';
@@ -18,6 +19,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
const intl = useIntl();
const [form] = Form.useForm();
const [activeKey, setActiveKey] = React.useState<string[]>([]);
const backendSource = Form.useWatch('backend_source', form);
const onFinishFailed = (errorInfo: any) => {
const errorFields = errorInfo.errorFields || [];
@@ -79,22 +81,26 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
}));
return (
<Form
name="basicForm"
form={form}
onFinish={handleOnFinish}
preserve={false}
scrollToFirstError={true}
initialValues={_.omit(currentData, ['version_configs'])}
onFinishFailed={onFinishFailed}
<FormContext.Provider
value={{ action: action, backendSource: backendSource }}
>
<BasicForm action={action} currentData={currentData}></BasicForm>
<VersionsForm
action={action}
currentData={currentData}
activeKey={activeKey}
></VersionsForm>
</Form>
<Form
name="basicForm"
form={form}
onFinish={handleOnFinish}
preserve={false}
scrollToFirstError={true}
initialValues={_.omit(currentData, ['version_configs'])}
onFinishFailed={onFinishFailed}
>
<BasicForm></BasicForm>
<VersionsForm
action={action}
currentData={currentData}
activeKey={activeKey}
></VersionsForm>
</Form>
</FormContext.Provider>
);
}
);
src/pages/backends/forms/versions-config.tsx
+1 -1
View File
@@ -401,7 +401,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
label={intl.formatMessage({
id: 'models.form.env'
})}
labels={versionConfigs.environment}
labels={versionConfigs?.[name]?.environment}
btnText={intl.formatMessage({ id: 'common.button.vars' })}
onChange={(envs) =>
handleEnviromentVarsChange(envs, name)
src/pages/backends/hooks/use-create-backend.ts
+50
View File
@@ -0,0 +1,50 @@
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useBodyScroll from '@/hooks/use-body-scroll';
import { useState } from 'react';
import { ListItem } from '../config/types';
const useCreateBackend = () => {
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: ListItem;
title: string;
}>({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
const openModal = (action: PageActionType, title: string, row?: ListItem) => {
setOpenModalStatus({
...openModalStatus,
open: true,
title: title,
action,
currentData: row
});
saveScrollHeight();
};
const closeModal = () => {
setOpenModalStatus({
open: false,
action: PageAction.CREATE,
currentData: undefined,
title: ''
});
restoreScrollHeight();
};
return {
openBackendModalStatus: openModalStatus,
setOpenBackendModalStatus: setOpenModalStatus,
openBackendModal: openModal,
closeBackendModal: closeModal
};
};
export default useCreateBackend;
src/pages/backends/index.tsx
+44 -48
View File
@@ -2,7 +2,6 @@ import DeleteModal from '@/components/delete-modal';
import IconFont from '@/components/icon-font';
import { FilterBar } from '@/components/page-tools';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { useIntl } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
@@ -23,8 +22,9 @@ import {
import AddModal from './components/add-modal';
import BackendCardList from './components/backend-list';
import VersionInfoModal from './components/version-info-modal';
import { json2Yaml, yaml2Json } from './config';
import { backendSourceOptions, json2Yaml, yaml2Json } from './config';
import { FormData, ListItem } from './config/types';
import useCreateBackend from './hooks/use-create-backend';
import useExportYAML from './hooks/use-export-yaml';
import useEnableBackend from './services/use-enable-backend';
@@ -36,6 +36,7 @@ const BackendList = () => {
rowSelection,
queryParams,
modalRef,
handleQueryChange,
fetchData,
handleDelete,
handleSearch,
@@ -52,41 +53,34 @@ const BackendList = () => {
}
});
const { exportYAML } = useExportYAML();
const [openModalStatus, setOpenModalStatus] = useState<{
open: boolean;
action: PageActionType;
currentData?: Partial<ListItem>;
}>({ open: false, action: 'create' });
const [openVersionInfoModal, setOpenVersionInfoModal] = useState<{
open: boolean;
currentData?: Partial<ListItem>;
currentData?: ListItem;
}>({ open: false });
const { handleEnableBackend } = useEnableBackend();
const { openBackendModal, closeBackendModal, openBackendModalStatus } =
useCreateBackend();
// built_in_version_configs is read-only, but needs to be included when updating
const handleOnSubmit = async (values: FormData) => {
try {
if (openModalStatus.action === 'create') {
if (openBackendModalStatus.action === 'create') {
await createBackend({ data: values });
} else {
const omitFields = openModalStatus.currentData?.is_built_in
const omitFields = openBackendModalStatus.currentData?.is_built_in
? ['built_in_version_configs', 'default_version']
: ['built_in_version_configs'];
await updateBackend(openModalStatus.currentData!.id!, {
await updateBackend(openBackendModalStatus.currentData!.id!, {
data: {
built_in_version_configs:
openModalStatus.currentData?.built_in_version_configs,
openBackendModalStatus.currentData?.built_in_version_configs,
..._.omit(values, omitFields),
health_check_path: values.health_check_path || null
}
});
}
setOpenModalStatus({
open: false,
action: 'create',
currentData: undefined
});
closeBackendModal();
handleSearch();
} catch (error) {}
};
@@ -94,46 +88,42 @@ const BackendList = () => {
// built_in_version_configs needs to be included when updating from YAML, but not allowed to be changed
const handleOnSubmitYaml = async (values: { content: string }) => {
try {
if (openModalStatus.action === 'create') {
if (openBackendModalStatus.action === 'create') {
await createBackendFromYAML({ data: values });
} else {
const jsonData = yaml2Json(values.content);
const yamlContent = json2Yaml({
backend_name: openModalStatus.currentData?.backend_name,
default_version: openModalStatus.currentData?.default_version,
backend_name: openBackendModalStatus.currentData?.backend_name,
default_version: openBackendModalStatus.currentData?.default_version,
built_in_version_configs:
openModalStatus.currentData?.built_in_version_configs,
openBackendModalStatus.currentData?.built_in_version_configs,
...jsonData
});
await updateBackendFromYAML(openModalStatus.currentData!.id!, {
await updateBackendFromYAML(openBackendModalStatus.currentData!.id!, {
data: {
content: yamlContent
}
});
}
setOpenModalStatus({
open: false,
action: 'create',
currentData: undefined
});
closeBackendModal();
handleSearch();
} catch (error) {}
};
const handleAddBackend = () => {
setOpenModalStatus({
open: true,
action: PageAction.CREATE
const handleFilterBySource = (value: string) => {
handleQueryChange({
backend_source: value,
page: 1
});
};
const handleOnSelect = (item: any) => {
const handleAddBackend = () => {
openBackendModal(PageAction.CREATE, '');
};
const handleOnSelect = async (item: any) => {
if (item.action === 'edit') {
setOpenModalStatus({
open: true,
action: 'edit',
currentData: item.data
});
openBackendModal(PageAction.EDIT, '', item.data);
} else if (item.action === 'delete') {
handleDelete(item.data, {
name: item.data.backend_name
@@ -162,6 +152,10 @@ const BackendList = () => {
enabled: item.action === 'enable'
}
});
// delay 200ms to refresh list
await new Promise((resolve) => {
setTimeout(resolve, 300);
});
handleSearch();
}
};
@@ -171,11 +165,7 @@ const BackendList = () => {
open: false,
currentData: undefined
});
setOpenModalStatus({
open: true,
action: 'edit',
currentData: openVersionInfoModal.currentData
});
openBackendModal(PageAction.EDIT, '', openVersionInfoModal.currentData);
};
const loadMore = useMemoizedFn((nextPage: number) => {
@@ -197,12 +187,18 @@ const BackendList = () => {
input: 300
}}
inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
selectHolder={intl.formatMessage({ id: 'backend.filter.source' })}
buttonText={intl.formatMessage({ id: 'backend.button.add' })}
handleClickPrimary={handleAddBackend}
handleSearch={handleSearch}
handleSelectChange={handleFilterBySource}
handleInputChange={handleNameChange}
rowSelection={rowSelection}
showSelect={false}
showSelect={true}
selectOptions={backendSourceOptions.map((item) => ({
label: intl.formatMessage({ id: item.label }),
value: item.value
}))}
></FilterBar>
<ScrollerContext.Provider
@@ -237,14 +233,14 @@ const BackendList = () => {
></NoResult>
</ScrollerContext.Provider>
<AddModal
action={openModalStatus.action}
onClose={() => setOpenModalStatus({ open: false, action: 'create' })}
action={openBackendModalStatus.action}
onClose={closeBackendModal}
onSubmit={handleOnSubmit}
onSubmitYaml={handleOnSubmitYaml}
currentData={openModalStatus.currentData as ListItem}
open={openModalStatus.open}
currentData={openBackendModalStatus.currentData as ListItem}
open={openBackendModalStatus.open}
title={
openModalStatus.action === 'create'
openBackendModalStatus.action === PageAction.CREATE
? intl.formatMessage({ id: 'backend.button.add' })
: intl.formatMessage({ id: 'backend.button.edit' })
}
src/pages/llmodels/config/types.ts
+3
View File
@@ -316,6 +316,7 @@ export interface BackendGroupItem {
label: string;
value: string;
title?: string;
environment?: Record<string, any>;
is_deprecated: boolean;
}[];
}
@@ -333,6 +334,7 @@ export interface BackendOption {
label: string;
value: string;
title?: string;
environment?: Record<string, any>;
is_deprecated: boolean;
}[];
}
@@ -352,6 +354,7 @@ export interface BackendItem {
enabled: boolean;
versions: {
version: string;
environment?: Record<string, any>;
is_deprecated: boolean;
}[];
}
src/pages/llmodels/forms/backend.tsx
+30 -9
View File
@@ -2,7 +2,6 @@ import SealCascader from '@/components/seal-form/seal-cascader';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { BackendSourceValueMap } from '@/pages/backends/config';
import { CaretDownOutlined, InfoCircleOutlined } from '@ant-design/icons';
@@ -44,7 +43,15 @@ const BackendFields: React.FC = () => {
const [selectedBackend, setSelectedBackend] =
React.useState<BackendOption | null>(null);
const handleBackendVersionOnChange = (value: any) => {
const handleBackendVersionOnChange = (value: any, option: any) => {
if (Object.keys(option.data.environment || {}).length > 0) {
form.setFieldsValue({
env: {
...(option?.data?.environment || {})
}
});
}
onValuesChange?.({}, form.getFieldsValue());
};
@@ -111,7 +118,6 @@ const BackendFields: React.FC = () => {
}, [backend, selectedBackend, intl]);
const backendVersionLabelRender = (option: any) => {
console.log('backendVersionLabelRender option:', option);
return option.title;
};
@@ -122,7 +128,12 @@ const BackendFields: React.FC = () => {
return (
<Select.OptGroup label={label}>
{values.map((item) => (
<Select.Option key={item.value} value={item.value} label={item.label}>
<Select.Option
data={item}
key={item.value}
value={item.value}
label={item.label}
>
{item.label}
</Select.Option>
))}
@@ -131,9 +142,19 @@ const BackendFields: React.FC = () => {
};
const handleOnBackendChange = (value: any[], option: any) => {
form.setFieldValue('backend', value?.[1]);
onBackendChange?.(value?.[1], option?.[1] || {});
setSelectedBackend(option?.[1] || {});
const selectedBackend = value?.[1];
const selectedOption = option?.[1] || {};
console.log('handleOnBackendChange selectedOption:', selectedOption);
form.setFieldsValue({
backend: selectedBackend,
env: {
...(selectedOption.environment || {})
}
});
onBackendChange?.(selectedBackend, selectedOption);
setSelectedBackend(selectedOption);
};
const displayRender = (labels: any[], selectedOptions?: any[]) => {
@@ -195,7 +216,7 @@ const BackendFields: React.FC = () => {
};
useEffect(() => {
if (action === PageAction.EDIT) {
if (backend) {
const selected = flatBackendOptions?.find(
(item) => item.value === backend
);
@@ -206,7 +227,7 @@ const BackendFields: React.FC = () => {
]);
}
}
}, [backend, flatBackendOptions, action]);
}, [backend, flatBackendOptions]);
return (
<>
src/pages/llmodels/forms/index.tsx
-1
View File
@@ -212,7 +212,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
setTimeout(resolve, 100);
});
form.setFieldsValue({
env: null,
backend_version: null, // don't set default version here, let the user select it
backend_parameters: option.default_backend_param || [],
...updateKVCacheConfig(val, option),
src/pages/llmodels/hooks/use-query-backends.ts
+4 -1
View File
@@ -15,6 +15,7 @@ interface BackendGroup {
label: string;
value: string;
title?: string;
isLeaf?: boolean;
children: BackendOption[];
}
@@ -59,7 +60,8 @@ export default function useQueryBackends() {
'default_version',
'backend_source',
'is_built_in',
'default_backend_param'
'default_backend_param',
'environment'
]),
backend_source: item.backend_source || BackendSourceValueMap.CUSTOM,
value: item.backend_name,
@@ -77,6 +79,7 @@ export default function useQueryBackends() {
label: vItem.version,
value: vItem.version,
is_deprecated: vItem.is_deprecated,
environment: vItem.environment || {},
title: vItem.version.replace(/-custom$/, '')
}))
};