Removes Wild Cloud cruft.
This commit is contained in:
@@ -1,16 +1,17 @@
|
||||
import { useMemo, useCallback } from 'react';
|
||||
import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import {
|
||||
ReactFlow, Handle, Position,
|
||||
type Node, type Edge, type NodeProps,
|
||||
ReactFlow, Handle, Position, applyNodeChanges,
|
||||
type Node, type Edge, type NodeProps, type NodeChange, type ReactFlowInstance,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import {
|
||||
Globe, Wifi, Lock, Shield, ShieldAlert,
|
||||
AlertCircle, Loader2, Plus, RotateCw,
|
||||
Globe, Wifi, Lock, Shield, ShieldAlert, Router,
|
||||
AlertCircle, Loader2, Plus, RotateCw, Pencil,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui';
|
||||
import { TopologyNode, type NodeStatus } from './TopologyNode';
|
||||
import type { RegisteredDomain } from '@/services/api/networking';
|
||||
import type { CertEntry } from '@/services/api/cert';
|
||||
@@ -43,6 +44,7 @@ export interface DomainTopologyProps {
|
||||
isManaged: boolean;
|
||||
onTogglePublic: () => void;
|
||||
onChangeMode: (mode: GatewayMode) => void;
|
||||
onChangeBackend?: (address: string) => void;
|
||||
onProvisionCert: (domain: string) => void;
|
||||
onRenewCert: () => void;
|
||||
isProvisioningCert: boolean;
|
||||
@@ -139,7 +141,7 @@ function FlowNode({ data }: NodeProps) {
|
||||
{leftHandle}
|
||||
<TopologyNode
|
||||
label={mode === 'dns-only' ? 'No gateway' : mode === 'l4' ? 'L4 Passthrough' : 'L7 Proxy'}
|
||||
sublabel={mode === 'dns-only' ? 'DNS resolution only' : mode === 'l4' ? 'SNI routing' : 'HTTP reverse proxy'}
|
||||
sublabel={mode === 'dns-only' ? 'Traffic goes direct' : mode === 'l4' ? 'SNI routing' : 'HTTP reverse proxy'}
|
||||
status={mode === 'dns-only' ? 'inactive' : haproxyOk ? 'ok' : 'error'}
|
||||
>
|
||||
{onChangeMode && (
|
||||
@@ -155,7 +157,7 @@ function FlowNode({ data }: NodeProps) {
|
||||
onClick={() => onChangeMode(m)}
|
||||
disabled={isMutating}
|
||||
>
|
||||
{m === 'dns-only' ? 'DNS' : m.toUpperCase()}
|
||||
{m === 'dns-only' ? 'None' : m.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -228,6 +230,19 @@ function FlowNode({ data }: NodeProps) {
|
||||
}
|
||||
|
||||
if (v === 'backend') {
|
||||
const onChangeBackend = data.onChangeBackend as ((addr: string) => void) | undefined;
|
||||
const hasRoutes = data.hasRoutes as boolean;
|
||||
const editable = !!onChangeBackend && !hasRoutes;
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleSave = () => {
|
||||
const val = inputRef.current?.value.trim();
|
||||
if (val && onChangeBackend) onChangeBackend(val);
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
@@ -236,7 +251,38 @@ function FlowNode({ data }: NodeProps) {
|
||||
sublabel={data.sublabel as string | undefined}
|
||||
status="ok"
|
||||
className="font-mono"
|
||||
/>
|
||||
interactive={editable && !editing}
|
||||
onClick={editable ? () => setEditing(true) : undefined}
|
||||
tooltip={editable ? 'Click to edit backend address' : undefined}
|
||||
>
|
||||
{editable && !editing && (
|
||||
<Pencil className="absolute top-1.5 right-1.5 h-2.5 w-2.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
)}
|
||||
{editing && (
|
||||
<div className="mt-1.5 nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()}>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
defaultValue={data.label as string}
|
||||
className="h-5 text-[10px] font-mono px-1.5"
|
||||
autoFocus
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') handleSave();
|
||||
if (e.key === 'Escape') setEditing(false);
|
||||
}}
|
||||
/>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<Button variant="ghost" size="sm" className="h-4 text-[9px] px-1 flex-1 !cursor-pointer"
|
||||
style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()} onClick={handleSave}>
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-4 text-[9px] px-1 flex-1 !cursor-pointer"
|
||||
style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()} onClick={() => setEditing(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TopologyNode>
|
||||
{rightHandle}
|
||||
{bottomHandle}
|
||||
</>
|
||||
@@ -278,6 +324,26 @@ function FlowNode({ data }: NodeProps) {
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'router') {
|
||||
const ports = data.ports as string;
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<Link to="/central" className="nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={(e) => e.stopPropagation()}>
|
||||
<TopologyNode
|
||||
label="Router"
|
||||
sublabel={ports}
|
||||
status="na"
|
||||
icon={<Router className="h-3 w-3" />}
|
||||
className="hover:border-primary/40"
|
||||
tooltip="Your LAN router port-forwards these ports to Wild Central. See Dashboard for setup."
|
||||
/>
|
||||
</Link>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -294,11 +360,99 @@ function getGatewayMode(domain: RegisteredDomain): GatewayMode {
|
||||
|
||||
// ── Main component ─────────────────────────────────────────────────────
|
||||
|
||||
/** Align pipeline nodes so their vertical centers match → straight horizontal edges */
|
||||
const PIPELINE_IDS = new Set(['internet', 'router', 'security', 'gateway', 'tls', 'backend']);
|
||||
|
||||
function alignPipelineNodes(nodes: Node[]): Node[] {
|
||||
const pipelineNodes = nodes
|
||||
.filter(n => PIPELINE_IDS.has(n.id) && (n.measured?.width ?? 0) > 0)
|
||||
.sort((a, b) => a.position.x - b.position.x);
|
||||
if (pipelineNodes.length < 2) return nodes;
|
||||
|
||||
// Vertical: center-align all pipeline nodes
|
||||
let maxHeight = 0;
|
||||
for (const n of pipelineNodes) {
|
||||
const h = n.measured?.height ?? 0;
|
||||
if (h > maxHeight) maxHeight = h;
|
||||
}
|
||||
const centerY = maxHeight / 2;
|
||||
|
||||
// Horizontal: equalize gaps between nodes
|
||||
const totalNodeWidth = pipelineNodes.reduce((sum, n) => sum + (n.measured?.width ?? 0), 0);
|
||||
const firstX = pipelineNodes[0].position.x;
|
||||
const lastNode = pipelineNodes[pipelineNodes.length - 1];
|
||||
const totalSpan = (lastNode.position.x + (lastNode.measured?.width ?? 0)) - firstX;
|
||||
const gap = (totalSpan - totalNodeWidth) / (pipelineNodes.length - 1) * 0.75;
|
||||
|
||||
// Build new x positions
|
||||
const xPositions = new Map<string, number>();
|
||||
let x = firstX;
|
||||
for (const n of pipelineNodes) {
|
||||
xPositions.set(n.id, x);
|
||||
x += (n.measured?.width ?? 0) + gap;
|
||||
}
|
||||
|
||||
return nodes.map(n => {
|
||||
if (!PIPELINE_IDS.has(n.id)) return n;
|
||||
const h = n.measured?.height ?? 0;
|
||||
if (h === 0) return n;
|
||||
const targetY = centerY - h / 2;
|
||||
const targetX = xPositions.get(n.id) ?? n.position.x;
|
||||
return { ...n, position: { x: targetX, y: targetY } };
|
||||
});
|
||||
}
|
||||
|
||||
function AlignedFlow({ nodes: inputNodes, edges, containerHeight }: { nodes: Node[]; edges: Edge[]; containerHeight: number }) {
|
||||
const [nodes, setNodes] = useState(inputNodes);
|
||||
const rfRef = useRef<ReactFlowInstance | null>(null);
|
||||
|
||||
// Reset nodes when inputs change (draft updated, card expanded, etc.)
|
||||
useEffect(() => { setNodes(inputNodes); }, [inputNodes]);
|
||||
|
||||
// Handle React Flow's internal changes (including dimension measurements)
|
||||
const onNodesChange = useCallback((changes: NodeChange[]) => {
|
||||
setNodes(prev => {
|
||||
const updated = applyNodeChanges(changes, prev);
|
||||
if (changes.some(c => c.type === 'dimensions')) {
|
||||
const aligned = alignPipelineNodes(updated);
|
||||
requestAnimationFrame(() => rfRef.current?.fitView({ padding: 0.15 }));
|
||||
return aligned;
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ height: containerHeight }} className="w-full">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onInit={instance => { rfRef.current = instance; }}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.15 }}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
panOnDrag={false}
|
||||
zoomOnScroll={false}
|
||||
zoomOnPinch={false}
|
||||
zoomOnDoubleClick={false}
|
||||
preventScrolling={false}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
className="!bg-transparent"
|
||||
style={{ '--xy-edge-label-background-color': 'hsl(var(--card))', '--xy-edge-label-color': 'hsl(var(--muted-foreground))' } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DomainTopology(props: DomainTopologyProps) {
|
||||
const {
|
||||
domain, cert, ddnsRecord, vpnPeerCount, vpnRunning, vpnConfigured,
|
||||
daemons,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, onRenewCert,
|
||||
onTogglePublic, onChangeMode, onChangeBackend, onProvisionCert, onRenewCert,
|
||||
isProvisioningCert, isRenewingCert, isMutating,
|
||||
} = props;
|
||||
|
||||
@@ -307,6 +461,7 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
const isDnsOnly = mode === 'dns-only';
|
||||
const isL4 = mode === 'l4';
|
||||
const isL7 = mode === 'l7';
|
||||
const showRouter = isPublic;
|
||||
const showSecurity = isPublic && !isDnsOnly;
|
||||
const showGateway = true; // Always show so mode selector is accessible
|
||||
const showTls = isL7;
|
||||
@@ -338,21 +493,24 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
const sourceX = x;
|
||||
|
||||
x += 170;
|
||||
const routerX = showRouter ? x : -1;
|
||||
if (showRouter) x += 155;
|
||||
|
||||
const securityX = showSecurity ? x : -1;
|
||||
if (showSecurity) x += 160;
|
||||
if (showSecurity) x += 165;
|
||||
|
||||
const gatewayX = showGateway ? x : -1;
|
||||
if (showGateway) x += showTls ? 150 : 200;
|
||||
if (showGateway) x += 175;
|
||||
|
||||
const tlsX = showTls ? x : -1;
|
||||
if (showTls) x += 140;
|
||||
if (showTls) x += 160;
|
||||
|
||||
const backendX = x;
|
||||
|
||||
// Row y positions
|
||||
// Row y positions — all pipeline nodes start at y=0,
|
||||
// then useAlignPipelineNodes() adjusts them after measurement
|
||||
const pipelineY = 0;
|
||||
const lanY = 110;
|
||||
const vpnY = 180;
|
||||
const lanY = 120;
|
||||
|
||||
// ── Nodes (callbacks passed via data) ──
|
||||
|
||||
@@ -366,10 +524,21 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
},
|
||||
});
|
||||
|
||||
if (showRouter) {
|
||||
// Show which ports the router forwards — standard HTTPS + HTTP, plus VPN if configured
|
||||
const ports = [':443', ':80'];
|
||||
if (vpnConfigured) ports.push(`:${51820}`);
|
||||
n.push({
|
||||
id: 'router', type: 'topology',
|
||||
position: { x: routerX, y: pipelineY },
|
||||
data: { variant: 'router', ports: `fwd ${ports.join(', ')}` },
|
||||
});
|
||||
}
|
||||
|
||||
if (showSecurity) {
|
||||
n.push({
|
||||
id: 'security', type: 'topology',
|
||||
position: { x: securityX, y: pipelineY - 10 },
|
||||
position: { x: securityX, y: pipelineY },
|
||||
data: { variant: 'security', firewallOk: !!daemons.nftables, crowdsecOk: !!daemons.crowdsec, isL4 },
|
||||
});
|
||||
}
|
||||
@@ -398,19 +567,21 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
n.push({
|
||||
id: 'backend', type: 'topology',
|
||||
position: { x: backendX, y: pipelineY },
|
||||
data: { variant: 'backend', label: backendLabel, sublabel: backendSublabel },
|
||||
data: { variant: 'backend', label: backendLabel, sublabel: backendSublabel, onChangeBackend, hasRoutes: !!domain.routes?.length },
|
||||
});
|
||||
|
||||
const lanX = showVpn ? sourceX + 120 : sourceX;
|
||||
|
||||
n.push({
|
||||
id: 'lan', type: 'topology',
|
||||
position: { x: sourceX, y: lanY },
|
||||
position: { x: lanX, y: lanY },
|
||||
data: { variant: 'lan' },
|
||||
});
|
||||
|
||||
if (showVpn) {
|
||||
n.push({
|
||||
id: 'vpn', type: 'topology',
|
||||
position: { x: sourceX, y: vpnY },
|
||||
position: { x: sourceX, y: lanY },
|
||||
data: { variant: 'vpn', peerCount: vpnPeerCount, running: vpnRunning },
|
||||
});
|
||||
}
|
||||
@@ -420,14 +591,19 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
const pipeline = { type: 'smoothstep' as const, sourceHandle: 'right', targetHandle: 'left', style: { strokeWidth: 1.5 } };
|
||||
const labelStyle = { fontSize: 9, fill: 'var(--color-muted-foreground)' };
|
||||
|
||||
// Internet path
|
||||
if (isPublic && showSecurity) {
|
||||
e.push({ id: 'e-internet-security', source: 'internet', target: 'security', ...pipeline });
|
||||
e.push({ id: 'e-security-gateway', source: 'security', target: 'gateway', ...pipeline });
|
||||
} else if (isPublic && !isDnsOnly) {
|
||||
e.push({ id: 'e-internet-gateway', source: 'internet', target: 'gateway', ...pipeline });
|
||||
} else if (isPublic && isDnsOnly) {
|
||||
e.push({ id: 'e-internet-backend', source: 'internet', target: 'backend', ...pipeline, style: { ...pipeline.style, strokeDasharray: '6 3' }, label: 'DNS', labelStyle });
|
||||
// Internet path: Internet → Router → Security → Gateway (or shorter variants)
|
||||
if (isPublic) {
|
||||
e.push({ id: 'e-internet-router', source: 'internet', target: 'router', ...pipeline });
|
||||
|
||||
if (showSecurity) {
|
||||
e.push({ id: 'e-router-security', source: 'router', target: 'security', ...pipeline });
|
||||
e.push({ id: 'e-security-gateway', source: 'security', target: 'gateway', ...pipeline });
|
||||
} else if (!isDnsOnly) {
|
||||
e.push({ id: 'e-router-gateway', source: 'router', target: 'gateway', ...pipeline });
|
||||
} else {
|
||||
// Direct: router forwards to backend, Central not in path
|
||||
e.push({ id: 'e-router-backend', source: 'router', target: 'backend', ...pipeline, style: { ...pipeline.style, strokeDasharray: '6 3' }, label: 'direct', labelStyle });
|
||||
}
|
||||
}
|
||||
|
||||
// Central processing → backend (not for DNS-only)
|
||||
@@ -440,55 +616,30 @@ export function DomainTopology(props: DomainTopologyProps) {
|
||||
}
|
||||
}
|
||||
|
||||
// LAN / VPN paths — enter from below via bottom handle
|
||||
const lanVpnTarget = isL7 ? 'gateway' : 'backend';
|
||||
const lanVpnEdge = { type: 'smoothstep' as const, sourceHandle: 'right', targetHandle: 'bottom', style: { strokeWidth: 1.5 }, label: 'dnsmasq', labelStyle };
|
||||
|
||||
e.push({ id: 'e-lan-target', source: 'lan', target: lanVpnTarget, ...lanVpnEdge });
|
||||
// LAN path — enters gateway/backend from below
|
||||
const lanTarget = isL7 ? 'gateway' : 'backend';
|
||||
e.push({ id: 'e-lan-target', source: 'lan', target: lanTarget, type: 'smoothstep', sourceHandle: 'right', targetHandle: 'bottom', style: { strokeWidth: 1.5 }, label: 'dnsmasq', labelStyle });
|
||||
|
||||
// VPN feeds into LAN (tunnel peers land on the local network)
|
||||
if (showVpn) {
|
||||
e.push({ id: 'e-vpn-target', source: 'vpn', target: lanVpnTarget, ...lanVpnEdge });
|
||||
e.push({ id: 'e-vpn-lan', source: 'vpn', target: 'lan', type: 'smoothstep', sourceHandle: 'right', targetHandle: 'left', style: { strokeWidth: 1.5 } });
|
||||
}
|
||||
|
||||
return { nodes: n, edges: e };
|
||||
}, [
|
||||
isPublic, isDnsOnly, isL4, isL7, showSecurity, showGateway, showTls, showVpn,
|
||||
isPublic, isDnsOnly, isL4, isL7, showRouter, showSecurity, showGateway, showTls, showVpn, vpnConfigured,
|
||||
mode, daemons, ddnsStatus, ddnsSublabel, ddnsRecord,
|
||||
tlsStatus, certDomain, daysLeft, hasCert, provisionDomain, cert,
|
||||
backendLabel, backendSublabel, vpnPeerCount, vpnRunning,
|
||||
isMutating, isProvisioningCert, isRenewingCert,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, onRenewCert,
|
||||
onTogglePublic, onChangeMode, onChangeBackend, onProvisionCert, onRenewCert, domain.routes,
|
||||
]);
|
||||
|
||||
const containerHeight = showVpn ? 260 : 200;
|
||||
|
||||
const onInit = useCallback((instance: { fitView: () => void }) => {
|
||||
setTimeout(() => instance.fitView(), 0);
|
||||
}, []);
|
||||
const containerHeight = 200;
|
||||
|
||||
return (
|
||||
<div className="space-y-2 py-2">
|
||||
<div style={{ height: containerHeight }} className="w-full">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.15 }}
|
||||
onInit={onInit}
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
panOnDrag={false}
|
||||
zoomOnScroll={false}
|
||||
zoomOnPinch={false}
|
||||
zoomOnDoubleClick={false}
|
||||
preventScrolling={false}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
className="!bg-transparent"
|
||||
style={{ '--xy-edge-label-background-color': 'hsl(var(--card))', '--xy-edge-label-color': 'hsl(var(--muted-foreground))' } as React.CSSProperties}
|
||||
/>
|
||||
</div>
|
||||
<AlignedFlow nodes={nodes} edges={edges} containerHeight={containerHeight} />
|
||||
|
||||
{/* Warnings */}
|
||||
{isDnsOnly && (
|
||||
|
||||
Reference in New Issue
Block a user