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
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 : ''}`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue