Reduce amount of calls for the KVM window 'resize' function

-Use 'beforeDestroy' hook to stop listening on the route change,
-Use lodash to throttle the calls.

Signed-off-by: Konstantin Aladyshev <aladyshev22@gmail.com>
Change-Id: I08781417e3e789dcf3532fbe697efb1403f81fda

1 files changed, 8 insertions, 2 deletions

diff --git a/src/views/Control/Kvm/KvmConsole.vue b/src/views/Control/Kvm/KvmConsole.vue
index 0c545d0f..d844b4b8 100644
--- a/src/views/Control/Kvm/KvmConsole.vue
+++ b/src/views/Control/Kvm/KvmConsole.vue
@@ -45,6 +45,7 @@ import RFB from '@novnc/novnc/core/rfb';
 import StatusIcon from '@/components/Global/StatusIcon';
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16';
+import { throttle } from 'lodash';
 
 const Connecting = 0;
 const Connected = 1;
@@ -67,6 +68,7 @@ export default {
       marginClass: this.isFullWindow ? 'margin-left-full-window' : '',
       status: Connecting,
       convasRef: null,
+      resizeKvmWindow: null,
     };
   },
   computed: {
@@ -90,6 +92,9 @@ export default {
   mounted() {
     this.openTerminal();
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeKvmWindow);
+  },
   methods: {
     sendCtrlAltDel() {
       this.rfb.sendCtrlAltDel();
@@ -106,9 +111,10 @@ export default {
       this.rfb.clipViewport = true;
       const that = this;
 
-      window.addEventListener('resize', () => {
+      this.resizeKvmWindow = throttle(() => {
         setTimeout(that.setWidthToolbar, 0);
-      });
+      }, 1000);
+      window.addEventListener('resize', this.resizeKvmWindow);
 
       this.rfb.addEventListener('connect', () => {
         that.isConnected = true;