feat(gpu-service): add GPU Instance Types management page

- Card/table list of instance types per Kubernetes cluster with delete
- Create drawer with flavor picker and per-GPU resource form (CPU/RAM/storage)
- Fix unit CPU to 1 for non-acceleratable flavors; N/A memory for generic types
- Add routes and i18n across all locales

config/routes.ts

@@ -211,6 +211,16 @@ const baseRoutes = [
         defaultIcon: 'icon-cloud-outlined',
         component: './gpu-service/instances'
       },
+      {
+        name: 'instanceTypes',
+        path: '/gpu-service/instance-types',
+        key: 'gpuServiceInstanceTypes',
+        icon: 'icon-outline-gpu',
+        access: 'canSeeOrgAdmin',
+        selectedIcon: 'icon-filled-gpu',
+        defaultIcon: 'icon-outline-gpu',
+        component: './gpu-service/instance-types'
+      },
       {
         name: 'templates',
         path: '/gpu-service/templates',

src/locales/en-US/gpuservice.ts

@@ -134,6 +134,19 @@ export default {
   'gpuservice.instance.ram': 'RAM',
   'gpuservice.instance.os': 'OS',
   'gpuservice.instance.arch': 'Arch',
+'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
   'gpuservice.instance.disk': 'Disk',
   'gpuservice.table.count': 'Count',
   'gpuservice.instance.disk.system': 'System Disk',

src/locales/en-US/menu.ts

@@ -47,6 +47,7 @@ export default {
   'menu.models.backendsList': 'Inference Backends',
   'menu.gpuService': 'GPU Service',
   'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
   'menu.gpuService.templates': 'Instance Templates',
   'menu.gpuService.storage': 'Storage',
   'menu.gpuService.storageTypes': 'Storage Types',

src/locales/en-US/no-result.ts

@@ -68,6 +68,10 @@ export default {
   'noresult.gpuservice.storage.title': 'No Storage',
   'noresult.gpuservice.storage.subTitle': 'No storage has been added yet.',
   'noresult.gpuservice.storage.nofound': 'No matching storage found.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
   'noresult.gpuservice.storageType.title': 'No Storage Types',
   'noresult.gpuservice.storageType.subTitle':
     'No storage types have been added yet.',

src/locales/ja-JP/gpuservice.ts

@@ -133,6 +133,19 @@ export default {
   'gpuservice.instance.ram': 'RAM',
   'gpuservice.instance.os': 'OS',
   'gpuservice.instance.arch': 'アーキテクチャ',
+'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
   'gpuservice.instance.disk': 'ディスク',
   'gpuservice.table.count': '数量',
   'gpuservice.instance.disk.system': 'システムディスク',

src/locales/ja-JP/menu.ts

@@ -47,6 +47,7 @@ export default {
   'menu.models.backendsList': 'Inference Backends',
   'menu.gpuService': 'GPU Service',
   'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
   'menu.gpuService.templates': 'Instance Templates',
   'menu.gpuService.storage': 'Storage',
   'menu.gpuService.storageTypes': 'ストレージタイプ',

src/locales/ja-JP/no-result.ts

@@ -70,6 +70,10 @@ export default {
   'noresult.gpuservice.storage.subTitle':
     'ストレージはまだ追加されていません。',
   'noresult.gpuservice.storage.nofound': '一致するストレージが見つかりません。',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
   'noresult.gpuservice.storageType.title': 'ストレージタイプなし',
   'noresult.gpuservice.storageType.subTitle':
     'ストレージタイプはまだ追加されていません。',

src/locales/ru-RU/gpuservice.ts

@@ -132,6 +132,19 @@ export default {
   'gpuservice.instance.ram': 'RAM',
   'gpuservice.instance.os': 'ОС',
   'gpuservice.instance.arch': 'Архитектура',
+'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
   'gpuservice.instance.disk': 'Диск',
   'gpuservice.table.count': 'Количество',
   'gpuservice.instance.disk.system': 'Системный диск',

src/locales/ru-RU/menu.ts

@@ -47,6 +47,7 @@ export default {
   'menu.settings': 'Settings',
   'menu.gpuService': 'GPU Service',
   'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
   'menu.gpuService.templates': 'Instance Templates',
   'menu.gpuService.storage': 'Storage',
   'menu.gpuService.storageTypes': 'Типы хранилищ',

src/locales/ru-RU/no-result.ts

@@ -69,6 +69,10 @@ export default {
   'noresult.gpuservice.storage.title': 'Нет хранилищ',
   'noresult.gpuservice.storage.subTitle': 'Хранилища ещё не добавлены.',
   'noresult.gpuservice.storage.nofound': 'Подходящие хранилища не найдены.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
   'noresult.gpuservice.storageType.title': 'Нет типов хранилищ',
   'noresult.gpuservice.storageType.subTitle': 'Типы хранилищ ещё не добавлены.',
   'noresult.gpuservice.storageType.nofound':

src/locales/tr-TR/gpuservice.ts

@@ -128,6 +128,19 @@ export default {
   'gpuservice.instance.ram': 'RAM',
   'gpuservice.instance.os': 'OS',
   'gpuservice.instance.arch': 'Mimari',
+'gpuservice.instanceType': 'GPU Instance Type',
+  'gpuservice.instanceType.add': 'Add Instance Type',
+  'gpuservice.instanceType.flavor': 'Flavor',
+  'gpuservice.instanceType.flavor.required': 'Please select an instance type flavor',
+  'gpuservice.instanceType.product': 'Product',
+  'gpuservice.instanceType.unitCpu': 'Unit CPU',
+  'gpuservice.instanceType.unitCpu.tip': 'CPU allocated per GPU',
+  'gpuservice.instanceType.unitRam': 'Unit RAM',
+  'gpuservice.instanceType.unitRam.tip': 'RAM allocated per GPU',
+  'gpuservice.instanceType.localStorage': 'Storage',
+  'gpuservice.instanceType.localStorage.tip': 'Maximum available disk',
+  'gpuservice.instanceType.notSliceable': 'Not Sliceable',
+  'gpuservice.instanceType.filter.name': 'Search by name',
   'gpuservice.instance.disk': 'Disk',
   'gpuservice.table.count': 'Sayı',
   'gpuservice.instance.disk.system': 'Sistem Diski',

src/locales/tr-TR/menu.ts

@@ -47,6 +47,7 @@ export default {
   'menu.settings': 'Settings',
   'menu.gpuService': 'GPU Service',
   'menu.gpuService.instances': 'GPU Instances',
+  'menu.gpuService.instanceTypes': 'Instance Types',
   'menu.gpuService.templates': 'Instance Templates',
   'menu.gpuService.storage': 'Storage',
   'menu.gpuService.storageTypes': 'Depolama Türleri',

src/locales/tr-TR/no-result.ts

@@ -67,6 +67,10 @@ export default {
   'noresult.gpuservice.storage.title': 'Depolama Yok',
   'noresult.gpuservice.storage.subTitle': 'Henüz depolama eklenmedi.',
   'noresult.gpuservice.storage.nofound': 'Eşleşen depolama bulunamadı.',
+  'noresult.gpuservice.instanceType.title': 'No Instance Types',
+  'noresult.gpuservice.instanceType.subTitle':
+    'Create an instance type to get started',
+  'noresult.gpuservice.instanceType.nofound': 'No instance types found',
   'noresult.gpuservice.storageType.title': 'Depolama Türü Yok',
   'noresult.gpuservice.storageType.subTitle': 'Henüz depolama türü eklenmedi.',
   'noresult.gpuservice.storageType.nofound':

src/locales/zh-CN/gpuservice.ts

@@ -121,6 +121,19 @@ export default {
   'gpuservice.instance.ram': '内存',
   'gpuservice.instance.os': '系统',
   'gpuservice.instance.arch': '架构',
+'gpuservice.instanceType': 'GPU 实例类型',
+  'gpuservice.instanceType.add': '添加实例类型',
+  'gpuservice.instanceType.flavor': '规格',
+  'gpuservice.instanceType.flavor.required': '请选择实例类型规格',
+  'gpuservice.instanceType.product': '商品',
+  'gpuservice.instanceType.unitCpu': '单位 CPU',
+  'gpuservice.instanceType.unitCpu.tip': '每 GPU 对应多少 CPU',
+  'gpuservice.instanceType.unitRam': '单位内存',
+  'gpuservice.instanceType.unitRam.tip': '每 GPU 对应多少内存',
+  'gpuservice.instanceType.localStorage': '存储',
+  'gpuservice.instanceType.localStorage.tip': '最大可用磁盘',
+  'gpuservice.instanceType.notSliceable': '不可切分',
+  'gpuservice.instanceType.filter.name': '按名称搜索',
   'gpuservice.instance.disk': '磁盘',
   'gpuservice.table.count': '数量',
   'gpuservice.instance.disk.system': '系统盘',

src/locales/zh-CN/menu.ts

@@ -47,6 +47,7 @@ export default {
   'menu.models.backendsList': '推理后端',
   'menu.gpuService': 'GPU 服务',
   'menu.gpuService.instances': 'GPU 实例',
+  'menu.gpuService.instanceTypes': '实例类型',
   'menu.gpuService.templates': '实例模板',
   'menu.gpuService.storage': '存储',
   'menu.gpuService.storageTypes': '存储类型',

src/locales/zh-CN/no-result.ts

@@ -63,6 +63,9 @@ export default {
   'noresult.gpuservice.storage.title': '暂无存储',
   'noresult.gpuservice.storage.subTitle': '尚未添加任何存储。',
   'noresult.gpuservice.storage.nofound': '未找到匹配的存储',
+  'noresult.gpuservice.instanceType.title': '暂无实例类型',
+  'noresult.gpuservice.instanceType.subTitle': '创建一个实例类型以开始使用',
+  'noresult.gpuservice.instanceType.nofound': '未找到实例类型',
   'noresult.gpuservice.storageType.title': '暂无存储类型',
   'noresult.gpuservice.storageType.subTitle': '尚未添加任何存储类型。',
   'noresult.gpuservice.storageType.nofound': '未找到匹配的存储类型',

src/pages/gpu-service/instance-types/apis/index.ts

@@ -0,0 +1,54 @@
+import { request } from '@umijs/max';
+import { FlavorItem, FormData, ListItem } from '../config/types';
+
+export const GPU_INSTANCE_TYPES_API = '/gpu-instance-types';
+
+export const GPU_INSTANCE_TYPE_FLAVORS_API = '/gpu-instance-type-flavors';
+
+// GET /gpu-instance-types?cluster_id — instance types defined on a cluster.
+export async function queryGPUInstanceTypes(
+  params: { cluster_id: number },
+  options?: any
+) {
+  return request<{ items: ListItem[] }>(GPU_INSTANCE_TYPES_API, {
+    method: 'GET',
+    params,
+    cancelToken: options?.token
+  });
+}
+
+// GET /gpu-instance-type-flavors?cluster_id — the hardware flavors a new
+// instance type can be based on.
+export async function queryGPUInstanceTypeFlavors(
+  params: { cluster_id: number },
+  options?: any
+) {
+  return request<{ items: FlavorItem[] }>(GPU_INSTANCE_TYPE_FLAVORS_API, {
+    method: 'GET',
+    params,
+    cancelToken: options?.token
+  });
+}
+
+// POST /gpu-instance-types?cluster_id (GPUInstanceTypeCreate).
+export async function createGPUInstanceType(params: {
+  cluster_id: number;
+  data: FormData;
+}) {
+  return request<ListItem>(GPU_INSTANCE_TYPES_API, {
+    method: 'POST',
+    params: { cluster_id: params.cluster_id },
+    data: params.data
+  });
+}
+
+// DELETE /gpu-instance-types/{name}?cluster_id.
+export async function deleteGPUInstanceType(params: {
+  name: string;
+  cluster_id: number;
+}) {
+  return request(`${GPU_INSTANCE_TYPES_API}/${params.name}`, {
+    method: 'DELETE',
+    params: { cluster_id: params.cluster_id }
+  });
+}

src/pages/gpu-service/instance-types/components/add-instance-type-modal.tsx

@@ -0,0 +1,165 @@
+import useSubmitLock from '@/hooks/use-submit-lock';
+import Separator from '@/pages/llmodels/components/separator';
+import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Typography, message } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { FlavorItem, FormData } from '../config/types';
+import GPUServiceInstanceTypeForm from '../forms';
+import useQueryFlavors from '../services/use-query-flavors';
+import styles from '../styles/instance-types.module.less';
+import FlavorList from './flavor-list';
+
+type AddInstanceTypeModalProps = {
+  title: string;
+  open: boolean;
+  clusterId?: number;
+  onOk: (values: FormData) => void;
+  onCancel: () => void;
+};
+
+const ColTitle: React.FC<{
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}> = ({ children, style }) => (
+  <Typography.Title
+    level={3}
+    style={{
+      fontSize: 14,
+      paddingTop: 10,
+      paddingBottom: 16,
+      margin: 0,
+      position: 'sticky',
+      top: 0,
+      zIndex: 100,
+      backgroundColor: 'var(--ant-color-bg-elevated)',
+      ...style
+    }}
+  >
+    {children}
+  </Typography.Title>
+);
+
+const AddInstanceTypeModal: React.FC<AddInstanceTypeModalProps> = ({
+  title,
+  open,
+  clusterId,
+  onOk,
+  onCancel
+}) => {
+  const intl = useIntl();
+  const form = useRef<any>(null);
+  const { loading, guard, run, release } = useSubmitLock();
+  const [selectedFlavor, setSelectedFlavor] = useState<FlavorItem | null>(null);
+  const {
+    dataList: flavorList,
+    loading: flavorLoading,
+    fetchFlavors
+  } = useQueryFlavors();
+
+  // Fetch flavors when the drawer opens and auto-select the first one, so the
+  // form's flavor-derived fields (group / acceleratable) are always set.
+  useEffect(() => {
+    if (!open) {
+      setSelectedFlavor(null);
+      return;
+    }
+    if (!clusterId) return;
+    const load = async () => {
+      const list = await fetchFlavors(clusterId);
+      setSelectedFlavor(list?.[0] ?? null);
+    };
+    load();
+  }, [open, clusterId]);
+
+  const handleSubmit = () => {
+    if (!selectedFlavor) {
+      message.warning(
+        intl.formatMessage({ id: 'gpuservice.instanceType.flavor.required' })
+      );
+      return;
+    }
+    guard(() => form.current?.submit());
+  };
+
+  const handleCancel = () => {
+    form.current?.resetFields();
+    onCancel();
+  };
+
+  const onFinish = async (values: FormData) => {
+    await run(() => onOk({ ...values }));
+  };
+
+  return (
+    <GSDrawer
+      title={title}
+      open={open}
+      onClose={handleCancel}
+      destroyOnHidden
+      closeIcon={false}
+      mask={{ closable: false }}
+      keyboard={false}
+      styles={{
+        wrapper: { width: 'min(900px, calc(100vw - 220px))' },
+        body: { overflowY: 'hidden' }
+      }}
+      footer={false}
+    >
+      <div className={styles.container}>
+        <div className={styles.colWrapper}>
+          <ColumnWrapper styles={{ container: { paddingBlock: 0 } }}>
+            <div className={styles.panelBody}>
+              <div className={styles.stickyHead}>
+                <ColTitle
+                  style={{
+                    paddingBottom: 0
+                  }}
+                >
+                  {intl.formatMessage({ id: 'gpuservice.instanceType.flavor' })}
+                </ColTitle>
+              </div>
+              <FlavorList
+                value={selectedFlavor?.name}
+                dataList={flavorList}
+                loading={flavorLoading}
+                onChange={setSelectedFlavor}
+              />
+            </div>
+          </ColumnWrapper>
+          <Separator />
+        </div>
+        <div className={styles.formWrapper}>
+          <ColumnWrapper
+            styles={{ container: { paddingBlock: 0 } }}
+            footer={
+              <ModalFooter
+                onOk={handleSubmit}
+                onCancel={handleCancel}
+                loading={loading}
+                style={{
+                  padding: '16px 24px 8px',
+                  display: 'flex',
+                  justifyContent: 'flex-end'
+                }}
+              />
+            }
+          >
+            <ColTitle>
+              {intl.formatMessage({ id: 'common.title.config' })}
+            </ColTitle>
+            <GPUServiceInstanceTypeForm
+              ref={form}
+              open={open}
+              selectedFlavor={selectedFlavor}
+              onFinish={onFinish}
+              onFinishFailed={release}
+            />
+          </ColumnWrapper>
+        </div>
+      </div>
+    </GSDrawer>
+  );
+};
+
+export default AddInstanceTypeModal;

src/pages/gpu-service/instance-types/components/flavor-list.tsx

@@ -0,0 +1,129 @@
+import { FileSkeletonRows } from '@/pages/llmodels/components/model-source/file-skeleton';
+import {
+  AutoTooltip,
+  IconFont,
+  TemplateCard,
+  ThemeTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Empty, Flex, Spin, Typography } from 'antd';
+import _ from 'lodash';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { FlavorItem } from '../config/types';
+import styles from '../styles/instance-types.module.less';
+
+const { Text } = Typography;
+
+interface FlavorListProps {
+  value?: string;
+  dataList: FlavorItem[];
+  loading?: boolean;
+  onChange?: (item: FlavorItem) => void;
+}
+
+const MetaItem: React.FC<{
+  icon: string;
+  label: string;
+  value?: React.ReactNode;
+}> = ({ icon, label, value }) => {
+  return (
+    <span className={styles.metaLabel}>
+      <IconFont className="icon" type={icon} />
+      {label}: <span className={styles.metaValue}>{value ?? '-'}</span>
+    </span>
+  );
+};
+
+const FlavorList: React.FC<FlavorListProps> = ({
+  value,
+  dataList,
+  loading,
+  onChange
+}) => {
+  const intl = useIntl();
+
+  if (!dataList.length) {
+    if (loading) {
+      return (
+        <Spin spinning size="middle">
+          <Flex vertical gap={16} style={{ minHeight: 200 }}>
+            {_.times(6, (index: number) => (
+              <FileSkeletonRows key={index} counts={2} itemHeight={96} />
+            ))}
+          </Flex>
+        </Spin>
+      );
+    }
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  }
+
+  return (
+    <Flex vertical gap={16}>
+      {dataList.map((item) => {
+        const spec = item.spec || {};
+        const manufacturer = spec.manufacturer || '';
+        const color = manufactureColorMap[manufacturer] ?? 'purple';
+        // A generic (no product, no/`generic` manufacturer) flavor is shown as
+        // "CPU-only" instead of falling back to the raw flavor name.
+        const isCpuOnly =
+          !spec.acceleratable &&
+          !spec.product &&
+          (!manufacturer || manufacturer.toLowerCase() === 'generic');
+        const title = isCpuOnly ? 'CPU-only' : spec.product || item.name || '-';
+        return (
+          <TemplateCard
+            key={item.name}
+            className={styles.flavorCard}
+            clickable
+            ghost
+            hoverable
+            active={value === item.name}
+            onClick={() => onChange?.(item)}
+          >
+            <Flex vertical gap={12} style={{ width: '100%' }}>
+              <Flex align="center" justify="space-between" gap={8}>
+                <div style={{ minWidth: 0, fontWeight: 500 }}>
+                  <AutoTooltip ghost minWidth={20}>
+                    <Text>{title}</Text>
+                  </AutoTooltip>
+                </div>
+                {manufacturer && (
+                  <ThemeTag color={color} style={{ fontWeight: 400 }}>
+                    {manufacturer.toUpperCase()}
+                  </ThemeTag>
+                )}
+              </Flex>
+              {/* Memory / sliceable only apply to accelerator (GPU) flavors;
+                  a non-acceleratable (generic) flavor has neither. */}
+              {spec.acceleratable && (
+                <Flex wrap gap={16}>
+                  <MetaItem
+                    icon="icon-ram-02"
+                    label={intl.formatMessage({
+                      id: 'gpuservice.instance.memory'
+                    })}
+                    value={formatMemoryDisplay(spec.memory ?? undefined) ?? '-'}
+                  />
+                  <MetaItem
+                    icon="icon-sliced"
+                    label={intl.formatMessage({
+                      id: 'gpuservice.instance.sliceable'
+                    })}
+                    value={
+                      spec.sliceable
+                        ? intl.formatMessage({ id: 'common.table.yes' })
+                        : intl.formatMessage({ id: 'common.table.no' })
+                    }
+                  />
+                </Flex>
+              )}
+            </Flex>
+          </TemplateCard>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default FlavorList;

src/pages/gpu-service/instance-types/components/instance-type-card.tsx

@@ -0,0 +1,147 @@
+import {
+  AutoTooltip,
+  DropdownActions,
+  IconFont,
+  StatusTag,
+  TemplateCard,
+  ThemeTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
+import _ from 'lodash';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import { ceilMilliToCore, parseQuantityToGi } from '../../utils';
+import {
+  InstanceTypePhaseLabelMap,
+  status as phaseStatusMap,
+  rowActionList
+} from '../config';
+import { ListItem } from '../config/types';
+import styles from '../styles/instance-types.module.less';
+
+interface InstanceTypeCardProps {
+  data: ListItem;
+  onDelete?: (record: ListItem) => void;
+}
+
+const InstanceTypeCard: React.FC<InstanceTypeCardProps> = ({
+  data,
+  onDelete
+}) => {
+  const intl = useIntl();
+  const spec = data.spec || {};
+  const unit = spec.unitResources || {};
+  const phase = data.status?.phase || '';
+  const manufacturer = spec.manufacturer || '';
+  const manufacturerColor = manufactureColorMap[manufacturer] ?? 'purple';
+
+  const memoryText = formatMemoryDisplay(spec.memory ?? undefined);
+
+  // Base resources, formatted into a single "·"-separated line. Falsy parts
+  // (e.g. a CPU-only type without VRAM) drop out rather than showing "-".
+  const cpuCores = ceilMilliToCore(unit.cpu ?? null)?.cores;
+  const ramGi = parseQuantityToGi(unit.ram ?? null)?.value;
+  const storageGi = parseQuantityToGi(spec.localStorage ?? null)?.value;
+  const osLabel = _.capitalize(spec.os || '');
+  const archLabel = _.toUpper(spec.arch || '');
+  const storageWord = intl.formatMessage({
+    id: 'gpuservice.instanceType.localStorage'
+  });
+  const footerParts = [
+    cpuCores != null ? `${cpuCores} vCPU` : null,
+    ramGi != null ? `${ramGi} GiB RAM` : null,
+    storageGi != null ? `${storageGi} GiB ${storageWord}` : null,
+    osLabel ? `${osLabel}${archLabel ? ` (${archLabel})` : ''}` : null
+  ].filter(Boolean) as string[];
+
+  const handleAction = (item: any) => {
+    if (item.key === 'delete') {
+      onDelete?.(data);
+    }
+  };
+
+  return (
+    <TemplateCard
+      className={styles.listCard}
+      clickable={false}
+      hoverable
+      ghost
+      header={
+        <div className={styles.header}>
+          <span className={styles.product}>
+            <AutoTooltip ghost minWidth={20}>
+              {spec.product || data.name || '-'}
+            </AutoTooltip>
+          </span>
+          <span className={styles.headerRight}>
+            <span onClick={(e) => e.stopPropagation()}>
+              <DropdownActions
+                menu={{ items: rowActionList, onClick: handleAction }}
+              >
+                <Button
+                  icon={<IconFont type="icon-more" />}
+                  size="small"
+                  type="text"
+                />
+              </DropdownActions>
+            </span>
+          </span>
+        </div>
+      }
+    >
+      <div className={styles.card}>
+        <div className={styles.hero}>
+          <span className={styles.name}>
+            <AutoTooltip ghost minWidth={20}>
+              {data.name || '-'}
+            </AutoTooltip>
+          </span>
+          <span className={styles.memory}>{memoryText || '—'}</span>
+        </div>
+
+        <div className={styles.subline}>
+          {manufacturer && (
+            <ThemeTag color={manufacturerColor} style={{ fontWeight: 400 }}>
+              {manufacturer.toUpperCase()}
+            </ThemeTag>
+          )}
+          {phase ? (
+            <StatusTag
+              statusValue={{
+                status: phaseStatusMap[phase],
+                text: InstanceTypePhaseLabelMap[phase] || phase,
+                message: data.status?.phaseMessage || ''
+              }}
+            />
+          ) : null}
+          {spec.clockSpeed ? <span>{spec.clockSpeed}</span> : null}
+          <span
+            className={`${styles.tag} ${
+              spec.sliceable ? styles.tagSliceable : styles.tagPlain
+            }`}
+          >
+            {spec.sliceable
+              ? intl.formatMessage({ id: 'gpuservice.instance.sliceable' })
+              : intl.formatMessage({
+                  id: 'gpuservice.instanceType.notSliceable'
+                })}
+          </span>
+        </div>
+
+        <div className={styles.divider} />
+
+        <div className={styles.footer}>
+          {footerParts.map((part, index) => (
+            <span key={part}>
+              {index > 0 && <span className={styles.dotSep}>·</span>}
+              {part}
+            </span>
+          ))}
+        </div>
+      </div>
+    </TemplateCard>
+  );
+};
+
+export default InstanceTypeCard;

src/pages/gpu-service/instance-types/components/instance-type-list.tsx

@@ -0,0 +1,31 @@
+import { ResizeContainer } from '@gpustack/core-ui';
+import { Spin } from 'antd';
+import { ListItem } from '../config/types';
+import InstanceTypeCard from './instance-type-card';
+
+interface InstanceTypeListProps {
+  dataList: ListItem[];
+  loading: boolean;
+  onDelete?: (record: ListItem) => void;
+}
+
+const InstanceTypeList: React.FC<InstanceTypeListProps> = ({
+  dataList,
+  loading,
+  onDelete
+}) => {
+  return (
+    <Spin spinning={loading} size="middle">
+      <ResizeContainer
+        defaultSpan={8}
+        resizable
+        dataList={dataList}
+        renderItem={(item: ListItem) => (
+          <InstanceTypeCard data={item} onDelete={onDelete} />
+        )}
+      />
+    </Spin>
+  );
+};
+
+export default InstanceTypeList;

src/pages/gpu-service/instance-types/config/index.ts

@@ -0,0 +1,47 @@
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
+import { icons } from '@gpustack/core-ui';
+
+// os is fixed to lowercase "linux" on the wire; the form only ever shows Linux.
+export const GPU_INSTANCE_TYPE_OS = 'linux';
+
+export const InstanceTypePhaseValueMap = {
+  Active: 'Active',
+  Inactive: 'Inactive',
+  Preparing: 'Preparing'
+};
+
+export const InstanceTypePhaseLabelMap: Record<string, string> = {
+  [InstanceTypePhaseValueMap.Active]: 'Active',
+  [InstanceTypePhaseValueMap.Inactive]: 'Inactive',
+  [InstanceTypePhaseValueMap.Preparing]: 'Preparing'
+};
+
+export const status: Record<string, StatusType> = {
+  [InstanceTypePhaseValueMap.Active]: StatusMaps.success,
+  [InstanceTypePhaseValueMap.Inactive]: StatusMaps.inactive,
+  [InstanceTypePhaseValueMap.Preparing]: StatusMaps.transitioning
+};
+
+export const ArchOptions = [
+  { label: 'amd64', value: 'amd64' },
+  { label: 'arm64', value: 'arm64' }
+];
+
+// ``icon`` is narrowed to ``any`` so the inferred type doesn't reach into
+// the antd icon component's internal path.
+export const rowActionList: Array<{
+  label: string;
+  key: string;
+  locale: boolean;
+  icon: any;
+  danger?: boolean;
+}> = [
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    locale: true,
+    icon: icons.DeleteOutlined,
+    danger: true
+  }
+];

src/pages/gpu-service/instance-types/config/types.ts

@@ -0,0 +1,65 @@
+export interface UnitResources {
+  cpu?: string | null;
+  ram?: string | null;
+}
+
+export interface InstanceTypeSpec {
+  manufacturer?: string | null;
+  product?: string | null;
+  family?: string | null;
+  memory?: string | null;
+  cores?: string | null;
+  clockSpeed?: string | null;
+  sliceable?: boolean;
+  os?: string | null;
+  arch?: string | null;
+  acceleratable?: boolean;
+  acceleratorGroup?: string | null;
+  generalGroup?: string | null;
+  unitResources?: UnitResources | null;
+  localStorage?: string | null;
+}
+
+export interface InstanceTypeStatus {
+  phase?: string | null;
+  phaseMessage?: string | null;
+}
+
+// Row shape for the management list (GET /gpu-instance-types).
+export interface ListItem {
+  name: string;
+  spec: InstanceTypeSpec;
+  status?: InstanceTypeStatus;
+}
+
+// Selectable flavor shown in the create drawer's first column
+// (GET /gpu-instance-type-flavors). Its acceleratorGroup / generalGroup /
+// acceleratable are copied into the created instance type.
+export interface FlavorItem {
+  name: string;
+  spec: {
+    manufacturer?: string | null;
+    product?: string | null;
+    family?: string | null;
+    memory?: string | null;
+    cores?: string | null;
+    sliceable?: boolean;
+    acceleratable?: boolean;
+    acceleratorGroup?: string | null;
+    generalGroup?: string | null;
+  };
+}
+
+// Body for POST /gpu-instance-types (GPUInstanceTypeCreate).
+export interface FormData {
+  name: string;
+  spec: {
+    acceleratorGroup?: string | null;
+    generalGroup?: string | null;
+    acceleratable?: boolean;
+    os: string;
+    arch?: string | null;
+    unitResources?: UnitResources;
+    localStorage?: string | null;
+  };
+}

src/pages/gpu-service/instance-types/forms/index.tsx

@@ -0,0 +1,228 @@
+import { validateLabelNameRegxFor63 } from '@/config';
+import {
+  Input as CInput,
+  InputNumber,
+  Select as SealSelect,
+  useAppUtils
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { ArchOptions, GPU_INSTANCE_TYPE_OS } from '../config';
+import { FlavorItem, FormData } from '../config/types';
+
+// RAM / storage are entered as a plain number in GB but stored/submitted as a
+// "Gi" quantity string. These drive the FormItem's submit (`normalize`) and
+// display (`getValueProps`) conversions.
+const giNormalize = (value?: number | string | null) =>
+  value ? `${value}Gi` : undefined;
+const giValueProps = (value?: string | null) => ({
+  value: value ? String(value).replace(/Gi$/i, '') : ''
+});
+
+interface InstanceTypeFormProps {
+  ref?: any;
+  open: boolean;
+  // The flavor picked in the drawer's first column. Its acceleratorGroup /
+  // generalGroup / acceleratable are copied into the created instance type.
+  selectedFlavor?: FlavorItem | null;
+  onFinish: (values: FormData) => Promise<void>;
+  onFinishFailed?: (errorInfo: any) => void;
+}
+
+const GPUServiceInstanceTypeForm: React.FC<InstanceTypeFormProps> = forwardRef(
+  (props, ref) => {
+    const { open, selectedFlavor, onFinish, onFinishFailed } = props;
+    const intl = useIntl();
+    const { getRuleMessage } = useAppUtils();
+    const [form] = Form.useForm<FormData>();
+
+    // A non-acceleratable (generic) flavor has no per-GPU concept, so unit CPU
+    // is fixed to 1 and the field is disabled.
+    const acceleratable = !!selectedFlavor?.spec?.acceleratable;
+
+    useEffect(() => {
+      if (!open) {
+        form.resetFields();
+        return;
+      }
+      form.setFieldsValue({
+        spec: {
+          arch: ArchOptions[0].value
+        }
+      } as any);
+    }, [open, form]);
+
+    // Force unit CPU to 1 whenever the picked flavor is not acceleratable.
+    useEffect(() => {
+      if (!open || acceleratable) return;
+      form.setFieldValue(['spec', 'unitResources', 'cpu'], 1);
+    }, [open, acceleratable, form]);
+
+    useImperativeHandle(ref, () => ({
+      submit: () => {
+        form.submit();
+      },
+      resetFields: () => {
+        form.resetFields();
+      }
+    }));
+
+    const handleFinish = async (values: FormData) => {
+      // The hardware group / acceleratable flags are not user-editable; they
+      // come from the chosen flavor. os is fixed to lowercase "linux". ram /
+      // localStorage already carry the "Gi" suffix from the FormItem normalize.
+      const cpu = values.spec?.unitResources?.cpu;
+      await onFinish({
+        name: values.name,
+        spec: {
+          acceleratorGroup: selectedFlavor?.spec?.acceleratorGroup ?? null,
+          generalGroup: selectedFlavor?.spec?.generalGroup ?? null,
+          acceleratable: selectedFlavor?.spec?.acceleratable ?? false,
+          os: GPU_INSTANCE_TYPE_OS,
+          arch: values.spec?.arch ?? null,
+          unitResources: {
+            cpu: cpu != null && cpu !== '' ? String(cpu) : null,
+            ram: values.spec?.unitResources?.ram ?? null
+          },
+          localStorage: values.spec?.localStorage ?? null
+        }
+      });
+    };
+
+    return (
+      <Form
+        name="gpuServiceInstanceTypeForm"
+        form={form}
+        onFinish={handleFinish}
+        onFinishFailed={onFinishFailed}
+        preserve={false}
+      >
+        <Form.Item<FormData>
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('input', 'common.table.name')
+            },
+            {
+              pattern: validateLabelNameRegxFor63,
+              message: intl.formatMessage({ id: 'gpuservice.form.rule.name' })
+            }
+          ]}
+        >
+          <CInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item>
+          <CInput.Input
+            disabled
+            value="Linux"
+            label={intl.formatMessage({ id: 'gpuservice.instance.os' })}
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'arch']}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('select', 'gpuservice.instance.arch')
+            }
+          ]}
+        >
+          <SealSelect
+            label={intl.formatMessage({ id: 'gpuservice.instance.arch' })}
+            required
+            options={ArchOptions}
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'unitResources', 'cpu']}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.unitCpu'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            disabled={!acceleratable}
+            style={{ width: '100%' }}
+            label={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu'
+            })}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu.tip'
+            })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'unitResources', 'ram']}
+          normalize={giNormalize}
+          getValueProps={giValueProps}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.unitRam'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            style={{ width: '100%' }}
+            label={`${intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam'
+            })} (GB)`}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam.tip'
+            })}
+            required
+          />
+        </Form.Item>
+
+        <Form.Item<FormData>
+          name={['spec', 'localStorage']}
+          normalize={giNormalize}
+          getValueProps={giValueProps}
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage(
+                'input',
+                'gpuservice.instanceType.localStorage'
+              )
+            }
+          ]}
+        >
+          <InputNumber
+            min={0}
+            style={{ width: '100%' }}
+            label={`${intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage'
+            })} (GB)`}
+            description={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage.tip'
+            })}
+            required
+          />
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default GPUServiceInstanceTypeForm;

src/pages/gpu-service/instance-types/hooks/use-create-instance-type-modal.ts

@@ -0,0 +1,37 @@
+import useBodyScroll from '@/hooks/use-body-scroll';
+import { useState } from 'react';
+
+const useCreateInstanceTypeModal = () => {
+  const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    open: boolean;
+    title: string;
+  }>({
+    open: false,
+    title: ''
+  });
+
+  const openModal = (title: string) => {
+    setOpenModalStatus({
+      open: true,
+      title
+    });
+    saveScrollHeight();
+  };
+
+  const closeModal = () => {
+    setOpenModalStatus({
+      open: false,
+      title: ''
+    });
+    restoreScrollHeight();
+  };
+
+  return {
+    openInstanceTypeModalStatus: openModalStatus,
+    openInstanceTypeModal: openModal,
+    closeInstanceTypeModal: closeModal
+  };
+};
+
+export default useCreateInstanceTypeModal;

