F #7510: Add new NIC interface (#4218)

Signed-off-by: Victor Hansson <vhansson@opennebula.io>

Author: vichansson

src/fireedge/src/modules/components/Cards/PciCard.js

@@ -46,6 +46,7 @@ const PciCard = memo(
       NAME,
       PCI_ID,
       VMID,
+      IFNAME,
     } = pci
 
     const name = PCI_ID ? `PCI${PCI_ID}` : NAME && `${NAME}`
@@ -99,6 +100,11 @@ const PciCard = memo(
                 <span data-cy="vm">{` ${VMID}`}</span>
               </span>
             )}
+            {IFNAME && (
+              <span title={`${Tr(T.IfName)}: ${IFNAME}`}>{`${Tr(
+                T.IfName
+              )}: ${IFNAME}`}</span>
+            )}
           </div>
         </Box>
         <div className={classes.actions}>{actions}</div>

src/fireedge/src/modules/components/FormControl/RadioController.js

@@ -20,7 +20,6 @@ import {
   Box,
   FormControl,
   FormHelperText,
-  Radio,
   RadioGroup,
   useTheme,
 } from '@mui/material'
@@ -171,7 +170,7 @@ const RadioController = memo(
           className={classes.root}
           data-cy={cy}
         >
-          {values.map(({ text, value, svg }) => (
+          {values.map(({ text, value, svg, description }) => (
             <Box
               key={`${name}-${value}`}
               data-value={value}
@@ -183,20 +182,23 @@ const RadioController = memo(
               }
             >
               <Box className={svg ? classes.paddingSvg : classes.padding}>
-                <Box className={classes.row}>
-                  <Box className={classes.cell}>
-                    <Radio
-                      inputRef={ref}
-                      disabled={readOnly}
-                      checked={optionSelected === value}
-                      className={classes.radio}
-                      inputProps={{ 'data-value': value }}
-                    />
+                <Box sx={{ fontWeight: 500 }}>{Tr(text)}</Box>
+                {description && (
+                  <Box
+                    component="p"
+                    sx={{
+                      m: 0,
+                      mt: 0.5,
+                      fontSize: '0.75rem',
+                      color: 'text.secondary',
+                      lineHeight: 1.4,
+                    }}
+                  >
+                    {labelCanBeTranslated(description)
+                      ? Tr(description)
+                      : description}
                   </Box>
-                  <Box className={clsx(classes.cell, classes.cellFull)}>
-                    {Tr(text)}
-                  </Box>
-                </Box>
+                )}
                 {svg && (
                   <Box className={classes.row}>
                     <Box className={classes.cell} />
@@ -236,6 +238,7 @@ RadioController.propTypes = {
       text: PropTypes.string.isRequired,
       value: PropTypes.string.isRequired,
       svg: PropTypes.string,
+      description: PropTypes.string,
     })
   ).isRequired,
   watcher: PropTypes.func,

src/fireedge/src/modules/components/FormControl/SwitchController.js

@@ -47,6 +47,7 @@ const SwitchController = memo(
     onConditionChange,
     watcher,
     dependencies,
+    description,
   }) => {
     const {
       field: { value = false, onChange, onBlur },
@@ -101,6 +102,11 @@ const SwitchController = memo(
           }
           labelPlacement="end"
         />
+        {description && (
+          <FormHelperText>
+            {labelCanBeTranslated(description) ? Tr(description) : description}
+          </FormHelperText>
+        )}
         {Boolean(error) && (
           <FormHelperText data-cy={`${cy}-error`}>
             <ErrorHelper label={error?.message} />
@@ -125,6 +131,7 @@ SwitchController.propTypes = {
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string),
   ]),
+  description: PropTypes.string,
 }
 
 SwitchController.displayName = 'SwitchController'

src/fireedge/src/modules/components/FormControl/ToggleController.js

@@ -19,9 +19,11 @@ import PropTypes from 'prop-types'
 import {
   styled,
   FormControl,
+  Typography,
   ToggleButtonGroup,
   ToggleButton,
   FormHelperText,
+  Box,
 } from '@mui/material'
 import { useController } from 'react-hook-form'
 
@@ -105,9 +107,25 @@ const ToggleController = memo(
           data-cy={cy}
           {...fieldProps}
         >
-          {values?.map(({ text, value = '' }) => (
+          {values?.map(({ text, value = '', description }) => (
             <ToggleButton key={`${name}-${value}`} value={value} sx={{ p: 1 }}>
-              {Tr(text)}
+              <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                <Typography variant="body2" fontWeight={600}>
+                  {Tr(text)}
+                </Typography>
+
+                {description && (
+                  <Typography
+                    variant="caption"
+                    display="block"
+                    color="text.secondary"
+                  >
+                    {labelCanBeTranslated(description)
+                      ? Tr(description)
+                      : description}
+                  </Typography>
+                )}
+              </Box>
             </ToggleButton>
           ))}
         </ToggleButtonGroup>

src/fireedge/src/modules/components/Forms/Vm/AttachNicForm/Steps/AdvancedOptions/index.js

@@ -32,25 +32,35 @@ const Content = (props) => {
 
   return (
     <Box
-      display="grid"
-      gap="2em"
-      sx={{ gridTemplateColumns: { lg: '1fr 1fr', md: '1fr' } }}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px',
+      }}
     >
-      {sections.map(({ id, legend, fields }) => (
-        <FormWithSchema
-          key={id}
-          rootProps={{
-            sx: (id === 'general' || id === 'guacamole-connections') && {
-              gridColumn: '1 / -1',
-            },
-          }}
-          cy={id}
-          saveState={true}
-          fields={fields}
-          legend={legend}
-          id={STEP_ID}
-        />
-      ))}
+      <Box
+        display="grid"
+        gap="2em"
+        sx={{ gridTemplateColumns: { lg: '1fr 1fr', md: '1fr' } }}
+      >
+        {sections.map(({ id, legend, fields }) => (
+          <FormWithSchema
+            key={id}
+            rootProps={{
+              sx: (id === 'general' ||
+                id === 'guacamole-connections' ||
+                id === 'hardware') && {
+                gridColumn: '1 / -1',
+              },
+            }}
+            cy={id}
+            saveState={true}
+            fields={fields}
+            legend={legend}
+            id={STEP_ID}
+          />
+        ))}
+      </Box>
     </Box>
   )
 }