Improve UI of /alerts page.

Changes to the UI:
- "Active Since" timestamps are now human-readable.
- Alerting rules are now pretty-printed better.
- Labels are no longer just strings, but alert bubbles (like we do on
  the status page for base labels).
- Alert states and target health states are now capitalized in the
  presentation layer rather than at the source.

retrieval/target.go

@@ -73,11 +73,11 @@ type TargetHealth int
 func (t TargetHealth) String() string {
 	switch t {
 	case HealthUnknown:
-		return "UNKNOWN"
+		return "unknown"
 	case HealthGood:
-		return "HEALTHY"
+		return "healthy"
 	case HealthBad:
-		return "UNHEALTHY"
+		return "unhealthy"
 	}
 	panic("unknown state")
 }

rules/alerting.go

@@ -209,23 +209,38 @@ func (rule *AlertingRule) eval(timestamp clientmodel.Timestamp, engine *promql.E
 }
 
 func (rule *AlertingRule) String() string {
-	return fmt.Sprintf("ALERT %s IF %s FOR %s WITH %s", rule.name, rule.vector, strutil.DurationToString(rule.holdDuration), rule.labels)
+	s := fmt.Sprintf("ALERT %s", rule.name)
+	s += fmt.Sprintf("\n\tIF %s", rule.vector)
+	if rule.holdDuration > 0 {
+		s += fmt.Sprintf("\n\tFOR %s", strutil.DurationToString(rule.holdDuration))
+	}
+	if len(rule.labels) > 0 {
+		s += fmt.Sprintf("\n\tWITH %s", rule.labels)
+	}
+	s += fmt.Sprintf("\n\tSUMMARY %q", rule.summary)
+	s += fmt.Sprintf("\n\tDESCRIPTION %q", rule.description)
+	return s
 }
 
-// HTMLSnippet returns an HTML snippet representing this alerting rule.
+// HTMLSnippet returns an HTML snippet representing this alerting rule. The
+// resulting snippet is expected to be presented in a <pre> element, so that
+// line breaks and other returned whitespace is respected.
 func (rule *AlertingRule) HTMLSnippet(pathPrefix string) template.HTML {
 	alertMetric := clientmodel.Metric{
 		clientmodel.MetricNameLabel: alertMetricName,
 		alertNameLabel:              clientmodel.LabelValue(rule.name),
 	}
-	return template.HTML(fmt.Sprintf(
+	s := fmt.Sprintf("ALERT <a href=%q>%s</a>", pathPrefix+strutil.GraphLinkForExpression(alertMetric.String()), rule.name)
-		`ALERT <a href="%s">%s</a> IF <a href="%s">%s</a> FOR %s WITH %s`,
+	s += fmt.Sprintf("\n  IF <a href=%q>%s</a>", pathPrefix+strutil.GraphLinkForExpression(rule.vector.String()), rule.vector)
-		pathPrefix+strutil.GraphLinkForExpression(alertMetric.String()),
+	if rule.holdDuration > 0 {
-		rule.name,
+		s += fmt.Sprintf("\n  FOR %s", strutil.DurationToString(rule.holdDuration))
-		pathPrefix+strutil.GraphLinkForExpression(rule.vector.String()),
+	}
-		rule.vector,
+	if len(rule.labels) > 0 {
-		strutil.DurationToString(rule.holdDuration),
+		s += fmt.Sprintf("\n  WITH %s", rule.labels)
-		rule.labels))
+	}
+	s += fmt.Sprintf("\n  SUMMARY %q", rule.summary)
+	s += fmt.Sprintf("\n  DESCRIPTION %q", rule.description)
+	return template.HTML(s)
 }
 
 // State returns the "maximum" state: firing > pending > inactive.

template/template.go

@@ -238,6 +238,13 @@ func NewTemplateExpander(text string, name string, data interface{}, timestamp c
 				}
 				return fmt.Sprintf("%.4g%ss", v, prefix)
 			},
+			"humanizeTimestamp": func(v float64) string {
+				if math.IsNaN(v) || math.IsInf(v, 0) {
+					return fmt.Sprintf("%.4g", v)
+				}
+				t := clientmodel.TimestampFromUnixNano(int64(v * 1000000000)).Time()
+				return fmt.Sprint(t)
+			},
 			"pathPrefix": func() string {
 				return pathPrefix
 			},
