feat: web console page with protocol + key selection

2026-07-17 11:45:10 +01:00
parent 38c51e5a3e
commit 0962745bbc
3 changed files with 234 additions and 0 deletions
@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { api } from "@/lib/api";
+import { Button, Card } from "@/components/ui";
+import { openConsole } from "@/lib/guacConsole";
+
+export default function ServerConsolePage() {
+    const params = useParams();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const serverId = params.id as string;
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const connectionRef = useRef<{ disconnect: () => void } | null>(null);
+
+    const [protocol, setProtocol] = useState<string>(searchParams.get("protocol") || "");
+    const [keyId, setKeyId] = useState<string>("");
+    const [rdpUsername, setRdpUsername] = useState("");
+    const [rdpPassword, setRdpPassword] = useState("");
+    const [connecting, setConnecting] = useState(false);
+    const [connected, setConnected] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Inject the vendored Guacamole client script once.
+    useEffect(() => {
+        const s = document.createElement("script");
+        s.src = "/lib/guacamole-common.js";
+        s.async = true;
+        document.body.appendChild(s);
+        return () => {
+            document.body.removeChild(s);
+        };
+    }, []);
+
+    // Disconnect on unmount.
+    useEffect(() => {
+        return () => {
+            connectionRef.current?.disconnect();
+        };
+    }, []);
+
+    const { data: server, isLoading: serverLoading } = useQuery({
+        queryKey: ["servers", serverId],
+        queryFn: () => api.getServer(serverId),
+    });
+
+    const { data: keys, isLoading: keysLoading } = useQuery({
+        queryKey: ["keys"],
+        queryFn: () => api.listKeys(),
+    });
+
+    const usableKeys = useMemo(() => (keys ?? []).filter((k) => k.has_private_key === true), [keys]);
+    const protocols = server?.console_protocols ?? [];
+
+    useEffect(() => {
+        if (!protocol && protocols.length > 0) {
+            setProtocol(protocols[0]);
+        }
+    }, [protocols, protocol]);
+
+    async function handleConnect() {
+        setError(null);
+        setConnecting(true);
+        try {
+            const body: Parameters<typeof api.connectConsole>[0] = {
+                server_id: serverId,
+                protocol,
+            };
+            if (protocol === "ssh") {
+                body.key_id = keyId || undefined;
+            } else if (protocol === "rdp") {
+                body.rdp_username = rdpUsername || undefined;
+                body.rdp_password = rdpPassword || undefined;
+            }
+
+            const { token, ws_path } = await api.connectConsole(body);
+
+            const wsProto = location.protocol === "https:" ? "wss" : "ws";
+            const wsUrl = `${wsProto}://${location.host}${ws_path}?token=${encodeURIComponent(token)}`;
+
+            if (containerRef.current) {
+                const conn = openConsole(containerRef.current, wsUrl);
+                connectionRef.current = conn;
+                setConnected(true);
+            }
+        } catch (e) {
+            setError(e instanceof Error ? e.message : "Failed to connect");
+        } finally {
+            setConnecting(false);
+        }
+    }
+
+    function handleDisconnect() {
+        connectionRef.current?.disconnect();
+        connectionRef.current = null;
+        setConnected(false);
+        if (containerRef.current) {
+            containerRef.current.innerHTML = "";
+        }
+    }
+
+    if (serverLoading || keysLoading) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <div className="h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent" />
+            </div>
+        );
+    }
+
+    if (!server) {
+        return (
+            <div className="p-8">
+                <div className="rounded-lg border border-danger/30 bg-danger/10 p-4 text-danger">Server not found or failed to load.</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex h-full flex-col p-8">
+            <div className="mb-4 flex items-center gap-3">
+                <Link href={`/servers/${serverId}`} className="text-text-secondary hover:text-text-primary text-sm">
+                    ← {server.hostname}
+                </Link>
+            </div>
+
+            <h1 className="mb-4 text-2xl font-bold text-text-primary">Console</h1>
+
+            {error && <div className="mb-4 rounded-lg border border-danger/30 bg-danger/10 p-4 text-danger">{error}</div>}
+
+            {!connected ? (
+                <Card className="mb-4 max-w-xl">
+                    <div className="space-y-4">
+                        <div>
+                            <label className="mb-1.5 block text-sm font-medium text-text-secondary">Protocol</label>
+                            <select
+                                value={protocol}
+                                onChange={(e) => setProtocol(e.target.value)}
+                                className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
+                            >
+                                {protocols.length === 0 && <option value="">No protocols available</option>}
+                                {protocols.map((p) => (
+                                    <option key={p} value={p}>
+                                        {p.toUpperCase()}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        {protocol === "ssh" && (
+                            <div>
+                                <label className="mb-1.5 block text-sm font-medium text-text-secondary">SSH Key</label>
+                                <select
+                                    value={keyId}
+                                    onChange={(e) => setKeyId(e.target.value)}
+                                    className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
+                                >
+                                    <option value="">Select a key…</option>
+                                    {usableKeys.map((k) => (
+                                        <option key={k.key_id} value={k.key_id}>
+                                            {k.label}
+                                        </option>
+                                    ))}
+                                </select>
+                                {usableKeys.length === 0 && (
+                                    <p className="mt-1.5 text-xs text-text-tertiary">No keys with stored private material are available.</p>
+                                )}
+                            </div>
+                        )}
+
+                        {protocol === "rdp" && (
+                            <>
+                                <div>
+                                    <label className="mb-1.5 block text-sm font-medium text-text-secondary">Username</label>
+                                    <input
+                                        type="text"
+                                        value={rdpUsername}
+                                        onChange={(e) => setRdpUsername(e.target.value)}
+                                        className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="mb-1.5 block text-sm font-medium text-text-secondary">Password</label>
+                                    <input
+                                        type="password"
+                                        value={rdpPassword}
+                                        onChange={(e) => setRdpPassword(e.target.value)}
+                                        autoComplete="new-password"
+                                        className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
+                                    />
+                                </div>
+                            </>
+                        )}
+
+                        <Button variant="primary" loading={connecting} disabled={!protocol} onClick={handleConnect}>
+                            Connect
+                        </Button>
+                    </div>
+                </Card>
+            ) : (
+                <div className="mb-4 flex items-center gap-3">
+                    <Button variant="danger" onClick={handleDisconnect}>
+                        Disconnect
+                    </Button>
+                </div>
+            )}
+
+            <div
+                ref={containerRef}
+                className="min-h-[500px] flex-1 rounded-lg border border-border bg-black"
+            />
+        </div>
+    );
+}
@@ -338,6 +338,16 @@ export default function ServerDetailPage() {
                    <p className="mt-1 font-mono text-sm text-text-secondary">{server.ip_address}</p>
                </div>
                <div className="flex gap-2">
+                    {server.console_protocols?.map((p) => (
+                        <Link key={p} href={`/servers/${serverId}/console?protocol=${p}`}>
+                            <Button variant="secondary">
+                                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+                                </svg>
+                                Connect {p.toUpperCase()}
+                            </Button>
+                        </Link>
+                    ))}
                    {server.available_updates && server.available_updates.length > 0 && (
                        <Button
                            variant="secondary"