From 59539cf69689aa9728cef69413177cb28cf07b0c Mon Sep 17 00:00:00 2001
From: Eduardo Silva <eduardo@eth0.com.br>
Date: Wed, 26 Feb 2025 13:10:27 -0300
Subject: [PATCH] - Improved peer's throughput display format - Impreved text
 alignment of peer list on resize.

---
 templates/wireguard/wireguard_peer_list.html | 59 +++++++++++++++-----
 wireguard_webadmin/settings.py               |  2 +-
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/templates/wireguard/wireguard_peer_list.html b/templates/wireguard/wireguard_peer_list.html
index 3b13517..4588836 100644
--- a/templates/wireguard/wireguard_peer_list.html
+++ b/templates/wireguard/wireguard_peer_list.html
@@ -9,10 +9,10 @@
             padding: 0 !important;
         }
         @keyframes blink {
-          50% { opacity: 0; }
+            50% { opacity: 0; }
         }
         .blinking-icon {
-          animation: blink 1s step-start infinite;
+            animation: blink 1s step-start infinite;
         }
     </style>
 {% endblock %}
@@ -64,7 +64,6 @@
                                             <span class="peer-extra-info"><b>Transfer:</b> <span id="peer-transfer-{{ peer.public_key }}"></span><br></span>
                                             <span class="peer-extra-info"><b>Latest Handshake:</b> <span id="peer-latest-handshake-{{ peer.public_key }}"></span></span>
                                             <span class="peer-extra-info"><span style="display: none;" id="peer-stored-latest-handshake-{{ peer.public_key }}">{% if peer.peerstatus.last_handshake %}{{ peer.peerstatus.last_handshake|date:"U" }}{% else %}0{% endif %}</span><br></span>
-
                                             <span class="peer-extra-info"><b>Endpoints:</b> <span id="peer-endpoints-{{ peer.public_key }}"></span><br></span>
                                             <span class="peer-extra-info" id="peer-extra-info-allowed-ips-{{ peer.public_key }}">
                                             <b>Allowed IPs:</b>
@@ -331,11 +330,11 @@
                 const prev = previousMeasurements[peerId];
                 const timeDiff = currentTime - prev.timestamp; // time difference in seconds
 
-                // For peer perspective: download corresponds to tx and upload to rx
+                // For the peer: download corresponds to tx and upload to rx
                 let downloadDiff = peerInfo.transfer.tx - prev.transfer.tx;
                 let uploadDiff = peerInfo.transfer.rx - prev.transfer.rx;
 
-                // If counters have been reset (current < previous), show toast (only once per cycle)
+                // If counters have been reset (current value < previous), show a toast (only once per cycle)
                 if (downloadDiff < 0 || uploadDiff < 0) {
                     if (!toastShownThisCycle) {
                         $(document).Toasts('create', {
@@ -355,29 +354,59 @@
                 const downloadThroughput = downloadDiff / timeDiff;
                 const uploadThroughput = uploadDiff / timeDiff;
 
-                // Format throughput values (using convertBytes function)
-                let downloadDisplay = convertBytes(downloadThroughput) + '/s';
-                let uploadDisplay = convertBytes(uploadThroughput) + '/s';
-                // Threshold: 1mb (1 megabit/s = 125000 bytes per second)
-                const threshold = 125000;
+                // Convert bytes per second to bits per second
+                const downloadBps = downloadThroughput * 8;
+                const uploadBps = uploadThroughput * 8;
 
-                if (downloadThroughput > threshold) {
+                // Calculate Mbps and Kbps values
+                const downloadMbps = downloadBps / 1000000;
+                const uploadMbps = uploadBps / 1000000;
+                const downloadKbps = downloadBps / 1000;
+                const uploadKbps = uploadBps / 1000;
+
+                // Determine display unit and formatting
+                let downloadDisplay, uploadDisplay;
+                if (downloadMbps < 1) {
+                    // Below 1 Mbps, display in Kbps
+                    if (downloadKbps < 100) {
+                        downloadDisplay = downloadKbps.toFixed(2) + ' Kbps';
+                    } else {
+                        downloadDisplay = downloadKbps.toFixed(0) + ' Kbps';
+                    }
+                } else {
+                    // 1 Mbps and above: if above 10 Mbps, show no decimals; else, show 2 decimals
+                    downloadDisplay = (downloadMbps > 10 ? downloadMbps.toFixed(0) : downloadMbps.toFixed(2)) + ' Mbps';
+                }
+                if (uploadMbps < 1) {
+                    if (uploadKbps < 10) {
+                        uploadDisplay = uploadKbps.toFixed(2) + ' Kbps';
+                    } else {
+                        uploadDisplay = uploadKbps.toFixed(0) + ' Kbps';
+                    }
+                } else {
+                    uploadDisplay = (uploadMbps > 10 ? uploadMbps.toFixed(0) : uploadMbps.toFixed(2)) + ' Mbps';
+                }
+
+                // Highlight values above a threshold
+                const threshold = 100.0;
+                if (downloadMbps > threshold) {
                     downloadDisplay = `<strong>${downloadDisplay}</strong>`;
                 }
-                if (uploadThroughput > threshold) {
+                if (uploadMbps > threshold) {
                     uploadDisplay = `<strong>${uploadDisplay}</strong>`;
                 }
 
                 formattedThroughput = `<i class="fas fa-arrow-down"></i> ${downloadDisplay}, <i class="fas fa-arrow-up"></i> ${uploadDisplay}`;
                 throughputElement.innerHTML = formattedThroughput;
 
+                // Update Chart.js graphs with raw Mbps values (always using Mbps for consistency)
                 if (charts[peerId]) {
                     var chart = charts[peerId];
-                    chart.data.datasets[0].data.push(downloadThroughput);
+                    chart.data.datasets[0].data.push(downloadMbps);
                     if (chart.data.datasets[0].data.length > 10) {
                         chart.data.datasets[0].data.shift();
                     }
-                    chart.data.datasets[1].data.push(uploadThroughput);
+                    chart.data.datasets[1].data.push(uploadMbps);
                     if (chart.data.datasets[1].data.length > 10) {
                         chart.data.datasets[1].data.shift();
                     }
@@ -385,7 +414,7 @@
                 }
             } else {
                 // First cycle: no previous measurement available.
-                formattedThroughput = `<i class="fas fa-arrow-down"></i> -.- B/s, <i class="fas fa-arrow-up"></i> -.- B/s`;
+                formattedThroughput = `<i class="fas fa-arrow-down"></i> 0.00 Kbps, <i class="fas fa-arrow-up"></i> 0.00 Kbps`;
                 throughputElement.innerHTML = formattedThroughput;
             }
 
diff --git a/wireguard_webadmin/settings.py b/wireguard_webadmin/settings.py
index 32d4c16..f2280db 100644
--- a/wireguard_webadmin/settings.py
+++ b/wireguard_webadmin/settings.py
@@ -134,6 +134,6 @@ STATICFILES_DIRS = [
 DNS_CONFIG_FILE = '/etc/dnsmasq/wireguard_webadmin_dns.conf'
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-WIREGUARD_WEBADMIN_VERSION = 9955
+WIREGUARD_WEBADMIN_VERSION = 9956
 
 from wireguard_webadmin.production_settings import *