Preliminary dashlet pause and cadence selection.

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

@@ -8,6 +8,10 @@ export class BaseDashlet {
         this.setupDone = false;
     }
 
+    canBeSlowedDown() {
+        return false;
+    }
+
     sizeClasses() {
         switch (this.size) {
             case 1: return  ["col-xs-12", "col-sm-12", "col-md-6", "col-lg-3", "col-xl-1", "col-xxl-1"];

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

@@ -8,6 +8,10 @@ export class CircuitCapacityDash extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Circuits At Capacity";
     }

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

@@ -22,4 +22,8 @@ export class CombinedTopDashlet extends BaseCombinedDashlet {
     title() {
         return "Top-10 Downloaders";
     }
+
+    canBeSlowedDown() {
+        return true;
+    }
 }

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

@@ -15,6 +15,17 @@ export class Dashboard {
         this.dashletIdentities = this.layout.dashlets;
         this.dashlets = [];
         this.channels = [];
+        this.paused = false;
+
+        let cadence = localStorage.getItem("dashCadence");
+        if (cadence === null) {
+            this.cadence = 1;
+            localStorage.setItem("dashCadence", this.cadence.toString());
+        } else {
+            this.cadence = parseInt(cadence);
+        }
+        this.tickCounter = 0;
+
         this.#editButton();
         if (localStorage.getItem("forceEditMode")) {
             localStorage.removeItem("forceEditMode");
@@ -29,13 +40,7 @@ export class Dashboard {
     #editButton() {
         let editDiv = document.createElement("div");
         editDiv.id = this.divName + "_edit";
-        editDiv.style.position = "absolute";
-        editDiv.style.right = "5px";
-        editDiv.style.top = "5px";
-        editDiv.style.width = "40px";
-        editDiv.style.zIndex = "100";
-        editDiv.style.opacity = 0.5;
-        editDiv.innerHTML = "<button type='button' class='btn btn-primary btn-sm'><i class='fa fa-pencil'></i></button>";
+        editDiv.innerHTML = "<button type='button' class='btn btn-primary btn-sm' style='width: 100%'><i class='fa fa-pencil'></i> Edit Dashboard</button>";
         editDiv.onclick = () => {
             if (this.editingDashboard) {
                 this.closeEditMode();
@@ -43,7 +48,44 @@ export class Dashboard {
                 this.editMode();
             }
         };
-        this.parentDiv.appendChild(editDiv);
+        let parent = document.getElementById("controls");
+
+        // Cadence Picker
+        let cadenceDiv = document.createElement("div");
+        cadenceDiv.id = this.divName + "_cadence";
+        let cadenceLabel = document.createElement("label");
+        cadenceLabel.htmlFor = "cadencePicker";
+        cadenceLabel.innerText = "Update Cadence (Seconds): ";
+        let cadencePicker = document.createElement("input");
+        cadencePicker.id = "cadencePicker";
+        cadencePicker.type = "number";
+        cadencePicker.min = "1";
+        cadencePicker.max = "60";
+        cadencePicker.value = this.cadence;
+        cadencePicker.onchange = () => {
+            this.cadence = parseInt(cadencePicker.value);
+            localStorage.setItem("dashCadence", this.cadence.toString());
+        }
+        cadenceDiv.appendChild(cadenceLabel);
+        cadenceDiv.appendChild(cadencePicker);
+
+        // Pause Button
+        let pauseDiv = document.createElement("div");
+        pauseDiv.id = this.divName + "_pause";
+        pauseDiv.innerHTML = "<button type='button' class='btn btn-warning btn-sm' style='width: 100%'><i class='fa fa-pause'></i> Pause Updates</button>";
+        pauseDiv.onclick = () => {
+            this.paused = !this.paused;
+            let target = document.getElementById(this.divName + "_pause");
+            if (this.paused) {
+                target.innerHTML = "<button type='button' class='btn btn-success btn-sm' style='width: 100%'><i class='fa fa-play'></i> Resume Updates</button>";
+            } else {
+                target.innerHTML = "<button type='button' class='btn btn-warning btn-sm' style='width: 100%'><i class='fa fa-pause'></i> Pause Updates</button>";
+            }
+        };
+
+        parent.appendChild(editDiv);
+        parent.appendChild(pauseDiv);
+        parent.appendChild(cadenceDiv);
     }
 
     build() {
@@ -98,10 +140,16 @@ export class Dashboard {
                 }
             } else {
                 // Propagate the message
-                for (let i=0; i<this.dashlets.length; i++) {
+                if (!this.paused) {
+                    this.tickCounter++;
+                    this.tickCounter %= this.cadence;
+                    for (let i = 0; i < this.dashlets.length; i++) {
+                        if (this.tickCounter === 0 || !this.dashlets[i].canBeSlowedDown()) {
                             this.dashlets[i].onMessage(msg);
                         }
                     }
+                }
+            }
         });
     }
 

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

@@ -7,6 +7,10 @@ export class Top10EndpointsByCountry extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Endpoints by Country";
     }

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

@@ -11,6 +11,10 @@ export class EtherProtocols extends BaseDashlet {
         return "Ethernet Protocols";
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     tooltip() {
         return "<h5>Ethernet Protocols</h5><p>Bytes and packets transferred over IPv4 and IPv6, and the round-trip time for each.  This data is gathered from recently completed flows, and may be a little behind realtime.</p>";
     }

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

@@ -11,6 +11,10 @@ export class IpProtocols extends BaseDashlet {
         return "IP Protocols";
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     tooltip() {
         return "<h5>IP Protocols</h5><p>Bytes transferred over TCP/UDP/ICMP and port numbers, matched to common services when possible. This data is gathered from recently completed flows, and may be a little behind realtime.</p>";
     }

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

@@ -28,6 +28,10 @@ export class Top10Downloaders extends BaseDashlet {
         return base;
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     setup() {
         super.setup();
     }

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

@@ -9,6 +9,10 @@ export class Top10FlowsBytes extends BaseDashlet {
         this.rttCache = new RttCache();
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Top 10 Flows (by total bytes)";
     }

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

@@ -9,6 +9,10 @@ export class Top10FlowsRate extends BaseDashlet {
         this.rttCache = new RttCache();
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Top 10 Flows (by rate)";
     }

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

@@ -7,6 +7,10 @@ export class TopTreeSummary extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Network Tree";
     }

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

@@ -7,6 +7,10 @@ export class TreeCapacityDash extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Tree Nodes At Capacity";
     }

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

@@ -9,6 +9,10 @@ export class Worst10Downloaders extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Worst 10 Round-Trip Time";
     }

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

@@ -9,6 +9,10 @@ export class Worst10Retransmits extends BaseDashlet {
         super(slot);
     }
 
+    canBeSlowedDown() {
+        return true;
+    }
+
     title() {
         return "Worst 10 TCP Re-transmits";
     }

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

@@ -1,4 +1,7 @@
-<div id="toasts"></div>
+<div class="row">
+    <div id="toasts" class="col-10"></div>
+    <div id="controls" class="col-2"></div>
+</div>
 <div class="row" id="dashboard"></div>
 
 <script src="index.js"></script>