Pass through UI2 to be consistent on up/down

This commit is contained in:
Herbert Wolverson 2024-07-02 13:15:23 -05:00
parent 95ac0fa825
commit f116bed667
12 changed files with 108 additions and 108 deletions

View File

@ -50,19 +50,19 @@ export class Top10EndpointsByCountry extends BaseDashlet {
row.appendChild(country); row.appendChild(country);
let dld = document.createElement("td"); let dld = document.createElement("td");
dld.innerText = scaleNumber(r[1][0]); dld.innerText = scaleNumber(r[1].down);
row.appendChild(dld); row.appendChild(dld);
let dlu = document.createElement("td"); let dlu = document.createElement("td");
dlu.innerText = scaleNumber(r[1][1]); dlu.innerText = scaleNumber(r[1].up);
row.appendChild(dlu); row.appendChild(dlu);
let rttd = document.createElement("td"); let rttd = document.createElement("td");
rttd.innerText = scaleNanos(r[2][0]); rttd.innerText = scaleNanos(r[2].down);
row.appendChild(rttd); row.appendChild(rttd);
let rttu = document.createElement("td"); let rttu = document.createElement("td");
rttu.innerText = scaleNanos(r[2][1]); rttu.innerText = scaleNanos(r[2].up);
row.appendChild(rttu); row.appendChild(rttu);
t.appendChild(row); t.appendChild(row);

View File

@ -46,22 +46,22 @@ export class EtherProtocols extends BaseDashlet {
let tbody = document.createElement("tbody"); let tbody = document.createElement("tbody");
let row = document.createElement("tr"); let row = document.createElement("tr");
row.appendChild(simpleRow("IPv4")); row.appendChild(simpleRow("IPv4"));
row.appendChild(simpleRow(scaleNumber(msg.data.v4_bytes[0]))); row.appendChild(simpleRow(scaleNumber(msg.data.v4_bytes.down)));
row.appendChild(simpleRow(scaleNumber(msg.data.v4_bytes[1]))); row.appendChild(simpleRow(scaleNumber(msg.data.v4_bytes.up)));
row.appendChild(simpleRow(scaleNumber(msg.data.v4_packets[0]))); row.appendChild(simpleRow(scaleNumber(msg.data.v4_packets.down)));
row.appendChild(simpleRow(scaleNumber(msg.data.v4_packets[1]))); row.appendChild(simpleRow(scaleNumber(msg.data.v4_packets.up)));
row.appendChild(simpleRow(scaleNanos(msg.data.v4_rtt[0]))); row.appendChild(simpleRow(scaleNanos(msg.data.v4_rtt.down)));
row.appendChild(simpleRow(scaleNanos(msg.data.v4_rtt[1]))); row.appendChild(simpleRow(scaleNanos(msg.data.v4_rtt.up)));
t.appendChild(row); t.appendChild(row);
row = document.createElement("tr"); row = document.createElement("tr");
row.appendChild(simpleRow("IPv6")); row.appendChild(simpleRow("IPv6"));
row.appendChild(simpleRow(scaleNumber(msg.data.v6_bytes[0]))); row.appendChild(simpleRow(scaleNumber(msg.data.v6_bytes.down)));
row.appendChild(simpleRow(scaleNumber(msg.data.v6_bytes[1]))); row.appendChild(simpleRow(scaleNumber(msg.data.v6_bytes.up)));
row.appendChild(simpleRow(scaleNumber(msg.data.v6_packets[0]))); row.appendChild(simpleRow(scaleNumber(msg.data.v6_packets.down)));
row.appendChild(simpleRow(scaleNumber(msg.data.v6_packets[1]))); row.appendChild(simpleRow(scaleNumber(msg.data.v6_packets.up)));
row.appendChild(simpleRow(scaleNanos(msg.data.v6_rtt[0]))); row.appendChild(simpleRow(scaleNanos(msg.data.v6_rtt.down)));
row.appendChild(simpleRow(scaleNanos(msg.data.v6_rtt[1]))); row.appendChild(simpleRow(scaleNanos(msg.data.v6_rtt.up)));
t.appendChild(row); t.appendChild(row);
t.appendChild(tbody); t.appendChild(tbody);

View File

@ -45,8 +45,8 @@ export class IpProtocols extends BaseDashlet {
let row = document.createElement("tr"); let row = document.createElement("tr");
row.appendChild(simpleRow(r[0])); row.appendChild(simpleRow(r[0]));
row.appendChild(simpleRow(scaleNumber(r[1][0]))); row.appendChild(simpleRow(scaleNumber(r[1].down)));
row.appendChild(simpleRow(scaleNumber(r[1][1]))); row.appendChild(simpleRow(scaleNumber(r[1].up)));
t.appendChild(row); t.appendChild(row);
}); });

