better tabular layout

mreiferson · Oct 29, 2013 · d24d773 · d24d773
1 parent 98301c2
commit d24d773
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 62 deletions.
diff --git a/nsqadmin/graphs.go b/nsqadmin/graphs.go
@@ -210,37 +210,6 @@ func (g *GraphOptions) Sparkline(gr GraphTarget, key string) template.URL {
 	return template.URL(fmt.Sprintf("%s/render?%s", g.GraphiteUrl, params.Encode()))
 }
 
-func (g *GraphOptions) PercentileSparkline(gr GraphTarget, percentiles util.E2eProcessingLatencyAggregate) template.URL {
-	key := fmt.Sprintf("e2e_processing_latency_%.0f", percentiles.Percentiles[0]["quantile"]*100)
-	return g.Sparkline(gr, key)
-}
-
-func (g *GraphOptions) PercentileGraph(gr GraphTarget, percentiles util.E2eProcessingLatencyAggregate, height, width int) template.URL {
-	params := url.Values{}
-	params.Set("title", "end to end message processing latencies (milliseconds)")
-	params.Set("height", fmt.Sprintf("%d", height))
-	params.Set("width", fmt.Sprintf("%d", width))
-	params.Set("bgcolor", "ff000000") // transparent
-	params.Set("fgcolor", "999999")
-	params.Set("yMin", "0")
-	params.Set("lineMode", "connected")
-	params.Set("drawNullAsZero", "false")
-	interval := fmt.Sprintf("%dsec", *statsdInterval/time.Second)
-
-	var target string
-	for _, item := range percentiles.Percentiles {
-		quantile := item["quantile"] * 100.0
-		target, _ = gr.Target(fmt.Sprintf("e2e_processing_latency_%.0f", quantile))
-		target = fmt.Sprintf(target, g.Prefix(gr.Host(), metricType("e2e_processing_latency")))
-		target = fmt.Sprintf(`alias(summarize(scale(%s,0.000001),"%s","avg"), "%0.1f%%")`, target, interval, quantile)
-		params.Add("target", target)
-	}
-
-	params.Set("from", g.GraphInterval.GraphFrom)
-	params.Set("until", g.GraphInterval.GraphUntil)
-	return template.URL(fmt.Sprintf("%s/render?%s", g.GraphiteUrl, params.Encode()))
-}
-
 func (g *GraphOptions) LargeGraph(gr GraphTarget, key string) template.URL {
 	target, color := gr.Target(key)
 	target = fmt.Sprintf(target, g.Prefix(gr.Host(), metricType(key)))
@@ -251,6 +220,8 @@ func (g *GraphOptions) LargeGraph(gr GraphTarget, key string) template.URL {
 	params.Set("fgcolor", "999999")
 	params.Set("colorList", color)
 	params.Set("yMin", "0")
+	params.Set("lineMode", "connected")
+	params.Set("drawNullAsZero", "false")
 	interval := fmt.Sprintf("%dsec", *statsdInterval/time.Second)
 	target = fmt.Sprintf(`summarize(%s,"%s","avg")`, target, interval)
 	if metricType(key) == "counter" {

diff --git a/nsqadmin/http.go b/nsqadmin/http.go
@@ -26,6 +26,7 @@ func loadTemplates() {
 		"commafy":                 util.Commafy,
 		"nanotohuman":             util.NanoSecondToHuman,
 		"floatToPercent":          util.FloatToPercent,
+		"percSuffix":              util.PercSuffix,
 		"getNodeConsistencyClass": getNodeConsistencyClass,
 	})
 	templates, err = t.ParseGlob(fmt.Sprintf("%s/*.html", *templateDir))

diff --git a/nsqadmin/templates/channel.html b/nsqadmin/templates/channel.html
@@ -1,5 +1,6 @@
 {{template "header.html" .}}
 {{$g := .GraphOptions}}
+{{$firstHost := index .ChannelStats.HostStats 0}}
 
 <ul class="breadcrumb">
   <li><a href="/">Streams</a> <span class="divider">/</span></li>
@@ -10,7 +11,7 @@
 {{if and $g.Enabled .HasE2eLatency}}
 <div class="row-fluid">
 <div class="span12 bottom-pad">
-<a href="{{$g.PercentileGraph .ChannelStats .ChannelStats.E2eProcessingLatency 480 800}}"><img class='img-polaroid' src="{{$g.PercentileGraph .ChannelStats .ChannelStats.E2eProcessingLatency 200 800}}"></a>
+<a href="{{$g.LargeGraph .ChannelStats.E2eProcessingLatency}}"><img class='img-polaroid' src="{{$g.LargeGraph .ChannelStats.E2eProcessingLatency}}"></a>
 </div>
 </div>
 {{end}}
@@ -73,10 +74,9 @@ <h4>Channel</h4>
         <tr>
             <th>&nbsp;</th>
             <th colspan="4" class='text-center'>Message Queues</th>
-            {{if $g.Enabled}}
-            <th colspan="4" class='text-center'>Statistics</th>
-            {{else}}
-            <th colspan="5" class='text-center'>Statistics</th>
+            <th colspan="{{if $g.Enabled}}5{{else}}4{{end}}" class='text-center'>Statistics</th>
+            {{if $firstHost.E2eProcessingLatency.Percentiles}}
+              <th colspan="{{len $firstHost.E2eProcessingLatency.Percentiles}}">E2E Processing Latency</th>
             {{end}}
         </tr>
         <tr>
@@ -90,7 +90,9 @@ <h4>Channel</h4>
             <th>Messages</th>
             {{if $g.Enabled}}<th>Rate</th>{{end}}
             <th>Connections</th>
-            {{if .HasE2eLatency}}<th>E2E Processing Latency</th>{{end}}
+            {{range $e2e := $firstHost.E2eProcessingLatency.Percentiles}}
+              <th>{{$e2e.quantile | floatToPercent}}<sup>{{$e2e.quantile | percSuffix}}</sup></th>
+            {{end}}
         </tr>
     </thead>
     <tbody>
@@ -108,11 +110,11 @@ <h4>Channel</h4>
             {{if $g.Enabled}}<td class="bold rate" target="{{$g.Rate $c}}"></td> {{end}}
             <td>{{$c.ClientCount}}</td>
             {{if $c.E2eProcessingLatency.Percentiles}}
+              {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
                 <td>
-                    {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
-                        <span class=e2eprocessinglatency title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
-                    {{end}}
+                  <span title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
                 </td>
+              {{end}}
             {{end}}
         </tr>
         {{if $g.Enabled}}
@@ -127,7 +129,9 @@ <h4>Channel</h4>
             <td><a href="{{$g.LargeGraph $c "message_count"}}"><img width="120" height="20"  src="{{$g.Sparkline $c "message_count"}}"></a></td>
             <td></td>
             <td><a href="{{$g.LargeGraph $c "clients"}}"><img width="120" height="20"  src="{{$g.Sparkline $c "clients"}}"></a></td>
-            <td><a href="{{$g.PercentileGraph $c $c.E2eProcessingLatency 480 800}}"><img width="120" src="{{$g.PercentileSparkline $c $c.E2eProcessingLatency}}"></a></td>
+            {{if $c.E2eProcessingLatency.Percentiles}}
+              <td colspan="{{len $c.E2eProcessingLatency.Percentiles}}"></td>
+            {{end}}
         </tr>
         {{end}}
 
@@ -145,11 +149,11 @@ <h4>Channel</h4>
             {{if $g.Enabled}}<td class="bold rate" target="{{$g.Rate $c}}"></td> {{end}}
             <td>{{$c.ClientCount}}</td>
             {{if $c.E2eProcessingLatency.Percentiles}}
+              {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
                 <td>
-                    {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
-                        <span class=e2eprocessinglatency title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}, samples = {{$e2e.count}}">{{$e2e.average | nanotohuman}}</span>
-                    {{end}}
+                  <span title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
                 </td>
+              {{end}}
             {{end}}
         </tr>
         {{if $g.Enabled}}
@@ -164,7 +168,9 @@ <h4>Channel</h4>
             <td><a href="{{$g.LargeGraph $c "message_count"}}"><img width="120" height="20"  src="{{$g.Sparkline $c "message_count"}}"></a></td>
             <td></td>
             <td><a href="{{$g.LargeGraph $c "clients"}}"><img width="120" height="20"  src="{{$g.Sparkline $c "clients"}}"></a></td>
-            <td><a href="{{$g.PercentileGraph $c $c.E2eProcessingLatency 480 800}}"><img width="120" src="{{$g.PercentileSparkline $c $c.E2eProcessingLatency}}"></a></td>
+            {{if $c.E2eProcessingLatency.Percentiles}}
+              <td colspan="{{len $c.E2eProcessingLatency.Percentiles}}"></td>
+            {{end}}
         </tr>
         {{end}}
     </tbody>

diff --git a/nsqadmin/templates/topic.html b/nsqadmin/templates/topic.html
@@ -1,6 +1,7 @@
 {{template "header.html" .}}
 {{$g := .GraphOptions}}
 {{$gts := .GlobalTopicStats}}
+{{$firstTopic := index .TopicStats 0}}
 
 <ul class="breadcrumb">
   <li><a href="/">Streams</a> <span class="divider">/</span></li>
@@ -10,7 +11,7 @@
 {{if and $g.Enabled .HasE2eLatency}}
 <div class="row-fluid">
 <div class="span12 bottom-pad">
-<a href="{{$g.PercentileGraph $gts $gts.E2eProcessingLatency 480 800}}"><img class='img-polaroid' src="{{$g.PercentileGraph $gts $gts.E2eProcessingLatency 200 800}}"></a>
+<a href="{{$g.LargeGraph $gts.E2eProcessingLatency}}"><img class='img-polaroid' src="{{$g.LargeGraph $gts.E2eProcessingLatency}}"></a>
 </div>
 </div>
 {{end}}
@@ -51,14 +52,22 @@ <h4>Notice</h4> No producers exist for this topic.
 <div class="span12">
 <h4>Topic Message Queue</h4>
 <table class="table table-bordered table-condensed">
+    {{if $firstTopic.E2eProcessingLatency.Percentiles}}
+      <tr>
+          <th colspan="{{if $g.Enabled}}6{{else}}5{{end}}"></th>
+          <th colspan="{{len $firstTopic.E2eProcessingLatency.Percentiles}}">E2E Processing Latency</th>
+      </tr>
+    {{end}}
     <tr>
         <th>NSQd Host</th>
         <th>Depth</th>
         <th>Memory + Disk</th>
         <th>Messages</th>
         {{if $g.Enabled}}<th>Rate</th>{{end}}
         <th>Channels</th>
-        {{if .HasE2eLatency}}<th>E2E Processing Latency</th>{{end}}
+        {{range $e2e := $firstTopic.E2eProcessingLatency.Percentiles}}
+          <th>{{$e2e.quantile | floatToPercent}}<sup>{{$e2e.quantile | percSuffix}}</sup></th>
+        {{end}}
     </tr>
     {{range $t := .TopicStats}}
     <tr>
@@ -81,12 +90,11 @@ <h4>Topic Message Queue</h4>
             {{if $g.Enabled}}<td class="bold rate" target="{{$g.Rate $t}}"></td> {{end}}
         <td>{{.ChannelCount}}</td>
         {{if $t.E2eProcessingLatency.Percentiles}}
-            <td>
-                {{if $g.Enabled}}<a href="{{$g.PercentileGraph $t $t.E2eProcessingLatency 480 800}}"><img width="120" src="{{$g.PercentileSparkline $t $t.E2eProcessingLatency}}"></a>{{end}}
-                {{range $e2e := $t.E2eProcessingLatency.Percentiles}}
-                    <span class=e2eprocessinglatency title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
-                {{end}}
-            </td>
+            {{range $e2e := $t.E2eProcessingLatency.Percentiles}}
+              <td>
+                <span title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
+              </td>
+            {{end}}
         {{end}}
     </tr>
     {{end}}
@@ -103,7 +111,13 @@ <h4>Topic Message Queue</h4>
         </td>
         {{if $g.Enabled}}<td class="bold rate" target="{{$g.Rate $gts}}"></td> {{end}}
         <td>{{$gts.ChannelCount}}</td>
-        {{if .HasE2eLatency}}<td>{{if $g.Enabled}}<a href="{{$g.PercentileGraph $gts $gts.E2eProcessingLatency 480 800}}"><img width="120" src="{{$g.PercentileSparkline $gts $gts.E2eProcessingLatency}}"></a>{{end}} </td>{{end}}
+        {{if $gts.E2eProcessingLatency.Percentiles}}
+            {{range $e2e := $gts.E2eProcessingLatency.Percentiles}}
+              <td>
+                <span title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
+              </td>
+            {{end}}
+        {{end}}
     </tr>
 </table>
 {{end}}
@@ -121,6 +135,12 @@ <h4>Notice</h4> No channels exist for this topic.
 <div class="span12">
 <h4>Channel Message Queues</h4>
 <table class="table table-bordered table-condensed">
+    {{if $firstTopic.E2eProcessingLatency.Percentiles}}
+      <tr>
+          <th colspan="{{if $g.Enabled}}10{{else}}9{{end}}"></th>
+          <th colspan="{{len $firstTopic.E2eProcessingLatency.Percentiles}}">E2E Processing Latency</th>
+      </tr>
+    {{end}}
     <tr>
         <th>Channel</th>
         <th>Depth</th>
@@ -132,7 +152,9 @@ <h4>Channel Message Queues</h4>
         <th>Messages</th>
         {{if $g.Enabled}}<th>Rate</th>{{end}}
         <th>Connections</th>
-        {{if .HasE2eLatency}}<th>E2E Processing Latency</th>{{end}}
+        {{range $e2e := $firstTopic.E2eProcessingLatency.Percentiles}}
+          <th>{{$e2e.quantile | floatToPercent}}<sup>{{$e2e.quantile | percSuffix}}</sup></th>
+        {{end}}
     </tr>
 
 {{range $c := .ChannelStats}}
@@ -151,15 +173,19 @@ <h4>Channel Message Queues</h4>
         <td>{{$c.MessageCount | commafy}}</td>
         {{if $g.Enabled}}<td class="bold rate" target="{{$g.Rate $c}}"></td> {{end}}
         <td>
-            {{if $g.Enabled}}<a href="{{$g.LargeGraph $c "clients"}}"><img width="120" height="20" src="{{$g.Sparkline $c "clients"}}"></a>{{end}}
-            {{$c.ClientCount}}</td>
+            {{if $g.Enabled}}
+              <a href="{{$g.LargeGraph $c "clients"}}">
+                <img width="120" height="20" src="{{$g.Sparkline $c "clients"}}">
+              </a>
+            {{end}}
+            {{$c.ClientCount}}
+        </td>
         {{if $c.E2eProcessingLatency.Percentiles}}
+          {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
             <td>
-                {{if $g.Enabled}}<a href="{{$g.PercentileGraph $c $c.E2eProcessingLatency 480 800}}"><img width="120" src="{{$g.PercentileSparkline $c $c.E2eProcessingLatency}}"></a>{{end}}
-                {{range $e2e := $c.E2eProcessingLatency.Percentiles}}
-                    <span class=e2eprocessinglatency title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
-                {{end}}
+              <span title="{{$e2e.quantile | floatToPercent}}: min = {{$e2e.min | nanotohuman}}, max = {{$e2e.max | nanotohuman}}">{{$e2e.average | nanotohuman}}</span>
             </td>
+          {{end}}
         {{end}}
     </tr>
 {{end}}

diff --git a/util/percentile.go b/util/percentile.go
@@ -149,6 +149,14 @@ type E2eProcessingLatencyAggregate struct {
 	Percentiles []map[string]float64 `json:"percentiles"`
 }
 
+func (n *E2eProcessingLatencyAggregate) Target(key string) (string, string) {
+	return fmt.Sprintf(`scale(%s,0.000001)`, key), ""
+}
+
+func (n *E2eProcessingLatencyAggregate) Host() string {
+	return "*"
+}
+
 func E2eProcessingLatencyAggregateFromJson(j *simplejson.Json) *E2eProcessingLatencyAggregate {
 	count := j.Get("count").MustInt()
 

diff --git a/util/template_functions.go b/util/template_functions.go
@@ -23,5 +23,17 @@ func Commafy(i interface{}) string {
 }
 
 func FloatToPercent(i float64) string {
-	return fmt.Sprintf("%0.1f%%", i*100.0)
+	return fmt.Sprintf("%.0f", i*100.0)
+}
+
+func PercSuffix(i float64) string {
+	switch int(i*100) % 10 {
+	case 1:
+		return "st"
+	case 2:
+		return "nd"
+	case 3:
+		return "rd"
+	}
+	return "th"
 }