feat: complete MVP epics E7-E10 (provisioning, console proxy, audit, frontend)
This commit is contained in:
Philipp
+144
-248
@@ -1,19 +1,20 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createClient, type Session } from "@supabase/supabase-js";
|
||||
import type { VM } from "./api";
|
||||
import { fetchMe } from "./api";
|
||||
import "./styles.css";
|
||||
import { AuthScreen } from "./components/AuthScreen";
|
||||
import { VMList } from "./components/VMList";
|
||||
import { VMCreate } from "./components/VMCreate";
|
||||
import { SSHKeys } from "./components/SSHKeys";
|
||||
import { AuditLog } from "./components/AuditLog";
|
||||
import { ConsoleView } from "./components/ConsoleView";
|
||||
|
||||
type BackendPrincipal = {
|
||||
Subject: string;
|
||||
Email: string;
|
||||
Role: string;
|
||||
};
|
||||
|
||||
type ViewKey = "overview" | "projects" | "vms" | "ssh" | "audit" | "console";
|
||||
type ViewKey = "overview" | "vms" | "ssh" | "audit" | "console";
|
||||
|
||||
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL ?? "";
|
||||
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY ?? "";
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
const supabase =
|
||||
supabaseUrl && supabaseAnonKey
|
||||
@@ -22,7 +23,6 @@ const supabase =
|
||||
|
||||
const navItems: Array<{ key: ViewKey; label: string }> = [
|
||||
{ key: "overview", label: "Uebersicht" },
|
||||
{ key: "projects", label: "Projekte" },
|
||||
{ key: "vms", label: "VMs" },
|
||||
{ key: "ssh", label: "SSH-Keys" },
|
||||
{ key: "audit", label: "Audit" },
|
||||
@@ -33,8 +33,11 @@ function App() {
|
||||
const [session, setSession] = useState<Session | null>(null);
|
||||
const [loadingSession, setLoadingSession] = useState(true);
|
||||
const [activeView, setActiveView] = useState<ViewKey>("overview");
|
||||
const [backendPrincipal, setBackendPrincipal] =
|
||||
useState<BackendPrincipal | null>(null);
|
||||
const [backendPrincipal, setBackendPrincipal] = useState<{
|
||||
Subject: string;
|
||||
Email: string;
|
||||
Role: string;
|
||||
} | null>(null);
|
||||
const [backendStatus, setBackendStatus] = useState<
|
||||
"idle" | "loading" | "ok" | "error"
|
||||
>("idle");
|
||||
@@ -61,36 +64,31 @@ function App() {
|
||||
return () => data.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const connected = Boolean(session && backendPrincipal);
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
refreshBackendPrincipal();
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
async function refreshBackendPrincipal() {
|
||||
if (!session) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!session) return;
|
||||
setBackendStatus("loading");
|
||||
setBackendError("");
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBaseUrl}/me`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${session.access_token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Backend antwortet mit ${response.status}`);
|
||||
}
|
||||
|
||||
const principal = (await response.json()) as BackendPrincipal;
|
||||
const principal = await fetchMe(session.access_token);
|
||||
setBackendPrincipal(principal);
|
||||
setBackendStatus("ok");
|
||||
} catch (error) {
|
||||
setBackendStatus("error");
|
||||
setBackendError(error instanceof Error ? error.message : "Unbekannter Fehler");
|
||||
setBackendError(
|
||||
error instanceof Error ? error.message : "Unbekannter Fehler"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connected = Boolean(session && backendPrincipal);
|
||||
|
||||
if (loadingSession) {
|
||||
return (
|
||||
<main className="startup-screen">
|
||||
@@ -100,11 +98,22 @@ function App() {
|
||||
}
|
||||
|
||||
if (!supabase) {
|
||||
return <MissingConfig />;
|
||||
return (
|
||||
<main className="startup-screen">
|
||||
<section className="auth-panel">
|
||||
<p className="eyebrow">Konfiguration</p>
|
||||
<h1>Frontend Env fehlt</h1>
|
||||
<p>
|
||||
`VITE_SUPABASE_URL` und `VITE_SUPABASE_ANON_KEY` mussen gesetzt
|
||||
sein.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session) {
|
||||
return <AuthScreen />;
|
||||
return <AuthScreen supabase={supabase} />;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -114,7 +123,9 @@ function App() {
|
||||
<nav className="main-nav" aria-label="Hauptnavigation">
|
||||
{navItems.map((item) => (
|
||||
<button
|
||||
className={item.key === activeView ? "nav-item active" : "nav-item"}
|
||||
className={
|
||||
item.key === activeView ? "nav-item active" : "nav-item"
|
||||
}
|
||||
key={item.key}
|
||||
onClick={() => setActiveView(item.key)}
|
||||
type="button"
|
||||
@@ -135,176 +146,136 @@ function App() {
|
||||
<span className={connected ? "status-dot ok" : "status-dot"} />
|
||||
<div>
|
||||
<strong>{session.user.email}</strong>
|
||||
<span>{connected ? "Backend verbunden" : "Session aktiv"}</span>
|
||||
<span>
|
||||
{connected ? "Backend verbunden" : "Session aktiv"}
|
||||
</span>
|
||||
</div>
|
||||
<button className="ghost-button" onClick={() => supabase.auth.signOut()}>
|
||||
<button
|
||||
className="ghost-button"
|
||||
onClick={() => supabase.auth.signOut()}
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="content-grid">
|
||||
<BackendPanel
|
||||
backendError={backendError}
|
||||
backendPrincipal={backendPrincipal}
|
||||
backendStatus={backendStatus}
|
||||
onRefresh={refreshBackendPrincipal}
|
||||
<section className="panel backend-panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Backend</p>
|
||||
<h2>Status</h2>
|
||||
</div>
|
||||
<button
|
||||
className="primary-button"
|
||||
disabled={backendStatus === "loading"}
|
||||
onClick={refreshBackendPrincipal}
|
||||
type="button"
|
||||
>
|
||||
Pruefen
|
||||
</button>
|
||||
</div>
|
||||
<div className="metric-list">
|
||||
<Metric label="Status" value={statusLabel(backendStatus)} />
|
||||
<Metric
|
||||
label="User-ID"
|
||||
value={backendPrincipal?.Subject ?? "-"}
|
||||
/>
|
||||
<Metric
|
||||
label="Rolle"
|
||||
value={backendPrincipal?.Role ?? "-"}
|
||||
/>
|
||||
</div>
|
||||
{backendError ? (
|
||||
<p className="form-error">{backendError}</p>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<ViewPanel
|
||||
activeView={activeView}
|
||||
connected={connected}
|
||||
token={session.access_token}
|
||||
/>
|
||||
<ViewPanel activeView={activeView} connected={connected} />
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function MissingConfig() {
|
||||
return (
|
||||
<main className="startup-screen">
|
||||
<section className="auth-panel">
|
||||
<p className="eyebrow">Konfiguration</p>
|
||||
<h1>Frontend Env fehlt</h1>
|
||||
<p>
|
||||
`VITE_SUPABASE_URL` und `VITE_SUPABASE_ANON_KEY` muessen gesetzt sein.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthScreen() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [mode, setMode] = useState<"signin" | "signup">("signin");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
async function submit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setBusy(true);
|
||||
setMessage("");
|
||||
|
||||
const result =
|
||||
mode === "signin"
|
||||
? await supabase!.auth.signInWithPassword({ email, password })
|
||||
: await supabase!.auth.signUp({ email, password });
|
||||
|
||||
if (result.error) {
|
||||
setMessage(result.error.message);
|
||||
}
|
||||
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="auth-screen">
|
||||
<section className="auth-panel">
|
||||
<p className="eyebrow">ProxUI</p>
|
||||
<h1>Anmelden</h1>
|
||||
<form className="auth-form" onSubmit={submit}>
|
||||
<label>
|
||||
E-Mail
|
||||
<input
|
||||
autoComplete="email"
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
required
|
||||
type="email"
|
||||
value={email}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Passwort
|
||||
<input
|
||||
autoComplete={mode === "signin" ? "current-password" : "new-password"}
|
||||
minLength={6}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</label>
|
||||
{message ? <p className="form-error">{message}</p> : null}
|
||||
<div className="auth-actions">
|
||||
<button className="primary-button" disabled={busy} type="submit">
|
||||
{mode === "signin" ? "Einloggen" : "Account erstellen"}
|
||||
</button>
|
||||
<button
|
||||
className="ghost-button"
|
||||
onClick={() => setMode(mode === "signin" ? "signup" : "signin")}
|
||||
type="button"
|
||||
>
|
||||
{mode === "signin" ? "Registrieren" : "Zum Login"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function BackendPanel({
|
||||
backendError,
|
||||
backendPrincipal,
|
||||
backendStatus,
|
||||
onRefresh,
|
||||
}: {
|
||||
backendError: string;
|
||||
backendPrincipal: BackendPrincipal | null;
|
||||
backendStatus: "idle" | "loading" | "ok" | "error";
|
||||
onRefresh: () => void;
|
||||
}) {
|
||||
return (
|
||||
<section className="panel backend-panel">
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">Backend</p>
|
||||
<h2>Profil-Sync</h2>
|
||||
</div>
|
||||
<button
|
||||
className="primary-button"
|
||||
disabled={backendStatus === "loading"}
|
||||
onClick={onRefresh}
|
||||
type="button"
|
||||
>
|
||||
Pruefen
|
||||
</button>
|
||||
</div>
|
||||
<div className="metric-list">
|
||||
<Metric label="Status" value={statusLabel(backendStatus)} />
|
||||
<Metric label="User-ID" value={backendPrincipal?.Subject ?? "-"} />
|
||||
<Metric label="Rolle" value={backendPrincipal?.Role ?? "-"} />
|
||||
</div>
|
||||
{backendError ? <p className="form-error">{backendError}</p> : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ViewPanel({
|
||||
activeView,
|
||||
connected,
|
||||
token,
|
||||
}: {
|
||||
activeView: ViewKey;
|
||||
connected: boolean;
|
||||
token: string;
|
||||
}) {
|
||||
const content = useMemo(() => viewContent(activeView), [activeView]);
|
||||
const projectID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
return (
|
||||
<section className="panel view-panel">
|
||||
{activeView === "overview" && <Overview connected={connected} />}
|
||||
{activeView === "vms" && <VMView token={token} projectID={projectID} />}
|
||||
{activeView === "ssh" && <SSHKeys token={token} tenantID={projectID} />}
|
||||
{activeView === "audit" && <AuditLog token={token} tenantID={projectID} />}
|
||||
{activeView === "console" && <ConsoleView token={token} />}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Overview({ connected }: { connected: boolean }) {
|
||||
return (
|
||||
<>
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">{content.state}</p>
|
||||
<h2>{content.title}</h2>
|
||||
<p className="eyebrow">Status</p>
|
||||
<h2>Arbeitsbereich</h2>
|
||||
</div>
|
||||
<span className={connected ? "pill ok" : "pill"}>{content.badge}</span>
|
||||
<span className={connected ? "pill ok" : "pill"}>
|
||||
{connected ? "Verbunden" : "Warte"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="placeholder-table">
|
||||
{content.rows.map((row) => (
|
||||
<div className="placeholder-row" key={row.label}>
|
||||
<span>{row.label}</span>
|
||||
<strong>{row.value}</strong>
|
||||
</div>
|
||||
))}
|
||||
<div className="placeholder-row">
|
||||
<span>Backend</span>
|
||||
<strong>{connected ? "Online" : "Offline"}</strong>
|
||||
</div>
|
||||
<div className="placeholder-row">
|
||||
<span>RBAC</span>
|
||||
<strong>Aktiv</strong>
|
||||
</div>
|
||||
<div className="placeholder-row">
|
||||
<span>Worker</span>
|
||||
<strong>Aktiv</strong>
|
||||
</div>
|
||||
<div className="placeholder-row">
|
||||
<span>Audit</span>
|
||||
<strong>Aktiv</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function VMView({ token, projectID }: { token: string; projectID: string }) {
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="panel-header">
|
||||
<div>
|
||||
<p className="eyebrow">VMs</p>
|
||||
<h2>Virtuelle Maschinen</h2>
|
||||
</div>
|
||||
</div>
|
||||
<VMCreate
|
||||
token={token}
|
||||
projectID={projectID}
|
||||
onCreated={() => setRefreshKey((k) => k + 1)}
|
||||
/>
|
||||
<VMList key={refreshKey} token={token} projectID={projectID} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -324,83 +295,8 @@ function statusLabel(status: "idle" | "loading" | "ok" | "error") {
|
||||
return "Nicht geprueft";
|
||||
}
|
||||
|
||||
function viewContent(activeView: ViewKey) {
|
||||
const values: Record<
|
||||
ViewKey,
|
||||
{
|
||||
badge: string;
|
||||
rows: Array<{ label: string; value: string }>;
|
||||
state: string;
|
||||
title: string;
|
||||
}
|
||||
> = {
|
||||
overview: {
|
||||
badge: "Live",
|
||||
state: "Status",
|
||||
title: "Arbeitsbereich",
|
||||
rows: [
|
||||
{ label: "Auth", value: "angebunden" },
|
||||
{ label: "Profil-Sync", value: "angebunden" },
|
||||
{ label: "RLS", value: "aktiv" },
|
||||
],
|
||||
},
|
||||
projects: {
|
||||
badge: "Platzhalter",
|
||||
state: "E2-T03",
|
||||
title: "Projekte",
|
||||
rows: [
|
||||
{ label: "Schema", value: "projects" },
|
||||
{ label: "Quotas", value: "project_quotas" },
|
||||
{ label: "API", value: "offen" },
|
||||
],
|
||||
},
|
||||
vms: {
|
||||
badge: "Platzhalter",
|
||||
state: "E2-T05",
|
||||
title: "Virtuelle Maschinen",
|
||||
rows: [
|
||||
{ label: "Schema", value: "vms" },
|
||||
{ label: "VMID-Allokator", value: "bereit" },
|
||||
{ label: "Proxmox Client", value: "offen" },
|
||||
],
|
||||
},
|
||||
ssh: {
|
||||
badge: "Platzhalter",
|
||||
state: "E2-T05",
|
||||
title: "SSH-Keys",
|
||||
rows: [
|
||||
{ label: "Schema", value: "ssh_keys" },
|
||||
{ label: "RLS", value: "aktiv" },
|
||||
{ label: "Upload/API", value: "offen" },
|
||||
],
|
||||
},
|
||||
audit: {
|
||||
badge: "Platzhalter",
|
||||
state: "E2-T07",
|
||||
title: "Audit Log",
|
||||
rows: [
|
||||
{ label: "Schema", value: "audit_log" },
|
||||
{ label: "Append-only", value: "aktiv" },
|
||||
{ label: "Anzeige", value: "offen" },
|
||||
],
|
||||
},
|
||||
console: {
|
||||
badge: "Platzhalter",
|
||||
state: "E8",
|
||||
title: "Web-Konsole",
|
||||
rows: [
|
||||
{ label: "Proxy", value: "Grundgeruest" },
|
||||
{ label: "Tickets", value: "offen" },
|
||||
{ label: "noVNC/xterm", value: "offen" },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
return values[activeView];
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
);
|
||||
Reference in New Issue
Block a user