ui: alerts list page + alert row partial + nav badge
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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")
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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}}
|
||||
@@ -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