From bd09590c01512974aded7677fedc5fb53b056fa6 Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Thu, 12 Mar 2026 23:13:36 -0500 Subject: [PATCH] docs(07-01): complete config history UI timeline plan - SUMMARY.md with plan execution results - STATE.md updated to phase 7 complete - ROADMAP.md and REQUIREMENTS.md updated Co-Authored-By: Claude Opus 4.6 --- .planning/REQUIREMENTS.md | 8 +- .planning/ROADMAP.md | 8 +- .planning/STATE.md | 31 ++++--- .../07-config-history-ui/07-01-SUMMARY.md | 89 +++++++++++++++++++ 4 files changed, 114 insertions(+), 22 deletions(-) create mode 100644 .planning/phases/07-config-history-ui/07-01-SUMMARY.md diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index 2acbe80..46263d7 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -38,8 +38,8 @@ ### Frontend -- [ ] **UI-01**: Device page shows Configuration History section below Remote Access -- [ ] **UI-02**: Timeline displays change entries with component, summary, and timestamp +- [x] **UI-01**: Device page shows Configuration History section below Remote Access +- [x] **UI-02**: Timeline displays change entries with component, summary, and timestamp - [ ] **UI-03**: Diff viewer shows unified diff with add/remove highlighting - [ ] **UI-04**: User can download snapshot as `router-{device_name}-{timestamp}.rsc` @@ -87,8 +87,8 @@ | API-02 | Phase 6: History API | Complete | | API-03 | Phase 6: History API | Complete | | API-04 | Phase 6: History API | Complete | -| UI-01 | Phase 7: Config History UI | Pending | -| UI-02 | Phase 7: Config History UI | Pending | +| UI-01 | Phase 7: Config History UI | Complete | +| UI-02 | Phase 7: Config History UI | Complete | | UI-03 | Phase 8: Diff Viewer & Download | Pending | | UI-04 | Phase 8: Diff Viewer & Download | Pending | | OBS-01 | Phase 10: Audit & Observability | Pending | diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index d658f00..15d108e 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -18,7 +18,7 @@ Decimal phases appear between their surrounding integers in numeric order. - [x] **Phase 4: Manual Backup Trigger** - API endpoint for on-demand config backup via poller (completed 2026-03-13) - [x] **Phase 5: Diff Engine** - Unified diff generation and structured change parsing (completed 2026-03-13) - [x] **Phase 6: History API** - REST endpoints for timeline, snapshot view, and diff retrieval with RBAC (completed 2026-03-13) -- [ ] **Phase 7: Config History UI** - Timeline section on device page with change summaries +- [x] **Phase 7: Config History UI** - Timeline section on device page with change summaries (completed 2026-03-13) - [ ] **Phase 8: Diff Viewer & Download** - Unified diff display with syntax highlighting and .rsc download - [ ] **Phase 9: Retention & Cleanup** - 90-day retention policy with automatic snapshot deletion - [ ] **Phase 10: Audit & Observability** - Audit event logging for all config backup operations @@ -120,10 +120,10 @@ Plans: 1. Device detail page shows a "Configuration History" section below the Remote Access section 2. Timeline displays change entries with component badge, summary text, and relative timestamp 3. Timeline loads via TanStack Query and shows loading/empty states appropriately -**Plans**: TBD +**Plans**: 1 plan Plans: -- [ ] 07-01: Configuration History section and change timeline component +- [ ] 07-01-PLAN.md — API client, ConfigHistorySection component, and device detail page wiring ### Phase 8: Diff Viewer & Download **Goal**: Users can view unified diffs with syntax highlighting and download any snapshot as a .rsc file @@ -180,7 +180,7 @@ Note: Phase 9 depends only on Phase 3 and Phase 10 depends on Phases 3/4/5, so P | 4. Manual Backup Trigger | 1/1 | Complete | 2026-03-13 | | 5. Diff Engine | 2/2 | Complete | 2026-03-13 | | 6. History API | 2/2 | Complete | 2026-03-13 | -| 7. Config History UI | 0/1 | Not started | - | +| 7. Config History UI | 1/1 | Complete | 2026-03-13 | | 8. Diff Viewer & Download | 0/2 | Not started | - | | 9. Retention & Cleanup | 0/1 | Not started | - | | 10. Audit & Observability | 0/1 | Not started | - | diff --git a/.planning/STATE.md b/.planning/STATE.md index 6a7d35c..f579b51 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -2,15 +2,15 @@ gsd_state_version: 1.0 milestone: v9.6 milestone_name: milestone -status: executing -stopped_at: Completed 06-02-PLAN.md -last_updated: "2026-03-13T04:04:21.853Z" -last_activity: 2026-03-13 -- Completed 06-01 config history timeline endpoint +status: completed +stopped_at: Completed 07-01-PLAN.md +last_updated: "2026-03-13T04:14:00.000Z" +last_activity: 2026-03-13 -- Completed 07-01 config history UI timeline component progress: total_phases: 10 - completed_phases: 6 - total_plans: 9 - completed_plans: 9 + completed_phases: 7 + total_plans: 10 + completed_plans: 10 percent: 100 --- @@ -21,14 +21,14 @@ progress: See: .planning/PROJECT.md (updated 2026-03-12) **Core value:** Operators can see exactly what changed on a router and when, with reliable config snapshots for download -**Current focus:** Phase 6: History API +**Current focus:** Phase 7: Config History UI ## Current Position -Phase: 6 of 10 (History API) -- COMPLETE -Plan: 2 of 2 in current phase (all complete) -Status: Phase 6 complete -Last activity: 2026-03-13 -- Completed 06-02 snapshot view and diff retrieval endpoints +Phase: 7 of 10 (Config History UI) -- COMPLETE +Plan: 1 of 1 in current phase (all complete) +Status: Phase 7 complete +Last activity: 2026-03-13 -- Completed 07-01 config history UI timeline component Progress: [██████████] 100% @@ -57,6 +57,7 @@ Progress: [██████████] 100% | Phase 05 P02 | 2min | 2 tasks | 4 files | | Phase 06 P01 | 2min | 2 tasks | 4 files | | Phase 06 P02 | 2min | 2 tasks | 3 files | +| Phase 07 P01 | 3min | 2 tasks | 3 files | ## Accumulated Context @@ -86,6 +87,8 @@ Recent decisions affecting current work: - [Phase 06]: Pagination defaults limit=50, offset=0 with FastAPI Query validation (ge=1, le=200) - [Phase 06]: Transit decrypt in get_snapshot with try/finally for clean openbao lifecycle - [Phase 06]: 500 error wrapping for Transit decrypt failures in router layer, not service +- [Phase 07]: Reimplemented formatRelativeTime locally in ConfigHistorySection (matches BackupTimeline pattern) +- [Phase 07]: 60s refetchInterval polling for near-real-time config change visibility ### Pending Todos @@ -97,6 +100,6 @@ None yet. ## Session Continuity -Last session: 2026-03-13T04:04:21.850Z -Stopped at: Completed 06-02-PLAN.md +Last session: 2026-03-13T04:14:00.000Z +Stopped at: Completed 07-01-PLAN.md Resume file: None diff --git a/.planning/phases/07-config-history-ui/07-01-SUMMARY.md b/.planning/phases/07-config-history-ui/07-01-SUMMARY.md new file mode 100644 index 0000000..481eb00 --- /dev/null +++ b/.planning/phases/07-config-history-ui/07-01-SUMMARY.md @@ -0,0 +1,89 @@ +--- +phase: 07-config-history-ui +plan: 01 +subsystem: ui +tags: [react, tanstack-query, timeline, config-history] + +requires: + - phase: 06-history-api + provides: GET /api/tenants/{tid}/devices/{did}/config-history endpoint +provides: + - ConfigHistorySection component with timeline rendering + - configHistoryApi.list() API client function + - Configuration history visible on device detail overview tab +affects: [07-config-history-ui] + +tech-stack: + added: [] + patterns: [timeline component pattern matching BackupTimeline.tsx] + +key-files: + created: + - frontend/src/components/config/ConfigHistorySection.tsx + modified: + - frontend/src/lib/api.ts + - frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx + +key-decisions: + - "Reimplemented formatRelativeTime locally rather than extracting shared util (matches BackupTimeline pattern)" + - "Poll interval 60s via refetchInterval for near-real-time change visibility" + +patterns-established: + - "Config history timeline: vertical dot timeline with component badge, summary, line delta, relative time" + +requirements-completed: [UI-01, UI-02] + +duration: 3min +completed: 2026-03-13 +--- + +# Phase 7 Plan 1: Config History UI Summary + +**ConfigHistorySection timeline component on device detail page, fetching change entries via TanStack Query with 60s polling** + +## Performance + +- **Duration:** 3 min +- **Started:** 2026-03-13T04:11:08Z +- **Completed:** 2026-03-13T04:14:00Z +- **Tasks:** 2 +- **Files modified:** 3 + +## Accomplishments +- Added configHistoryApi.list() and ConfigChangeEntry interface to api.ts +- Created ConfigHistorySection with vertical timeline, loading skeleton, and empty state +- Wired component into device detail overview tab below Interface Utilization + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: API client and ConfigHistorySection component** - `6bd2451` (feat) +2. **Task 2: Wire ConfigHistorySection into device detail page** - `36861ff` (feat) + +## Files Created/Modified +- `frontend/src/lib/api.ts` - Added ConfigChangeEntry interface and configHistoryApi.list() +- `frontend/src/components/config/ConfigHistorySection.tsx` - Timeline component with loading/empty/data states +- `frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx` - Import and render ConfigHistorySection + +## Decisions Made +- Reimplemented formatRelativeTime locally (same pattern as BackupTimeline.tsx) rather than extracting to shared util -- keeps components self-contained +- Used 60s refetchInterval for polling new config changes + +## Deviations from Plan + +None - plan executed exactly as written. + +## Issues Encountered +None + +## User Setup Required +None - no external service configuration required. + +## Next Phase Readiness +- Config history timeline renders on device overview tab +- Ready for any future detail/drill-down views on individual changes + +--- +*Phase: 07-config-history-ui* +*Completed: 2026-03-13*