public/harvester-ui-extension
1
0
Fork 0
mirror of https://github.com/harvester/harvester-ui-extension.git synced 2025-12-13 21:21:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Comptibility Matrix to USB devices tab

Browse Source 
Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
This commit is contained in:
Francesco Torchia 2024-07-18 12:48:26 +02:00
parent ee963b7c1c
commit 5b7a934ce1
No known key found for this signature in database
GPG Key ID: E6D011B7415D4393
4 changed files with 148 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/CompatibilityMatrix.vue → pkg/harvester/edit/kubevirt.io.virtualmachine/CompatibilityMatrix.vue
View File

@ -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>

2
pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
View File

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

130
pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineUSBDevices/index.vue
View File

@ -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>

13
pkg/harvester/l10n/en-us.yaml
View File

@ -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: