Visual pass: add tooltips support for dashlets, and add initial tooltips for each item. Make a few colour and symbol tweaks on graphs.

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

@@ -28,6 +28,10 @@ export class BaseDashlet {
         return "Someone forgot to set a title";
     }
 
+    tooltip() {
+        return null;
+    }
+
     subscribeTo() {
         return [];
     }
@@ -41,6 +45,12 @@ export class BaseDashlet {
             this.setup(msg);
         }
         this.setupDone = true;
+
+        // Tooltips everywhere!
+        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+            return new bootstrap.Tooltip(tooltipTriggerEl)
+        })
     }
 
     setup() {}
@@ -69,6 +79,22 @@ export class BaseDashlet {
         title.classList.add("dashbox-title");
         title.innerText = this.title();
 
+        let tt = this.tooltip();
+        if (tt !== null) {
+            let tooltip = document.createElement("span");
+            tooltip.style.marginLeft = "5px";
+            let button = document.createElement("a");
+            //button.type = "button";
+            //button.classList.add("btn", "btn-sm", "btn-info");
+            button.title = tt;
+            button.setAttribute("data-bs-toggle", "tooltip");
+            button.setAttribute("data-bs-placement", "top");
+            button.setAttribute("data-bs-html", "true");
+            button.innerHTML = "<i class='fas fa-info-circle'></i>";
+            tooltip.appendChild(button);
+            title.appendChild(tooltip);
+        }
+
         div.appendChild(title);
 
         return div;

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

@@ -10,6 +10,10 @@ export class CpuDash extends BaseDashlet{
         return "CPU Utilization";
     }
 
+    tooltip() {
+        return "<h5>CPU Utilization</h5><p>Percentage of CPU time spent on user processes, system processes, and idle time. This includes both LibreQoS and anything else running on the server.</p>";
+    }
+
     subscribeTo() {
         return [ "Cpu" ];
     }

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

@@ -11,6 +11,10 @@ export class Top10EndpointsByCountry extends BaseDashlet {
         return "Endpoints by Country";
     }
 
+    tooltip() {
+        return "<h5>Endpoints by Country</h5><p>Top 10 endpoints by country/region, ordered by download speed. This data is gathered from recently completed flows, and may be a little behind realtime.</p>";
+    }
+
     subscribeTo() {
         return [ "EndpointsByCountry" ];
     }

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";
     }
 
+    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>";
+    }
+
     subscribeTo() {
         return [ "EtherProtocols" ];
     }

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";
     }
 
+    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>";
+    }
+
     subscribeTo() {
         return [ "IpProtocols" ];
     }

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

@@ -12,6 +12,10 @@ export class QueueStatsTotalDash extends BaseDashlet {
         return "Cake Stats (Total)";
     }
 
+    tooltip() {
+        return "<h5>Cake Stats (Total)</h5><p>Total number of fair queueing interventions per second. ECN Marks label packets as having possible congestion, signalling the flow to slow down. Drops discard selected packets to \"pace\" the queue for efficient, fair, low-latency throughput.</p>";
+    }
+
     subscribeTo() {
         return [ "QueueStatsTotal" ];
     }

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

@@ -11,6 +11,10 @@ export class RamDash extends BaseDashlet{
         return "RAM Utilization";
     }
 
+    tooltip() {
+        return "<h5>RAM Utilization</h5><p>Percentage of RAM used and free. This includes both LibreQoS and anything else running on the server.</p>";
+    }
+
     subscribeTo() {
         return [ "Ram" ];
     }

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

@@ -10,6 +10,10 @@ export class RttHisto3dDash extends BaseDashlet{
         return "Round-Trip Time Histogram 3D";
     }
 
+    tooltip() {
+        return "<h5>Round-Trip Time Histogram 3D</h5><p>Round-Trip Time Histogram, expanded to include time as a third dimension. This can be helpful for seeing how your performance is changing over time.</p>";
+    }
+
     subscribeTo() {
         return [ "RttHistogram" ];
     }

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

@@ -10,6 +10,10 @@ export class RttHistoDash extends BaseDashlet{
         return "Round-Trip Time Histogram";
     }
 
+    tooltip() {
+        return "<h5>Round-Trip Time Histogram</h5><p>Round-Trip Time Histogram, showing the distribution of round-trip times for packets in real-time.</p>";
+    }
+
     subscribeTo() {
         return [ "RttHistogram" ];
     }

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

@@ -6,6 +6,10 @@ export class ShapedUnshapedDash extends BaseDashlet{
         return "Shaped/Unshaped Traffic";
     }
 
+    tooltip() {
+        return "<h5>Shaped/Unshaped Traffic</h5><p>Shows the amount of traffic that is shaped and unshaped. Shaped traffic is limited by the configured bandwidth limits, while unshaped traffic is not.</p>";
+    }
+
     subscribeTo() {
         return [ "Throughput" ];
     }

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

@@ -6,6 +6,10 @@ export class ThroughputBpsDash extends BaseDashlet{
         return "Throughput Bits/Second";
     }
 
+    tooltip() {
+        return "<h5>Throughput Bits/Second</h5><p>Shows the current throughput in bits per second. Traffic is divided between upload (from the ISP) and download (to the ISP) traffic.</p>";
+    }
+
     subscribeTo() {
         return [ "Throughput" ];
     }

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

@@ -6,6 +6,10 @@ export class ThroughputPpsDash extends BaseDashlet{
         return "Throughput Packets/Second";
     }
 
+    tooltip() {
+        return "<h5>Throughput Packets/Second</h5><p>Shows the current throughput in packets per second. Traffic is divided between upload (from the ISP) and download (to the ISP) traffic.</p>";
+    }
+
     subscribeTo() {
         return [ "Throughput" ];
     }

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

