feat: cluster ux

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_qgb5xlexehp.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_pouhrqmodr9.js'
 });
 
 export default IconFont;

src/pages/cluster-management/clusters.tsx

@@ -2,6 +2,7 @@ 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';
@@ -13,7 +14,6 @@ import {
   EditOutlined,
   KubernetesOutlined,
   ProfileOutlined,
-  SnippetsOutlined,
   SyncOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
@@ -36,6 +36,7 @@ import {
   updateCredential
 } from './apis';
 import AddCluster from './components/add-cluster';
+import AddPool from './components/add-pool';
 import { ClusterDataList } from './config';
 import {
   ClusterFormData as FormData,
@@ -49,14 +50,21 @@ const addActions = [
     locale: false,
     value: 'custom',
     key: 'custom',
-    icon: <SnippetsOutlined />
+    icon: <IconFont type="icon-docker" className="size-16" />
   },
   {
     label: 'Kubernetes',
     locale: false,
     value: 'kubernetes',
     key: 'kubernetes',
-    icon: <KubernetesOutlined />
+    icon: <KubernetesOutlined className="size-16" />
+  },
+  {
+    label: 'Digital Ocean',
+    locale: false,
+    value: 'digitalocean',
+    key: 'digitalocean',
+    icon: <IconFont type="icon-digitalocean" />
   }
 ];
 
@@ -105,11 +113,18 @@ const ActionList = [
     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: {
@@ -143,23 +158,50 @@ const Credentials: React.FC = () => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
   const [openAddModal, setOpenAddModal] = useState(false);
-  const [clusterType, setClusterType] = useState<string>('custom');
+  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 handleAddUser = (value: string) => {
+  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);
-    setClusterType(value);
+    setProvider(value);
-    setTitle('Add Cluster');
+    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) => {
-    console.log('handleClickDropdown', item);
+    handleAddCluster(item.key);
-    handleAddUser(item.key);
   };
 
   const handleModalOk = async (data: FormData) => {
@@ -194,7 +236,7 @@ const Credentials: React.FC = () => {
     setCurrentData(row);
     setOpenAddModal(true);
     setAction(PageAction.EDIT);
-    setTitle('Edit Cluster');
+    setTitle(`Edit ${row.name} Cluster`);
   };
 
   const handleSelect = (val: any, row: ListItem) => {
@@ -205,6 +247,8 @@ const Credentials: React.FC = () => {
     } else if (val === 'add') {
       setOpen(true);
       setCurrentData(row);
+    } else if (val === 'addPool') {
+      handleAddPool(row.provider);
     }
   };
 
@@ -260,7 +304,7 @@ const Credentials: React.FC = () => {
                   items: addActions,
                   onClick: handleClickDropdown
                 }}
-                trigger={['hover']}
+                trigger={['click']}
                 placement="bottomRight"
               >
                 <Button
@@ -328,7 +372,8 @@ const Credentials: React.FC = () => {
               render={(text, record) => {
                 return (
                   <AutoTooltip ghost minWidth={20}>
-                    {text}
+                    {addActions.find((item) => item.value === record.provider)
+                      ?.label || 'N/A'}
                   </AutoTooltip>
                 );
               }}
@@ -386,33 +431,6 @@ const Credentials: React.FC = () => {
                 );
               }}
             />
-            <Column
-              title="Replicas"
-              dataIndex="replicas"
-              key="replicas"
-              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>
-                    <span className="worker">
-                      <span className="dot transition"></span>
-                      <span className="value">1</span>
-                    </span>
-                  </WorkerWrapper>
-                );
-              }}
-            />
-
             <Column
               title={intl.formatMessage({ id: 'common.table.operation' })}
               key="operation"
