fix: update command of adding worker

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

@@ -9,15 +9,18 @@ type ViewModalProps = {
   cacheDir?: string;
   containerName?: string;
   gpustackDataVolume?: string;
+  advertisAddress?: string;
   registrationInfo: {
     token: string;
     image: string;
     server_url: string;
+    [key: string]: any;
   };
 };
 
 const AddWorkerCommand: React.FC<ViewModalProps> = ({
   registrationInfo,
+  advertisAddress,
   workerIP,
   modelDir,
   cacheDir,
@@ -29,9 +32,11 @@ const AddWorkerCommand: React.FC<ViewModalProps> = ({
     const commandCode = addWorkerGuide['all'];
     return commandCode
       ?.registerWorker({
+        registrationInfo,
         gpu: currentGPU || '',
         server: registrationInfo.server_url || origin,
         tag: '',
+        advertisAddress: advertisAddress,
         workerIP: workerIP,
         modelDir: modelDir,
         cacheDir: cacheDir,
@@ -50,7 +55,8 @@ const AddWorkerCommand: React.FC<ViewModalProps> = ({
     modelDir,
     cacheDir,
     containerName,
-    gpustackDataVolume
+    gpustackDataVolume,
+    advertisAddress
   ]);
 
   return (

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

@@ -42,6 +42,7 @@ type AddWorkerProps = {
     image: string;
     server_url: string;
     cluster_id: number;
+    [key: string]: any;
   };
 };
 

src/pages/cluster-management/components/add-worker/config.ts

@@ -59,6 +59,11 @@ export interface SummaryDataKeys {
     enabled: boolean;
     path: string;
   };
+  externalWorkerIPConfig: {
+    enable: boolean;
+    ip: string;
+    required: boolean;
+  };
 }
 
 export type SummaryDataMap = {

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

@@ -9,13 +9,17 @@ import VendorNotes from './vendor-notes';
 
 const DockerRunCommand = () => {
   const intl = useIntl();
-  const { registrationInfo, stepList, summary, clusterList } =
-    useAddWorkerContext();
+  const { registrationInfo, stepList, summary } = useAddWorkerContext();
   const workerIPConfig = summary.get('workerIPConfig') || {
     enable: false,
     ip: '',
     required: false
   };
+  const externalWorkerIPConfig = summary.get('externalWorkerIPConfig') || {
+    enable: false,
+    ip: '',
+    required: false
+  };
   const modelDirConfig = summary.get('modelDirConfig') || {
     enable: false,
     path: '',
@@ -62,6 +66,9 @@ const DockerRunCommand = () => {
       </Tips>
       <AddWorkerCommand
         registrationInfo={registrationInfo}
+        advertisAddress={
+          externalWorkerIPConfig.enable ? externalWorkerIPConfig.ip : ''
+        }
         workerIP={workerIPConfig.enable ? workerIPConfig.ip : ''}
         modelDir={modelDirConfig.enable ? modelDirConfig.path : ''}
         cacheDir={cacheDirConfig.enable ? cacheDirConfig.path : ''}

src/pages/cluster-management/components/add-worker/specify-arguments.tsx

@@ -16,7 +16,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const SwitchSetting: React.FC<{
-  label: string;
+  label: React.ReactNode;
   checked: boolean;
   value?: string;
   placeholder?: string;
@@ -88,6 +88,13 @@ const SpecifyArguments = () => {
     ip: '',
     required: false
   };
+
+  const externalWorkerIPConfig = summary.get('externalWorkerIPConfig') || {
+    enable: false,
+    ip: '',
+    required: false
+  };
+
   const modelDirConfig = summary.get('modelDirConfig') || {
     enable: false,
     path: ''
@@ -143,6 +150,15 @@ const SpecifyArguments = () => {
       return false;
     }
 
+    if (externalWorkerIPConfig.enable && !externalWorkerIPConfig.ip) {
+      updateField('externalWorkerIPConfig', {
+        ...externalWorkerIPConfig,
+        required: true
+      });
+
+      return false;
+    }
+
     return true;
   };
 
@@ -189,6 +205,12 @@ const SpecifyArguments = () => {
       enable: true,
       path: 'gpustack-data'
     });
+
+    updateField('externalWorkerIPConfig', {
+      enable: false,
+      ip: '',
+      required: false
+    });
   }, []);
 
   return (
@@ -213,13 +235,27 @@ const SpecifyArguments = () => {
         {/* worker IP config */}
         <SwitchSetting
           label={
-            workerIPConfig.enable
-              ? intl.formatMessage({
-                  id: 'clusters.addworker.specifyWorkerIP'
-                })
-              : intl.formatMessage({
-                  id: 'clusters.addworker.detectWorkerIP'
-                })
+            <span
+              dangerouslySetInnerHTML={{
+                __html: workerIPConfig.enable
+                  ? intl.formatMessage(
+                      {
+                        id: 'clusters.addworker.specifyWorkerIP'
+                      },
+                      {
+                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`
+                      }
+                    )
+                  : intl.formatMessage(
+                      {
+                        id: 'clusters.addworker.detectWorkerIP'
+                      },
+                      {
+                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`
+                      }
+                    )
+              }}
+            ></span>
           }
           placeholder={intl.formatMessage({
             id: 'clusters.addworker.enterWorkerIP'
@@ -274,6 +310,83 @@ const SpecifyArguments = () => {
             )
           }
         ></SwitchSetting>
+        {/* external worker ip config */}
+        <SwitchSetting
+          label={
+            <span
+              dangerouslySetInnerHTML={{
+                __html: externalWorkerIPConfig.enable
+                  ? intl.formatMessage(
+                      {
+                        id: 'clusters.addworker.specifyWorkerIP'
+                      },
+                      {
+                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.external' })})`
+                      }
+                    )
+                  : intl.formatMessage(
+                      {
+                        id: 'clusters.addworker.detectWorkerIP'
+                      },
+                      {
+                        type: ` (${intl.formatMessage({ id: 'clusters.table.ip.external' })})`
+                      }
+                    )
+              }}
+            ></span>
+          }
+          placeholder={intl.formatMessage({
+            id: 'clusters.addworker.enterWorkerIP'
+          })}
+          value={externalWorkerIPConfig.ip}
+          checked={externalWorkerIPConfig.enable}
+          errorMessage={
+            externalWorkerIPConfig.required &&
+            !externalWorkerIPConfig.ip &&
+            intl.formatMessage({
+              id: 'clusters.addworker.enterWorkerIP.error'
+            })
+          }
+          onChange={(checked) =>
+            updateField('externalWorkerIPConfig', {
+              ...externalWorkerIPConfig,
+              enable: checked,
+              required: false
+            })
+          }
+          onInputChange={(value) =>
+            updateField('externalWorkerIPConfig', {
+              ...externalWorkerIPConfig,
+              ip: value
+            })
+          }
+          extra={
+            !externalWorkerIPConfig.enable && (
+              <AlertInfoBlock
+                maxHeight={200}
+                contentStyle={{
+                  paddingLeft: 0
+                }}
+                type="warning"
+                icon={<ExclamationCircleFilled />}
+                message={
+                  <NotesWrapper>
+                    <li
+                      style={{
+                        marginLeft: '0 !important',
+                        listStyleType: 'none'
+                      }}
+                    >
+                      {intl.formatMessage({
+                        id: 'clusters.addworker.externalIP.tips'
+                      })}
+                    </li>
+                  </NotesWrapper>
+                }
+              ></AlertInfoBlock>
+            )
+          }
+        ></SwitchSetting>
         {/* cache directory config */}
         <SwitchSetting
           label={intl.formatMessage({ id: 'clusters.addworker.cacheVolume' })}

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

@@ -14,7 +14,7 @@ interface DataItemProps {
   enable: boolean;
   value: string;
   required?: boolean;
-  label: string;
+  label: React.ReactNode;
   tips?: string;
 }
 
@@ -99,6 +99,11 @@ const SummaryData: React.FC = () => {
     path: ''
   };
 
+  const externalWorkerIPConfig = summary.get('externalWorkerIPConfig') || {
+    enable: false,
+    ip: ''
+  };
+
   return (
     <ConfigWrapper>
       <Title>
@@ -120,7 +125,18 @@ const SummaryData: React.FC = () => {
         ></DataItem>
 
         <DataItem
-          label={intl.formatMessage({ id: 'clusters.addworker.workerIP' })}
+          label={
+            <span
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage(
+                  { id: 'clusters.addworker.workerIP' },
+                  {
+                    type: `(${intl.formatMessage({ id: 'clusters.table.ip.internal' })})`
+                  }
+                )
+              }}
+            ></span>
+          }
           tips={
             workerIPConfig.enable
               ? workerIPConfig.ip
@@ -133,6 +149,31 @@ const SummaryData: React.FC = () => {
           required={true}
         ></DataItem>
 
+        <DataItem
+          label={
+            <span
+              dangerouslySetInnerHTML={{
+                __html: intl.formatMessage(
+                  { id: 'clusters.addworker.workerIP' },
+                  {
+                    type: `(${intl.formatMessage({ id: 'clusters.table.ip.external' })})`
+                  }
+                )
+              }}
+            ></span>
+          }
+          tips={
+            externalWorkerIPConfig.enable
+              ? externalWorkerIPConfig.ip
+                ? ''
+                : intl.formatMessage({ id: 'clusters.addworker.notSpecified' })
+              : intl.formatMessage({ id: 'clusters.addworker.autoDetect' })
+          }
+          enable={externalWorkerIPConfig.enable}
+          value={externalWorkerIPConfig.ip}
+          required={true}
+        ></DataItem>
+
         <DataItem
           label={intl.formatMessage({ id: 'clusters.addworker.extraVolume' })}
           enable={modelDirConfig.enable}