mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-12-26 22:19:40 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #337 from prometheus/ui/alert-tables

Browse source 
Prettify/Bootstrapify alert tables.
This commit is contained in:
juliusv 2013-07-24 06:10:27 -07:00
parent f52baf02ab 481ee4096b
commit ce4881d673
5 changed files with 55 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/alerts.go
View file

@ -21,7 +21,8 @@ import (
) )
type AlertStatus struct { type AlertStatus struct {
AlertingRules []*rules.AlertingRule AlertingRules []*rules.AlertingRule
AlertStateToRowClass map[rules.AlertState]string
} }
type AlertsHandler struct { type AlertsHandler struct {
@ -56,6 +57,11 @@ func (h *AlertsHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
alertStatus := AlertStatus{ alertStatus := AlertStatus{
AlertingRules: alertsSorter.alerts, AlertingRules: alertsSorter.alerts,
AlertStateToRowClass: map[rules.AlertState]string{
rules.INACTIVE: "success",
rules.PENDING: "warning",
rules.FIRING: "error",
},
} }
executeTemplate(w, "alerts", alertStatus) executeTemplate(w, "alerts", alertStatus)
} }

43
web/static/css/alerts.css
View file

@ -1,48 +1,23 @@
.alert_wrapper {
padding: 2px;
}
.alert_header { .alert_header {
padding: 3px;
cursor: pointer; cursor: pointer;
} }
.alert_content { .alert_details {
padding: 3px;
display: none; display: none;
} }
.alert_header.firing { .silence_children_link {
background-color: #ff7673; margin-left: 5px;
} }
.alert_header.pending { .alert_rule {
background-color: #ffcf40; padding: 5px;
} color: #333;
background-color: #ddd;
.alert_header.inactive { font-family: monospace;
background-color: #92ed6b; font-weight: normal;
} }
.alert_description { .alert_description {
margin-left: 3px;
padding: 8px 0 8px 0; padding: 8px 0 8px 0;
} }
.alert_active_elements {
border: 1px solid #dddddd;
}
.alert_active_elements th {
background-color: #dddddd;
padding: 0 5px 0 5px;
}
.alert_active_elements td {
background-color: #eebbbb;
padding: 0 5px 0 5px;
}
.alert_active_elements tr:hover td {
background-color: #ffcf40;
}

9
web/static/css/prometheus.css
View file

@ -1,12 +1,5 @@
body { body {
font-family: Arial, sans-serif; padding-top: 40px;
font-size: 14px;
line-height: 20px;
color: #333;
background-color: #f2f2f2;
margin: 0px;
padding: 40px 0 0 0;
} }
.error_text { .error_text {

15
web/static/js/alerts.js
View file

@ -1,5 +1,18 @@
function init() { function init() {
$(".alert_header").click(function() {$(this).next().toggle(); }); $(".alert_header").click(function() {
var expanderIcon = $(this).find("i.icon-chevron-down");
if (expanderIcon.length != 0) {
expanderIcon.removeClass("icon-chevron-down").addClass("icon-chevron-up");
} else {
var collapserIcon = $(this).find("i.icon-chevron-up");
collapserIcon.removeClass("icon-chevron-up").addClass("icon-chevron-down");
}
$(this).next().toggle();
});
$(".silence_alert_link, .silence_children_link").click(function() {
alert("Silencing is not yet supported.");
});
} }
$(init); $(init);

40
web/templates/alerts.html
View file

@ -4,38 +4,46 @@
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<h2>Alerts</h2> <div class="container-fluid">
<div class="grouping_box"> <h2>Alerts</h2>
{{range .AlertingRules}} <table class="table table-bordered table-collapsed">
<tbody>
{{$alertStateToRowClass := .AlertStateToRowClass}}
{{range .AlertingRules}}
{{$activeAlerts := .ActiveAlerts}} {{$activeAlerts := .ActiveAlerts}}
<div class="alert_wrapper"> <tr class="{{index $alertStateToRowClass .State}} alert_header">
<div class="alert_header {{.State}}"> <td><i class="icon-chevron-down"></i> <b>{{.Name}}</b> ({{len $activeAlerts}} active)</td>
{{.Name}} ({{len $activeAlerts}} active) </tr>
</div> <tr class="alert_details">
<div class="alert_content"> <td>
<div class="alert_description"> <div class="alert_description">
<b>Rule:</b> {{.HTMLSnippet}} <span class="label alert_rule">{{.HTMLSnippet}}</span>
<a href="#" class="silence_children_link">Silence All Children&hellip;</a>
</div> </div>
{{if $activeAlerts}} {{if $activeAlerts}}
<table class="alert_active_elements"> <table class="table table-bordered table-hover table-condensed alert_elements_table">
<tr> <tr class="">
<th>Labels</th> <th>Labels</th>
<th>State</th> <th>State</th>
<th>Active Since</th> <th>Active Since</th>
<th>Value</th> <th>Value</th>
<th>Silence</th>
</tr> </tr>
{{range $activeAlerts}} {{range $activeAlerts}}
<tr> <tr class="{{index $alertStateToRowClass .State}}">
<td>{{.Labels}}</td> <td>{{.Labels}}</td>
<td>{{.State}}</td> <td>{{.State}}</td>
<td>{{.ActiveSince}}</td> <td>{{.ActiveSince}}</td>
<td>{{.Value}}</td> <td>{{.Value}}</td>
<td><a href="#" class="silence_alert_link">Silence&hellip;</button><td>
</tr> </tr>
{{end}} {{end}}
</table> </table>
{{end}} {{end}}
</div> </td>
</div> </tr>
{{end}} {{end}}
</div> </tbody>
</table>
</div>
{{end}} {{end}}