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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user