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.*
|
||||
|
|
|
|||
15
README.md
15
README.md
|
|
@ -1,12 +1,15 @@
|
|||
# PON Fleet Upgrader
|
||||
|
||||
An Electron desktop app for bulk operations against a **Ciena
|
||||
MicroClimate Management System (MCMS) 6.2** PON Manager. It does two
|
||||
things:
|
||||
An Electron desktop app for operating a **Ciena MicroClimate Management
|
||||
System (MCMS) 6.2** PON Manager. Top tabs split it into:
|
||||
|
||||
1. **Bulk ONU firmware upgrades** (below).
|
||||
2. **Bulk OLT PON flooding-mode changes** (private↔auto on NNI services —
|
||||
see "OLT PON flooding mode" below).
|
||||
1. **Dashboard** — read-only network telemetry: ONU/OLT/controller counts,
|
||||
aggregate up/down traffic, health (abnormal Rx, lasers off), and ONU
|
||||
registration-state breakdown (with an opt-in per-ONU Rx/FEC scan).
|
||||
Clicking a state jumps to the ONU tab pre-filtered.
|
||||
2. **ONU** — the fleet table plus **bulk ONU firmware upgrades** (below).
|
||||
3. **OLT** — **bulk OLT PON flooding-mode changes** (private↔auto on NNI
|
||||
services — see "OLT PON flooding mode" below).
|
||||
|
||||
## ONU firmware upgrades
|
||||
|
||||
|
|
|
|||
113
main.js
113
main.js
|
|
@ -706,3 +706,116 @@ ipcMain.handle('api:executeFloodChange', async (event, opts) => {
|
|||
return { ok: false, error: toWireError(err) };
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Dashboard telemetry --------------------------------------------
|
||||
|
||||
function toNum(v) {
|
||||
if (typeof v === 'number') return Number.isFinite(v) ? v : null;
|
||||
if (typeof v === 'string' && v.trim() !== '' && Number.isFinite(Number(v))) return Number(v);
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Network-wide telemetry for the Dashboard tab, modeled on the PONGo iOS
|
||||
* app's DashboardViewModel. The "light" path is cheap — everything below
|
||||
* comes from the small OLT-STATE docs:
|
||||
* - OLT count
|
||||
* - ONU total + registration-state breakdown (OLT-STATE "ONU States"
|
||||
* buckets, dev guide Procedure 2)
|
||||
* - aggregate traffic: OLT TX BW = downstream, RX BW = upstream
|
||||
* (STATS["OLT-PON"]["TX|RX BW Ethernet Rate bps"])
|
||||
* - OLTs with the laser shut down (OLT["Laser Shutdown"] != "Laser ON")
|
||||
* Controllers count is best-effort (not on every build).
|
||||
*
|
||||
* The heavy per-ONU optical/FEC scan (pull every ONU-STATE) runs only
|
||||
* when `extraStats` is set — same opt-in as the iOS "Rx scan" toggle.
|
||||
*/
|
||||
ipcMain.handle('api:dashboardStats', async (_ev, opts) => {
|
||||
try {
|
||||
const c = requireClient();
|
||||
const extraStats = !!(opts && opts.extraStats);
|
||||
|
||||
const olts = await c.listAllOltStates();
|
||||
const oltCount = olts.length;
|
||||
|
||||
// Registration map: onuId -> bucket. Prefer a non-Registered bucket on
|
||||
// duplicates (the interesting signal), matching api:listFleet.
|
||||
const stateByOnu = new Map();
|
||||
for (const olt of olts) {
|
||||
const buckets = olt?.['ONU States'] || {};
|
||||
for (const [bucket, ids] of Object.entries(buckets)) {
|
||||
if (!Array.isArray(ids)) continue;
|
||||
for (const id of ids) {
|
||||
const existing = stateByOnu.get(id);
|
||||
if (!existing || existing === 'Registered') stateByOnu.set(id, bucket);
|
||||
}
|
||||
}
|
||||
}
|
||||
const onuTotal = stateByOnu.size;
|
||||
const stateCounts = {};
|
||||
for (const s of stateByOnu.values()) stateCounts[s] = (stateCounts[s] || 0) + 1;
|
||||
const onuCounts = Object.entries(stateCounts)
|
||||
.map(([state, count]) => ({ state, count }))
|
||||
.sort((a, b) => b.count - a.count);
|
||||
|
||||
// Aggregate traffic + laser state from OLT-STATE.
|
||||
let downBps = 0, upBps = 0, trafficSeen = false;
|
||||
const lasersOff = [];
|
||||
for (const olt of olts) {
|
||||
const pon = olt?.STATS?.['OLT-PON'] || {};
|
||||
const tx = toNum(pon['TX BW Ethernet Rate bps']);
|
||||
const rx = toNum(pon['RX BW Ethernet Rate bps']);
|
||||
if (tx !== null) { downBps += tx; trafficSeen = true; }
|
||||
if (rx !== null) { upBps += rx; trafficSeen = true; }
|
||||
const laser = olt?.OLT?.['Laser Shutdown'];
|
||||
if (typeof laser === 'string' && laser.toLowerCase() !== 'laser on') {
|
||||
lasersOff.push({ oltId: olt._id, name: olt?.OLT?.Name || '', laser });
|
||||
}
|
||||
}
|
||||
|
||||
// Controllers — best-effort (some builds don't expose this).
|
||||
let controllerCount = null;
|
||||
try {
|
||||
controllerCount = (await c.listAllControllerConfigs()).length;
|
||||
} catch (_) { controllerCount = null; }
|
||||
|
||||
// Opt-in heavy scan: every ONU-STATE for optical + FEC health.
|
||||
let optical = { available: false, abnormalRx: [], abnormalRxCount: 0 };
|
||||
let fecCounts = null;
|
||||
if (extraStats) {
|
||||
const states = await c.listAllOnuStates();
|
||||
const RX_LOW = -28, RX_HIGH = -10; // PONGo OpticalThreshold.rxAbnormal
|
||||
const abnormalRx = [];
|
||||
let available = false;
|
||||
fecCounts = { ok: 0, pre: 0, post: 0, buggy: 0, nodata: 0, error: 0 };
|
||||
for (const st of states) {
|
||||
const health = extractOnuHealth(st);
|
||||
if (fecCounts[health.flag] !== undefined) fecCounts[health.flag] += 1;
|
||||
const rx = health.optical && typeof health.optical.rx === 'number' ? health.optical.rx : null;
|
||||
if (rx !== null) {
|
||||
available = true;
|
||||
if (rx < RX_LOW || rx > RX_HIGH) {
|
||||
abnormalRx.push({ onuId: st._id, rx, name: st?.ONU?.Name || '' });
|
||||
}
|
||||
}
|
||||
}
|
||||
optical = { available, abnormalRx, abnormalRxCount: abnormalRx.length };
|
||||
}
|
||||
|
||||
return {
|
||||
ok: true,
|
||||
data: {
|
||||
onuTotal, oltCount, controllerCount,
|
||||
onuCounts,
|
||||
traffic: trafficSeen ? { downBps, upBps } : null,
|
||||
lasersOff,
|
||||
optical,
|
||||
fecCounts,
|
||||
extraStats,
|
||||
sampledAt: new Date().toISOString(),
|
||||
},
|
||||
};
|
||||
} catch (err) {
|
||||
return { ok: false, error: toWireError(err) };
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ contextBridge.exposeInMainWorld('api', {
|
|||
|
||||
deleteOnus: (opts) => call('api:deleteOnus', opts),
|
||||
|
||||
dashboardStats: (opts) => call('api:dashboardStats', opts),
|
||||
|
||||
listOlts: (opts) => call('api:listOlts', opts),
|
||||
executeFloodChange: (opts) => call('api:executeFloodChange', opts),
|
||||
|
||||
|
|
|
|||
141
renderer/app.css
141
renderer/app.css
|
|
@ -415,3 +415,144 @@ button.danger:hover:not(:disabled) {
|
|||
}
|
||||
.modal-type-label { display: block; }
|
||||
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; }
|
||||
|
||||
/* -------- Animated neon edge glow (beam travels around the border) -------- */
|
||||
@property --beam-angle {
|
||||
syntax: "<angle>";
|
||||
initial-value: 0deg;
|
||||
inherits: false;
|
||||
}
|
||||
#edge-glow {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9998;
|
||||
pointer-events: none;
|
||||
padding: 3px; /* thickness of the glowing border band */
|
||||
background: conic-gradient(
|
||||
from var(--beam-angle),
|
||||
transparent 0deg,
|
||||
transparent 38deg,
|
||||
var(--cyan) 64deg,
|
||||
#ffffff 90deg,
|
||||
var(--neon) 116deg,
|
||||
transparent 142deg,
|
||||
transparent 360deg
|
||||
);
|
||||
/* Keep only the padding ring (border band); punch out the interior. */
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
mask-composite: exclude;
|
||||
filter: drop-shadow(0 0 8px var(--neon)) drop-shadow(0 0 22px var(--cyan));
|
||||
animation: beamspin 7s linear infinite;
|
||||
}
|
||||
@keyframes beamspin { to { --beam-angle: 360deg; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#edge-glow { animation: none; }
|
||||
}
|
||||
|
||||
/* -------- Top tabs -------- */
|
||||
.tabs { display: flex; gap: 4px; margin-left: 18px; align-self: stretch; align-items: flex-end; }
|
||||
.tabs .tab {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
border-radius: 7px 7px 0 0;
|
||||
color: var(--fg-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 8px 18px;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tabs .tab:hover:not(.active) {
|
||||
color: var(--neon);
|
||||
border-color: transparent;
|
||||
text-shadow: var(--glow-neon);
|
||||
box-shadow: none;
|
||||
}
|
||||
.tabs .tab.active {
|
||||
color: var(--neon);
|
||||
border-color: var(--neon);
|
||||
background: rgba(33, 200, 255, 0.1);
|
||||
text-shadow: var(--glow-neon);
|
||||
box-shadow: 0 0 12px rgba(33, 200, 255, 0.45), inset 0 0 14px rgba(33, 200, 255, 0.12);
|
||||
}
|
||||
|
||||
/* -------- Dashboard -------- */
|
||||
.dash-wrap { overflow: hidden; }
|
||||
.dash-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
}
|
||||
.dash-toggle { text-transform: none; letter-spacing: 0; color: var(--fg-dim); font-size: 12px; }
|
||||
|
||||
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||||
.tile {
|
||||
background: linear-gradient(180deg, rgba(33, 200, 255, 0.07), transparent 70%), var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
box-shadow: inset 0 0 26px rgba(33, 200, 255, 0.05);
|
||||
}
|
||||
.tile .tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--fg-dim); }
|
||||
.tile .tile-value { font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--neon); text-shadow: var(--glow-neon-strong); font-variant-numeric: tabular-nums; }
|
||||
.tile .tile-sub { font-size: 11px; color: var(--fg-dim); }
|
||||
.tile.tile-teal .tile-value { color: var(--cyan); text-shadow: var(--glow-cyan); }
|
||||
.tile.tile-indigo .tile-value { color: var(--blue); text-shadow: 0 0 10px rgba(42, 123, 255, 0.75), 0 0 22px rgba(42, 123, 255, 0.4); }
|
||||
|
||||
.dash-section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.dash-section > h3 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--neon);
|
||||
text-shadow: var(--glow-neon);
|
||||
}
|
||||
.dash-card {
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 2px 14px;
|
||||
box-shadow: inset 0 0 22px rgba(33, 200, 255, 0.04);
|
||||
}
|
||||
.dash-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 2px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.dash-row:last-child { border-bottom: none; }
|
||||
.dash-row.tappable { cursor: pointer; }
|
||||
.dash-row.tappable:hover { background: rgba(33, 200, 255, 0.06); }
|
||||
.dash-row .dash-row-main { display: flex; flex-direction: column; gap: 2px; }
|
||||
.dash-row .dash-row-sub { font-size: 11px; color: var(--fg-dim); }
|
||||
.dash-num { font-variant-numeric: tabular-nums; font-weight: 700; }
|
||||
|
||||
.dash-traffic { display: flex; gap: 36px; padding: 6px 2px; }
|
||||
.dash-traffic .t-block { display: flex; flex-direction: column; gap: 4px; }
|
||||
.dash-traffic .t-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--fg-dim); }
|
||||
.dash-traffic .t-val { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.dash-traffic .t-down { color: var(--neon); text-shadow: var(--glow-neon); }
|
||||
.dash-traffic .t-up { color: var(--cyan); text-shadow: var(--glow-cyan); }
|
||||
|
||||
.dash-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid currentColor;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
|
|||
170
renderer/app.js
170
renderer/app.js
|
|
@ -14,15 +14,28 @@ const state = {
|
|||
olts: [], // result of listOlts
|
||||
oltFiltered: [], // current visible OLTs
|
||||
oltSelected: new Set(),
|
||||
dashboard: null, // result of dashboardStats (null until first load)
|
||||
};
|
||||
|
||||
// -------- Helpers --------
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
const $$ = (sel) => document.querySelectorAll(sel);
|
||||
|
||||
// Which top tab "owns" each view, so sub-views (campaign/verify) keep the
|
||||
// ONU tab highlighted and showView() callers don't each have to know.
|
||||
const VIEW_TO_TAB = {
|
||||
'#view-dashboard': 'dashboard',
|
||||
'#view-fleet': 'onu',
|
||||
'#view-campaign': 'onu',
|
||||
'#view-verify': 'onu',
|
||||
'#view-olts': 'olt',
|
||||
};
|
||||
|
||||
function showView(id) {
|
||||
for (const v of $$('.view')) v.classList.add('hidden');
|
||||
$(id).classList.remove('hidden');
|
||||
const tab = VIEW_TO_TAB[id] || null;
|
||||
for (const t of $$('.tab')) t.classList.toggle('active', t.dataset.tab === tab);
|
||||
}
|
||||
|
||||
function activeBank(cfg) {
|
||||
|
|
@ -220,17 +233,31 @@ $('#btn-login').addEventListener('click', async () => {
|
|||
}
|
||||
$('#session-label').textContent = `${username} @ ${baseUrl}`;
|
||||
$('#btn-logout').classList.remove('hidden');
|
||||
showView('#view-fleet');
|
||||
$('#tabs').classList.remove('hidden');
|
||||
showView('#view-dashboard');
|
||||
loadDashboard();
|
||||
});
|
||||
|
||||
$('#btn-logout').addEventListener('click', async () => {
|
||||
await window.api.logout();
|
||||
$('#session-label').textContent = 'Not connected';
|
||||
$('#btn-logout').classList.add('hidden');
|
||||
$('#tabs').classList.add('hidden');
|
||||
state.fleet = []; state.filtered = []; state.selected.clear();
|
||||
state.dashboard = null;
|
||||
showView('#view-login');
|
||||
});
|
||||
|
||||
// -------- Top tab navigation --------
|
||||
for (const tab of $$('.tab')) {
|
||||
tab.addEventListener('click', () => {
|
||||
const view = tab.dataset.view;
|
||||
showView(view);
|
||||
// Dashboard loads itself on first visit; other tabs load on demand.
|
||||
if (view === '#view-dashboard' && !state.dashboard) loadDashboard();
|
||||
});
|
||||
}
|
||||
|
||||
// -------- Fleet loading + filtering --------
|
||||
$('#btn-refresh').addEventListener('click', loadFleet);
|
||||
|
||||
|
|
@ -1521,3 +1548,144 @@ $('#btn-olt-execute').addEventListener('click', async () => {
|
|||
// Refresh the table so the user sees the new state.
|
||||
await loadOlts();
|
||||
});
|
||||
|
||||
// -------- Dashboard: network telemetry --------
|
||||
|
||||
$('#dash-refresh').addEventListener('click', loadDashboard);
|
||||
$('#dash-extra').addEventListener('change', loadDashboard);
|
||||
|
||||
// Bit-rate formatter, ported from the iOS app's Format.bps.
|
||||
function fmtBps(v) {
|
||||
if (typeof v !== 'number' || !(v >= 0)) return '—';
|
||||
const units = ['bps', 'kbps', 'Mbps', 'Gbps', 'Tbps'];
|
||||
let x = v, i = 0;
|
||||
while (x >= 1000 && i < units.length - 1) { x /= 1000; i += 1; }
|
||||
const digits = (i === 0 || x >= 100) ? 0 : 1;
|
||||
return `${x.toFixed(digits)} ${units[i]}`;
|
||||
}
|
||||
|
||||
function statePillClass(stateName) {
|
||||
if (stateName === 'Registered') return 'status-ok';
|
||||
if (DOWN_STATUSES.has(stateName)) return 'status-err';
|
||||
return 'status-pending';
|
||||
}
|
||||
|
||||
function optionExists(selectSel, value) {
|
||||
return Array.from($(selectSel).options).some((o) => o.value === value);
|
||||
}
|
||||
|
||||
function dashHealthRow(title, detail, count) {
|
||||
const cls = count > 0 ? 'status-warn' : 'status-ok';
|
||||
return `<div class="dash-row">
|
||||
<span class="dash-row-main">${escapeHtml(title)}${detail ? `<span class="dash-row-sub">${escapeHtml(detail)}</span>` : ''}</span>
|
||||
<span class="dash-num ${cls}">${count}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function loadDashboard() {
|
||||
const extra = $('#dash-extra').checked;
|
||||
$('#dash-status').textContent = extra
|
||||
? 'Loading network + per-ONU Rx/FEC scan… (this fetches every ONU-STATE)'
|
||||
: 'Loading network overview…';
|
||||
$('#dash-refresh').disabled = true;
|
||||
const res = await window.api.dashboardStats({ extraStats: extra });
|
||||
$('#dash-refresh').disabled = false;
|
||||
if (!res.ok) {
|
||||
$('#dash-status').textContent = `Error: ${res.error?.message || 'unknown'}`;
|
||||
return;
|
||||
}
|
||||
state.dashboard = res.data;
|
||||
renderDashboard(res.data);
|
||||
}
|
||||
|
||||
function renderDashboard(d) {
|
||||
// --- Count tiles ---
|
||||
const tiles = [
|
||||
{ label: 'ONUs', value: d.onuTotal, cls: '', sub: 'across all OLTs' },
|
||||
{ label: 'OLTs', value: d.oltCount, cls: 'tile-teal', sub: '' },
|
||||
{
|
||||
label: 'Controllers',
|
||||
value: d.controllerCount === null ? '—' : d.controllerCount,
|
||||
cls: 'tile-indigo',
|
||||
sub: d.controllerCount === null ? 'not exposed on this build' : '',
|
||||
},
|
||||
];
|
||||
$('#dash-tiles').innerHTML = tiles.map((t) => `
|
||||
<div class="tile ${t.cls}">
|
||||
<span class="tile-label">${escapeHtml(t.label)}</span>
|
||||
<span class="tile-value">${escapeHtml(String(t.value))}</span>
|
||||
${t.sub ? `<span class="tile-sub">${escapeHtml(t.sub)}</span>` : ''}
|
||||
</div>`).join('');
|
||||
|
||||
const sections = [];
|
||||
|
||||
// --- Traffic ---
|
||||
if (d.traffic) {
|
||||
sections.push(`
|
||||
<div class="dash-section">
|
||||
<h3>Traffic · all OLTs</h3>
|
||||
<div class="dash-card">
|
||||
<div class="dash-traffic">
|
||||
<div class="t-block"><span class="t-label">↓ Downstream</span><span class="t-val t-down">${escapeHtml(fmtBps(d.traffic.downBps))}</span></div>
|
||||
<div class="t-block"><span class="t-label">↑ Upstream</span><span class="t-val t-up">${escapeHtml(fmtBps(d.traffic.upBps))}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
}
|
||||
|
||||
// --- Health ---
|
||||
const healthRows = [];
|
||||
if (d.optical && d.optical.available) {
|
||||
healthRows.push(dashHealthRow('ONUs with abnormal Rx', '< −28 or > −10 dBm', d.optical.abnormalRxCount));
|
||||
}
|
||||
healthRows.push(dashHealthRow('OLTs with laser off', null, (d.lasersOff || []).length));
|
||||
sections.push(`
|
||||
<div class="dash-section">
|
||||
<h3>Health</h3>
|
||||
<div class="dash-card">${healthRows.join('')}</div>
|
||||
</div>`);
|
||||
|
||||
// --- ONU registration states (click → ONU tab, filtered) ---
|
||||
if (d.onuCounts && d.onuCounts.length) {
|
||||
const rows = d.onuCounts.map((r) => `
|
||||
<div class="dash-row tappable" data-status="${escapeHtml(r.state)}" title="Show these in the ONU tab">
|
||||
<span class="dash-pill ${statePillClass(r.state)}">${escapeHtml(r.state)}</span>
|
||||
<span class="dash-num">${r.count}</span>
|
||||
</div>`).join('');
|
||||
sections.push(`<div class="dash-section"><h3>ONU states</h3><div class="dash-card">${rows}</div></div>`);
|
||||
}
|
||||
|
||||
// --- ONU FEC health (only with the detailed scan) ---
|
||||
if (d.fecCounts) {
|
||||
const order = [
|
||||
['ok', 'Healthy', 'status-ok'],
|
||||
['pre', 'Pre-FEC only (marginal)', 'status-warn'],
|
||||
['post', 'Post-FEC errors', 'status-err'],
|
||||
['buggy', 'Buggy (pre ≈ post)', 'status-info'],
|
||||
['nodata', 'No FEC data', 'status-pending'],
|
||||
['error', 'Fetch error', 'status-pending'],
|
||||
];
|
||||
const rows = order
|
||||
.filter(([k]) => k === 'ok' || (d.fecCounts[k] || 0) > 0)
|
||||
.map(([k, label, cls]) =>
|
||||
`<div class="dash-row"><span class="${cls}">${escapeHtml(label)}</span><span class="dash-num">${d.fecCounts[k] || 0}</span></div>`)
|
||||
.join('');
|
||||
sections.push(`<div class="dash-section"><h3>ONU FEC health</h3><div class="dash-card">${rows}</div></div>`);
|
||||
}
|
||||
|
||||
$('#dash-sections').innerHTML = sections.join('');
|
||||
|
||||
// Drill-down: clicking an ONU-state row jumps to the ONU tab pre-filtered.
|
||||
for (const row of $$('#dash-sections .dash-row.tappable')) {
|
||||
row.addEventListener('click', () => {
|
||||
const status = row.dataset.status;
|
||||
$('#filter-status').value = optionExists('#filter-status', status) ? status : '';
|
||||
showView('#view-fleet');
|
||||
if (!state.fleet.length) loadFleet(); else applyFilters();
|
||||
});
|
||||
}
|
||||
|
||||
const stamp = d.sampledAt ? new Date(d.sampledAt).toLocaleTimeString() : '';
|
||||
$('#dash-status').textContent =
|
||||
`${d.onuTotal} ONUs · ${d.oltCount} OLTs${d.extraStats ? ' · detailed scan' : ''}${stamp ? ' · ' + stamp : ''}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,16 @@
|
|||
<link rel="stylesheet" href="app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Animated neon beam that travels around the screen edge. -->
|
||||
<div id="edge-glow" aria-hidden="true"></div>
|
||||
|
||||
<header class="topbar">
|
||||
<div class="brand">PON Fleet Upgrader</div>
|
||||
<nav id="tabs" class="tabs hidden">
|
||||
<button class="tab" data-tab="dashboard" data-view="#view-dashboard">Dashboard</button>
|
||||
<button class="tab" data-tab="onu" data-view="#view-fleet">ONU</button>
|
||||
<button class="tab" data-tab="olt" data-view="#view-olts">OLT</button>
|
||||
</nav>
|
||||
<div class="session" id="session-label">Not connected</div>
|
||||
<button id="btn-logout" class="ghost hidden">Disconnect</button>
|
||||
</header>
|
||||
|
|
@ -35,6 +43,28 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= Dashboard view ================= -->
|
||||
<section id="view-dashboard" class="view hidden">
|
||||
<div class="panel-main dash-wrap">
|
||||
<div class="fleet-head">
|
||||
<h2>Dashboard</h2>
|
||||
<div class="row">
|
||||
<label class="inline dash-toggle">
|
||||
<input id="dash-extra" type="checkbox" />
|
||||
Detailed stats (Rx / FEC scan)
|
||||
</label>
|
||||
<button id="dash-refresh" class="ghost">↻ Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="muted small" id="dash-status">Connect and the network overview loads here.</p>
|
||||
|
||||
<div class="dash-scroll">
|
||||
<div class="dash-grid" id="dash-tiles"></div>
|
||||
<div id="dash-sections"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= Fleet view ================= -->
|
||||
<section id="view-fleet" class="view hidden">
|
||||
<div class="panel-left">
|
||||
|
|
|
|||
|
|
@ -576,6 +576,17 @@ class McmsClient {
|
|||
return res.body;
|
||||
}
|
||||
|
||||
// --- Controllers (dashboard counts) ----------------------------------
|
||||
|
||||
/**
|
||||
* Bulk-fetch all PON Controller config documents (CNTL-CFG). Used only
|
||||
* for the dashboard "Controllers" count. Best-effort: not every MCMS
|
||||
* build exposes this, so callers should tolerate a throw / 404.
|
||||
*/
|
||||
async listAllControllerConfigs({ pageSize = 100 } = {}) {
|
||||
return this._listPaginatedByNext('/v3/controllers/configs/', { pageSize });
|
||||
}
|
||||
|
||||
// --- Firmware inventory ----------------------------------------------
|
||||
|
||||
async listOnuFirmware() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue