Merge pull request #544 from ylei-tsubame/issues/541-autoselect-in-provserver

Web UI: patch 489, 537, 538, 541

striker-ui/components/OutlinedLabeledInputWithSelect.tsx

@@ -68,7 +68,7 @@ const OutlinedLabeledInputWithSelect: FC<
     >
       <OutlinedInputWithLabel id={id} label={label} {...inputWithLabelProps} />
       <SelectWithLabel
-        formControlProps={{ fullWidth: false }}
+        formControlProps={{ fullWidth: false, sx: { minWidth: 'min-content' } }}
         id={`${id}-nested-select`}
         selectItems={selectItems}
         {...selectWithLabelProps}

striker-ui/components/ProvisionServerDialog.tsx

@@ -4,6 +4,7 @@ import {
   SetStateAction,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { Box, Dialog, DialogProps, Grid } from '@mui/material';
@@ -24,7 +25,6 @@ import OutlinedInputWithLabel from './OutlinedInputWithLabel';
 import OutlinedLabeledInputWithSelect from './OutlinedLabeledInputWithSelect';
 import { Panel, PanelHeader } from './Panels';
 import SelectWithLabel from './SelectWithLabel';
-import Slider, { SliderProps } from './Slider';
 import Spinner from './Spinner';
 import {
   testInput as baseTestInput,
@@ -222,23 +222,6 @@ const PROVISION_BUTTON_STYLES = {
   },
 };
 
-const createOutlinedSlider = (
-  id: string,
-  label: string,
-  value: number,
-  sliderProps?: Partial<SliderProps>,
-): JSX.Element => (
-  <Slider
-    {...{
-      isAllowTextInput: true,
-      label,
-      labelId: `${id}-label`,
-      value,
-      ...sliderProps,
-    }}
-  />
-);
-
 const createMaxValueButton = (
   maxValue: string,
   {
@@ -999,6 +982,16 @@ const ProvisionServerDialog = ({
   const [successfulProvisionCount, setSuccessfulProvisionCount] =
     useState<number>(0);
 
+  const inputCpuCoresOptions = useMemo(() => {
+    const result: number[] = [];
+
+    for (let i = CPU_CORES_MIN; i <= inputCPUCoresMax; i += 1) {
+      result.push(i);
+    }
+
+    return result;
+  }, [inputCPUCoresMax]);
+
   const inputTests: InputTestBatches = {
     serverName: {
       defaults: {
@@ -1007,6 +1000,7 @@ const ProvisionServerDialog = ({
         },
         value: inputServerNameValue,
       },
+      isRequired: true,
       tests: [
         {
           onFailure: () => {
@@ -1051,6 +1045,7 @@ const ProvisionServerDialog = ({
         },
         value: inputCPUCoresValue,
       },
+      isRequired: true,
       tests: [
         {
           onFailure: () => {
@@ -1083,6 +1078,7 @@ const ProvisionServerDialog = ({
         },
         value: memory,
       },
+      isRequired: true,
       tests: [
         {
           onFailure: () => {
@@ -1108,6 +1104,7 @@ const ProvisionServerDialog = ({
         },
         value: inputInstallISOFileUUID,
       },
+      isRequired: true,
       tests: [{ test: testNotBlank }],
     },
     anvil: {
@@ -1117,6 +1114,7 @@ const ProvisionServerDialog = ({
         },
         value: inputAnvilValue,
       },
+      isRequired: true,
       tests: [{ test: testNotBlank }],
     },
     optimizeForOS: {
@@ -1126,6 +1124,7 @@ const ProvisionServerDialog = ({
         },
         value: inputOptimizeForOSValue?.key,
       },
+      isRequired: true,
       tests: [{ test: testNotBlank }],
     },
   };
@@ -1141,6 +1140,7 @@ const ProvisionServerDialog = ({
         },
         value: virtualDisks.sizes[vdIndex],
       },
+      isRequired: true,
       onFinishBatch: () => {
         setVirtualDisks({ ...virtualDisks });
       },
@@ -1173,6 +1173,7 @@ const ProvisionServerDialog = ({
         },
         value: virtualDisks.inputStorageGroupUUIDs[vdIndex],
       },
+      isRequired: true,
       onFinishBatch: () => {
         setVirtualDisks({ ...virtualDisks });
       },
@@ -1341,15 +1342,15 @@ const ProvisionServerDialog = ({
   };
 
   const createConfirmDialogContent = () => {
-    const gridColumns = 8;
+    const gridColumns = 10;
     const c1 = 2;
-    const c2 = 3;
+    const c2 = 5;
     const c3 = 3;
     const c2n3 = c2 + c3;
 
     return (
       <Grid container columns={gridColumns} direction="column">
-        <Grid direction="row" item xs={gridColumns}>
+        <Grid item xs={gridColumns}>
           <BodyText>
             Server <InlineMonoText text={inputServerNameValue} /> will be
             created on anvil node{' '}
@@ -1365,12 +1366,14 @@ const ProvisionServerDialog = ({
           </Grid>
           <Grid item xs={c2}>
             <BodyText>
-              <InlineMonoText text={inputCPUCoresValue} /> core(s)
+              <InlineMonoText edge="start">{inputCPUCoresValue}</InlineMonoText>{' '}
+              core(s)
             </BodyText>
           </Grid>
           <Grid item xs={c3}>
             <BodyText>
-              <InlineMonoText text={inputCPUCoresMax} /> core(s) available
+              <InlineMonoText edge="start">{inputCPUCoresMax}</InlineMonoText>{' '}
+              core(s) available
             </BodyText>
           </Grid>
         </Grid>
@@ -1380,14 +1383,16 @@ const ProvisionServerDialog = ({
           </Grid>
           <Grid item xs={c2}>
             <BodyText>
-              <InlineMonoText>
+              <InlineMonoText edge="start">
                 {inputMemoryValue} {inputMemoryUnit}
               </InlineMonoText>
             </BodyText>
           </Grid>
           <Grid item xs={c3}>
             <BodyText>
-              <InlineMonoText text={`${inputMemoryMax} ${inputMemoryUnit}`} />{' '}
+              <InlineMonoText edge="start">
+                {inputMemoryMax} {inputMemoryUnit}
+              </InlineMonoText>{' '}
               available
             </BodyText>
           </Grid>
@@ -1416,13 +1421,17 @@ const ProvisionServerDialog = ({
               </Grid>
               <Grid item xs={c2}>
                 <BodyText>
-                  <InlineMonoText text={`${vdInputSize} ${vdInputUnit}`} /> on{' '}
-                  {vdStorageGroupName}
+                  <InlineMonoText edge="start">
+                    {vdInputSize} {vdInputUnit}
+                  </InlineMonoText>{' '}
+                  on <InlineMonoText>{vdStorageGroupName}</InlineMonoText>
                 </BodyText>
               </Grid>
               <Grid item xs={c3}>
                 <BodyText>
-                  <InlineMonoText text={`${vdInputMax} ${vdInputUnit}`} />{' '}
+                  <InlineMonoText edge="start">
+                    {vdInputMax} {vdInputUnit}
+                  </InlineMonoText>{' '}
                   available
                 </BodyText>
               </Grid>
@@ -1435,7 +1444,7 @@ const ProvisionServerDialog = ({
           </Grid>
           <Grid item xs={c2n3}>
             <BodyText>
-              <InlineMonoText>
+              <InlineMonoText edge="start">
                 {fileUUIDMapToData[inputInstallISOFileUUID].fileName}
               </InlineMonoText>
             </BodyText>
@@ -1448,7 +1457,7 @@ const ProvisionServerDialog = ({
           <Grid item xs={c2n3}>
             <BodyText>
               {fileUUIDMapToData[inputDriverISOFileUUID] ? (
-                <InlineMonoText>
+                <InlineMonoText edge="start">
                   {fileUUIDMapToData[inputDriverISOFileUUID].fileName}
                 </InlineMonoText>
               ) : (
@@ -1462,7 +1471,9 @@ const ProvisionServerDialog = ({
             <BodyText text="Optimize for OS" />
           </Grid>
           <Grid item xs={c2n3}>
-            <BodyText text={`${inputOptimizeForOSValue?.label}`} />
+            <BodyText>
+              <InlineMonoText edge="start">{`${inputOptimizeForOSValue?.label}`}</InlineMonoText>
+            </BodyText>
           </Grid>
         </Grid>
       </Grid>
@@ -1499,10 +1510,51 @@ const ProvisionServerDialog = ({
         setFileSelectItems(ueFileSelectItems);
         setStorageGroupSelectItems(ueStorageGroupSelectItems);
 
-        initLimits({
+        const limits: Parameters<UpdateLimitsFunction>[0] = {
           allAnvils: ueAllAnvils,
           storageGroupUUIDMapToData: ueStorageGroupUUIDMapToData,
-        });
+        };
+
+        // Auto-select the only option when there's only 1.
+        // Reminder to update the form limits after changing any value.
+
+        if (ueAnvilSelectItems.length === 1) {
+          const {
+            0: { value: uuid },
+          } = ueAnvilSelectItems;
+
+          setInputAnvilValue(uuid);
+
+          limits.includeAnvilUUIDs = [uuid];
+        }
+
+        if (ueFileSelectItems.length === 1) {
+          const {
+            0: { value: uuid },
+          } = ueFileSelectItems;
+
+          setInputInstallISOFileUUID(uuid);
+
+          limits.fileUUIDs = [uuid, ''];
+        }
+
+        if (ueStorageGroupSelectItems.length === 1) {
+          const {
+            0: { value: uuid },
+          } = ueStorageGroupSelectItems;
+
+          setVirtualDisks((previous) => {
+            const current = { ...previous };
+
+            current.inputStorageGroupUUIDs[0] = uuid;
+
+            limits.virtualDisks = current;
+
+            return current;
+          });
+        }
+
+        initLimits(limits);
 
         setOSAutocompleteOptions(
           Object.entries(data.oses as Record<string, string>).map(
@@ -1574,38 +1626,43 @@ const ProvisionServerDialog = ({
                 messageBoxProps={inputServerNameMessage}
               />
             </Box>
-            {createOutlinedSlider(
-              'ps-cpu-cores',
-              'CPU cores',
-              inputCPUCoresValue,
-              {
-                messageBoxProps: inputCPUCoresMessage,
-                sliderProps: {
-                  onChange: (value) => {
-                    const newCPUCoresValue = value as number;
-
-                    if (newCPUCoresValue !== inputCPUCoresValue) {
-                      setInputCPUCoresValue(newCPUCoresValue);
-
-                      const { maxCPUCores: newCPUCoresMax } = updateLimits({
-                        cpuCores: newCPUCoresValue,
-                      });
-
-                      testInput({
-                        inputs: {
-                          cpuCores: {
-                            max: newCPUCoresMax,
-                            value: newCPUCoresValue,
-                          },
-                        },
-                      });
-                    }
+            <Autocomplete
+              id="ps-cpu-cores"
+              disableClearable
+              extendRenderInput={({ inputLabelProps = {} }) => {
+                inputLabelProps.isNotifyRequired = inputCPUCoresValue <= 0;
+              }}
+              getOptionLabel={(option) => String(option)}
+              label="CPU cores"
+              messageBoxProps={inputCPUCoresMessage}
+              noOptionsText="No available number of cores."
+              onChange={(event, value) => {
+                if (!value || value === inputCPUCoresValue) return;
+
+                setInputCPUCoresValue(value);
+
+                const { maxCPUCores: newCPUCoresMax } = updateLimits({
+                  cpuCores: value,
+                });
+
+                testInput({
+                  inputs: {
+                    cpuCores: {
+                      max: newCPUCoresMax,
+                      value,
+                    },
                   },
-                  max: inputCPUCoresMax,
-                  min: CPU_CORES_MIN,
-                },
-              },
-            )}
+                });
+              }}
+              openOnFocus
+              options={inputCpuCoresOptions}
+              renderOption={(optionProps, option) => (
+                <li {...optionProps} key={`ps-cpu-cores-${option}`}>
+                  {option}
+                </li>
+              )}
+              value={inputCPUCoresValue}
+            />
             <OutlinedLabeledInputWithSelect
               id="ps-memory"
               label="Memory"

striker-ui/components/Text/BodyText.tsx

@@ -7,6 +7,7 @@ import {
 import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
 type BodyTextOptionalProps = {
+  edge?: 'start' | 'end' | null;
   inheritColour?: boolean;
   inline?: boolean;
   inverted?: boolean;
@@ -20,6 +21,7 @@ type BodyTextProps = MUITypographyProps & BodyTextOptionalProps;
 const BODY_TEXT_CLASS_PREFIX = 'BodyText';
 
 const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
+  edge: null,
   inheritColour: false,
   inline: false,
   inverted: false,

striker-ui/components/Text/InlineMonoText.tsx

@@ -1,21 +1,30 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 
 import { BodyTextProps } from './BodyText';
 import SmallText from './SmallText';
 
-const InlineMonoText: FC<BodyTextProps> = ({ sx, ...bodyTextRestProps }) => (
-  <SmallText
-    {...{
-      ...bodyTextRestProps,
-      monospaced: true,
-      sx: {
-        display: 'inline',
-        padding: '.1rem .3rem',
+const InlineMonoText: FC<BodyTextProps> = ({
+  edge,
+  sx,
+  ...bodyTextRestProps
+}) => {
+  const paddingLeft = useMemo(() => (edge === 'start' ? 0 : undefined), [edge]);
 
-        ...sx,
-      },
-    }}
-  />
-);
+  const paddingRight = useMemo(() => (edge === 'end' ? 0 : undefined), [edge]);
+
+  const combinedSx: BodyTextProps['sx'] = useMemo(
+    () => ({
+      display: 'inline',
+      padding: '.1rem .3rem',
+      paddingLeft,
+      paddingRight,
+
+      ...sx,
+    }),
+    [paddingLeft, paddingRight, sx],
+  );
+
+  return <SmallText monospaced sx={combinedSx} {...bodyTextRestProps} />;
+};
 
 export default InlineMonoText;

striker-ui/out/_next/static/Qp2JU8cXYp9Orw8l0IAb0/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,n,i,f,b,d,u,k,h,j,r,g,l,_){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,a,e,f,b,h,"static/chunks/433-a3be905e7a7d3bfc.js",c,t,n,i,j,r,"static/chunks/pages/index-e791ea908d3ba943.js"],"/_error":["static/chunks/pages/_error-2280fa386d040b66.js"],"/anvil":[s,a,e,f,b,h,c,t,n,i,j,"static/chunks/pages/anvil-4cce8c1450ca6ceb.js"],"/config":[s,a,e,u,"static/chunks/519-4b7761e884c88eb9.js",c,t,n,i,d,k,g,"static/chunks/pages/config-f22ac92929f0daf0.js"],"/file-manager":["static/chunks/29107295-fbcfe2172188e46f.js",s,a,e,f,"static/chunks/176-7308c25ba374961e.js",c,t,i,d,"static/chunks/pages/file-manager-53de9163caaf5a86.js"],"/init":[s,a,f,b,u,l,c,t,n,i,_,"static/chunks/pages/init-ce942046cf0bafb2.js"],"/login":[s,a,e,c,t,n,d,k,"static/chunks/pages/login-6f7a93d56a339079.js"],"/manage-element":[s,a,e,f,b,u,l,"static/chunks/111-2605129c170ed35d.js",c,t,n,i,d,k,_,g,"static/chunks/pages/manage-element-8a411e7d32491cf4.js"],"/server":[s,e,"static/chunks/528-72edc50189f30fa9.js",c,r,"static/chunks/pages/server-8faafa80170f67f2.js"],sortedPages:["/","/_app","/_error","/anvil","/config","/file-manager","/init","/login","/manage-element","/server"]}}("static/chunks/412-ae4bab5809f6a209.js","static/chunks/62-2c80eba24b792af8.js","static/chunks/438-0147a63d98e89439.js","static/chunks/894-e57948de523bcf96.js","static/chunks/195-fa06e61dd4339031.js","static/chunks/987-1ff0d82724b0e58b.js","static/chunks/157-d1418743accab385.js","static/chunks/182-08683bbe95fbb010.js","static/chunks/900-af716a39aed22219.js","static/chunks/48-d4400834d0a31c6e.js","static/chunks/644-c7c6e21c71345aed.js","static/chunks/336-24770f9b2621610a.js","static/chunks/485-77798bccc4308d0e.js","static/chunks/898-e0785f5528d640fa.js","static/chunks/94-8322ed453a3c08f0.js","static/chunks/560-0ed707609765e23a.js","static/chunks/676-6159ce853338cc1f.js","static/chunks/86-afca85346d822222.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

striker-ui/out/_next/static/aBwJM8_Hf5TQtM8KFF7tW/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,a,e,t,n,i,f,u,k,d,h,j,b,r,g,l){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,a,e,f,u,"static/chunks/82-b2661d1af04f38ff.js",c,t,n,i,j,b,"static/chunks/pages/index-e5b260a0ddaa050c.js"],"/_error":["static/chunks/pages/_error-2280fa386d040b66.js"],"/anvil":[s,a,e,f,u,"static/chunks/247-0dbdd6350b819672.js",c,t,n,i,j,"static/chunks/pages/anvil-48975a0cc7fcbd1f.js"],"/config":[s,a,e,d,"static/chunks/519-4b7761e884c88eb9.js",c,t,n,i,k,h,r,"static/chunks/pages/config-f22ac92929f0daf0.js"],"/file-manager":["static/chunks/29107295-fbcfe2172188e46f.js",s,a,e,f,"static/chunks/176-7308c25ba374961e.js",c,t,i,k,"static/chunks/pages/file-manager-53de9163caaf5a86.js"],"/init":[s,a,f,u,d,g,c,t,n,i,l,"static/chunks/pages/init-84d6e766b3c27e21.js"],"/login":[s,a,e,c,t,n,k,h,"static/chunks/pages/login-6f7a93d56a339079.js"],"/manage-element":[s,a,e,f,u,d,g,"static/chunks/111-2605129c170ed35d.js",c,t,n,i,k,h,l,r,"static/chunks/pages/manage-element-a689bf0140460775.js"],"/server":[s,e,"static/chunks/528-72edc50189f30fa9.js",c,b,"static/chunks/pages/server-8faafa80170f67f2.js"],sortedPages:["/","/_app","/_error","/anvil","/config","/file-manager","/init","/login","/manage-element","/server"]}}("static/chunks/412-d77d0985f9905450.js","static/chunks/62-1cb6d52404130873.js","static/chunks/438-0147a63d98e89439.js","static/chunks/894-e57948de523bcf96.js","static/chunks/195-fa06e61dd4339031.js","static/chunks/987-1ff0d82724b0e58b.js","static/chunks/157-d1418743accab385.js","static/chunks/182-08683bbe95fbb010.js","static/chunks/960-e28948d6eb4c8144.js","static/chunks/48-d4400834d0a31c6e.js","static/chunks/644-4eec2b397fdacb0c.js","static/chunks/336-24770f9b2621610a.js","static/chunks/707-445cd83859b24a36.js","static/chunks/94-8322ed453a3c08f0.js","static/chunks/560-0ed707609765e23a.js","static/chunks/692-f4e7771f3a43db26.js","static/chunks/86-366ac64963a6a0fd.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();