Create RttHistogram class, and use it for both histogram displays. (DRY).

src/rust/lqos_node_manager/static/lqos.js

@@ -219,3 +219,36 @@ class RingBuffer {
         return GraphData;
     }
 }
+
+class RttHistogram {
+    constructor() {
+        this.entries = []
+        this.x = [];
+        for (let i=0; i<20; ++i) {
+            this.entries.push(i);
+            this.x.push(i * 10);
+        }
+    }
+
+    clear() {
+        for (let i=0; i<20; ++i) {
+            this.entries[i] = 0;
+        }
+    }
+
+    push(rtt) {
+        let band = Math.floor(rtt / 10.0);
+        if (band > 19) {
+            band = 19;
+        }
+        this.entries[band] += 1;
+    }
+
+    plot(target_div) {
+        let gData = [
+            { x: this.x, y: this.entries, type: 'bar', marker: { color: this.x, colorscale: 'RdBu' } }
+        ]
+        let graph = document.getElementById(target_div);
+        Plotly.newPlot(graph, gData, { margin: { l: 0, r: 0, b: 35, t: 0 }, xaxis: { title: 'TCP Round-Trip Time (ms)' } }, { responsive: true });
+    }
+}

src/rust/lqos_node_manager/static/main.html

@@ -299,19 +299,15 @@
             });
         }
 
+        let rttGraph = new RttHistogram();
+
         function updateHistogram() {
             $.get("/api/rtt_histogram", (rtt) => {
-                let graph = document.getElementById("rttHistogram");
+                rttGraph.clear();
-                let x = [];
-                let y = [];
                 for (let i=0; i<rtt.length; i++) {
-                    x.push(i*10.0);
+                    rttGraph.push(rtt[i]);
-                    y.push(rtt[i]);
                 }
-                let data = [
+                rttGraph.plot("rttHistogram");
-                    {x:x, y:y, type: 'bar', marker: { color:x, colorscale: 'RdBu' } }
-                ]
-                Plotly.newPlot(graph, data, { margin: { l:0,r:0,b:35,t:0 }, xaxis: { title: 'TCP Round-Trip Time (ms)' } }, { responsive: true });
                 setTimeout(updateHistogram, 5000);
             });
         }

src/rust/lqos_node_manager/static/tree.html

@@ -116,7 +116,7 @@
         <script>
             let node = 0;
             let buffers = {};
-            let rtt_histo = [];
+            let rtt_histo = new RttHistogram();
 
             function bgColor(traffic, limit) {
                 if (limit == 0) {
@@ -163,6 +163,7 @@
 
             function getTree() {
                 $.get("/api/network_tree/" + node, (data) => {
+                    rtt_histo.clear();
                     //console.log(data);
                     // Setup "this node"
                     let rootName = data[0][1].name;
@@ -185,8 +186,6 @@
                         data[0][1].current_throughput[1] * 8
                     );
 
-                    for (let i = 0; i < 20; i++) rtt_histo[i] = 0;
-
                     // Build the table & update node buffers
                     let tbl = "<table class='table'>";
                     tbl += "<thead><th>Site</th><th>Limit</th><th>Download</th><th>Upload</th><th>RTT Latency</th></thead>";
@@ -224,9 +223,7 @@
                             }
                             sum /= data[i][1].rtts.length;
                             rtt = sum.toFixed(2) + " ms";
-                            histo_col = Math.floor(sum / 10.0);
+                            rtt_histo.push(sum);
-                            if (histo_col > 19) histo_col = 19;
-                            rtt_histo[histo_col] += 1;
                         }
                         tbl += "<td>" + rtt + "</td>";
                         tbl += "</tr>";
@@ -266,17 +263,7 @@
                         { responsive: true, displayModeBar: false });
 
                     // Build the RTT histo
-                    let x = [];
+                    rtt_histo.plot("rttHistogram");
-                    let y = [];
-                    for (let i = 0; i < 20; ++i) {
-                        x.push(i * 10.0);
-                        y.push(rtt_histo[i]);
-                    }
-                    let gData = [
-                        { x: x, y: y, type: 'bar', marker: { color: x, colorscale: 'RdBu' } }
-                    ]
-                    graph = document.getElementById("rttHistogram");
-                    Plotly.newPlot(graph, gData, { margin: { l: 0, r: 0, b: 35, t: 0 }, xaxis: { title: 'TCP Round-Trip Time (ms)' } }, { responsive: true });
                 });
 
                 if (isRedacted()) {