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 2ed3e188..40482431 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 @@ -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(); }); } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js new file mode 100644 index 00000000..5f1107ce --- /dev/null +++ b/src/rust/lqosd/src/node_manager/js_build/src/graphs/cake_delays.js @@ -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
+
+
+
Queue Memory: ?