v0.5.0 - Wake-on-LAN + connectivity history
wol.py:
- build_magic_packet(): standard 6x0xFF + 16x MAC layout
- send_local_broadcast(): direct from container (ports 9 + 7 for safety)
- send_via_peer(): preferred path; SSHes to the OTHER Spark and runs a Python one-liner there so the packet originates on the target's LAN segment (most reliable)
- MAC validation + normalization
connectivity.py:
- /data/connectivity.json persistence (thread-safe, atomic rename)
- Stores per-Spark current state + last_change timestamp + rolling 200-event log
- Records up/down transitions; computes down_seconds / up_seconds durations
- MAC cache populated lazily during hardware probes
hardware.py:
- Probe now reads MAC via /sys/class/net/<default-route-iface>/address
- After each probe, record_state() emits a transition event if state changed
- record_mac() caches the address so WoL works when the Spark next goes down
Endpoints:
- GET /api/connectivity: macs, current state, last_change, events[]
- POST /api/spark/{name}/wake: tries via-peer first, falls back to direct broadcast
UI:
- Unreachable hardware card shows the cached MAC + 'Wake (WoL)' button (only if MAC known)
- New 'Connectivity log' button opens a modal with per-Spark transition history (last 25 each), including duration of each prior up/down period
- pollHardware also pulls /api/connectivity so WoL buttons appear without an extra fetch
Package: bump 0.5.0:0; main.ts sets CONNECTIVITY_LOG=/data/connectivity.json
This commit is contained in:
Grant
+76
-1
@@ -121,10 +121,69 @@ function bar(usedPct, warn) {
|
||||
async function pollHardware() {
|
||||
try {
|
||||
state.hardware = await fetchJSON('/api/hardware');
|
||||
try { state.connectivity = await fetchJSON('/api/connectivity'); } catch {}
|
||||
renderHardware();
|
||||
} catch (e) { console.warn('hardware poll failed', e); }
|
||||
}
|
||||
|
||||
function fmtDuration(sec) {
|
||||
if (sec == null) return '';
|
||||
if (sec < 60) return `${Math.round(sec)}s`;
|
||||
if (sec < 3600) return `${Math.round(sec / 60)}m`;
|
||||
if (sec < 86400) {
|
||||
const h = Math.floor(sec / 3600);
|
||||
const m = Math.round((sec % 3600) / 60);
|
||||
return m ? `${h}h ${m}m` : `${h}h`;
|
||||
}
|
||||
const d = Math.floor(sec / 86400);
|
||||
const h = Math.round((sec % 86400) / 3600);
|
||||
return h ? `${d}d ${h}h` : `${d}d`;
|
||||
}
|
||||
|
||||
function openConnectivityDialog() {
|
||||
const dlg = el('#connectivity-dialog');
|
||||
const content = el('#connectivity-content');
|
||||
const c = state.connectivity || {};
|
||||
const events = c.events || [];
|
||||
if (events.length === 0) {
|
||||
content.innerHTML = '<div class="muted small">No transitions recorded yet. Once a Spark goes down and comes back, you\'ll see entries here.</div>';
|
||||
dlg.showModal();
|
||||
return;
|
||||
}
|
||||
const bySpark = {};
|
||||
for (const e of events) {
|
||||
(bySpark[e.spark] = bySpark[e.spark] || []).push(e);
|
||||
}
|
||||
const html = Object.entries(bySpark).map(([spark, evs]) => {
|
||||
const downs = evs.filter(e => e.transition === 'down').length;
|
||||
const mac = c.macs?.[spark];
|
||||
return `
|
||||
<div class="conn-spark">
|
||||
<h4>${escapeHtml(spark)}${mac ? ` <span class="muted small">${escapeHtml(mac)}</span>` : ''}</h4>
|
||||
<div class="conn-summary">${evs.length} transition${evs.length===1?'':'s'} · ${downs} down event${downs===1?'':'s'} in window</div>
|
||||
${evs.slice(-25).reverse().map(e => `
|
||||
<div class="conn-event ${e.transition}">
|
||||
<span class="when">${escapeHtml(e.at.replace('T', ' ').replace('Z', ''))}</span>
|
||||
<span class="what">${e.transition === 'up' ? '↑ came back online' : '↓ dropped offline'}</span>
|
||||
<span class="dur">${e.down_seconds != null ? `was down ${fmtDuration(e.down_seconds)}` : ''}${e.up_seconds != null ? `was up ${fmtDuration(e.up_seconds)}` : ''}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
content.innerHTML = html;
|
||||
dlg.showModal();
|
||||
}
|
||||
|
||||
async function wakeSpark(name) {
|
||||
try {
|
||||
const r = await fetchJSON(`/api/spark/${name}/wake`, { method: 'POST' });
|
||||
alert(`Wake-on-LAN sent to ${name} (MAC ${r.mac}, via ${r.delivered_via}). Give it ~30 seconds to wake; the card will go green when it comes back.`);
|
||||
} catch (e) {
|
||||
alert(`Wake failed: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function renderHardware() {
|
||||
const panel = el('#hardware-panel');
|
||||
const grid = el('#hardware-grid');
|
||||
@@ -138,14 +197,23 @@ function renderHardware() {
|
||||
const card = document.createElement('div');
|
||||
if (!s.reachable) {
|
||||
card.className = 'hw-card unreachable';
|
||||
const mac = state.connectivity?.macs?.[key];
|
||||
const wolRow = mac
|
||||
? `<div class="wol-row">
|
||||
<span class="mac-display">${escapeHtml(mac)}</span>
|
||||
<span class="spacer"></span>
|
||||
<button class="btn" data-wake="${escapeHtml(key)}">Wake (WoL)</button>
|
||||
</div>`
|
||||
: `<div class="muted small">MAC not yet known — once it's been up once with this dashboard installed, "Wake" will appear here.</div>`;
|
||||
card.innerHTML = `
|
||||
<div class="head">
|
||||
<span class="name">${escapeHtml(key)}</span>
|
||||
<span class="meta">unreachable</span>
|
||||
</div>
|
||||
<div class="muted small">${escapeHtml(s.host || '')} — ${escapeHtml(s.error || 'no response')}</div>
|
||||
${wolRow}
|
||||
<div class="muted small" style="line-height:1.5">
|
||||
Spark Control can't restart a Spark that won't answer SSH. Steps to try:
|
||||
If Wake-on-LAN doesn't bring it back, manual steps:
|
||||
<ol style="margin: 6px 0 0 18px; padding: 0;">
|
||||
<li>Verify it's powered on (check the front LED).</li>
|
||||
<li>Ping it from another LAN device.</li>
|
||||
@@ -1307,6 +1375,13 @@ async function init() {
|
||||
el('#nim-cancel').addEventListener('click', () => el('#nim-dialog').close());
|
||||
el('#nim-form').addEventListener('submit', submitNim);
|
||||
el('#nim-prog-close').addEventListener('click', () => el('#nim-progress-dialog').close());
|
||||
el('#open-connectivity').addEventListener('click', openConnectivityDialog);
|
||||
el('#connectivity-close').addEventListener('click', () => el('#connectivity-dialog').close());
|
||||
// Wake-on-LAN buttons live on unreachable hardware cards; delegate.
|
||||
el('#hardware-grid').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-wake]');
|
||||
if (btn) wakeSpark(btn.dataset.wake);
|
||||
});
|
||||
setupCatalogDialog();
|
||||
setupAdvancedDialog();
|
||||
// Open WebUI link from /api/config
|
||||
|
||||
@@ -26,8 +26,22 @@
|
||||
</section>
|
||||
|
||||
<section id="hardware-panel" class="hardware-panel hidden">
|
||||
<h2 class="section-title">Spark hardware</h2>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Spark hardware</h2>
|
||||
<button id="open-connectivity" class="btn small-btn">Connectivity log</button>
|
||||
</div>
|
||||
<div id="hardware-grid" class="hardware-grid"></div>
|
||||
|
||||
<dialog id="connectivity-dialog" class="modal">
|
||||
<form method="dialog" class="modal-form">
|
||||
<h3>Spark connectivity history</h3>
|
||||
<p class="muted small">Most recent up/down transitions per Spark. Tracked since this dashboard was installed.</p>
|
||||
<div id="connectivity-content" class="connectivity-content"></div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" id="connectivity-close" class="btn">Close</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</section>
|
||||
|
||||
<section id="endpoint-panel" class="endpoint-panel hidden">
|
||||
|
||||
@@ -377,6 +377,42 @@ main {
|
||||
.hw-card.unreachable { border-color: rgba(239, 68, 68, 0.4); }
|
||||
.hw-card.unreachable .name { color: var(--error); }
|
||||
.hw-card.unreachable ol { color: var(--muted); }
|
||||
.hw-card .wol-row {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.hw-card .wol-row .btn { padding: 5px 10px; font-size: 12px; }
|
||||
.hw-card .mac-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
|
||||
.connectivity-content {
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.conn-spark { margin-bottom: 16px; }
|
||||
.conn-spark h4 { font-size: 13px; margin: 0 0 8px; color: var(--text); }
|
||||
.conn-event {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
.conn-event:last-child { border-bottom: 0; }
|
||||
.conn-event .when { color: var(--muted); flex-shrink: 0; }
|
||||
.conn-event .what { flex: 1; }
|
||||
.conn-event.up .what { color: var(--accent); }
|
||||
.conn-event.down .what { color: var(--error); }
|
||||
.conn-event .dur { color: var(--muted); }
|
||||
.conn-summary { color: var(--muted); font-size: 11px; padding: 4px 0 10px; }
|
||||
.hw-metric { display: flex; align-items: center; gap: 10px; font-size: 12px; }
|
||||
.hw-metric .label { color: var(--muted); width: 56px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
|
||||
.hw-metric .bar { flex: 1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; position: relative; }
|
||||
|
||||
Reference in New Issue
Block a user