refactor(decnet_web/MazeNET): split Inspector by selection type
Inspector.tsx (606 LOC) splits into Inspector/{NetInspector,
NodeInspector, EdgeInspector, ServiceInspector, index}.tsx plus
types.ts. The dispatcher (index.tsx) owns the title bar, the empty
state, the activeNetIds derivation, the pending-diff block, and the
topology-status block; each per-type panel takes only the props it
needs. NodeInspector keeps the 7 useStates for the add-service /
tarpit forms since they are node-only.
10 new dispatcher-level tests cover empty / node / net / edge /
service / observed-entity / internet-net / live-ops gating /
tarpit-controls / pending-diff. Selection type re-exported from
Inspector/index.tsx so MazeNET.tsx, Canvas.tsx, and
useMazeContextMenu.tsx keep their existing import path.
This commit is contained in:
@@ -1,606 +0,0 @@
|
||||
import React, { useMemo, useRef, useEffect, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft, ArrowRight, Crosshair, Globe, GitMerge, MousePointer2, Plus,
|
||||
Server, Trash2, X, Shield,
|
||||
} from '../../icons';
|
||||
import type { Net, MazeNode, Edge } from './types';
|
||||
import { DEFAULT_SERVICES } from './data';
|
||||
import ServiceConfigForm from '../ServiceConfigForm';
|
||||
import type { ApiError } from '../../utils/api';
|
||||
|
||||
export type Selection =
|
||||
| { type: 'net'; id: string }
|
||||
| { type: 'node'; id: string }
|
||||
| { type: 'edge'; id: string }
|
||||
| { type: 'service'; id: string; nodeId: string }
|
||||
| null;
|
||||
|
||||
interface Props {
|
||||
selection: Selection;
|
||||
nets: Net[];
|
||||
nodes: MazeNode[];
|
||||
edges: Edge[];
|
||||
/** Topology ID (MazeNET-only) — required for the schema-driven service
|
||||
* config form to hit the per-topology REST path. Omit for fleet. */
|
||||
topologyId?: string;
|
||||
topologyStatus?: string;
|
||||
onClose?: () => void;
|
||||
onDeleteNet?: (id: string) => void;
|
||||
onDeleteNode?: (id: string) => void;
|
||||
onDeleteEdge?: (id: string) => void;
|
||||
onRemoveService?: (nodeId: string, slug: string) => void;
|
||||
// Live (post-deploy) service mutation, hitting W3 endpoints directly.
|
||||
// Distinct from onRemoveService which queues a design-time graph
|
||||
// mutation. Both can coexist; the inspector picks based on
|
||||
// topologyStatus (active/degraded → live, pending/anything else →
|
||||
// design-time only). Wiring these props from MazeNET.tsx is the
|
||||
// single switch that turns chips into live controls.
|
||||
/** Trigger the schema-driven add-service flow. Synchronous: opens
|
||||
* the AddServiceConfigModal at the page level (or auto-confirms if
|
||||
* the service has no schema fields). Errors surface inside the modal. */
|
||||
onLiveAddService?: (nodeName: string, slug: string) => void;
|
||||
onLiveRemoveService?: (nodeName: string, slug: string) => Promise<void>;
|
||||
/** Per-decky-eligible service slugs, fetched via useServiceRegistry. */
|
||||
availableServices?: string[];
|
||||
/** Toggle ``forwards_l3`` (gateway) on the selected decky. When the
|
||||
* topology is active/degraded the caller is responsible for the
|
||||
* destructive-recreate confirm dialog and the ``force: true`` submit
|
||||
* — this prop just relays the user's intent. */
|
||||
onToggleGateway?: (nodeId: string, nextValue: boolean) => Promise<void>;
|
||||
/** Tarpit controls — only shown when topology is active/degraded and node is a deployed decky. */
|
||||
onLiveTarpitEnable?: (nodeName: string, ports: number[], delayMs: number) => Promise<void>;
|
||||
onLiveTarpitDisable?: (nodeName: string) => Promise<void>;
|
||||
onAddDecky?: (netId: string) => void;
|
||||
setSelection?: (sel: Selection) => void;
|
||||
pendingChanges?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Inspector: React.FC<Props> = ({
|
||||
selection, nets, nodes, edges, topologyId, topologyStatus, onClose,
|
||||
onDeleteNet, onDeleteNode, onDeleteEdge, onRemoveService,
|
||||
onLiveAddService, onLiveRemoveService, availableServices = [],
|
||||
onToggleGateway,
|
||||
onLiveTarpitEnable, onLiveTarpitDisable,
|
||||
onAddDecky, setSelection,
|
||||
pendingChanges = 0,
|
||||
className = '',
|
||||
}) => {
|
||||
const liveOpsEnabled =
|
||||
!!onLiveAddService &&
|
||||
!!onLiveRemoveService &&
|
||||
(topologyStatus === 'active' || topologyStatus === 'degraded');
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [addSlug, setAddSlug] = useState('');
|
||||
const [busy, setBusy] = useState<string | null>(null); // slug currently mutating
|
||||
const [opError, setOpError] = useState<string | null>(null);
|
||||
|
||||
// Tarpit state — local form, fires parent callbacks
|
||||
const [tarpitOpen, setTarpitOpen] = useState(false);
|
||||
const [tarpitPorts, setTarpitPorts] = useState('22');
|
||||
const [tarpitDelay, setTarpitDelay] = useState(30000);
|
||||
const tarpitEnabled = liveOpsEnabled && !!onLiveTarpitEnable && !!onLiveTarpitDisable;
|
||||
|
||||
// Close tarpit form when selection changes
|
||||
const prevNodeId = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
const nodeId = selection?.type === 'node' ? selection.id : undefined;
|
||||
if (nodeId !== prevNodeId.current) {
|
||||
prevNodeId.current = nodeId;
|
||||
setTarpitOpen(false);
|
||||
}
|
||||
}, [selection]);
|
||||
const net = selection?.type === 'net' ? nets.find((n) => n.id === selection.id) : undefined;
|
||||
const node = selection?.type === 'node' ? nodes.find((n) => n.id === selection.id) : undefined;
|
||||
const edge = selection?.type === 'edge' ? edges.find((e) => e.id === selection.id) : undefined;
|
||||
const serviceSel = selection?.type === 'service' ? selection : undefined;
|
||||
const serviceMeta = serviceSel ? DEFAULT_SERVICES.find((s) => s.slug === serviceSel.id) : undefined;
|
||||
const serviceParent = serviceSel ? nodes.find((n) => n.id === serviceSel.nodeId) : undefined;
|
||||
const serviceParentNet = serviceParent ? nets.find((n) => n.id === serviceParent.netId) : undefined;
|
||||
|
||||
const activeNetIds = useMemo(() => {
|
||||
const s = new Set<string>();
|
||||
edges.forEach((e) => {
|
||||
const f = nodes.find((n) => n.id === e.from);
|
||||
const t = nodes.find((n) => n.id === e.to);
|
||||
if (f) s.add(f.netId);
|
||||
if (t) s.add(t.netId);
|
||||
});
|
||||
return s;
|
||||
}, [edges, nodes]);
|
||||
|
||||
const typeLabel = selection ? selection.type.toUpperCase() : 'IDLE';
|
||||
const isGateway = node?.kind === 'decky' && !!node.decky_config?.forwards_l3;
|
||||
const isObserved = node?.kind === 'observed';
|
||||
|
||||
return (
|
||||
<aside className={`maze-inspector ${className}`}>
|
||||
<div className="maze-inspector-title">
|
||||
<Crosshair size={12} className="violet-accent" />
|
||||
<span>INSPECTOR</span>
|
||||
<span className="dim inspector-type-label">{typeLabel}</span>
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
className="inspector-close-btn"
|
||||
onClick={onClose}
|
||||
title="Hide inspector"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="maze-inspector-body">
|
||||
{!selection && (
|
||||
<div className="inspector-empty">
|
||||
<MousePointer2 size={22} style={{ opacity: 0.4, marginBottom: 10 }} />
|
||||
<div>SELECT A NODE, NETWORK, OR EDGE</div>
|
||||
<div style={{ marginTop: 10, fontSize: '0.6rem', opacity: 0.5 }}>
|
||||
Right-click for actions
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{node && (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<span className={`status-dot ${node.status}`} />
|
||||
<span className="inspector-head-title">{node.name}</span>
|
||||
<span className="chip violet inspector-head-chip">{node.archetype}</span>
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">NETWORK</div>
|
||||
<div className="v violet-accent">
|
||||
{nets.find((nn) => nn.id === node.netId)?.label ?? node.netId}
|
||||
</div>
|
||||
<div className="k">STATUS</div>
|
||||
<div className="v">{node.status.toUpperCase()}</div>
|
||||
<div className="k">SERVICES</div>
|
||||
<div className="v">
|
||||
<div className="inspector-service-row">
|
||||
{node.services.length === 0 && <span className="dim">—</span>}
|
||||
{node.services.map((s) => (
|
||||
<span key={s} className="service-tag" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
<span>{s}</span>
|
||||
{liveOpsEnabled && node.kind !== 'observed' && (
|
||||
<button
|
||||
type="button"
|
||||
title={`Remove ${s} (live)`}
|
||||
disabled={busy === s}
|
||||
onClick={async () => {
|
||||
setOpError(null);
|
||||
setBusy(s);
|
||||
try {
|
||||
await onLiveRemoveService!(node.name, s);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)?.response?.data?.detail
|
||||
?? 'Remove failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
background: 'transparent', border: 'none', padding: 0,
|
||||
color: 'inherit', cursor: busy === s ? 'wait' : 'pointer',
|
||||
opacity: busy === s ? 0.4 : 0.7, lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
<X size={9} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{liveOpsEnabled && node.kind !== 'observed' && !addOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="service-tag"
|
||||
onClick={() => { setAddOpen(true); setAddSlug(''); }}
|
||||
style={{ cursor: 'pointer', borderStyle: 'dashed' }}
|
||||
title="Add service (live)"
|
||||
>
|
||||
<Plus size={10} /> ADD
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{liveOpsEnabled && addOpen && (
|
||||
<div style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}>
|
||||
<select
|
||||
value={addSlug}
|
||||
onChange={(e) => setAddSlug(e.target.value)}
|
||||
style={{
|
||||
flex: 1, fontSize: '0.75rem', padding: '4px 6px',
|
||||
background: 'var(--matrix-tint-10)',
|
||||
border: '1px solid var(--border-color, #30363d)',
|
||||
color: 'var(--text-color)',
|
||||
}}
|
||||
>
|
||||
<option value="">— pick a service —</option>
|
||||
{availableServices
|
||||
.filter((s) => !(node.services as readonly string[]).includes(s))
|
||||
.map((s) => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!addSlug || busy === addSlug}
|
||||
onClick={() => {
|
||||
if (!addSlug) return;
|
||||
setOpError(null);
|
||||
// Fire-and-forget: opens the schema-driven config
|
||||
// modal at the page level (or auto-confirms for
|
||||
// schema-less services). Errors surface in the modal.
|
||||
onLiveAddService!(node.name, addSlug);
|
||||
setAddOpen(false);
|
||||
setAddSlug('');
|
||||
}}
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: '0.7rem',
|
||||
border: '1px solid var(--accent-color, #00ff88)',
|
||||
background: 'var(--accent-color, #00ff88)',
|
||||
color: 'var(--bg-color, #0d1117)',
|
||||
cursor: busy === addSlug ? 'wait' : 'pointer',
|
||||
opacity: !addSlug || busy === addSlug ? 0.5 : 1,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
ADD
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setAddOpen(false); setAddSlug(''); }}
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: '0.7rem',
|
||||
border: '1px solid var(--dim-color)',
|
||||
background: 'transparent', color: 'var(--dim-color)',
|
||||
cursor: 'pointer', textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{opError && (
|
||||
<div style={{ color: '#ff5555', fontSize: '0.7rem', marginTop: 6 }}>{opError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="type-label inspector-section-label">CONNECTIONS</div>
|
||||
{edges.filter((e) => e.from === node.id || e.to === node.id).map((e) => {
|
||||
const otherId = e.from === node.id ? e.to : e.from;
|
||||
const other = nodes.find((n) => n.id === otherId);
|
||||
const Arrow = e.from === node.id ? ArrowRight : ArrowLeft;
|
||||
return (
|
||||
<div key={e.id} className="inspector-conn-row">
|
||||
<Arrow size={10} className={e.traffic === 'hot' ? 'alert-text' : 'dim'} />
|
||||
<span>{other?.name ?? '—'}</span>
|
||||
<span className="chip dim-chip inspector-conn-chip">{e.traffic}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{edges.filter((e) => e.from === node.id || e.to === node.id).length === 0 && (
|
||||
<div className="dim inspector-empty-line">NO EDGES</div>
|
||||
)}
|
||||
</div>
|
||||
{onToggleGateway && !isObserved && (
|
||||
<button
|
||||
type="button"
|
||||
className={`maze-btn small ${isGateway ? 'alert' : ''}`}
|
||||
disabled={busy === '__gateway__'}
|
||||
title={
|
||||
isGateway
|
||||
? 'Demote this decky from gateway (forwards_l3=false)'
|
||||
: 'Promote this decky to gateway (forwards_l3=true)'
|
||||
}
|
||||
onClick={async () => {
|
||||
const next = !isGateway;
|
||||
// forwards_l3 flip on a deployed topology recreates
|
||||
// the base container — destructive. Confirm before
|
||||
// hitting the API; the caller (MazeNET.tsx) submits
|
||||
// with force: true on active topologies.
|
||||
const live = topologyStatus === 'active' || topologyStatus === 'degraded';
|
||||
if (live) {
|
||||
const ok = window.confirm(
|
||||
`${next ? 'Promote' : 'Demote'} ${node.name} ${next ? 'to' : 'from'} gateway?\n\n` +
|
||||
'This recreates the base container to apply the new port-publishing config. ' +
|
||||
'In-container state is lost; active sessions to it drop.',
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
setOpError(null);
|
||||
setBusy('__gateway__');
|
||||
try {
|
||||
await onToggleGateway(node.id, next);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)?.response?.data?.detail
|
||||
?? 'Gateway toggle failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Shield size={12} />
|
||||
{busy === '__gateway__'
|
||||
? (isGateway ? 'DEMOTING…' : 'PROMOTING…')
|
||||
: (isGateway ? 'DEMOTE GATEWAY' : 'PROMOTE TO GATEWAY')}
|
||||
</button>
|
||||
)}
|
||||
{tarpitEnabled && !isObserved && (
|
||||
<div className="inspector-tarpit-wrap">
|
||||
<div className="inspector-tarpit-row">
|
||||
<button
|
||||
type="button"
|
||||
className={`maze-btn small ${tarpitOpen ? 'active' : ''}`}
|
||||
disabled={busy === '__tarpit__'}
|
||||
onClick={() => setTarpitOpen((o) => !o)}
|
||||
title="Configure tc netem tarpit on this decky"
|
||||
>
|
||||
<Shield size={12} />
|
||||
{tarpitOpen ? 'CANCEL' : 'TARPIT'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={busy === '__tarpit__'}
|
||||
title="Remove active tarpit rule"
|
||||
onClick={async () => {
|
||||
setOpError(null);
|
||||
setBusy('__tarpit__');
|
||||
try {
|
||||
await onLiveTarpitDisable!(node.name);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)
|
||||
?.response?.data?.detail ?? 'Tarpit disable failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{busy === '__tarpit__' ? '…' : 'DISABLE'}
|
||||
</button>
|
||||
</div>
|
||||
{tarpitOpen && (
|
||||
<div className="inspector-tarpit-form">
|
||||
<div className="inspector-tarpit-field">
|
||||
<label className="type-label">PORTS</label>
|
||||
<input
|
||||
className="maze-input"
|
||||
value={tarpitPorts}
|
||||
placeholder="22,80,443"
|
||||
onChange={(e) => setTarpitPorts(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="inspector-tarpit-field">
|
||||
<label className="type-label">
|
||||
DELAY · {tarpitDelay >= 1000
|
||||
? `${(tarpitDelay / 1000).toFixed(0)}s`
|
||||
: `${tarpitDelay}ms`}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min={100}
|
||||
max={60000}
|
||||
step={100}
|
||||
value={tarpitDelay}
|
||||
onChange={(e) => setTarpitDelay(parseInt(e.target.value, 10))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={busy === '__tarpit__' || !tarpitPorts.trim()}
|
||||
onClick={async () => {
|
||||
const ports = tarpitPorts
|
||||
.split(',')
|
||||
.map((p) => parseInt(p.trim(), 10))
|
||||
.filter((p) => !isNaN(p) && p > 0 && p <= 65535);
|
||||
if (!ports.length) return;
|
||||
setOpError(null);
|
||||
setBusy('__tarpit__');
|
||||
try {
|
||||
await onLiveTarpitEnable!(node.name, ports, tarpitDelay);
|
||||
setTarpitOpen(false);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)
|
||||
?.response?.data?.detail ?? 'Tarpit enable failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{busy === '__tarpit__' ? 'APPLYING…' : 'APPLY TARPIT'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{onDeleteNode && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={isObserved || isGateway}
|
||||
title={
|
||||
isObserved ? 'observed entity — not a deployed decky'
|
||||
: isGateway ? 'DMZ gateway — pinned to its DMZ network'
|
||||
: undefined
|
||||
}
|
||||
onClick={() => !isObserved && !isGateway && onDeleteNode(node.id)}
|
||||
>
|
||||
<Trash2 size={12} /> REMOVE FROM GRAPH
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{net && (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
{net.kind === 'internet'
|
||||
? <Globe size={14} className="violet-accent" />
|
||||
: <GitMerge size={14} className="violet-accent" />}
|
||||
<span className="inspector-head-title">{net.label}</span>
|
||||
{net.kind !== 'internet' && !activeNetIds.has(net.id) && (
|
||||
<span className="chip-mini inspector-head-chip">INACTIVE</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">KIND</div><div className="v">{net.kind.toUpperCase()}</div>
|
||||
<div className="k">CIDR</div><div className="v">{net.cidr}</div>
|
||||
<div className="k">DECKIES</div>
|
||||
<div className="v" style={{ fontWeight: 700 }}>
|
||||
{nodes.filter((n) => n.netId === net.id).length}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="type-label inspector-section-label">MEMBERS</div>
|
||||
{nodes.filter((n) => n.netId === net.id).map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="inspector-member-row"
|
||||
onClick={() => setSelection?.({ type: 'node', id: n.id })}
|
||||
>
|
||||
<span className={`status-dot ${n.status}`} />
|
||||
<span>{n.name}</span>
|
||||
<span className="dim inspector-member-arch">{n.archetype}</span>
|
||||
</div>
|
||||
))}
|
||||
{nodes.filter((n) => n.netId === net.id).length === 0 && (
|
||||
<div className="dim inspector-empty-line">NO MEMBERS</div>
|
||||
)}
|
||||
</div>
|
||||
{net.kind !== 'internet' && onAddDecky && (
|
||||
<button type="button" className="maze-btn small" onClick={() => onAddDecky(net.id)}>
|
||||
<Plus size={10} /> ADD DECKY
|
||||
</button>
|
||||
)}
|
||||
{net.kind !== 'internet' && onDeleteNet && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
onClick={() => onDeleteNet(net.id)}
|
||||
>
|
||||
<Trash2 size={10} /> REMOVE NETWORK
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{edge && (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<Server size={14} className="violet-accent" />
|
||||
<span className="inspector-head-title">EDGE · {edge.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">FROM</div>
|
||||
<div className="v">{nodes.find((n) => n.id === edge.from)?.name ?? edge.from}</div>
|
||||
<div className="k">TO</div>
|
||||
<div className="v">{nodes.find((n) => n.id === edge.to)?.name ?? edge.to}</div>
|
||||
<div className="k">TRAFFIC</div>
|
||||
<div className="v">{edge.traffic.toUpperCase()}</div>
|
||||
{edge.label && (
|
||||
<>
|
||||
<div className="k">LABEL</div>
|
||||
<div className="v">{edge.label}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{onDeleteEdge && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
onClick={() => onDeleteEdge(edge.id)}
|
||||
>
|
||||
<Trash2 size={10} /> CUT EDGE
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{serviceSel && (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<Shield
|
||||
size={14}
|
||||
className={serviceMeta?.risk === 'high' ? 'alert-text' : 'violet-accent'}
|
||||
/>
|
||||
<span className="inspector-head-title">
|
||||
{serviceMeta?.name ?? serviceSel.id.toUpperCase()}
|
||||
</span>
|
||||
{serviceMeta && (
|
||||
<span className={`chip inspector-head-chip ${
|
||||
serviceMeta.risk === 'high' ? 'alert'
|
||||
: serviceMeta.risk === 'med' ? 'violet'
|
||||
: 'dim-chip'
|
||||
}`}>
|
||||
{serviceMeta.risk.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">EXPOSED ON</div>
|
||||
<div className="v violet-accent">{serviceParent?.name ?? '—'}</div>
|
||||
<div className="k">PROTOCOL</div>
|
||||
<div className="v">{(serviceMeta?.proto ?? '—').toUpperCase()}</div>
|
||||
<div className="k">PORT</div>
|
||||
<div className="v" style={{ fontWeight: 700 }}>{serviceMeta?.port ?? '—'}</div>
|
||||
<div className="k">SUBNET</div>
|
||||
<div className="v">{serviceParentNet?.label ?? '—'}</div>
|
||||
</div>
|
||||
{topologyId && serviceParent && serviceParent.kind !== 'observed' && (
|
||||
<ServiceConfigForm
|
||||
key={`${serviceParent.name}:${serviceSel.id}`}
|
||||
deckyName={serviceParent.name}
|
||||
serviceSlug={serviceSel.id}
|
||||
topologyId={topologyId}
|
||||
currentConfig={
|
||||
((serviceParent.decky_config as { service_config?: Record<string, Record<string, unknown>> } | undefined)
|
||||
?.service_config?.[serviceSel.id]) ?? {}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{onRemoveService && serviceParent && serviceParent.kind !== 'observed' && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={topologyStatus === 'degraded'}
|
||||
title={topologyStatus === 'degraded' ? 'topology degraded — mutations blocked' : undefined}
|
||||
onClick={() => onRemoveService(serviceSel.nodeId, serviceSel.id)}
|
||||
>
|
||||
<Trash2 size={10} /> REMOVE SERVICE
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{pendingChanges > 0 && (
|
||||
<div className="inspector-diff-block">
|
||||
<div className="type-label inspector-section-label">PENDING DIFF</div>
|
||||
<div className="maze-diff">
|
||||
<span className="ctx"> +{pendingChanges} graph mutation(s)</span>{'\n'}
|
||||
<span className="ctx"> networks: {nets.length}</span>{'\n'}
|
||||
<span className="ctx"> deckies: {nodes.length}</span>{'\n'}
|
||||
<span className="ctx"> paths: {edges.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{topologyStatus && !selection && (
|
||||
<div className="kvs inspector-status-block">
|
||||
<div className="k">TOPOLOGY</div>
|
||||
<div className="v">{topologyStatus.toUpperCase()}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Inspector;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import { Server, Trash2 } from '../../../icons';
|
||||
import type { Edge, MazeNode } from '../types';
|
||||
|
||||
interface Props {
|
||||
edge: Edge;
|
||||
nodes: MazeNode[];
|
||||
onDeleteEdge?: (id: string) => void;
|
||||
}
|
||||
|
||||
const EdgeInspector: React.FC<Props> = ({ edge, nodes, onDeleteEdge }) => (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<Server size={14} className="violet-accent" />
|
||||
<span className="inspector-head-title">EDGE · {edge.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">FROM</div>
|
||||
<div className="v">{nodes.find((n) => n.id === edge.from)?.name ?? edge.from}</div>
|
||||
<div className="k">TO</div>
|
||||
<div className="v">{nodes.find((n) => n.id === edge.to)?.name ?? edge.to}</div>
|
||||
<div className="k">TRAFFIC</div>
|
||||
<div className="v">{edge.traffic.toUpperCase()}</div>
|
||||
{edge.label && (
|
||||
<>
|
||||
<div className="k">LABEL</div>
|
||||
<div className="v">{edge.label}</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{onDeleteEdge && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
onClick={() => onDeleteEdge(edge.id)}
|
||||
>
|
||||
<Trash2 size={10} /> CUT EDGE
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
export default EdgeInspector;
|
||||
155
decnet_web/src/components/MazeNET/Inspector/Inspector.test.tsx
Normal file
155
decnet_web/src/components/MazeNET/Inspector/Inspector.test.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import Inspector from './index';
|
||||
import type { DeckyNode, Edge, Net, ObservedNode } from '../types';
|
||||
|
||||
const subnet: Net = {
|
||||
id: 'lan-1', name: 'lan-corp', label: 'CORP',
|
||||
cidr: '10.0.0.0/24', kind: 'subnet', x: 0, y: 0, w: 300, h: 240,
|
||||
};
|
||||
const internet: Net = {
|
||||
id: 'lan-www', name: 'internet', label: 'INTERNET',
|
||||
cidr: '0.0.0.0/0', kind: 'internet', x: 0, y: 0, w: 300, h: 240,
|
||||
};
|
||||
const decky: DeckyNode = {
|
||||
kind: 'decky', id: 'd1', name: 'decoy-01', netId: 'lan-1',
|
||||
archetype: 'workstation', services: ['ssh'], status: 'idle', x: 0, y: 0,
|
||||
};
|
||||
const observed: ObservedNode = {
|
||||
kind: 'observed', id: 'obs-1', netId: 'lan-www', name: '1.2.3.4',
|
||||
archetype: 'attacker-pool', services: ['*'], status: 'idle', x: 0, y: 0,
|
||||
};
|
||||
const edge: Edge = {
|
||||
id: 'e-1', from: 'obs-1', to: 'd1', traffic: 'hot',
|
||||
};
|
||||
|
||||
describe('Inspector dispatcher', () => {
|
||||
it('shows the empty state when nothing is selected', () => {
|
||||
render(
|
||||
<Inspector selection={null} nets={[subnet]} nodes={[decky]} edges={[]} />,
|
||||
);
|
||||
expect(screen.getByText(/SELECT A NODE/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders NodeInspector when a node is selected', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'node', id: 'd1' }}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('decoy-01')).toBeInTheDocument();
|
||||
expect(screen.getByText('workstation')).toBeInTheDocument();
|
||||
expect(screen.getByText('CONNECTIONS')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders NetInspector when a net is selected and shows the INACTIVE chip', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'net', id: 'lan-1' }}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('CORP')).toBeInTheDocument();
|
||||
expect(screen.getByText('INACTIVE')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders EdgeInspector and fires onDeleteEdge', () => {
|
||||
const onDeleteEdge = vi.fn();
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'edge', id: 'e-1' }}
|
||||
nets={[subnet, internet]} nodes={[decky, observed]} edges={[edge]}
|
||||
onDeleteEdge={onDeleteEdge}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText(/EDGE ·/)).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText(/CUT EDGE/));
|
||||
expect(onDeleteEdge).toHaveBeenCalledWith('e-1');
|
||||
});
|
||||
|
||||
it('renders ServiceInspector with the parent decky and remove button', () => {
|
||||
const onRemoveService = vi.fn();
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'service', id: 'ssh', nodeId: 'd1' }}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
onRemoveService={onRemoveService}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('decoy-01')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByText(/REMOVE SERVICE/));
|
||||
expect(onRemoveService).toHaveBeenCalledWith('d1', 'ssh');
|
||||
});
|
||||
|
||||
it('forbids deleting an observed entity in NodeInspector', () => {
|
||||
const onDeleteNode = vi.fn();
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'node', id: 'obs-1' }}
|
||||
nets={[internet]} nodes={[observed]} edges={[]}
|
||||
onDeleteNode={onDeleteNode}
|
||||
/>,
|
||||
);
|
||||
const btn = screen.getByText(/REMOVE FROM GRAPH/).closest('button')!;
|
||||
expect(btn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('forbids deleting the internet net', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'net', id: 'lan-www' }}
|
||||
nets={[internet]} nodes={[observed]} edges={[]}
|
||||
onDeleteNet={() => {}}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText(/REMOVE NETWORK/)).toBeNull();
|
||||
});
|
||||
|
||||
it('hides live-ops controls on a pending topology', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'node', id: 'd1' }}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
topologyStatus="pending"
|
||||
onLiveAddService={vi.fn()}
|
||||
onLiveRemoveService={vi.fn()}
|
||||
onLiveTarpitEnable={vi.fn()}
|
||||
onLiveTarpitDisable={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText(/TARPIT/)).toBeNull();
|
||||
expect(screen.queryByText(/ ADD$/)).toBeNull();
|
||||
});
|
||||
|
||||
it('shows tarpit controls when topologyStatus=active and the callbacks are present', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={{ type: 'node', id: 'd1' }}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
topologyStatus="active"
|
||||
onLiveAddService={vi.fn()}
|
||||
onLiveRemoveService={vi.fn()}
|
||||
onLiveTarpitEnable={vi.fn()}
|
||||
onLiveTarpitDisable={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('TARPIT')).toBeInTheDocument();
|
||||
expect(screen.getByText('DISABLE')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders pending-diff block when pendingChanges > 0', () => {
|
||||
render(
|
||||
<Inspector
|
||||
selection={null}
|
||||
nets={[subnet]} nodes={[decky]} edges={[]}
|
||||
pendingChanges={3}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('PENDING DIFF')).toBeInTheDocument();
|
||||
expect(screen.getByText(/\+3 graph mutation/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
73
decnet_web/src/components/MazeNET/Inspector/NetInspector.tsx
Normal file
73
decnet_web/src/components/MazeNET/Inspector/NetInspector.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import { GitMerge, Globe, Plus, Trash2 } from '../../../icons';
|
||||
import type { MazeNode, Net } from '../types';
|
||||
import type { Selection } from './types';
|
||||
|
||||
interface Props {
|
||||
net: Net;
|
||||
nodes: MazeNode[];
|
||||
/** Set of net ids that have at least one edge — drives the
|
||||
* INACTIVE chip on subnets with no live traffic. */
|
||||
activeNetIds: Set<string>;
|
||||
setSelection?: (sel: Selection) => void;
|
||||
onAddDecky?: (netId: string) => void;
|
||||
onDeleteNet?: (id: string) => void;
|
||||
}
|
||||
|
||||
const NetInspector: React.FC<Props> = ({
|
||||
net, nodes, activeNetIds, setSelection, onAddDecky, onDeleteNet,
|
||||
}) => {
|
||||
const members = nodes.filter((n) => n.netId === net.id);
|
||||
return (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
{net.kind === 'internet'
|
||||
? <Globe size={14} className="violet-accent" />
|
||||
: <GitMerge size={14} className="violet-accent" />}
|
||||
<span className="inspector-head-title">{net.label}</span>
|
||||
{net.kind !== 'internet' && !activeNetIds.has(net.id) && (
|
||||
<span className="chip-mini inspector-head-chip">INACTIVE</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">KIND</div><div className="v">{net.kind.toUpperCase()}</div>
|
||||
<div className="k">CIDR</div><div className="v">{net.cidr}</div>
|
||||
<div className="k">DECKIES</div>
|
||||
<div className="v" style={{ fontWeight: 700 }}>{members.length}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="type-label inspector-section-label">MEMBERS</div>
|
||||
{members.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="inspector-member-row"
|
||||
onClick={() => setSelection?.({ type: 'node', id: n.id })}
|
||||
>
|
||||
<span className={`status-dot ${n.status}`} />
|
||||
<span>{n.name}</span>
|
||||
<span className="dim inspector-member-arch">{n.archetype}</span>
|
||||
</div>
|
||||
))}
|
||||
{members.length === 0 && (
|
||||
<div className="dim inspector-empty-line">NO MEMBERS</div>
|
||||
)}
|
||||
</div>
|
||||
{net.kind !== 'internet' && onAddDecky && (
|
||||
<button type="button" className="maze-btn small" onClick={() => onAddDecky(net.id)}>
|
||||
<Plus size={10} /> ADD DECKY
|
||||
</button>
|
||||
)}
|
||||
{net.kind !== 'internet' && onDeleteNet && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
onClick={() => onDeleteNet(net.id)}
|
||||
>
|
||||
<Trash2 size={10} /> REMOVE NETWORK
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetInspector;
|
||||
362
decnet_web/src/components/MazeNET/Inspector/NodeInspector.tsx
Normal file
362
decnet_web/src/components/MazeNET/Inspector/NodeInspector.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft, ArrowRight, Plus, Shield, Trash2, X,
|
||||
} from '../../../icons';
|
||||
import type { ApiError } from '../../../utils/api';
|
||||
import type { DeckyNode, Edge, MazeNode, Net } from '../types';
|
||||
|
||||
export interface NodeInspectorProps {
|
||||
node: MazeNode;
|
||||
nodes: MazeNode[];
|
||||
nets: Net[];
|
||||
edges: Edge[];
|
||||
topologyStatus?: string;
|
||||
/** Per-decky-eligible service slugs, fetched via useServiceRegistry. */
|
||||
availableServices?: string[];
|
||||
onDeleteNode?: (id: string) => void;
|
||||
/** Trigger the schema-driven add-service flow. Synchronous: opens
|
||||
* the AddServiceConfigModal at the page level (or auto-confirms if
|
||||
* the service has no schema fields). Errors surface inside the modal. */
|
||||
onLiveAddService?: (nodeName: string, slug: string) => void;
|
||||
onLiveRemoveService?: (nodeName: string, slug: string) => Promise<void>;
|
||||
onToggleGateway?: (nodeId: string, nextValue: boolean) => Promise<void>;
|
||||
onLiveTarpitEnable?: (nodeName: string, ports: number[], delayMs: number) => Promise<void>;
|
||||
onLiveTarpitDisable?: (nodeName: string) => Promise<void>;
|
||||
/** Selection key used to reset local form state when the user
|
||||
* picks a different node. */
|
||||
selectionKey: string | undefined;
|
||||
}
|
||||
|
||||
const NodeInspector: React.FC<NodeInspectorProps> = ({
|
||||
node, nodes, nets, edges, topologyStatus, availableServices = [],
|
||||
onDeleteNode, onLiveAddService, onLiveRemoveService, onToggleGateway,
|
||||
onLiveTarpitEnable, onLiveTarpitDisable, selectionKey,
|
||||
}) => {
|
||||
const liveOpsEnabled =
|
||||
!!onLiveAddService &&
|
||||
!!onLiveRemoveService &&
|
||||
(topologyStatus === 'active' || topologyStatus === 'degraded');
|
||||
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [addSlug, setAddSlug] = useState('');
|
||||
const [busy, setBusy] = useState<string | null>(null);
|
||||
const [opError, setOpError] = useState<string | null>(null);
|
||||
const [tarpitOpen, setTarpitOpen] = useState(false);
|
||||
const [tarpitPorts, setTarpitPorts] = useState('22');
|
||||
const [tarpitDelay, setTarpitDelay] = useState(30000);
|
||||
const tarpitEnabled = liveOpsEnabled && !!onLiveTarpitEnable && !!onLiveTarpitDisable;
|
||||
|
||||
// Close tarpit form when selection changes
|
||||
const prevKey = useRef<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
if (selectionKey !== prevKey.current) {
|
||||
prevKey.current = selectionKey;
|
||||
setTarpitOpen(false);
|
||||
}
|
||||
}, [selectionKey]);
|
||||
|
||||
const isObserved = node.kind === 'observed';
|
||||
const isGateway = node.kind === 'decky'
|
||||
&& !!(node as DeckyNode).decky_config?.forwards_l3;
|
||||
|
||||
const conns = edges.filter((e) => e.from === node.id || e.to === node.id);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<span className={`status-dot ${node.status}`} />
|
||||
<span className="inspector-head-title">{node.name}</span>
|
||||
<span className="chip violet inspector-head-chip">{node.archetype}</span>
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">NETWORK</div>
|
||||
<div className="v violet-accent">
|
||||
{nets.find((nn) => nn.id === node.netId)?.label ?? node.netId}
|
||||
</div>
|
||||
<div className="k">STATUS</div>
|
||||
<div className="v">{node.status.toUpperCase()}</div>
|
||||
<div className="k">SERVICES</div>
|
||||
<div className="v">
|
||||
<div className="inspector-service-row">
|
||||
{node.services.length === 0 && <span className="dim">—</span>}
|
||||
{node.services.map((s) => (
|
||||
<span key={s} className="service-tag" style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
|
||||
<span>{s}</span>
|
||||
{liveOpsEnabled && !isObserved && (
|
||||
<button
|
||||
type="button"
|
||||
title={`Remove ${s} (live)`}
|
||||
disabled={busy === s}
|
||||
onClick={async () => {
|
||||
setOpError(null);
|
||||
setBusy(s);
|
||||
try {
|
||||
await onLiveRemoveService!(node.name, s);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)?.response?.data?.detail
|
||||
?? 'Remove failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
background: 'transparent', border: 'none', padding: 0,
|
||||
color: 'inherit', cursor: busy === s ? 'wait' : 'pointer',
|
||||
opacity: busy === s ? 0.4 : 0.7, lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
<X size={9} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{liveOpsEnabled && !isObserved && !addOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="service-tag"
|
||||
onClick={() => { setAddOpen(true); setAddSlug(''); }}
|
||||
style={{ cursor: 'pointer', borderStyle: 'dashed' }}
|
||||
title="Add service (live)"
|
||||
>
|
||||
<Plus size={10} /> ADD
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{liveOpsEnabled && addOpen && (
|
||||
<div style={{ display: 'flex', gap: 6, marginTop: 6, alignItems: 'center' }}>
|
||||
<select
|
||||
value={addSlug}
|
||||
onChange={(e) => setAddSlug(e.target.value)}
|
||||
style={{
|
||||
flex: 1, fontSize: '0.75rem', padding: '4px 6px',
|
||||
background: 'var(--matrix-tint-10)',
|
||||
border: '1px solid var(--border-color, #30363d)',
|
||||
color: 'var(--text-color)',
|
||||
}}
|
||||
>
|
||||
<option value="">— pick a service —</option>
|
||||
{availableServices
|
||||
.filter((s) => !(node.services as readonly string[]).includes(s))
|
||||
.map((s) => (
|
||||
<option key={s} value={s}>{s}</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!addSlug || busy === addSlug}
|
||||
onClick={() => {
|
||||
if (!addSlug) return;
|
||||
setOpError(null);
|
||||
// Fire-and-forget: opens the schema-driven config
|
||||
// modal at the page level (or auto-confirms for
|
||||
// schema-less services). Errors surface in the modal.
|
||||
onLiveAddService!(node.name, addSlug);
|
||||
setAddOpen(false);
|
||||
setAddSlug('');
|
||||
}}
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: '0.7rem',
|
||||
border: '1px solid var(--accent-color, #00ff88)',
|
||||
background: 'var(--accent-color, #00ff88)',
|
||||
color: 'var(--bg-color, #0d1117)',
|
||||
cursor: busy === addSlug ? 'wait' : 'pointer',
|
||||
opacity: !addSlug || busy === addSlug ? 0.5 : 1,
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
ADD
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setAddOpen(false); setAddSlug(''); }}
|
||||
style={{
|
||||
padding: '4px 10px', fontSize: '0.7rem',
|
||||
border: '1px solid var(--dim-color)',
|
||||
background: 'transparent', color: 'var(--dim-color)',
|
||||
cursor: 'pointer', textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{opError && (
|
||||
<div style={{ color: '#ff5555', fontSize: '0.7rem', marginTop: 6 }}>{opError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="type-label inspector-section-label">CONNECTIONS</div>
|
||||
{conns.map((e) => {
|
||||
const otherId = e.from === node.id ? e.to : e.from;
|
||||
const other = nodes.find((n) => n.id === otherId);
|
||||
const Arrow = e.from === node.id ? ArrowRight : ArrowLeft;
|
||||
return (
|
||||
<div key={e.id} className="inspector-conn-row">
|
||||
<Arrow size={10} className={e.traffic === 'hot' ? 'alert-text' : 'dim'} />
|
||||
<span>{other?.name ?? '—'}</span>
|
||||
<span className="chip dim-chip inspector-conn-chip">{e.traffic}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{conns.length === 0 && (
|
||||
<div className="dim inspector-empty-line">NO EDGES</div>
|
||||
)}
|
||||
</div>
|
||||
{onToggleGateway && !isObserved && (
|
||||
<button
|
||||
type="button"
|
||||
className={`maze-btn small ${isGateway ? 'alert' : ''}`}
|
||||
disabled={busy === '__gateway__'}
|
||||
title={
|
||||
isGateway
|
||||
? 'Demote this decky from gateway (forwards_l3=false)'
|
||||
: 'Promote this decky to gateway (forwards_l3=true)'
|
||||
}
|
||||
onClick={async () => {
|
||||
const next = !isGateway;
|
||||
// forwards_l3 flip on a deployed topology recreates
|
||||
// the base container — destructive. Confirm before
|
||||
// hitting the API; the caller (MazeNET.tsx) submits
|
||||
// with force: true on active topologies.
|
||||
const live = topologyStatus === 'active' || topologyStatus === 'degraded';
|
||||
if (live) {
|
||||
const ok = window.confirm(
|
||||
`${next ? 'Promote' : 'Demote'} ${node.name} ${next ? 'to' : 'from'} gateway?\n\n` +
|
||||
'This recreates the base container to apply the new port-publishing config. ' +
|
||||
'In-container state is lost; active sessions to it drop.',
|
||||
);
|
||||
if (!ok) return;
|
||||
}
|
||||
setOpError(null);
|
||||
setBusy('__gateway__');
|
||||
try {
|
||||
await onToggleGateway(node.id, next);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)?.response?.data?.detail
|
||||
?? 'Gateway toggle failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Shield size={12} />
|
||||
{busy === '__gateway__'
|
||||
? (isGateway ? 'DEMOTING…' : 'PROMOTING…')
|
||||
: (isGateway ? 'DEMOTE GATEWAY' : 'PROMOTE TO GATEWAY')}
|
||||
</button>
|
||||
)}
|
||||
{tarpitEnabled && !isObserved && (
|
||||
<div className="inspector-tarpit-wrap">
|
||||
<div className="inspector-tarpit-row">
|
||||
<button
|
||||
type="button"
|
||||
className={`maze-btn small ${tarpitOpen ? 'active' : ''}`}
|
||||
disabled={busy === '__tarpit__'}
|
||||
onClick={() => setTarpitOpen((o) => !o)}
|
||||
title="Configure tc netem tarpit on this decky"
|
||||
>
|
||||
<Shield size={12} />
|
||||
{tarpitOpen ? 'CANCEL' : 'TARPIT'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={busy === '__tarpit__'}
|
||||
title="Remove active tarpit rule"
|
||||
onClick={async () => {
|
||||
setOpError(null);
|
||||
setBusy('__tarpit__');
|
||||
try {
|
||||
await onLiveTarpitDisable!(node.name);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)
|
||||
?.response?.data?.detail ?? 'Tarpit disable failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{busy === '__tarpit__' ? '…' : 'DISABLE'}
|
||||
</button>
|
||||
</div>
|
||||
{tarpitOpen && (
|
||||
<div className="inspector-tarpit-form">
|
||||
<div className="inspector-tarpit-field">
|
||||
<label className="type-label">PORTS</label>
|
||||
<input
|
||||
className="maze-input"
|
||||
value={tarpitPorts}
|
||||
placeholder="22,80,443"
|
||||
onChange={(e) => setTarpitPorts(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="inspector-tarpit-field">
|
||||
<label className="type-label">
|
||||
DELAY · {tarpitDelay >= 1000
|
||||
? `${(tarpitDelay / 1000).toFixed(0)}s`
|
||||
: `${tarpitDelay}ms`}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min={100}
|
||||
max={60000}
|
||||
step={100}
|
||||
value={tarpitDelay}
|
||||
onChange={(e) => setTarpitDelay(parseInt(e.target.value, 10))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={busy === '__tarpit__' || !tarpitPorts.trim()}
|
||||
onClick={async () => {
|
||||
const ports = tarpitPorts
|
||||
.split(',')
|
||||
.map((p) => parseInt(p.trim(), 10))
|
||||
.filter((p) => !isNaN(p) && p > 0 && p <= 65535);
|
||||
if (!ports.length) return;
|
||||
setOpError(null);
|
||||
setBusy('__tarpit__');
|
||||
try {
|
||||
await onLiveTarpitEnable!(node.name, ports, tarpitDelay);
|
||||
setTarpitOpen(false);
|
||||
} catch (err) {
|
||||
const msg = (err as ApiError)
|
||||
?.response?.data?.detail ?? 'Tarpit enable failed.';
|
||||
setOpError(msg);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{busy === '__tarpit__' ? 'APPLYING…' : 'APPLY TARPIT'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{onDeleteNode && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={isObserved || isGateway}
|
||||
title={
|
||||
isObserved ? 'observed entity — not a deployed decky'
|
||||
: isGateway ? 'DMZ gateway — pinned to its DMZ network'
|
||||
: undefined
|
||||
}
|
||||
onClick={() => !isObserved && !isGateway && onDeleteNode(node.id)}
|
||||
>
|
||||
<Trash2 size={12} /> REMOVE FROM GRAPH
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NodeInspector;
|
||||
@@ -0,0 +1,84 @@
|
||||
import React from 'react';
|
||||
import { Shield, Trash2 } from '../../../icons';
|
||||
import ServiceConfigForm from '../../ServiceConfigForm';
|
||||
import { DEFAULT_SERVICES } from '../data';
|
||||
import type { MazeNode, Net } from '../types';
|
||||
|
||||
interface Props {
|
||||
/** The selected service entry. The id is the service slug; nodeId
|
||||
* identifies the parent decky in the topology. */
|
||||
serviceSel: { type: 'service'; id: string; nodeId: string };
|
||||
nodes: MazeNode[];
|
||||
nets: Net[];
|
||||
topologyId?: string;
|
||||
topologyStatus?: string;
|
||||
onRemoveService?: (nodeId: string, slug: string) => void;
|
||||
}
|
||||
|
||||
const ServiceInspector: React.FC<Props> = ({
|
||||
serviceSel, nodes, nets, topologyId, topologyStatus, onRemoveService,
|
||||
}) => {
|
||||
const serviceMeta = DEFAULT_SERVICES.find((s) => s.slug === serviceSel.id);
|
||||
const serviceParent = nodes.find((n) => n.id === serviceSel.nodeId);
|
||||
const serviceParentNet = serviceParent
|
||||
? nets.find((n) => n.id === serviceParent.netId)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="inspector-head">
|
||||
<Shield
|
||||
size={14}
|
||||
className={serviceMeta?.risk === 'high' ? 'alert-text' : 'violet-accent'}
|
||||
/>
|
||||
<span className="inspector-head-title">
|
||||
{serviceMeta?.name ?? serviceSel.id.toUpperCase()}
|
||||
</span>
|
||||
{serviceMeta && (
|
||||
<span className={`chip inspector-head-chip ${
|
||||
serviceMeta.risk === 'high' ? 'alert'
|
||||
: serviceMeta.risk === 'med' ? 'violet'
|
||||
: 'dim-chip'
|
||||
}`}>
|
||||
{serviceMeta.risk.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="kvs">
|
||||
<div className="k">EXPOSED ON</div>
|
||||
<div className="v violet-accent">{serviceParent?.name ?? '—'}</div>
|
||||
<div className="k">PROTOCOL</div>
|
||||
<div className="v">{(serviceMeta?.proto ?? '—').toUpperCase()}</div>
|
||||
<div className="k">PORT</div>
|
||||
<div className="v" style={{ fontWeight: 700 }}>{serviceMeta?.port ?? '—'}</div>
|
||||
<div className="k">SUBNET</div>
|
||||
<div className="v">{serviceParentNet?.label ?? '—'}</div>
|
||||
</div>
|
||||
{topologyId && serviceParent && serviceParent.kind !== 'observed' && (
|
||||
<ServiceConfigForm
|
||||
key={`${serviceParent.name}:${serviceSel.id}`}
|
||||
deckyName={serviceParent.name}
|
||||
serviceSlug={serviceSel.id}
|
||||
topologyId={topologyId}
|
||||
currentConfig={
|
||||
((serviceParent.decky_config as { service_config?: Record<string, Record<string, unknown>> } | undefined)
|
||||
?.service_config?.[serviceSel.id]) ?? {}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{onRemoveService && serviceParent && serviceParent.kind !== 'observed' && (
|
||||
<button
|
||||
type="button"
|
||||
className="maze-btn alert small"
|
||||
disabled={topologyStatus === 'degraded'}
|
||||
title={topologyStatus === 'degraded' ? 'topology degraded — mutations blocked' : undefined}
|
||||
onClick={() => onRemoveService(serviceSel.nodeId, serviceSel.id)}
|
||||
>
|
||||
<Trash2 size={10} /> REMOVE SERVICE
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceInspector;
|
||||
172
decnet_web/src/components/MazeNET/Inspector/index.tsx
Normal file
172
decnet_web/src/components/MazeNET/Inspector/index.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Crosshair, MousePointer2, X } from '../../../icons';
|
||||
import type { Edge, MazeNode, Net } from '../types';
|
||||
import EdgeInspector from './EdgeInspector';
|
||||
import NetInspector from './NetInspector';
|
||||
import NodeInspector from './NodeInspector';
|
||||
import ServiceInspector from './ServiceInspector';
|
||||
import type { Selection } from './types';
|
||||
|
||||
export type { Selection };
|
||||
|
||||
interface Props {
|
||||
selection: Selection;
|
||||
nets: Net[];
|
||||
nodes: MazeNode[];
|
||||
edges: Edge[];
|
||||
/** Topology ID (MazeNET-only) — required for the schema-driven service
|
||||
* config form to hit the per-topology REST path. Omit for fleet. */
|
||||
topologyId?: string;
|
||||
topologyStatus?: string;
|
||||
onClose?: () => void;
|
||||
onDeleteNet?: (id: string) => void;
|
||||
onDeleteNode?: (id: string) => void;
|
||||
onDeleteEdge?: (id: string) => void;
|
||||
onRemoveService?: (nodeId: string, slug: string) => void;
|
||||
/** Live (post-deploy) service mutation, hitting W3 endpoints directly.
|
||||
* Distinct from onRemoveService which queues a design-time graph
|
||||
* mutation. Both can coexist; the inspector picks based on
|
||||
* topologyStatus (active/degraded → live, pending/anything else →
|
||||
* design-time only). Wiring these props from MazeNET.tsx is the
|
||||
* single switch that turns chips into live controls. */
|
||||
onLiveAddService?: (nodeName: string, slug: string) => void;
|
||||
onLiveRemoveService?: (nodeName: string, slug: string) => Promise<void>;
|
||||
/** Per-decky-eligible service slugs, fetched via useServiceRegistry. */
|
||||
availableServices?: string[];
|
||||
/** Toggle ``forwards_l3`` (gateway) on the selected decky. When the
|
||||
* topology is active/degraded the caller is responsible for the
|
||||
* destructive-recreate confirm dialog and the ``force: true`` submit
|
||||
* — this prop just relays the user's intent. */
|
||||
onToggleGateway?: (nodeId: string, nextValue: boolean) => Promise<void>;
|
||||
/** Tarpit controls — only shown when topology is active/degraded and node is a deployed decky. */
|
||||
onLiveTarpitEnable?: (nodeName: string, ports: number[], delayMs: number) => Promise<void>;
|
||||
onLiveTarpitDisable?: (nodeName: string) => Promise<void>;
|
||||
onAddDecky?: (netId: string) => void;
|
||||
setSelection?: (sel: Selection) => void;
|
||||
pendingChanges?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Inspector: React.FC<Props> = ({
|
||||
selection, nets, nodes, edges, topologyId, topologyStatus, onClose,
|
||||
onDeleteNet, onDeleteNode, onDeleteEdge, onRemoveService,
|
||||
onLiveAddService, onLiveRemoveService, availableServices,
|
||||
onToggleGateway, onLiveTarpitEnable, onLiveTarpitDisable,
|
||||
onAddDecky, setSelection,
|
||||
pendingChanges = 0,
|
||||
className = '',
|
||||
}) => {
|
||||
const net = selection?.type === 'net' ? nets.find((n) => n.id === selection.id) : undefined;
|
||||
const node = selection?.type === 'node' ? nodes.find((n) => n.id === selection.id) : undefined;
|
||||
const edge = selection?.type === 'edge' ? edges.find((e) => e.id === selection.id) : undefined;
|
||||
const serviceSel = selection?.type === 'service' ? selection : undefined;
|
||||
|
||||
const activeNetIds = useMemo(() => {
|
||||
const s = new Set<string>();
|
||||
edges.forEach((e) => {
|
||||
const f = nodes.find((n) => n.id === e.from);
|
||||
const t = nodes.find((n) => n.id === e.to);
|
||||
if (f) s.add(f.netId);
|
||||
if (t) s.add(t.netId);
|
||||
});
|
||||
return s;
|
||||
}, [edges, nodes]);
|
||||
|
||||
const typeLabel = selection ? selection.type.toUpperCase() : 'IDLE';
|
||||
const selectionKey = selection?.type === 'node' ? selection.id : undefined;
|
||||
|
||||
return (
|
||||
<aside className={`maze-inspector ${className}`}>
|
||||
<div className="maze-inspector-title">
|
||||
<Crosshair size={12} className="violet-accent" />
|
||||
<span>INSPECTOR</span>
|
||||
<span className="dim inspector-type-label">{typeLabel}</span>
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
className="inspector-close-btn"
|
||||
onClick={onClose}
|
||||
title="Hide inspector"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="maze-inspector-body">
|
||||
{!selection && (
|
||||
<div className="inspector-empty">
|
||||
<MousePointer2 size={22} style={{ opacity: 0.4, marginBottom: 10 }} />
|
||||
<div>SELECT A NODE, NETWORK, OR EDGE</div>
|
||||
<div style={{ marginTop: 10, fontSize: '0.6rem', opacity: 0.5 }}>
|
||||
Right-click for actions
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{node && (
|
||||
<NodeInspector
|
||||
node={node}
|
||||
nodes={nodes}
|
||||
nets={nets}
|
||||
edges={edges}
|
||||
topologyStatus={topologyStatus}
|
||||
availableServices={availableServices}
|
||||
onDeleteNode={onDeleteNode}
|
||||
onLiveAddService={onLiveAddService}
|
||||
onLiveRemoveService={onLiveRemoveService}
|
||||
onToggleGateway={onToggleGateway}
|
||||
onLiveTarpitEnable={onLiveTarpitEnable}
|
||||
onLiveTarpitDisable={onLiveTarpitDisable}
|
||||
selectionKey={selectionKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
{net && (
|
||||
<NetInspector
|
||||
net={net}
|
||||
nodes={nodes}
|
||||
activeNetIds={activeNetIds}
|
||||
setSelection={setSelection}
|
||||
onAddDecky={onAddDecky}
|
||||
onDeleteNet={onDeleteNet}
|
||||
/>
|
||||
)}
|
||||
|
||||
{edge && <EdgeInspector edge={edge} nodes={nodes} onDeleteEdge={onDeleteEdge} />}
|
||||
|
||||
{serviceSel && (
|
||||
<ServiceInspector
|
||||
serviceSel={serviceSel}
|
||||
nodes={nodes}
|
||||
nets={nets}
|
||||
topologyId={topologyId}
|
||||
topologyStatus={topologyStatus}
|
||||
onRemoveService={onRemoveService}
|
||||
/>
|
||||
)}
|
||||
|
||||
{pendingChanges > 0 && (
|
||||
<div className="inspector-diff-block">
|
||||
<div className="type-label inspector-section-label">PENDING DIFF</div>
|
||||
<div className="maze-diff">
|
||||
<span className="ctx"> +{pendingChanges} graph mutation(s)</span>{'\n'}
|
||||
<span className="ctx"> networks: {nets.length}</span>{'\n'}
|
||||
<span className="ctx"> deckies: {nodes.length}</span>{'\n'}
|
||||
<span className="ctx"> paths: {edges.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{topologyStatus && !selection && (
|
||||
<div className="kvs inspector-status-block">
|
||||
<div className="k">TOPOLOGY</div>
|
||||
<div className="v">{topologyStatus.toUpperCase()}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Inspector;
|
||||
6
decnet_web/src/components/MazeNET/Inspector/types.ts
Normal file
6
decnet_web/src/components/MazeNET/Inspector/types.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export type Selection =
|
||||
| { type: 'net'; id: string }
|
||||
| { type: 'node'; id: string }
|
||||
| { type: 'edge'; id: string }
|
||||
| { type: 'service'; id: string; nodeId: string }
|
||||
| null;
|
||||
Reference in New Issue
Block a user