diff --git a/infra/dashboard/main.go b/infra/dashboard/main.go index 4dda333..72a1007 100644 --- a/infra/dashboard/main.go +++ b/infra/dashboard/main.go @@ -622,7 +622,7 @@ func dashboard(w http.ResponseWriter, _ *http.Request) { TraceVolume: trc, TraceList: tr, Labels: labels, SystemName: composeProject, TotalUp: running, TotalDown: degraded, Links: autoDetectLinks(svcs), - HasOTelData: len(rps) > 0 || len(lat) > 0 || len(tr) > 0, + HasOTelData: len(rps) > 0 || len(lat) > 0, // actual OTel collector metrics HasNodeData: node.Online, Node: node, HealthSVG: template.HTML(svgDonut(running, degraded)), diff --git a/infra/dashboard/template.html b/infra/dashboard/template.html index 6bd7d9e..c8c40bc 100644 --- a/infra/dashboard/template.html +++ b/infra/dashboard/template.html @@ -8,69 +8,84 @@ *{margin:0;padding:0;box-sizing:border-box} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0d1117;color:#e6edf3;line-height:1.5} - .hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid #30363d;background:#161b22;position:sticky;top:0;z-index:100} - .hl{display:flex;align-items:center;gap:12px} - .hl .l{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#58a6ff,#bc8cff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff} - .hl h1{font-size:17px;font-weight:600} - .hl .s{color:#8b949e;font-size:12px} - .hr{display:flex;align-items:center;gap:14px} - .hb{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 14px;border-radius:20px;font-weight:500} + /* ── Header ── */ + .hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid #30363d;background:#161b22;position:sticky;top:0;z-index:100;gap:12px} + .hl{display:flex;align-items:center;gap:12px;min-width:0} + .hl .l{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#58a6ff,#bc8cff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0} + .hl h1{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + .hl .s{color:#8b949e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + .hr{display:flex;align-items:center;gap:14px;flex-shrink:0} + .hb{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 14px;border-radius:20px;font-weight:500;white-space:nowrap} .hb.g{background:rgba(63,185,80,0.12);color:#3fb950} .hb.y{background:rgba(210,153,34,0.12);color:#d29922} .hb.r{background:rgba(248,81,73,0.12);color:#f85149} .hb .d{width:8px;height:8px;border-radius:50%} .hb.g .d{background:#3fb950}.hb.y .d{background:#d29922}.hb.r .d{background:#f85149} - .up{color:#6e7681;font-size:11px} + .up{color:#6e7681;font-size:11px;white-space:nowrap} + /* ── Main container ── */ .c{max-width:1440px;margin:0 auto;padding:16px 24px} - .g{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)} + /* ── Fully dynamic grid ── */ + .g{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))} + + /* ── Cards ── */ .cd{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:16px} - .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} - .ch h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#8b949e} - .ch .b{font-size:10px;background:#1c2333;padding:2px 10px;border-radius:10px;color:#8b949e} - .cg{display:flex;justify-content:center} + .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px} + .ch h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + .ch .b{font-size:10px;background:#1c2333;padding:2px 10px;border-radius:10px;color:#8b949e;white-space:nowrap;flex-shrink:0} + .cg{display:flex;justify-content:center;align-items:center} + .cg svg{max-width:100%;height:auto} - .sg{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} + /* ── Service tiles ── */ + .sg{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .st{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #30363d;border-radius:6px;font-size:12px} .st:hover{background:#1c2333} .st .i{width:7px;height:7px;border-radius:50%;flex-shrink:0} .st .i.g{background:#3fb950}.st .i.r{background:#f85149}.st .i.y{background:#d29922}.st .i.b{background:#58a6ff} .st .n{font-family:'SF Mono','Fira Code',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + /* ── Stat boxes ── */ .sg2{display:grid;grid-template-columns:1fr 1fr;gap:7px} .sb{background:#1c2333;border-radius:6px;padding:12px 8px;text-align:center} .sv{font-size:22px;font-weight:700;font-family:'SF Mono',monospace} - .sl{font-size:10px;color:#8b949e;margin-top:2px;text-transform:uppercase;letter-spacing:.04em} + .sl2{font-size:10px;color:#8b949e;margin-top:2px;text-transform:uppercase;letter-spacing:.04em} .sv.a{color:#58a6ff}.sv.g{color:#3fb950}.sv.r{color:#f85149}.sv.y{color:#d29922} - .sg3{display:grid;grid-template-columns:1fr 1fr;gap:8px} + /* ── System resource gauges ── */ + .sg3{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px} + .ns{font-size:10px;color:#6e7681;text-align:center;margin-top:4px} + /* ── Links ── */ .lk{display:flex;flex-wrap:wrap;gap:5px} - .lk a{color:#58a6ff;text-decoration:none;font-size:11px;padding:4px 10px;border:1px solid #30363d;border-radius:6px} + .lk a{color:#58a6ff;text-decoration:none;font-size:11px;padding:4px 10px;border:1px solid #30363d;border-radius:6px;transition:all.15s} .lk a:hover{background:#1c2333;border-color:#58a6ff} + /* ── Traces ── */ .tl{list-style:none} - .ti{padding:7px 0;border-bottom:1px solid #30363d;font-size:12px;display:flex;justify-content:space-between;align-items:center} + .ti{padding:7px 0;border-bottom:1px solid #30363d;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px} .ti:last-child{border-bottom:none} - .ts{font-weight:500} - .to{color:#8b949e;font-size:11px;font-family:'SF Mono','Fira Code',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px} + .ts{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} + .to{color:#8b949e;font-size:11px;font-family:'SF Mono','Fira Code',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tt{display:flex;gap:10px;font-size:11px;color:#8b949e;flex-shrink:0;align-items:center} .td{font-family:'SF Mono',monospace;font-weight:500;color:#58a6ff} .te{color:#f85149} - .nl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;justify-items:center} - .ns{font-size:11px;color:#8b949e;text-align:center;margin-top:4px} - .em{text-align:center;padding:20px;color:#6e7681;font-size:12px} - @media(max-width:900px){ + /* ── Responsive ── */ + @media(max-width:768px){ + .c{padding:12px} .g{grid-template-columns:1fr} .sg2{grid-template-columns:1fr 1fr} .sg3{grid-template-columns:1fr} .sg{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))} - .nl{grid-template-columns:1fr} - .hdr{flex-direction:column;align-items:flex-start;gap:8px} + .hdr{flex-wrap:wrap} + .hr{width:100%;justify-content:space-between} + } + @media(min-width:769px)and(max-width:1100px){ + .g{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} + .sg3{grid-template-columns:1fr 1fr} } @@ -100,7 +115,7 @@
-
+

Services

{{len .Services}}
{{range .Services}} @@ -108,97 +123,110 @@ {{.Name}}
- {{else}}
No services
{{end}} + {{else}}
No services detected
{{end}}
-
+

Overview

-
{{len .Services}}
Total
-
{{.Running}}
Healthy
-
{{.TraceCount}}
Traces
-
{{if .Errors}}{{printf "%.0f" (index .Errors (sub (len .Errors) 1))}}{{else}}0{{end}}
Errors
+
{{len .Services}}
Total
+
{{.Running}}
Healthy
+
{{.TraceCount}}
Traces
+
{{if .Errors}}{{printf "%.0f" (index .Errors (sub (len .Errors) 1))}}{{else}}0{{end}}
Errors
-
+

Health

{{.HealthSVG}}
- -
+ +

Links

{{range .Links}}{{.Label}}{{end}}
- + {{if .HasNodeData}} -
-

System Resources

load: {{printf "%.2f" .Node.Load1}} {{printf "%.2f" .Node.Load5}} {{printf "%.2f" .Node.Load15}}
+
+

System Resources

+ load: {{printf "%.2f" .Node.Load1}} {{printf "%.2f" .Node.Load5}} {{printf "%.2f" .Node.Load15}} +
{{.CPUSVG}}
{{.RAMSVG}}
{{.DiskSVG}}
- {{if .Node.NetIn}}
Net: {{printf "%.1f" .Node.NetIn}} B/s in / {{printf "%.1f" .Node.NetOut}} B/s out
{{end}} + {{if .Node.NetIn}}
Network: {{printf "%.1f" .Node.NetIn}} B/s in / {{printf "%.1f" .Node.NetOut}} B/s out
{{end}}
{{end}} - -
-

Request Rate

{{if .RPS}}{{printf "%.1f" (index .RPS (sub (len .RPS) 1))}}/s{{else}}-{{end}}
+ + {{if .HasOTelData}} +
+

Request Rate

+ {{if .RPS}}{{printf "%.1f" (index .RPS (sub (len .RPS) 1))}}/s{{else}}-{{end}} +
{{.RPSSVG}}
- -
-

Latency

{{if .Latency}}{{printf "%.0f" (index .Latency (sub (len .Latency) 1))}}ms{{else}}-{{end}}
+
+

Latency

+ {{if .Latency}}{{printf "%.0f" (index .Latency (sub (len .Latency) 1))}}ms{{else}}-{{end}} +
{{.LatencySVG}}
- -
-

Error Rate

{{if .Errors}}{{printf "%.1f" (index .Errors (sub (len .Errors) 1))}}/s{{else}}-{{end}}
+
+

Error Rate

+ {{if .Errors}}{{printf "%.1f" (index .Errors (sub (len .Errors) 1))}}/s{{else}}-{{end}} +
{{.ErrorSVG}}
+ {{end}} -
+

Trace Volume

{{.TraceCount}} traces
{{.TraceSVG}}
-
+

Recent Traces

{{.TraceCount}}
{{if .TraceList}}
{{range .TraceList}}
-
{{.Service}}
{{.Operation}}
+
+
{{.Service}}
+
{{.Operation}}
+
{{safeDur .Duration}} - {{.Spans}} spans + {{.Spans}} {{if .HasError}}error{{end}}
{{end}}
- {{else}}
No traces. Data appears once services send OTel traces.
{{end}} + {{else}}
No traces — data appears once services send OTel telemetry
{{end}}