ZMB Webui: Complete Project – Rebrand & Initial Clean Commit
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>
This commit is contained in:
Claude Code
@@ -0,0 +1,177 @@
|
||||
# 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!** 🚀
|
||||
Reference in New Issue
Block a user