From 64f260c7583671e0a90953fb58fa690cf7d6bec2 Mon Sep 17 00:00:00 2001
From: Konstantin Aladyshev <aladyshev22@gmail.com>
Date: Wed, 17 Feb 2021 17:23:22 +0300
Subject: 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
---
 src/views/Control/SerialOverLan/SerialOverLanConsole.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'src')

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');
-- 
cgit v1.2.3