fix: template api alignment
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { request } from '@umijs/max';
|
||||
import { mockTemplateData } from '../config/mock-data';
|
||||
import { FormData, ListItem } from '../config/types';
|
||||
|
||||
export const GPU_SERVICE_TEMPLATES_API = '/gpu-service-templates';
|
||||
@@ -8,53 +7,28 @@ export async function queryGPUServiceTemplates(
|
||||
params: Global.SearchParams,
|
||||
options?: any
|
||||
) {
|
||||
// return request<Global.PageResponse<ListItem>>(GPU_SERVICE_TEMPLATES_API, {
|
||||
// method: 'GET',
|
||||
// params,
|
||||
// cancelToken: options?.token
|
||||
// });
|
||||
const page = params.page || 1;
|
||||
const perPage = params.perPage || 24;
|
||||
const search = params.search?.toLowerCase();
|
||||
const vendor = params.vendor;
|
||||
const filteredData = mockTemplateData.filter((item) => {
|
||||
const matchSearch = search
|
||||
? item.name.toLowerCase().includes(search)
|
||||
: true;
|
||||
const matchVendor = vendor ? item.vendor === vendor : true;
|
||||
return matchSearch && matchVendor;
|
||||
return request<Global.PageResponse<ListItem>>(GPU_SERVICE_TEMPLATES_API, {
|
||||
method: 'GET',
|
||||
params,
|
||||
cancelToken: options?.token
|
||||
});
|
||||
const start = (page - 1) * perPage;
|
||||
const items = filteredData.slice(start, start + perPage);
|
||||
|
||||
return {
|
||||
items,
|
||||
pagination: {
|
||||
total: filteredData.length,
|
||||
totalPage: Math.ceil(filteredData.length / perPage),
|
||||
page,
|
||||
perPage
|
||||
}
|
||||
} as Global.PageResponse<ListItem>;
|
||||
}
|
||||
|
||||
export async function createGPUServiceTemplate(params: { data: FormData }) {
|
||||
// return request<ListItem>(GPU_SERVICE_TEMPLATES_API, {
|
||||
// method: 'POST',
|
||||
// data: params.data
|
||||
// });
|
||||
return true;
|
||||
return request<ListItem>(GPU_SERVICE_TEMPLATES_API, {
|
||||
method: 'POST',
|
||||
data: params.data
|
||||
});
|
||||
}
|
||||
|
||||
export async function updateGPUServiceTemplate(params: {
|
||||
id: number;
|
||||
data: FormData;
|
||||
}) {
|
||||
// return request<ListItem>(`${GPU_SERVICE_TEMPLATES_API}/${params.id}`, {
|
||||
// method: 'PUT',
|
||||
// data: params.data
|
||||
// });
|
||||
return true;
|
||||
return request<ListItem>(`${GPU_SERVICE_TEMPLATES_API}/${params.id}`, {
|
||||
method: 'PUT',
|
||||
data: params.data
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteGPUServiceTemplate(id: number) {
|
||||
|
||||
@@ -1,23 +1,12 @@
|
||||
import ascendLogo from '@/assets/logo/ascend.png';
|
||||
import CambriconPNG from '@/assets/logo/cambricon.png';
|
||||
import hygonPNG from '@/assets/logo/hygon.png';
|
||||
import iluvatarLogo from '@/assets/logo/Iluvatar.png';
|
||||
import metaxLogo from '@/assets/logo/metax.png';
|
||||
import mooreLogo from '@/assets/logo/moore-logo.png';
|
||||
import nvidiaLogo from '@/assets/logo/nvidia.png';
|
||||
import theadLogoEN from '@/assets/logo/t-head-en.png';
|
||||
import theadLogoZH from '@/assets/logo/t-head-zh.png';
|
||||
import { GPUDriverMap, GPUsConfigs } from '@/pages/resources/config/gpu-driver';
|
||||
import {
|
||||
AutoTooltip,
|
||||
DropdownActions,
|
||||
IconFont,
|
||||
TemplateCard
|
||||
} from '@gpustack/core-ui';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
import styled from 'styled-components';
|
||||
import { templateActions, TemplateStatusValueMap } from '../config';
|
||||
import { templateActions } from '../config';
|
||||
import { ListItem } from '../config/types';
|
||||
|
||||
const StyledCard = styled(TemplateCard)`
|
||||
@@ -37,32 +26,15 @@ const Header = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const VendorLogo = styled.span`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 48px;
|
||||
max-width: 88px;
|
||||
height: 18px;
|
||||
.logo-img {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.amd-logo {
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
`;
|
||||
|
||||
const CardName = styled.div`
|
||||
const CardTitle = styled.div`
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--ant-color-text);
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
@@ -94,55 +66,7 @@ interface TemplateCardProps {
|
||||
onSelect?: (item: { action: string; data: ListItem }) => void;
|
||||
}
|
||||
|
||||
const vendorLogoMap: Record<string, { src: string; height: number }> = {
|
||||
[GPUDriverMap.NVIDIA]: { src: nvidiaLogo, height: 16 },
|
||||
[GPUDriverMap.ASCEND]: { src: ascendLogo, height: 18 },
|
||||
[GPUDriverMap.HYGON]: { src: hygonPNG, height: 16 },
|
||||
[GPUDriverMap.MOORE_THREADS]: { src: mooreLogo, height: 18 },
|
||||
[GPUDriverMap.ILUVATAR]: { src: iluvatarLogo, height: 18 },
|
||||
[GPUDriverMap.CAMBRICON]: { src: CambriconPNG, height: 18 },
|
||||
[GPUDriverMap.METAX]: { src: metaxLogo, height: 18 }
|
||||
};
|
||||
|
||||
const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
|
||||
const intl = useIntl();
|
||||
const vendorLabel = data.vendor
|
||||
? GPUsConfigs[data.vendor]?.label || data.vendor
|
||||
: '-';
|
||||
|
||||
const renderVendor = () => {
|
||||
if (data.vendor === GPUDriverMap.AMD) {
|
||||
return (
|
||||
<VendorLogo title={vendorLabel}>
|
||||
<IconFont className="amd-logo" type="icon-amd-logo" />
|
||||
</VendorLogo>
|
||||
);
|
||||
}
|
||||
|
||||
const logo =
|
||||
data.vendor === GPUDriverMap.THEAD
|
||||
? {
|
||||
src: intl.locale === 'zh-CN' ? theadLogoZH : theadLogoEN,
|
||||
height: 18
|
||||
}
|
||||
: vendorLogoMap[data.vendor || ''];
|
||||
|
||||
if (!logo) {
|
||||
return vendorLabel;
|
||||
}
|
||||
|
||||
return (
|
||||
<VendorLogo title={vendorLabel}>
|
||||
<img
|
||||
alt={vendorLabel}
|
||||
className="logo-img"
|
||||
src={logo.src}
|
||||
style={{ height: logo.height }}
|
||||
/>
|
||||
</VendorLogo>
|
||||
);
|
||||
};
|
||||
|
||||
const handleOnSelect = (item: any) => {
|
||||
onSelect?.({ action: item.key, data });
|
||||
};
|
||||
@@ -170,7 +94,14 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const status = data.status || TemplateStatusValueMap.Enabled;
|
||||
const ports = data.ports || [];
|
||||
const portText = ports.length
|
||||
? ports.map((p) => `${p.protocol?.toUpperCase()}:${p.port}`).join(', ')
|
||||
: '-';
|
||||
|
||||
const resources = [data.resources?.cpu, data.resources?.ram]
|
||||
.filter(Boolean)
|
||||
.join(' / ');
|
||||
|
||||
return (
|
||||
<StyledCard
|
||||
@@ -181,17 +112,16 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
|
||||
ghost
|
||||
header={
|
||||
<Header>
|
||||
{renderVendor()}
|
||||
<CardTitle>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{data.name || '-'}
|
||||
</AutoTooltip>
|
||||
</CardTitle>
|
||||
{renderActions()}
|
||||
</Header>
|
||||
}
|
||||
>
|
||||
<Content>
|
||||
<CardName>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
{data.name}
|
||||
</AutoTooltip>
|
||||
</CardName>
|
||||
<InfoItem>
|
||||
<span>
|
||||
<IconFont className="icon" type="icon-model" /> 镜像:
|
||||
@@ -200,6 +130,30 @@ const TemplateCardItem: React.FC<TemplateCardProps> = ({ data, onSelect }) => {
|
||||
<span className="value">{data.image || '-'}</span>
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
<InfoItem>
|
||||
<span>
|
||||
<IconFont className="icon" type="icon-storage-outlined" /> 挂载:
|
||||
</span>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
<span className="value">{data.volumeMount || '-'}</span>
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
<InfoItem>
|
||||
<span>
|
||||
<IconFont className="icon" type="icon-gpu1" /> 资源:
|
||||
</span>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
<span className="value">{resources || '-'}</span>
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
<InfoItem>
|
||||
<span>
|
||||
<IconFont className="icon" type="icon-network" /> 端口:
|
||||
</span>
|
||||
<AutoTooltip ghost minWidth={20}>
|
||||
<span className="value">{portText}</span>
|
||||
</AutoTooltip>
|
||||
</InfoItem>
|
||||
</Content>
|
||||
</StyledCard>
|
||||
);
|
||||
|
||||
@@ -5,26 +5,17 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 1,
|
||||
name: 'Ubuntu CUDA Dev',
|
||||
image: 'nvidia/cuda:12.4.1-devel-ubuntu22.04',
|
||||
vendor: 'cuda',
|
||||
run_command: '/bin/bash',
|
||||
boot_disk_size_gb: 30,
|
||||
volume_size_gb: 100,
|
||||
volume_mount_path: '/workspace',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'tcp',
|
||||
value: 22
|
||||
},
|
||||
{
|
||||
protocol: 'udp',
|
||||
value: 8888
|
||||
}
|
||||
],
|
||||
env: {
|
||||
NVIDIA_VISIBLE_DEVICES: 'all'
|
||||
command: ['/bin/bash'],
|
||||
volumeMount: '/workspace',
|
||||
resources: {
|
||||
cpu: '4',
|
||||
ram: '16Gi'
|
||||
},
|
||||
gpu_count: 1,
|
||||
replicas: 1,
|
||||
ports: [
|
||||
{ protocol: 'tcp', port: 22 },
|
||||
{ protocol: 'udp', port: 8888 }
|
||||
],
|
||||
env: [{ name: 'NVIDIA_VISIBLE_DEVICES', value: 'all' }],
|
||||
status: 'enabled',
|
||||
created_at: '2026-04-01T10:00:00Z',
|
||||
updated_at: '2026-04-10T10:00:00Z'
|
||||
@@ -33,22 +24,14 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 2,
|
||||
name: 'PyTorch Training',
|
||||
image: 'pytorch/pytorch:2.5.1-cuda12.4-cudnn9-devel',
|
||||
vendor: 'cuda',
|
||||
run_command: 'python train.py',
|
||||
boot_disk_size_gb: 50,
|
||||
volume_size_gb: 200,
|
||||
volume_mount_path: '/data',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'tcp',
|
||||
value: 6006
|
||||
}
|
||||
],
|
||||
env: {
|
||||
PYTHONUNBUFFERED: '1'
|
||||
command: ['python', 'train.py'],
|
||||
volumeMount: '/data',
|
||||
resources: {
|
||||
cpu: '8',
|
||||
ram: '32Gi'
|
||||
},
|
||||
gpu_count: 2,
|
||||
replicas: 1,
|
||||
ports: [{ protocol: 'tcp', port: 6006 }],
|
||||
env: [{ name: 'PYTHONUNBUFFERED', value: '1' }],
|
||||
status: 'enabled',
|
||||
created_at: '2026-04-02T10:00:00Z',
|
||||
updated_at: '2026-04-11T10:00:00Z'
|
||||
@@ -57,22 +40,14 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 3,
|
||||
name: 'ROCm Notebook',
|
||||
image: 'rocm/pytorch:latest',
|
||||
vendor: 'rocm',
|
||||
run_command: 'jupyter lab --ip=0.0.0.0 --allow-root',
|
||||
boot_disk_size_gb: 40,
|
||||
volume_size_gb: 120,
|
||||
volume_mount_path: '/notebooks',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'http',
|
||||
value: 8888
|
||||
}
|
||||
],
|
||||
env: {
|
||||
HSA_OVERRIDE_GFX_VERSION: '10.3.0'
|
||||
command: ['jupyter', 'lab', '--ip=0.0.0.0', '--allow-root'],
|
||||
volumeMount: '/notebooks',
|
||||
resources: {
|
||||
cpu: '4',
|
||||
ram: '16Gi'
|
||||
},
|
||||
gpu_count: 1,
|
||||
replicas: 1,
|
||||
ports: [{ protocol: 'tcp', port: 8888 }],
|
||||
env: [{ name: 'HSA_OVERRIDE_GFX_VERSION', value: '10.3.0' }],
|
||||
status: 'enabled',
|
||||
created_at: '2026-04-03T10:00:00Z',
|
||||
updated_at: '2026-04-12T10:00:00Z'
|
||||
@@ -81,22 +56,14 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 4,
|
||||
name: 'Ascend MindIE',
|
||||
image: 'ascend/mindie:latest',
|
||||
vendor: 'cann',
|
||||
run_command: '/usr/local/Ascend/mindie/latest/bin/mindieservice_daemon',
|
||||
boot_disk_size_gb: 60,
|
||||
volume_size_gb: 160,
|
||||
volume_mount_path: '/models',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'http',
|
||||
value: 1025
|
||||
}
|
||||
],
|
||||
env: {
|
||||
ASCEND_VISIBLE_DEVICES: '0'
|
||||
command: ['/usr/local/Ascend/mindie/latest/bin/mindieservice_daemon'],
|
||||
volumeMount: '/models',
|
||||
resources: {
|
||||
cpu: '4',
|
||||
ram: '16Gi'
|
||||
},
|
||||
gpu_count: 1,
|
||||
replicas: 1,
|
||||
ports: [{ protocol: 'tcp', port: 1025 }],
|
||||
env: [{ name: 'ASCEND_VISIBLE_DEVICES', value: '0' }],
|
||||
status: 'enabled',
|
||||
created_at: '2026-04-04T10:00:00Z',
|
||||
updated_at: '2026-04-13T10:00:00Z'
|
||||
@@ -105,20 +72,14 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 5,
|
||||
name: 'CPU Utility',
|
||||
image: 'ubuntu:22.04',
|
||||
vendor: 'cuda',
|
||||
run_command: 'sleep infinity',
|
||||
boot_disk_size_gb: 20,
|
||||
volume_size_gb: 50,
|
||||
volume_mount_path: '/mnt/data',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'tcp',
|
||||
value: 22
|
||||
}
|
||||
],
|
||||
env: {},
|
||||
gpu_count: 0,
|
||||
replicas: 1,
|
||||
command: ['sleep', 'infinity'],
|
||||
volumeMount: '/mnt/data',
|
||||
resources: {
|
||||
cpu: '2',
|
||||
ram: '4Gi'
|
||||
},
|
||||
ports: [{ protocol: 'tcp', port: 22 }],
|
||||
env: [],
|
||||
status: 'disabled',
|
||||
created_at: '2026-04-05T10:00:00Z',
|
||||
updated_at: '2026-04-14T10:00:00Z'
|
||||
@@ -127,26 +88,17 @@ export const mockTemplateData: ListItem[] = [
|
||||
id: 6,
|
||||
name: 'Inference Server',
|
||||
image: 'vllm/vllm-openai:latest',
|
||||
vendor: 'cuda',
|
||||
run_command: 'python -m vllm.entrypoints.openai.api_server',
|
||||
boot_disk_size_gb: 80,
|
||||
volume_size_gb: 300,
|
||||
volume_mount_path: '/models',
|
||||
ports: [
|
||||
{
|
||||
protocol: 'udp',
|
||||
value: 8000
|
||||
},
|
||||
{
|
||||
protocol: 'tcp',
|
||||
value: 8080
|
||||
}
|
||||
],
|
||||
env: {
|
||||
VLLM_WORKER_MULTIPROC_METHOD: 'spawn'
|
||||
command: ['python', '-m', 'vllm.entrypoints.openai.api_server'],
|
||||
volumeMount: '/models',
|
||||
resources: {
|
||||
cpu: '16',
|
||||
ram: '64Gi'
|
||||
},
|
||||
gpu_count: 4,
|
||||
replicas: 2,
|
||||
ports: [
|
||||
{ protocol: 'udp', port: 8000 },
|
||||
{ protocol: 'tcp', port: 8080 }
|
||||
],
|
||||
env: [{ name: 'VLLM_WORKER_MULTIPROC_METHOD', value: 'spawn' }],
|
||||
status: 'enabled',
|
||||
created_at: '2026-04-06T10:00:00Z',
|
||||
updated_at: '2026-04-15T10:00:00Z'
|
||||
|
||||
@@ -9,13 +9,13 @@ export interface EnvItem {
|
||||
}
|
||||
|
||||
export interface FormData {
|
||||
name: string;
|
||||
image: string;
|
||||
imagePullPolicy: string;
|
||||
imagePullSecret: {
|
||||
name: string;
|
||||
};
|
||||
// imagePullPolicy: string;
|
||||
// imagePullSecret: {
|
||||
// name: string;
|
||||
// };
|
||||
command: string[];
|
||||
privileged: boolean;
|
||||
ports: PortItem[];
|
||||
env: EnvItem[];
|
||||
volumeMount: string;
|
||||
|
||||
@@ -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('请填写完整的端口配置'));
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { PageAction } from '@/config';
|
||||
import useTableFetch from '@/hooks/use-table-fetch';
|
||||
import { GPUsConfigs } from '@/pages/resources/config/gpu-driver';
|
||||
import {
|
||||
DeleteModal,
|
||||
FilterBar,
|
||||
@@ -30,7 +29,6 @@ const GPUServiceTemplates: React.FC = () => {
|
||||
rowSelection,
|
||||
queryParams,
|
||||
modalRef,
|
||||
handleQueryChange,
|
||||
fetchData,
|
||||
handleDelete,
|
||||
handleSearch,
|
||||
@@ -75,18 +73,6 @@ const GPUServiceTemplates: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const gpuVendorOptions = Object.values(GPUsConfigs).map((item) => ({
|
||||
label: item.label,
|
||||
value: item.value
|
||||
}));
|
||||
|
||||
const handleFilterByVendor = (value: string) => {
|
||||
handleQueryChange({
|
||||
vendor: value,
|
||||
page: 1
|
||||
});
|
||||
};
|
||||
|
||||
const handleOnSelect = (item: { action: string; data: ListItem }) => {
|
||||
if (item.action === 'edit') {
|
||||
handleEditTemplate(item.data);
|
||||
@@ -116,15 +102,12 @@ const GPUServiceTemplates: React.FC = () => {
|
||||
input: 230
|
||||
}}
|
||||
inputHolder="按名称过滤"
|
||||
selectHolder="按厂商过滤"
|
||||
buttonText="添加实例模板"
|
||||
handleClickPrimary={handleAddTemplate}
|
||||
handleSearch={handleSearch}
|
||||
handleSelectChange={handleFilterByVendor}
|
||||
handleInputChange={handleNameChange}
|
||||
rowSelection={rowSelection}
|
||||
showSelect={true}
|
||||
selectOptions={gpuVendorOptions}
|
||||
showSelect={false}
|
||||
/>
|
||||
<InfiniteScrollerProvider
|
||||
value={{
|
||||
|
||||
Reference in New Issue
Block a user