Files

T

Claude Code 92bed208e0 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>

2026-04-22 00:43:05 +02:00

6.0 KiB

Raw Blame History

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

System Card
- Hostname
- Uptime (days, hours, minutes)
- Kernel version
CPU Card
- CPU usage percentage
- Progress bar (green < 50%, yellow 50-75%, red > 75%)
- Load average (1 min)
Memory Card
- Memory usage percentage
- Progress bar with color coding
- Used / Total RAM (in GB/MB)
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! 🚀

6.0 KiB Raw Blame History Unescape Escape