mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Pass through UI2 to be consistent on up/down
This commit is contained in:
parent
95ac0fa825
commit
f116bed667
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
@ -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");
|
||||||
|
@ -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");
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user