Compare commits

6 Commits

14 changed files with 459 additions and 65 deletions

View File

@@ -2,6 +2,8 @@
`chart` is a small read-only web viewer for Reanimator hardware JSON snapshots.
Version: `1.0`
It is intended to be embedded into other Go applications that collect audit data in different ways and want a consistent HTML view of the resulting Reanimator JSON.
## Integration

2
bible

Submodule bible updated: 5a69e0bba8...d2600f1279

View File

@@ -43,7 +43,8 @@ For array sections:
## Special Field Handling
- `status` is rendered as a colored badge
- `status` is rendered as a colored badge; in table sections it may collapse to an icon-only presentation column
- `severity` may render as both its source text field and a separate icon-only leading table column
- arrays such as `mac_addresses` may be rendered as line-separated values or badges inside one cell
- nested values such as `status_history` may be rendered in expandable detail blocks inside one cell

View File

@@ -15,7 +15,16 @@
1. read the raw `status` value from the payload
2. normalize only for presentation matching (`OK`, `Warning`, `Critical`, `Unknown`, `Empty`)
3. apply status badge class
4. do not change the raw value shown to the user
4. in dense table layouts, render `status` as an icon-only column with an empty header when it improves scanning
5. preserve the raw status value in accessible labeling even when the visible cell shows only a pictogram
## Severity Presentation Flow
1. read the raw `severity` value from the payload
2. map the raw value only to a presentation glyph/color class
3. when a table includes `severity`, add a leftmost icon-only column for it
4. keep the original textual `severity` column visible in the table
5. preserve the raw severity value in accessible labeling for the pictogram cell
## Unknown Field Invariant

View File

@@ -60,4 +60,6 @@ Preferred order:
- tables must remain readable on desktop and mobile
- section navigation must work without JavaScript
- color must not be the only status indicator; always show text
- color must not be the only status indicator; pair it with a shape or glyph
- table `status` columns may use icon-only cells and an empty header when that improves scanability, but the raw status value must remain available via accessible labeling
- table sections with `severity` may add a separate leftmost icon-only column for fast scanning while keeping the textual `severity` field visible

View File

@@ -0,0 +1,31 @@
# Decision: Status Table Columns Use Icon-Only Presentation
**Date:** 2026-04-22
**Status:** active
## Context
Dense hardware tables frequently repeat the same `status` values.
Showing a textual `status` header and textual badges in every row wastes horizontal space and reduces scan speed, especially in sensor subtables.
The viewer still needs to keep status meaning explicit and avoid relying on color alone.
## Decision
Table columns named `status` render as compact icon-only columns.
This includes:
- an empty visible header cell for the `status` column
- a minimal-width table column sized for the pictogram
- a glyph plus color to distinguish state
- accessible labeling that preserves the raw status value without showing repeated text in the cell
Object sections may continue to show status as a regular field value.
## Consequences
- Table layouts gain more room for source fields such as `name`, `model`, and `location`.
- Status meaning remains available to assistive technologies even when the visible cell is icon-only.
- Future table UI work should keep `status` compact instead of reintroducing wide text badges by default.

View File

@@ -82,3 +82,22 @@ func TestStandaloneHandlerRootShowsUploadForm(t *testing.T) {
t.Fatalf("expected standalone handler root to include upload form")
}
}
func TestStaticJSUsesScriptContentType(t *testing.T) {
handler := NewHandler(HandlerOptions{Title: "Reanimator Chart"})
req := httptest.NewRequest(http.MethodGet, "/static/view.js", nil)
rec := httptest.NewRecorder()
handler.ServeHTTP(rec, req)
if rec.Code != http.StatusOK {
t.Fatalf("status = %d, want %d", rec.Code, http.StatusOK)
}
contentType := rec.Header().Get("Content-Type")
if !strings.Contains(contentType, "javascript") {
t.Fatalf("Content-Type = %q, want javascript MIME type", contentType)
}
if !strings.Contains(rec.Body.String(), "DOMContentLoaded") {
t.Fatalf("expected static JS asset body to be served")
}
}

