feat: add admin-only status page with cache stats

- New /api/dashboard/status endpoint (admin-only, 403 for non-admins) - Returns server info (uptime, Node version, memory usage) - Returns polling mode and interval - Returns cache stats: entry count, total size, per-key breakdown with item count, size in KB, and TTL remaining - Status button in admin controls header - Collapsible status panel with grid layout - Responsive: single column on mobile
2026-05-15 23:52:32 +01:00
parent e5b2fc8ea4
commit c03e4620ea
5 changed files with 280 additions and 0 deletions
--- a/public/app.js
+++ b/public/app.js
@@ -21,6 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('logout-btn').addEventListener('click', handleLogout);
  document.getElementById('refresh-rate').addEventListener('change', handleRefreshRateChange);
  document.getElementById('show-all-toggle').addEventListener('change', handleShowAllToggle);
+  document.getElementById('status-btn').addEventListener('click', toggleStatusPanel);
 });

 function initThemeSwitcher() {
@@ -568,6 +569,68 @@ function escapeHtml(str) {
  return div.innerHTML;
 }

+async function toggleStatusPanel() {
+  const panel = document.getElementById('status-panel');
+  if (panel.style.display !== 'none') {
+    panel.style.display = 'none';
+    return;
+  }
+  panel.style.display = 'block';
+  panel.innerHTML = '<p class="status-loading">Loading status…</p>';
+  try {
+    const res = await fetch('/api/dashboard/status');
+    if (!res.ok) throw new Error('Failed to fetch status');
+    const data = await res.json();
+    renderStatusPanel(data, panel);
+  } catch (err) {
+    panel.innerHTML = '<p class="status-error">Failed to load status.</p>';
+  }
+}
+
+function renderStatusPanel(data, panel) {
+  const s = data.server;
+  const hrs = Math.floor(s.uptimeSeconds / 3600);
+  const mins = Math.floor((s.uptimeSeconds % 3600) / 60);
+  const secs = s.uptimeSeconds % 60;
+  const uptime = `${hrs}h ${mins}m ${secs}s`;
+
+  const totalKB = (data.cache.totalSizeBytes / 1024).toFixed(1);
+
+  let html = `
+    <div class="status-header">
+      <h3>Server Status</h3>
+      <button class="status-close" onclick="document.getElementById('status-panel').style.display='none'">&times;</button>
+    </div>
+    <div class="status-grid">
+      <div class="status-card">
+        <div class="status-card-title">Server</div>
+        <div class="status-row"><span>Uptime</span><span>${uptime}</span></div>
+        <div class="status-row"><span>Node</span><span>${escapeHtml(s.nodeVersion)}</span></div>
+        <div class="status-row"><span>Memory (RSS)</span><span>${s.memoryUsageMB} MB</span></div>
+        <div class="status-row"><span>Heap</span><span>${s.heapUsedMB} / ${s.heapTotalMB} MB</span></div>
+      </div>
+      <div class="status-card">
+        <div class="status-card-title">Polling</div>
+        <div class="status-row"><span>Mode</span><span>${data.polling.enabled ? 'Background' : 'On-demand'}</span></div>
+        ${data.polling.enabled ? `<div class="status-row"><span>Interval</span><span>${data.polling.intervalMs / 1000}s</span></div>` : ''}
+      </div>
+      <div class="status-card status-card-wide">
+        <div class="status-card-title">Cache (${data.cache.entryCount} entries, ${totalKB} KB)</div>
+        <table class="status-table">
+          <thead><tr><th>Key</th><th>Items</th><th>Size</th><th>TTL</th></tr></thead>
+          <tbody>`;
+
+  for (const e of data.cache.entries) {
+    const sizeStr = e.sizeBytes > 1024 ? (e.sizeBytes / 1024).toFixed(1) + ' KB' : e.sizeBytes + ' B';
+    const ttlStr = e.expired ? '<span class="status-expired">expired</span>' : (e.ttlRemainingMs / 1000).toFixed(0) + 's';
+    const items = e.itemCount !== null ? e.itemCount : '—';
+    html += `<tr><td><code>${escapeHtml(e.key)}</code></td><td>${items}</td><td>${sizeStr}</td><td>${ttlStr}</td></tr>`;
+  }
+
+  html += `</tbody></table></div></div>`;
+  panel.innerHTML = html;
+}
+
 function formatSize(size) {
  if (!size) return 'N/A';
  // If already a formatted string (e.g., "21.5 GB"), return as-is
--- a/public/index.html
+++ b/public/index.html
@@ -57,6 +57,7 @@
                            <input type="checkbox" id="show-all-toggle">
                            <span>Show all users</span>
                        </label>
+                        <button id="status-btn" class="status-btn">Status</button>
                    </div>
                    <div class="user-info">
                        <span class="user-label">Current User:</span>
@@ -66,6 +67,8 @@
                </div>
            </header>

+            <div id="status-panel" class="status-panel" style="display: none;"></div>
+
            <div id="error-message" class="error-message" style="display: none;"></div>

            <div id="loading" class="loading" style="display: none;">Loading downloads...</div>
--- a/public/style.css
+++ b/public/style.css
@@ -731,6 +731,148 @@ body {
  margin-left: auto;
 }

+/* ===== Status Button ===== */
+.status-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: background 0.2s, color 0.2s;
+}
+
+.status-btn:hover {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
+
+/* ===== Status Panel ===== */
+.status-panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 4px var(--shadow);
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.status-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.1rem;
+}
+
+.status-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.status-close:hover {
+  color: var(--text-primary);
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.status-card {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.status-card-wide {
+  grid-column: 1 / -1;
+}
+
+.status-card-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--text-primary);
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 3px 0;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.status-row span:last-child {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.status-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.78rem;
+}
+
+.status-table th {
+  text-align: left;
+  padding: 4px 8px;
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  border-bottom: 1px solid var(--border);
+}
+
+.status-table td {
+  padding: 5px 8px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border);
+}
+
+.status-table code {
+  font-size: 0.75rem;
+  background: var(--surface);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.status-expired {
+  color: #c62828;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+
+.status-loading, .status-error {
+  text-align: center;
+  padding: 20px;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.status-error {
+  color: #c62828;
+}
+
 /* ===== Mobile ===== */
@media (max-width: 768px) {
  .app-header {
@@ -760,4 +902,8 @@ body {
  .progress-container {
    flex-wrap: wrap;
  }
+
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
 }
--- a/server/routes/dashboard.js
+++ b/server/routes/dashboard.js
@@ -600,4 +600,38 @@ router.get('/user-summary', async (req, res) => {
  }
 });

+// Admin-only status page with cache stats
+router.get('/status', (req, res) => {
+  try {
+    const userCookie = req.cookies.emby_user;
+    if (!userCookie) {
+      return res.status(401).json({ error: 'Not authenticated' });
+    }
+    const user = JSON.parse(userCookie);
+    if (!user.isAdmin) {
+      return res.status(403).json({ error: 'Admin access required' });
+    }
+
+    const cacheStats = cache.getStats();
+    const uptime = process.uptime();
+
+    res.json({
+      server: {
+        uptimeSeconds: Math.floor(uptime),
+        nodeVersion: process.version,
+        memoryUsageMB: Math.round(process.memoryUsage().rss / 1024 / 1024 * 10) / 10,
+        heapUsedMB: Math.round(process.memoryUsage().heapUsed / 1024 / 1024 * 10) / 10,
+        heapTotalMB: Math.round(process.memoryUsage().heapTotal / 1024 / 1024 * 10) / 10
+      },
+      polling: {
+        enabled: POLLING_ENABLED,
+        intervalMs: POLLING_ENABLED ? require('../utils/poller').POLL_INTERVAL : 0
+      },
+      cache: cacheStats
+    });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to get status', details: err.message });
+  }
+});
+
 module.exports = router;
--- a/server/utils/cache.js
+++ b/server/utils/cache.js
@@ -29,6 +29,40 @@ class MemoryCache {
  clear() {
    this.store.clear();
  }
+
+  getStats() {
+    const now = Date.now();
+    const entries = [];
+    let totalSize = 0;
+
+    for (const [key, entry] of this.store.entries()) {
+      const json = JSON.stringify(entry.value);
+      const sizeBytes = Buffer.byteLength(json, 'utf8');
+      totalSize += sizeBytes;
+      const ttlRemaining = Math.max(0, entry.expiresAt - now);
+      const expired = now > entry.expiresAt;
+      let itemCount = null;
+      if (Array.isArray(entry.value)) {
+        itemCount = entry.value.length;
+      } else if (entry.value && typeof entry.value === 'object') {
+        if (Array.isArray(entry.value.records)) itemCount = entry.value.records.length;
+        else if (Array.isArray(entry.value.slots)) itemCount = entry.value.slots.length;
+      }
+      entries.push({
+        key,
+        sizeBytes,
+        itemCount,
+        ttlRemainingMs: ttlRemaining,
+        expired
+      });
+    }
+
+    return {
+      entryCount: this.store.size,
+      totalSizeBytes: totalSize,
+      entries
+    };
+  }
 }

 const cache = new MemoryCache();