Compare commits
6 Commits
ac8120c8ab
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 39a6f128f1 | |||
| f6517987b3 | |||
| 20e058c959 | |||
| 34ebaa524d | |||
|
|
2fb01d30a6 | ||
|
|
8675791805 |
@@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
`chart` is a small read-only web viewer for Reanimator hardware JSON snapshots.
|
`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.
|
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
|
## Integration
|
||||||
|
|||||||
2
bible
2
bible
Submodule bible updated: 5a69e0bba8...d2600f1279
@@ -43,7 +43,8 @@ For array sections:
|
|||||||
|
|
||||||
## Special Field Handling
|
## 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
|
- 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
|
- nested values such as `status_history` may be rendered in expandable detail blocks inside one cell
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,16 @@
|
|||||||
1. read the raw `status` value from the payload
|
1. read the raw `status` value from the payload
|
||||||
2. normalize only for presentation matching (`OK`, `Warning`, `Critical`, `Unknown`, `Empty`)
|
2. normalize only for presentation matching (`OK`, `Warning`, `Critical`, `Unknown`, `Empty`)
|
||||||
3. apply status badge class
|
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
|
## Unknown Field Invariant
|
||||||
|
|
||||||
|
|||||||
@@ -60,4 +60,6 @@ Preferred order:
|
|||||||
|
|
||||||
- tables must remain readable on desktop and mobile
|
- tables must remain readable on desktop and mobile
|
||||||
- section navigation must work without JavaScript
|
- 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
|
||||||
|
|||||||
@@ -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.
|
||||||
@@ -82,3 +82,22 @@ func TestStandaloneHandlerRootShowsUploadForm(t *testing.T) {
|
|||||||
t.Fatalf("expected standalone handler root to include upload form")
|
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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -13,13 +13,14 @@ type pageData struct {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type sectionView struct {
|
type sectionView struct {
|
||||||
ID string
|
ID string
|
||||||
Title string
|
Title string
|
||||||
Kind string
|
Kind string
|
||||||
Rows []fieldRow
|
Rows []fieldRow
|
||||||
Columns []string
|
Columns []string
|
||||||
Items []tableRow
|
Items []tableRow
|
||||||
Groups []tableGroupView
|
Groups []tableGroupView
|
||||||
|
SeverityOptions []severityOption
|
||||||
}
|
}
|
||||||
|
|
||||||
type fieldRow struct {
|
type fieldRow struct {
|
||||||
@@ -29,12 +30,19 @@ type fieldRow struct {
|
|||||||
|
|
||||||
type tableRow struct {
|
type tableRow struct {
|
||||||
Status string
|
Status string
|
||||||
|
Severity string
|
||||||
Cells map[string]string
|
Cells map[string]string
|
||||||
RawCells map[string]any
|
RawCells map[string]any
|
||||||
}
|
}
|
||||||
|
|
||||||
type tableGroupView struct {
|
type tableGroupView struct {
|
||||||
Title string
|
Title string
|
||||||
Columns []string
|
Columns []string
|
||||||
Items []tableRow
|
Items []tableRow
|
||||||
|
SeverityOptions []severityOption
|
||||||
|
}
|
||||||
|
|
||||||
|
type severityOption struct {
|
||||||
|
Value string
|
||||||
|
Label string
|
||||||
}
|
}
|
||||||
|
|||||||
112
viewer/render.go
112
viewer/render.go
@@ -49,6 +49,7 @@ var hiddenTableFields = map[string]struct{}{
|
|||||||
const vendorDeviceIDField = "ven:dev"
|
const vendorDeviceIDField = "ven:dev"
|
||||||
|
|
||||||
var commonPreferredColumns = []string{
|
var commonPreferredColumns = []string{
|
||||||
|
"severity_icon",
|
||||||
"status",
|
"status",
|
||||||
"slot",
|
"slot",
|
||||||
"location",
|
"location",
|
||||||
@@ -252,17 +253,19 @@ func buildTableSection(key string, items []any) sectionView {
|
|||||||
status := strings.TrimSpace(cells["status"])
|
status := strings.TrimSpace(cells["status"])
|
||||||
tableRows = append(tableRows, tableRow{
|
tableRows = append(tableRows, tableRow{
|
||||||
Status: status,
|
Status: status,
|
||||||
|
Severity: normalizeSeverity(cells["severity"]),
|
||||||
Cells: cells,
|
Cells: cells,
|
||||||
RawCells: row,
|
RawCells: row,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return sectionView{
|
return sectionView{
|
||||||
ID: key,
|
ID: key,
|
||||||
Title: titleFor(key),
|
Title: titleFor(key),
|
||||||
Kind: "table",
|
Kind: "table",
|
||||||
Columns: columns,
|
Columns: columns,
|
||||||
Items: tableRows,
|
Items: tableRows,
|
||||||
|
SeverityOptions: collectSeverityOptions(columns, rows),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -301,14 +304,16 @@ func buildPCIeSection(items []any) sectionView {
|
|||||||
}
|
}
|
||||||
items = append(items, tableRow{
|
items = append(items, tableRow{
|
||||||
Status: strings.TrimSpace(cells["status"]),
|
Status: strings.TrimSpace(cells["status"]),
|
||||||
|
Severity: normalizeSeverity(cells["severity"]),
|
||||||
Cells: cells,
|
Cells: cells,
|
||||||
RawCells: row,
|
RawCells: row,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
groups = append(groups, tableGroupView{
|
groups = append(groups, tableGroupView{
|
||||||
Title: className,
|
Title: className,
|
||||||
Columns: columns,
|
Columns: columns,
|
||||||
Items: items,
|
Items: items,
|
||||||
|
SeverityOptions: collectSeverityOptions(columns, rows),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -329,6 +334,9 @@ func collectColumns(section string, rows []map[string]any) []string {
|
|||||||
}
|
}
|
||||||
seen[key] = struct{}{}
|
seen[key] = struct{}{}
|
||||||
}
|
}
|
||||||
|
if hasSeverity(row) {
|
||||||
|
seen["severity_icon"] = struct{}{}
|
||||||
|
}
|
||||||
if hasVendorDeviceID(row) {
|
if hasVendorDeviceID(row) {
|
||||||
seen[vendorDeviceIDField] = struct{}{}
|
seen[vendorDeviceIDField] = struct{}{}
|
||||||
}
|
}
|
||||||
@@ -350,6 +358,58 @@ func collectColumns(section string, rows []map[string]any) []string {
|
|||||||
return append(columns, extra...)
|
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 {
|
func buildFieldRows(object map[string]any) []fieldRow {
|
||||||
keys := make([]string, 0, len(object))
|
keys := make([]string, 0, len(object))
|
||||||
for key := range object {
|
for key := range object {
|
||||||
@@ -438,12 +498,44 @@ func formatStringValue(value string) string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
func formatRowValue(column string, row map[string]any) string {
|
func formatRowValue(column string, row map[string]any) string {
|
||||||
|
if column == "severity_icon" {
|
||||||
|
return strings.TrimSpace(formatValue(row["severity"]))
|
||||||
|
}
|
||||||
if column == vendorDeviceIDField {
|
if column == vendorDeviceIDField {
|
||||||
return formatVendorDeviceID(row)
|
return formatVendorDeviceID(row)
|
||||||
}
|
}
|
||||||
return formatValue(row[column])
|
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 {
|
func formatVendorDeviceID(value map[string]any) string {
|
||||||
vendorID := strings.TrimSpace(formatValue(value["vendor_id"]))
|
vendorID := strings.TrimSpace(formatValue(value["vendor_id"]))
|
||||||
deviceID := strings.TrimSpace(formatValue(value["device_id"]))
|
deviceID := strings.TrimSpace(formatValue(value["device_id"]))
|
||||||
@@ -504,6 +596,10 @@ func hasVendorDeviceID(value map[string]any) bool {
|
|||||||
return formatVendorDeviceID(value) != ""
|
return formatVendorDeviceID(value) != ""
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func hasSeverity(value map[string]any) bool {
|
||||||
|
return strings.TrimSpace(formatValue(value["severity"])) != ""
|
||||||
|
}
|
||||||
|
|
||||||
func isHiddenTableField(section string, key string) bool {
|
func isHiddenTableField(section string, key string) bool {
|
||||||
if isHiddenField(key) {
|
if isHiddenField(key) {
|
||||||
return true
|
return true
|
||||||
|
|||||||
@@ -47,6 +47,18 @@ func TestRenderHTMLIncludesKnownSectionsAndFields(t *testing.T) {
|
|||||||
t.Fatalf("expected rendered html to contain %q", needle)
|
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") {
|
if strings.Contains(text, "2026-03-15T12:00:00Z") {
|
||||||
t.Fatalf("expected RFC3339 timestamp to be rendered in human-readable form")
|
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>") {
|
if strings.Contains(text, "<th>device_class</th>") {
|
||||||
t.Fatalf("expected device_class column to be hidden from PCIe tables")
|
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>") {
|
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")
|
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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
29
web/embed.go
29
web/embed.go
@@ -4,6 +4,7 @@ import (
|
|||||||
"embed"
|
"embed"
|
||||||
"html/template"
|
"html/template"
|
||||||
"io/fs"
|
"io/fs"
|
||||||
|
"mime"
|
||||||
"net/http"
|
"net/http"
|
||||||
"strings"
|
"strings"
|
||||||
)
|
)
|
||||||
@@ -12,12 +13,19 @@ import (
|
|||||||
var content embed.FS
|
var content embed.FS
|
||||||
|
|
||||||
var pageTemplate = template.Must(template.New("view.html").Funcs(template.FuncMap{
|
var pageTemplate = template.Must(template.New("view.html").Funcs(template.FuncMap{
|
||||||
"statusClass": statusClass,
|
"statusClass": statusClass,
|
||||||
"joinLines": joinLines,
|
"severityClass": severityClass,
|
||||||
|
"joinLines": joinLines,
|
||||||
}).ParseFS(content, "templates/view.html"))
|
}).ParseFS(content, "templates/view.html"))
|
||||||
|
|
||||||
var uploadTemplate = template.Must(template.New("upload.html").ParseFS(content, "templates/upload.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) {
|
func Render(data any) ([]byte, error) {
|
||||||
var out strings.Builder
|
var out strings.Builder
|
||||||
if err := pageTemplate.ExecuteTemplate(&out, "view.html", data); err != nil {
|
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 {
|
func joinLines(value string) []string {
|
||||||
if strings.TrimSpace(value) == "" {
|
if strings.TrimSpace(value) == "" {
|
||||||
return nil
|
return nil
|
||||||
|
|||||||
@@ -326,6 +326,53 @@ body {
|
|||||||
border-bottom: 1px solid var(--border-lite);
|
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 ──────────────────────────────────────── */
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
@@ -346,6 +393,13 @@ body {
|
|||||||
.status-unknown::before { content: '?'; color: rgba(0, 0, 0, 0.4); }
|
.status-unknown::before { content: '?'; color: rgba(0, 0, 0, 0.4); }
|
||||||
.status-empty::before { content: '–'; color: rgba(0, 0, 0, 0.3); }
|
.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 ──────────────────────────────────── */
|
/* ── Responsive ──────────────────────────────────── */
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
@@ -370,4 +424,14 @@ body {
|
|||||||
.section-card-full {
|
.section-card-full {
|
||||||
grid-column: auto;
|
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
31
web/static/view.js
Normal 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();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>{{ .Title }}</title>
|
<title>{{ .Title }}</title>
|
||||||
<link rel="stylesheet" href="/static/view.css">
|
<link rel="stylesheet" href="/static/view.css">
|
||||||
|
<script defer src="/static/view.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
@@ -63,61 +64,38 @@
|
|||||||
|
|
||||||
{{ if eq .Kind "table" }}
|
{{ if eq .Kind "table" }}
|
||||||
{{ $section := . }}
|
{{ $section := . }}
|
||||||
<div class="table-wrap">
|
<div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
|
||||||
<table class="data-table">
|
{{ if .SeverityOptions }}
|
||||||
<thead>
|
<div class="table-toolbar">
|
||||||
<tr>
|
<label class="table-toolbar-label" for="{{ .ID }}-severity-filter">Severity</label>
|
||||||
{{ range .Columns }}
|
<select class="table-severity-filter" id="{{ .ID }}-severity-filter">
|
||||||
<th>{{ . }}</th>
|
<option value="">All severities</option>
|
||||||
{{ end }}
|
{{ range .SeverityOptions }}
|
||||||
</tr>
|
<option value="{{ .Value }}">{{ .Label }}</option>
|
||||||
</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>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</tbody>
|
</select>
|
||||||
</table>
|
</div>
|
||||||
</div>
|
{{ end }}
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ if eq .Kind "grouped_tables" }}
|
|
||||||
{{ range .Groups }}
|
|
||||||
<div class="table-group">
|
|
||||||
<h3>{{ .Title }}</h3>
|
|
||||||
{{ $group := . }}
|
|
||||||
<div class="table-wrap">
|
<div class="table-wrap">
|
||||||
<table class="data-table">
|
<table class="data-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{{ range .Columns }}
|
{{ 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 }}
|
{{ end }}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{{ range .Items }}
|
{{ range .Items }}
|
||||||
<tr>
|
<tr data-severity-row="true" data-severity="{{ .Severity }}">
|
||||||
{{ $row := . }}
|
{{ $row := . }}
|
||||||
{{ range $group.Columns }}
|
{{ range $section.Columns }}
|
||||||
<td>
|
<td{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}>
|
||||||
{{ $value := index $row.Cells . }}
|
{{ $value := index $row.Cells . }}
|
||||||
{{ if eq . "status" }}
|
{{ 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 }}
|
{{ else }}
|
||||||
{{ range joinLines $value }}
|
{{ range joinLines $value }}
|
||||||
<div>{{ . }}</div>
|
<div>{{ . }}</div>
|
||||||
@@ -130,6 +108,65 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
Reference in New Issue
Block a user