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
57 lines
2.8 KiB
Markdown
57 lines
2.8 KiB
Markdown
# Phase 4: Unified Proxy Viewer UI
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./PLAN.md)
|
|
**Domain:** frontend
|
|
|
|
## Objective
|
|
Build a unified proxy viewer page showing ALL proxies (deploy-managed and standalone) with grouping, filtering, and real-time health indicators.
|
|
|
|
## Tasks
|
|
|
|
- [ ] Task 1: Create route `/proxies` with `+page.svelte` and `+page.ts` data loader
|
|
- [ ] Task 2: Create ProxyCard component — displays: domain, destination, SSL badge, health indicator (green/yellow/red dot), proxy type badge (managed/standalone), last health check timestamp
|
|
- [ ] Task 3: Create ProxyGroup component — collapsible section with project name header, stage sub-groups, proxy count badge
|
|
- [ ] Task 4: Create StandaloneProxyGroup component — separate collapsible section for user-created proxies
|
|
- [ ] Task 5: Implement filtering: by project, stage, health status (healthy/unhealthy/unknown), proxy type (managed/standalone), free-text search by domain/destination
|
|
- [ ] Task 6: Filter bar component with dropdown selects and search input
|
|
- [ ] Task 7: SSE integration — subscribe to proxy health events, update health indicators in real-time
|
|
- [ ] Task 8: Empty state — friendly message when no proxies exist, with link to create one
|
|
- [ ] Task 9: Add navigation link in sidebar layout (+layout.svelte)
|
|
- [ ] Task 10: Add i18n keys for proxy viewer page
|
|
|
|
## Files to Modify/Create
|
|
- `web/src/routes/proxies/+page.svelte` — NEW: Proxy viewer page
|
|
- `web/src/routes/proxies/+page.ts` — NEW: Data loader
|
|
- `web/src/lib/components/ProxyCard.svelte` — NEW: Individual proxy display
|
|
- `web/src/lib/components/ProxyGroup.svelte` — NEW: Collapsible project/stage group
|
|
- `web/src/lib/components/ProxyFilter.svelte` — NEW: Filter bar
|
|
- `web/src/routes/+layout.svelte` — Add proxies nav link
|
|
- `web/src/lib/i18n/en.ts` (or equivalent) — Add proxy viewer strings
|
|
|
|
## Acceptance Criteria
|
|
- All proxies visible: both deploy-managed and standalone
|
|
- Proxies grouped by project/stage in collapsible sections
|
|
- Health indicators show real-time status (green=healthy, red=unhealthy, yellow=unknown)
|
|
- Filtering works: project, stage, health, type, text search
|
|
- SSE updates health indicators without page refresh
|
|
- Navigation accessible from sidebar
|
|
- Responsive layout (mobile-friendly)
|
|
|
|
## Notes
|
|
- Use existing component patterns (ConfirmDialog, FormField styles, etc.)
|
|
- Follow existing Svelte 5 patterns ($state, $derived, $effect)
|
|
- The /api/proxies/all endpoint from Phase 3 provides the data source
|
|
- Health indicator should pulse/animate briefly on status change
|
|
- Consider: show proxy count in sidebar nav 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. -->
|