Work in progress - working on getting combined dashlets to work

src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_combined_dashlet.js

@@ -0,0 +1,99 @@
+import {BaseDashlet} from "./base_dashlet";
+
+export class BaseCombinedDashlet extends BaseDashlet {
+    constructor(slotNumber, dashlets) {
+        super(slotNumber)
+
+        this.dashlets = dashlets;
+        this.titles = [];
+        this.subsciptions = [];
+        dashlets.forEach((dash) => {
+            this.titles.push(dash.title());
+            this.subsciptions.push(dash.subscribeTo());
+        });
+    }
+
+    subscribeTo() {
+        return this.subsciptions;
+    }
+
+    #base() {
+        let div = document.createElement("div");
+        div.id = this.id;
+        let sizeClasses = this.sizeClasses();
+        for (let i=0; i<sizeClasses.length; i++) {
+            div.classList.add(sizeClasses[i]);
+        }
+        div.classList.add("dashbox");
+
+        let title = document.createElement("h5");
+        title.classList.add("dashbox-title");
+        title.innerText = this.title();
+
+        // Dropdown
+        let dd = document.createElement("span");
+        dd.classList.add("dropdown");
+
+        let btn = document.createElement("button");
+        btn.classList.add("btn", "btn-secondary", "dropdown-toggle", "btn-sm");
+        btn.setAttribute("data-bs-toggle", "dropdown");
+        dd.appendChild(btn);
+
+        let ul = document.createElement("ul");
+        ul.classList.add("dropdown-menu");
+
+        this.titles.forEach((t) => {
+            let li1 = document.createElement("li");
+            li1.innerHTML = "<a class='dropdown-item'>" + t + "</a>";
+            ul.appendChild(li1);
+        })
+
+        dd.appendChild(ul);
+
+        title.appendChild(dd);
+
+        div.appendChild(title);
+
+        return div;
+    }
+
+    buildContainer() {
+        let containers = [];
+        let i = 0;
+        this.dashlets.forEach((d) => {
+            d.size = 12;
+            d.id = this.id + "___" + i;
+            let container = document.createElement("div");
+            container.id = d.id;
+            containers.push(container);
+            i++;
+        });
+
+        let base = this.#base();
+        i = 0;
+        let row = document.createElement("div");
+        row.classList.add("row");
+        containers.forEach((c) => {
+            c.style.backgroundColor = "rgba(1, 0, 0, 1)";
+            row.appendChild(c);
+            i++;
+        });
+        base.appendChild(row);
+
+        return base;
+    }
+
+    setup() {
+        super.setup();
+        this.dashlets.forEach((d) => {
+            d.size = this.size;
+            d.setup();
+        })
+    }
+
+    onMessage(msg) {
+        this.dashlets.forEach((d) => {
+            d.onMessage(msg);
+        })
+    }
+}

src/rust/lqosd/src/node_manager/js_build/src/dashlets/combined_top_dash.js

@@ -0,0 +1,17 @@
+import {BaseCombinedDashlet} from "./base_combined_dashlet";
+import {Top10Downloaders} from "./top10_downloaders";
+import {Top10FlowsRate} from "./top10flows_rate";
+
+export class CombinedTopDashlet extends BaseCombinedDashlet {
+    constructor(slot) {
+        let dashlets = [
+            new Top10Downloaders((slot * 1000) + 1),
+            new Top10FlowsRate((slot * 1000) + 2),
+        ]
+        super(slot, dashlets);
+    }
+
+    title() {
+        return "Top-10 Downloaders";
+    }
+}

src/rust/lqosd/src/node_manager/js_build/src/dashlets/dashlet_index.js

@@ -15,6 +15,7 @@ import {Worst10Retransmits} from "./worst10_retransmits";
 import {CpuDash} from "./cpu_dash";
 import {RamDash} from "./ram_dash";
 import {TopTreeSummary} from "./top_tree_summary";
+import {CombinedTopDashlet} from "./combined_top_dash";
 
 export const DashletMenu = [
     { name: "Throughput Bits/Second", tag: "throughputBps", size: 3 },
@@ -31,9 +32,10 @@ export const DashletMenu = [
     { name: "Top 10 Endpoints by Country", tag: "top10endpointsCountry", size: 6 },
     { name: "Ether Protocols", tag: "etherProtocols", size: 6 },
     { name: "IP Protocols", tag: "ipProtocols", size: 6 },
-    { name: "CPU Utilization", tag: "cpu", size: 6 },
-    { name: "RAM Utilization", tag: "ram", size: 6 },
+    { name: "CPU Utilization", tag: "cpu", size: 3 },
+    { name: "RAM Utilization", tag: "ram", size: 3 },
     { name: "Network Tree Summary", tag: "treeSummary", size: 6 },
+    { name: "Combined Top 10 Box", tag: "combinedTop10", size: 3 },
 ];
 
 export function widgetFactory(widgetName, count) {
@@ -56,6 +58,7 @@ export function widgetFactory(widgetName, count) {
         case "cpu"              : widget = new CpuDash(count); break;
         case "ram"              : widget = new RamDash(count); break;
         case "treeSummary"      : widget = new TopTreeSummary(count); break;
+        case "combinedTop10"    : widget = new CombinedTopDashlet(count); break;
         default: {
             console.log("I don't know how to construct a widget of type [" + widgetName + "]");
             return null;

src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js

@@ -1,6 +1,6 @@
 import {BaseDashlet} from "./base_dashlet";
 import {RttHistogram} from "../graphs/rtt_histo";
-import {theading} from "../helpers/builders";
+import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, rttCircleSpan} from "../helpers/scaling";
 
 export class Top10Downloaders extends BaseDashlet {
@@ -81,9 +81,7 @@ export class Top10Downloaders extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
-                target.removeChild(target.lastChild);
-            }
+            clearDashDiv(this.id);
             target.appendChild(t);
         }
     }

src/rust/lqosd/src/node_manager/js_build/src/helpers/builders.js

@@ -14,4 +14,12 @@ export function simpleRow(text) {
     let td = document.createElement("td");
     td.innerText = text;
     return td;
+}
+
+export function clearDashDiv(id) {
+    let limit = 1;
+    if (id.includes("___")) limit = 0;
+    while (target.children.length > limit) {
+        target.removeChild(target.lastChild);
+    }
 }