2.3 KiB
2.3 KiB
Network Dashboard + Router Detail Patterns
Network Dashboard Page
Summary cards row at top:
- Total Routers (count)
- Online (count + percentage badge)
- Alerts (count + "Needs attention" badge)
- Avg Heartbeat (ms)
Wide router table with 9 columns: Status | Router | Customer | Model | Uptime | Tunnel | Installed | Latest | Last Seen
Firmware columns use color badges:
- Green badge = router is current
- Amber badge = update available
Status dots: green=Online, amber=Alert (missed heartbeat), red=Offline (no heartbeat >60m), gray=Pending (script sent, not yet installed)
Right-rail panels:
- Recent Alerts — color-coded rows with amber (warning) and red (critical) backgrounds, timestamp relative
- Top Bandwidth — horizontal progress bars with Mbps labels
- Quick Actions — Run command, Backup config, Reboot router, Update firmware, Onboard new (blue link)
Header has filter buttons (All, Online, Offline, Alert) and search input.
Router Detail Page
Summary cards row: Uptime, CPU (with mini progress bar), RAM (with mini progress bar), Firmware (with update badge if outdated), Temperature.
Six tabs across the top:
| Tab | Default? | Content |
|---|---|---|
| DNS | ✅ Yes | Summary cards (total queries, unique domains, active clients, blocked). Two-column top-domains and top-clients panels. Searchable query log table: Time, Client IP, Domain, Type (A/AAAA badge), Response IP, Client Hostname. Time range filter. Client filter dropdown. "View all" link. |
| Network | No | DHCP leases (hostname, IP, MAC, reserved/dynamic badge, active/offline/expired status, lease time, Edit/Release/Reserve action buttons). Interfaces table (name, IP, up/down status, TX, RX). Add Reservation form at bottom (hostname, IP, MAC, comment). |
| Bandwidth | No | Time period selector (hour, 24h, 7d, 30d, 12mo). Chart placeholder. Four period summary cards (hourly, daily, monthly, yearly with up/down breakdown). |
| Firewall | No | NAT rules, filter rules, port forwards |
| Logs | No | Real-time log feed |
| Config | No | Backup, restore, firmware management |
DHCP table: Reserved = purple badge. Dynamic = blue badge. Status dots: green=active, gray=offline, gray=expired.
Files
- mockup:
/root/portal-mockup/network-dashboard.html - mockup:
/root/portal-mockup/router-detail.html