fix: add do cluster

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"
-            labels={form.getFieldValue('cloud_options') || {}}
+            label="Volumes"
+            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(
-            (item, i) => ({
-              label: item,
-              value: i
-            })
-          )}
+          options={credentialList}
         ></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) => ({
-            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
-          }))}
+          options={regionList}
+          labelRender={labelRender}
+          optionRender={optionRender}
         ></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
-            provider={data?.provider}
-            workerPools={data?.worker_pools}
-            height={show ? 'auto' : 0}
-            onAction={handleOnAction}
-          />
+          <WorkerPools clusterData={data} height={'auto'} />
         </>
       )}
-      <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 { useMemo } from 'react';
-import { WORKER_POOLS_API, deleteWorkerPool, queryWorkerPools } from '../apis';
-import { NodePoolListItem as ListItem } from '../config/types';
+import { useIntl } from '@umijs/max';
+import { message, Table } from 'antd';
+import dayjs from 'dayjs';
+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,
-  height = 'auto',
-  onAction
+  clusterData,
+  height = 'auto'
 }) => {
   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',
-      key: 'batchSize'
+      dataIndex: 'batch_size',
+      key: 'batch_size'
     },
     {
-      title: 'GPU',
-      dataIndex: 'gpu',
-      key: 'gpu'
-    },
-    {
-      title: 'Memory',
-      dataIndex: 'memory',
-      key: 'memory'
-    },
-    {
-      title: 'CPU',
-      dataIndex: 'cpu',
-      key: 'cpu'
-    },
-    {
-      title: 'Storage',
-      dataIndex: 'storage',
-      key: 'storage'
+      title: 'Labels',
+      dataIndex: 'labels',
+      key: 'labels',
+      render: (text: string, record: ListItem) => (
+        <LabelsCell labels={record.labels}></LabelsCell>
+      )
     },
     {
       title: 'Create Time',
-      dataIndex: 'createTime',
-      key: 'createTime'
+      dataIndex: 'create_at',
+      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
-        dataSource={dataList}
-        columns={columns}
-        loading={loading}
-        pagination={false}
-        rowKey="id"
-      />
-      <DeleteModal ref={modalRef}></DeleteModal>
-    </div>
+    <>
+      <SubTitle>
+        <span>Worker Pools</span>
+      </SubTitle>
+      <div style={{ height: height, overflow: 'hidden' }}>
+        <Table
+          dataSource={dataSource.dataList}
+          columns={columns}
+          loading={loading}
+          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>
+    </>
   );
 };