Closed KVM new window after WEBUI logged out

Description:

When KVM is opened in new window, after WEB UI is logged out,
opened KVM window is not getting closed. It remains opened and
accessible.

Root Cause:

There is not handle to close the KVM new window after the WEB UI
logged out.

Fix:

Added the KVM window opened information in store, and checked that
information to close the window.

Tested:

Step 1: Login to WEB UI
Step 2: Navigate to Operations -> KVM
Step 3: Open KVM in new window
Step 4: Click Logout in WEB UI

Result:

After successful log out, KVM new window is closed as expected.

Change-Id: Iab8e54d3088a08fb0ae9b581b2647fc0ab5460bd
Signed-off-by: Kirankumar Ballapalli <kirankumarb@ami.com>

2 files changed, 34 insertions, 3 deletions

diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 07d5ee8b..88fb54b8 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -5,11 +5,13 @@ import router from '@/router';
 const AuthenticationStore = {
   namespaced: true,
   state: {
+    consoleWindow: null,
     authError: false,
     xsrfCookie: Cookies.get('XSRF-TOKEN'),
     isAuthenticatedCookie: Cookies.get('IsAuthenticated'),
   },
   getters: {
+    consoleWindow: (state) => state.consoleWindow,
     authError: (state) => state.authError,
     isLoggedIn: (state) => {
       return (
@@ -33,6 +35,7 @@ const AuthenticationStore = {
       state.xsrfCookie = undefined;
       state.isAuthenticatedCookie = undefined;
     },
+    setConsoleWindow: (state, window) => (state.consoleWindow = window),
   },
   actions: {
     login({ commit }, { username, password }) {
@@ -48,7 +51,10 @@ const AuthenticationStore = {
     logout({ commit }) {
       api
         .post('/logout', { data: [] })
-        .then(() => commit('logout'))
+        .then(() => {
+          commit('setConsoleWindow', false);
+          commit('logout');
+        })
         .then(() => router.go('/login'))
         .catch((error) => console.log(error));
     },
diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index c028a9fc..4f24db24 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -46,6 +46,7 @@ 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';
+import { mapState } from 'vuex';
 
 const Connecting = 0;
 const Connected = 1;
@@ -62,6 +63,7 @@ export default {
   },
   data() {
     return {
+      isConsoleWindow: null,
       rfb: null,
       isConnected: false,
       terminalClass: this.isFullWindow ? 'full-window' : '',
@@ -72,6 +74,7 @@ export default {
     };
   },
   computed: {
+    ...mapState('authentication', ['consoleWindow']),
     serverStatusIcon() {
       if (this.status === Connected) {
         return 'success';
@@ -89,6 +92,11 @@ export default {
       return this.$t('pageKvm.connecting');
     },
   },
+  watch: {
+    consoleWindow() {
+      if (this.consoleWindow == false) this.isConsoleWindow.close();
+    },
+  },
   mounted() {
     this.openTerminal();
   },
@@ -143,9 +151,26 @@ export default {
       }
     },
     openConsoleWindow() {
-      window.open(
+      // If isConsoleWindow is not null
+      // Check the newly opened window is closed or not
+      if (this.isConsoleWindow) {
+        // If window is not closed set focus to new window
+        // If window is closed, do open new window
+        if (!this.isConsoleWindow.closed) {
+          this.isConsoleWindow.focus();
+          return;
+        } else {
+          this.openNewWindow();
+        }
+      } else {
+        // If isConsoleWindow is null, open new window
+        this.openNewWindow();
+      }
+    },
+    openNewWindow() {
+      this.isConsoleWindow = window.open(
         '#/console/kvm',
-        '_blank',
+        'kvmConsoleWindow',
         'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=700,height=550'
       );
     },