Update USB devices

- Add columns and filters
- Filter other vm devices in pci and usb devices pages when selecting devices

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

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

@@ -34,6 +34,36 @@ export default {
     const headers = [
       { ...STATE },
       SIMPLE_NAME,
+      {
+        name:     'description',
+        labelKey: 'tableHeaders.description',
+        value:    'status.description',
+        sort:     ['status.description']
+      },
+      {
+        name:     'node',
+        labelKey: 'tableHeaders.node',
+        value:    'status.nodeName',
+        sort:     ['status.nodeName']
+      },
+      {
+        name:  'pciAddress',
+        label: 'Address',
+        value: 'status.pciAddress',
+        sort:  ['status.pciAddress']
+      },
+      {
+        name:  'vendorID',
+        label: 'Vendor ID',
+        value: 'status.vendorID',
+        sort:  ['status.vendorID', 'status.productID']
+      },
+      {
+        name:  'productID',
+        label: 'Product ID',
+        value: 'status.productID',
+        sort:  ['status.productID', 'status.vendorID']
+      },
     ];
 
     if (!isSingleProduct) {
@@ -58,12 +88,32 @@ export default {
       handler(v) {
         this.rows = v;
         this.filterRows = this.rows;
+
+        console.log(this.filterRows)
       },
       immediate: true,
     },
   },
 
   methods: {
+    enableGroup(rows = []) {
+      const row = rows[0];
+
+      if (row) {
+        row.enablePassthroughBulk(rows);
+      }
+    },
+    disableGroup(rows = []) {
+      rows.forEach((row) => {
+        if (row.passthroughClaim) {
+          row.disablePassthrough();
+        }
+      });
+    },
+    groupIsAllEnabled(rows = []) {
+      return !rows.find(device => !device.passthroughClaim);
+    },
+
     changeRows(filterRows) {
       this.$set(this, 'filterRows', filterRows);
     },
@@ -94,6 +144,17 @@ export default {
     :sort-generation-fn="sortGenerationFn"
     :rows-per-page="10"
   >
+    <template #group-by="{group}">
+      <div :ref="group.key" v-trim-whitespace class="group-tab">
+        <button v-if="groupIsAllEnabled(group.rows)" type="button" class="btn btn-sm role-secondary mr-5" @click="e=>{disableGroup(group.rows); e.target.blur()}">
+          {{ t('harvester.usb.disableGroup') }}
+        </button>
+        <button v-else type="button" class="btn btn-sm role-secondary mr-5" @click="e=>{enableGroup(group.rows); e.target.blur()}">
+          {{ t('harvester.usb.enableGroup') }}
+        </button>
+        <span v-clean-html="group.key" />
+      </div>
+    </template>
     <template #cell:claimed="{row}">
       <span v-if="row.isEnabled">{{ row.claimedBy }}</span>
       <span v-else class="text-muted">&mdash;</span>