Refactoring USB Device list component; add USBDevice model; add usbclaim type

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

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

@@ -0,0 +1,102 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import { HCI } from '../../../types';
+import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
+import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
+
+export default {
+  name: 'ListUsbDevices',
+
+  components: { ResourceTable },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    devices: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  async fetch() {
+    const inStore = this.$store.getters['currentProduct'].inStore;
+
+    await this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.USB_CLAIM });
+  },
+
+  data() {
+    const isSingleProduct = this.$store.getters['isSingleProduct'];
+
+    // TODO add new column
+    const headers = [
+      { ...STATE },
+      SIMPLE_NAME,
+    ];
+
+    if (!isSingleProduct) {
+      headers.push( {
+        name:  'claimed',
+        label: 'Claimed By',
+        value: 'passthroughClaim.userName',
+        sort:  ['passthroughClaim.userName'],
+
+      });
+    }
+
+    return {
+      headers,
+      rows:        [],
+      filterRows:  []
+    };
+  },
+
+  watch: {
+    devices: {
+      handler(v) {
+        this.rows = v;
+        this.filterRows = this.rows;
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    changeRows(filterRows) {
+      this.$set(this, 'filterRows', filterRows);
+    },
+
+    sortGenerationFn() {
+      let base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      if (this.parentSriov) {
+        base += this.parentSriov;
+      }
+
+      return base;
+    },
+  },
+
+  typeDisplay() {
+    return this.t('harvester.usb.label');
+  }
+};
+</script>
+
+<template>
+  <ResourceTable
+    :headers="headers"
+    :schema="schema"
+    :rows="filterRows"
+    :use-query-params-for-simple-filtering="true"
+    :sort-generation-fn="sortGenerationFn"
+    :rows-per-page="10"
+  >
+    <template #cell:claimed="{row}">
+      <span v-if="row.isEnabled">{{ row.claimedBy }}</span>
+      <span v-else class="text-muted">&mdash;</span>
+    </template>
+  </ResourceTable>
+</template>

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

@@ -6,12 +6,14 @@ 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';
+import DeviceList from './DeviceList';
 
 export default {
   name:       'VirtualMachineUSBDevices',
   components: {
     Banner,
     CompatibilityMatrix,
+    DeviceList,
     LabeledSelect,
   },
   props: {
@@ -186,7 +188,7 @@ export default {
     </template>
     <div class="row mt-20">
       <div class="col span-12">
-        <!-- <DeviceList :schema="pciDeviceSchema" :devices="pciDevices" @submit.prevent /> -->
+        <DeviceList :schema="deviceSchema" :devices="devices" @submit.prevent />
       </div>
     </div>
   </div>

pkg/harvester/list/devices.harvesterhci.io.usbdevice.vue

@@ -5,17 +5,15 @@ import { allHash } from '@shell/utils/promise';
 import Banner from '@components/Banner/Banner.vue';
 import Loading from '@shell/components/Loading';
 import MessageLink from '@shell/components/MessageLink';
-import ResourceTable from '@shell/components/ResourceTable';
 import { ADD_ONS } from '../config/harvester-map';
 
 export default {
-  name: 'ListUSBDevices',
+  name: 'ListUsbDevicePage',
 
   components: {
     Banner,
     Loading,
     MessageLink,
-    ResourceTable
   },
 
   async fetch() {
@@ -84,14 +82,5 @@ export default {
       />
     </Banner>
   </div>
-  <ResourceTable
-    v-else-if="hasSchema"
-    :headers="headers"
-    :schema="schema"
-    :rows="rows"
-    :use-query-params-for-simple-filtering="true"
-    :sort-generation-fn="sortGenerationFn"
-    :rows-per-page="10"
-    @submit.prevent
-  />
+  <VGpuDeviceList v-else-if="hasSchema" :devices="rows" :schema="schema" />
 </template>

pkg/harvester/models/devices.harvesterhci.io.usbdevice.js

@@ -0,0 +1,158 @@
+import SteveModel from '@shell/plugins/steve/steve-class';
+import { escapeHtml } from '@shell/utils/string';
+import { HCI } from '../types';
+
+const STATUS_DISPLAY = {
+  enabled: {
+    displayKey: 'generic.enabled',
+    color:      'bg-success'
+  },
+  pending: {
+    displayKey: 'generic.inProgress',
+    color:      'bg-info'
+  },
+  disabled: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  },
+  error: {
+    displayKey: 'generic.disabled',
+    color:      'bg-warning'
+  }
+};
+
+/**
+ * Class representing USB Device resource.
+ * @extends SteveModal
+ */
+export default class USBDevice extends SteveModel {
+  get _availableActions() {
+    const out = super._availableActions;
+
+    out.push(
+      {
+        action:     'enablePassthroughBulk',
+        enabled:    !this.isEnabling,
+        icon:       'icon icon-fw icon-dot',
+        label:      'Enable Passthrough',
+        bulkable:   true,
+        bulkAction: 'enablePassthroughBulk'
+      },
+      {
+        action:   'disablePassthrough',
+        enabled:  this.isEnabling && this.claimedByMe,
+        icon:     'icon icon-fw icon-dot-open',
+        label:    'Disable Passthrough',
+        bulkable: true
+      },
+    );
+
+    return out;
+  }
+
+  get canYaml() {
+    return false;
+  }
+
+  get canDelete() {
+    return false;
+  }
+
+  goToDetail() {
+    return false;
+  }
+
+  goToEdit() {
+    return false;
+  }
+
+  get passthroughClaim() {
+    const passthroughClaims = this.$getters['all'](HCI.USB_CLAIM) || [];
+
+    return !!this.status && passthroughClaims.find(req => req?.spec?.nodeName === this.status?.nodeName && req?.spec?.address === this.status?.address);
+  }
+
+  // this is an id for each 'type' of device - there may be multiple instances of device CRs
+  get uniqueId() {
+    return `${ this.status?.vendorId }:${ this.status?.deviceId }`;
+  }
+
+  get claimedBy() {
+    return this.passthroughClaim?.spec?.userName;
+  }
+
+  get claimedByMe() {
+    if (!this.passthroughClaim) {
+      return false;
+    }
+    const isSingleProduct = this.$rootGetters['isSingleProduct'];
+    let userName = 'admin';
+
+    // if this is imported Harvester, there may be users other than admin
+    if (!isSingleProduct) {
+      const user = this.$rootGetters['auth/v3User'];
+
+      userName = user?.username || user?.id;
+    }
+
+    return this.claimedBy === userName;
+  }
+
+  // isEnabled controls visibility in vm create page & ability to delete claim
+  // isEnabling controls ability to add claim
+  // there will be a brief period where isEnabling === true && isEnabled === false
+  get isEnabled() {
+    return !!this.passthroughClaim?.status?.passthroughEnabled;
+  }
+
+  get isEnabling() {
+    return !!this.passthroughClaim;
+  }
+
+  // map status.passthroughEnabled to disabled/enabled & overwrite default dash colors
+  get claimStatusDisplay() {
+    if (!this.passthroughClaim) {
+      return STATUS_DISPLAY.disabled;
+    }
+    if (this.isEnabled) {
+      return STATUS_DISPLAY.enabled;
+    }
+
+    return STATUS_DISPLAY.pending;
+  }
+
+  get stateDisplay() {
+    const t = this.$rootGetters['i18n/t'];
+
+    return t(this.claimStatusDisplay.displayKey);
+  }
+
+  get stateBackground() {
+    return this.claimStatusDisplay.color;
+  }
+
+  // 'enable' passthrough creates the passthrough claim CRD -
+  enablePassthroughBulk(resources = this) {
+    this.$dispatch('promptModal', {
+      resources,
+      component: 'EnablePassthrough'
+    });
+  }
+
+  // 'disable' passthrough deletes claim
+  // backend should return error if device is in use
+  async disablePassthrough() {
+    try {
+      if (!this.claimedByMe) {
+        throw new Error(this.$rootGetters['i18n/t']('harvester.usb.cantUnclaim', { name: escapeHtml(this.metadata.name) }));
+      } else {
+        await this.passthroughClaim.remove();
+      }
+    } catch (err) {
+      this.$dispatch('growl/fromError', {
+        title: this.$rootGetters['i18n/t']('harvester.usb.unclaimError', { name: escapeHtml(this.metadata.name) }),
+        err,
+      }, { root: true });
+    }
+  }
+}

pkg/harvester/types.ts

@@ -39,6 +39,7 @@ export const HCI = {
   VGPU_DEVICE:        'devices.harvesterhci.io.vgpudevice',
   SR_IOVGPU_DEVICE:   'devices.harvesterhci.io.sriovgpudevice',
   USB_DEVICE:         'devices.harvesterhci.io.usbdevice',
+  USB_CLAIM:          'devices.harvesterhci.io.usbdeviceclaim',
   VLAN_CONFIG:        'network.harvesterhci.io.vlanconfig',
   VLAN_STATUS:        'network.harvesterhci.io.vlanstatus',
   ADD_ONS:            'harvesterhci.io.addon',