@@ -422,7 +440,7 @@ const Credentials: React.FC = () => {
               render={(text, record: ListItem) => {
                 return (
                   <DropdownButtons
-                    items={ActionList}
+                    items={setActions(record)}
                     onSelect={(val) => handleSelect(val, record)}
                   ></DropdownButtons>
                 );
@@ -432,7 +450,7 @@ const Credentials: React.FC = () => {
         </ConfigProvider>
       </PageContainer>
       <AddCluster
-        clusterType={clusterType}
+        provider={provider}
         open={openAddModal}
         action={action}
         title={title}
@@ -440,6 +458,28 @@ const Credentials: React.FC = () => {
         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>
     </>

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

@@ -1,21 +1,23 @@
 import ModalFooter from '@/components/modal-footer';
-import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import ScrollerModal from '@/components/scroller-modal/index';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
+import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+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;
-  clusterType: string; // 'kubernetes' | 'custom'
+  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
   onOk: (values: FormData) => void;
   data?: ListItem;
   onCancel: () => void;
@@ -24,7 +26,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   title,
   action,
   open,
-  clusterType,
+  provider,
   onOk,
   data,
   onCancel
@@ -36,9 +38,21 @@ const AddCluster: React.FC<AddModalProps> = ({
     form.submit();
   };
 
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
   return (
-    <GSDrawer
+    <ScrollerModal
-      title={title}
+      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}
@@ -53,7 +67,7 @@ const AddCluster: React.FC<AddModalProps> = ({
     >
       <Form form={form} onFinish={onOk} preserve={false}>
         <Form.Item<FormData>
-          name="name"
+          name="display_name"
           rules={[
             {
               required: true,
@@ -71,104 +85,15 @@ const AddCluster: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        {clusterType === 'kubernetes' && (
+        {provider === 'digitalocean' && <CloudProvider></CloudProvider>}
-          <>
+        {provider === 'kubernetes' && <K8SProvider></K8SProvider>}
-            {' '}
-            <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', 'AutoDL', 'Custom'].map((item) => ({
-                  label: item,
-                  value: item
-                }))}
-              ></SealSelect>
-            </Form.Item>
-            <Form.Item<FormData>
-              name="region"
-              rules={[
-                {
-                  required: true,
-                  message: intl.formatMessage(
-                    { id: 'common.form.rule.input' },
-                    {
-                      name: 'Region'
-                    }
-                  )
-                }
-              ]}
-            >
-              <SealSelect
-                label="Region"
-                required
-                options={['Hangzhou', 'Guangzhou', 'Shenzhen'].map((item) => ({
-                  label: item,
-                  value: item
-                }))}
-              ></SealSelect>
-            </Form.Item>
-          </>
-        )}
-        <Form.Item<FormData>
-          name="gpuPlan"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'GPU Plan'
-                }
-              )
-            }
-          ]}
-        >
-          <SealSelect
-            label="GPU Plan"
-            required
-            options={['A100', 'V100', 'T4'].map((item) => ({
-              label: item,
-              value: item
-            }))}
-          ></SealSelect>
-        </Form.Item>
-        <Form.Item<FormData>
-          name="workers"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
-                {
-                  name: 'Workers'
-                }
-              )
-            }
-          ]}
-        >
-          <SealInput.Number label="Worker Number" required></SealInput.Number>
-        </Form.Item>
-
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea
             label={intl.formatMessage({ id: 'common.table.description' })}
           ></SealInput.TextArea>
         </Form.Item>
       </Form>
-    </GSDrawer>
+    </ScrollerModal>
   );
 };
 

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

