Advanced pages. Model-driven controls.
This commit is contained in:
379
web/src/components/domains/DomainCard.tsx
Normal file
379
web/src/components/domains/DomainCard.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
import { useState, useRef } 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 { cn } from '@/lib/utils';
|
||||
import { useIsMobile } from '@/hooks/use-mobile';
|
||||
import { DomainTopology } from './DomainTopology';
|
||||
import { domainsApi, type RegisteredDomain } from '@/services/api/networking';
|
||||
import type { CertEntry } from '@/services/api/cert';
|
||||
import type { DdnsRecordStatus } from '@/services/api/networking';
|
||||
|
||||
interface DomainCardProps {
|
||||
domain: RegisteredDomain;
|
||||
cert: CertEntry | undefined;
|
||||
ddnsRecord: DdnsRecordStatus | undefined;
|
||||
vpnPeerCount: number;
|
||||
vpnRunning: boolean;
|
||||
vpnConfigured: boolean;
|
||||
daemons: {
|
||||
haproxy?: boolean;
|
||||
nftables?: boolean;
|
||||
crowdsec?: boolean;
|
||||
wireguard?: boolean;
|
||||
};
|
||||
certDomains: Set<string>;
|
||||
onProvisionCert: (domain: string) => void;
|
||||
onRenewCert: () => void;
|
||||
isProvisioningCert: boolean;
|
||||
isRenewingCert: boolean;
|
||||
}
|
||||
|
||||
type GatewayMode = 'dns-only' | 'l4' | 'l7';
|
||||
|
||||
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';
|
||||
if (bt === 'tcp-passthrough') return 'l4';
|
||||
return 'l7';
|
||||
}
|
||||
|
||||
function getModeLabel(mode: GatewayMode): string {
|
||||
switch (mode) {
|
||||
case 'dns-only': return 'DNS only';
|
||||
case 'l4': return 'L4 Passthrough';
|
||||
case 'l7': return 'L7 Proxy';
|
||||
}
|
||||
}
|
||||
|
||||
function getTlsStatus(d: RegisteredDomain, certDomains: Set<string>): 'ok' | 'error' | 'na' {
|
||||
const bt = d.routes?.length ? d.routes[0].backend.type : d.backend.type;
|
||||
if (d.tls === 'passthrough' || d.tls === 'none' || bt === 'tcp-passthrough' || bt === 'dns-only') return 'na';
|
||||
if (certDomains.has(d.domain)) return 'ok';
|
||||
const dotIdx = d.domain.indexOf('.');
|
||||
if (dotIdx > 0 && certDomains.has(d.domain.slice(dotIdx + 1))) return 'ok';
|
||||
return 'error';
|
||||
}
|
||||
|
||||
function getIssues(d: RegisteredDomain, certDomains: Set<string>, ddnsRecord: DdnsRecordStatus | undefined): string[] {
|
||||
const issues: string[] = [];
|
||||
const tls = getTlsStatus(d, certDomains);
|
||||
if (tls === 'error') issues.push('No TLS cert');
|
||||
if (d.public && ddnsRecord && !ddnsRecord.ok) issues.push('DDNS failed');
|
||||
return issues;
|
||||
}
|
||||
|
||||
/** Compact controls for mobile — replaces the topology diagram */
|
||||
function MobileControls({
|
||||
domain, cert, mode,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, isProvisioningCert, isMutating,
|
||||
}: {
|
||||
domain: RegisteredDomain;
|
||||
cert: CertEntry | undefined;
|
||||
mode: GatewayMode;
|
||||
onTogglePublic: () => void;
|
||||
onChangeMode: (m: GatewayMode) => void;
|
||||
onProvisionCert: (d: string) => void;
|
||||
isProvisioningCert: boolean;
|
||||
isMutating: boolean;
|
||||
}) {
|
||||
const isL7 = 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} />
|
||||
</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: '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',
|
||||
)}
|
||||
onClick={() => onChangeMode(opt.value)}
|
||||
disabled={isMutating}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TLS status */}
|
||||
{isL7 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
{hasCert ? (
|
||||
<>
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
|
||||
<span>TLS: {cert!.coveredBy ? `*.${cert!.domain}` : cert!.domain}</span>
|
||||
{cert!.cert.daysLeft != null && <span className="text-muted-foreground">({cert!.cert.daysLeft}d)</span>}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AlertCircle className="h-3.5 w-3.5 text-red-500" />
|
||||
<span>No TLS certificate</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{!hasCert && (
|
||||
<Button variant="outline" size="sm" className="h-7 text-xs gap-1"
|
||||
disabled={isProvisioningCert}
|
||||
onClick={() => onProvisionCert(provisionDomain)}
|
||||
>
|
||||
{isProvisioningCert ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
|
||||
Provision
|
||||
</Button>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DomainCard({
|
||||
domain,
|
||||
cert,
|
||||
ddnsRecord,
|
||||
vpnPeerCount,
|
||||
vpnRunning,
|
||||
vpnConfigured,
|
||||
daemons,
|
||||
certDomains,
|
||||
onProvisionCert,
|
||||
onRenewCert,
|
||||
isProvisioningCert,
|
||||
isRenewingCert,
|
||||
}: DomainCardProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const isMobile = useIsMobile();
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [editingBackend, setEditingBackend] = useState(false);
|
||||
const backendInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const isManaged = domain.source !== 'manual';
|
||||
const mode = getGatewayMode(domain);
|
||||
const issues = getIssues(domain, certDomains, ddnsRecord);
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ updates }: { updates: Record<string, unknown> }) =>
|
||||
domainsApi.register({ ...domain, ...updates } as Parameters<typeof domainsApi.register>[0]),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
|
||||
});
|
||||
|
||||
const deregisterMutation = useMutation({
|
||||
mutationFn: () => domainsApi.deregister(domain.domain),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['domains'] }),
|
||||
});
|
||||
|
||||
const handleTogglePublic = () => {
|
||||
updateMutation.mutate({ updates: { public: !domain.public } });
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
{/* === Collapsed Header === */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
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>
|
||||
</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)}
|
||||
</Badge>
|
||||
|
||||
<Badge
|
||||
variant={domain.public ? 'default' : 'secondary'}
|
||||
className="text-[10px] px-1.5 py-0 h-5"
|
||||
>
|
||||
{domain.public ? 'Public' : 'Private'}
|
||||
</Badge>
|
||||
|
||||
{!domain.routes?.length && (
|
||||
<span className="text-xs text-muted-foreground font-mono hidden sm:inline">
|
||||
{'-> '}{domain.backend.address}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{issues.length === 0 ? (
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500 shrink-0" />
|
||||
) : (
|
||||
<span className="flex items-center gap-1 text-[10px] text-amber-600 dark:text-amber-400">
|
||||
<AlertCircle className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="hidden sm:inline">{issues[0]}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* === Expanded Content === */}
|
||||
{isExpanded && (
|
||||
<CardContent className="pt-0 pb-4 px-4 space-y-3">
|
||||
{/* Managed domain notice */}
|
||||
{isManaged && (
|
||||
<div className="text-[10px] text-muted-foreground bg-muted/30 rounded-md px-3 py-1.5">
|
||||
Registered by <span className="font-medium">{domain.source}</span> — changes may be overwritten on next sync
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Topology diagram (desktop) / compact controls (mobile) */}
|
||||
{isMobile ? (
|
||||
<MobileControls
|
||||
domain={domain}
|
||||
cert={cert}
|
||||
mode={mode}
|
||||
onTogglePublic={handleTogglePublic}
|
||||
onChangeMode={handleChangeMode}
|
||||
onProvisionCert={onProvisionCert}
|
||||
isProvisioningCert={isProvisioningCert}
|
||||
isMutating={updateMutation.isPending}
|
||||
/>
|
||||
) : (
|
||||
<DomainTopology
|
||||
domain={domain}
|
||||
cert={cert}
|
||||
ddnsRecord={ddnsRecord ? { ok: ddnsRecord.ok, ip: ddnsRecord.ip, error: ddnsRecord.error } : undefined}
|
||||
vpnPeerCount={vpnPeerCount}
|
||||
vpnRunning={vpnRunning}
|
||||
vpnConfigured={vpnConfigured}
|
||||
daemons={daemons}
|
||||
isManaged={isManaged}
|
||||
onTogglePublic={handleTogglePublic}
|
||||
onChangeMode={handleChangeMode}
|
||||
onProvisionCert={onProvisionCert}
|
||||
onRenewCert={onRenewCert}
|
||||
isProvisioningCert={isProvisioningCert}
|
||||
isRenewingCert={isRenewingCert}
|
||||
isMutating={updateMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* === Footer: backend editing + 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}
|
||||
>
|
||||
{domain.subdomains ? '*.wildcard on' : 'wildcard off'}
|
||||
</button>
|
||||
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
Source: <span className="font-mono">{domain.source}</span>
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
536
web/src/components/domains/DomainTopology.tsx
Normal file
536
web/src/components/domains/DomainTopology.tsx
Normal file
@@ -0,0 +1,536 @@
|
||||
import { useMemo, useCallback } from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import {
|
||||
ReactFlow, Handle, Position,
|
||||
type Node, type Edge, type NodeProps,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import {
|
||||
Globe, Wifi, Lock, Shield, ShieldAlert,
|
||||
AlertCircle, Loader2, Plus, RotateCw,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TopologyNode, type NodeStatus } from './TopologyNode';
|
||||
import type { RegisteredDomain } from '@/services/api/networking';
|
||||
import type { CertEntry } from '@/services/api/cert';
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────
|
||||
|
||||
type GatewayMode = 'dns-only' | 'l4' | 'l7';
|
||||
|
||||
interface DaemonStatuses {
|
||||
haproxy?: boolean;
|
||||
nftables?: boolean;
|
||||
crowdsec?: boolean;
|
||||
wireguard?: boolean;
|
||||
}
|
||||
|
||||
interface DdnsRecordInfo {
|
||||
ok: boolean;
|
||||
ip?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface DomainTopologyProps {
|
||||
domain: RegisteredDomain;
|
||||
cert: CertEntry | undefined;
|
||||
ddnsRecord: DdnsRecordInfo | undefined;
|
||||
vpnPeerCount: number;
|
||||
vpnRunning: boolean;
|
||||
vpnConfigured: boolean;
|
||||
daemons: DaemonStatuses;
|
||||
isManaged: boolean;
|
||||
onTogglePublic: () => void;
|
||||
onChangeMode: (mode: GatewayMode) => void;
|
||||
onProvisionCert: (domain: string) => void;
|
||||
onRenewCert: () => void;
|
||||
isProvisioningCert: boolean;
|
||||
isRenewingCert: boolean;
|
||||
isMutating: boolean;
|
||||
}
|
||||
|
||||
// ── Custom React Flow node ─────────────────────────────────────────────
|
||||
// Callbacks are passed through data to avoid context issues with React Flow.
|
||||
|
||||
const handleStyle = { opacity: 0, width: 4, height: 4 };
|
||||
|
||||
function FlowNode({ data }: NodeProps) {
|
||||
const v = data.variant as string;
|
||||
|
||||
const leftHandle = <Handle id="left" type="target" position={Position.Left} style={handleStyle} />;
|
||||
const rightHandle = <Handle id="right" type="source" position={Position.Right} style={handleStyle} />;
|
||||
const bottomHandle = <Handle id="bottom" type="target" position={Position.Bottom} style={handleStyle} />;
|
||||
|
||||
if (v === 'internet') {
|
||||
const isPublic = data.isPublic as boolean;
|
||||
const status = data.status as NodeStatus;
|
||||
const sublabel = data.sublabel as string;
|
||||
const ddnsIp = data.ddnsIp as string | undefined;
|
||||
const ddnsError = data.ddnsError as string | undefined;
|
||||
const onTogglePublic = data.onTogglePublic as (() => void) | undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<TopologyNode
|
||||
label="Internet"
|
||||
sublabel={sublabel}
|
||||
status={status}
|
||||
icon={<Globe className="h-3.5 w-3.5" />}
|
||||
interactive
|
||||
onClick={onTogglePublic}
|
||||
tooltip={
|
||||
isPublic ? (
|
||||
<div className="space-y-1">
|
||||
<div className="font-medium">Public domain</div>
|
||||
{ddnsIp && <div>IP: {ddnsIp}</div>}
|
||||
{ddnsError && <div className="text-red-400">{ddnsError}</div>}
|
||||
<div className="text-muted-foreground">Click to make private</div>
|
||||
</div>
|
||||
) : 'Click to make public (enables DDNS)'
|
||||
}
|
||||
/>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'security') {
|
||||
const fwOk = data.firewallOk as boolean;
|
||||
const csOk = data.crowdsecOk as boolean;
|
||||
const isL4 = data.isL4 as boolean;
|
||||
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link to="/central/firewall" className="group nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={(e) => e.stopPropagation()}>
|
||||
<TopologyNode
|
||||
label="Firewall"
|
||||
status={fwOk ? 'ok' : 'na'}
|
||||
icon={<Shield className="h-3 w-3" />}
|
||||
className="group-hover:border-primary/40"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="/central/crowdsec" className="group nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={(e) => e.stopPropagation()}>
|
||||
<TopologyNode
|
||||
label="CrowdSec"
|
||||
sublabel={isL4 ? 'IP only' : 'HTTP + IP'}
|
||||
status={csOk ? 'ok' : 'na'}
|
||||
icon={<ShieldAlert className="h-3 w-3" />}
|
||||
className="group-hover:border-primary/40"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'gateway') {
|
||||
const mode = data.mode as GatewayMode;
|
||||
const haproxyOk = data.haproxyOk as boolean;
|
||||
const isMutating = data.isMutating as boolean;
|
||||
const onChangeMode = data.onChangeMode as ((m: GatewayMode) => void) | undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
{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'}
|
||||
status={mode === 'dns-only' ? 'inactive' : haproxyOk ? 'ok' : 'error'}
|
||||
>
|
||||
{onChangeMode && (
|
||||
<div className="flex gap-0.5 mt-2 bg-muted rounded p-0.5">
|
||||
{(['dns-only', 'l4', 'l7'] as const).map(m => (
|
||||
<button key={m} type="button"
|
||||
className={cn(
|
||||
'nopan nodrag flex-1 text-[10px] py-0.5 px-2 rounded transition-colors !cursor-pointer',
|
||||
mode === m ? 'bg-background shadow-sm font-medium' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
style={{ pointerEvents: 'all' }}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={() => onChangeMode(m)}
|
||||
disabled={isMutating}
|
||||
>
|
||||
{m === 'dns-only' ? 'DNS' : m.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</TopologyNode>
|
||||
{rightHandle}
|
||||
{bottomHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'tls') {
|
||||
const status = data.status as NodeStatus;
|
||||
const certDomain = data.certDomain as string | undefined;
|
||||
const daysLeft = data.daysLeft as number;
|
||||
const hasCert = data.hasCert as boolean;
|
||||
const provisionDomain = data.provisionDomain as string;
|
||||
const expiry = data.expiry as string | undefined;
|
||||
const issuer = data.issuer as string | undefined;
|
||||
const isProvisioningCert = data.isProvisioningCert as boolean;
|
||||
const isRenewingCert = data.isRenewingCert as boolean;
|
||||
const onProvisionCert = data.onProvisionCert as ((d: string) => void) | undefined;
|
||||
const onRenewCert = data.onRenewCert as (() => void) | undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<TopologyNode
|
||||
label="TLS"
|
||||
sublabel={certDomain ?? 'No certificate'}
|
||||
status={status}
|
||||
tooltip={
|
||||
hasCert ? (
|
||||
<div className="space-y-1">
|
||||
<div>Certificate: {certDomain}</div>
|
||||
<div>Expires: {expiry ?? 'unknown'} ({daysLeft}d)</div>
|
||||
{issuer && <div>Issuer: {issuer}</div>}
|
||||
</div>
|
||||
) : 'No TLS certificate provisioned'
|
||||
}
|
||||
>
|
||||
{!hasCert && onProvisionCert && (
|
||||
<Button variant="outline" size="sm"
|
||||
className="mt-1.5 h-5 text-[10px] gap-0.5 w-full !cursor-pointer"
|
||||
style={{ pointerEvents: 'all' }}
|
||||
disabled={isProvisioningCert}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={() => onProvisionCert(provisionDomain)}
|
||||
>
|
||||
{isProvisioningCert ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : <Plus className="h-2.5 w-2.5" />}
|
||||
Provision
|
||||
</Button>
|
||||
)}
|
||||
{hasCert && daysLeft < 30 && onRenewCert && (
|
||||
<Button variant="outline" size="sm"
|
||||
className="mt-1.5 h-5 text-[10px] gap-0.5 w-full !cursor-pointer"
|
||||
style={{ pointerEvents: 'all' }}
|
||||
disabled={isRenewingCert}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={() => onRenewCert()}
|
||||
>
|
||||
{isRenewingCert ? <Loader2 className="h-2.5 w-2.5 animate-spin" /> : <RotateCw className="h-2.5 w-2.5" />}
|
||||
Renew
|
||||
</Button>
|
||||
)}
|
||||
</TopologyNode>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'backend') {
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<TopologyNode
|
||||
label={data.label as string}
|
||||
sublabel={data.sublabel as string | undefined}
|
||||
status="ok"
|
||||
className="font-mono"
|
||||
/>
|
||||
{rightHandle}
|
||||
{bottomHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'lan') {
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<TopologyNode
|
||||
label="LAN"
|
||||
sublabel="Always connected"
|
||||
status="ok"
|
||||
icon={<Wifi className="h-3.5 w-3.5" />}
|
||||
/>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (v === 'vpn') {
|
||||
const peerCount = data.peerCount as number;
|
||||
const running = data.running as boolean;
|
||||
return (
|
||||
<>
|
||||
{leftHandle}
|
||||
<Link to="/central/vpn" className="nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={(e) => e.stopPropagation()}>
|
||||
<TopologyNode
|
||||
label="VPN"
|
||||
sublabel={running ? `${peerCount} peer${peerCount !== 1 ? 's' : ''}` : 'Not running'}
|
||||
status={running ? 'ok' : 'na'}
|
||||
icon={<Lock className="h-3.5 w-3.5" />}
|
||||
className="hover:border-primary/40"
|
||||
/>
|
||||
</Link>
|
||||
{rightHandle}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeTypes = { topology: FlowNode };
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────
|
||||
|
||||
function getGatewayMode(domain: RegisteredDomain): GatewayMode {
|
||||
const bt = domain.routes?.length ? domain.routes[0].backend.type : domain.backend.type;
|
||||
if (bt === 'dns-only') return 'dns-only';
|
||||
if (bt === 'tcp-passthrough') return 'l4';
|
||||
return 'l7';
|
||||
}
|
||||
|
||||
// ── Main component ─────────────────────────────────────────────────────
|
||||
|
||||
export function DomainTopology(props: DomainTopologyProps) {
|
||||
const {
|
||||
domain, cert, ddnsRecord, vpnPeerCount, vpnRunning, vpnConfigured,
|
||||
daemons,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, onRenewCert,
|
||||
isProvisioningCert, isRenewingCert, isMutating,
|
||||
} = props;
|
||||
|
||||
const mode = getGatewayMode(domain);
|
||||
const isPublic = domain.public;
|
||||
const isDnsOnly = mode === 'dns-only';
|
||||
const isL4 = mode === 'l4';
|
||||
const isL7 = mode === 'l7';
|
||||
const showSecurity = isPublic && !isDnsOnly;
|
||||
const showGateway = true; // Always show so mode selector is accessible
|
||||
const showTls = isL7;
|
||||
const showVpn = vpnConfigured;
|
||||
|
||||
// DDNS
|
||||
const ddnsStatus: NodeStatus = !isPublic ? 'inactive' : ddnsRecord?.ok ? 'ok' : ddnsRecord ? 'error' : 'na';
|
||||
const ddnsSublabel = !isPublic ? 'Disconnected' : ddnsRecord?.ok ? (ddnsRecord.ip ?? 'Synced') : ddnsRecord?.error ? 'Sync failed' : 'DDNS';
|
||||
|
||||
// TLS
|
||||
const hasCert = !!cert?.cert.exists;
|
||||
const tlsStatus: NodeStatus = hasCert ? 'ok' : 'error';
|
||||
const certDomain = hasCert ? (cert!.coveredBy ? `*.${cert!.domain}` : cert!.domain) : undefined;
|
||||
const daysLeft = cert?.cert.daysLeft ?? 0;
|
||||
const provisionDomain = domain.subdomains ? `*.${domain.domain}` : domain.domain;
|
||||
|
||||
// Backend
|
||||
const backendLabel = domain.routes?.length ? `${domain.routes.length} backends` : domain.backend.address;
|
||||
const backendSublabel = isDnsOnly ? 'Direct access' : isL4 ? 'Handles own TLS' : domain.routes?.length ? 'Path-based routing' : undefined;
|
||||
|
||||
// ── Build nodes & edges ──
|
||||
|
||||
const { nodes, edges } = useMemo(() => {
|
||||
const n: Node[] = [];
|
||||
const e: Edge[] = [];
|
||||
|
||||
// Column x positions
|
||||
let x = 0;
|
||||
const sourceX = x;
|
||||
|
||||
x += 170;
|
||||
const securityX = showSecurity ? x : -1;
|
||||
if (showSecurity) x += 160;
|
||||
|
||||
const gatewayX = showGateway ? x : -1;
|
||||
if (showGateway) x += showTls ? 150 : 200;
|
||||
|
||||
const tlsX = showTls ? x : -1;
|
||||
if (showTls) x += 140;
|
||||
|
||||
const backendX = x;
|
||||
|
||||
// Row y positions
|
||||
const pipelineY = 0;
|
||||
const lanY = 110;
|
||||
const vpnY = 180;
|
||||
|
||||
// ── Nodes (callbacks passed via data) ──
|
||||
|
||||
n.push({
|
||||
id: 'internet', type: 'topology',
|
||||
position: { x: sourceX, y: pipelineY },
|
||||
data: {
|
||||
variant: 'internet', isPublic, status: ddnsStatus, sublabel: ddnsSublabel,
|
||||
ddnsIp: ddnsRecord?.ip, ddnsError: ddnsRecord?.error,
|
||||
onTogglePublic,
|
||||
},
|
||||
});
|
||||
|
||||
if (showSecurity) {
|
||||
n.push({
|
||||
id: 'security', type: 'topology',
|
||||
position: { x: securityX, y: pipelineY - 10 },
|
||||
data: { variant: 'security', firewallOk: !!daemons.nftables, crowdsecOk: !!daemons.crowdsec, isL4 },
|
||||
});
|
||||
}
|
||||
|
||||
if (showGateway) {
|
||||
n.push({
|
||||
id: 'gateway', type: 'topology',
|
||||
position: { x: gatewayX, y: pipelineY },
|
||||
data: { variant: 'gateway', mode, haproxyOk: !!daemons.haproxy, isMutating, onChangeMode },
|
||||
});
|
||||
}
|
||||
|
||||
if (showTls) {
|
||||
n.push({
|
||||
id: 'tls', type: 'topology',
|
||||
position: { x: tlsX, y: pipelineY },
|
||||
data: {
|
||||
variant: 'tls', status: tlsStatus, certDomain, daysLeft, hasCert, provisionDomain,
|
||||
expiry: cert?.cert.expiry ? new Date(cert.cert.expiry).toLocaleDateString() : undefined,
|
||||
issuer: cert?.cert.issuerCN,
|
||||
isProvisioningCert, isRenewingCert, onProvisionCert, onRenewCert,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
n.push({
|
||||
id: 'backend', type: 'topology',
|
||||
position: { x: backendX, y: pipelineY },
|
||||
data: { variant: 'backend', label: backendLabel, sublabel: backendSublabel },
|
||||
});
|
||||
|
||||
n.push({
|
||||
id: 'lan', type: 'topology',
|
||||
position: { x: sourceX, y: lanY },
|
||||
data: { variant: 'lan' },
|
||||
});
|
||||
|
||||
if (showVpn) {
|
||||
n.push({
|
||||
id: 'vpn', type: 'topology',
|
||||
position: { x: sourceX, y: vpnY },
|
||||
data: { variant: 'vpn', peerCount: vpnPeerCount, running: vpnRunning },
|
||||
});
|
||||
}
|
||||
|
||||
// ── Edges ──
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
// Central processing → backend (not for DNS-only)
|
||||
if (!isDnsOnly) {
|
||||
if (isL7 && showTls) {
|
||||
e.push({ id: 'e-gateway-tls', source: 'gateway', target: 'tls', ...pipeline });
|
||||
e.push({ id: 'e-tls-backend', source: 'tls', target: 'backend', ...pipeline, animated: hasCert });
|
||||
} else {
|
||||
e.push({ id: 'e-gateway-backend', source: 'gateway', target: 'backend', ...pipeline, style: { ...pipeline.style, strokeWidth: isL4 ? 2.5 : 1.5 } });
|
||||
}
|
||||
}
|
||||
|
||||
// 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 });
|
||||
|
||||
if (showVpn) {
|
||||
e.push({ id: 'e-vpn-target', source: 'vpn', target: lanVpnTarget, ...lanVpnEdge });
|
||||
}
|
||||
|
||||
return { nodes: n, edges: e };
|
||||
}, [
|
||||
isPublic, isDnsOnly, isL4, isL7, showSecurity, showGateway, showTls, showVpn,
|
||||
mode, daemons, ddnsStatus, ddnsSublabel, ddnsRecord,
|
||||
tlsStatus, certDomain, daysLeft, hasCert, provisionDomain, cert,
|
||||
backendLabel, backendSublabel, vpnPeerCount, vpnRunning,
|
||||
isMutating, isProvisioningCert, isRenewingCert,
|
||||
onTogglePublic, onChangeMode, onProvisionCert, onRenewCert,
|
||||
]);
|
||||
|
||||
const containerHeight = showVpn ? 260 : 200;
|
||||
|
||||
const onInit = useCallback((instance: { fitView: () => void }) => {
|
||||
setTimeout(() => instance.fitView(), 0);
|
||||
}, []);
|
||||
|
||||
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>
|
||||
|
||||
{/* Warnings */}
|
||||
{isDnsOnly && (
|
||||
<div className="flex items-center gap-2 text-[10px] text-amber-600 dark:text-amber-400 bg-amber-50/50 dark:bg-amber-950/20 rounded-md px-3 py-1.5">
|
||||
<AlertCircle className="h-3 w-3 shrink-0" />
|
||||
No firewall, proxy, or TLS protection from Central — traffic goes directly to your server
|
||||
</div>
|
||||
)}
|
||||
{isL7 && !hasCert && (
|
||||
<div className="flex items-center gap-2 text-[10px] text-red-600 dark:text-red-400 bg-red-50/50 dark:bg-red-950/20 rounded-md px-3 py-1.5">
|
||||
<AlertCircle className="h-3 w-3 shrink-0" />
|
||||
L7 routing is inactive until a TLS certificate is provisioned
|
||||
</div>
|
||||
)}
|
||||
{isPublic && ddnsRecord && !ddnsRecord.ok && (
|
||||
<div className="flex items-center gap-2 text-[10px] text-red-600 dark:text-red-400 bg-red-50/50 dark:bg-red-950/20 rounded-md px-3 py-1.5">
|
||||
<AlertCircle className="h-3 w-3 shrink-0" />
|
||||
DDNS sync failed{ddnsRecord.error ? `: ${ddnsRecord.error}` : ''}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Route table */}
|
||||
{isL7 && domain.routes && domain.routes.length > 0 && (
|
||||
<div className="bg-muted/30 rounded-md p-2 space-y-1">
|
||||
<div className="text-[10px] text-muted-foreground font-medium mb-1">Route table</div>
|
||||
{domain.routes.map((route, i) => (
|
||||
<div key={i} className="flex items-center gap-3 text-[10px]">
|
||||
<span className="font-mono text-muted-foreground w-20 truncate">
|
||||
{route.paths?.length ? route.paths.join(', ') : '/*'}
|
||||
</span>
|
||||
<span className="text-muted-foreground">{'->'}</span>
|
||||
<span className="font-mono">{route.backend.address}</span>
|
||||
{route.ipAllow && route.ipAllow.length > 0 && (
|
||||
<span className="text-muted-foreground flex items-center gap-0.5">
|
||||
<Shield className="h-2.5 w-2.5" />
|
||||
{route.ipAllow.length} IP rules
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
web/src/components/domains/TopologyNode.tsx
Normal file
91
web/src/components/domains/TopologyNode.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { forwardRef } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
|
||||
export type NodeStatus = 'ok' | 'error' | 'na' | 'inactive';
|
||||
|
||||
interface TopologyNodeProps {
|
||||
label: string;
|
||||
sublabel?: string;
|
||||
status?: NodeStatus;
|
||||
icon?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
interactive?: boolean;
|
||||
disabled?: boolean;
|
||||
tooltip?: React.ReactNode;
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const statusColors: Record<NodeStatus, string> = {
|
||||
ok: 'border-green-500/60 bg-green-50/50 dark:bg-green-950/20',
|
||||
error: 'border-red-500/60 bg-red-50/50 dark:bg-red-950/20',
|
||||
na: 'border-muted-foreground/30 bg-muted/30',
|
||||
inactive: 'border-dashed border-muted-foreground/20 bg-muted/10 opacity-50',
|
||||
};
|
||||
|
||||
const statusDotColors: Record<NodeStatus, string> = {
|
||||
ok: 'bg-green-500',
|
||||
error: 'bg-red-500',
|
||||
na: 'bg-muted-foreground/40',
|
||||
inactive: 'bg-muted-foreground/20',
|
||||
};
|
||||
|
||||
export const TopologyNode = forwardRef<HTMLDivElement, TopologyNodeProps>(
|
||||
function TopologyNode(
|
||||
{ label, sublabel, status = 'ok', icon, onClick, interactive, disabled, tooltip, className, children },
|
||||
ref,
|
||||
) {
|
||||
const isClickable = (interactive || onClick) && !disabled;
|
||||
|
||||
const content = (
|
||||
<div
|
||||
ref={ref}
|
||||
role={isClickable ? 'button' : undefined}
|
||||
tabIndex={isClickable ? 0 : undefined}
|
||||
onClick={isClickable ? onClick : undefined}
|
||||
// Stop pointerdown propagation so React Flow doesn't swallow the click
|
||||
onPointerDown={isClickable ? (e) => e.stopPropagation() : undefined}
|
||||
onKeyDown={isClickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick?.(); } } : undefined}
|
||||
style={{ pointerEvents: 'all', position: 'relative' }}
|
||||
className={cn(
|
||||
'rounded-lg border px-3 py-2 text-xs transition-all duration-200',
|
||||
'nopan nodrag',
|
||||
statusColors[status],
|
||||
isClickable && '!cursor-pointer hover:shadow-sm hover:border-primary/40',
|
||||
disabled && '!pointer-events-none',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{icon && <span className="shrink-0 text-muted-foreground">{icon}</span>}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className={cn('h-1.5 w-1.5 rounded-full shrink-0', statusDotColors[status])} />
|
||||
<span className="font-medium truncate">{label}</span>
|
||||
</div>
|
||||
{sublabel && (
|
||||
<div className="text-[10px] text-muted-foreground mt-0.5 truncate">{sublabel}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (tooltip) {
|
||||
return (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{content}</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="max-w-64 text-xs">
|
||||
{tooltip}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
},
|
||||
);
|
||||
Reference in New Issue
Block a user