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
diff --git a/src/views/Control/SerialOverLan/SerialOverLanConsole.vue b/src/views/Control/SerialOverLan/SerialOverLanConsole.vue
index a0e4787..738065b 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 @@
default: true,
},
},
+ data() {
+ return {
+ resizeConsoleWindow: null,
+ };
+ },
computed: {
hostStatus() {
return this.$store.getters['global/hostStatus'];
@@ -61,6 +67,9 @@
mounted() {
this.openTerminal();
},
+ beforeDestroy() {
+ window.removeEventListener('resize', this.resizeConsoleWindow);
+ },
methods: {
openTerminal() {
const token = this.$store.getters['authentication/token'];
@@ -93,6 +102,11 @@
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');