IntenseWebs/LibreQoS
3
0
Fork 0
mirror of https://github.com/LibreQoE/LibreQoS.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add Cake Delays

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-16 13:59:42 -05:00
parent 822743605e
commit bfa58c4541
3 changed files with 173 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/rust/lqosd/src/node_manager/js_build/src/circuit.js
View File

@ -10,6 +10,7 @@ import {DevicePingHistogram} from "./graphs/device_ping_graph";
import {FlowsSankey} from "./graphs/flow_sankey";
import {subscribeWS} from "./pubsub/ws";
import {CakeBacklog} from "./graphs/cake_backlog";
import {CakeDelays} from "./graphs/cake_delays";
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
@ -558,6 +559,7 @@ function onTreeEvent(msg) {
function subscribeToCake() {
let backlogGraph = new CakeBacklog("cakeBacklog");
let delaysGraph = new CakeDelays("cakeDelays");
channelLink = new DirectChannel({
CakeWatcher: {
circuit: circuit_id
@ -569,6 +571,8 @@ function subscribeToCake() {
$("#cakeQueueMemory").text(scaleNumber(msg.current_download.memory_used) + " / " + scaleNumber(msg.current_upload.memory_used));
backlogGraph.update(msg);
backlogGraph.chart.resize();
delaysGraph.update(msg);
delaysGraph.chart.resize();
});
}

166
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js Normal file
View File

@ -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);
}
}

3
src/rust/lqosd/src/node_manager/static2/circuit.html
View File

@ -87,6 +87,9 @@
<div class="col-4">
<div id="cakeBacklog" style="height: 250px"></div>
</div>
<div class="col-4">
<div id="cakeDelays" style="height: 250px"></div>
</div>
<div class="col-3">
Queue Memory: <span id="cakeQueueMemory">?</span>
</div>