@@ -1,7 +1,6 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction, PasswordReg } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
@@ -16,6 +15,7 @@ type AddModalProps = {
   onOk: (values: FormData) => void;
   data?: ListItem;
   onCancel: () => void;
+  provider: string; // 'kubernetes'  | 'digitalocean';
 };
 const AddModal: React.FC<AddModalProps> = ({
   title,
@@ -23,6 +23,7 @@ const AddModal: React.FC<AddModalProps> = ({
   open,
   onOk,
   data,
+  provider,
   onCancel
 }) => {
   const [form] = Form.useForm();
@@ -69,7 +70,7 @@ const AddModal: React.FC<AddModalProps> = ({
             required
           ></SealInput.Input>
         </Form.Item>
-        <Form.Item<FormData>
+        {/* <Form.Item<FormData>
           name="provider"
           rules={[
             {
@@ -86,42 +87,55 @@ const AddModal: React.FC<AddModalProps> = ({
           <SealSelect
             label="Provider"
             required
-            options={['Digital Ocean', 'AutoDL', 'Custom'].map((item) => ({
+            options={['Digital Ocean', 'Kubernetes', 'Custom'].map((item) => ({
               label: item,
               value: item
             }))}
           ></SealSelect>
-        </Form.Item>
+        </Form.Item> */}
-        <Form.Item<FormData>
+        {provider === 'digital_ocean' && (
-          name="access_key"
+          <>
-          rules={[
+            <Form.Item<FormData>
-            {
+              name="access_key"
-              required: action === PageAction.CREATE,
+              rules={[
-              pattern: PasswordReg,
+                {
-              message: intl.formatMessage({ id: 'users.form.rule.password' })
+                  required: action === PageAction.CREATE,
-            }
+                  pattern: PasswordReg,
-          ]}
+                  message: intl.formatMessage({
-        >
+                    id: 'users.form.rule.password'
-          <SealInput.Password
+                  })
-            label="Access Key"
+                }
-            required={action === PageAction.CREATE}
+              ]}
-          ></SealInput.Password>
+            >
-        </Form.Item>
+              <SealInput.Password
-        <Form.Item<FormData>
+                label="Access Key"
-          name="secret_key"
+                required={action === PageAction.CREATE}
-          rules={[
+              ></SealInput.Password>
-            {
+            </Form.Item>
-              required: action === PageAction.CREATE,
+            <Form.Item<FormData>
-              pattern: PasswordReg,
+              name="secret_key"
-              message: intl.formatMessage({ id: 'users.form.rule.password' })
+              rules={[
-            }
+                {
-          ]}
+                  required: action === PageAction.CREATE,
-        >
+                  pattern: PasswordReg,
-          <SealInput.Password
+                  message: intl.formatMessage({
-            label="Secret Key"
+                    id: 'users.form.rule.password'
-            required={action === PageAction.CREATE}
+                  })
-          ></SealInput.Password>
+                }
-        </Form.Item>
+              ]}
+            >
+              <SealInput.Password
+                label="Secret Key"
+                required={action === PageAction.CREATE}
+              ></SealInput.Password>
+            </Form.Item>
+          </>
+        )}
+        {provider === 'kubernetes' && (
+          <Form.Item<FormData> name="kubeconfig" rules={[{ required: false }]}>
+            <SealInput.TextArea label="Kubeconfig"></SealInput.TextArea>
+          </Form.Item>
+        )}
         <Form.Item<FormData> name="description" rules={[{ required: false }]}>
           <SealInput.TextArea
             label={intl.formatMessage({ id: 'common.table.description' })}

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

@@ -0,0 +1,186 @@
+import LabelSelector from '@/components/label-selector';
+import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import SealInputNumber from '@/components/seal-form/input-number';
+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 _ from 'lodash';
+import React from 'react';
+import {
+  NodePoolFormData as FormData,
+  NodePoolListItem as ListItem
+} from '../config/types';
+
+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 handleSumit = () => {
+    form.submit();
+  };
+
+  const handleCancel = () => {
+    form.resetFields();
+    onCancel();
+  };
+
+  return (
+    <GSDrawer
+      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={handleSumit} onCancel={onCancel}></ModalFooter>
+      }
+    >
+      <Form form={form} onFinish={onOk} preserve={false}>
+        <Form.Item<FormData>
+          name="instance_type"
+          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>
+        <Form.Item<FormData>
+          name="replicas"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: 'Replicas'
+                }
+              )
+            }
+          ]}
+        >
+          <SealInputNumber label="Replicas" required></SealInputNumber>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="batch_size"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: 'Batch Size'
+                }
+              )
+            }
+          ]}
+        >
+          <SealInputNumber label="Batch Size" required></SealInputNumber>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="labels"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: 'labels'
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            label="Labels"
+            labels={form.getFieldValue('labels') || {}}
+            btnText="Add Label"
+          ></LabelSelector>
+        </Form.Item>
+        <Form.Item<FormData>
+          name="cloud_options"
+          rules={[
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (_.keys(value).length > 0) {
+                  if (_.some(_.keys(value), (k: string) => !value[k])) {
+                    return Promise.reject(
+                      intl.formatMessage(
+                        {
+                          id: 'common.validate.value'
+                        },
+                        {
+                          name: 'cloud_options'
+                        }
+                      )
+                    );
+                  }
+                }
+                return Promise.resolve();
+              }
+            })
+          ]}
+        >
+          <LabelSelector
+            label="Cloud Options"
+            labels={form.getFieldValue('cloud_options') || {}}
+            btnText="Add Option"
+          ></LabelSelector>
+        </Form.Item>
+      </Form>
+    </GSDrawer>
+  );
+};
+
+export default AddCluster;

src/pages/cluster-management/components/cloud-provider-form.tsx

