feat: support for HotPlugNICs from Kubevirt (#582)

* refactor: rename hotplug volume
* feat: add hotplug NIC
* feat: add hot unplug
* refactor: rename NIC
* feat: get latest status
* feat: disable not ready options
* feat: filter out system networks
* refactor: update wordings

---------

Signed-off-by: Yi-Ya Chen <yiya.chen@suse.com>

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

@@ -1,6 +1,5 @@
 <script>
 import InfoBox from '@shell/components/InfoBox';
-
 import { NETWORK_ATTACHMENT } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { clone } from '@shell/utils/object';
@@ -14,6 +13,13 @@ export default {
   components: { InfoBox, Base },
 
   props: {
+    vm: {
+      type:    Object,
+      default: () => {
+        return {};
+      }
+    },
+
     mode: {
       type:    String,
       default: 'create'
@@ -32,10 +38,15 @@ export default {
     }
   },
 
+  async fetch() {
+    await this.fetchHotunplugData();
+  },
+
   data() {
     return {
-      rows:    this.addKeyId(clone(this.value)),
-      nameIdx: 1
+      nameIdx:            1,
+      rows:               this.addKeyId(clone(this.value)),
+      hotunpluggableNics: new Set(),
     };
   },
 
@@ -64,15 +75,57 @@ export default {
 
       return out;
     },
+
+    canCheckHotunplug() {
+      return !!this.vm?.actions?.findHotunpluggableNics;
+    },
+
+    vmState() {
+      return this.vm?.stateDisplay;
+    }
   },
 
   watch: {
     value(neu) {
-      this.rows = neu;
+      this.rows = this.mergeHotplugData(clone(neu));
     },
+
+    vmState(newState, oldState) {
+      if (newState !== oldState) {
+        this.fetchHotunplugData();
+      }
+    }
   },
 
   methods: {
+    async fetchHotunplugData() {
+      if (!this.canCheckHotunplug) {
+        this.rows = this.mergeHotplugData(clone(this.value));
+
+        return;
+      }
+
+      try {
+        const resp = await this.vm.doAction('findHotunpluggableNics');
+
+        this.hotunpluggableNics = new Set(resp?.interfaces || []);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to fetch hot-unpluggable NICs:', e);
+        this.hotunpluggableNics = new Set();
+      }
+
+      this.rows = this.mergeHotplugData(clone(this.value));
+    },
+
+    mergeHotplugData(networks) {
+      return (networks || []).map((network) => ({
+        ...network,
+        isHotunpluggable: this.hotunpluggableNics.has(network.name),
+        rowKeyId:         network.rowKeyId || randomStr(10)
+      }));
+    },
+
     add(type) {
       const name = this.generateName();
 
@@ -118,7 +171,11 @@ export default {
 
     update() {
       this.$emit('update:value', this.rows);
-    }
+    },
+
+    unplugNIC(network) {
+      this.vm.unplugNIC(network.name);
+    },
   }
 };
 </script>
@@ -129,17 +186,28 @@ export default {
       v-for="(row, i) in rows"
       :key="i"
     >
-      <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>
-
+      <div class="box-title mb-10">
+        <h3>
+          {{ t('harvester.virtualMachine.network.title') }}
+        </h3>
+        <button
+          v-if="!isView"
+          type="button"
+          class="role-link btn btn-sm remove"
+          @click="remove(row)"
+        >
+          <i class="icon icon-x" />
+        </button>
+        <button
+          v-if="vm.hotplugNicFeatureEnabled && row.isHotunpluggable && isView"
+          type="button"
+          class="role-link btn btn-sm remove"
+          :disabled="!canCheckHotunplug"
+          @click="unplugNIC(row)"
+        >
+          {{ t('harvester.virtualMachine.hotUnplug.detachNIC.actionLabel') }}
+        </button>
+      </div>
       <Base
         v-model:value="rows[i]"
         :rows="rows"
@@ -162,16 +230,13 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-.infoBox{
-  position: relative;
-}
+.box-title{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-.remove-vol {
-  position: absolute;
-  top: 10px;
-  right: 16px;
-  padding:0px;
-  max-height: 28px;
-  min-height: 28px;
+  h3 {
+    margin-bottom: 0;
+  }
 }
 </style>

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

@@ -303,55 +303,57 @@ export default {
         v-for="(volume, i) in rows"
         :key="volume.id"
       >
-        <InfoBox class="box">
-          <button
-            v-if="!isView"
-            type="button"
-            class="role-link btn btn-sm remove"
-            @click="removeVolume(volume)"
-          >
-            <i class="icon icon-x" />
-          </button>
-          <button
-            v-if="volume.hotpluggable && isView"
-            type="button"
-            class="role-link btn remove"
-            @click="unplugVolume(volume)"
-          >
-            {{ t('harvester.virtualMachine.unplug.detachVolume') }}
-          </button>
-          <h3>
-            <span
-              v-if="volume.to && isVirtualType"
-              class="title"
-            >
-              <router-link :to="volume.to">
-                {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
-              </router-link>
-
-              <BadgeStateFormatter
-                v-if="volume.pvc"
-                class="ml-10 state"
-                :arbitrary="true"
-                :row="volume.pvc"
-                :value="volume.pvc.state"
-              />
-              <a
-                v-if="dev && !!volume.pvc && !!volume.pvc.resourceExternalLink"
-                v-clean-tooltip="t(volume.pvc.resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
-                class="ml-5 resource-external"
-                rel="nofollow noopener noreferrer"
-                target="_blank"
-                :href="volume.pvc.resourceExternalLink.url"
+        <InfoBox>
+          <div class="box-title mb-10">
+            <h3>
+              <span
+                v-if="volume.to && isVirtualType"
+                class="title"
               >
-                <i class="icon icon-external-link" />
-              </a>
-            </span>
+                <router-link :to="volume.to">
+                  {{ t('harvester.virtualMachine.volume.edit') }} {{ headerFor(volume.source) }}
+                </router-link>
 
-            <span v-else>
-              {{ headerFor(volume.source, !!volume?.volumeBackups) }}
-            </span>
-          </h3>
+                <BadgeStateFormatter
+                  v-if="volume.pvc"
+                  class="ml-10 state"
+                  :arbitrary="true"
+                  :row="volume.pvc"
+                  :value="volume.pvc.state"
+                />
+                <a
+                  v-if="dev && !!volume.pvc && !!volume.pvc.resourceExternalLink"
+                  v-clean-tooltip="t(volume.pvc.resourceExternalLink.tipsKey || 'generic.resourceExternalLinkTips')"
+                  class="ml-5 resource-external"
+                  rel="nofollow noopener noreferrer"
+                  target="_blank"
+                  :href="volume.pvc.resourceExternalLink.url"
+                >
+                  <i class="icon icon-external-link" />
+                </a>
+              </span>
+
+              <span v-else>
+                {{ headerFor(volume.source, !!volume?.volumeBackups) }}
+              </span>
+            </h3>
+            <button
+              v-if="!isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              @click="removeVolume(volume)"
+            >
+              <i class="icon icon-x" />
+            </button>
+            <button
+              v-if="volume.hotpluggable && isView"
+              type="button"
+              class="role-link btn btn-sm remove"
+              @click="unplugVolume(volume)"
+            >
+              {{ t('harvester.virtualMachine.hotUnplug.detachVolume.actionLabel') }}
+            </button>
+          </div>
           <div>
             <component
               :is="componentFor(volume.source)"
@@ -495,25 +497,24 @@ export default {
 </template>
 
 <style lang='scss' scoped>
-  .box {
-    position: relative;
+  .box-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      margin-bottom: 0;
+    }
   }
 
   .title {
     display: flex;
+    align-items: center;
 
     .state {
       font-size: 16px;
     }
   }
-
-  .remove {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 0px;
-  }
-
   .bootOrder {
     display: flex;
     align-items: center;