Quick and dirty graph visualization for response times

app.rb

@@ -37,7 +37,7 @@ def data(hash)
     @ps = heroku.get_ps(params[:id]).body.select{|x| x["process"].include?("web.")}
 
     config = heroku.get_config_vars(params[:id]).body
-    @concurrency = (config["UNICORN_WORKERS"] || config["WEB_CONCURRENCY"] || 1).to_i
+    @concurrency = (config["UNICORN_WORKERS"] || config["WEB_CONCURRENCY"] || params[:concurrency] || 1).to_i
 
     slim :app
   end

public/app.js

@@ -1,8 +1,26 @@
 var data = [];
 var metrics;
+var graph;
 
 Date.timestamp = function() { return Math.round(Date.now()/1000); };
 
+function setupGraph() {
+  graph = new Rickshaw.Graph( {
+    element: document.getElementById("chart"),
+    height: 125,
+    renderer: 'line',
+    series: new Rickshaw.Series.FixedDuration([{
+      name: 'median_response_time'
+    }], undefined, {
+      timeInterval: 1000,
+      maxDataPoints: 60,
+      timeBase: new Date().getTime() / 1000
+    })
+  });
+  new Rickshaw.Graph.HoverDetail({ graph: graph });
+  graph.render();
+}
+
 function streamLogs(app, elem) {
   var source = new EventSource('/log/' + app);
   var update = setInterval(function() { updateValues(); }, 1000);
@@ -54,6 +72,23 @@ function updateValues() {
       var value = window[display](metrics[type], this);
     }
   });
+
+  var graphData = {};
+  $(".graph_metrics li input:checked").each(function() {
+    var parentElem = $(this).parent();
+    var type = parentElem.data("type");
+    var display = parentElem.data("display");
+    var value = parentElem.data("value");
+
+    if (metrics[type] === undefined) {
+      $(this).addClass("loading")
+    } else {
+      $(this).removeClass("loading")
+      graphData[$(this).attr("name")] = window[display](metrics[type], value);
+    }
+  });
+  graph.series.addData(graphData);
+  graph.render();
 }
 
 function sum(items, elem) {
@@ -111,4 +146,4 @@ function percentile_index(items, percentile) {
   percentile = percentile/100
   items.sort(function(a,b) { return a - b })
   return items[Math.ceil((Math.max(items.length - 1,0)) * percentile)]
-}
+}

views/app.slim

@@ -3,18 +3,32 @@ html
   head
     title log2viz - #{params[:id]}
     link rel="stylesheet" type="text/css" href="/stylesheets/styles.css"
+    link rel="stylesheet" type="text/css" href="/stylesheets/rickshaw.min.css"
     script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
     script src="/underscore.js"
+    script src="/d3.min.js"
+    script src="/rickshaw.min.js"
     script src="/app.js"
   body
     javascript:
       $(function(){
+        setupGraph();
         streamLogs('#{params[:id]}', $('table.logs tbody'));
       });
     #wrapper
       h1= @app["name"]
       h5 realtime analysis of last 60 seconds from app logs
 
+      .three-col.clearfix.chart
+        #chart
+        ul.graph_metrics
+          li.col*data(display:"percentile_index",type:"response_time",value:50)
+            input type="checkbox" checked=true name="median_response_time"
+            label for="median_response_time" Median Resp. Time
+          li.col*data(display:"percentile_index",type:"response_time",value:95)
+            input type="checkbox" checked=false name="perc95_response_time"
+            label for="perc95_response_time" 95th Pct. Resp. Time
+
       .three-col.clearfix
         .col
           .metric*data(display:"median",type:"response_time",label:"ms")

views/stylesheets/styles.scss

@@ -244,6 +244,53 @@ textarea {
     margin: 0;
     font-weight: normal;
    }
+   .chart {
+     margin-bottom: 25px;
+     margin-top: 10px;
+     .detail {
+       .x_label {
+         color: #333;
+       }
+     }
+     ul {
+       li {
+         list-style-type: none;
+         margin-left: -1em;
+         label {
+           float: left;
+           margin-left: 5px;
+         }
+         input {
+           -webkit-appearance: none;
+           background-color: #fafafa;
+           border: 1px solid #cacece;
+           box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
+           padding: 6px;
+           border-radius: 3px;
+           display: inline-block;
+           float: left;
+           position: relative;
+           &:active {
+             box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
+           }
+           &:checked {
+             background-color: #e9ecee;
+             border: 1px solid #adb8c0;
+             box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
+             color: #99a1a7;
+             &:after {
+               content: '\2714';
+               font-size: 10px;
+               position: absolute;
+               top: 0px;
+               left: 3px;
+               color: #99a1a7;
+             }
+           }
+         }
+       }
+     }
+   }