fix: template api alignment
This commit is contained in:
jialin
@@ -1,53 +1,40 @@
|
||||
import { GPUsConfigs } from '@/pages/resources/config/gpu-driver';
|
||||
import {
|
||||
Input as CInput,
|
||||
InputNumber as CInputNumber,
|
||||
LabelSelector,
|
||||
Select as SealSelect,
|
||||
Textarea
|
||||
} from '@gpustack/core-ui';
|
||||
import { Input as CInput, Textarea } from '@gpustack/core-ui';
|
||||
import { Form } from 'antd';
|
||||
import { FormData } from '../config/types';
|
||||
import Env from './env';
|
||||
import Ports from './ports';
|
||||
|
||||
interface BasicProps {
|
||||
page?: 'template' | 'instance';
|
||||
}
|
||||
|
||||
const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
|
||||
const Basic: React.FC<BasicProps> = () => {
|
||||
const form = Form.useFormInstance<FormData>();
|
||||
const gpuVendorOptions = Object.values(GPUsConfigs);
|
||||
|
||||
const handleCommandChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const list = value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0);
|
||||
form.setFieldValue('command', list);
|
||||
};
|
||||
|
||||
const command = Form.useWatch('command', form);
|
||||
const commandText = Array.isArray(command) ? command.join('\n') : '';
|
||||
|
||||
return (
|
||||
<>
|
||||
{page === 'template' && (
|
||||
<Form.Item<FormData>
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入模板名称'
|
||||
}
|
||||
]}
|
||||
>
|
||||
<CInput.Input label="名称" required />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Form.Item<FormData>
|
||||
name="vendor"
|
||||
data-field="vendor"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择适用设备厂商'
|
||||
message: '请输入模板名称'
|
||||
}
|
||||
]}
|
||||
>
|
||||
<SealSelect
|
||||
label="适用设备厂商"
|
||||
required
|
||||
options={[...gpuVendorOptions, { label: 'CPU', value: 'cpu' }]}
|
||||
></SealSelect>
|
||||
<CInput.Input label="名称" required />
|
||||
</Form.Item>
|
||||
<Form.Item<FormData>
|
||||
name="image"
|
||||
@@ -60,22 +47,34 @@ const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
|
||||
>
|
||||
<CInput.Input label="容器镜像" required />
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name="run_command">
|
||||
<Form.Item>
|
||||
<Textarea
|
||||
label="容器启动命令"
|
||||
placeholder={'例如：/bin/bash -c "your command"'}
|
||||
placeholder={'每行一个参数，例如：\n/bin/bash\n-c\nyour command'}
|
||||
trim={false}
|
||||
alwaysFocus
|
||||
scaleSize
|
||||
value={commandText}
|
||||
onChange={handleCommandChange}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item<FormData> name="boot_disk_size_gb">
|
||||
<CInputNumber min={1} precision={0} label="容器启动盘大小 (GB)" />
|
||||
<Form.Item<FormData> name="volumeMount">
|
||||
<CInput.Input label="挂载路径" placeholder="例如：/workspace" />
|
||||
</Form.Item>
|
||||
<div style={{ display: 'flex', gap: 16 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Form.Item<FormData> name={['resources', 'cpu']}>
|
||||
<CInput.Input label="CPU" placeholder="例如：4" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<Form.Item<FormData> name={['resources', 'ram']}>
|
||||
<CInput.Input label="内存" placeholder="例如：8Gi" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
<Ports />
|
||||
<Form.Item<FormData> name="env">
|
||||
<LabelSelector label="环境变量" btnText="添加变量" />
|
||||
</Form.Item>
|
||||
<Env />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Input as CInput, MetadataList } from '@gpustack/core-ui';
|
||||
import { Form } from 'antd';
|
||||
import { EnvItem as EnvItemType, FormData } from '../config/types';
|
||||
|
||||
interface EnvItemProps {
|
||||
item: EnvItemType;
|
||||
index: number;
|
||||
onChange: (item: EnvItemType) => void;
|
||||
}
|
||||
|
||||
const EnvItem: React.FC<EnvItemProps> = ({ item, onChange }) => {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12, width: '100%' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<CInput.Input
|
||||
value={item.name}
|
||||
placeholder="名称"
|
||||
onChange={(e) => {
|
||||
onChange({
|
||||
...item,
|
||||
name: e.target.value
|
||||
});
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<CInput.Input
|
||||
value={item.value}
|
||||
placeholder="值"
|
||||
onChange={(e) => {
|
||||
onChange({
|
||||
...item,
|
||||
value: e.target.value
|
||||
});
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Env: React.FC = () => {
|
||||
const form = Form.useFormInstance<FormData>();
|
||||
const env = Form.useWatch('env', form) || [];
|
||||
|
||||
const updateEnv = (list: EnvItemType[]) => {
|
||||
form.setFieldValue('env', list);
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
updateEnv([
|
||||
...env,
|
||||
{
|
||||
name: '',
|
||||
value: ''
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
const newList = [...env];
|
||||
newList.splice(index, 1);
|
||||
updateEnv(newList);
|
||||
};
|
||||
|
||||
const handleChange = (index: number, item: EnvItemType) => {
|
||||
const newList = [...env];
|
||||
newList[index] = item;
|
||||
updateEnv(newList);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form.Item<FormData>
|
||||
name="env"
|
||||
rules={[
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
if (!value?.length) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
const hasInvalid = value.some((item: EnvItemType) => !item.name);
|
||||
if (hasInvalid) {
|
||||
return Promise.reject(new Error('请填写完整的环境变量'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]}
|
||||
>
|
||||
<MetadataList
|
||||
dataList={env}
|
||||
btnText="添加环境变量"
|
||||
label="环境变量"
|
||||
onAdd={handleAdd}
|
||||
onDelete={handleDelete}
|
||||
>
|
||||
{(item, index) => (
|
||||
<EnvItem
|
||||
key={index}
|
||||
index={index}
|
||||
item={item}
|
||||
onChange={(data) => handleChange(index, data)}
|
||||
/>
|
||||
)}
|
||||
</MetadataList>
|
||||
</Form.Item>
|
||||
);
|
||||
};
|
||||
|
||||
export default Env;
|
||||
@@ -28,26 +28,27 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
|
||||
form.setFieldsValue({
|
||||
name: currentData.name,
|
||||
image: currentData.image,
|
||||
vendor: currentData.vendor,
|
||||
image_pull_policy: currentData.image_pull_policy,
|
||||
run_command: currentData.run_command,
|
||||
boot_disk_size_gb: currentData.boot_disk_size_gb,
|
||||
volume_size_gb: currentData.volume_size_gb,
|
||||
volume_mount_path: currentData.volume_mount_path,
|
||||
command: currentData.command || [],
|
||||
ports: currentData.ports || [],
|
||||
env: currentData.env || {}
|
||||
env: currentData.env || [],
|
||||
volumeMount: currentData.volumeMount,
|
||||
resources: {
|
||||
cpu: currentData.resources?.cpu,
|
||||
ram: currentData.resources?.ram
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
form.setFieldsValue({
|
||||
command: [],
|
||||
ports: [
|
||||
{
|
||||
protocol: 'tcp',
|
||||
value: 22
|
||||
port: 22
|
||||
}
|
||||
],
|
||||
env: {}
|
||||
env: []
|
||||
});
|
||||
}, [action, currentData, form, open]);
|
||||
|
||||
@@ -66,15 +67,6 @@ const GPUServiceTemplateForm: React.FC<TemplateFormProps> = forwardRef(
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
preserve={false}
|
||||
initialValues={{
|
||||
boot_disk_size_gb: 30,
|
||||
ports: [
|
||||
{
|
||||
protocol: 'udp',
|
||||
value: 22
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<Basic />
|
||||
</Form>
|
||||
|
||||
@@ -46,11 +46,11 @@ const PortItem: React.FC<PortItemProps> = ({ item, index, onChange }) => {
|
||||
min={1}
|
||||
max={65535}
|
||||
precision={0}
|
||||
value={item.value}
|
||||
value={item.port}
|
||||
onChange={(value) => {
|
||||
onChange({
|
||||
...item,
|
||||
value: typeof value === 'number' ? value : undefined
|
||||
port: typeof value === 'number' ? value : (undefined as any)
|
||||
});
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
@@ -72,7 +72,8 @@ const Ports: React.FC = () => {
|
||||
updatePorts([
|
||||
...ports,
|
||||
{
|
||||
protocol: 'tcp'
|
||||
protocol: 'tcp',
|
||||
port: undefined as any
|
||||
}
|
||||
]);
|
||||
};
|
||||
@@ -99,7 +100,7 @@ const Ports: React.FC = () => {
|
||||
return Promise.resolve();
|
||||
}
|
||||
const hasInvalidPort = value.some(
|
||||
(item: PortItemType) => !item.protocol || !item.value
|
||||
(item: PortItemType) => !item.protocol || !item.port
|
||||
);
|
||||
if (hasInvalidPort) {
|
||||
return Promise.reject(new Error('请填写完整的端口配置'));
|
||||
|
||||
Reference in New Issue
Block a user