feat: add comprehensive CRUD endpoints, cluster sync improvements, and firewall orchestration

Add create endpoints for users, roles, tenants, projects, networks, subnets, and security rules with audit logging, implement commit_or_400 helper for IntegrityError handling with 409 responses, enhance cluster sync to populate nodes, workloads, and networks from provider inventory with last_sync_at tracking, add update/delete operations for IP addresses and policies with version tracking, implement IP
2026-07-09 12:33:36 +02:00
parent dea27b5459
commit a911d36f34
15 changed files with 1267 additions and 36 deletions
@@ -0,0 +1,65 @@
+import { FormEvent, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Plus, Users } from "lucide-react";
+
+import { api, Role, User } from "../api/client";
+import { DataTable } from "../components/DataTable";
+import { buttonClass, Field, inputClass, selectClass } from "../components/FormControls";
+import { PageHeader } from "../components/PageHeader";
+
+export function UsersRoles() {
+  const queryClient = useQueryClient();
+  const users = useQuery({ queryKey: ["users"], queryFn: () => api<User[]>("/users") });
+  const roles = useQuery({ queryKey: ["roles"], queryFn: () => api<Role[]>("/roles") });
+  const [roleForm, setRoleForm] = useState({ name: "Helpdesk", permissions: "clusters:read,networks:read,audit:read" });
+  const [userForm, setUserForm] = useState({ email: "operator@nexafabric.local", display_name: "Operator", password: "ChangeMe_12345", role_id: "" });
+  const createRole = useMutation({
+    mutationFn: () => api<Role>("/roles", { method: "POST", body: JSON.stringify({ name: roleForm.name, permissions: roleForm.permissions.split(",").map((item) => item.trim()).filter(Boolean) }) }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["roles"] }),
+  });
+  const createUser = useMutation({
+    mutationFn: () => api<User>("/users", { method: "POST", body: JSON.stringify({ email: userForm.email, display_name: userForm.display_name, password: userForm.password, role_ids: userForm.role_id ? [userForm.role_id] : [] }) }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }),
+  });
+
+  async function submitRole(event: FormEvent) {
+    event.preventDefault();
+    await createRole.mutateAsync();
+  }
+
+  async function submitUser(event: FormEvent) {
+    event.preventDefault();
+    await createUser.mutateAsync();
+  }
+
+  return (
+    <>
+      <PageHeader title="Users & Roles" subtitle="Manage local users, roles, and permission sets." />
+      <div className="grid gap-4 xl:grid-cols-[340px_340px_1fr]">
+        <form onSubmit={submitRole} className="rounded-md border border-border bg-panel p-4">
+          <div className="mb-4 font-medium">Add Role</div>
+          <div className="grid gap-3">
+            <Field label="Name"><input className={inputClass} value={roleForm.name} onChange={(event) => setRoleForm({ ...roleForm, name: event.target.value })} /></Field>
+            <Field label="Permissions"><input className={inputClass} value={roleForm.permissions} onChange={(event) => setRoleForm({ ...roleForm, permissions: event.target.value })} /></Field>
+            <button className={buttonClass}><Plus size={16} /> Save Role</button>
+          </div>
+        </form>
+        <form onSubmit={submitUser} className="rounded-md border border-border bg-panel p-4">
+          <div className="mb-4 flex items-center gap-2 font-medium"><Users size={18} /> Add User</div>
+          <div className="grid gap-3">
+            <Field label="Email"><input className={inputClass} value={userForm.email} onChange={(event) => setUserForm({ ...userForm, email: event.target.value })} /></Field>
+            <Field label="Name"><input className={inputClass} value={userForm.display_name} onChange={(event) => setUserForm({ ...userForm, display_name: event.target.value })} /></Field>
+            <Field label="Password"><input className={inputClass} type="password" value={userForm.password} onChange={(event) => setUserForm({ ...userForm, password: event.target.value })} /></Field>
+            <Field label="Role"><select className={selectClass} value={userForm.role_id} onChange={(event) => setUserForm({ ...userForm, role_id: event.target.value })}><option value="">No role</option>{(roles.data ?? []).map((role) => <option key={role.id} value={role.id}>{role.name}</option>)}</select></Field>
+            <button className={buttonClass}><Plus size={16} /> Save User</button>
+          </div>
+        </form>
+        <section className="space-y-4">
+          <DataTable rows={(users.data ?? []) as unknown as Record<string, unknown>[]} columns={[{ key: "email", label: "Email" }, { key: "display_name", label: "Name" }, { key: "is_active", label: "Active" }]} />
+          <DataTable rows={(roles.data ?? []) as unknown as Record<string, unknown>[]} columns={[{ key: "name", label: "Role" }, { key: "permissions", label: "Permissions" }]} />
+        </section>
+      </div>
+    </>
+  );
+}
+