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
55 lines
2.7 KiB
Markdown
55 lines
2.7 KiB
Markdown
# Phase 7: Event Log UI
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./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 `/events` with `+page.svelte` and `+page.ts` data 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 page
|
|
- `web/src/routes/events/+page.ts` — NEW: Data loader
|
|
- `web/src/lib/components/EventLogEntry.svelte` — NEW: Event entry display
|
|
- `web/src/lib/components/EventLogFilter.svelte` — NEW: Filter controls
|
|
- `web/src/routes/+layout.svelte` — Add events nav link
|
|
- `web/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)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in by the implementation agent after completing this phase. -->
|