From c5e25035ef30c5a90ba913d64540a285665cbb69 Mon Sep 17 00:00:00 2001 From: Herbert Wolverson Date: Tue, 16 Jul 2024 14:12:58 -0500 Subject: [PATCH] Add traffic, marks and drops. The Cake display system is pretty much working. --- .../src/node_manager/js_build/src/circuit.js | 12 ++ .../js_build/src/graphs/cake_drops.js | 171 ++++++++++++++++++ .../js_build/src/graphs/cake_marks.js | 171 ++++++++++++++++++ .../js_build/src/graphs/cake_traffic.js | 171 ++++++++++++++++++ .../src/node_manager/static2/circuit.html | 9 + 5 files changed, 534 insertions(+) create mode 100644 src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js create mode 100644 src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_marks.js create mode 100644 src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_traffic.js diff --git a/src/rust/lqosd/src/node_manager/js_build/src/circuit.js b/src/rust/lqosd/src/node_manager/js_build/src/circuit.js index 68d2545d..29be82b6 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/circuit.js +++ b/src/rust/lqosd/src/node_manager/js_build/src/circuit.js @@ -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(); }); } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js new file mode 100644 index 00000000..9f2cac75 --- /dev/null +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_drops.js @@ -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 { + 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 { + 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
+
+
+
+
+
+
+
+
+
Queue Memory: ?