ui(alerts): make Acknowledge vs Resolve distinction visible
CI / Build (windows/amd64) (pull_request) Successful in 22s
CI / Lint (pull_request) Successful in 37s
CI / Build (linux/amd64) (pull_request) Successful in 22s
CI / Build (linux/arm64) (pull_request) Successful in 23s
CI / Test (linux/amd64) (pull_request) Successful in 3m55s
CI / Build (windows/amd64) (pull_request) Successful in 22s
CI / Lint (pull_request) Successful in 37s
CI / Build (linux/amd64) (pull_request) Successful in 22s
CI / Build (linux/arm64) (pull_request) Successful in 23s
CI / Test (linux/amd64) (pull_request) Successful in 3m55s
Both buttons make the row leave the Open tab, so on a quiet system
they look identical. The behavioural difference only manifests next
time the underlying condition fires:
- Acknowledge silences fan-out while the problem persists; the
alert parks on the Acknowledged tab and recurrences just touch
last_seen_at without re-notifying.
- Resolve closes the alert. If the same condition fires again
later, a fresh alert with a new id raises and the channels
fan out as if it were the first time.
Add a one-line legend under the page header explaining both, and
title= tooltips on each button covering the same ground for keyboard
and assistive tech.
This commit is contained in:
@@ -28,6 +28,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{/* triage legend — Acknowledge vs Resolve looks identical on screen
|
||||||
|
(both leave the Open tab) so the difference needs spelling out. */}}
|
||||||
|
<div class="text-ink-mute mt-2 leading-[1.55]" style="font-size: 11.5px; max-width: 760px;">
|
||||||
|
<span class="text-ink-mid">Acknowledge</span> silences fan-out while the underlying problem is still happening — the alert moves to the Acknowledged tab.
|
||||||
|
<span class="text-ink-mid">Resolve</span> closes the alert; the next failure raises a fresh one with a new notification.
|
||||||
|
</div>
|
||||||
|
|
||||||
{{/* filter strip */}}
|
{{/* filter strip */}}
|
||||||
<div class="panel mt-4 px-4 py-3 rounded-[7px]"
|
<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;">
|
style="display: grid; grid-template-columns: auto auto auto 1fr; gap: 14px; align-items: center;">
|
||||||
|
|||||||
@@ -69,13 +69,15 @@
|
|||||||
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
||||||
<button type="submit" class="btn"
|
<button type="submit" class="btn"
|
||||||
hx-post="/alerts/{{$a.ID}}/acknowledge{{if $qs}}?{{$qs}}{{end}}"
|
hx-post="/alerts/{{$a.ID}}/acknowledge{{if $qs}}?{{$qs}}{{end}}"
|
||||||
hx-swap="none">Acknowledge</button>
|
hx-swap="none"
|
||||||
|
title="I've seen this — silence further fan-out, but the alert is still open until the condition clears or you Resolve it.">Acknowledge</button>
|
||||||
</form>
|
</form>
|
||||||
<form method="post" action="/alerts/{{$a.ID}}/resolve">
|
<form method="post" action="/alerts/{{$a.ID}}/resolve">
|
||||||
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
||||||
<button type="submit" class="btn"
|
<button type="submit" class="btn"
|
||||||
hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
|
hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
|
||||||
hx-swap="none">Resolve</button>
|
hx-swap="none"
|
||||||
|
title="The underlying issue is fixed. Closes the alert. If the condition fires again a fresh alert will be raised with a new fan-out.">Resolve</button>
|
||||||
</form>
|
</form>
|
||||||
{{else if eq $status "acknowledged"}}
|
{{else if eq $status "acknowledged"}}
|
||||||
<span class="text-ink-fade" style="font-size: 11px;">
|
<span class="text-ink-fade" style="font-size: 11px;">
|
||||||
@@ -85,7 +87,8 @@
|
|||||||
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
{{if $qs}}<input type="hidden" name="qs" value="{{$qs}}">{{end}}
|
||||||
<button type="submit" class="btn"
|
<button type="submit" class="btn"
|
||||||
hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
|
hx-post="/alerts/{{$a.ID}}/resolve{{if $qs}}?{{$qs}}{{end}}"
|
||||||
hx-swap="none">Resolve</button>
|
hx-swap="none"
|
||||||
|
title="The underlying issue is fixed. Closes the alert.">Resolve</button>
|
||||||
</form>
|
</form>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="text-ink-fade" style="font-size: 11px;">resolved · {{relTime $a.ResolvedAt}}</span>
|
<span class="text-ink-fade" style="font-size: 11px;">resolved · {{relTime $a.ResolvedAt}}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user