andreas/heartbeat
Public Access
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 44 Wiki Activity

feat: add host, level, and message filters to Log of Events

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Andreas Wrede
2026-05-12 08:29:26 -04:00
parent f67fa9baff
commit 708508157f
1 changed files with 73 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hbd/server/templates/live.html
+73 -2
View File
@@ -201,6 +201,43 @@
.log-recover .log-level { color: #2a7a2a; }
.log-info .log-level { color: #555; }
.log-section-header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
background: white;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
padding: 8px 15px;
}
.log-section-title {
font-size: 1.2em;
font-weight: bold;
color: #333;
white-space: nowrap;
}
.log-filter-bar {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.log-filter-bar input[type="text"],
.log-filter-bar select {
padding: 3px 7px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.85em;
color: #333;
}
.log-filter-bar input[type="text"] { width: 110px; }
/* Modal for connection status messages */
.connection-modal {
display: none;
@@ -445,6 +482,22 @@
updateRowAlert(name_idx[data.name], data);
}
function applyLogFilters() {
var hostFilter = document.getElementById('filter-host').value.toLowerCase().trim();
var levelFilter = document.getElementById('filter-level').value;
var msgFilter = document.getElementById('filter-msg').value.toLowerCase().trim();
document.querySelectorAll('#messages .log-entry').forEach(function(entry) {
var show = true;
if (hostFilter && !(entry.dataset.host || '').toLowerCase().includes(hostFilter)) show = false;
if (levelFilter && entry.dataset.level !== levelFilter) show = false;
if (msgFilter) {
var msgEl = entry.querySelector('.log-msg');
if (!msgEl || !msgEl.textContent.toLowerCase().includes(msgFilter)) show = false;
}
entry.style.display = show ? '' : 'none';
});
}
function WS_Connect() {
if ("WebSocket" in window) {
//N.B: subprotocol field causes chrome to error 1006
@@ -479,7 +532,8 @@
var ts_str = _d.getFullYear() + '-' + _p(_d.getMonth()+1) + '-' + _p(_d.getDate())
+ ' ' + _p(_d.getHours()) + ':' + _p(_d.getMinutes()) + ':' + _p(_d.getSeconds());
var lvl = (msg.level || "INFO").toLowerCase();
var html = '<div class="log-entry log-' + lvl + '">';
var hostVal = msg.host || '';
var html = '<div class="log-entry log-' + lvl + '" data-level="' + lvl + '" data-host="' + hostVal.replace(/"/g, '&quot;') + '">';
html += '<span class="log-ts">' + ts_str + '</span>';
html += '<span class="log-level">' + (msg.level || "") + '</span>';
if (msg.host) html += '<span class="log-host">' + msg.host + '</span>';
@@ -487,6 +541,7 @@
html += '<span class="log-msg">' + msg.message + '</span>';
html += '</div>';
msgs.insertAdjacentHTML("afterbegin", html);
applyLogFilters();
}
cnt++;
};
@@ -575,7 +630,20 @@
</div>
<div class="log-section">
<h2>Log of Events</h2>
<div class="log-section-header">
<span class="log-section-title">Log of Events</span>
<div class="log-filter-bar">
<input type="text" id="filter-host" placeholder="Host…" title="Filter by host" />
<select id="filter-level" title="Filter by level">
<option value="">All levels</option>
<option value="info">INFO</option>
<option value="warning">WARNING</option>
<option value="critical">CRITICAL</option>
<option value="recover">RECOVER</option>
</select>
<input type="text" id="filter-msg" placeholder="Message…" title="Filter by message text" />
</div>
</div>
<div id="messages"></div>
</div>
</div>
@@ -591,6 +659,9 @@
<script>
setup();
document.getElementById('filter-host').addEventListener('input', applyLogFilters);
document.getElementById('filter-level').addEventListener('change', applyLogFilters);
document.getElementById('filter-msg').addEventListener('input', applyLogFilters);
</script>
</body>
</html>