alexei.dolgolyov
c38b7d4c78
Add database foundation for observability features: - event_log table with severity/source filtering and pagination - standalone_proxies table for user-created reverse proxies - stale_threshold_days setting (default 7 days) - Auto-persist warn/error events from event bus to database - SSE broadcast of persistent events for real-time UI updates - Frontend types and API functions for downstream UI phases
2.7 KiB
2.7 KiB
Phase 7: Event Log UI
Status: ⬜ Not Started Parent plan: PLAN.md Domain: frontend
Objective
Build a persistent, searchable event log viewer with real-time streaming, filters, and resource linking.
Tasks
- Task 1: Create route
/eventswith+page.svelteand+page.tsdata loader - Task 2: Create EventLogEntry component — timestamp, severity badge (info=blue, warn=yellow, error=red), source icon (container/proxy/deploy/system), message text, expandable metadata section
- Task 3: Create EventLogFilter component — filters: severity multi-select, source multi-select, date range picker (start/end), free-text search
- Task 4: Implement pagination — "Load more" button at bottom (offset/limit pattern matching API)
- Task 5: SSE integration — subscribe to event_log events, prepend new entries at top with subtle highlight animation
- Task 6: Quick actions — clickable links to related resources (e.g., click container name → go to project/stage, click proxy domain → go to proxy viewer)
- Task 7: Stats header — show counts by severity (from GET /api/events/log/stats), with colored badges
- Task 8: Add navigation link in sidebar
- Task 9: Add i18n keys for event log page
Files to Modify/Create
web/src/routes/events/+page.svelte— NEW: Event log pageweb/src/routes/events/+page.ts— NEW: Data loaderweb/src/lib/components/EventLogEntry.svelte— NEW: Event entry displayweb/src/lib/components/EventLogFilter.svelte— NEW: Filter controlsweb/src/routes/+layout.svelte— Add events nav linkweb/src/lib/sse.ts— Add event_log SSE subscription helper (if needed)
Acceptance Criteria
- Event log shows all persistent events with severity and source
- Filters work: severity, source, date range, text search
- New events stream in real-time via SSE without page refresh
- Pagination loads older events on demand
- Quick actions link to related resources
- Stats header shows severity distribution
- Responsive layout
Notes
- Follow existing SSE patterns from deploy logs viewer
- Date range filter: consider "last hour", "last 24h", "last 7 days" presets + custom range
- Metadata section is JSON — render as formatted key-value pairs, not raw JSON
- Resource linking: parse source and metadata to construct navigation URLs
- Consider: auto-scroll to top when new event arrives (if user is at top), otherwise show "N new events" badge
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)