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

Issue 288 - 0s showing up as dots, delays unit (#295)

Browse Source 
* Hide zero values for throughput, backlog and delays graphs

Relates to ISSUE #288

* New function `array_to_zero` to reduce repetition.
* Transform zero values to `null` in Y value arrays for the
  throughput, backlog and delay graphs on circuit_info.html
* Also change tin labelling to match the "backlog" graph on
  Delays.
* Reduce marker size.

* Scale displayed/graphed queue delays to ms

References ISSUE 288

Scale the delays graph entries, which are apparently in usec, to
ms.
This commit is contained in:
Herbert "TheBracket 2023-03-23 13:50:19 -05:00 committed by GitHub
parent b8436ca734
commit cf41b47b77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/rust/lqos_node_manager/static/circuit_queue.html
View File

@ -332,13 +332,18 @@
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Bits" }, xaxis: {automargin: true, title: "Time since now"} }); Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Bits" }, xaxis: {automargin: true, title: "Time since now"} });
// Try to hide zeroes // Try to hide zeroes
// Fix the units on delay, convert from usec to ms
for (let i=0; i<entries.y[2].length; i++) { for (let i=0; i<entries.y[2].length; i++) {
if (entries.y[2][i] == 0) entries.y[2][i] = null; if (entries.y[2][i] == 0) entries.y[2][i] = null;
if (entries.y[3][i] == 0) entries.y[3][i] = null; if (entries.y[3][i] == 0) entries.y[3][i] = null;
if (entries.y[4][i] == 0) entries.y[4][i] = null; if (entries.y[4][i] == 0) entries.y[4][i] = null;
if (entries.y[5][i] == 0) entries.y[5][i] = null; if (entries.y[5][i] == 0) entries.y[5][i] = null;
entries.y[8][i] *= 0.001; // Scale the delay
entries.y[9][i] *= 0.001;
} }
let mdx = zip(entries.x[2], entries.x[4]); let mdx = zip(entries.x[2], entries.x[4]);
let drop = zip(entries.y[2].reverse(), entries.y[4].reverse()); let drop = zip(entries.y[2].reverse(), entries.y[4].reverse());
let mark = zip(entries.y[3].reverse(), entries.y[4].reverse()); let mark = zip(entries.y[3].reverse(), entries.y[4].reverse());
@ -369,14 +374,17 @@
zip(backlogY1[2].reverse(), backlogY2[2].reverse()), zip(backlogY1[2].reverse(), backlogY2[2].reverse()),
zip(backlogY1[3].reverse(), backlogY2[3].reverse()), zip(backlogY1[3].reverse(), backlogY2[3].reverse()),
] ]
for (let n=0; n<bly.length; ++n) {
zero_to_null(bly[n]);
}
let graph_data = [ let graph_data = [
{x: blx, y:bly[0], type: 'scatter', mode: 'markers', name: 'Bulk'}, {x: blx, y:bly[0], type: 'scatter', mode: 'markers', name: 'Bulk', marker: { size: 4 }},
//{x: blx, y:backlogY2[0].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 0 Up'}, //{x: blx, y:backlogY2[0].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 0 Up'},
{x: blx, y:bly[1], type: 'scatter', mode: 'markers', name: 'Best Effort'}, {x: blx, y:bly[1], type: 'scatter', mode: 'markers', name: 'Best Effort', marker: { size: 4 }},
//{x: blx, y:backlogY2[1].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 1 Up'}, //{x: blx, y:backlogY2[1].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 1 Up'},
{x: blx, y:bly[2], type: 'scatter', mode: 'markers', name: 'Video'}, {x: blx, y:bly[2], type: 'scatter', mode: 'markers', name: 'Video', marker: { size: 4 }},
//{x: blx, y:backlogY2[2].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 2 Up'}, //{x: blx, y:backlogY2[2].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 2 Up'},
{x: blx, y:bly[3], type: 'scatter', mode: 'markers', name: 'Voice'}, {x: blx, y:bly[3], type: 'scatter', mode: 'markers', name: 'Voice', marker: { size: 4 }},
//{x: blx, y:backlogY2[3].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 3 Up'}, //{x: blx, y:backlogY2[3].reverse(), type: 'scatter', mode: 'markers', name: 'Tin 3 Up'},
]; ];
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Bytes" }, xaxis: {automargin: true, title: "Time since now (seconds)"} }); Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Bytes" }, xaxis: {automargin: true, title: "Time since now (seconds)"} });
@ -388,15 +396,18 @@
zip(delaysY1[2].reverse(), delaysY2[2].reverse()), zip(delaysY1[2].reverse(), delaysY2[2].reverse()),
zip(delaysY1[3].reverse(), delaysY2[3].reverse()), zip(delaysY1[3].reverse(), delaysY2[3].reverse()),
] ]
for (let n=0; n<dly.length; ++n) {
zero_to_null(dly[n]);
}
graph = document.getElementById("delayGraph"); graph = document.getElementById("delayGraph");
graph_data = [ graph_data = [
{x: dlx, y:dly[0], type: 'scatter', mode: 'markers', name: 'Tin 0'}, {x: dlx, y:dly[0], type: 'scatter', mode: 'markers', name: 'Bulk', marker: { size: 4 }},
//{x: delaysX2[0], y:delaysY2[0].reverse(), type: 'scatter', name: 'Tin 0 Up'}, //{x: delaysX2[0], y:delaysY2[0].reverse(), type: 'scatter', name: 'Tin 0 Up'},
{x: dlx, y:dly[1], type: 'scatter', mode: 'markers', name: 'Tin 1'}, {x: dlx, y:dly[1], type: 'scatter', mode: 'markers', name: 'Best Effort', marker: { size: 4 }},
//{x: delaysX2[1], y:delaysY2[1].reverse(), type: 'scatter', name: 'Tin 1 Up'}, //{x: delaysX2[1], y:delaysY2[1].reverse(), type: 'scatter', name: 'Tin 1 Up'},
{x: dlx, y:dly[2], type: 'scatter', mode: 'markers', name: 'Tin 2'}, {x: dlx, y:dly[2], type: 'scatter', mode: 'markers', name: 'Video', marker: { size: 4 }},
//{x: delaysX2[2], y:delaysY2[2].reverse(), type: 'scatter', name: 'Tin 2 Up'}, //{x: delaysX2[2], y:delaysY2[2].reverse(), type: 'scatter', name: 'Tin 2 Up'},
{x: dlx, y:dly[3], type: 'scatter', mode: 'markers', name: 'Tin 3'}, {x: dlx, y:dly[3], type: 'scatter', mode: 'markers', name: 'Voice', marker: { size: 4 }},
//{x: delaysX2[3], y:delaysY2[3].reverse(), type: 'scatter', name: 'Tin 3 Up'}, //{x: delaysX2[3], y:delaysY2[3].reverse(), type: 'scatter', name: 'Tin 3 Up'},
]; ];
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Time (ms)" }, xaxis: {automargin: true, title: "Time since now (seconds)"} }); Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Time (ms)" }, xaxis: {automargin: true, title: "Time since now (seconds)"} });
@ -485,8 +496,9 @@
let xd = zip(xDown, xUp); let xd = zip(xDown, xUp);
let yd = zip(yDown.reverse(), yUp.reverse()); let yd = zip(yDown.reverse(), yUp.reverse());
zero_to_null(yd);
graph_data.push({x: xd, y: yd, name: ip + " Down", mode: 'markers', type: 'scatter', marker: { size: 4 }}); graph_data.push({x: xd, y: yd, name: ip, mode: 'markers', type: 'scatter', marker: { size: 4 }});
//graph_data.push({x: xUp, y: yUp.reverse(), name: ip + " Up", mode: 'markers', type: 'scatter'}); //graph_data.push({x: xUp, y: yUp.reverse(), name: ip + " Up", mode: 'markers', type: 'scatter'});
} }
Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Traffic (bits)" }, xaxis: {automargin: true, title: "Time since now (seconds)"} }); Plotly.newPlot(graph, graph_data, { margin: { l:0,r:0,b:0,t:0,pad:4 }, yaxis: { automargin: true, title: "Traffic (bits)" }, xaxis: {automargin: true, title: "Time since now (seconds)"} });

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

@ -388,3 +388,9 @@ function zip(a, b) {
} }
return zipped; return zipped;
} }
function zero_to_null(array) {
for (let i=0; i<array.length; ++i) {
if (array[i] == 0) array[i] = null;
}
}