Add server-side metrics ring buffer, seed dashboard charts from server history

Background task samples system (CPU/RAM/GPU) and per-target (FPS/timing) metrics
every 1s into a 120-sample ring buffer (~2 min). New API endpoint
GET /system/metrics-history returns the buffer. Dashboard charts now seed from
server history on load instead of sessionStorage, surviving page refreshes.

Also removes emoji from brightness source labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/features/dashboard.js

@@ -10,10 +10,9 @@ import { renderPerfSection, initPerfCharts, startPerfPolling, stopPerfPolling }
 import { startAutoRefresh } from './tabs.js';
 
 const DASHBOARD_COLLAPSED_KEY = 'dashboard_collapsed';
-const FPS_HISTORY_KEY = 'dashboard_fps_history';
-const MAX_FPS_SAMPLES = 30;
+const MAX_FPS_SAMPLES = 120;
 
-let _fpsHistory = _loadFpsHistory();   // { targetId: number[] }
+let _fpsHistory = {};                  // { targetId: number[] }
 let _fpsCharts = {};                   // { targetId: Chart }
 let _lastRunningIds = [];              // sorted target IDs from previous render
 let _uptimeBase = {};                  // { targetId: { seconds, timestamp } }
@@ -21,19 +20,6 @@ let _uptimeTimer = null;
 let _uptimeElements = {};              // { targetId: HTMLElement } — cached DOM refs
 let _metricsElements = new Map();
 
-function _loadFpsHistory() {
-    try {
-        const raw = sessionStorage.getItem(FPS_HISTORY_KEY);
-        if (raw) return JSON.parse(raw);
-    } catch {}
-    return {};
-}
-
-function _saveFpsHistory() {
-    try { sessionStorage.setItem(FPS_HISTORY_KEY, JSON.stringify(_fpsHistory)); }
-    catch {}
-}
-
 function _pushFps(targetId, value) {
     if (!_fpsHistory[targetId]) _fpsHistory[targetId] = [];
     _fpsHistory[targetId].push(value);
@@ -120,8 +106,26 @@ function _createFpsChart(canvasId, history, fpsTarget) {
     });
 }
 
-function _initFpsCharts(runningTargetIds) {
+async function _initFpsCharts(runningTargetIds) {
     _destroyFpsCharts();
+
+    // Seed FPS history from server ring buffer on first load
+    if (Object.keys(_fpsHistory).length === 0 && runningTargetIds.length > 0) {
+        try {
+            const resp = await fetch(`${API_BASE}/system/metrics-history`, { headers: getHeaders() });
+            if (resp.ok) {
+                const data = await resp.json();
+                const serverTargets = data.targets || {};
+                for (const id of runningTargetIds) {
+                    const samples = serverTargets[id] || [];
+                    _fpsHistory[id] = samples.map(s => s.fps).filter(v => v != null);
+                }
+            }
+        } catch {
+            // Silently ignore — charts will fill from polling
+        }
+    }
+
     // Clean up history for targets that are no longer running
     for (const id of Object.keys(_fpsHistory)) {
         if (!runningTargetIds.includes(id)) delete _fpsHistory[id];
@@ -133,7 +137,7 @@ function _initFpsCharts(runningTargetIds) {
         const fpsTarget = parseFloat(canvas.dataset.fpsTarget) || 30;
         _fpsCharts[id] = _createFpsChart(`dashboard-fps-${id}`, history, fpsTarget);
     }
-    _saveFpsHistory();
+
     _cacheMetricsElements(runningTargetIds);
 }
 
@@ -194,7 +198,7 @@ function _updateRunningMetrics(enrichedRunning) {
             }
         }
     }
