feat: cluster ux

2025-09-16 11:26:17 +08:00
parent 4711c848f8
commit ed49e03802
11 changed files with 570 additions and 224 deletions
@@ -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;
@@ -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);
-    setTitle('Add Cluster');
+    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) => {
-    console.log('handleClickDropdown', item);
-    handleAddUser(item.key);
+    handleAddCluster(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>
    </>
@@ -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
-      title={title}
+    <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}
@@ -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' && (
-          <>
-            {' '}
-            <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>
-
+        {provider === 'digitalocean' && <CloudProvider></CloudProvider>}
+        {provider === 'kubernetes' && <K8SProvider></K8SProvider>}
        <Form.Item<FormData> name="description" rules={[{ required: false }]}>
          <SealInput.TextArea
            label={intl.formatMessage({ id: 'common.table.description' })}
          ></SealInput.TextArea>
        </Form.Item>
      </Form>
-    </GSDrawer>
+    </ScrollerModal>
  );
 };

@@ -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<FormData>
-          name="access_key"
-          rules={[
-            {
-              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>
-        <Form.Item<FormData>
-          name="secret_key"
-          rules={[
-            {
-              required: action === PageAction.CREATE,
-              pattern: PasswordReg,
-              message: intl.formatMessage({ id: 'users.form.rule.password' })
-            }
-          ]}
-        >
-          <SealInput.Password
-            label="Secret Key"
-            required={action === PageAction.CREATE}
-          ></SealInput.Password>
-        </Form.Item>
+        </Form.Item> */}
+        {provider === 'digital_ocean' && (
+          <>
+            <Form.Item<FormData>
+              name="access_key"
+              rules={[
+                {
+                  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>
+            <Form.Item<FormData>
+              name="secret_key"
+              rules={[
+                {
+                  required: action === PageAction.CREATE,
+                  pattern: PasswordReg,
+                  message: intl.formatMessage({
+                    id: 'users.form.rule.password'
+                  })
+                }
+              ]}
+            >
+              <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' })}
@@ -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;
@@ -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;
@@ -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;
@@ -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',
-    provider: 'Custom',
+    name: 'kubernetes-cluster',
+    provider: 'kubernetes',
    clusterType: 'Kubernetes',
    workers: 2,
    gpus: 4,
@@ -11,19 +20,9 @@ export const ClusterDataList = [
  {
    id: 2,
    name: 'Digital-Ocean-cluster',
-    provider: 'Digital Ocean',
-    clusterType: 'Custom',
+    provider: 'digitalocean',
    workers: 3,
    gpus: 6,
    deployments: 2
-  },
-  {
-    id: 3,
-    name: 'AutoDL-cluster',
-    provider: 'AutoDL',
-    clusterType: 'Custom',
-    workers: 4,
-    gpus: 8,
-    deployments: 3
  }
 ];
@@ -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;
-  id?: number;
+}
+
+export interface NodePoolListItem {
+  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>;
 }
@@ -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',
-    key: 'cloud_credential',
-    icon: <CloudOutlined />
+    value: 'digital_ocean',
+    key: 'digital_ocean',
+    icon: <IconFont type="icon-digitalocean" />
  },
  {
-    label: 'SSH Key',
+    label: 'Kubernetes',
    locale: false,
-    value: 'ssh_key',
-    key: 'ssh_key',
-    icon: <KeyOutlined />
+    value: 'kubernetes',
+    key: 'kubernetes',
+    icon: <KubernetesOutlined className="size-16" />
  }
 ];

@@ -91,18 +91,32 @@ const Credentials: React.FC = () => {
  });

  const intl = useIntl();
-  const [openAddModal, setOpenAddModal] = useState(false);
-
-  const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
-  const [title, setTitle] = useState<string>('');
+  const [openModalStatus, setOpenModalStatus] = useState<{
+    provider: string;
+    open: boolean;
+    action: PageActionType;
+    title: string;
+  }>({
+    provider: '',
+    open: false,
+    action: PageAction.CREATE,
+    title: ''
+  });
  const [currentData, setCurrentData] = useState<ListItem | undefined>(
    undefined
  );

-  const handleAddUser = () => {
-    setOpenAddModal(true);
-    setAction(PageAction.CREATE);
-    setTitle('Add Credential');
+  const handleAddCredential = (value: string) => {
+    const title =
+      value === 'digital_ocean'
+        ? '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);
-    setAction(PageAction.EDIT);
-    setTitle('Edit Credential');
+    setOpenModalStatus({
+      provider: row.provider,
+      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}
-        action={action}
-        title={title}
+        provider={openModalStatus.provider}
+        open={openModalStatus.open}
+        action={openModalStatus.action}
+        title={openModalStatus.title}
        data={currentData}
        onCancel={handleModalCancel}
        onOk={handleModalOk}
@@ -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"