@@ -0,0 +1,90 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { ClusterFormData as FormData } from '../config/types';
+
+interface CloudProviderProps {
+  provider: string; // 'kubernetes' | 'digitalocean';
+}
+
+const CloudProvider: React.FC<CloudProviderProps> = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <Form.Item<FormData>
+        name="credential_id"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'credential'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Credential"
+          required
+          options={['credential1', 'credential2', 'credential3'].map(
+            (item) => ({
+              label: item,
+              value: item
+            })
+          )}
+        ></SealSelect>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="region"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'Region'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Region"
+          required
+          options={['Hangzhou', 'Guangzhou', 'Shenzhen'].map((item) => ({
+            label: item,
+            value: item
+          }))}
+        ></SealSelect>
+      </Form.Item>
+      <Form.Item<FormData>
+        name="zone"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'Zone'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Zone"
+          required
+          options={['A100', 'V100', 'T4'].map((item) => ({
+            label: item,
+            value: item
+          }))}
+        ></SealSelect>
+      </Form.Item>
+    </>
+  );
+};
+
+export default CloudProvider;

src/pages/cluster-management/components/k8s-provider-form.tsx

@@ -0,0 +1,44 @@
+import SealSelect from '@/components/seal-form/seal-select';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import { ClusterFormData as FormData } from '../config/types';
+
+interface CloudProviderProps {
+  provider: string; // 'kubernetes' | 'digitalocean';
+}
+
+const CloudProvider: React.FC<CloudProviderProps> = () => {
+  const intl = useIntl();
+  return (
+    <>
+      <Form.Item<FormData>
+        name="credential_id"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              { id: 'common.form.rule.input' },
+              {
+                name: 'credential'
+              }
+            )
+          }
+        ]}
+      >
+        <SealSelect
+          label="Kubeconfig"
+          required
+          options={['credential1', 'credential2', 'credential3'].map(
+            (item) => ({
+              label: item,
+              value: item
+            })
+          )}
+        ></SealSelect>
+      </Form.Item>
+    </>
+  );
+};
+
+export default CloudProvider;

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

