mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-01 03:36:04 +08:00
Add pkg/harvester components + shell portings - 1
Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
This commit is contained in:
Francesco Torchia
+157
@@ -0,0 +1,157 @@
|
||||
<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 in allNodeNames" :key="nodeName" class="node-label">
|
||||
<span> {{ nodeName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="deviceCRD in enabledDevices" :key="deviceCRD.metadata.name" class="device-col">
|
||||
<div v-clean-tooltip="deviceTooltip(deviceCRD)" class="compat-cell device-label" :class="{'text-muted': noneAvailable(deviceCRD)}">
|
||||
{{ deviceCRD.metadata.name }}
|
||||
</div>
|
||||
<div
|
||||
v-for="nodeName in allNodeNames"
|
||||
:key="nodeName"
|
||||
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>
|
||||
+189
@@ -0,0 +1,189 @@
|
||||
<script>
|
||||
import ResourceTable from '@shell/components/ResourceTable';
|
||||
import FilterBySriov from '../../../components/FilterBySriov';
|
||||
import { HCI } from '../../../types';
|
||||
import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
|
||||
import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
|
||||
|
||||
export default {
|
||||
name: 'ListPciDevices',
|
||||
|
||||
components: { ResourceTable, FilterBySriov },
|
||||
|
||||
props: {
|
||||
schema: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
|
||||
devices: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
async fetch() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
const _hash = {
|
||||
pciclaims: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.PCI_CLAIM }),
|
||||
sriovs: this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SR_IOV }),
|
||||
};
|
||||
|
||||
await allHash(_hash);
|
||||
},
|
||||
|
||||
data() {
|
||||
const isSingleProduct = this.$store.getters['isSingleProduct'];
|
||||
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: 'address',
|
||||
label: 'Address',
|
||||
value: 'status.address',
|
||||
sort: ['status.address']
|
||||
},
|
||||
{
|
||||
name: 'vendorid',
|
||||
label: 'Vendor ID',
|
||||
value: 'status.vendorId',
|
||||
sort: ['status.vendorId', 'status.deviceId']
|
||||
},
|
||||
{
|
||||
name: 'deviceid',
|
||||
label: 'Device ID',
|
||||
value: 'status.deviceId',
|
||||
sort: ['status.deviceId', 'status.vendorId']
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
if (!isSingleProduct) {
|
||||
headers.push( {
|
||||
name: 'claimed',
|
||||
label: 'Claimed By',
|
||||
value: 'passthroughClaim.userName',
|
||||
sort: ['passthroughClaim.userName'],
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
headers,
|
||||
rows: [],
|
||||
parentSriov: null,
|
||||
filterRows: []
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
devices: {
|
||||
handler(v) {
|
||||
this.rows = v;
|
||||
this.filterRows = this.rows;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
parentSriovOptions() {
|
||||
const inStore = this.$store.getters['currentProduct'].inStore;
|
||||
const allSriovs = this.$store.getters[`${ inStore }/all`](HCI.SR_IOV) || [];
|
||||
|
||||
return allSriovs.map((sriov) => {
|
||||
return sriov.id;
|
||||
});
|
||||
},
|
||||
parentSriovLabel() {
|
||||
return HCI_ANNOTATIONS.PARENT_SRIOV;
|
||||
}
|
||||
},
|
||||
|
||||
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, parentSriov) {
|
||||
this.$set(this, 'filterRows', filterRows);
|
||||
this.$set(this, 'parentSriov', parentSriov);
|
||||
},
|
||||
|
||||
sortGenerationFn() {
|
||||
let base = defaultTableSortGenerationFn(this.schema, this.$store);
|
||||
|
||||
if (this.parentSriov) {
|
||||
base += this.parentSriov;
|
||||
}
|
||||
|
||||
return base;
|
||||
},
|
||||
}
|
||||
};
|
||||
</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 #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.pci.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.pci.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">—</span>
|
||||
</template>
|
||||
<template #more-header-middle>
|
||||
<FilterBySriov
|
||||
ref="filterByParentSRIOV"
|
||||
:parent-sriov-options="parentSriovOptions"
|
||||
:parent-sriov-label="parentSriovLabel"
|
||||
:label="t('harvester.sriov.parentSriov')"
|
||||
:rows="rows"
|
||||
@change-rows="changeRows"
|
||||
/>
|
||||
</template>
|
||||
</ResourceTable>
|
||||
</template>
|
||||
@@ -0,0 +1,269 @@
|
||||
<script>
|
||||
import { _EDIT } from '@shell/config/query-params';
|
||||
import { allHash } from '@shell/utils/promise';
|
||||
import { HCI } from '../../../types';
|
||||
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';
|
||||
|
||||
export default {
|
||||
name: 'VirtualMachinePCIDevices',
|
||||
components: {
|
||||
LabeledSelect,
|
||||
DeviceList,
|
||||
CompatibilityMatrix,
|
||||
Banner
|
||||
},
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: _EDIT
|
||||
},
|
||||
// spec.template.spec
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
|
||||
vm: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
|
||||
async fetch() {
|
||||
const hash = {
|
||||
// claims fetched here so synchronous pciDevice model property works
|
||||
pciDevices: this.$store.dispatch('harvester/findAll', { type: HCI.PCI_DEVICE }),
|
||||
claims: this.$store.dispatch('harvester/findAll', { type: HCI.PCI_CLAIM }),
|
||||
vms: this.$store.dispatch(`harvester/findAll`, { type: HCI.VM })
|
||||
|
||||
};
|
||||
|
||||
const res = await allHash(hash);
|
||||
|
||||
for (const key in res) {
|
||||
this[key] = res[key];
|
||||
}
|
||||
|
||||
const selectedDevices = [];
|
||||
const oldFormatDevices = [];
|
||||
|
||||
(this.value?.domain?.devices?.hostDevices || []).forEach(({ name, deviceName }) => {
|
||||
const checkName = (deviceName || '').split('/')?.[1];
|
||||
|
||||
if (checkName && name.includes(checkName)) {
|
||||
oldFormatDevices.push(name);
|
||||
} else if (this.enabledDevices.find(device => device?.metadata?.name === name)) {
|
||||
selectedDevices.push(name);
|
||||
}
|
||||
});
|
||||
|
||||
if (oldFormatDevices.length > 0) {
|
||||
this.oldFormatDevices = oldFormatDevices;
|
||||
} else {
|
||||
this.selectedDevices = selectedDevices;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
pciDevices: [],
|
||||
claims: [],
|
||||
vms: [],
|
||||
selectedDevices: [],
|
||||
pciDeviceSchema: this.$store.getters['harvester/schemaFor'](HCI.PCI_DEVICE),
|
||||
showMatrix: false,
|
||||
oldFormatDevices: [],
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectedDevices(neu) {
|
||||
const formatted = neu.map((selectedDevice) => {
|
||||
const deviceCRD = this.enabledDevices.find(device => device.metadata.name === selectedDevice);
|
||||
const deviceName = deviceCRD?.status?.resourceName;
|
||||
|
||||
return {
|
||||
deviceName,
|
||||
name: deviceCRD?.metadata.name,
|
||||
};
|
||||
});
|
||||
|
||||
set(this.value.domain.devices, 'hostDevices', formatted);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// user can only select devices for whcih pci passthrough is enabled/claimed by them - determined by finding the associated passthrough CRD
|
||||
enabledDevices() {
|
||||
return this.pciDevices.filter((device) => {
|
||||
return device.isEnabled && device.claimedByMe;
|
||||
}) || [];
|
||||
},
|
||||
|
||||
// find devices in use by other VMs and sum the number of each device already in use
|
||||
devicesInUse() {
|
||||
const inUse = this.vms.reduce((inUse, vm) => {
|
||||
// dont count devices in this vm as 'disabled' if they're just being used in the vm currently being edited
|
||||
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.status?.nodeName;
|
||||
|
||||
if (!out[nodeName]) {
|
||||
out[nodeName] = [deviceCRD];
|
||||
} else {
|
||||
out[nodeName].push(deviceCRD);
|
||||
}
|
||||
});
|
||||
|
||||
return out;
|
||||
},
|
||||
|
||||
// determine which nodes contain all devices selected
|
||||
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.status.nodeName !== nodeName;
|
||||
});
|
||||
});
|
||||
|
||||
return out;
|
||||
},
|
||||
|
||||
// format an array of available devices for the dropdown
|
||||
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,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
oldFormatDevicesHTML() {
|
||||
return this.oldFormatDevices.map((device) => {
|
||||
return `<li>${ device }</li>`;
|
||||
}).join('');
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
nodeNameFromUid(uid) {
|
||||
for (const deviceUid in this.uniqueDevices) {
|
||||
const nodes = this.uniqueDevices[deviceUid].nodes;
|
||||
const thisNode = nodes.find(node => node.systemUUID === uid);
|
||||
|
||||
if (thisNode) {
|
||||
return thisNode.name;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-if="oldFormatDevices.length > 0"
|
||||
class="row"
|
||||
>
|
||||
<div class="col span-12">
|
||||
<Banner color="warning">
|
||||
<p v-clean-html="t('harvester.pci.oldFormatDevices.help', {oldFormatDevicesHTML}, true)" />
|
||||
</Banner>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="row">
|
||||
<div class="col span-12">
|
||||
<Banner color="info">
|
||||
<t k="harvester.pci.howToUseDevice" />
|
||||
</Banner>
|
||||
<Banner v-if="selectedDevices.length > 0" color="info">
|
||||
<t k="harvester.pci.deviceInTheSameHost" />
|
||||
</Banner>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="enabledDevices.length">
|
||||
<div class="row">
|
||||
<div class="col span-6">
|
||||
<LabeledSelect
|
||||
v-model="selectedDevices"
|
||||
label="Available PCI Devices"
|
||||
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.pci.impossibleSelection') }}
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm role-link pl-0" @click="e=>{showMatrix = !showMatrix; e.target.blur()}">
|
||||
{{ showMatrix ? t('harvester.pci.hideCompatibility') : t('harvester.pci.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>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user