feat: add watch api in cluster

src/pages/cluster-management/step-forms/use-step-list.tsx

@@ -15,7 +15,7 @@ export default function useStepList() {
     () => [
       {
         title: 'Select Cloud Provider',
-        content: 'Choose the cloud provider for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -31,7 +31,7 @@ export default function useStepList() {
       },
       {
         title: 'Configure Cluster Settings',
-        content: 'Set up the basic configuration for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -47,7 +47,7 @@ export default function useStepList() {
       },
       {
         title: 'Add Worker Pools',
-        content: 'Define the worker pools for your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: true,
@@ -64,7 +64,7 @@ export default function useStepList() {
       },
       {
         title: 'Add Worker',
-        content: 'Add a worker node to your cluster.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,
@@ -80,7 +80,7 @@ export default function useStepList() {
       },
       {
         title: 'Register Cluster',
-        content: 'Register your cluster with the chosen provider.',
+        content: '',
         showButtons: (provider?: ProviderType) => {
           return {
             previous: false,

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

@@ -53,7 +53,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       [
         0,
         {
-          instance_type: 'Pool-1'
+          name: 'Pool-1'
         }
       ]
     ]) as Map<number, NodePoolFormData>
@@ -70,7 +70,7 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
     const newId = updateCount();
     setWorkerPoolList((prev) =>
       new Map(prev).set(newId, {
-        instance_type: `Pool-${newId + 1}`
+        name: `Pool-${newId + 1}`
       } as NodePoolFormData)
     );
     setActiveKey((prev) => new Set([newId]));
@@ -193,32 +193,30 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => {
       ></PageTools>
 
       {Array.from(workerPoolList.keys()).map((key, index) => (
-        <div key={key}>
-          <PoolContainer>
-            <PoolFormWrapper>
-              <WorkerPoolForm
-                name={`workerPoolForm_${key}`}
-                action={action}
-                ref={(el: any) => {
-                  if (el) {
-                    formRefs.current[key] = el;
-                  }
-                }}
-                collapseProps={{
-                  collapsible: true,
-                  open: activeKey.has(key),
-                  defaultOpen: activeKey.has(key),
-                  onToggle: (open: boolean) => handleOnToggle(open, key)
-                }}
-                showDelete={workerPoolList.size > 1}
-                onFinish={handleOnFinish}
-                provider={provider}
-                currentData={workerPoolList.get(key)}
-                onDelete={() => handleRemovePool(key)}
-              ></WorkerPoolForm>
-            </PoolFormWrapper>
-          </PoolContainer>
-        </div>
+        <PoolContainer key={key}>
+          <PoolFormWrapper>
+            <WorkerPoolForm
+              name={`workerPoolForm_${key}`}
+              action={action}
+              ref={(el: any) => {
+                if (el) {
+                  formRefs.current[key] = el;
+                }
+              }}
+              collapseProps={{
+                collapsible: true,
+                open: activeKey.has(key),
+                defaultOpen: activeKey.has(key),
+                onToggle: (open: boolean) => handleOnToggle(open, key)
+              }}
+              showDelete={workerPoolList.size > 1}
+              onFinish={handleOnFinish}
+              provider={provider}
+              currentData={workerPoolList.get(key)}
+              onDelete={() => handleRemovePool(key)}
+            ></WorkerPoolForm>
+          </PoolFormWrapper>
+        </PoolContainer>
       ))}
     </div>
   );