first commit
This commit is contained in:
domrichardson
@@ -0,0 +1,346 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { api, Server } from "@/lib/api";
|
||||
import { Badge, Button, Card, CardHeader, CardTitle } from "@/components/ui";
|
||||
import { Table, Thead, Tbody, Tr, Th, Td } from "@/components/ui";
|
||||
|
||||
function AssignModal({
|
||||
keyId,
|
||||
assignedServerIds,
|
||||
onClose,
|
||||
}: {
|
||||
keyId: string;
|
||||
assignedServerIds: string[];
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [selectedServer, setSelectedServer] = useState("");
|
||||
|
||||
const { data: servers } = useQuery({
|
||||
queryKey: ["servers"],
|
||||
queryFn: api.listServers,
|
||||
});
|
||||
|
||||
const { mutate: assign, isPending, error } = useMutation({
|
||||
mutationFn: () => api.assignKey(keyId, selectedServer),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["keys", keyId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||||
onClose();
|
||||
},
|
||||
});
|
||||
|
||||
const availableServers = servers?.filter(
|
||||
(s: Server) => !assignedServerIds.includes(s.server_id)
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
|
||||
<div className="w-full max-w-md rounded-xl border border-border bg-surface p-6">
|
||||
<h2 className="mb-4 text-lg font-semibold text-text-primary">Assign Key to Server</h2>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">
|
||||
{(error as Error).message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="mb-1.5 block text-sm font-medium text-text-secondary">
|
||||
Select Server
|
||||
</label>
|
||||
{!availableServers || availableServers.length === 0 ? (
|
||||
<p className="text-sm text-text-secondary">
|
||||
All servers already have this key assigned.
|
||||
</p>
|
||||
) : (
|
||||
<select
|
||||
value={selectedServer}
|
||||
onChange={(e) => setSelectedServer(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 focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
>
|
||||
<option value="">Choose a server...</option>
|
||||
{availableServers.map((s: Server) => (
|
||||
<option key={s.server_id} value={s.server_id}>
|
||||
{s.hostname} ({s.ip_address})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
loading={isPending}
|
||||
disabled={!selectedServer}
|
||||
onClick={() => assign()}
|
||||
>
|
||||
Assign Key
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function KeyDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const keyId = params.id as string;
|
||||
const [showAssign, setShowAssign] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const [copiedKey, setCopiedKey] = useState(false);
|
||||
|
||||
const { data: key, isLoading, error } = useQuery({
|
||||
queryKey: ["keys", keyId],
|
||||
queryFn: () => api.getKey(keyId),
|
||||
});
|
||||
|
||||
const { mutate: revokeKey } = useMutation({
|
||||
mutationFn: (serverId: string) => api.revokeKey(keyId, serverId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["keys", keyId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["servers"] });
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: deleteKey, isPending: isDeleting } = useMutation({
|
||||
mutationFn: () => api.deleteKey(keyId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["keys"] });
|
||||
router.push("/keys");
|
||||
},
|
||||
});
|
||||
|
||||
const handleCopyKey = async () => {
|
||||
if (!key?.public_key) return;
|
||||
await navigator.clipboard.writeText(key.public_key);
|
||||
setCopiedKey(true);
|
||||
setTimeout(() => setCopiedKey(false), 2000);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
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 (error || !key) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="rounded-lg border border-danger/30 bg-danger/10 p-4 text-danger">
|
||||
Key not found or failed to load.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const activeAssignments = key.assignments?.filter((a) => !a.revoked_at) ?? [];
|
||||
const assignedServerIds = activeAssignments.map((a) => a.server_id);
|
||||
|
||||
return (
|
||||
<div className="p-8">
|
||||
{showAssign && (
|
||||
<AssignModal
|
||||
keyId={keyId}
|
||||
assignedServerIds={assignedServerIds}
|
||||
onClose={() => setShowAssign(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="mb-6 flex items-start justify-between">
|
||||
<div>
|
||||
<Link href="/keys" className="text-text-secondary hover:text-text-primary text-sm">
|
||||
← SSH Keys
|
||||
</Link>
|
||||
<div className="mt-2 flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-text-primary">{key.label}</h1>
|
||||
<Badge variant={key.source === "generated" ? "accent" : "neutral"}>
|
||||
{key.source}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-1 font-mono text-xs text-text-secondary">{key.fingerprint}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="secondary" onClick={() => setShowAssign(true)}>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Assign to Server
|
||||
</Button>
|
||||
{!confirmDelete ? (
|
||||
<Button variant="danger" onClick={() => setConfirmDelete(true)}>
|
||||
Delete Key
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-danger">Delete permanently?</span>
|
||||
<Button variant="danger" loading={isDeleting} onClick={() => deleteKey()}>
|
||||
Confirm
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => setConfirmDelete(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
||||
<div className="space-y-6 lg:col-span-1">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Details</CardTitle>
|
||||
</CardHeader>
|
||||
<dl className="space-y-3 text-sm">
|
||||
<div>
|
||||
<dt className="text-text-secondary">Key ID</dt>
|
||||
<dd className="mt-0.5 font-mono text-xs text-text-primary break-all">{key.key_id}</dd>
|
||||
</div>
|
||||
<div className="border-t border-border pt-3">
|
||||
<dt className="text-text-secondary">Source</dt>
|
||||
<dd className="mt-0.5 text-text-primary capitalize">{key.source}</dd>
|
||||
</div>
|
||||
{key.generated_by_server_id && (
|
||||
<div className="border-t border-border pt-3">
|
||||
<dt className="text-text-secondary">Generated By</dt>
|
||||
<dd className="mt-0.5">
|
||||
<Link
|
||||
href={`/servers/${key.generated_by_server_id}`}
|
||||
className="font-mono text-xs text-accent hover:underline"
|
||||
>
|
||||
{key.generated_by_server_id}
|
||||
</Link>
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-t border-border pt-3">
|
||||
<dt className="text-text-secondary">Active Assignments</dt>
|
||||
<dd className="mt-0.5 text-text-primary">{activeAssignments.length}</dd>
|
||||
</div>
|
||||
<div className="border-t border-border pt-3">
|
||||
<dt className="text-text-secondary">Created</dt>
|
||||
<dd className="mt-0.5 text-text-primary">
|
||||
{new Date(key.created_at).toLocaleString()}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Public Key</CardTitle>
|
||||
<button
|
||||
onClick={handleCopyKey}
|
||||
className="rounded-md border border-border bg-surface-2 px-2.5 py-1 text-xs font-medium text-text-secondary transition-colors hover:border-accent/50 hover:text-text-primary"
|
||||
>
|
||||
{copiedKey ? <span className="text-success">Copied!</span> : "Copy"}
|
||||
</button>
|
||||
</CardHeader>
|
||||
<div className="rounded-lg border border-border bg-[#0a0c14] p-3">
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-all font-mono text-xs text-text-secondary leading-relaxed">
|
||||
{key.public_key}
|
||||
</pre>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
<Card padding={false}>
|
||||
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
Server Assignments
|
||||
<span className="ml-2 rounded-full bg-surface-2 px-2 py-0.5 text-xs text-text-secondary">
|
||||
{activeAssignments.length} active
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{!key.assignments || key.assignments.length === 0 ? (
|
||||
<div className="py-16 text-center">
|
||||
<p className="text-text-secondary text-sm">Not assigned to any servers.</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
onClick={() => setShowAssign(true)}
|
||||
>
|
||||
Assign to a server
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Server</Th>
|
||||
<Th>IP Address</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Assigned</Th>
|
||||
<Th>Revoked</Th>
|
||||
<Th />
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{key.assignments.map((assignment) => (
|
||||
<Tr key={`${assignment.key_id}-${assignment.server_id}`}>
|
||||
<Td>
|
||||
<Link
|
||||
href={`/servers/${assignment.server_id}`}
|
||||
className="font-medium text-text-primary hover:text-accent"
|
||||
>
|
||||
{assignment.server?.hostname ?? assignment.server_id}
|
||||
</Link>
|
||||
</Td>
|
||||
<Td>
|
||||
<span className="font-mono text-xs text-text-secondary">
|
||||
{assignment.server?.ip_address ?? "—"}
|
||||
</span>
|
||||
</Td>
|
||||
<Td>
|
||||
<Badge variant={assignment.revoked_at ? "danger" : "success"}>
|
||||
{assignment.revoked_at ? "revoked" : "active"}
|
||||
</Badge>
|
||||
</Td>
|
||||
<Td>
|
||||
<span className="text-text-secondary text-xs">
|
||||
{new Date(assignment.assigned_at).toLocaleDateString()}
|
||||
</span>
|
||||
</Td>
|
||||
<Td>
|
||||
<span className="text-text-secondary text-xs">
|
||||
{assignment.revoked_at
|
||||
? new Date(assignment.revoked_at).toLocaleDateString()
|
||||
: "—"}
|
||||
</span>
|
||||
</Td>
|
||||
<Td>
|
||||
{!assignment.revoked_at && (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => revokeKey(assignment.server_id)}
|
||||
>
|
||||
Revoke
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user