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.8 KiB
2.8 KiB
Phase 4: Unified Proxy Viewer UI
Status: ⬜ Not Started Parent plan: 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
/proxieswith+page.svelteand+page.tsdata 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 pageweb/src/routes/proxies/+page.ts— NEW: Data loaderweb/src/lib/components/ProxyCard.svelte— NEW: Individual proxy displayweb/src/lib/components/ProxyGroup.svelte— NEW: Collapsible project/stage groupweb/src/lib/components/ProxyFilter.svelte— NEW: Filter barweb/src/routes/+layout.svelte— Add proxies nav linkweb/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)