From cac72cee1eb1b220389961248ac1c32854cad357 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Fri, 26 Jan 2024 18:12:02 +0100
Subject: [PATCH 01/11] Add boot order tab to VM page

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .vscode/settings.json                         |   2 +-
 package.json                                  |   2 +-
 .../VirtualMachineBootOrder/index.vue         | 254 ++++++++++++++++++
 .../edit/kubevirt.io.virtualmachine/index.vue |  15 ++
 pkg/harvester/l10n/en-us.yaml                 |   1 +
 pkg/harvester/mixins/harvester-vm/index.js    |  39 ++-
 .../src/components/Card/Card.vue              |  11 +-
 7 files changed, 311 insertions(+), 13 deletions(-)
 create mode 100644 pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a8209ce563c..e5ac1948794 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,7 @@
   "eslint.packageManager": "yarn",
   "eslint.validate": ["vue","html","javascript","typescript"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.importModuleSpecifier": "non-relative",
diff --git a/package.json b/package.json
index b7eb4f61587..709379cc007 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "test": "jest --watch",
     "test:ci": "jest --collectCoverage --silent",
     "install:ci": "yarn install --frozen-lockfile",
-    "dev": "bash -c 'source ./scripts/version && NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve'",
+    "dev": "bash -c 'source ./scripts/version && NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve --host localhost'",
     "mem-dev": "bash -c 'source ./scripts/version && NODE_ENV=dev node --max-old-space-size=8192 ./node_modules/.bin/vue-cli-service serve'",
     "docker-dev": "docker run --rm --name dashboard-dev -p 8005:8005 -e API=$API -v $(pwd):/src -v dashboard_node:/src/node_modules rancher/dashboard:dev",
     "docker:local:start": "docker run -d --restart=unless-stopped -p 80:80 -p 443:443 -e CATTLE_BOOTSTRAP_PASSWORD=password -e CATTLE_PASSWORD_MIN_LENGTH=3 --name cypress --privileged rancher/rancher:v2.7-head",
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
new file mode 100644
index 00000000000..476ab18cd83
--- /dev/null
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -0,0 +1,254 @@
+<script>
+import Vue from 'vue';
+import draggable from 'vuedraggable';
+import { Card } from '@components/Card';
+import { _VIEW } from '@shell/config/query-params';
+import { clone } from '@shell/utils/object';
+import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
+
+export default {
+  components: {
+    draggable,
+    Card
+  },
+
+  props: {
+    value: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+  },
+
+  data() {
+    const ordered = this.value.filter(f => f.bootOrder).sort((a, b) => a.bootOrder - b.bootOrder);
+    const unordered = this.value.filter(f => !f.bootOrder);
+
+    return {
+      ordered,
+      unordered,
+      bootOrders: ordered.map(r => r.bootOrder)
+    };
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  watch: {
+    bootOrders: {
+      handler() {
+        this.update();
+      },
+    },
+  },
+
+  methods: {
+    findElem(elem) {
+      return this.value.find(f => f.type === elem.type &&
+        ((f.index !== undefined && f.index === elem.index) ||
+        (f.id !== undefined && f.id === elem.id))
+      );
+    },
+
+    updateRows(bootOrderGetter) {
+      return (r, index) => {
+        const el = this.findElem(r);
+
+        el.bootOrder = bootOrderGetter(index);
+
+        return el;
+      };
+    },
+
+    getNextBootOrder() {
+      let bootOrder = 1;
+
+      while (this.bootOrders.includes(bootOrder)) {
+        bootOrder++;
+      }
+
+      return bootOrder;
+    },
+
+    swap(index1, index2) {
+      const ordered = clone(this.ordered);
+
+      const temp = ordered[index1];
+
+      ordered[index1] = ordered[index2];
+      ordered[index2] = temp;
+
+      Vue.set(this, 'ordered', ordered);
+
+      this.update();
+    },
+
+    orderedDragEnd(v) {
+      if (v.to.id === 'unordered') {
+        this.bootOrders.pop();
+      } else {
+        this.update();
+      }
+    },
+
+    unorderedDragEnd(v) {
+      if (v.to.id === 'ordered') {
+        this.bootOrders = [
+          ...this.bootOrders,
+          this.getNextBootOrder()
+        ].sort();
+      }
+    },
+
+    update() {
+      const rows = [
+        ...this.ordered.map(this.updateRows(i => this.bootOrders[i])),
+        ...this.unordered.map(this.updateRows(() => undefined))
+      ];
+
+      const diskRows = rows.filter(f => f.type === BOOT_ORDER_TYPE.DISK);
+      const networkRows = rows.filter(f => f.type === BOOT_ORDER_TYPE.INTERFACE);
+
+      this.$emit('input', {
+        diskRows,
+        networkRows
+      });
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="container">
+    <div class="boot-order">
+      <Card
+        v-for="(row, index) in bootOrders"
+        :key="index"
+        :show-highlight-border="false"
+      >
+        <template #body>
+          <span>{{ row }}</span>
+        </template>
+
+        <template #actions>
+          <span></span>
+        </template>
+      </Card>
+    </div>
+    <div class="devices">
+      <draggable v-model="ordered" :disabled="isView" group="rows" class="list-group" @end="orderedDragEnd">
+        <transition-group :id="'ordered'">
+          <div v-for="(row, index) in ordered" :key="index">
+            <Card
+              :show-highlight-border="false"
+            >
+              <template #title>
+                <div class="card-title-slot">
+                  <h4
+                    v-clean-html="row.type + ' / ' + row.name"
+                    class="text-default-text"
+                  />
+                  <div v-if="!isView" class="buttons actions">
+                    <div class="buttons-container mr-15">
+                      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index -1)">
+                        <i class="icon icon-lg icon-chevron-up"></i>
+                      </button>
+
+                      <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
+                        <i class="icon icon-lg icon-chevron-down"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <template #body>
+                <span>{{ row.bootOrder }}</span>
+              </template>
+
+              <template #actions>
+                <span></span>
+              </template>
+            </Card>
+          </div>
+        </transition-group>
+      </draggable>
+
+      <hr>
+      <hr>
+
+      <draggable v-model="unordered" :disabled="isView" group="rows" class="list-group" @end="unorderedDragEnd">
+        <transition-group :id="'unordered'" tag="div">
+          <div v-for="(row, index) in unordered" :key="index">
+            <Card
+              :show-highlight-border="false"
+            >
+              <template #title>
+                <div class="card-title-slot">
+                  <h4
+                    v-clean-html="row.type + ' / ' + row.name"
+                    class="text-default-text"
+                  />
+                </div>
+              </template>
+
+              <template #body>
+                <span></span>
+              </template>
+
+              <template #actions>
+                <span></span>
+              </template>
+            </Card>
+          </div>
+        </transition-group>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .container {
+    display: flex;
+    flex-direction: row;
+
+    .boot-order {
+      .card-container {
+        width: 60px;
+      }
+    }
+
+    .devices {
+      width: inherit;
+
+      .card-title-slot {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+
+        .actions {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+
+.card-container {
+  min-height: 130px;
+}
+
+.list-group:empty,
+.list-group > div:empty {
+    padding:1rem;
+    text-align:center;
+}
+
+.list-group:empty:before,
+.list-group > div:empty:before {
+    content: 'Drop files here';
+}
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
index af95611559b..954ebe1eba4 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -17,6 +17,7 @@ import Reserved from './VirtualMachineReserved';
 import SSHKey from './VirtualMachineSSHKey';
 import Volume from './VirtualMachineVolume';
 import Network from './VirtualMachineNetwork';
+import BootOrder from './VirtualMachineBootOrder';
 import CpuMemory from './VirtualMachineCpuMemory';
 import CloudConfig from './VirtualMachineCloudConfig';
 import NodeScheduling from '@shell/components/form/NodeScheduling';
@@ -43,6 +44,7 @@ export default {
   name: 'HarvesterEditVM',
 
   components: {
+    BootOrder,
     Tab,
     Tabbed,
     Checkbox,
@@ -429,6 +431,11 @@ export default {
 
       return out;
     },
+
+    onBootOrderChange({ diskRows, networkRows }) {
+      this.diskRows = diskRows;
+      this.networkRows = networkRows;
+    }
   },
 };
 </script>
@@ -541,6 +548,14 @@ export default {
         <Network v-model="networkRows" :mode="mode" :is-single="isSingle" />
       </Tab>
 
+      <Tab name="BootOrder" :label="t('harvester.tab.boot-order')" :weight="-2">
+        <BootOrder
+          :value="bootOrderDevices"
+          :mode="mode"
+          @input="onBootOrderChange"
+        />
+      </Tab>
+
       <Tab name="nodeScheduling" :label="t('workload.container.titles.nodeScheduling')" :weight="-3">
         <template #default="{active}">
           <NodeScheduling :key="active" :mode="mode" :value="spec.template.spec" :nodes="nodesIdOptions" />
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index e85e813eec8..ed8ad6534ef 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -185,6 +185,7 @@ harvester:
   tab:
     volume: Volumes
     network: Networks
+    boot-order: Boot Order
     advanced: Advanced Options
     accessCredentials: Access Credentials
     pciDevices: PCI Devices
diff --git a/pkg/harvester/mixins/harvester-vm/index.js b/pkg/harvester/mixins/harvester-vm/index.js
index ac78170814a..b8e90830b9e 100644
--- a/pkg/harvester/mixins/harvester-vm/index.js
+++ b/pkg/harvester/mixins/harvester-vm/index.js
@@ -23,6 +23,19 @@ 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';
 
+// TODO remove unused properies
+function asBootOrderDevice(type) {
+  return el => ({
+    ...el,
+    type
+  });
+}
+
+export const BOOT_ORDER_TYPE = {
+  DISK:      'disk',
+  INTERFACE: 'interface'
+};
+
 export const MANAGEMENT_NETWORK = 'management Network';
 
 export const OS = [{
@@ -282,6 +295,13 @@ export default {
         topologyKeyPlaceholder: this.t('harvesterManager.affinity.topologyKey.placeholder')
       };
     },
+
+    bootOrderDevices() {
+      return [
+        ...this.networkRows?.map(asBootOrderDevice(BOOT_ORDER_TYPE.INTERFACE)),
+        ...this.diskRows?.map(asBootOrderDevice(BOOT_ORDER_TYPE.DISK))
+      ];
+    }
   },
 
   async created() {
@@ -403,6 +423,7 @@ export default {
         out.push({
           id:               randomStr(5),
           source:           SOURCE_TYPE.IMAGE,
+          bootOrder:        1,
           name:             'disk-0',
           accessMode:       'ReadWriteMany',
           bus:              'virtio',
@@ -414,7 +435,7 @@ export default {
           volumeMode:       'Block',
         });
       } else {
-        out = _disks.map( (DISK, index) => {
+        out = _disks.map( (DISK) => {
           const volume = _volumes.find( V => V.name === DISK.name );
 
           let size = '';
@@ -477,8 +498,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 +511,7 @@ export default {
 
           return {
             id:         randomStr(5),
-            bootOrder,
+            bootOrder:  DISK?.bootOrder,
             source,
             name:       DISK.name,
             realName,
@@ -581,7 +600,7 @@ export default {
       const diskNameLables = [];
       const volumeClaimTemplates = [];
 
-      disk.forEach( (R, index) => {
+      disk.forEach( (R) => {
         const prefixName = this.value.metadata?.name || '';
 
         let dataVolumeName = '';
@@ -594,7 +613,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);
 
@@ -869,8 +888,8 @@ export default {
       this.$set(this, 'memory', memory);
     },
 
-    parseDisk(R, index) {
-      const out = { name: R.name };
+    parseDisk(R) {
+      const out = { name: R.name, bootOrder: R.bootOrder };
 
       if (R.type === HARD_DISK) {
         out.disk = { bus: R.bus };
@@ -878,8 +897,6 @@ export default {
         out.cdrom = { bus: R.bus };
       }
 
-      out.bootOrder = index + 1;
-
       return out;
     },
 
@@ -957,6 +974,8 @@ export default {
       _interface.model = R.model;
       _interface.name = R.name;
 
+      _interface.bootOrder = R.bootOrder;
+
       return _interface;
     },
 
diff --git a/pkg/rancher-components/src/components/Card/Card.vue b/pkg/rancher-components/src/components/Card/Card.vue
index 50a67cf762f..3f3dd2ae634 100644
--- a/pkg/rancher-components/src/components/Card/Card.vue
+++ b/pkg/rancher-components/src/components/Card/Card.vue
@@ -50,6 +50,10 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
   }
 });
 </script>
@@ -57,7 +61,7 @@ export default Vue.extend({
 <template>
   <div
     class="card-container"
-    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
+    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky, 'disabled': disabled }"
     data-testid="card"
   >
     <div class="card-wrap">
@@ -163,5 +167,10 @@ export default Vue.extend({
       }
     }
    }
+
+   &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+   }
  }
 </style>

From 579910d01981c7605aa707657e2ce4216fdb0add Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sat, 27 Jan 2024 00:33:05 +0100
Subject: [PATCH 02/11] Add BootOrderCard component

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrderCard.vue    | 109 ++++++++++++++
 .../VirtualMachineBootOrder/index.vue         | 139 ++++++++----------
 2 files changed, 169 insertions(+), 79 deletions(-)
 create mode 100644 pkg/harvester/components/BootOrderCard.vue

diff --git a/pkg/harvester/components/BootOrderCard.vue b/pkg/harvester/components/BootOrderCard.vue
new file mode 100644
index 00000000000..afd45959335
--- /dev/null
+++ b/pkg/harvester/components/BootOrderCard.vue
@@ -0,0 +1,109 @@
+<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
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  methods: {
+    swap(dir) {
+      this.$emit('input', dir);
+    },
+  }
+};
+</script>
+
+<template>
+  <div
+    class="boot-order-card"
+  >
+    <div class="content">
+      <div class="body">
+        <span>{{ value.type + ' / ' + value.name }}</span>
+      </div>
+      <div class="description">
+      </div>
+    </div>
+    <div v-if="!isView && showButtons" class="buttons actions">
+      <div class="buttons-container mr-15">
+        <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>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .boot-order-card {
+    display: grid;
+    grid-template-columns: auto 300px;
+    min-height: 60px;
+    border: 1px solid var(--tabbed-border);
+    box-shadow: 0 0 10px var(--shadow);
+    border-radius: var(--border-radius);
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      flex-grow: 1;
+      .body {
+          max-width: 500px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin: 0 0 5px 0;
+      }
+      .description {
+        max-width: 550px;
+        word-wrap: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .actions {
+      display: flex;
+      .btn {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 476ab18cd83..3f12ba24910 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -1,7 +1,7 @@
 <script>
 import Vue from 'vue';
 import draggable from 'vuedraggable';
-import { Card } from '@components/Card';
+import BootOrderCard from '../../../components/BootOrderCard';
 import { _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
@@ -9,7 +9,7 @@ import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
 export default {
   components: {
     draggable,
-    Card
+    BootOrderCard
   },
 
   props: {
@@ -19,6 +19,11 @@ export default {
         return [];
       }
     },
+
+    mode: {
+      type:     String,
+      required: true
+    },
   },
 
   data() {
@@ -125,87 +130,51 @@ export default {
 <template>
   <div class="container">
     <div class="boot-order">
-      <Card
-        v-for="(row, index) in bootOrders"
+      <div
+        v-for="(pos, index) in bootOrders"
         :key="index"
-        :show-highlight-border="false"
+        class="position-container"
       >
-        <template #body>
-          <span>{{ row }}</span>
-        </template>
-
-        <template #actions>
-          <span></span>
-        </template>
-      </Card>
+        <span>{{ pos }}</span>
+      </div>
     </div>
     <div class="devices">
-      <draggable v-model="ordered" :disabled="isView" group="rows" class="list-group" @end="orderedDragEnd">
-        <transition-group :id="'ordered'">
-          <div v-for="(row, index) in ordered" :key="index">
-            <Card
-              :show-highlight-border="false"
-            >
-              <template #title>
-                <div class="card-title-slot">
-                  <h4
-                    v-clean-html="row.type + ' / ' + row.name"
-                    class="text-default-text"
-                  />
-                  <div v-if="!isView" class="buttons actions">
-                    <div class="buttons-container mr-15">
-                      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index -1)">
-                        <i class="icon icon-lg icon-chevron-up"></i>
-                      </button>
-
-                      <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
-                        <i class="icon icon-lg icon-chevron-down"></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </template>
-
-              <template #body>
-                <span>{{ row.bootOrder }}</span>
-              </template>
-
-              <template #actions>
-                <span></span>
-              </template>
-            </Card>
-          </div>
-        </transition-group>
+      <draggable
+        :id="'ordered'"
+        v-model="ordered"
+        :disabled="isView"
+        group="rows"
+        class="list-group ordered"
+        @end="orderedDragEnd"
+      >
+        <div v-for="(row, index) in ordered" :key="index">
+          <BootOrderCard
+            class="card"
+            :value="row"
+            :index="index"
+            :count="ordered.length"
+            :mode="mode"
+            @input="swap(index, index + $event)"
+          />
+        </div>
       </draggable>
 
-      <hr>
-      <hr>
-
-      <draggable v-model="unordered" :disabled="isView" group="rows" class="list-group" @end="unorderedDragEnd">
-        <transition-group :id="'unordered'" tag="div">
-          <div v-for="(row, index) in unordered" :key="index">
-            <Card
-              :show-highlight-border="false"
-            >
-              <template #title>
-                <div class="card-title-slot">
-                  <h4
-                    v-clean-html="row.type + ' / ' + row.name"
-                    class="text-default-text"
-                  />
-                </div>
-              </template>
-
-              <template #body>
-                <span></span>
-              </template>
-
-              <template #actions>
-                <span></span>
-              </template>
-            </Card>
-          </div>
-        </transition-group>
+      <draggable
+        :id="'unordered'"
+        v-model="unordered"
+        :disabled="isView"
+        group="rows"
+        class="list-group unordered"
+        @end="unorderedDragEnd"
+      >
+        <div v-for="(row, index) in unordered" :key="index">
+          <BootOrderCard
+            class="card"
+            :value="row"
+            :showButtons="false"
+            :mode="mode"
+          />
+        </div>
       </draggable>
     </div>
   </div>
@@ -217,14 +186,22 @@ export default {
     flex-direction: row;
 
     .boot-order {
-      .card-container {
-        width: 60px;
+      .position-container {
+        min-height: 60px;
+        width: 30px;
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
       }
     }
 
     .devices {
       width: inherit;
 
+      .card {
+        margin-bottom: 5px;
+      }
+
       .card-title-slot {
         display: flex;
         flex-direction: row;
@@ -241,6 +218,10 @@ export default {
   min-height: 130px;
 }
 
+.unordered {
+  margin-top: 50px;
+}
+
 .list-group:empty,
 .list-group > div:empty {
     padding:1rem;

From 89eb89bb75389151f72d362959b6bdc4a7717026 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sat, 27 Jan 2024 02:21:07 +0100
Subject: [PATCH 03/11] Implement boot order buttons

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineBootOrder/index.vue         | 108 +++++++++++++++++-
 .../VirtualMachineNetwork/index.vue           |   8 ++
 .../VirtualMachineVolume/index.vue            |  25 +---
 3 files changed, 117 insertions(+), 24 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 3f12ba24910..c9fa201f303 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -33,7 +33,8 @@ export default {
     return {
       ordered,
       unordered,
-      bootOrders: ordered.map(r => r.bootOrder)
+      bootOrders: ordered.map(r => r.bootOrder),
+      hideLast:   false
     };
   },
 
@@ -98,6 +99,7 @@ export default {
       } else {
         this.update();
       }
+      this.hideLast = false;
     },
 
     unorderedDragEnd(v) {
@@ -107,6 +109,49 @@ export default {
           this.getNextBootOrder()
         ].sort();
       }
+      this.hideLast = false;
+    },
+
+    onMove(v) {
+      if (v.from.id === 'ordered' && v.to.id === 'unordered') {
+        this.hideLast = true;
+      } else {
+        this.hideLast = false;
+      }
+    },
+
+    swapUnordered() {
+      this.bootOrders = [
+        ...this.bootOrders,
+        this.getNextBootOrder()
+      ].sort();
+
+      this.ordered.push(this.unordered[0]);
+      this.unordered.splice(0, 1);
+    },
+
+    swapUnorderedAll() {
+      this.unordered.forEach(() => {
+        this.bootOrders = [
+          ...this.bootOrders,
+          this.getNextBootOrder()
+        ].sort();
+      });
+      this.ordered.push(...this.unordered);
+      this.unordered = [];
+    },
+
+    swapOrdered() {
+      this.bootOrders.pop();
+
+      this.unordered.push(this.ordered[this.ordered.length - 1]);
+      this.ordered.splice(this.ordered.length - 1, 1);
+    },
+
+    swapOrderedAll() {
+      this.unordered.push(...this.ordered);
+      this.ordered = [];
+      this.bootOrders = [];
     },
 
     update() {
@@ -135,7 +180,7 @@ export default {
         :key="index"
         class="position-container"
       >
-        <span>{{ pos }}</span>
+        <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
       </div>
     </div>
     <div class="devices">
@@ -145,20 +190,40 @@ export default {
         :disabled="isView"
         group="rows"
         class="list-group ordered"
+        :move="onMove"
         @end="orderedDragEnd"
       >
         <div v-for="(row, index) in ordered" :key="index">
           <BootOrderCard
             class="card"
             :value="row"
-            :index="index"
-            :count="ordered.length"
+            :showButtons="false"
             :mode="mode"
             @input="swap(index, index + $event)"
           />
         </div>
       </draggable>
 
+      <div class="buttons actions">
+        <div class="buttons-container mr-15">
+          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapUnorderedAll">
+            <i class="icon icon-lg icon-chevron-beginning"></i>
+          </button>
+
+          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapUnordered">
+            <i class="icon icon-lg icon-chevron-up"></i>
+          </button>
+
+          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapOrdered">
+            <i class="icon icon-lg icon-chevron-down"></i>
+          </button>
+
+          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapOrderedAll">
+            <i class="icon icon-lg icon-chevron-end"></i>
+          </button>
+        </div>
+      </div>
+
       <draggable
         :id="'unordered'"
         v-model="unordered"
@@ -177,6 +242,20 @@ export default {
         </div>
       </draggable>
     </div>
+
+    <div>
+      <div v-for="(row, index) in ordered" :key="index" class="buttons actions">
+        <div v-if="!(hideLast && index === bootOrders.length - 1)" class="buttons-container mr-15">
+          <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index - 1)">
+            <i class="icon icon-lg icon-chevron-up"></i>
+          </button>
+
+          <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
+            <i class="icon icon-lg icon-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -197,6 +276,7 @@ export default {
 
     .devices {
       width: inherit;
+              max-width: 500px;
 
       .card {
         margin-bottom: 5px;
@@ -214,12 +294,30 @@ export default {
     }
   }
 
+.icon-chevron-beginning, .icon-chevron-end {
+transform: rotate(90deg);
+}
+
+.actions {
+  min-height: 60px;
+  margin-bottom: 5px;
+}
+
+.buttons-container {
+  height: 30px;
+  display: flex;
+  .btn {
+    margin-top: 5px;
+    margin-left: 5px;
+  }
+}
+
 .card-container {
   min-height: 130px;
 }
 
 .unordered {
-  margin-top: 50px;
+  margin-top: 10px;
 }
 
 .list-group:empty,
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
index 91781a59348..3534aa1b981 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
@@ -64,6 +64,10 @@ export default {
 
       return out;
     },
+
+    bootOrders() {
+      return this.value.map(r => r.bootOrder);
+    }
   },
 
   watch: {
@@ -141,6 +145,10 @@ export default {
         :network-option="networkOption"
         @update="update"
       />
+
+      <div v-if="bootOrders[i]" class="text-muted mt-20">
+        bootOrder: {{ bootOrders[i] }}
+      </div>
     </InfoBox>
 
     <button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index 69a3b5d54dc..4082e9e0459 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -125,6 +125,10 @@ export default {
     pvcs() {
       return this.$store.getters['harvester/all'](PVC) || [];
     },
+
+    bootOrders() {
+      return this.value.map(r => r.bootOrder);
+    }
   },
 
   watch: {
@@ -311,20 +315,8 @@ 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 v-if="bootOrders[i]" class="text-muted">
+              bootOrder: {{ bootOrders[i] }}
             </div>
 
             <Banner v-if="volume.volumeStatus && !isCreate" class="mt-15 volume-status" color="warning" :label="volume.volumeStatus" />
@@ -405,11 +397,6 @@ export default {
     padding: 0px;
   }
 
-  .bootOrder {
-    display: flex;
-    align-items: center;
-  }
-
   .buttons {
     width: 100%;
     display: flex;

From 6477e0c4b5843396f2373a71b0707d861920fded Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 28 Jan 2024 01:06:31 +0100
Subject: [PATCH 04/11] Implement boot order emit input

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineBootOrder/index.vue         | 51 +++++++++++++------
 .../VirtualMachineNetwork/index.vue           | 18 +++++--
 .../VirtualMachineVolume/index.vue            |  6 +--
 3 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index c9fa201f303..ebcc0edd6a3 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -27,13 +27,10 @@ export default {
   },
 
   data() {
-    const ordered = this.value.filter(f => f.bootOrder).sort((a, b) => a.bootOrder - b.bootOrder);
-    const unordered = this.value.filter(f => !f.bootOrder);
-
     return {
-      ordered,
-      unordered,
-      bootOrders: ordered.map(r => r.bootOrder),
+      ordered:    [],
+      unordered:  [],
+      bootOrders: [],
       hideLast:   false
     };
   },
@@ -45,10 +42,20 @@ export default {
   },
 
   watch: {
-    bootOrders: {
-      handler() {
-        this.update();
+    value: {
+      handler(neu) {
+        const value = clone(neu);
+
+        const ordered = value.filter(f => f.bootOrder).sort((a, b) => a.bootOrder - b.bootOrder);
+        const unordered = value.filter(f => !f.bootOrder);
+        const bootOrders = ordered.map(r => r.bootOrder);
+
+        Vue.set(this, 'ordered', ordered);
+        Vue.set(this, 'unordered', unordered);
+        Vue.set(this, 'bootOrders', bootOrders);
       },
+      immediate: true,
+      deep:      true,
     },
   },
 
@@ -80,6 +87,14 @@ export default {
       return bootOrder;
     },
 
+    onMove(v) {
+      if (v.from.id === 'ordered' && v.to.id === 'unordered') {
+        this.hideLast = true;
+      } else {
+        this.hideLast = false;
+      }
+    },
+
     swap(index1, index2) {
       const ordered = clone(this.ordered);
 
@@ -100,6 +115,8 @@ export default {
         this.update();
       }
       this.hideLast = false;
+
+      this.update();
     },
 
     unorderedDragEnd(v) {
@@ -110,14 +127,8 @@ export default {
         ].sort();
       }
       this.hideLast = false;
-    },
 
-    onMove(v) {
-      if (v.from.id === 'ordered' && v.to.id === 'unordered') {
-        this.hideLast = true;
-      } else {
-        this.hideLast = false;
-      }
+      this.update();
     },
 
     swapUnordered() {
@@ -128,6 +139,8 @@ export default {
 
       this.ordered.push(this.unordered[0]);
       this.unordered.splice(0, 1);
+
+      this.update();
     },
 
     swapUnorderedAll() {
@@ -139,6 +152,8 @@ export default {
       });
       this.ordered.push(...this.unordered);
       this.unordered = [];
+
+      this.update();
     },
 
     swapOrdered() {
@@ -146,12 +161,16 @@ export default {
 
       this.unordered.push(this.ordered[this.ordered.length - 1]);
       this.ordered.splice(this.ordered.length - 1, 1);
+
+      this.update();
     },
 
     swapOrderedAll() {
       this.unordered.push(...this.ordered);
       this.ordered = [];
       this.bootOrders = [];
+
+      this.update();
     },
 
     update() {
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
index 3534aa1b981..cd19349e9af 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 Vue from 'vue';
 import InfoBox from '@shell/components/InfoBox';
 import Base from './base';
 
@@ -66,21 +67,28 @@ export default {
     },
 
     bootOrders() {
-      return this.value.map(r => r.bootOrder);
+      return this.rows.map(r => r.bootOrder);
     }
   },
 
   watch: {
-    value(neu) {
-      this.rows = neu;
-    },
+    value: {
+      handler(neu) {
+        const rows = clone(neu).sort((a, b) => (a.bootOrder || 999999) - (b.bootOrder || 999999));
+
+        Vue.set(this, 'rows', rows);
+      },
+      immediate: true,
+      deep:      true,
+    }
   },
 
   methods: {
-    add(type) {
+    add() {
       const name = this.generateName();
 
       const neu = {
+        index:       this.rows.length + 1,
         name,
         networkName: '',
         model:       'virtio',
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index 4082e9e0459..be071cd9b60 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -127,14 +127,14 @@ export default {
     },
 
     bootOrders() {
-      return this.value.map(r => r.bootOrder);
+      return this.rows.map(r => r.bootOrder);
     }
   },
 
   watch: {
     value: {
       handler(neu) {
-        const rows = neu.map((V) => {
+        const rows = clone(neu).map((V) => {
           if (!this.isCreate && V.source !== SOURCE_TYPE.CONTAINER && !V.newCreateId) {
             V.to = {
               name:   `${ HARVESTER_PRODUCT }-c-cluster-resource-namespace-id`,
@@ -150,7 +150,7 @@ export default {
           }
 
           return V;
-        });
+        }).sort((a, b) => (a.bootOrder || 999999) - (b.bootOrder || 999999));
 
         this.$set(this, 'rows', rows);
       },

From e1345fdc47cb1b86be92b1ebb483b77f1dc49ea8 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 28 Jan 2024 02:06:36 +0100
Subject: [PATCH 05/11] Css refactoring

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrderCard.vue    |  36 ++--
 .../VirtualMachineBootOrder/index.vue         | 178 ++++++++++--------
 .../VirtualMachineNetwork/index.vue           |   6 +-
 .../VirtualMachineVolume/index.vue            |   2 +-
 pkg/harvester/l10n/en-us.yaml                 |   5 +-
 5 files changed, 130 insertions(+), 97 deletions(-)

diff --git a/pkg/harvester/components/BootOrderCard.vue b/pkg/harvester/components/BootOrderCard.vue
index afd45959335..ea219336300 100644
--- a/pkg/harvester/components/BootOrderCard.vue
+++ b/pkg/harvester/components/BootOrderCard.vue
@@ -51,13 +51,14 @@ export default {
   >
     <div class="content">
       <div class="body">
-        <span>{{ value.type + ' / ' + value.name }}</span>
+        <h3>{{ value.name }}</h3>
       </div>
-      <div class="description">
+      <div class="description text-muted">
+        <span>{{ value.type }}</span>
       </div>
     </div>
     <div v-if="!isView && showButtons" class="buttons actions">
-      <div class="buttons-container mr-15">
+      <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>
@@ -72,24 +73,30 @@ export default {
 
 <style lang="scss" scoped>
   .boot-order-card {
-    display: grid;
-    grid-template-columns: auto 300px;
-    min-height: 60px;
+    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;
+
     .content {
       display: flex;
       flex-direction: column;
-      gap: 15px;
-      flex-grow: 1;
+      justify-content: space-between;
+
       .body {
-          max-width: 500px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin: 0 0 5px 0;
+        max-width: 500px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        h3 {
+          margin: 0;
+        }
       }
       .description {
         max-width: 550px;
@@ -101,8 +108,9 @@ export default {
 
     .actions {
       display: flex;
+      padding-top: 6px;
       .btn {
-        margin-left: 5px;
+        margin-left: 4px;
       }
     }
   }
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index ebcc0edd6a3..3c37ef138a8 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -2,6 +2,8 @@
 import Vue from 'vue';
 import draggable from 'vuedraggable';
 import BootOrderCard from '../../../components/BootOrderCard';
+import { Banner } from '@components/Banner';
+
 import { _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
@@ -9,6 +11,7 @@ import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
 export default {
   components: {
     draggable,
+    Banner,
     BootOrderCard
   },
 
@@ -192,88 +195,94 @@ export default {
 </script>
 
 <template>
-  <div class="container">
-    <div class="boot-order">
-      <div
-        v-for="(pos, index) in bootOrders"
-        :key="index"
-        class="position-container"
-      >
-        <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
-      </div>
-    </div>
-    <div class="devices">
-      <draggable
-        :id="'ordered'"
-        v-model="ordered"
-        :disabled="isView"
-        group="rows"
-        class="list-group ordered"
-        :move="onMove"
-        @end="orderedDragEnd"
-      >
-        <div v-for="(row, index) in ordered" :key="index">
-          <BootOrderCard
-            class="card"
-            :value="row"
-            :showButtons="false"
-            :mode="mode"
-            @input="swap(index, index + $event)"
-          />
+  <div>
+    <!-- <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.bootOrder.dragTip" class="tip" /> -->
+    <div class="container">
+      <div class="boot-order">
+        <div
+          v-for="(pos, index) in bootOrders"
+          :key="index"
+          class="position-container"
+        >
+          <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
         </div>
-      </draggable>
-
-      <div class="buttons actions">
-        <div class="buttons-container mr-15">
-          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapUnorderedAll">
-            <i class="icon icon-lg icon-chevron-beginning"></i>
-          </button>
+      </div>
+      <div class="devices">
+        <draggable
+          :id="'ordered'"
+          v-model="ordered"
+          :disabled="isView"
+          group="rows"
+          class="list-group ordered"
+          :move="onMove"
+          @end="orderedDragEnd"
+        >
+          <div v-for="(row, index) in ordered" :key="index">
+            <BootOrderCard
+              class="card"
+              :value="row"
+              :index="index"
+              :count="ordered.length"
+              :mode="mode"
+              @input="swap(index, index + $event)"
+            />
+          </div>
+        </draggable>
+      </div>
 
-          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapUnordered">
+      <!-- <div>
+      <div v-for="(row, index) in ordered" :key="index" class="buttons actions">
+        <div v-if="!(hideLast && index === bootOrders.length - 1)" class="buttons-container mr-15">
+          <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index - 1)">
             <i class="icon icon-lg icon-chevron-up"></i>
           </button>
 
-          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapOrdered">
+          <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
             <i class="icon icon-lg icon-chevron-down"></i>
           </button>
-
-          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary" @click.prevent="swapOrderedAll">
-            <i class="icon icon-lg icon-chevron-end"></i>
-          </button>
         </div>
       </div>
+    </div> -->
 
-      <draggable
-        :id="'unordered'"
-        v-model="unordered"
-        :disabled="isView"
-        group="rows"
-        class="list-group unordered"
-        @end="unorderedDragEnd"
-      >
-        <div v-for="(row, index) in unordered" :key="index">
-          <BootOrderCard
-            class="card"
-            :value="row"
-            :showButtons="false"
-            :mode="mode"
-          />
-        </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="swapUnorderedAll">
+            <i class="icon icon-lg icon-chevron-beginning"></i>
+          </button>
 
-    <div>
-      <div v-for="(row, index) in ordered" :key="index" class="buttons actions">
-        <div v-if="!(hideLast && index === bootOrders.length - 1)" class="buttons-container mr-15">
-          <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index - 1)">
+          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapUnordered">
             <i class="icon icon-lg icon-chevron-up"></i>
           </button>
 
-          <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
+          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-20 ml-5" @click.prevent="swapOrdered">
             <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="swapOrderedAll">
+            <i class="icon icon-lg icon-chevron-end"></i>
+          </button>
         </div>
       </div>
+
+      <div class="devices">
+        <draggable
+          :id="'unordered'"
+          v-model="unordered"
+          :disabled="isView"
+          group="rows"
+          class="list-group unordered"
+          @end="unorderedDragEnd"
+        >
+          <div v-for="(row, index) in unordered" :key="index">
+            <BootOrderCard
+              class="card"
+              :value="row"
+              :showButtons="false"
+              :mode="mode"
+            />
+          </div>
+        </draggable>
+      </div>
     </div>
   </div>
 </template>
@@ -284,8 +293,9 @@ export default {
     flex-direction: row;
 
     .boot-order {
+      width: 30px;
       .position-container {
-        min-height: 60px;
+        min-height: 65px;
         width: 30px;
         margin-bottom: 5px;
         display: flex;
@@ -295,7 +305,7 @@ export default {
 
     .devices {
       width: inherit;
-              max-width: 500px;
+      max-width: 500px;
 
       .card {
         margin-bottom: 5px;
@@ -313,40 +323,48 @@ export default {
     }
   }
 
-.icon-chevron-beginning, .icon-chevron-end {
-transform: rotate(90deg);
+.icon-chevron-up, .icon-chevron-down {
+  transform: rotate(-90deg);
+}
+
+.swap-buttons {
+  display: flex;
+  flex-direction: column;
+
+  margin: 20px 20px 0 15px;
+
+  .buttons-container {
+    display: flex;
+    flex-direction: column;
+    vertical-align: middle;
+    min-height: 150px;
+  }
 }
 
 .actions {
-  min-height: 60px;
+  min-height: 65px;
   margin-bottom: 5px;
+  padding-top: 0;
 }
 
 .buttons-container {
   height: 30px;
   display: flex;
-  .btn {
-    margin-top: 5px;
-    margin-left: 5px;
-  }
 }
 
 .card-container {
   min-height: 130px;
 }
 
-.unordered {
-  margin-top: 10px;
-}
-
 .list-group:empty,
 .list-group > div:empty {
-    padding:1rem;
-    text-align:center;
+  margin-top: 20px;
+  padding:1rem;
+  text-align:center;
 }
 
 .list-group:empty:before,
 .list-group > div:empty:before {
-    content: 'Drop files here';
+  content: 'Drop devices here';
 }
 </style>
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
index cd19349e9af..fdfec26cca8 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue
@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import InfoBox from '@shell/components/InfoBox';
 import Base from './base';
+import { Banner } from '@components/Banner';
 
 import { NETWORK_ATTACHMENT } from '@shell/config/types';
 import { HCI as HCI_ANNOTATIONS } from '../../../config/labels-annotations';
@@ -12,7 +13,9 @@ import { removeObject } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
 
 export default {
-  components: { InfoBox, Base },
+  components: {
+    InfoBox, Base, Banner
+  },
 
   props: {
     mode: {
@@ -137,6 +140,7 @@ export default {
 
 <template>
   <div>
+    <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.network.bootOrderTip" />
     <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" />
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index be071cd9b60..aac1e9428f9 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -264,7 +264,7 @@ export default {
 
 <template>
   <div>
-    <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.volume.dragTip" />
+    <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.volume.bootOrderTip" />
     <draggable v-model="rows" :disabled="isView" @end="update">
       <transition-group>
         <div v-for="(volume, i) in rows" :key="volume.id">
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index ed8ad6534ef..7ae8c31d394 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -501,8 +501,10 @@ harvester:
     imageTip: An external URL to the .iso, .img, .qcow2 or .raw that the virtual machine should be created from.
     efiEnabled: Booting in EFI mode
     secureBoot: Secure Boot
+    bootOrder:
+      dragTip: Drag and drop devices, or use the device's arrows, to change the boot order.
     volume:
-      dragTip: Drag and drop volumes, or use the volume's arrows, to change the boot order.
+      bootOrderTip: To change the boot order go to Boot Order tab.
       volumeTip: The VM only contains a cd-rom volume. You may want to add additional disk volumes.
       macTip: "MAC address as seen inside the guest system."
       volumeUpdate: 'Set volume { name } successfully'
@@ -528,6 +530,7 @@ harvester:
         title: Are you sure?
         message: Are you sure you want to unmount this volume?
     network:
+      bootOrderTip: To change the boot order go to Boot Order tab.
       title: Network
       addNetwork: Add Network
       addPort:  Add Port

From 7c2ef6572f05e7bbd8d084ea3a25bd0d055c483e Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 28 Jan 2024 03:42:07 +0100
Subject: [PATCH 06/11] On drag rendering refactoring

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrderCard.vue    |  39 ++--
 .../VirtualMachineBootOrder/index.vue         | 184 ++++++++++--------
 2 files changed, 129 insertions(+), 94 deletions(-)

diff --git a/pkg/harvester/components/BootOrderCard.vue b/pkg/harvester/components/BootOrderCard.vue
index ea219336300..066fb4d21b6 100644
--- a/pkg/harvester/components/BootOrderCard.vue
+++ b/pkg/harvester/components/BootOrderCard.vue
@@ -41,6 +41,12 @@ export default {
     swap(dir) {
       this.$emit('input', dir);
     },
+    onMouseDown() {
+      this.$emit('mousedown');
+    },
+    onMouseUp() {
+      this.$emit('mouseup');
+    },
   }
 };
 </script>
@@ -48,6 +54,8 @@ export default {
 <template>
   <div
     class="boot-order-card"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
   >
     <div class="content">
       <div class="body">
@@ -57,23 +65,25 @@ export default {
         <span>{{ value.type }}</span>
       </div>
     </div>
-    <div v-if="!isView && showButtons" class="buttons actions">
-      <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>
+    <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>
-    </div>
+    </slot>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .boot-order-card {
-    display: flex;
+        display: flex;
     flex-direction: row;
     justify-content: space-between;
 
@@ -109,8 +119,11 @@ export default {
     .actions {
       display: flex;
       padding-top: 6px;
-      .btn {
-        margin-left: 4px;
+
+      .buttons-container {
+        .btn {
+          margin-left: 4px;
+                  }
       }
     }
   }
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 3c37ef138a8..6e6598ed6fd 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -2,7 +2,6 @@
 import Vue from 'vue';
 import draggable from 'vuedraggable';
 import BootOrderCard from '../../../components/BootOrderCard';
-import { Banner } from '@components/Banner';
 
 import { _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
@@ -11,7 +10,6 @@ import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
 export default {
   components: {
     draggable,
-    Banner,
     BootOrderCard
   },
 
@@ -31,10 +29,12 @@ export default {
 
   data() {
     return {
-      ordered:    [],
-      unordered:  [],
-      bootOrders: [],
-      hideLast:   false
+      ordered:     [],
+      unordered:   [],
+      bootOrders:  [],
+      hideLast:    false,
+      showNext:    null,
+      hideButtons: null,
     };
   },
 
@@ -90,7 +90,7 @@ export default {
       return bootOrder;
     },
 
-    onMove(v) {
+    onMoveOrdered(v) {
       if (v.from.id === 'ordered' && v.to.id === 'unordered') {
         this.hideLast = true;
       } else {
@@ -98,6 +98,19 @@ export default {
       }
     },
 
+    onMoveUnordered(v) {
+      if (v.from.id === 'unordered' && v.to.id === 'ordered') {
+        if (!this.showNext) {
+          this.showNext = [
+            ...this.bootOrders,
+            this.getNextBootOrder()
+          ].sort();
+        }
+      } else {
+        this.showNext = null;
+      }
+    },
+
     swap(index1, index2) {
       const ordered = clone(this.ordered);
 
@@ -111,6 +124,14 @@ export default {
       this.update();
     },
 
+    hideDragElementButtons(index) {
+      this.hideButtons = index;
+    },
+
+    showDragElementButtons() {
+      this.hideButtons = null;
+    },
+
     orderedDragEnd(v) {
       if (v.to.id === 'unordered') {
         this.bootOrders.pop();
@@ -118,6 +139,8 @@ export default {
         this.update();
       }
       this.hideLast = false;
+      this.showNext = null;
+      this.hideButtons = null;
 
       this.update();
     },
@@ -130,6 +153,7 @@ export default {
         ].sort();
       }
       this.hideLast = false;
+      this.showNext = null;
 
       this.update();
     },
@@ -195,94 +219,92 @@ export default {
 </script>
 
 <template>
-  <div>
-    <!-- <Banner v-if="!isView" color="info" label-key="harvester.virtualMachine.bootOrder.dragTip" class="tip" /> -->
-    <div class="container">
-      <div class="boot-order">
+  <div class="container">
+    <div class="boot-order">
+      <div v-if="showNext">
         <div
-          v-for="(pos, index) in bootOrders"
+          v-for="(pos, index) in showNext"
           :key="index"
           class="position-container"
         >
-          <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
+          <span>{{ pos }}</span>
         </div>
       </div>
-      <div class="devices">
-        <draggable
-          :id="'ordered'"
-          v-model="ordered"
-          :disabled="isView"
-          group="rows"
-          class="list-group ordered"
-          :move="onMove"
-          @end="orderedDragEnd"
+      <div v-else>
+        <div
+          v-for="(pos, index) in bootOrders"
+          :key="index"
+          class="position-container"
         >
-          <div v-for="(row, index) in ordered" :key="index">
-            <BootOrderCard
-              class="card"
-              :value="row"
-              :index="index"
-              :count="ordered.length"
-              :mode="mode"
-              @input="swap(index, index + $event)"
-            />
-          </div>
-        </draggable>
-      </div>
-
-      <!-- <div>
-      <div v-for="(row, index) in ordered" :key="index" class="buttons actions">
-        <div v-if="!(hideLast && index === bootOrders.length - 1)" class="buttons-container mr-15">
-          <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="swap(index, index - 1)">
-            <i class="icon icon-lg icon-chevron-up"></i>
-          </button>
-
-          <button :disabled="index === ordered.length - 1" class="btn btn-sm role-primary" @click.prevent="swap(index, index + 1)">
-            <i class="icon icon-lg icon-chevron-down"></i>
-          </button>
+          <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
         </div>
       </div>
-    </div> -->
+    </div>
+    <div class="devices">
+      <draggable
+        :id="'ordered'"
+        v-model="ordered"
+        :disabled="isView"
+        group="rows"
+        class="list-group ordered"
+        :move="onMoveOrdered"
+        @end="orderedDragEnd"
+      >
+        <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="swap(index, index + $event)"
+            @mousedown="hideDragElementButtons(index)"
+            @mouseup="showDragElementButtons"
+          />
+        </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="swapUnorderedAll">
-            <i class="icon icon-lg icon-chevron-beginning"></i>
-          </button>
+    <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="swapUnorderedAll">
+          <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="swapUnordered">
-            <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="swapUnordered">
+          <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="swapOrdered">
-            <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="swapOrdered">
+          <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="swapOrderedAll">
-            <i class="icon icon-lg icon-chevron-end"></i>
-          </button>
-        </div>
+        <button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapOrderedAll">
+          <i class="icon icon-lg icon-chevron-end"></i>
+        </button>
       </div>
+    </div>
 
-      <div class="devices">
-        <draggable
-          :id="'unordered'"
-          v-model="unordered"
-          :disabled="isView"
-          group="rows"
-          class="list-group unordered"
-          @end="unorderedDragEnd"
-        >
-          <div v-for="(row, index) in unordered" :key="index">
-            <BootOrderCard
-              class="card"
-              :value="row"
-              :showButtons="false"
-              :mode="mode"
-            />
-          </div>
-        </draggable>
-      </div>
+    <div class="devices">
+      <draggable
+        :id="'unordered'"
+        v-model="unordered"
+        :disabled="isView"
+        group="rows"
+        class="list-group unordered"
+        :move="onMoveUnordered"
+        @end="unorderedDragEnd"
+      >
+        <div v-for="(row, index) in unordered" :key="index">
+          <BootOrderCard
+            class="card"
+            :value="row"
+            :showButtons="false"
+            :mode="mode"
+          />
+        </div>
+      </draggable>
     </div>
   </div>
 </template>
@@ -305,7 +327,7 @@ export default {
 
     .devices {
       width: inherit;
-      max-width: 500px;
+            max-width: 500px;
 
       .card {
         margin-bottom: 5px;

From cb875d6ff869311f82f2bda1350764cae48c77c7 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Sun, 28 Jan 2024 03:42:19 +0100
Subject: [PATCH 07/11] Clean-up code

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .vscode/settings.json                         |   2 +-
 package.json                                  |   2 +-
 .../VirtualMachineBootOrder/index.vue         | 128 +++++++++---------
 pkg/harvester/mixins/harvester-vm/index.js    |   1 -
 .../src/components/Card/Card.vue              |  11 +-
 5 files changed, 70 insertions(+), 74 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e5ac1948794..a8209ce563c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,7 @@
   "eslint.packageManager": "yarn",
   "eslint.validate": ["vue","html","javascript","typescript"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true
   },
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "typescript.preferences.importModuleSpecifier": "non-relative",
diff --git a/package.json b/package.json
index 709379cc007..b7eb4f61587 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "test": "jest --watch",
     "test:ci": "jest --collectCoverage --silent",
     "install:ci": "yarn install --frozen-lockfile",
-    "dev": "bash -c 'source ./scripts/version && NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve --host localhost'",
+    "dev": "bash -c 'source ./scripts/version && NODE_ENV=dev ./node_modules/.bin/vue-cli-service serve'",
     "mem-dev": "bash -c 'source ./scripts/version && NODE_ENV=dev node --max-old-space-size=8192 ./node_modules/.bin/vue-cli-service serve'",
     "docker-dev": "docker run --rm --name dashboard-dev -p 8005:8005 -e API=$API -v $(pwd):/src -v dashboard_node:/src/node_modules rancher/dashboard:dev",
     "docker:local:start": "docker run -d --restart=unless-stopped -p 80:80 -p 443:443 -e CATTLE_BOOTSTRAP_PASSWORD=password -e CATTLE_PASSWORD_MIN_LENGTH=3 --name cypress --privileged rancher/rancher:v2.7-head",
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 6e6598ed6fd..dd4d4882998 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -70,16 +70,6 @@ export default {
       );
     },
 
-    updateRows(bootOrderGetter) {
-      return (r, index) => {
-        const el = this.findElem(r);
-
-        el.bootOrder = bootOrderGetter(index);
-
-        return el;
-      };
-    },
-
     getNextBootOrder() {
       let bootOrder = 1;
 
@@ -111,54 +101,28 @@ export default {
       }
     },
 
-    swap(index1, index2) {
-      const ordered = clone(this.ordered);
-
-      const temp = ordered[index1];
-
-      ordered[index1] = ordered[index2];
-      ordered[index2] = temp;
-
-      Vue.set(this, 'ordered', ordered);
-
-      this.update();
-    },
-
-    hideDragElementButtons(index) {
+    onMouseDownOrdered(index) {
       this.hideButtons = index;
     },
 
-    showDragElementButtons() {
+    onMouseUpOrdered() {
       this.hideButtons = null;
     },
 
-    orderedDragEnd(v) {
-      if (v.to.id === 'unordered') {
-        this.bootOrders.pop();
-      } else {
-        this.update();
-      }
-      this.hideLast = false;
-      this.showNext = null;
-      this.hideButtons = null;
+    swapOrdered(index1, index2) {
+      const ordered = clone(this.ordered);
 
-      this.update();
-    },
+      const temp = ordered[index1];
 
-    unorderedDragEnd(v) {
-      if (v.to.id === 'ordered') {
-        this.bootOrders = [
-          ...this.bootOrders,
-          this.getNextBootOrder()
-        ].sort();
-      }
-      this.hideLast = false;
-      this.showNext = null;
+      ordered[index1] = ordered[index2];
+      ordered[index2] = temp;
+
+      Vue.set(this, 'ordered', ordered);
 
       this.update();
     },
 
-    swapUnordered() {
+    swapToUnordered() {
       this.bootOrders = [
         ...this.bootOrders,
         this.getNextBootOrder()
@@ -170,7 +134,7 @@ export default {
       this.update();
     },
 
-    swapUnorderedAll() {
+    swapToUnorderedAll() {
       this.unordered.forEach(() => {
         this.bootOrders = [
           ...this.bootOrders,
@@ -183,7 +147,7 @@ export default {
       this.update();
     },
 
-    swapOrdered() {
+    swapToOrdered() {
       this.bootOrders.pop();
 
       this.unordered.push(this.ordered[this.ordered.length - 1]);
@@ -192,7 +156,7 @@ export default {
       this.update();
     },
 
-    swapOrderedAll() {
+    swapToOrderedAll() {
       this.unordered.push(...this.ordered);
       this.ordered = [];
       this.bootOrders = [];
@@ -200,6 +164,42 @@ export default {
       this.update();
     },
 
+    dragEndOrdered(v) {
+      if (v.to.id === 'unordered') {
+        this.bootOrders.pop();
+      } else {
+        this.update();
+      }
+      this.hideLast = false;
+      this.showNext = null;
+      this.hideButtons = null;
+
+      this.update();
+    },
+
+    dragEndUnordered(v) {
+      if (v.to.id === 'ordered') {
+        this.bootOrders = [
+          ...this.bootOrders,
+          this.getNextBootOrder()
+        ].sort();
+      }
+      this.hideLast = false;
+      this.showNext = null;
+
+      this.update();
+    },
+
+    updateRows(bootOrderGetter) {
+      return (r, index) => {
+        const el = this.findElem(r);
+
+        el.bootOrder = bootOrderGetter(index);
+
+        return el;
+      };
+    },
+
     update() {
       const rows = [
         ...this.ordered.map(this.updateRows(i => this.bootOrders[i])),
@@ -227,7 +227,7 @@ export default {
           :key="index"
           class="position-container"
         >
-          <span>{{ pos }}</span>
+          <h4>{{ pos }}</h4>
         </div>
       </div>
       <div v-else>
@@ -236,7 +236,9 @@ export default {
           :key="index"
           class="position-container"
         >
-          <span v-if="!(hideLast && index === bootOrders.length - 1)">{{ pos }}</span>
+          <h4 v-if="!(hideLast && index === bootOrders.length - 1)">
+            {{ pos }}
+          </h4>
         </div>
       </div>
     </div>
@@ -248,7 +250,7 @@ export default {
         group="rows"
         class="list-group ordered"
         :move="onMoveOrdered"
-        @end="orderedDragEnd"
+        @end="dragEndOrdered"
       >
         <div v-for="(row, index) in ordered" :key="index">
           <BootOrderCard
@@ -258,9 +260,9 @@ export default {
             :index="index"
             :count="ordered.length"
             :mode="mode"
-            @input="swap(index, index + $event)"
-            @mousedown="hideDragElementButtons(index)"
-            @mouseup="showDragElementButtons"
+            @input="swapOrdered(index, index + $event)"
+            @mousedown="onMouseDownOrdered(index)"
+            @mouseup="onMouseUpOrdered"
           />
         </div>
       </draggable>
@@ -268,19 +270,19 @@ export default {
 
     <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="swapUnorderedAll">
+        <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="swapUnordered">
+        <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="swapOrdered">
+        <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="swapOrderedAll">
+        <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>
@@ -294,7 +296,7 @@ export default {
         group="rows"
         class="list-group unordered"
         :move="onMoveUnordered"
-        @end="unorderedDragEnd"
+        @end="dragEndUnordered"
       >
         <div v-for="(row, index) in unordered" :key="index">
           <BootOrderCard
@@ -322,12 +324,16 @@ export default {
         margin-bottom: 5px;
         display: flex;
         align-items: center;
+
+        h4 {
+          margin: 0;
+        }
       }
     }
 
     .devices {
       width: inherit;
-            max-width: 500px;
+      max-width: 500px;
 
       .card {
         margin-bottom: 5px;
diff --git a/pkg/harvester/mixins/harvester-vm/index.js b/pkg/harvester/mixins/harvester-vm/index.js
index b8e90830b9e..a584a6e3e1f 100644
--- a/pkg/harvester/mixins/harvester-vm/index.js
+++ b/pkg/harvester/mixins/harvester-vm/index.js
@@ -23,7 +23,6 @@ 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';
 
-// TODO remove unused properies
 function asBootOrderDevice(type) {
   return el => ({
     ...el,
diff --git a/pkg/rancher-components/src/components/Card/Card.vue b/pkg/rancher-components/src/components/Card/Card.vue
index 3f3dd2ae634..50a67cf762f 100644
--- a/pkg/rancher-components/src/components/Card/Card.vue
+++ b/pkg/rancher-components/src/components/Card/Card.vue
@@ -50,10 +50,6 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
-    disabled: {
-      type:    Boolean,
-      default: false,
-    },
   }
 });
 </script>
@@ -61,7 +57,7 @@ export default Vue.extend({
 <template>
   <div
     class="card-container"
-    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky, 'disabled': disabled }"
+    :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"
   >
     <div class="card-wrap">
@@ -167,10 +163,5 @@ export default Vue.extend({
       }
     }
    }
-
-   &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-   }
  }
 </style>

From 332e602d88a51455dd0733a5bd0df9a9358959c7 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 29 Jan 2024 15:21:15 +0100
Subject: [PATCH 08/11] Add boot order tab to details page

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../detail/kubevirt.io.virtualmachine/index.vue    |  9 +++++++++
 ...rvesterhci.io.virtualmachinetemplateversion.vue |  9 +++++++++
 .../VirtualMachineBootOrder/index.vue              | 14 +++++++++-----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
index e3032ffacd6..f7faae7e902 100644
--- a/pkg/harvester/detail/kubevirt.io.virtualmachine/index.vue
+++ b/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>
diff --git a/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue b/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue
index 72dd744f2bd..937a80c6b2e 100644
--- a/pkg/harvester/edit/harvesterhci.io.virtualmachinetemplateversion.vue
+++ b/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')"
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index dd4d4882998..5fe015aef41 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -7,6 +7,10 @@ import { _VIEW } from '@shell/config/query-params';
 import { clone } from '@shell/utils/object';
 import { BOOT_ORDER_TYPE } from '../../../mixins/harvester-vm';
 
+function getId(elem) {
+  return `${ elem.type }_${ elem.index }_${ elem.id }`;
+}
+
 export default {
   components: {
     draggable,
@@ -50,7 +54,10 @@ export default {
         const value = clone(neu);
 
         const ordered = value.filter(f => f.bootOrder).sort((a, b) => a.bootOrder - b.bootOrder);
-        const unordered = value.filter(f => !f.bootOrder);
+
+        const oldUnorderedIds = this.unordered.map(getId);
+        const unordered = value.filter(f => !f.bootOrder).sort((a, b) => oldUnorderedIds.indexOf(getId(a)) - oldUnorderedIds.indexOf(getId(b)));
+
         const bootOrders = ordered.map(r => r.bootOrder);
 
         Vue.set(this, 'ordered', ordered);
@@ -64,10 +71,7 @@ export default {
 
   methods: {
     findElem(elem) {
-      return this.value.find(f => f.type === elem.type &&
-        ((f.index !== undefined && f.index === elem.index) ||
-        (f.id !== undefined && f.id === elem.id))
-      );
+      return this.value.find(f => getId(f) === getId(elem));
     },
 
     getNextBootOrder() {

From a59c2c5af9a2cba504ba602a8b2a4ad6bbbdb8d1 Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 29 Jan 2024 15:21:53 +0100
Subject: [PATCH 09/11] Move boot order tab; disable UI in edit mode

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 pkg/harvester/components/BootOrderCard.vue    |  17 +-
 .../VirtualMachineBootOrder/index.vue         | 170 ++++++++++--------
 .../edit/kubevirt.io.virtualmachine/index.vue |  14 +-
 3 files changed, 122 insertions(+), 79 deletions(-)

diff --git a/pkg/harvester/components/BootOrderCard.vue b/pkg/harvester/components/BootOrderCard.vue
index 066fb4d21b6..66f3a74b1fd 100644
--- a/pkg/harvester/components/BootOrderCard.vue
+++ b/pkg/harvester/components/BootOrderCard.vue
@@ -29,6 +29,11 @@ export default {
       type:     String,
       required: true
     },
+
+    disabled: {
+      type:    Boolean,
+      default: false
+    }
   },
 
   computed: {
@@ -54,6 +59,7 @@ export default {
 <template>
   <div
     class="boot-order-card"
+    :class="{ disabled: disabled }"
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
   >
@@ -83,7 +89,7 @@ export default {
 
 <style lang="scss" scoped>
   .boot-order-card {
-        display: flex;
+    display: flex;
     flex-direction: row;
     justify-content: space-between;
 
@@ -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;
@@ -123,7 +136,7 @@ export default {
       .buttons-container {
         .btn {
           margin-left: 4px;
-                  }
+        }
       }
     }
   }
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 5fe015aef41..60b98e70d34 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -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
@@ -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 {
diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
index 954ebe1eba4..d46c74e356e 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue
@@ -548,7 +548,7 @@ 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"
@@ -556,13 +556,13 @@ export default {
         />
       </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"
@@ -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">

From 5cb548508715a4af4bdfe799889b63ea80010b0c Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 29 Jan 2024 16:32:18 +0100
Subject: [PATCH 10/11] Remove switch function from Volume tab

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

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
index aac1e9428f9..bc5367073d6 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue
@@ -249,12 +249,6 @@ 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;
     }

From 5526bf425686e06ae211ae337942dabde466186a Mon Sep 17 00:00:00 2001
From: Francesco Torchia <francesco.torchia@suse.com>
Date: Mon, 29 Jan 2024 16:33:12 +0100
Subject: [PATCH 11/11] Clean-up code

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
---
 .../VirtualMachineBootOrder/index.vue         | 60 +++++++------------
 1 file changed, 22 insertions(+), 38 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
index 60b98e70d34..0c1c61217b8 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineBootOrder/index.vue
@@ -84,6 +84,13 @@ export default {
       return bootOrder;
     },
 
+    addBootOrder() {
+      this.bootOrders = [
+        ...this.bootOrders,
+        this.getNextBootOrder()
+      ].sort();
+    },
+
     onMoveOrdered(v) {
       if (v.from.id === 'ordered' && v.to.id === 'unordered') {
         this.hideLast = true;
@@ -121,37 +128,28 @@ export default {
       ordered[index1] = ordered[index2];
       ordered[index2] = temp;
 
-      Vue.set(this, 'ordered', ordered);
+      this.ordered = ordered;
 
       this.update();
     },
 
-    swapToUnordered() {
-      this.bootOrders = [
-        ...this.bootOrders,
-        this.getNextBootOrder()
-      ].sort();
-
+    swapToOrdered() {
+      this.addBootOrder();
       this.ordered.push(this.unordered[0]);
       this.unordered.splice(0, 1);
 
       this.update();
     },
 
-    swapToUnorderedAll() {
-      this.unordered.forEach(() => {
-        this.bootOrders = [
-          ...this.bootOrders,
-          this.getNextBootOrder()
-        ].sort();
-      });
+    swapToOrderedAll() {
+      this.unordered.forEach(this.addBootOrder);
       this.ordered.push(...this.unordered);
       this.unordered = [];
 
       this.update();
     },
 
-    swapToOrdered() {
+    swapToUnordered() {
       this.bootOrders.pop();
 
       this.unordered.push(this.ordered[this.ordered.length - 1]);
@@ -160,10 +158,11 @@ export default {
       this.update();
     },
 
-    swapToOrderedAll() {
+    swapToUnorderedAll() {
+      this.bootOrders = [];
+
       this.unordered.push(...this.ordered);
       this.ordered = [];
-      this.bootOrders = [];
 
       this.update();
     },
@@ -171,9 +170,8 @@ export default {
     dragEndOrdered(v) {
       if (v.to.id === 'unordered') {
         this.bootOrders.pop();
-      } else {
-        this.update();
       }
+
       this.hideLast = false;
       this.showNext = null;
       this.hideButtons = null;
@@ -183,10 +181,7 @@ export default {
 
     dragEndUnordered(v) {
       if (v.to.id === 'ordered') {
-        this.bootOrders = [
-          ...this.bootOrders,
-          this.getNextBootOrder()
-        ].sort();
+        this.addBootOrder();
       }
       this.hideLast = false;
       this.showNext = null;
@@ -248,17 +243,6 @@ export default {
           </h4>
         </div>
       </div>
-      <!-- <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>
-      </div> -->
     </div>
     <div class="container" :class="{ 'is-view': isView }">
       <div class="devices">
@@ -289,19 +273,19 @@ export default {
 
       <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">
+          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary ml-5" @click.prevent="swapToOrderedAll">
             <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">
+          <button :disabled="unordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToOrdered">
             <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">
+          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-20 ml-5" @click.prevent="swapToUnordered">
             <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">
+          <button :disabled="ordered.length === 0" class="btn btn-sm role-primary mt-5 ml-5" @click.prevent="swapToUnorderedAll">
             <i class="icon icon-lg icon-chevron-end"></i>
           </button>
         </div>