add WireGuard status caching settings and update related configurations

.env.example

@@ -6,6 +6,16 @@ DEBUG_MODE=False
 # Choose a timezone from https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 TIMEZONE=America/Sao_Paulo
 
+# WireGuard status caching settings
+# This improves performance by reducing the number of calls to `wg` command and storing recent results.
+# WIREGUARD_STATUS_CACHE_ENABLED=True
+#
+# How many cached WireGuard status snapshots should be preloaded on page load.
+# This allows traffic charts to be displayed already populated instead of starting empty.
+# Lower this value if the initial peer list feels slow.
+# 0 = disable preload, 9 = fully prefill traffic charts.#
+# WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT=9
+
 # If you need additional hosts to be allowed, you can specify them here.
 # The SERVER_ADDRESS will always be allowed.
 # Example: EXTRA_ALLOWED_HOSTS=app1.example.com,app2.example.com:8443,app3.example.com

docker-compose-no-nginx-dev.yml

@@ -12,6 +12,8 @@ services:
       - COMPOSE_VERSION=03r
       - TZ=${TIMEZONE}
       - EXTRA_ALLOWED_HOSTS=${EXTRA_ALLOWED_HOSTS}
+      - WIREGUARD_STATUS_CACHE_ENABLED=${WIREGUARD_STATUS_CACHE_ENABLED}
+      - WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT=${WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT}
     volumes:
       - wireguard:/etc/wireguard
       - static_volume:/app_static_files/

docker-compose-no-nginx.yml

@@ -10,6 +10,8 @@ services:
       - COMPOSE_VERSION=03r
       - TZ=${TIMEZONE}
       - EXTRA_ALLOWED_HOSTS=${EXTRA_ALLOWED_HOSTS}
+      - WIREGUARD_STATUS_CACHE_ENABLED=${WIREGUARD_STATUS_CACHE_ENABLED}
+      - WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT=${WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT}
     volumes:
       - wireguard:/etc/wireguard
       - static_volume:/app_static_files/

docker-compose.yml

@@ -10,6 +10,8 @@ services:
       - COMPOSE_VERSION=03r
       - TZ=${TIMEZONE}
       - EXTRA_ALLOWED_HOSTS=${EXTRA_ALLOWED_HOSTS}
+      - WIREGUARD_STATUS_CACHE_ENABLED=${WIREGUARD_STATUS_CACHE_ENABLED}
+      - WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT=${WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT}
     volumes:
       - wireguard:/etc/wireguard
       - static_volume:/app_static_files/

entrypoint.sh

@@ -39,10 +39,17 @@ CSRF_TRUSTED_ORIGINS = ['http://wireguard-webadmin', 'https://$SERVER_ADDRESS'${
 SECRET_KEY = '$(openssl rand -base64 32)'
 EOL
 
-if [ -n "$TZ" ]; then
+if [ -n "${TZ:-}" ]; then
-    echo "TIME_ZONE = '$TZ'" >> /app/wireguard_webadmin/production_settings.py
+    echo "TIME_ZONE = '${TZ}'" >> /app/wireguard_webadmin/production_settings.py
 fi
 
+if [[ "${WIREGUARD_STATUS_CACHE_ENABLED,,}" == "false" ]]; then
+    echo "WIREGUARD_STATUS_CACHE_ENABLED = False" >> /app/wireguard_webadmin/production_settings.py
+fi
+
+if [ -n "${WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT:-}" ]; then
+    echo "WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT = ${WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT}" >> /app/wireguard_webadmin/production_settings.py
+fi
 
 if [[ "${DEV_MODE,,}" != "true" ]]; then
     sed -i "/^    path('admin\/', admin.site.urls),/s/^    /    # /" /app/wireguard_webadmin/urls.py

templates/wireguard/wireguard_peer_list.html

@@ -379,6 +379,7 @@
     <script>
         var previousMeasurements = {};
         var toastShownThisCycle = false;
+        const LOAD_FROM_CACHE = {% if load_from_cache %}true{% else %}false{% endif %};
 
         const updateThroughput = (peerId, peerInfo) => {
             const throughputElement = document.getElementById(`peer-throughput-${peerId}`);
@@ -499,9 +500,16 @@
 
         // Fetch Wireguard status and update UI
         document.addEventListener('DOMContentLoaded', function() {
-            const fetchWireguardStatus = async () => {
+            const fetchWireguardStatus = async (cachePrevious = null) => {
                 try {
-                    const response = await fetch('/api/wireguard_status/');
+                    let url = '/api/wireguard_status/';
+
+                    // cachePrevious === 0 should behave like "normal"
+                    if (cachePrevious !== null && cachePrevious !== 0) {
+                        url += '?cache_previous=' + encodeURIComponent(cachePrevious);
+                    }
+
+                    const response = await fetch(url);
                     let data = await response.json();
 
                     // If latest-handshakes is 0, use the stored value
@@ -521,8 +529,22 @@
                 }
             };
 
-            fetchWireguardStatus();
+            const primeFromCache = async () => {
-            setInterval(fetchWireguardStatus, {{ refresh_interval }} * 1000);
+                for (let i = {{ cache_previous_count }}; i >= 0; i--) {
+                        await fetchWireguardStatus(i);
+                    }
+            };
+
+            (async () => {
+                if (LOAD_FROM_CACHE) {
+                    await primeFromCache();
+                } else {
+                    await fetchWireguardStatus();
+                }
+
+                setInterval(fetchWireguardStatus, {{ refresh_interval }} * 1000);
+            })();
+
         });
 
         const updateUI = (data) => {

wireguard_peer/views.py

@@ -52,6 +52,13 @@ def view_wireguard_peer_list(request):
     user_acl = get_object_or_404(UserAcl, user=request.user)
     wireguard_instances = user_allowed_instances(user_acl)
     refresh_interval = 120
+    if settings.WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT > 0:
+        load_from_cache = True
+        cache_previous_count = settings.WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT
+    else:
+        load_from_cache = False
+        cache_previous_count = 0
+
 
     if wireguard_instances:
         if request.GET.get('uuid'):
@@ -75,7 +82,13 @@ def view_wireguard_peer_list(request):
     if settings.WIREGUARD_STATUS_CACHE_ENABLED:
         refresh_interval = settings.WIREGUARD_STATUS_CACHE_REFRESH_INTERVAL
 
-    context = {'page_title': page_title, 'wireguard_instances': wireguard_instances, 'current_instance': current_instance, 'peer_list': peer_list, 'add_peer_enabled': add_peer_enabled, 'user_acl': user_acl, 'refresh_interval': refresh_interval}
+    context = {
+        'page_title': page_title, 'wireguard_instances': wireguard_instances,
+        'current_instance': current_instance, 'peer_list': peer_list, 'add_peer_enabled': add_peer_enabled,
+        'user_acl': user_acl, 'refresh_interval': refresh_interval,
+        'load_from_cache': load_from_cache, 'cache_previous_count': cache_previous_count,
+    }
+
     return render(request, 'wireguard/wireguard_peer_list.html', context)
 
 

wireguard_webadmin/settings.py

@@ -158,7 +158,7 @@ STATICFILES_DIRS = [
 WIREGUARD_STATUS_CACHE_ENABLED = True
 WIREGUARD_STATUS_CACHE_MAX_AGE = 600
 WIREGUARD_STATUS_CACHE_REFRESH_INTERVAL = 60
-WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT = 10
+WIREGUARD_STATUS_CACHE_WEB_LOAD_PREVIOUS_COUNT = 9
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field