The web KVM isn't showing the terminal screen

[huyle-anh]

Describe the bug:
The Web KVM isn't showing the terminal screen.
Compile webui-vue at commit: 918526f20c16a05c261a56814657942a707323dd

Step to Reproduce:

1. Go to 'Web page → Operations'
2. Click on 'KVM page'
3. See screen: KVM is not displaying the interface screen; it just displays a white screen.

Expected behavior:

• The KVM displays the interface screen, and the user can type on the terminal screen.

Screenshots:

• OS: MACOS Ventura - Version 13.7
• Browser: Chrome
• Version: 130.0.6723.116

[huyle-anh]

Also, I created the patch to fix this as follows, which resulted in the KVM displaying the terminal screen:

diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 6e2a4ea..4fff925 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -112,10 +112,11 @@ export default {
     },
     openTerminal() {
       const token = this.$store.getters['authentication/token'];
-      this.rfb = new RFB(
-        this.$refs.panel,
-        `wss://${window.location.host}/kvm/0`,
-        { wsProtocols: [token] },
+      this.rfb = Object.assign(
+        new RFB(this.$refs.panel, `wss://${window.location.host}/kvm/0`, {
+          wsProtocols: [token],
+        }),
+        new RFB(),
       );

After applying the patch, the KVM displays the terminal screen. Now, when I switch to another page multiple times and then go back to the KVM page, I randomly encounter an issue where the KVM terminal screen does not display. The journalctl logs get an error.

Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:200] Error closing websocket stream truncated [asio.ssl.stream:1]
Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:264] doRead error Operation canceled [system:125 at /usr/include/boost/beast/websocket/impl/stream_impl.hpp:355:13 in function 'bool boost::beast::websocket::stream< <template-parameter-1-1>, <anonymous> >::impl_type::check_stop_now(boost::beast::error_code&)']

Does anyone have any ideas or suggestions for solving this problem?

[mdmillerii]

Thanks for reporting the source you are using. Please adjust your reference to the source hash to remove the > quoting as this defeats GitHub Markdown from automatically linking to the source. (If you remove all quoting the SHA will be shortened to a link and your description will follow as plain text, or you can use link format to specify the link text to display. You can follow
Markdown is supported below the input box to find these references later).

Your code having been reformatted before generating the diff makes it hard to spot what you changed. There obvious change is replacing new RFB(args...) with Object.Assign(new RFB(...args), new RFB (),).
This seems odd to me in that it creates a [RFB object(https://github.com/novnc/noVNC/blob/master/docs/API.md#constructor) and a customized object and overwrites anything returned from the object constructed without required arguments over the customized one. This would be strange unless the library had state leak from the empty and invalid constructor method.

The diagnostics you reported

Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:200] Error closing websocket stream truncated [asio.ssl.stream:1]
Nov 07 07:17:33 mtmitchell-dcscm bmcwebd[356]: [ERROR websocket.hpp:264] doRead error Operation canceled [system:125 at /usr/include/boost/beast/websocket/impl/stream_impl.hpp:355:13 in function 'bool boost::beast::websocket::stream< <template-parameter-1-1>, <anonymous> >::impl_type::check_stop_now(boost::beast::error_code&)']

appears to be a connection was closed without the expected websocket shutdown handshake but would need realtime monitoring to see what action triggered them

However, I'll also mention there was a recent discussion in discord #webui of others reporting similar problems with the GUI displaying the KVM and/or SOL window after the switch to vue3.

That discussion showed an apparent object that was 0 sized viewport.

But this does make me curious what creates vertical displacement for the object? (Might the invalid constructed object have a nonzero size? ) The div is class terminalClass which is an empty string and the RFB viewport is scaled and clipped to it's parent, which can be detected with the clippingViewport status property and the
clippingviewport event

[huyle-anh]

Thanks for your reply with the information,
Updated #128 (comment)
I've seen the big change from Vue2 to Vue3 at 7d6b44c.

Basically, about using new RFB() to create a new object in Vue 2 and Vue 3 does not significantly differ in terms of operation. Both versions support creating new objects from a class or constructor function, same with scaleViewport & clipViewport on both the versions.

Regarding the clues you provided, I will find more and provide them in the next comments.

[huyle-anh]

Hi @mdmillerii,
Something has changed the formatting of the objects, making them incompatible with the scaleViewport and clipViewport properties.
Temporarily, I have worked around this issue by disabling the scaleViewport and clipViewport properties to make the KVM page work without causing any other impacts.

diff --git a/src/views/Operations/Kvm/KvmConsole.vue b/src/views/Operations/Kvm/KvmConsole.vue
index 6e2a4ea..f1dc798 100644
--- a/src/views/Operations/Kvm/KvmConsole.vue
+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -118,8 +118,6 @@ export default {
         { wsProtocols: [token] },
       );
 
-      this.rfb.scaleViewport = true;
-      this.rfb.clipViewport = true;
       const that = this;
 
       this.resizeKvmWindow = throttle(() => {
-- 

If you have any updates, please leave a comment to let me know, regards.

[mdmillerii]

Thanks for the test results!.

I'm a novice not an expert in js and Vue3 but will try to get the attention of some experts now that we are certain of the source of the problem.

One more thing that might help evaluate if this is a fix or a workaround would be a few tests test would be resize your browser window with the KVM connected.

1. What happens when you shrink below the image size do you get truncated or scrollbars?
2. When stretching beyond the host window size is the content centered or aligned to an edge?
3. Does the full screen button work? Can you toggle back?
4. Repeat sizing tests in full screen mode
5. If you can adjust the screen resolution in your host and repeat that would be great. ^1

^1: changing the host screen resolution to something below the screen with your browser window (your laptop or desktop, maybe 1024x768 or if you have a 4K monitor 1600x1200) may make the other tests easier.

[huyle-anh]

Sure, this Disable is only temporary until we can fix it. The scaleViewport and clipViewport properties need to be enabled. Disabling them makes the display of the KVM not look very good, basically if clipViewport and scaleViewport are disabled: When change the size of the web browser, the KVM terminal screen will not adjust to follow the size of the web browser. Loss of text on the KVM screen (by row), will not appear scrollbars

kvmsc.mov

[mdmillerii]

Thanks for the report

[huyle-anh]

Hi @mdmillerii
We have ignored the undefined rules for the KVM terminal, such as height, display type, background, overflow, etc., which I noticed at [1]. Therefore, I added them back by importing the following patch:

+++ b/src/views/Operations/Kvm/KvmConsole.vue
@@ -176,6 +176,10 @@ export default {
 };
 </script>

+<style lang="scss">
+@import '@/assets/styles/bmc/custom/_kvm.scss';
+</style>
+
 <style lang="scss" scoped>
 @import '@/assets/styles/bmc/helpers/_index.scss';
 @import '@/assets/styles/bootstrap/_helpers.scss';

Of course, we can use them directly, but I don't think it's necessary since we already have the definitions in '_kvm.scss'.

I also checked with the following test and found that they work fine, (except for the issue of the KVM opening in a new tab with an incorrect path). The verification steps are as follows:

• Go to the OBMC web page.
• Go to the KVM page and check that it works normally
• By minifying and zooming in on the web browser, the KVM screen adjusts automatically.
• Switch between different pages.
• Return to the KVM page and check that it works normally.

1. https://github.com/openbmc/webui-vue/blob/master/src/App.vue#L38