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

Start unifying dashboard tables

Browse Source
This commit is contained in:
Herbert Wolverson
2024-07-17 09:49:06 -05:00
parent 8707ede766
commit f60a67a1f1
4 changed files with 69 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js
View File

@@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {RttHistogram} from "../graphs/rtt_histo"; import {RttHistogram} from "../graphs/rtt_histo";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading, topNTableHeader, topNTableRow} from "../helpers/builders";
import {scaleNumber, rttCircleSpan, formatThroughput, formatRtt, formatRetransmit} from "../helpers/scaling"; import {scaleNumber, rttCircleSpan, formatThroughput, formatRtt, formatRetransmit} from "../helpers/scaling";
import {redactCell} from "../helpers/redact"; import {redactCell} from "../helpers/redact";
@@ -39,60 +39,11 @@ export class Top10Downloaders extends BaseDashlet {
let t = document.createElement("table"); let t = document.createElement("table");
t.classList.add("table", "table-striped", "table-sm"); t.classList.add("table", "table-striped", "table-sm");
let th = document.createElement("thead"); t.appendChild(topNTableHeader());
th.classList.add("small");
th.appendChild(theading("IP Address/Circuit"));
th.appendChild(theading("Plan"));
th.appendChild(theading("DL ⬇️"));
th.appendChild(theading("UL ⬆️"));
th.appendChild(theading("RTT (ms)"));
th.appendChild(theading("TCP Retransmits", 2));
t.appendChild(th);
let tbody = document.createElement("tbody"); let tbody = document.createElement("tbody");
msg.data.forEach((r) => { msg.data.forEach((r) => {
let row = document.createElement("tr"); t.appendChild(topNTableRow(r));
row.classList.add("small");
if (r.circuit_id !== "") {
let link = document.createElement("a");
link.href = "circuit.html?id=" + encodeURI(r.circuit_id);
link.innerText = r.ip_address;
redactCell(link);
row.append(link);
} else {
let ip = document.createElement("td");
ip.innerText = r.ip_address;
redactCell(ip);
row.append(ip);
}
let shaped = document.createElement("td");
shaped.classList.add("tiny");
shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped);
let dl = document.createElement("td");
dl.innerHTML = formatThroughput(r.bits_per_second.down, r.plan.down);
row.append(dl);
let ul = document.createElement("td");
ul.innerHTML = formatThroughput(r.bits_per_second.up, r.plan.up);
row.append(ul);
let rtt = document.createElement("td");
rtt.innerHTML = formatRtt(r.median_tcp_rtt);
row.append(rtt);
let tcp_xmit_down = document.createElement("td");
tcp_xmit_down.innerHTML = formatRetransmit(r.tcp_retransmits.down);
row.append(tcp_xmit_down);
let tcp_xmit_up = document.createElement("td");
tcp_xmit_up.innerHTML = formatRetransmit(r.tcp_retransmits.up);
row.append(tcp_xmit_up);
t.appendChild(row);
}); });
t.appendChild(tbody); t.appendChild(tbody);

47
src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_downloaders.js
View File

@@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {RttHistogram} from "../graphs/rtt_histo"; import {RttHistogram} from "../graphs/rtt_histo";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading, topNTableHeader, topNTableRow} from "../helpers/builders";
import {scaleNumber, rttCircleSpan, formatThroughput, formatRtt} from "../helpers/scaling"; import {scaleNumber, rttCircleSpan, formatThroughput, formatRtt} from "../helpers/scaling";
import {redactCell} from "../helpers/redact"; import {redactCell} from "../helpers/redact";
@@ -37,52 +37,13 @@ export class Worst10Downloaders extends BaseDashlet {
let target = document.getElementById(this.id); let target = document.getElementById(this.id);
let t = document.createElement("table"); let t = document.createElement("table");
t.classList.add("table", "table-striped", "tiny"); t.classList.add("table", "table-striped", "small");
let th = document.createElement("thead"); t.appendChild(topNTableHeader());
th.appendChild(theading(""));
th.appendChild(theading("IP Address/Circuit"));
th.appendChild(theading("DL ⬇️"));
th.appendChild(theading("UL ⬆️"));
th.appendChild(theading("RTT (ms)"));
th.appendChild(theading("TCP Retransmits"));
th.appendChild(theading("Shaped"));
t.appendChild(th);
let tbody = document.createElement("tbody"); let tbody = document.createElement("tbody");
msg.data.forEach((r) => { msg.data.forEach((r) => {
let row = document.createElement("tr"); t.appendChild(topNTableRow(r));
let circle = document.createElement("td");
circle.appendChild(rttCircleSpan(r.median_tcp_rtt));
row.appendChild(circle);
let ip = document.createElement("td");
ip.innerText = r.ip_address;
redactCell(ip);
row.append(ip);
let dl = document.createElement("td");
dl.innerHTML = formatThroughput(r.bits_per_second.down, r.plan.down);
row.append(dl);
let ul = document.createElement("td");
ul.innerHTML = formatThroughput(r.bits_per_second.up, r.plan.up);
row.append(ul);
let rtt = document.createElement("td");
rtt.innerHTML = formatRtt(r.median_tcp_rtt);
row.append(rtt);
let tcp_xmit = document.createElement("td");
tcp_xmit.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.append(tcp_xmit);
let shaped = document.createElement("td");
shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped);
t.appendChild(row);
}); });
t.appendChild(tbody); t.appendChild(tbody);

