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

fix: instance api alignment

Browse Source
This commit is contained in:
jialin
2026-05-11 19:49:21 +08:00
committed by jialin
parent 7ee1635833
commit 63ac4e0e75
22 changed files with 755 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/index.tsx
+1 -1
View File
@@ -356,7 +356,7 @@ export default (props: any) => {
config={{
apiBaseUrl: GPUSTACK_API_BASE_URL,
theme: userSettings.theme,
iconUrl: '//at.alicdn.com/t/c/font_4613488_ieeghfm8o3o.js',
iconUrl: '//at.alicdn.com/t/c/font_4613488_tzcsatubq4f.js',
isDarkTheme: userSettings.isDarkTheme,
defaultColorPrimary: COLOR_PRIMARY
}}
src/pages/gpu-service/constants.ts
+1
View File
@@ -3,6 +3,7 @@ export const apiVersion = 'worker.gpustack.ai/v1';
export const KindMapping = {
sshPublicKey: 'InstanceSSHPublicKey',
instance: 'Instance',
instanceType: 'InstanceType',
instancePersistentVolume: 'InstancePersistentVolume',
instanceTemplate: 'InstanceTemplate'
};
src/pages/gpu-service/instances/apis/index.ts
+53 -51
View File
@@ -1,6 +1,5 @@
import { request } from '@umijs/max';
import { mockInstanceData } from '../config/mock-data';
import { FormData, InstanceTypeItem, ListItem } from '../config/types';
import { InstanceTypeItem, ListItem } from '../config/types';
export const GPU_SERVICE_INSTANCES_API = (namespace: string) =>
`/proxy/apis/worker.gpustack.ai/v1/namespaces/${namespace}/instances`;
@@ -12,61 +11,64 @@ export async function queryGPUServiceInstances(
params: Global.K8sSearchParams,
options?: any
) {
// return request<Global.PageResponse<ListItem>>(GPU_SERVICE_INSTANCES_API, {
// method: 'GET',
// params,
// cancelToken: options?.token
// });
const page = params.page || 1;
const perPage = params.perPage || 10;
const search = params.search?.toLowerCase();
const clusterId = params.cluster_id;
const filteredData = mockInstanceData.filter((item) => {
const matchSearch = search
? item.name.toLowerCase().includes(search)
: true;
const matchCluster = clusterId ? item.cluster_id === clusterId : true;
return matchSearch && matchCluster;
});
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
return request<Global.K8sPageResponse<ListItem>>(
GPU_SERVICE_INSTANCES_API(params.namespace || ''),
{
method: 'GET',
params,
cancelToken: options?.token
}
} as Global.K8sPageResponse<ListItem>;
);
}
export async function createGPUServiceInstance(params: { data: FormData }) {
// return request<ListItem>(GPU_SERVICE_INSTANCES_API, {
// method: 'POST',
// data: params.data
// });
return true;
}
export async function updateGPUServiceInstance(params: {
id: number;
data: FormData;
}) {
// return request<ListItem>(`${GPU_SERVICE_INSTANCES_API}/${params.id}`, {
// method: 'PUT',
// data: params.data
// });
return true;
}
export async function deleteGPUServiceInstance(id: number) {
return request(`${GPU_SERVICE_INSTANCES_API}/${id}`, {
method: 'DELETE'
export async function createGPUServiceInstance(
params: {
namespace: string;
data: Global.K8sCommonData;
},
option?: any
) {
return request<ListItem>(GPU_SERVICE_INSTANCES_API(params.namespace), {
method: 'POST',
data: params.data,
cancelToken: option?.token
});
}
export async function updateGPUServiceInstance(
params: {
namespace: string;
id: number;
data: Global.K8sCommonData;
},
option?: any
) {
return request<ListItem>(
`${GPU_SERVICE_INSTANCES_API(params.namespace)}/${params.id}`,
{
method: 'PUT',
data: params.data,
cancelToken: option?.token
}
);
}
export async function deleteGPUServiceInstance(
params: {
namespace: string;
id: number;
},
option?: any
) {
return request(
`${GPU_SERVICE_INSTANCES_API(params.namespace)}/${params.id}`,
{
method: 'DELETE',
cancelToken: option?.token
}
);
}
// =========== Instance Types ===========
export async function queryGPUServiceInstanceTypes(
src/pages/gpu-service/instances/components/add-modal.tsx
+37 -26
View File
@@ -3,13 +3,13 @@ import Separator from '@/pages/llmodels/components/separator';
import { SearchOutlined } from '@ant-design/icons';
import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
import { Empty, Input, Typography } from 'antd';
import { useMemo, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import { mockTemplateData } from '../../templates/config/mock-data';
import { instanceTypeOptions } from '../config';
import { FormData, ListItem } from '../config/types';
import { FormData, InstanceTypeItem, ListItem } from '../config/types';
import GPUServiceInstanceForm from '../forms';
import TemplateSelector from '../forms/template-selector';
import useQueryInstanceTypes from '../services/use-query-instance-types';
import InstanceTypeList from './instance-type-list';
const Container = styled.div`
@@ -58,26 +58,37 @@ const AddModal: React.FC<AddModalProps> = ({
onCancel
}) => {
const form = useRef<any>(null);
const [instanceTypeId, setInstanceTypeId] = useState<number>();
const [instanceTypeName, setInstanceTypeName] = useState<string>();
const [templateId, setTemplateId] = useState<number>();
const [instanceKeyword, setInstanceKeyword] = useState('');
const [templateKeyword, setTemplateKeyword] = useState('');
const { detailData, fetchData } = useQueryInstanceTypes();
useEffect(() => {
if (open) {
fetchData({});
}
}, [open, fetchData]);
const instanceTypeList = detailData?.items || [];
const filteredInstanceTypes = useMemo(() => {
const keyword = instanceKeyword.trim().toLowerCase();
if (!keyword) {
return instanceTypeOptions;
return instanceTypeList;
}
return instanceTypeOptions.filter((item) =>
[
item.name,
String(item.gpu_count),
String(item.vram),
String(item.ram),
String(item.vCPU)
].some((text) => text.toLowerCase().includes(keyword))
);
}, [instanceKeyword]);
return instanceTypeList.filter((item) => {
const name = item.metadata?.name || item.name || '';
return [
name,
item.spec?.memory ?? '',
item.status?.cpu?.capacity ?? '',
item.status?.ram?.capacity ?? '',
item.status?.accelerator?.remaining ?? ''
].some((text) => String(text).toLowerCase().includes(keyword));
});
}, [instanceKeyword, instanceTypeList]);
const filteredTemplates = useMemo(() => {
const keyword = templateKeyword.trim().toLowerCase();
@@ -85,13 +96,9 @@ const AddModal: React.FC<AddModalProps> = ({
return mockTemplateData;
}
return mockTemplateData.filter((item) =>
[
item.name,
item.image,
item.vendor,
item.volume_mount_path,
String(item.volume_size_gb ?? '')
].some((text) => (text || '').toLowerCase().includes(keyword))
[item.name, item.image, item.volumeMount].some((text) =>
(text || '').toLowerCase().includes(keyword)
)
);
}, [templateKeyword]);
@@ -110,6 +117,10 @@ const AddModal: React.FC<AddModalProps> = ({
});
};
const handleInstanceTypeChange = (item: InstanceTypeItem) => {
setInstanceTypeName(item.metadata?.name || item.name);
};
return (
<GSDrawer
title={title}
@@ -142,16 +153,16 @@ const AddModal: React.FC<AddModalProps> = ({
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
placeholder="搜索名称、GPU、显存、内存或 vCPU"
placeholder="搜索名称、显存、内存或 vCPU"
value={instanceKeyword}
onChange={(e) => setInstanceKeyword(e.target.value)}
/>
</div>
{filteredInstanceTypes.length > 0 ? (
<InstanceTypeList
value={instanceTypeId}
value={instanceTypeName}
dataList={filteredInstanceTypes}
onChange={setInstanceTypeId}
onChange={handleInstanceTypeChange}
/>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
@@ -174,7 +185,7 @@ const AddModal: React.FC<AddModalProps> = ({
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
placeholder="搜索模板名称、镜像、厂商或挂载路径"
placeholder="搜索模板名称、镜像或挂载路径"
value={templateKeyword}
onChange={(e) => setTemplateKeyword(e.target.value)}
/>
src/pages/gpu-service/instances/components/instance-type-list.tsx
+21 -20
View File
@@ -1,8 +1,8 @@
import { AutoTooltip, TemplateCard } from '@gpustack/core-ui';
import { Flex, Tag } from 'antd';
import styled from 'styled-components';
import { InstanceTypeStatusValueMap, instanceTypeOptions } from '../config';
import { InstanceItem } from '../config/types';
import { InstanceTypePhaseValueMap } from '../config';
import { InstanceTypeItem } from '../config/types';
const TypeGrid = styled.div`
display: flex;
@@ -38,43 +38,44 @@ const TypeMeta = styled.div`
`;
interface InstanceTypeListProps {
value?: number;
onChange?: (value: number) => void;
dataList?: InstanceItem[];
value?: string;
onChange?: (item: InstanceTypeItem) => void;
dataList?: InstanceTypeItem[];
}
const isAvailable = (item: InstanceTypeItem) =>
item.status?.phase === InstanceTypePhaseValueMap.Available;
const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
value,
onChange,
dataList = instanceTypeOptions
dataList = []
}) => {
const handleSelect = (item: InstanceItem) => {
if (item.status !== InstanceTypeStatusValueMap.Available) {
return;
}
onChange?.(item.id);
const handleSelect = (item: InstanceTypeItem) => {
if (!isAvailable(item)) return;
onChange?.(item);
};
return (
<TypeGrid>
{dataList.map((item) => {
const disabled = item.status !== InstanceTypeStatusValueMap.Available;
const disabled = !isAvailable(item);
const name = item.metadata?.name || item.name;
return (
<TemplateCard
key={item.id}
key={name}
clickable
ghost
hoverable
height={104}
active={value === item.id}
active={value === name}
disabled={disabled}
onClick={() => handleSelect(item)}
>
<TypeName>
<Flex gap={16}>
<AutoTooltip ghost minWidth={20}>
{item.name}
{name}
</AutoTooltip>
</Flex>
<Tag
@@ -83,14 +84,14 @@ const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
color: 'var(--ant-color-text-tertiary)'
}}
>
<span>库存 {item.gpu_count}</span>
<span>库存 {item.status?.accelerator?.remaining ?? '-'}</span>
</Tag>
</TypeName>
<TypeMeta>
<span className="meta-row">显存 {item.vram} GiB</span>
<span className="meta-row">显存 {item.spec?.memory ?? '-'}</span>
<span className="meta-row gap-16">
<span> 内存 {item.ram} GiB</span>
<span>CPU {item.vCPU}</span>
<span>内存 {item.status?.ram?.capacity ?? '-'}</span>
<span>vCPU {item.status?.cpu?.capacity ?? '-'}</span>
</span>
</TypeMeta>
</TemplateCard>
src/pages/gpu-service/instances/config/index.ts
+6 -34
View File
@@ -1,7 +1,6 @@
import { StatusMaps } from '@/config';
import { StatusType } from '@/config/types';
import { icons } from '@gpustack/core-ui';
import { InstanceItem } from './types';
export const InstanceStatusValueMap = {
Ready: 'ready',
@@ -37,42 +36,15 @@ export const rowActionList = [
}
];
export const InstanceTypeStatusValueMap = {
Available: 'available',
Unavailable: 'unavailable'
export const InstanceTypePhaseValueMap = {
Available: 'Available',
Unavailable: 'Unavailable'
};
export const instanceTypeOptions: InstanceItem[] = [
{
id: 1,
name: 'NVIDIA L4 Small',
vram: 24,
ram: 64,
vCPU: 16,
gpu_count: 1,
status: InstanceTypeStatusValueMap.Available
},
{
id: 2,
name: 'NVIDIA A100 Training',
vram: 80,
ram: 256,
vCPU: 64,
gpu_count: 8,
status: InstanceTypeStatusValueMap.Available
},
{
id: 3,
name: 'NVIDIA H100 Inference',
vram: 80,
ram: 512,
vCPU: 96,
gpu_count: 0,
status: InstanceTypeStatusValueMap.Unavailable
}
];
export const StorageModeValueMap = {
Existing: 'existing',
Temporary: 'temporary'
};
// Constant SSH public key resource name used when SSH is enabled
export const DEFAULT_SSH_PUBLIC_KEY_NAME = 'default';
src/pages/gpu-service/instances/config/mock-data.ts
+70 -34
View File
@@ -1,58 +1,94 @@
import { InstanceStatusValueMap } from '.';
import { ListItem } from './types';
export const mockInstanceData: ListItem[] = [
export const mockInstanceData: (ListItem & { cluster_id: number })[] = [
{
id: 1,
name: 'cuda-dev-01',
instance_type: 'NVIDIA L4 Small',
instance_type_id: 1,
template_id: 1,
image: 'nvidia/cuda:12.4.1-devel-ubuntu22.04',
gpu_count: 1,
replicas: 1,
storage_mode: 'existing',
storage_id: 1,
cluster_id: 1,
metadata: {
name: 'cuda-dev-01',
namespace: 'default'
},
spec: {
type: 'nvidia-l4-small',
image: 'nvidia/cuda:12.4.1-devel-ubuntu22.04',
displayName: 'CUDA Dev 01',
command: ['/bin/bash'],
ports: [{ protocol: 'tcp', port: 22 }],
env: [],
volumeMount: '/workspace',
resources: {
cpu: '4',
ram: '16Gi',
accelerator: '1'
},
description: 'CUDA development workspace',
volume: {
persistent: { name: 'local-nvme-cache' }
},
sshPublicKey: { name: 'default' }
},
status: InstanceStatusValueMap.Ready,
endpoint: 'https://cuda-dev-01.example.com',
description: 'CUDA development workspace',
created_at: '2026-04-01T10:00:00Z',
updated_at: '2026-04-10T10:00:00Z'
},
{
id: 2,
name: 'training-job-a100',
instance_type: 'NVIDIA A100 Training',
instance_type_id: 2,
template_id: 2,
image: 'pytorch/pytorch:2.5.1-cuda12.4-cudnn9-devel',
gpu_count: 4,
replicas: 1,
storage_mode: 'existing',
storage_id: 2,
cluster_id: 1,
metadata: {
name: 'training-job-a100',
namespace: 'default'
},
spec: {
type: 'nvidia-a100-training',
image: 'pytorch/pytorch:2.5.1-cuda12.4-cudnn9-devel',
displayName: 'Training A100',
command: ['python', 'train.py'],
ports: [],
env: [{ name: 'PYTHONUNBUFFERED', value: '1' }],
volumeMount: '/data',
resources: {
cpu: '32',
ram: '128Gi',
accelerator: '4'
},
description: 'PyTorch training environment',
volume: {
persistent: { name: 'shared-model-store' }
},
sshPublicKey: { name: '' }
},
status: InstanceStatusValueMap.Pending,
endpoint: 'https://training-job-a100.example.com',
description: 'PyTorch training environment',
created_at: '2026-04-02T10:00:00Z',
updated_at: '2026-04-11T10:00:00Z'
},
{
id: 3,
name: 'inference-vllm',
instance_type: 'NVIDIA H100 Inference',
instance_type_id: 3,
template_id: 6,
image: 'vllm/vllm-openai:latest',
gpu_count: 2,
replicas: 2,
storage_mode: 'temporary',
local_storage_size_gb: 100,
cluster_id: 1,
metadata: {
name: 'inference-vllm',
namespace: 'default'
},
spec: {
type: 'nvidia-h100-inference',
image: 'vllm/vllm-openai:latest',
displayName: 'Inference vLLM',
command: ['python', '-m', 'vllm.entrypoints.openai.api_server'],
ports: [{ protocol: 'tcp', port: 8080 }],
env: [{ name: 'VLLM_WORKER_MULTIPROC_METHOD', value: 'spawn' }],
volumeMount: '/models',
resources: {
cpu: '16',
ram: '64Gi',
accelerator: '2'
},
description: 'OpenAI-compatible inference service',
volume: {
ephemeral: { capacity: '100Gi' }
},
sshPublicKey: { name: '' }
},
status: InstanceStatusValueMap.Error,
endpoint: 'http://inference-vllm.example.com',
description: 'OpenAI-compatible inference service',
created_at: '2026-04-03T10:00:00Z',
updated_at: '2026-04-12T10:00:00Z'
}
src/pages/gpu-service/instances/config/types.ts
+1
View File
@@ -33,6 +33,7 @@ export interface FormData {
namespace: string;
};
spec: {
type: string;
image: string;
displayName: string;
command: string[];
src/pages/gpu-service/instances/forms/basic.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ const Basic = () => {
<>
<Form.Item<FormData>
data-field="name"
name="name"
name={['metadata', 'name']}
rules={[
{
required: true,
@@ -17,7 +17,7 @@ const Basic = () => {
>
<CInput.Input label="实例名称" required />
</Form.Item>
<Form.Item<FormData> name="description">
<Form.Item<FormData> name={['spec', 'description']}>
<CInput.TextArea label="描述" scaleSize />
</Form.Item>
</>
src/pages/gpu-service/instances/forms/index.tsx
+205 -66
View File
@@ -11,21 +11,53 @@ import {
useWrapperContext
} from '@gpustack/core-ui';
import { Form } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import {
forwardRef,
useEffect,
useImperativeHandle,
useMemo,
useRef
} from 'react';
import { mockStorageData } from '../../storage/config/mock-data';
import { mockTemplateData } from '../../templates/config/mock-data';
import {
EnvItem as TemplateEnvItem,
PortItem as TemplatePortItem
} from '../../templates/config/types';
import TemplateBasicForm from '../../templates/forms/basic';
import { instanceTypeOptions, StorageModeValueMap } from '../config';
import { DEFAULT_SSH_PUBLIC_KEY_NAME, StorageModeValueMap } from '../config';
import { FormData, ListItem } from '../config/types';
import Basic from './basic';
import InstanceTypeFormItem from './instance-type';
import StorageVolume from './storage-volume';
const SSH_PORT = 22;
type InstanceFormValues = FormData & {
// instance-type holders
type?: string;
gpu_count?: number;
// template holders (mirrored into spec.* on submit)
image?: string;
command?: string[];
ports?: TemplatePortItem[];
env?: TemplateEnvItem[];
volumeMount?: string;
resources?: { cpu?: string; ram?: string };
// storage holders
storage_mode?: string;
storage_name?: string;
local_storage_size_gb?: number;
// ssh holder
enable_ssh?: boolean;
};
interface InstanceFormProps {
ref?: any;
open: boolean;
action: PageActionType;
currentData?: ListItem | null;
namespace?: string;
onFinish: (values: FormData) => Promise<void>;
}
@@ -43,22 +75,28 @@ const requiredFields = {
},
[TABKeysMap.INSTANCE_TYPE]: {
sort: 2,
fields: ['instance_type_id']
fields: ['type', 'gpu_count']
},
[TABKeysMap.TEMPLATE]: {
sort: 3,
fields: ['template_id', 'gpu_count']
fields: ['image', 'ports']
},
[TABKeysMap.STORAGE]: {
sort: 4,
fields: ['storage_mode', 'storage_id', 'local_storage_size_gb']
fields: ['storage_mode', 'storage_name', 'local_storage_size_gb']
}
};
const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
(props, ref) => {
const { action, currentData, open, onFinish } = props;
const [form] = Form.useForm<FormData>();
const {
action,
currentData,
open,
namespace = 'default',
onFinish
} = props;
const [form] = Form.useForm<InstanceFormValues>();
const scrollTabsRef = useRef<any>(null);
const { getScrollElementScrollableHeight } = useWrapperContext();
const {
@@ -76,32 +114,41 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
]
});
const segmentOptions = [
{
value: TABKeysMap.BASIC,
label: '基础信息',
icon: <IconFont type="icon-basic" />,
field: 'name'
},
{
value: TABKeysMap.INSTANCE_TYPE,
label: '实例类型',
icon: <IconFont type="icon-gpu1" />,
field: 'instanceType'
},
{
value: TABKeysMap.TEMPLATE,
label: '实例模板',
icon: <IconFont type="icon-model" />,
field: 'vendor'
},
{
value: TABKeysMap.STORAGE,
label: '存储卷',
icon: <IconFont type="icon-storage-outlined" />,
field: 'storage'
}
];
const segmentOptions = useMemo(
() => [
{
value: TABKeysMap.BASIC,
label: '基础信息',
icon: <IconFont type="icon-basic" />,
field: 'name'
},
{
value: TABKeysMap.INSTANCE_TYPE,
label: '实例类型',
icon: <IconFont type="icon-gpu1" />,
field: 'instanceType'
},
{
value: TABKeysMap.TEMPLATE,
label: '实例模板',
icon: <IconFont type="icon-model" />,
field: 'template'
},
{
value: TABKeysMap.STORAGE,
label: '存储卷',
icon: <IconFont type="icon-storage-outlined" />,
field: 'storage'
}
],
[]
);
const ports = (Form.useWatch('ports', form) || []) as TemplatePortItem[];
const hasSshPort = useMemo(
() => ports.some((p) => Number(p?.port) === SSH_PORT),
[ports]
);
const onTargetChange = (key: string) => {
scrollTabsRef.current?.handleTargetChange(key);
@@ -120,38 +167,132 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
}
if (action === PageAction.EDIT && currentData) {
const persistentName = currentData.spec?.volume?.persistent?.name;
const ephemeralCapacity = currentData.spec?.volume?.ephemeral?.capacity;
const isExisting = !!persistentName;
const isTemporary = !!ephemeralCapacity;
const localSizeGb = ephemeralCapacity
? Number(String(ephemeralCapacity).replace(/Gi$/i, '')) || undefined
: undefined;
form.setFieldsValue({
name: currentData.name,
description: currentData.description,
instance_type: currentData.instance_type,
instance_type_id: currentData.instance_type_id,
template_id: currentData.template_id,
image: currentData.image,
gpu_count: currentData.gpu_count,
replicas: currentData.replicas,
storage_mode: currentData.storage_mode,
storage_id: currentData.storage_id,
local_storage_size_gb: currentData.local_storage_size_gb
metadata: {
name: currentData.metadata?.name,
namespace: currentData.metadata?.namespace
},
spec: { ...currentData.spec },
type: currentData.spec?.type,
gpu_count: currentData.spec?.resources?.accelerator
? Number(currentData.spec.resources.accelerator) || 1
: 1,
// template holders mirrored from spec.*
image: currentData.spec?.image,
command: currentData.spec?.command || [],
ports: (currentData.spec?.ports || []) as TemplatePortItem[],
env: (currentData.spec?.env || []) as TemplateEnvItem[],
volumeMount: currentData.spec?.volumeMount,
resources: {
cpu: currentData.spec?.resources?.cpu,
ram: currentData.spec?.resources?.ram
},
storage_mode: isExisting
? StorageModeValueMap.Existing
: isTemporary
? StorageModeValueMap.Temporary
: StorageModeValueMap.Existing,
storage_name: persistentName,
local_storage_size_gb: localSizeGb,
enable_ssh: !!currentData.spec?.sshPublicKey?.name
});
return;
}
const defaultInstanceType = instanceTypeOptions[0];
const defaultTemplate = mockTemplateData[0];
const defaultStorage = mockStorageData[0];
form.setFieldsValue({
instance_type: defaultInstanceType?.name,
instance_type_id: defaultInstanceType?.id,
template_id: defaultTemplate?.id,
image: defaultTemplate?.image,
metadata: {
namespace
},
spec: {
description: '',
displayName: ''
} as FormData['spec'],
gpu_count: 1,
replicas: 1,
// template holders seeded from default template
image: defaultTemplate?.image || '',
command: defaultTemplate?.command || [],
ports: (defaultTemplate?.ports || []) as TemplatePortItem[],
env: (defaultTemplate?.env || []) as TemplateEnvItem[],
volumeMount: defaultTemplate?.volumeMount || '',
resources: {
cpu: defaultTemplate?.resources?.cpu,
ram: defaultTemplate?.resources?.ram
},
storage_mode: StorageModeValueMap.Existing,
storage_id: defaultStorage?.id,
local_storage_size_gb: 50
storage_name: defaultStorage?.metadata?.name,
local_storage_size_gb: 50,
enable_ssh: false
});
}, [action, currentData, form, open]);
}, [action, currentData, form, open, namespace]);
const buildPayload = (values: InstanceFormValues): FormData => {
const acceleratorStr = values.gpu_count
? String(values.gpu_count)
: undefined;
const spec: FormData['spec'] = {
...values.spec,
type: values.type || values.spec?.type,
image: values.image ?? values.spec?.image,
command: values.command ?? values.spec?.command,
ports: (values.ports ??
values.spec?.ports) as FormData['spec']['ports'],
env: (values.env ?? values.spec?.env) as FormData['spec']['env'],
volumeMount: values.volumeMount ?? values.spec?.volumeMount,
resources: {
...values.spec?.resources,
cpu: values.resources?.cpu ?? values.spec?.resources?.cpu,
ram: values.resources?.ram ?? values.spec?.resources?.ram,
accelerator: acceleratorStr
}
} as FormData['spec'];
// Storage volume mapping
if (values.storage_mode === StorageModeValueMap.Existing) {
spec.volume = { persistent: { name: values.storage_name || '' } };
} else if (values.storage_mode === StorageModeValueMap.Temporary) {
spec.volume = {
ephemeral: {
capacity: values.local_storage_size_gb
? `${values.local_storage_size_gb}Gi`
: ''
}
};
}
// SSH public key — include only when checkbox is checked AND port 22 is in ports
const portsList = (values.ports || []) as TemplatePortItem[];
const has22 = portsList.some((p) => Number(p?.port) === SSH_PORT);
if (values.enable_ssh && has22) {
spec.sshPublicKey = { name: DEFAULT_SSH_PUBLIC_KEY_NAME };
} else {
delete (spec as any).sshPublicKey;
}
return {
metadata: {
name: values.metadata?.name,
namespace: values.metadata?.namespace || namespace
},
spec
} as FormData;
};
const handleFinish = async (values: InstanceFormValues) => {
const payload = buildPayload(values);
await onFinish(payload);
};
useImperativeHandle(ref, () => ({
submit: () => {
@@ -178,7 +319,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
<Form
name="gpuServiceInstanceForm"
form={form}
onFinish={onFinish}
onFinish={handleFinish}
onFinishFailed={handleOnFinishFailed}
preserve={false}
>
@@ -208,18 +349,16 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
}
]}
/>
<Form.Item<FormData>
name="enable_ssh"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField label={'SSH Terminal Access'}></CheckboxField>
</Form.Item>
<Form.Item<FormData>
data-field="name"
hidden
name={['spec', 'sshPublicKey', 'name']}
>
{hasSshPort && (
<Form.Item
name="enable_ssh"
valuePropName="checked"
style={{ marginBottom: 8 }}
>
<CheckboxField label="SSH Terminal Access" />
</Form.Item>
)}
<Form.Item<FormData> hidden name={['spec', 'sshPublicKey', 'name']}>
<CInput.Input />
</Form.Item>
</Form>
src/pages/gpu-service/instances/forms/instance-type-overlay.tsx
+18 -15
View File
@@ -4,7 +4,7 @@ import { Empty, Input } from 'antd';
import { useCallback, useMemo, useState } from 'react';
import styled from 'styled-components';
import InstanceTypeList from '../components/instance-type-list';
import { instanceTypeOptions } from '../config';
import { InstanceTypeItem } from '../config/types';
const DrawerBody = styled.div`
display: flex;
@@ -14,14 +14,16 @@ const DrawerBody = styled.div`
interface InstanceTypeOverlayProps {
open: boolean;
value?: number;
value?: string;
dataList: InstanceTypeItem[];
onCancel: () => void;
onChange?: (value: number) => void;
onChange?: (item: InstanceTypeItem) => void;
}
const InstanceTypeOverlay: React.FC<InstanceTypeOverlayProps> = ({
open,
value,
dataList,
onCancel,
onChange
}) => {
@@ -30,22 +32,23 @@ const InstanceTypeOverlay: React.FC<InstanceTypeOverlayProps> = ({
const filteredOptions = useMemo(() => {
const currentKeyword = keyword.trim().toLowerCase();
if (!currentKeyword) {
return instanceTypeOptions;
return dataList;
}
return instanceTypeOptions.filter((item) => {
return dataList.filter((item) => {
const name = item.metadata?.name || item.name || '';
return [
item.name,
String(item.gpu_count),
String(item.vram),
String(item.ram),
String(item.vCPU)
].some((text) => text.toLowerCase().includes(currentKeyword));
name,
item.spec?.memory ?? '',
item.status?.cpu?.capacity ?? '',
item.status?.ram?.capacity ?? '',
item.status?.accelerator?.remaining ?? ''
].some((text) => String(text).toLowerCase().includes(currentKeyword));
});
}, [keyword]);
}, [keyword, dataList]);
const handleChange = (id: number) => {
onChange?.(id);
const handleChange = (item: InstanceTypeItem) => {
onChange?.(item);
onCancel();
};
@@ -70,7 +73,7 @@ const InstanceTypeOverlay: React.FC<InstanceTypeOverlayProps> = ({
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
placeholder="搜索名称、GPU、显存、内存或 vCPU"
placeholder="搜索名称、显存、内存或 vCPU"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
src/pages/gpu-service/instances/forms/instance-type.tsx
+80 -51
View File
@@ -3,11 +3,12 @@ import {
Input as CInput,
InputNumber as CInputNumber
} from '@gpustack/core-ui';
import { Flex, Form } from 'antd';
import { Flex, Form, Tag } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import { instanceTypeOptions, InstanceTypeStatusValueMap } from '../config';
import { FormData } from '../config/types';
import { InstanceTypePhaseValueMap } from '../config';
import { FormData, InstanceTypeItem } from '../config/types';
import useQueryInstanceTypes from '../services/use-query-instance-types';
import InstanceTypeOverlay from './instance-type-overlay';
const FieldBlock = styled.div`
@@ -16,7 +17,6 @@ const FieldBlock = styled.div`
const SelectedCard = styled.div`
display: grid;
height: 102px;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
gap: 12px;
@@ -38,83 +38,112 @@ const SummaryTitle = styled.div`
const SummaryMeta = styled.div`
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 4px;
color: var(--ant-color-text-secondary);
font-size: 13px;
`;
interface InstanceTypePickerProps {
value?: number;
onChange?: (value: number) => void;
value?: string;
onChange?: (value: string) => void;
dataList: InstanceTypeItem[];
}
const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
value,
onChange
onChange,
dataList
}) => {
const [open, setOpen] = useState(false);
const selected = useMemo(() => {
return instanceTypeOptions.find((item) => item.id === value);
}, [value]);
return dataList.find(
(item) => (item.metadata?.name || item.name) === value
);
}, [value, dataList]);
const handleChange = (item: InstanceTypeItem) => {
onChange?.(item.metadata?.name || item.name);
};
return (
<>
<SelectedCard>
<div>
<SummaryTitle>
<Flex gap={16}>
<Flex gap={16} align="center">
<AutoTooltip ghost minWidth={20}>
{selected?.name || '请选择实例类型'}
{(selected?.metadata?.name || selected?.name) ??
'请选择实例类型'}
</AutoTooltip>
{/* <Tag
style={{
fontWeight: 400,
color: 'var(--ant-color-text-tertiary)'
}}
>
库存 {selected?.gpu_count}
</Tag> */}
{selected && (
<Tag
style={{
fontWeight: 400,
color: 'var(--ant-color-text-tertiary)'
}}
>
库存 {selected?.status?.accelerator?.remaining ?? '-'}
</Tag>
)}
</Flex>
</SummaryTitle>
<SummaryMeta>
<span>显存 {selected?.vram ?? '-'} GiB</span>
<span>显存 {selected?.spec?.memory ?? '-'}</span>
<Flex gap={16}>
<span>内存 {selected?.ram ?? '-'} GiB</span>
<span>CPU {selected?.vCPU ?? '-'}</span>
<span>内存 {selected?.status?.ram?.capacity ?? '-'}</span>
<span>vCPU {selected?.status?.cpu?.capacity ?? '-'}</span>
</Flex>
</SummaryMeta>
</div>
{/* <Button onClick={() => setOpen(true)}>更换</Button> */}
</SelectedCard>
<InstanceTypeOverlay
open={open}
value={value}
dataList={dataList}
onCancel={() => setOpen(false)}
onChange={onChange}
onChange={handleChange}
/>
</>
);
};
const InstanceTypeFormItem = () => {
const form = Form.useFormInstance<FormData>();
const instanceTypeId = Form.useWatch('instance_type_id', form);
const form = Form.useFormInstance<
FormData & { type?: string; gpu_count?: number }
>();
const typeName = Form.useWatch('type', form) as string | undefined;
const selectedInstanceType = useMemo(() => {
return instanceTypeOptions.find((item) => item.id === instanceTypeId);
}, [instanceTypeId]);
const maxGpuCount = selectedInstanceType?.gpu_count ?? 1;
const { detailData, fetchData } = useQueryInstanceTypes();
useEffect(() => {
if (!instanceTypeId) {
const defaultType = instanceTypeOptions.find(
(item) => item.status === InstanceTypeStatusValueMap.Available
fetchData({});
}, [fetchData]);
const dataList = detailData?.items || [];
const selectedInstanceType = useMemo(() => {
return dataList.find(
(item) => (item.metadata?.name || item.name) === typeName
);
}, [dataList, typeName]);
const maxGpuCount = useMemo(() => {
const remaining = selectedInstanceType?.status?.accelerator?.remaining;
const num = remaining ? Number(remaining) : NaN;
return Number.isFinite(num) && num > 0 ? num : 1;
}, [selectedInstanceType]);
useEffect(() => {
if (!typeName && dataList.length > 0) {
const defaultType = dataList.find(
(item) => item.status?.phase === InstanceTypePhaseValueMap.Available
);
if (defaultType) {
form.setFieldValue('instance_type_id', defaultType.id);
form.setFieldValue(
'type',
defaultType.metadata?.name || defaultType.name
);
}
return;
}
@@ -127,17 +156,13 @@ const InstanceTypeFormItem = () => {
if (currentGpuCount < 1) {
form.setFieldValue('gpu_count', 1);
}
if (selectedInstanceType) {
form.setFieldValue('instance_type', selectedInstanceType.name);
}
}, [form, instanceTypeId, maxGpuCount, selectedInstanceType]);
}, [form, typeName, maxGpuCount, dataList]);
return (
<>
<FieldBlock data-field="instanceType">
<Form.Item<FormData>
name="instance_type_id"
<Form.Item
name="type"
rules={[
{
required: true,
@@ -145,10 +170,10 @@ const InstanceTypeFormItem = () => {
}
]}
>
<InstanceTypePicker />
<InstanceTypePicker dataList={dataList} />
</Form.Item>
</FieldBlock>
<Form.Item<FormData>
<Form.Item
name="gpu_count"
rules={[
{
@@ -171,11 +196,11 @@ const InstanceTypeFormItem = () => {
min={1}
max={maxGpuCount}
precision={0}
label={`GPU 数量`}
label="GPU 数量"
required
/>
</Form.Item>
<Form.Item<FormData> name="instance_type" hidden>
<Form.Item name="type_display" hidden>
<CInput.Input />
</Form.Item>
</>
@@ -183,12 +208,16 @@ const InstanceTypeFormItem = () => {
};
export const useSelectedInstanceType = () => {
const form = Form.useFormInstance<FormData>();
const instanceTypeId = Form.useWatch('instance_type_id', form);
const form = Form.useFormInstance<FormData & { type?: string }>();
const typeName = Form.useWatch('type', form) as string | undefined;
const { detailData } = useQueryInstanceTypes();
const dataList = detailData?.items || [];
return useMemo(() => {
return instanceTypeOptions.find((item) => item.id === instanceTypeId);
}, [instanceTypeId]);
return dataList.find(
(item) => (item.metadata?.name || item.name) === typeName
);
}, [dataList, typeName]);
};
export default InstanceTypeFormItem;
src/pages/gpu-service/instances/forms/storage-volume.tsx
+33 -19
View File
@@ -1,5 +1,6 @@
import { InputNumber as CInputNumber, Select } from '@gpustack/core-ui';
import { Button, Flex, Form, Radio } from 'antd';
import { useEffect } from 'react';
import styled from 'styled-components';
import { mockStorageData } from '../../storage/config/mock-data';
import { StorageModeValueMap } from '../config';
@@ -9,17 +10,33 @@ const FieldBlock = styled.div`
margin-bottom: 24px;
`;
const StorageHeader = styled.div`
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-bottom: 12px;
`;
type StorageHolderFields = {
storage_mode?: string;
storage_name?: string;
local_storage_size_gb?: number;
};
const StorageVolume = () => {
const form = Form.useFormInstance<FormData>();
const storageMode = Form.useWatch('storage_mode', form);
const form = Form.useFormInstance<FormData & StorageHolderFields>();
const storageMode = Form.useWatch('storage_mode', form) as string | undefined;
const storageName = Form.useWatch('storage_name', form) as string | undefined;
const localSize = Form.useWatch('local_storage_size_gb', form) as
| number
| undefined;
useEffect(() => {
if (storageMode === StorageModeValueMap.Existing) {
form.setFieldValue(['spec', 'volume'], {
persistent: { name: storageName || '' }
});
} else if (storageMode === StorageModeValueMap.Temporary) {
form.setFieldValue(['spec', 'volume'], {
ephemeral: {
capacity: localSize ? `${localSize}Gi` : ''
}
});
}
}, [form, storageMode, storageName, localSize]);
return (
<FieldBlock data-field="storage">
@@ -30,7 +47,7 @@ const StorageVolume = () => {
marginBottom: 6
}}
>
<Form.Item<FormData>
<Form.Item
name="storage_mode"
style={{ marginBottom: 12 }}
rules={[
@@ -42,10 +59,7 @@ const StorageVolume = () => {
>
<Radio.Group
options={[
{
label: '持久存储',
value: StorageModeValueMap.Existing
},
{ label: '持久存储', value: StorageModeValueMap.Existing },
{ label: '临时存储', value: StorageModeValueMap.Temporary }
]}
/>
@@ -56,12 +70,12 @@ const StorageVolume = () => {
</Flex>
{storageMode === StorageModeValueMap.Existing && (
<Form.Item<FormData>
name="storage_id"
<Form.Item
name="storage_name"
rules={[
{
required: true,
message: '请选择预存储卷'
message: '请选择持久卷'
}
]}
>
@@ -70,14 +84,14 @@ const StorageVolume = () => {
required
options={mockStorageData.map((item) => ({
label: `${item.metadata?.name} / ${item.spec?.capacity ?? '-'}`,
value: item.id
value: item.metadata?.name
}))}
/>
</Form.Item>
)}
{storageMode === StorageModeValueMap.Temporary && (
<Form.Item<FormData>
<Form.Item
name="local_storage_size_gb"
rules={[
{
src/pages/gpu-service/instances/forms/template-overlay.tsx
+4 -8
View File
@@ -36,13 +36,9 @@ const TemplateOverlay: React.FC<TemplateOverlayProps> = ({
}
return mockTemplateData.filter((item) => {
return [
item.name,
item.image,
item.vendor,
item.volume_mount_path,
String(item.volume_size_gb ?? '')
].some((text) => (text || '').toLowerCase().includes(currentKeyword));
return [item.name, item.image, item.volumeMount].some((text) =>
(text || '').toLowerCase().includes(currentKeyword)
);
});
}, [keyword]);
@@ -73,7 +69,7 @@ const TemplateOverlay: React.FC<TemplateOverlayProps> = ({
<Input
allowClear
prefix={<SearchOutlined className="text-tertiary" />}
placeholder="搜索模板名称、镜像、厂商或挂载路径"
placeholder="搜索模板名称、镜像或挂载路径"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
src/pages/gpu-service/instances/forms/template-selector.tsx
+2 -4
View File
@@ -81,11 +81,9 @@ const TemplateSelector: React.FC<TemplateSelectorProps> = ({
</div>
<div className="info">
<span>
<IconFont className="icon" type="icon-storage-outlined" /> 存储:
</span>
<span className="value">
{item.volume_size_gb ?? '-'} GB {item.volume_mount_path || '-'}
<IconFont className="icon" type="icon-storage-outlined" /> 挂载:
</span>
<span className="value">{item.volumeMount || '-'}</span>
</div>
</TemplateContent>
</TemplateCard>
src/pages/gpu-service/instances/forms/template.tsx
+18 -24
View File
@@ -16,7 +16,6 @@ import {
} from '../../templates/config/types';
import useCreateTemplate from '../../templates/hooks/use-create-template';
import { FormData } from '../config/types';
import { useSelectedInstanceType } from './instance-type';
import TemplateOverlay from './template-overlay';
const FieldBlock = styled.div`
@@ -25,7 +24,6 @@ const FieldBlock = styled.div`
const SelectedCard = styled.div`
display: grid;
height: 102px;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
gap: 12px;
@@ -78,23 +76,12 @@ const TemplatePicker: React.FC<TemplateSelectorProps> = ({
<AutoTooltip ghost minWidth={20}>
{selected?.name || '请选择实例模板'}
</AutoTooltip>
{/* {selected && (
<Tag
color={selected.status === 'enabled' ? 'success' : 'default'}
style={{ margin: 0 }}
>
{selected.status === 'enabled' ? '启用' : '停用'}
</Tag>
)} */}
</SummaryTitle>
<SummaryMeta>
<AutoTooltip ghost minWidth={20}>
<span>镜像: {selected?.image || '-'}</span>
</AutoTooltip>
<span>
存储: {selected?.volume_size_gb ?? '-'} GB /{' '}
{selected?.volume_mount_path || '-'}
</span>
<span>挂载: {selected?.volumeMount || '-'}</span>
</SummaryMeta>
</div>
<Flex gap={8}>
@@ -115,7 +102,6 @@ const TemplatePicker: React.FC<TemplateSelectorProps> = ({
onCancel={() => setOpen(false)}
onChange={onChange}
onCreate={() => {
// setOpen(false);
onCreate?.();
}}
/>
@@ -124,10 +110,8 @@ const TemplatePicker: React.FC<TemplateSelectorProps> = ({
};
const TemplateFormItem = () => {
const form = Form.useFormInstance<FormData>();
const templateId = Form.useWatch('template_id', form);
const selectedInstanceType = useSelectedInstanceType();
const maxGpuCount = selectedInstanceType?.gpu_count ?? 1;
const form = Form.useFormInstance<FormData & { template_id?: number }>();
const templateId = Form.useWatch('template_id', form) as number | undefined;
const { openTemplateModalStatus, openTemplateModal, closeTemplateModal } =
useCreateTemplate();
@@ -136,13 +120,23 @@ const TemplateFormItem = () => {
}, [templateId]);
useEffect(() => {
if (!templateId) {
form.setFieldValue('template_id', mockTemplateData[0]?.id);
if (!templateId && mockTemplateData[0]) {
form.setFieldValue('template_id', mockTemplateData[0].id);
return;
}
if (selectedTemplate) {
form.setFieldValue('image', selectedTemplate.image);
form.setFieldValue(['spec', 'image'], selectedTemplate.image);
form.setFieldValue(['spec', 'command'], selectedTemplate.command || []);
form.setFieldValue(['spec', 'ports'], selectedTemplate.ports || []);
form.setFieldValue(['spec', 'env'], selectedTemplate.env || []);
form.setFieldValue(['spec', 'volumeMount'], selectedTemplate.volumeMount);
const currentResources = form.getFieldValue(['spec', 'resources']) || {};
form.setFieldValue(['spec', 'resources'], {
...currentResources,
cpu: selectedTemplate.resources?.cpu,
ram: selectedTemplate.resources?.ram
});
}
}, [form, selectedTemplate, templateId]);
@@ -174,7 +168,7 @@ const TemplateFormItem = () => {
return (
<div>
<FieldBlock data-field="template">
<Form.Item<FormData>
<Form.Item
name="template_id"
rules={[
{
@@ -190,7 +184,7 @@ const TemplateFormItem = () => {
</Form.Item>
</FieldBlock>
<Form.Item<FormData> name="image" hidden>
<Form.Item<FormData> name={['spec', 'image']} hidden>
<CInput.Input />
</Form.Item>
src/pages/gpu-service/instances/hooks/use-instances-columns.tsx
+10 -5
View File
@@ -24,7 +24,7 @@ const useInstancesColumns = ({
return [
{
title: '名称',
dataIndex: 'name',
dataIndex: ['metadata', 'name'],
key: 'name',
sorter: tableSorter(1),
ellipsis: {
@@ -54,11 +54,16 @@ const useInstancesColumns = ({
}
},
{
title: '实例类型',
dataIndex: 'instance_type',
key: 'instance_type',
title: '镜像',
dataIndex: ['spec', 'image'],
key: 'image',
sorter: tableSorter(3),
render: (value: string) => value ?? '-'
ellipsis: {
showTitle: false
},
render: (value: string) => (
<AutoTooltip ghost>{value || '-'}</AutoTooltip>
)
},
{
title: '创建时间',
src/pages/gpu-service/instances/index.tsx
+46 -10
View File
@@ -3,6 +3,7 @@ import { PaginationKey, TABLE_SORT_DIRECTIONS } from '@/config/settings';
import type { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
import { useModel } from '@@/plugin-model';
import {
BaseSelect,
DeleteModal,
@@ -14,20 +15,52 @@ import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { ConfigProvider, Divider, Flex, message, Table } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { PageContainerInner } from '../../_components/page-box';
import {
createGPUServiceInstance,
deleteGPUServiceInstance,
GPU_SERVICE_INSTANCES_API,
queryGPUServiceInstances,
updateGPUServiceInstance
queryGPUServiceInstances
} from './apis';
import AddModal from './components/add-modal';
import { FormData, ListItem } from './config/types';
import useInstancesColumns from './hooks/use-instances-columns';
import useCreateInstance from './services/use-create-instance';
import useUpdateInstance from './services/use-update-instance';
const GPUService: React.FC = () => {
const { initialState } = useModel('@@initialState');
const namespace = initialState?.currentUser?.org_name || 'default';
const deleteInstance = useCallback(
(id: number) => deleteGPUServiceInstance({ namespace, id }),
[namespace]
);
const fetchInstances = useCallback(
async (
params: any,
options?: any
): Promise<Global.PageResponse<ListItem>> => {
const res = await queryGPUServiceInstances(
{ ...params, namespace },
options
);
const total = res.items?.length ?? 0;
const perPage = params.perPage || 10;
return {
items: res.items ?? [],
pagination: {
total,
totalPage: Math.ceil(total / perPage),
page: params.page || 1,
perPage
}
};
},
[namespace]
);
const {
dataSource,
rowSelection,
@@ -44,12 +77,15 @@ const GPUService: React.FC = () => {
handleNameChange
} = useTableFetch<ListItem>({
key: PaginationKey.Instances,
fetchAPI: queryGPUServiceInstances,
deleteAPI: deleteGPUServiceInstance,
fetchAPI: fetchInstances,
deleteAPI: deleteInstance,
watch: false,
API: GPU_SERVICE_INSTANCES_API,
API: GPU_SERVICE_INSTANCES_API(namespace),
contentForDelete: 'GPU 实例'
});
const { fetchData: createInstance } = useCreateInstance();
const { fetchData: updateInstance } = useUpdateInstance();
const {
fetchClusterList,
cancelRequest: cancelClusterRequest,
@@ -113,12 +149,12 @@ const GPUService: React.FC = () => {
const handleModalOk = async (data: FormData) => {
try {
if (openAddModalStatus.action === PageAction.EDIT) {
await updateGPUServiceInstance({
await updateInstance({
id: openAddModalStatus.currentData!.id,
data
});
} else {
await createGPUServiceInstance({ data });
await createInstance({ data });
}
fetchData();
@@ -133,7 +169,7 @@ const GPUService: React.FC = () => {
if (val === 'edit') {
handleEditInstance(row);
} else if (val === 'delete') {
handleDelete({ ...row, name: row.name });
handleDelete({ ...row, name: row.metadata?.name });
}
});
src/pages/gpu-service/instances/services/use-create-instance.ts
+50
View File
@@ -0,0 +1,50 @@
import { useModel } from '@@/plugin-model';
import { useQueryData } from '@gpustack/core-ui';
import { useCallback } from 'react';
import { apiVersion, KindMapping } from '../../constants';
import { createGPUServiceInstance } from '../apis';
import { FormData, ListItem } from '../config/types';
interface CreateInstanceParams {
data: FormData;
}
export default function useCreateInstance() {
const { initialState } = useModel('@@initialState');
const namespace = initialState?.currentUser?.org_name || 'default';
const fetchDetail = useCallback(
(params: CreateInstanceParams, option?: any) =>
createGPUServiceInstance(
{
namespace,
data: {
apiVersion,
kind: KindMapping.instance,
metadata: {
name: params.data.metadata.name,
namespace
},
spec: params.data.spec
}
},
option
),
[namespace]
);
const { detailData, loading, cancelRequest, fetchData } = useQueryData<
ListItem,
CreateInstanceParams
>({
fetchDetail,
key: 'createInstance'
});
return {
detailData,
loading,
cancelRequest,
fetchData
};
}
src/pages/gpu-service/instances/services/use-query-instance-types.ts
+31
View File
@@ -0,0 +1,31 @@
import { useModel } from '@@/plugin-model';
import { useQueryData } from '@gpustack/core-ui';
import { useCallback } from 'react';
import { queryGPUServiceInstanceTypes } from '../apis';
import { InstanceTypeItem } from '../config/types';
export default function useQueryInstanceTypes() {
const { initialState } = useModel('@@initialState');
const namespace = initialState?.currentUser?.org_name || 'default';
const fetchDetail = useCallback(
(params: Global.K8sSearchParams = {}, options?: any) =>
queryGPUServiceInstanceTypes({ ...params, namespace }, options),
[namespace]
);
const { detailData, loading, cancelRequest, fetchData } = useQueryData<
Global.K8sPageResponse<InstanceTypeItem>,
Global.K8sSearchParams
>({
fetchDetail,
key: 'instanceTypes'
});
return {
detailData,
loading,
cancelRequest,
fetchData
};
}
src/pages/gpu-service/instances/services/use-update-instance.ts
+52
View File
@@ -0,0 +1,52 @@
import { useModel } from '@@/plugin-model';
import { useQueryData } from '@gpustack/core-ui';
import { useCallback } from 'react';
import { apiVersion, KindMapping } from '../../constants';
import { updateGPUServiceInstance } from '../apis';
import { FormData, ListItem } from '../config/types';
interface UpdateInstanceParams {
id: number;
data: FormData;
}
export default function useUpdateInstance() {
const { initialState } = useModel('@@initialState');
const namespace = initialState?.currentUser?.org_name || 'default';
const fetchDetail = useCallback(
(params: UpdateInstanceParams, option?: any) =>
updateGPUServiceInstance(
{
namespace,
id: params.id,
data: {
apiVersion,
kind: KindMapping.instance,
metadata: {
name: params.data.metadata.name,
namespace
},
spec: params.data.spec
}
},
option
),
[namespace]
);
const { detailData, loading, cancelRequest, fetchData } = useQueryData<
ListItem,
UpdateInstanceParams
>({
fetchDetail,
key: 'updateInstance'
});
return {
detailData,
loading,
cancelRequest,
fetchData
};
}
src/pages/gpu-service/templates/forms/basic.tsx
+14 -12
View File
@@ -8,7 +8,7 @@ interface BasicProps {
page?: 'template' | 'instance';
}
const Basic: React.FC<BasicProps> = () => {
const Basic: React.FC<BasicProps> = ({ page = 'template' }) => {
const form = Form.useFormInstance<FormData>();
const handleCommandChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -25,17 +25,19 @@ const Basic: React.FC<BasicProps> = () => {
return (
<>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: '请输入模板名称'
}
]}
>
<CInput.Input label="名称" required />
</Form.Item>
{page === 'template' && (
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: '请输入模板名称'
}
]}
>
<CInput.Input label="名称" required />
</Form.Item>
)}
<Form.Item<FormData>
name="image"
rules={[