// Shared cache for RPC-backed page data (the "stale-while-revalidate" layer). // // Pages used to fetch-on-mount with a spinner on every navigation — Dashboard // keys its router-view by route.path, so each visit unmounted and refetched // everything. This store is the single place resource state lives instead: // keyed entries survive navigation (Pinia) and reloads (sessionStorage // snapshot), and `useCachedResource` renders them instantly while // revalidating in the background. // // Semantics (generalized from homeStatus.ts / useFleetData.ts, the proven // hand-rolled versions): // - sticky-ready: once a key is 'ready' it never regresses to 'loading'; // refreshes show as 'refreshing' so the UI keeps the data visible. // - keep-last-known-value on error: a failed revalidate leaves data in place // (with `error` set and `fetchedAt` untouched → age badge shows staleness). // - in-flight dedup per key: concurrent refreshes collapse into one fetch. import { defineStore } from 'pinia' import { reactive } from 'vue' export type ResourceLoadState = 'idle' | 'loading' | 'ready' | 'refreshing' | 'error' export interface ResourceEntry { data: T | null loadState: ResourceLoadState /** Epoch ms of the last SUCCESSFUL fetch (drives TTL + stale badges). */ fetchedAt: number | null error: string | null } const SNAPSHOT_PREFIX = 'resource:' function readSnapshot(key: string): { data: T; fetchedAt: number } | null { try { const raw = sessionStorage.getItem(SNAPSHOT_PREFIX + key) if (!raw) return null const parsed = JSON.parse(raw) if (parsed && typeof parsed.fetchedAt === 'number' && 'data' in parsed) return parsed } catch { /* corrupt/absent snapshot — fall through to a fresh fetch */ } return null } function writeSnapshot(key: string, data: unknown, fetchedAt: number): void { try { sessionStorage.setItem(SNAPSHOT_PREFIX + key, JSON.stringify({ data, fetchedAt })) } catch { /* quota exceeded or unserializable — memory cache still works */ } } export const useResourcesStore = defineStore('resources', () => { const entries = reactive(new Map()) // Non-reactive bookkeeping: in-flight fetches + active revalidators. const inflight = new Map>() const revalidators = new Map void>>() const invalidateTimers = new Map>() /** Get (or create) the reactive entry for a key, hydrating from the * sessionStorage snapshot on first sight so revisits after a reload paint * before any RPC completes. Pass `persist: false` to skip snapshots. */ function entry(key: string, persist = true): ResourceEntry { let e = entries.get(key) if (!e) { const snap = persist ? readSnapshot(key) : null e = reactive({ data: snap ? snap.data : null, loadState: snap ? 'ready' : 'idle', fetchedAt: snap ? snap.fetchedAt : null, error: null, }) entries.set(key, e) } return e as ResourceEntry } /** Run `fetcher` for `key` with sticky-ready + keep-last-value semantics. * Concurrent calls for the same key share one in-flight fetch. */ function refresh( key: string, fetcher: () => Promise, opts: { persist?: boolean } = {}, ): Promise { const existing = inflight.get(key) if (existing) return existing const e = entry(key, opts.persist ?? true) e.loadState = e.loadState === 'ready' || e.loadState === 'refreshing' ? 'refreshing' : 'loading' const p = (async () => { try { const data = await fetcher() e.data = data e.error = null e.fetchedAt = Date.now() e.loadState = 'ready' if (opts.persist ?? true) writeSnapshot(key, data, e.fetchedAt) } catch (err) { e.error = err instanceof Error ? err.message : String(err) // Keep last-known data visible; only 'error' when we have nothing. e.loadState = e.data !== null ? 'ready' : 'error' } finally { inflight.delete(key) } })() inflight.set(key, p) return p } /** Mark a key stale and (debounced) re-run every mounted subscriber's * fetcher. Call after a mutation or on a relevant WS push. */ function invalidate(key: string, opts: { debounceMs?: number } = {}): void { const e = entries.get(key) if (e) e.fetchedAt = null const subs = revalidators.get(key) if (!subs || subs.size === 0) return const t = invalidateTimers.get(key) if (t) clearTimeout(t) invalidateTimers.set( key, setTimeout(() => { invalidateTimers.delete(key) for (const fn of subs) fn() }, opts.debounceMs ?? 800), ) } /** Register a live revalidator for a key (used by useCachedResource); * returns an unsubscribe fn. */ function subscribe(key: string, revalidate: () => void): () => void { let subs = revalidators.get(key) if (!subs) { subs = new Set() revalidators.set(key, subs) } subs.add(revalidate) return () => { subs.delete(revalidate) } } /** Optimistically apply `update` to the cached value; returns a rollback. * Pattern: rollback on RPC failure (generalized TransportPrefsCard). */ function optimistic(key: string, update: (current: T | null) => T): () => void { const e = entry(key) const before = e.data const beforeState = e.loadState e.data = update(before) if (e.loadState === 'idle' || e.loadState === 'error') e.loadState = 'ready' return () => { e.data = before e.loadState = beforeState } } /** Drop a key entirely (memory + snapshot). */ function evict(key: string): void { entries.delete(key) try { sessionStorage.removeItem(SNAPSHOT_PREFIX + key) } catch { /* noop */ } } return { entries, entry, refresh, invalidate, subscribe, optimistic, evict } })