reanimator/chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(viewer): add severity filtering for event logs

Browse Source
This commit is contained in:
Mikhail Chusavitin
2026-04-01 16:19:25 +03:00
parent ac8120c8ab
commit 8675791805
6 changed files with 306 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/static/view.css
View File

@@ -326,6 +326,45 @@ body {
border-bottom: 1px solid var(--border-lite);
}
.table-block {
display: block;
}
.table-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.table-toolbar-label {
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.table-severity-filter {
min-width: 180px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 7px 10px;
background: var(--surface);
color: var(--ink);
font: inherit;
}
.table-severity-filter:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.table-filter-empty {
margin: 10px 0 0;
color: var(--muted);
}
/* ── Status ──────────────────────────────────────── */
.status-badge {
@@ -370,4 +409,14 @@ body {
.section-card-full {
grid-column: auto;
}
.table-toolbar {
align-items: stretch;
flex-direction: column;
}
.table-severity-filter {
min-width: 0;
width: 100%;
}
}

31
web/static/view.js Normal file
View File

@@ -0,0 +1,31 @@
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".table-filterable").forEach((container) => {
const select = container.querySelector(".table-severity-filter");
if (!select) {
return;
}
const rows = Array.from(container.querySelectorAll("tbody tr[data-severity-row='true']"));
const emptyNotice = container.querySelector(".table-filter-empty");
const applyFilter = () => {
const selected = select.value;
let visibleCount = 0;
rows.forEach((row) => {
const matches = selected === "" || row.dataset.severity === selected;
row.hidden = !matches;
if (matches) {
visibleCount += 1;
}
});
if (emptyNotice) {
emptyNotice.hidden = visibleCount !== 0;
}
};
select.addEventListener("change", applyFilter);
applyFilter();
});
});

109
web/templates/view.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title }}</title>
<link rel="stylesheet" href="/static/view.css">
<script defer src="/static/view.js"></script>
</head>
<body>
<header class="page-header">
@@ -63,43 +64,18 @@
{{ if eq .Kind "table" }}
{{ $section := . }}
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr>
{{ $row := . }}
{{ range $section.Columns }}
<td>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
{{ else }}
{{ range joinLines $value }}
<div>{{ . }}</div>
{{ end }}
{{ end }}
</td>
{{ end }}
</tr>
<div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
{{ if .SeverityOptions }}
<div class="table-toolbar">
<label class="table-toolbar-label" for="{{ .ID }}-severity-filter">Severity</label>
<select class="table-severity-filter" id="{{ .ID }}-severity-filter">
<option value="">All severities</option>
{{ range .SeverityOptions }}
<option value="{{ .Value }}">{{ .Label }}</option>
{{ end }}
</tbody>
</table>
</div>
{{ end }}
{{ if eq .Kind "grouped_tables" }}
{{ range .Groups }}
<div class="table-group">
<h3>{{ .Title }}</h3>
{{ $group := . }}
</select>
</div>
{{ end }}
<div class="table-wrap">
<table class="data-table">
<thead>
@@ -111,9 +87,9 @@
</thead>
<tbody>
{{ range .Items }}
<tr>
<tr data-severity-row="true" data-severity="{{ .Severity }}">
{{ $row := . }}
{{ range $group.Columns }}
{{ range $section.Columns }}
<td>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
@@ -130,6 +106,63 @@
</tbody>
</table>
</div>
{{ if .SeverityOptions }}
<p class="table-filter-empty" hidden>No rows match the selected severity.</p>
{{ end }}
</div>
{{ end }}
{{ if eq .Kind "grouped_tables" }}
{{ range .Groups }}
<div class="table-group">
<h3>{{ .Title }}</h3>
{{ $group := . }}
<div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
{{ if .SeverityOptions }}
<div class="table-toolbar">
<label class="table-toolbar-label">Severity</label>
<select class="table-severity-filter">
<option value="">All severities</option>
{{ range .SeverityOptions }}
<option value="{{ .Value }}">{{ .Label }}</option>
{{ end }}
</select>
</div>
{{ end }}
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th>{{ . }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr data-severity-row="true" data-severity="{{ .Severity }}">
{{ $row := . }}
{{ range $group.Columns }}
<td>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
{{ else }}
{{ range joinLines $value }}
<div>{{ . }}</div>
{{ end }}
{{ end }}
</td>
{{ end }}
</tr>
{{ end }}
</tbody>
</table>
</div>
{{ if .SeverityOptions }}
<p class="table-filter-empty" hidden>No rows match the selected severity.</p>
{{ end }}
</div>
</div>
{{ end }}
{{ end }}