mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Add traffic, marks and drops. The Cake display system is pretty much working.
This commit is contained in:
Herbert Wolverson
parent
1459d624c7
commit
c5e25035ef
@ -12,6 +12,9 @@ import {subscribeWS} from "./pubsub/ws";
|
|||||||
import {CakeBacklog} from "./graphs/cake_backlog";
|
import {CakeBacklog} from "./graphs/cake_backlog";
|
||||||
import {CakeDelays} from "./graphs/cake_delays";
|
import {CakeDelays} from "./graphs/cake_delays";
|
||||||
import {CakeQueueLength} from "./graphs/cake_queue_length";
|
import {CakeQueueLength} from "./graphs/cake_queue_length";
|
||||||
|
import {CakeTraffic} from "./graphs/cake_traffic";
|
||||||
|
import {CakeMarks} from "./graphs/cake_marks";
|
||||||
|
import {CakeDrops} from "./graphs/cake_drops";
|
||||||
|
|
||||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||||||
get: (searchParams, prop) => searchParams.get(prop),
|
get: (searchParams, prop) => searchParams.get(prop),
|
||||||
@ -562,6 +565,9 @@ function subscribeToCake() {
|
|||||||
let backlogGraph = new CakeBacklog("cakeBacklog");
|
let backlogGraph = new CakeBacklog("cakeBacklog");
|
||||||
let delaysGraph = new CakeDelays("cakeDelays");
|
let delaysGraph = new CakeDelays("cakeDelays");
|
||||||
let queueLength = new CakeQueueLength("cakeQueueLength");
|
let queueLength = new CakeQueueLength("cakeQueueLength");
|
||||||
|
let traffic = new CakeTraffic("cakeTraffic");
|
||||||
|
let marks = new CakeMarks("cakeMarks");
|
||||||
|
let drops = new CakeDrops("cakeDrops");
|
||||||
channelLink = new DirectChannel({
|
channelLink = new DirectChannel({
|
||||||
CakeWatcher: {
|
CakeWatcher: {
|
||||||
circuit: circuit_id
|
circuit: circuit_id
|
||||||
@ -577,6 +583,12 @@ function subscribeToCake() {
|
|||||||
delaysGraph.chart.resize();
|
delaysGraph.chart.resize();
|
||||||
queueLength.update(msg);
|
queueLength.update(msg);
|
||||||
queueLength.chart.resize();
|
queueLength.chart.resize();
|
||||||
|
traffic.update(msg);
|
||||||
|
traffic.chart.resize();
|
||||||
|
marks.update(msg);
|
||||||
|
marks.chart.resize();
|
||||||
|
drops.update(msg);
|
||||||
|
drops.chart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,171 @@
|
|||||||
|
import {DashboardGraph} from "./dashboard_graph";
|
||||||
|
import {scaleNumber} from "../helpers/scaling";
|
||||||
|
|
||||||
|
export class CakeDrops extends DashboardGraph {
|
||||||
|
constructor(id) {
|
||||||
|
super(id);
|
||||||
|
|
||||||
|
let xaxis = [];
|
||||||
|
for (let i=0; i<600; i++) {
|
||||||
|
xaxis.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
title: {
|
||||||
|
text: "Shaper Drops",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
right: 10,
|
||||||
|
top: "bottom",
|
||||||
|
selectMode: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#aaa'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "Bulk",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "gray"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Best Effort",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "green"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "RT Video",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "orange"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Voice",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "yellow"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xaxis,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (val) => {
|
||||||
|
return scaleNumber(Math.abs(val), 0);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Bulk',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Voice',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bulk Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Voice Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
}
|
||||||
|
this.option && this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(msg) {
|
||||||
|
this.chart.hideLoading();
|
||||||
|
|
||||||
|
for (let i=0; i<8; i++) {
|
||||||
|
this.option.series[i].data = [];
|
||||||
|
}
|
||||||
|
//console.log(msg);
|
||||||
|
for (let i=msg.history_head; i<600; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].drops);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].drops);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i=0; i<msg.history_head; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].drops);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].drops);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
import {DashboardGraph} from "./dashboard_graph";
|
||||||
|
import {scaleNumber} from "../helpers/scaling";
|
||||||
|
|
||||||
|
export class CakeMarks extends DashboardGraph {
|
||||||
|
constructor(id) {
|
||||||
|
super(id);
|
||||||
|
|
||||||
|
let xaxis = [];
|
||||||
|
for (let i=0; i<600; i++) {
|
||||||
|
xaxis.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
title: {
|
||||||
|
text: "ECN Marks",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
right: 10,
|
||||||
|
top: "bottom",
|
||||||
|
selectMode: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#aaa'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "Bulk",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "gray"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Best Effort",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "green"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "RT Video",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "orange"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Voice",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "yellow"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xaxis,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (val) => {
|
||||||
|
return scaleNumber(Math.abs(val), 0);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Bulk',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Voice',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bulk Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Voice Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
}
|
||||||
|
this.option && this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(msg) {
|
||||||
|
this.chart.hideLoading();
|
||||||
|
|
||||||
|
for (let i=0; i<8; i++) {
|
||||||
|
this.option.series[i].data = [];
|
||||||
|
}
|
||||||
|
//console.log(msg);
|
||||||
|
for (let i=msg.history_head; i<600; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].marks);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].marks);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i=0; i<msg.history_head; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].marks);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].marks);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
import {DashboardGraph} from "./dashboard_graph";
|
||||||
|
import {scaleNumber} from "../helpers/scaling";
|
||||||
|
|
||||||
|
export class CakeTraffic extends DashboardGraph {
|
||||||
|
constructor(id) {
|
||||||
|
super(id);
|
||||||
|
|
||||||
|
let xaxis = [];
|
||||||
|
for (let i=0; i<600; i++) {
|
||||||
|
xaxis.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
title: {
|
||||||
|
text: "Traffic",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: "horizontal",
|
||||||
|
right: 10,
|
||||||
|
top: "bottom",
|
||||||
|
selectMode: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#aaa'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: "Bulk",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "gray"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Best Effort",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "green"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "RT Video",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "orange"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: "Voice",
|
||||||
|
icon: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
color: "yellow"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xaxis,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (val) => {
|
||||||
|
return scaleNumber(Math.abs(val), 0);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Bulk',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Voice',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bulk Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'gray',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Best Effort Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Video Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'RT Voice Up',
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
lineStyle: {
|
||||||
|
color: 'yellow',
|
||||||
|
},
|
||||||
|
symbol: 'none',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
}
|
||||||
|
this.option && this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(msg) {
|
||||||
|
this.chart.hideLoading();
|
||||||
|
|
||||||
|
for (let i=0; i<8; i++) {
|
||||||
|
this.option.series[i].data = [];
|
||||||
|
}
|
||||||
|
//console.log(msg);
|
||||||
|
for (let i=msg.history_head; i<600; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].sent_bytes * 8);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].sent_bytes * 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i=0; i<msg.history_head; i++) {
|
||||||
|
for (let j=0; j<4; j++) {
|
||||||
|
if (msg.history[i][0].tins[0] === undefined) continue;
|
||||||
|
this.option.series[j].data.push(msg.history[i][0].tins[j].sent_bytes * 8);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].sent_bytes * 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -93,6 +93,15 @@
|
|||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<div id="cakeQueueLength" style="height: 250px"></div>
|
<div id="cakeQueueLength" style="height: 250px"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div id="cakeTraffic" style="height: 250px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div id="cakeMarks" style="height: 250px"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div id="cakeDrops" style="height: 250px"></div>
|
||||||
|
</div>
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
Queue Memory: <span id="cakeQueueMemory">?</span>
|
Queue Memory: <span id="cakeQueueMemory">?</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user