@@ -10,6 +10,10 @@ export class ThroughputRingDash extends BaseDashlet{
         return "Last 5 Minutes Throughput";
     }
 
+    tooltip() {
+        return "<h5>Last 5 Minutes Throughput</h5><p>Shaped (AQM controlled and limited) and Unshaped (not found in your Shaped Devices file) traffic over the last five minutes.</p>"
+    }
+
     subscribeTo() {
         return [ "Throughput" ];
     }

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

@@ -13,6 +13,10 @@ export class Top10Downloaders extends BaseDashlet {
         return "Top 10 Downloaders";
     }
 
+    tooltip() {
+        return "<h5>Top 10 Downloaders</h5><p>Top 10 Downloaders by bits per second, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.</p>";
+    }
+
     subscribeTo() {
         return [ "TopDownloads" ];
     }

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

@@ -11,6 +11,10 @@ export class Top10FlowsBytes extends BaseDashlet {
         return "Top 10 Flows (by total bytes)";
     }
 
+    tooltip() {
+        return "<h5>Top 10 Flows (by total bytes)</h5><p>Top 10 Flows by total bytes, including protocol, local and remote IP addresses, download and upload rates, total bytes, round-trip time, TCP retransmits, remote ASN, and country.</p>";
+    }
+
     subscribeTo() {
         return [ "TopFlowsBytes" ];
     }

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

@@ -11,6 +11,10 @@ export class Top10FlowsRate extends BaseDashlet {
         return "Top 10 Flows (by rate)";
     }
 
+    tooltip() {
+        return "<h5>Top 10 Flows (by rate)</h5><p>Top 10 Flows by rate, including protocol, local and remote IP addresses, download and upload rates, total bytes, round-trip time, TCP retransmits, remote ASN, and country.</p>";
+    }
+
     subscribeTo() {
         return [ "TopFlowsRate" ];
     }

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

@@ -11,6 +11,10 @@ export class TopTreeSummary extends BaseDashlet {
         return "Network Tree";
     }
 
+    tooltip() {
+        return "<h5>Network Tree</h5><p>Summary of the top-level network tree, including branch name, download and upload rates, TCP retransmits, Cake marks, and Cake drops.</p>";
+    }
+
     subscribeTo() {
         return [ "TreeSummary" ];
     }

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

@@ -6,6 +6,10 @@ export class TrackedFlowsCount extends BaseDashlet{
         return "Tracked Flows";
     }
 
+    tooltip() {
+        return "<h5>Tracked Flows</h5><p>Number of flows tracked by LibreQoS. Flows are either a TCP connection, or a UDP/ICMP connection with matching endpoints and port/request type numbers.</p>";
+    }
+
     subscribeTo() {
         return [ "FlowCount" ];
     }

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

@@ -13,6 +13,10 @@ export class Worst10Downloaders extends BaseDashlet {
         return "Worst 10 Round-Trip Time";
     }
 
+    tooltip() {
+        return "<h5>Worst 10 Round-Trip Time</h5><p>Worst 10 Downloaders by round-trip time, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.</p>";
+    }
+
     subscribeTo() {
         return [ "WorstRTT" ];
     }

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

@@ -13,6 +13,10 @@ export class Worst10Retransmits extends BaseDashlet {
         return "Worst 10 TCP Re-transmits";
     }
 
+    tooltip() {
+        return "<h5>Worst 10 TCP Re-transmits</h5><p>Worst 10 Downloaders by TCP retransmits, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.</p>";
+    }
+
     subscribeTo() {
         return [ "WorstRetransmits" ];
     }

src/rust/lqosd/src/node_manager/js_build/src/graphs/flows_graph.js

@@ -30,6 +30,10 @@ export class FlowCountGraph extends DashboardGraph {
                 name: 'flows',
                 data: [],
                 type: 'line',
+                lineStyle: {
+                    color: 'orange',
+                },
+                symbol: 'none',
             },
             tooltip: {
                 trigger: 'item',

src/rust/lqosd/src/node_manager/js_build/src/graphs/packets_bar.js

@@ -13,12 +13,12 @@ export class PacketsPerSecondBar extends DashboardGraph {
             },
             yAxis: {
                 type: 'category',
-                data: ['Up', 'Down'],
+                data: ['UP', 'DN'],
             },
             series: [
                 {
                     type: 'bar',
-                    data: [0, 0]
+                    data: [0, 0],
                 }
             ]
         }
@@ -27,7 +27,10 @@ export class PacketsPerSecondBar extends DashboardGraph {
 
     update(down, up) {
         this.chart.hideLoading();
-        this.option.series[0].data = [up, down];
+        this.option.series[0].data = [
+            { value: up, itemStyle: { color: 'orange' } },
+            { value: down, itemStyle: { color: 'green' } }
+        ];
         this.chart.setOption(this.option);
     }
 }

src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js

@@ -56,24 +56,28 @@ export class QueueStatsTotalGraph extends DashboardGraph {
                     data: [],
                     type: 'line',
                     lineStyle: { color: "green" },
+                    symbol: 'none',
                 },
                 {
                     name: 'ECN Marks Up',
                     data: [],
                     type: 'line',
                     lineStyle: { color: "green" },
+                    symbol: 'none',
                 },
                 {
                     name: 'Cake Drops',
                     data: [],
                     type: 'line',
                     lineStyle: { color: "orange" },
+                    symbol: 'none',
                 },
                 {
                     name: 'Cake Drops Up',
                     data: [],
                     type: 'line',
                     lineStyle: { color: "orange" },
+                    symbol: 'none',
                 },
             ],
             tooltip: {