batsd-dash 0.2.1 → 0.3.0

data/Gemfile

@@ -1,2 +1,9 @@
 source "http://rubygems.org"
 gemspec
+
+# for autorunning tests
+group :test do
+  gem "guard"
+  gem "guard-minitest"
+end
+

data/Guardfile

@@ -0,0 +1,10 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+guard 'minitest' do
+  # with Minitest::Unit
+  watch(%r|^test/(.*)\/?test_(.*)\.rb|)
+  watch(%r|^lib/(.*)([^/]+)\.rb|)     { |m| "test" }
+  watch(%r|^test/test_helper\.rb|)    { "test" }
+end
+

data/README.md

@@ -17,69 +17,62 @@ Here is a sample rackup file (`config.ru`):
     
     require 'batsd-dash'
 
-    # set batsd server setting BatsdDash::ConnectionPool.settings = { host:'localhost', port: 8127, pool_size: 4 }
+    # set batsd server setting 
+    BatsdDash::ConnectionPool.settings = { host:'localhost', port: 8127, pool_size: 8 }
 
-    # run the app run BatsdDash::App
+    # run the app 
+    run BatsdDash::App
 
-Rack is very powerful. You can password protect your batsd-dash instance by
-using `Rack::Auth::Basic` or `Rack::Auth::Digest::MD5`.
+Rack is very powerful. You can password protect your batsd-dash instance 
+by using `Rack::Auth::Basic` or `Rack::Auth::Digest::MD5`.
 
-## Usage
+## Viewing Graphs
 
