53 lines
2.6 KiB
Markdown
53 lines
2.6 KiB
Markdown
# ADR-0010 · SYNOPSIS as the landing view
|
|
|
|
**Status**: accepted
|
|
**Date**: 2026-05
|
|
|
|
## Context
|
|
|
|
The original landing view of the operator console was an **OVERVIEW** with four cards (WAN, Cell, Cameras, GitOps) showing key-value pairs, a list of services, and action buttons. It was functional but text-heavy and forgettable.
|
|
|
|
Two observations:
|
|
|
|
1. **First impression matters disproportionately**. Demo viewers form their opinion of the product in the first 5 seconds.
|
|
2. **LCARS as a visual language is most expressive when used for live system diagrams** — exactly the SCADA pattern of industrial UIs. Star Trek's "Engineering · Warp Core Status" screens were live diagrams, not key-value tables.
|
|
|
|
A landing view that's a SCADA-style live diagram does two things at once: shows status comprehensively and demonstrates the visual language at full strength.
|
|
|
|
## Decision
|
|
|
|
Replace OVERVIEW with **SYNOPSIS** — a SCADA-style live diagram of the entire site.
|
|
|
|
The view contains:
|
|
|
|
- **Topology hardware**: cameras (cabled, WiFi, HaLow), router, Cell, optional Core, hub.
|
|
- **Topology de red**: VLANs as colored halos around components, links as lines, VPN tunnels distinct.
|
|
- **Servicios software**: small chips inside each device showing dnsmasq, mosquitto, tailscaled, frigate, enricher, etc., each with a status pulse.
|
|
- **Flujos de datos en tiempo real**: animated dashed lines (CSS `stroke-dashoffset` animation) showing RTSP, MQTT, bridge traffic.
|
|
- **Indicadores de capacity / health**: row of 8 gauges at the bottom (CPU R, CPU C, NPU, DISK, ↓WAN, ↑WAN, RTT HUB, FPS Σ).
|
|
- **Side panel**: active alerts + quick stats + quick actions to other views.
|
|
|
|
Pill in the rail: `00 · SYNOPSIS` (replaces the old `10 · OVERVIEW`).
|
|
|
|
## Consequences
|
|
|
|
**Good**:
|
|
- First impression is "alien tech, this is different from anything else".
|
|
- Operator sees system state at a glance, in spatial layout, without reading.
|
|
- Animations communicate liveness without the operator having to verify "is this real-time or stale?".
|
|
|
|
**Bad / trade-offs**:
|
|
- More complex to implement than a card grid.
|
|
- Animations can be visually busy if not tuned. Mitigated by using sparse, slow animations (1.6s+ per cycle) and no flashy color shifts.
|
|
- SVG layout is hand-tuned, harder to make truly responsive than CSS grid.
|
|
|
|
## Alternatives considered
|
|
|
|
- **Keep OVERVIEW with cards**: rejected for impact reasons.
|
|
- **Animated dashboard with chart.js / d3 grids**: feels like a generic monitoring tool, doesn't carry the brand.
|
|
- **Photo-realistic 3D rendering of the rack**: too far in the other direction, hard to maintain.
|
|
|
|
## See also
|
|
|
|
- `mockups/index.html` — open the file and the SYNOPSIS view is the default.
|