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,256 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { api } from "@/lib/api"
|
||||
import { Header } from "@/components/Header"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { AlertCircle, RefreshCw } from "lucide-react"
|
||||
|
||||
export default function FileSharingPage() {
|
||||
const router = useRouter()
|
||||
const [activeTab, setActiveTab] = useState<"samba" | "nfs">("samba")
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState<string | null>(null)
|
||||
|
||||
// Samba state
|
||||
const [sambaConfig, setSambaConfig] = useState<string>("")
|
||||
const [sambaConfigOriginal, setSambaConfigOriginal] = useState<string>("")
|
||||
const [sambaEditing, setSambaEditing] = useState(false)
|
||||
|
||||
// NFS state
|
||||
const [nfsConfig, setNfsConfig] = useState<string>("")
|
||||
const [nfsConfigOriginal, setNfsConfigOriginal] = useState<string>("")
|
||||
const [nfsEditing, setNfsEditing] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token")
|
||||
if (!token) {
|
||||
router.push("/login")
|
||||
return
|
||||
}
|
||||
loadConfigs()
|
||||
}, [router])
|
||||
|
||||
const loadConfigs = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const [samba, nfs] = await Promise.all([
|
||||
api.getSambaGlobalConfig().catch(() => ({})),
|
||||
api.getNfsGlobalConfig().catch(() => ({ exports: "" })),
|
||||
])
|
||||
|
||||
const sambaStr = typeof samba === "object" ? JSON.stringify(samba, null, 2) : String(samba)
|
||||
const nfsStr = nfs?.exports || ""
|
||||
|
||||
setSambaConfig(sambaStr)
|
||||
setSambaConfigOriginal(sambaStr)
|
||||
setNfsConfig(nfsStr)
|
||||
setNfsConfigOriginal(nfsStr)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load configurations")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSambaSave = async () => {
|
||||
try {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
await api.setSambaGlobalConfig(sambaConfig)
|
||||
setSambaConfigOriginal(sambaConfig)
|
||||
setSambaEditing(false)
|
||||
setSuccess("Samba configuration saved successfully")
|
||||
setTimeout(() => setSuccess(null), 3000)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to save Samba configuration")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleNfsSave = async () => {
|
||||
try {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setSuccess(null)
|
||||
|
||||
await api.setNfsGlobalConfig(nfsConfig)
|
||||
setNfsConfigOriginal(nfsConfig)
|
||||
setNfsEditing(false)
|
||||
setSuccess("NFS configuration saved successfully")
|
||||
setTimeout(() => setSuccess(null), 3000)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to save NFS configuration")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
|
||||
<main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">File Sharing Configuration</h1>
|
||||
<p className="text-muted-foreground mt-1">Manage Samba (SMB) and NFS global settings</p>
|
||||
</div>
|
||||
<Button onClick={loadConfigs} disabled={loading} variant="outline">
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Error Alert */}
|
||||
{error && (
|
||||
<div className="mb-6 flex items-center gap-3 rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Alert */}
|
||||
{success && (
|
||||
<div className="mb-6 flex items-center gap-3 rounded-md border border-green-600/40 bg-green-500/10 px-4 py-3 text-sm text-green-600">
|
||||
✓ {success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mb-6 border-b border-border">
|
||||
<button
|
||||
onClick={() => setActiveTab("samba")}
|
||||
className={`px-4 py-3 font-medium border-b-2 transition-colors ${
|
||||
activeTab === "samba"
|
||||
? "border-accent text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
Samba (SMB) Configuration
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("nfs")}
|
||||
className={`px-4 py-3 font-medium border-b-2 transition-colors ${
|
||||
activeTab === "nfs"
|
||||
? "border-accent text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
NFS Configuration
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Samba Tab */}
|
||||
{activeTab === "samba" && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Samba Global Configuration</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{sambaEditing && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setSambaConfig(sambaConfigOriginal)
|
||||
setSambaEditing(false)
|
||||
}}
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
{sambaEditing ? (
|
||||
<Button onClick={handleSambaSave} disabled={saving || sambaConfig === sambaConfigOriginal}>
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => setSambaEditing(true)} variant="default">
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{sambaEditing ? (
|
||||
<textarea
|
||||
value={sambaConfig}
|
||||
onChange={(e) => setSambaConfig(e.target.value)}
|
||||
className="w-full h-96 p-3 font-mono text-sm bg-background border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
disabled={saving}
|
||||
/>
|
||||
) : (
|
||||
<pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm">
|
||||
{sambaConfig || "No Samba configuration available"}
|
||||
</pre>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-4">
|
||||
Edits will be applied to the [global] section of /etc/samba/smb.conf
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* NFS Tab */}
|
||||
{activeTab === "nfs" && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>NFS Export Configuration</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
{nfsEditing && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setNfsConfig(nfsConfigOriginal)
|
||||
setNfsEditing(false)
|
||||
}}
|
||||
disabled={saving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
{nfsEditing ? (
|
||||
<Button onClick={handleNfsSave} disabled={saving || nfsConfig === nfsConfigOriginal}>
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => setNfsEditing(true)} variant="default">
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{nfsEditing ? (
|
||||
<textarea
|
||||
value={nfsConfig}
|
||||
onChange={(e) => setNfsConfig(e.target.value)}
|
||||
className="w-full h-96 p-3 font-mono text-sm bg-background border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
disabled={saving}
|
||||
/>
|
||||
) : (
|
||||
<pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm">
|
||||
{nfsConfig || "No NFS exports configured"}
|
||||
</pre>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground mt-4">
|
||||
Edits will be applied to /etc/exports. Format: path client(options)
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Example: /tank/share 192.168.1.0/24(rw,sync,no_subtree_check)
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user