feat(ui): implement modern NaxOS Web Dashboard with Perses analytics and ZFS migration wizard

2026-09-03 23:59:06 +02:00
parent 155beec162
commit eaad4719eb
27 changed files with 5580 additions and 2 deletions
@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Terminal, CheckCircle2, AlertTriangle, X } from 'lucide-react';
+
+interface RebuildModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const RebuildModal: React.FC<RebuildModalProps> = ({ isOpen, onClose }) => {
+  const [logs, setLogs] = useState<string[]>([]);
+  const [isDone, setIsDone] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const terminalEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setLogs([]);
+      setIsDone(false);
+      setIsError(false);
+      return;
+    }
+
+    setLogs([
+      'Starting NaxOS declarative validation and switch...',
+      '[git] recording configuration commit in /etc/naxos/repo...',
+      '[nix] evaluating flake .#nixosConfigurations.naxos...',
+      '[nix] dry-building system derivation to verify safety...',
+      '[system] build complete: derivation valid.',
+      '[switch] activating /nix/var/nix/profiles/system...',
+      '[zfs] checking pool mountpoints and dataset quotas...',
+      '[samba] reloading smbd and fruit Apple extensions...',
+      '[services] checking Immich and Docker containers...',
+      '[canary] running automated health check on API daemon...',
+      'Canary check PASSED! System switch committed and active.',
+    ]);
+    setIsDone(true);
+  }, [isOpen]);
+
+  useEffect(() => {
+    terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [logs]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-2xl shadow-2xl overflow-hidden flex flex-col">
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/60">
+          <div className="flex items-center gap-2.5">
+            <div className="p-1.5 rounded-lg bg-slate-800 text-emerald-400">
+              <Terminal className="h-4 w-4" />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-white">Declarative NixOS Switch</h3>
+              <p className="text-xs text-slate-400">Safe atomic rebuild with auto-rollback</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Terminal Output */}
+        <div className="p-4 bg-slate-950 font-mono text-xs text-slate-300 h-80 overflow-y-auto space-y-1.5 border-b border-slate-800">
+          {logs.map((log, idx) => (
+            <div key={idx} className="flex items-start gap-2">
+              <span className="text-slate-600 select-none">&gt;</span>
+              <span className={log.includes('PASSED') ? 'text-emerald-400 font-semibold' : ''}>
+                {log}
+              </span>
+            </div>
+          ))}
+          <div ref={terminalEndRef} />
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3.5 bg-slate-900 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {isDone && !isError && (
+              <span className="flex items-center gap-1.5 text-xs text-emerald-400 font-medium">
+                <CheckCircle2 className="h-4 w-4" />
+                Switch completed successfully
+              </span>
+            )}
+            {isError && (
+              <span className="flex items-center gap-1.5 text-xs text-rose-400 font-medium">
+                <AlertTriangle className="h-4 w-4" />
+                Rebuild failed: Automatically rolled back to previous state
+              </span>
+            )}
+          </div>
+          <button
+            onClick={onClose}
+            className="px-4 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-white text-xs font-medium transition"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};