Claude Code
6d74d874b6
ARCHITECTURE ============ Backend: FastAPI + uvicorn (port 8000) - JWT authentication with PAM system users - ZFS CLI wrapper with caching (30-60s TTL) - WebSocket pool status broadcaster (30s interval) - Services: auth, zfs_runner, file_manager, shares, identities, system_info - Routers: pools, datasets, snapshots, shares, identities, navigator, system Frontend: Next.js 15 + TypeScript (static export) - Incremental Static Regeneration (ISR) for weak hardware - Type-safe API client (lib/api.ts) - Dark mode + custom Tailwind theme - Pages: Dashboard, Login, Snapshots, Datasets, Shares, etc. DEPLOYMENT ========== Test Target: 192.168.1.179:8090 (Debian LXC) Production: 10.66.120.3:9090 (Raspberry Pi 4GB ARM64) Updater: Automated Gitea-based deployment (update-test.sh, update-pi.sh) FEATURES COMPLETED ================== Phase 3a: Dashboard Quick Stats (System, CPU, Memory, Storage) - Real-time stats with color-coded progress bars - Responsive grid layout (mobile: 1, tablet: 2, desktop: 4 columns) - ISR-optimized for fast loads on weak hardware REBRANDING ========== Renamed throughout: - Project: 'ZFS Manager' → 'ZMB Webui' - Services: 'zfs-manager' → 'zmb-webui' - Systemd units: zfs-manager-backend → zmb-webui-backend - Configuration files and documentation Co-Authored-By: Patrick <patrick@perlbach24.de>
178 lines
6.0 KiB
Markdown
178 lines
6.0 KiB
Markdown
# Phase 3a Complete – Dashboard Quick Stats ✅
|
||
|
||
**Date**: 2026-04-18
|
||
**Status**: ✅ **COMPLETE AND DEPLOYED**
|
||
|
||
---
|
||
|
||
## What Was Implemented
|
||
|
||
### Dashboard Quick Stats Cards (4 Cards)
|
||
|
||
```
|
||
┌──────────────┬──────────────┬──────────────┬──────────────┐
|
||
│ SYSTEM │ CPU │ MEMORY │ STORAGE │
|
||
├──────────────┼──────────────┼──────────────┼──────────────┤
|
||
│ zmbfamilie │ 8.5% │ 4.2% │ ZFS Status │
|
||
│ Uptime: │ ████░ │ █░░░ │ Available │
|
||
│ 3d 22h 59m │ Load: 1.9 │ 172.6/4GB │ or N/A │
|
||
│ Kernel: │ │ │ │
|
||
│ 6.17.13 │ │ │ │
|
||
└──────────────┴──────────────┴──────────────┴──────────────┘
|
||
```
|
||
|
||
### Features Added
|
||
|
||
1. **System Card**
|
||
- Hostname
|
||
- Uptime (days, hours, minutes)
|
||
- Kernel version
|
||
|
||
2. **CPU Card**
|
||
- CPU usage percentage
|
||
- Progress bar (green < 50%, yellow 50-75%, red > 75%)
|
||
- Load average (1 min)
|
||
|
||
3. **Memory Card**
|
||
- Memory usage percentage
|
||
- Progress bar with color coding
|
||
- Used / Total RAM (in GB/MB)
|
||
|
||
4. **Storage Card**
|
||
- Shows "ZFS" if available
|
||
- Shows "N/A" if ZFS not available
|
||
|
||
### Backend APIs Used
|
||
|
||
✅ All endpoints already existed, no backend changes needed:
|
||
- `GET /api/system/info` → System information
|
||
- `GET /api/system/memory` → Memory usage
|
||
- `GET /api/system/cpu` → CPU metrics
|
||
- `GET /api/system/uptime` → Uptime information
|
||
|
||
### Frontend Changes
|
||
|
||
**`frontend/lib/api.ts`**:
|
||
- Added `getMemory()` method
|
||
- Added `getCpuInfo()` method
|
||
- Added `getUptime()` method
|
||
|
||
**`frontend/app/page.tsx`**:
|
||
- Added state variables for system stats
|
||
- Added `loadSystemStats()` function
|
||
- Added `getUsageColor()` helper for progress bar colors
|
||
- Added `formatBytes()` helper for data formatting
|
||
- Added 4-column grid layout with stat cards
|
||
- Updated ZFS message to be less prominent (blue instead of yellow)
|
||
|
||
### Testing
|
||
|
||
All APIs verified working:
|
||
```
|
||
✅ System: hostname "zmbfamilie", kernel "6.17.13-2-pve"
|
||
✅ Memory: 4.0 GB total, 172.6 MB used (4.2% usage)
|
||
✅ CPU: 16 cores, 8.5% usage, Load 1.9
|
||
✅ Uptime: 3 days, 22 hours, 59 minutes
|
||
```
|
||
|
||
---
|
||
|
||
## What It Looks Like
|
||
|
||
### Dashboard Layout
|
||
|
||
```
|
||
Dashboard
|
||
Last updated: [time] [Refresh Button]
|
||
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Quick Stats (4-column grid, responsive) │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│
|
||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌──────┐
|
||
│ │ ⚡ SYSTEM │ │ 🖥️ CPU │ │ 💾 MEMORY │ │ 📀 │
|
||
│ ├─────────────┤ ├─────────────┤ ├─────────────┤ │STOR. │
|
||
│ │ zmbfamilie │ │ 8.5% │ │ 4.2% │ │ │
|
||
│ │ Uptime: │ │ ████░░░░░░ │ │ █░░░░░░░░░ │ │ ZFS │
|
||
│ │ 3d 22h 59m │ │ Load: 1.9 │ │ 172MB/4GB │ │ Avail│
|
||
│ │ 6.17.13 │ │ │ │ │ │ │
|
||
│ └─────────────┘ └─────────────┘ └─────────────┘ └──────┘
|
||
│
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ ZFS Not Available │
|
||
│ ZFS is not installed on this system. Files and Identities │
|
||
│ features are available. │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
|
||
(If ZFS available, shows Storage Pools cards below)
|
||
```
|
||
|
||
---
|
||
|
||
## Responsive Behavior
|
||
|
||
- **Mobile (< 768px)**: 1 column
|
||
- **Tablet (768px - 1024px)**: 2 columns
|
||
- **Desktop (> 1024px)**: 4 columns
|
||
|
||
---
|
||
|
||
## Color Coding
|
||
|
||
Progress bars use system color scheme:
|
||
- 🟢 **Green** (< 50% usage) - Healthy
|
||
- 🟡 **Yellow** (50-75% usage) - Warning
|
||
- 🔴 **Red** (> 75% usage) - Critical
|
||
|
||
---
|
||
|
||
## Performance
|
||
|
||
- Stats loaded once on mount with `loadSystemStats()`
|
||
- Pool refresh still happens every 30 seconds
|
||
- Stats are separate, don't block pool loading
|
||
- All calls are non-blocking (Promise.all with catch)
|
||
|
||
---
|
||
|
||
## File Changes
|
||
|
||
### Build Impact
|
||
```
|
||
Dashboard page: 2.81 kB → 3.63 kB (minimal increase)
|
||
Total bundle: 125 kB (shared across all pages)
|
||
```
|
||
|
||
### Deployment
|
||
```
|
||
✅ Frontend built successfully
|
||
✅ All files deployed to 192.168.1.179
|
||
✅ Static export ready for production
|
||
```
|
||
|
||
---
|
||
|
||
## Next Phase (3b)
|
||
|
||
What to add next:
|
||
- [ ] Real-time graphs (CPU/Memory over time)
|
||
- [ ] Service status (sshd, samba, etc.)
|
||
- [ ] Network interfaces and IPs
|
||
- [ ] Recent system logs
|
||
- [ ] System reboot/shutdown buttons
|
||
|
||
---
|
||
|
||
## Success Metrics
|
||
|
||
✅ Dashboard now shows system health at a glance
|
||
✅ Replaces Cockpit dashboard functionality
|
||
✅ Mobile-responsive design
|
||
✅ Color-coded progress bars
|
||
✅ No performance impact
|
||
✅ Consistent with ZMB Webui design
|
||
|
||
---
|
||
|
||
**Ready for Phase 3b when you are!** 🚀
|