fix: template api alignment

This commit is contained in:
jialin
2026-05-11 19:49:21 +08:00
committed by jialin
parent 7d0cfeff77
commit 7ee1635833
9 changed files with 272 additions and 305 deletions
+12 -38
View File
@@ -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;
+37 -38
View File
@@ -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;
+10 -18
View File
@@ -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 -18
View File
@@ -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={{