IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Herbert Wolverson 2023-03-06 21:12:07 +00:00
parent a2b4c85886
commit 664d29e783
3 changed files with 42 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/rust/lqos_node_manager/static/lqos.js
View File

@ -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 });
}
}

14
src/rust/lqos_node_manager/static/main.html
View File

@ -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<rtt.length; i++) {
x.push(i*10.0);
y.push(rtt[i]);
rttGraph.push(rtt[i]);
}
let data = [
{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 });
rttGraph.plot("rttHistogram");
setTimeout(updateHistogram, 5000);
});
}

21
src/rust/lqos_node_manager/static/tree.html
View File

@ -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);
if (histo_col > 19) histo_col = 19;
rtt_histo[histo_col] += 1;
rtt_histo.push(sum);
}
tbl += "<td>" + rtt + "</td>";
tbl += "</tr>";
@ -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()) {