diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_dashlet.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_dashlet.js index e54e13e7..4b450259 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/base_dashlet.js +++ b/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 = ""; + tooltip.appendChild(button); + title.appendChild(tooltip); + } + div.appendChild(title); return div; diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/cpu_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/cpu_dash.js index 24af6130..66fd9fb4 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/cpu_dash.js +++ b/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 "
Percentage of CPU time spent on user processes, system processes, and idle time. This includes both LibreQoS and anything else running on the server.
"; + } + subscribeTo() { return [ "Cpu" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/endpoints_by_country.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/endpoints_by_country.js index 305f14a1..68e143f1 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/endpoints_by_country.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "EndpointsByCountry" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ether_protocols.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ether_protocols.js index 0f8daaf5..126b61a6 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ether_protocols.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "EtherProtocols" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ip_protocols.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ip_protocols.js index c8a46aaf..1acaa75d 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ip_protocols.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "IpProtocols" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/queue_stats_total.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/queue_stats_total.js index 71b2c8f3..1063ed57 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/queue_stats_total.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "QueueStatsTotal" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ram_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ram_dash.js index e229d2b7..8746bd51 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/ram_dash.js +++ b/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 "Percentage of RAM used and free. This includes both LibreQoS and anything else running on the server.
"; + } + subscribeTo() { return [ "Ram" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo3d_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo3d_dash.js index 912ee293..e56da28a 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo3d_dash.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "RttHistogram" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo_dash.js index a493408b..5ff2193f 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/rtt_histo_dash.js +++ b/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 "Round-Trip Time Histogram, showing the distribution of round-trip times for packets in real-time.
"; + } + subscribeTo() { return [ "RttHistogram" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/shaped_unshaped_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/shaped_unshaped_dash.js index 5cb1ac54..e4b0c2c1 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/shaped_unshaped_dash.js +++ b/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 "Shows the amount of traffic that is shaped and unshaped. Shaped traffic is limited by the configured bandwidth limits, while unshaped traffic is not.
"; + } + subscribeTo() { return [ "Throughput" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_bps_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_bps_dash.js index d6d657fa..2f691f97 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_bps_dash.js +++ b/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 "Shows the current throughput in bits per second. Traffic is divided between upload (from the ISP) and download (to the ISP) traffic.
"; + } + subscribeTo() { return [ "Throughput" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_pps_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_pps_dash.js index 4e22deb1..d5d6c7a8 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_pps_dash.js +++ b/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 "Shows the current throughput in packets per second. Traffic is divided between upload (from the ISP) and download (to the ISP) traffic.
"; + } + subscribeTo() { return [ "Throughput" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_ring_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_ring_dash.js index c1ea63ca..d50de220 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/throughput_ring_dash.js +++ b/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 "Shaped (AQM controlled and limited) and Unshaped (not found in your Shaped Devices file) traffic over the last five minutes.
" + } + subscribeTo() { return [ "Throughput" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js index 89c50f4b..d876be6d 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10_downloaders.js +++ b/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 "Top 10 Downloaders by bits per second, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.
"; + } + subscribeTo() { return [ "TopDownloads" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_bytes.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_bytes.js index 4e13d7f5..a76fc9af 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_bytes.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "TopFlowsBytes" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_rate.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_rate.js index 70b9d1ae..0260e56d 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top10flows_rate.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "TopFlowsRate" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top_tree_summary.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top_tree_summary.js index cf042db1..5b29123a 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/top_tree_summary.js +++ b/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 "Summary of the top-level network tree, including branch name, download and upload rates, TCP retransmits, Cake marks, and Cake drops.
"; + } + subscribeTo() { return [ "TreeSummary" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/tracked_flow_count_dash.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/tracked_flow_count_dash.js index 18fa22a2..457aea4c 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/tracked_flow_count_dash.js +++ b/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 "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.
"; + } + subscribeTo() { return [ "FlowCount" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_downloaders.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_downloaders.js index e1c659f6..23eab90b 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_downloaders.js +++ b/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 "Worst 10 Downloaders by round-trip time, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.
"; + } + subscribeTo() { return [ "WorstRTT" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.js b/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.js index a6070d91..ad260adc 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/dashlets/worst10_retransmits.js +++ b/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 "Worst 10 Downloaders by TCP retransmits, including IP address, download and upload rates, round-trip time, TCP retransmits, and shaping plan.
"; + } + subscribeTo() { return [ "WorstRetransmits" ]; } diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/flows_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/flows_graph.js index 5181961e..b1eb7ecf 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/flows_graph.js +++ b/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', diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/packets_bar.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/packets_bar.js index 36cf57df..01aab8e4 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/packets_bar.js +++ b/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); } } \ No newline at end of file diff --git a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js b/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js index 03285590..ee39ec64 100644 --- a/src/rust/lqosd/src/node_manager/js_build/src/graphs/queue_stats_total_graph.js +++ b/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: {