Update

includes/admin/admin-frontend/ui/stats.js

@@ -6,12 +6,26 @@ function getStatsMinutes() {
 
 function applyStatsSnapshot(payload) {
   if (!payload) return;
-  if (payload.stats && payload.historical) {
+  window.latestStatsSnapshot = payload;
+
+  if (payload.stats) {
     window.statsData = payload.stats;
+  }
+  if (payload.historical) {
     window.historicalData = payload.historical;
+  }
+
+  if (window.activeTab !== 'stats') {
+    return;
+  }
+
+  if (payload.stats && payload.historical) {
     updateStatsDisplay(payload.stats, payload.historical);
     initializeCharts(payload.stats, payload.historical);
+  } else if (payload.stats) {
+    updateStatsDisplay(payload.stats, window.historicalData || {});
   }
+
   if (payload.health && window.applyHealthPayload) {
     window.applyHealthPayload(payload.health);
   }
@@ -61,6 +75,11 @@ function getStatsRefreshIntervalMs() {
   return parseInt(document.getElementById('refresh-interval-selector')?.value || '5000', 10);
 }
 
+function shouldAutoRefreshStats() {
+  const el = document.getElementById('auto-refresh-stats');
+  return el ? el.checked : true;
+}
+
 function subscribeStatsWebSocket() {
   if (!window.ws || window.ws.readyState !== WebSocket.OPEN) return;
   window.ws.send(JSON.stringify({
@@ -83,15 +102,48 @@ function requestStatsSnapshotViaWebSocket() {
   }));
 }
 
-// Render stats - HTTP bootstrap then WebSocket refresh
+// Render stats - use cached snapshot when available, else HTTP bootstrap
 function renderStats() {
+  if (window.latestStatsSnapshot) {
+    applyStatsSnapshot(window.latestStatsSnapshot);
+    if (shouldAutoRefreshStats()) {
+      subscribeStatsWebSocket();
+    }
+    return;
+  }
   fetchStatsInitial().then((data) => {
     if (!data) return;
     applyStatsSnapshot(data);
-    subscribeStatsWebSocket();
+    if (shouldAutoRefreshStats()) {
+      subscribeStatsWebSocket();
+    }
   });
 }
 
+async function pollStatsViaHttp() {
+  if (window.wsConnected || window.activeTab !== 'stats' || !shouldAutoRefreshStats()) {
+    return;
+  }
+  const data = await fetchStatsInitial();
+  if (data) {
+    applyStatsSnapshot(data);
+  }
+}
+
+function startStatsPollingFallback() {
+  if (!shouldAutoRefreshStats()) return;
+  if (window.statsPollingInterval) return;
+  pollStatsViaHttp();
+  window.statsPollingInterval = setInterval(pollStatsViaHttp, getStatsRefreshIntervalMs());
+}
+
+function stopStatsPollingFallback() {
+  if (window.statsPollingInterval) {
+    clearInterval(window.statsPollingInterval);
+    window.statsPollingInterval = null;
+  }
+}
+
 // Render Plugin RPC stats (stats.peerChannels / stats.pluginRpc)
 function renderPluginRpcStats(peerChannels) {
   const totalPluginsEl = document.getElementById('peer-channels-total-plugins');
@@ -693,8 +745,8 @@ function updateStatsDisplay(stats, historical) {
     if (resourcesSockets) resourcesSockets.textContent = stats.resources.sockets || 0;
     if (resourcesServers) resourcesServers.textContent = stats.resources.servers || 0;
     if (resourcesHolesails) resourcesHolesails.textContent = stats.holesail?.activeConnections || 0;
-    const peerChannelsCount = stats.peers?.current || 0;
-    if (resourcesChannels) resourcesChannels.textContent = peerChannelsCount || 0;
+    const rpcOpen = stats.pluginRpc?.rpcOpen ?? stats.peerChannels?.rpcOpen ?? stats.peerChannels?.openChannels ?? 0;
+    if (resourcesChannels) resourcesChannels.textContent = rpcOpen;
   }
 
   // Core RPC
@@ -1180,24 +1232,21 @@ function initializeCharts(stats, historical) {
   
   // Process Usage Charts - always try to create/update even if data is limited
   if (historical && historical.process) {
-    // Calculate cutoff time for 15-second window (used for all Process Usage Statistics charts)
     const now = Date.now();
-    const fifteenSecondsAgo = now - (15 * 1000);
+    const rangeStart = now - getStatsMinutes() * 60 * 1000;
     
     // Memory Chart
     const memTimestamps = historical.process.memory?.timestamps || [];
     const memHeapUsed = historical.process.memory?.heapUsed || [];
     const memRSS = historical.process.memory?.rss || [];
     
-    // Filter to only last 15 seconds
     const memFilteredIndices = [];
     for (let i = 0; i < memTimestamps.length; i++) {
-      if (memTimestamps[i] >= fifteenSecondsAgo) {
+      if (memTimestamps[i] >= rangeStart) {
         memFilteredIndices.push(i);
       }
     }
     
-    // Ensure arrays are aligned and filter to last 15 seconds
     const minLength = Math.min(memTimestamps.length, memHeapUsed.length, memRSS.length);
     const memFilteredTimestamps = memFilteredIndices
       .filter(idx => idx < minLength)
@@ -1246,7 +1295,7 @@ function initializeCharts(stats, historical) {
     // Filter to only last 15 seconds
     const cpuFilteredIndices = [];
     for (let i = 0; i < cpuTimestamps.length; i++) {
-      if (cpuTimestamps[i] >= fifteenSecondsAgo) {
+      if (cpuTimestamps[i] >= rangeStart) {
         cpuFilteredIndices.push(i);
       }
     }
@@ -1302,7 +1351,7 @@ function initializeCharts(stats, historical) {
     // Filter to only last 15 seconds
     const sysFilteredIndices = [];
     for (let i = 0; i < sysTimestamps.length; i++) {
-      if (sysTimestamps[i] >= fifteenSecondsAgo) {
+      if (sysTimestamps[i] >= rangeStart) {
         sysFilteredIndices.push(i);
       }
     }
@@ -1378,7 +1427,7 @@ function initializeCharts(stats, historical) {
     // Filter to only last 15 seconds
     const loopFilteredIndices = [];
     for (let i = 0; i < loopTimestamps.length; i++) {
-      if (loopTimestamps[i] >= fifteenSecondsAgo) {
+      if (loopTimestamps[i] >= rangeStart) {
         loopFilteredIndices.push(i);
       }
     }
@@ -1449,29 +1498,29 @@ function initializeCharts(stats, historical) {
   }
 }
 
-// Start stats updates (WebSocket push; HTTP only if no data yet)
+// Start stats updates (WebSocket push with HTTP fallback when disconnected)
 function startStatsUpdates() {
-  const autoRefresh = document.getElementById('auto-refresh-stats');
-  if (!autoRefresh || !autoRefresh.checked) return;
+  if (!shouldAutoRefreshStats()) return;
 
-  stopStatsUpdates();
+  stopStatsPollingFallback();
 
-  if (!window.statsData) {
+  if (!window.statsData && window.latestStatsSnapshot) {
+    applyStatsSnapshot(window.latestStatsSnapshot);
+  } else if (!window.statsData) {
     fetchStatsInitial().then((data) => {
       if (data) applyStatsSnapshot(data);
-      subscribeStatsWebSocket();
     });
-  } else {
-    subscribeStatsWebSocket();
   }
+
+  subscribeStatsWebSocket();
+  startStatsPollingFallback();
 }
 
-// Stop stats updates
+// Stop live stats updates (polling only; keep WS subscription if auto-refresh stays on)
 function stopStatsUpdates() {
-  unsubscribeStatsWebSocket();
-  if (window.statsUpdateInterval) {
-    clearInterval(window.statsUpdateInterval);
-    window.statsUpdateInterval = null;
+  stopStatsPollingFallback();
+  if (!shouldAutoRefreshStats()) {
+    unsubscribeStatsWebSocket();
   }
 }
 
@@ -1519,5 +1568,8 @@ window.updateOrCreateChart = updateOrCreateChart;
 window.initializeCharts = initializeCharts;
 window.startStatsUpdates = startStatsUpdates;
 window.stopStatsUpdates = stopStatsUpdates;
+window.startStatsPollingFallback = startStatsPollingFallback;
+window.stopStatsPollingFallback = stopStatsPollingFallback;
+window.shouldAutoRefreshStats = shouldAutoRefreshStats;
 window.exportStats = exportStats;