Add Comptibility Matrix to USB devices tab

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/edit/kubevirt.io.virtualmachine/CompatibilityMatrix.vue

@@ -3,11 +3,11 @@ import { mapGetters } from 'vuex';
 export default {
   props: {
     /**
-     * deviceId/vendorId is unique per type of device - there may be multiple pciDevice CRD objects for a given device
+     * deviceId/vendorId is unique per type of device - there may be multiple CRD objects for a given device
      * {
      *  [deviceId/vendorId]: {
      *      nodes: array of devicecrd.status.nodeName's for given device,
-     *      deviceCRDs: array of all instances (pciDevice CRD) of given device
+     *      deviceCRDs: array of all instances of given device
      *      }
      * }
      */
@@ -78,9 +78,9 @@ export default {
     <div class="device-col node-names">
       <div class="blank-corner">
         <div class="text-right">
-          {{ t('harvester.pci.matrixDeviceClaimName') }}
+          {{ t('harvester.devices.matrixDeviceClaimName') }}
         </div>
-        <div>{{ t('harvester.pci.matrixHostName') }}</div>
+        <div>{{ t('harvester.devices.matrixHostName') }}</div>
       </div>
       <div  v-for="(nodeName, i) in allNodeNames" :key="i" >
         <span>  {{ nodeName }}</span>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue

@@ -3,6 +3,8 @@ import { _EDIT } from '@shell/config/query-params';
 import { allHash } from '@shell/utils/promise';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Banner from '@components/Banner/Banner.vue';
+import CompatibilityMatrix from '../CompatibilityMatrix';
+import DeviceList from './DeviceList';
 
 import remove from 'lodash/remove';
 import { get, set } from '@shell/utils/object';

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineUSBDevices/index.vue

@@ -5,11 +5,13 @@ import { HCI } from '../../../types';
 import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Banner from '@components/Banner/Banner.vue';
+import CompatibilityMatrix from '../CompatibilityMatrix';
 
 export default {
   name:       'VirtualMachineUSBDevices',
   components: {
     Banner,
+    CompatibilityMatrix,
     LabeledSelect,
   },
   props: {
@@ -52,14 +54,140 @@ export default {
       devices:         [],
       vms:             [],
       selectedDevices: [],
+      showMatrix:      false,
     };
   },
 
   computed: {
+    deviceOpts() {
+      const filteredOptions = this.enabledDevices.filter((deviceCRD) => {
+        if (this.selectedDevices.length > 0) {
+          const selectedDevice = this.enabledDevices.find(device => device.metadata.name === this.selectedDevices[0]);
+
+          return !this.devicesInUse[deviceCRD?.metadata.name] && deviceCRD.status.nodeName === selectedDevice.status.nodeName;
+        }
+
+        return !this.devicesInUse[deviceCRD?.metadata.name];
+      });
+
+      return filteredOptions.map((deviceCRD) => {
+        return {
+          value:        deviceCRD?.metadata.name,
+          label:        deviceCRD?.metadata.name,
+          displayLabel: deviceCRD?.status?.resourceName,
+        };
+      });
+    },
+
+    enabledDevices() {
+      return this.devices.filter((device) => {
+        return device.isEnabled;
+      }) || [];
+    },
+
+    devicesInUse() {
+      const inUse = this.vms.reduce((inUse, vm) => {
+        if (vm.metadata.name === this.vm?.metadata?.name) {
+          return inUse;
+        }
+        const devices = get(vm, 'spec.template.spec.domain.devices.hostDevices') || [];
+
+        devices.forEach((device) => {
+          inUse[device.name] = { usedBy: [vm.metadata.name] };
+        });
+
+        return inUse;
+      }, {});
+
+      return inUse;
+    },
+
+    devicesByNode() {
+      const out = {};
+
+      this.enabledDevices.forEach((deviceCRD) => {
+        const nodeName = deviceCRD.spec?.nodeName;
+
+        if (!out[nodeName]) {
+          out[nodeName] = [deviceCRD];
+        } else {
+          out[nodeName].push(deviceCRD);
+        }
+      });
+
+      return out;
+    },
+
+    compatibleNodes() {
+      const out = [...Object.keys(this.devicesByNode)];
+
+      this.selectedDevices.forEach((deviceUid) => {
+        remove(out, (nodeName) => {
+          const device = this.enabledDevices.find(deviceCRD => deviceCRD.metadata.name === deviceUid);
+
+          return device.spec.nodeName !== nodeName;
+        });
+      });
+
+      return out;
+    },
   },
 };
 </script>
 
 <template>
-  <div> USB Devices </div>
+  <div>
+    <div class="row">
+      <div class="col span-12">
+        <Banner color="info">
+          <t k="harvester.usb.howToUseDevice" />
+        </Banner>
+        <Banner v-if="selectedDevices.length > 0" color="info">
+          <t k="harvester.usb.deviceInTheSameHost" />
+        </Banner>
+      </div>
+    </div>
+    <template v-if="enabledDevices.length">
+      <div class="row">
+        <div class="col span-6">
+          <LabeledSelect
+            v-model:value="selectedDevices"
+            :label="t('harvester.usb.available')"
+            searchable
+            multiple
+            taggable
+            :options="deviceOpts"
+            :mode="mode"
+          >
+            <template #option="option">
+              <span>{{ option.value }} <span class="text-label">({{ option.displayLabel }})</span></span>
+            </template>
+          </LabeledSelect>
+        </div>
+      </div>
+      <div v-if="compatibleNodes.length && selectedDevices.length" class="row">
+        <div class="col span-12 text-muted">
+          Compatible hosts:
+          <!-- eslint-disable-next-line vue/no-parsing-error -->
+          <span v-for="(node, idx) in compatibleNodes" :key="node">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+        </div>
+      </div>
+      <div v-else-if="selectedDevices.length" class="text-error">
+        {{ t('harvester.usb.impossibleSelection') }}
+      </div>
+      <button type="button" class="btn btn-sm role-link pl-0" @click="e=>{showMatrix = !showMatrix; e.target.blur()}">
+        {{ showMatrix ? t('harvester.usb.hideCompatibility') : t('harvester.usb.showCompatibility') }}
+      </button>
+      <div v-if="showMatrix" class="row mt-20">
+        <div class="col span-12">
+          <CompatibilityMatrix :enabled-devices="enabledDevices" :devices-by-node="devicesByNode" :devices-in-use="devicesInUse" />
+        </div>
+      </div>
+    </template>
+    <div class="row mt-20">
+      <div class="col span-12">
+        <!-- <DeviceList :schema="pciDeviceSchema" :devices="pciDevices" @submit.prevent /> -->
+      </div>
+    </div>
+  </div>
 </template>

pkg/harvester/l10n/en-us.yaml

@@ -303,8 +303,11 @@ harvester:
       suffix: to enable it to manage your PCI devices.
     noPCIPermission: Please contact your system administrator to enable the PCI devices first.
     enablePassthroughWarning: Please be careful not to use host-owned PCI devices (e.g., management and VLAN NICs). Incorrect device allocation may cause damage to your cluster, including node failure.
+
+  devices:
     matrixHostName: Host Name
     matrixDeviceClaimName: Device Claim Name
+  
   generic:
     close: Close
     open: Open
@@ -1371,6 +1374,16 @@ harvester:
       prefix: The usb addon is not enabled, click
       middle: here
       suffix: to enable it to manage your USB devices.
+    available: Available USB Devices
+    compatibleNodes: Compatible Nodes
+    impossibleSelection: 'There are no hosts with all of the selected devices.'
+    howToUseDevice: 'Use the table below to enable USB passthrough on each device you want to use in this VM.'
+    deviceInTheSameHost: 'You can only select devices on the same host.'
+    showCompatibility: Show device compatibility matrix
+    hideCompatibility: Hide device compatibility matrix
+    claimError: Error enabling passthrough on {name}
+    unclaimError: Error disabling passthrough on {name}
+    cantUnclaim: You cannot disable passthrough on a device claimed by another user.
 
   harvesterVlanConfigMigrateDialog:
     targetClusterNetwork: