diff --git a/kasmweb/app/styles/base.css b/kasmweb/app/styles/base.css index ac51385..78e8fd4 100644 --- a/kasmweb/app/styles/base.css +++ b/kasmweb/app/styles/base.css @@ -274,6 +274,20 @@ select:active { overflow: auto; } +/* ---------------------------------------- + * Connection Stats + * ---------------------------------------- + */ +#noVNC_connection_stats { + top: 0; + left: auto; + right: 0; + position: fixed; + background: #9fa5a2d4; + color: #00ffa2d4; + visibility: hidden; +} + /* ---------------------------------------- * Control Bar * ---------------------------------------- diff --git a/kasmweb/app/ui.js b/kasmweb/app/ui.js index bedee34..eb0d63d 100644 --- a/kasmweb/app/ui.js +++ b/kasmweb/app/ui.js @@ -174,6 +174,7 @@ const UI = { UI.initSetting('prefer_local_cursor', true); UI.initSetting('enable_webp', true); UI.initSetting('toggle_control_panel', false); + UI.initSetting('enable_perf_stats', false); UI.setupSettingLabels(); }, @@ -349,6 +350,8 @@ const UI = { document.getElementById("noVNC_settings_button") .addEventListener('click', UI.toggleSettingsPanel); + document.getElementById("noVNC_setting_enable_perf_stats").addEventListener('click', UI.showStats); + UI.addSettingChangeHandler('encrypt'); UI.addSettingChangeHandler('resize'); UI.addSettingChangeHandler('resize', UI.applyResizeMode); @@ -368,6 +371,10 @@ const UI = { UI.addSettingChangeHandler('logging', UI.updateLogging); UI.addSettingChangeHandler('reconnect'); UI.addSettingChangeHandler('reconnect_delay'); + UI.addSettingChangeHandler('enable_webp'); + UI.addSettingChangeHandler('clipboard_seamless'); + UI.addSettingChangeHandler('clipboard_up'); + UI.addSettingChangeHandler('clipboard_down'); }, addFullscreenHandlers() { @@ -450,6 +457,24 @@ const UI = { .classList.remove('noVNC_open'); }, + showStats() { + UI.saveSetting('enable_perf_stats'); + + let enable_stats = UI.getSetting('enable_perf_stats'); + if (enable_stats === true && UI.statsInterval == undefined) { + document.getElementById("noVNC_connection_stats").style.visibility = "visible"; + UI.statsInterval = setInterval(function() { + if (UI.rfb !== undefined) { + UI.rfb.requestBottleneckStats(); + } + } , 5000); + } else { + document.getElementById("noVNC_connection_stats").style.visibility = "hidden"; + UI.statsInterval = null; + } + + }, + showStatus(text, status_type, time) { const statusElem = document.getElementById('noVNC_status'); @@ -979,6 +1004,12 @@ const UI = { } }, + //recieved bottleneck stats + bottleneckStatsRecieve(e) { + document.getElementById("noVNC_connection_stats").innerHTML = e.detail.text; + console.log(e.detail.text); + }, + popupMessage: function(msg, secs) { if (!secs){ secs = 500; @@ -1208,6 +1239,7 @@ const UI = { UI.rfb.addEventListener("securityfailure", UI.securityFailed); UI.rfb.addEventListener("capabilities", UI.updatePowerButton); UI.rfb.addEventListener("clipboard", UI.clipboardReceive); + UI.rfb.addEventListener("bottleneck_stats", UI.bottleneckStatsRecieve); document.addEventListener('mouseenter', UI.enterVNC); document.addEventListener('mouseleave', UI.leaveVNC); @@ -1346,6 +1378,7 @@ const UI = { msg = _("Connected (unencrypted) to ") + UI.desktopName; } UI.showStatus(msg); + UI.showStats(); UI.updateVisualState('connected'); // Do this last because it can only be used on rendered elements @@ -1965,4 +1998,4 @@ if (l10n.language !== "en" && l10n.dictionary === undefined) { UI.prime(); } -export default UI; \ No newline at end of file +export default UI; diff --git a/kasmweb/core/rfb.js b/kasmweb/core/rfb.js index d625857..74c13ae 100644 --- a/kasmweb/core/rfb.js +++ b/kasmweb/core/rfb.js @@ -457,6 +457,10 @@ export default class RFB extends EventTargetMixin { RFB.messages.clientCutText(this._sock, text); } + requestBottleneckStats() { + RFB.messages.requestStats(this._sock); + } + // ===== PRIVATE METHODS ===== _connect() { @@ -1504,6 +1508,9 @@ export default class RFB extends EventTargetMixin { console.log("Received KASM bottleneck stats:"); console.log(text); + this.dispatchEvent(new CustomEvent( + "bottleneck_stats", + { detail: { text: text } })); return true; } @@ -2128,6 +2135,8 @@ RFB.messages = { const buff = sock._sQ; const offset = sock._sQlen; + if (buff == null) { return; } + buff[offset] = 178; // msg-type buff[offset + 1] = 0; // padding diff --git a/kasmweb/vnc.html b/kasmweb/vnc.html index 3d4892c..676c447 100644 --- a/kasmweb/vnc.html +++ b/kasmweb/vnc.html @@ -90,6 +90,10 @@ +
+ Loading statistics... +
+
@@ -214,6 +218,8 @@
  • +
  • +