Merge branch 'dev' into feat/ftp-report-pipeline
pulled in the live slm stuff
This commit is contained in:
@@ -42,6 +42,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Monitoring (keepalive) -->
|
||||
<div class="rounded-xl bg-white dark:bg-slate-800 shadow-lg p-4 mb-6">
|
||||
<h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-1">Live Monitoring (keepalive)</h2>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||||
Keepalive runs the 1 Hz DOD feed 24/7 (even with no viewer), which powers the live-chart
|
||||
trail and continuous threshold alerts. Toggling persists and survives restarts.
|
||||
</p>
|
||||
<div id="monitor-list" class="text-sm">
|
||||
<p class="text-gray-500 dark:text-gray-400">Loading…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raw API tester -->
|
||||
<div class="rounded-xl bg-white dark:bg-slate-800 shadow-lg p-4 mb-6">
|
||||
<h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-3">Raw API Tester</h2>
|
||||
@@ -132,7 +144,60 @@ async function sendRaw() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMonitors() {
|
||||
const el = document.getElementById('monitor-list');
|
||||
try {
|
||||
const r = await fetch('/api/slmm/roster');
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
const d = await r.json();
|
||||
const devices = d.devices || [];
|
||||
if (!devices.length) {
|
||||
el.innerHTML = '<p class="text-gray-500 dark:text-gray-400">No devices configured.</p>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = devices.map(dev => {
|
||||
const on = !!dev.monitor_enabled;
|
||||
const reach = dev.status ? dev.status.is_reachable : null;
|
||||
const reachDot = reach === false
|
||||
? '<span class="w-2 h-2 rounded-full bg-red-500 inline-block" title="unreachable"></span>'
|
||||
: '<span class="w-2 h-2 rounded-full bg-green-500 inline-block" title="reachable"></span>';
|
||||
return `
|
||||
<div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-700 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
${reachDot}
|
||||
<span class="font-mono text-gray-900 dark:text-white">${_esc(dev.unit_id)}</span>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">${_esc(dev.host)}:${_esc(dev.tcp_port)}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded ${on
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
|
||||
: 'bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-gray-400'}">${on ? '24/7 ON' : 'OFF'}</span>
|
||||
<button onclick="toggleMonitor('${_esc(dev.unit_id)}', ${!on})"
|
||||
class="px-3 py-1 text-xs rounded text-white ${on
|
||||
? 'bg-red-600 hover:bg-red-700' : 'bg-seismo-orange hover:bg-orange-600'}">
|
||||
${on ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
el.innerHTML = `<p class="text-red-600 dark:text-red-400">Failed to load devices: ${_esc(e.message)}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleMonitor(unitId, enable) {
|
||||
const action = enable ? 'start' : 'stop';
|
||||
try {
|
||||
const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/monitor/${action}`, { method: 'POST' });
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
await loadMonitors();
|
||||
} catch (e) {
|
||||
alert('Toggle failed: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
loadSlmmOverview();
|
||||
setInterval(loadSlmmOverview, 30000);
|
||||
loadMonitors();
|
||||
setInterval(() => { loadSlmmOverview(); loadMonitors(); }, 30000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -2,7 +2,14 @@
|
||||
{% if units %}
|
||||
{% for unit in units %}
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-transparent hover:border-seismo-orange transition-colors relative">
|
||||
<div class="absolute top-3 right-3 flex gap-2">
|
||||
<div class="absolute top-3 right-3 flex gap-2 z-10">
|
||||
<button onclick="event.preventDefault(); event.stopPropagation(); refreshSlmUnit('{{ unit.id }}', this);"
|
||||
class="text-gray-500 hover:text-seismo-orange dark:text-gray-400 dark:hover:text-seismo-orange"
|
||||
title="Refresh {{ unit.id }} from device">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="event.preventDefault(); event.stopPropagation(); showLiveChart('{{ unit.id }}');"
|
||||
class="text-gray-500 hover:text-seismo-orange dark:text-gray-400 dark:hover:text-seismo-orange"
|
||||
title="View live chart">
|
||||
@@ -20,41 +27,44 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a href="/slm/{{ unit.id }}" class="block">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-gray-900 dark:text-white">{{ unit.id }}</span>
|
||||
{% if unit.slm_model %}
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">• {{ unit.slm_model }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if unit.address %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 truncate mt-1">{{ unit.address }}</p>
|
||||
{% elif unit.location %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 truncate mt-1">{{ unit.location }}</p>
|
||||
<a href="/slm/{{ unit.id }}" class="block pr-24">
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-semibold text-gray-900 dark:text-white">{{ unit.id }}</span>
|
||||
{% if unit.slm_model %}
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">• {{ unit.slm_model }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if unit.retired %}
|
||||
<span class="shrink-0 px-2 py-1 text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-full">Retired</span>
|
||||
{% elif not unit.deployed %}
|
||||
<span class="shrink-0 px-2 py-1 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 rounded-full">Benched</span>
|
||||
{% elif unit.measurement_state == "Start" %}
|
||||
<span class="shrink-0 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Measuring</span>
|
||||
{% elif unit.is_recent %}
|
||||
<span class="shrink-0 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">Active</span>
|
||||
{% else %}
|
||||
<span class="shrink-0 px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full">Idle</span>
|
||||
{% if unit.address %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 truncate mt-1">{{ unit.address }}</p>
|
||||
{% elif unit.location %}
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 truncate mt-1">{{ unit.location }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
{% if unit.slm_last_check %}
|
||||
Last check: {{ unit.slm_last_check|local_datetime }}
|
||||
<!-- Status badge + last-check on one line (moved off the top-right so it
|
||||
no longer collides with the refresh/chart/gear action icons). -->
|
||||
<div class="mt-2 flex items-center gap-2 flex-wrap">
|
||||
{% if unit.retired %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-full">Retired</span>
|
||||
{% elif not unit.deployed %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 rounded-full">Benched</span>
|
||||
{% elif unit.measurement_state in ["Start", "Measure"] %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 rounded-full">Measuring</span>
|
||||
{% elif unit.is_recent %}
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full">Active</span>
|
||||
{% else %}
|
||||
No recent check-in
|
||||
<span class="px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full">Idle</span>
|
||||
{% endif %}
|
||||
<span class="text-xs text-gray-500 dark:text-gray-400">
|
||||
{% if unit.cache_last_seen %}
|
||||
Last check: {{ unit.cache_last_seen|local_datetime }}
|
||||
{% elif unit.slm_last_check %}
|
||||
Last check: {{ unit.slm_last_check|local_datetime }}
|
||||
{% else %}
|
||||
No recent check-in
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -143,6 +143,8 @@
|
||||
</svg>
|
||||
Stop Live Stream
|
||||
</button>
|
||||
|
||||
<span id="live-feed-status" class="ml-3 self-center" style="display: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -432,6 +434,24 @@ function initializeChart() {
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
},
|
||||
{
|
||||
label: 'L1',
|
||||
data: [],
|
||||
borderColor: 'rgb(139, 92, 246)',
|
||||
backgroundColor: 'rgba(139, 92, 246, 0.1)',
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
},
|
||||
{
|
||||
label: 'L10',
|
||||
data: [],
|
||||
borderColor: 'rgb(245, 158, 11)',
|
||||
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -493,7 +513,37 @@ if (typeof window.currentWebSocket === 'undefined') {
|
||||
window.currentWebSocket = null;
|
||||
}
|
||||
|
||||
function initLiveDataStream(unitId) {
|
||||
// Backfill the chart with the recent DOD trail so it opens with context.
|
||||
async function backfillChart(unitId) {
|
||||
try {
|
||||
const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/history?hours=2`);
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
const readings = d.readings || [];
|
||||
if (!window.chartData) return;
|
||||
for (const row of readings) {
|
||||
// Trail timestamps are naive UTC; append 'Z' so they convert to local
|
||||
// consistently with the live frames (which use local Date.now()).
|
||||
window.chartData.timestamps.push(row.timestamp ? new Date(row.timestamp + 'Z').toLocaleTimeString() : '');
|
||||
window.chartData.lp.push(parseFloat(row.lp || 0));
|
||||
window.chartData.leq.push(parseFloat(row.leq || 0));
|
||||
window.chartData.ln1.push(parseFloat(row.ln1 || 0));
|
||||
window.chartData.ln2.push(parseFloat(row.ln2 || 0));
|
||||
}
|
||||
if (window.liveChart) {
|
||||
window.liveChart.data.labels = window.chartData.timestamps;
|
||||
window.liveChart.data.datasets[0].data = window.chartData.lp;
|
||||
window.liveChart.data.datasets[1].data = window.chartData.leq;
|
||||
window.liveChart.data.datasets[2].data = window.chartData.ln1;
|
||||
window.liveChart.data.datasets[3].data = window.chartData.ln2;
|
||||
window.liveChart.update('none');
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Chart backfill failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function initLiveDataStream(unitId) {
|
||||
// Close existing connection if any
|
||||
if (window.currentWebSocket) {
|
||||
window.currentWebSocket.close();
|
||||
@@ -504,17 +554,24 @@ function initLiveDataStream(unitId) {
|
||||
window.chartData.timestamps = [];
|
||||
window.chartData.lp = [];
|
||||
window.chartData.leq = [];
|
||||
window.chartData.ln1 = [];
|
||||
window.chartData.ln2 = [];
|
||||
}
|
||||
if (window.liveChart && window.liveChart.data && window.liveChart.data.datasets) {
|
||||
window.liveChart.data.labels = [];
|
||||
window.liveChart.data.datasets[0].data = [];
|
||||
window.liveChart.data.datasets[1].data = [];
|
||||
window.liveChart.data.datasets.forEach(ds => ds.data = []);
|
||||
window.liveChart.update();
|
||||
}
|
||||
|
||||
// WebSocket URL for SLMM backend via proxy
|
||||
// Seed the chart with recent history BEFORE opening the live socket, so live
|
||||
// frames append after the backfill (right order) and the chart isn't blank.
|
||||
await backfillChart(unitId);
|
||||
|
||||
// WebSocket URL for SLMM backend via proxy.
|
||||
// /monitor = the shared fan-out DOD feed (many viewers, one device connection,
|
||||
// and it carries L1/L10 which the DRD /stream cannot).
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/live`;
|
||||
const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${unitId}/monitor`;
|
||||
|
||||
window.currentWebSocket = new WebSocket(wsUrl);
|
||||
|
||||
@@ -530,7 +587,11 @@ function initLiveDataStream(unitId) {
|
||||
window.currentWebSocket.onmessage = function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('WebSocket data received:', data);
|
||||
// The DOD monitor sends keepalive 'heartbeat' frames (no metrics) and a
|
||||
// 'feed_status' on each frame. Reflect status, but don't let a heartbeat
|
||||
// or an 'unreachable' frame blank the cards / spike the chart with zeros.
|
||||
updateFeedStatus(data.feed_status);
|
||||
if (data.heartbeat || data.feed_status === 'unreachable') return;
|
||||
updateLiveMetrics(data);
|
||||
updateLiveChart(data);
|
||||
} catch (error) {
|
||||
@@ -559,6 +620,21 @@ function stopLiveDataStream() {
|
||||
}
|
||||
}
|
||||
|
||||
// Reflect device reachability from the monitor feed's feed_status. Safe no-op
|
||||
// if the badge element isn't on the page.
|
||||
function updateFeedStatus(status) {
|
||||
const el = document.getElementById('live-feed-status');
|
||||
if (!el || status == null) return;
|
||||
if (status === 'unreachable') {
|
||||
el.textContent = 'Device offline';
|
||||
el.className = 'text-xs font-medium px-2 py-0.5 rounded bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
|
||||
} else {
|
||||
el.textContent = 'Live';
|
||||
el.className = 'text-xs font-medium px-2 py-0.5 rounded bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
|
||||
}
|
||||
el.style.display = '';
|
||||
}
|
||||
|
||||
// Update metrics display
|
||||
function updateLiveMetrics(data) {
|
||||
if (document.getElementById('live-lp')) {
|
||||
@@ -592,7 +668,9 @@ if (typeof window.chartData === 'undefined') {
|
||||
window.chartData = {
|
||||
timestamps: [],
|
||||
lp: [],
|
||||
leq: []
|
||||
leq: [],
|
||||
ln1: [],
|
||||
ln2: []
|
||||
};
|
||||
}
|
||||
|
||||
@@ -602,12 +680,17 @@ function updateLiveChart(data) {
|
||||
window.chartData.timestamps.push(now.toLocaleTimeString());
|
||||
window.chartData.lp.push(parseFloat(data.lp || 0));
|
||||
window.chartData.leq.push(parseFloat(data.leq || 0));
|
||||
window.chartData.ln1.push(parseFloat(data.ln1 || 0));
|
||||
window.chartData.ln2.push(parseFloat(data.ln2 || 0));
|
||||
|
||||
// Keep only last 60 data points
|
||||
if (window.chartData.timestamps.length > 60) {
|
||||
// Keep a rolling window large enough to hold the ~2h backfill (one point/min)
|
||||
// plus a good run of live points before the oldest scroll off.
|
||||
if (window.chartData.timestamps.length > 600) {
|
||||
window.chartData.timestamps.shift();
|
||||
window.chartData.lp.shift();
|
||||
window.chartData.leq.shift();
|
||||
window.chartData.ln1.shift();
|
||||
window.chartData.ln2.shift();
|
||||
}
|
||||
|
||||
// Update chart if available
|
||||
@@ -615,6 +698,8 @@ function updateLiveChart(data) {
|
||||
window.liveChart.data.labels = window.chartData.timestamps;
|
||||
window.liveChart.data.datasets[0].data = window.chartData.lp;
|
||||
window.liveChart.data.datasets[1].data = window.chartData.leq;
|
||||
window.liveChart.data.datasets[2].data = window.chartData.ln1;
|
||||
window.liveChart.data.datasets[3].data = window.chartData.ln2;
|
||||
window.liveChart.update('none');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -528,7 +528,7 @@ async function saveSLMSettings(event) {
|
||||
if (typeof checkFTPStatus === 'function') {
|
||||
checkFTPStatus(unitId);
|
||||
}
|
||||
if (typeof htmx !== 'undefined') {
|
||||
if (typeof htmx !== 'undefined' && document.getElementById('slm-list')) {
|
||||
htmx.trigger('#slm-list', 'load');
|
||||
}
|
||||
}, 1500);
|
||||
@@ -604,8 +604,10 @@ async function toggleSLMDeployed() {
|
||||
successDiv.classList.remove('hidden');
|
||||
setTimeout(() => successDiv.classList.add('hidden'), 3000);
|
||||
|
||||
// Refresh any SLM list on the page
|
||||
if (typeof htmx !== 'undefined') {
|
||||
// Refresh any SLM list on the page (only if one is actually present —
|
||||
// the detail/dashboard pages have no #slm-list, and htmx.trigger on a
|
||||
// null target throws "can't access property dispatchEvent, e is null").
|
||||
if (typeof htmx !== 'undefined' && document.getElementById('slm-list')) {
|
||||
htmx.trigger('#slm-list', 'load');
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@@ -51,13 +51,31 @@
|
||||
|
||||
<!-- Live Measurement Chart - shows when a device is selected -->
|
||||
<div id="live-chart-panel" class="hidden bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Live Measurements</h2>
|
||||
<button onclick="closeLiveChart()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Live Measurements
|
||||
<span id="panel-unit-id" class="text-seismo-orange"></span>
|
||||
</h2>
|
||||
<!-- Measuring state + cache freshness (populated from cached /status, no device hit) -->
|
||||
<div class="mt-1 flex items-center gap-2 text-sm">
|
||||
<span id="panel-measuring-badge" class="hidden px-2 py-0.5 text-xs font-medium rounded-full"></span>
|
||||
<span id="panel-freshness" class="text-gray-500 dark:text-gray-400"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick="refreshDashboardPanel()" title="Refresh from device"
|
||||
class="text-gray-500 hover:text-seismo-orange dark:text-gray-400 dark:hover:text-seismo-orange">
|
||||
<svg id="panel-refresh-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="closeLiveChart()" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current Metrics -->
|
||||
@@ -150,9 +168,18 @@ window.selectedUnitId = null;
|
||||
window.dashboardChartData = {
|
||||
timestamps: [],
|
||||
lp: [],
|
||||
leq: []
|
||||
leq: [],
|
||||
ln1: [],
|
||||
ln2: []
|
||||
};
|
||||
|
||||
// Parse a metric to a number, or null (so a missing/"-.-" percentile leaves a gap
|
||||
// in the line instead of dropping it to 0).
|
||||
function numOrNull(v) {
|
||||
const f = parseFloat(v);
|
||||
return isNaN(f) ? null : f;
|
||||
}
|
||||
|
||||
// Initialize Chart.js
|
||||
function initializeDashboardChart() {
|
||||
if (typeof Chart === 'undefined') {
|
||||
@@ -194,6 +221,26 @@ function initializeDashboardChart() {
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0
|
||||
},
|
||||
{
|
||||
label: 'L1',
|
||||
data: [],
|
||||
borderColor: 'rgb(168, 85, 247)',
|
||||
backgroundColor: 'rgba(168, 85, 247, 0.1)',
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0,
|
||||
spanGaps: true
|
||||
},
|
||||
{
|
||||
label: 'L10',
|
||||
data: [],
|
||||
borderColor: 'rgb(249, 115, 22)',
|
||||
backgroundColor: 'rgba(249, 115, 22, 0.1)',
|
||||
tension: 0.3,
|
||||
borderWidth: 2,
|
||||
pointRadius: 0,
|
||||
spanGaps: true
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -244,12 +291,24 @@ function showLiveChart(unitId) {
|
||||
initializeDashboardChart();
|
||||
}
|
||||
|
||||
// Reset data
|
||||
window.dashboardChartData = {
|
||||
timestamps: [],
|
||||
lp: [],
|
||||
leq: []
|
||||
};
|
||||
// Reset data for the newly-selected unit (clears any prior unit's line)
|
||||
window.dashboardChartData = { timestamps: [], lp: [], leq: [], ln1: [], ln2: [] };
|
||||
if (window.dashboardChart) {
|
||||
window.dashboardChart.data.labels = [];
|
||||
window.dashboardChart.data.datasets.forEach(ds => ds.data = []);
|
||||
window.dashboardChart.update('none');
|
||||
}
|
||||
|
||||
// Name the unit; clear stale status until the cache read returns
|
||||
const unitLabel = document.getElementById('panel-unit-id');
|
||||
if (unitLabel) unitLabel.textContent = '· ' + unitId;
|
||||
setPanelStatus(null, null);
|
||||
|
||||
// Populate immediately from CACHE (no device hit): KPI cards + chart trail.
|
||||
prefillDashboardPanel(unitId);
|
||||
backfillDashboardChart(unitId);
|
||||
// Keep the cards updating from cache (~15s) without opening a device stream.
|
||||
startPanelCachePolling(unitId);
|
||||
|
||||
// Scroll to chart
|
||||
panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
@@ -257,6 +316,7 @@ function showLiveChart(unitId) {
|
||||
|
||||
function closeLiveChart() {
|
||||
stopDashboardStream();
|
||||
stopPanelCachePolling();
|
||||
document.getElementById('live-chart-panel').classList.add('hidden');
|
||||
window.selectedUnitId = null;
|
||||
}
|
||||
@@ -270,17 +330,12 @@ function startDashboardStream() {
|
||||
window.dashboardWebSocket.close();
|
||||
}
|
||||
|
||||
// Reset chart data
|
||||
window.dashboardChartData = { timestamps: [], lp: [], leq: [] };
|
||||
if (window.dashboardChart) {
|
||||
window.dashboardChart.data.labels = [];
|
||||
window.dashboardChart.data.datasets[0].data = [];
|
||||
window.dashboardChart.data.datasets[1].data = [];
|
||||
window.dashboardChart.update();
|
||||
}
|
||||
// The live WS takes over from the cache poller; keep the backfilled trail on
|
||||
// the chart so the live frames continue the line instead of blanking it.
|
||||
stopPanelCachePolling();
|
||||
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${window.selectedUnitId}/live`;
|
||||
const wsUrl = `${wsProtocol}//${window.location.host}/api/slmm/${window.selectedUnitId}/monitor`;
|
||||
|
||||
window.dashboardWebSocket = new WebSocket(wsUrl);
|
||||
|
||||
@@ -293,6 +348,10 @@ function startDashboardStream() {
|
||||
window.dashboardWebSocket.onmessage = function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
// /monitor sends keepalive 'heartbeat' frames (no metrics) and a per-frame
|
||||
// 'feed_status'; skip heartbeats and offline frames so they don't blank the
|
||||
// metrics or spike the chart with zeros.
|
||||
if (data.heartbeat || data.feed_status === 'unreachable') return;
|
||||
updateDashboardMetrics(data);
|
||||
updateDashboardChart(data);
|
||||
} catch (error) {
|
||||
@@ -316,6 +375,10 @@ function stopDashboardStream() {
|
||||
window.dashboardWebSocket.close();
|
||||
window.dashboardWebSocket = null;
|
||||
}
|
||||
// Fall back to cache polling so the cards keep refreshing while the panel is open.
|
||||
if (window.selectedUnitId && !document.getElementById('live-chart-panel').classList.contains('hidden')) {
|
||||
startPanelCachePolling(window.selectedUnitId);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDashboardMetrics(data) {
|
||||
@@ -331,26 +394,200 @@ function updateDashboardMetrics(data) {
|
||||
}
|
||||
|
||||
function updateDashboardChart(data) {
|
||||
const cd = window.dashboardChartData;
|
||||
const now = new Date();
|
||||
window.dashboardChartData.timestamps.push(now.toLocaleTimeString());
|
||||
window.dashboardChartData.lp.push(parseFloat(data.lp || 0));
|
||||
window.dashboardChartData.leq.push(parseFloat(data.leq || 0));
|
||||
cd.timestamps.push(now.toLocaleTimeString());
|
||||
cd.lp.push(numOrNull(data.lp));
|
||||
cd.leq.push(numOrNull(data.leq));
|
||||
// /monitor (DOD) frames carry ln1/ln2; a DRD frame would omit them -> null gap.
|
||||
cd.ln1.push(numOrNull(data.ln1));
|
||||
cd.ln2.push(numOrNull(data.ln2));
|
||||
|
||||
// Keep only last 60 data points
|
||||
if (window.dashboardChartData.timestamps.length > 60) {
|
||||
window.dashboardChartData.timestamps.shift();
|
||||
window.dashboardChartData.lp.shift();
|
||||
window.dashboardChartData.leq.shift();
|
||||
// Keep a generous window (backfill seeds up to ~120 points from the 2h trail).
|
||||
if (cd.timestamps.length > 600) {
|
||||
cd.timestamps.shift();
|
||||
cd.lp.shift();
|
||||
cd.leq.shift();
|
||||
cd.ln1.shift();
|
||||
cd.ln2.shift();
|
||||
}
|
||||
|
||||
if (window.dashboardChart) {
|
||||
window.dashboardChart.data.labels = window.dashboardChartData.timestamps;
|
||||
window.dashboardChart.data.datasets[0].data = window.dashboardChartData.lp;
|
||||
window.dashboardChart.data.datasets[1].data = window.dashboardChartData.leq;
|
||||
window.dashboardChart.data.labels = cd.timestamps;
|
||||
window.dashboardChart.data.datasets[0].data = cd.lp;
|
||||
window.dashboardChart.data.datasets[1].data = cd.leq;
|
||||
window.dashboardChart.data.datasets[2].data = cd.ln1;
|
||||
window.dashboardChart.data.datasets[3].data = cd.ln2;
|
||||
window.dashboardChart.update('none');
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Cached-data panel population (no device hit) -----------------------
|
||||
|
||||
// Fill the KPI cards + measuring/freshness from the cached NL43Status snapshot.
|
||||
async function prefillDashboardPanel(unitId) {
|
||||
try {
|
||||
const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/status`);
|
||||
if (!r.ok) { // 404 = device has never reported yet
|
||||
setPanelStatus(null, null);
|
||||
return;
|
||||
}
|
||||
const d = (await r.json()).data || {};
|
||||
updateDashboardMetrics(d); // lp/leq/lmax/ln1/ln2 (ln guards keep cached percentiles)
|
||||
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
|
||||
setPanelStatus(measuring, d.last_seen);
|
||||
} catch (e) {
|
||||
console.warn('Panel cache prefill failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Seed the chart from the downsampled DOD trail so it shows recent trend on open.
|
||||
async function backfillDashboardChart(unitId) {
|
||||
try {
|
||||
const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/history?hours=2`);
|
||||
if (!r.ok) return;
|
||||
const readings = (await r.json()).readings || [];
|
||||
const cd = window.dashboardChartData;
|
||||
if (!cd) return;
|
||||
for (const row of readings) {
|
||||
// Trail timestamps are naive UTC; append 'Z' to render in local time
|
||||
// consistently with the live frames (which use local Date.now()).
|
||||
cd.timestamps.push(row.timestamp ? new Date(row.timestamp + 'Z').toLocaleTimeString() : '');
|
||||
cd.lp.push(numOrNull(row.lp));
|
||||
cd.leq.push(numOrNull(row.leq));
|
||||
cd.ln1.push(numOrNull(row.ln1));
|
||||
cd.ln2.push(numOrNull(row.ln2));
|
||||
}
|
||||
if (window.dashboardChart) {
|
||||
window.dashboardChart.data.labels = cd.timestamps;
|
||||
window.dashboardChart.data.datasets[0].data = cd.lp;
|
||||
window.dashboardChart.data.datasets[1].data = cd.leq;
|
||||
window.dashboardChart.data.datasets[2].data = cd.ln1;
|
||||
window.dashboardChart.data.datasets[3].data = cd.ln2;
|
||||
window.dashboardChart.update('none');
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Panel chart backfill failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Measuring badge + "as of <time> (Xm ago)" freshness, so a cached value is never
|
||||
// mistaken for a live one. measuring: true | false | null(unknown).
|
||||
function setPanelStatus(measuring, lastSeenIso) {
|
||||
const badge = document.getElementById('panel-measuring-badge');
|
||||
const fresh = document.getElementById('panel-freshness');
|
||||
if (badge) {
|
||||
if (measuring === null) {
|
||||
badge.className = 'hidden px-2 py-0.5 text-xs font-medium rounded-full';
|
||||
badge.textContent = '';
|
||||
} else if (measuring) {
|
||||
badge.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
|
||||
badge.textContent = '● Measuring';
|
||||
} else {
|
||||
badge.className = 'px-2 py-0.5 text-xs font-medium rounded-full bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
|
||||
badge.textContent = '■ Stopped';
|
||||
}
|
||||
}
|
||||
if (fresh) fresh.innerHTML = fmtFreshness(lastSeenIso);
|
||||
}
|
||||
|
||||
// Human "x ago" with a staleness hint. Cached timestamps are naive UTC.
|
||||
function fmtFreshness(lastSeenIso) {
|
||||
if (!lastSeenIso) return '<span class="text-gray-400">no cached reading yet</span>';
|
||||
const t = new Date(lastSeenIso.endsWith('Z') ? lastSeenIso : lastSeenIso + 'Z');
|
||||
const secs = Math.max(0, Math.round((Date.now() - t.getTime()) / 1000));
|
||||
let ago, stale = false;
|
||||
if (secs < 10) ago = 'just now';
|
||||
else if (secs < 60) ago = secs + 's ago';
|
||||
else if (secs < 3600) { ago = Math.round(secs / 60) + 'm ago'; stale = secs >= 300; }
|
||||
else { ago = Math.round(secs / 3600) + 'h ago'; stale = true; }
|
||||
const cls = stale ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400';
|
||||
const tag = stale ? ' · cached' : '';
|
||||
return `as of ${t.toLocaleTimeString()} <span class="${cls}">(${ago}${tag})</span>`;
|
||||
}
|
||||
|
||||
// Cache polling: refresh the cards from cache every 15s while the panel is open
|
||||
// and not live-streaming. Pure cache reads — no device contention.
|
||||
function startPanelCachePolling(unitId) {
|
||||
stopPanelCachePolling();
|
||||
window.panelCacheTimer = setInterval(() => {
|
||||
if (window.selectedUnitId) prefillDashboardPanel(window.selectedUnitId);
|
||||
}, 15000);
|
||||
}
|
||||
function stopPanelCachePolling() {
|
||||
if (window.panelCacheTimer) { clearInterval(window.panelCacheTimer); window.panelCacheTimer = null; }
|
||||
}
|
||||
|
||||
// ---- On-demand device refresh (the per-unit + panel refresh buttons) -----
|
||||
|
||||
// One bounded, user-initiated device read: hits the device, updates the cache,
|
||||
// returns the fresh data. Throws on unreachable/disabled.
|
||||
async function forceDeviceRead(unitId) {
|
||||
const r = await fetch(`/api/slmm/${encodeURIComponent(unitId)}/live`);
|
||||
if (!r.ok) {
|
||||
let detail = 'device unreachable';
|
||||
try { detail = (await r.json()).detail || detail; } catch (e) {}
|
||||
throw new Error(detail);
|
||||
}
|
||||
return (await r.json()).data || {};
|
||||
}
|
||||
|
||||
function spinIcon(el, on) {
|
||||
if (el) el.classList.toggle('animate-spin', on);
|
||||
}
|
||||
|
||||
function applyFreshReadToPanel(unitId, d) {
|
||||
if (window.selectedUnitId !== unitId) return;
|
||||
updateDashboardMetrics(d);
|
||||
const measuring = d.measurement_state === 'Start' || d.measurement_state === 'Measure';
|
||||
// The read just happened, so "now" is the accurate freshness even if the
|
||||
// /live payload doesn't echo last_seen.
|
||||
setPanelStatus(measuring, d.last_seen || new Date().toISOString());
|
||||
}
|
||||
|
||||
// Device-list row refresh button.
|
||||
async function refreshSlmUnit(unitId, btn) {
|
||||
const icon = btn ? btn.querySelector('svg') : null;
|
||||
if (btn) btn.disabled = true;
|
||||
spinIcon(icon, true);
|
||||
try {
|
||||
const d = await forceDeviceRead(unitId);
|
||||
applyFreshReadToPanel(unitId, d);
|
||||
// Reload the list so the row's badge + last-check reflect the new cache.
|
||||
if (typeof htmx !== 'undefined' && document.getElementById('slm-devices-list')) {
|
||||
htmx.trigger('#slm-devices-list', 'load');
|
||||
}
|
||||
if (window.showToast) window.showToast(`${unitId} refreshed`, 'success');
|
||||
} catch (e) {
|
||||
if (window.showToast) window.showToast(`${unitId}: ${e.message}`, 'error');
|
||||
else console.warn('refresh failed', e);
|
||||
} finally {
|
||||
if (btn) btn.disabled = false;
|
||||
spinIcon(icon, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Panel header refresh button (refreshes the unit the panel is showing).
|
||||
async function refreshDashboardPanel() {
|
||||
const unitId = window.selectedUnitId;
|
||||
if (!unitId) return;
|
||||
const icon = document.getElementById('panel-refresh-icon');
|
||||
spinIcon(icon, true);
|
||||
try {
|
||||
const d = await forceDeviceRead(unitId);
|
||||
applyFreshReadToPanel(unitId, d);
|
||||
updateDashboardChart(d); // append the fresh point to the chart
|
||||
if (typeof htmx !== 'undefined' && document.getElementById('slm-devices-list')) {
|
||||
htmx.trigger('#slm-devices-list', 'load');
|
||||
}
|
||||
if (window.showToast) window.showToast(`${unitId} refreshed`, 'success');
|
||||
} catch (e) {
|
||||
if (window.showToast) window.showToast(`${unitId}: ${e.message}`, 'error');
|
||||
} finally {
|
||||
spinIcon(icon, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Configuration modal - use unified SLM settings modal
|
||||
function openDeviceConfigModal(unitId) {
|
||||
// Call the unified modal function from slm_settings_modal.html
|
||||
|
||||
Reference in New Issue
Block a user