From ba1ca874e0af42725b27eb5257d49d21dfc08538 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 21 Jan 2024 15:47:49 +0100
Subject: [PATCH 1/7] Implement BootOrder component

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrder.vue | 66 ++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 pkg/harvester/components/BootOrder.vue

diff --git a/pkg/harvester/components/BootOrder.vue b/pkg/harvester/components/BootOrder.vue
new file mode 100644
index 00000000000..8656511d947
--- /dev/null
+++ b/pkg/harvester/components/BootOrder.vue
@@ -0,0 +1,66 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  name: 'BootOrder',
+
+  props: {
+    value: {
+      type:     Array,
+      required: true,
+    },
+
+    index: {
+      type:     Number,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  methods: {
+    changeSort(idx, type) {
+      // true: down, false: up
+      this.value.splice(type ? idx : idx - 1, 1, ...this.value.splice(type ? idx + 1 : idx, 1, this.value[type ? idx : idx - 1]));
+      this.update();
+    },
+    update() {
+      this.$emit('input', this.value);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="boot-order">
+    <div v-if="!isView" class="buttons-container mr-15">
+      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="changeSort(index, false)">
+        <i class="icon icon-lg icon-chevron-up"></i>
+      </button>
+
+      <button :disabled="index === value.length - 1" class="btn btn-sm role-primary" @click.prevent="changeSort(index, true)">
+        <i class="icon icon-lg icon-chevron-down"></i>
+      </button>
+    </div>
+
+    <div class="text-muted">
+      bootOrder: {{ index + 1 }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .boot-order {
+    display: flex;
+    align-items: center;
+  }
+</style>

From c55eb41ee2e8702b4318eb50fe662b2e8a2557a4 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 21 Jan 2024 15:49:31 +0100
Subject: [PATCH 2/7] Add BootOrder to Volumes

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineVolume/index.vue            | 28 +++++--------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index 69a3b5d54dc..fc507945fee 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -7,6 +7,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
+import BootOrder from '../../../components/BootOrder';
 
 import { PVC, STORAGE_CLASS } from '@shell/config/types';
 import { HCI } from '../../../types';
@@ -20,7 +21,7 @@ import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
 
 export default {
   components: {
-    Banner, BadgeStateFormatter, draggable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
+    Banner, BadgeStateFormatter, BootOrder, draggable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
   },
 
   props: {
@@ -311,21 +312,11 @@ export default {
               />
             </div>
 
-            <div class="bootOrder">
-              <div v-if="!isView" class="mr-15">
-                <button :disabled="i === 0" class="btn btn-sm role-primary" @click.prevent="changeSort(i, false)">
-                  <i class="icon icon-lg icon-chevron-up"></i>
-                </button>
-
-                <button :disabled="i === rows.length -1" class="btn btn-sm role-primary" @click.prevent="changeSort(i, true)">
-                  <i class="icon icon-lg icon-chevron-down"></i>
-                </button>
-              </div>
-
-              <div class="text-muted">
-                bootOrder: {{ i + 1 }}
-              </div>
-            </div>
+            <BootOrder
+              v-model="rows"
+              :index="i"
+              :mode="mode"
+            />
 
             <Banner v-if="volume.volumeStatus && !isCreate" class="mt-15 volume-status" color="warning" :label="volume.volumeStatus" />
           </InfoBox>
@@ -405,11 +396,6 @@ export default {
     padding: 0px;
   }
 
-  .bootOrder {
-    display: flex;
-    align-items: center;
-  }
-
   .buttons {
     width: 100%;
     display: flex;

From 24f03ce874d994008a8475db7e5469f033be7ebb Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 21 Jan 2024 15:50:10 +0100
Subject: [PATCH 3/7] Add BootOrder to Intefaces; handle bootOrder in Interface
 model

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineNetwork/index.vue               | 14 +++++++++++++-
 pkg/harvester/mixins/harvester-vm/index.js        | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
index 91781a59348..72a559ac85f 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
@@ -9,9 +9,14 @@ import { clone } from '@shell/utils/object';
 import { randomStr } from '@shell/utils/string';
 import { removeObject } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
+import BootOrder from '../../../components/BootOrder';
 
 export default {
-  components: { InfoBox, Base },
+  components: {
+    InfoBox,
+    Base,
+    BootOrder,
+  },
 
   props: {
     mode: {
@@ -135,12 +140,19 @@ export default {
       <Base
         :key="rows[i].rowKeyId"
         v-model="rows[i]"
+        class="mb-20"
         :rows="rows"
         :mode="mode"
         :is-single="isSingle"
         :network-option="networkOption"
         @update="update"
       />
+
+      <BootOrder
+        v-model="rows"
+        :index="i"
+        :mode="mode"
+      />
     </InfoBox>
 
     <button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
diff --git a/pkg/harvester/mixins/harvester-vm/index.js b/pkg/harvester/mixins/harvester-vm/index.js
index ac78170814a..7c4f14c8ad8 100644
--- a/pkg/harvester/mixins/harvester-vm/index.js
+++ b/pkg/harvester/mixins/harvester-vm/index.js
@@ -524,23 +524,26 @@ export default {
       const networks = vm.spec.template.spec.networks || [];
       const interfaces = vm.spec.template.spec.domain.devices.interfaces || [];
 
-      const out = interfaces.map( (I, index) => {
+      const out = interfaces.map((I, index) => {
         const network = networks.find( N => I.name === N.name);
 
         const type = I.sriov ? 'sriov' : I.bridge ? 'bridge' : 'masquerade';
 
         const isPod = !!network.pod;
 
+        const bootOrder = I?.bootOrder ?? index;
+
         return {
           ...I,
           index,
+          bootOrder,
           type,
           isPod,
           newCreateId: (fromTemplate || init) ? randomStr(10) : false,
           model:       I.model,
           networkName: isPod ? MANAGEMENT_NETWORK : network?.multus?.networkName,
         };
-      });
+      }).sort((a, b) => a.bootOrder - b.bootOrder);
 
       return out;
     },
@@ -751,9 +754,9 @@ export default {
       const networks = [];
       const interfaces = [];
 
-      networkRow.forEach( (R) => {
+      networkRow.forEach( (R, index) => {
         const _network = this.parseNetwork(R);
-        const _interface = this.parseInterface(R);
+        const _interface = this.parseInterface(R, index);
 
         networks.push(_network);
         interfaces.push(_interface);
@@ -944,7 +947,7 @@ export default {
       return arr.map( id => this.getSSHValue(id)).filter( O => O !== undefined);
     },
 
-    parseInterface(R) {
+    parseInterface(R, index) {
       const _interface = {};
       const type = R.type;
 
@@ -957,6 +960,8 @@ export default {
       _interface.model = R.model;
       _interface.name = R.name;
 
+      _interface.bootOrder = index + 1;
+
       return _interface;
     },
 

From e45815ce49eb7189826f825aff6ffa10671ac14c Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 22 Jan 2024 23:59:50 +0100
Subject: [PATCH 4/7] Add UI component to handle bootOrders on different tabs

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrder.vue        | 35 ++++----
 .../VirtualMachineDeviceBootOrder.vue         | 88 +++++++++++++++++++
 pkg/harvester/l10n/en-us.yaml                 |  2 +
 3 files changed, 109 insertions(+), 16 deletions(-)
 create mode 100644 pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue

diff --git a/pkg/harvester/components/BootOrder.vue b/pkg/harvester/components/BootOrder.vue
index 8656511d947..fa6604f1c27 100644
--- a/pkg/harvester/components/BootOrder.vue
+++ b/pkg/harvester/components/BootOrder.vue
@@ -5,20 +5,25 @@ export default {
   name: 'BootOrder',
 
   props: {
-    value: {
-      type:     Array,
-      required: true,
+    index: {
+      type:    Number,
+      default: 0,
     },
 
-    index: {
-      type:     Number,
-      required: true,
+    count: {
+      type:    Number,
+      default: 1,
     },
 
     mode: {
       type:     String,
       required: true
     },
+
+    tooltip: {
+      type:    Object,
+      default: null
+    }
   },
 
   computed: {
@@ -28,13 +33,8 @@ export default {
   },
 
   methods: {
-    changeSort(idx, type) {
-      // true: down, false: up
-      this.value.splice(type ? idx : idx - 1, 1, ...this.value.splice(type ? idx + 1 : idx, 1, this.value[type ? idx : idx - 1]));
-      this.update();
-    },
-    update() {
-      this.$emit('input', this.value);
+    update(step) {
+      this.$emit('input', step);
     }
   }
 };
@@ -43,16 +43,19 @@ export default {
 <template>
   <div class="boot-order">
     <div v-if="!isView" class="buttons-container mr-15">
-      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="changeSort(index, false)">
+      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="update(-1)">
         <i class="icon icon-lg icon-chevron-up"></i>
       </button>
 
-      <button :disabled="index === value.length - 1" class="btn btn-sm role-primary" @click.prevent="changeSort(index, true)">
+      <button :disabled="index === count - 1" class="btn btn-sm role-primary" @click.prevent="update(1)">
         <i class="icon icon-lg icon-chevron-down"></i>
       </button>
     </div>
 
-    <div class="text-muted">
+    <div
+      v-clean-tooltip="tooltip"
+      class="text-muted"
+    >
       bootOrder: {{ index + 1 }}
     </div>
   </div>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue
new file mode 100644
index 00000000000..ff3f4770f4e
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue
@@ -0,0 +1,88 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+import BootOrder from '../../components/BootOrder';
+
+export default {
+  name: 'VirtualMachineDeviceBootOrder',
+
+  components: { BootOrder },
+
+  props: {
+    bootOrders: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    bootOrder: {
+      type:    Number,
+      default: null,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+    index() {
+      return this.bootOrder !== null ? this.bootOrder - 1 : 0;
+    },
+    count() {
+      return Math.max(...this.bootOrders.map(o => o.bootOrder));
+    },
+    tooltipContent() {
+      if (this.bootOrders.length === 0) {
+        return '';
+      }
+
+      const title = this.t('harvester.virtualMachine.bootOrder.details');
+
+      const bootOrders = this.bootOrders.sort((a, b) => a.bootOrder || 0 - b.bootOrder || 0);
+
+      return [
+        ...bootOrders
+          .filter(f => f.type === 'disk')
+          .reduce((acc, x) => `${ acc } &nbsp&nbsp&nbsp${ x.name }:  <b>${ x.bootOrder }</b><br>`, 'Disks:<br>'),
+        ...bootOrders
+          .filter(f => f.type === 'interface')
+          .reduce((acc, x) => `${ acc } &nbsp&nbsp&nbsp${ x.name }:  <b>${ x.bootOrder }</b><br>`, 'Networks:<br>')
+      ].reduce((acc, r) => `${ acc }${ r }`, `${ title }&nbsp&nbsp&nbsp<br><br>`) || '';
+    },
+  },
+
+  methods: {
+    onInputIndex(step) {
+      const elem = this.bootOrders.find(o => o.bootOrder === this.bootOrder);
+
+      let neu = this.index + step + 1;
+
+      while (!this.bootOrders.find(o => o.bootOrder === neu)) {
+        neu = neu + step;
+      }
+
+      const emit = {
+        ...elem,
+        neu,
+      };
+
+      this.$emit('input', emit);
+    }
+  }
+};
+</script>
+
+<template>
+  <BootOrder
+    :index="index"
+    :count="count"
+    :mode="mode"
+    :tooltip="{content: tooltipContent, placement: 'right'}"
+    @input="onInputIndex"
+  />
+</template>
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index b93bcda731e..2ed9a537e1a 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -652,6 +652,8 @@ harvester:
         inNamespaces: "Workloads in these namespaces"
       namespaces:
         label: Namespaces
+    bootOrder:
+      details: Boot Orders
 
   volume:
     label: Volumes

From ac30bdd013cc844323ba99ede50b6236154452fa Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 23 Jan 2024 00:01:33 +0100
Subject: [PATCH 5/7] Assign global boot orders

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/mixins/harvester-vm/index.js | 113 +++++++++++++++++----
 1 file changed, 94 insertions(+), 19 deletions(-)

diff --git a/pkg/harvester/mixins/harvester-vm/index.js b/pkg/harvester/mixins/harvester-vm/index.js
index 7c4f14c8ad8..bea8b112b90 100644
--- a/pkg/harvester/mixins/harvester-vm/index.js
+++ b/pkg/harvester/mixins/harvester-vm/index.js
@@ -23,6 +23,11 @@ import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations
 import impl, { QGA_JSON, USB_TABLET } from './impl';
 import { uniq } from '@shell/utils/array';
 
+const BOOT_ORDER_TYPE = {
+  DISK:      'disk',
+  INTERFACE: 'interface'
+};
+
 export const MANAGEMENT_NETWORK = 'management Network';
 
 export const OS = [{
@@ -282,6 +287,18 @@ export default {
         topologyKeyPlaceholder: this.t('harvesterManager.affinity.topologyKey.placeholder')
       };
     },
+
+    bootOrders() {
+      const buildElem = type => el => ({
+        ...el,
+        type
+      });
+
+      return [
+        ...this.diskRows?.map(buildElem(BOOT_ORDER_TYPE.DISK)),
+        ...this.networkRows?.map(buildElem(BOOT_ORDER_TYPE.INTERFACE))
+      ];
+    }
   },
 
   async created() {
@@ -325,8 +342,13 @@ export default {
       const sshKey = this.getSSHFromAnnotation(spec) || [];
 
       const imageId = this.getRootImageId(vm) || '';
-      const diskRows = this.getDiskRows(vm);
-      const networkRows = this.getNetworkRows(vm, { fromTemplate, init });
+
+      const { disks, interfaces } = this.generateBootOrders(vm);
+
+      const diskRows = this.getDiskRows(vm, { bootOrders: disks });
+      const networkRows = this.getNetworkRows(vm, {
+        fromTemplate, init, bootOrders: interfaces
+      });
       const hasCreateVolumes = this.getHasCreatedVolumes(spec) || [];
 
       let { userData = undefined, networkData = undefined } = this.getCloudInitNoCloud(spec);
@@ -391,7 +413,7 @@ export default {
       this.refreshYamlEditor();
     },
 
-    getDiskRows(vm) {
+    getDiskRows(vm, config) {
       const namespace = vm.metadata.namespace;
       const _volumes = vm.spec.template.spec.volumes || [];
       const _disks = vm.spec.template.spec.domain.devices.disks || [];
@@ -402,6 +424,8 @@ export default {
       if (_disks.length === 0) {
         out.push({
           id:               randomStr(5),
+          index:            0,
+          bootOrder:        config?.bootOrders?.[0] || 1,
           source:           SOURCE_TYPE.IMAGE,
           name:             'disk-0',
           accessMode:       'ReadWriteMany',
@@ -477,8 +501,6 @@ export default {
 
           const bus = DISK?.disk?.bus || DISK?.cdrom?.bus;
 
-          const bootOrder = DISK?.bootOrder ? DISK?.bootOrder : index;
-
           const parseValue = parseSi(size);
 
           const formatSize = formatSi(parseValue, {
@@ -492,7 +514,8 @@ export default {
 
           return {
             id:         randomStr(5),
-            bootOrder,
+            index,
+            bootOrder:  config?.bootOrders?.[index] || index + 1,
             source,
             name:       DISK.name,
             realName,
@@ -531,12 +554,10 @@ export default {
 
         const isPod = !!network.pod;
 
-        const bootOrder = I?.bootOrder ?? index;
-
         return {
           ...I,
           index,
-          bootOrder,
+          bootOrder:   config.bootOrders?.[index] || index + 1,
           type,
           isPod,
           newCreateId: (fromTemplate || init) ? randomStr(10) : false,
@@ -584,7 +605,7 @@ export default {
       const diskNameLables = [];
       const volumeClaimTemplates = [];
 
-      disk.forEach( (R, index) => {
+      disk.forEach( (R) => {
         const prefixName = this.value.metadata?.name || '';
 
         let dataVolumeName = '';
@@ -597,7 +618,7 @@ export default {
           dataVolumeName = R.realName;
         }
 
-        const _disk = this.parseDisk(R, index);
+        const _disk = this.parseDisk(R);
         const _volume = this.parseVolume(R, dataVolumeName);
         const _dataVolumeTemplate = this.parseVolumeClaimTemplate(R, dataVolumeName);
 
@@ -754,9 +775,9 @@ export default {
       const networks = [];
       const interfaces = [];
 
-      networkRow.forEach( (R, index) => {
+      networkRow.forEach( (R) => {
         const _network = this.parseNetwork(R);
-        const _interface = this.parseInterface(R, index);
+        const _interface = this.parseInterface(R);
 
         networks.push(_network);
         interfaces.push(_interface);
@@ -872,8 +893,64 @@ export default {
       this.$set(this, 'memory', memory);
     },
 
-    parseDisk(R, index) {
-      const out = { name: R.name };
+    generateBootOrders(vm) {
+      const disks = vm.spec.template.spec.domain.devices.disks || [];
+      const interfaces = vm.spec.template.spec.domain.devices.interfaces || [];
+
+      const taken = [
+        ...disks,
+        ...interfaces
+      ].map(o => o.bootOrder ?? 0);
+
+      const ret = [...taken];
+
+      let bootOrder = 1;
+
+      for (let i = 0; i < taken.length; i++) {
+        if (!taken[i]) {
+          while (taken.includes(bootOrder)) {
+            bootOrder++;
+          }
+          ret[i] = bootOrder;
+          bootOrder++;
+        }
+      }
+
+      return {
+        disks:      ret.slice(0, disks.length),
+        interfaces: ret.slice(disks.length),
+      };
+    },
+
+    assignBootOrder(elem, bootOrder) {
+      const devices = (elem.type === BOOT_ORDER_TYPE.DISK ? this.diskRows : this.networkRows);
+
+      for (let i = 0; i < devices?.length; i++) {
+        if (devices[i].name === elem.name) {
+          this.$set(devices[i], 'bootOrder', bootOrder);
+          break;
+        }
+      }
+    },
+
+    updateBootOrders(elem) {
+      const existsElem = this.bootOrders.find(({ bootOrder }) => bootOrder === elem.neu);
+
+      this.assignBootOrder(elem, elem.neu);
+
+      if (existsElem) {
+        this.assignBootOrder(existsElem, elem.bootOrder);
+      }
+
+      this.$set(this, 'diskRows', this.diskRows.sort((a, b) => a.bootOrder - b.bootOrder));
+      this.$set(this, 'networkRows', this.networkRows.sort((a, b) => a.bootOrder - b.bootOrder));
+    },
+
+    parseDisk(R) {
+      const out = {
+        name:      R.name,
+        bootOrder: R.bootOrder
+      };
 
       if (R.type === HARD_DISK) {
         out.disk = { bus: R.bus };
@@ -881,8 +958,6 @@ export default {
         out.cdrom = { bus: R.bus };
       }
 
-      out.bootOrder = index + 1;
-
       return out;
     },
 
@@ -947,7 +1022,7 @@ export default {
       return arr.map( id => this.getSSHValue(id)).filter( O => O !== undefined);
     },
 
-    parseInterface(R, index) {
+    parseInterface(R) {
       const _interface = {};
       const type = R.type;
 
@@ -960,7 +1035,7 @@ export default {
       _interface.model = R.model;
       _interface.name = R.name;
 
-      _interface.bootOrder = index + 1;
+      _interface.bootOrder = R.bootOrder;
 
       return _interface;
     },

From a4ec65ce8839676281b6598b63a76a947a133958 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 23 Jan 2024 00:04:08 +0100
Subject: [PATCH 6/7] Handle global boot orders in Network & Volumes tabs; Make
 Network card draggable

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../kubevirt.io.virtualmachine/index.vue      |   7 +-
 .../VirtualMachineNetwork/index.vue           | 118 +++++++++++++-----
 .../VirtualMachineVolume/index.vue            |  65 +++++++---
 .../edit/kubevirt.io.virtualmachine/index.vue |  10 +-
 4 files changed, 152 insertions(+), 48 deletions(-)

diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
index e3032ffacd6..6935b6a1b5e 100644
--- a/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
+++ b/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
@@ -168,11 +168,16 @@ export default {
           :namespace="value.metadata.namespace"
           :vm="value"
           :resource-type="value.type"
+          :boot-orders="bootOrders"
         />
       </Tab>
 
       <Tab name="networks" :label="t('harvester.virtualMachine.detail.tabs.networks')" class="bordered-table" :weight="5">
-        <Network v-model="networkRows" mode="view" />
+        <Network
+          v-model="networkRows"
+          :boot-orders="bootOrders"
+          mode="view"
+        />
       </Tab>
 
       <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="3">
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
index 72a559ac85f..47b5fbaaa19 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
@@ -1,4 +1,5 @@
 <script>
+import draggable from 'vuedraggable';
 import InfoBox from '@shell/components/InfoBox';
 import Base from './base';
 
@@ -9,13 +10,14 @@ import { clone } from '@shell/utils/object';
 import { randomStr } from '@shell/utils/string';
 import { removeObject } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
-import BootOrder from '../../../components/BootOrder';
+import VirtualMachineDeviceBootOrder from '../VirtualMachineDeviceBootOrder';
 
 export default {
   components: {
+    draggable,
     InfoBox,
     Base,
-    BootOrder,
+    VirtualMachineDeviceBootOrder,
   },
 
   props: {
@@ -34,6 +36,13 @@ export default {
     isSingle: {
       type:    Boolean,
       default: true
+    },
+
+    bootOrders: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
     }
   },
 
@@ -72,8 +81,12 @@ export default {
   },
 
   watch: {
-    value(neu) {
-      this.rows = neu;
+    value: {
+      handler(neu) {
+        this.rows = neu;
+      },
+      deep:      true,
+      immediate: true
     },
   },
 
@@ -82,12 +95,14 @@ export default {
       const name = this.generateName();
 
       const neu = {
+        index:       this.rows.length,
         name,
         networkName: '',
         model:       'virtio',
         type:        'bridge',
         newCreateId: randomStr(10),
-        rowKeyId:    randomStr(10)
+        rowKeyId:    randomStr(10),
+        bootOrder:   this.generateBootOrder(this.rows.length),
       };
 
       this.rows.push(neu);
@@ -121,8 +136,41 @@ export default {
       return name;
     },
 
-    update() {
-      this.$emit('input', this.rows);
+    generateBootOrder(pos) {
+      const bootOrders = this.bootOrders?.map(o => o.bootOrder) || [];
+
+      if (bootOrders) {
+        return Math.max(...bootOrders) + 1 || pos;
+      }
+    },
+
+    onInputBootOrder(value) {
+      this.$emit('boot-order', value);
+    },
+
+    drag(v) {
+      const oldElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.oldIndex].bootOrder);
+      const neuElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.newIndex].bootOrder);
+
+      const emit = {
+        ...oldElem,
+        neu: neuElem.bootOrder,
+      };
+
+      this.onInputBootOrder(emit);
+
+      this.update(true);
+    },
+
+    update(sort = false) {
+      let rows = [...this.rows];
+
+      if (sort) {
+        if (rows?.length) {
+          rows = this.rows.sort((a, b) => a.bootOrder - b.bootOrder);
+        }
+      }
+      this.$emit('input', rows);
     }
   }
 };
@@ -130,31 +178,37 @@ export default {
 
 <template>
   <div>
-    <InfoBox v-for="(row, i) in rows" :key="i" class="infoBox">
-      <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
-        <i class="icon icon-x" />
-      </button>
-
-      <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
-
-      <Base
-        :key="rows[i].rowKeyId"
-        v-model="rows[i]"
-        class="mb-20"
-        :rows="rows"
-        :mode="mode"
-        :is-single="isSingle"
-        :network-option="networkOption"
-        @update="update"
-      />
-
-      <BootOrder
-        v-model="rows"
-        :index="i"
-        :mode="mode"
-      />
-    </InfoBox>
-
+    <draggable v-model="rows" :disabled="isView" @end="drag">
+      <transition-group>
+        <div v-for="(row, i) in rows" :key="i">
+          <InfoBox class="infoBox">
+            <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
+              <i class="icon icon-x" />
+            </button>
+
+            <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
+
+            <Base
+              :key="rows[i].rowKeyId"
+              v-model="rows[i]"
+              class="mb-20"
+              :rows="rows"
+              :mode="mode"
+              :is-single="isSingle"
+              :network-option="networkOption"
+              @update="update"
+            />
+
+            <VirtualMachineDeviceBootOrder
+              :mode="mode"
+              :boot-orders="bootOrders"
+              :boot-order="rows[i].bootOrder"
+              @input="onInputBootOrder"
+            />
+          </InfoBox>
+        </div>
+      </transition-group>
+    </draggable>
     <button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
       {{ t('harvester.virtualMachine.network.addNetwork') }}
     </button>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index fc507945fee..73235c3d8e0 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -7,7 +7,7 @@ import UnitInput from '@shell/components/form/UnitInput';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import ModalWithCard from '@shell/components/ModalWithCard';
-import BootOrder from '../../../components/BootOrder';
+import VirtualMachineDeviceBootOrder from '../VirtualMachineDeviceBootOrder';
 
 import { PVC, STORAGE_CLASS } from '@shell/config/types';
 import { HCI } from '../../../types';
@@ -21,7 +21,7 @@ import { PLUGIN_DEVELOPER, DEV } from '@shell/store/prefs';
 
 export default {
   components: {
-    Banner, BadgeStateFormatter, BootOrder, draggable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard
+    Banner, BadgeStateFormatter, draggable, InfoBox, LabeledInput, UnitInput, LabeledSelect, ModalWithCard, VirtualMachineDeviceBootOrder
   },
 
   props: {
@@ -72,6 +72,13 @@ export default {
     resourceType: {
       type:    String,
       default: ''
+    },
+
+    bootOrders: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
     }
   },
 
@@ -160,6 +167,7 @@ export default {
     addVolume(type) {
       const name = this.generateName();
       const neu = {
+        index:       this.rows.length,
         id:          randomStr(5),
         name,
         source:      type,
@@ -170,6 +178,7 @@ export default {
         volumeName:  '',
         bus:         'virtio',
         newCreateId: randomStr(10), // judge whether it is a disk that has been created
+        bootOrder:   this.generateBootOrder(this.rows.length),
       };
 
       if (type === SOURCE_TYPE.NEW) {
@@ -196,6 +205,14 @@ export default {
       return name;
     },
 
+    generateBootOrder(pos) {
+      const bootOrders = this.bootOrders?.map(o => o.bootOrder) || [];
+
+      if (bootOrders) {
+        return Math.max(...bootOrders) + 1 || pos;
+      }
+    },
+
     removeVolume(vol) {
       this.vol = vol;
       if (!vol.newCreateId && this.isEdit && this.isVirtualType) {
@@ -232,8 +249,29 @@ export default {
       }[type];
     },
 
-    update() {
-      this.$emit('input', this.rows);
+    drag(v) {
+      const oldElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.oldIndex].bootOrder);
+      const neuElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.newIndex].bootOrder);
+
+      const emit = {
+        ...oldElem,
+        neu: neuElem.bootOrder,
+      };
+
+      this.onInputBootOrder(emit);
+
+      this.update(true);
+    },
+
+    update(sort = false) {
+      let rows = [...this.rows];
+
+      if (sort) {
+        if (rows?.length) {
+          rows = this.rows.sort((a, b) => a.bootOrder - b.bootOrder);
+        }
+      }
+      this.$emit('input', rows);
     },
 
     deleteVolume() {
@@ -246,14 +284,12 @@ export default {
       this.$refs.deleteTip.hide();
     },
 
-    changeSort(idx, type) {
-      // true: down, false: up
-      this.rows.splice(type ? idx : idx - 1, 1, ...this.rows.splice(type ? idx + 1 : idx, 1, this.rows[type ? idx : idx - 1]));
-      this.update();
-    },
-
     getImageDisplayName(id) {
       return this.$store.getters['harvester/all'](HCI.IMAGE).find(image => image.id === id)?.spec?.displayName;
+    },
+
+    onInputBootOrder(value) {
+      this.$emit('boot-order', value);
     }
   },
 };
@@ -262,7 +298,7 @@ export default {
 <template>
   <div>
     <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.volume.dragTip" />
-    <draggable v-model="rows" :disabled="isView" @end="update">
+    <draggable v-model="rows" :disabled="isView" @end="drag">
       <transition-group>
         <div v-for="(volume, i) in rows" :key="volume.id">
           <InfoBox class="box">
@@ -312,10 +348,11 @@ export default {
               />
             </div>
 
-            <BootOrder
-              v-model="rows"
-              :index="i"
+            <VirtualMachineDeviceBootOrder
               :mode="mode"
+              :boot-orders="bootOrders"
+              :boot-order="rows[i].bootOrder"
+              @input="onInputBootOrder"
             />
 
             <Banner v-if="volume.volumeStatus && !isCreate" class="mt-15 volume-status" color="warning" :label="volume.volumeStatus" />
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
index af95611559b..56826e11c69 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -534,11 +534,19 @@ export default {
           :resource-type="value.type"
           :vm="value"
           :validate-required="true"
+          :boot-orders="bootOrders"
+          @boot-order="updateBootOrders"
         />
       </Tab>
 
       <Tab name="Network" :label="t('harvester.tab.network')" :weight="-2">
-        <Network v-model="networkRows" :mode="mode" :is-single="isSingle" />
+        <Network
+          v-model="networkRows"
+          :mode="mode"
+          :is-single="isSingle"
+          :boot-orders="bootOrders"
+          @boot-order="updateBootOrders"
+        />
       </Tab>
 
       <Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="-3">

From 56702cf8f8ff307707de4172cd6b72a9046f8c07 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Tue, 23 Jan 2024 00:24:40 +0100
Subject: [PATCH 7/7] bootOrder tooltip refactoring

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineDeviceBootOrder.vue                | 12 ++----------
 pkg/harvester/l10n/en-us.yaml                        |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue
index ff3f4770f4e..458c4bb0801 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue
@@ -41,18 +41,10 @@ export default {
         return '';
       }
 
+      const bootOrders = [...this.bootOrders].sort((a, b) => a.bootOrder - b.bootOrder);
       const title = this.t('harvester.virtualMachine.bootOrder.details');
 
-      const bootOrders = this.bootOrders.sort((a, b) => a.bootOrder || 0 - b.bootOrder || 0);
-
-      return [
-        ...bootOrders
-          .filter(f => f.type === 'disk')
-          .reduce((acc, x) => `${ acc } &nbsp&nbsp&nbsp${ x.name }:  <b>${ x.bootOrder }</b><br>`, 'Disks:<br>'),
-        ...bootOrders
-          .filter(f => f.type === 'interface')
-          .reduce((acc, x) => `${ acc } &nbsp&nbsp&nbsp${ x.name }:  <b>${ x.bootOrder }</b><br>`, 'Networks:<br>')
-      ].reduce((acc, r) => `${ acc }${ r }`, `${ title }&nbsp&nbsp&nbsp<br><br>`) || '';
+      return bootOrders.reduce((acc, r) => `${ acc } <b>${ r.bootOrder }</b>:  ${ r.type === 'disk' ? 'disk' : 'network' } / ${ r.name }<br>`, `${ title }<br><br>`);
     },
   },
 
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index 2ed9a537e1a..8d8260bea7c 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -653,7 +653,7 @@ harvester:
       namespaces:
         label: Namespaces
     bootOrder:
-      details: Boot Orders
+      details: Boot Order
 
   volume:
     label: Volumes