src/pages/gpu-service/instance-types/hooks/use-instance-type-columns.tsx

@@ -0,0 +1,224 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import {
+  AutoTooltip,
+  DropdownButtons,
+  icons,
+  StatusTag,
+  ThemeTag
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Space, Tooltip } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+import _ from 'lodash';
+import { useMemo } from 'react';
+import { formatMemoryDisplay } from '../../instances/config';
+import { manufactureColorMap } from '../../templates/config';
+import {
+  ceilMilliToCore,
+  formatManufacturer,
+  parseQuantityToGi
+} from '../../utils';
+import { InstanceTypePhaseLabelMap, status as phaseStatusMap } from '../config';
+import { ListItem } from '../config/types';
+
+interface ColumnsHookProps {
+  handleSelect: (val: string, record: ListItem) => void;
+}
+
+// DropdownButtons reads `locale` / `props` at runtime; its `items` prop is
+// typed as antd's MenuProps['items'], so cast the config to satisfy it.
+const rowActions = [
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    locale: true,
+    icon: icons.DeleteOutlined,
+    props: { danger: true }
+  }
+] as any;
+
+// Column header with an info tooltip (used for the per-GPU resource columns).
+const TitleWithTip: React.FC<{ title: string; tip: string }> = ({
+  title,
+  tip
+}) => (
+  <Space size={4}>
+    <span>{title}</span>
+    <Tooltip title={tip}>
+      <QuestionCircleOutlined
+        style={{ color: 'var(--ant-color-text-tertiary)' }}
+      />
+    </Tooltip>
+  </Space>
+);
+
+const useInstanceTypeColumns = ({
+  handleSelect
+}: ColumnsHookProps): ColumnsType<ListItem> => {
+  const intl = useIntl();
+
+  return useMemo(() => {
+    return [
+      {
+        title: intl.formatMessage({ id: 'common.table.name' }),
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: { showTitle: false },
+        render: (text: string) => (
+          <AutoTooltip ghost maxWidth={240} title={text}>
+            <span className="text-primary">{text || '-'}</span>
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'gpuservice.instanceType.product' }),
+        dataIndex: ['spec', 'product'],
+        key: 'product',
+        ellipsis: { showTitle: false },
+        render: (text: string) => (
+          <AutoTooltip ghost maxWidth={200}>
+            {text || '-'}
+          </AutoTooltip>
+        )
+      },
+      {
+        title: intl.formatMessage({ id: 'resources.table.vendor' }),
+        dataIndex: ['spec', 'manufacturer'],
+        key: 'manufacturer',
+        ellipsis: { showTitle: false },
+        render: (value: string) =>
+          value ? (
+            <ThemeTag
+              color={manufactureColorMap[value] ?? 'purple'}
+              style={{ fontWeight: 400, width: 'fit-content' }}
+            >
+              {formatManufacturer(value)}
+            </ThemeTag>
+          ) : (
+            '-'
+          )
+      },
+      {
+        title: intl.formatMessage({ id: 'gpuservice.instance.memory' }),
+        dataIndex: ['spec', 'memory'],
+        key: 'memory',
+        ellipsis: { showTitle: false },
+        // Non-acceleratable (generic) types have no VRAM concept → N/A.
+        render: (value: string, record: ListItem) =>
+          record.spec?.acceleratable
+            ? formatMemoryDisplay(value ?? undefined) || '-'
+            : 'N/A'
+      },
+      // {
+      //   title: intl.formatMessage({ id: 'gpuservice.instance.sliceable' }),
+      //   dataIndex: ['spec', 'sliceable'],
+      //   key: 'sliceable',
+      //   ellipsis: { showTitle: false },
+      //   render: (value: boolean) =>
+      //     value
+      //       ? intl.formatMessage({ id: 'common.table.yes' })
+      //       : intl.formatMessage({ id: 'common.table.no' })
+      // },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitCpu.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'unitResources', 'cpu'],
+        key: 'cpu',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const cores = ceilMilliToCore(value ?? null)?.cores;
+          return cores != null ? `${cores} vCPU` : '-';
+        }
+      },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.unitRam.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'unitResources', 'ram'],
+        key: 'ram',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const gi = parseQuantityToGi(value ?? null)?.value;
+          return gi != null ? `${gi} GB` : '-';
+        }
+      },
+      {
+        title: (
+          <TitleWithTip
+            title={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage'
+            })}
+            tip={intl.formatMessage({
+              id: 'gpuservice.instanceType.localStorage.tip'
+            })}
+          />
+        ),
+        dataIndex: ['spec', 'localStorage'],
+        key: 'localStorage',
+        ellipsis: { showTitle: false },
+        render: (value: string) => {
+          const gi = parseQuantityToGi(value ?? null)?.value;
+          return gi != null ? `${gi} GB` : '-';
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'gpuservice.instance.os' }),
+        key: 'os',
+        ellipsis: { showTitle: false },
+        render: (_text, record: ListItem) => {
+          const os = _.capitalize(record.spec?.os || '');
+          const arch = _.toUpper(record.spec?.arch || '');
+          if (!os) return '-';
+          return arch ? `${os} (${arch})` : os;
+        }
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.status' }),
+        dataIndex: ['status', 'phase'],
+        key: 'status',
+        ellipsis: { showTitle: false },
+        render: (value: string, record: ListItem) =>
+          value ? (
+            <StatusTag
+              statusValue={{
+                status: phaseStatusMap[value],
+                text: InstanceTypePhaseLabelMap[value] || value,
+                message: record.status?.phaseMessage || ''
+              }}
+            />
+          ) : (
+            '-'
+          )
+      },
+      {
+        title: intl.formatMessage({ id: 'common.table.operation' }),
+        key: 'operation',
+        dataIndex: 'operation',
+        ellipsis: { showTitle: false },
+        render: (_text, record: ListItem) => (
+          <DropdownButtons
+            items={rowActions}
+            onSelect={(val: string) => handleSelect(val, record)}
+          />
+        )
+      }
+    ];
+  }, [handleSelect, intl]);
+};
+
+export default useInstanceTypeColumns;

