diff --git a/src/rust/lqos_node_manager/static/lqos.js b/src/rust/lqos_node_manager/static/lqos.js index 9d5ecb21..93f00cb5 100644 --- a/src/rust/lqos_node_manager/static/lqos.js +++ b/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 }); + } +} \ No newline at end of file diff --git a/src/rust/lqos_node_manager/static/main.html b/src/rust/lqos_node_manager/static/main.html index 67a82b38..aed3625b 100644 --- a/src/rust/lqos_node_manager/static/main.html +++ b/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"); - let x = []; - let y = []; + rttGraph.clear(); for (let i=0; i 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 = ""; tbl += ""; @@ -224,9 +223,7 @@ } sum /= data[i][1].rtts.length; rtt = sum.toFixed(2) + " ms"; - histo_col = Math.floor(sum / 10.0); - if (histo_col > 19) histo_col = 19; - rtt_histo[histo_col] += 1; + rtt_histo.push(sum); } tbl += ""; tbl += ""; @@ -266,17 +263,7 @@ { responsive: true, displayModeBar: false }); // Build the RTT histo - let x = []; - 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 }); + rtt_histo.plot("rttHistogram"); }); if (isRedacted()) {
SiteLimitDownloadUploadRTT Latency
" + rtt + "