style: no resource modal

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

@@ -146,6 +146,7 @@ const AddWorkerSteps: React.FC<AddWorkerProps> = (props) => {
         )}
         {addedCount > 0 && (
           <Alert
+            style={{ width: 'max-content' }}
             message={intl.formatMessage(
               {
                 id: 'clusters.addworker.message.success'

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

@@ -11,10 +11,16 @@ import AddWorkerStep from './add-worker-step';
 import { StepName } from './config';
 
 const Footer = styled.div`
+  position: relative;
   display: flex;
-  justify-content: space-between;
+  gap: 12px;
+  justify-content: center;
   align-items: center;
   padding-top: 12px;
+  .tips {
+    position: absolute;
+    left: 0px;
+  }
 `;
 
 type AddWorkerProps = {
@@ -113,7 +119,7 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
       maxContentHeight={'max(calc(100vh - 200px), 600px)'}
       footer={
         <Footer>
-          <span>
+          <span className="tips">
             {addedCount > 0 && (
               <Alert
                 message={intl.formatMessage(

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

@@ -23,9 +23,11 @@ const SwitchSetting: React.FC<{
   tips?: React.ReactNode;
   errorMessage?: React.ReactNode;
   extra?: React.ReactNode;
+  showSwitch?: boolean;
   onInputChange?: (value: string) => void;
   onChange: (checked: boolean) => void;
 }> = ({
+  showSwitch = true,
   label,
   checked,
   onChange,
@@ -42,7 +44,7 @@ const SwitchSetting: React.FC<{
         <span style={{ color: 'var(--ant-color-text)', fontWeight: 500 }}>
           <span>{label}</span>
         </span>
-        <Switch checked={checked} onChange={onChange}></Switch>
+        {showSwitch && <Switch checked={checked} onChange={onChange}></Switch>}
       </ButtonWrapper>
       {tips && (
         <Tips
@@ -97,12 +99,12 @@ const SpecifyArguments = () => {
   };
 
   const containerNameConfig = summary.get('containerNameConfig') || {
-    enable: false,
+    enable: true,
     name: ''
   };
 
   const gpustackDataVolumeConfig = summary.get('gpustackDataVolumeConfig') || {
-    enable: false,
+    enable: true,
     path: ''
   };
 
@@ -179,12 +181,12 @@ const SpecifyArguments = () => {
     });
 
     updateField('containerNameConfig', {
-      enable: false,
+      enable: true,
       name: ''
     });
 
     updateField('gpustackDataVolumeConfig', {
-      enable: false,
+      enable: true,
       path: ''
     });
   }, []);
@@ -272,56 +274,23 @@ const SpecifyArguments = () => {
             )
           }
         ></SwitchSetting>
-        {/* container name config */}
+        {/* cache directory config */}
         <SwitchSetting
-          label={intl.formatMessage({ id: 'clusters.addworker.containerName' })}
+          label={intl.formatMessage({ id: 'clusters.addworker.cacheVolume' })}
           tips={intl.formatMessage({
-            id: 'clusters.addworker.containerName.tips'
+            id: 'clusters.addworker.cacheVolume.tips'
           })}
-          placeholder={intl.formatMessage(
-            {
-              id: 'common.help.default'
-            },
-            { content: 'gpustack-worker' }
-          )}
-          checked={containerNameConfig.enable}
-          value={containerNameConfig.name}
+          placeholder={intl.formatMessage({
+            id: 'clusters.addworker.cacheVolume.holder'
+          })}
+          checked={cacheDirConfig.enable}
+          value={cacheDirConfig.path}
           onChange={(checked) =>
-            updateField('containerNameConfig', {
-              ...containerNameConfig,
-              enable: checked
-            })
+            setCacheDirConfig({ ...cacheDirConfig, enable: checked })
           }
           onInputChange={(value) =>
-            updateField('containerNameConfig', {
-              ...containerNameConfig,
-              name: value
-            })
-          }
-        ></SwitchSetting>
-        {/* gpustack data volume config */}
-        <SwitchSetting
-          label={intl.formatMessage({ id: 'clusters.addworker.dataVolume' })}
-          tips={intl.formatMessage({
-            id: 'clusters.addworker.dataVolume.tips'
-          })}
-          placeholder={intl.formatMessage(
-            {
-              id: 'common.help.default'
-            },
-            { content: 'gpustack-data' }
-          )}
-          checked={gpustackDataVolumeConfig.enable}
-          value={gpustackDataVolumeConfig.path}
-          onChange={(checked) =>
-            updateField('gpustackDataVolumeConfig', {
-              ...gpustackDataVolumeConfig,
-              enable: checked
-            })
-          }
-          onInputChange={(value) =>
-            updateField('gpustackDataVolumeConfig', {
-              ...gpustackDataVolumeConfig,
+            setCacheDirConfig({
+              ...cacheDirConfig,
               path: value
             })
           }
@@ -347,27 +316,57 @@ const SpecifyArguments = () => {
             })
           }
         ></SwitchSetting>
-        {/* cache directory config */}
+
+        {/* gpustack data volume config */}
         <SwitchSetting
-          label={intl.formatMessage({ id: 'clusters.addworker.cacheVolume' })}
-          tips={intl.formatMessage({
-            id: 'clusters.addworker.cacheVolume.tips'
-          })}
-          placeholder={intl.formatMessage({
-            id: 'clusters.addworker.cacheVolume.holder'
-          })}
-          checked={cacheDirConfig.enable}
-          value={cacheDirConfig.path}
+          showSwitch={false}
+          label={intl.formatMessage({ id: 'clusters.addworker.dataVolume' })}
+          placeholder={intl.formatMessage(
+            {
+              id: 'common.help.default'
+            },
+            { content: 'gpustack-data' }
+          )}
+          checked={gpustackDataVolumeConfig.enable}
+          value={gpustackDataVolumeConfig.path}
           onChange={(checked) =>
-            setCacheDirConfig({ ...cacheDirConfig, enable: checked })
+            updateField('gpustackDataVolumeConfig', {
+              ...gpustackDataVolumeConfig,
+              enable: checked
+            })
           }
           onInputChange={(value) =>
-            setCacheDirConfig({
-              ...cacheDirConfig,
+            updateField('gpustackDataVolumeConfig', {
+              ...gpustackDataVolumeConfig,
               path: value
             })
           }
         ></SwitchSetting>
+        {/* container name config */}
+        <SwitchSetting
+          showSwitch={false}
+          label={intl.formatMessage({ id: 'clusters.addworker.containerName' })}
+          placeholder={intl.formatMessage(
+            {
+              id: 'common.help.default'
+            },
+            { content: 'gpustack-worker' }
+          )}
+          checked={containerNameConfig.enable}
+          value={containerNameConfig.name}
+          onChange={(checked) =>
+            updateField('containerNameConfig', {
+              ...containerNameConfig,
+              enable: checked
+            })
+          }
+          onInputChange={(value) =>
+            updateField('containerNameConfig', {
+              ...containerNameConfig,
+              name: value
+            })
+          }
+        ></SwitchSetting>
       </div>
     </StepCollapse>
   );

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

@@ -99,16 +99,6 @@ const SummaryData: React.FC = () => {
     path: ''
   };
 
-  const containerNameConfig = summary.get('containerNameConfig') || {
-    enable: false,
-    name: ''
-  };
-
-  const gpustackDataVolumeConfig = summary.get('gpustackDataVolumeConfig') || {
-    enable: false,
-    path: ''
-  };
-
   return (
     <ConfigWrapper>
       <Title>
@@ -143,18 +133,6 @@ const SummaryData: React.FC = () => {
           required={true}
         ></DataItem>
 
-        <DataItem
-          label={intl.formatMessage({ id: 'clusters.addworker.containerName' })}
-          enable={containerNameConfig.enable}
-          value={containerNameConfig.name}
-        ></DataItem>
-
-        <DataItem
-          label={intl.formatMessage({ id: 'clusters.addworker.dataVolume' })}
-          enable={gpustackDataVolumeConfig.enable}
-          value={gpustackDataVolumeConfig.path}
-        ></DataItem>
-
         <DataItem
           label={intl.formatMessage({ id: 'clusters.addworker.extraVolume' })}
           enable={modelDirConfig.enable}

src/pages/cluster-management/components/footer-buttons.tsx

@@ -9,6 +9,7 @@ const Title = styled.span`
   justify-content: flex-end;
   font-weight: 700;
   font-size: 16px;
+  padding-inline: 24px;
   .text {
     font-size: 20px;
   }