Prettify/Bootstrapify alert tables.

web/alerts.go

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

web/static/css/alerts.css

@@ -1,48 +1,19 @@
-.alert_wrapper {
-  padding: 2px;
-}
-
 .alert_header {
-  padding: 3px;
   cursor: pointer;
 }
 
-.alert_content {
-  padding: 3px;
+.alert_details {
   display: none;
 }
 
-.alert_header.firing {
-  background-color: #ff7673;
-}
-
-.alert_header.pending {
-  background-color: #ffcf40;
-}
-
-.alert_header.inactive {
-  background-color: #92ed6b;
+.alert_rule {
+  padding: 5px;
+  color: #333;
+  background-color: #ddd;
+  font-family: monospace;
+  font-weight: normal;
 }
 
 .alert_description {
-  margin-left: 3px;
   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;
-}

web/static/css/prometheus.css

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

web/static/js/alerts.js

@@ -1,5 +1,14 @@
 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();
+  });
 }
 
 $(init);

web/templates/alerts.html

@@ -4,28 +4,31 @@
 {{end}}
 
 {{define "content"}}
-    <h2>Alerts</h2>
-    <div class="grouping_box">
-      {{range .AlertingRules}}
+<div class="container-fluid">
+  <h2>Alerts</h2>
+  <table class="table table-bordered table-collapsed">
+    <tbody>
+    {{$alertStateToRowClass := .AlertStateToRowClass}}
+    {{range .AlertingRules}}
       {{$activeAlerts := .ActiveAlerts}}
-      <div class="alert_wrapper">
-        <div class="alert_header {{.State}}">
-          {{.Name}} ({{len $activeAlerts}} active)
-        </div>
-        <div class="alert_content">
+      <tr class="{{index $alertStateToRowClass .State}} alert_header">
+        <td><i class="icon-chevron-down"></i> <b>{{.Name}}</b> ({{len $activeAlerts}} active)</td>
+      </tr>
+      <tr class="alert_details">
+        <td>
           <div class="alert_description">
-            <b>Rule:</b> {{.HTMLSnippet}}
+            <span class="label alert_rule">{{.HTMLSnippet}}</span>
           </div>
           {{if $activeAlerts}}
-          <table class="alert_active_elements">
-            <tr>
+          <table class="table table-bordered table-hover table-condensed alert_elements_table">
+            <tr class="">
               <th>Labels</th>
               <th>State</th>
               <th>Active Since</th>
               <th>Value</th>
             </tr>
             {{range $activeAlerts}}
-            <tr>
+            <tr class="{{index $alertStateToRowClass .State}}"> 
               <td>{{.Labels}}</td>
               <td>{{.State}}</td>
               <td>{{.ActiveSince}}</td>
@@ -34,8 +37,10 @@
             {{end}}
           </table>
           {{end}}
-        </div>
-      </div>
-      {{end}}
-    </div>
+        </td>
+      </tr>
+    {{end}}
+    </tbody>
+  </table>
+</div>
 {{end}}