chore: adjust deployment modal form

src/assets/styles/common.less

@@ -104,6 +104,11 @@
   justify-content: space-between;
 }
 
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
 .justify-center {
   display: flex;
   justify-content: center;

src/components/echarts/gauge.tsx

@@ -4,6 +4,16 @@ import EmptyData from '@/components/empty-data';
 import React, { memo } from 'react';
 import { ChartProps } from './types';
 
+const strokeColorFunc = (percent: number) => {
+  if (percent <= 50 || percent === undefined) {
+    return 'rgb(84, 204, 152, 80%)';
+  }
+  if (percent <= 80) {
+    return 'rgba(250, 173, 20, 80%)';
+  }
+  return 'rgba(255, 77, 79, 80%)';
+};
+
 const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   props
 ) => {
@@ -18,6 +28,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   }
 
   const setDataOptions = () => {
+    const colorValue = color || strokeColorFunc(value);
     return {
       title: {
         ...titleConfig,
@@ -33,7 +44,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
             lineStyle: {
               ...gaugeItemConfig.axisLine.lineStyle,
               color: [
-                [value / 100, color],
+                [value / 100, colorValue],
                 [1, chartColorMap.gaugeBgColor]
               ]
             }

src/components/seal-form/checkbox-field.tsx

@@ -0,0 +1,27 @@
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Checkbox, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import React from 'react';
+
+const CheckboxField: React.FC<{
+  description?: React.ReactNode;
+  label: React.ReactNode;
+  checked?: boolean;
+  onChange?: (e: CheckboxChangeEvent) => void;
+}> = ({ description, label, checked, onChange }) => {
+  return (
+    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
+      <Tooltip title={description || false}>
+        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
+        {!!description && (
+          <QuestionCircleOutlined
+            className="m-l-4"
+            style={{ color: 'var(--ant-color-text-tertiary)' }}
+          />
+        )}
+      </Tooltip>
+    </Checkbox>
+  );
+};
+
+export default CheckboxField;

src/components/templates/card-list.tsx

@@ -15,14 +15,18 @@ const SpinWrapper = styled.div`
   left: 0;
   max-height: 400px;
   right: 0;
+  .skelton-wrapper {
+    width: 100%;
+  }
 `;
 
 interface CatalogListProps {
+  defaultSpan?: number;
+  resizable?: boolean;
   dataList: any[];
   loading: boolean;
   activeId: number;
   isFirst: boolean;
-  onDeploy: (data: any) => void;
   renderItem: (data: any) => React.ReactNode;
   Skeleton: React.ComponentType<{ span: number }>;
 }
@@ -60,8 +64,16 @@ const ListSkeleton: React.FC<{
 };
 
 const CardList: React.FC<CatalogListProps> = (props) => {
-  const { dataList, loading, isFirst, Skeleton, renderItem } = props;
-  const [span, setSpan] = React.useState(8);
+  const {
+    dataList,
+    loading,
+    isFirst,
+    defaultSpan = 8,
+    resizable = true,
+    Skeleton,
+    renderItem
+  } = props;
+  const [span, setSpan] = React.useState(defaultSpan);
 
   const getSpanByWidth = (width: number) => {
     if (width < breakpoints.md) return 24;
@@ -78,8 +90,8 @@ const CardList: React.FC<CatalogListProps> = (props) => {
 
   return (
     <div className="relative" style={{ width: '100%' }}>
-      <ResizeObserver onResize={handleResize}>
-        <div>
+      <ResizeObserver onResize={handleResize} disabled={!resizable}>
+        <div style={{ width: '100%' }}>
           <Row gutter={[16, 16]}>
             {dataList.map((item: any, index) => {
               return (

src/components/templates/card-skelton.tsx

@@ -5,7 +5,7 @@ interface CatalogSkeltonProps {
   span: number;
 }
 
-const CatalogSkelton: React.FC<CatalogSkeltonProps> = (props) => {
+const CardSkelton: React.FC<CatalogSkeltonProps> = (props) => {
   return (
     <Row gutter={[16, 16]}>
       {Array(6)
@@ -31,4 +31,4 @@ const CatalogSkelton: React.FC<CatalogSkeltonProps> = (props) => {
   );
 };
 
-export default React.memo(CatalogSkelton);
+export default React.memo(CardSkelton);

src/components/templates/card.tsx

@@ -6,6 +6,9 @@ interface CardProps {
   height?: string | number;
   className?: string;
   children?: React.ReactNode;
+  clickable?: boolean;
+  ghost?: boolean;
+  onClick?: () => void;
 }
 
 const CardWrapper = styled.div`
@@ -17,24 +20,43 @@ const CardWrapper = styled.div`
   align-items: flex-start;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
-  cursor: pointer;
+  cursor: default;
   width: 100%;
   &:hover {
     background-color: var(--ant-color-fill-tertiary);
+    transition: background-color 0.2s ease;
+  }
+
+  &.ghost {
+    background-color: transparent;
   }
 
   &.active {
     background-color: var(--ant-color-fill-tertiary);
   }
+  &.clickable {
+    cursor: pointer;
+  }
 `;
 
 const Card: React.FC<CardProps> = (props) => {
-  const { className, height, children } = props;
+  const {
+    className,
+    height,
+    children,
+    clickable = true,
+    ghost = false,
+    onClick
+  } = props;
 
   return (
     <CardWrapper
-      className={classNames('card-wrapper', className)}
+      className={classNames(className, {
+        clickable: clickable,
+        ghost: ghost
+      })}
       style={{ height: height || '180px' }}
+      onClick={onClick}
     >
       {children}
     </CardWrapper>

src/config/index.ts

@@ -33,7 +33,7 @@ export const StatusColorMap: Record<
   }
 };
 
-export const StatusMaps = {
+export const StatusMaps: Record<string, StatusType> = {
   error: 'error',
   warning: 'warning',
   transitioning: 'transitioning',

src/locales/en-US/models.ts

@@ -45,7 +45,8 @@ export default {
   'models.form.scheduletype': 'Schedule Type',
   'models.form.categories': 'Model Category',
   'models.form.scheduletype.auto': 'Auto',
-  'models.form.scheduletype.manual': 'Manual',
+  'models.form.scheduletype.manual': 'Specify GPU',
+  'models.form.scheduletype.gpuType': 'Specify GPU Type',
   'models.form.scheduletype.auto.tips':
     'Automatically deploys model instances to appropriate GPUs/Workers based on current resource conditions.',
   'models.form.scheduletype.manual.tips':
@@ -162,5 +163,9 @@ export default {
     'See the related issue: <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">#1979 on GitHub</a>.',
   'models.ollama.deprecated.notice': `The Ollama model source has been deprecated as of v0.6.1. For more information, see the <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">related GitHub issue</a>.`,
   'models.backend.mindie.310p':
-    'Ascend 310P only supports FP16, so you need to set --dtype=float16.'
+    'Ascend 310P only supports FP16, so you need to set --dtype=float16.',
+  'models.form.gpuCount': 'GPUs per Replica',
+  'models.form.gpuType': 'GPU Type',
+  'models.form.optimizeLongPrompt': 'Optimize Long Prompt',
+  'models.form.enableSpeculativeDecoding': 'Enable Speculative Decoding'
 };

src/locales/ja-JP/models.ts

@@ -47,7 +47,8 @@ export default {
   'models.form.scheduletype': 'スケジュールタイプ',
   'models.form.categories': 'モデルカテゴリ',
   'models.form.scheduletype.auto': '自動',
-  'models.form.scheduletype.manual': '手動',
+  'models.form.scheduletype.manual': 'GPUを指定',
+  'models.form.scheduletype.gpuType': 'GPUタイプを指定',
   'models.form.scheduletype.auto.tips':
     '現在のリソース状況に基づいて、モデルインスタンスを適切なGPU/ワーカーに自動的にデプロイします。',
   'models.form.scheduletype.manual.tips':
@@ -159,7 +160,11 @@ export default {
     'See the related issue: <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">#1979 on GitHub</a>.',
   'models.ollama.deprecated.notice': `The Ollama model source has been deprecated as of v0.6.1. For more information, see the <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">related GitHub issue</a>.`,
   'models.backend.mindie.310p':
-    'Ascend 310P only supports FP16, so you need to set --dtype=float16.'
+    'Ascend 310P only supports FP16, so you need to set --dtype=float16.',
+  'models.form.gpuCount': '各レプリカのGPU数',
+  'models.form.gpuType': 'GPU タイプ',
+  'models.form.optimizeLongPrompt': '長いプロンプトを最適化',
+  'models.form.enableSpeculativeDecoding': '推測デコーディングを有効にする'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/ru-RU/models.ts

@@ -45,7 +45,8 @@ export default {
   'models.form.scheduletype': 'Тип планирования',
   'models.form.categories': 'Категория модели',
   'models.form.scheduletype.auto': 'Авто',
-  'models.form.scheduletype.manual': 'Вручную',
+  'models.form.scheduletype.manual': 'Указать GPU',
+  'models.form.scheduletype.gpuType': 'Указать тип GPU',
   'models.form.scheduletype.auto.tips':
     'Автоматическое развертывание инстансов модели на подходящие GPU/воркеры в зависимости от текущих ресурсов.',
   'models.form.scheduletype.manual.tips':
@@ -161,9 +162,19 @@ export default {
     'См. связанную проблему: <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">#1979 on GitHub</a>.',
   'models.ollama.deprecated.notice': `Источник моделей Ollama объявлен устаревшим начиная с версии v0.6.1. Подробности см. в  <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">соответствующем issue на GitHub</a>.`,
   'models.backend.mindie.310p':
-    'Ascend 310P поддерживает только FP16, поэтому необходимо установить --dtype=float16.'
+    'Ascend 310P only supports FP16, so you need to set --dtype=float16.',
+  'models.form.gpuCount': 'GPUs per Replica',
+  'models.form.gpuType': 'GPU Type',
+  'models.form.optimizeLongPrompt': 'Optimize Long Prompt',
+  'models.form.enableSpeculativeDecoding': 'Enable Speculative Decoding'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'models.ollama.deprecated.title': 'Deprecation Notice',
+// 2. 'models.ollama.deprecated.notice': `The Ollama model source has been deprecated as of v0.6.1. For more information, see the <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">related GitHub issue</a>.`
+// 3. 'models.backend.mindie.310p':'Ascend 310P only supports FP16, so you need to set --dtype=float16.',
+// 4. 'models.form.gpuCount': 'GPUs per Replica',
+// 5. 'models.form.gpuType': 'GPU Type',
+// 6. 'models.form.optimizeLongPrompt': 'Optimize Long Prompt',
+// 7. 'models.form.enableSpeculativeDecoding': 'Enable Speculative Decoding'
 // ========== End of To-Do List ==========

src/locales/zh-CN/models.ts

@@ -46,7 +46,8 @@ export default {
   'models.form.categories': '模型类别',
   'models.form.scheduletype': '调度方式',
   'models.form.scheduletype.auto': '自动',
-  'models.form.scheduletype.manual': '手动',
+  'models.form.scheduletype.manual': '指定 GPU',
+  'models.form.scheduletype.gpuType': '指定 GPU 类型',
   'models.form.scheduletype.auto.tips':
     '自动根据当前资源情况部署模型实例到合适的 GPU/Worker。',
   'models.form.scheduletype.manual.tips':
@@ -152,5 +153,9 @@ export default {
     '参见 GitHub 上的问题 <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">#1979</a>。',
   'models.ollama.deprecated.notice': `Ollama 模型来源自 v0.6.1 起已被弃用。更多信息请参见相关的 <a href="https://github.com/gpustack/gpustack/issues/1979" target="_blank">GitHub 问题</a>。`,
   'models.backend.mindie.310p':
-    'Ascend 310P 仅支持 FP16，需要设置 --dtype=float16。'
+    'Ascend 310P 仅支持 FP16，需要设置 --dtype=float16。',
+  'models.form.gpuCount': '每副本 GPU 数量',
+  'models.form.gpuType': 'GPU 类型',
+  'models.form.optimizeLongPrompt': '优化长提示',
+  'models.form.enableSpeculativeDecoding': '启用推测解码'
 };

src/pages/cluster-management/clusters-copy.tsx

@@ -0,0 +1,489 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import DeleteModal from '@/components/delete-modal';
+import DropDownActions from '@/components/drop-down-actions';
+import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
+import PageTools from '@/components/page-tools';
+import { PageAction } from '@/config';
+import type { PageActionType } from '@/config/types';
+import useTableFetch from '@/hooks/use-table-fetch';
+import AddWorker from '@/pages/resources/components/add-worker';
+import {
+  DeleteOutlined,
+  DownOutlined,
+  EditOutlined,
+  KubernetesOutlined,
+  ProfileOutlined,
+  SyncOutlined
+} from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import {
+  Button,
+  ConfigProvider,
+  Empty,
+  Input,
+  Space,
+  Table,
+  message
+} from 'antd';
+import { useState } from 'react';
+import styled from 'styled-components';
+import {
+  createCredential,
+  deleteCredential,
+  queryCredentialList,
+  updateCredential
+} from './apis';
+import AddCluster from './components/add-cluster';
+import AddPool from './components/add-pool';
+import { ClusterDataList } from './config';
+import {
+  ClusterFormData as FormData,
+  ClusterListItem as ListItem
+} from './config/types';
+const { Column } = Table;
+
+const addActions = [
+  {
+    label: 'Custom',
+    locale: false,
+    value: 'custom',
+    key: 'custom',
+    icon: <IconFont type="icon-docker" className="size-16" />
+  },
+  {
+    label: 'Kubernetes',
+    locale: false,
+    value: 'kubernetes',
+    key: 'kubernetes',
+    icon: <KubernetesOutlined className="size-16" />
+  },
+  {
+    label: 'Digital Ocean',
+    locale: false,
+    value: 'digitalocean',
+    key: 'digitalocean',
+    icon: <IconFont type="icon-digitalocean" />
+  }
+];
+
+const WorkerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  .worker {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    .value {
+      line-height: 1em;
+      color: var(--ant-color-text-secondary);
+    }
+  }
+  .dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 4px;
+    &.ready {
+      background-color: var(--ant-color-success);
+    }
+    &.error {
+      background-color: var(--ant-color-error);
+    }
+
+    &.transition {
+      background-color: var(--ant-blue-5);
+    }
+  }
+`;
+
+const ActionList = [
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: <EditOutlined></EditOutlined>
+  },
+  {
+    key: 'add',
+    label: 'Add Worker',
+    locale: false,
+    icon: <EditOutlined></EditOutlined>
+  },
+
+  {
+    key: 'terminal',
+    label: 'common.button.detail',
+    icon: <ProfileOutlined />
+  },
+  {
+    key: 'addPool',
+    label: 'Add Node Pool',
+    locale: false,
+    icon: <IconFont type="icon-catalog1" />
+  },
+  {
+    key: 'delete',
+    props: {
+      danger: true
+    },
+    label: 'common.button.delete',
+    icon: <DeleteOutlined></DeleteOutlined>
+  }
+];
+
+const Credentials: React.FC = () => {
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    sortOrder,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryCredentialList,
+    deleteAPI: deleteCredential,
+    contentForDelete: 'users.table.user'
+  });
+
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+  const [openAddModal, setOpenAddModal] = useState(false);
+  const [provider, setProvider] = useState<string>('custom');
+  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
+  const [title, setTitle] = useState<string>('');
+  const [addPoolStatus, setAddPoolStatus] = useState<{
+    open: boolean;
+    action: PageActionType;
+    title: string;
+    provider: string;
+  }>({
+    open: false,
+    action: PageAction.CREATE,
+    title: '',
+    provider: 'digitalocean'
+  });
+  const [currentData, setCurrentData] = useState<ListItem | undefined>(
+    undefined
+  );
+
+  const setActions = (row: ListItem) => {
+    if (row.provider !== 'custom') {
+      return ActionList.filter((item) => item.key !== 'add');
+    }
+    return ActionList;
+  };
+
+  const handleAddCluster = (value: string) => {
+    setOpenAddModal(true);
+    setAction(PageAction.CREATE);
+    setProvider(value);
+    const label = addActions.find((item) => item.value === value)?.label;
+    setTitle(`Add ${label} Cluster`);
+  };
+
+  const handleAddPool = (value: string) => {
+    setAddPoolStatus({
+      open: true,
+      action: PageAction.CREATE,
+      title: `Add Node Pool`,
+      provider: value
+    });
+  };
+
+  const handleClickDropdown = (item: any) => {
+    handleAddCluster(item.key);
+  };
+
+  const handleModalOk = async (data: FormData) => {
+    const params = {
+      ...data
+    };
+    try {
+      if (action === PageAction.EDIT) {
+        await updateCredential({
+          data: {
+            ...params,
+            id: currentData?.id
+          }
+        });
+      } else {
+        await createCredential({ data: params });
+      }
+      fetchData();
+      setOpenAddModal(false);
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      setOpenAddModal(false);
+    }
+  };
+
+  const handleModalCancel = () => {
+    console.log('handleModalCancel');
+    setOpenAddModal(false);
+  };
+
+  const handleEditUser = (row: ListItem) => {
+    setCurrentData(row);
+    setOpenAddModal(true);
+    setAction(PageAction.EDIT);
+    setTitle(`Edit ${row.name} Cluster`);
+  };
+
+  const handleSelect = (val: any, row: ListItem) => {
+    if (val === 'edit') {
+      handleEditUser(row);
+    } else if (val === 'delete') {
+      handleDelete({ ...row, name: row.name });
+    } else if (val === 'add') {
+      setOpen(true);
+      setCurrentData(row);
+    } else if (val === 'addPool') {
+      handleAddPool(row.provider);
+    }
+  };
+
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
+  return (
+    <>
+      <PageContainer
+        ghost
+        header={{
+          title: intl.formatMessage({
+            id: 'menu.clusterManagement.clusters'
+          }),
+          style: {
+            paddingInline: 'var(--layout-content-header-inlinepadding)'
+          },
+          breadcrumb: {}
+        }}
+        extra={[]}
+      >
+        <PageTools
+          marginBottom={22}
+          left={
+            <Space>
+              <Input
+                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
+                style={{ width: 300 }}
+                allowClear
+                onChange={handleNameChange}
+              ></Input>
+              <Button
+                type="text"
+                style={{ color: 'var(--ant-color-text-tertiary)' }}
+                onClick={handleSearch}
+                icon={<SyncOutlined></SyncOutlined>}
+              ></Button>
+            </Space>
+          }
+          right={
+            <Space size={20}>
+              <DropDownActions
+                menu={{
+                  items: addActions,
+                  onClick: handleClickDropdown
+                }}
+                trigger={['click']}
+                placement="bottomRight"
+              >
+                <Button
+                  icon={<DownOutlined></DownOutlined>}
+                  type="primary"
+                  iconPosition="end"
+                >
+                  Add Cluster
+                </Button>
+              </DropDownActions>
+              <Button
+                icon={<DeleteOutlined />}
+                danger
+                onClick={handleDeleteBatch}
+                disabled={!rowSelection.selectedRowKeys.length}
+              >
+                <span>
+                  {intl?.formatMessage?.({ id: 'common.button.delete' })}
+                  {rowSelection.selectedRowKeys.length > 0 && (
+                    <span>({rowSelection.selectedRowKeys?.length})</span>
+                  )}
+                </span>
+              </Button>
+            </Space>
+          }
+        ></PageTools>
+        <ConfigProvider renderEmpty={renderEmpty}>
+          <Table
+            dataSource={ClusterDataList}
+            rowSelection={rowSelection}
+            loading={dataSource.loading}
+            rowKey="id"
+            onChange={handleTableChange}
+            pagination={{
+              showSizeChanger: true,
+              pageSize: queryParams.perPage,
+              current: queryParams.page,
+              total: dataSource.total,
+              hideOnSinglePage: queryParams.perPage === 10,
+              onChange: handlePageChange
+            }}
+          >
+            <Column
+              title="Name"
+              dataIndex="name"
+              key="name"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title="Provider"
+              dataIndex="provider"
+              key="provider"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {addActions.find((item) => item.value === record.provider)
+                      ?.label || 'N/A'}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title="Workers"
+              dataIndex="workers"
+              key="workers"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <WorkerWrapper>
+                    <span className="worker">
+                      <span className="dot ready"></span>
+                      <span className="value">3</span>
+                    </span>
+                    <span className="worker">
+                      <span className="dot error"></span>
+                      <span className="value">1</span>
+                    </span>
+                  </WorkerWrapper>
+                );
+              }}
+            />
+            <Column
+              title="GPUs"
+              dataIndex="gpus"
+              key="gpus"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
+
+            <Column
+              title="Deployments"
+              dataIndex="deployments"
+              key="deployments"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record) => {
+                return (
+                  <AutoTooltip ghost minWidth={20}>
+                    {text}
+                  </AutoTooltip>
+                );
+              }}
+            />
+            <Column
+              title={intl.formatMessage({ id: 'common.table.operation' })}
+              key="operation"
+              ellipsis={{
+                showTitle: false
+              }}
+              render={(text, record: ListItem) => {
+                return (
+                  <DropdownButtons
+                    items={setActions(record)}
+                    onSelect={(val) => handleSelect(val, record)}
+                  ></DropdownButtons>
+                );
+              }}
+            />
+          </Table>
+        </ConfigProvider>
+      </PageContainer>
+      <AddCluster
+        provider={provider}
+        open={openAddModal}
+        action={action}
+        title={title}
+        data={currentData}
+        onCancel={handleModalCancel}
+        onOk={handleModalOk}
+      ></AddCluster>
+      <AddPool
+        provider={addPoolStatus.provider}
+        open={addPoolStatus.open}
+        action={addPoolStatus.action}
+        title={addPoolStatus.title}
+        onCancel={() => {
+          setAddPoolStatus({
+            open: false,
+            action: PageAction.CREATE,
+            title: '',
+            provider: 'digitalocean'
+          });
+        }}
+        onOk={() => {
+          setAddPoolStatus({
+            open: false,
+            action: PageAction.CREATE,
+            title: '',
+            provider: 'digitalocean'
+          });
+        }}
+      ></AddPool>
+      <AddWorker open={open} onCancel={() => setOpen(false)}></AddWorker>
+      <DeleteModal ref={modalRef}></DeleteModal>
+    </>
+  );
+};
+
+export default Credentials;

src/pages/cluster-management/clusters.tsx

@@ -1,32 +1,21 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
-import DropDownActions from '@/components/drop-down-actions';
-import DropdownButtons from '@/components/drop-down-buttons';
 import IconFont from '@/components/icon-font';
-import PageTools from '@/components/page-tools';
+import { FilterBar } from '@/components/page-tools';
+import CardList from '@/components/templates/card-list';
+import CardSkeleton from '@/components/templates/card-skelton';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import AddWorker from '@/pages/resources/components/add-worker';
 import {
   DeleteOutlined,
-  DownOutlined,
   EditOutlined,
   KubernetesOutlined,
-  ProfileOutlined,
-  SyncOutlined
+  ProfileOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import {
-  Button,
-  ConfigProvider,
-  Empty,
-  Input,
-  Space,
-  Table,
-  message
-} from 'antd';
+import { Empty, Table, message } from 'antd';
 import { useState } from 'react';
 import styled from 'styled-components';
 import {
@@ -37,6 +26,7 @@ import {
 } from './apis';
 import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
+import ClusterItem from './components/cluster-item';
 import { ClusterDataList } from './config';
 import {
   ClusterFormData as FormData,
@@ -244,7 +234,7 @@ const Credentials: React.FC = () => {
       handleEditUser(row);
     } else if (val === 'delete') {
       handleDelete({ ...row, name: row.name });
-    } else if (val === 'add') {
+    } else if (val === 'add_worker') {
       setOpen(true);
       setCurrentData(row);
     } else if (val === 'addPool') {
@@ -252,6 +242,10 @@ const Credentials: React.FC = () => {
     }
   };
 
+  const renderCard = (item: ListItem) => {
+    return <ClusterItem data={item} onSelect={handleSelect}></ClusterItem>;
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     if (
@@ -279,175 +273,31 @@ const Credentials: React.FC = () => {
         }}
         extra={[]}
       >
-        <PageTools
+        <FilterBar
+          showSelect={false}
+          showPrimaryButton={true}
+          showDeleteButton={true}
+          selectHolder="Filter by name"
           marginBottom={22}
-          left={
-            <Space>
-              <Input
-                placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-                style={{ width: 300 }}
-                allowClear
-                onChange={handleNameChange}
-              ></Input>
-              <Button
-                type="text"
-                style={{ color: 'var(--ant-color-text-tertiary)' }}
-                onClick={handleSearch}
-                icon={<SyncOutlined></SyncOutlined>}
-              ></Button>
-            </Space>
-          }
-          right={
-            <Space size={20}>
-              <DropDownActions
-                menu={{
-                  items: addActions,
-                  onClick: handleClickDropdown
-                }}
-                trigger={['click']}
-                placement="bottomRight"
-              >
-                <Button
-                  icon={<DownOutlined></DownOutlined>}
-                  type="primary"
-                  iconPosition="end"
-                >
-                  Add Cluster
-                </Button>
-              </DropDownActions>
-              <Button
-                icon={<DeleteOutlined />}
-                danger
-                onClick={handleDeleteBatch}
-                disabled={!rowSelection.selectedRowKeys.length}
-              >
-                <span>
-                  {intl?.formatMessage?.({ id: 'common.button.delete' })}
-                  {rowSelection.selectedRowKeys.length > 0 && (
-                    <span>({rowSelection.selectedRowKeys?.length})</span>
-                  )}
-                </span>
-              </Button>
-            </Space>
-          }
-        ></PageTools>
-        <ConfigProvider renderEmpty={renderEmpty}>
-          <Table
-            dataSource={ClusterDataList}
-            rowSelection={rowSelection}
-            loading={dataSource.loading}
-            rowKey="id"
-            onChange={handleTableChange}
-            pagination={{
-              showSizeChanger: true,
-              pageSize: queryParams.perPage,
-              current: queryParams.page,
-              total: dataSource.total,
-              hideOnSinglePage: queryParams.perPage === 10,
-              onChange: handlePageChange
-            }}
-          >
-            <Column
-              title="Name"
-              dataIndex="name"
-              key="name"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title="Provider"
-              dataIndex="provider"
-              key="provider"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {addActions.find((item) => item.value === record.provider)
-                      ?.label || 'N/A'}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title="Workers"
-              dataIndex="workers"
-              key="workers"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <WorkerWrapper>
-                    <span className="worker">
-                      <span className="dot ready"></span>
-                      <span className="value">3</span>
-                    </span>
-                    <span className="worker">
-                      <span className="dot error"></span>
-                      <span className="value">1</span>
-                    </span>
-                  </WorkerWrapper>
-                );
-              }}
-            />
-            <Column
-              title="GPUs"
-              dataIndex="gpus"
-              key="gpus"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-
-            <Column
-              title="Deployments"
-              dataIndex="deployments"
-              key="deployments"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record) => {
-                return (
-                  <AutoTooltip ghost minWidth={20}>
-                    {text}
-                  </AutoTooltip>
-                );
-              }}
-            />
-            <Column
-              title={intl.formatMessage({ id: 'common.table.operation' })}
-              key="operation"
-              ellipsis={{
-                showTitle: false
-              }}
-              render={(text, record: ListItem) => {
-                return (
-                  <DropdownButtons
-                    items={setActions(record)}
-                    onSelect={(val) => handleSelect(val, record)}
-                  ></DropdownButtons>
-                );
-              }}
-            />
-          </Table>
-        </ConfigProvider>
+          marginTop={30}
+          handleInputChange={handleNameChange}
+          handleSearch={handleSearch}
+          width={{ input: 200 }}
+          buttonText="Add Cluster"
+          actionType="dropdown"
+          actionItems={addActions}
+          handleClickPrimary={handleClickDropdown}
+        ></FilterBar>
+        <CardList
+          dataList={ClusterDataList}
+          loading={dataSource.loading}
+          activeId={-1}
+          isFirst={!dataSource.loadend}
+          Skeleton={CardSkeleton}
+          resizable={false}
+          defaultSpan={24}
+          renderItem={renderCard}
+        ></CardList>
       </PageContainer>
       <AddCluster
         provider={provider}

src/pages/cluster-management/components/add-cluster.tsx

@@ -11,7 +11,6 @@ import {
   ClusterListItem as ListItem
 } from '../config/types';
 import CloudProvider from './cloud-provider-form';
-import K8SProvider from './k8s-provider-form';
 
 type AddModalProps = {
   title: string;
@@ -34,7 +33,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   const [form] = Form.useForm();
   const intl = useIntl();
 
-  const handleSumit = () => {
+  const handleSubmit = () => {
     form.submit();
   };
 
@@ -62,7 +61,7 @@ const AddCluster: React.FC<AddModalProps> = ({
       width={600}
       styles={{}}
       footer={
-        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
       }
     >
       <Form form={form} onFinish={onOk} preserve={false}>
@@ -85,8 +84,9 @@ const AddCluster: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        {provider === 'digitalocean' && <CloudProvider></CloudProvider>}
-        {provider === 'kubernetes' && <K8SProvider></K8SProvider>}
+        {provider === 'digitalocean' && (
+          <CloudProvider provider={provider}></CloudProvider>
+        )}
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea
             label={intl.formatMessage({ id: 'common.table.description' })}

src/pages/cluster-management/components/add-credential.tsx

@@ -4,7 +4,7 @@ import SealInput from '@/components/seal-form/seal-input';
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Button, Form } from 'antd';
 import React from 'react';
 import { FormData, ListItem } from '../config/types';
 
@@ -47,7 +47,11 @@ const AddModal: React.FC<AddModalProps> = ({
       width={600}
       styles={{}}
       footer={
-        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+        <ModalFooter
+          onOk={handleSumit}
+          onCancel={onCancel}
+          description={<Button>Validation Test</Button>}
+        ></ModalFooter>
       }
     >
       <Form form={form} onFinish={onOk} preserve={false}>
@@ -70,29 +74,6 @@ const AddModal: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        {/* <Form.Item<FormData>
-          name="provider"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Provider'
-                }
-              )
-            }
-          ]}
-        >
-          <SealSelect
-            label="Provider"
-            required
-            options={['Digital Ocean', 'Kubernetes', 'Custom'].map((item) => ({
-              label: item,
-              value: item
-            }))}
-          ></SealSelect>
-        </Form.Item> */}
         {provider === 'digital_ocean' && (
           <>
             <Form.Item<FormData>

src/pages/cluster-management/components/cluster-item.tsx

@@ -0,0 +1,237 @@
+import DropdownButtons from '@/components/drop-down-buttons';
+import GaugeChart from '@/components/echarts/gauge';
+import IconFont from '@/components/icon-font';
+import StatusTag from '@/components/status-tag';
+import Card from '@/components/templates/card';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  KubernetesOutlined
+} from '@ant-design/icons';
+import { Card as ACard, Button, Col, Row, Tag } from 'antd';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import {
+  ClusterStatus,
+  ClusterStatusLabelMap,
+  ProviderLabelMap,
+  ProviderValueMap
+} from '../config';
+import { ClusterListItem as ListItem } from '../config/types';
+import WorkerPools from './worker-pools';
+
+const CollapseTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--font-size-middle);
+  font-weight: 500;
+  color: var(--ant-color-text);
+  height: 32px;
+  cursor: pointer;
+`;
+
+const Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .chart-wrapper {
+    flex: 1;
+  }
+`;
+
+const CardWrapper = styled(ACard)`
+  text-align: center;
+  box-shadow: none;
+  .ant-card {
+    box-shadow: none;
+  }
+  .ant-card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .label {
+    font-weight: 500;
+    font-size: var(--font-size-middle);
+  }
+  .value {
+    font-weight: 500;
+    color: var(--ant-color-text);
+  }
+`;
+
+const actionItems = [
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: <EditOutlined />
+  },
+  {
+    key: 'add_worker',
+    label: 'Add Worker',
+    provider: ProviderValueMap.Custom,
+    locale: false,
+    icon: <IconFont type="icon-docker" />
+  },
+  {
+    key: 'register_cluster',
+    label: 'Register Cluster',
+    provider: ProviderValueMap.Kubernetes,
+    locale: false,
+    icon: <KubernetesOutlined />
+  },
+  {
+    key: 'addPool',
+    label: 'Add Node Pool',
+    provider: ProviderValueMap.DigitalOcean,
+    locale: false,
+    icon: <IconFont type="icon-catalog1" />
+  },
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: <DeleteOutlined />,
+    props: {
+      danger: true
+    }
+  }
+];
+
+const Inner = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  cursor: default;
+
+  .title {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 8px;
+
+    .text {
+      display: flex;
+      align-items: center;
+      font-size: var(--font-size-middle);
+      font-weight: 500;
+      color: var(--ant-color-text);
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+  }
+`;
+
+interface CardProps {
+  data: ListItem;
+  onSelect?: (key: string, row: ListItem) => void;
+}
+
+const CardItem: React.FC<CardProps> = (props) => {
+  const { data, onSelect } = props;
+  const [show, setShow] = React.useState(false);
+
+  const handleOnSelect = (key: string) => {
+    console.log('Selected action:', key);
+    onSelect?.(key, data);
+  };
+
+  const actions = useMemo(() => {
+    return actionItems.filter((item) => {
+      if (item.provider) {
+        return item.provider === data.provider;
+      }
+      return true;
+    });
+  }, [data.provider]);
+
+  return (
+    <Card height={'auto'} clickable={false} ghost>
+      <Inner>
+        <div className="title">
+          <span className="flex-center gap-8">
+            <span className="text">{data.name}</span>
+            <Tag style={{ borderRadius: 4 }}>
+              {ProviderLabelMap[data.provider]}
+            </Tag>
+            <StatusTag
+              statusValue={{
+                status: ClusterStatus[data.status],
+                text: ClusterStatusLabelMap[data.status]
+              }}
+            />
+          </span>
+          <span>
+            <DropdownButtons
+              items={actions}
+              onSelect={handleOnSelect}
+            ></DropdownButtons>
+          </span>
+        </div>
+        <Content>
+          <div className="flex gap-16">
+            <CardWrapper bordered={false}>
+              <div className="label">Workers</div>
+              <div className="value">1</div>
+            </CardWrapper>
+            <CardWrapper bordered={false}>
+              <div className="label">GPUs</div>
+              <div className="value">12</div>
+            </CardWrapper>
+            <CardWrapper bordered={false}>
+              <div className="label">Deployments</div>
+              <div className="value">2</div>
+            </CardWrapper>
+          </div>
+          <div className="chart-wrapper">
+            <Row gutter={16} style={{ width: '100%' }}>
+              <Col span={6}>
+                <GaugeChart title="GPU Utilization" value={85} height={160} />
+              </Col>
+              <Col span={6}>
+                <GaugeChart title="CPU Utilization" value={50} height={160} />
+              </Col>
+              <Col span={6}>
+                <GaugeChart title="RAM Utilization" value={70} height={160} />
+              </Col>
+              <Col span={6}>
+                <GaugeChart title="VRAM Utilization" value={60} height={160} />
+              </Col>
+            </Row>
+          </div>
+        </Content>
+        {data.provider === ProviderValueMap.DigitalOcean && (
+          <>
+            <CollapseTitle>
+              <Button
+                type="text"
+                size="small"
+                icon={<IconFont type="icon-down" rotate={show ? 0 : -90} />}
+                onClick={() => setShow(!show)}
+              >
+                Worker Pools
+              </Button>
+            </CollapseTitle>
+            <WorkerPools
+              provider={data.provider}
+              dataSource={data.worker_pools}
+              height={show ? 'auto' : 0}
+            />
+          </>
+        )}
+      </Inner>
+    </Card>
+  );
+};
+
+export default CardItem;

src/pages/cluster-management/components/register-cluster.tsx

@@ -0,0 +1,104 @@
+import ModalFooter from '@/components/modal-footer';
+import ScrollerModal from '@/components/scroller-modal/index';
+import SealInput from '@/components/seal-form/seal-input';
+import { PageActionType } from '@/config/types';
+import { CloseOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Form } from 'antd';
+import React from 'react';
+import {
+  ClusterFormData as FormData,
+  ClusterListItem as ListItem
+} from '../config/types';
+import CloudProvider from './cloud-provider-form';
+import K8SProvider from './k8s-provider-form';
+
+type AddModalProps = {
+  title: string;
+  action: PageActionType;
+  open: boolean;
+  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
+  onOk: (values: FormData) => void;
+  data?: ListItem;
+  onCancel: () => void;
+};
+const AddCluster: React.FC<AddModalProps> = ({
+  title,
+  action,
+  open,
+  provider,
+  onOk,
+  data,
+  onCancel
+}) => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+
+  const handleSubmit = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  return (
+    <ScrollerModal
+      title={
+        <div className="flex-between flex-center">
+          <span>{title}</span>
+          <Button type="text" size="small" onClick={handleCancel}>
+            <CloseOutlined></CloseOutlined>
+          </Button>
+        </div>
+      }
+      open={open}
+      onClose={onCancel}
+      destroyOnClose={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      styles={{}}
+      footer={
+        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
+      }
+    >
+      <Form form={form} onFinish={onOk} preserve={false}>
+        <Form.Item<FormData>
+          name="display_name"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: intl.formatMessage({ id: 'common.table.name' })
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'common.table.name' })}
+            required
+          ></SealInput.Input>
+        </Form.Item>
+        {provider === 'digitalocean' && (
+          <CloudProvider provider={provider}></CloudProvider>
+        )}
+        {provider === 'kubernetes' && (
+          <K8SProvider provider={provider}></K8SProvider>
+        )}
+        <Form.Item<FormData> name="description" rules={[{ required: false }]}>
+          <SealInput.TextArea
+            label={intl.formatMessage({ id: 'common.table.description' })}
+          ></SealInput.TextArea>
+        </Form.Item>
+      </Form>
+    </ScrollerModal>
+  );
+};
+
+export default AddCluster;

src/pages/cluster-management/components/worker-pools.tsx

@@ -0,0 +1,117 @@
+import DropdownButtons from '@/components/drop-down-buttons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
+import { Table } from 'antd';
+
+const actionItems = [
+  {
+    key: 'edit',
+    label: 'common.button.edit',
+    icon: <EditOutlined />
+  },
+
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: <DeleteOutlined />,
+    props: {
+      danger: true
+    }
+  }
+];
+
+interface WorkerPoolsProps {
+  dataSource: any[];
+  loading?: boolean;
+  provider: string;
+  height?: string | number;
+  onAction?: (action: string, record: any) => void;
+}
+
+const WorkerPools: React.FC<WorkerPoolsProps> = ({
+  dataSource,
+  loading = false,
+  provider,
+  height = 'auto',
+  onAction
+}) => {
+  // dataindex: type, replicas, Batchsize, GPU, Memory, CPU, Storage, CreateTime, Operations
+  const columns = [
+    {
+      title: 'Type',
+      dataIndex: 'type',
+      key: 'type'
+    },
+    {
+      title: 'Replicas',
+      dataIndex: 'replicas',
+      key: 'replicas'
+    },
+    {
+      title: 'Batch Size',
+      dataIndex: 'batchSize',
+      key: 'batchSize'
+    },
+    {
+      title: 'GPU',
+      dataIndex: 'gpu',
+      key: 'gpu'
+    },
+    {
+      title: 'Memory',
+      dataIndex: 'memory',
+      key: 'memory'
+    },
+    {
+      title: 'CPU',
+      dataIndex: 'cpu',
+      key: 'cpu'
+    },
+    {
+      title: 'Storage',
+      dataIndex: 'storage',
+      key: 'storage'
+    },
+    {
+      title: 'Create Time',
+      dataIndex: 'createTime',
+      key: 'createTime'
+    },
+    {
+      title: 'Operations',
+      key: 'operations',
+      render: (_, record) => (
+        <DropdownButtons
+          items={actionItems}
+          onSelect={(key) => onAction?.(key, record)}
+        />
+      )
+    }
+  ];
+
+  // mock dataSource
+  const mockData = Array.from({ length: 3 }, (_, index) => ({
+    key: index,
+    type: `Type ${index + 1}`,
+    replicas: Math.floor(Math.random() * 10) + 1,
+    batchSize: Math.floor(Math.random() * 100) + 1,
+    gpu: `NVIDIA 4090`,
+    memory: `${Math.floor(Math.random() * 16) + 1} GB`,
+    cpu: `${Math.floor(Math.random() * 8) + 1} Cores`,
+    storage: `${Math.floor(Math.random() * 500) + 50} GB`,
+    createTime: new Date().toLocaleDateString()
+  }));
+
+  return (
+    <div style={{ height: height, overflow: 'hidden' }}>
+      <Table
+        dataSource={dataSource || mockData}
+        columns={columns}
+        loading={loading}
+        pagination={false}
+        rowKey="id"
+      />
+    </div>
+  );
+};
+
+export default WorkerPools;

src/pages/cluster-management/config/index.ts

@@ -1,3 +1,6 @@
+import { StatusMaps } from '@/config';
+import { StatusType } from '@/config/types';
+
 export const ClusterDataList = [
   {
     id: 3,
@@ -6,6 +9,7 @@ export const ClusterDataList = [
     clusterType: 'Custom',
     workers: 4,
     gpus: 8,
+    status: 'ready',
     deployments: 3
   },
   {
@@ -15,6 +19,7 @@ export const ClusterDataList = [
     clusterType: 'Kubernetes',
     workers: 2,
     gpus: 4,
+    status: 'ready',
     deployments: 1
   },
   {
@@ -23,6 +28,34 @@ export const ClusterDataList = [
     provider: 'digitalocean',
     workers: 3,
     gpus: 6,
+    status: 'error',
     deployments: 2
   }
 ];
+
+export const ClusterStatusValueMap = {
+  Ready: 'ready',
+  Error: 'error'
+};
+
+export const ClusterStatusLabelMap = {
+  [ClusterStatusValueMap.Ready]: 'Ready',
+  [ClusterStatusValueMap.Error]: 'Error'
+};
+
+export const ClusterStatus: Record<string, StatusType> = {
+  [ClusterStatusValueMap.Ready]: StatusMaps.success,
+  [ClusterStatusValueMap.Error]: StatusMaps.error
+};
+
+export const ProviderValueMap = {
+  Kubernetes: 'kubernetes',
+  DigitalOcean: 'digitalocean',
+  Custom: 'custom'
+};
+
+export const ProviderLabelMap = {
+  [ProviderValueMap.Kubernetes]: 'Kubernetes',
+  [ProviderValueMap.DigitalOcean]: 'Digital Ocean',
+  [ProviderValueMap.Custom]: 'Custom'
+};

src/pages/cluster-management/config/types.ts

@@ -18,16 +18,6 @@ export interface ListItem {
   updated_at: string;
 }
 
-export interface ClusterListItem {
-  name: string;
-  provider: string;
-  workers: number;
-  created_at: string;
-  gpus: number;
-  deployments: number;
-  id: number;
-}
-
 export interface ClusterFormData {
   display_name: string;
   description: string;
@@ -55,3 +45,19 @@ export interface NodePoolFormData {
   labels: Record<string, string>;
   cloud_options: Record<string, any>;
 }
+
+export interface ClusterListItem {
+  name: string;
+  display_name: string;
+  description: string;
+  provider: string;
+  credential_id: number;
+  zone: string;
+  region: string;
+  gpus: number;
+  deployments: number;
+  id: number;
+  status: string;
+  state_message: string;
+  worker_pools: NodePoolListItem[];
+}

src/pages/dashboard/components/system-load.tsx

@@ -10,16 +10,6 @@ import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
-const strokeColorFunc = (percent: number) => {
-  if (percent <= 50 || percent === undefined) {
-    return 'rgb(84, 204, 152, 80%)';
-  }
-  if (percent <= 80) {
-    return 'rgba(250, 173, 20, 80%)';
-  }
-  return 'rgba(255, 77, 79, 80%)';
-};
-
 const SystemLoad = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.current || {};
@@ -33,24 +23,22 @@ const SystemLoad = () => {
   const chartData = useMemo(() => {
     return {
       gpu: {
-        data: _.round(data.gpu || 0, 1),
-        color: strokeColorFunc(data.gpu)
+        data: _.round(data.gpu || 0, 1)
       },
       vram: {
-        data: _.round(data.vram || 0, 1),
-        color: strokeColorFunc(data.vram)
+        data: _.round(data.vram || 0, 1)
       },
       cpu: {
-        data: _.round(data.cpu || 0, 1),
-        color: strokeColorFunc(data.cpu)
+        data: _.round(data.cpu || 0, 1)
       },
       ram: {
-        data: _.round(data.ram || 0, 1),
-        color: strokeColorFunc(data.ram)
+        data: _.round(data.ram || 0, 1)
       }
     };
   }, [data]);
 
+  console.log('SystemLoad data:', chartData);
+
   useEffect(() => {
     if (size.width < breakpoints.xl) {
       setPaddingRight('0');
@@ -90,7 +78,6 @@ const SystemLoad = () => {
                   <GaugeChart
                     height={smallChartHeight}
                     value={chartData.gpu.data}
-                    color={chartData.gpu.color}
                     title={intl.formatMessage({
                       id: 'dashboard.gpuutilization'
                     })}
@@ -102,7 +89,6 @@ const SystemLoad = () => {
                       id: 'dashboard.vramutilization'
                     })}
                     height={smallChartHeight}
-                    color={chartData.vram.color}
                     value={chartData.vram.data}
                   ></GaugeChart>
                 </Col>
@@ -112,7 +98,6 @@ const SystemLoad = () => {
                       id: 'dashboard.cpuutilization'
                     })}
                     height={smallChartHeight}
-                    color={chartData.cpu.color}
                     value={chartData.cpu.data}
                   ></GaugeChart>
                 </Col>
@@ -122,7 +107,6 @@ const SystemLoad = () => {
                       id: 'dashboard.memoryutilization'
                     })}
                     height={smallChartHeight}
-                    color={chartData.ram.color}
                     value={chartData.ram.data}
                   ></GaugeChart>
                 </Col>

src/pages/llmodels/components/advance-config.tsx

@@ -1,6 +1,7 @@
 import IconFont from '@/components/icon-font';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
+import CheckboxField from '@/components/seal-form/checkbox-field';
 import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
@@ -8,17 +9,8 @@ import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
-import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import {
-  Checkbox,
-  Collapse,
-  Form,
-  FormInstance,
-  Tooltip,
-  Typography
-} from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Collapse, Form, FormInstance, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import {
@@ -32,7 +24,6 @@ import {
   placementStrategyOptions
 } from '../config';
 import { useFormContext } from '../config/form-context';
-import llamaConfig from '../config/llama-config';
 import mindieConfig from '../config/mindie-config';
 import { FormData } from '../config/types';
 import vllmConfig from '../config/vllm-config';
@@ -62,42 +53,6 @@ const placementStrategyTips = [
   }
 ];
 
-const scheduleTypeTips = [
-  {
-    title: {
-      text: 'models.form.scheduletype.auto',
-      locale: true
-    },
-    tips: 'models.form.scheduletype.auto.tips'
-  },
-  {
-    title: {
-      text: 'models.form.scheduletype.manual',
-      locale: true
-    },
-    tips: 'models.form.scheduletype.manual.tips'
-  }
-];
-
-const CheckboxField: React.FC<{
-  title: string;
-  label: string;
-  checked?: boolean;
-  onChange?: (e: CheckboxChangeEvent) => void;
-}> = ({ title, label, checked, onChange }) => {
-  return (
-    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
-      <Tooltip title={title}>
-        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
-        <QuestionCircleOutlined
-          className="m-l-4"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
-        />
-      </Tooltip>
-    </Checkbox>
-  );
-};
-
 const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const { form, isGGUF, gpuOptions, source, backendOptions, action } = props;
   const { getRuleMessage } = useAppUtils();
@@ -115,9 +70,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const { onValuesChange } = useFormContext();
 
   const paramsConfig = useMemo(() => {
-    if (backend === backendOptionsMap.llamaBox) {
-      return llamaConfig;
-    }
     if (backend === backendOptionsMap.vllm) {
       return vllmConfig;
     }
@@ -220,14 +172,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             description={<TooltipList list={backendTipsList}></TooltipList>}
             options={
               backendOptions ?? [
-                {
-                  label: backendLabelMap[backendOptionsMap.llamaBox],
-                  value: backendOptionsMap.llamaBox,
-                  disabled:
-                    props.source === modelSourceMap.local_path_value
-                      ? false
-                      : !isGGUF
-                },
                 {
                   label: backendLabelMap[backendOptionsMap.vllm],
                   value: backendOptionsMap.vllm,
@@ -261,27 +205,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             }
           ></SealSelect>
         </Form.Item>
-        {/* <Form.Item name="scheduleType">
-          <SealSelect
-            onChange={handleScheduleTypeChange}
-            label={intl.formatMessage({ id: 'models.form.scheduletype' })}
-            description={<TooltipList list={scheduleTypeTips}></TooltipList>}
-            options={[
-              {
-                label: intl.formatMessage({
-                  id: 'models.form.scheduletype.auto'
-                }),
-                value: 'auto'
-              },
-              {
-                label: intl.formatMessage({
-                  id: 'models.form.scheduletype.manual'
-                }),
-                value: 'manual'
-              }
-            ]}
-          ></SealSelect>
-        </Form.Item> */}
         {scheduleType === 'auto' && (
           <>
             <Form.Item<FormData> name="placement_strategy">
@@ -482,31 +405,10 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           ></LabelSelector>
         </Form.Item>
 
-        {backend === backendOptionsMap.llamaBox && (
-          <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
-            <Form.Item<FormData>
-              name="cpu_offloading"
-              valuePropName="checked"
-              style={{ padding: '0 10px', marginBottom: 0 }}
-              noStyle
-            >
-              <CheckboxField
-                title={intl.formatMessage({
-                  id: 'models.form.partialoffload.tips'
-                })}
-                label={intl.formatMessage({
-                  id: 'resources.form.enablePartialOffload'
-                })}
-              ></CheckboxField>
-            </Form.Item>
-          </div>
-        )}
         {scheduleType === 'auto' &&
-          [
-            backendOptionsMap.llamaBox,
-            backendOptionsMap.vllm,
-            backendOptionsMap.ascendMindie
-          ].includes(backend) && (
+          [backendOptionsMap.vllm, backendOptionsMap.ascendMindie].includes(
+            backend
+          ) && (
             <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
               <Form.Item<FormData>
                 name="distributed_inference_across_workers"
@@ -515,7 +417,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                 noStyle
               >
                 <CheckboxField
-                  title={intl.formatMessage({
+                  description={intl.formatMessage({
                     id: 'models.form.distribution.tips'
                   })}
                   label={intl.formatMessage({
@@ -533,7 +435,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             noStyle
           >
             <CheckboxField
-              title={intl.formatMessage({
+              description={intl.formatMessage({
                 id: 'models.form.restart.onerror.tips'
               })}
               label={intl.formatMessage({

src/pages/llmodels/components/catalog-list.tsx

@@ -1,3 +1,4 @@
+import CatalogSkelton from '@/components/templates/card-skelton';
 import breakpoints from '@/config/breakpoints';
 import { Col, FloatButton, Row, Spin } from 'antd';
 import _ from 'lodash';
@@ -6,7 +7,6 @@ import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { CatalogItem as CatalogItemType } from '../config/types';
 import CatalogItem from './catalog-item';
-import CatalogSkelton from './catalog-skelton';
 
 const SpinWrapper = styled.div`
   width: 100%;

src/pages/llmodels/components/data-form.tsx

@@ -258,14 +258,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           description={<TooltipList list={backendTipsList}></TooltipList>}
           options={
             backendOptions ?? [
-              {
-                label: backendLabelMap[backendOptionsMap.llamaBox],
-                value: backendOptionsMap.llamaBox,
-                disabled:
-                  props.source === modelSourceMap.local_path_value
-                    ? false
-                    : !isGGUF
-              },
               {
                 label: backendLabelMap[backendOptionsMap.vllm],
                 value: backendOptionsMap.vllm,
@@ -300,28 +292,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         ></SealSelect>
       </Form.Item> */}
       <CatalogFrom></CatalogFrom>
-      {/* <Form.Item<FormData>
-        name="replicas"
-        rules={[
-          {
-            required: true,
-            message: getRuleMessage('input', 'models.form.replicas')
-          }
-        ]}
-      >
-        <SealInput.Number
-          style={{ width: '100%' }}
-          label={intl.formatMessage({
-            id: 'models.form.replicas'
-          })}
-          required
-          description={intl.formatMessage(
-            { id: 'models.form.replicas.tips' },
-            { api: `${window.location.origin}/v1` }
-          )}
-          min={0}
-        ></SealInput.Number>
-      </Form.Item> */}
       <Form.Item<FormData> name="description">
         <SealInput.TextArea
           scaleSize={true}
@@ -343,4 +313,4 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   );
 });
 
-export default React.memo(DataForm);
+export default DataForm;

src/pages/llmodels/components/deploy-modal.tsx

@@ -568,6 +568,7 @@ const AddModal: FC<AddModalProps> = (props) => {
             isGGUF: isGGUF,
             pageAction: action,
             modelFileOptions: props.modelFileOptions,
+            gpuOptions: props.gpuOptions,
             onValuesChange: onValuesChange
           }}
         >

src/pages/llmodels/components/model-item.tsx

@@ -1,18 +1,145 @@
+import IconFont from '@/components/icon-font';
+import StatusTag from '@/components/status-tag';
+import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
+import { Button } from 'antd';
+import dayjs from 'dayjs';
+import _ from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
+import {
+  InstanceStatusMap,
+  InstanceStatusMapValue,
+  modelCategories,
+  modelSourceMap,
+  status
+} from '../config';
 
-const ModelItem: React.FC<{ model: any; onDeploy: (model: any) => void }> = (
-  props
-) => {
-  const { model, onDeploy } = props;
+const ModelItemContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  cursor: default;
+  .title {
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    .anticon {
+      font-size: 16px;
+      color: var(--ant-color-text-secondary);
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      font-size: var(--font-size-middle);
+      font-weight: 500;
+      color: var(--ant-color-text);
+    }
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+  }
+  .footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    .btn {
+      display: none;
+    }
+  }
+  &:hover {
+    .btn {
+      display: block;
+    }
+  }
+  .time {
+    color: var(--ant-color-text-secondary);
+    font-size: var(--font-size-small);
+    font-weight: 400;
+  }
+  .extra-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    .tag-item {
+      margin-right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+      height: 22px;
+      opacity: 0.7;
+    }
+  }
+`;
+
+const sourceIconMap = {
+  [modelSourceMap.local_path_value]: 'icon-hard-disk',
+  [modelSourceMap.huggingface_value]: 'icon-huggingface',
+  [modelSourceMap.modelscope_value]: 'icon-modelscope'
+};
+
+const ModelItem: React.FC<{
+  model: Record<string, any>;
+  onClick: (model: any) => void;
+}> = (props) => {
+  const { model, onClick } = props;
 
   return (
-    <Card>
-      <div className="model-item" onClick={() => onDeploy(model)}>
-        <h3>{model.name}</h3>
-        <p>{model.description}</p>
-        <span>Deploy</span>
-      </div>
+    <Card onClick={() => onClick(model)} clickable={false} ghost>
+      <ModelItemContent>
+        <div className="title">
+          <span className="text">
+            <IconFont
+              type={sourceIconMap[model.source]}
+              style={{ marginRight: 8 }}
+            />
+            <span>{model.name}</span>
+          </span>
+          <StatusTag
+            maxTooltipWidth={400}
+            statusValue={{
+              status: status[InstanceStatusMap.Running] as any,
+              text: InstanceStatusMapValue[InstanceStatusMap.Running],
+              message: model.state_message
+            }}
+          ></StatusTag>
+        </div>
+        <div className="content">
+          <div className="extra-info">
+            <ThemeTag className="tag-item" color="blue">
+              {_.find(modelCategories, { value: model.categories?.[0] })
+                ?.label || model.categories?.[0]}
+            </ThemeTag>
+            <ThemeTag className="tag-item" color="purple">
+              128K context
+            </ThemeTag>
+          </div>
+          <div className="footer">
+            <span className="time">
+              {dayjs(model.created_at).format('YYYY-MM-DD HH:mm:ss')}
+            </span>
+            <Button
+              size="middle"
+              className="btn"
+              variant="filled"
+              color="default"
+            >
+              Go to Playground
+            </Button>
+          </div>
+        </div>
+      </ModelItemContent>
     </Card>
   );
 };

src/pages/llmodels/components/ollama-tips.tsx

@@ -1,103 +0,0 @@
-import AlertBlockInfo from '@/components/alert-info/block';
-import IconFont from '@/components/icon-font';
-import { useIntl } from '@umijs/max';
-import { Button } from 'antd';
-import { useState } from 'react';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  padding-inline: 24px;
-`;
-
-const Tips = styled.div`
-  margin-top: 8px !important;
-  ul {
-    margin: 0 !important;
-    padding: 0 !important;
-    margin-top: 8px !important;
-    li {
-      position: relative;
-      list-style: none;
-      line-height: 24px;
-      margin: 0 !important;
-      padding-inline: 16px 0 !important;
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0px;
-        top: 0;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background-color: var(--ant-color-text-secondary);
-        margin-top: 8px;
-      }
-    }
-  }
-  .bold {
-    font-weight: 700;
-    color: var(--ant-color-text);
-  }
-  .notice {
-    margin-top: 8px !important;
-  }
-`;
-
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  font-weight: 700;
-  color: var(--ant-color-text);
-  justify-content: space-between;
-`;
-
-const RenderMessage = () => {
-  const intl = useIntl();
-  return (
-    <Tips>
-      <div className="notice">
-        <div
-          dangerouslySetInnerHTML={{
-            __html: intl.formatMessage({
-              id: 'models.ollama.deprecated.notice'
-            })
-          }}
-        ></div>
-      </div>
-    </Tips>
-  );
-};
-
-const OllamaTips = () => {
-  const intl = useIntl();
-  const [maxHeight, setMaxHeight] = useState(1);
-  const handleShowMore = () => {
-    setMaxHeight(maxHeight === 1 ? 600 : 1);
-  };
-  return (
-    <Wrapper>
-      <AlertBlockInfo
-        contentStyle={{ paddingInline: 0 }}
-        maxHeight={maxHeight}
-        ellipsis={false}
-        message={<RenderMessage></RenderMessage>}
-        title={
-          <TitleWrapper>
-            <div>
-              {intl.formatMessage({ id: 'models.ollama.deprecated.title' })}
-            </div>
-            <Button
-              onClick={handleShowMore}
-              size="small"
-              type="text"
-              icon={<IconFont type="icon-down"></IconFont>}
-            ></Button>
-          </TitleWrapper>
-        }
-        type={'warning'}
-      ></AlertBlockInfo>
-    </Wrapper>
-  );
-};
-
-export default OllamaTips;

src/pages/llmodels/components/performance.tsx

@@ -1,12 +1,15 @@
+import CheckboxField from '@/components/seal-form/checkbox-field';
+import SealCascader from '@/components/seal-form/seal-cascader';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
-import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Form, Tooltip } from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Form } from 'antd';
 import React from 'react';
+import { backendOptionsMap } from '../config';
 import { useFormContext } from '../config/form-context';
+import { FormData } from '../config/types';
+import GPUCard from './gpu-card';
 
 const scheduleTypeTips = [
   {
@@ -25,29 +28,15 @@ const scheduleTypeTips = [
   }
 ];
 
-const CheckboxField: React.FC<{
-  title: string;
-  label: string;
-  checked?: boolean;
-  onChange?: (e: CheckboxChangeEvent) => void;
-}> = ({ title, label, checked, onChange }) => {
-  return (
-    <Checkbox className="p-l-6" checked={checked} onChange={onChange}>
-      <Tooltip title={title}>
-        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>{label}</span>
-        <QuestionCircleOutlined
-          className="m-l-4"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
-        />
-      </Tooltip>
-    </Checkbox>
-  );
-};
-
 const Performance: React.FC = () => {
   const intl = useIntl();
-  const { onValuesChange, onQuantizationChange, source, quantizationOptions } =
-    useFormContext();
+  const {
+    onValuesChange,
+    onQuantizationChange,
+    gpuOptions,
+    source,
+    quantizationOptions
+  } = useFormContext();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
 
@@ -61,6 +50,8 @@ const Performance: React.FC = () => {
     onQuantizationChange?.(val);
   };
 
+  const handleGpuSelectorChange = (value: any) => {};
+
   return (
     <>
       <Form.Item name="scheduleType">
@@ -80,30 +71,102 @@ const Performance: React.FC = () => {
                 id: 'models.form.scheduletype.manual'
               }),
               value: 'manual'
+            },
+            {
+              label: intl.formatMessage({
+                id: 'models.form.scheduletype.gpuType'
+              }),
+              value: 'specific_gpu_type'
             }
           ]}
         ></SealSelect>
       </Form.Item>
-      <Form.Item<FormData>
-        name="quantization"
-        key="quantization"
-        rules={[
-          {
-            required: true,
-            message: getRuleMessage('select', 'quantization', false)
-          }
-        ]}
-      >
-        <SealSelect
-          filterOption
-          defaultActiveFirstOption
-          disabled={false}
-          options={quantizationOptions}
-          onChange={handleOnQuantizationChange}
-          label="Quantization"
-          required
-        ></SealSelect>
-      </Form.Item>
+      {form.getFieldValue('scheduleType') === 'specific_gpu_type' && (
+        <>
+          <Form.Item name={['gpu_selector', 'gpu_type']}>
+            <SealSelect
+              label={intl.formatMessage({ id: 'models.form.gpuType' })}
+              options={[
+                {
+                  label: 'NVIDIA 4090',
+                  value: 'nvidia-4090'
+                },
+                {
+                  label: 'NVIDIA A100',
+                  value: 'nvidia-a100'
+                },
+                {
+                  label: 'NVIDIA H100',
+                  value: 'nvidia-h100'
+                },
+                {
+                  label: 'Huawei 910B',
+                  value: 'huawei-910b'
+                },
+                {
+                  label: 'Huawei 910C',
+                  value: 'huawei-910c'
+                }
+              ]}
+            ></SealSelect>
+          </Form.Item>
+          <Form.Item name={['gpu_selector', 'gpu_count']}>
+            <SealSelect
+              label={intl.formatMessage({ id: 'models.form.gpuCount' })}
+              options={[
+                {
+                  label: 'Auto',
+                  value: 'auto'
+                },
+                {
+                  label: '1',
+                  value: 1
+                },
+                {
+                  label: '2',
+                  value: 2
+                },
+                {
+                  label: '4',
+                  value: 4
+                }
+              ]}
+            ></SealSelect>
+          </Form.Item>
+        </>
+      )}
+      {form.getFieldValue('scheduleType') === 'manual' &&
+        !form.getFieldValue('fix_gpu_type') && (
+          <>
+            <Form.Item
+              name={['gpu_selector', 'gpu_ids']}
+              rules={[
+                {
+                  required: true,
+                  message: getRuleMessage('select', 'models.form.gpuselector')
+                }
+              ]}
+            >
+              <SealCascader
+                required
+                showSearch
+                expandTrigger="hover"
+                multiple={
+                  form.getFieldValue('backend') !== backendOptionsMap.voxBox
+                }
+                popupClassName="cascader-popup-wrapper gpu-selector"
+                maxTagCount={1}
+                label={intl.formatMessage({ id: 'models.form.gpuselector' })}
+                options={gpuOptions}
+                showCheckedStrategy="SHOW_CHILD"
+                value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
+                optionNode={GPUCard}
+                getPopupContainer={(triggerNode) => triggerNode.parentNode}
+                onChange={handleGpuSelectorChange}
+              ></SealCascader>
+            </Form.Item>
+          </>
+        )}
       <div style={{ paddingBottom: 22, paddingLeft: 10 }}>
         <Form.Item<FormData>
           name="optimize_long_prompt"
@@ -112,8 +175,7 @@ const Performance: React.FC = () => {
           noStyle
         >
           <CheckboxField
-            title="Optimize long prompt tips"
-            label="Optimize Long Prompt"
+            label={intl.formatMessage({ id: 'models.form.optimizeLongPrompt' })}
           ></CheckboxField>
         </Form.Item>
       </div>
@@ -125,8 +187,9 @@ const Performance: React.FC = () => {
           noStyle
         >
           <CheckboxField
-            title="Enable speculative decoding tips"
-            label="Enable Speculative Decoding"
+            label={intl.formatMessage({
+              id: 'models.form.enableSpeculativeDecoding'
+            })}
           ></CheckboxField>
         </Form.Item>
       </div>

src/pages/llmodels/components/table-list.tsx

@@ -111,6 +111,36 @@ interface ModelsProps {
   total: number;
 }
 
+const clusterList = [
+  {
+    label: 'Custom',
+    value: 'custom'
+  },
+  {
+    label: 'Kubernetes',
+    value: 'kubernetes'
+  },
+  {
+    label: 'Digital Ocean',
+    value: 'digital_ocean'
+  }
+];
+
+const statusList = [
+  {
+    label: 'Running',
+    value: 'running'
+  },
+  {
+    label: 'Stopped',
+    value: 'stopped'
+  },
+  {
+    label: 'Error',
+    value: 'error'
+  }
+];
+
 const getFormattedData = (record: any, extraData = {}) => ({
   id: record.id,
   data: {
@@ -605,7 +635,6 @@ const Models: React.FC<ModelsProps> = ({
         title: intl.formatMessage({ id: 'common.table.name' }),
         dataIndex: 'name',
         key: 'name',
-        width: 400,
         span: 5,
         render: (text: string, record: ListItem) => (
           <span className="flex-center" style={{ maxWidth: '100%' }}>
@@ -620,10 +649,10 @@ const Models: React.FC<ModelsProps> = ({
         title: 'Cluster',
         dataIndex: 'cluster',
         key: 'cluster',
-        span: 4,
+        span: 3,
         render: (text: string, record: ListItem) => (
           <span className="flex flex-column" style={{ width: '100%' }}>
-            Custom
+            {['Custom', 'Kubernetes', 'Digital Ocean'][record.id] || 'Custom'}
           </span>
         )
       },
@@ -631,7 +660,7 @@ const Models: React.FC<ModelsProps> = ({
         title: intl.formatMessage({ id: 'models.form.source' }),
         dataIndex: 'source',
         key: 'source',
-        span: 4,
+        span: 5,
         render: (text: string, record: ListItem) => (
           <span className="flex flex-column" style={{ width: '100%' }}>
             <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
@@ -778,7 +807,7 @@ const Models: React.FC<ModelsProps> = ({
             <Space>
               <Input
                 placeholder={intl.formatMessage({ id: 'common.filter.name' })}
-                style={{ width: 200 }}
+                style={{ width: 160 }}
                 size="large"
                 allowClear
                 onChange={handleNameChange}
@@ -789,7 +818,7 @@ const Models: React.FC<ModelsProps> = ({
                 placeholder={intl.formatMessage({
                   id: 'models.filter.category'
                 })}
-                style={{ width: 180 }}
+                style={{ width: 160 }}
                 size="large"
                 maxTagCount={1}
                 onChange={handleCategoryChange}
@@ -798,11 +827,20 @@ const Models: React.FC<ModelsProps> = ({
               <Select
                 allowClear
                 showSearch={false}
-                placeholder="Filter by worker"
-                style={{ width: 180 }}
+                placeholder="Filter by cluster"
+                style={{ width: 160 }}
                 size="large"
                 maxTagCount={1}
-                options={[]}
+                options={clusterList}
+              ></Select>
+              <Select
+                allowClear
+                showSearch={false}
+                placeholder="Running Replicas"
+                style={{ width: 140 }}
+                size="large"
+                maxTagCount={1}
+                options={statusList}
               ></Select>
               <Button
                 type="text"

src/pages/llmodels/components/update-modal.tsx

@@ -23,7 +23,6 @@ import { FormContext, FormInnerContext } from '../config/form-context';
 import { FormData, ListItem } from '../config/types';
 import HuggingFaceForm from '../forms/hugging-face';
 import LocalPathForm from '../forms/local-path';
-import OllamaForm from '../forms/ollama_library';
 import { useCheckCompatibility } from '../hooks';
 import AdvanceConfig from './advance-config';
 import ColumnWrapper from './column-wrapper';
@@ -396,7 +395,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
               }}
             >
               <HuggingFaceForm></HuggingFaceForm>
-              <OllamaForm></OllamaForm>
               <LocalPathForm></LocalPathForm>
             </FormInnerContext.Provider>
             <Form.Item name="backend" rules={[{ required: true }]}>
@@ -447,30 +445,6 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 }
               ></SealSelect>
             </Form.Item>
-            <Form.Item<FormData>
-              name="replicas"
-              rules={[
-                {
-                  required: true,
-                  message: getRuleMessage('input', 'models.form.replicas')
-                }
-              ]}
-            >
-              <SealInput.Number
-                style={{ width: '100%' }}
-                label={intl.formatMessage({
-                  id: 'models.form.replicas'
-                })}
-                required
-                description={intl.formatMessage(
-                  {
-                    id: 'models.form.replicas.tips'
-                  },
-                  { api: `${window.location.origin}/v1` }
-                )}
-                min={0}
-              ></SealInput.Number>
-            </Form.Item>
             <Form.Item<FormData> name="description">
               <SealInput.TextArea
                 scaleSize={true}

src/pages/llmodels/config/form-context.ts

@@ -9,6 +9,7 @@ interface FormContextProps {
   sizeOptions?: Global.BaseOption<number>[];
   quantizationOptions?: Global.BaseOption<string>[];
   modelFileOptions?: any[];
+  gpuOptions?: any[];
   onSizeChange?: (val: number) => void;
   onQuantizationChange?: (val: string) => void;
   onValuesChange?: (changedValues: any, allValues: any) => void;

src/pages/llmodels/config/index.ts

@@ -83,10 +83,6 @@ export const ollamaModelOptions = [
 ];
 
 export const backendTipsList = [
-  {
-    title: 'llama-box',
-    tips: 'models.form.backend.llamabox'
-  },
   {
     title: 'vLLM',
     tips: 'models.form.backend.vllm'
@@ -537,3 +533,20 @@ export const getBackendParamsTips = (backend: string) => {
     version: 'v0.0.13'
   };
 };
+
+export const scheduleTypeTips = [
+  {
+    title: {
+      text: 'models.form.scheduletype.auto',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.auto.tips'
+  },
+  {
+    title: {
+      text: 'models.form.scheduletype.manual',
+      locale: true
+    },
+    tips: 'models.form.scheduletype.manual.tips'
+  }
+];

src/pages/llmodels/config/types.ts

@@ -56,7 +56,9 @@ export interface FormData {
   model_scope_model_id?: string;
   model_scope_file_path?: string;
   gpu_selector?: {
-    gpu_ids: string[];
+    gpu_ids?: string[];
+    gpu_type?: string;
+    gpu_count?: number;
   };
   placement_strategy?: string;
   cpu_offloading?: boolean;
@@ -65,6 +67,8 @@ export interface FormData {
   name: string;
   replicas: number;
   description: string;
+  optimize_long_prompt: boolean;
+  enable_speculative_decoding: boolean;
 }
 
 interface ComputedResourceClaim {

src/pages/llmodels/download/target-form.tsx

@@ -1,21 +1,13 @@
-import IconFont from '@/components/icon-font';
-import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
 import { ModelFileFormData as FormData } from '@/pages/resources/config/types';
 import { useIntl } from '@umijs/max';
-import { Form, Typography } from 'antd';
+import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
-import OllamaTips from '../components/ollama-tips';
-import {
-  localPathTipsList,
-  modelSourceMap,
-  ollamaModelOptions,
-  sourceOptions
-} from '../config';
+import { localPathTipsList, modelSourceMap, sourceOptions } from '../config';
 
 interface TargetFormProps {
   ref?: any;
@@ -73,56 +65,7 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
     );
   };
 
-  const renderOllamaModelFields = () => {
-    return (
-      <>
-        <Form.Item<FormData>
-          name="ollama_library_model_name"
-          key="ollama_library_model_name"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'models.table.name')
-            }
-          ]}
-        >
-          <SealAutoComplete
-            allowClear
-            filterOption
-            defaultActiveFirstOption
-            disabled={false}
-            options={ollamaModelOptions}
-            description={
-              <span>
-                <span>
-                  {intl.formatMessage({ id: 'models.form.ollamalink' })}
-                </span>
-                <Typography.Link
-                  className="flex-center"
-                  href="https://www.ollama.com/library"
-                  target="_blank"
-                >
-                  <IconFont
-                    type="icon-external-link"
-                    className="font-size-14"
-                  ></IconFont>
-                </Typography.Link>
-              </span>
-            }
-            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
-            placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
-            required
-          ></SealAutoComplete>
-        </Form.Item>
-      </>
-    );
-  };
-
   const renderFieldsBySource = useMemo(() => {
-    if (props.source === modelSourceMap.ollama_library_value) {
-      return renderOllamaModelFields();
-    }
-
     if (props.source === modelSourceMap.local_path_value) {
       return renderLocalPathFields();
     }
@@ -132,9 +75,6 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
 
   return (
     <div>
-      {source === modelSourceMap.ollama_library_value && (
-        <OllamaTips></OllamaTips>
-      )}
       <Form
         form={form}
         onFinish={handleOk}

src/pages/llmodels/forms/hugging-face.tsx

@@ -51,25 +51,6 @@ const HuggingFaceForm: React.FC = () => {
           onBlur={handleOnBlur}
         ></SealInput.Input>
       </Form.Item>
-      {/* {isGGUF && (
-        <Form.Item<FormData>
-          name="file_name"
-          key="file_name"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'models.form.filename')
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'models.form.filename' })}
-            required
-            disabled={pageAction === PageAction.CREATE}
-            onBlur={handleOnBlur}
-          ></SealInput.Input>
-        </Form.Item>
-      )} */}
     </>
   );
 };

src/pages/llmodels/forms/ollama_library.tsx

@@ -1,67 +0,0 @@
-import SealAutoComplete from '@/components/seal-form/auto-complete';
-import useAppUtils from '@/hooks/use-app-utils';
-import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
-import React from 'react';
-import { modelSourceMap, ollamaModelOptions } from '../config';
-import { useFormContext, useFormInnerContext } from '../config/form-context';
-import { FormData } from '../config/types';
-
-const OllamaForm: React.FC = () => {
-  const formCtx = useFormContext();
-  const formInnerCtx = useFormInnerContext();
-  const { byBuiltIn, onValuesChange } = formCtx;
-  const { getRuleMessage } = useAppUtils();
-  const intl = useIntl();
-  const source = Form.useWatch('source');
-  const formInstance = Form.useFormInstance();
-
-  if (![modelSourceMap.ollama_library_value].includes(source) || byBuiltIn) {
-    return null;
-  }
-  const handleModelNameChange = (value: string) => {
-    if (value) {
-      onValuesChange?.({}, formInstance.getFieldsValue());
-    }
-  };
-
-  const handleOnBlur = (e: any) => {
-    onValuesChange?.({}, formInstance.getFieldsValue());
-  };
-  return (
-    <>
-      <Form.Item<FormData>
-        name="ollama_library_model_name"
-        key="ollama_library_model_name"
-        rules={[
-          {
-            required: true,
-            message: getRuleMessage('input', 'models.table.name')
-          }
-        ]}
-      >
-        <SealAutoComplete
-          allowClear
-          filterOption
-          defaultActiveFirstOption
-          disabled={false}
-          options={ollamaModelOptions}
-          onSelect={handleModelNameChange}
-          onBlur={handleOnBlur}
-          description={
-            <span
-              dangerouslySetInnerHTML={{
-                __html: intl.formatMessage({ id: 'models.form.ollamalink' })
-              }}
-            ></span>
-          }
-          label={intl.formatMessage({ id: 'model.form.ollama.model' })}
-          placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
-          required
-        ></SealAutoComplete>
-      </Form.Item>
-    </>
-  );
-};
-
-export default OllamaForm;

src/pages/llmodels/hooks/index.ts

@@ -104,8 +104,10 @@ export const useGenerateFormEditInitialValues = () => {
       queryWorkersList({ page: 1, perPage: 100 })
     ]);
     const gpuList = generateCascaderOptions(gpuData.items, workerData.items);
+
     gpuDeviceList.current = gpuList;
     workerList.current = workerData.items;
+
     return gpuList;
   };
 

src/pages/llmodels/user-models.tsx

@@ -1,25 +1,38 @@
-import { FilterBar } from '@/components/page-tools';
+import MoreButton from '@/components/buttons/more';
+import PageTools from '@/components/page-tools';
+import CardList from '@/components/templates/card-list';
+import CardSkeleton from '@/components/templates/card-skelton';
+import useTableFetch from '@/hooks/use-table-fetch';
+import { SyncOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
+import { Button, Input, Select, Space } from 'antd';
 import React from 'react';
+import { MODELS_API, queryModelsList } from './apis';
 import ModelItem from './components/model-item';
 
 const UserModels: React.FC = () => {
+  const { dataSource, queryParams, fetchData, handleSearch, handleNameChange } =
+    useTableFetch<any>({
+      fetchAPI: queryModelsList,
+      API: MODELS_API,
+      watch: false
+    });
   const intl = useIntl();
 
-  const handleSearch = () => {
-    // Implement search functionality here
+  const loadMore = () => {
+    fetchData({
+      ...queryParams,
+      page: queryParams.page + 1
+    });
   };
 
-  const handleInputChange = () => {};
-
-  const handleOnDeploy = (model: any) => {
-    // Implement deploy functionality here
+  const handleOnClick = (model: any) => {
     console.log('Deploying model:', model);
   };
 
   const renderCard = (data: any) => {
-    return <ModelItem model={data} onDeploy={handleOnDeploy} />;
+    return <ModelItem model={data} onClick={handleOnClick} />;
   };
 
   return (
@@ -34,27 +47,55 @@ const UserModels: React.FC = () => {
       }}
       extra={[]}
     >
-      <FilterBar
-        showSelect={true}
-        showPrimaryButton={false}
-        showDeleteButton={false}
-        selectHolder="Filter by cluster"
+      <PageTools
         marginBottom={22}
-        marginTop={30}
-        buttonText={intl.formatMessage({ id: 'resources.button.create' })}
-        handleInputChange={() => {}}
-        handleSearch={handleSearch}
-        width={{ input: 200 }}
-      ></FilterBar>
-      {/* <CardList
+        left={
+          <Space>
+            <Input
+              placeholder={intl.formatMessage({ id: 'common.filter.name' })}
+              style={{ width: 230 }}
+              size="large"
+              allowClear
+              onClear={() =>
+                handleNameChange({
+                  target: {
+                    value: ''
+                  }
+                })
+              }
+              onChange={handleNameChange}
+            ></Input>
+            <Select
+              allowClear
+              showSearch={false}
+              placeholder={intl.formatMessage({ id: 'models.filter.category' })}
+              style={{ width: 180 }}
+              size="large"
+              maxTagCount={1}
+              options={[]}
+            ></Select>
+            <Button
+              type="text"
+              style={{ color: 'var(--ant-color-text-tertiary)' }}
+              icon={<SyncOutlined></SyncOutlined>}
+              onClick={handleSearch}
+            ></Button>
+          </Space>
+        }
+      ></PageTools>
+      <CardList
         dataList={dataSource.dataList}
         loading={dataSource.loading}
-        onDeploy={handleOnDeploy}
         activeId={-1}
-        isFirst={isFirst}
-        Skeleton={CatalogSkelton}
+        isFirst={!dataSource.loadend}
+        Skeleton={CardSkeleton}
         renderItem={renderCard}
-      ></CardList> */}
+      ></CardList>
+      <MoreButton
+        show={queryParams.page < dataSource.totalPage}
+        loading={dataSource.loading}
+        loadMore={loadMore}
+      ></MoreButton>
     </PageContainer>
   );
 };

src/pages/resources/config/index.ts

@@ -41,14 +41,11 @@ export const addWorkerGuide: Record<string, any> = {
       token: string;
       workerip: string;
     }) {
-      return `docker run -d --name gpustack \\
-    --restart=unless-stopped \\
-    --gpus all \\
-    --network=host \\
-    --ipc=host \\
-    -v gpustack-data:/var/lib/gpustack \\
-    gpustack/gpustack:${params.tag} \\
-    --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`;
+      return `docker run -d \\
+       --net=host \\
+       -v /var/lib/gpustack:/var/lib/gpustack \\
+       --privileged gpustack/gpustack:xxxx \\
+       --registration ${params.token}`;
     }
   },
   npu: {