F #6742: Update OS & CPU tab layout (#3262)

Signed-off-by: Victor Hansson <vhansson@opennebula.io>
OpenNebula · Oct 10, 2024 · 32805d4 · 32805d4
1 parent e4e9506
commit 32805d4
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 27 deletions.
diff --git a/...ent/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js b/...ent/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js
@@ -100,6 +100,7 @@ export const KERNEL_CMD = {
     .notRequired()
     .default(() => undefined),
   fieldProps: { placeholder: 'ro console=tty1' },
+  grid: { md: 12 },
 }
 
 /** @type {Field} Path bootloader field */
@@ -157,7 +158,7 @@ export const FIRMWARE = {
   fieldProps: {
     freeSolo: true,
   },
-  grid: { md: 12 },
+  grid: { md: 8 },
 }
 
 /** @type {Field} Firmware secure field  */
@@ -167,7 +168,7 @@ export const FIRMWARE_SECURE = {
   notOnHypervisors: [lxc],
   type: INPUT_TYPES.CHECKBOX,
   validation: boolean().yesOrNo(),
-  grid: { md: 12 },
+  grid: { md: 4 },
 }
 
 /** @type {Field[]} List of Boot fields */
@@ -176,9 +177,9 @@ export const BOOT_FIELDS = [
   SD_DISK_BUS,
   MACHINE_TYPES,
   ROOT_DEVICE,
+  FIRMWARE,
+  FIRMWARE_SECURE,
   KERNEL_CMD,
   BOOTLOADER,
   UUID,
-  FIRMWARE,
-  FIRMWARE_SECURE,
 ]
diff --git a/...components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js b/...components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { number, string } from 'yup'
+import { number, string, boolean } from 'yup'
 
 import { HYPERVISORS, INPUT_TYPES, T } from 'client/constants'
 import { Field, OPTION_SORTERS, arrayToOptions } from 'client/utils'

diff --git a/...c/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js b/...c/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js
@@ -37,11 +37,13 @@ import { T } from 'client/constants'
 import { useGeneralApi } from 'client/features/General'
 
 import { useWatch, useFormContext } from 'react-hook-form'
+import useStyles from 'client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles'
 
 export const TAB_ID = 'OS'
 
 const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => {
   const { setFieldPath } = useGeneralApi()
+  const classes = useStyles()
   useEffect(() => {
     setFieldPath(`extra.OsCpu`)
   }, [])
@@ -61,15 +63,11 @@ const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => {
   const nicsAlias = getValues(`${EXTRA_ID}.${NIC_ID[1]}`)
 
   return (
-    <Stack
-      display="grid"
-      gap="1em"
-      sx={{ gridTemplateColumns: { sm: '1fr', md: '1fr 1fr' } }}
-    >
+    <Stack display="grid" gap="1em" className={classes.root}>
       {(!!disks?.length || !!nics?.length || !!nicsAlias?.length) && (
         <FormControl
           component="fieldset"
-          sx={{ width: '100%', gridColumn: '1 / -1' }}
+          sx={{ width: '100%', gridColumn: '1 / span 2', gridRow: '1' }}
         >
           <Legend title={T.BootOrder} tooltip={T.BootOrderConcept} />
           <BootOrder />
@@ -81,7 +79,7 @@ const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => {
           id={EXTRA_ID}
           saveState={true}
           cy={`${EXTRA_ID}-${id}`}
-          hiddenLegend={id === 'os-ramdisk' && !kernelWatch && !kernelDsWatch}
+          rootProps={{ className: classes[id] }}
           {...section}
         />
       ))}

diff --git a/...t/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js b/...t/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js
@@ -46,6 +46,8 @@ export const KERNEL_PATH_ENABLED = {
   validation: boolean()
     .strip()
     .default(() => false),
+
+  grid: { md: 4 },
 }
 
 /** @type {Field} Kernel DS field  */
@@ -84,6 +86,8 @@ export const KERNEL_DS = {
       form?.setValue(`extra.${KERNEL_DS_NAME}`, undefined)
     }
   },
+
+  grid: { md: 8 },
 }
 
 /** @type {Field} Kernel path field  */
@@ -104,6 +108,7 @@ export const KERNEL = {
       form?.setValue(`extra.${KERNEL_NAME}`, '')
     }
   },
+  grid: { md: 8 },
 }
 
 /** @type {Field[]} List of Kernel fields */

