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

Circuits now have a queue tree display.

Browse Source
This commit is contained in:
Herbert Wolverson 2024-07-16 12:13:00 -05:00
parent 01d43090c2
commit 41bdefa5e3
2 changed files with 112 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import {CircuitRetransmitGraph} from "./graphs/circuit_retransmit_graph";
import {scaleNanos, scaleNumber} from "./helpers/scaling";
import {DevicePingHistogram} from "./graphs/device_ping_graph";
import {FlowsSankey} from "./graphs/flow_sankey";
import {subscribeWS} from "./pubsub/ws";
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
@ -24,6 +25,8 @@ let totalRetransmits = null;
let deviceGraphs = {};
let devicePings = [];
let flowSankey = null;
let funnelGraphs = {};
let funnelParents = [];
function connectPrivateChannel() {
channelLink = new DirectChannel({
@ -120,6 +123,7 @@ function connectFlowChannel() {
}, (msg) => {
//console.log(msg);
let activeFlows = flowSankey.update(msg);
flowSankey.chart.resize();
$("#activeFlowCount").text(activeFlows);
updateTrafficTab(msg);
});
@ -458,6 +462,99 @@ function initialDevices(circuits) {
});
}
function initialFunnel(parentNode) {
let target = document.getElementById("theFunnel");
$.get("/local-api/networkTree", (data) => {
let immediateParent = null;
data.forEach((node) => {
if (node[1].name === parentNode) {
immediateParent = node[1];
}
});
if (immediateParent === null) {
clearDiv(target);
target.appendChild(document.createTextNode("No parent node found"));
return;
}
let parentDiv = document.createElement("div");
immediateParent.parents.reverse().forEach((parent) => {
//console.log(data[parent]);
let row = document.createElement("div");
row.classList.add("row");
let col = document.createElement("div");
col.classList.add("col-12");
let heading = document.createElement("h5");
heading.innerHTML = "<i class='fa fa-sitemap'></i> " + data[parent][1].name;
col.appendChild(heading);
row.appendChild(col);
parentDiv.appendChild(row);
// Row for graphs
row = document.createElement("div");
row.classList.add("row");
let col_tp = document.createElement("div");
col_tp.classList.add("col-4");
col_tp.id = "funnel_tp_" + parent;
col_tp.style.height = "250px";
row.appendChild(col_tp);
let col_rxmit = document.createElement("div");
col_rxmit.classList.add("col-4");
col_rxmit.id = "funnel_rxmit_" + parent;
row.appendChild(col_rxmit);
let col_rtt = document.createElement("div");
col_rtt.classList.add("col-4");
col_rtt.id = "funnel_rtt_" + parent;
row.appendChild(col_rtt);
parentDiv.appendChild(row);
});
clearDiv(target);
target.appendChild(parentDiv);
// Ugly hack to defer until the DOM is updated
requestAnimationFrame(() => {setTimeout(() => {
immediateParent.parents.reverse().forEach((parent) => {
let tpGraph = new CircuitTotalGraph("funnel_tp_" + parent, data[parent][1].name + " Throughput");
let rxmitGraph = new CircuitRetransmitGraph("funnel_rxmit_" + parent, data[parent][1].name + " Retransmits");
let rttGraph = new DevicePingHistogram("funnel_rtt_" + parent);
funnelGraphs[parent] = {
tp: tpGraph,
rxmit: rxmitGraph,
rtt: rttGraph,
};
});
funnelParents = immediateParent.parents;
subscribeWS(["NetworkTree"], onTreeEvent);
}, 0)});
});
}
function onTreeEvent(msg) {
//console.log(msg);
funnelParents.forEach((parent) => {
if (msg.event !== "NetworkTree") return;
let myMessage = msg.data[parent][1];
if (myMessage === undefined) return;
let tpGraph = funnelGraphs[parent].tp;
let rxmitGraph = funnelGraphs[parent].rxmit;
let rttGraph = funnelGraphs[parent].rtt;
tpGraph.update(myMessage.current_throughput.down, myMessage.current_throughput.up);
rxmitGraph.update(myMessage.current_retransmits.down, myMessage.current_retransmits.up);
myMessage.rtts.forEach((rtt) => {
rttGraph.update(rtt.nanoseconds);
});
tpGraph.chart.resize();
rxmitGraph.chart.resize();
rttGraph.chart.resize();
});
}
function loadInitial() {
$.ajax({
type: "POST",
@ -484,6 +581,7 @@ function loadInitial() {
connectPrivateChannel();
connectPingers(circuits);
connectFlowChannel();
initialFunnel(circuit.parent_node)
},
error: () => {
alert("Circuit with id " + circuit_id + " not found");

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

@ -36,12 +36,17 @@
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="sankey-tab" data-bs-toggle="tab" data-bs-target="#sankey" type="button" role="tab" aria-controls="profile" aria-selected="false">
Active Flows <span id="activeFlowCount" class="badge">0</span>
<i class="fa fa-map"></i> Active Flows <span id="activeFlowCount" class="badge">0</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="traffic-tab" data-bs-toggle="tab" data-bs-target="#traffic" type="button" role="tab" aria-controls="contact" aria-selected="false">
Network Traffic
<i class="fa fa-table"></i> Network Traffic
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="funnel-tab" data-bs-toggle="tab" data-bs-target="#funnel" type="button" role="tab" aria-controls="contact" aria-selected="false">
<i class="fa fa-tree"></i> Queue Tree
</button>
</li>
</ul>
@ -65,6 +70,13 @@
</div>
</div>
</div>
<div class="tab-pane fade" id="funnel" role="tabpanel" aria-labelledby="funnel-tab">
<div class="row">
<div class="col-12" id="theFunnel">
<i class="fa fa-spinner fa-spin"></i> Loading Queue Tree...
</div>
</div>
</div>
</div>