-### Data API
+Graphs are rendered using [nv.d3](http://nvd3.com/), a powerful graph
+and visualization library.
 
-The application provides a simple JSON-based API for accessing data from the
-batds data server. There are 3 main routes provide, one for each datatype. These
-routes are `/counters`, `/timers` and `/gauges`. For example, the following
-request would access data for counter based metric:
-
-    /counters?metric=a.b
-
-It's possible to access data for more than one metric within a single request.
-For example, the following request route will return data for both the `a.b`
-metric and the `c.d` metric:
+Since rendering is all done on the client, we make use of hash based
+navigation in order to reduce the amount of requests while still
+maintaining 'linkability'.
 
-    /counters?metrics[]=a.b&metrics[]=c.d
+For example, to view a graph for the counter `a.b` statistic, you would need
+to make the following request from your browser:
 
-The data API also accepts a `start` and `stop` unix timestamp parameter for
-accessing different ranges of data.
+    /graph#counters=a.b
 
-Note that, the data API will only respond with JSON if the `Accept` header to
-set to `application/json`!
+The graph view will provide you with a date time picker to make selecting
+different time ranges easier. Graphs are updated when you press the 
+'View' button or when the URL is updated.
 
-### Viewing Graphs
+It's possible to view more than one metric at the same time. To do this, 
+visit the following route from your browser:
 
-Graphs are rendered using Flot, a JavaScript library which uses the canvas
-element to create graphs. Since rendering is all done on the client, we make use
-of hash based navigation in order to reduce the amount of requests and while
-maintaining 'linkability'.
+    /graph#counters=a.b,c.d
 
-For example, to view a graph for the `a.b` metric, you would make the following
-request from your browser:
+You can also view different datatypes at the same time:
 
-    /counters#metrics=a.b
+    /graph#counters=a.b&timers=x.y
 
-The graph view will provide you with a date time picker to make selecting
-different start and stop time ranges easier. Graphs are updated when you press
-the 'View' button.
+__NOTE__: As of now, a single y-axis is used when datatypes are mixed.
+Soon, we will add support for multiple axis when viewing mixed types.
 
-Much like the data API, it's possible to view more than one metric at the same
-time. To do this, visit the following route from your browser:
+## Data API
 
-    /counters#metrics=a.b,c.d
+The application provides a simple JSON-based API for accessing data from
+the batds data server. The data API accepts similar parameters as the
+graph view but uses traditional query strings instead: 
 
-_TODO_ when no data or only a single point is available, the graph is a little
-strange looking. This is something we will improve upon. Additionally, we also
-plan to add some sort of tree-based widget for selecting different metrics to
-view. 
+    /data?counters[]=a.b&counters[]=c.d&timers[]=x.y
 
-Feel free to submit pull requests with these features!
+The data API also accepts a `start` and `stop` unix timestamp parameter 
+for accessing different ranges of data. Note that, the data API will
+only respond with JSON if the `Accept` header to set to `application/json`!
 
-### Zerofill
+## Graph and Render Options
 
-_TODO_ add details about zerofill. 
+1. Zerofill:
+   __TODO__ Add details about zerofill
 
-_TODO_ Setup client to accept pass along no-zerofill options.
 
 ## Development
 
@@ -92,3 +85,7 @@ files, ensure you recompile the CSS. This is done by running:
 
 Additionally, it is highly recommended you use thin for development since this
 app uses EventMachine.
+
+## About
+
+This is project is maintained and developed by the people behind [BreakBase](http://breakbase.com) ([@mikeycgto](https://twitter.com/mikeycgto) and [@btoconnor](https://twitter.com/btoconnor))

data/batsd-dash.gemspec

@@ -12,7 +12,7 @@ Gem::Specification.new do |s|
   s.homepage    = "https://github.com/mikeycgto/batsd-dash"
 
   s.summary     = %q{batsd-dash}
-  s.description = %q{batsd-dash - graphs and stuff from batds. yay.}
+  s.description = %q{batsd-dash - graphs and stuff from batsd. yay!}
 
   s.rubyforge_project = "batsd-dash"
 

data/lib/batsd-dash/graph.rb

@@ -2,42 +2,51 @@
 module BatsdDash
   module GraphHelper
     ##
-    # This method works directly against values
-    def collect_for_graph(values, opts = {})
-      values.tap do |pts|
-        # remap the values
-        pts.map! { |pt| [pt['timestamp'].to_i * 1000, pt['value'].to_f] }
-
-        # apply zerofill
-        zero_fill!(pts, opts[:range], opts[:interval]) unless pts.empty? || !opts[:zero_fill]
-      end
-    end
+    # This method works directly against values. It will tranform all
+    # datapoint to an array where the first element is a milisecond
+    # timestamp and the second is a float value data point.
+    def values_for_graph(values, opts = {})
+      return values if values.empty?
 
-    ##
-    # The data better be normalized to the interval otherwise
-    # this method may get pissed
-    def zero_fill!(values, range, step)
-      return values if step.zero?
+      values.tap do |pts|
+        step = opts[:interval] * 1000
+        range = opts[:range]
 
-      # convert to milisec
-      step *= 1000
+        # transform the first point
+        transform_point_at!(0, values)
 
-      values.tap do |data|
         # start from the first timestamp
-        time = data.first.first + step
+        time = values.first.first + step
         index = 0
 
-        while obj = data[index += 1]
+        # loop through values to transform and zerofill
+        while index < values.size - 1
+          obj = transform_point_at!(index += 1, values)
+
           if obj.first <= time
             time += step
             next
           end
 
-          data.insert(index, [time, 0])
-
+          # need to insert zerofilled point (if zerofill is enabled)
+          values.insert(index, [time, 0]) if opts[:zero_fill]
           time += step
         end
       end
     end
+
+    ##
+    # Transform a point at a given index
+    def transform_point_at!(index, values)
+      data_pt = values[index]
+
+      # we've already transformed this index (must be zerofill)
+      return data_pt unless Hash === data_pt
+
+      pt_time = data_pt['timestamp'].to_i * 1000
+      pt_value = data_pt['value'].to_f
+
+      values[index] = [pt_time, pt_value]
+    end
   end
 end

data/lib/batsd-dash/params.rb

@@ -1,11 +1,17 @@
 # helpers for processing params and validating input
 module BatsdDash
   module ParamsHelper
-    def parse_metrics
-      metrics = params[:metrics]
-      metrics = [metrics] unless Array === metrics
+    def parse_statistics
+      Hash.new { |hash,key| hash[key] = [] }.tap do |stats|
+        %w[ counters gauges timers ].each do |datatype|
+          list = params[datatype]
 
-      metrics.tap { |list| list.reject! { |m| m.nil? || m.empty? } }
+          list = [list] unless Array === list
+          list.reject! { |m| m.nil? || m.empty? }
+
+					stats[datatype] = list unless list.empty?
+        end
+      end
     end
 
     def parse_time_range
@@ -16,7 +22,7 @@ module BatsdDash
 
         # 1 hr range
         # TODO make this setting?
-        [ now - 3600 + 1, now ]
+        [ now - 1800, now ]
 
       else
         [start.to_i, stop.to_i].tap do |range|

data/lib/batsd-dash/sass/public.scss

@@ -1,15 +1,31 @@
-@import "compass/utilities/general/clearfix";
 @import "compass/css3";
+
+@import "compass/utilities/general/clearfix";
 @import "compass/reset";
 
+$green: #0F0;
+$graphHeight:400px;
+$graphWidth:880px;
+
+@mixin absolute-position($height, $width){
+    height:$height;
+    width:$width;
+
+    position:absolute;
+    top: ($graphHeight / 2) - ($height / 2);
+    left: ($graphWidth / 2) - ($width / 2);
+}
+
+
 html, body { height:100%; min-height:100%; background-color:#222; }
-h1, h2 { color:#0F0; font-family:"Courier New",Courier,monospace; }
+
+h1, h2, strong, em { color:$green; font-family:"Courier New",Courier,monospace; }
 a { text-decoration:none; color:inherit; }
 
 .wrap { width:1000px; margin:0 auto; }
 
 #header {
-    height:60px; border:1px solid #0F0; border-width:0 0 1px 0; margin:0 0 20px;
+    height:60px; border:1px solid $green; border-width:0 0 1px 0; margin:0 0 20px;
 
     background-color: #000000;
     @include filter-gradient(#000000, #222, vertical);
@@ -28,7 +44,6 @@ a { text-decoration:none; color:inherit; }
     }
 }
 
-
 #content {
     color:#FFF; width:1000px; margin:0 auto; font-size:18px;
 
@@ -40,9 +55,23 @@ a { text-decoration:none; color:inherit; }
     }
 
     .graph {
-        width:900px; height:400px; margin:0 auto;
+        height:$graphHeight;
+        width:$graphWidth;
+
+        position:relative;
+        margin:0 auto;
+
+        em {
+            @include absolute-position(30px, 300px);
 
-        h2 { text-align:center; margin:180px; }
+            padding:2px 0;
+            font-size:26px;
+            text-align:center;
+
+            -webkit-animation-name:blink;
+            -webkit-animation-duration:1s;
+            -webkit-animation-iteration-count:infinite;
+        }
     }
 
     .inputs {
@@ -53,4 +82,68 @@ a { text-decoration:none; color:inherit; }
     }
 }
 
+#loading {
+    @include absolute-position(100px, 280px);
+
+    display:none;
+
+    strong {
+        float:right;
+        font-size:26px;
+        margin:36px 0 0;
+    }
+
+    #spinner {
+        position:relative;
+        float:left;
+        width:100px;
+        height:100px;
+
+        -webkit-animation-name: rotateSpinner;
+        -webkit-animation-duration:2s;
+        -webkit-animation-iteration-count:infinite;
+        -webkit-animation-timing-function:linear;
+
+        div {
+            width:10px;
+            height:30px;
+            background:$green;
+
+            position: absolute;
+            top:35px;
+            left:45px;
+        }
+
+        $i:1;
+        $rotate:0deg;
+        $opacity:0.12;
+
+        @while ($i <= 8) {
+            .bar#{$i} {
+                @include simple-transform(1, $rotate, 0px, -40px);
+
+                opacity:$opacity;
+            }
+
+            @if ($i % 2 == 0){
+                $opacity:$opacity + 0.13;
+            } @else {
+                $opacity:$opacity + 0.12;
+            }
+
+            $rotate: $rotate + 45deg;
+            $i: $i + 1;
+        }
+    }
+}
+
+@-webkit-keyframes rotateSpinner {
+    from { -webkit-transform:scale(0.5) rotate(0deg);   }
+    to   { -webkit-transform:scale(0.5) rotate(360deg); }
+}
 
