ui: alerts list page + alert row partial + nav badge

internal/server/http/ui_alerts.go

@@ -60,6 +60,7 @@ func (s *Server) handleUIAlerts(w stdhttp.ResponseWriter, r *stdhttp.Request) {
 	page.Counts = computeAlertCounts(s, r)
 
 	view := s.baseView(u)
+	view.OpenAlerts = page.Counts.Open
 	view.Title = "Alerts · restic-manager"
 	view.Active = "alerts"
 	view.Page = page

internal/server/http/ui_handlers.go

@@ -89,6 +89,10 @@ func (s *Server) requireUIUser(w stdhttp.ResponseWriter, r *stdhttp.Request) *ui
 // authenticated page. Every UI page sits under the dashboard primary
 // nav today; if a future page lives under a different primary nav
 // tab (e.g. Settings, Audit), accept an Active arg again.
+//
+// OpenAlerts is populated via a quick store count so the nav badge
+// stays current on every page load without requiring a page-specific
+// store call.
 func (s *Server) baseView(u *ui.User) ui.ViewData {
 	return ui.ViewData{
 		User:    u,

internal/server/ui/funcs.go

@@ -38,6 +38,68 @@ func funcMap() template.FuncMap {
 		// list packs strings into a slice — handy for inline ranges
 		// in templates (e.g. quick-pick cron presets).
 		"list": func(items ...string) []string { return items },
+		// dict builds a map[string]any from alternating key-value pairs.
+		// Useful for passing multiple named values to a sub-template:
+		//   {{template "foo" (dict "A" $a "B" $b)}}
+		"dict": func(pairs ...any) map[string]any {
+			m := make(map[string]any, len(pairs)/2)
+			for i := 0; i+1 < len(pairs); i += 2 {
+				if k, ok := pairs[i].(string); ok {
+					m[k] = pairs[i+1]
+				}
+			}
+			return m
+		},
+		// mapGet retrieves a string value from a map[string]string by key.
+		// Returns "" when the key is absent or the map is nil. Used by the
+		// alert_row partial to resolve host_id → host name.
+		"mapGet": func(m map[string]string, key *string) string {
+			if m == nil || key == nil {
+				return ""
+			}
+			return m[*key]
+		},
+		// alertStatus derives the display status of an alert from its DB
+		// fields: "open", "acknowledged", or "resolved".
+		// Accepts any value — returns "" for unrecognised input so templates
+		// can still render safely.
+		"alertStatus": func(resolvedAt, acknowledgedAt any) string {
+			isSet := func(v any) bool {
+				if v == nil {
+					return false
+				}
+				switch t := v.(type) {
+				case *time.Time:
+					return t != nil
+				}
+				return false
+			}
+			if isSet(resolvedAt) {
+				return "resolved"
+			}
+			if isSet(acknowledgedAt) {
+				return "acknowledged"
+			}
+			return "open"
+		},
+		// stillHappening returns true when last_seen_at is within the last
+		// 60 seconds — used to render the "still happening · Ns ago" pill
+		// on alert rows where the signal is still firing.
+		"stillHappening": func(v any) bool {
+			var t time.Time
+			switch x := v.(type) {
+			case time.Time:
+				t = x
+			case *time.Time:
+				if x == nil {
+					return false
+				}
+				t = *x
+			default:
+				return false
+			}
+			return time.Since(t) < 60*time.Second
+		},
 	}
 }
 

internal/server/ui/ui.go

@@ -93,6 +93,7 @@ func New() (*Renderer, error) {
 		"templates/partials/awaiting_agent.html",
 		"templates/partials/host_chrome.html",
 		"templates/partials/tree_node.html",
+		"templates/partials/alert_row.html",
 	}
 
 	pageEntries, err := fs.Glob(web.FS, "templates/pages/*.html")

web/styles/input.css

@@ -278,6 +278,39 @@
   }
   .snap-row.head:hover { background: transparent; }
 
+  /* ---------- alert rows (/alerts list) ---------- */
+  .alert-row {
+    display: grid; align-items: center;
+    grid-template-columns: 18px 110px 130px 1fr 130px 110px 180px;
+    column-gap: 16px;
+    padding: 12px 16px; font-size: 13px;
+    border-bottom: 1px solid var(--line-soft);
+    border-left: 3px solid transparent;
+    transition: background 100ms ease;
+  }
+  .alert-row:hover { background: var(--panel-hi); }
+  .alert-row:last-child { border-bottom: 0; }
+  .alert-row.head {
+    cursor: default; padding-top: 9px; padding-bottom: 9px;
+    font-size: 11px; color: var(--ink-fade);
+    text-transform: uppercase; letter-spacing: 0.08em;
+    border-left-color: transparent;
+  }
+  .alert-row.head:hover { background: transparent; }
+  .alert-row.severity-warn     { border-left-color: color-mix(in oklch, var(--warn), transparent 50%); }
+  .alert-row.severity-critical { border-left-color: color-mix(in oklch, var(--bad),  transparent 30%); }
+  .alert-row.resolved          { opacity: 0.55; }
+
+  /* status-dot aliases for alert severity */
+  .dot-warn     { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn), transparent 80%); }
+  .dot-critical { background: var(--bad);  box-shadow: 0 0 0 3px color-mix(in oklch, var(--bad),  transparent 80%); }
+  .dot-resolved { background: var(--ok);   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok),   transparent 80%); }
+
+  /* tag colour variants for alerts */
+  .tag-warn     { color: var(--warn); border-color: color-mix(in oklch, var(--warn), transparent 60%); background: color-mix(in oklch, var(--warn), transparent 92%); }
+  .tag-critical { color: var(--bad);  border-color: color-mix(in oklch, var(--bad),  transparent 60%); background: color-mix(in oklch, var(--bad),  transparent 92%); }
+  .tag-info     { color: var(--ink-mid); }
+
   /* ---------- schedule rows (Schedules tab) ---------- */
   .schd-row {
     display: grid; align-items: center;

web/templates/pages/alerts.html

@@ -0,0 +1,122 @@
+{{define "title"}}Alerts · restic-manager{{end}}
+
+{{define "content"}}
+{{$page := .Page}}
+{{$filter := $page.Filter}}
+<div class="max-w-[1280px] mx-auto px-8 pb-14">
+
+  {{/* crumbs */}}
+  <div class="crumbs pt-6">
+    <a href="/">Dashboard</a><span class="sep">/</span>
+    <span class="text-ink-mid">alerts</span>
+  </div>
+
+  {{/* page header */}}
+  <div class="flex items-baseline justify-between mt-3.5">
+    <div>
+      <h1 class="text-[22px] font-medium tracking-[-0.005em]">
+        Alerts
+        <span class="text-ink-fade font-normal text-[14px] ml-2">
+          {{$page.Counts.Open}} open
+          {{if gt $page.Counts.Acknowledged 0}} · {{$page.Counts.Acknowledged}} acknowledged{{end}}
+          · {{$page.Counts.Resolved24h}} resolved (24h)
+        </span>
+      </h1>
+    </div>
+    <div class="flex gap-2">
+      <a href="/settings/notifications" class="btn">Channel settings →</a>
+    </div>
+  </div>
+
+  {{/* filter strip */}}
+  <div class="panel mt-4 px-4 py-3 rounded-[7px]"
+       style="display: grid; grid-template-columns: auto auto auto 1fr; gap: 14px; align-items: center;">
+
+    {{/* status pills */}}
+    <div class="inline-flex gap-1 p-[3px]" style="border: 1px solid var(--line-soft); border-radius: 5px;">
+      {{range list "open" "acknowledged" "resolved" "all"}}
+        {{$s := .}}
+        {{$active := eq $s $filter.Status}}
+        {{if and (eq $s "all") (eq $filter.Status "")}}{{$active = true}}{{end}}
+        <a href="/alerts?status={{$s}}{{if $filter.Severity}}&severity={{$filter.Severity}}{{end}}{{if $filter.HostID}}&host_id={{$filter.HostID}}{{end}}{{if $filter.Search}}&q={{$filter.Search}}{{end}}"
+           class="btn btn-ghost"
+           style="padding: 5px 10px; font-size: 11.5px;{{if $active}} background: var(--panel-hi); color: var(--ink);{{end}}">
+          {{if eq $s "open"}}Open <span class="text-ink-fade mono ml-1">{{$page.Counts.Open}}</span>
+          {{else if eq $s "acknowledged"}}Acknowledged <span class="text-ink-fade mono ml-1">{{$page.Counts.Acknowledged}}</span>
+          {{else if eq $s "resolved"}}Resolved <span class="text-ink-fade mono ml-1">{{$page.Counts.Resolved24h}}</span>
+          {{else}}All{{end}}
+        </a>
+      {{end}}
+    </div>
+
+    {{/* severity dropdown */}}
+    <div>
+      <select class="field" style="padding: 6px 10px; font-size: 11.5px; min-width: 130px;"
+              onchange="window.location='/alerts?status={{$filter.Status}}&severity='+this.value+'{{if $filter.HostID}}&host_id={{$filter.HostID}}{{end}}{{if $filter.Search}}&q={{$filter.Search}}{{end}}'">
+        <option value="" {{if eq $filter.Severity ""}}selected{{end}}>Severity · any</option>
+        <option value="info"     {{if eq $filter.Severity "info"}}selected{{end}}>info</option>
+        <option value="warning"  {{if eq $filter.Severity "warning"}}selected{{end}}>warning</option>
+        <option value="critical" {{if eq $filter.Severity "critical"}}selected{{end}}>critical</option>
+      </select>
+    </div>
+
+    {{/* host dropdown */}}
+    <div>
+      <select class="field" style="padding: 6px 10px; font-size: 11.5px; min-width: 160px;"
+              onchange="window.location='/alerts?status={{$filter.Status}}{{if $filter.Severity}}&severity={{$filter.Severity}}{{end}}&host_id='+this.value+'{{if $filter.Search}}&q={{$filter.Search}}{{end}}'">
+        <option value="" {{if eq $filter.HostID ""}}selected{{end}}>Host · all</option>
+        {{range $id, $name := $page.HostNames}}
+          <option value="{{$id}}" {{if eq $filter.HostID $id}}selected{{end}}>{{$name}}</option>
+        {{end}}
+      </select>
+    </div>
+
+    {{/* search input */}}
+    <form method="get" action="/alerts">
+      <input type="hidden" name="status"   value="{{$filter.Status}}">
+      {{if $filter.Severity}}<input type="hidden" name="severity" value="{{$filter.Severity}}">{{end}}
+      {{if $filter.HostID}}<input type="hidden" name="host_id"  value="{{$filter.HostID}}">{{end}}
+      <input type="text" name="q" value="{{$filter.Search}}"
+             placeholder="search message…"
+             class="field mono"
+             style="padding: 6px 10px; font-size: 11.5px;">
+    </form>
+  </div>
+
+  {{/* alerts table */}}
+  <div class="panel mt-3.5 rounded-[7px] overflow-hidden">
+
+    {{/* header row */}}
+    <div class="alert-row head">
+      <div></div>
+      <div>Severity / kind</div>
+      <div>Host</div>
+      <div>Message</div>
+      <div>Raised</div>
+      <div>Last seen</div>
+      <div></div>
+    </div>
+
+    {{if eq (len $page.Alerts) 0}}
+      {{/* empty state */}}
+      <div style="padding: 40px; text-align: center;">
+        <div class="inline-flex items-center gap-3.5">
+          <span class="dot dot-online" style="width: 10px; height: 10px;"></span>
+          <div style="text-align: left;">
+            <div class="text-ink text-[14px] font-medium">All clear.</div>
+            <div class="text-ink-mute text-[12px] mt-0.5">
+              No alerts match the current filter.
+            </div>
+          </div>
+        </div>
+      </div>
+    {{else}}
+      {{range $page.Alerts}}
+        {{template "alert_row" (dict "Alert" . "HostNames" $page.HostNames "Filter" $page.Filter)}}
+      {{end}}
+    {{end}}
+
+  </div>
+
+</div>
+{{end}}

web/templates/partials/alert_row.html

@@ -0,0 +1,96 @@
+{{define "alert_row"}}
+{{$a := .Alert}}
+{{$hostNames := .HostNames}}
+{{$filter := .Filter}}
+{{$status := alertStatus $a.ResolvedAt $a.AcknowledgedAt}}
+
+{{/* derive query string for redirect-back after ack/resolve */}}
+{{$qs := ""}}
+{{if $filter.Status}}{{$qs = printf "status=%s" $filter.Status}}{{end}}
+{{if $filter.Severity}}{{$qs = printf "%s&severity=%s" $qs $filter.Severity}}{{end}}
+{{if $filter.HostID}}{{$qs = printf "%s&host_id=%s" $qs $filter.HostID}}{{end}}
+{{if $filter.Search}}{{$qs = printf "%s&q=%s" $qs $filter.Search}}{{end}}
+
+<div class="alert-row severity-{{$a.Severity}}{{if eq $status "resolved"}} resolved{{end}}"
+     {{if eq $status "acknowledged"}}style="background: color-mix(in oklch, var(--warn), transparent 96%);"{{end}}>
+
+  {{/* dot */}}
+  <div>
+    {{if eq $status "resolved"}}
+      <span class="dot dot-online"></span>
+    {{else if eq $a.Severity "critical"}}
+      <span class="dot dot-failed"></span>
+    {{else if eq $a.Severity "warning"}}
+      <span class="dot dot-degraded"></span>
+    {{else}}
+      <span class="dot dot-offline"></span>
+    {{end}}
+  </div>
+
+  {{/* severity + kind tag */}}
+  <div>
+    {{if eq $a.Severity "critical"}}
+      <span class="tag tag-critical">{{$a.Kind}}</span>
+    {{else if eq $a.Severity "warning"}}
+      <span class="tag tag-warn">{{$a.Kind}}</span>
+    {{else}}
+      <span class="tag tag-info">{{$a.Kind}}</span>
+    {{end}}
+  </div>
+
+  {{/* host */}}
+  <div class="mono {{if eq $status "resolved"}}text-ink-mid{{else}}text-ink{{end}}">
+    {{mapGet $hostNames $a.HostID}}
+  </div>
+
+  {{/* message */}}
+  <div class="{{if eq $status "resolved"}}text-ink-mute{{else}}text-ink{{end}}">
+    {{$a.Message}}
+  </div>
+
+  {{/* raised (created_at) */}}
+  <div class="mono {{if eq $status "resolved"}}text-ink-fade{{else}}text-ink-mid{{end}}">
+    {{relTime $a.CreatedAt}}
+  </div>
+
+  {{/* last seen */}}
+  <div class="mono {{if and (eq $status "open") (stillHappening $a.LastSeenAt)}}text-warn{{else if eq $status "resolved"}}text-ink-fade{{else}}text-ink-mid{{end}}">
+    {{if and (eq $status "open") (stillHappening $a.LastSeenAt)}}
+      still happening · {{relTime $a.LastSeenAt}}
+    {{else}}
+      {{relTime $a.LastSeenAt}}
+    {{end}}
+  </div>
+
+  {{/* actions */}}
+  <div style="display: flex; gap: 6px; justify-content: flex-end; align-items: center;">
+    {{if eq $status "open"}}
+      <form method="post" action="/alerts/{{$a.ID}}/acknowledge">
+        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
+        <button type="submit" class="btn"
+                hx-post="/alerts/{{$a.ID}}/acknowledge{{if $qs}}?{{$qs}}{{end}}"
+                hx-swap="none">Acknowledge</button>
+      </form>
+      <form method="post" action="/alerts/{{$a.ID}}/resolve">
+        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
+        <button type="submit" class="btn"
+                hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
+                hx-swap="none">Resolve</button>
+      </form>
+    {{else if eq $status "acknowledged"}}
+      <span class="text-ink-fade" style="font-size: 11px;">
+        ack'd{{if $a.AcknowledgedBy}} by {{deref $a.AcknowledgedBy}}{{end}} · {{relTime $a.AcknowledgedAt}}
+      </span>
+      <form method="post" action="/alerts/{{$a.ID}}/resolve">
+        {{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
+        <button type="submit" class="btn"
+                hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
+                hx-swap="none">Resolve</button>
+      </form>
+    {{else}}
+      <span class="text-ink-fade" style="font-size: 11px;">resolved · {{relTime $a.ResolvedAt}}</span>
+    {{end}}
+  </div>
+
+</div>
+{{end}}

web/templates/partials/nav.html

@@ -26,7 +26,7 @@
       <nav class="flex items-end">
         <a href="/"        class="nav-tab {{if eq .Active "dashboard"}}active{{end}}">Dashboard</a>
         <a href="/repos"   class="nav-tab {{if eq .Active "repos"}}active{{end}}">Repos</a>
-        <a href="/alerts"  class="nav-tab {{if eq .Active "alerts"}}active{{end}}">Alerts{{if .OpenAlerts}} <span class="mono ml-1.5 text-[11px] text-bad">{{.OpenAlerts}}</span>{{end}}</a>
+        <a href="/alerts"  class="nav-tab {{if eq .Active "alerts"}}active{{end}}">Alerts{{if gt .OpenAlerts 0}} <span class="tag tag-critical mono ml-1">{{.OpenAlerts}}</span>{{end}}</a>
         <a href="/audit"   class="nav-tab {{if eq .Active "audit"}}active{{end}}">Audit</a>
         <a href="/settings" class="nav-tab {{if eq .Active "settings"}}active{{end}}">Settings</a>
       </nav>