Combined dashlets are working. You can stack non-graph type dashlets on top of one another. Graph types will come shortly.

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

@@ -4,9 +4,11 @@ export class BaseCombinedDashlet extends BaseDashlet {
     constructor(slotNumber, dashlets) {
         super(slotNumber)
 
+        this.selectedIndex = 0;
         this.dashlets = dashlets;
         this.titles = [];
         this.subsciptions = [];
+        this.divIds = [];
         dashlets.forEach((dash) => {
             this.titles.push(dash.title());
             this.subsciptions.push(dash.subscribeTo());
@@ -42,10 +44,21 @@ export class BaseCombinedDashlet extends BaseDashlet {
         let ul = document.createElement("ul");
         ul.classList.add("dropdown-menu");
 
+        let i =0;
         this.titles.forEach((t) => {
             let li1 = document.createElement("li");
-            li1.innerHTML = "<a class='dropdown-item'>" + t + "</a>";
+            let link = document.createElement("a");
+            link.classList.add("dropdown-item");
+            link.innerText = t;
+            let myI = i;
+            link.onclick = () => {
+                this.divIds.forEach((id) => { $("#" + id).hide() });
+                let divId = this.divIds[myI];
+                $("#" + divId).show();
+            }
+            li1.appendChild(link);
             ul.appendChild(li1);
+            i++;
         })
 
         dd.appendChild(ul);
@@ -60,9 +73,11 @@ export class BaseCombinedDashlet extends BaseDashlet {
     buildContainer() {
         let containers = [];
         let i = 0;
+        this.divIds = [];
         this.dashlets.forEach((d) => {
             d.size = 12;
             d.id = this.id + "___" + i;
+            this.divIds.push(this.id + "___" + i);
             let container = document.createElement("div");
             container.id = d.id;
             containers.push(container);
@@ -74,7 +89,9 @@ export class BaseCombinedDashlet extends BaseDashlet {
         let row = document.createElement("div");
         row.classList.add("row");
         containers.forEach((c) => {
-            c.style.backgroundColor = "rgba(1, 0, 0, 1)";
+            if (i > 0) {
+                c.style.display = "none";
+            }
             row.appendChild(c);
             i++;
         });

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

@@ -1,12 +1,20 @@
 import {BaseCombinedDashlet} from "./base_combined_dashlet";
 import {Top10Downloaders} from "./top10_downloaders";
 import {Top10FlowsRate} from "./top10flows_rate";
+import {Top10FlowsBytes} from "./top10flows_bytes";
+import {Top10EndpointsByCountry} from "./endpoints_by_country";
+import {IpProtocols} from "./ip_protocols";
+import {EtherProtocols} from "./ether_protocols";
 
 export class CombinedTopDashlet extends BaseCombinedDashlet {
     constructor(slot) {
         let dashlets = [
             new Top10Downloaders((slot * 1000) + 1),
             new Top10FlowsRate((slot * 1000) + 2),
+            new Top10FlowsBytes((slot * 1000) + 3),
+            new Top10EndpointsByCountry((slot * 1000) + 4),
+            new IpProtocols((slot * 1000) + 5),
+            new EtherProtocols((slot * 1000) + 6),
         ]
         super(slot, dashlets);
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {theading} from "../helpers/builders";
+import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class Top10EndpointsByCountry extends BaseDashlet {
@@ -70,9 +70,7 @@ export class Top10EndpointsByCountry extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {simpleRow, theading} from "../helpers/builders";
+import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class EtherProtocols extends BaseDashlet {
@@ -67,9 +67,7 @@ export class EtherProtocols extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {simpleRow, theading} from "../helpers/builders";
+import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class IpProtocols extends BaseDashlet {
@@ -55,9 +55,7 @@ export class IpProtocols extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -81,7 +81,7 @@ export class Top10Downloaders extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            clearDashDiv(this.id);
+            clearDashDiv(this.id, target);
             target.appendChild(t);
         }
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {theading} from "../helpers/builders";
+import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class Top10FlowsBytes extends BaseDashlet {
@@ -100,9 +100,7 @@ export class Top10FlowsBytes extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {theading} from "../helpers/builders";
+import {clearDashDiv, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class Top10FlowsRate extends BaseDashlet {
@@ -100,9 +100,7 @@ export class Top10FlowsRate extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -1,5 +1,5 @@
 import {BaseDashlet} from "./base_dashlet";
-import {simpleRow, theading} from "../helpers/builders";
+import {clearDashDiv, simpleRow, theading} from "../helpers/builders";
 import {scaleNumber, scaleNanos} from "../helpers/scaling";
 
 export class TopTreeSummary extends BaseDashlet {
@@ -52,9 +52,7 @@ export class TopTreeSummary extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_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 Worst10Downloaders extends BaseDashlet {
@@ -81,9 +81,7 @@ export class Worst10Downloaders extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.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 Worst10Retransmits extends BaseDashlet {
@@ -81,9 +81,7 @@ export class Worst10Retransmits extends BaseDashlet {
             t.appendChild(tbody);
 
             // Display it
-            while (target.children.length > 1) {
+            clearDashDiv(this.id, target);
-                target.removeChild(target.lastChild);
-            }
             target.appendChild(t);
         }
     }

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

@@ -16,7 +16,7 @@ export function simpleRow(text) {
     return td;
 }
 
-export function clearDashDiv(id) {
+export function clearDashDiv(id, target) {
     let limit = 1;
     if (id.includes("___")) limit = 0;
     while (target.children.length > limit) {