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

style: versions config

Browse Source
This commit is contained in:
jialin
2025-10-13 14:40:26 +08:00
parent eb509166ee
commit d393f9ee9e
17 changed files with 202 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/collapse-container/index.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ const useStyles = createStyles(({ css, token }) => {
gap: 8px;
`,
subtitle: css`
font-size: 12px;
font-size: 14px;
color: ${token.colorTextSecondary};
`,
content: css`
src/locales/en-US/backends.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export default {
'backends.title': 'Backends'
'backends.title': 'Inference Backends'
};
src/locales/en-US/menu.ts
+1 -1
View File
@@ -32,5 +32,5 @@ export default {
'menu.clusterManagement.credentials': 'Cloud Credentials',
'menu.clusterManagement.clusterDetail': 'Cluster Detail',
'menu.clusterManagement.clusterCreate': 'Create Cluster',
'menu.models.backendsList': 'Backends'
'menu.models.backendsList': 'Inference Backends'
};
src/locales/ja-JP/backends.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export default {
'backends.title': 'Backends'
'backends.title': 'Inference Backends'
};
src/locales/ja-JP/menu.ts
+2 -2
View File
@@ -32,7 +32,7 @@ export default {
'menu.models.userModels': 'My Models',
'menu.clusterManagement.clusterDetail': 'Cluster Detail',
'menu.clusterManagement.clusterCreate': 'Create Cluster',
'menu.models.backendsList': 'Backends'
'menu.models.backendsList': 'Inference Backends'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -49,5 +49,5 @@ export default {
// 11. 'menu.models.userModels': 'My Models'
// 12. 'menu.clusterManagement.clusterDetail': 'Cluster Detail',
// 13. 'menu.clusterManagement.clusterCreate': 'Create Cluster',
// 14. 'menu.models.backendsList': 'Backends'
// 14. 'menu.models.backendsList': 'Inference Backends'
// ========== End of To-Do List ==========
src/locales/ru-RU/backends.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export default {
'backends.title': 'Backends'
'backends.title': 'Inference Backends'
};
src/locales/ru-RU/menu.ts
+2 -2
View File
@@ -32,9 +32,9 @@ export default {
'menu.models.userModels': 'Мои модели',
'menu.clusterManagement.clusterDetail': 'Детали кластера',
'menu.clusterManagement.clusterCreate': 'Создать кластер',
'menu.models.backendsList': 'Backends'
'menu.models.backendsList': 'Inference Backends'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 14. 'menu.models.backendsList': 'Backends'
// 14. 'menu.models.backendsList': 'Inference Backends'
// ========== End of To-Do List ==========
src/locales/zh-CN/backends.ts
+1 -1
View File
@@ -1,3 +1,3 @@
export default {
'backends.title': '后端'
'backends.title': '推理后端'
};
src/locales/zh-CN/menu.ts
+1 -1
View File
@@ -32,5 +32,5 @@ export default {
'menu.clusterManagement.credentials': '云凭证',
'menu.clusterManagement.clusterDetail': '集群详情',
'menu.clusterManagement.clusterCreate': '创建集群',
'menu.models.backendsList': '后端'
'menu.models.backendsList': '推理后端'
};
src/pages/backends/components/add-modal.tsx
+6 -6
View File
@@ -97,8 +97,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const versionConfigs = Object.keys(values.version_configs || {}).map(
(key) => ({
version_no: key,
image_name: values.version_configs[key].image_name,
run_command: values.version_configs[key].run_command,
image_name: values.version_configs?.[key]?.image_name,
run_command: values.version_configs?.[key]?.run_command,
is_default: key === values.default_version
})
);
@@ -107,10 +107,11 @@ const AddModal: React.FC<AddModalProps> = (props) => {
values.build_in_version_configs || {}
).map((key) => ({
version_no: key,
image_name: values.build_in_version_configs[key].image_name,
run_command: values.build_in_version_configs[key].run_command,
image_name: values.build_in_version_configs?.[key]?.image_name,
run_command: values.build_in_version_configs?.[key]?.run_command,
is_default: key === values.default_version,
backend_list: values.build_in_version_configs[key].backend_list || [],
backend_list:
values.build_in_version_configs?.[key]?.backend_list || [],
is_built_in: true
}));
@@ -171,7 +172,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
>
<SegmentedHeader>
<SegmentedInner
shape="round"
onChange={(value) => setActiveKey(value as string)}
options={[
{
src/pages/backends/config/schema/create.json
+7
View File
@@ -35,6 +35,13 @@
"run_command": {
"type": ["string", "null"],
"description": "start command"
},
"backend_list": {
"type": "array",
"items": {
"type": "string"
},
"description": "backend list"
}
},
"required": ["image_name", "run_command"],
src/pages/backends/config/schema/update-builtin.json
+7
View File
@@ -26,6 +26,13 @@
"run_command": {
"type": ["string", "null"],
"description": "start command"
},
"backend_list": {
"type": "array",
"items": {
"type": "string"
},
"description": "backend list"
}
},
"required": ["image_name", "run_command"],
src/pages/backends/config/schema/update-custom.json
+7
View File
@@ -30,6 +30,13 @@
"run_command": {
"type": ["string", "null"],
"description": "start command"
},
"backend_list": {
"type": "array",
"items": {
"type": "string"
},
"description": "backend list"
}
},
"required": ["image_name", "run_command"],
src/pages/backends/forms/basic.tsx
+16
View File
@@ -1,3 +1,4 @@
import ListInput from '@/components/list-input';
import SealInput from '@/components/seal-form/seal-input';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
@@ -44,8 +45,23 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
<SealInput.TextArea label="Default Execution Command"></SealInput.TextArea>
</Form.Item>
<Form.Item<FormData>
name="default_backend_param"
rules={[{ required: false }]}
>
<ListInput
dataList={form.getFieldValue('default_backend_param') || []}
onChange={(data: string[]) => {
form.setFieldValue('default_backend_param', data);
}}
btnText={'Add Backend Parameter'}
label={'Default Backend Parameters'}
></ListInput>
</Form.Item>
<Form.Item<FormData> name="description" rules={[{ required: false }]}>
<SealInput.TextArea
scaleSize={true}
label={intl.formatMessage({ id: 'common.table.description' })}
></SealInput.TextArea>
</Form.Item>
src/pages/backends/forms/index.tsx
+3 -18
View File
@@ -6,7 +6,6 @@ import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { FormData, ListItem } from '../config/types';
import BasicForm from './basic';
import BuiltInVersionsForm from './built-in-versions';
import ParametersForm from './parameters';
import VersionsForm from './versions-config';
type AddModalProps = {
@@ -72,6 +71,7 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
onFinishFailed={onFinishFailed}
>
<BasicForm action={action}></BasicForm>
<CollapsePanel
activeKey={activeKey}
accordion={false}
@@ -86,25 +86,10 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
children: <BuiltInVersionsForm></BuiltInVersionsForm>
}
]
: []),
{
key: 'version_configs',
label: 'Custom Versions',
forceRender: true,
children: (
<VersionsForm
action={action}
currentData={currentData}
></VersionsForm>
)
},
{
key: 'parameters',
label: 'Default Parameters',
children: <ParametersForm action={action}></ParametersForm>
}
: [])
]}
></CollapsePanel>
<VersionsForm action={action} currentData={currentData}></VersionsForm>
</Form>
);
}
src/pages/backends/forms/versions-config.tsx
+134 -77
View File
@@ -1,3 +1,4 @@
import CollapsibleContainer from '@/components/collapse-container';
import SealInput from '@/components/seal-form/seal-input';
import { PageActionType } from '@/config/types';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
@@ -21,6 +22,14 @@ const ActionWrapper = styled.div`
margin-top: 24px;
`;
const Title = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
margin-bottom: 8px;
`;
const Label = styled.div`
line-height: 1;
color: var(--ant-color-text-tertiary);
@@ -37,6 +46,7 @@ type AddModalProps = {
const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
const form = Form.useFormInstance();
const version_configs = Form.useWatch('version_configs', form);
const [collapseKey, setCollapseKey] = React.useState<string[]>(['0']);
const versionList = [
{
version_no: '',
@@ -76,6 +86,24 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
}
};
const onToggle = (open: boolean, key: string) => {
setCollapseKey(open ? [key] : []);
};
const handleAdd = async (add: (defaultValue?: any) => void) => {
try {
const isValid = await form.validateFields(['version_configs'], {
recursive: true
});
console.log('isValid:', isValid);
if (isValid) {
add();
}
} catch (error) {
console.log('Validation failed:', error);
}
};
useEffect(() => {
const versions = form.getFieldValue('version_configs') || [];
console.log('versions:', versions);
@@ -90,89 +118,118 @@ const VersionsForm: React.FC<AddModalProps> = ({ action, currentData }) => {
return (
<div
style={{
border: '1px solid var(--ant-color-border)',
borderRadius: 'var(--border-radius-base)',
padding: '14px'
display: 'flex',
flexDirection: 'column',
marginBottom: '24px'
}}
>
<Label>Custom Versions</Label>
<Title>
<span>Version Configurations</span>
<Button
onClick={() => handleAdd(add)}
variant="filled"
color="default"
>
<PlusOutlined /> Add Version
</Button>
</Title>
{fields.map(({ key, name, ...restField }, index) => (
<ItemWrapper key={key}>
<Box>
<Form.Item
{...restField}
name={[name, 'version_no']}
rules={[{ required: true, message: 'Version is required' }]}
>
<SealInput.Input
trim
label="Version"
required
></SealInput.Input>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'image_name']}
rules={[
{ required: true, message: 'Image Name is required' }
]}
>
<SealInput.Input
trim
label="Image Name"
required
></SealInput.Input>
</Form.Item>
</Box>
<Form.Item name={[name, 'run_command']} {...restField} noStyle>
<SealInput.TextArea label="Execution Command"></SealInput.TextArea>
</Form.Item>
<ActionWrapper>
<span className="flex-center">
{!currentData?.is_build_in && (
<Form.Item
{...restField}
name={[name, 'is_default']}
valuePropName="checked"
initialValue={false}
noStyle
<>
<CollapsibleContainer
collapsible={true}
key={key}
defaultOpen
open={collapseKey.includes(String(key))}
title={<span>{version_configs[name]?.version_no}</span>}
subtitle={
version_configs[name]?.image_name && (
<span style={{ marginLeft: 20 }}>
{version_configs[name]?.image_name}
</span>
)
}
onToggle={(open) => onToggle(open, key + '')}
deleteBtn={false}
right={
<div className="flex-center gap-8">
<span
className="flex-center"
onClick={(e) => e.stopPropagation()}
>
<Radio
onChange={(e: any) =>
handleSetDefaultVersion(e, index)
}
{!currentData?.is_build_in && (
<Form.Item
{...restField}
name={[name, 'is_default']}
valuePropName="checked"
initialValue={false}
noStyle
>
<Radio
onChange={(e: any) =>
handleSetDefaultVersion(e, index)
}
>
Default Version
</Radio>
</Form.Item>
)}
</span>
{(fields.length > 1 || currentData?.is_build_in) && (
<Button
size="small"
onClick={() => remove(name)}
shape="circle"
>
Set as Default Version
</Radio>
</Form.Item>
)}
</span>
<div className="flex-center gap-16">
{(fields.length > 1 || currentData?.is_build_in) && (
<Button
size="small"
onClick={() => remove(name)}
shape="circle"
>
<MinusOutlined />
</Button>
)}
</div>
</ActionWrapper>
<Divider
className="divider"
style={{ borderTop: '1px dashed var(--ant-color-border)' }}
/>
</ItemWrapper>
<MinusOutlined />
</Button>
)}
</div>
}
>
<Box>
<Form.Item
{...restField}
name={[name, 'version_no']}
rules={[
{ required: true, message: 'Version is required' }
]}
>
<SealInput.Input
trim
label="Version"
required
></SealInput.Input>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'image_name']}
rules={[
{ required: true, message: 'Image Name is required' }
]}
>
<SealInput.Input
trim
label="Image Name"
required
></SealInput.Input>
</Form.Item>
</Box>
<Form.Item
name={[name, 'run_command']}
{...restField}
noStyle
>
<SealInput.TextArea label="Execution Command"></SealInput.TextArea>
</Form.Item>
</CollapsibleContainer>
{index < fields.length - 1 && (
<Divider
className="divider"
style={{ borderTop: '1px dashed var(--ant-color-border)' }}
/>
)}
</>
))}
<Button
onClick={() => add()}
block
variant="filled"
color="default"
>
<PlusOutlined /> Add Version
</Button>
</div>
);
}}
src/pages/backends/forms/versions-form.tsx
+11
View File
@@ -0,0 +1,11 @@
import { Form } from 'antd';
import React from 'react';
import VersionsField from './versions-config';
const VersionsForm: React.FC = () => {
return (
<Form>
<VersionsField />
</Form>
);
};