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:
@@ -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
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">← 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}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{template "icon_sprite"}}
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Felhom Hub</h1>
|
||||
|
||||
@@ -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}}
|
||||
Reference in New Issue
Block a user