D0 Part 2: design system v2 — tokens, meter/tag/metarow, funcmap remap, dashboard + stacks
- style.css: navy token palette (--bg-0/1/2, --line, --text-1/2/3, --blue, --warn, --crit), single 2px radius, all box-shadows and the bg grid overlay removed, fonts via --font-ui/--font-data. - Components: .meter (3px hairline track, blue nominal fill, neutral 70/85 ticks, warn/crit flag), .tag (square 2px state chip + dot, pulse on progress, reduced-motion respected), .metarow (icon + text, no container), .panel/.list/.section-h primitives, boxless .stats with hairline dividers, buttons 2px (danger = crit outline). - funcmap: stateColor -> run/progress/warn/neutral/off (stopped is neutral, NOT red — operator-approved exception-color change), usageColor/tempColor -> nominal/warn/crit (thresholds unchanged); stateLabel Hungarian copy untouched (guarded by test). - layout.html: sprite nav icons (layout-grid/cloud/shield/cpu/wrench/ settings), alert banner emoji -> triangle-alert/info icons. - dashboard.html: meters with disk warn/crit flags (Fogyóban a hely / Kritikusan kevés hely), boxless stats (Leállítva 0 muted, >0 amber), single-panel stack list with 2px state edges, tags instead of badges, icon action buttons. - stacks.html: state tag + metarow rows; catalog keeps its grid. - setup minimalCSS retokened to v2 (drops GitHub-dark hexes). - Tests: §8 truth tables for stateColor/usageColor/tempColor + stateLabel byte-identity guard (red-proven vs pre-change funcmap: stopped->red and 0->green failed as required).
This commit is contained in:
@@ -49,20 +49,29 @@ func (s *Server) templateFuncMap() template.FuncMap {
|
||||
loc := getTimezone()
|
||||
|
||||
return template.FuncMap{
|
||||
// stateColor maps container states to design-system-v2 semantic tokens,
|
||||
// consumed as class suffixes (tag-run, stack-state-run, state-text-run...).
|
||||
// Exception-color principle: a customer-stopped app is neutral, NOT red —
|
||||
// genuine failures surface via unhealthy state + the alert system.
|
||||
"stateColor": func(state stacks.ContainerState) string {
|
||||
switch state {
|
||||
case stacks.StateRunning:
|
||||
return "green"
|
||||
return "run"
|
||||
case stacks.StateStarting, stacks.StateDeploying:
|
||||
return "orange"
|
||||
return "progress"
|
||||
case stacks.StateUnhealthy:
|
||||
return "yellow"
|
||||
case stacks.StateStopped, stacks.StateExited:
|
||||
return "red"
|
||||
return "warn"
|
||||
case stacks.StateRestarting:
|
||||
return "yellow"
|
||||
// a restart loop is a problem, not progress
|
||||
return "warn"
|
||||
case stacks.StateStopped, stacks.StateExited:
|
||||
return "neutral"
|
||||
case stacks.StatePaused:
|
||||
return "neutral"
|
||||
case stacks.StateNotDeployed:
|
||||
return "off"
|
||||
default:
|
||||
return "gray"
|
||||
return "off"
|
||||
}
|
||||
},
|
||||
"stateLabel": func(state stacks.ContainerState) string {
|
||||
@@ -126,14 +135,15 @@ func (s *Server) templateFuncMap() template.FuncMap {
|
||||
"appPageURL": func(slug string) string {
|
||||
return s.cfg.AppPageURL(slug)
|
||||
},
|
||||
// usageColor: capacity meters are blue below 70%, amber 70–85, red ≥85 (v2).
|
||||
"usageColor": func(percent float64) string {
|
||||
if percent >= 85 {
|
||||
return "red"
|
||||
return "crit"
|
||||
}
|
||||
if percent >= 70 {
|
||||
return "yellow"
|
||||
return "warn"
|
||||
}
|
||||
return "green"
|
||||
return "nominal"
|
||||
},
|
||||
"fmtMB": func(mb uint64) string {
|
||||
if mb >= 1024 {
|
||||
@@ -171,14 +181,15 @@ func (s *Server) templateFuncMap() template.FuncMap {
|
||||
}
|
||||
return result
|
||||
},
|
||||
// tempColor: thresholds unchanged; outputs remapped to v2 tokens.
|
||||
"tempColor": func(celsius float64) string {
|
||||
if celsius > 75 {
|
||||
return "red"
|
||||
return "crit"
|
||||
}
|
||||
if celsius >= 60 {
|
||||
return "yellow"
|
||||
return "warn"
|
||||
}
|
||||
return "green"
|
||||
return "nominal"
|
||||
},
|
||||
"fmtTemp": func(celsius float64) string {
|
||||
return fmt.Sprintf("%.0f°C", celsius)
|
||||
|
||||
Reference in New Issue
Block a user