feat: UI refactor — Dashboard + Services, 9 items → 6
Major restructure of Wild Central's web UI: New pages: - Dashboard: infrastructure health (Cloudflare token, DDNS sync, daemon status, gateway router guidance, cert warnings) - Services: every registered service with expandable rows showing DNS, proxy, TLS, DDNS status. Custom TCP routes section. Advanced HAProxy management collapsed at bottom. Sidebar restructured into two groups: - Services: Dashboard, Services - Central: Firewall, VPN, CrowdSec, DHCP Deleted 7 pages + 7 components (2501 lines removed): - CentralPage, CloudflarePage, DdnsPage, DnsPage, LanDnsPage, CertificatesPage, IngressProxyPage - CentralComponent, CloudflareComponent, DdnsComponent, DnsComponent, LanDnsComponent, IngressProxyComponent, DnsmasqSection All hooks and API services kept unchanged — reused in new components. Type-check and production build pass. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
503
web/src/components/ServicesComponent.tsx
Normal file
503
web/src/components/ServicesComponent.tsx
Normal file
@@ -0,0 +1,503 @@
|
||||
import { useState } from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from './ui/card';
|
||||
import { Button } from './ui/button';
|
||||
import { Input, Label } from './ui';
|
||||
import { Alert, AlertDescription } from './ui/alert';
|
||||
import { Textarea } from './ui/textarea';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible';
|
||||
import {
|
||||
Globe,
|
||||
Loader2,
|
||||
AlertCircle,
|
||||
CheckCircle,
|
||||
Play,
|
||||
RotateCw,
|
||||
Plus,
|
||||
Trash2,
|
||||
X,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronUp,
|
||||
} from 'lucide-react';
|
||||
import { useConfig } from '../hooks';
|
||||
import { useHaproxy } from '../hooks/useHaproxy';
|
||||
import { useServices } from '../hooks/useServices';
|
||||
import { useCert } from '../hooks/useCert';
|
||||
import { useDdns } from '../hooks/useDdns';
|
||||
import type { HAProxyCustomRoute } from '../types';
|
||||
import type { RegisteredService } from '../services/api/networking';
|
||||
import { haproxyApi } from '../services/api/networking';
|
||||
|
||||
function StatusDot({ status, label }: { status: 'ok' | 'warning' | 'na'; label: string }) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 text-xs">
|
||||
{status === 'ok' && <CheckCircle className="h-3.5 w-3.5 text-green-500" />}
|
||||
{status === 'warning' && <AlertCircle className="h-3.5 w-3.5 text-amber-500" />}
|
||||
{status === 'na' && <span className="h-3.5 w-3.5 text-muted-foreground inline-flex items-center justify-center">—</span>}
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function getTypeBadge(backendType: string) {
|
||||
if (backendType === 'tcp-passthrough') return 'L4';
|
||||
return 'L7';
|
||||
}
|
||||
|
||||
function getTlsStatus(service: RegisteredService, certDomains: Set<string>): 'ok' | 'warning' | 'na' {
|
||||
if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'ok';
|
||||
if (service.tls === 'terminate') {
|
||||
return certDomains.has(service.domain) ? 'ok' : 'warning';
|
||||
}
|
||||
if (certDomains.has(service.domain)) return 'ok';
|
||||
return 'na';
|
||||
}
|
||||
|
||||
function getTlsLabel(service: RegisteredService, certDomains: Set<string>): string {
|
||||
if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') {
|
||||
return 'passthrough (backend handles)';
|
||||
}
|
||||
if (service.tls === 'terminate') {
|
||||
return certDomains.has(service.domain) ? 'terminate (cert provisioned)' : 'terminate (cert missing)';
|
||||
}
|
||||
return 'none';
|
||||
}
|
||||
|
||||
function getDdnsStatus(service: RegisteredService, ddnsDomains: Set<string>): 'ok' | 'na' {
|
||||
if (service.reach === 'public') {
|
||||
return ddnsDomains.has(service.domain) ? 'ok' : 'ok'; // if public, DDNS record should exist
|
||||
}
|
||||
return 'na';
|
||||
}
|
||||
|
||||
function getProxyLabel(service: RegisteredService): string {
|
||||
if (service.backend.type === 'tcp-passthrough') {
|
||||
return `HAProxy L4 SNI passthrough${service.subdomains ? ' + wildcard' : ''}`;
|
||||
}
|
||||
return `HAProxy L7 HTTP reverse proxy${service.subdomains ? ' + wildcard' : ''}`;
|
||||
}
|
||||
|
||||
interface ServiceRowProps {
|
||||
service: RegisteredService;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
certDomains: Set<string>;
|
||||
ddnsDomains: Set<string>;
|
||||
dnsmasqIp?: string;
|
||||
publicIp?: string;
|
||||
}
|
||||
|
||||
function ServiceRow({ service, isExpanded, onToggle, certDomains, ddnsDomains, dnsmasqIp, publicIp }: ServiceRowProps) {
|
||||
const tlsStatus = getTlsStatus(service, certDomains);
|
||||
const ddnsStatus = getDdnsStatus(service, ddnsDomains);
|
||||
const typeBadge = getTypeBadge(service.backend.type);
|
||||
|
||||
return (
|
||||
<div className="border-b last:border-b-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="w-full px-3 py-2.5 text-left hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<span className="font-mono text-sm font-medium truncate">{service.domain}</span>
|
||||
<Badge variant="outline" className="text-xs h-4 px-1 shrink-0">{typeBadge}</Badge>
|
||||
<Badge
|
||||
variant={service.reach === 'public' ? 'success' : 'default'}
|
||||
className="text-xs h-4 px-1 shrink-0"
|
||||
>
|
||||
{service.reach}
|
||||
</Badge>
|
||||
{service.subdomains && (
|
||||
<Badge variant="outline" className="text-xs h-4 px-1 shrink-0">*.sub</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<StatusDot status="ok" label="DNS" />
|
||||
<StatusDot status="ok" label="Proxy" />
|
||||
<StatusDot status={tlsStatus} label="TLS" />
|
||||
<StatusDot status={ddnsStatus} label="DDNS" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="px-3 pb-3 pt-1 ml-5 space-y-2">
|
||||
<div className="border rounded-lg divide-y text-sm">
|
||||
<div className="flex items-center justify-between px-3 py-1.5">
|
||||
<span className="text-muted-foreground">DNS (LAN)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs">
|
||||
address=/{service.domain}/{dnsmasqIp ?? '—'}
|
||||
</span>
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
{service.reach === 'public' && (
|
||||
<div className="flex items-center justify-between px-3 py-1.5">
|
||||
<span className="text-muted-foreground">DNS (Public)</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs">
|
||||
A record → {publicIp ?? '—'}
|
||||
</span>
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between px-3 py-1.5">
|
||||
<span className="text-muted-foreground">Proxy</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs">{getProxyLabel(service)}</span>
|
||||
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between px-3 py-1.5">
|
||||
<span className="text-muted-foreground">TLS</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs">{getTlsLabel(service, certDomains)}</span>
|
||||
{tlsStatus === 'ok' && <CheckCircle className="h-3.5 w-3.5 text-green-500" />}
|
||||
{tlsStatus === 'warning' && <AlertCircle className="h-3.5 w-3.5 text-amber-500" />}
|
||||
{tlsStatus === 'na' && <span className="h-3.5 w-3.5 text-muted-foreground inline-flex items-center justify-center">—</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground pt-1">
|
||||
<span>Backend: <span className="font-mono text-foreground">{service.backend.address}</span></span>
|
||||
<span>Source: <span className="text-foreground">{service.source}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServicesComponent() {
|
||||
const { config: globalConfig, updateConfig, isUpdating } = useConfig();
|
||||
const {
|
||||
status: haproxyStatus,
|
||||
isLoadingStatus: isHaproxyLoading,
|
||||
generate: generateHaproxy,
|
||||
isGenerating: isHaproxyGenerating,
|
||||
generateData: haproxyGenerateData,
|
||||
generateError: haproxyGenerateError,
|
||||
restart: restartHaproxy,
|
||||
isRestarting: isHaproxyRestarting,
|
||||
} = useHaproxy();
|
||||
const { services, isLoading: isServicesLoading } = useServices();
|
||||
const { status: certStatus } = useCert();
|
||||
const { status: ddnsStatus } = useDdns();
|
||||
|
||||
const [expandedDomain, setExpandedDomain] = useState<string | null>(null);
|
||||
const [showAddCustomRoute, setShowAddCustomRoute] = useState(false);
|
||||
const [newCustomRoute, setNewCustomRoute] = useState<HAProxyCustomRoute>({ name: '', port: 0, backend: '' });
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const [advancedConfig, setAdvancedConfig] = useState('');
|
||||
const [loadingAdvanced, setLoadingAdvanced] = useState(false);
|
||||
|
||||
// Build lookup sets for cross-referencing
|
||||
const certDomains = new Set<string>(
|
||||
(certStatus?.certs ?? []).filter(c => c.cert.exists).map(c => c.domain)
|
||||
);
|
||||
const ddnsDomains = new Set<string>(
|
||||
(ddnsStatus?.records ?? []).map(r => r.name)
|
||||
);
|
||||
|
||||
const dnsmasqIp = globalConfig?.cloud?.dnsmasq?.ip;
|
||||
const publicIp = ddnsStatus?.currentIP;
|
||||
|
||||
const showSuccess = (msg: string) => {
|
||||
setSuccessMessage(msg);
|
||||
setErrorMessage(null);
|
||||
setTimeout(() => setSuccessMessage(null), 5000);
|
||||
};
|
||||
|
||||
const showError = (msg: string) => {
|
||||
setErrorMessage(msg);
|
||||
setSuccessMessage(null);
|
||||
setTimeout(() => setErrorMessage(null), 8000);
|
||||
};
|
||||
|
||||
const handleShowAdvanced = async () => {
|
||||
if (!showAdvanced) {
|
||||
setLoadingAdvanced(true);
|
||||
try {
|
||||
const result = await haproxyApi.getConfig();
|
||||
setAdvancedConfig(result.content || '');
|
||||
} catch {
|
||||
setAdvancedConfig('# Could not load HAProxy config');
|
||||
}
|
||||
setLoadingAdvanced(false);
|
||||
}
|
||||
setShowAdvanced(!showAdvanced);
|
||||
};
|
||||
|
||||
const handleAddCustomRoute = async () => {
|
||||
if (!globalConfig || !newCustomRoute.name || !newCustomRoute.port || !newCustomRoute.backend) return;
|
||||
try {
|
||||
const existing = globalConfig.cloud?.haproxy?.customRoutes ?? [];
|
||||
await updateConfig({
|
||||
...globalConfig,
|
||||
cloud: {
|
||||
...globalConfig.cloud,
|
||||
haproxy: {
|
||||
...globalConfig.cloud?.haproxy,
|
||||
customRoutes: [...existing, newCustomRoute],
|
||||
},
|
||||
},
|
||||
});
|
||||
setNewCustomRoute({ name: '', port: 0, backend: '' });
|
||||
setShowAddCustomRoute(false);
|
||||
generateHaproxy();
|
||||
showSuccess(`Custom route "${newCustomRoute.name}" added`);
|
||||
} catch (e) {
|
||||
showError(`Failed to add route: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteCustomRoute = async (name: string) => {
|
||||
if (!globalConfig) return;
|
||||
try {
|
||||
const updated = (globalConfig.cloud?.haproxy?.customRoutes ?? []).filter(r => r.name !== name);
|
||||
await updateConfig({
|
||||
...globalConfig,
|
||||
cloud: {
|
||||
...globalConfig.cloud,
|
||||
haproxy: {
|
||||
...globalConfig.cloud?.haproxy,
|
||||
customRoutes: updated,
|
||||
},
|
||||
},
|
||||
});
|
||||
generateHaproxy();
|
||||
showSuccess(`Custom route "${name}" removed`);
|
||||
} catch (e) {
|
||||
showError(`Failed to delete route: ${e instanceof Error ? e.message : String(e)}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page header */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Globe className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold">Services</h2>
|
||||
<p className="text-muted-foreground">Registered domains and their networking status</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alerts */}
|
||||
{successMessage && (
|
||||
<Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/20">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-700 dark:text-green-300">{successMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{errorMessage && (
|
||||
<Alert variant="error">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Service List */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Registered Services</CardTitle>
|
||||
{isHaproxyLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<Badge variant={haproxyStatus?.status === 'active' ? 'success' : 'warning'} className="gap-1">
|
||||
{haproxyStatus?.status === 'active' && <CheckCircle className="h-3 w-3" />}
|
||||
{haproxyStatus?.status === 'active' ? 'Active' : haproxyStatus?.status ?? 'Stopped'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isServicesLoading ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />Loading services...
|
||||
</div>
|
||||
) : services.length > 0 ? (
|
||||
<div className="border rounded-lg text-sm">
|
||||
{services.map(s => (
|
||||
<ServiceRow
|
||||
key={s.domain}
|
||||
service={s}
|
||||
isExpanded={expandedDomain === s.domain}
|
||||
onToggle={() => setExpandedDomain(expandedDomain === s.domain ? null : s.domain)}
|
||||
certDomains={certDomains}
|
||||
ddnsDomains={ddnsDomains}
|
||||
dnsmasqIp={dnsmasqIp}
|
||||
publicIp={publicIp}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
No services registered. Services appear here when Wild Cloud or Wild Works registers them.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Custom TCP Routes */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Custom TCP Routes</CardTitle>
|
||||
<Button size="sm" variant="outline" onClick={() => setShowAddCustomRoute(!showAddCustomRoute)} className="gap-1">
|
||||
<Plus className="h-3 w-3" />
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{showAddCustomRoute && (
|
||||
<Card className="p-3 border-dashed">
|
||||
<div className="grid grid-cols-3 gap-2 mb-2">
|
||||
<div>
|
||||
<Label className="text-xs">Name</Label>
|
||||
<Input
|
||||
value={newCustomRoute.name}
|
||||
onChange={e => setNewCustomRoute(r => ({ ...r, name: e.target.value }))}
|
||||
placeholder="e.g. civil_ssh"
|
||||
className="mt-1 text-xs font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">Listen Port</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={newCustomRoute.port || ''}
|
||||
onChange={e => setNewCustomRoute(r => ({ ...r, port: parseInt(e.target.value) || 0 }))}
|
||||
placeholder="2222"
|
||||
className="mt-1 text-xs font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">Backend (host:port)</Label>
|
||||
<Input
|
||||
value={newCustomRoute.backend}
|
||||
onChange={e => setNewCustomRoute(r => ({ ...r, backend: e.target.value }))}
|
||||
placeholder="192.168.8.10:22"
|
||||
className="mt-1 text-xs font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button variant="outline" size="sm" onClick={() => setShowAddCustomRoute(false)}>
|
||||
<X className="h-3 w-3 mr-1" />Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleAddCustomRoute}
|
||||
disabled={!newCustomRoute.name || !newCustomRoute.port || !newCustomRoute.backend || isUpdating}
|
||||
>
|
||||
{isUpdating ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Check className="h-3 w-3 mr-1" />}
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{(globalConfig?.cloud?.haproxy?.customRoutes ?? []).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground">No custom routes configured.</p>
|
||||
) : (
|
||||
<div className="border rounded-lg divide-y text-xs">
|
||||
{(globalConfig?.cloud?.haproxy?.customRoutes ?? []).map(r => (
|
||||
<div key={r.name} className="flex items-center justify-between px-3 py-1.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono font-medium">{r.name}</span>
|
||||
<span className="text-muted-foreground font-mono">:{r.port} → {r.backend}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 w-6 p-0 text-muted-foreground hover:text-red-500"
|
||||
onClick={() => handleDeleteCustomRoute(r.name)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Advanced */}
|
||||
<Collapsible open={showAdvanced} onOpenChange={handleShowAdvanced}>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CollapsibleTrigger asChild>
|
||||
<button type="button" className="flex items-center justify-between w-full text-left">
|
||||
<CardTitle>Advanced</CardTitle>
|
||||
{loadingAdvanced ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
) : showAdvanced ? (
|
||||
<ChevronUp className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="space-y-4 pt-0">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => generateHaproxy()} disabled={isHaproxyGenerating} className="gap-2">
|
||||
{isHaproxyGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />}
|
||||
Generate & Apply HAProxy
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => restartHaproxy()} disabled={isHaproxyRestarting} className="gap-2">
|
||||
{isHaproxyRestarting ? <Loader2 className="h-4 w-4 animate-spin" /> : <RotateCw className="h-4 w-4" />}
|
||||
Restart HAProxy
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{haproxyGenerateData && (
|
||||
<Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/20">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-700 dark:text-green-300">
|
||||
{haproxyGenerateData.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{haproxyGenerateError && (
|
||||
<Alert variant="error">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{(haproxyGenerateError as Error).message}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<span className="text-sm font-medium">Generated config file</span>
|
||||
<Textarea
|
||||
value={advancedConfig}
|
||||
readOnly
|
||||
className="font-mono text-xs min-h-[300px]"
|
||||
placeholder="# haproxy configuration"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user