+@-webkit-keyframes blink {
+    0%   { opacity:1.0;  }
+    50%  { opacity:0.25; }
+    100% { opacity:1.0;  }
+}

data/lib/batsd-dash/version.rb

@@ -1,3 +1,3 @@
 module BatsdDash
-  VERSION = '0.2.1'
+  VERSION = '0.3.0'
 end

data/lib/batsd-dash.rb

@@ -42,41 +42,44 @@ module BatsdDash
       end
     end
 
-    %w[ counters timers gauges ].each do |datatype|
-      # this route renders the template (with codes for the graph)
-      get "/#{datatype}", :provides => :html do
-        haml :view
-      end
+    # this route renders the template (with codes for the graph)
+    get "/graph", :provides => :html do
+      haml :view
+    end
 
-      # actual data API route
-      get "/#{datatype}", :provides => :json do
-        metrics = parse_metrics
-        range = parse_time_range
+    # actual data API route
+    get "/data", :provides => :json do
+      statistics = parse_statistics
+      range = parse_time_range
 
-        return render_error('Invalid time range') unless range
-        return render_error('Invalid metrics') if metrics.empty?
+      return render_error('Invalid time range') unless range
+      return render_error('Invalid metrics') if statistics.empty?
 
-        results = { range: range.dup.map! { |n| n * 1000 }, metrics: [] }
-        collect_opts = { zero_fill: !params[:no_zero_fill], range: results[:range] }
+			results = []
+			options = {
+				range: range.dup.map { |n| n * 1000 },
+				zero_fill: !params[:no_zero_fill]
+			}
 
+      statistics.each do |datatype, metrics|
         metrics.each do |metric|
           statistic = "#{datatype}:#{metric}"
           deferrable = connection_pool.async_values(statistic, range)
 
           deferrable.errback { |e| return render_error(e.message) }
           deferrable.callback do |json|
-            values = json[statistic]
+            options[:interval] ||= json['interval']
+
+            points = json[statistic] || []
+            values = values_for_graph(points, options)
 
-            # merge in interval if its not already; interval is always same
-            collect_opts.merge!(interval: json['interval'] || 0) unless collect_opts.has_key?(:interval)
-            # process values for graphing and add to results
-            results[:metrics] << { label: metric, data: collect_for_graph(values, collect_opts) }
+            results << { key: metric, type: datatype[0..-2], values: values }
           end
         end
-
-        cache_control :no_cache, :no_store
-        render_json results
       end
+
+      cache_control :no_cache, :no_store
+      render_json range: options[:range], interval: options[:interval], results: results
     end
   end
 end