mirror of
https://github.com/harvester/harvester-ui-extension.git
synced 2026-10-13 09:36:05 +08:00
feat: expose KubeVirt high-performance storage features in VM and Volume UI (backport #1133) (#1191)
Signed-off-by: Jack Yu <jack.yu@suse.com> Co-authored-by: Alejandro Bonilla <abonilla@suse.com> Co-authored-by: Jack Yu <jack.yu@suse.com>
This commit is contained in:
mergify[bot]
co-authored by
Alejandro Bonilla
Jack Yu
Alejandro Bonilla
Jack Yu
parent
fb190996b6
commit
db27a174f9
+191
@@ -0,0 +1,191 @@
|
||||
<script>
|
||||
import InfoBox from '@shell/components/InfoBox';
|
||||
import LabeledSelect from '@shell/components/form/LabeledSelect';
|
||||
import { LabeledInput } from '@components/Form/LabeledInput';
|
||||
import { Checkbox } from '@components/Form/Checkbox';
|
||||
import { Banner } from '@components/Banner';
|
||||
import { _VIEW } from '@shell/config/query-params';
|
||||
import { IO_THREADS_POLICY } from '../../../config/harvester-map';
|
||||
|
||||
export default {
|
||||
name: 'VMPerformanceOptions',
|
||||
|
||||
components: {
|
||||
InfoBox, LabeledSelect, LabeledInput, Checkbox, Banner
|
||||
},
|
||||
|
||||
emits: ['update:blockMultiQueue', 'update:ioThreadsPolicy', 'update:ioThreadCount'],
|
||||
|
||||
props: {
|
||||
blockMultiQueue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
ioThreadsPolicy: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
ioThreadCount: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create'
|
||||
},
|
||||
|
||||
// Whether the current disk set contains a virtio disk (VM context only).
|
||||
hasVirtioDisk: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
// Whether any disk requests a dedicated I/O thread (drives the auto-enable hint).
|
||||
hasDedicatedIothread: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
// These are specialist tuning options, so keep the panel collapsed unless the
|
||||
// VM already has something configured.
|
||||
return { expanded: !!(this.blockMultiQueue || this.ioThreadsPolicy) };
|
||||
},
|
||||
|
||||
computed: {
|
||||
isView() {
|
||||
return this.mode === _VIEW;
|
||||
},
|
||||
|
||||
storagePerformanceEnabled() {
|
||||
return this.$store.getters['harvester-common/getFeatureEnabled']('highPerformanceStorage');
|
||||
},
|
||||
|
||||
ioThreadsPolicyOptions() {
|
||||
return IO_THREADS_POLICY.map((value) => ({
|
||||
label: value === '' ? this.t('harvester.virtualMachine.volume.diskPerformance.ioThreadsPolicy.default') : this.t(`harvester.virtualMachine.volume.diskPerformance.ioThreadsPolicy.${ value }`),
|
||||
value,
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
// Block Multi-Queue only applies to virtio disks. If the last virtio disk is
|
||||
// removed while it is enabled, clear it so the VM is not left with an invalid
|
||||
// setting the disabled checkbox can no longer surface.
|
||||
hasVirtioDisk(neu) {
|
||||
if (!neu && this.blockMultiQueue) {
|
||||
this.$emit('update:blockMultiQueue', false);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InfoBox
|
||||
v-if="storagePerformanceEnabled && (!isView || blockMultiQueue || !!ioThreadsPolicy)"
|
||||
class="vm-perf mt-10"
|
||||
>
|
||||
<button
|
||||
v-if="!isView"
|
||||
type="button"
|
||||
class="btn btn-sm role-link expand-toggle"
|
||||
:aria-expanded="expanded"
|
||||
:aria-label="expanded ? t('harvester.virtualMachine.volume.diskPerformance.collapse') : t('harvester.virtualMachine.volume.diskPerformance.expand')"
|
||||
@click.prevent="expanded = !expanded"
|
||||
>
|
||||
<i
|
||||
class="icon"
|
||||
:class="expanded ? 'icon-chevron-down' : 'icon-chevron-right'"
|
||||
/>
|
||||
{{ t('harvester.virtualMachine.volume.diskPerformance.title') }}
|
||||
</button>
|
||||
<h3
|
||||
v-else
|
||||
class="mb-5"
|
||||
>
|
||||
{{ t('harvester.virtualMachine.volume.diskPerformance.title') }}
|
||||
</h3>
|
||||
|
||||
<template v-if="expanded || isView">
|
||||
<p class="text-muted mb-15 mt-10">
|
||||
{{ t('harvester.virtualMachine.volume.diskPerformance.description') }}
|
||||
</p>
|
||||
|
||||
<div class="row mb-10">
|
||||
<div
|
||||
class="col span-12"
|
||||
data-testid="input-vm-block-multi-queue"
|
||||
>
|
||||
<Checkbox
|
||||
:value="blockMultiQueue"
|
||||
:label="t('harvester.virtualMachine.volume.diskPerformance.blockMultiQueue.label')"
|
||||
:tooltip="t('harvester.virtualMachine.volume.diskPerformance.blockMultiQueue.tip')"
|
||||
:mode="mode"
|
||||
:disabled="!hasVirtioDisk"
|
||||
@update:value="$emit('update:blockMultiQueue', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Banner
|
||||
v-if="!hasVirtioDisk && !isView"
|
||||
color="info"
|
||||
:label="t('harvester.virtualMachine.volume.diskPerformance.blockMultiQueue.noVirtioTip')"
|
||||
/>
|
||||
|
||||
<div class="row mb-10">
|
||||
<div
|
||||
class="col span-6"
|
||||
data-testid="input-vm-iothreads-policy"
|
||||
>
|
||||
<LabeledSelect
|
||||
:value="ioThreadsPolicy"
|
||||
:label="t('harvester.virtualMachine.volume.diskPerformance.ioThreadsPolicy.label')"
|
||||
:tooltip="t('harvester.virtualMachine.volume.diskPerformance.ioThreadsPolicy.tip')"
|
||||
:options="ioThreadsPolicyOptions"
|
||||
:mode="mode"
|
||||
@update:value="$emit('update:ioThreadsPolicy', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="ioThreadsPolicy === 'supplementalPool'"
|
||||
class="col span-6"
|
||||
data-testid="input-vm-iothread-count"
|
||||
>
|
||||
<LabeledInput
|
||||
type="number"
|
||||
min="1"
|
||||
:value="ioThreadCount"
|
||||
:label="t('harvester.virtualMachine.volume.diskPerformance.ioThreadCount.label')"
|
||||
:tooltip="t('harvester.virtualMachine.volume.diskPerformance.ioThreadCount.tip')"
|
||||
:mode="mode"
|
||||
@update:value="$emit('update:ioThreadCount', Number($event))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Banner
|
||||
v-if="hasDedicatedIothread && !ioThreadsPolicy"
|
||||
color="info"
|
||||
:label="t('harvester.virtualMachine.volume.diskPerformance.ioThreadsPolicy.autoEnabledTip')"
|
||||
/>
|
||||
</template>
|
||||
</InfoBox>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vm-perf {
|
||||
.expand-toggle {
|
||||
padding: 0;
|
||||
font-weight: 600;
|
||||
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user