riemann-dash 0.2.4 → 0.2.5

data/lib/riemann/dash/public/views/flot.js

@@ -0,0 +1,248 @@
+(function() {
+    // Reify a timeseries view from JSON 
+    var FlotView = function(json) {
+      // Extract state from JSON
+      view.View.call(this, json);
+      this.query = json.query;
+      this.title = json.title;
+      this.lineWidth = json.lineWidth || 1;
+      this.timeRange = (json.timeRange * 1000) || 300000;
+      
+      this.font = {
+        size: 11,
+        lineheight: 13,
+        color: "#444"
+      };
+
+      var self = this;
+
+      // Set up HTML
+      if (this.title) {
+        this.el.addClass('flot');
+        this.el.append('<h2></h2>' +
+          '<div class="container"></div>'
+        );
+        this.el.find('h2').text(this.title);
+        this.container = this.el.find('.container');
+      } else {
+        this.container = this.el;
+      }
+
+      // Create local copies of slurred functions
+      this.reflowGraph = util.slur(200, this.reflowGraph);
+
+      // This view can be clicked to focus on it.
+      this.clickFocusable = true;
+
+      // Time series state
+      this.series = {};
+      this.data = [];
+    
+      if (!json.virtual) {
+        this.reflow();
+        
+        // Initialize graph
+        this.setupGraph(new Date());
+
+        this.clockSub = clock.subscribe(function(t) {
+          self.trimData(t);
+          self.setupGraph(t);
+        });
+
+        // Subscribe to our query
+        this.sub = subs.subscribe(this.query,
+            function(e) {
+              self.update(e);
+            }
+        );
+      }
+    }
+
+    // Set up our FlotView class and register it with the view system
+    view.inherit(view.View, FlotView);
+    view.Flot = FlotView;
+    view.types.Flot = FlotView;
+
+    // Create our Flot graph
+    FlotView.prototype.setupGraph = function(t) {
+      if (this.container.width() === 0 ||
+          this.container.height() === 0) {
+            this.graph = null;
+            return;
+      }
+
+      // Initialize Flot
+      this.container.empty();
+      this.graph = $.plot(this.container, this.data, {
+        legend: {
+          position: "nw",
+          backgroundOpacity: 0.7,
+        },
+        grid: {
+          borderWidth: 1,
+          borderColor: "#aaa",
+          color: "#444",
+          backgroundColor: '#fff'
+        },
+        yaxis: {
+          font: this.font,
+          min: 0,
+        }, 
+        xaxis: {
+          font: this.font,
+          mode: "time",
+          min: t - this.timeRange,
+          max: t
+        }
+      });
+    }
+
+    // Re-order the data list and series index to be in sorted order by label. 
+    FlotView.prototype.resortSeries = function() {
+      // Shorten labels
+      var hostPrefix = strings.commonPrefix(_.pluck(this.data, 'riemannHost'));
+      var servicePrefix = strings.commonPrefix(
+          _.pluck(this.data, 'riemannService'));
+      _.each(this.data, function(d) {
+        d.label = d.riemannHost.substring(hostPrefix.length) + ' ' +
+                  d.riemannService.substring(servicePrefix.length);
+        // Empty labels are expanded back to full ones.
+        if (d.label === ' ') {
+          d.label = d.riemannHost + ' ' + d.riemannService;
+        }
+      });
+
+      // Sort data series
+      this.data.sort(function(a, b) {
+        if (a.label === b.label) {
+          return 0;
+        } else if (a.label > b.label) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+
+      // Rebuild series index
+      this.series = {};
+      _.each(this.data, function(s, i) {
+        this.series[s.riemannKey] = i;
+      }, this);
+    };
+
+    // Accept events from a subscription and update the dataset.
+    FlotView.prototype.update = function(event) {
+      // Get series for this host/service
+      var key = util.eventKey(event);
+
+      // If this is a new series, add it.
+      if (this.series[key] === undefined) {
+        this.data.push({
+          riemannKey: key,
+          riemannHost: event.host || 'nil',
+          riemannService: event.service || 'nil',
+          lineWidth: this.lineWidth,
+          shadowSize: 0,
+          data: []
+        });
+        this.resortSeries();
+      }
+      var series = this.data[this.series[key]].data;
+      
+      // Add event to series
+      if (event.state === "expired") {
+        series.push(null);
+      } else if (event.metric !== undefined) {
+        series.push([event.time, event.metric]);
+      }
+      
+      // Update graph data
+      if (this.graph) {
+        this.graph.setData(this.data);
+      }
+    }
+
+    // Clean up old data points.
+    FlotView.prototype.trimData = function(t) {
+      var t = t - this.timeRange;
+      var empties = false;
+
+      _.each(this.data, function(s) {
+        // We leave one data point off the edge of the graph for continuity.
+        while (1 < s.data.length && (s.data[1] === null || s.data[1][0] < t)) {
+          s.data.shift();
+        }
+        // And clean up single data points if necessary.
+        if (1 === s.data.length && (s.data[0] === null || s.data[0][0] < t)) {
+          s.data.shift();
+        } else if (0 === s.data.length) {
+          empties = true;
+        }
+      });
+
+      // Clean up empty datasets
+      if (empties) {
+        this.data = _.reject(this.data, function(s) {
+          return s.data.length === 0;
+        });
+        this.resortSeries();
+      }
+    }
+
+    // Serialize current state to JSON
+    FlotView.prototype.json = function() {
+      return $.extend(view.View.prototype.json.call(this), {
+        type: 'Flot',
+        title: this.title,
+        query: this.query,
+        timeRange: this.timeRange / 1000
+      });
+    }
+
+    // HTML template used to edit this view
+    var editTemplate = _.template(
+      '<label for="title">title</label>' +
+      '<input type="text" name="title" value="{{title}}" /><br />' +
+      '<label for="query">query</label>' +
+      '<textarea type="text" class="query" name="query">{{ query }}</textarea><br />' +
+      '<label for="timeRange">Time range (s)</label>' +
+      '<input type="text" name="timeRange" value="{{timeRange / 1000}}" />'
+    );
+
+    // Returns the edit form
+    FlotView.prototype.editForm = function() {
+      return editTemplate(this);
+    };
+
+    // Redraws graph 
+    FlotView.prototype.refresh = function() {
+      this.graph.setupGrid();
+      this.graph.draw();
+    };
+
+    // Resizes graph
+    FlotView.prototype.reflowGraph = function() {
+      if (this.graph) {
+        this.graph.resize();
+        this.graph.setupGrid();
+        this.graph.draw();
+      }
+    }
+
+    // Called when our parent needs to resize us
+    FlotView.prototype.reflow = function() {
+      this.reflowGraph();
+    }
+
+    // When the view is deleted, remove our subscription
+    FlotView.prototype.delete = function() {
+      if (this.clockSub) {
+        clock.unsubscribe(this.clockSub);
+      }
+      if (this.sub) {
+        subs.unsubscribe(this.sub);
+      }
+      view.View.prototype.delete.call(this);
+    }
+})();
+

data/lib/riemann/dash/public/views/grid.js

@@ -385,11 +385,7 @@
   
   // Accept an event.
   Grid.prototype.update = function(e) {
-    if (e.state === "expired") {
-      this.remove(e);
-    } else {
-      this.add(e);
-    }
+    this.add(e);
   }
 
   Grid.prototype.reflow = function() {

data/lib/riemann/dash/version.rb

@@ -1,4 +1,4 @@
 module Riemann; end
 module Riemann::Dash
-  VERSION = '0.2.4'
+  VERSION = '0.2.5'
 end

data/lib/riemann/dash/views/css.scss

@@ -176,6 +176,10 @@ html,table {
   background: $orange;
   color: #000;
 }
+.state.expired {
+  background: $purple;
+  color: #000;
+}
 
 .view .query {
   display: block;
@@ -428,5 +432,25 @@ h2 {
   .event-legend:hover {
     background-color: hsla(0, 0%, 100%, .8) !important;
   }
+}
+
+.flot.view {
+  .legend {
+    font-size: 13px;
+    color: #000;
+    opacity: 1;
+  }
+  
+  h2 {
+    height: 28px;
+    font-size: 24px;
+  }
 
+  .container {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
 }

data/lib/riemann/dash/views/index.erubis

@@ -19,6 +19,11 @@
   <script src="/vendor/jquery/jquery.simplemodal.1.4.4.min.js"></script>
   <script src="/vendor/jquery/jquery.quickfit.js"></script>
   <script src="/vendor/toastr/toastr.js"></script>
+  <script src="/vendor/flot/jquery.colorhelpers.min.js"></script>
+  <script src="/vendor/flot/jquery.flot.js"></script>
+  <script src="/vendor/flot/jquery.flot.canvas.min.js"></script>
+  <script src="/vendor/flot/jquery.flot.time.min.js"></script>
+  <!--  <script src="/vendor/flot/jquery.flot.stack.min.js"></script>-->
   <script> // turn underscore templates into mustache style templates
     _.templateSettings = {
       evaluate    : /\{\%([\s\S]+?)\%\}/g,  // {%  eval(js);  %}
@@ -39,6 +44,7 @@
   <script src="/toolbar.js"></script>
   <script src="/view.js"></script>
   <script src="/views/timeseries.js"></script>
+  <script src="/views/flot.js"></script>
   <script src="/views/title.js"></script>
   <script src="/views/help.js"></script>
   <script src="/views/gauge.js"></script>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: riemann-dash
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.2.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-04-29 00:00:00.000000000 Z
+date: 2013-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: riemann-client
@@ -139,6 +139,38 @@ files:
 - lib/riemann/dash/public/toolbar.js
 - lib/riemann/dash/public/util.js
 - lib/riemann/dash/public/vendor/backbone.js
+- lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.js
+- lib/riemann/dash/public/vendor/flot/jquery.colorhelpers.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.canvas.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.categories.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.categories.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.crosshair.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.errorbars.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.fillbetween.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.image.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.image.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.navigate.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.pie.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.pie.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.resize.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.resize.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.selection.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.selection.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.stack.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.stack.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.symbol.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.threshold.min.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.time.js
+- lib/riemann/dash/public/vendor/flot/jquery.flot.time.min.js
 - lib/riemann/dash/public/vendor/jquery/jquery-1.9.1.min.js
 - lib/riemann/dash/public/vendor/jquery/jquery-ui-1.10.2.custom.min.js
 - lib/riemann/dash/public/vendor/jquery/jquery.quickfit.js
@@ -148,6 +180,7 @@ files:
 - lib/riemann/dash/public/vendor/toastr/toastr.css
 - lib/riemann/dash/public/vendor/toastr/toastr.js
 - lib/riemann/dash/public/view.js
+- lib/riemann/dash/public/views/flot.js
 - lib/riemann/dash/public/views/gauge.js
 - lib/riemann/dash/public/views/grid.js
 - lib/riemann/dash/public/views/help.js