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:
parent
7cc9649f03
commit
9106e5a071
8 changed files with 533 additions and 12 deletions
63
CLAUDE.md
63
CLAUDE.md
|
|
@ -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.*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue