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:
2026-05-28 23:43:00 +02:00
parent 4a7f24348c
commit f13a63dc2f
16 changed files with 1979 additions and 1368 deletions
+30
View File
@@ -0,0 +1,30 @@
import React, { createContext, useContext, useMemo } from "react";
import { useEvents } from "../hooks/use-events";
import type { InstanceEventPayload } from "../types/events";
interface EventContextValue {
events: InstanceEventPayload[];
connected: boolean;
reconnectCount: number;
}
const EventContext = createContext<EventContextValue>({
events: [],
connected: false,
reconnectCount: 0,
});
export function EventProvider({ children }: { children: React.ReactNode }) {
const { events, connected, reconnectCount } = useEvents();
const value = useMemo(
() => ({ events, connected, reconnectCount }),
[events, connected, reconnectCount],
);
return (
<EventContext.Provider value={value}>{children}</EventContext.Provider>
);
}
export function useEventContext() {
return useContext(EventContext);
}