45
src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.js
View File

@@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {RttHistogram} from "../graphs/rtt_histo"; import {RttHistogram} from "../graphs/rtt_histo";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading, topNTableHeader, topNTableRow} from "../helpers/builders";
import {scaleNumber, rttCircleSpan, formatRtt, formatThroughput} from "../helpers/scaling"; import {scaleNumber, rttCircleSpan, formatRtt, formatThroughput} from "../helpers/scaling";
import {redactCell} from "../helpers/redact"; import {redactCell} from "../helpers/redact";
@@ -39,50 +39,11 @@ export class Worst10Retransmits extends BaseDashlet {
let t = document.createElement("table"); let t = document.createElement("table");
t.classList.add("table", "table-striped", "tiny"); t.classList.add("table", "table-striped", "tiny");
let th = document.createElement("thead"); t.appendChild(topNTableHeader());
th.appendChild(theading(""));
th.appendChild(theading("IP Address/Circuit"));
th.appendChild(theading("DL ⬇️"));
th.appendChild(theading("UL ⬆️"));
th.appendChild(theading("RTT (ms)"));
th.appendChild(theading("TCP Retransmits"));
th.appendChild(theading("Shaped"));
t.appendChild(th);
let tbody = document.createElement("tbody"); let tbody = document.createElement("tbody");
msg.data.forEach((r) => { msg.data.forEach((r) => {
let row = document.createElement("tr"); t.appendChild(topNTableRow(r));
let circle = document.createElement("td");
circle.appendChild(rttCircleSpan(r.median_tcp_rtt));
row.appendChild(circle);
let ip = document.createElement("td");
ip.innerText = r.ip_address;
redactCell(ip);
row.append(ip);
let dl = document.createElement("td");
dl.innerHTML = formatThroughput(r.bits_per_second.down, r.plan.down);
row.append(dl);
let ul = document.createElement("td");
ul.innerHTML = formatThroughput(r.bits_per_second.up, r.plan.up);
row.append(ul);
let rtt = document.createElement("td");
rtt.innerHTML = formatRtt(r.median_tcp_rtt);
row.append(rtt);
let tcp_xmit = document.createElement("td");
tcp_xmit.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.append(tcp_xmit);
let shaped = document.createElement("td");
shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped);
t.appendChild(row);
}); });
t.appendChild(tbody); t.appendChild(tbody);

60
src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js
View File

@@ -1,4 +1,5 @@
import {scaleNanos} from "./scaling"; import {formatRetransmit, formatRtt, formatThroughput, scaleNanos} from "./scaling";
import {redactCell} from "./redact";
export function heading5Icon(icon, text) { export function heading5Icon(icon, text) {
let h5 = document.createElement("h5"); let h5 = document.createElement("h5");
@@ -100,3 +101,60 @@ export function formatLastSeen(n) {
} }
return result; return result;
} }
export function topNTableHeader() {
let th = document.createElement("thead");
th.classList.add("small");
th.appendChild(theading("IP Address/Circuit"));
th.appendChild(theading("Plan"));
th.appendChild(theading("DL ⬇️"));
th.appendChild(theading("UL ⬆️"));
th.appendChild(theading("RTT (ms)"));
th.appendChild(theading("TCP Retransmits", 2));
return th;
}
export function topNTableRow(r) {
let row = document.createElement("tr");
row.classList.add("small");
if (r.circuit_id !== "") {
let link = document.createElement("a");
link.href = "circuit.html?id=" + encodeURI(r.circuit_id);
link.innerText = r.ip_address;
redactCell(link);
row.append(link);
} else {
let ip = document.createElement("td");
ip.innerText = r.ip_address;
redactCell(ip);
row.append(ip);
}
let shaped = document.createElement("td");
shaped.classList.add("tiny");
shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped);
let dl = document.createElement("td");
dl.innerHTML = formatThroughput(r.bits_per_second.down, r.plan.down);
row.append(dl);
let ul = document.createElement("td");
ul.innerHTML = formatThroughput(r.bits_per_second.up, r.plan.up);
row.append(ul);
let rtt = document.createElement("td");
rtt.innerHTML = formatRtt(r.median_tcp_rtt);
row.append(rtt);
let tcp_xmit_down = document.createElement("td");
tcp_xmit_down.innerHTML = formatRetransmit(r.tcp_retransmits.down);
row.append(tcp_xmit_down);
let tcp_xmit_up = document.createElement("td");
tcp_xmit_up.innerHTML = formatRetransmit(r.tcp_retransmits.up);
row.append(tcp_xmit_up);
return row;
}