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:
@@ -3381,6 +3381,17 @@ a.nav-item,
|
||||
color: var(--danger, #dc2626);
|
||||
}
|
||||
|
||||
.status-badge.starting,
|
||||
.status-badge.probing {
|
||||
background: var(--info-light, #dbeafe);
|
||||
color: var(--info, #2563eb);
|
||||
}
|
||||
|
||||
.status-badge.unhealthy {
|
||||
background: var(--warning-light, #fef3c7);
|
||||
color: var(--warning, #d97706);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Mobile Terminal Styles
|
||||
============================================ */
|
||||
@@ -4452,3 +4463,26 @@ a:active,
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Toast animations */
|
||||
@keyframes toastSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toastFadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user