alexei.dolgolyov
50e8519220
- Add 6 renderer components: StatCard, Gauge, List, Progress, AlertBanner, Chart - Add IntegrationWidget container with auto-refresh, loading, error states - Add IntegrationAlertOverlay for layout-level critical alerts - Add IntegrationConfigFields for dynamic form generation from Zod schemas - Register integration type in WidgetRenderer - Extend WidgetCreationForm with integration app/endpoint pickers - Extend AppForm with integration config section and test connection button - Add /api/integrations/alerts endpoint
66 lines
5.2 KiB
Markdown
66 lines
5.2 KiB
Markdown
# Phase 2: Integration Widget & App Form UI
|
|
|
|
**Status:** ⬜ Not Started
|
|
**Parent plan:** [PLAN.md](./PLAN.md)
|
|
**Domain:** frontend
|
|
|
|
## Objective
|
|
Build the frontend components: IntegrationWidget with all endpoint renderers, extend AppForm with integration configuration UI, and update WidgetCreationForm to support integration widgets.
|
|
|
|
## Tasks
|
|
|
|
- [ ] Task 1: Create `src/lib/components/widget/integration/IntegrationWidget.svelte` — Container component that resolves integration type from app, fetches endpoint data via `/api/integrations/[appId]/data/[endpointId]`, handles loading/error states, delegates to appropriate renderer.
|
|
- [ ] Task 2: Create `src/lib/components/widget/integration/StatCardRenderer.svelte` — Single big number with label, optional trend arrow (up/down/flat), color-coded by threshold. Used for: query counts, session counts, library stats, etc.
|
|
- [ ] Task 3: Create `src/lib/components/widget/integration/GaugeRenderer.svelte` — Circular SVG gauge (0-100%). Color-coded: green (<60%), yellow (60-85%), red (>85%). Used for: battery %, CPU %, disk usage.
|
|
- [ ] Task 4: Create `src/lib/components/widget/integration/ListRenderer.svelte` — Scrollable list of items with icon, title, subtitle, optional badge. Used for: recent commits, top blocked domains, container list, etc.
|
|
- [ ] Task 5: Create `src/lib/components/widget/integration/ProgressRenderer.svelte` — Multiple progress bars with labels and percentages. Used for: torrent downloads, download queue.
|
|
- [ ] Task 6: Create `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — Full-width alert banner with icon, message, severity (info/warning/critical). Used for: UPS on battery, brute force detection.
|
|
- [ ] Task 7: Create `src/lib/components/widget/integration/ChartRenderer.svelte` — Simple bar or line chart using SVG. Used for: query history, uptime charts.
|
|
- [ ] Task 8: Register `integration` widget type in `src/lib/components/widget/WidgetRenderer.svelte` — Import IntegrationWidget, add case to the type switch.
|
|
- [ ] Task 9: Extend `src/lib/components/app/AppForm.svelte` — Add collapsible "Integration" section with: type dropdown (from `/api/integrations`), dynamic auth config fields rendered from Zod schema, "Test Connection" button, enable/disable toggle.
|
|
- [ ] Task 10: Create `src/lib/components/app/IntegrationConfigFields.svelte` — Dynamic form field generator that renders input fields based on a Zod schema (string → text input, number → number input, boolean → toggle). Used by AppForm.
|
|
- [ ] Task 11: Update `src/lib/components/widget/WidgetCreationForm.svelte` — Add integration widget option: app picker (only apps with integration enabled) → endpoint picker → refresh interval.
|
|
- [ ] Task 12: Create `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — Layout-level component that polls for critical alerts (UPS on battery, brute force) and renders AlertBannerRenderer at the top of the page. Add to root layout.
|
|
|
|
## Files to Modify/Create
|
|
- `src/lib/components/widget/integration/IntegrationWidget.svelte` — new
|
|
- `src/lib/components/widget/integration/StatCardRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/GaugeRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/ListRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/ProgressRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/ChartRenderer.svelte` — new
|
|
- `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — new
|
|
- `src/lib/components/widget/WidgetRenderer.svelte` — modify: add integration case
|
|
- `src/lib/components/app/AppForm.svelte` — modify: add integration section
|
|
- `src/lib/components/app/IntegrationConfigFields.svelte` — new
|
|
- `src/lib/components/widget/WidgetCreationForm.svelte` — modify: add integration option
|
|
- `src/routes/+layout.svelte` — modify: add IntegrationAlertOverlay
|
|
|
|
## Acceptance Criteria
|
|
- IntegrationWidget fetches data and renders correct renderer based on endpoint type
|
|
- All 6 renderers handle loading, error, and empty states gracefully
|
|
- AppForm shows integration config only when a type is selected
|
|
- Dynamic form fields match the integration's auth schema
|
|
- Test Connection button validates and shows success/failure
|
|
- WidgetCreationForm allows creating integration widgets
|
|
- Alert overlay polls and shows critical alerts at layout level
|
|
|
|
## Notes
|
|
- Renderers should be visually consistent with existing widget styles (card sizes, colors, typography)
|
|
- Use Svelte 5 runes ($state, $derived) for all reactive state
|
|
- Auto-refresh: IntegrationWidget should poll at the endpoint's refreshInterval
|
|
- Big Bang: this phase depends on Phase 1 types but the renderers can be built with mock data initially
|
|
- ⚠️ Temporary breakage: Integration widget type is registered but no real integrations exist yet — widgets will show "no data" until Phase 3+
|
|
|
|
## Review Checklist
|
|
- [ ] All tasks completed
|
|
- [ ] Code follows project conventions
|
|
- [ ] No unintended side effects
|
|
- [ ] Responsive design (mobile + desktop)
|
|
- [ ] Loading/error/empty states handled
|
|
- [ ] Accessible (keyboard nav, screen reader labels)
|
|
|
|
## Handoff to Next Phase
|
|
<!-- Filled in after completion -->
|