VM's boot order tab

pkg/harvester/components/BootOrderCard.vue

@@ -0,0 +1,143 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  name: 'BootOrderCard',
+
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+
+    index: {
+      type:    Number,
+      default: 0
+    },
+
+    count: {
+      type:    Number,
+      default: 0
+    },
+
+    showButtons: {
+      type:    Boolean,
+      default: true
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    disabled: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  methods: {
+    swap(dir) {
+      this.$emit('input', dir);
+    },
+    onMouseDown() {
+      this.$emit('mousedown');
+    },
+    onMouseUp() {
+      this.$emit('mouseup');
+    },
+  }
+};
+</script>
+
+<template>
+  <div
+    class="boot-order-card"
+    :class="{ disabled: disabled }"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+  >
+    <div class="content">
+      <div class="body">
+        <h3>{{ value.name }}</h3>
+      </div>
+      <div class="description text-muted">
+        <span>{{ value.type }}</span>
+      </div>
+    </div>
+    <slot name="buttons">
+      <div v-if="!isView && showButtons" class="buttons actions" @mousedown.stop @mouseup.stop>
+        <div class="buttons-container">
+          <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(-1)">
+            <i class="icon icon-lg icon-chevron-up"></i>
+          </button>
+
+          <button :disabled="index === count - 1" class="btn btn-sm role-primary" @click.prevent="swap(1)">
+            <i class="icon icon-lg icon-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .boot-order-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    border: 1px solid var(--tabbed-border);
+    box-shadow: 0 0 10px var(--shadow);
+    border-radius: var(--border-radius);
+
+    height: 65px;
+    padding: 10px;
+
+    &.disabled {
+      cursor: not-allowed;
+      h3 {
+        color: var(--muted) !important;
+      }
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .body {
+        max-width: 500px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        h3 {
+          margin: 0;
+        }
+      }
+      .description {
+        max-width: 550px;
+        word-wrap: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .actions {
+      display: flex;
+      padding-top: 6px;
+
+      .buttons-container {
+        .btn {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+</style>

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

@@ -13,6 +13,7 @@ import { allDashboardsExist } from '@shell/utils/grafana';
 import CloudConfig from '../../edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
 import Volume from '../../edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
 import Network from '../../edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import BootOrder from '../../edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder';
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import PodAffinity from '@shell/components/form/PodAffinity';
 import AccessCredentials from '../../edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials';
@@ -29,6 +30,7 @@ export default {
   name: 'VMIDetailsPage',
 
   components: {
+    BootOrder,
     Tab,
     Tabbed,
     Events,
@@ -175,6 +177,13 @@ export default {
         <Network v-model="networkRows" mode="view" />
       </Tab>
 
+      <Tab name="BootOrder" :label="t('harvester.tab.boot-order')" :weight="4">
+        <BootOrder
+          :value="bootOrderDevices"
+          :mode="mode"
+        />
+      </Tab>
+
       <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="3">
         <OverviewKeypairs v-model="value" />
       </Tab>

pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue

@@ -15,6 +15,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import Reserved from './kubevirt.io.virtualmachine/VirtualMachineReserved';
 import Volume from './kubevirt.io.virtualmachine/VirtualMachineVolume';
 import Network from './kubevirt.io.virtualmachine/VirtualMachineNetwork';
+import BootOrder from './kubevirt.io.virtualmachine/VirtualMachineBootOrder';
 import CpuMemory from './kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
 import CloudConfig from './kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
 import SSHKey from './kubevirt.io.virtualmachine/VirtualMachineSSHKey';
@@ -33,6 +34,7 @@ export default {
   name: 'HarvesterEditVMTemplate',
 
   components: {
+    BootOrder,
     Tab,
     SSHKey,
     Volume,
@@ -254,6 +256,13 @@ export default {
         <Network v-model="networkRows" :mode="mode" />
       </Tab>
 
+      <Tab name="BootOrder" :label="t('harvester.tab.boot-order')" :weight="-3">
+        <BootOrder
+          :value="bootOrderDevices"
+          :mode="mode"
+        />
+      </Tab>
+
       <Tab
         name="nodeScheduling"
         :label="t('workload.container.titles.nodeScheduling')"