diff --git a/.../components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js b/.../components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js
@@ -43,7 +43,6 @@ export const RAMDISK_PATH_ENABLED = {
   notOnHypervisors: [lxc],
   type: INPUT_TYPES.SWITCH,
   dependOf: [`$extra.${KERNEL_DS_NAME}`, `$extra.${KERNEL_NAME}`],
-  htmlType: ([ds, path] = []) => !(ds || path) && INPUT_TYPES.HIDDEN,
   fieldProps: (_, form) => {
     const ds = form?.getValues(`extra.${KERNEL_DS_NAME}`)
     const path = form?.getValues(`extra.${KERNEL_NAME}`)
@@ -58,6 +57,8 @@ export const RAMDISK_PATH_ENABLED = {
   validation: boolean()
     .strip()
     .default(() => false),
+
+  grid: { md: 4 },
 }
 
 /** @type {Field} Ramdisk DS field  */
@@ -72,8 +73,7 @@ export const RAMDISK_DS = {
     `$extra.${KERNEL_NAME}`,
     `$extra.${KERNEL_PATH_ENABLED_NAME}`,
   ],
-  htmlType: ([enabled = false, ds, path] = []) =>
-    (enabled || !(ds || path)) && INPUT_TYPES.HIDDEN,
+  htmlType: ([enabled = false] = []) => enabled && INPUT_TYPES.HIDDEN,
   fieldProps: (_, form) => {
     const ds = form?.getValues(`extra.${KERNEL_DS_NAME}`)
     const path = form?.getValues(`extra.${KERNEL_NAME}`)
@@ -113,6 +113,8 @@ export const RAMDISK_DS = {
       form?.setValue(`extra.${RAMDISK_DS_NAME}`, undefined)
     }
   },
+
+  grid: { md: 8 },
 }
 
 /** @type {Field} Ramdisk path field  */
@@ -143,9 +145,9 @@ export const RAMDISK = {
 
     return ds || path ? {} : { disabled: true }
   },
-  htmlType: ([enabled = false, ds, path] = []) =>
-    (!enabled || !(ds || path)) && INPUT_TYPES.HIDDEN,
+  htmlType: ([enabled = false] = []) => !enabled && INPUT_TYPES.HIDDEN,
   validation: ramdiskValidation,
+  grid: { md: 8 },
 }
 
 /** @type {Field[]} List of Ramdisk fields */

diff --git a/.../client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js b/.../client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js
@@ -50,30 +50,30 @@ const SECTIONS = (hypervisor, oneConfig, adminGroup) => [
     ),
   },
   {
-    id: 'os-features',
-    legend: T.Features,
+    id: 'os-kernel',
+    legend: `${T.Kernel}`,
     fields: disableFields(
-      filterFieldsByHypervisor(FEATURES_FIELDS, hypervisor),
+      filterFieldsByHypervisor(KERNEL_FIELDS, hypervisor),
       'OS',
       oneConfig,
       adminGroup
     ),
   },
   {
-    id: 'os-kernel',
-    legend: T.Kernel,
+    id: 'os-ramdisk',
+    legend: `${T.Ramdisk}`,
     fields: disableFields(
-      filterFieldsByHypervisor(KERNEL_FIELDS, hypervisor),
+      filterFieldsByHypervisor(RAMDISK_FIELDS, hypervisor),
       'OS',
       oneConfig,
       adminGroup
     ),
   },
   {
-    id: 'os-ramdisk',
-    legend: T.Ramdisk,
+    id: 'os-features',
+    legend: T.Features,
     fields: disableFields(
-      filterFieldsByHypervisor(RAMDISK_FIELDS, hypervisor),
+      filterFieldsByHypervisor(FEATURES_FIELDS, hypervisor),
       'OS',
       oneConfig,
       adminGroup

diff --git a/.../client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js b/.../client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js
@@ -0,0 +1,47 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2024, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import makeStyles from '@mui/styles/makeStyles'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gridTemplateRows: 'auto',
+    gap: theme.spacing(1),
+    overflow: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      gridTemplateColumns: '1fr',
+    },
+  },
+  'os-cpu-model': {
+    gridColumn: '1 / span 2',
+    // gridRow: '1',
+    padding: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+      gridColumn: '1 / -1',
+    },
+  },
+  'os-raw': {
+    gridColumn: '1 / span 2',
+    // gridRow: '1',
+    padding: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+      gridColumn: '1 / -1',
+    },
+  },
+}))
+
+export default useStyles
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
@@ -1256,7 +1256,7 @@ module.exports = {
   FirmwareSecure: 'Firmware secure',
   CpuModel: 'CPU Model',
   CpuFeature: 'CPU Features',
-  CustomPath: 'Customize with path',
+  CustomPath: 'Custom path',
   /* VM Template schema - OS & CPU - kernel */
   Kernel: 'Kernel',
   KernelExpression: 'Kernel expression',