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 traffic, marks and drops. The Cake display system is pretty much working.

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-16 14:12:58 -05:00
parent 1459d624c7
commit c5e25035ef
5 changed files with 534 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,9 @@ import {subscribeWS} from "./pubsub/ws";
import {CakeBacklog} from "./graphs/cake_backlog";
import {CakeDelays} from "./graphs/cake_delays";
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), {
get: (searchParams, prop) => searchParams.get(prop),
@ -562,6 +565,9 @@ function subscribeToCake() {
let backlogGraph = new CakeBacklog("cakeBacklog");
let delaysGraph = new CakeDelays("cakeDelays");
let queueLength = new CakeQueueLength("cakeQueueLength");
let traffic = new CakeTraffic("cakeTraffic");
let marks = new CakeMarks("cakeMarks");
let drops = new CakeDrops("cakeDrops");
channelLink = new DirectChannel({
CakeWatcher: {
circuit: circuit_id
@ -577,6 +583,12 @@ function subscribeToCake() {
delaysGraph.chart.resize();
queueLength.update(msg);
queueLength.chart.resize();
traffic.update(msg);
traffic.chart.resize();
marks.update(msg);
marks.chart.resize();
drops.update(msg);
drops.chart.resize();
});
}

171
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js Normal file
View File

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

171
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js Normal file
View File

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

171
src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js Normal file
View File

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

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

@ -93,6 +93,15 @@
<div class="col-4">
<div id="cakeQueueLength" style="height: 250px"></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">
Queue Memory: <span id="cakeQueueMemory">?</span>
</div>