@@ -1,8 +1,17 @@
 export const ClusterDataList = [
+  {
+    id: 3,
+    name: 'Custom-cluster',
+    provider: 'custom',
+    clusterType: 'Custom',
+    workers: 4,
+    gpus: 8,
+    deployments: 3
+  },
   {
     id: 1,
-    name: 'custom-cluster',
+    name: 'kubernetes-cluster',
-    provider: 'Custom',
+    provider: 'kubernetes',
     clusterType: 'Kubernetes',
     workers: 2,
     gpus: 4,
@@ -11,19 +20,9 @@ export const ClusterDataList = [
   {
     id: 2,
     name: 'Digital-Ocean-cluster',
-    provider: 'Digital Ocean',
+    provider: 'digitalocean',
-    clusterType: 'Custom',
     workers: 3,
     gpus: 6,
     deployments: 2
-  },
-  {
-    id: 3,
-    name: 'AutoDL-cluster',
-    provider: 'AutoDL',
-    clusterType: 'Custom',
-    workers: 4,
-    gpus: 8,
-    deployments: 3
   }
 ];

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

@@ -29,12 +29,29 @@ export interface ClusterListItem {
 }
 
 export interface ClusterFormData {
-  name: string;
+  display_name: string;
+  description: string;
   provider: string;
-  credential: string;
+  credential_id: number;
+  zone: string;
   region: string;
-  workers: number;
+}
-  gpuPlan: string;
+
-  description?: string;
+export interface NodePoolListItem {
-  id?: number;
+  id: number;
+  instance_type: string;
+  replicas: number;
+  batch_size: number;
+  labels: Record<string, string>;
+  cloud_options: Record<string, any>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface NodePoolFormData {
+  instance_type: string;
+  replicas: number;
+  batch_size: number;
+  labels: Record<string, string>;
+  cloud_options: Record<string, any>;
 }

src/pages/cluster-management/credentials.tsx

@@ -2,16 +2,16 @@ 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 {
-  CloudOutlined,
   DeleteOutlined,
   DownOutlined,
   EditOutlined,
-  KeyOutlined,
+  KubernetesOutlined,
   SyncOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
@@ -55,18 +55,18 @@ const ActionList = [
 
 const addActions = [
   {
-    label: 'Cloud Credential',
+    label: 'Digital Ocean',
     locale: false,
-    value: 'cloud_credential',
+    value: 'digital_ocean',
-    key: 'cloud_credential',
+    key: 'digital_ocean',
-    icon: <CloudOutlined />
+    icon: <IconFont type="icon-digitalocean" />
   },
   {
-    label: 'SSH Key',
+    label: 'Kubernetes',
     locale: false,
-    value: 'ssh_key',
+    value: 'kubernetes',
-    key: 'ssh_key',
+    key: 'kubernetes',
-    icon: <KeyOutlined />
+    icon: <KubernetesOutlined className="size-16" />
   }
 ];
 
@@ -91,18 +91,32 @@ const Credentials: React.FC = () => {
   });
 
   const intl = useIntl();
-  const [openAddModal, setOpenAddModal] = useState(false);
+  const [openModalStatus, setOpenModalStatus] = useState<{
-
+    provider: string;
-  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
+    open: boolean;
-  const [title, setTitle] = useState<string>('');
+    action: PageActionType;
+    title: string;
+  }>({
+    provider: '',
+    open: false,
+    action: PageAction.CREATE,
+    title: ''
+  });
   const [currentData, setCurrentData] = useState<ListItem | undefined>(
     undefined
   );
 
-  const handleAddUser = () => {
+  const handleAddCredential = (value: string) => {
-    setOpenAddModal(true);
+    const title =
-    setAction(PageAction.CREATE);
+      value === 'digital_ocean'
-    setTitle('Add Credential');
+        ? 'Add Digital Ocean Credential'
+        : 'Add Kubernetes Credential';
+    setOpenModalStatus({
+      provider: value,
+      open: true,
+      action: PageAction.CREATE,
+      title: title
+    });
   };
 
   const handleModalOk = async (data: FormData) => {
@@ -110,7 +124,7 @@ const Credentials: React.FC = () => {
       ...data
     };
     try {
-      if (action === PageAction.EDIT) {
+      if (openModalStatus.action === PageAction.EDIT) {
         await updateCredential({
           data: {
             ...params,
@@ -121,23 +135,26 @@ const Credentials: React.FC = () => {
         await createCredential({ data: params });
       }
       fetchData();
-      setOpenAddModal(false);
+      setOpenModalStatus({ ...openModalStatus, open: false });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
     } catch (error) {
-      setOpenAddModal(false);
+      setOpenModalStatus({ ...openModalStatus, open: false });
     }
   };
 
   const handleModalCancel = () => {
     console.log('handleModalCancel');
-    setOpenAddModal(false);
+    setOpenModalStatus({ ...openModalStatus, open: false });
   };
 
   const handleEditUser = (row: ListItem) => {
     setCurrentData(row);
-    setOpenAddModal(true);
+    setOpenModalStatus({
-    setAction(PageAction.EDIT);
+      provider: row.provider,
-    setTitle('Edit Credential');
+      open: true,
+      action: PageAction.EDIT,
+      title: `Edit ${row.provider} Credential`
+    });
   };
 
   const handleSelect = (val: any, row: ListItem) => {
@@ -161,7 +178,8 @@ const Credentials: React.FC = () => {
   };
 
   const handleClickDropdown = (e: any) => {
-    handleAddUser();
+    const value = e.key;
+    handleAddCredential(value);
   };
 
   return (
@@ -330,9 +348,10 @@ const Credentials: React.FC = () => {
         </ConfigProvider>
       </PageContainer>
       <AddModal
-        open={openAddModal}
+        provider={openModalStatus.provider}
-        action={action}
+        open={openModalStatus.open}
-        title={title}
+        action={openModalStatus.action}
+        title={openModalStatus.title}
         data={currentData}
         onCancel={handleModalCancel}
         onOk={handleModalOk}

src/pages/resources/components/workers.tsx

@@ -302,6 +302,18 @@ const Workers: React.FC = () => {
                 );
               }}
             />
+            <Column
+              title="Cluster"
+              dataIndex="cluster"
+              key="cluster"
+              render={(text, record: ListItem) => {
+                return (
+                  <AutoTooltip ghost maxWidth={240}>
+                    <span>digital-ocean-cluster</span>
+                  </AutoTooltip>
+                );
+              }}
+            />
             <Column
               title={intl.formatMessage({ id: 'common.table.status' })}
               dataIndex="state"