D4 Part 1: hub fonts + sprite + statusColor semantic remap

- static/fonts/: the 4 vendored woff2 (byte-copied from
  felhom-controller), embedded (embed.go) and served at /static/fonts/
  (font/woff2, immutable) mirroring the chart.min.js pattern. No CDN
  before, none now.
- templates/icons.html: 12-symbol Lucide sprite partial (icon_sprite),
  included at the top of <body> on all 9 pages ({{template}} — the hub
  has no shared layout; per-page include is the minimal shared block).
- statusColor now returns v2 semantic tokens (nominal/warn/crit/
  neutral) consumed as class suffixes: ok->nominal, warn+stale->warn,
  down+fail->crit, pending+disabled->neutral (a not-yet-provisioned or
  deliberately paused customer is a normal fleet state), blocked->warn
  (intentional operator cut-off, attention-worthy not an outage),
  unknown->neutral. The inline style="color: {{statusColor}}" pattern
  is dead: dashboard + customer_unified render a class-based
  .status-dot-<token>; statusIcon (constant "●") retired from funcmap
  and templates.
- Tests (new; the hub web package had no funcmap/template tests):
  TestStatusColorTruthTable over the full enumerated status set —
  red-proven vs the old implementation (ok returned "#4ade80") — and
  TestTemplatesParseWithFuncmap.