src/pages/gpu-service/instance-types/index.tsx

@@ -0,0 +1,231 @@
+import { ProviderValueMap } from '@/pages/cluster-management/config';
+import { useQueryClusterList } from '@/pages/cluster-management/services/use-query-cluster-list';
+import {
+  BaseSelect,
+  DeleteModal,
+  FilterBar,
+  IconFont,
+  NoResult
+} from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { useMemoizedFn } from 'ahooks';
+import { ConfigProvider, Divider, Flex, Table, message } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import PageBox, { HeaderLeft } from '../../_components/page-box';
+import { deleteGPUInstanceType } from './apis';
+import AddInstanceTypeModal from './components/add-instance-type-modal';
+import { FormData, ListItem } from './config/types';
+import useCreateInstanceTypeModal from './hooks/use-create-instance-type-modal';
+import useInstanceTypeColumns from './hooks/use-instance-type-columns';
+import useCreateInstanceType from './services/use-create-instance-type';
+import useQueryInstanceTypes from './services/use-query-instance-types';
+
+const GPUServiceInstanceTypes: React.FC = () => {
+  const intl = useIntl();
+  const deleteModalRef = useRef<any>(null);
+  const [clusterId, setClusterId] = useState<number | undefined>();
+  const [keyword, setKeyword] = useState('');
+  const [loaded, setLoaded] = useState(false);
+
+  const {
+    clusterList,
+    fetchClusterList,
+    loading: clusterLoading
+  } = useQueryClusterList();
+  const {
+    dataList,
+    loading: instanceTypesLoading,
+    fetchInstanceTypes
+  } = useQueryInstanceTypes();
+  const { fetchData: createInstanceType } = useCreateInstanceType();
+  const {
+    openInstanceTypeModalStatus,
+    openInstanceTypeModal,
+    closeInstanceTypeModal
+  } = useCreateInstanceTypeModal();
+
+  // Only Kubernetes clusters own GPU instance types.
+  const k8sClusters = useMemo(
+    () => clusterList.filter((c) => c.provider === ProviderValueMap.Kubernetes),
+    [clusterList]
+  );
+
+  // Fetch the visible clusters, default to the first Kubernetes one, then load
+  // its instance types. Action-driven: subsequent loads fire from the cluster
+  // picker / refresh, never from an effect dependency.
+  useEffect(() => {
+    const init = async () => {
+      const items = await fetchClusterList({ page: -1 });
+      const firstK8s = (items || []).find(
+        (c: any) => c.provider === ProviderValueMap.Kubernetes
+      );
+      if (firstK8s?.id != null) {
+        setClusterId(firstK8s.id);
+        await fetchInstanceTypes(firstK8s.id);
+      }
+      setLoaded(true);
+    };
+    init();
+  }, []);
+
+  const handleClusterChange = useMemoizedFn((value: number) => {
+    setClusterId(value);
+    setKeyword('');
+    fetchInstanceTypes(value);
+  });
+
+  const handleRefresh = useMemoizedFn(() => {
+    if (clusterId != null) {
+      fetchInstanceTypes(clusterId);
+    }
+  });
+
+  const handleNameChange = useMemoizedFn(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setKeyword(e.target.value);
+    }
+  );
+
+  const handleAdd = useMemoizedFn(() => {
+    openInstanceTypeModal(
+      intl.formatMessage({ id: 'gpuservice.instanceType.add' })
+    );
+  });
+
+  const handleModalOk = useMemoizedFn(async (data: FormData) => {
+    if (clusterId == null) return;
+    try {
+      await createInstanceType({ cluster_id: clusterId, data });
+      closeInstanceTypeModal();
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      fetchInstanceTypes(clusterId);
+    } catch (error) {
+      // handled by the request interceptor
+    }
+  });
+
+  const handleDelete = useMemoizedFn((record: ListItem) => {
+    if (clusterId == null) return;
+    deleteModalRef.current?.show({
+      content: intl.formatMessage({ id: 'gpuservice.instanceType' }),
+      operation: 'common.delete.single.confirm',
+      name: record.name,
+      async onOk() {
+        await deleteGPUInstanceType({
+          name: record.name,
+          cluster_id: clusterId
+        });
+        fetchInstanceTypes(clusterId);
+      }
+    });
+  });
+
+  const handleSelect = useMemoizedFn((val: string, record: ListItem) => {
+    if (val === 'delete') {
+      handleDelete(record);
+    }
+  });
+
+  const columns = useInstanceTypeColumns({ handleSelect });
+
+  const filteredList = useMemo(() => {
+    const trimmed = keyword.trim().toLowerCase();
+    if (!trimmed) return dataList;
+    return dataList.filter((item) => item.name.toLowerCase().includes(trimmed));
+  }, [dataList, keyword]);
+
+  const hasK8sCluster = k8sClusters.length > 0;
+
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    return (
+      <NoResult
+        loading={instanceTypesLoading || clusterLoading}
+        loadend={loaded}
+        dataSource={filteredList}
+        image={<IconFont type="icon-gpu1" />}
+        filters={keyword ? { search: keyword } : undefined}
+        noFoundText={intl.formatMessage({
+          id: 'noresult.gpuservice.instanceType.nofound'
+        })}
+        title={intl.formatMessage({
+          id: 'noresult.gpuservice.instanceType.title'
+        })}
+        subTitle={
+          hasK8sCluster
+            ? intl.formatMessage({
+                id: 'noresult.gpuservice.instanceType.subTitle'
+              })
+            : intl.formatMessage({ id: 'noresult.resources.k8sCluster' })
+        }
+        {...(hasK8sCluster
+          ? {
+              onClick: handleAdd,
+              buttonText: intl.formatMessage({ id: 'noresult.button.add' })
+            }
+          : {})}
+      />
+    );
+  };
+
+  return (
+    <>
+      <HeaderLeft>
+        <Flex align="center">
+          <span className="font-600">
+            {intl.formatMessage({ id: 'gpuservice.instance.types' })}
+          </span>
+          <Divider orientation="vertical" style={{ margin: '0 16px' }} />
+          <BaseSelect
+            size="small"
+            variant="borderless"
+            style={{ minWidth: 160 }}
+            popupMatchSelectWidth={false}
+            options={k8sClusters}
+            value={clusterId}
+            onChange={handleClusterChange}
+          />
+        </Flex>
+      </HeaderLeft>
+      <PageBox>
+        <FilterBar
+          marginBottom={22}
+          marginTop={30}
+          showSelect={false}
+          inputHolder={intl.formatMessage({
+            id: 'gpuservice.instanceType.filter.name'
+          })}
+          buttonText={intl.formatMessage({
+            id: 'gpuservice.instanceType.add'
+          })}
+          handleSearch={handleRefresh}
+          handleClickPrimary={hasK8sCluster ? handleAdd : undefined}
+          handleInputChange={handleNameChange}
+          widths={{ input: 300 }}
+        />
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            columns={columns}
+            dataSource={filteredList}
+            loading={{
+              spinning: instanceTypesLoading || clusterLoading,
+              size: 'middle'
+            }}
+            rowKey={(record) => record.name}
+            pagination={false}
+          />
+        </ConfigProvider>
+      </PageBox>
+      <AddInstanceTypeModal
+        open={openInstanceTypeModalStatus.open}
+        title={openInstanceTypeModalStatus.title}
+        clusterId={clusterId}
+        onCancel={closeInstanceTypeModal}
+        onOk={handleModalOk}
+      />
+      <DeleteModal ref={deleteModalRef} />
+    </>
+  );
+};
+
+export default GPUServiceInstanceTypes;

