Add nasctl: Go NAS control plane with React frontend

2026-07-05 17:37:19 -04:00
parent 359fd5a160
commit 4f0754ecc5
56 changed files with 6725 additions and 1 deletions
@@ -0,0 +1,85 @@
+import { useEffect, useState } from "react";
+import { api, formatBytes, SystemStatus } from "../api";
+import { useDirty } from "../DirtyContext";
+
+export default function Dashboard() {
+  const [status, setStatus] = useState<SystemStatus | null>(null);
+  const { modules } = useDirty();
+
+  useEffect(() => {
+    api.systemStatus().then(setStatus).catch(() => setStatus(null));
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold text-white">Dashboard</h1>
+
+      <div className="grid gap-5 md:grid-cols-2">
+        <div className="card">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-400">
+            Uso de disco
+          </h2>
+          {status?.disks?.length ? (
+            <div className="space-y-4">
+              {status.disks.map((d) => (
+                <div key={d.path}>
+                  <div className="mb-1 flex justify-between text-sm">
+                    <span className="text-slate-300">{d.path}</span>
+                    <span className="text-slate-400">
+                      {formatBytes(d.used_bytes)} / {formatBytes(d.total_bytes)}
+                    </span>
+                  </div>
+                  <div className="h-2 overflow-hidden rounded bg-slate-800">
+                    <div
+                      className="h-full bg-brand-500"
+                      style={{ width: `${Math.min(d.used_percent, 100)}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-slate-500">Sin datos de disco.</p>
+          )}
+        </div>
+
+        <div className="card">
+          <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-slate-400">
+            Servicios
+          </h2>
+          {status?.services?.length ? (
+            <ul className="space-y-2">
+              {status.services.map((s) => (
+                <li key={s.name} className="flex items-center justify-between text-sm">
+                  <span className="text-slate-300">{s.name}</span>
+                  <span
+                    className={`rounded-full px-2 py-0.5 text-xs ${
+                      s.active ? "bg-emerald-500/20 text-emerald-300" : "bg-slate-700 text-slate-300"
+                    }`}
+                  >
+                    {s.state}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-sm text-slate-500">Sin datos de servicios.</p>
+          )}
+        </div>
+      </div>
+
+      <div className="card">
+        <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-slate-400">
+          Cambios pendientes
+        </h2>
+        {modules.length > 0 ? (
+          <p className="text-sm text-amber-300">
+            Módulos con cambios sin aplicar: {modules.map((m) => m.module).join(", ")}
+          </p>
+        ) : (
+          <p className="text-sm text-emerald-300">Todo aplicado. No hay cambios pendientes.</p>
+        )}
+      </div>
+    </div>
+  );
+}