zmb-webui/frontend

ZMB Webui Frontend

Modern Next.js 15 web UI for ZFS storage management. Built with TypeScript, Tailwind CSS, and ISR optimization for performance on resource-constrained systems.

Features

• Dashboard: Real-time pool status, capacity visualization, health monitoring
• Snapshots: Create, manage, and delete ZFS snapshots
• File Manager: Browse and manage files (coming soon)
• Authentication: JWT-based login with password hashing
• Responsive Design: Works on mobile, tablet, and desktop
• Performance: ISR (Incremental Static Regeneration) for fast page loads
• Dark Mode Ready: Full dark mode support with Tailwind CSS

Quick Start

Prerequisites

• Node.js 18+ (for development)
• npm or yarn
• FastAPI backend running on http://localhost:8000

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000 in your browser

Production Build

# Build for production
npm run build

# Start production server
npm start

# Or export to static HTML
npm run export

Configuration

Copy .env.example to .env.local and update the API URL:

cp .env.example .env.local

Edit .env.local:

NEXT_PUBLIC_API_URL=http://your-backend-host:8000

Architecture

Pages

• / - Dashboard (pool overview)
• /login - Authentication
• /snapshots - Snapshot management
• /files - File browser (coming soon)

Components

• PoolCard - Individual pool display with health/capacity
• Header - Navigation and user menu
• UI components (Card, Button, Badge, Progress)

API Client

lib/api.ts - TypeScript client for FastAPI backend with:

• Authentication (login/logout)
• Pool management
• Snapshot operations
• File browsing
• System information

Performance Optimizations

For 4GB RAM Systems

• ISR Strategy:

  • Dashboard revalidates every 30s
  • Snapshots revalidate every 60s
  • Static pages cached long-term

• Bundle Optimization:

  • Tree-shaking for unused imports
  • Dynamic imports for heavy components
  • Compression enabled by default

• Caching:

  • Browser caching for assets
  • In-memory API response caching
  • Service worker support ready

Development

Add a New Page

# Create app/new-feature/page.tsx
mkdir app/new-feature
touch app/new-feature/page.tsx

Add a New Component

# Create components/MyComponent.tsx
touch components/MyComponent.tsx

Use the API Client

import { api } from "@/lib/api"

// Login
await api.login("admin", "password")

// Get pools
const pools = await api.getPools()

// Get snapshots
const snapshots = await api.getSnapshots()

Deployment

On Raspberry Pi / ARM64

# Build on faster x86 machine
npm run build

# Copy .next directory to Pi
scp -r .next pi@10.66.120.3:/opt/zmb-webui/frontend/

# Or build directly on Pi (slower)
npm run build
npm start

With nginx

server {
    listen 443 ssl http2;
    server_name zmb-webui.example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Systemd Service

See ../deploy/zmb-webui-frontend.service for service configuration.

Troubleshooting

Port 3000 already in use

# Use different port
npm run dev -- -p 3001

API connection refused

Check .env.local points to correct backend URL:

NEXT_PUBLIC_API_URL=http://localhost:8000

Build hangs on ARM64

The Node.js build process can be slow on Raspberry Pi. Either:

1. Build on faster x86 machine and copy artifacts
2. Increase available RAM/swap
3. Use pre-built Docker image

Contributing

See main project README for contribution guidelines.

License

Same as parent project