serversdown
0914cf0a75
Internal (SLM detail page): live alarm-state badge in the Alerts header
(● N active / ✓ all clear), a History list of fired events (onset → clear, peak
dB, ack status) with an Ack button, refreshed every 20s. Reads the existing SLMM
/alerts/events + /ack via the proxy.
Portal (client, read-only, scoped): new GET /portal/api/location/{id}/events —
ownership-gated, returns a scrubbed projection (rule_name/metric/threshold/onset/
peak/clear/status only; no internal ids or ack-by) plus an `active` count. The
location page shows a red "Currently above threshold" banner when active and a
read-only breach history, polled every 20s. No ack on the client side.
Verified: portal.py compiles; both scripts balance; both templates parse.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
379 lines
20 KiB
HTML
379 lines
20 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}{{ unit_id }} - Sound Level Meter{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="mb-6">
|
||
{% if from_project and project %}
|
||
<nav class="flex items-center space-x-2 text-sm">
|
||
<a href="/projects" class="text-gray-500 hover:text-seismo-orange">Projects</a>
|
||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||
</svg>
|
||
<a href="/projects/{{ from_project }}" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
|
||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
{{ project.name }}
|
||
</a>
|
||
</nav>
|
||
{% else %}
|
||
<a href="#" onclick="goBack(event)" class="text-seismo-orange hover:text-seismo-orange-dark flex items-center">
|
||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
<span id="back-link-text">Back to Sound Level Meters</span>
|
||
</a>
|
||
{% endif %}
|
||
|
||
<script>
|
||
function goBack(event) {
|
||
event.preventDefault();
|
||
|
||
// Check if there's a previous page in history
|
||
// and it's from the same site (not external)
|
||
if (window.history.length > 1 && document.referrer) {
|
||
const referrer = new URL(document.referrer);
|
||
const current = new URL(window.location.href);
|
||
|
||
// If referrer is from the same origin, go back
|
||
if (referrer.origin === current.origin) {
|
||
window.history.back();
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Otherwise, go to SLM dashboard
|
||
window.location.href = '/sound-level-meters';
|
||
}
|
||
|
||
// Update the back link text based on referrer
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const backText = document.getElementById('back-link-text');
|
||
if (backText && document.referrer) {
|
||
try {
|
||
const referrer = new URL(document.referrer);
|
||
const current = new URL(window.location.href);
|
||
|
||
// Only update if from same origin
|
||
if (referrer.origin === current.origin) {
|
||
if (referrer.pathname.includes('/sound-level-meters')) {
|
||
backText.textContent = 'Back to Sound Level Meters';
|
||
} else if (referrer.pathname.includes('/roster')) {
|
||
backText.textContent = 'Back to Roster';
|
||
} else if (referrer.pathname.includes('/projects')) {
|
||
backText.textContent = 'Back to Projects';
|
||
} else if (referrer.pathname === '/') {
|
||
backText.textContent = 'Back to Dashboard';
|
||
}
|
||
}
|
||
} catch (e) {
|
||
// Invalid referrer, keep default text
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</div>
|
||
|
||
<div class="mb-8">
|
||
<div class="flex justify-between items-start">
|
||
<div>
|
||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white flex items-center">
|
||
<svg class="w-8 h-8 mr-3 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3">
|
||
</path>
|
||
</svg>
|
||
{{ unit_id }}
|
||
</h1>
|
||
<p class="text-gray-600 dark:text-gray-400 mt-1">
|
||
{{ unit.slm_model or 'NL-43' }} Sound Level Meter
|
||
</p>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="px-3 py-1 rounded-full text-sm font-medium
|
||
{% if unit.deployed %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
|
||
{% else %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% endif %}">
|
||
{% if unit.deployed %}Deployed{% else %}Benched{% endif %}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Command Center -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
|
||
<div id="slm-command-center"
|
||
hx-get="/api/slm-dashboard/live-view/{{ unit_id }}"
|
||
hx-trigger="load"
|
||
hx-swap="innerHTML">
|
||
<div class="text-center py-8 text-gray-500">
|
||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-seismo-orange mx-auto mb-4"></div>
|
||
<p>Loading command center...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alerts -->
|
||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mt-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div>
|
||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white flex items-center gap-2">Alerts
|
||
<span id="alert-state-badge" class="hidden text-xs px-2 py-0.5 rounded-full"></span>
|
||
</h2>
|
||
<p class="text-xs text-gray-500 dark:text-gray-400">Threshold rules evaluated on this device's live feed.</p>
|
||
</div>
|
||
<button onclick="openAlertForm()" type="button"
|
||
class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">+ Add alert</button>
|
||
</div>
|
||
|
||
<div id="alert-rules-list" class="space-y-2"></div>
|
||
|
||
<!-- create / edit form -->
|
||
<div id="alert-form" class="hidden mt-4 p-4 rounded-lg border border-slate-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-900/40">
|
||
<input type="hidden" id="ar-id">
|
||
<div class="grid sm:grid-cols-2 gap-3 mb-3">
|
||
<div>
|
||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Name</label>
|
||
<input id="ar-name" type="text" placeholder="e.g. Night noise limit"
|
||
class="w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm text-gray-800 dark:text-gray-200">
|
||
</div>
|
||
<label class="flex items-end gap-2 text-sm text-gray-700 dark:text-gray-300 pb-1">
|
||
<input type="checkbox" id="ar-enabled" checked class="rounded"> Enabled
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||
<span>Alert when</span>
|
||
<select id="ar-metric" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||
<option value="leq">Leq</option><option value="lp">Lp</option>
|
||
<option value="lmax">Lmax</option><option value="lpeak">Lpeak</option>
|
||
<option value="ln1">L1</option><option value="ln2">L10</option>
|
||
</select>
|
||
<span>is</span>
|
||
<select id="ar-comparison" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||
<option value="above">above</option><option value="below">below</option>
|
||
</select>
|
||
<input id="ar-threshold" type="number" step="0.1" placeholder="65"
|
||
class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>dB</span>
|
||
<span>for</span>
|
||
<input id="ar-duration" type="number" min="0" value="0"
|
||
class="w-20 px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"> <span>seconds</span>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<label class="inline-flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||
<input type="checkbox" id="ar-sched-on" onchange="toggleSchedule()" class="rounded"> Only during certain hours
|
||
</label>
|
||
<div id="ar-sched" class="hidden mt-2 flex flex-wrap items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
||
<span>from</span><input id="ar-start" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||
<span>to</span><input id="ar-end" type="time" class="px-2 py-1.5 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800">
|
||
<span class="ml-2">on</span>
|
||
<span id="ar-days" class="flex gap-1"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<details class="mt-3 text-sm text-gray-600 dark:text-gray-400">
|
||
<summary class="cursor-pointer select-none">Advanced</summary>
|
||
<div class="mt-2 flex flex-wrap items-center gap-3">
|
||
<span>Clear margin</span><input id="ar-margin" type="number" step="0.1" value="2"
|
||
class="w-16 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>dB (hysteresis)</span>
|
||
<span>Cooldown</span><input id="ar-cooldown" type="number" min="0" value="300"
|
||
class="w-20 px-2 py-1 rounded border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800"><span>s</span>
|
||
</div>
|
||
</details>
|
||
|
||
<div class="mt-4 flex gap-2">
|
||
<button onclick="saveAlertRule()" type="button" class="px-3 py-1.5 text-sm rounded-lg bg-seismo-orange text-white hover:bg-orange-600">Save</button>
|
||
<button onclick="closeAlertForm()" type="button" class="px-3 py-1.5 text-sm rounded-lg border border-slate-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-700">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alert history -->
|
||
<div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">History</h3>
|
||
<button onclick="loadAlertEvents()" type="button" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">Refresh</button>
|
||
</div>
|
||
<div id="alert-events" class="space-y-2"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const ALERT_UNIT = "{{ unit_id }}";
|
||
const METRIC_LABELS = { leq: 'Leq', lp: 'Lp', lmax: 'Lmax', lpeak: 'Lpeak', ln1: 'L1', ln2: 'L10' };
|
||
const DAY_LABELS = ['M', 'T', 'W', 'T', 'F', 'S', 'S']; // Mon=0 .. Sun=6
|
||
|
||
// Render the day checkboxes once.
|
||
(function () {
|
||
const wrap = document.getElementById('ar-days');
|
||
DAY_LABELS.forEach((lbl, i) => {
|
||
const l = document.createElement('label');
|
||
l.className = 'inline-flex items-center gap-0.5';
|
||
l.innerHTML = `<input type="checkbox" id="ar-day-${i}" class="rounded"><span class="ml-0.5">${lbl}</span>`;
|
||
wrap.appendChild(l);
|
||
});
|
||
})();
|
||
|
||
function condText(r) {
|
||
const m = METRIC_LABELS[r.metric] || r.metric;
|
||
let s = `${m} ${r.comparison} ${r.threshold_db} dB`;
|
||
if (r.duration_s) s += ` for ${r.duration_s}s`;
|
||
if (r.schedule_start && r.schedule_end) s += ` · ${r.schedule_start}–${r.schedule_end}`;
|
||
return s;
|
||
}
|
||
|
||
function renderRule(r) {
|
||
const row = document.createElement('div');
|
||
row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700';
|
||
row.innerHTML = `<div class="min-w-0">
|
||
<div class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">${r.name}${r.enabled ? '' : ' <span class="text-xs text-gray-400">(disabled)</span>'}</div>
|
||
<div class="text-xs text-gray-500">${condText(r)}</div></div>
|
||
<div class="shrink-0 flex items-center gap-3 text-xs">
|
||
<button data-act="edit" class="text-seismo-orange hover:underline">Edit</button>
|
||
<button data-act="del" class="text-red-600 hover:underline">Delete</button>
|
||
</div>`;
|
||
row.querySelector('[data-act="edit"]').onclick = () => openAlertForm(r);
|
||
row.querySelector('[data-act="del"]').onclick = () => deleteAlertRule(r.id);
|
||
return row;
|
||
}
|
||
|
||
async function loadAlertRules() {
|
||
const list = document.getElementById('alert-rules-list');
|
||
try {
|
||
const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules`)).json();
|
||
const rules = j.rules || [];
|
||
if (!rules.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts configured.</div>'; return; }
|
||
list.innerHTML = '';
|
||
rules.forEach(r => list.appendChild(renderRule(r)));
|
||
} catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load alerts.</div>'; }
|
||
}
|
||
|
||
function toggleSchedule() {
|
||
document.getElementById('ar-sched').classList.toggle('hidden', !document.getElementById('ar-sched-on').checked);
|
||
}
|
||
|
||
function openAlertForm(r) {
|
||
document.getElementById('alert-form').classList.remove('hidden');
|
||
document.getElementById('ar-id').value = r ? r.id : '';
|
||
document.getElementById('ar-name').value = r ? r.name : '';
|
||
document.getElementById('ar-metric').value = r ? r.metric : 'leq';
|
||
document.getElementById('ar-comparison').value = r ? r.comparison : 'above';
|
||
document.getElementById('ar-threshold').value = (r && r.threshold_db != null) ? r.threshold_db : '';
|
||
document.getElementById('ar-duration').value = r ? r.duration_s : 0;
|
||
document.getElementById('ar-enabled').checked = r ? r.enabled : true;
|
||
document.getElementById('ar-margin').value = r ? r.clear_margin_db : 2;
|
||
document.getElementById('ar-cooldown').value = r ? r.cooldown_s : 300;
|
||
const hasSched = !!(r && r.schedule_start && r.schedule_end);
|
||
document.getElementById('ar-sched-on').checked = hasSched;
|
||
document.getElementById('ar-start').value = hasSched ? r.schedule_start : '';
|
||
document.getElementById('ar-end').value = hasSched ? r.schedule_end : '';
|
||
const days = (r && r.schedule_days) ? r.schedule_days.split(',') : [];
|
||
DAY_LABELS.forEach((_, i) => { document.getElementById('ar-day-' + i).checked = days.includes(String(i)); });
|
||
toggleSchedule();
|
||
}
|
||
function closeAlertForm() { document.getElementById('alert-form').classList.add('hidden'); }
|
||
|
||
async function saveAlertRule() {
|
||
const id = document.getElementById('ar-id').value;
|
||
const threshold = parseFloat(document.getElementById('ar-threshold').value);
|
||
if (isNaN(threshold)) { if (window.showToast) showToast('Enter a threshold', 'error'); return; }
|
||
const schedOn = document.getElementById('ar-sched-on').checked;
|
||
const days = DAY_LABELS.map((_, i) => document.getElementById('ar-day-' + i).checked ? i : null).filter(v => v !== null);
|
||
const payload = {
|
||
name: document.getElementById('ar-name').value || 'Alert',
|
||
metric: document.getElementById('ar-metric').value,
|
||
comparison: document.getElementById('ar-comparison').value,
|
||
threshold_db: threshold,
|
||
duration_s: parseInt(document.getElementById('ar-duration').value) || 0,
|
||
clear_margin_db: parseFloat(document.getElementById('ar-margin').value) || 2,
|
||
cooldown_s: parseInt(document.getElementById('ar-cooldown').value) || 300,
|
||
schedule_start: schedOn ? (document.getElementById('ar-start').value || null) : null,
|
||
schedule_end: schedOn ? (document.getElementById('ar-end').value || null) : null,
|
||
schedule_days: (schedOn && days.length) ? days.join(',') : null,
|
||
enabled: document.getElementById('ar-enabled').checked,
|
||
};
|
||
const url = id ? `/api/slmm/${ALERT_UNIT}/alerts/rules/${id}` : `/api/slmm/${ALERT_UNIT}/alerts/rules`;
|
||
try {
|
||
const r = await fetch(url, { method: id ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
|
||
if (!r.ok) throw new Error('save failed');
|
||
closeAlertForm(); loadAlertRules();
|
||
if (window.showToast) showToast('Alert saved', 'success');
|
||
} catch (e) { if (window.showToast) showToast('Failed to save alert', 'error'); }
|
||
}
|
||
|
||
async function deleteAlertRule(id) {
|
||
if (!confirm('Delete this alert rule?')) return;
|
||
try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/rules/${id}`, { method: 'DELETE' }); loadAlertRules(); }
|
||
catch (e) { if (window.showToast) showToast('Failed to delete', 'error'); }
|
||
}
|
||
|
||
// ---- alert history (events) ----------------------------------------------
|
||
|
||
function fmtAlertTime(iso) {
|
||
if (!iso) return '';
|
||
return new Date(iso.endsWith('Z') ? iso : iso + 'Z').toLocaleString();
|
||
}
|
||
|
||
function updateAlertState(events) {
|
||
const badge = document.getElementById('alert-state-badge');
|
||
badge.classList.remove('hidden');
|
||
const active = events.filter(e => e.status === 'active').length;
|
||
if (active) {
|
||
badge.textContent = `● ${active} active`;
|
||
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
|
||
} else {
|
||
badge.textContent = '✓ All clear';
|
||
badge.className = 'text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
|
||
}
|
||
}
|
||
|
||
function renderEvent(e) {
|
||
const m = METRIC_LABELS[e.metric] || e.metric;
|
||
const active = e.status === 'active';
|
||
const row = document.createElement('div');
|
||
row.className = 'flex items-center justify-between gap-2 px-3 py-2 rounded-lg border ' +
|
||
(active ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/20'
|
||
: 'border-slate-200 dark:border-slate-700');
|
||
const when = active ? `since ${fmtAlertTime(e.onset_at)}`
|
||
: `${fmtAlertTime(e.onset_at)} → ${fmtAlertTime(e.clear_at)}`;
|
||
const peak = (e.peak_value != null) ? ` · peak ${e.peak_value} dB` : '';
|
||
const ack = e.acknowledged_at ? ` · ack'd${e.acknowledged_by ? ' by ' + e.acknowledged_by : ''}` : '';
|
||
row.innerHTML = `<div class="min-w-0">
|
||
<div class="text-sm truncate">
|
||
<span class="${active ? 'text-red-600 dark:text-red-400 font-medium' : 'text-gray-800 dark:text-gray-200'}">${e.rule_name || 'Alert'}</span>
|
||
<span class="text-xs text-gray-500"> · ${m} ${e.threshold_db} dB</span>
|
||
</div>
|
||
<div class="text-xs text-gray-500">${when}${peak}${ack}</div></div>`;
|
||
if (!e.acknowledged_at) {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'shrink-0 text-xs text-seismo-orange hover:underline';
|
||
btn.textContent = 'Ack';
|
||
btn.onclick = () => ackEvent(e.id);
|
||
row.appendChild(btn);
|
||
}
|
||
return row;
|
||
}
|
||
|
||
async function loadAlertEvents() {
|
||
const list = document.getElementById('alert-events');
|
||
try {
|
||
const j = await (await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events?limit=50`)).json();
|
||
const events = j.events || [];
|
||
updateAlertState(events);
|
||
if (!events.length) { list.innerHTML = '<div class="text-sm text-gray-400">No alerts have fired.</div>'; return; }
|
||
list.innerHTML = '';
|
||
events.forEach(e => list.appendChild(renderEvent(e)));
|
||
} catch (e) { list.innerHTML = '<div class="text-sm text-red-500">Failed to load history.</div>'; }
|
||
}
|
||
|
||
async function ackEvent(id) {
|
||
try { await fetch(`/api/slmm/${ALERT_UNIT}/alerts/events/${id}/ack`, { method: 'POST' }); loadAlertEvents(); }
|
||
catch (e) { if (window.showToast) showToast('Failed to acknowledge', 'error'); }
|
||
}
|
||
|
||
loadAlertRules();
|
||
loadAlertEvents();
|
||
setInterval(loadAlertEvents, 20000); // surface new breaches / clears
|
||
</script>
|
||
{% endblock %}
|