docs(bf-53q6): note that feature was already complete
Some checks are pending
CI / test (18.x) (push) Waiting to run
CI / test (20.x) (push) Waiting to run
CI / test (22.x) (push) Waiting to run

The system cgroup memory panel for the web dashboard was already fully implemented:
- Backend: systemCgroupMonitor.ts with memory sampling
- API: /api/system/memory, /api/system/memory/history, /api/alerts/oom
- Frontend: SystemMemoryIndicator (header) + SystemMemoryPanel (detail)
- Integration: App.tsx lines 24, 28, 270, 872-878, 928, 1122-1127

All 2511 tests pass. No additional work required.
This commit is contained in:
jedarden 2026-06-07 10:26:29 -04:00
parent 79d6cf8219
commit 408506837c

View file

@ -1,53 +1,53 @@
# bf-53q6: System Cgroup Memory Panel - Already Complete
# Task bf-53q6: System cgroup memory panel for web dashboard
## Task
Add system cgroup memory panel to web dashboard (real-time utilization + OOM event counter)
## Status: Feature Already Complete
## Status
**ALREADY COMPLETE** - This bead was implemented in prior commits.
This task requested adding a system cgroup memory panel to the FABRIC web dashboard with:
- Current cgroup memory usage vs MemoryHigh (progress bar with color coding)
- 5-minute sparkline of memory.current sampled every 10s
- oom_kill counter from memory.events
- Swap usage if enabled
## Implementation Details
## Implementation Summary
### Backend (src/systemCgroupMonitor.ts + src/web/server.ts)
- `systemCgroupMonitor.ts` reads cgroup memory stats from `/sys/fs/cgroup/user.slice/user-1001.slice/`
- memory.current (usage)
- memory.high (soft limit)
- memory.max (hard limit)
- memory.events (oom_kill counter)
- memory.swap.current (swap usage)
- Background sampler runs every 10s, maintaining 30-sample history (5 minutes)
- API endpoints:
- `GET /api/system/memory` - current status
- `GET /api/system/memory/history` - sparkline data
- `GET /api/system/memory/summary` - formatted summary
The feature was already fully implemented in the codebase:
### Backend (src/systemCgroupMonitor.ts)
- `getSystemMemoryStatus()` - Reads cgroup memory stats from /sys/fs/cgroup/user.slice/user-1001.slice/
- `getMemoryHistory()` - Returns 5-minute history (30 samples @ 10s intervals)
- `startMemorySampler()` - Background sampler (started in server.ts at line 1745)
- OOM kill parsing from memory.events
- Swap usage reading from memory.swap.current
### API Endpoints (src/web/server.ts)
- `GET /api/system/memory` - Returns current memory status with formatted values
- `GET /api/system/memory/history` - Returns memory history for sparkline
- `GET /api/alerts/oom` - Returns OOM risk alert
### Frontend Components
- `SystemMemoryIndicator.tsx` (7.5KB)
- Compact progress bar (green <70%, yellow 70-90%, red >90%)
- 5-minute sparkline (30 bars, sampled every 10s)
- OOM kill counter badge
- Swap indicator
- Updates every 10s via polling
1. **SystemMemoryIndicator.tsx** (compact indicator in fleet header)
- Progress bar (green <70%, yellow 70-90%, red >90%)
- 5-minute sparkline (30 samples)
- OOM kill counter (💀 icon)
- Swap indicator (🔁 icon)
- `SystemMemoryPanel.tsx` (23KB)
- Full detail modal with all cgroup stats
- System memory section (total, available)
- Swap section (total, free, used bar)
- FABRIC process RSS
- OOM risk legend
- Refresh button
2. **SystemMemoryPanel.tsx** (full detail panel)
- All above features plus:
- Detailed memory sections (Cgroup, System, Swap, FABRIC Process)
- OOM risk legend
- Auto-refresh every 5 seconds
### Integration (App.tsx)
- SystemMemoryIndicator in fleet header (line 928)
- SystemMemoryPanel as modal (lines 1122-1125)
- Toggle button in header (lines 872-877)
## Related Commits
- `81b57e6` refactor(bf-53q6): add SystemMemoryIndicator to fleet header and clean up cgroup monitor
- `83baf06` feat(bf-53q6): integrate SystemMemoryPanel into FABRIC web dashboard
- `820e509` feat(bf-53q6): integrate SystemMemoryPanel into FABRIC web dashboard
### Integration (src/web/frontend/src/App.tsx)
- Line 24: Import SystemMemoryIndicator
- Line 28: Import SystemMemoryPanel
- Line 928: Indicator in fleet header
- Lines 1122-1127: Full panel with visibility toggle
- Lines 872-878: Toggle button in header
## Verification
- ✅ Web build successful (`npm run build:web`)
- ✅ Type check passes (`tsc --noEmit`, excluding unrelated OTLP test errors)
- ✅ All files committed and pushed
- All 2511 tests pass
- Memory sampler runs at 10s intervals (configured in server.ts)
- UI components properly integrated in the dashboard
No additional work required.