Add live migration progress awareness in migration tab (#271)

* Embedded VM migration detail in migration tab

Signed-off-by: Andy Lee <andy.lee@suse.com>

* update events condition

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/config/feature-flags.js

@@ -33,7 +33,8 @@ const FEATURE_FLAGS = {
     'efiPersistentState',
     'untaggedNetworkSetting',
     'skipSingleReplicaDetachedVol',
-    'thirdPartyStorage'
+    'thirdPartyStorage',
+    'liveMigrationProgress'
   ],
   'v1.5.1': [],
   'v1.6.0': []

pkg/harvester/detail/kubevirt.io.virtualmachine/VirtualMachineTabs/VirtualMachineMigration.vue

@@ -17,6 +17,13 @@ export default {
       default:  () => {
         return {};
       }
+    },
+    vmimResource: {
+      type:     Object,
+      required: true,
+      default:  () => {
+        return {};
+      }
     }
   },
 
@@ -25,6 +32,12 @@ export default {
   },
 
   computed: {
+    liveMigrationProgressEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('liveMigrationProgress');
+    },
+    migrationPhase() {
+      return this.vmimResource?.status?.phase || 'N/A';
+    },
     migrationState() {
       return this.localResource?.status?.migrationState;
     },
@@ -58,6 +71,18 @@ export default {
 
 <template>
   <div>
+    <div
+      v-if="liveMigrationProgressEnabled"
+      class="row mb-20"
+    >
+      <div class="col span-6">
+        <LabelValue
+          :name="t('harvester.virtualMachine.detail.details.phase')"
+          :value="migrationPhase"
+        />
+      </div>
+    </div>
+
     <div class="row mb-20">
       <div class="col span-6">
         <LabelValue

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

@@ -27,6 +27,8 @@ import { formatSi } from '@shell/utils/units';
 
 const VM_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/harvester-vm-detail-1/vm-info-detail?orgId=1';
 
+const VM_MIGRATION_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/harvester-vm-migration-details-1/harvester-vm-migration-details?orgId=1';
+
 export default {
   name: 'VMIDetailsPage',
 
@@ -63,6 +65,7 @@ export default {
       hasResourceQuotaSchema: false,
       switchToCloud:          false,
       VM_METRICS_DETAIL_URL,
+      VM_MIGRATION_DETAIL_URL,
       showVmMetrics:          false,
     };
   },
@@ -78,6 +81,7 @@ export default {
       events:   this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }),
       allSSHs:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.SSH }),
       vmis:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMI }),
+      vmims:     this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.VMIM }),
       restore:  this.$store.dispatch(`${ inStore }/findAll`, { type: HCI.RESTORE }),
     };
 
@@ -131,6 +135,31 @@ export default {
       return this.$store.getters[`${ inStore }/all`](EVENT);
     },
 
+    vmim() {
+      const inStore = this.$store.getters['currentProduct'].inStore;
+      const vmimList = this.$store.getters[`${ inStore }/all`](HCI.VMIM) || [];
+
+      const migrationUid = this.vmi?.status?.migrationState?.migrationUid;
+      const vmim = vmimList.find((VMIM) => VMIM?.metadata?.uid === migrationUid);
+
+      return vmim;
+    },
+
+    migrationEvents() {
+      const migrationVMName = this.vmim?.metadata.name || '';
+
+      if (migrationVMName === '') {
+        return [];
+      }
+
+      return this.allEvents.filter((e) => {
+        const { creationTimestamp } = this.value?.metadata || {};
+        const involvedName = e?.involvedObject?.name;
+
+        return involvedName === migrationVMName && e.firstTimestamp >= creationTimestamp;
+      }).sort((a, b) => a.lastTimestamp > b.lastTimestamp);
+    },
+
     events() {
       return this.allEvents.filter((e) => {
         const { name, creationTimestamp } = this.value?.metadata || {};
@@ -138,7 +167,6 @@ export default {
         const pvcName = this.value.persistentVolumeClaimName || [];
 
         const involvedName = e?.involvedObject?.name;
-
         const matchPVC = pvcName.find((name) => name === involvedName);
 
         return (involvedName === name || involvedName === podName || matchPVC) && e.firstTimestamp >= creationTimestamp;
@@ -157,6 +185,10 @@ export default {
         vm:        this.value.name
       };
     },
+
+    liveMigrationProgressEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('liveMigrationProgress');
+    },
   },
 
   methods: {
@@ -346,6 +378,20 @@ export default {
         <Migration
           :value="value"
           :vmi-resource="vmi"
+          :vmim-resource="vmim"
+        />
+        <DashboardMetrics
+          v-if="showVmMetrics && liveMigrationProgressEnabled"
+          :detail-url="VM_MIGRATION_DETAIL_URL"
+          graph-height="640px"
+          :has-summary-and-detail="false"
+          :vars="graphVars"
+          class="mb-30"
+        />
+        <Events
+          v-if="liveMigrationProgressEnabled"
+          :resource="vmi"
+          :events="migrationEvents"
         />
       </Tab>
 

pkg/harvester/l10n/en-us.yaml

@@ -745,6 +745,7 @@ harvester:
         dedicatedResources: Dedicated Resources
         down: Virtual machine not running
         affinityRules: Affinity Rules
+        phase: Phase
         sourceNode: Source Node
         targetNode: Target Node
         started: Started