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

2026-05-04 20:15:01 +01:00
parent 5d8350132c
commit 35dee98cf9
8 changed files with 320 additions and 1 deletions
@@ -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}}