View File

@ -23,8 +23,8 @@ export class ShapedUnshapedDash extends BaseDashlet{
onMessage(msg) { onMessage(msg) {
if (msg.event === "Throughput") { if (msg.event === "Throughput") {
let shaped = msg.data.shaped_bps[0] + msg.data.shaped_bps[1]; let shaped = msg.data.shaped_bps.down + msg.data.shaped_bps.up;
let unshaped = msg.data.bps[0] + msg.data.bps[1]; let unshaped = msg.data.bps.down + msg.data.bps.up;
this.graph.update(shaped, unshaped); this.graph.update(shaped, unshaped);
} }
} }

View File

@ -57,11 +57,11 @@ export class Top10Downloaders extends BaseDashlet {
row.append(ip); row.append(ip);
let dl = document.createElement("td"); let dl = document.createElement("td");
dl.innerText = scaleNumber(r.bits_per_second[0]); dl.innerText = scaleNumber(r.bits_per_second.down);
row.append(dl); row.append(dl);
let ul = document.createElement("td"); let ul = document.createElement("td");
ul.innerText = scaleNumber(r.bits_per_second[1]); ul.innerText = scaleNumber(r.bits_per_second.up);
row.append(ul); row.append(ul);
let rtt = document.createElement("td"); let rtt = document.createElement("td");
@ -69,11 +69,11 @@ export class Top10Downloaders extends BaseDashlet {
row.append(rtt); row.append(rtt);
let tcp_xmit = document.createElement("td"); let tcp_xmit = document.createElement("td");
tcp_xmit.innerText = r.tcp_retransmits[0] + " / " + r.tcp_retransmits[1]; tcp_xmit.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.append(tcp_xmit); row.append(tcp_xmit);
let shaped = document.createElement("td"); let shaped = document.createElement("td");
shaped.innerText = r.plan[0] + " / " + r.plan[1]; shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped); row.append(shaped);
t.appendChild(row); t.appendChild(row);

View File

@ -64,27 +64,27 @@ export class Top10FlowsBytes extends BaseDashlet {
row.appendChild(remoteIp); row.appendChild(remoteIp);
let dl = document.createElement("td"); let dl = document.createElement("td");
dl.innerText = scaleNumber(r.rate_estimate_bps[0]); dl.innerText = scaleNumber(r.rate_estimate_bps.down);
row.appendChild(dl); row.appendChild(dl);
let ul = document.createElement("td"); let ul = document.createElement("td");
ul.innerText = scaleNumber(r.rate_estimate_bps[1]); ul.innerText = scaleNumber(r.rate_estimate_bps.up);
row.appendChild(ul); row.appendChild(ul);
let total = document.createElement("td"); let total = document.createElement("td");
total.innerText = scaleNumber(r.bytes_sent[0]) + " / " + scaleNumber(r.bytes_sent[1]); total.innerText = scaleNumber(r.bytes_sent.down) + " / " + scaleNumber(r.bytes_sent.up);
row.appendChild(total); row.appendChild(total);
let rttD = document.createElement("td"); let rttD = document.createElement("td");
rttD.innerText = scaleNanos(r.rtt_nanos[0]); rttD.innerText = scaleNanos(r.rtt_nanos.down);
row.appendChild(rttD); row.appendChild(rttD);
let rttU = document.createElement("td"); let rttU = document.createElement("td");
rttU.innerText = scaleNanos(r.rtt_nanos[1]); rttU.innerText = scaleNanos(r.rtt_nanos.up);
row.appendChild(rttU); row.appendChild(rttU);
let tcp = document.createElement("td"); let tcp = document.createElement("td");
tcp.innerText = r.tcp_retransmits[0] + " / " + r.tcp_retransmits[1]; tcp.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.appendChild(tcp); row.appendChild(tcp);
let asn = document.createElement("td"); let asn = document.createElement("td");

View File

@ -64,27 +64,27 @@ export class Top10FlowsRate extends BaseDashlet {
row.appendChild(remoteIp); row.appendChild(remoteIp);
let dl = document.createElement("td"); let dl = document.createElement("td");
dl.innerText = scaleNumber(r.rate_estimate_bps[0]); dl.innerText = scaleNumber(r.rate_estimate_bps.down);
row.appendChild(dl); row.appendChild(dl);
let ul = document.createElement("td"); let ul = document.createElement("td");
ul.innerText = scaleNumber(r.rate_estimate_bps[1]); ul.innerText = scaleNumber(r.rate_estimate_bps.up);
row.appendChild(ul); row.appendChild(ul);
let total = document.createElement("td"); let total = document.createElement("td");
total.innerText = scaleNumber(r.bytes_sent[0]) + " / " + scaleNumber(r.bytes_sent[1]); total.innerText = scaleNumber(r.bytes_sent.down) + " / " + scaleNumber(r.bytes_sent.up);
row.appendChild(total); row.appendChild(total);
let rttD = document.createElement("td"); let rttD = document.createElement("td");
rttD.innerText = scaleNanos(r.rtt_nanos[0]); rttD.innerText = scaleNanos(r.rtt_nanos.down);
row.appendChild(rttD); row.appendChild(rttD);
let rttU = document.createElement("td"); let rttU = document.createElement("td");
rttU.innerText = scaleNanos(r.rtt_nanos[1]); rttU.innerText = scaleNanos(r.rtt_nanos.up);
row.appendChild(rttU); row.appendChild(rttU);
let tcp = document.createElement("td"); let tcp = document.createElement("td");
tcp.innerText = r.tcp_retransmits[0] + " / " + r.tcp_retransmits[1]; tcp.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.appendChild(tcp); row.appendChild(tcp);
let asn = document.createElement("td"); let asn = document.createElement("td");

View File

@ -43,8 +43,8 @@ export class TopTreeSummary extends BaseDashlet {
msg.data.forEach((r) => { msg.data.forEach((r) => {
let row = document.createElement("tr"); let row = document.createElement("tr");
row.appendChild(simpleRow(r[1].name)); row.appendChild(simpleRow(r[1].name));
row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[0]))); row.appendChild(simpleRow(scaleNumber(r[1].current_throughput.down)));
row.appendChild(simpleRow(scaleNumber(r[1].current_throughput[1]))); row.appendChild(simpleRow(scaleNumber(r[1].current_throughput.up)));
t.appendChild(row); t.appendChild(row);
}); });

View File

@ -57,11 +57,11 @@ export class Worst10Downloaders extends BaseDashlet {
row.append(ip); row.append(ip);
let dl = document.createElement("td"); let dl = document.createElement("td");
dl.innerText = scaleNumber(r.bits_per_second[0]); dl.innerText = scaleNumber(r.bits_per_second.down);
row.append(dl); row.append(dl);
let ul = document.createElement("td"); let ul = document.createElement("td");
ul.innerText = scaleNumber(r.bits_per_second[1]); ul.innerText = scaleNumber(r.bits_per_second.up);
row.append(ul); row.append(ul);
let rtt = document.createElement("td"); let rtt = document.createElement("td");
@ -69,11 +69,11 @@ export class Worst10Downloaders extends BaseDashlet {
row.append(rtt); row.append(rtt);
let tcp_xmit = document.createElement("td"); let tcp_xmit = document.createElement("td");
tcp_xmit.innerText = r.tcp_retransmits[0] + " / " + r.tcp_retransmits[1]; tcp_xmit.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.append(tcp_xmit); row.append(tcp_xmit);
let shaped = document.createElement("td"); let shaped = document.createElement("td");
shaped.innerText = r.plan[0] + " / " + r.plan[1]; shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped); row.append(shaped);
t.appendChild(row); t.appendChild(row);

View File

@ -57,11 +57,11 @@ export class Worst10Retransmits extends BaseDashlet {
row.append(ip); row.append(ip);
let dl = document.createElement("td"); let dl = document.createElement("td");
dl.innerText = scaleNumber(r.bits_per_second[0]); dl.innerText = scaleNumber(r.bits_per_second.down);
row.append(dl); row.append(dl);
let ul = document.createElement("td"); let ul = document.createElement("td");
ul.innerText = scaleNumber(r.bits_per_second[1]); ul.innerText = scaleNumber(r.bits_per_second.up);
row.append(ul); row.append(ul);
let rtt = document.createElement("td"); let rtt = document.createElement("td");
@ -69,11 +69,11 @@ export class Worst10Retransmits extends BaseDashlet {
row.append(rtt); row.append(rtt);
let tcp_xmit = document.createElement("td"); let tcp_xmit = document.createElement("td");
tcp_xmit.innerText = r.tcp_retransmits[0] + " / " + r.tcp_retransmits[1]; tcp_xmit.innerText = r.tcp_retransmits.down + " / " + r.tcp_retransmits.up;
row.append(tcp_xmit); row.append(tcp_xmit);
let shaped = document.createElement("td"); let shaped = document.createElement("td");
shaped.innerText = r.plan[0] + " / " + r.plan[1]; shaped.innerText = r.plan.down + " / " + r.plan.up;
row.append(shaped); row.append(shaped);
t.appendChild(row); t.appendChild(row);

View File

@ -6,6 +6,66 @@ export class BitsPerSecondGauge extends DashboardGraph {
super(id); super(id);
this.option = { this.option = {
series: [ series: [
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.5, 'green'],
[0.8, 'orange'],
[1, '#fd666d']
]
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
itemStyle: {
color: 'red'
},
width: 4,
},
axisTick: {
distance: -10,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -15,
length: 15,
lineStyle: {
color: '#999',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 16,
fontSize: 10,
formatter: (value) => { return scaleNumber(value, 1); }
},
detail: {
valueAnimation: true,
formatter: (value) => { return scaleNumber(value); },
color: 'inherit',
fontSize: 12,
},
title: {
fontSize: 14,
color: 'red',
},
data: [
{
name: "DOWN",
value: 0,
title: { offsetCenter: ['40%', '75%'] },
detail: { offsetCenter: ['40%', '95%'] },
}
]
},
{ {
type: 'gauge', type: 'gauge',
axisLine: { axisLine: {
@ -66,67 +126,6 @@ export class BitsPerSecondGauge extends DashboardGraph {
}, },
] ]
}, },
{
type: 'gauge',
axisLine: {
lineStyle: {
width: 10,
color: [
[0.5, 'green'],
[0.8, 'orange'],
[1, '#fd666d']
]
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
itemStyle: {
color: 'red'
},
width: 4,
},
axisTick: {
distance: -10,
length: 8,
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
distance: -15,
length: 15,
lineStyle: {
color: '#999',
width: 4
}
},
axisLabel: {
color: 'inherit',
distance: 16,
fontSize: 10,
formatter: (value) => { return scaleNumber(value, 1); }
},
detail: {
valueAnimation: true,
formatter: (value) => { return scaleNumber(value); },
color: 'inherit',
fontSize: 12,
},
title: {
fontSize: 14,
color: 'red',
},
data: [
{
name: "DOWN",
value: 0,
title: { offsetCenter: ['40%', '75%'] },
detail: { offsetCenter: ['40%', '95%'] },
}
]
}
] ]
}; };
this.option && this.chart.setOption(this.option); this.option && this.chart.setOption(this.option);

View File

@ -74,7 +74,8 @@ export class RttHistogram3D extends DashboardGraph {
update(rtt) { update(rtt) {
this.chart.hideLoading(); this.chart.hideLoading();
for (let i=0; i<20; i++) rtt[i] += 20-i; // Uncomment this for test data
//for (let i=0; i<20; i++) rtt[i] += 20-i;
this.ring.push(rtt); this.ring.push(rtt);
this.option.series[0].data = this.ring.series(); this.option.series[0].data = this.ring.series();
this.chart.setOption(this.option); this.chart.setOption(this.option);