-    _saveFpsHistory();
+
 }
 
 function _updateProfilesInPlace(profiles) {
@@ -412,7 +416,7 @@ export async function loadDashboard(forceFullRender = false) {
                 ${_sectionContent('perf', renderPerfSection())}
             </div>
             <div class="dashboard-dynamic">${dynamicHtml}</div>`;
-            initPerfCharts();
+            await initPerfCharts();
         } else {
             const dynamic = container.querySelector('.dashboard-dynamic');
             if (dynamic.innerHTML !== dynamicHtml) {
@@ -421,7 +425,7 @@ export async function loadDashboard(forceFullRender = false) {
         }
         _lastRunningIds = runningIds;
         _cacheUptimeElements();
-        _initFpsCharts(runningIds);
+        await _initFpsCharts(runningIds);
         _startUptimeTimer();
         startPerfPolling();
 

server/src/wled_controller/static/js/features/perf-charts.js

@@ -1,35 +1,19 @@
 /**
  * Performance charts — real-time CPU, RAM, GPU usage with Chart.js.
+ * History is seeded from the server-side ring buffer on init.
  */
 
 import { API_BASE, getHeaders } from '../core/api.js';
 import { t } from '../core/i18n.js';
 import { dashboardPollInterval } from '../core/state.js';
 
-const MAX_SAMPLES = 60;
-const STORAGE_KEY = 'perf_history';
+const MAX_SAMPLES = 120;
 
 let _pollTimer = null;
 let _charts = {};     // { cpu: Chart, ram: Chart, gpu: Chart }
-let _history = _loadHistory();
+let _history = { cpu: [], ram: [], gpu: [] };
 let _hasGpu = null;   // null = unknown, true/false after first fetch
 
-function _loadHistory() {
-    try {
-        const raw = sessionStorage.getItem(STORAGE_KEY);
-        if (raw) {
-            const parsed = JSON.parse(raw);
-            if (parsed.cpu && parsed.ram && parsed.gpu) return parsed;
-        }
-    } catch {}
-    return { cpu: [], ram: [], gpu: [] };
-}
-
-function _saveHistory() {
-    try { sessionStorage.setItem(STORAGE_KEY, JSON.stringify(_history)); }
-    catch {}
-}
-
 /** Returns the static HTML for the perf section (canvas placeholders). */
 export function renderPerfSection() {
     return `<div class="perf-charts-grid">
@@ -88,20 +72,41 @@ function _createChart(canvasId, color, fillColor) {
     });
 }
 
+/** Seed charts from server-side metrics history. */
+async function _seedFromServer() {
+    try {
+        const resp = await fetch(`${API_BASE}/system/metrics-history`, { headers: getHeaders() });
+        if (!resp.ok) return;
+        const data = await resp.json();
+        const samples = data.system || [];
+        _history.cpu = samples.map(s => s.cpu).filter(v => v != null);
+        _history.ram = samples.map(s => s.ram_pct).filter(v => v != null);
+        _history.gpu = samples.map(s => s.gpu_util).filter(v => v != null);
+
+        // Detect GPU availability from history
+        if (_history.gpu.length > 0) {
+            _hasGpu = true;
+        }
+
+        for (const key of ['cpu', 'ram', 'gpu']) {
+            if (_charts[key] && _history[key].length > 0) {
+                _charts[key].data.datasets[0].data = [..._history[key]];
+                _charts[key].data.labels = _history[key].map(() => '');
+                _charts[key].update();
+            }
+        }
+    } catch {
+        // Silently ignore — charts will fill from polling
+    }
+}
+
 /** Initialize Chart.js instances on the already-mounted canvases. */
-export function initPerfCharts() {
+export async function initPerfCharts() {
     _destroyCharts();
     _charts.cpu = _createChart('perf-chart-cpu', '#2196F3', 'rgba(33,150,243,0.15)');
     _charts.ram = _createChart('perf-chart-ram', '#4CAF50', 'rgba(76,175,80,0.15)');
     _charts.gpu = _createChart('perf-chart-gpu', '#FF9800', 'rgba(255,152,0,0.15)');
-    // Restore any existing history data into the freshly created charts
-    for (const key of ['cpu', 'ram', 'gpu']) {
-        if (_charts[key] && _history[key].length > 0) {
-            _charts[key].data.datasets[0].data = [..._history[key]];
-            _charts[key].data.labels = _history[key].map(() => '');
-            _charts[key].update();
-        }
-    }
+    await _seedFromServer();
 }
 
 function _destroyCharts() {
@@ -158,8 +163,6 @@ async function _fetchPerformance() {
                 card.appendChild(noGpu);
             }
         }
-
-        _saveHistory();
     } catch {
         // Silently ignore fetch errors (e.g., network issues, tab hidden)
     }
@@ -176,5 +179,4 @@ export function stopPerfPolling() {
         clearInterval(_pollTimer);
         _pollTimer = null;
     }
-    _saveHistory();
 }