RepoMirrors
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ui: clarify alert state toggle via checkbox icon (#7936) 

The current meaning of the alert firing/pending/inactive
toggle seems ambiguouos as #7460 demonstrates.
This commit adds a checkbox icon to clarify the
active state of the button.

Signed-off-by: Christian Hoffmann <mail@hoffmann-christian.info>
This commit is contained in:
Christian Hoffmann 2020-09-16 15:02:37 +02:00 committed by GitHub
parent 68d65a8ac5
commit db13003721
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/ui/static/js/alerts.js
View File

@ -49,6 +49,11 @@ function init() {
$("#alertFilters :input").change(function() {
const target = $(this).attr("id");
var shouldHide = $(this).parent().hasClass("active");
var checkClass = shouldHide ? 'unchecked' : 'check';
$(this).parent().find('i.glyphicon')
.removeClass("glyphicon-check")
.removeClass("glyphicon-unchecked")
.addClass("glyphicon-" + checkClass);
if (target === "inactiveAlerts") {
localStorage.setItem("hideInactiveAlerts", shouldHide);
displayAlerts("alert-success", !shouldHide);

6
web/ui/templates/alerts.html
View File

@ -8,13 +8,13 @@
<h1>Alerts</h1>
<div id="alertFilters" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> Inactive ({{ .Counts.Inactive }})
<input type="checkbox" name="alertFilters" id="inactiveAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Inactive ({{ .Counts.Inactive }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> Pending ({{ .Counts.Pending }})
<input type="checkbox" name="alertFilters" id="pendingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Pending ({{ .Counts.Pending }})
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> Firing ({{ .Counts.Firing }})
<input type="checkbox" name="alertFilters" id="firingAlerts" autocomplete="off"> <i class="glyphicon glyphicon-check"></i> Firing ({{ .Counts.Firing }})
</label>
</br>
</div>