F #5836: Fix update VM configuration form (#2125)

src/fireedge/src/client/components/Forms/Vm/UpdateConfigurationForm/booting/index.js

@@ -15,6 +15,7 @@
  * ------------------------------------------------------------------------- */
 import { ReactElement, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import { Stack } from '@mui/material'
 
 import FormWithSchema from 'client/components/Forms/FormWithSchema'
 import { SECTIONS } from 'client/components/Forms/Vm/UpdateConfigurationForm/booting/schema'
@@ -26,14 +27,18 @@ import { HYPERVISORS } from 'client/constants'
  * @returns {ReactElement} OS section component
  */
 const OsSection = ({ hypervisor }) => {
-  const sections = useMemo(() => SECTIONS(hypervisor), [hypervisor])
+  const sections = useMemo(() => SECTIONS({ hypervisor }), [hypervisor])
 
   return (
-    <>
+    <Stack
+      display="grid"
+      gap="1em"
+      sx={{ gridTemplateColumns: { sm: '1fr', md: '1fr 1fr' } }}
+    >
       {sections.map(({ id, ...section }) => (
         <FormWithSchema key={id} cy={id} {...section} />
       ))}
-    </>
+    </Stack>
   )
 }
 

src/fireedge/src/client/components/Forms/Vm/UpdateConfigurationForm/context/schema.js

@@ -21,8 +21,9 @@ import {
 } from 'client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/context/schema'
 
 /**
- * @param {string} [hypervisor] - VM hypervisor
+ * @param {object} [formProps] - Form props
+ * @param {HYPERVISORS} [formProps.hypervisor] - VM hypervisor
  * @returns {ObjectSchema} Context schema
  */
-export const SCHEMA = (hypervisor) =>
+export const SCHEMA = ({ hypervisor }) =>
   object().concat(CONFIGURATION_SCHEMA).concat(FILES_SCHEMA(hypervisor))

src/fireedge/src/client/components/Forms/Vm/UpdateConfigurationForm/inputOutput/schema.js

@@ -44,7 +44,7 @@ export const GRAPHICS_FIELDS = ({ hypervisor }) =>
  * @returns {ObjectSchema} Graphics schema
  */
 export const GRAPHICS_SCHEMA = ({ hypervisor }) =>
-  getObjectSchemaFromFields(GRAPHICS_FIELDS(hypervisor))
+  getObjectSchemaFromFields(GRAPHICS_FIELDS({ hypervisor }))
 
 /**
  * @param {object} [formProps] - Form props

src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/numa/schema.js

@@ -34,7 +34,7 @@ import {
   getObjectSchemaFromFields,
 } from 'client/utils'
 
-const { vcenter, firecracker } = HYPERVISORS
+const { kvm, vcenter, firecracker } = HYPERVISORS
 
 const ENABLE_NUMA = {
   name: 'TOPOLOGY.ENABLE_NUMA',
@@ -42,7 +42,7 @@ const ENABLE_NUMA = {
   type: INPUT_TYPES.CHECKBOX,
   tooltip: T.NumaTopologyConcept,
   validation: lazy((_, { context }) =>
-    boolean().default(() => !!context?.extra?.TOPOLOGY)
+    boolean().default(() => !!context?.TEMPLATE?.TOPOLOGY)
   ),
   grid: { md: 12 },
 }
@@ -205,14 +205,19 @@ const SCHEMA_FIELDS = (hypervisor) => [ENABLE_NUMA, ...NUMA_FIELDS(hypervisor)]
  * @returns {ObjectSchema} Schema for NUMA fields
  */
 const NUMA_SCHEMA = (hypervisor) =>
-  getObjectSchemaFromFields(SCHEMA_FIELDS(hypervisor)).afterSubmit((result) => {
-    const { TOPOLOGY, ...ensuredResult } = result
-    const { ENABLE_NUMA: isEnabled, ...restOfTopology } = TOPOLOGY
+  getObjectSchemaFromFields(SCHEMA_FIELDS(hypervisor)).afterSubmit(
+    (result, { context }) => {
+      const { TOPOLOGY, ...ensuredResult } = result
+      const { ENABLE_NUMA: isEnabled, ...restOfTopology } = TOPOLOGY
+      const hyperv = context?.general?.HYPERVISOR
 
-    isEnabled && (ensuredResult.TOPOLOGY = { ...restOfTopology })
+      ![vcenter, kvm].includes(hyperv) &&
+        isEnabled &&
+        (ensuredResult.TOPOLOGY = { ...restOfTopology })
 
-    return { ...ensuredResult }
-  })
+      return { ...ensuredResult }
+    }
+  )
 
 export {
   NUMA_FIELDS,

src/fireedge/src/client/components/Tabs/Vm/Configuration.js

@@ -56,14 +56,7 @@ const VmConfigurationTab = ({ tabProps: { actions } = {}, id }) => {
     return actionsByState.includes?.(UPDATE_CONF)
   }, [vm])
 
-  const [
-    osAttributes,
-    featuresAttributes,
-    inputAttributes,
-    graphicsAttributes,
-    rawAttributes,
-    contextAttributes,
-  ] = useMemo(() => {
+  const sections = useMemo(() => {
     const filterSection = (section) => {
       const supported = ATTR_CONF_CAN_BE_UPDATED[section] || '*'
       const attributes = TEMPLATE[section] || {}
@@ -100,8 +93,17 @@ const VmConfigurationTab = ({ tabProps: { actions } = {}, id }) => {
     await updateConf({ id, template: xml })
   }
 
+  const [
+    osAttributes,
+    featuresAttributes,
+    inputAttributes,
+    graphicsAttributes,
+    rawAttributes,
+    contextAttributes,
+  ] = sections
+
   return (
-    <Box>
+    <Box padding={{ sm: '0.8em' }}>
       {isUpdateConfEnabled && (
         <ButtonToTriggerForm
           buttonProps={{
@@ -132,7 +134,7 @@ const VmConfigurationTab = ({ tabProps: { actions } = {}, id }) => {
         display="grid"
         gap="1em"
         gridTemplateColumns="repeat(auto-fit, minmax(49%, 1fr))"
-        marginTop="0.5em"
+        marginTop="1em"
       >
         {osAttributes?.length > 0 && (
           <List title={T.OSAndCpu} list={osAttributes} />
@@ -150,7 +152,16 @@ const VmConfigurationTab = ({ tabProps: { actions } = {}, id }) => {
           <List title={T.Raw} list={rawAttributes} />
         )}
         {contextAttributes?.length > 0 && (
-          <List title={T.Context} list={contextAttributes} />
+          <List
+            title={T.Context}
+            list={contextAttributes}
+            containerProps={{
+              sx: {
+                gridColumnStart: '2',
+                gridRow: `1 / ${sections.length}`,
+              },
+            }}
+          />
         )}
       </Stack>
     </Box>