// Overview dashboard
const { useMemo: useMemoOV } = React;
// Rolling 24-hour incident history. Primary source is the backend
// (/api/incident-history) so every LAN device sees the same timeline
// and the data survives browser-cache clears. localStorage is only a
// tiny resilience layer for the current device when the API is
// temporarily unreachable.
const INCIDENT_HISTORY_KEY = 'pulse.incidentHistory';
const HISTORY_HOURS = 24;
const HISTORY_REFRESH_MS = 60_000;
function _readLocalHistory() {
try { return JSON.parse(localStorage.getItem(INCIDENT_HISTORY_KEY) || '[]'); }
catch (_) { return []; }
}
function _writeLocalHistory(samples) {
try { localStorage.setItem(INCIDENT_HISTORY_KEY, JSON.stringify(samples)); }
catch (_) { /* quota / private mode */ }
}
function IncidentHistoryBars({ currentCount }) {
// Fetch authoritative history from backend on mount + every minute.
// Fall back to whatever was last cached in localStorage if the fetch
// fails (we never want empty bars just because a probe request took
// a beat too long).
const [samples, setSamples] = React.useState(() => _readLocalHistory());
React.useEffect(() => {
let cancelled = false;
async function pull() {
try {
const r = await fetch('/api/incident-history?hours=24', { cache: 'no-store' });
if (!r.ok) throw new Error(`http ${r.status}`);
const body = await r.json();
if (cancelled) return;
const s = Array.isArray(body.samples) ? body.samples : [];
setSamples(s);
_writeLocalHistory(s);
} catch (_) {
// keep the last good cached value
}
}
pull();
const t = setInterval(pull, HISTORY_REFRESH_MS);
return () => { cancelled = true; clearInterval(t); };
}, []);
// Bucket samples into HISTORY_HOURS hourly slots. Index 23 is "now";
// index 0 is "23h ago".
const buckets = React.useMemo(() => {
const now = Date.now();
const slots = Array.from({length: HISTORY_HOURS}, () => ({ max: null, samples: 0 }));
for (const d of samples) {
// Accept both the backend schema ({ts, down, crit, off, ...}) and the
// legacy localStorage schema ({ts, count}) so upgrading a tab doesn't
// blank the chart.
const count = (typeof d.down === 'number') ? d.down : (d.count ?? 0);
const hoursAgo = Math.floor((now - d.ts) / (3600 * 1000));
const idx = HISTORY_HOURS - 1 - hoursAgo;
if (idx >= 0 && idx < HISTORY_HOURS) {
slots[idx].max = Math.max(slots[idx].max ?? 0, count);
slots[idx].samples++;
}
}
// The final slot always reflects the current live count so the
// most recent bar updates immediately without waiting for a sample.
slots[HISTORY_HOURS - 1].max = Math.max(slots[HISTORY_HOURS - 1].max ?? 0, currentCount);
return slots;
}, [samples, currentCount]);
const maxCount = Math.max(1, ...buckets.map(b => b.max || 0));
return (