F #5885: Add PCI Profile selector (#2211)

src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/inputOutput/pciDevicesSchema.js

@@ -28,15 +28,15 @@ import { T, INPUT_TYPES, HYPERVISORS } from 'client/constants'
 const { vcenter, lxc, firecracker } = HYPERVISORS
 
 const transformPciToString = (pciDevice = {}) => {
-  const { DEVICE = '', VENDOR = '', CLASS = '' } = pciDevice
+  const { DEVICE = '', VENDOR = '', CLASS = '', PROFILES = '' } = pciDevice
 
-  return [DEVICE, VENDOR, CLASS].join(',')
+  return [DEVICE, VENDOR, CLASS, PROFILES].join(';')
 }
 
 const getPciAttributes = (pciDevice = '') => {
-  const [DEVICE, VENDOR, CLASS] = pciDevice.split(',')
+  const [DEVICE, VENDOR, CLASS, PROFILES] = pciDevice.split(';')
 
-  return { DEVICE, VENDOR, CLASS }
+  return { DEVICE, VENDOR, CLASS, PROFILES }
 }
 
 /** @type {Field} Name PCI device field */
@@ -58,6 +58,33 @@ const NAME_FIELD = {
   grid: { sm: 12, md: 3 },
 }
 
+/** @type {Field} Name PCI device field */
+const PROFILE_FIELD = {
+  name: 'PROFILE',
+  label: T.Profile,
+  notOnHypervisors: [vcenter, lxc, firecracker],
+  type: INPUT_TYPES.SELECT,
+  values: (pciDevice) => {
+    if (pciDevice) {
+      const { PROFILES } = getPciAttributes(pciDevice)
+      const profiles = PROFILES.trim() === '' ? [] : PROFILES.split(',')
+
+      return arrayToOptions(profiles)
+    }
+
+    return arrayToOptions([])
+  },
+  dependOf: NAME_FIELD.name,
+  htmlType: (pciDevice) => {
+    const { PROFILES } = getPciAttributes(pciDevice)
+    const emptyProfiles = !PROFILES || PROFILES === '' || PROFILES === '-'
+
+    return emptyProfiles && INPUT_TYPES.HIDDEN
+  },
+  validation: string().trim().notRequired(),
+  grid: { sm: 12, md: 3 },
+}
+
 /** @type {Field} Common field properties */
 const commonFieldProps = (name) => ({
   name,
@@ -73,7 +100,7 @@ const commonFieldProps = (name) => ({
   },
   validation: string().trim().required(),
   fieldProps: { disabled: true },
-  grid: { xs: 12, sm: 4, md: 3 },
+  grid: { xs: 12, sm: 3, md: 2 },
 })
 
 /** @type {Field} PCI device field */
@@ -91,12 +118,13 @@ const CLASS_FIELD = { label: T.Class, ...commonFieldProps('CLASS') }
  */
 export const PCI_FIELDS = (hypervisor) =>
   filterFieldsByHypervisor(
-    [NAME_FIELD, DEVICE_FIELD, VENDOR_FIELD, CLASS_FIELD],
+    [NAME_FIELD, PROFILE_FIELD, DEVICE_FIELD, VENDOR_FIELD, CLASS_FIELD],
     hypervisor
   )
 
 /** @type {ObjectSchema} PCI devices object schema */
 export const PCI_SCHEMA = getObjectSchemaFromFields([
+  PROFILE_FIELD,
   DEVICE_FIELD,
   VENDOR_FIELD,
   CLASS_FIELD,

src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/inputOutput/pciDevicesSection.js

@@ -65,6 +65,7 @@ const PciDevicesSection = ({ stepId, hypervisor }) => {
   })
 
   const onSubmit = (newInput) => {
+    delete newInput.DEVICE_NAME
     append(newInput)
     methods.reset()
   }
@@ -101,34 +102,42 @@ const PciDevicesSection = ({ stepId, hypervisor }) => {
       </FormProvider>
       <Divider />
       <List>
-        {pciDevices?.map(({ id, DEVICE, VENDOR, CLASS }, index) => {
-          const { DEVICE_NAME, VENDOR_NAME } =
-            pciDevicesAvailable.find(
-              (pciDevice) => pciDevice?.DEVICE === DEVICE
-            ) ?? {}
+        {pciDevices?.map(
+          ({ id, DEVICE, VENDOR, CLASS, PROFILE = '-' }, index) => {
+            const { DEVICE_NAME, VENDOR_NAME } =
+              pciDevicesAvailable.find(
+                (pciDevice) => pciDevice?.DEVICE === DEVICE
+              ) ?? {}
 
-          return (
-            <ListItem
-              key={id}
-              secondaryAction={
-                <IconButton onClick={() => remove(index)}>
-                  <DeleteCircledOutline />
-                </IconButton>
-              }
-              sx={{ '&:hover': { bgcolor: 'action.hover' } }}
-            >
-              <ListItemText
-                primary={DEVICE_NAME}
-                primaryTypographyProps={{ variant: 'body1' }}
-                secondary={[
-                  `#${DEVICE}`,
-                  `Vendor: ${VENDOR_NAME}(${VENDOR})`,
-                  `Class: ${CLASS}`,
-                ].join(' | ')}
-              />
-            </ListItem>
-          )
-        })}
+            const secondaryFields = [
+              `#${DEVICE}`,
+              `${T.Vendor}: ${VENDOR_NAME}(${VENDOR})`,
+              `${T.Class}: ${CLASS}`,
+            ]
+
+            if (PROFILE !== '' && PROFILE !== '-') {
+              secondaryFields.push(`${T.Profile}: ${PROFILE}`)
+            }
+
+            return (
+              <ListItem
+                key={id}
+                secondaryAction={
+                  <IconButton onClick={() => remove(index)}>
+                    <DeleteCircledOutline />
+                  </IconButton>
+                }
+                sx={{ '&:hover': { bgcolor: 'action.hover' } }}
+              >
+                <ListItemText
+                  primary={DEVICE_NAME}
+                  primaryTypographyProps={{ variant: 'body1' }}
+                  secondary={secondaryFields.join(' | ')}
+                />
+              </ListItem>
+            )
+          }
+        )}
       </List>
     </FormControl>
   )

src/fireedge/src/client/constants/host.js

@@ -28,6 +28,7 @@ import * as T from 'client/constants/translates'
  * @property {string} DOMAIN - Address domain
  * @property {string} FUNCTION - Address function
  * @property {string} NUMA_NODE - Numa node
+ * @property {string} PROFILES - PCI device available profiles
  * @property {string} SHORT_ADDRESS - Short address
  * @property {string} SLOT - Address slot
  * @property {string} TYPE - Type

src/fireedge/src/client/constants/translates.js

@@ -720,6 +720,7 @@ module.exports = {
   Input: 'Input',
   Inputs: 'Inputs',
   PciDevices: 'PCI Devices',
+  Profile: 'Profile',
   DeviceName: 'Device name',
   Device: 'Device',
   Vendor: 'Vendor',