Paul Payne
a9249e32d8
Audit of current Wild Central UI navigation and page structure. Identifies 5 problems (DNS triple redundancy, scattered Cloudflare, jargon naming, arbitrary ordering, empty overview) and proposes a restructured 9-item navigation with better grouping. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
139 lines
5.3 KiB
Markdown
139 lines
5.3 KiB
Markdown
# Wild Central UI Refactor
|
|
|
|
## Current Problems
|
|
|
|
### 1. DNS is three overlapping pages
|
|
|
|
- `/central/dns` — hybrid view showing both LAN DNS (dnsmasq) and DDNS (Cloudflare A records)
|
|
- `/central/lan-dns` — duplicates the LAN DNS portion of `/dns`
|
|
- `/central/ddns` — separate DDNS page
|
|
|
|
A user configuring DNS doesn't know where to go. Three pages, overlapping scope, no clear ownership.
|
|
|
|
### 2. Cloudflare is scattered across three pages
|
|
|
|
The Cloudflare API token is needed by DDNS, certificates, and tunnels — but each is configured in a different section. First-time setup requires hopping between Cloudflare, DDNS, and Certificates pages.
|
|
|
|
### 3. "Ingress Proxy" is jargon
|
|
|
|
Shows registered services and HAProxy config. "Ingress" is Kubernetes terminology. Most users think "reverse proxy" or just "services." The registered services display deserves to be the primary view — that's what consumers (Wild Cloud, Wild Works) care about, not HAProxy stats.
|
|
|
|
### 4. The sidebar order is arbitrary
|
|
|
|
No grouping by function. DNS next to Ingress next to Firewall next to VPN. A user doing initial setup can't follow a logical flow.
|
|
|
|
### 5. Overview is nearly empty
|
|
|
|
Just operator email and a restart button. Should be a status dashboard: are all daemons running? How many services registered? Any certs expiring? Any security alerts?
|
|
|
|
## Current Navigation (9 items, flat)
|
|
|
|
```
|
|
Central
|
|
├── Overview → operator email, restart button
|
|
├── Cloudflare → API token verification
|
|
├── DNS → LAN DNS + DDNS hybrid (confusing)
|
|
├── Ingress Proxy → HAProxy + registered services (jargon)
|
|
├── Firewall → nftables rules
|
|
├── VPN → WireGuard server + peers
|
|
├── Certificates → TLS cert provisioning
|
|
├── CrowdSec → intrusion detection
|
|
└── DHCP → DHCP server + leases
|
|
```
|
|
|
|
Hidden/redundant pages (routed but not in sidebar):
|
|
- `/central/lan-dns` — duplicate of DNS page
|
|
- `/central/ddns` — separate DDNS page
|
|
|
|
## Proposed Navigation (9 items, better organized)
|
|
|
|
```
|
|
Central
|
|
├── Dashboard → system health, daemon status, registered services count, cert warnings
|
|
├── Services → registered services from Wild Cloud/Works (the primary consumer view)
|
|
├── DNS → LAN DNS config (dnsmasq only, one page)
|
|
├── Cloudflare → token + DDNS records + tunnel status (all in one place)
|
|
├── Certificates → TLS cert status and provisioning
|
|
├── Firewall → nftables rules
|
|
├── VPN → WireGuard server + peers
|
|
├── CrowdSec → security alerts + decisions
|
|
└── DHCP → DHCP server config + leases
|
|
```
|
|
|
|
## What Changes
|
|
|
|
### Overview → Dashboard
|
|
|
|
Replace the empty overview with a status dashboard showing:
|
|
- All daemon statuses (dnsmasq, haproxy, nftables, wireguard, crowdsec) — green/red
|
|
- Registered services count + breakdown by source
|
|
- TLS cert warnings (expiring soon, missing)
|
|
- Recent security alerts (from CrowdSec)
|
|
- DDNS sync status
|
|
- Quick links to configure missing items
|
|
|
|
### Ingress Proxy → Services
|
|
|
|
Rename and restructure:
|
|
- Primary view: list of registered service domains with status, reach, subdomains indicator
|
|
- Each service row shows: domain, backend, type (L4/L7), reach (internal/public), TLS mode
|
|
- Collapsible "Advanced" section for HAProxy raw config, stats, generate/restart
|
|
- Remove HAProxy jargon from the primary view
|
|
|
|
### DNS consolidated
|
|
|
|
Kill `/central/lan-dns` (duplicate) and `/central/ddns` (moved to Cloudflare):
|
|
- One DNS page showing dnsmasq config: listen address, upstream servers, active DNS entries
|
|
- DHCP stays separate (it's dnsmasq too, but different concern)
|
|
- DDNS moves to Cloudflare page (it's a Cloudflare API concern)
|
|
|
|
### Cloudflare becomes one-stop shop
|
|
|
|
Consolidate:
|
|
- API token management (from current Cloudflare page)
|
|
- DDNS records (from current DDNS page)
|
|
- Tunnel status (currently missing from UI entirely)
|
|
- All three share the same Cloudflare token — configure once, see all effects
|
|
|
|
### First-time user flow
|
|
|
|
The navigation should support a linear setup flow:
|
|
|
|
1. **Dashboard** — see what's running, what needs attention
|
|
2. **Cloudflare** — set API token (enables DDNS + certs)
|
|
3. **DNS** — verify LAN DNS is configured
|
|
4. **Certificates** — provision TLS certs
|
|
5. **Services** — registered services appear as Wild Cloud/Works connect
|
|
|
|
## Pages to delete
|
|
|
|
- `LanDnsPage.tsx` — duplicate, fold into DNS
|
|
- `DdnsPage.tsx` — fold into Cloudflare
|
|
- `LanDnsComponent.tsx` — duplicate component
|
|
|
|
## Pages to rename
|
|
|
|
- `CentralPage.tsx` → `DashboardPage.tsx`
|
|
- `IngressProxyPage.tsx` → `ServicesPage.tsx`
|
|
- `IngressProxyComponent.tsx` → `ServicesComponent.tsx`
|
|
- `CentralComponent.tsx` → `DashboardComponent.tsx`
|
|
|
|
## Sidebar items to rename
|
|
|
|
- "Overview" → "Dashboard"
|
|
- "Ingress Proxy" → "Services"
|
|
|
|
## Sidebar icons
|
|
|
|
| Item | Current Icon | Proposed Icon |
|
|
|------|-------------|---------------|
|
|
| Dashboard | Server | LayoutDashboard |
|
|
| Services | Network | Globe |
|
|
| DNS | Router | Router (keep) |
|
|
| Cloudflare | Cloud | Cloud (keep) |
|
|
| Certificates | ShieldCheck | ShieldCheck (keep) |
|
|
| Firewall | Shield | Shield (keep) |
|
|
| VPN | Lock | Lock (keep) |
|
|
| CrowdSec | ShieldAlert | ShieldAlert (keep) |
|
|
| DHCP | Wifi | Wifi (keep) |
|