fix: add pool not work

src/components/seal-form/wrapper/select.ts

@@ -101,6 +101,11 @@ const SelectWrapper = styled.div`
         // top: 20px !important;
         // inset-inline-start: ${INPUT_INNER_PADDING}px;
       }
+      &.ant-select-auto-complete {
+        .ant-select-selection-search {
+          inset-inline-start: ${INPUT_INNER_PADDING}px;
+        }
+      }
       &.ant-select-multiple.ant-cascader .ant-select-selection-search {
         top: 0 !important;
       }

src/locales/en-US/clusters.ts

@@ -32,5 +32,10 @@ export default {
   'clusters.create.configBasic': 'Basic Configuration',
   'clusters.create.execCommand': 'Execute Command',
   'clusters.create.supportedGpu': 'Supported GPUs',
-  'clusters.create.skipfornow': 'Skip for now'
+  'clusters.create.skipfornow': 'Skip for now',
+  'clusters.create.noImages': 'No images available',
+  'clusters.create.noInstanceTypes': 'No instance types available',
+  'clusters.create.noRegions': 'No regions available',
+  'clusters.workerpool.batchSize.desc':
+    'Number of workers created simultaneously in the Worker pool'
 };

src/locales/ja-JP/clusters.ts

@@ -32,7 +32,12 @@ export default {
   'clusters.create.configBasic': 'Basic Configuration',
   'clusters.create.execCommand': 'Execute Command',
   'clusters.create.supportedGpu': 'Supported GPUs',
-  'clusters.create.skipfornow': 'Skip for now'
+  'clusters.create.skipfornow': 'Skip for now',
+  'clusters.create.noImages': 'No images available',
+  'clusters.create.noInstanceTypes': 'No instance types available',
+  'clusters.create.noRegions': 'No regions available',
+  'clusters.workerpool.batchSize.desc':
+    'Number of workers created simultaneously in the Worker pool'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -69,6 +74,10 @@ export default {
 // 31. 'clusters.create.configBasic': 'Basic Configuration',
 // 32. 'clusters.create.execCommand': 'Execute Command',
 // 33. 'clusters.create.supportedGpu': 'Supported GPUs',
-// 34. 'clusters.create.skipfornow': 'Skip for now'
+// 34. 'clusters.create.skipfornow': 'Skip for now',
+// 35. 'clusters.create.noImages': 'No images available',
+// 36. 'clusters.create.noInstanceTypes': 'No instance types available',
+// 37. 'clusters.create.noRegions': 'No regions available',
+// 38. 'clusters.workerpool.batchSize.desc': 'Number of workers created simultaneously in the Worker pool'
 
 // ========== End of To-Do List ==========

src/locales/ru-RU/clusters.ts

@@ -32,7 +32,12 @@ export default {
   'clusters.create.configBasic': 'Basic Configuration',
   'clusters.create.execCommand': 'Execute Command',
   'clusters.create.supportedGpu': 'Supported GPUs',
-  'clusters.create.skipfornow': 'Skip for now'
+  'clusters.create.skipfornow': 'Skip for now',
+  'clusters.create.noImages': 'No images available',
+  'clusters.create.noInstanceTypes': 'No instance types available',
+  'clusters.create.noRegions': 'No regions available',
+  'clusters.workerpool.batchSize.desc':
+    'Number of workers created simultaneously in the Worker pool'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -69,6 +74,10 @@ export default {
 // 31. 'clusters.create.configBasic': 'Basic Configuration',
 // 32. 'clusters.create.execCommand': 'Execute Command',
 // 33. 'clusters.create.supportedGpu': 'Supported GPUs',
-// 34. 'clusters.create.skipfornow': 'Skip for now'
+// 34. 'clusters.create.skipfornow': 'Skip for now',
+// 35. 'clusters.create.noImages': 'No images available',
+// 36. 'clusters.create.noInstanceTypes': 'No instance types available',
+// 37. 'clusters.create.noRegions': 'No regions available',
+// 38. 'clusters.workerpool.batchSize.desc': 'Number of workers created simultaneously in the Worker pool'
 
 // ========== End of To-Do List ==========

src/locales/zh-CN/clusters.ts

@@ -32,5 +32,9 @@ export default {
   'clusters.create.configBasic': '基本配置',
   'clusters.create.execCommand': '执行命令',
   'clusters.create.supportedGpu': '支持的 GPU',
-  'clusters.create.skipfornow': '暂时跳过'
+  'clusters.create.skipfornow': '暂时跳过',
+  'clusters.create.noImages': '没有可用的镜像',
+  'clusters.create.noInstanceTypes': '没有可用的实例类型',
+  'clusters.create.noRegions': '没有可用的区域',
+  'clusters.workerpool.batchSize.desc': 'Worker池中同时创建的worker数量'
 };

src/pages/cluster-management/cluster-create.tsx

@@ -244,7 +244,11 @@ const ClusterCreate = () => {
     return moduleKeys.map((key) => {
       const ModuleComponent = moduleRegistry[key];
       return ModuleComponent ? (
-        <ModuleComponent key={key} registrationInfo={registrationInfo} />
+        <ModuleComponent
+          key={key}
+          registrationInfo={registrationInfo}
+          provider={extraData.provider}
+        />
       ) : null;
     });
   };

src/pages/cluster-management/clusters.tsx

@@ -17,7 +17,6 @@ import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import {
   CLUSTERS_API,
-  createCluster,
   createWorkerPool,
   deleteCluster,
   queryClusterList,
@@ -31,7 +30,7 @@ import AddCluster from './components/add-cluster';
 import AddPool from './components/add-pool';
 import PoolRows from './components/pool-rows';
 import RegisterCluster from './components/register-cluster';
-import { ProviderLabelMap, ProviderType, ProviderValueMap } from './config';
+import { ProviderType, ProviderValueMap } from './config';
 import {
   ClusterListItem,
   ClusterFormData as FormData,
@@ -50,7 +49,6 @@ const Credentials: React.FC = () => {
     handleDeleteBatch,
     fetchData,
     handlePageChange,
-    handleTableChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
@@ -129,40 +127,24 @@ const Credentials: React.FC = () => {
     title: string;
     provider: ProviderType;
     clusterId: number;
+    clusterData: ClusterListItem | null;
   }>({
     open: false,
     action: PageAction.CREATE,
     title: '',
     provider: ProviderValueMap.DigitalOcean as ProviderType,
-    clusterId: 0
+    clusterId: 0,
+    clusterData: null
   });
 
-  const handleAddCluster = (value: string) => {
-    const label = ProviderLabelMap[value];
-    const clusterLabel =
-      value === ProviderValueMap.Custom
-        ? intl.formatMessage({ id: 'clusters.provider.custom' })
-        : label;
-
-    setOpenAddModal({
-      open: true,
-      action: PageAction.CREATE,
-      currentData: undefined,
-      title: intl.formatMessage(
-        { id: 'clusters.add.cluster' },
-        { cluster: clusterLabel }
-      ),
-      provider: value as ProviderType
-    });
-  };
-
   const handleAddPool = (row: ListItem) => {
     setAddPoolStatus({
       open: true,
       action: PageAction.CREATE,
       title: intl.formatMessage({ id: 'clusters.button.addNodePool' }),
       provider: row.provider as ProviderType,
-      clusterId: row.id
+      clusterId: row.id,
+      clusterData: row
     });
   };
 
@@ -180,27 +162,11 @@ const Credentials: React.FC = () => {
           data: params,
           id: openAddModal.currentData!.id
         });
-      } else {
-        await createCluster({ data: params });
       }
       fetchData();
-      setOpenAddModal({
+
-        open: false,
-        action: PageAction.CREATE,
-        currentData: undefined,
-        title: '',
-        provider: null
-      });
       message.success(intl.formatMessage({ id: 'common.message.success' }));
-    } catch (error) {
+    } catch (error) {}
-      setOpenAddModal({
-        open: false,
-        action: PageAction.CREATE,
-        currentData: undefined,
-        title: '',
-        provider: null
-      });
-    }
   };
 
   const handleModalCancel = () => {
@@ -377,10 +343,7 @@ const Credentials: React.FC = () => {
         >
           <SealTable
             rowKey="id"
-            tableLayout="fixed"
-            style={{ width: '100%' }}
             loadChildren={getWorkerPoolList}
-            onChange={handleTableChange}
             expandedRowKeys={expandedRowKeys}
             onExpand={handleExpandChange}
             onExpandAll={handleToggleExpandAll}
@@ -444,13 +407,15 @@ const Credentials: React.FC = () => {
         open={addPoolStatus.open}
         action={addPoolStatus.action}
         title={addPoolStatus.title}
+        clusterData={addPoolStatus.clusterData}
         onCancel={() => {
           setAddPoolStatus({
             open: false,
             action: PageAction.CREATE,
             title: '',
             provider: ProviderValueMap.DigitalOcean as ProviderType,
-            clusterId: 0
+            clusterId: 0,
+            clusterData: null
           });
         }}
         onOk={handleSubmitWorkerPool}

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

@@ -7,7 +7,7 @@ import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
-import { ProviderValueMap } from '../config';
+import { ProviderType, ProviderValueMap } from '../config';
 import {
   CredentialFormData as FormData,
   CredentialListItem as ListItem
@@ -20,7 +20,7 @@ type AddModalProps = {
   onOk: (values: FormData) => void;
   currentData?: ListItem;
   onCancel: () => void;
-  provider: string; // 'kubernetes'  | 'digitalocean';
+  provider: ProviderType;
 };
 const AddModal: React.FC<AddModalProps> = ({
   title,

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

@@ -1,12 +1,14 @@
 import ModalFooter from '@/components/modal-footer';
 import ScrollerModal from '@/components/scroller-modal';
 import { PageActionType } from '@/config/types';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { ProviderType } from '../config';
 import {
+  ClusterListItem,
   NodePoolFormData as FormData,
   NodePoolListItem as ListItem
 } from '../config/types';
+import { useProviderRegions } from '../hooks/use-provider-regions';
 import PoolForm from './pool-form';
 
 type AddModalProps = {
@@ -15,6 +17,7 @@ type AddModalProps = {
   open: boolean;
   provider: ProviderType; // 'kubernetes' | 'custom' | 'digitalocean';
   currentData?: ListItem | null;
+  clusterData?: ClusterListItem | null;
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -25,8 +28,11 @@ const AddPool: React.FC<AddModalProps> = ({
   provider,
   onOk,
   currentData,
+  clusterData,
   onCancel
 }) => {
+  const { getInstanceTypes, getOSImages, updateInstanceTypes, updateOSImages } =
+    useProviderRegions();
   const formRef = useRef<any>(null);
 
   const handleSubmit = async () => {
@@ -42,6 +48,18 @@ const AddPool: React.FC<AddModalProps> = ({
     onCancel();
   };
 
+  useEffect(() => {
+    const init = async (clusterData: ClusterListItem) => {
+      const allTyps = await getInstanceTypes(clusterData.credential_id);
+      const allImages = await getOSImages(clusterData.credential_id);
+      updateInstanceTypes(clusterData.region, allTyps);
+      updateOSImages(clusterData.region, allImages);
+    };
+    if (open && clusterData && clusterData.credential_id) {
+      init(clusterData);
+    }
+  }, [clusterData, open]);
+
   return (
     <ScrollerModal
       title={title}

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

@@ -0,0 +1,35 @@
+import HighlightCode from '@/components/highlight-code';
+import { addWorkerGuide } from '@/pages/resources/config';
+import React from 'react';
+
+type ViewModalProps = {
+  registrationInfo: {
+    token: string;
+    image: string;
+    server_url: string;
+  };
+};
+
+const AddWorkerCommand: React.FC<ViewModalProps> = ({ registrationInfo }) => {
+  const code = React.useMemo(() => {
+    const commandCode = addWorkerGuide['cuda'];
+    return commandCode?.registerWorker({
+      server: registrationInfo.server_url || origin,
+      tag: '',
+      image: registrationInfo.image,
+      token: registrationInfo.token || '${token}',
+      workerip: '${workerip}'
+    });
+  }, [registrationInfo]);
+
+  return (
+    <HighlightCode
+      theme="dark"
+      code={code.replace(/\\/g, '')}
+      copyValue={code}
+      lang="bash"
+    ></HighlightCode>
+  );
+};
+
+export default AddWorkerCommand;

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

@@ -1,6 +1,8 @@
 import { useIntl } from '@umijs/max';
 import React from 'react';
 import styled from 'styled-components';
+import { ProviderType, ProviderValueMap } from '../config';
+import AddWorkerCommand from './add-worker-command';
 import RegisterClusterInner from './register-cluster-inner';
 import SupportedHardware from './support-hardware';
 
@@ -11,6 +13,7 @@ const Title = styled.div`
 `;
 
 type AddModalProps = {
+  provider: ProviderType;
   registrationInfo: {
     token: string;
     image: string;
@@ -18,12 +21,19 @@ type AddModalProps = {
     cluster_id: number;
   };
 };
-const AddWorkerStep: React.FC<AddModalProps> = ({ registrationInfo }) => {
+const AddWorkerStep: React.FC<AddModalProps> = ({
+  provider,
+  registrationInfo
+}) => {
   const intl = useIntl();
   return (
     <div>
       <Title>{intl.formatMessage({ id: 'clusters.create.execCommand' })}</Title>
-      <RegisterClusterInner registrationInfo={registrationInfo} />
+      {provider === ProviderValueMap.Kubernetes ? (
+        <RegisterClusterInner registrationInfo={registrationInfo} />
+      ) : (
+        <AddWorkerCommand registrationInfo={registrationInfo} />
+      )}
       <Title style={{ marginTop: 32 }}>
         {intl.formatMessage({ id: 'clusters.create.supportedGpu' })}
       </Title>

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

@@ -55,6 +55,7 @@ interface CloudProviderProps {
 }
 
 const NotFoundContent: React.FC<{ loading: boolean }> = ({ loading }) => {
+  const intl = useIntl();
   if (loading) {
     return (
       <NoContent>
@@ -62,7 +63,11 @@ const NotFoundContent: React.FC<{ loading: boolean }> = ({ loading }) => {
       </NoContent>
     );
   }
-  return <NoContent>No regions available</NoContent>;
+  return (
+    <NoContent>
+      {intl.formatMessage({ id: 'clusters.create.noRegions' })}
+    </NoContent>
+  );
 };
 
 const optionRender = (
@@ -159,6 +164,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
         ]}
       >
         <SealSelect
+          disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'clusters.credential.title' })}
           required
           options={credentialList}
@@ -176,6 +182,7 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
       >
         <SealSelect
           showSearch
+          disabled={action === PageAction.EDIT}
           label={intl.formatMessage({ id: 'clusters.workerpool.region' })}
           required
           options={regions}

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

@@ -7,6 +7,7 @@ import CollapsibleContainer, {
 } from '@/components/collapse-container';
 import IconFont from '@/components/icon-font';
 import LabelSelector from '@/components/label-selector';
+import AutoComplete from '@/components/seal-form/auto-complete';
 import SealInputNumber from '@/components/seal-form/input-number';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
@@ -76,7 +77,21 @@ const DescriptionWrapper = styled.div`
 `;
 
 const NotFoundContent = () => {
-  return <NoContent>No instance type available</NoContent>;
+  const intl = useIntl();
+  return (
+    <NoContent>
+      {intl.formatMessage({ id: 'clusters.create.noInstanceTypes' })}
+    </NoContent>
+  );
+};
+
+const NotFoundImageContent = () => {
+  const intl = useIntl();
+  return (
+    <NoContent>
+      {intl.formatMessage({ id: 'clusters.create.noImages' })}
+    </NoContent>
+  );
 };
 
 export const RenderInstanceOption = (option: any) => {
@@ -171,7 +186,8 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
     }
   }, [currentData]);
 
-  const labelRender = (data: { label: string; value: string }) => {
+  const imageLabelRender = (data: { label: string; value: string }) => {
+    console.log('imageLabelRender========', data);
     if (action === PageAction.EDIT) {
       return currentData?.image_name || currentData?.os_image;
     }
@@ -187,7 +203,8 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
 
   const handleOsImageChange = (value: string) => {
     form.setFieldsValue({
-      image_name: osImageList.find((item) => item.value === value)?.label
+      image_name:
+        osImageList.find((item) => item.value === value)?.label || value
     });
   };
 
@@ -215,6 +232,14 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
     );
   };
 
+  const filterImageOption = (inputValue: string, option: any) => {
+    return (
+      option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+      option.value.toLowerCase().includes(inputValue.toLowerCase()) ||
+      option.description.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  };
+
   useImperativeHandle(ref, () => ({
     resetFields: () => {
       form.resetFields();
@@ -337,6 +362,9 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
             ]}
           >
             <SealInputNumber
+              description={intl.formatMessage({
+                id: 'clusters.workerpool.batchSize.desc'
+              })}
               label={intl.formatMessage({
                 id: 'clusters.workerpool.batchSize'
               })}
@@ -353,18 +381,20 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
               }
             ]}
           >
-            <SealSelect
+            <AutoComplete
               showSearch
+              notFoundContent={<NotFoundImageContent />}
               onChange={handleOsImageChange}
+              filterOption={filterImageOption}
               optionRender={RenderInstanceOption}
-              labelRender={labelRender}
+              labelRender={imageLabelRender}
               options={osImageList}
               disabled={action === PageAction.EDIT}
               label={intl.formatMessage({
                 id: 'clusters.workerpool.osImage'
               })}
               required
-            ></SealSelect>
+            ></AutoComplete>
           </Form.Item>
 
           <Form.Item<FormData>

src/pages/cluster-management/credentials.tsx

@@ -16,7 +16,7 @@ import {
   updateCredential
 } from './apis';
 import AddModal from './components/add-credential';
-import { ProviderLabelMap, ProviderValueMap } from './config';
+import { ProviderLabelMap, ProviderType, ProviderValueMap } from './config';
 import {
   CredentialFormData as FormData,
   CredentialListItem as ListItem
@@ -55,13 +55,13 @@ const Credentials: React.FC = () => {
 
   const intl = useIntl();
   const [openModalStatus, setOpenModalStatus] = useState<{
-    provider: string;
+    provider: ProviderType;
     open: boolean;
     action: PageActionType;
     title: string;
     currentData: ListItem | undefined;
   }>({
-    provider: '',
+    provider: null,
     open: false,
     action: PageAction.CREATE,
     title: '',
@@ -70,7 +70,7 @@ const Credentials: React.FC = () => {
 
   const handleAddCredential = (item: { key: string; label: string }) => {
     setOpenModalStatus({
-      provider: item.key,
+      provider: item.key as ProviderType,
       open: true,
       action: PageAction.CREATE,
       title: intl.formatMessage(

src/pages/cluster-management/hooks/use-cluster-columns.tsx

@@ -1,9 +1,9 @@
 // columns.ts
 import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
+import { SealColumnProps } from '@/components/seal-table/types';
 import StatusTag from '@/components/status-tag';
 import { Link, useIntl } from '@umijs/max';
-import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import {
@@ -25,7 +25,7 @@ const setActionsItems = (row: ClusterListItem) => {
 
 const useClusterColumns = (
   handleSelect: (val: string, record: ClusterListItem) => void
-): ColumnsType<ClusterListItem & { dataIndex: string; span: number }> => {
+): SealColumnProps[] => {
   const intl = useIntl();
 
   return useMemo(() => {

src/pages/cluster-management/hooks/use-provider-regions.ts

@@ -130,6 +130,7 @@ export const useProviderRegions = () => {
           };
         });
       setAllInstanceTypes(list);
+      return list;
     } catch (error) {
       setAllInstanceTypes([]);
     }
@@ -155,18 +156,21 @@ export const useProviderRegions = () => {
           };
         });
       setAllOSImageList(list);
+      return list;
     } catch (error) {}
   };
 
-  const updateInstanceTypes = (region: string) => {
+  const updateInstanceTypes = (region: string, allTypes?: any[]) => {
-    const sizes = allInstanceTypes.filter((item) =>
+    const sizes = (allTypes || allInstanceTypes).filter((item) =>
       item.regions.includes(region)
     );
     setInstanceTypes(sizes);
   };
 
-  const updateOSImages = (region: string) => {
+  const updateOSImages = (region: string, allImages?: any[]) => {
-    const list = allOSImageList.filter((item) => item.regions.includes(region));
+    const list = (allImages || allOSImageList).filter((item) =>
+      item.regions.includes(region)
+    );
     setOSImageList(list);
   };
 

src/pages/cluster-management/step-forms/worker-pools-form.tsx

@@ -100,7 +100,6 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
 
   const gatherFormValues = (results: PromiseSettledResult<any>[]) => {
     const resultList = results.map((result: PromiseSettledResult<any>) => {
-      console.log('gatherFormValues========', results);
       if (result.status === 'fulfilled') {
         return result.value;
       }
@@ -109,8 +108,8 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       }
       return {};
     });
-
+    console.log('gatherFormValues========', resultList);
-    return resultList;
+    return resultList.filter((item) => item);
   };
 
   const validateFields = async () => {

src/pages/resources/config/index.ts

@@ -17,7 +17,9 @@ export const WorkerStatusMapValue = {
   [WorkerStatusMap.unreachable]: 'Unreachable',
   [WorkerStatusMap.provisioning]: 'Provisioning',
   [WorkerStatusMap.deleting]: 'Deleting',
-  [WorkerStatusMap.error]: 'Error'
+  [WorkerStatusMap.error]: 'Error',
+  [WorkerStatusMap.provisioned]: 'Provisioned',
+  [WorkerStatusMap.pending]: 'Pending'
 };
 
 export const status: any = {