This commit is contained in:
2026-07-02 22:34:40 +02:00
parent 43189e8972
commit bc8d54df6a
17 changed files with 112 additions and 14 deletions
+3
View File
@@ -10,3 +10,6 @@ var defaultControllerTemplate string
//go:embed static/chart.min.js
var chartJS []byte
//go:embed static/fonts/*.woff2
var fontFS embed.FS
+56
View File
@@ -0,0 +1,56 @@
package web
import (
"html/template"
"testing"
)
// TASK-D4 §7B: statusColor maps every OverallStatus value the hub emits (server.go
// handleDashboard + configs.go + the hosts stale state) to a v2 semantic token consumed
// as a class suffix — never an inline color. Exception-color: healthy fleet = blue/neutral.
func TestStatusColorTruthTable(t *testing.T) {
cases := []struct {
status string
want string
}{
{"ok", "nominal"}, // operating normally — blue
{"warn", "warn"}, // degraded / stale report — amber
{"stale", "warn"}, // host stale state
{"down", "crit"}, // outage — red
{"fail", "crit"}, // health=fail — red
{"pending", "neutral"}, // not-yet-provisioned customer is a NORMAL fleet state
{"disabled", "neutral"}, // deliberately paused — not a deviation
{"blocked", "warn"}, // operator cut-off: intentional but attention-worthy
{"bogus", "neutral"}, // unknown values stay quiet
{"", "neutral"},
}
for _, c := range cases {
if got := statusColor(c.status); got != c.want {
t.Errorf("statusColor(%q) = %q, want %q", c.status, got, c.want)
}
}
}
// TestTemplatesParseWithFuncmap parses all hub templates with the production funcmap —
// catches a typo'd function name introduced during the D4 sweep (did not exist before).
func TestTemplatesParseWithFuncmap(t *testing.T) {
s := New(nil, "", "", "test", 0, nil)
_ = s // New itself template.Must-parses; reaching here means parse succeeded
// belt and braces: parse again explicitly
if _, err := template.New("").Funcs(template.FuncMap{
"timeAgo": timeAgo,
"timeAgoPtr": func(v interface{}) string { return "" },
"statusColor": statusColor,
"formatFloat": func(f float64) string { return "" },
"joinStrings": func(s []string, sep string) string { return "" },
"json": func(v interface{}) template.JS { return "" },
"hubVersion": func() string { return "" },
"add": func(a, b int) int { return 0 },
"mapGet": func(m map[string]int, k string) int { return 0 },
"memoryColor": memoryColor,
"accuracyClass": accuracyClass,
"gt": func(a, b int) bool { return false },
}).ParseFS(templateFS, "templates/*.html"); err != nil {
t.Fatalf("templates failed to parse: %v", err)
}
}
+29 -12
View File
@@ -73,7 +73,6 @@ func New(store *store.Store, passwordHash, apiKey, version string, staleThreshol
return timeAgo(*t)
},
"statusColor": statusColor,
"statusIcon": statusIcon,
"formatFloat": func(f float64) string { return fmt.Sprintf("%.0f", f) },
"joinStrings": func(s []string, sep string) string { return strings.Join(s, sep) },
"json": func(v interface{}) template.JS {
@@ -204,6 +203,17 @@ func (s *Server) ServeHTTP(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "application/javascript")
w.Header().Set("Cache-Control", "public, max-age=86400")
w.Write(chartJS)
case strings.HasPrefix(path, "/static/fonts/"):
// Vendored brand fonts (design system v2) — embedded, no CDN.
name := strings.TrimPrefix(path, "/static/fonts/")
data, err := fontFS.ReadFile("static/fonts/" + name)
if err != nil {
http.NotFound(w, r)
return
}
w.Header().Set("Content-Type", "font/woff2")
w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
w.Write(data)
case path == "/configuration":
if r.Method == http.MethodPost {
s.handleConfigurationAction(w, r)
@@ -608,25 +618,32 @@ func timeAgo(t time.Time) string {
return fmt.Sprintf("%dd ago", days)
}
// statusColor maps a status value to a design-system-v2 semantic token, consumed as a
// class suffix (status-dot-nominal, tag-nominal, …) — never as an inline color (D4).
// Exception-color principle: a healthy fleet is blue/neutral; amber/red only on deviation.
// ok -> nominal (blue — operating normally)
// warn, stale -> warn (amber — degraded / stale report)
// down, fail -> crit (red — outage)
// pending -> neutral (a not-yet-provisioned customer is a normal fleet state)
// disabled -> neutral (deliberately paused — not a deviation)
// blocked -> warn (an operator cut a customer off: intentional but attention-worthy)
func statusColor(status string) string {
switch status {
case "ok":
return "#4ade80" // green
case "warn":
return "#facc15" // yellow
return "nominal"
case "warn", "stale":
return "warn"
case "down", "fail":
return "#f87171" // red
case "disabled", "pending", "blocked":
return "#94a3b8" // gray
return "crit"
case "blocked":
return "warn"
case "disabled", "pending":
return "neutral"
default:
return "#94a3b8" // gray
return "neutral"
}
}
func statusIcon(status string) string {
return "●"
}
// handleConfiguration renders the Configuration page.
func (s *Server) handleConfiguration(w http.ResponseWriter, r *http.Request) {
csrfToken := s.getCSRFToken(r)
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -8,6 +8,7 @@
<script src="/static/chart.min.js"></script>
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
+1
View File
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
+1
View File
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
@@ -9,6 +9,7 @@
<script>function csrfHeaders(){var el=document.querySelector('meta[name="csrf-token"]');return el?{'X-CSRF-Token':el.content}:{};}</script>
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<nav class="nav-links" style="margin-bottom: 0.5rem;">
@@ -20,7 +21,7 @@
</nav>
<a href="/configs" class="back-link">&larr; All Customers</a>
<h1>
<span class="status-dot" style="color: {{statusColor .OverallStatus}}">{{statusIcon .OverallStatus}}</span>
<span class="status-dot status-dot-{{statusColor .OverallStatus}}"></span>
{{if .CustomerName}}{{.CustomerName}}{{else}}{{.CustomerID}}{{end}}
</h1>
{{if .HasReports}}
+2 -1
View File
@@ -8,6 +8,7 @@
<meta http-equiv="refresh" content="60">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
@@ -45,7 +46,7 @@
{{range .}}
<tr class="status-{{.OverallStatus}}" onclick="window.location='/customers/{{.CustomerID}}'">
<td class="customer-name">
<span class="status-dot" style="color: {{statusColor .OverallStatus}}">{{statusIcon .OverallStatus}}</span>
<span class="status-dot status-dot-{{statusColor .OverallStatus}}"></span>
{{if .CustomerName}}{{.CustomerName}}{{else}}{{.CustomerID}}{{end}}
</td>
<td>
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
+1
View File
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="/style.css">
</head>
<body>
{{template "icon_sprite"}}
<div class="container">
<header>
<h1>Felhom Hub</h1>
+13
View File
@@ -0,0 +1,13 @@
{{define "icon_sprite"}}<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="i-triangle-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /> <path d="M12 9v4" /> <path d="M12 17h.01" /></symbol>
<symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></symbol>
<symbol id="i-server" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2" /> <rect width="20" height="8" x="2" y="14" rx="2" ry="2" /> <line x1="6" x2="6.01" y1="6" y2="6" /> <line x1="6" x2="6.01" y1="18" y2="18" /></symbol>
<symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /> <circle cx="12" cy="12" r="3" /></symbol>
<symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /> <path d="m6 6 12 12" /></symbol>
<symbol id="i-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M12 16v-4" /> <path d="M12 8h.01" /></symbol>
<symbol id="i-hard-drive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 16h.01" /> <path d="M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /> <path d="M21.946 12.013H2.054" /> <path d="M6 16h.01" /></symbol>
<symbol id="i-cpu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2" /> <path d="M12 2v2" /> <path d="M17 20v2" /> <path d="M17 2v2" /> <path d="M2 12h2" /> <path d="M2 17h2" /> <path d="M2 7h2" /> <path d="M20 12h2" /> <path d="M20 17h2" /> <path d="M20 7h2" /> <path d="M7 20v2" /> <path d="M7 2v2" /> <rect x="4" y="4" width="16" height="16" rx="2" /> <rect x="8" y="8" width="8" height="8" rx="1" /></symbol>
<symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M12 6v6l4 2" /></symbol>
<symbol id="i-boxes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /> <path d="m7 16.5-4.74-2.85" /> <path d="m7 16.5 5-3" /> <path d="M7 16.5v5.17" /> <path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /> <path d="m17 16.5-5-3" /> <path d="m17 16.5 4.74-2.85" /> <path d="M17 16.5v5.17" /> <path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" /> <path d="M12 8 7.26 5.15" /> <path d="m12 8 4.74-2.85" /> <path d="M12 13.5V8" /></symbol>
<symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> <path d="M16 3.128a4 4 0 0 1 0 7.744" /> <path d="M22 21v-2a4 4 0 0 0-3-3.87" /> <circle cx="9" cy="7" r="4" /></symbol>
</svg>{{end}}