monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(07-01): complete config history UI timeline plan

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-12 23:13:36 -05:00
parent 36861fffea
commit bd09590c01
4 changed files with 114 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.planning/REQUIREMENTS.md
View File

@@ -38,8 +38,8 @@
### Frontend ### Frontend
- [ ] **UI-01**: Device page shows Configuration History section below Remote Access - [x] **UI-01**: Device page shows Configuration History section below Remote Access
- [ ] **UI-02**: Timeline displays change entries with component, summary, and timestamp - [x] **UI-02**: Timeline displays change entries with component, summary, and timestamp
- [ ] **UI-03**: Diff viewer shows unified diff with add/remove highlighting - [ ] **UI-03**: Diff viewer shows unified diff with add/remove highlighting
- [ ] **UI-04**: User can download snapshot as `router-{device_name}-{timestamp}.rsc` - [ ] **UI-04**: User can download snapshot as `router-{device_name}-{timestamp}.rsc`
@@ -87,8 +87,8 @@
| API-02 | Phase 6: History API | Complete | | API-02 | Phase 6: History API | Complete |
| API-03 | Phase 6: History API | Complete | | API-03 | Phase 6: History API | Complete |
| API-04 | Phase 6: History API | Complete | | API-04 | Phase 6: History API | Complete |
| UI-01 | Phase 7: Config History UI | Pending | | UI-01 | Phase 7: Config History UI | Complete |
| UI-02 | Phase 7: Config History UI | Pending | | UI-02 | Phase 7: Config History UI | Complete |
| UI-03 | Phase 8: Diff Viewer & Download | Pending | | UI-03 | Phase 8: Diff Viewer & Download | Pending |
| UI-04 | Phase 8: Diff Viewer & Download | Pending | | UI-04 | Phase 8: Diff Viewer & Download | Pending |
| OBS-01 | Phase 10: Audit & Observability | Pending | | OBS-01 | Phase 10: Audit & Observability | Pending |

8
.planning/ROADMAP.md
View File

@@ -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 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 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) - [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 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 9: Retention & Cleanup** - 90-day retention policy with automatic snapshot deletion
- [ ] **Phase 10: Audit & Observability** - Audit event logging for all config backup operations - [ ] **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 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 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 3. Timeline loads via TanStack Query and shows loading/empty states appropriately
**Plans**: TBD **Plans**: 1 plan
Plans: 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 ### Phase 8: Diff Viewer & Download
**Goal**: Users can view unified diffs with syntax highlighting and download any snapshot as a .rsc file **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 | | 4. Manual Backup Trigger | 1/1 | Complete | 2026-03-13 |
| 5. Diff Engine | 2/2 | Complete | 2026-03-13 | | 5. Diff Engine | 2/2 | Complete | 2026-03-13 |
| 6. History API | 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 | - | | 8. Diff Viewer & Download | 0/2 | Not started | - |
| 9. Retention & Cleanup | 0/1 | Not started | - | | 9. Retention & Cleanup | 0/1 | Not started | - |
| 10. Audit & Observability | 0/1 | Not started | - | | 10. Audit & Observability | 0/1 | Not started | - |

31
.planning/STATE.md
View File

@@ -2,15 +2,15 @@
gsd_state_version: 1.0 gsd_state_version: 1.0
milestone: v9.6 milestone: v9.6
milestone_name: milestone milestone_name: milestone
status: executing status: completed
stopped_at: Completed 06-02-PLAN.md stopped_at: Completed 07-01-PLAN.md
last_updated: "2026-03-13T04:04:21.853Z" last_updated: "2026-03-13T04:14:00.000Z"
last_activity: 2026-03-13 -- Completed 06-01 config history timeline endpoint last_activity: 2026-03-13 -- Completed 07-01 config history UI timeline component
progress: progress:
total_phases: 10 total_phases: 10
completed_phases: 6 completed_phases: 7
total_plans: 9 total_plans: 10
completed_plans: 9 completed_plans: 10
percent: 100 percent: 100
--- ---
@@ -21,14 +21,14 @@ progress:
See: .planning/PROJECT.md (updated 2026-03-12) 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 **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 ## Current Position
Phase: 6 of 10 (History API) -- COMPLETE Phase: 7 of 10 (Config History UI) -- COMPLETE
Plan: 2 of 2 in current phase (all complete) Plan: 1 of 1 in current phase (all complete)
Status: Phase 6 complete Status: Phase 7 complete
Last activity: 2026-03-13 -- Completed 06-02 snapshot view and diff retrieval endpoints Last activity: 2026-03-13 -- Completed 07-01 config history UI timeline component
Progress: [██████████] 100% Progress: [██████████] 100%
@@ -57,6 +57,7 @@ Progress: [██████████] 100%
| Phase 05 P02 | 2min | 2 tasks | 4 files | | Phase 05 P02 | 2min | 2 tasks | 4 files |
| Phase 06 P01 | 2min | 2 tasks | 4 files | | Phase 06 P01 | 2min | 2 tasks | 4 files |
| Phase 06 P02 | 2min | 2 tasks | 3 files | | Phase 06 P02 | 2min | 2 tasks | 3 files |
| Phase 07 P01 | 3min | 2 tasks | 3 files |
## Accumulated Context ## 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]: 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]: 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 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 ### Pending Todos
@@ -97,6 +100,6 @@ None yet.
## Session Continuity ## Session Continuity
Last session: 2026-03-13T04:04:21.850Z Last session: 2026-03-13T04:14:00.000Z
Stopped at: Completed 06-02-PLAN.md Stopped at: Completed 07-01-PLAN.md
Resume file: None Resume file: None

89
.planning/phases/07-config-history-ui/07-01-SUMMARY.md Normal file
View File

@@ -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*