Lots of small render fixes

.gitignore

@@ -112,3 +112,11 @@ tramp
 # virtual environments
 .venv
 venv
+src/integrationUISPbandwidths.template.csv
+src/lts_keys.bin
+src/network
+src/network.json.good
+src/network.pdf
+src/ShapedDevices.csv.good
+.gitignore
+src/rust/lqosd/lts_keys.bin

src/rust/long_term_stats/lts_node/src/web/wss/queries/site_heat_map.rs

@@ -29,6 +29,7 @@ pub async fn root_heat_map(
                 .await?
                 .iter()
                 .map(|row| row.try_get("site_name").unwrap())
+                .filter(|row| row != "Root")
                 .collect();
 
         let mut host_filter = "filter(fn: (r) => ".to_string();

src/rust/long_term_stats/lts_node/src/web/wss/queries/throughput/site_stack.rs

@@ -1,8 +1,7 @@
-use crate::web::wss::{queries::{
-    time_period::InfluxTimePeriod,
-}, send_response};
+use crate::web::wss::{queries::time_period::InfluxTimePeriod, send_response};
 use axum::extract::ws::WebSocket;
 use pgdb::sqlx::{Pool, Postgres, Row};
+use wasm_pipe_types::Throughput;
 
 use super::{get_throughput_for_all_nodes_by_circuit, get_throughput_for_all_nodes_by_site};
 
@@ -49,8 +48,7 @@ pub async fn send_site_stack_map(
     }
     for circuit in circuits.into_iter() {
         let mut throughput =
-            get_throughput_for_all_nodes_by_circuit(cnn, key, period.clone(), &circuit.0)
-                .await?;
+            get_throughput_for_all_nodes_by_circuit(cnn, key, period.clone(), &circuit.0).await?;
         throughput
             .iter_mut()
             .for_each(|row| row.node_name = circuit.1.clone());
@@ -58,7 +56,56 @@ pub async fn send_site_stack_map(
     }
     //println!("{result:?}");
 
-    send_response(socket, wasm_pipe_types::WasmResponse::SiteStack { nodes: result }).await;
+    // Sort by total
+    result.sort_by(|a, b| {
+        b.total()
+            .partial_cmp(&a.total())
+            .unwrap_or(std::cmp::Ordering::Equal)
+    });
+
+    // If there are more than 9 entries, create an "others" to handle the remainder
+    if result.len() > 9 {
+        let mut others = wasm_pipe_types::ThroughputHost {
+            node_id: "others".to_string(),
+            node_name: "others".to_string(),
+            down: Vec::new(),
+            up: Vec::new(),
+        };
+        result[0].down.iter().for_each(|x| {
+            others.down.push(Throughput {
+                value: 0.0,
+                date: x.date.clone(),
+                l: 0.0,
+                u: 0.0,
+            });
+        });
+        result[0].up.iter().for_each(|x| {
+            others.up.push(Throughput {
+                value: 0.0,
+                date: x.date.clone(),
+                l: 0.0,
+                u: 0.0,
+            });
+        });
+
+        result.iter().skip(9).for_each(|row| {
+            row.down.iter().enumerate().for_each(|(i, x)| {
+                others.down[i].value += x.value;
+            });
+            row.up.iter().enumerate().for_each(|(i, x)| {
+                others.up[i].value += x.value;
+            });
+        });
+
+        result.truncate(9);
+        result.push(others);
+    }
+
+    send_response(
+        socket,
+        wasm_pipe_types::WasmResponse::SiteStack { nodes: result },
+    )
+    .await;
 
     Ok(())
 }

src/rust/long_term_stats/site_build/src/ap/template.html

@@ -42,7 +42,7 @@
         <div class="col-12">
             <div class="card">
                 <div class="card-body">
-                    <div id="siteStack" style="height: 900px"></div>
+                    <div id="siteStack" style="height: 250px"></div>
                 </div>
             </div>
         </div>

src/rust/long_term_stats/site_build/src/components/root_breadcrumbs.ts

@@ -20,7 +20,9 @@ export class RootBreadcrumbs implements Component {
             //console.log(event.data);
             let html = "<option value=''>-- Children --</option>";
             for (let i=0; i<event.SiteChildren.data.length; i++) {
-                html += "<option value='" + makeUrl(event.SiteChildren.data[i][0], event.SiteChildren.data[i][1]) + "'>" + event.SiteChildren.data[i][2] + "</option>";
+                if (event.SiteChildren.data[i][1] != "Root") {
+                    html += "<option value='" + makeUrl(event.SiteChildren.data[i][0], event.SiteChildren.data[i][1]) + "'>" + event.SiteChildren.data[i][2] + "</option>";
+                }
             }
             let select = document.getElementById("siteChildren") as HTMLSelectElement;
             select.innerHTML = html;

src/rust/long_term_stats/site_build/src/components/root_heat.ts

@@ -4,13 +4,11 @@ import * as echarts from 'echarts';
 
 export class RootHeat implements Component {
     div: HTMLElement;
-    myChart: echarts.ECharts;
+    myChart: echarts.ECharts | null = null;
     counter: number = 0;
 
     constructor() {
         this.div = document.getElementById("rootHeat") as HTMLElement;
-        this.myChart = echarts.init(this.div);
-        this.myChart.showLoading();
     }
 
     wireup(): void {
@@ -25,8 +23,6 @@ export class RootHeat implements Component {
 
     onmessage(event: any): void {
         if (event.msg == "RootHeat") {
-            this.myChart.hideLoading();
-
             let categories: string[] = [];
             let x: string[] = [];
             let first: boolean = true;
@@ -39,20 +35,20 @@ export class RootHeat implements Component {
             keys = keys.sort().reverse();
             //console.log(keys);
 
-            for (let j=0; j<keys.length; j++) {
+            for (let j = 0; j < keys.length; j++) {
                 let key = keys[j];
                 categories.push(key);
 
                 // Push the X axis values
                 if (first) {
                     first = false;
-                    for (let i=0; i<event.RootHeat.data[key].length; i++) {
+                    for (let i = 0; i < event.RootHeat.data[key].length; i++) {
                         x.push(event.RootHeat.data[key][i][0]);
                     }
                 }
 
                 // Create all the series entries for this category
-                for (let i=0; i<event.RootHeat.data[key].length; i++) {
+                for (let i = 0; i < event.RootHeat.data[key].length; i++) {
                     data.push([i, count, event.RootHeat.data[key][i][1].toFixed(1)]);
                 }
 
@@ -61,6 +57,7 @@ export class RootHeat implements Component {
 
             let series: any[] = [];
             let i = 0;
+            console.log(categories);
             series.push({
                 name: categories[i],
                 type: 'heatmap',
@@ -71,7 +68,7 @@ export class RootHeat implements Component {
                         shadowBlur: 10,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
-                    }
+                }
             })
             //console.log(series);
 
@@ -79,8 +76,8 @@ export class RootHeat implements Component {
                 title: { text: "TCP Round-Trip Time by Site" },
                 tooltip: {
                     show: false,
-                  },
-                grid: { height: '50%', top: '10%' },
+                },
+                grid: { height: '95%', top: '10%' },
                 xAxis: { type: 'category', data: x, splitArea: { show: true } },
                 yAxis: { type: 'category', data: categories, splitArea: { show: true } },
                 series: series,
@@ -92,11 +89,19 @@ export class RootHeat implements Component {
                     orient: 'horizontal',
                     left: 'center',
                     top: '2%',
-                    inRange : {   
-                        color: ['#009000', 'yellow', '#DD2000' ] //From smaller to bigger value ->
+                    inRange: {
+                        color: ['#009000', 'yellow', '#DD2000'] //From smaller to bigger value ->
                     }
-                  },
+                },
             };
+
+            if (this.myChart == null) {
+                let elements = categories.length;
+                let height = (elements * 20) + 50;
+                this.div.style.height = height + "px";
+                this.myChart = echarts.init(this.div);
+            }
+
             this.myChart.setOption(option);
         }
     }

src/rust/long_term_stats/site_build/src/components/site_heat.ts

@@ -4,15 +4,13 @@ import { request_site_heat } from "../../wasm/wasm_pipe";
 
 export class SiteHeat implements Component {
     div: HTMLElement;
-    myChart: echarts.ECharts;
+    myChart: echarts.ECharts | null = null;
     counter: number = 0;
     siteId: string;
 
     constructor(siteId: string) {
         this.siteId = decodeURI(siteId);
         this.div = document.getElementById("rootHeat") as HTMLElement;
-        this.myChart = echarts.init(this.div);
-        this.myChart.showLoading();
     }
 
     wireup(): void {
@@ -29,7 +27,6 @@ export class SiteHeat implements Component {
 
     onmessage(event: any): void {
         if (event.msg == "SiteHeat") {
-            this.myChart.hideLoading();
 
             let categories: string[] = [];
             let x: string[] = [];
@@ -101,6 +98,14 @@ export class SiteHeat implements Component {
                     }
                   },
             };
+
+            if (this.myChart == null) {
+                let elements = categories.length;
+                let height = (elements * 20) + 250;
+                this.div.style.height = height + "px";
+                this.myChart = echarts.init(this.div);
+            }
+
             this.myChart.setOption(option);
         }
     }

src/rust/long_term_stats/site_build/src/dashboard/template.html

@@ -48,7 +48,7 @@
         <div class="col-12">
             <div class="card">
                 <div class="card-body">
-                    <div id="siteStack" style="height: 900px"></div>
+                    <div id="siteStack" style="height: 250px"></div>
                 </div>
             </div>
         </div>
@@ -58,7 +58,7 @@
         <div class="col-12">
             <div class="card">
                 <div class="card-body">
-                    <div id="rootHeat" style="height: 900px"></div>
+                    <div id="rootHeat"></div>
                 </div>
             </div>
         </div>

src/rust/long_term_stats/site_build/src/site/template.html

@@ -42,7 +42,7 @@
         <div class="col-12">
             <div class="card">
                 <div class="card-body">
-                    <div id="siteStack" style="height: 900px"></div>
+                    <div id="siteStack" style="height: 250px"></div>
                 </div>
             </div>
         </div>

src/rust/long_term_stats/wasm_pipe_types/src/lib.rs

@@ -91,6 +91,12 @@ pub struct ThroughputHost {
     pub up: Vec<Throughput>,
 }
 
+impl ThroughputHost {
+    pub fn total(&self) -> f64 {
+        self.down.iter().map(|x| x.value).sum::<f64>() + self.up.iter().map(|x| x.value).sum::<f64>()
+    }
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Throughput {
     pub value: f64,

src/rust/lqos_queue_tracker/src/queue_structure/queue_node.rs

@@ -220,7 +220,7 @@ impl QueueNode {
               log::warn!("{:?}", value);
             }
           }
-          "idForCircuitsWithoutParentNodes" => {
+          "idForCircuitsWithoutParentNodes" | "type" => {
             // Ignore
           }
           _ => log::error!("I don't know how to parse key: [{key}]"),

src/rust/lqosd/src/throughput_tracker/mod.rs

@@ -50,9 +50,10 @@ async fn throughput_task(interval_ms: u64, long_term_stats_tx: Sender<StatsUpdat
         TIME_TO_POLL_HOSTS.store(duration_ms as u64, std::sync::atomic::Ordering::Relaxed);
         submit_throughput_stats(long_term_stats_tx.clone()).await;
 
-        let sleep_duration = Duration::from_millis(interval_ms) - start.elapsed();
-        if sleep_duration.as_millis() > 0 {
-            tokio::time::sleep(sleep_duration).await;
+        let elapsed = start.elapsed();
+        if elapsed.as_secs_f32() < 1.0 {
+          let sleep_duration = Duration::from_millis(interval_ms) - start.elapsed();
+          tokio::time::sleep(sleep_duration).await;
         }
     }
 }