src/pages/gpu-service/instance-types/services/use-create-instance-type.ts

@@ -0,0 +1,35 @@
+import { useQueryData } from '@gpustack/core-ui';
+import { useCallback } from 'react';
+import { createGPUInstanceType } from '../apis';
+import { FormData, ListItem } from '../config/types';
+
+interface CreateInstanceTypeParams {
+  cluster_id: number;
+  data: FormData;
+}
+
+export default function useCreateInstanceType() {
+  const fetchDetail = useCallback(
+    (params: CreateInstanceTypeParams) =>
+      createGPUInstanceType({
+        cluster_id: params.cluster_id,
+        data: params.data
+      }),
+    []
+  );
+
+  const { detailData, loading, cancelRequest, fetchData } = useQueryData<
+    ListItem,
+    CreateInstanceTypeParams
+  >({
+    fetchDetail,
+    key: 'createInstanceType'
+  });
+
+  return {
+    detailData,
+    loading,
+    cancelRequest,
+    fetchData
+  };
+}

src/pages/gpu-service/instance-types/services/use-query-flavors.ts

@@ -0,0 +1,58 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { CancelTokenSource } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+import { queryGPUInstanceTypeFlavors } from '../apis';
+import { FlavorItem } from '../config/types';
+
+// Cluster-scoped flavors for the create drawer's first column. Fetched when
+// the drawer opens (and on cluster change), never via an effect dependency.
+export default function useQueryFlavors() {
+  const tokenRef = useRef<CancelTokenSource | null>(null);
+  const [dataList, setDataList] = useState<FlavorItem[]>([]);
+
+  const {
+    runAsync: fetchFlavors,
+    loading,
+    cancel
+  } = useRequest(
+    async (clusterId: number) => {
+      tokenRef.current?.cancel();
+      tokenRef.current = createAxiosToken();
+      const res = await queryGPUInstanceTypeFlavors(
+        { cluster_id: clusterId },
+        { token: tokenRef.current.token }
+      );
+      const list = res?.items || [];
+      setDataList(list);
+      return list;
+    },
+    {
+      manual: true,
+      onError: (error: any) => {
+        if (error?.message === 'CANCEL_PREVIOUS_REQUEST') return;
+        setDataList([]);
+      }
+    }
+  );
+
+  const cancelRequest = () => {
+    cancel();
+    tokenRef.current?.cancel('CANCEL_PREVIOUS_REQUEST');
+  };
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      tokenRef.current?.cancel();
+    };
+  }, []);
+
+  return {
+    dataList,
+    loading,
+    fetchFlavors,
+    cancelRequest,
+    setDataList
+  };
+}

