Add top tabs + telemetry Dashboard + animated edge glow

Restructure the UI behind top-level tabs (Dashboard / ONU / OLT) so more
features have room to land. showView() now drives the active tab via a
VIEW_TO_TAB map, so sub-views (campaign/verify) keep the ONU tab lit.
Tabs appear on login (landing on Dashboard) and hide on logout.

Dashboard: a read-only network telemetry view modeled on the PONGo iOS
app's DashboardViewModel. New api:dashboardStats aggregates, all in
main.js (renderer just formats):
- counts: ONUs, OLTs, controllers (controllers best-effort via
  /v3/controllers/configs/)
- aggregate traffic (OLT TX BW = downstream, RX BW = upstream)
- health: OLTs with laser off; abnormal-Rx count (rx < -28 || > -10)
- ONU registration-state breakdown (clicking a state deep-links to the
  ONU tab pre-filtered)
- opt-in detailed scan: per-ONU optical + FEC-health distribution
fmtBps is a port of the iOS Format.bps.

Edge glow: #edge-glow draws a neon conic-gradient beam masked to a 3px
border ring and spins an @property --beam-angle 0->360deg, so a glow
travels around the screen edge. Honors prefers-reduced-motion.

mcms-api: add listAllControllerConfigs.
Docs: CLAUDE.md section 15 + README + IPC table.

Verified: npm run check passes; rendered the Dashboard + tabs + edge beam
offscreen (beam frozen on the right edge to confirm it follows the border).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Jon Vanvik 2026-06-23 13:45:24 +02:00
parent 7cc9649f03
commit 9106e5a071
8 changed files with 533 additions and 12 deletions

View file

@ -12,12 +12,13 @@ is the engineering counterpart.
## 1. What this app does
Electron desktop client for two bulk operations against **Ciena
MCMS 6.2** PON Manager:
Electron desktop client for operating a **Ciena MCMS 6.2** PON Manager
fleet. Top-level **tabs** (Dashboard / ONU / OLT) switch between:
1. **Bulk ONU firmware upgrades** (the original purpose).
2. **Bulk OLT PON flooding-mode changes** (private↔auto on NNI services —
see §14).
- **Dashboard** — read-only network telemetry (see §15).
- **ONU** — the fleet table + firmware-upgrade campaign + verify flows
(the original purpose: bulk ONU firmware upgrades).
- **OLT** — bulk OLT PON flooding-mode changes (private↔auto, see §14).
Reference deployment: GNXS / Tibit MicroPlug ONUs running Interos Everest
(EV051xxR / EV052xxR firmware family) behind Tibit OLTs.
@ -122,6 +123,7 @@ stream progress events back to the renderer.
| `api:executeBulkTask` | Procedure 8 — single AUTO-TASK-CFG | — |
| `api:getTaskConfig` / `api:getUpgradeStatus` | poll helpers | — |
| `api:deleteOnus` | bulk delete (CFG + best-effort STATE) | `delete:progress` |
| `api:dashboardStats` | network telemetry aggregates (Dashboard tab) | — |
| `api:listOlts` | OLT-CFG list + per-OLT NNI flood-mode summary | — |
| `api:executeFloodChange` | bulk PON flooding-mode flip (GET→plan→PUT) | `olt-flood:progress` |
| `api:fetchFecHealth` | pre-flight FEC pre/post + optical | `fec:progress` |
@ -721,4 +723,55 @@ entries pass through untouched.
---
## 15. Tabbed navigation & Dashboard
### Tabs
The topbar holds a `<nav id="tabs">` (Dashboard / ONU / OLT), hidden until
login. Navigation goes through the existing `showView(id)` — it now also
sets the active tab via the `VIEW_TO_TAB` map, so sub-views keep the right
tab lit (campaign/verify → ONU). To add a tab: add a `.tab` button with
`data-view="#view-x"` in `index.html`, a `#view-x` section, and a
`VIEW_TO_TAB` entry. Login lands on Dashboard; logout hides the tabs and
clears `state.dashboard`.
### Dashboard telemetry
Modeled on the PONGo iOS app's `DashboardViewModel`
(`ssh://…/Svorka/PONGo_ios.git`). One IPC call, `api:dashboardStats`,
returns aggregates computed in `main.js` — the renderer only formats them.
**Light path (default)** — everything from the small OLT-STATE docs, no
per-ONU fetches:
- OLT count; ONU total + registration-state breakdown (the same
`OLT-STATE["ONU States"]` buckets as `api:listFleet`, Procedure 2).
- Aggregate traffic — **OLT TX BW = downstream, RX BW = upstream**, summed
over `STATS["OLT-PON"]["TX|RX BW Ethernet Rate bps"]`.
- OLTs with laser off — `OLT["Laser Shutdown"] != "Laser ON"`.
- Controllers count via `listAllControllerConfigs` (`/v3/controllers/
configs/`) — **best-effort**, wrapped in try/catch (returns `null` if the
build doesn't expose it; UI shows "—").
**Detailed path (`extraStats`, opt-in toggle)** — pulls every ONU-STATE
(heavy, like a fleet load) to add: abnormal-Rx count (`rx < 28 || rx >
10` dBm, the iOS `OpticalThreshold.rxAbnormal` rule) and the FEC-health
distribution via `extractOnuHealth`.
The ONU-state rows drill down: clicking one sets `#filter-status` and jumps
to the ONU tab (loading the fleet if needed). `fmtBps` in `app.js` is a
port of the iOS `Format.bps`.
### Animated edge glow
`#edge-glow` is a fixed, pointer-events-none full-viewport element. A
`conic-gradient(from var(--beam-angle), …)` with a white-hot core is masked
to just the 3px border ring (the standard `mask` + `mask-composite:
exclude` border trick) and animated by spinning the `@property
--beam-angle` 0→360°, so a neon beam travels around the screen edge.
Respects `prefers-reduced-motion`. z-index sits below the scanline overlay
(9999) and modals (10000).
---
*Last updated: 2026-06-23.*