wild-cloud/wild-central
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Removes Wild Cloud cruft.

Browse Source
This commit is contained in:
Paul Payne
2026-07-11 23:05:17 +00:00
parent f9d87ff975
commit ac66ba653d
26 changed files with 745 additions and 1410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
web/src/components/domains/DomainCard.tsx
View File

@@ -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>
)}