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,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);
|
||||
}
|
||||
Reference in New Issue
Block a user