Improved ns scale RTT display.

This commit is contained in:
Herbert Wolverson 2024-07-18 12:20:03 -05:00
parent c204ca2c4a
commit db2c980cbe
4 changed files with 18 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos} from "../helpers/scaling"; import {scaleNumber, scaleNanos, lerpGreenToRedViaOrange, rttNanosAsSpan} from "../helpers/scaling";
export class Top10EndpointsByCountry extends BaseDashlet { export class Top10EndpointsByCountry extends BaseDashlet {
constructor(slot) { constructor(slot) {
@ -68,11 +68,11 @@ export class Top10EndpointsByCountry extends BaseDashlet {
row.appendChild(dlu); row.appendChild(dlu);
let rttd = document.createElement("td"); let rttd = document.createElement("td");
rttd.innerText = scaleNanos(r[2][0]); rttd.innerHTML = rttNanosAsSpan(r[2][0]);
row.appendChild(rttd); row.appendChild(rttd);
let rttu = document.createElement("td"); let rttu = document.createElement("td");
rttu.innerText = scaleNanos(r[2][1]); rttu.innerHTML = rttNanosAsSpan(r[2][1]);
row.appendChild(rttu); row.appendChild(rttu);
t.appendChild(row); t.appendChild(row);

View File

@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos, formatRetransmit} from "../helpers/scaling"; import {scaleNumber, formatRetransmit, rttNanosAsSpan} from "../helpers/scaling";
import {RttCache} from "../helpers/rtt_cache"; import {RttCache} from "../helpers/rtt_cache";
export class Top10FlowsBytes extends BaseDashlet { export class Top10FlowsBytes extends BaseDashlet {
@ -98,11 +98,11 @@ export class Top10FlowsBytes extends BaseDashlet {
} }
let rttD = document.createElement("td"); let rttD = document.createElement("td");
rttD.innerText = scaleNanos(rtt.down, 0); rttD.innerHTML = rttNanosAsSpan(rtt.down);
row.appendChild(rttD); row.appendChild(rttD);
let rttU = document.createElement("td"); let rttU = document.createElement("td");
rttU.innerText = scaleNanos(rtt.up, 0); rttU.innerHTML = rttNanosAsSpan(rtt.up);
row.appendChild(rttU); row.appendChild(rttU);
let tcp1 = document.createElement("td"); let tcp1 = document.createElement("td");

View File

@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet"; import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, theading} from "../helpers/builders"; import {clearDashDiv, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos, formatRetransmit} from "../helpers/scaling"; import {scaleNumber, formatRetransmit, rttNanosAsSpan} from "../helpers/scaling";
import {RttCache} from "../helpers/rtt_cache"; import {RttCache} from "../helpers/rtt_cache";
export class Top10FlowsRate extends BaseDashlet { export class Top10FlowsRate extends BaseDashlet {
@ -98,11 +98,11 @@ export class Top10FlowsRate extends BaseDashlet {
} }
let rttD = document.createElement("td"); let rttD = document.createElement("td");
rttD.innerText = scaleNanos(rtt.down, 0); rttD.innerHTML = rttNanosAsSpan(rtt.down);
row.appendChild(rttD); row.appendChild(rttD);
let rttU = document.createElement("td"); let rttU = document.createElement("td");
rttU.innerText = scaleNanos(rtt.up, 0); rttU.innerHTML = rttNanosAsSpan(rtt.up);
row.appendChild(rttU); row.appendChild(rttU);
let tcp1 = document.createElement("td"); let tcp1 = document.createElement("td");

View File

@ -133,4 +133,13 @@ export function lerpColor(color1, color2, weight) {
export function formatPercent(percent, digits=0) { export function formatPercent(percent, digits=0) {
let color = lerpGreenToRedViaOrange(100-Math.min(100,percent), 100); let color = lerpGreenToRedViaOrange(100-Math.min(100,percent), 100);
return "<span style='color: " + color + "'>" + percent.toFixed(digits) + "%</span>"; return "<span style='color: " + color + "'>" + percent.toFixed(digits) + "%</span>";
}
export function rttNanosAsSpan(rttNanos, precision=0) {
let rttInMs = Math.min(200, rttNanos / 1000000);
let color = lerpGreenToRedViaOrange(200 - rttInMs, 200);
let html = "<span style='color: " + color + "'>";
html += scaleNanos(rttNanos, precision);
html += "</span>";
return html;
} }