fix: add do cluster

src/components/label-cell/index.tsx

@@ -0,0 +1,32 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import _ from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+
+const LabelsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+`;
+
+interface LabelCellProps {
+  labels: Record<string, any>;
+}
+
+const LabelsCell: React.FC<LabelCellProps> = ({ labels }) => (
+  <LabelsWrapper>
+    {_.map(labels, (value: string, key: string) => (
+      <AutoTooltip
+        key={key}
+        className="m-r-0"
+        maxWidth={155}
+        style={{ paddingInline: 8, borderRadius: 12 }}
+      >
+        <span>{key}</span>
+        <span>:{value}</span>
+      </AutoTooltip>
+    ))}
+  </LabelsWrapper>
+);
+
+export default LabelsCell;

src/components/seal-form/seal-select.tsx

@@ -23,7 +23,6 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   const intl = useIntl();
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const boxRef = useRef<any>(null);
   let status = '';
 
   // the status can be controlled by Form.Item

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

@@ -100,11 +100,10 @@ export async function queryClusterToken(params: { id: number }) {
 // ===================== Worker Pools =====================
 
 export async function queryWorkerPools(
-  clusterId: number,
+  params?: Global.SearchParams & { cluster_id: string | number }
-  params?: Global.SearchParams
 ) {
   return request<Global.PageResponse<NodePoolListItem>>(
-    `${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`,
+    `${WORKER_POOLS_API}?`,
     {
       method: 'GET',
       params
@@ -112,28 +111,28 @@ export async function queryWorkerPools(
   );
 }
 
-export async function createWorkerPool(
+export async function createWorkerPool(params: {
-  clusterId: number,
+  data: NodePoolFormData;
-  params: { data: NodePoolFormData }
+  clusterId: number;
-) {
+}) {
-  return request(`${CLUSTERS_API}/${clusterId}/${WORKER_POOLS_API}`, {
+  return request(`${CLUSTERS_API}/${params.clusterId}${WORKER_POOLS_API}`, {
     method: 'POST',
     data: params.data
   });
 }
 
-export async function updateWorkerPool(
+export async function updateWorkerPool(params: {
-  clusterId: number,
+  id: number;
-  params: { id: number; data: NodePoolFormData }
+  data: NodePoolFormData;
-) {
+}) {
-  return request(`/${WORKER_POOLS_API}/${params.id}`, {
+  return request(`${WORKER_POOLS_API}/${params.id}`, {
     method: 'PUT',
     data: params.data
   });
 }
 
-export async function deleteWorkerPool(clusterId: number, id: number) {
+export async function deleteWorkerPool(id: number) {
-  return request(`/${WORKER_POOLS_API}/${id}`, {
+  return request(`${WORKER_POOLS_API}/${id}`, {
     method: 'DELETE'
   });
 }

src/pages/cluster-management/clusters.tsx

@@ -8,21 +8,25 @@ import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Table, message } from 'antd';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   createCluster,
+  createWorkerPool,
   deleteCluster,
   queryClusterList,
   queryClusterToken,
+  queryCredentialList,
   updateCluster
 } from './apis';
 import AddCluster from './components/add-cluster';
+import AddPool from './components/add-pool';
 import ClusterDetailModal from './components/cluster-detail-modal';
 import RegisterCluster from './components/register-cluster';
 import { ProviderLabelMap, ProviderValueMap, addActions } from './config';
 import {
   ClusterFormData as FormData,
-  ClusterListItem as ListItem
+  ClusterListItem as ListItem,
+  NodePoolFormData
 } from './config/types';
 import useClusterColumns from './hooks/use-cluster-columns';
 
@@ -99,16 +103,22 @@ const Credentials: React.FC = () => {
     provider: ''
   });
 
+  const [credentialList, setCredentialList] = useState<
+    Global.BaseOption<number>[]
+  >([]);
+
   const [addPoolStatus, setAddPoolStatus] = useState<{
     open: boolean;
     action: PageActionType;
     title: string;
     provider: string;
+    clusterId: number;
   }>({
     open: false,
     action: PageAction.CREATE,
     title: '',
-    provider: ProviderValueMap.DigitalOcean
+    provider: ProviderValueMap.DigitalOcean,
+    clusterId: 0
   });
 
   const handleAddCluster = (value: string) => {
@@ -130,12 +140,13 @@ const Credentials: React.FC = () => {
     });
   };
 
-  const handleAddPool = (value: string) => {
+  const handleAddPool = (row: ListItem) => {
     setAddPoolStatus({
       open: true,
       action: PageAction.CREATE,
       title: `Add Node Pool`,
-      provider: value
+      provider: row.provider,
+      clusterId: row.id
     });
   };
 
@@ -233,7 +244,7 @@ const Credentials: React.FC = () => {
     } else if (val === 'add_worker') {
       handleAddWorker(row);
     } else if (val === 'addPool') {
-      handleAddPool(row.provider);
+      handleAddPool(row);
     } else if (val === 'details') {
       setOpenClusterDetail({
         open: true,
@@ -244,6 +255,34 @@ const Credentials: React.FC = () => {
     }
   });
 
+  const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
+    try {
+      await createWorkerPool({
+        data: formdata,
+        clusterId: addPoolStatus.clusterId
+      });
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+    } catch (error) {
+      // error
+    }
+    setAddPoolStatus({
+      ...addPoolStatus,
+      open: false
+    });
+  };
+
+  useEffect(() => {
+    const fetchCredentialList = async () => {
+      const data = await queryCredentialList({ page: 1, perPage: 100 });
+      const list = data?.items?.map((item) => ({
+        label: item.name,
+        value: item.id
+      }));
+      setCredentialList(list);
+    };
+    fetchCredentialList();
+  }, []);
+
   const columns = useClusterColumns(handleSelect);
 
   return (
@@ -302,6 +341,7 @@ const Credentials: React.FC = () => {
         action={openAddModal.action}
         title={openAddModal.title}
         currentData={openAddModal.currentData}
+        credentialList={credentialList}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       ></AddCluster>
@@ -323,7 +363,7 @@ const Credentials: React.FC = () => {
         }
       ></ClusterDetailModal>
       <RegisterCluster
-        title="Register Cluster"
+        title={intl.formatMessage({ id: 'clusters.button.register' })}
         open={registerClusterStatus.open}
         registrationInfo={registerClusterStatus.registrationInfo}
         onCancel={() => {
@@ -338,6 +378,22 @@ const Credentials: React.FC = () => {
           });
         }}
       ></RegisterCluster>
+      <AddPool
+        provider={addPoolStatus.provider}
+        open={addPoolStatus.open}
+        action={addPoolStatus.action}
+        title={addPoolStatus.title}
+        onCancel={() => {
+          setAddPoolStatus({
+            open: false,
+            action: PageAction.CREATE,
+            title: '',
+            provider: ProviderValueMap.DigitalOcean,
+            clusterId: 0
+          });
+        }}
+        onOk={handleSubmitWorkerPool}
+      ></AddPool>
       <DeleteModal ref={modalRef}></DeleteModal>
     </>
   );

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

@@ -6,7 +6,7 @@ import ContainerInstall from '@/pages/resources/components/container-install';
 import { CheckCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ProviderValueMap } from '../config';
 import {
   ClusterFormData as FormData,
@@ -20,7 +20,8 @@ type AddModalProps = {
   action: PageActionType;
   open: boolean;
   currentData?: ListItem; // Used when action is EDIT
-  provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
+  provider: string;
+  credentialList: Global.BaseOption<number>[];
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -30,6 +31,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   open,
   provider,
   currentData,
+  credentialList,
   onOk,
   onCancel
 }) => {
@@ -81,6 +83,12 @@ const AddCluster: React.FC<AddModalProps> = ({
     return title;
   }, [submissionStatus.success, title]);
 
+  useEffect(() => {
+    if (currentData) {
+      form.setFieldsValue(currentData);
+    }
+  }, [currentData]);
+
   const renderFooter = () => {
     if (submissionStatus.success) {
       return (
@@ -141,7 +149,10 @@ const AddCluster: React.FC<AddModalProps> = ({
             ></SealInput.Input>
           </Form.Item>
           {provider === ProviderValueMap.DigitalOcean && (
-            <CloudProvider provider={provider}></CloudProvider>
+            <CloudProvider
+              provider={provider}
+              credentialList={credentialList}
+            ></CloudProvider>
           )}
           <Form.Item<FormData> name="description" rules={[{ required: false }]}>
             <SealInput.TextArea

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

@@ -88,22 +88,6 @@ const AddModal: React.FC<AddModalProps> = ({
         </Form.Item>
         {provider === ProviderValueMap.DigitalOcean && (
           <>
-            {/* <Form.Item<FormData>
-              name="key"
-              rules={[
-                {
-                  required: action === PageAction.CREATE,
-                  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"
               rules={[

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

@@ -7,7 +7,7 @@ import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   NodePoolFormData as FormData,
   NodePoolListItem as ListItem
@@ -18,8 +18,8 @@ type AddModalProps = {
   action: PageActionType;
   open: boolean;
   provider: string; // 'kubernetes' | 'custom' | 'digitalocean';
+  currentData?: ListItem | null;
   onOk: (values: FormData) => void;
-  data?: ListItem;
   onCancel: () => void;
 };
 const AddCluster: React.FC<AddModalProps> = ({
@@ -28,7 +28,7 @@ const AddCluster: React.FC<AddModalProps> = ({
   open,
   provider,
   onOk,
-  data,
+  currentData,
   onCancel
 }) => {
   const [form] = Form.useForm();
@@ -38,11 +38,37 @@ const AddCluster: React.FC<AddModalProps> = ({
     form.submit();
   };
 
+  const handleOnOk = async (data: FormData) => {
+    const { volumes, ...rest } = data;
+
+    await onOk({
+      ...rest,
+      cloud_options: !_.isEmpty(volumes)
+        ? {
+            volumes: [
+              {
+                ...volumes
+              }
+            ]
+          }
+        : {}
+    });
+  };
+
   const handleCancel = () => {
     form.resetFields();
     onCancel();
   };
 
+  useEffect(() => {
+    if (currentData) {
+      form.setFieldsValue({
+        ...currentData,
+        volumes: currentData.cloud_options?.volumes?.[0] || {}
+      });
+    }
+  }, [currentData]);
+
   return (
     <ScrollerModal
       title={title}
@@ -57,7 +83,15 @@ const AddCluster: React.FC<AddModalProps> = ({
         <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
       }
     >
-      <Form form={form} onFinish={onOk} preserve={false}>
+      <Form
+        form={form}
+        onFinish={handleOnOk}
+        preserve={false}
+        initialValues={{
+          replicas: 1,
+          batch_size: 1
+        }}
+      >
         <Form.Item<FormData>
           name="instance_type"
           rules={[
@@ -109,6 +143,22 @@ const AddCluster: React.FC<AddModalProps> = ({
         >
           <SealInputNumber label="Batch Size" required></SealInputNumber>
         </Form.Item>
+        <Form.Item<FormData>
+          name="os_image"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                { id: 'common.form.rule.input' },
+                {
+                  name: 'OS Image'
+                }
+              )
+            }
+          ]}
+        >
+          <SealInput.Input label={'OS Image'} required></SealInput.Input>
+        </Form.Item>
         <Form.Item<FormData>
           name="labels"
           rules={[
@@ -140,7 +190,7 @@ const AddCluster: React.FC<AddModalProps> = ({
           ></LabelSelector>
         </Form.Item>
         <Form.Item<FormData>
-          name="cloud_options"
+          name="volumes"
           rules={[
             ({ getFieldValue }) => ({
               validator(rule, value) {
@@ -152,7 +202,7 @@ const AddCluster: React.FC<AddModalProps> = ({
                           id: 'common.validate.value'
                         },
                         {
-                          name: 'cloud_options'
+                          name: 'Volumes'
                         }
                       )
                     );
@@ -164,8 +214,8 @@ const AddCluster: React.FC<AddModalProps> = ({
           ]}
         >
           <LabelSelector
-            label="Cloud Options"
+            label="Volumes"
-            labels={form.getFieldValue('cloud_options') || {}}
+            labels={form.getFieldValue('volumes') || {}}
             btnText="Add Option"
           ></LabelSelector>
         </Form.Item>

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

@@ -1,15 +1,82 @@
 import SealSelect from '@/components/seal-form/seal-select';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
+import _ from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
+import { regionList } from '../config';
 import { ClusterFormData as FormData } from '../config/types';
 
+type OptionData = {
+  label: string;
+  datacenter: string;
+  value: string;
+};
+
+const OptionItem = styled.div`
+  display: flex;
+  align-items: center;
+  .label {
+    font-weight: 500;
+  }
+  .dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: var(--ant-color-text);
+    margin: 0 8px;
+  }
+  .datacenter,
+  .value {
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
 interface CloudProviderProps {
   provider: string; // 'kubernetes' | 'digitalocean';
+  credentialList: Global.BaseOption<number>[];
 }
 
-const CloudProvider: React.FC<CloudProviderProps> = () => {
+const optionRender = (
+  option: Global.BaseOption<
+    number,
+    {
+      data: OptionData;
+    }
+  >
+): React.ReactNode => {
+  const { value } = option;
+  const data = option.data!;
+
+  return (
+    <OptionItem className="flex-center">
+      <span className="label">{data.label}</span> <span className="dot"></span>
+      <span className="datacenter">{data.datacenter}</span>{' '}
+      <span className="dot"></span>{' '}
+      <span className="value">{_.toUpper(value)}</span>
+    </OptionItem>
+  );
+};
+
+const labelRender = (props: {
+  label: string;
+  value: string;
+}): React.ReactNode => {
+  const data = regionList.find((item) => item.value === props.value);
+  return (
+    <OptionItem className="flex-center">
+      <span className="label">{data?.label}</span> <span className="dot"></span>
+      <span className="datacenter">{data?.datacenter}</span>{' '}
+      <span className="dot"></span>
+      <span className="value">{_.toUpper(data?.value)}</span>
+    </OptionItem>
+  );
+};
+
+const CloudProvider: React.FC<CloudProviderProps> = (props) => {
+  const { credentialList } = props;
   const intl = useIntl();
+
   return (
     <>
       <Form.Item<FormData>
@@ -29,12 +96,7 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
         <SealSelect
           label="Credential"
           required
-          options={['credential1', 'credential2', 'credential3'].map(
+          options={credentialList}
-            (item, i) => ({
-              label: item,
-              value: i
-            })
-          )}
         ></SealSelect>
       </Form.Item>
       <Form.Item<FormData>
@@ -54,33 +116,9 @@ const CloudProvider: React.FC<CloudProviderProps> = () => {
         <SealSelect
           label="Region"
           required
-          options={['Hangzhou', 'Guangzhou', 'Shenzhen'].map((item) => ({
+          options={regionList}
-            label: item,
+          labelRender={labelRender}
-            value: item
+          optionRender={optionRender}
-          }))}
-        ></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>
     </>

src/pages/cluster-management/components/cluster-detail-content.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components';
 import { queryClusterDetail } from '../apis';
 import { ProviderValueMap } from '../config';
 import { ClusterListItem, NodePoolListItem } from '../config/types';
-import AddPool from './add-pool';
 import TrendChart from './trend-chart';
 import WorkerPools from './worker-pools';
 
@@ -89,7 +88,9 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
     open: false,
     action: PageAction.CREATE,
     title: '',
-    provider: ProviderValueMap.DigitalOcean
+    provider: ProviderValueMap.DigitalOcean,
+    currentData: null as NodePoolListItem | null,
+    clusterId: 0
   });
   const [detailContent, setDetailContent] = useState<{
     current: {
@@ -109,18 +110,6 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
     history: {}
   });
 
-  // pool action handler
-  const handleOnAction = (action: string, record: NodePoolListItem) => {
-    if (action === 'edit') {
-      setAddPoolStatus({
-        open: true,
-        action: PageAction.CREATE,
-        title: 'Edit Worker Pool',
-        provider: data!.provider
-      });
-    }
-  };
-
   const getClusterDetail = async () => {
     if (!data) {
       return;
@@ -238,37 +227,9 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({ data }) => {
       </Row>
       {data?.provider === ProviderValueMap.DigitalOcean && (
         <>
-          <SubTitle>Worker Pools</SubTitle>
+          <WorkerPools clusterData={data} height={'auto'} />
-          <WorkerPools
-            provider={data?.provider}
-            workerPools={data?.worker_pools}
-            height={show ? 'auto' : 0}
-            onAction={handleOnAction}
-          />
         </>
       )}
-      <AddPool
-        provider={addPoolStatus.provider}
-        open={addPoolStatus.open}
-        action={addPoolStatus.action}
-        title={addPoolStatus.title}
-        onCancel={() => {
-          setAddPoolStatus({
-            open: false,
-            action: PageAction.CREATE,
-            title: '',
-            provider: ProviderValueMap.DigitalOcean
-          });
-        }}
-        onOk={() => {
-          setAddPoolStatus({
-            open: false,
-            action: addPoolStatus.action,
-            title: '',
-            provider: ProviderValueMap.DigitalOcean
-          });
-        }}
-      ></AddPool>
     </div>
   );
 };

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

@@ -1,11 +1,35 @@
 import DeleteModal from '@/components/delete-modal';
 import DropdownButtons from '@/components/drop-down-buttons';
+import LabelsCell from '@/components/label-cell';
+import { PageAction } from '@/config';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { Table } from 'antd';
+import { useIntl } from '@umijs/max';
-import { useMemo } from 'react';
+import { message, Table } from 'antd';
-import { WORKER_POOLS_API, deleteWorkerPool, queryWorkerPools } from '../apis';
+import dayjs from 'dayjs';
-import { NodePoolListItem as ListItem } from '../config/types';
+import { useState } from 'react';
+import styled from 'styled-components';
+import {
+  createWorkerPool,
+  deleteWorkerPool,
+  queryWorkerPools,
+  updateWorkerPool,
+  WORKER_POOLS_API
+} from '../apis';
+import { ProviderValueMap } from '../config';
+import {
+  ClusterListItem,
+  NodePoolListItem as ListItem,
+  NodePoolFormData
+} from '../config/types';
+import AddPool from './add-pool';
+
+const SubTitle = styled.div`
+  font-size: var(--font-size-middle);
+  font-weight: 700;
+  color: var(--ant-color-text);
+  margin-block: 24px 16px;
+`;
 
 const actionItems = [
   {
@@ -25,19 +49,15 @@ const actionItems = [
 ];
 
 interface WorkerPoolsProps {
-  workerPools: ListItem[];
   loading?: boolean;
-  provider: string;
   height?: string | number;
-  onAction?: (action: string, record: ListItem) => void;
+  clusterData: ClusterListItem | null;
 }
 
 const WorkerPools: React.FC<WorkerPoolsProps> = ({
-  workerPools,
   loading = false,
-  provider,
+  clusterData,
-  height = 'auto',
+  height = 'auto'
-  onAction
 }) => {
   const {
     dataSource,
@@ -57,18 +77,69 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     deleteAPI: deleteWorkerPool,
     API: WORKER_POOLS_API,
     watch: false,
-    contentForDelete: 'resources.modelfiles.modelfile'
+    contentForDelete: 'resources.modelfiles.modelfile',
+    defaultQueryParams: {
+      cluster_id: clusterData!.id
+    }
   });
+  const intl = useIntl();
+  const [addPoolStatus, setAddPoolStatus] = useState({
+    open: false,
+    action: PageAction.CREATE,
+    title: '',
+    provider: ProviderValueMap.DigitalOcean,
+    currentData: null as ListItem | null,
+    clusterId: 0
+  });
+
+  // pool action handler
+  const handleEdit = (action: string, record: ListItem) => {
+    if (action === 'edit') {
+      setAddPoolStatus({
+        open: true,
+        action: PageAction.EDIT,
+        title: 'Edit Worker Pool',
+        provider: clusterData!.provider,
+        currentData: record,
+        clusterId: clusterData!.id
+      });
+    }
+  };
 
   const onSelect = (key: string, record: ListItem) => {
     if (key === 'delete') {
       handleDelete({ ...record, name: record.instance_type });
     }
     if (key === 'edit') {
-      onAction?.(key, record);
+      handleEdit(key, record);
     }
   };
 
+  const handleSubmitWorkerPool = async (formdata: NodePoolFormData) => {
+    try {
+      if (addPoolStatus.action === PageAction.CREATE) {
+        await createWorkerPool({
+          data: formdata,
+          clusterId: clusterData!.id
+        });
+      }
+      if (addPoolStatus.action === PageAction.EDIT) {
+        await updateWorkerPool({
+          data: formdata,
+          id: addPoolStatus.currentData!.id
+        });
+      }
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
+      handleSearch();
+    } catch (error) {
+      // error
+    }
+    setAddPoolStatus({
+      ...addPoolStatus,
+      open: false
+    });
+  };
+
   const columns = [
     {
       title: 'Instance Type',
@@ -82,33 +153,22 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     },
     {
       title: 'Batch Size',
-      dataIndex: 'batchSize',
+      dataIndex: 'batch_size',
-      key: 'batchSize'
+      key: 'batch_size'
     },
     {
-      title: 'GPU',
+      title: 'Labels',
-      dataIndex: 'gpu',
+      dataIndex: 'labels',
-      key: 'gpu'
+      key: 'labels',
-    },
+      render: (text: string, record: ListItem) => (
-    {
+        <LabelsCell labels={record.labels}></LabelsCell>
-      title: 'Memory',
+      )
-      dataIndex: 'memory',
-      key: 'memory'
-    },
-    {
-      title: 'CPU',
-      dataIndex: 'cpu',
-      key: 'cpu'
-    },
-    {
-      title: 'Storage',
-      dataIndex: 'storage',
-      key: 'storage'
     },
     {
       title: 'Create Time',
-      dataIndex: 'createTime',
+      dataIndex: 'create_at',
-      key: 'createTime'
+      key: 'created_at',
+      render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
     },
     {
       title: 'Operations',
@@ -122,41 +182,40 @@ const WorkerPools: React.FC<WorkerPoolsProps> = ({
     }
   ];
 
-  // mock dataSource
-  const mockData = Array.from({ length: 3 }, (_, index) => ({
-    id: index + 1,
-    key: index,
-    instance_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()
-  }));
-
-  const dataList = useMemo(() => {
-    if (workerPools && workerPools.length > 0) {
-      return workerPools;
-    }
-    if (dataSource.dataList && dataSource.dataList.length > 0) {
-      return dataSource.dataList;
-    }
-    return mockData;
-  }, [workerPools, dataSource.dataList]);
-
   return (
-    <div style={{ height: height, overflow: 'hidden' }}>
+    <>
-      <Table
+      <SubTitle>
-        dataSource={dataList}
+        <span>Worker Pools</span>
-        columns={columns}
+      </SubTitle>
-        loading={loading}
+      <div style={{ height: height, overflow: 'hidden' }}>
-        pagination={false}
+        <Table
-        rowKey="id"
+          dataSource={dataSource.dataList}
-      />
+          columns={columns}
-      <DeleteModal ref={modalRef}></DeleteModal>
+          loading={loading}
-    </div>
+          pagination={false}
+          rowKey="id"
+        />
+        <AddPool
+          provider={addPoolStatus.provider}
+          open={addPoolStatus.open}
+          action={addPoolStatus.action}
+          title={addPoolStatus.title}
+          currentData={addPoolStatus.currentData}
+          onCancel={() => {
+            setAddPoolStatus({
+              open: false,
+              action: PageAction.CREATE,
+              title: '',
+              provider: ProviderValueMap.DigitalOcean,
+              currentData: null,
+              clusterId: 0
+            });
+          }}
+          onOk={handleSubmitWorkerPool}
+        ></AddPool>
+        <DeleteModal ref={modalRef}></DeleteModal>
+      </div>
+    </>
   );
 };
 

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

@@ -122,3 +122,25 @@ export const clusterActionList = [
     }
   }
 ];
+
+export const regionList: {
+  label: string;
+  datacenter: string;
+  value: string;
+}[] = [
+  { label: 'New York', datacenter: 'Datacenter 1', value: 'nyc1' },
+  { label: 'New York', datacenter: 'Datacenter 2', value: 'nyc2' },
+  { label: 'New York', datacenter: 'Datacenter 3', value: 'nyc3' },
+  { label: 'Toronto', datacenter: 'Datacenter 1', value: 'tor1' },
+  { label: 'San Francisco', datacenter: 'Datacenter 1', value: 'sfo1' },
+  { label: 'San Francisco', datacenter: 'Datacenter 2', value: 'sfo2' },
+  { label: 'San Francisco', datacenter: 'Datacenter 3', value: 'sfo3' },
+  { label: 'Atlanta', datacenter: 'Datacenter 1', value: 'atl1' },
+  { label: 'Singapore', datacenter: 'Datacenter 1', value: 'sgp1' },
+  { label: 'Bangalore', datacenter: 'Datacenter 1', value: 'blr1' },
+  { label: 'London', datacenter: 'Datacenter 1', value: 'lon1' },
+  { label: 'Amsterdam', datacenter: 'Datacenter 2', value: 'ams2' },
+  { label: 'Amsterdam', datacenter: 'Datacenter 3', value: 'ams3' },
+  { label: 'Frankfurt', datacenter: 'Datacenter 1', value: 'fra1' },
+  { label: 'Sydney', datacenter: 'Datacenter 1', value: 'syd1' }
+];

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

@@ -42,10 +42,12 @@ export interface NodePoolListItem {
 
 export interface NodePoolFormData {
   instance_type: string;
+  os_image: string;
   replicas: number;
   batch_size: number;
   labels: Record<string, string>;
   cloud_options: Record<string, any>;
+  volumes?: Record<string, any>;
 }
 
 export interface ClusterListItem {

src/pages/resources/config/index.ts

@@ -3,19 +3,25 @@ import { StatusMaps } from '@/config';
 export const WorkerStatusMap = {
   ready: 'ready',
   not_ready: 'not_ready',
-  unreachable: 'unreachable'
+  unreachable: 'unreachable',
+  provisioning: 'provisioning',
+  deleting: 'deleting'
 };
 
 export const WorkerStatusMapValue = {
   [WorkerStatusMap.ready]: 'Ready',
   [WorkerStatusMap.not_ready]: 'Not Ready',
-  [WorkerStatusMap.unreachable]: 'Unreachable'
+  [WorkerStatusMap.unreachable]: 'Unreachable',
+  [WorkerStatusMap.provisioning]: 'Provisioning',
+  [WorkerStatusMap.deleting]: 'Deleting'
 };
 
 export const status: any = {
   [WorkerStatusMap.ready]: StatusMaps.success,
   [WorkerStatusMap.not_ready]: StatusMaps.error,
-  [WorkerStatusMap.unreachable]: StatusMaps.error
+  [WorkerStatusMap.unreachable]: StatusMaps.error,
+  [WorkerStatusMap.provisioning]: StatusMaps.transitioning,
+  [WorkerStatusMap.deleting]: StatusMaps.warning
 };
 
 export const addWorkerGuide: Record<string, any> = {

src/pages/resources/hooks/use-worker-columns.tsx

@@ -1,6 +1,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import IconFont from '@/components/icon-font';
+import LabelsCell from '@/components/label-cell';
 import ProgressBar from '@/components/progress-bar';
 import InfoColumn from '@/components/simple-table/info-column';
 import StatusTag from '@/components/status-tag';
@@ -17,16 +18,9 @@ import { Tooltip } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import _ from 'lodash';
 import { useMemo } from 'react';
-import styled from 'styled-components';
 import { WorkerStatusMap, WorkerStatusMapValue, status } from '../config';
 import { Filesystem, GPUDeviceItem, ListItem } from '../config/types';
 
-const LabelsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-`;
-
 const ActionList = [
   { label: 'common.button.edit', key: 'edit', icon: <EditOutlined /> },
   {
@@ -90,22 +84,6 @@ const calcStorage = (files: Filesystem[]) => {
   return mountRoot ? formateUtilization(mountRoot.used, mountRoot.total) : 0;
 };
 
-const LabelsCell = ({ labels }: { labels: Record<string, any> }) => (
-  <LabelsWrapper>
-    {_.map(labels, (value: string, key: string) => (
-      <AutoTooltip
-        key={key}
-        className="m-r-0"
-        maxWidth={155}
-        style={{ paddingInline: 8, borderRadius: 12 }}
-      >
-        <span>{key}</span>
-        <span>:{value}</span>
-      </AutoTooltip>
-    ))}
-  </LabelsWrapper>
-);
-
 const GPUCell = ({ devices }: { devices: GPUDeviceItem[] }) => (
   <span className="flex-column flex-gap-2">
     {_.map(