ui: alerts list page + alert row partial + nav badge
This commit is contained in:
@@ -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}}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user