feat: add vGPU filter button and hide the enable/disable passthrough in PCIDevice page (#729) (#732)

* feat: add another filter button



* feat: add feature falg to hide vGPU enable/disable actions in PCIDevices page



* refactor: update with conditionally rendering



---------


(cherry picked from commit 23344e0c0759e970bbdc88bc463774053448e0a1)

Signed-off-by: Andy Lee <andy.lee@suse.com>
Co-authored-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/config/feature-flags.js

@@ -61,7 +61,8 @@ const FEATURE_FLAGS = {
   'v1.8.0': [
     'hotplugCdRom',
     'supportBundleFileNameSetting',
-    'clusterRegistrationTLSVerify'
+    'clusterRegistrationTLSVerify',
+    'vGPUAsPCIDevice',
   ],
 };
 

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

@@ -31,6 +31,7 @@ export default {
     const _hash = {
       pciclaims: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PCI_CLAIM }),
       sriovs:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOV }),
+      srigpuovs:    this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOVGPU_DEVICE }),
     };
 
     await allHash(_hash);
@@ -106,19 +107,32 @@ export default {
   },
 
   computed: {
-    parentSriovOptions() {
+    allSriovs() {
       const inStore = this.$store.getters['currentProduct'].inStore;
-      const allSriovs = this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
 
-      return allSriovs.map((sriov) => {
+      return this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
-        return sriov.id;
+    },
-      });
+    allSriovGPUs() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+
+      return this.$store.getters[`${ inStore }/all`](HCI.SR_IOVGPU_DEVICE) || [];
+    },
+    parentSriovOptions() {
+      return this.allSriovs.map((sriov) => sriov.id);
+    },
+    parentSriovGPUOptions() {
+      return this.allSriovGPUs.map((sriovgpu) => sriovgpu.id);
     },
     parentSriovLabel() {
       return HCI_ANNOTATIONS.PARENT_SRIOV;
-    }
     },
