Removes Wild Cloud cruft.
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card, CardContent } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Input, Label } from './ui';
|
||||
import { Switch } from './ui/switch';
|
||||
import {
|
||||
Globe, Loader2,
|
||||
Globe, Loader2, Search,
|
||||
Plus, X,
|
||||
} from 'lucide-react';
|
||||
import { useDomains } from '../hooks/useDomains';
|
||||
@@ -14,6 +14,7 @@ import { useCert } from '../hooks/useCert';
|
||||
import { useVpn } from '../hooks/useVpn';
|
||||
import { useCentralStatus } from '../hooks/useCentralStatus';
|
||||
import { usePageHelp } from '../hooks/usePageHelp';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { domainsApi } from '../services/api/networking';
|
||||
import type { CertEntry } from '../services/api/cert';
|
||||
import { DomainCard } from './domains/DomainCard';
|
||||
@@ -49,6 +50,24 @@ export function DomainsComponent() {
|
||||
});
|
||||
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [search, setSearch] = useState(() => {
|
||||
try { return localStorage.getItem('domains:search') ?? ''; } catch { return ''; }
|
||||
});
|
||||
const [filter, setFilter] = useState<'all' | 'public' | 'private' | 'direct' | 'l4' | 'l7'>(() => {
|
||||
try {
|
||||
const v = localStorage.getItem('domains:filter');
|
||||
return (v as typeof filter) || 'all';
|
||||
} catch { return 'all'; }
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (search) localStorage.setItem('domains:search', search);
|
||||
else localStorage.removeItem('domains:search');
|
||||
if (filter !== 'all') localStorage.setItem('domains:filter', filter);
|
||||
else localStorage.removeItem('domains:filter');
|
||||
} catch { /* ignore */ }
|
||||
}, [search, filter]);
|
||||
|
||||
// Add form state
|
||||
const [newDomain, setNewDomain] = useState('');
|
||||
@@ -73,6 +92,36 @@ export function DomainsComponent() {
|
||||
const vpnConfigured = !!(vpnStatus || vpnPeers.length > 0);
|
||||
const vpnPeerCount = vpnPeers.length;
|
||||
|
||||
const filteredDomains = useMemo(() => {
|
||||
let result = domains;
|
||||
|
||||
// Text search
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
result = result.filter(d =>
|
||||
d.domain.toLowerCase().includes(q) ||
|
||||
d.backend.address.toLowerCase().includes(q) ||
|
||||
d.source.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
|
||||
// Filter
|
||||
if (filter !== 'all') {
|
||||
result = result.filter(d => {
|
||||
const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
|
||||
switch (filter) {
|
||||
case 'public': return d.public;
|
||||
case 'private': return !d.public;
|
||||
case 'direct': return bt === 'dns-only';
|
||||
case 'l4': return bt === 'tcp-passthrough';
|
||||
case 'l7': return bt === 'http';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [domains, search, filter]);
|
||||
|
||||
const registerMutation = useMutation({
|
||||
mutationFn: (svc: Parameters<typeof domainsApi.register>[0]) => domainsApi.register(svc),
|
||||
onSuccess: () => {
|
||||
@@ -110,6 +159,63 @@ export function DomainsComponent() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Search & Filters */}
|
||||
{domains.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="relative flex-1 min-w-48">
|
||||
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Search domains..."
|
||||
className="pl-8 pr-7 h-8 text-sm"
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearch('')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-0.5 bg-muted rounded-md p-0.5">
|
||||
{([
|
||||
{ value: 'all' as const, label: 'All' },
|
||||
{ value: 'public' as const, label: 'Public' },
|
||||
{ value: 'private' as const, label: 'Private' },
|
||||
{ value: 'direct' as const, label: 'Direct' },
|
||||
{ value: 'l4' as const, label: 'L4' },
|
||||
{ value: 'l7' as const, label: 'L7' },
|
||||
]).map(opt => (
|
||||
<button key={opt.value} type="button"
|
||||
className={cn(
|
||||
'text-xs py-1 px-2.5 rounded transition-colors',
|
||||
filter === opt.value ? 'bg-background shadow-sm font-medium' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
onClick={() => setFilter(opt.value)}
|
||||
>
|
||||
{opt.label}
|
||||
{opt.value !== 'all' && (() => {
|
||||
const count = domains.filter(d => {
|
||||
const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
|
||||
switch (opt.value) {
|
||||
case 'public': return d.public;
|
||||
case 'private': return !d.public;
|
||||
case 'direct': return bt === 'dns-only';
|
||||
case 'l4': return bt === 'tcp-passthrough';
|
||||
case 'l7': return bt === 'http';
|
||||
}
|
||||
}).length;
|
||||
return count > 0 ? <span className="ml-1 text-[10px] text-muted-foreground">{count}</span> : null;
|
||||
})()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Form */}
|
||||
{showAddForm && (
|
||||
<Card className="border-dashed border-primary/50">
|
||||
@@ -188,7 +294,7 @@ export function DomainsComponent() {
|
||||
)}
|
||||
|
||||
{/* Domain Cards */}
|
||||
{domains.map(domain => (
|
||||
{filteredDomains.map(domain => (
|
||||
<DomainCard
|
||||
key={domain.domain}
|
||||
domain={domain}
|
||||
@@ -206,6 +312,18 @@ export function DomainsComponent() {
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* No search results */}
|
||||
{!isDomainsLoading && domains.length > 0 && filteredDomains.length === 0 && (
|
||||
<Card className="p-6 text-center">
|
||||
<p className="text-sm text-muted-foreground">No domains match "{search || filter}"</p>
|
||||
<Button variant="ghost" size="sm" className="mt-2 text-xs"
|
||||
onClick={() => { setSearch(''); setFilter('all'); }}
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { useState, useRef } from 'react';
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Trash2, CheckCircle, AlertCircle, Pencil, Loader2, Plus } from 'lucide-react';
|
||||
import { Trash2, CheckCircle, AlertCircle, Loader2, Plus, Undo2, Save } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import { DomainTopology } from './DomainTopology';
|
||||
@@ -36,6 +35,14 @@ interface DomainCardProps {
|
||||
|
||||
type GatewayMode = 'dns-only' | 'l4' | 'l7';
|
||||
|
||||
/** Editable fields tracked as local draft state */
|
||||
interface DomainDraft {
|
||||
public: boolean;
|
||||
mode: GatewayMode;
|
||||
subdomains: boolean;
|
||||
backendAddress: string;
|
||||
}
|
||||
|
||||
function getGatewayMode(d: RegisteredDomain): GatewayMode {
|
||||
const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
|
||||
if (bt === 'dns-only') return 'dns-only';
|
||||
@@ -43,9 +50,18 @@ function getGatewayMode(d: RegisteredDomain): GatewayMode {
|
||||
return 'l7';
|
||||
}
|
||||
|
||||
function draftFromDomain(d: RegisteredDomain): DomainDraft {
|
||||
return {
|
||||
public: d.public,
|
||||
mode: getGatewayMode(d),
|
||||
subdomains: d.subdomains,
|
||||
backendAddress: d.backend.address,
|
||||
};
|
||||
}
|
||||
|
||||
function getModeLabel(mode: GatewayMode): string {
|
||||
switch (mode) {
|
||||
case 'dns-only': return 'DNS only';
|
||||
case 'dns-only': return 'Direct';
|
||||
case 'l4': return 'L4 Passthrough';
|
||||
case 'l7': return 'L7 Proxy';
|
||||
}
|
||||
@@ -68,48 +84,63 @@ function getIssues(d: RegisteredDomain, certDomains: Set<string>, ddnsRecord: Dd
|
||||
return issues;
|
||||
}
|
||||
|
||||
/** Compact controls for mobile — replaces the topology diagram */
|
||||
/** Build a virtual RegisteredDomain from the draft for the topology diagram */
|
||||
function applyDraftToDomain(domain: RegisteredDomain, draft: DomainDraft): RegisteredDomain {
|
||||
const backendType = draft.mode === 'dns-only' ? 'dns-only' : draft.mode === 'l4' ? 'tcp-passthrough' : 'http';
|
||||
const tls = draft.mode === 'dns-only' ? 'none' : draft.mode === 'l4' ? 'passthrough' : 'terminate';
|
||||
return {
|
||||
...domain,
|
||||
public: draft.public,
|
||||
subdomains: draft.subdomains,
|
||||
backend: { ...domain.backend, address: draft.backendAddress, type: backendType },
|
||||
tls,
|
||||
};
|
||||
}
|
||||
|
||||
/** Compute human-readable list of changes */
|
||||
function describeChanges(server: DomainDraft, draft: DomainDraft): string[] {
|
||||
const changes: string[] = [];
|
||||
if (draft.public !== server.public) changes.push(draft.public ? 'Make public' : 'Make private');
|
||||
if (draft.mode !== server.mode) changes.push(`Mode: ${getModeLabel(server.mode)} → ${getModeLabel(draft.mode)}`);
|
||||
if (draft.subdomains !== server.subdomains) changes.push(draft.subdomains ? 'Enable subdomains' : 'Disable subdomains');
|
||||
if (draft.backendAddress !== server.backendAddress) changes.push(`Backend: ${server.backendAddress} → ${draft.backendAddress}`);
|
||||
return changes;
|
||||
}
|
||||
|
||||
/** Compact controls for mobile */
|
||||
function MobileControls({
|
||||
domain, cert, mode,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, isProvisioningCert, isMutating,
|
||||
draft, onUpdateDraft, cert, onProvisionCert, isProvisioningCert,
|
||||
}: {
|
||||
domain: RegisteredDomain;
|
||||
draft: DomainDraft;
|
||||
onUpdateDraft: (patch: Partial<DomainDraft>) => void;
|
||||
cert: CertEntry | undefined;
|
||||
mode: GatewayMode;
|
||||
onTogglePublic: () => void;
|
||||
onChangeMode: (m: GatewayMode) => void;
|
||||
onProvisionCert: (d: string) => void;
|
||||
isProvisioningCert: boolean;
|
||||
isMutating: boolean;
|
||||
}) {
|
||||
const isL7 = mode === 'l7';
|
||||
const isL7 = draft.mode === 'l7';
|
||||
const hasCert = !!cert?.cert.exists;
|
||||
const provisionDomain = domain.subdomains ? `*.${domain.domain}` : domain.domain;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 py-2">
|
||||
{/* Public toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs">Public (internet-accessible)</Label>
|
||||
<Switch checked={domain.public} onCheckedChange={onTogglePublic} disabled={isMutating} />
|
||||
<Switch checked={draft.public} onCheckedChange={v => onUpdateDraft({ public: v })} />
|
||||
</div>
|
||||
|
||||
{/* Mode selector */}
|
||||
<div>
|
||||
<Label className="text-xs mb-1.5 block">Routing mode</Label>
|
||||
<div className="flex gap-1 bg-muted rounded-md p-1">
|
||||
{([
|
||||
{ value: 'dns-only' as const, label: 'DNS only' },
|
||||
{ value: 'dns-only' as const, label: 'Direct' },
|
||||
{ value: 'l4' as const, label: 'L4 Passthrough' },
|
||||
{ value: 'l7' as const, label: 'L7 Proxy' },
|
||||
]).map(opt => (
|
||||
<button key={opt.value} type="button"
|
||||
className={cn(
|
||||
'flex-1 text-xs py-1.5 px-2 rounded transition-colors',
|
||||
mode === opt.value ? 'bg-background shadow-sm font-medium' : 'text-muted-foreground hover:text-foreground',
|
||||
draft.mode === opt.value ? 'bg-background shadow-sm font-medium' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
onClick={() => onChangeMode(opt.value)}
|
||||
disabled={isMutating}
|
||||
onClick={() => onUpdateDraft({ mode: opt.value })}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
@@ -117,7 +148,6 @@ function MobileControls({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TLS status */}
|
||||
{isL7 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
@@ -137,7 +167,7 @@ function MobileControls({
|
||||
{!hasCert && (
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs gap-1"
|
||||
disabled={isProvisioningCert}
|
||||
onClick={() => onProvisionCert(provisionDomain)}
|
||||
onClick={() => onProvisionCert(draft.subdomains ? `*.` : '')}
|
||||
>
|
||||
{isProvisioningCert ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
|
||||
Provision
|
||||
@@ -146,10 +176,9 @@ function MobileControls({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Backend */}
|
||||
<div className="text-xs">
|
||||
<span className="text-muted-foreground">Backend: </span>
|
||||
<span className="font-mono">{domain.routes?.length ? `${domain.routes.length} routes` : domain.backend.address}</span>
|
||||
<span className="font-mono">{draft.backendAddress}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -171,17 +200,97 @@ export function DomainCard({
|
||||
}: DomainCardProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const isMobile = useIsMobile();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [editingBackend, setEditingBackend] = useState(false);
|
||||
const backendInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isExpanded, setIsExpanded] = useState(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem('domains:expanded');
|
||||
return stored ? JSON.parse(stored).includes(domain.domain) : false;
|
||||
} catch { return false; }
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem('domains:expanded');
|
||||
const set: string[] = stored ? JSON.parse(stored) : [];
|
||||
const next = isExpanded
|
||||
? [...new Set([...set, domain.domain])]
|
||||
: set.filter(d => d !== domain.domain);
|
||||
localStorage.setItem('domains:expanded', JSON.stringify(next));
|
||||
} catch { /* ignore */ }
|
||||
}, [isExpanded, domain.domain]);
|
||||
|
||||
const isManaged = domain.source !== 'manual';
|
||||
const mode = getGatewayMode(domain);
|
||||
const issues = getIssues(domain, certDomains, ddnsRecord);
|
||||
const serverState = useMemo(() => draftFromDomain(domain), [domain]);
|
||||
const prevServerState = useRef(serverState);
|
||||
const [draft, setDraft] = useState<DomainDraft>(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem('domains:drafts');
|
||||
if (stored) {
|
||||
const drafts = JSON.parse(stored);
|
||||
if (drafts[domain.domain]) return drafts[domain.domain];
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
return serverState;
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ updates }: { updates: Record<string, unknown> }) =>
|
||||
domainsApi.register({ ...domain, ...updates } as Parameters<typeof domainsApi.register>[0]),
|
||||
// Reset draft only when server state actually changes (apply, external update)
|
||||
useEffect(() => {
|
||||
const prev = prevServerState.current;
|
||||
if (prev.public !== serverState.public
|
||||
|| prev.mode !== serverState.mode
|
||||
|| prev.subdomains !== serverState.subdomains
|
||||
|| prev.backendAddress !== serverState.backendAddress) {
|
||||
setDraft(serverState);
|
||||
prevServerState.current = serverState;
|
||||
}
|
||||
}, [serverState]);
|
||||
|
||||
const isDirty = draft.public !== serverState.public
|
||||
|| draft.mode !== serverState.mode
|
||||
|| draft.subdomains !== serverState.subdomains
|
||||
|| draft.backendAddress !== serverState.backendAddress;
|
||||
|
||||
// Persist dirty drafts, clear when clean
|
||||
useEffect(() => {
|
||||
try {
|
||||
const stored = localStorage.getItem('domains:drafts');
|
||||
const drafts = stored ? JSON.parse(stored) : {};
|
||||
if (isDirty) {
|
||||
drafts[domain.domain] = draft;
|
||||
} else {
|
||||
delete drafts[domain.domain];
|
||||
}
|
||||
if (Object.keys(drafts).length > 0) {
|
||||
localStorage.setItem('domains:drafts', JSON.stringify(drafts));
|
||||
} else {
|
||||
localStorage.removeItem('domains:drafts');
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}, [draft, isDirty, domain.domain]);
|
||||
|
||||
const changes = isDirty ? describeChanges(serverState, draft) : [];
|
||||
|
||||
// The "virtual" domain reflects the draft state for the topology diagram
|
||||
const previewDomain = isDirty ? applyDraftToDomain(domain, draft) : domain;
|
||||
const previewMode = draft.mode;
|
||||
const issues = getIssues(previewDomain, certDomains, ddnsRecord);
|
||||
|
||||
const updateDraft = (patch: Partial<DomainDraft>) => {
|
||||
setDraft(prev => ({ ...prev, ...patch }));
|
||||
};
|
||||
|
||||
// Apply sends the accumulated draft changes to the server
|
||||
const applyMutation = useMutation({
|
||||
mutationFn: () => {
|
||||
const backendType = draft.mode === 'dns-only' ? 'dns-only' : draft.mode === 'l4' ? 'tcp-passthrough' : 'http';
|
||||
const tls = draft.mode === 'dns-only' ? 'none' : draft.mode === 'l4' ? 'passthrough' : 'terminate';
|
||||
return domainsApi.register({
|
||||
...domain,
|
||||
public: draft.public,
|
||||
subdomains: draft.subdomains,
|
||||
backend: { ...domain.backend, address: draft.backendAddress, type: backendType },
|
||||
tls,
|
||||
} as Parameters<typeof domainsApi.register>[0]);
|
||||
},
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
|
||||
});
|
||||
|
||||
@@ -190,40 +299,12 @@ export function DomainCard({
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
|
||||
});
|
||||
|
||||
const handleTogglePublic = () => {
|
||||
updateMutation.mutate({ updates: { public: !domain.public } });
|
||||
};
|
||||
const handleDiscard = () => setDraft(serverState);
|
||||
|
||||
const handleChangeMode = (newMode: GatewayMode) => {
|
||||
if (newMode === mode) return;
|
||||
const backendType = newMode === 'dns-only' ? 'dns-only' : newMode === 'l4' ? 'tcp-passthrough' : 'http';
|
||||
const tls = newMode === 'dns-only' ? 'none' : newMode === 'l4' ? 'passthrough' : 'terminate';
|
||||
updateMutation.mutate({
|
||||
updates: {
|
||||
tls,
|
||||
backend: { ...domain.backend, type: backendType },
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSaveBackend = () => {
|
||||
const val = backendInputRef.current?.value.trim();
|
||||
if (val && val !== domain.backend.address) {
|
||||
updateMutation.mutate({
|
||||
updates: { backend: { ...domain.backend, address: val } },
|
||||
});
|
||||
}
|
||||
setEditingBackend(false);
|
||||
};
|
||||
|
||||
const handleToggleSubdomains = () => {
|
||||
updateMutation.mutate({ updates: { subdomains: !domain.subdomains } });
|
||||
};
|
||||
|
||||
const domainDisplay = domain.subdomains ? `*.${domain.domain}` : domain.domain;
|
||||
const domainDisplay = draft.subdomains ? `*.${domain.domain}` : domain.domain;
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<Card className={cn('overflow-hidden', isDirty && 'ring-1 ring-amber-400/50')}>
|
||||
{/* === Collapsed Header === */}
|
||||
<button
|
||||
type="button"
|
||||
@@ -231,27 +312,26 @@ export function DomainCard({
|
||||
className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
{/* Left: domain name */}
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="font-mono text-sm font-medium truncate">{domainDisplay}</span>
|
||||
{isDirty && <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 border-amber-400 text-amber-600 dark:text-amber-400">unsaved</Badge>}
|
||||
</div>
|
||||
|
||||
{/* Right: mode + visibility + backend + status */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0 h-5">
|
||||
{getModeLabel(mode)}
|
||||
{getModeLabel(previewMode)}
|
||||
</Badge>
|
||||
|
||||
<Badge
|
||||
variant={domain.public ? 'default' : 'secondary'}
|
||||
variant={draft.public ? 'default' : 'secondary'}
|
||||
className="text-[10px] px-1.5 py-0 h-5"
|
||||
>
|
||||
{domain.public ? 'Public' : 'Private'}
|
||||
{draft.public ? 'Public' : 'Private'}
|
||||
</Badge>
|
||||
|
||||
{!domain.routes?.length && (
|
||||
<span className="text-xs text-muted-foreground font-mono hidden sm:inline">
|
||||
{'-> '}{domain.backend.address}
|
||||
{'-> '}{draft.backendAddress}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -280,18 +360,15 @@ export function DomainCard({
|
||||
{/* Topology diagram (desktop) / compact controls (mobile) */}
|
||||
{isMobile ? (
|
||||
<MobileControls
|
||||
domain={domain}
|
||||
draft={draft}
|
||||
onUpdateDraft={updateDraft}
|
||||
cert={cert}
|
||||
mode={mode}
|
||||
onTogglePublic={handleTogglePublic}
|
||||
onChangeMode={handleChangeMode}
|
||||
onProvisionCert={onProvisionCert}
|
||||
onProvisionCert={d => onProvisionCert(draft.subdomains ? `*.${domain.domain}` : d || domain.domain)}
|
||||
isProvisioningCert={isProvisioningCert}
|
||||
isMutating={updateMutation.isPending}
|
||||
/>
|
||||
) : (
|
||||
<DomainTopology
|
||||
domain={domain}
|
||||
domain={previewDomain}
|
||||
cert={cert}
|
||||
ddnsRecord={ddnsRecord ? { ok: ddnsRecord.ok, ip: ddnsRecord.ip, error: ddnsRecord.error } : undefined}
|
||||
vpnPeerCount={vpnPeerCount}
|
||||
@@ -299,60 +376,51 @@ export function DomainCard({
|
||||
vpnConfigured={vpnConfigured}
|
||||
daemons={daemons}
|
||||
isManaged={isManaged}
|
||||
onTogglePublic={handleTogglePublic}
|
||||
onChangeMode={handleChangeMode}
|
||||
onTogglePublic={() => updateDraft({ public: !draft.public })}
|
||||
onChangeMode={m => updateDraft({ mode: m })}
|
||||
onChangeBackend={addr => updateDraft({ backendAddress: addr })}
|
||||
onProvisionCert={onProvisionCert}
|
||||
onRenewCert={onRenewCert}
|
||||
isProvisioningCert={isProvisioningCert}
|
||||
isRenewingCert={isRenewingCert}
|
||||
isMutating={updateMutation.isPending}
|
||||
isMutating={applyMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* === Footer: backend editing + subdomains + source + deregister === */}
|
||||
{/* === Apply bar (visible when dirty) === */}
|
||||
{isDirty && (
|
||||
<div className="flex items-center justify-between gap-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800/50 rounded-md px-3 py-2">
|
||||
<div className="text-xs space-y-0.5">
|
||||
<div className="font-medium text-amber-800 dark:text-amber-300">Pending changes</div>
|
||||
<div className="text-amber-700 dark:text-amber-400">
|
||||
{changes.join(' · ')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<Button variant="ghost" size="sm" className="h-7 text-xs gap-1"
|
||||
onClick={handleDiscard} disabled={applyMutation.isPending}
|
||||
>
|
||||
<Undo2 className="h-3 w-3" />Discard
|
||||
</Button>
|
||||
<Button size="sm" className="h-7 text-xs gap-1"
|
||||
onClick={() => applyMutation.mutate()} disabled={applyMutation.isPending}
|
||||
>
|
||||
{applyMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <Save className="h-3 w-3" />}
|
||||
Apply
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* === Footer: subdomains + source + deregister === */}
|
||||
<div className="flex items-center justify-between pt-2 border-t border-border/50">
|
||||
<div className="flex items-center gap-4">
|
||||
{!domain.routes?.length && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{editingBackend ? (
|
||||
<div className="flex items-center gap-1">
|
||||
<Input
|
||||
ref={backendInputRef}
|
||||
defaultValue={domain.backend.address}
|
||||
className="h-6 text-xs font-mono w-40"
|
||||
autoFocus
|
||||
onKeyDown={e => {
|
||||
if (e.key === 'Enter') handleSaveBackend();
|
||||
if (e.key === 'Escape') setEditingBackend(false);
|
||||
}}
|
||||
/>
|
||||
<Button variant="ghost" size="sm" className="h-6 text-[10px] px-1.5" onClick={handleSaveBackend}>
|
||||
Save
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-6 text-[10px] px-1.5" onClick={() => setEditingBackend(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors group"
|
||||
onClick={() => setEditingBackend(true)}
|
||||
>
|
||||
<span className="font-mono">{domain.backend.address}</span>
|
||||
<Pencil className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={handleToggleSubdomains}
|
||||
disabled={updateMutation.isPending}
|
||||
onClick={() => updateDraft({ subdomains: !draft.subdomains })}
|
||||
>
|
||||
{domain.subdomains ? '*.wildcard on' : 'wildcard off'}
|
||||
{draft.subdomains ? '*.wildcard on' : 'wildcard off'}
|
||||
</button>
|
||||
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
@@ -361,16 +429,16 @@ export function DomainCard({
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost" size="sm"
|
||||
className="h-6 text-[10px] text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
|
||||
onClick={e => { e.stopPropagation(); deregisterMutation.mutate(); }}
|
||||
disabled={deregisterMutation.isPending}
|
||||
>
|
||||
{deregisterMutation.isPending
|
||||
? <Loader2 className="h-3 w-3 animate-spin mr-1" />
|
||||
: <Trash2 className="h-3 w-3 mr-1" />}
|
||||
Deregister
|
||||
</Button>
|
||||
variant="ghost" size="sm"
|
||||
className="h-6 text-[10px] text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20"
|
||||
onClick={e => { e.stopPropagation(); deregisterMutation.mutate(); }}
|
||||
disabled={deregisterMutation.isPending}
|
||||
>
|
||||
{deregisterMutation.isPending
|
||||
? <Loader2 className="h-3 w-3 animate-spin mr-1" />
|
||||
: <Trash2 className="h-3 w-3 mr-1" />}
|
||||
Deregister
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
|
||||
@@ -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