Refit SoL terminal on window resize

'xterm' addon used in the "Serial over LAN (SOL) console" page
doesn't resize terminal screen on window size change.
If the initial window is small after its increase in size
there would be gaps in the terminal screen workspace.
To solve this use fit addon when window size is changed.
For optimization add throttle for the event function and remove
listener on page destroy.

See https://github.com/openbmc/webui-vue/issues/53 for details.

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

1 files changed, 14 insertions, 0 deletions

diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index a0e47870..738065b7 100644
--- a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
@@ -27,6 +27,7 @@
 import { AttachAddon } from 'xterm-addon-attach';
 import { FitAddon } from 'xterm-addon-fit';
 import { Terminal } from 'xterm';
+import { throttle } from 'lodash';
 import IconLaunch from '@carbon/icons-vue/es/launch/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 
@@ -42,6 +43,11 @@ export default {
       default: true,
     },
   },
+  data() {
+    return {
+      resizeConsoleWindow: null,
+    };
+  },
   computed: {
     hostStatus() {
       return this.$store.getters['global/hostStatus'];
@@ -61,6 +67,9 @@ export default {
   mounted() {
     this.openTerminal();
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeConsoleWindow);
+  },
   methods: {
     openTerminal() {
       const token = this.$store.getters['authentication/token'];
@@ -93,6 +102,11 @@ export default {
       term.open(this.$refs.panel);
       fitAddon.fit();
 
+      this.resizeConsoleWindow = throttle(() => {
+        fitAddon.fit();
+      }, 1000);
+      window.addEventListener('resize', this.resizeConsoleWindow);
+
       try {
         ws.onopen = function () {
           console.log('websocket console0/ opened');