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 40482431..68d2545d 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 @@ -11,6 +11,7 @@ import {FlowsSankey} from "./graphs/flow_sankey"; import {subscribeWS} from "./pubsub/ws"; import {CakeBacklog} from "./graphs/cake_backlog"; import {CakeDelays} from "./graphs/cake_delays"; +import {CakeQueueLength} from "./graphs/cake_queue_length"; const params = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), @@ -560,6 +561,7 @@ function onTreeEvent(msg) { function subscribeToCake() { let backlogGraph = new CakeBacklog("cakeBacklog"); let delaysGraph = new CakeDelays("cakeDelays"); + let queueLength = new CakeQueueLength("cakeQueueLength"); channelLink = new DirectChannel({ CakeWatcher: { circuit: circuit_id @@ -573,6 +575,8 @@ function subscribeToCake() { backlogGraph.chart.resize(); delaysGraph.update(msg); delaysGraph.chart.resize(); + queueLength.update(msg); + queueLength.chart.resize(); }); } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js new file mode 100644 index 00000000..48705341 --- /dev/null +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_queue_length.js @@ -0,0 +1,88 @@ +import {DashboardGraph} from "./dashboard_graph"; +import {scaleNumber} from "../helpers/scaling"; + +export class CakeQueueLength extends DashboardGraph { + constructor(id) { + super(id); + + let xaxis = []; + for (let i=0; i<600; i++) { + xaxis.push(i); + } + + this.option = { + title: { + text: "Queue Length", + }, + legend: { + orient: "horizontal", + right: 10, + top: "bottom", + selectMode: false, + textStyle: { + color: '#aaa' + }, + data: [ + { + name: "Queue Length", + icon: 'circle', + itemStyle: { + color: "orange" + } + } + ] + }, + xAxis: { + type: 'category', + data: xaxis, + }, + yAxis: { + type: 'value', + }, + series: [ + { + name: 'Queue Length', + data: [], + type: 'line', + lineStyle: { + color: 'orange', + }, + symbol: 'none', + }, + { + name: 'Queue Length Up', + data: [], + type: 'line', + lineStyle: { + color: 'orange', + }, + symbol: 'none', + }, + ], + tooltip: { + trigger: 'item', + }, + animation: false, + } + this.option && this.chart.setOption(this.option); + } + + update(msg) { + this.chart.hideLoading(); + + this.option.series[0].data = []; + this.option.series[1].data = []; + + //console.log(msg); + for (let i=msg.history_head; i<600; i++) { + this.option.series[0].data.push(msg.history[i][0].qlen); + this.option.series[1].data.push(0 - msg.history[i][1].qlen); + } + for (let i=0; i
+
+
+
Queue Memory: ?