src/pages/gpu-service/instance-types/services/use-query-instance-types.ts

@@ -0,0 +1,60 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { CancelTokenSource } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+import { queryGPUInstanceTypes } from '../apis';
+import { ListItem } from '../config/types';
+
+// Cluster-scoped instance types for the management list. Action-driven:
+// call fetchInstanceTypes(clusterId) from the cluster picker / refresh, not
+// via an effect dependency.
+export default function useQueryInstanceTypes() {
+  const tokenRef = useRef<CancelTokenSource | null>(null);
+  const [dataList, setDataList] = useState<ListItem[]>([]);
+
+  const {
+    runAsync: fetchInstanceTypes,
+    loading,
+    cancel
+  } = useRequest(
+    async (clusterId: number) => {
+      tokenRef.current?.cancel();
+      tokenRef.current = createAxiosToken();
+      const res = await queryGPUInstanceTypes(
+        { cluster_id: clusterId },
+        { token: tokenRef.current.token }
+      );
+      const list = res?.items || [];
+      setDataList(list);
+      return list;
+    },
+    {
+      manual: true,
+      onError: (error: any) => {
+        // Ignore the synthetic cancel error from switching clusters quickly.
+        if (error?.message === 'CANCEL_PREVIOUS_REQUEST') return;
+        setDataList([]);
+      }
+    }
+  );
+
+  const cancelRequest = () => {
+    cancel();
+    tokenRef.current?.cancel('CANCEL_PREVIOUS_REQUEST');
+  };
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      tokenRef.current?.cancel();
+    };
+  }, []);
+
+  return {
+    dataList,
+    loading,
+    fetchInstanceTypes,
+    cancelRequest,
+    setDataList
+  };
+}

