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

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