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

Packet analysis page has a lot more options

Browse Source 
See ISSUE #302

* Filter by FlowID
* Pagination is a select/drop-down
* Filtering is a select/drop-down
* Graph type is selectable from:
   * Packet size (the previous view)
   * Piano Roll (flows plotted by time)
   * TCP Window (differntiated by flow)
This commit is contained in:
Herbert Wolverson 2023-03-27 17:42:50 +00:00
parent da0489b638
commit 83825e0376
1 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/rust/lqos_node_manager/static/ip_dump.html
View File

@ -80,6 +80,8 @@
var capacity = [];
var activeFilter = null;
var activeSet = null;
var activeChart = 0;
var activePage = 0;
function filter(newFilter) {
activeFilter = newFilter;
@ -93,6 +95,12 @@
viewPage(0);
}
function setChart(n) {
activeChart = n;
paginator(activePage);
viewPage(activePage);
}
function proto(n) {
switch (n) {
case 6: return "TCP"
@ -157,7 +165,7 @@ if (hdr->cwr) flags |= 128;
paginator += "<option onclick='viewPage(" + i + ");'>" + i + "</option> ";
}
}
paginator += "</select><br />";
paginator += "</select> | ";
// Offer flow filtering
paginator += "<strong>Filter Flows</strong>: ";
@ -174,7 +182,28 @@ if (hdr->cwr) flags |= 128;
paginator += "<option onclick='filter(\"" + key + "\");'>" + key + "</option>";
}
});
paginator += "</select> | ";
// Offer graph choices
paginator += "<strong>Graph</strong>: ";
paginator += "<select>";
if (activeChart == 0) {
paginator += "<option selected>Packet-Size Chart</option>";
} else {
paginator += "<option onclick='setChart(0);'>Packet-Size Chart</option>";
}
if (activeChart == 1) {
paginator += "<option selected>Piano Roll Flow Chart</option>";
} else {
paginator += "<option onclick='setChart(1);'>Piano Roll Flow Chart</option>";
}
if (activeChart == 2) {
paginator += "<option selected>TCP Window Chart</option>";
} else {
paginator += "<option onclick='setChart(2);'>TCP Window Chart</option>";
}
paginator += "</select>";
paginator += "</div>";
$("#pages").html(paginator);
}
@ -314,6 +343,7 @@ if (hdr->cwr) flags |= 128;
data.forEach(packet => packet.timestamp -= min_ts);
// Divide the packets into flows and append the flow_id
let flowCounter = 0;
data.forEach(packet => {
let flow_id = proto(packet.ip_protocol) + " " + packet.src + ":" + packet.src_port + " <-> " + packet.dst + ":" + packet.dst_port;
let reverse_flow_id = proto(packet.ip_protocol) + " " + packet.dst + ":" + packet.dst_port + " <-> " + packet.src + ":" + packet.src_port;
@ -322,11 +352,11 @@ if (hdr->cwr) flags |= 128;
} else if (flows.hasOwnProperty(reverse_flow_id)) {
packet.flow_id = reverse_flow_id;
} else {
flows[flow_id] = {};
flows[flow_id] = { flowCounter };
packet.flow_id = flow_id;
flowCounter++;
}
});
console.log(flows);
packets = data;
activeSet = packets;