Support network interface boot orders in VM forms

pkg/harvester/components/BootOrder.vue

@@ -0,0 +1,69 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+
+export default {
+  name: 'BootOrder',
+
+  props: {
+    index: {
+      type:    Number,
+      default: 0,
+    },
+
+    count: {
+      type:    Number,
+      default: 1,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    tooltip: {
+      type:    Object,
+      default: null
+    }
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+  },
+
+  methods: {
+    update(step) {
+      this.$emit('input', step);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="boot-order">
+    <div v-if="!isView" class="buttons-container mr-15">
+      <button :disabled="index === 0" class="btn btn-sm role-primary" @click.prevent="update(-1)">
+        <i class="icon icon-lg icon-chevron-up"></i>
+      </button>
+
+      <button :disabled="index === count - 1" class="btn btn-sm role-primary" @click.prevent="update(1)">
+        <i class="icon icon-lg icon-chevron-down"></i>
+      </button>
+    </div>
+
+    <div
+      v-clean-tooltip="tooltip"
+      class="text-muted"
+    >
+      bootOrder: {{ index + 1 }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .boot-order {
+    display: flex;
+    align-items: center;
+  }
+</style>

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

@@ -168,11 +168,16 @@ export default {
           :namespace="value.metadata.namespace"
           :vm="value"
           :resource-type="value.type"
+          :boot-orders="bootOrders"
         />
       </Tab>
 
       <Tab name="networks" :label="t('harvester.virtualMachine.detail.tabs.networks')" class="bordered-table" :weight="5">
-        <Network v-model="networkRows" mode="view" />
+        <Network
+          v-model="networkRows"
+          :boot-orders="bootOrders"
+          mode="view"
+        />
       </Tab>
 
       <Tab name="keypairs" :label="t('harvester.virtualMachine.detail.tabs.keypairs')" class="bordered-table" :weight="3">

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineDeviceBootOrder.vue

@@ -0,0 +1,80 @@
+<script>
+import { _VIEW } from '@shell/config/query-params';
+import BootOrder from '../../components/BootOrder';
+
+export default {
+  name: 'VirtualMachineDeviceBootOrder',
+
+  components: { BootOrder },
+
+  props: {
+    bootOrders: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+
+    bootOrder: {
+      type:    Number,
+      default: null,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    },
+    index() {
+      return this.bootOrder !== null ? this.bootOrder - 1 : 0;
+    },
+    count() {
+      return Math.max(...this.bootOrders.map(o => o.bootOrder));
+    },
+    tooltipContent() {
+      if (this.bootOrders.length === 0) {
+        return '';
+      }
+
+      const bootOrders = [...this.bootOrders].sort((a, b) => a.bootOrder - b.bootOrder);
+      const title = this.t('harvester.virtualMachine.bootOrder.details');
+
+      return bootOrders.reduce((acc, r) => `${ acc } <b>${ r.bootOrder }</b>:  ${ r.type === 'disk' ? 'disk' : 'network' } / ${ r.name }<br>`, `${ title }<br><br>`);
+    },
+  },
+
+  methods: {
+    onInputIndex(step) {
+      const elem = this.bootOrders.find(o => o.bootOrder === this.bootOrder);
+
+      let neu = this.index + step + 1;
+
+      while (!this.bootOrders.find(o => o.bootOrder === neu)) {
+        neu = neu + step;
+      }
+
+      const emit = {
+        ...elem,
+        neu,
+      };
+
+      this.$emit('input', emit);
+    }
+  }
+};
+</script>
+
+<template>
+  <BootOrder
+    :index="index"
+    :count="count"
+    :mode="mode"
+    :tooltip="{content: tooltipContent, placement: 'right'}"
+    @input="onInputIndex"
+  />
+</template>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/index.vue

@@ -1,4 +1,5 @@
 <script>
+import draggable from 'vuedraggable';
 import InfoBox from '@shell/components/InfoBox';
 import Base from './base';
 
@@ -9,9 +10,15 @@ import { clone } from '@shell/utils/object';
 import { randomStr } from '@shell/utils/string';
 import { removeObject } from '@shell/utils/array';
 import { _VIEW } from '@shell/config/query-params';
+import VirtualMachineDeviceBootOrder from '../VirtualMachineDeviceBootOrder';
 
 export default {
-  components: { InfoBox, Base },
+  components: {
+    draggable,
+    InfoBox,
+    Base,
+    VirtualMachineDeviceBootOrder,
+  },
 
   props: {
     mode: {
@@ -29,6 +36,13 @@ export default {
     isSingle: {
       type:    Boolean,
       default: true
+    },
+
+    bootOrders: {
+      type:    Array,
+      default: () => {
+        return [];
+      }
     }
   },
 
@@ -67,8 +81,12 @@ export default {
   },
 
   watch: {
-    value(neu) {
-      this.rows = neu;
+    value: {
+      handler(neu) {
+        this.rows = neu;
+      },
+      deep:      true,
+      immediate: true
     },
   },
 
@@ -77,12 +95,14 @@ export default {
       const name = this.generateName();
 
       const neu = {
+        index:       this.rows.length,
         name,
         networkName: '',
         model:       'virtio',
         type:        'bridge',
         newCreateId: randomStr(10),
-        rowKeyId:    randomStr(10)
+        rowKeyId:    randomStr(10),
+        bootOrder:   this.generateBootOrder(this.rows.length),
       };
 
       this.rows.push(neu);
@@ -116,33 +136,79 @@ export default {
       return name;
     },
 
-    update() {
-      this.$emit('input', this.rows);
+    generateBootOrder(pos) {
+      const bootOrders = this.bootOrders?.map(o => o.bootOrder) || [];
+
+      if (bootOrders) {
+        return Math.max(...bootOrders) + 1 || pos;
+      }
+    },
+
+    onInputBootOrder(value) {
+      this.$emit('boot-order', value);
+    },
+
+    drag(v) {
+      const oldElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.oldIndex].bootOrder);
+      const neuElem = this.bootOrders.find(o => o.bootOrder === this.rows[v.newIndex].bootOrder);
+
+      const emit = {
+        ...oldElem,
+        neu: neuElem.bootOrder,
+      };
+
+      this.onInputBootOrder(emit);
+
+      this.update(true);
+    },
+
+    update(sort = false) {
+      let rows = [...this.rows];
+
+      if (sort) {
+        if (rows?.length) {
+          rows = this.rows.sort((a, b) => a.bootOrder - b.bootOrder);
+        }
+      }
+      this.$emit('input', rows);
     }
   }
 };
 </script>
 
 <template>
   <div>
-    <InfoBox v-for="(row, i) in rows" :key="i" class="infoBox">
-      <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
-        <i class="icon icon-x" />
-      </button>
-
-      <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
-
-      <Base
-        :key="rows[i].rowKeyId"
-        v-model="rows[i]"
-        :rows="rows"
-        :mode="mode"
-        :is-single="isSingle"
-        :network-option="networkOption"
-        @update="update"
-      />
-    </InfoBox>
-
+    <draggable v-model="rows" :disabled="isView" @end="drag">
+      <transition-group>
+        <div v-for="(row, i) in rows" :key="i">
+          <InfoBox class="infoBox">
+            <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
+              <i class="icon icon-x" />
+            </button>
+
+            <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
+
+            <Base
+              :key="rows[i].rowKeyId"
+              v-model="rows[i]"
+              class="mb-20"
+              :rows="rows"
+              :mode="mode"
+              :is-single="isSingle"
+              :network-option="networkOption"
+              @update="update"
+            />
+
+            <VirtualMachineDeviceBootOrder
+              :mode="mode"
+              :boot-orders="bootOrders"
+              :boot-order="rows[i].bootOrder"
+              @input="onInputBootOrder"
+            />
+          </InfoBox>
+        </div>
+      </transition-group>
+    </draggable>
     <button v-if="!isView" type="button" class="btn btn-sm bg-primary" @click="add">
       {{ t('harvester.virtualMachine.network.addNetwork') }}
     </button>