Add monitor groups on the status page

Author: brvier

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to Gjallar are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.3.0] - 2026-07-04
+
+### Added
+
+- Monitor groups: an optional `group` field on monitors; the status page
+  shows grouped monitors under a header with an up/total count.
+
 ## [0.2.0] - 2026-07-04
 
 ### Added

README.md

@@ -58,6 +58,12 @@ Gjallar reloads its configuration on `SIGHUP` (`systemctl reload gjallar`).
 The new config is fully validated first — if it is broken, the running
 configuration is kept and the error is logged.
 
+### Groups
+
+Give monitors an optional `group: "Hyperion"` and the status page shows them
+under a common header with an `up/total` count. Monitors without a group are
+listed first, without a header. Groups appear in config order.
+
 ### Re-alerts
 
 By default a monitor alerts once when it goes down and once when it recovers.

gjallar.example.yaml

@@ -37,6 +37,7 @@ alerts:
 monitors:
   # --- HTTP/HTTPS: status code, body regex, TLS certificate expiry ---
   - name: website
+    group: "Public"    # optional: monitors sharing a group are shown together
     type: http
     url: "https://example.com/api/health"
     method: GET                       # default GET

internal/config/config.go

@@ -56,7 +56,8 @@ type Alert struct {
 
 type Monitor struct {
 	Name             string   `yaml:"name"`
-	Type             string   `yaml:"type"` // http | postgres | oracle | ping | prometheus
+	Group            string   `yaml:"group"` // optional; groups monitors on the status page
+	Type             string   `yaml:"type"`  // http | postgres | oracle | ping | prometheus
 	Interval         Duration `yaml:"interval"`
 	Timeout          Duration `yaml:"timeout"`
 	FailureThreshold int      `yaml:"failure_threshold"`

internal/web/server.go

@@ -89,9 +89,16 @@ type IncidentView struct {
 	Open     bool
 }
 
+type GroupView struct {
+	Name     string // empty = ungrouped
+	Up       int
+	Total    int
+	Monitors []MonitorView
+}
+
 type overviewData struct {
 	Title     string
-	Monitors  []MonitorView
+	Groups    []GroupView
 	Incidents []IncidentView
 }
 
@@ -146,8 +153,21 @@ func (s *Server) render(w http.ResponseWriter, t *template.Template, name string
 
 func (s *Server) overview() overviewData {
 	d := overviewData{Title: s.cfg.SiteTitle}
+	idx := map[string]int{} // group name -> position, in order of first appearance
 	for _, m := range s.cfg.Monitors {
-		d.Monitors = append(d.Monitors, s.monitorView(m))
+		v := s.monitorView(m)
+		gi, ok := idx[m.Group]
+		if !ok {
+			gi = len(d.Groups)
+			idx[m.Group] = gi
+			d.Groups = append(d.Groups, GroupView{Name: m.Group})
+		}
+		g := &d.Groups[gi]
+		g.Monitors = append(g.Monitors, v)
+		g.Total++
+		if v.Status == "up" {
+			g.Up++
+		}
 	}
 	incs, err := s.st.Incidents(incidentCount)
 	if err != nil {

internal/web/static/style.css

@@ -43,8 +43,17 @@ a:hover { text-decoration: underline; }
 h2, h3 { color: var(--text); margin: 24px 0 8px; }
 h2 { border-left: 4px solid var(--red); padding-left: 10px; }
 
+/* monitor groups */
+.group-head {
+  display: flex; align-items: baseline; gap: 12px;
+  margin-top: 28px;
+}
+.group-head h2 { margin: 0 0 8px; }
+.group-count { color: var(--muted); font-size: 12px; }
+.group-count.bad { color: var(--red); font-weight: 700; }
+
 /* monitor cards */
-.cards { display: flex; flex-direction: column; gap: 12px; }
+.cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
 .card {
   background: var(--card);
   border: 1px solid var(--border);

internal/web/templates/_monitors.tmpl

@@ -1,4 +1,11 @@
 {{define "monitors_fragment"}}
+{{range .Groups}}
+{{if .Name}}
+<div class="group-head">
+  <h2>{{.Name}}</h2>
+  <span class="group-count{{if lt .Up .Total}} bad{{end}}">{{.Up}}/{{.Total}} up</span>
+</div>
+{{end}}
 <section class="cards">
 {{range .Monitors}}
   <article class="card">
@@ -17,6 +24,7 @@
   </article>
 {{end}}
 </section>
+{{end}}
 
 {{if .Incidents}}
 <section class="incidents">