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,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}}