diff --git a/public/app.js b/public/app.js index acc12da..208092e 100644 --- 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 = '

Loading status…

'; + 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 = '

Failed to load status.

'; + } +} + +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 = ` +
+

Server Status

+ +
+
+
+
Server
+
Uptime${uptime}
+
Node${escapeHtml(s.nodeVersion)}
+
Memory (RSS)${s.memoryUsageMB} MB
+
Heap${s.heapUsedMB} / ${s.heapTotalMB} MB
+
+
+
Polling
+
Mode${data.polling.enabled ? 'Background' : 'On-demand'}
+ ${data.polling.enabled ? `
Interval${data.polling.intervalMs / 1000}s
` : ''} +
+
+
Cache (${data.cache.entryCount} entries, ${totalKB} KB)
+ + + `; + + 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 ? 'expired' : (e.ttlRemainingMs / 1000).toFixed(0) + 's'; + const items = e.itemCount !== null ? e.itemCount : '—'; + html += ``; + } + + html += `
KeyItemsSizeTTL
${escapeHtml(e.key)}${items}${sizeStr}${ttlStr}
`; + panel.innerHTML = html; +} + function formatSize(size) { if (!size) return 'N/A'; // If already a formatted string (e.g., "21.5 GB"), return as-is diff --git a/public/index.html b/public/index.html index 251ea79..6c49234 100644 --- a/public/index.html +++ b/public/index.html @@ -57,6 +57,7 @@ Show all users +
Current User: @@ -66,6 +67,8 @@
+ + diff --git a/public/style.css b/public/style.css index bcfd666..8087fe5 100644 --- 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; + } } diff --git a/server/routes/dashboard.js b/server/routes/dashboard.js index 1e1d82c..adddab8 100644 --- 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; diff --git a/server/utils/cache.js b/server/utils/cache.js index 51970d1..b7beeac 100644 --- 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();