Files
zmb-webui/frontend/lib/utils.ts
T
Claude Code 6d74d874b6 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

69 lines
1.8 KiB
TypeScript

export function formatBytes(bytes: number, decimals = 2): string {
if (bytes === 0) return "0 Bytes"
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ["Bytes", "KB", "MB", "GB", "TB"]
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i]
}
export function formatPercent(used: number, total: number): string {
if (total === 0) return "0%"
return ((used / total) * 100).toFixed(1) + "%"
}
export function formatUptime(seconds: number): string {
const days = Math.floor(seconds / 86400)
const hours = Math.floor((seconds % 86400) / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
if (days > 0) {
return `${days}d ${hours}h ${minutes}m`
} else if (hours > 0) {
return `${hours}h ${minutes}m`
} else {
return `${minutes}m`
}
}
export function formatDate(timestamp: number): string {
const date = new Date(timestamp * 1000)
return date.toLocaleDateString() + " " + date.toLocaleTimeString()
}
export function getPoolHealthColor(health: string): string {
switch (health) {
case "ONLINE":
return "text-green-600"
case "DEGRADED":
return "text-yellow-600"
case "FAULTED":
case "OFFLINE":
case "UNAVAIL":
return "text-red-600"
default:
return "text-gray-600"
}
}
export function getPoolHealthBgColor(health: string): string {
switch (health) {
case "ONLINE":
return "bg-green-100"
case "DEGRADED":
return "bg-yellow-100"
case "FAULTED":
case "OFFLINE":
case "UNAVAIL":
return "bg-red-100"
default:
return "bg-gray-100"
}
}
export function cn(...classes: (string | undefined | null | false)[]): string {
return classes.filter(Boolean).join(" ")
}