Add Cake Queue Length

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

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<msg.history_head; i++) {
+            this.option.series[0].data.push(msg.history[i][0].qlen);
+            this.option.series[1].data.push(0 - msg.history[i][1].qlen);
+        }
+
+        this.chart.setOption(this.option);
+    }
+}

src/rust/lqosd/src/node_manager/static2/circuit.html

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