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

Better UX on domain forms.

Browse Source
This commit is contained in:
Paul Payne
2026-07-11 23:50:24 +00:00
parent a48d955dc0
commit 994c9fbfdf
2 changed files with 148 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/src/components/domains/DomainTopology.tsx
View File

@@ -1,5 +1,4 @@
import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
import { Link } from 'react-router';
import {
ReactFlow, Handle, Position, applyNodeChanges,
type Node, type Edge, type NodeProps, type NodeChange, type ReactFlowInstance,
@@ -169,23 +168,17 @@ function FlowNode({ data }: NodeProps) {
<>
{leftHandle}
<div className="flex flex-col gap-1">
<Link to="/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="/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>
<TopologyNode
label="Firewall"
status={fwOk ? 'ok' : 'na'}
icon={<Shield className="h-3 w-3" />}
/>
<TopologyNode
label="CrowdSec"
sublabel={isL4 ? 'IP only' : 'HTTP + IP'}
status={csOk ? 'ok' : 'na'}
icon={<ShieldAlert className="h-3 w-3" />}
/>
</div>
{rightHandle}
</>
@@ -317,15 +310,12 @@ function FlowNode({ data }: NodeProps) {
return (
<>
{leftHandle}
<Link to="/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>
<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" />}
/>
{rightHandle}
</>
);
@@ -336,16 +326,13 @@ function FlowNode({ data }: NodeProps) {
return (
<>
{leftHandle}
<Link to="/" className="nopan nodrag" style={{ pointerEvents: 'all' }} onPointerDown={(e) => e.stopPropagation()}>
<TopologyNode
label="Router"
sublabel={ports}
status="na"
icon={<Router className="h-3 w-3" />}
className="hover:border-primary/40"
tooltip="Your LAN router port-forwards these ports to Wild Central. See Dashboard for setup."
/>
</Link>
<TopologyNode
label="Router"
sublabel={ports}
status="na"
icon={<Router className="h-3 w-3" />}
tooltip="Your LAN router port-forwards these ports to Wild Central"
/>
{rightHandle}
</>
);