Advanced pages. Model-driven controls.
This commit is contained in:
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user