/** * Admin > Monitoring > Dashboard */ const { html } = window; const { useState, useEffect, useCallback, useRef } = hooks; export default function DashboardSection() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const timerRef = useRef(null); const load = useCallback(async () => { try { const d = await sw.api.admin.dashboard(); setData(d); } catch (e) { sw.toast(e.message, 'error'); } finally { setLoading(false); } }, []); useEffect(() => { load(); timerRef.current = setInterval(load, 10000); return () => clearInterval(timerRef.current); }, []); function formatUptime(seconds) { if (!seconds) return '\u2014'; const d = Math.floor(seconds / 86400); const h = Math.floor((seconds % 86400) / 3600); const m = Math.floor((seconds % 3600) / 60); if (d > 0) return `${d}d ${h}h`; if (h > 0) return `${h}h ${m}m`; return `${m}m`; } function formatBytes(b) { if (!b) return '0 B'; if (b < 1048576) return (b / 1024).toFixed(0) + ' KB'; if (b < 1073741824) return (b / 1048576).toFixed(1) + ' MB'; return (b / 1073741824).toFixed(2) + ' GB'; } if (loading) return html`

Loading\u2026

`; if (!data) return html`

No dashboard data

`; return html`

Auto-refreshes every 10s

${formatUptime(data.uptime_seconds)}

Uptime

${data.active_connections ?? '\u2014'}

Connections

${data.goroutines ?? '\u2014'}

Goroutines

${formatBytes(data.heap_alloc)}

Heap

${data.db_pool && html`

${data.db_pool.open || 0}

DB Open

${data.db_pool.in_use || 0}

DB In Use

${data.db_pool.idle || 0}

DB Idle

`} ${data.providers && data.providers.length > 0 && html`

Provider Health

${data.providers.map(p => html`

${p.name || p.id} ${p.status}

${Math.round(p.avg_latency_ms || 0)}ms avg

`)}

`} ${data.recent_errors && data.recent_errors.length > 0 && html`

Recent Errors

${data.recent_errors.map((e, i) => html`

${e}

`)}

`}

`; }