-
+    parentSriovGPULabel() {
+      return HCI_ANNOTATIONS.PARENT_SRIOV_GPU;
+    },
+    vGPUAsPCIDeviceEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+    },
+  },
   methods: {
     enableGroup(rows = []) {
       const row = rows[0];
@@ -206,6 +220,15 @@ export default {
         :rows="rows"
         @change-rows="changeRows"
       />
+      <FilterBySriov
+        v-if="vGPUAsPCIDeviceEnabled"
+        ref="filterByParentSRIOVGPU"
+        :parent-sriov-options="parentSriovGPUOptions"
+        :parent-sriov-label="parentSriovGPULabel"
+        :label="t('harvester.sriov.parentSriovGPU')"
+        :rows="rows"
+        @change-rows="changeRows"
+      />
     </template>
   </ResourceTable>
 </template>

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

@@ -8,6 +8,7 @@ import { set } from '@shell/utils/object';
 import { HCI } from '../../../types';
 import DeviceList from './DeviceList';
 import CompatibilityMatrix from '../CompatibilityMatrix';
+import MessageLink from '@shell/components/MessageLink';
 
 export default {
   name:       'VirtualMachinePCIDevices',
@@ -15,7 +16,8 @@ export default {
     LabeledSelect,
     DeviceList,
     CompatibilityMatrix,
-    Banner
+    Banner,
+    MessageLink
   },
   props: {
     mode: {
@@ -138,6 +140,13 @@ export default {
       return inUse;
     },
 
+    toVGpuDevicesPage() {
+      return {
+        name:   'harvester-c-cluster-resource',
+        params: { cluster: this.$store.getters['clusterId'], resource: HCI.VGPU_DEVICE },
+      };
+    },
+
     devicesByNode() {
       return this.enabledDevices?.reduce((acc, device) => {
         const nodeName = device.status?.nodeName;
@@ -232,7 +241,12 @@ export default {
       <div class="row">
         <div class="col span-12">
           <Banner color="info">
-            <t k="harvester.pci.howToUseDevice" />
+            <MessageLink
+              :to="toVGpuDevicesPage"
+              prefix-label="harvester.pci.howToUseDevice.prefix"
+              middle-label="harvester.pci.howToUseDevice.middle"
+              suffix-label="harvester.pci.howToUseDevice.suffix"
+            />
           </Banner>
           <Banner
             v-if="selectedDevices.length > 0"

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

@@ -211,6 +211,10 @@ export default {
 
       return false;
     },
+
+    vGPUAsPCIDeviceEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+    },
     usbPassthroughEnabled() {
       return this.$store.getters['harvester-common/getFeatureEnabled']('usbPassthrough');
     },
@@ -740,7 +744,7 @@ export default {
       </Tab>
 
       <Tab
-        v-if="enabledSriovgpu"
+        v-if="enabledSriovgpu && !vGPUAsPCIDeviceEnabled"
         :label="t('harvester.tab.vGpuDevices')"
         name="vGpuDevices"
         :weight="-6"

pkg/harvester/l10n/en-us.yaml

@@ -355,7 +355,10 @@ harvester:
     available: Available Devices
     compatibleNodes: Compatible Nodes
     impossibleSelection: 'There are no hosts with all of the selected devices.'
-    howToUseDevice: 'Use the table below to enable PCI passthrough on each device you want to use in this virtual machine.'
+    howToUseDevice: 
+      prefix: 'Use the table below to enable PCI passthrough on each device you want to use in this virtual machine.<br>For vGPU devices, please enable them on the'
+      middle: vGPU Devices 
+      suffix: page first.
     deviceInTheSameHost: 'You can only select devices on the same host.'
     oldFormatDevices:
       help: |-
@@ -1832,7 +1835,8 @@ harvester:
     numVFs: Number Of Virtual Functions
     vfAddresses: Virtual Functions Addresses
     showMore: Show More
-    parentSriov: Filter By Parent SR-IOV
+    parentSriov: Filter By Parent SR-IOV Netork Device
+    parentSriovGPU: Filter By Parent SR-IOV GPU Device
 
   sriovgpu:
     label: SR-IOV GPU Devices

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

@@ -1,6 +1,7 @@
 import SteveModel from '@shell/plugins/steve/steve-class';
 import { escapeHtml } from '@shell/utils/string';
 import { HCI } from '../types';
+import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 
 const STATUS_DISPLAY = {
   enabled: {
@@ -32,7 +33,7 @@ export default class PCIDevice extends SteveModel {
     out.push(
       {
         action:     'enablePassthroughBulk',
-        enabled:    !this.isEnabling,
+        enabled:    !this.isEnabling && !this.isvGPUDevice,
         icon:       'icon icon-fw icon-dot',
         label:      'Enable Passthrough',
         bulkable:   true,
@@ -41,7 +42,7 @@ export default class PCIDevice extends SteveModel {
       },
       {
         action:   'disablePassthrough',
-        enabled:  this.isEnabling && this.claimedByMe,
+        enabled:  this.isEnabling && this.claimedByMe && !this.isvGPUDevice,
         icon:     'icon icon-fw icon-dot-open',
         label:    'Disable Passthrough',
         bulkable: true,
@@ -52,6 +53,14 @@ export default class PCIDevice extends SteveModel {
     return out;
   }
 
+  get isvGPUDevice() {
+    if (!this.vGPUAsPCIDeviceFeatureEnabled) {
+      return false;
+    }
+
+    return !!this.metadata?.labels?.[HCI_ANNOTATIONS.PARENT_SRIOV_GPU] || this.status?.resourceName.includes('nvidia.com');
+  }
+
   get canYaml() {
     return false;
   }
@@ -176,6 +185,10 @@ export default class PCIDevice extends SteveModel {
     return this.status?.description;
   }
 
+  get vGPUAsPCIDeviceFeatureEnabled() {
+    return this.$rootGetters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+  }
+
   showDetachWarning() {
     this.$dispatch('growl/warning', {
       title:   this.$rootGetters['i18n/t']('harvester.pci.detachWarning.title'),