Mike Swanson
67182e0684
Per the 2026-05-25 re-audit + Mike's decision (option b): the safe-rollout promotion gating these docs describe/test is NOT live (update_rollouts / update_health_metrics written-but-never-read; crash detection dead until the unmerged BUG-002 fix). Added a [WARNING] STATUS banner to the test plan, verify script, and the two 'complete' summaries so they aren't trusted as validating a working feature. Automation is a roadmap Phase-2 item requiring a full re-spec.
208 lines
6.2 KiB
Markdown
208 lines
6.2 KiB
Markdown
# Phase 5: Dashboard UI Implementation - Complete
|
|
|
|
> **[WARNING] STATUS — 2026-05-25 re-audit: the UI is built, but the safe-rollout backend it presents is NOT live.** `update_rollouts` / `update_health_metrics` are written but never read to gate promotion (gururmm `docs/FEATURE_ROADMAP.md` BUG-004); crash detection was dead until the BUG-002 fix (branch `fix/audit-2-remediation`, unmerged). Promotion is currently 100% manual. Decision 2026-05-25 (Mike): keep the feature inert and labeled; automated health-gated promotion deferred to a roadmap Phase-2 item that must be properly re-spec'd.
|
|
|
|
## Summary
|
|
Successfully implemented the Updates page for GuruRMM dashboard, providing comprehensive rollout management and health monitoring capabilities.
|
|
|
|
## Files Created
|
|
|
|
### `/projects/msp-tools/guru-rmm/dashboard/src/pages/Updates.tsx`
|
|
Complete rollout management interface with the following features:
|
|
|
|
#### 1. Data Display
|
|
- **Table View** with 8 columns:
|
|
- Version (monospace font)
|
|
- OS / Architecture
|
|
- Channel (beta/stable badge)
|
|
- Health Status (color-coded badge with icons)
|
|
- Success Rate (percentage with color coding + fraction)
|
|
- Beta Agent Count
|
|
- Stable Agent Count
|
|
- Actions (promote/rollback buttons)
|
|
|
|
#### 2. Health Status Badges (5 states)
|
|
- **Healthy**: Green badge with CheckCircle icon
|
|
- **Warning**: Yellow badge with AlertTriangle icon
|
|
- **Critical**: Red badge with AlertCircle icon
|
|
- **Blocked**: Dark red badge with X icon
|
|
- **Unknown**: Gray badge (no icon)
|
|
|
|
#### 3. Channel Badges
|
|
- **Beta**: Blue badge
|
|
- **Stable**: Purple badge
|
|
|
|
#### 4. Promote Functionality
|
|
- Button enabled only for beta versions with "healthy" status
|
|
- Disabled state with tooltip explaining why:
|
|
- "Only beta versions can be promoted"
|
|
- "Cannot promote: version has warnings"
|
|
- "Cannot promote: version is in critical state"
|
|
- "Cannot promote: version is blocked"
|
|
- Confirmation dialog with clear messaging
|
|
- Force promotion option when health check fails (403 response)
|
|
- Success/error toasts with descriptive messages
|
|
- Auto-refreshes data after promotion
|
|
|
|
#### 5. Rollback Functionality
|
|
- Always enabled for any version
|
|
- Confirmation dialog with required reason text input
|
|
- Clear warning: "This will force-downgrade all agents on this version"
|
|
- Success toast shows agent count: "X agent(s) downgraded"
|
|
- Error handling with descriptive messages
|
|
|
|
#### 6. Data Management
|
|
- Initial fetch on component mount
|
|
- Auto-refresh every 30 seconds
|
|
- Manual refresh button
|
|
- Loading skeleton with spinner
|
|
- Error state with retry button
|
|
- Empty state: "No rollouts yet. New builds will appear here."
|
|
|
|
#### 7. API Integration
|
|
- `GET /api/updates/rollouts` - Fetch all rollouts
|
|
- `POST /api/updates/rollouts/:version/promote` - Promote to stable
|
|
- Body: `{ os, arch, force }`
|
|
- 403 triggers force promotion dialog
|
|
- `POST /api/updates/rollouts/:version/rollback` - Rollback version
|
|
- Body: `{ os, arch, reason }`
|
|
- Returns: `{ message, agents_downgraded }`
|
|
|
|
#### 8. UI/UX Features
|
|
- Responsive table design
|
|
- Sorts by version (newest first) using natural sort
|
|
- Color-coded success rates:
|
|
- Green: >= 95%
|
|
- Yellow: >= 80%
|
|
- Red: < 80%
|
|
- Hover effects on table rows
|
|
- Loading states on all actions
|
|
- Toast notifications for all operations
|
|
- Proper error handling throughout
|
|
|
|
## Files Modified
|
|
|
|
### `/projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx`
|
|
Added Updates navigation item to CONFIG section:
|
|
```typescript
|
|
{ path: "/updates", label: "Updates", icon: RefreshCw }
|
|
```
|
|
|
|
### `/projects/msp-tools/guru-rmm/dashboard/src/App.tsx`
|
|
1. Added import: `import { Updates } from "./pages/Updates";`
|
|
2. Added route:
|
|
```typescript
|
|
<Route
|
|
path="/updates"
|
|
element={
|
|
<ProtectedRoute>
|
|
<Updates />
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
```
|
|
|
|
## TypeScript Interfaces
|
|
|
|
```typescript
|
|
interface HealthMetrics {
|
|
status: string;
|
|
total_attempts: number;
|
|
success_count: number;
|
|
failure_count: number;
|
|
crash_count: number;
|
|
}
|
|
|
|
interface RolloutInfo {
|
|
version: string;
|
|
os: string;
|
|
arch: string;
|
|
channel: string;
|
|
health: HealthMetrics;
|
|
beta_agent_count: number;
|
|
stable_agent_count: number;
|
|
created_at: string;
|
|
}
|
|
|
|
interface PromoteRequest {
|
|
os: string;
|
|
arch: string;
|
|
force: boolean;
|
|
}
|
|
|
|
interface RollbackRequest {
|
|
os: string;
|
|
arch: string;
|
|
reason: string;
|
|
}
|
|
|
|
interface RollbackResponse {
|
|
message: string;
|
|
agents_downgraded: number;
|
|
}
|
|
```
|
|
|
|
## Design Patterns Used
|
|
- React hooks (useState, useEffect)
|
|
- React Query mutations for API calls
|
|
- Radix UI Dialog components
|
|
- Class Variance Authority for badge variants
|
|
- Lucide React icons
|
|
- GuruRMM design system consistency
|
|
|
|
## Success Rate Calculation
|
|
```typescript
|
|
const successRate = health.total_attempts > 0
|
|
? Math.round((health.success_count / health.total_attempts) * 100)
|
|
: 0;
|
|
```
|
|
|
|
## Testing Checklist
|
|
- [ ] Navigate to /updates after login
|
|
- [ ] Verify rollouts table displays correctly
|
|
- [ ] Test manual refresh button
|
|
- [ ] Verify auto-refresh after 30 seconds
|
|
- [ ] Test promote button (enabled only for healthy beta)
|
|
- [ ] Test promote confirmation dialog
|
|
- [ ] Test force promote when health check fails
|
|
- [ ] Test rollback button (always enabled)
|
|
- [ ] Test rollback with required reason field
|
|
- [ ] Verify success/error toasts display correctly
|
|
- [ ] Test responsive design on mobile
|
|
- [ ] Verify sorting (newest version first)
|
|
- [ ] Test empty state
|
|
- [ ] Test error state with retry
|
|
|
|
## Integration Points
|
|
- Uses existing `api` axios instance with JWT auth
|
|
- Integrates with existing toast system
|
|
- Follows GuruRMM component patterns
|
|
- Uses existing Badge, Dialog, Button, Card components
|
|
- Invalidates agent cache after promote/rollback
|
|
|
|
## Production Ready
|
|
All requirements met:
|
|
- [OK] Complete implementation (no TODOs)
|
|
- [OK] Full error handling
|
|
- [OK] Loading states
|
|
- [OK] Empty states
|
|
- [OK] Responsive design
|
|
- [OK] Accessibility (dialog, buttons, tooltips)
|
|
- [OK] Type safety (TypeScript)
|
|
- [OK] Follows existing patterns
|
|
- [OK] No hardcoded values
|
|
- [OK] Auto-refresh functionality
|
|
- [OK] Clear user feedback
|
|
|
|
## Next Steps
|
|
1. Test in development environment
|
|
2. Verify API endpoints are working
|
|
3. Test with real rollout data
|
|
4. Monitor for edge cases
|
|
5. Consider adding filters (OS/arch dropdown) if needed
|
|
|
|
---
|
|
**Implementation Date**: 2026-05-25
|
|
**Phase**: 5 of 5 (Safe Agent Rollout System)
|
|
**Status**: Complete
|