mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Add Cake Delays
This commit is contained in:
parent
822743605e
commit
bfa58c4541
@ -10,6 +10,7 @@ import {DevicePingHistogram} from "./graphs/device_ping_graph";
|
|||||||
import {FlowsSankey} from "./graphs/flow_sankey";
|
import {FlowsSankey} from "./graphs/flow_sankey";
|
||||||
import {subscribeWS} from "./pubsub/ws";
|
import {subscribeWS} from "./pubsub/ws";
|
||||||
import {CakeBacklog} from "./graphs/cake_backlog";
|
import {CakeBacklog} from "./graphs/cake_backlog";
|
||||||
|
import {CakeDelays} from "./graphs/cake_delays";
|
||||||
|
|
||||||
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),
|
||||||
@ -558,6 +559,7 @@ function onTreeEvent(msg) {
|
|||||||
|
|
||||||
function subscribeToCake() {
|
function subscribeToCake() {
|
||||||
let backlogGraph = new CakeBacklog("cakeBacklog");
|
let backlogGraph = new CakeBacklog("cakeBacklog");
|
||||||
|
let delaysGraph = new CakeDelays("cakeDelays");
|
||||||
channelLink = new DirectChannel({
|
channelLink = new DirectChannel({
|
||||||
CakeWatcher: {
|
CakeWatcher: {
|
||||||
circuit: circuit_id
|
circuit: circuit_id
|
||||||
@ -569,6 +571,8 @@ function subscribeToCake() {
|
|||||||
$("#cakeQueueMemory").text(scaleNumber(msg.current_download.memory_used) + " / " + scaleNumber(msg.current_upload.memory_used));
|
$("#cakeQueueMemory").text(scaleNumber(msg.current_download.memory_used) + " / " + scaleNumber(msg.current_upload.memory_used));
|
||||||
backlogGraph.update(msg);
|
backlogGraph.update(msg);
|
||||||
backlogGraph.chart.resize();
|
backlogGraph.chart.resize();
|
||||||
|
delaysGraph.update(msg);
|
||||||
|
delaysGraph.chart.resize();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -0,0 +1,166 @@
|
|||||||
|
import {DashboardGraph} from "./dashboard_graph";
|
||||||
|
import {scaleNumber} from "../helpers/scaling";
|
||||||
|
|
||||||
|
export class CakeDelays extends DashboardGraph {
|
||||||
|
constructor(id) {
|
||||||
|
super(id);
|
||||||
|
|
||||||
|
let xaxis = [];
|
||||||
|
for (let i=0; i<600; i++) {
|
||||||
|
xaxis.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.option = {
|
||||||
|
title: {
|
||||||
|
text: "Delays",
|
||||||
|
},
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
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].base_delay_us);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].base_delay_us);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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].base_delay_us);
|
||||||
|
this.option.series[j+4].data.push(0 - msg.history[i][1].tins[j].base_delay_us);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart.setOption(this.option);
|
||||||
|
}
|
||||||
|
}
|
@ -87,6 +87,9 @@
|
|||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<div id="cakeBacklog" style="height: 250px"></div>
|
<div id="cakeBacklog" style="height: 250px"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div id="cakeDelays" 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