feat(ui): V2-3 (Teil 2) — das UI haengt am Ereignis-Strom, Taktgeber raus
Ampel / ampel (push) Successful in 47s
Ampel / ampel (push) Successful in 47s
WAS: EventStreamProvider haelt EINE SSE-Verbindung fuer die ganze
Anwendung. Dashboard, Log-Kasten, Log-Seite, Laufwerksliste und
Worker-Liste beziehen ihren Zustand daraus. Sieben von neun setInterval
sind weg.
GEMESSEN AN DEN TAKTGEBERN, je offenem Tab:
Dashboard 5 Endpunkte / 4 s 75/min -> 0
Log-Kasten 2 Endpunkte / 5 s 24/min -> 0
Laufwerke 1 Endpunkt / 5 s 12/min -> 0
Log-Seite 1 Endpunkt /10 s 6/min -> 0 (+1 Abruf beim Oeffnen)
Worker-Liste 1 Endpunkt /15 s 4/min -> 0 (+1 Abruf beim Oeffnen)
------
121/min -> ~2 einmalige Abrufe
Zwei Taktgeber bleiben bewusst: FirstRunWizard (laeuft nur VOR der
Einrichtung) und RipTargetModal (nur solange der Dialog offen ist).
DIE REGEL IST UMGEZOGEN, NICHT VERSCHWUNDEN: Ein Abriss ist keine
Aussage ueber die Welt. Der Provider BEHAELT bei einem Fehler den letzten
Stand und setzt nur `verbunden` auf false; es wird nie eine Liste geleert.
Jede Komponente uebernimmt einen Wert nur, wenn er wirklich da ist —
`devices === null` heisst "konnte nicht nachsehen", nicht "keine
Laufwerke". Das war der Fehler hinter "wird oft neu geladen".
EIN PLACEBO WENIGER: Oben rechts stand ein fest verdrahtetes "ONLINE" mit
pulsierendem Punkt — es leuchtete gruen, auch wenn die API tot war. Jetzt
zeigt es LIVE oder VERBINDUNG WEG, und im Tooltip steht, wann die letzte
Meldung kam.
DER SERVER SCHIEBT JETZT AUCH DEN SERVER-ZUSTAND: Neuer Ereignistyp
system.status (Hardware, Worker, Ablageziele) im 15-Sekunden-Takt des
Waechters — EINMAL im Server statt 15/min je Tab. Nur mitgeschickte
Schluessel werden uebernommen; ein fehlender heisst "behalte deinen Stand".
DAZU EIN FORMATFEHLER GEFUNDEN UND BEHOBEN: /logs bildet ts -> timestamp
ab, mein Snapshot lieferte die rohe DB-Zeile. Das UI haette "Invalid Date"
gezeigt — und zwar NUR im Live-Betrieb, nicht beim manuellen Neuladen.
Jetzt gibt es _log_zeile() einmal, benutzt von beiden.
UND EINEN ZWEITEN: system_lesen lief per asyncio.get_event_loop() in einem
Worker-Thread — dort ist das NICHT die laufende Schleife. Die Coroutine
waere nie gelaufen. Die Schleife wird jetzt im Startup festgehalten.
GEMESSEN: ruff sauber, 378 Tests + 3 uebersprungen, `npm run build`
durch (1650 Module). Der Live-Beweis steht noch aus — er kommt mit dem
Deploy.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Hitonabi
co-authored by
Claude Opus 5
Claude Opus 5
parent
f097a0b59d
commit
95705c8d88
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Der Live-Strom des UI — EINE Verbindung für die ganze Anwendung.
|
||||
*
|
||||
* ## Was das ablöst
|
||||
*
|
||||
* Bis hierher hatte jede Komponente ihren eigenen Taktgeber. Nachgerechnet an
|
||||
* den `setInterval`-Aufrufen verursachte EIN offener Tab plus ein Worker rund
|
||||
* 133 Anfragen pro Minute:
|
||||
*
|
||||
* Dashboard 5 Endpunkte alle 4 s -> 75/min
|
||||
* Log-Kasten 2 Endpunkte alle 5 s -> 24/min
|
||||
* Laufwerke 1 Endpunkt alle 5 s -> 12/min
|
||||
* Log-Seite 1 Endpunkt alle 10 s -> 6/min
|
||||
* Worker-Liste 1 Endpunkt alle 15 s -> 4/min
|
||||
* Windows-Tray /jobs alle 5 s -> 12/min
|
||||
*
|
||||
* Das Rate-Limit stand einmal UNTER dieser Zahl (100/min). Etwa jede vierte
|
||||
* Anfrage bekam 429 — und weil das UI einen Fehlschlag als „es gibt nichts"
|
||||
* verbuchte, leerte sich die Job-Liste im Sekundentakt. Der Commander meldete
|
||||
* das als „wird oft neu geladen".
|
||||
*
|
||||
* ## DIE Regel dieser Datei
|
||||
*
|
||||
* Ein Verbindungsabriss ist KEINE Aussage über die Welt.
|
||||
*
|
||||
* Bei einem Fehler wird der letzte bekannte Stand BEHALTEN und `verbunden`
|
||||
* auf false gesetzt — das UI zeigt dann ein Banner. Es wird niemals eine
|
||||
* Liste auf leer gesetzt. Genau das war der alte Fehler: fünfmal stand
|
||||
* `catch(() => [])` im Code, und jeder fehlgeschlagene Abruf hieß damit
|
||||
* „keine Jobs, keine Laufwerke, keine Ablagen".
|
||||
*
|
||||
* ## Warum ein Context und nicht ein Hook je Komponente
|
||||
*
|
||||
* `EventSource` öffnet je Aufruf eine eigene HTTP-Verbindung. Ein Hook, den
|
||||
* fünf Komponenten benutzen, wären fünf Verbindungen und fünf Snapshots —
|
||||
* also genau das Problem in neuer Form. Der Provider hält eine.
|
||||
*/
|
||||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react'
|
||||
|
||||
export type Job = {
|
||||
id: string
|
||||
status: string
|
||||
progress: number
|
||||
title?: string | null
|
||||
type?: string
|
||||
device?: string
|
||||
error?: string | null
|
||||
meta?: Record<string, any> | null
|
||||
[k: string]: any
|
||||
}
|
||||
|
||||
export type Device = { id: string; name: string; type: string; path: string; status: string; [k: string]: any }
|
||||
export type Worker = { name: string; encoders?: string[]; info?: Record<string, any>; last_seen?: string | null }
|
||||
/**
|
||||
* Dieselbe Form, die auch `GET /logs` liefert (`_log_zeile` in main.py).
|
||||
* `timestamp`, nicht `ts` — sonst zeigt das Log-Fenster „Invalid Date", und
|
||||
* zwar NUR im Live-Betrieb.
|
||||
*/
|
||||
export type LogZeile = { id: string; timestamp?: string; level?: string; source?: string; message?: string }
|
||||
|
||||
export type StromZustand = {
|
||||
jobs: Job[]
|
||||
/** Server-Zustand aus dem langsamen Takt des Waechters. null = noch nichts gehoert. */
|
||||
systemInfo: any | null
|
||||
/** Ablageziele mit freiem Platz. null = noch nichts gehoert. */
|
||||
ablagen: any[] | null
|
||||
/** null heißt ausdrücklich „konnte nicht nachsehen" — NICHT „es gibt keine". */
|
||||
devices: Device[] | null
|
||||
workers: Worker[]
|
||||
logs: LogZeile[]
|
||||
/** false = Verbindung weg. Die Daten oben sind dann der letzte bekannte Stand. */
|
||||
verbunden: boolean
|
||||
/** Wie oft die Verbindung schon neu aufgebaut wurde — fürs Log, nicht fürs UI. */
|
||||
neuverbindungen: number
|
||||
/** Zeitpunkt des letzten empfangenen Ereignisses. */
|
||||
zuletzt: Date | null
|
||||
}
|
||||
|
||||
const LEER: StromZustand = {
|
||||
jobs: [],
|
||||
systemInfo: null,
|
||||
ablagen: null,
|
||||
devices: null,
|
||||
workers: [],
|
||||
logs: [],
|
||||
verbunden: false,
|
||||
neuverbindungen: 0,
|
||||
zuletzt: null,
|
||||
}
|
||||
|
||||
const StromContext = createContext<StromZustand>(LEER)
|
||||
|
||||
/** Wie viele Log-Zeilen im Speicher gehalten werden. */
|
||||
const LOG_GRENZE = 300
|
||||
|
||||
export function EventStreamProvider({ children }: { children: ReactNode }) {
|
||||
const [zustand, setZustand] = useState<StromZustand>(LEER)
|
||||
// In einem Ref, damit die Handler nicht bei jedem Zustandswechsel neu
|
||||
// gebunden werden müssen — sonst risse die Verbindung ständig ab.
|
||||
const neuverbindungen = useRef(0)
|
||||
|
||||
useEffect(() => {
|
||||
const quelle = new EventSource('/api/events')
|
||||
|
||||
const merken = (patch: Partial<StromZustand>) =>
|
||||
setZustand((alt) => ({ ...alt, ...patch, zuletzt: new Date() }))
|
||||
|
||||
// ── Snapshot: das ganze Bild ──────────────────────────────────────
|
||||
quelle.addEventListener('snapshot', (e) => {
|
||||
const d = JSON.parse((e as MessageEvent).data)?.daten ?? {}
|
||||
merken({
|
||||
jobs: d.jobs ?? [],
|
||||
// devices === null kommt vom Server, wenn er die Laufwerke nicht
|
||||
// lesen konnte. Das wird DURCHGEREICHT, nicht zu [] geglättet.
|
||||
devices: d.devices === undefined ? null : d.devices,
|
||||
workers: d.workers ?? [],
|
||||
logs: d.logs ?? [],
|
||||
verbunden: true,
|
||||
})
|
||||
})
|
||||
|
||||
// ── Job-Deltas ────────────────────────────────────────────────────
|
||||
const jobPatch = (e: Event) => {
|
||||
const ereignis = JSON.parse((e as MessageEvent).data)
|
||||
const id = ereignis.entitaet_id
|
||||
const daten = ereignis.daten ?? {}
|
||||
setZustand((alt) => {
|
||||
if (daten.status === 'geloescht') {
|
||||
return { ...alt, jobs: alt.jobs.filter((j) => j.id !== id), verbunden: true, zuletzt: new Date() }
|
||||
}
|
||||
const bekannt = alt.jobs.some((j) => j.id === id)
|
||||
const jobs = bekannt
|
||||
? alt.jobs.map((j) => (j.id === id ? { ...j, ...daten } : j))
|
||||
: [{ id, ...daten } as Job, ...alt.jobs]
|
||||
return { ...alt, jobs, verbunden: true, zuletzt: new Date() }
|
||||
})
|
||||
}
|
||||
for (const typ of ['job.created', 'job.progress', 'job.phase', 'job.finished']) {
|
||||
quelle.addEventListener(typ, jobPatch)
|
||||
}
|
||||
|
||||
// ── Laufwerke ─────────────────────────────────────────────────────
|
||||
quelle.addEventListener('drive.changed', (e) => {
|
||||
const ereignis = JSON.parse((e as MessageEvent).data)
|
||||
setZustand((alt) => {
|
||||
if (alt.devices === null) return alt // noch kein Stand — auf Snapshot warten
|
||||
const id = ereignis.entitaet_id
|
||||
return {
|
||||
...alt,
|
||||
devices: alt.devices.map((d) => (d.id === id ? { ...d, ...ereignis.daten } : d)),
|
||||
verbunden: true,
|
||||
zuletzt: new Date(),
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// ── Log-Zeilen ────────────────────────────────────────────────────
|
||||
quelle.addEventListener('log.line', (e) => {
|
||||
const ereignis = JSON.parse((e as MessageEvent).data)
|
||||
const d = ereignis.daten ?? {}
|
||||
const zeile: LogZeile = {
|
||||
id: String(ereignis.entitaet_id),
|
||||
timestamp: ereignis.ts,
|
||||
level: d.level,
|
||||
source: d.source,
|
||||
message: d.message,
|
||||
}
|
||||
setZustand((alt) => ({
|
||||
...alt,
|
||||
logs: [zeile, ...alt.logs].slice(0, LOG_GRENZE),
|
||||
verbunden: true,
|
||||
zuletzt: new Date(),
|
||||
}))
|
||||
})
|
||||
|
||||
// ── Server-Zustand (langsamer Takt) ───────────────────────────────
|
||||
quelle.addEventListener('system.status', (e) => {
|
||||
const d = JSON.parse((e as MessageEvent).data)?.daten ?? {}
|
||||
// Nur uebernehmen, was WIRKLICH mitgeschickt wurde. Ein fehlender
|
||||
// Schluessel heisst „konnte ich diesmal nicht lesen" — dann bleibt der
|
||||
// alte Stand stehen, statt auf leer zu fallen.
|
||||
setZustand((alt) => ({
|
||||
...alt,
|
||||
systemInfo: d.info !== undefined ? d.info : alt.systemInfo,
|
||||
workers: d.workers !== undefined ? d.workers : alt.workers,
|
||||
ablagen: d.ablagen !== undefined ? d.ablagen : alt.ablagen,
|
||||
verbunden: true,
|
||||
zuletzt: new Date(),
|
||||
}))
|
||||
})
|
||||
|
||||
quelle.onopen = () => merken({ verbunden: true })
|
||||
|
||||
// ── Abriss: Stand BEHALTEN, nur die Verbindung melden ─────────────
|
||||
quelle.onerror = () => {
|
||||
// Kein Leeren, kein Zurücksetzen. Der Browser verbindet von selbst neu
|
||||
// und schickt dabei Last-Event-ID mit; der Server liefert die Lücke nach
|
||||
// oder schickt einen frischen Snapshot.
|
||||
neuverbindungen.current += 1
|
||||
setZustand((alt) => ({
|
||||
...alt,
|
||||
verbunden: false,
|
||||
neuverbindungen: neuverbindungen.current,
|
||||
}))
|
||||
}
|
||||
|
||||
return () => quelle.close()
|
||||
}, [])
|
||||
|
||||
const wert = useMemo(() => zustand, [zustand])
|
||||
return <StromContext.Provider value={wert}>{children}</StromContext.Provider>
|
||||
}
|
||||
|
||||
/** Der gemeinsame Live-Zustand. */
|
||||
export function useStrom(): StromZustand {
|
||||
return useContext(StromContext)
|
||||
}
|
||||
Reference in New Issue
Block a user