Fix: Live-Graphen ueberleben Tab-Wechsel (modul-globaler Store + App-Feeder)
Bisher lag der Verlauf in component-lokalem State (useSystemHistory / TokenPerformanceCard). Beim Tab-Wechsel wurde die Zentrale unmountet -> Historie weg -> Graphen starteten leer und mussten sich neu aufbauen. Neu: lib/metricsStore.ts haelt den Verlauf modul-global (useSyncExternalStore) und wird von useMetricsFeeder() gefuettert, das in App (immer gemountet) haengt. So sammelt der Verlauf kontinuierlich weiter - unabhaengig vom aktiven Tab - und die Graphen zeigen beim Zurueckwechseln sofort die volle Historie. Zentrale + Diagnose teilen denselben Store. Verifiziert: Store waechst auch auf Modell-Manager weiter; Rueckkehr zeigt lueckenlosen Verlauf statt Reset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,31 +1,12 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { useSystemStatus } from "@/lib/queries"
|
||||
import { useSysHistory, type SysSample } from "@/lib/metricsStore"
|
||||
|
||||
export type SysSample = { t: number; cpu: number; ram: number; gpu: number | null; disk: number | null }
|
||||
export type { SysSample }
|
||||
|
||||
const MAX_POINTS = 40 // bei 3s-Poll ~2 Min Live-Verlauf
|
||||
|
||||
/** Rollende Live-Historie der System-Metriken (CPU/RAM/GPU/Disk). Hängt bei jedem Poll
|
||||
* (dataUpdatedAt) einen Messpunkt an und hält die letzten 40. Geteilt von Zentrale +
|
||||
* Diagnose, damit beide denselben Verlauf aufbauen. */
|
||||
/** Aktuelle System-Werte (für Legende) + rollende Live-Historie aus dem modul-globalen
|
||||
* Store (überlebt Tab-Wechsel; gefüllt vom App-Feeder). */
|
||||
export function useSystemHistory() {
|
||||
const { data: sys, dataUpdatedAt, error } = useSystemStatus(3_000)
|
||||
const [hist, setHist] = useState<SysSample[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
if (!sys) return
|
||||
setHist((h) => [
|
||||
...h,
|
||||
{
|
||||
t: Date.now(),
|
||||
cpu: sys.cpu?.percent ?? 0,
|
||||
ram: sys.ram?.percent ?? 0,
|
||||
gpu: sys.gpu?.busy_percent ?? null,
|
||||
disk: sys.disk?.percent ?? null,
|
||||
},
|
||||
].slice(-MAX_POINTS))
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dataUpdatedAt])
|
||||
|
||||
const { data: sys, error } = useSystemStatus(3_000)
|
||||
const hist = useSysHistory()
|
||||
return { sys, hist, error }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user