UI mods to display stats

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
  * ----------------------------------------

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;
+export default UI;

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

kasmweb/vnc.html

@@ -90,6 +90,10 @@
         </div>
     </div>
 
+    <div id="noVNC_connection_stats">
+        Loading statistics...
+    </div>
+
     <!-- noVNC Control Bar -->
     <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
 
@@ -214,6 +218,8 @@
                         <label><input id="noVNC_setting_prefer_local_cursor" type="checkbox" /> Prefer Local Cursor</label></li>
                     <li>
                         <label><input id="noVNC_setting_enable_webp" type="checkbox" /> Enable WebP Compression</label></li>
+                    <li>
+                        <label><input id="noVNC_setting_enable_perf_stats" type="checkbox" /> Enable Performance Stats</label></li>
                     <li>
                         <label><input id="noVNC_setting_toggle_control_panel" type="checkbox" /> Toggle Control Panel via Keystrokes</label></li>
                     <li>