mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2024-11-22 08:16:25 -06:00
Improved ns scale RTT display.
This commit is contained in:
parent
c204ca2c4a
commit
db2c980cbe
@ -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);
|
||||||
|
@ -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");
|
||||||
|
@ -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");
|
||||||
|
@ -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;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user