View File

@@ -13,13 +13,14 @@ type pageData struct {
}
type sectionView struct {
ID string
Title string
Kind string
Rows []fieldRow
Columns []string
Items []tableRow
Groups []tableGroupView
ID string
Title string
Kind string
Rows []fieldRow
Columns []string
Items []tableRow
Groups []tableGroupView
SeverityOptions []severityOption
}
type fieldRow struct {
@@ -29,12 +30,19 @@ type fieldRow struct {
type tableRow struct {
Status string
Severity string
Cells map[string]string
RawCells map[string]any
}
type tableGroupView struct {
Title string
Columns []string
Items []tableRow
Title string
Columns []string
Items []tableRow
SeverityOptions []severityOption
}
type severityOption struct {
Value string
Label string
}

View File

@@ -49,6 +49,7 @@ var hiddenTableFields = map[string]struct{}{
const vendorDeviceIDField = "ven:dev"
var commonPreferredColumns = []string{
"severity_icon",
"status",
"slot",
"location",
@@ -252,17 +253,19 @@ func buildTableSection(key string, items []any) sectionView {
status := strings.TrimSpace(cells["status"])
tableRows = append(tableRows, tableRow{
Status: status,
Severity: normalizeSeverity(cells["severity"]),
Cells: cells,
RawCells: row,
})
}
return sectionView{
ID: key,
Title: titleFor(key),
Kind: "table",
Columns: columns,
Items: tableRows,
ID: key,
Title: titleFor(key),
Kind: "table",
Columns: columns,
Items: tableRows,
SeverityOptions: collectSeverityOptions(columns, rows),
}
}
@@ -301,14 +304,16 @@ func buildPCIeSection(items []any) sectionView {
}
items = append(items, tableRow{
Status: strings.TrimSpace(cells["status"]),
Severity: normalizeSeverity(cells["severity"]),
Cells: cells,
RawCells: row,
})
}
groups = append(groups, tableGroupView{
Title: className,
Columns: columns,
Items: items,
Title: className,
Columns: columns,
Items: items,
SeverityOptions: collectSeverityOptions(columns, rows),
})
}
@@ -329,6 +334,9 @@ func collectColumns(section string, rows []map[string]any) []string {
}
seen[key] = struct{}{}
}
if hasSeverity(row) {
seen["severity_icon"] = struct{}{}
}
if hasVendorDeviceID(row) {
seen[vendorDeviceIDField] = struct{}{}
}
@@ -350,6 +358,58 @@ func collectColumns(section string, rows []map[string]any) []string {
return append(columns, extra...)
}
func collectSeverityOptions(columns []string, rows []map[string]any) []severityOption {
if !containsColumn(columns, "severity") {
return nil
}
seen := make(map[string]string)
for _, row := range rows {
label := strings.TrimSpace(formatRowValue("severity", row))
value := normalizeSeverity(label)
if value == "" {
continue
}
if _, ok := seen[value]; ok {
continue
}
seen[value] = canonicalSeverityLabel(label, value)
}
if len(seen) == 0 {
return nil
}
knownOrder := []string{"critical", "warning", "info"}
options := make([]severityOption, 0, len(seen))
for _, value := range knownOrder {
label, ok := seen[value]
if !ok {
continue
}
options = append(options, severityOption{Value: value, Label: label})
delete(seen, value)
}
extraValues := make([]string, 0, len(seen))
for value := range seen {
extraValues = append(extraValues, value)
}
sort.Strings(extraValues)
for _, value := range extraValues {
options = append(options, severityOption{Value: value, Label: seen[value]})
}
return options
}
func containsColumn(columns []string, target string) bool {
for _, column := range columns {
if column == target {
return true
}
}
return false
}
func buildFieldRows(object map[string]any) []fieldRow {
keys := make([]string, 0, len(object))
for key := range object {
@@ -438,12 +498,44 @@ func formatStringValue(value string) string {
}
func formatRowValue(column string, row map[string]any) string {
if column == "severity_icon" {
return strings.TrimSpace(formatValue(row["severity"]))
}
if column == vendorDeviceIDField {
return formatVendorDeviceID(row)
}
return formatValue(row[column])
}
func normalizeSeverity(value string) string {
switch strings.ToLower(strings.TrimSpace(value)) {
case "critical":
return "critical"
case "warning", "warn":
return "warning"
case "info", "informational":
return "info"
default:
return strings.ToLower(strings.TrimSpace(value))
}
}
func canonicalSeverityLabel(raw, normalized string) string {
switch normalized {
case "critical":
return "Critical"
case "warning":
return "Warning"
case "info":
return "Info"
default:
if strings.TrimSpace(raw) == "" {
return ""
}
return strings.TrimSpace(raw)
}
}
func formatVendorDeviceID(value map[string]any) string {
vendorID := strings.TrimSpace(formatValue(value["vendor_id"]))
deviceID := strings.TrimSpace(formatValue(value["device_id"]))
@@ -504,6 +596,10 @@ func hasVendorDeviceID(value map[string]any) bool {
return formatVendorDeviceID(value) != ""
}
func hasSeverity(value map[string]any) bool {
return strings.TrimSpace(formatValue(value["severity"])) != ""
}
func isHiddenTableField(section string, key string) bool {
if isHiddenField(key) {
return true

View File

@@ -47,6 +47,18 @@ func TestRenderHTMLIncludesKnownSectionsAndFields(t *testing.T) {
t.Fatalf("expected rendered html to contain %q", needle)
}
}
for _, needle := range []string{
`<th class="status-column" aria-label="status"></th>`,
`<td class="status-column">`,
`<span class="status-badge status-ok" role="img" aria-label="OK" title="OK"></span>`,
} {
if !strings.Contains(text, needle) {
t.Fatalf("expected rendered html to contain %q", needle)
}
}
if strings.Contains(text, "<th>status</th>") {
t.Fatalf("expected status table headers to be rendered without visible text")
}
if strings.Contains(text, "2026-03-15T12:00:00Z") {
t.Fatalf("expected RFC3339 timestamp to be rendered in human-readable form")
@@ -266,7 +278,64 @@ func TestRenderHTMLGroupsPCIeDevicesByClass(t *testing.T) {
if strings.Contains(text, "<th>device_class</th>") {
t.Fatalf("expected device_class column to be hidden from PCIe tables")
}
if !strings.Contains(text, `<th class="status-column" aria-label="status"></th>`) {
t.Fatalf("expected grouped PCIe tables to render compact status header cells")
}
if !strings.Contains(text, `<span class="status-badge status-warning" role="img" aria-label="Warning" title="Warning"></span>`) {
t.Fatalf("expected grouped PCIe tables to render icon-only status cells with accessible labels")
}
if strings.Index(text, "<h3>Display controller</h3>") > strings.Index(text, "<h3>Network controller</h3>") {
t.Fatalf("expected PCIe class groups to be sorted by device_class")
}
}
func TestRenderHTMLAddsSeverityFilterForEventLogs(t *testing.T) {
snapshot := []byte(`{
"target_host": "event-host",
"hardware": {
"event_logs": [
{
"component_ref": "PSU0",
"event_time": "2026-03-15T12:00:00Z",
"message": "Power restored",
"severity": "Info",
"source": "bmc"
},
{
"component_ref": "PSU1",
"event_time": "2026-03-15T12:05:00Z",
"message": "Power failure",
"severity": "Critical",
"source": "bmc"
}
]
}
}`)
html, err := RenderHTML(snapshot, "Reanimator Chart")
if err != nil {
t.Fatalf("RenderHTML() error = %v", err)
}
text := string(html)
for _, needle := range []string{
"Event Logs",
"All severities",
`<option value="critical">Critical</option>`,
`<option value="info">Info</option>`,
`data-severity="critical"`,
`data-severity="info"`,
`<th class="status-column" aria-label="severity"></th>`,
`<span class="status-badge severity-info" role="img" aria-label="Info" title="Info"></span>`,
`<span class="status-badge severity-critical" role="img" aria-label="Critical" title="Critical"></span>`,
`<th>severity</th>`,
"/static/view.js",
} {
if !strings.Contains(text, needle) {
t.Fatalf("expected rendered html to contain %q", needle)
}
}
if strings.Contains(text, "<th>severity_icon</th>") {
t.Fatalf("expected synthetic severity icon column header to remain visually empty")
}
}

View File

@@ -4,6 +4,7 @@ import (
"embed"
"html/template"
"io/fs"
"mime"
"net/http"
"strings"
)
@@ -12,12 +13,19 @@ import (
var content embed.FS
var pageTemplate = template.Must(template.New("view.html").Funcs(template.FuncMap{
"statusClass": statusClass,
"joinLines": joinLines,
"statusClass": statusClass,
"severityClass": severityClass,
"joinLines": joinLines,
}).ParseFS(content, "templates/view.html"))
var uploadTemplate = template.Must(template.New("upload.html").ParseFS(content, "templates/upload.html"))
func init() {
if err := mime.AddExtensionType(".js", "text/javascript; charset=utf-8"); err != nil {
panic(err)
}
}
func Render(data any) ([]byte, error) {
var out strings.Builder
if err := pageTemplate.ExecuteTemplate(&out, "view.html", data); err != nil {
@@ -59,6 +67,23 @@ func statusClass(value string) string {
}
}
func severityClass(value string) string {
switch strings.ToUpper(strings.TrimSpace(value)) {
case "INFO", "INFORMATIONAL":
return "severity-info"
case "WARNING", "WARN":
return "severity-warning"
case "ERROR":
return "severity-error"
case "CRITICAL", "FATAL":
return "severity-critical"
case "DEBUG", "TRACE":
return "severity-debug"
default:
return "severity-unknown"
}
}
func joinLines(value string) []string {
if strings.TrimSpace(value) == "" {
return nil

View File

@@ -326,6 +326,53 @@ 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);
}
.data-table .status-column {
width: 1%;
white-space: nowrap;
text-align: center;
padding-left: 12px;
padding-right: 12px;
}
/* ── Status ──────────────────────────────────────── */
.status-badge {
@@ -346,6 +393,13 @@ body {
.status-unknown::before { content: '?'; color: rgba(0, 0, 0, 0.4); }
.status-empty::before { content: ''; color: rgba(0, 0, 0, 0.3); }
.severity-info::before { content: 'i'; color: #2185d0; }
.severity-warning::before { content: '!'; color: #f2711c; }
.severity-error::before { content: '×'; color: #db2828; }
.severity-critical::before { content: '✗'; color: #a33333; }
.severity-debug::before { content: '•'; color: rgba(0, 0, 0, 0.55); }
.severity-unknown::before { content: '?'; color: rgba(0, 0, 0, 0.4); }
/* ── Responsive ──────────────────────────────────── */
@media (max-width: 720px) {
@@ -370,4 +424,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();
});
});

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,61 +64,38 @@
{{ 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>
<tr>
{{ range .Columns }}
<th>{{ . }}</th>
<th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr>
<tr data-severity-row="true" data-severity="{{ .Severity }}">
{{ $row := . }}
{{ range $group.Columns }}
<td>
{{ range $section.Columns }}
<td{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}">{{ $value }}</span>
<span class="status-badge {{ statusClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
{{ else if eq . "severity_icon" }}
<span class="status-badge {{ severityClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
{{ else }}
{{ range joinLines $value }}
<div>{{ . }}</div>
@@ -130,6 +108,65 @@
</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{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
{{ end }}
</tr>
</thead>
<tbody>
{{ range .Items }}
<tr data-severity-row="true" data-severity="{{ .Severity }}">
{{ $row := . }}
{{ range $group.Columns }}
<td{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}>
{{ $value := index $row.Cells . }}
{{ if eq . "status" }}
<span class="status-badge {{ statusClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $value }}"></span>
{{ else if eq . "severity_icon" }}
<span class="status-badge {{ severityClass $value }}" role="img" aria-label="{{ $value }}" title="{{ $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 }}