src/pages/gpu-service/instance-types/styles/instance-types.module.less

@@ -0,0 +1,150 @@
+// ============ create drawer (two-column: flavors | form) ============
+.container {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+}
+
+.colWrapper {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.formWrapper {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.panelBody {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+}
+
+.stickyHead {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--ant-color-bg-elevated);
+}
+
+.flavorCard {
+  height: auto !important;
+  min-height: 96px;
+}
+
+// ============ list card (Linear-style, minimal) ============
+.listCard {
+  height: auto !important;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// --- level 1: identity + status + actions ---
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+}
+
+.name {
+  min-width: 0;
+  font-size: 13px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+// --- level 2: hero (model + memory) ---
+.hero {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 18px;
+}
+
+.product {
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ant-color-text);
+}
+
+.memory {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--ant-color-text);
+}
+
+.subline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  min-height: 22px;
+  font-size: 13px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: var(--ant-border-radius-sm);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.tagSliceable {
+  color: var(--ant-color-primary);
+  background-color: var(--ant-color-primary-bg);
+}
+
+.tagPlain {
+  color: var(--ant-color-text-tertiary);
+  background-color: var(--ant-color-fill-tertiary);
+}
+
+// --- level 3: base resources ---
+.divider {
+  height: 1px;
+  margin: 16px 0;
+  background-color: var(--ant-color-border-secondary);
+  opacity: 0.6;
+}
+
+.footer {
+  font-size: 14px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.dotSep {
+  margin: 0 8px;
+  color: var(--ant-color-text-quaternary);
+}