fix: add worker, create cluster

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

@@ -2,6 +2,7 @@ import AlertInfoBlock from '@/components/alert-info/block';
 import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
+import { Alert } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 import { ProviderType, ProviderValueMap } from '../../config';
@@ -29,6 +30,7 @@ const Container = styled.div`
  * clusterList and onClusterChange are only required when from worker page.
  */
 type AddWorkerProps = {
+  isModal?: boolean;
   provider: ProviderType;
   clusterList?: Global.BaseOption<number, ClusterListItem>[];
   clusterLoading?: boolean;
@@ -49,6 +51,7 @@ type AddWorkerProps = {
  */
 const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
   const {
+    isModal = false,
     registrationInfo,
     provider,
     clusterList,
@@ -63,7 +66,7 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
   );
   const startWatchRef = React.useRef(false);
   const { update, summary, register } = useSummaryStatus();
-  const { contextHolder, createModelsChunkRequest } = useAddWorkerMessage({
+  const { addedCount, createModelsChunkRequest } = useAddWorkerMessage({
     startWatch: startWatchRef
   });
 
@@ -84,8 +87,10 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
   }, [stepList]);
 
   React.useEffect(() => {
-    createModelsChunkRequest();
-  }, []);
+    if (!isModal) {
+      createModelsChunkRequest();
+    }
+  }, [isModal]);
 
   return (
     <AddWorkerContext.Provider
@@ -139,8 +144,18 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
             )}
           </>
         )}
+        {addedCount > 0 && (
+          <Alert
+            message={intl.formatMessage(
+              {
+                id: 'clusters.addworker.message.success'
+              },
+              { count: addedCount }
+            )}
+            type="warning"
+          />
+        )}
       </Container>
-      {contextHolder}
     </AddWorkerContext.Provider>
   );
 };

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

@@ -1,11 +1,22 @@
 import ScrollerModal from '@/components/scroller-modal';
+import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
+import { useIntl } from '@umijs/max';
+import { Alert, Button } from 'antd';
 import React, { useEffect } from 'react';
+import styled from 'styled-components';
 import { queryClusterToken } from '../../apis';
 import { ProviderType } from '../../config';
 import { ClusterListItem } from '../../config/types';
 import AddWorkerStep from './add-worker-step';
 import { StepName } from './config';
 
+const Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+`;
+
 type AddWorkerProps = {
   open: boolean;
   provider: ProviderType;
@@ -40,6 +51,11 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
     clusterLoading,
     stepList = []
   } = props || {};
+  const intl = useIntl();
+  const startWatchRef = React.useRef(false);
+  const { addedCount, createModelsChunkRequest } = useAddWorkerMessage({
+    startWatch: startWatchRef
+  });
   const firstLoad = React.useRef(true);
   const [registrationInfo, setRegistrationInfo] = React.useState<{
     token: string;
@@ -61,6 +77,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
         ...data,
         cluster_id: value
       });
+      startWatchRef.current = true;
     } catch (error) {
       firstLoad.current = false;
     }
@@ -75,6 +92,12 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
     };
   }, [open, cluster_id]);
 
+  useEffect(() => {
+    if (open) {
+      createModelsChunkRequest();
+    }
+  }, [open]);
+
   return (
     <ScrollerModal
       title={title}
@@ -88,9 +111,35 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
       width={865}
       style={{}}
       maxContentHeight={'max(calc(100vh - 200px), 600px)'}
-      footer={null}
+      footer={
+        <Footer>
+          <span>
+            {addedCount > 0 && (
+              <Alert
+                message={intl.formatMessage(
+                  {
+                    id: 'clusters.addworker.message.success'
+                  },
+                  { count: addedCount }
+                )}
+                type="warning"
+              />
+            )}
+          </span>
+          <Button
+            type="primary"
+            onClick={onCancel}
+            style={{
+              minWidth: 88
+            }}
+          >
+            {intl.formatMessage({ id: 'common.button.done' })}
+          </Button>
+        </Footer>
+      }
     >
       <AddWorkerStep
+        isModal={true}
         stepList={stepList}
         provider={provider}
         clusterList={clusterList}

src/pages/cluster-management/components/add-worker/summary-data.tsx

@@ -134,7 +134,7 @@ const SummaryData: React.FC = () => {
           tips={
             workerIPConfig.enable
               ? workerIPConfig.ip
-                ? workerIPConfig.ip
+                ? ''
                 : intl.formatMessage({ id: 'clusters.addworker.notSpecified' })
               : intl.formatMessage({ id: 'clusters.addworker.autoDetect' })
           }

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

@@ -1,4 +1,5 @@
 import { fromClusterCreationAtom } from '@/atoms/clusters';
+import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
@@ -11,6 +12,7 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { ClusterFormData as FormData } from '../config/types';
 import { useProviderRegions } from '../hooks/use-provider-regions';
+import useSystemConfig from '../services/use-system-config';
 
 const OptionItem = styled.div`
   display: flex;
@@ -74,6 +76,8 @@ const optionRender = (option: any): React.ReactNode => {
 const CloudProvider: React.FC<CloudProviderProps> = (props) => {
   const { credentialList, action, credentialID } = props;
   const intl = useIntl();
+  const { systemConfig } = useSystemConfig();
+  const form = Form.useFormInstance<FormData>();
 
   const {
     getRegions,
@@ -105,6 +109,10 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
     }
   }, [credentialID]);
 
+  useEffect(() => {
+    form.setFieldValue('server_url', systemConfig?.server_external_url || '');
+  }, [systemConfig]);
+
   const labelRender = (props: {
     label: React.ReactNode;
     value: string | number;
@@ -176,6 +184,21 @@ const CloudProvider: React.FC<CloudProviderProps> = (props) => {
           })}
         ></SealSelect>
       </Form.Item>
+      <Form.Item<FormData>
+        name="server_url"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'clusters.create.serverUrl')
+          }
+        ]}
+      >
+        <SealInput.Input
+          label={intl.formatMessage({ id: 'clusters.create.serverUrl' })}
+          required={true}
+          trim={true}
+        ></SealInput.Input>
+      </Form.Item>
     </>
   );
 };

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

@@ -40,9 +40,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
         form.setFieldsValue(currentData);
 
         if (advanceConfigRef.current) {
-          const workerConfigYaml = json2Yaml({
-            worker_config: currentData.worker_config || {}
-          });
+          const workerConfigYaml = json2Yaml(currentData.worker_config || {});
           advanceConfigRef.current?.setYamlValue(workerConfigYaml);
         }
       }
@@ -69,7 +67,9 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
 
         return {
           ...values,
-          ...workerConfig
+          worker_config: {
+            ...workerConfig
+          }
         };
       }
     }));
@@ -129,6 +129,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
               children: (
                 <AdvanceConfig
                   action={action}
+                  provider={provider}
                   ref={advanceConfigRef}
                 ></AdvanceConfig>
               )