Use the same visuals for top flows by rate as for top flows by bytes.

This commit is contained in:
Herbert Wolverson
2024-07-18 12:03:06 -05:00
parent 4bd6b42804
commit 843f27faec

View File

@@ -1,10 +1,12 @@
import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos} from "../helpers/scaling";
import {scaleNumber, scaleNanos, formatRetransmit} from "../helpers/scaling";
import {RttCache} from "../helpers/rtt_cache";
export class Top10FlowsRate extends BaseDashlet {
constructor(slot) {
super(slot);
this.rttCache = new RttCache();
}
title() {
@@ -35,70 +37,92 @@ export class Top10FlowsRate extends BaseDashlet {
let target = document.getElementById(this.id);
let t = document.createElement("table");
t.classList.add("table", "table-striped", "tiny");
t.classList.add("table", "table-sm", "small");
let th = document.createElement("thead");
th.classList.add("small");
th.appendChild(theading("IP/Circuit"));
th.appendChild(theading("Protocol"));
th.appendChild(theading("Local IP"));
th.appendChild(theading("Remote IP"));
th.appendChild(theading("DL ⬇️"));
th.appendChild(theading("UL ⬆️"));
th.appendChild(theading("Total"));
th.appendChild(theading("RTT"));
th.appendChild(theading("️️⬆ RTT"));
th.appendChild(theading("TCP Retransmits"));
th.appendChild(theading("RTT", 2));
th.appendChild(theading("TCP Retransmits", 2));
th.appendChild(theading("Remote ASN"));
th.appendChild(theading("Country"));
t.appendChild(th);
let tbody = document.createElement("tbody");
msg.data.forEach((r) => {
console.log(r);
let row = document.createElement("tr");
row.classList.add("small");
if (r.circuit_id !== "") {
let circuit = document.createElement("td");
let link = document.createElement("a");
link.href = "circuit.html?id=" + encodeURI(r.circuit_id);
link.innerText = r.circuit_name;
circuit.appendChild(link);
row.appendChild(circuit);
} else {
let localIp = document.createElement("td");
localIp.innerText = r.local_ip;
row.appendChild(localIp);
}
let proto = document.createElement("td");
proto.innerText = r.analysis;
if (r.analysis.length > 6) {
proto.classList.add("tiny");
}
row.appendChild(proto);
let localIp = document.createElement("td");
localIp.innerText = r.local_ip;
row.appendChild(localIp);
let remoteIp = document.createElement("td");
remoteIp.innerText = r.remote_ip;
row.appendChild(remoteIp);
let dl = document.createElement("td");
dl.innerText = scaleNumber(r.rate_estimate_bps.down);
dl.innerText = scaleNumber(r.rate_estimate_bps.down, 0);
row.appendChild(dl);
let ul = document.createElement("td");
ul.innerText = scaleNumber(r.rate_estimate_bps.up);
ul.innerText = scaleNumber(r.rate_estimate_bps.up, 0);
row.appendChild(ul);
let total = document.createElement("td");
total.innerText = scaleNumber(r.bytes_sent.down) + " / " + scaleNumber(r.bytes_sent.up);
total.innerText = scaleNumber(r.bytes_sent.down, 0) + " / " + scaleNumber(r.bytes_sent.up, 0);
row.appendChild(total);
if (r.rtt_nanos['down'] !== undefined) {
this.rttCache.set(r.remote_ip + r.analysis, r.rtt_nanos);
}
let rtt = this.rttCache.get(r.remote_ip + r.analysis);
if (rtt === 0) {
rtt = { down: 0, up: 0 };
}
let rttD = document.createElement("td");
rttD.innerText = scaleNanos(r.rtt_nanos.down);
rttD.innerText = scaleNanos(rtt.down, 0);
row.appendChild(rttD);
let rttU = document.createElement("td");
rttU.innerText = scaleNanos(r.rtt_nanos.up);
rttU.innerText = scaleNanos(rtt.up, 0);
row.appendChild(rttU);
let tcp = document.createElement("td");
tcp.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.appendChild(tcp);
let tcp1 = document.createElement("td");
tcp1.innerHTML = formatRetransmit(r.tcp_retransmits.down);
row.appendChild(tcp1);
let tcp2 = document.createElement("td");
tcp2.innerHTML = formatRetransmit(r.tcp_retransmits.up);
row.appendChild(tcp2);
let asn = document.createElement("td");
asn.innerText = r.remote_asn_name;
if (asn.innerText === "") {
asn.innerText = r.remote_ip;
}
if (asn.innerText.length > 13) {
asn.classList.add("tiny");
}
row.appendChild(asn);
let country = document.createElement("td");
country.innerText = r.remote_asn_country;
row.appendChild(country);
t.appendChild(row);
});
t.appendChild(tbody);