Skip to content

Commit

Permalink
Move boot order tab; disable UI in edit mode
Browse files Browse the repository at this point in the history 
Signed-off-by: Francesco Torchia <[email protected]>
  • Loading branch information
@torchiaf
torchiaf committed Feb 19, 2024
1 parent 332e602 commit a59c2c5
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 79 deletions.
17 changes: 15 additions & 2 deletions pkg/harvester/components/BootOrderCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ export default {
type: String,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
Expand All @@ -54,6 +59,7 @@ export default {
<template>
<div
class="boot-order-card"
:class="{ disabled: disabled }"
@mousedown="onMouseDown"
@mouseup="onMouseUp"
>
Expand Down Expand Up @@ -83,7 +89,7 @@ export default {

<style lang="scss" scoped>
.boot-order-card {
display: flex;
display: flex;
flex-direction: row;
justify-content: space-between;
Expand All @@ -94,6 +100,13 @@ export default {
height: 65px;
padding: 10px;
&.disabled {
cursor: not-allowed;
h3 {
color: var(--muted) !important;
}
}
.content {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -123,7 +136,7 @@ export default {
.buttons-container {
.btn {
margin-left: 4px;
}
}
}
}
}
Expand Down
170 changes: 100 additions & 70 deletions pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,10 @@ export default {
</script>

<template>
<div class="container">
<div v-if="value.length === 0">
<span>No devices</span>
</div>
<div v-else class="base-container">
<div class="boot-order">
<div v-if="showNext">
<div
Expand All @@ -245,98 +248,125 @@ export default {
</h4>
</div>
</div>
</div>
<div class="devices">
<draggable
:id="'ordered'"
v-model="ordered"
:disabled="isView"
group="rows"
class="list-group ordered"
:move="onMoveOrdered"
@end="dragEndOrdered"
>
<div v-for="(row, index) in ordered" :key="index">
<BootOrderCard
class="card"
:value="row"
:show-buttons="hideButtons !== index"
:index="index"
:count="ordered.length"
:mode="mode"
@input="swapOrdered(index, index + $event)"
@mousedown="onMouseDownOrdered(index)"
@mouseup="onMouseUpOrdered"
/>
<!-- <div v-if="isView" class="mt-25">
<div
v-for="(pos, index) in unordered"
:key="index"
class="position-container"
>
<h4 class="text-muted">
&mdash;
</h4>
</div>
</draggable>
</div> -->
</div>
<div class="container" :class="{ 'is-view': isView }">
<div class="devices">
<draggable
:id="'ordered'"
v-model="ordered"
:disabled="isView"
group="rows"
class="list-group ordered"
:move="onMoveOrdered"
@end="dragEndOrdered"
>
<div v-for="(row, index) in ordered" :key="index">
<BootOrderCard
class="card"
:value="row"
:show-buttons="hideButtons !== index"
:index="index"
:count="ordered.length"
:mode="mode"
@input="swapOrdered(index, index + $event)"
@mousedown="onMouseDownOrdered(index)"
@mouseup="onMouseUpOrdered"
/>
</div>
</draggable>
</div>

<div class="swap-buttons actions ml-15">
<div class="buttons-container">
<button :disabled="unordered.length === 0" class="btn btn-sm role-primary ml-5" @click.prevent="swapToUnorderedAll">
<i class="icon icon-lg icon-chevron-beginning"></i>
</button>
<div v-if="!isView" class="swap-buttons actions ml-15">
<div class="buttons-container">
<button :disabled="unordered.length === 0" class="btn btn-sm role-primary ml-5" @click.prevent="swapToUnorderedAll">
<i class="icon icon-lg icon-chevron-beginning"></i>
</button>

<button :disabled="unordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToUnordered">
<i class="icon icon-lg icon-chevron-up"></i>
</button>
<button :disabled="unordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToUnordered">
<i class="icon icon-lg icon-chevron-up"></i>
</button>

<button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-20 ml-5" @click.prevent="swapToOrdered">
<i class="icon icon-lg icon-chevron-down"></i>
</button>
<button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-20 ml-5" @click.prevent="swapToOrdered">
<i class="icon icon-lg icon-chevron-down"></i>
</button>

<button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToOrderedAll">
<i class="icon icon-lg icon-chevron-end"></i>
</button>
<button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToOrderedAll">
<i class="icon icon-lg icon-chevron-end"></i>
</button>
</div>
</div>
</div>

<div class="devices">
<draggable
:id="'unordered'"
v-model="unordered"
:disabled="isView"
group="rows"
class="list-group unordered"
:move="onMoveUnordered"
@end="dragEndUnordered"
>
<div v-for="(row, index) in unordered" :key="index">
<BootOrderCard
class="card"
:value="row"
:showButtons="false"
:mode="mode"
/>
</div>
</draggable>
<div class="devices">
<draggable
:id="'unordered'"
v-model="unordered"
:disabled="isView"
group="rows"
class="list-group unordered"
:move="onMoveUnordered"
@end="dragEndUnordered"
>
<div v-for="(row, index) in unordered" :key="index">
<BootOrderCard
class="card"
:value="row"
:showButtons="false"
:mode="mode"
:disabled="isView"
/>
</div>
</draggable>
</div>
</div>
</div>
</template>

<style lang='scss' scoped>
.container {
.base-container {
display: flex;
flex-direction: row;
}
.boot-order {
.boot-order {
width: 30px;
.position-container {
min-height: 65px;
width: 30px;
.position-container {
min-height: 65px;
width: 30px;
margin-bottom: 5px;
display: flex;
align-items: center;
margin-bottom: 5px;
display: flex;
align-items: center;
h4 {
margin: 0;
}
h4 {
margin: 0;
}
}
}
.container {
display: flex;
flex-direction: row;
padding-left: 0;
&.is-view {
flex-direction: column;
gap: 20px;
}
.devices {
width: inherit;
min-width: 200px;
max-width: 500px;
.card {
Expand Down
14 changes: 7 additions & 7 deletions pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,21 +548,21 @@ export default {
<Network v-model="networkRows" :mode="mode" :is-single="isSingle" />
</Tab>
<Tab name="BootOrder" :label="t('harvester.tab.boot-order')" :weight="-2">
<Tab name="BootOrder" :label="t('harvester.tab.boot-order')" :weight="-3">
<BootOrder
:value="bootOrderDevices"
:mode="mode"
@input="onBootOrderChange"
/>
</Tab>
<Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="-3">
<Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="-4">
<template #default="{active}">
<NodeScheduling :key="active" :mode="mode" :value="spec.template.spec" :nodes="nodesIdOptions" />
</template>
</Tab>
<Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="-4">
<Tab :label="t('harvester.tab.vmScheduling')" name="vmScheduling" :weight="-5">
<template #default="{active}">
<PodAffinity
:key="active"
Expand All @@ -576,22 +576,22 @@ export default {
</template>
</Tab>
<Tab v-if="enabledPCI" :label="t('harvester.tab.pciDevices')" name="pciDevices" :weight="-5">
<Tab v-if="enabledPCI" :label="t('harvester.tab.pciDevices')" name="pciDevices" :weight="-6">
<PciDevices :mode="mode" :value="spec.template.spec" :vm="value" />
</Tab>
<Tab v-if="enabledSriovgpu" :label="t('harvester.tab.vGpuDevices')" name="vGpuDevices" :weight="-6">
<Tab v-if="enabledSriovgpu" :label="t('harvester.tab.vGpuDevices')" name="vGpuDevices" :weight="-7">
<VirtualMachineVGpuDevices :mode="mode" :value="spec.template.spec" :vm="value" />
</Tab>
<Tab v-if="isEdit" :label="t('harvester.tab.accessCredentials')" name="accessCredentials" :weight="-7">
<Tab v-if="isEdit" :label="t('harvester.tab.accessCredentials')" name="accessCredentials" :weight="-8">
<AccessCredentials v-model="accessCredentials" :mode="mode" :resource="value" :is-qemu-installed="isQemuInstalled" />
</Tab>
<Tab
name="advanced"
:label="t('harvester.tab.advanced')"
:weight="-8"
:weight="-9"
>
<div class="row mb-20">
<div class="col span-6">
Expand Down

0 comments on commit a59c2c5

Please sign in to comment.