Add Comptibility Matrix to USB devices tab

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

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

@@ -1,155 +0,0 @@
-<script>
-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]: {
-     *      nodes: array of devicecrd.status.nodeName's for given device,
-     *      deviceCRDs: array of all instances (pciDevice CRD) of given device
-     *      }
-     * }
-     */
-    enabledDevices: {
-      type:     Array,
-      required: true
-    },
-    /**
- * {
- *  [node name]: [devices]
- * }
- */
-    devicesByNode: {
-      type:     Object,
-      required: true
-    },
-
-    /**
- * {
- *  [deviceCRD.status.resourceName]: {
- *      count: number of this device in use by other vms
- *      usedBy: [names of all vms using this device]
- *    }
- * }
- */
-
-    devicesInUse: {
-      type:    Object,
-      default: () => {}
-    }
-  },
-
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-    allNodeNames() {
-      return Object.keys(this.devicesByNode);
-    },
-
-    allDeviceIds() {
-      return Object.keys(this.uniqueDevices);
-    }
-  },
-
-  methods: {
-    nodeNameFromId(id) {
-      return this.devicesByNode[id]?.name;
-    },
-
-    nodeHasDevice(nodeName, deviceCRD) {
-      return deviceCRD.status.nodeName === nodeName;
-    },
-
-    noneAvailable(deviceCRD) {
-      const name = deviceCRD.metadata?.name;
-
-      return !!this.devicesInUse[name];
-    },
-
-    deviceTooltip(deviceCRD) {
-      return `${ deviceCRD?.status?.resourceName }<br/>${ deviceCRD?.status?.description }`;
-    }
-  }
-};
-</script>
-
-<template>
-  <div class="compat-matrix">
-    <div class="device-col node-names">
-      <div class="blank-corner">
-        <div class="text-right">
-          {{ t('harvester.pci.matrixDeviceClaimName') }}
-        </div>
-        <div>{{ t('harvester.pci.matrixHostName') }}</div>
-      </div>
-      <div  v-for="(nodeName, i) in allNodeNames" :key="i" >
-        <span>  {{ nodeName }}</span>
-      </div>
-    </div>
-    <div  v-for="(deviceCRD, i) in enabledDevices" :key="i" >
-      <div v-clean-tooltip="deviceTooltip(deviceCRD)" class="compat-cell device-label" :class="{'text-muted': noneAvailable(deviceCRD)}">
-        {{ deviceCRD.metadata.name }}
-      </div>
-      <div
-         v-for="(nodeName, i) in allNodeNames" :key="i" class="compat-cell"
-        :class="{'has-device': nodeHasDevice(nodeName, deviceCRD)}"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang='scss'>
-.compat-matrix {
-    display: flex;
-}
-
-.device-col {
-    display: flex;
-    flex-direction: column;
-
-    border-right: 1px solid var(--border);
-
-    &>*{
-        border-bottom: 1px solid var(--border);
-    }
-}
-
-.compat-cell {
-    flex-basis: 1em;
-    padding: 0px 10px 0px 10px;
-
-    &.has-device {
-        background-color: var(--info-banner-bg);
-    }
-}
-
-.node-label, .device-label {
-    display: flex;
-    align-items: center;
-    color: var(--input-label);
-}
-
-.node-label{
-    padding: 0 10px;
-    justify-content: center;
-}
-
-.node-label, .device-label, .compat-cell, .blank-corner {
-    flex-basis: calc(2em + 10px);
-}
-
-.blank-corner {
-  background: linear-gradient(
-              to top right,
-              #fff 0%,
-              #fff calc(50% - 1px),
-                var(--body-text) 50%,
-              #fff calc(50% + 1px),
-              #fff 100%
-           );
-
-  DIV.text-right {
-    padding-left: 80px;
-  }
-}
-</style>

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';