feat: container monitoring frontend UI (PR-2)
- Custom ToastContext + ToastProvider + ToastContainer (~170 lines, no deps) - useEvents() SSE hook with exponential backoff reconnect - EventProvider context for app-wide SSE stream sharing - Event-to-toast bridge with severity mapping and deduplication - Real-time status badge updates replacing 30s polling - EventSource auth probe (401/429 detection via fetch) - 14 frontend tests (useEvents + toast-rules) Quality gates: vitest 14 passed, tsc clean, eslint clean
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useEventContext } from "../state/events";
|
||||
import { handleEventToast } from "./toast-rules";
|
||||
|
||||
export function EventToastBridge(): JSX.Element | null {
|
||||
const { events } = useEventContext();
|
||||
const processedRef = useRef<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
for (const event of events) {
|
||||
const key = `${event.correlation_id}:${event.timestamp}`;
|
||||
if (processedRef.current.has(key)) continue;
|
||||
processedRef.current.add(key);
|
||||
handleEventToast(event);
|
||||
}
|
||||
}, [events]);
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user