feat: show notification if there is VM pending restart (#700)

* feat: show notification if there is VM pending restart

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

* refactor: update based on comments

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

* refactor: calculate count from vm names

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

---------

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

pkg/harvester/l10n/en-us.yaml

@@ -190,12 +190,16 @@ harvester:
       title: Restart Virtual Machine
       tip: Restart the virtual machine for configuration changes to take effect.
       cancel: Save
+    
   notification:
     title:
       succeed: Succeed
       info: Info
       warning: Warning
       error: Error
+    restartRequired:
+      title: '{count} {count, plural, =1 {Virtual Machine is} other {Virtual Machines are}} Pending Restart'
+      message: 'Please restart { vmNames } to apply updated configurations'
   action:
     createVM: Create Virtual Machine
     start: Start

pkg/harvester/list/kubevirt.io.virtualmachine.vue

@@ -115,6 +115,7 @@ export default {
       allVMIs:                      [],
       allNodeNetworks:              [],
       allClusterNetworks:           [],
+      restartNotificationDisplayed: false,
       HCI
     };
   },
@@ -174,6 +175,48 @@ export default {
     this['allVMIs'] = vmis;
   },
 
+  beforeUnmount() {
+    // clear restart message before component unmount
+    this.$store.dispatch('growl/clear');
+  },
+
+  watch: {
+    allVMs: {
+      handler(neu) {
+        const vmNames = [];
+
+        neu.forEach((vm) => {
+          if (vm.isRestartRequired) {
+            vmNames.push(vm.metadata.name);
+          }
+        });
+        const count = vmNames.length;
+
+        if ( count === 0 && this.restartNotificationDisplayed) {
+          this.restartNotificationDisplayed = false;
+
+          return;
+        }
+
+        if (count > 0) {
+          // clear old notification before showing new one
+          if (this.restartNotificationDisplayed) {
+            this.$store.dispatch('growl/clear');
+          }
+        }
+
+        if (count > 0 && vmNames.length > 0) {
+          this.$store.dispatch('growl/warning', {
+            title:   this.t('harvester.notification.restartRequired.title', { count }),
+            message: this.t('harvester.notification.restartRequired.message', { vmNames: vmNames.join(', ') }),
+            timeout: 10000,
+          }, { root: true });
+          this.restartNotificationDisplayed = true;
+        }
+      },
+      deep: true,
+    }
+  },
   methods: {
     lockIconTooltipMessage(row) {
       const message = '';
@@ -243,6 +286,12 @@ export default {
   </div>
 </template>
 
+<style lang="scss">
+.growl-container {
+  z-index: 56 !important;  // set to be lower than the vm action menu (z-index: 57)
+}
+</style>
+
 <style lang="scss" scoped>
 .state {
   display: flex;

pkg/harvester/models/kubevirt.io.virtualmachine.js

@@ -1180,11 +1180,15 @@ export default class VirtVm extends HarvesterResource {
     );
   }
 
-  get stateDescription() {
+  get isRestartRequired() {
     const conditions = get(this, 'status.conditions');
     const restartRequired = findBy(conditions, 'type', 'RestartRequired');
 
-    if (restartRequired && restartRequired.status === 'True') {
+    return restartRequired && restartRequired.status === 'True';
+  }
+
+  get stateDescription() {
+    if (this.isRestartRequired) {
       return this.t('harvester.virtualMachine.hotplug.restartVMMessage');
     }