Test build for flow map (very early days)

src/rust/lqosd/src/node_manager/js_build/esbuild.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 set -e
-scripts=( index.js template.js login.js first-run.js shaped-devices.js tree.js help.js unknown-ips.js configuration.js circuit.js )
+scripts=( index.js template.js login.js first-run.js shaped-devices.js tree.js help.js unknown-ips.js configuration.js circuit.js flow_map.js )
 for script in "${scripts[@]}"
 do
   echo "Building {$script}"

src/rust/lqosd/src/node_manager/js_build/src/flow_map.js

@@ -0,0 +1,73 @@
+import { DashboardGraph } from "./graphs/dashboard_graph";
+
+class FlowMap extends DashboardGraph {
+    constructor(id) {
+        super(id);
+        let data = [];
+        this.option = {
+            geo3D: {
+                map: 'world',
+                shading: 'realistic',
+                silent: true,
+                environment: '#333',
+                realisticMaterial: {
+                    roughness: 0.8,
+                    metalness: 0
+                },
+                postEffect: {
+                    enable: true
+                },
+                groundPlane: {
+                    show: false
+                },
+                light: {
+                    main: {
+                        intensity: 1,
+                        alpha: 30
+                    },
+                    ambient: {
+                        intensity: 0
+                    }
+                },
+                viewControl: {
+                    distance: 70,
+                    alpha: 89,
+                    panMouseButton: 'left',
+                    rotateMouseButton: 'right'
+                },
+                itemStyle: {
+                    color: '#000'
+                },
+                regionHeight: 0.5
+            },
+            series: [
+                {
+                    type: 'scatter3D',
+                    coordinateSystem: 'geo3D',
+                    blendMode: 'lighter',
+                    lineStyle: {
+                        width: 0.2,
+                        opacity: 0.05
+                    },
+                    data: data
+                }
+            ]
+        };
+        this.option && this.chart.setOption(this.option);
+    }
+
+    update(data) {
+        this.chart.hideLoading();
+        this.option.series[0].data = data;
+        this.chart.setOption(this.option);
+    }
+}
+
+let map = new FlowMap("flowMap");
+$.get("/local-api/flowMap", (data) => {
+    let output = [];
+    data.forEach((d) => {
+        output.push([d[1], d[0]]); // It wants lon/lat
+    });
+    map.update(output);
+})

src/rust/lqosd/src/node_manager/local_api.rs

@@ -11,6 +11,7 @@ mod reload_libreqos;
 mod config;
 mod circuit;
 mod packet_analysis;
+mod flow_map;
 
 use axum::Router;
 use axum::routing::{get, post};
@@ -44,5 +45,6 @@ pub fn local_api() -> Router {
         .route("/circuitById", post(circuit::get_circuit_by_id))
         .route("/requestAnalysis/:ip", get(packet_analysis::request_analysis))
         .route("/pcapDump/:id", get(packet_analysis::pcap_dump))
+        .route("/flowMap", get(flow_map::flow_lat_lon))
         .route_layer(axum::middleware::from_fn(auth_layer))
 }

src/rust/lqosd/src/node_manager/local_api/flow_map.rs

@@ -0,0 +1,6 @@
+use axum::Json;
+use crate::throughput_tracker::flow_data;
+
+pub async fn flow_lat_lon() -> Json<Vec<(f64, f64, String, u64, f32)>> {
+    Json(flow_data::RECENT_FLOWS.lat_lon_endpoints())
+}

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

@@ -0,0 +1,6 @@
+<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
+
+<div class="row" style="height: 100%;">
+    <div class="col-12" style="height: 100%;" id="flowMap"></div>
+</div>
+<script src="flow_map.js"></script>

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

@@ -69,6 +69,12 @@
                             <i class="fa fa-address-card nav-icon"></i> <span id="unknownIpCount" class="badge">?</span> Unknown IP
                         </a>
                     </li>
+                    <!-- Flow Map -->
+                    <li class="nav-item">
+                        <a class="nav-link" href="flow_map.html">
+                            <i class="fa fa-map nav-icon"></i> Flow Map
+                        </a>
+                    </li>
                     <!-- Statistics -->
                     <li class="nav-item">
                         <a class="nav-link" id="lnkStats">

src/rust/lqosd/src/node_manager/static_pages.rs

@@ -31,7 +31,7 @@ pub(super) fn static_routes() -> Result<Router> {
     let html_pages = [
         "index.html", "shaped_devices.html", "tree.html",
         "help.html", "unknown_ips.html", "configuration.html",
-        "circuit.html",
+        "circuit.html", "flow_map.html",
     ];
 
     // Iterate through pages and construct the router