feat: remove log section from live dashboard (moved to /log)
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -74,33 +74,12 @@
|
||||
.tipbox .ov { color: var(--st-warn); font-weight: 700; }
|
||||
.tipbox .meta { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--st-line-soft); font-size: 11px; color: var(--st-faint); }
|
||||
|
||||
/* ── event log ── */
|
||||
.logrow {
|
||||
display: grid; grid-template-columns: 130px 74px 150px minmax(0,1fr);
|
||||
gap: 4px 14px; align-items: baseline;
|
||||
padding: 4px 14px; border-bottom: 1px solid var(--st-line-soft);
|
||||
font-family: var(--st-mono); font-size: 11.5px;
|
||||
}
|
||||
.logrow:last-child { border-bottom: none; }
|
||||
.logrow .t { color: var(--st-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.logrow .h { color: var(--st-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.logrow .m { color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.filters { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
|
||||
.filters input, .filters select {
|
||||
font: 11px var(--st-mono); color: var(--st-ink); background: var(--st-surface);
|
||||
border: 1px solid var(--st-line); border-radius: 999px; padding: 3px 10px;
|
||||
}
|
||||
|
||||
.empty { padding: 24px 14px; text-align: center; color: var(--st-faint); font-size: 12.5px; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.hhead { display: none; }
|
||||
.hrow { grid-template-columns: minmax(0,1fr) auto auto; padding: 8px 12px; }
|
||||
.hrow .num { text-align: left; }
|
||||
.hrow .since { display: none; }
|
||||
.lastalert { grid-column: 1 / -1; }
|
||||
.logrow { grid-template-columns: 66px minmax(0,1fr); }
|
||||
.logrow .lvlc, .logrow .h { display: none; }
|
||||
.tipbox { left: auto; right: 0; }
|
||||
}
|
||||
</style>
|
||||
@@ -134,34 +113,11 @@
|
||||
<div id="host-rows"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="st">
|
||||
<div class="sec-head">
|
||||
<h2>log<span class="colon">:</span></h2>
|
||||
<span class="sub">connectivity and alert events</span>
|
||||
<span class="filters">
|
||||
<input type="text" id="filter-host" placeholder="host">
|
||||
<select id="filter-level">
|
||||
<option value="">level</option>
|
||||
<option value="info">INFO</option>
|
||||
<option value="warning">WARNING</option>
|
||||
<option value="critical">CRITICAL</option>
|
||||
<option value="recover">RECOVER</option>
|
||||
<option value="unknown">UNKNOWN</option>
|
||||
</select>
|
||||
<input type="text" id="filter-msg" placeholder="message">
|
||||
</span>
|
||||
</div>
|
||||
<div class="list" id="messages">
|
||||
<div class="empty">Waiting for events…</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var HBD_VERSION = "{{ hbd_version }}";
|
||||
var INITIAL_HOSTS = {{ hosts | tojson }};
|
||||
var MAX_LOG_ROWS = 400;
|
||||
|
||||
var hostData = {}; // name -> latest stateinfo payload
|
||||
var lastAlert = {}; // name -> {level, message, ts}
|
||||
@@ -391,48 +347,6 @@
|
||||
} catch (_) { /* dashboard still works without the seed */ }
|
||||
}
|
||||
|
||||
// ---- event log ---------------------------------------------------------
|
||||
function logRowHtml(msg) {
|
||||
var lvl = (msg.level || 'INFO');
|
||||
var lc = lvl.toLowerCase();
|
||||
var chipCls = lc === 'critical' ? 'crit' : (lc === 'warning' ? 'warn' : (lc === 'recover' ? 'ok' : ''));
|
||||
var short = lc === 'critical' ? 'CRIT' : (lc === 'warning' ? 'WARN' : escHtml(lvl));
|
||||
return '<div class="logrow" data-level="' + escHtml(lc) + '" data-host="' + escHtml(msg.host || '') + '">'
|
||||
+ '<span class="t">' + fmtClock(msg.ts) + '</span>'
|
||||
+ '<span class="lvlc"><span class="chip ' + chipCls + '">' + short + '</span></span>'
|
||||
+ '<span class="h">' + escHtml(msg.host || '') + (msg.service ? ' · ' + escHtml(msg.service) : '') + '</span>'
|
||||
+ '<span class="m">' + escHtml(msg.message || '') + '</span>'
|
||||
+ '</div>';
|
||||
}
|
||||
|
||||
function addLogRow(msg, isHistory) {
|
||||
var box = document.getElementById('messages');
|
||||
var placeholder = box.querySelector('.empty');
|
||||
if (placeholder) placeholder.remove();
|
||||
box.insertAdjacentHTML(isHistory ? 'beforeend' : 'afterbegin', logRowHtml(msg));
|
||||
while (box.children.length > MAX_LOG_ROWS) box.lastElementChild.remove();
|
||||
applyLogFilters();
|
||||
}
|
||||
|
||||
function applyLogFilters() {
|
||||
var hostF = document.getElementById('filter-host').value.toLowerCase().trim();
|
||||
var levelF = document.getElementById('filter-level').value;
|
||||
var msgF = document.getElementById('filter-msg').value.toLowerCase().trim();
|
||||
document.querySelectorAll('#messages .logrow').forEach(function (entry) {
|
||||
var show = true;
|
||||
if (hostF && !(entry.dataset.host || '').toLowerCase().includes(hostF)) show = false;
|
||||
if (levelF && entry.dataset.level !== levelF) show = false;
|
||||
if (msgF) {
|
||||
var m = entry.querySelector('.m');
|
||||
if (!m || !m.textContent.toLowerCase().includes(msgF)) show = false;
|
||||
}
|
||||
entry.style.display = show ? '' : 'none';
|
||||
});
|
||||
}
|
||||
document.getElementById('filter-host').addEventListener('input', applyLogFilters);
|
||||
document.getElementById('filter-level').addEventListener('change', applyLogFilters);
|
||||
document.getElementById('filter-msg').addEventListener('input', applyLogFilters);
|
||||
|
||||
// ---- websocket -----------------------------------------------------------
|
||||
function setWsStatus(ok) {
|
||||
var el = document.getElementById('ws-status');
|
||||
@@ -460,7 +374,6 @@
|
||||
updateHost(state.data);
|
||||
} else if (state.type === "message") {
|
||||
var msg = state.data;
|
||||
addLogRow(msg, !!state.history);
|
||||
noteAlert(msg.host, msg.level, msg.message, msg.ts);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user