feat(web): two-step topology creation wizard pinned to target host
Replaces the single-line name input with a modal that mirrors the design-handoff DeployWizard shape (backdrop + violet-bordered panel, wizard-step tabs, card-picker body): - Step 1 — TARGET: a RUN LOCALLY card plus one card per enrolled swarm host. Non-routable hosts render disabled with their status as the tooltip. Selecting an agent pins the topology via target_host_uuid; local stays unihost. - Step 2 — TYPE: BLANK (POST /topologies/blank) or SEED-BASED (POST /topologies/ with depth, branching, deckies-per-LAN, optional seed). Name is required on both. Existing navigate-to-editor-on-create behavior is preserved.
This commit is contained in:
364
decnet_web/src/components/TopologyList/CreateTopologyWizard.tsx
Normal file
364
decnet_web/src/components/TopologyList/CreateTopologyWizard.tsx
Normal file
@@ -0,0 +1,364 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { X, Server, Cpu, FileText, Sparkles, Check } from 'lucide-react';
|
||||
import api from '../../utils/api';
|
||||
import './CreateTopologyWizard.css';
|
||||
|
||||
/* Shape of GET /swarm/hosts rows (mirrors SwarmHostView). */
|
||||
interface SwarmHost {
|
||||
uuid: string;
|
||||
name: string;
|
||||
address: string;
|
||||
agent_port: number;
|
||||
status: string;
|
||||
last_heartbeat: string | null;
|
||||
}
|
||||
|
||||
interface TopologySummary {
|
||||
id: string;
|
||||
name: string;
|
||||
mode: string;
|
||||
target_host_uuid: string | null;
|
||||
status: string;
|
||||
version: number;
|
||||
needs_resync?: boolean;
|
||||
created_at: string;
|
||||
status_changed_at: string | null;
|
||||
}
|
||||
|
||||
type Kind = 'blank' | 'seeded';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onCreated: (row: TopologySummary) => void;
|
||||
}
|
||||
|
||||
const LOCAL_CARD_ID = '__local__';
|
||||
|
||||
const CreateTopologyWizard: React.FC<Props> = ({ open, onClose, onCreated }) => {
|
||||
const [step, setStep] = useState<0 | 1>(0);
|
||||
const [targetId, setTargetId] = useState<string | null>(null); // LOCAL_CARD_ID or host uuid
|
||||
const [kind, setKind] = useState<Kind | null>(null);
|
||||
const [name, setName] = useState('');
|
||||
const [depth, setDepth] = useState(2);
|
||||
const [branchingFactor, setBranchingFactor] = useState(2);
|
||||
const [minDeckies, setMinDeckies] = useState(1);
|
||||
const [maxDeckies, setMaxDeckies] = useState(3);
|
||||
const [seed, setSeed] = useState<string>('');
|
||||
|
||||
const [hosts, setHosts] = useState<SwarmHost[]>([]);
|
||||
const [hostsLoaded, setHostsLoaded] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
|
||||
/* Reset state whenever the modal opens so a cancelled run doesn't
|
||||
* leak into the next attempt. */
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setStep(0);
|
||||
setTargetId(null);
|
||||
setKind(null);
|
||||
setName('');
|
||||
setDepth(2);
|
||||
setBranchingFactor(2);
|
||||
setMinDeckies(1);
|
||||
setMaxDeckies(3);
|
||||
setSeed('');
|
||||
setErr(null);
|
||||
setSubmitting(false);
|
||||
}, [open]);
|
||||
|
||||
const fetchHosts = useCallback(async () => {
|
||||
try {
|
||||
const { data } = await api.get<SwarmHost[]>('/swarm/hosts');
|
||||
setHosts(data ?? []);
|
||||
} catch (e) {
|
||||
/* Non-fatal: the user can still pick LOCAL. */
|
||||
setHosts([]);
|
||||
} finally {
|
||||
setHostsLoaded(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) fetchHosts();
|
||||
}, [open, fetchHosts]);
|
||||
|
||||
const selectedHost = useMemo(
|
||||
() => (targetId && targetId !== LOCAL_CARD_ID ? hosts.find((h) => h.uuid === targetId) ?? null : null),
|
||||
[targetId, hosts],
|
||||
);
|
||||
|
||||
const canNext = step === 0 ? !!targetId : !!kind && name.trim().length > 0;
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!targetId || !kind) return;
|
||||
setSubmitting(true);
|
||||
setErr(null);
|
||||
const isAgent = targetId !== LOCAL_CARD_ID;
|
||||
const targetHostUuid = isAgent ? targetId : null;
|
||||
const mode = isAgent ? 'agent' : 'unihost';
|
||||
try {
|
||||
if (kind === 'blank') {
|
||||
const { data } = await api.post<TopologySummary>('/topologies/blank', {
|
||||
name: name.trim(),
|
||||
mode,
|
||||
target_host_uuid: targetHostUuid,
|
||||
});
|
||||
onCreated(data);
|
||||
} else {
|
||||
const body: Record<string, unknown> = {
|
||||
name: name.trim(),
|
||||
mode,
|
||||
target_host_uuid: targetHostUuid,
|
||||
depth,
|
||||
branching_factor: branchingFactor,
|
||||
deckies_per_lan_min: minDeckies,
|
||||
deckies_per_lan_max: maxDeckies,
|
||||
randomize_services: true,
|
||||
};
|
||||
const parsedSeed = seed.trim();
|
||||
if (parsedSeed !== '') {
|
||||
const n = Number(parsedSeed);
|
||||
if (Number.isFinite(n) && n >= 0) body.seed = Math.floor(n);
|
||||
}
|
||||
const { data } = await api.post<TopologySummary>('/topologies/', body);
|
||||
onCreated(data);
|
||||
}
|
||||
} catch (e) {
|
||||
const msg =
|
||||
// axios response shape
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
((e as any)?.response?.data?.detail as string | undefined) ??
|
||||
(e as Error)?.message ??
|
||||
'create failed';
|
||||
setErr(msg);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
/* The two cards in step-0 grid: LOCAL first, then each enrolled agent. */
|
||||
const step0Cards = (
|
||||
<>
|
||||
<div
|
||||
onClick={() => setTargetId(LOCAL_CARD_ID)}
|
||||
className={`ctw-card ${targetId === LOCAL_CARD_ID ? 'selected' : ''}`}
|
||||
>
|
||||
<div className="ctw-card-head">
|
||||
<Cpu size={16} className="ctw-violet" />
|
||||
<span className="ctw-card-name">RUN LOCALLY</span>
|
||||
</div>
|
||||
<div className="ctw-card-sub">master</div>
|
||||
<div className="ctw-card-desc">Topology materialises on this master host via the local docker daemon.</div>
|
||||
</div>
|
||||
|
||||
{hosts.map((h) => {
|
||||
const routable = h.status === 'active' || h.status === 'enrolled';
|
||||
return (
|
||||
<div
|
||||
key={h.uuid}
|
||||
onClick={() => routable && setTargetId(h.uuid)}
|
||||
className={`ctw-card ${targetId === h.uuid ? 'selected' : ''} ${routable ? '' : 'disabled'}`}
|
||||
title={routable ? undefined : `host is ${h.status}`}
|
||||
>
|
||||
<div className="ctw-card-head">
|
||||
<Server size={16} className="ctw-violet" />
|
||||
<span className="ctw-card-name">{h.name}</span>
|
||||
</div>
|
||||
<div className="ctw-card-sub">
|
||||
{h.address}:{h.agent_port} · {h.status}
|
||||
</div>
|
||||
<div className="ctw-card-desc">
|
||||
Topology pushed over mTLS to this swarm worker.
|
||||
{h.last_heartbeat && (
|
||||
<>
|
||||
<br />
|
||||
<span className="ctw-dim">last seen {new Date(h.last_heartbeat).toLocaleTimeString()}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{hostsLoaded && hosts.length === 0 && (
|
||||
<div className="ctw-card-note">
|
||||
No agents enrolled yet. Only local deployment is available.
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const step1Cards = (
|
||||
<>
|
||||
<div
|
||||
onClick={() => setKind('blank')}
|
||||
className={`ctw-card ${kind === 'blank' ? 'selected' : ''}`}
|
||||
>
|
||||
<div className="ctw-card-head">
|
||||
<FileText size={16} className="ctw-violet" />
|
||||
<span className="ctw-card-name">BLANK</span>
|
||||
</div>
|
||||
<div className="ctw-card-sub">start from scratch</div>
|
||||
<div className="ctw-card-desc">
|
||||
Creates an empty topology with a single DMZ LAN and its gateway decky. Build out the rest in the editor.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={() => setKind('seeded')}
|
||||
className={`ctw-card ${kind === 'seeded' ? 'selected' : ''}`}
|
||||
>
|
||||
<div className="ctw-card-head">
|
||||
<Sparkles size={16} className="ctw-violet" />
|
||||
<span className="ctw-card-name">SEED-BASED</span>
|
||||
</div>
|
||||
<div className="ctw-card-sub">procedurally generated</div>
|
||||
<div className="ctw-card-desc">
|
||||
Runs the MazeNET generator with depth/branching/deckies parameters. Seed is optional — omit for a fresh roll.
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const targetLabel =
|
||||
targetId === LOCAL_CARD_ID ? 'RUN LOCALLY' : selectedHost ? selectedHost.name : '—';
|
||||
|
||||
return (
|
||||
<div className="ctw-backdrop" onClick={onClose}>
|
||||
<div className="ctw-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="ctw-head">
|
||||
<h3>
|
||||
<Sparkles size={14} style={{ marginRight: 8 }} /> NEW TOPOLOGY
|
||||
</h3>
|
||||
<button className="ctw-close" onClick={onClose} aria-label="close">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="ctw-steps">
|
||||
{['TARGET', 'TYPE'].map((label, i) => (
|
||||
<div
|
||||
key={label}
|
||||
className={`ctw-step ${i === step ? 'active' : i < step ? 'done' : ''}`}
|
||||
>
|
||||
{i + 1}. {label}
|
||||
{i < step && <Check size={11} style={{ marginLeft: 6 }} />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ctw-body">
|
||||
{step === 0 && (
|
||||
<>
|
||||
<div className="ctw-label">Where should this topology run?</div>
|
||||
<div className="ctw-grid-3">{step0Cards}</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className="ctw-label">
|
||||
Target: <span className="ctw-violet">{targetLabel}</span> · pick a starting point.
|
||||
</div>
|
||||
<div className="ctw-grid-2">{step1Cards}</div>
|
||||
|
||||
<div className="ctw-field">
|
||||
<label>NAME</label>
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. honeynet-dev"
|
||||
maxLength={64}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{kind === 'seeded' && (
|
||||
<div className="ctw-grid-2">
|
||||
<div className="ctw-field">
|
||||
<label>DEPTH ({depth})</label>
|
||||
<input type="range" min={1} max={6} value={depth} onChange={(e) => setDepth(+e.target.value)} />
|
||||
</div>
|
||||
<div className="ctw-field">
|
||||
<label>BRANCHING ({branchingFactor})</label>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={4}
|
||||
value={branchingFactor}
|
||||
onChange={(e) => setBranchingFactor(+e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ctw-field">
|
||||
<label>DECKIES / LAN MIN ({minDeckies})</label>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={8}
|
||||
value={minDeckies}
|
||||
onChange={(e) => {
|
||||
const v = +e.target.value;
|
||||
setMinDeckies(v);
|
||||
if (v > maxDeckies) setMaxDeckies(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="ctw-field">
|
||||
<label>DECKIES / LAN MAX ({maxDeckies})</label>
|
||||
<input
|
||||
type="range"
|
||||
min={Math.max(1, minDeckies)}
|
||||
max={12}
|
||||
value={maxDeckies}
|
||||
onChange={(e) => setMaxDeckies(+e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ctw-field" style={{ gridColumn: '1 / -1' }}>
|
||||
<label>SEED (optional, integer)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={seed}
|
||||
onChange={(e) => setSeed(e.target.value)}
|
||||
placeholder="leave blank for random"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{err && <div className="ctw-error">{err}</div>}
|
||||
</div>
|
||||
|
||||
<div className="ctw-foot">
|
||||
<button className="ctw-btn ghost" onClick={onClose}>
|
||||
CANCEL
|
||||
</button>
|
||||
<div className="ctw-foot-right">
|
||||
{step > 0 && !submitting && (
|
||||
<button className="ctw-btn ghost" onClick={() => setStep(0)}>
|
||||
← BACK
|
||||
</button>
|
||||
)}
|
||||
{step === 0 && (
|
||||
<button className="ctw-btn" disabled={!canNext} onClick={() => setStep(1)}>
|
||||
NEXT →
|
||||
</button>
|
||||
)}
|
||||
{step === 1 && (
|
||||
<button className="ctw-btn" disabled={!canNext || submitting} onClick={handleCreate}>
|
||||
{submitting ? 'CREATING…' : 'CREATE'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateTopologyWizard;
|
||||
Reference in New Issue
Block a user