Phase 11: remote UX & network attach (0.11.0)
- Live remote-stack logs over a WebSocket proxied through the central app to
the agent (/ws/agent-logs/{agent}/{stack}); agent gains a WS log endpoint.
- Deploy to a remote host from the UI: host selector in the New Stack editor
and template dialog; templates instantiate onto an agent via the proxy.
- Network attach/detach: expandable inspect view per network with
connect/disconnect + container picker; GET /{id}/containers, POST connect/disconnect.
- Remove dead pages/Placeholder.tsx.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
menzelj
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
ec7e3e706f
commit
1931500c24
@@ -1,6 +1,15 @@
|
||||
import { useState } from "react";
|
||||
import { Fragment, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Network as NetworkIcon, Plus, Trash2, Eraser } from "lucide-react";
|
||||
import {
|
||||
Network as NetworkIcon,
|
||||
Plus,
|
||||
Trash2,
|
||||
Eraser,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Link2,
|
||||
Unplug,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Badge, Button, Card, Input, Spinner } from "@/components/ui";
|
||||
import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
|
||||
@@ -21,7 +30,9 @@ export function Networks() {
|
||||
});
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [toDelete, setToDelete] = useState<NetworkInfo | null>(null);
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
const invalidate = () => qc.invalidateQueries({ queryKey: ["networks"] });
|
||||
const colSpan = isAdmin ? 6 : 5;
|
||||
|
||||
const prune = useMutation({
|
||||
mutationFn: networksApi.prune,
|
||||
@@ -71,9 +82,18 @@ export function Networks() {
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{data?.map((n) => (
|
||||
<tr key={n.id}>
|
||||
<Fragment key={n.id}>
|
||||
<tr
|
||||
onClick={() => setExpanded((e) => (e === n.id ? null : n.id))}
|
||||
className="cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
|
||||
>
|
||||
<td className="px-4 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
{expanded === n.id ? (
|
||||
<ChevronDown className="h-4 w-4 text-slate-400" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4 text-slate-400" />
|
||||
)}
|
||||
<NetworkIcon className="h-4 w-4 text-slate-400" />
|
||||
<span className="font-medium">{n.name}</span>
|
||||
{n.is_default && <Badge>default</Badge>}
|
||||
@@ -98,7 +118,7 @@ export function Networks() {
|
||||
{!n.is_default && (
|
||||
<button
|
||||
title={n.in_use ? "In use — disconnect containers first" : "Delete"}
|
||||
onClick={() => setToDelete(n)}
|
||||
onClick={(e) => { e.stopPropagation(); setToDelete(n); }}
|
||||
className="rounded-lg p-1.5 hover:bg-slate-100 dark:hover:bg-slate-700"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-500" />
|
||||
@@ -107,10 +127,18 @@ export function Networks() {
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
{expanded === n.id && (
|
||||
<tr>
|
||||
<td colSpan={colSpan} className="bg-slate-50 px-4 py-3 dark:bg-slate-800/40">
|
||||
<NetworkDetail network={n} isAdmin={isAdmin} />
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
{data?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-8 text-center text-sm text-slate-500">
|
||||
<td colSpan={colSpan} className="px-4 py-8 text-center text-sm text-slate-500">
|
||||
No networks.
|
||||
</td>
|
||||
</tr>
|
||||
@@ -141,6 +169,114 @@ export function Networks() {
|
||||
);
|
||||
}
|
||||
|
||||
function NetworkDetail({ network, isAdmin }: { network: NetworkInfo; isAdmin: boolean }) {
|
||||
const qc = useQueryClient();
|
||||
const [pick, setPick] = useState("");
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["network-containers", network.id],
|
||||
queryFn: () => networksApi.containers(network.id),
|
||||
refetchInterval: 10000,
|
||||
});
|
||||
const refresh = () => {
|
||||
qc.invalidateQueries({ queryKey: ["network-containers", network.id] });
|
||||
qc.invalidateQueries({ queryKey: ["networks"] });
|
||||
};
|
||||
|
||||
const connect = useMutation({
|
||||
mutationFn: (container: string) => networksApi.connect(network.id, container),
|
||||
onSuccess: () => { toast.success("Container connected"); setPick(""); refresh(); },
|
||||
onError: (e) => toast.error(apiErrorMessage(e)),
|
||||
});
|
||||
const disconnect = useMutation({
|
||||
mutationFn: (container: string) => networksApi.disconnect(network.id, container),
|
||||
onSuccess: () => { toast.success("Container disconnected"); refresh(); },
|
||||
onError: (e) => toast.error(apiErrorMessage(e)),
|
||||
});
|
||||
|
||||
const connected = (data ?? []).filter((c) => c.connected);
|
||||
const available = (data ?? []).filter((c) => !c.connected);
|
||||
|
||||
return (
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="grid grid-cols-2 gap-x-6 gap-y-1 sm:grid-cols-4">
|
||||
<Meta label="Driver" value={network.driver} />
|
||||
<Meta label="Scope" value={network.scope} />
|
||||
<Meta label="Subnet" value={network.subnet ?? "—"} mono />
|
||||
<Meta label="Gateway" value={network.gateway ?? "—"} mono />
|
||||
<Meta label="Attachable" value={network.attachable ? "yes" : "no"} />
|
||||
<Meta label="Internal" value={network.internal ? "yes" : "no"} />
|
||||
<Meta label="ID" value={network.id} mono />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Connected containers
|
||||
</p>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : connected.length === 0 ? (
|
||||
<p className="text-slate-400">No containers connected.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{connected.map((c) => (
|
||||
<li key={c.id} className="flex items-center gap-2">
|
||||
<span className="font-medium">{c.name}</span>
|
||||
{c.stack && <Badge>{c.stack}</Badge>}
|
||||
<span className="text-xs text-slate-400">{c.state}</span>
|
||||
{isAdmin && !network.is_default && (
|
||||
<button
|
||||
title="Disconnect"
|
||||
onClick={() => disconnect.mutate(c.name)}
|
||||
disabled={disconnect.isPending}
|
||||
className="ml-1 rounded p-1 hover:bg-slate-200 dark:hover:bg-slate-700"
|
||||
>
|
||||
<Unplug className="h-3.5 w-3.5 text-red-500" />
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
className={selectClass + " max-w-xs"}
|
||||
value={pick}
|
||||
onChange={(e) => setPick(e.target.value)}
|
||||
>
|
||||
<option value="">Connect a container…</option>
|
||||
{available.map((c) => (
|
||||
<option key={c.id} value={c.name}>
|
||||
{c.name}
|
||||
{c.stack ? ` (${c.stack})` : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={!pick || connect.isPending}
|
||||
loading={connect.isPending}
|
||||
onClick={() => connect.mutate(pick)}
|
||||
>
|
||||
<Link2 className="h-4 w-4" /> Connect
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Meta({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
||||
return (
|
||||
<div>
|
||||
<span className="text-xs text-slate-400">{label}</span>
|
||||
<p className={mono ? "font-mono text-xs" : ""}>{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateNetworkDialog({ onDone, onCancel }: { onDone: () => void; onCancel: () => void }) {
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
|
||||
Reference in New Issue
Block a user