From 6ce0934ed51a0e1e06e639cb30b885b326d0e5da Mon Sep 17 00:00:00 2001
From: Jonathan Slenders <jonathan@slenders.be>
Date: Wed, 3 Sep 2014 15:19:07 +0200
Subject: [PATCH] Showing sum/lower/mean/upper values in debugbar panel.

---
 django_statsd/panel.py                        | 34 ++++++++++-
 .../templates/toolbar_statsd/statsd.html      | 58 +++++++++++++++----
 2 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/django_statsd/panel.py b/django_statsd/panel.py
index c13a7b3..fd4de88 100644
--- a/django_statsd/panel.py
+++ b/django_statsd/panel.py
@@ -1,3 +1,5 @@
+from collections import defaultdict
+
 from django.conf import settings
 from django.utils.translation import ugettext_lazy as _, ungettext
 
@@ -43,6 +45,35 @@ def times(stats):
                         duration_ratio_relative * 100.0,
                         duration,
                         ])
+    results.sort(key=lambda r: r[1])
+    return results
+
+
+def times_summary(stats):
+    results = []
+    if not stats:
+        return results
+
+    timings = defaultdict(list)
+    for stat in stats:
+        timings[stat[0].split('|')[0]].append(stat[2])
+
+    for stat, v in timings.iteritems():
+        if not v:
+            continue
+        v.sort()
+        count = len(v)
+        vmin, vmax = v[0], v[-1]
+        vsum = sum(v)
+        mean = vsum / float(count)
+        results.append({
+            'stat': stat,
+            'count': count,
+            'sum': vsum,
+            'lower': vmin,
+            'upper': vmax,
+            'mean': mean,
+            })
     return results
 
 
@@ -76,5 +107,6 @@ class StatsdPanel(Panel):
         self.record_stats({
             'graphite': config.get('graphite'),
             'statsd': munge(self.statsd.cache),
-            'timings': times(self.statsd.timings)
+            'timings': times(self.statsd.timings),
+            'timings_summary': times_summary(self.statsd.timings),
         })
diff --git a/django_statsd/templates/toolbar_statsd/statsd.html b/django_statsd/templates/toolbar_statsd/statsd.html
index fce887e..d25d221 100644
--- a/django_statsd/templates/toolbar_statsd/statsd.html
+++ b/django_statsd/templates/toolbar_statsd/statsd.html
@@ -2,31 +2,57 @@
   data-graphite="{{ graphite }}"
   data-roots-timers="{% for root in timers %}{{ root }}{% if not forloop.last %}|{% endif %}{% endfor %}"
   data-roots-counts="{% for root in counts %}{{ root }}{% if not forloop.last %}|{% endif %}{% endfor %}">
-<table id="timings">
+<table id="timings-summary">
   <thead>
     <tr>
       <th>Stat</th>
-      <th class="timeline">Timing</th>
-      <th>Time</th>
+      <th>Count</th>
+      <th>Sum</th>
+      <th>Lower</th>
+      <th>Mean</th>
+      <th>Upper</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for value in timings_summary %}
+    <tr>
+      <td><a href="#" class="statsd" data-key="{{ value.stat }}" data-type="timing">{{ value.stat }}</a></td>
+      <td>{{ value.count }}</td>
+      <td>{{ value.sum }}</td>
+      <td>{{ value.lower }}</td>
+      <td>{{ value.mean|floatformat:"2" }}</td>
+      <td>{{ value.upper }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+<table id="timings" style="display: table">
+  <thead>
+    <tr>
+      <th>Stat</th>
+      <th>Time (ms)</th>
+      <th class="timeline" style="width: 99%">Timing</th>
     </tr>
   </thead>
   <tbody>
     {% for value in timings %}
     <tr>
       <td><a href="#" class="statsd" data-key="{{ value.0 }}" data-type="timing">{{ value.0 }}</a></td>
+      <td>{{ value.3 }}</td>
       <td class="timeline">
         <div class="djDebugTimeline">
-          <div class="djDebugLineChart" style="left: {{ value.1 }}%;">
-            <strong style="width: {{ value.2 }}%; min-width: 1px; background: grey;">&nbsp;</strong>
+          <div class="djDebugLineChart djDebugLineChartSlave">
+            <strong style="background: lightgrey; width: 0">&nbsp;</strong>
+          </div>
+          <div class="djDebugLineChart djDebugLineChartActual" style="left: {{ value.1 }}%;">
+            <strong style="width: {{ value.2 }}%; background: grey;">&nbsp;</strong>
           </div>
       </div>
       </td>
-      <td>{{ value.3 }}ms</td>
     </tr>
     {% endfor %}
   </tbody>
 </table>
-
 <table>
   <thead>
     <tr>
@@ -57,7 +83,7 @@
 </table>
 </section>
 
-<div id="graphs" img="graphite?width=586&amp;height=308&amp;target=alias(secondYAxis(summarize(root.key.count, '60sec')), 'Count per minute')&amp;target=aliasByMetric(root.key)&amp;target=aliasByMetric(root.key.lower)&amp;target=aliasByMetric(root.key.mean)&amp;target=aliasByMetric(root.key.upper_90)&amp;from=-24hours&amp;title=24 hours"></div>
+<div id="graphs" img="graphite?width=586&amp;height=308&amp;target=root.key&amp;target=root.key.lower&amp;target=root.key.mean&amp;target=root.key.upper_90&amp;target=scale(root.key.count,0.1)&amp;from=-24hours&amp;title=24 hours"></div>
 
 <script type="text/javascript">
   // TODO: inlining is bad, this should be external.
@@ -77,13 +103,23 @@ $(document).ready(function() {
          }
          target.html('');
          $.each(roots, function(root) {
-            var custom = img.replace(/graphite/g, graphite)
-                            .replace(/root/g, roots[root])
-                            .replace(/key/g, that.attr('data-key'));
+            var custom = img.replace('graphite', graphite, 'g')
+                            .replace('root', roots[root], 'g')
+                            .replace('key', that.attr('data-key'), 'g');
                             target.append('<p><b>' + roots[root] + '.' + that.attr('data-key') + '</b></p><img src="' + custom + '">');
                             console.log(custom);
         })
       });
+
+      $('#djDebugStatsdPanel #timings td').click(function() {
+         var currentRow = $(this).parent(),
+             currentLine = currentRow.find('.djDebugLineChartActual'),
+             currentBar = currentLine.children('strong'),
+             table = currentLine.closest('table'),
+             barLeft = currentLine.position().left,
+             barWidth = currentBar.width();
+         table.find('.djDebugLineChartSlave').css('left', barLeft).find('strong').css('width', barWidth);
+              });
 })
 </script>