@@ -245,6 +252,14 @@ func NewTemplateExpander(text string, name string, data interface{}, timestamp c
 	}
 }
 
+// Funcs adds the functions in fm to the templateExpander's function map.
+// Existing functions will be overwritten in case of conflict.
+func (te templateExpander) Funcs(fm text_template.FuncMap) {
+	for k, v := range fm {
+		te.funcMap[k] = v
+	}
+}
+
 // Expand a template.
 func (te templateExpander) Expand() (result string, resultErr error) {
 	// It'd better to have no alert description than to kill the whole process

template/template_test.go

@@ -135,9 +135,14 @@ func TestTemplateExpansion(t *testing.T) {
 		},
 		{
 			// Humanize* Inf and NaN.
-			text:   "{{ range . }}{{ humanize . }}:{{ humanize1024 . }}:{{ humanizeDuration . }}:{{ end }}",
+			text:   "{{ range . }}{{ humanize . }}:{{ humanize1024 . }}:{{ humanizeDuration . }}:{{humanizeTimestamp .}}:{{ end }}",
 			input:  []float64{math.Inf(1), math.Inf(-1), math.NaN()},
-			output: "+Inf:+Inf:+Inf:-Inf:-Inf:-Inf:NaN:NaN:NaN:",
+			output: "+Inf:+Inf:+Inf:+Inf:-Inf:-Inf:-Inf:-Inf:NaN:NaN:NaN:NaN:",
+		},
+		{
+			// HumanizeTimestamp - clientmodel.SampleValue input.
+			text:   "{{ 1435065584.128 | humanizeTimestamp }}",
+			output: "2015-06-23 15:19:44.128 +0200 CEST",
 		},
 		{
 			// Title.

web/blob/static/css/alerts.css

@@ -5,19 +5,3 @@
 .alert_details {
   display: none;
 }
-
-.silence_children_link {
-  margin-left: 5px;
-}
-
-.alert_rule {
-  padding: 5px;
-  color: #333;
-  background-color: #ddd;
-  font-family: monospace;
-  font-weight: normal;
-}
-
-.alert_description {
-  padding: 8px 0 8px 0;
-}

web/blob/static/css/prometheus.css

@@ -10,8 +10,9 @@ th.job_header {
   padding-bottom: 10px;
 }
 
-.target_status_alert {
+.state_indicator {
   padding: 0 4px 0 4px;
+  text-transform: uppercase;
 }
 
 .literal_output td {

web/blob/templates/alerts.html

@@ -16,9 +16,9 @@
       </tr>
       <tr class="alert_details">
         <td>
-          <div class="alert_description">
+          <div>
-            <span class="label alert_rule">{{.HTMLSnippet pathPrefix}}</span>
+            <pre><code>{{.HTMLSnippet pathPrefix}}</code></pre>
-            <a href="#" class="silence_children_link">Silence All Children&hellip;</a>
+            <a href="#" class="silence_children_link">Silence all instances of this alert&hellip;</a>
           </div>
           {{if $activeAlerts}}
           <table class="table table-bordered table-hover table-condensed alert_elements_table">
@@ -30,12 +30,16 @@
               <th>Silence</th>
             </tr>
             {{range $activeAlerts}}
-            <tr class="{{index $alertStateToRowClass .State}}"> 
+            <tr>
-              <td>{{.Labels}}</td>
+              <td>
-              <td>{{.State}}</td>
+                {{range $label, $value := .Labels}}
-              <td>{{.ActiveSince}}</td>
+                  <span class="label label-primary">{{$label}}="{{$value}}"</span>
+                {{end}}
+              </td>
+              <td><span class="alert alert-{{ .State | alertStateToClass }} state_indicator">{{.State}}</span></td>
+              <td>{{.ActiveSince.Time}}</td>
               <td>{{.Value}}</td>
-              <td><a href="#" class="silence_alert_link">Silence&hellip;</button><td>
+              <td><a href="#" class="silence_alert_link">Silence&hellip;</a></td>
             </tr>
             {{end}}
           </table>

web/blob/templates/status.html

@@ -55,7 +55,7 @@
                 {{end}}
               </td>
               <td>
-                <span class="alert alert-{{ .Status.Health | healthToClass }} target_status_alert">
+                <span class="alert alert-{{ .Status.Health | healthToClass }} state_indicator">
                   {{.Status.Health}}
                 </span>
               </td>