riemann-dash 0.2.1 → 0.2.3

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

@@ -6,6 +6,7 @@
     this.query = json.query;
     this.title = json.title;
     this.max = json.max || "all";
+    this.by = json.by || "host";
     this.clickFocusable = true;
 
     // Initial display
@@ -18,8 +19,12 @@
     this.el.find('h2').text(this.title);
    
     // State 
+    this.columns = [];
+    this.rows = [];
+
     this.hosts = [];
     this.services = [];
+
     this.events = {};
     if (this.max === "service" || this.max === "host") {
       this.currentMax = {};
@@ -44,26 +49,33 @@
       title: this.title,
       query: this.query,
       max: this.max,
+      by: this.by
     });
   }
+  
+  var editTemplate = _.template(
+    "<label for='title'>Title</label>" +
+    "<input type='text' name='title' value='{{title}}' /><br />" +
+    "<label for='query'>Query</label><br />" +
+    "<textarea name='query' class='query'>{{query}}</textarea><br />" +
+    "<label for='by'>group by</label>" +
+    "<input type='text' name='by' value='{{by}}' /><br />" +
+    "<span class='desc'>'host' or 'service'</span><br />" +
+    "<label for='max'>Max</label>" +
+    "<input type='text' name='max' value='{{max}}' /><br />" +
+    "<span class='desc'>'all', 'host', 'service', or any number.</span>"
+  )
 
   Grid.prototype.editForm = function() {
-    return Mustache.render('<label for="title">Title</label>' +
-        '<input type="text" name="title" value="{{title}}" /><br />' +
-        '<label for="query">Query</label><br />' +
-        '<textarea name="query" class="query">{{query}}</textarea><br />' +
-        '<label for="max">Max</label>' +
-        '<input type="text" name="max" value="{{max}}" /><br />' +
-        '<span class="desc">"all", "host", "service", or any number.</span>',
-      this)
+    return editTemplate(this);
   }
 
   // Returns all events, flat.
   Grid.prototype.allEvents = function() {
     var events = [];
-    for (host in this.events) {
-      for (service in this.events[host]) {
-        events.push(this.events[host][service]);
+    for (row in this.events) {
+      for (column in this.events[row]) {
+        events.push(this.events[row][column]);
       }
     }
   }
@@ -96,9 +108,16 @@
         event.description);
 
     // Bar chart
-    if (event.metric) {
+    if (event.metric == 0) {
+      // Zero
+      element.find('.bar').css('width', 0);
+    } else if (0 < event.metric) {
+      // Positive
       element.find('.bar').css('width', 
           (event.metric / this.eventMax(event) * 100) + "%");
+    } else {
+      // Nil or negative
+      element.find('.bar').css('width', 0);
     }
   }
 
@@ -106,10 +125,15 @@
   // Render a single event if there's been no change to table structure.
   Grid.prototype.partialRender = function(event) {
     var table = this.el.find('table');
-    var hostIndex = this.hosts.indexOf(event.host);
-    var serviceIndex = this.services.indexOf(event.service);
-    var row = this.el.find('tbody tr')[hostIndex];
-    var td = $($(row).find('td')[serviceIndex]);
+    if (this.by === "host") {
+      var rowIndex = this.rows.indexOf(event.host);
+      var columnIndex = this.columns.indexOf(event.service);
+    } else {
+      var rowIndex = this.rows.indexOf(event.service);
+      var columnIndex = this.columns.indexOf(event.host)
+    }
+    var row = this.el.find('tbody tr')[rowIndex];
+    var td = $($(row).find('td')[columnIndex]);
 
     this.renderElement(td, event);
   }
@@ -122,18 +146,18 @@
     // Header
     table.append("<thead><tr><th></th></tr></thead>");
     var row = table.find("thead tr");
-    this.services.forEach(function(service) {
+    this.columns.forEach(function(name) {
       var element = $('<th>');
-      element.text(service);
+      element.text(name);
       row.append(element);
     });
 
-    this.hosts.forEach(function(host) {
+    this.rows.forEach(function(name) {
       row = $("<tr><th></th>");
       table.append(row);
-      row.find('th').text(host);
-      this.services.forEach(function(service) {
-        var event = this.events[host][service];
+      row.find('th').text(name);
+      this.columns.forEach(function(subName) {
+        var event = this.events[name][subName];
         var element = $('<td><span class="bar"><span class="metric"/></span></td>');
         this.renderElement(element, event);
         row.append(element);
@@ -151,30 +175,53 @@
     }
 
     var e;
+
     if (this.max === "all") {
       this.currentMax = -1/0;
-      for (host in this.events) {
-        for (service in this.events[host]) {
-          e = this.events[host][service];
+      for (name in this.events) {
+        for (subName in this.events[name]) {
+          e = this.events[name][subName];
           this.currentMax = Math.max(e.metric, this.currentMax || -1/0);
         }
       }
-    } else if (this.max === "host" ) {
-      this.currentMax = {};
-      for (host in this.events) {
-        for (service in this.events[host]) {
-          e = this.events[host][service];
-          this.currentMax[e.host] = 
-            Math.max(e.metric, this.currentMax[e.host] || -1/0)
+    } else if (this.by == "host") {
+      if (this.max == "host") {
+        this.currentMax = {};
+        for (host in this.events) {
+          for (service in this.events[host]) {
+            e = this.events[host][service];
+            this.currentMax[e.host] = 
+              Math.max(e.metric, this.currentMax[e.host] || -1/0)
+          }
+        }
+      } else if (this.max === "service") {
+        this.currentMax = {};
+        for (host in this.events) {
+          for (service in this.events[host]) {
+            e = this.events[host][service];
+            this.currentMax[e.service] = 
+              Math.max(e.metric, this.currentMax[e.service] || -1/0);
+          }
         }
       }
-    } else if (this.max === "service") {
-      this.currentMax = {};
-      for (host in this.events) {
-        for (service in this.events[host]) {
-          e = this.events[host][service];
-          this.currentMax[e.service] = 
-            Math.max(e.metric, this.currentMax[e.service] || -1/0); 
+    } else if (this.by === "service") {
+      if (this.max == "host") {
+        this.currentMax = {};
+        for (service in this.events) {
+          for (host in this.events[service]) {
+            e = this.events[service][host];
+            this.currentMax[e.host] = 
+              Math.max(e.metric, this.currentMax[e.host] || -1/0)
+          }
+        }
+      } else if (this.max === "service") {
+        this.currentMax = {};
+        for (service in this.events) {
+          for (host in this.events[service]) {
+            e = this.events[service][host];
+            this.currentMax[e.service] = 
+              Math.max(e.metric, this.currentMax[e.service] || -1/0);
+          }
         }
       }
     } else {
@@ -188,34 +235,58 @@
   // Stores an event in the internal state tables. Returns true if we
   // haven't seen this host/service before.
   Grid.prototype.saveEvent = function(e) {
-    // Host list
-    if (this.hosts.indexOf(e.host) === -1) {
-      this.hosts.push(e.host);
-      this.hosts = _.uniq(this.hosts.sort(), true);
-    }
+    if (this.by === "host") {
+      // Host list
+      if (this.rows.indexOf(e.host) === -1) {
+        this.rows.push(e.host);
+        this.rows = _.uniq(this.rows.sort(), true);
+      }
 
-    // Services list
-    if (this.services.indexOf(e.service) === -1) {
-      this.services.push(e.service);
-      this.services = _.uniq(this.services.sort(), true);
-    }
+      // Services list
+      if (this.columns.indexOf(e.service) === -1) {
+        this.columns.push(e.service);
+        this.columns = _.uniq(this.columns.sort(), true);
+      }
 
-    // Events map
-    if (this.events[e.host] === undefined) {
-      // New host
-      this.events[e.host] = {};
-    }
-    if (this.events[e.host][e.service] === undefined) {
-      // New event
-      var newEvent = true;
-    } else {
-      var newEvent = false;
-    }
+      // Events map
+      if (this.events[e.host] === undefined) {
+        // New host
+        this.events[e.host] = {};
+      }
+      var newEvent = (this.events[e.host][e.service] === undefined);
+
+      // Store event
+      this.events[e.host][e.service] = e;
+
+      return newEvent;
+
+    } else if (this.by === "service") {
+      // Services list
+      if (this.rows.indexOf(e.service) === -1) {
+        this.rows.push(e.service);
+        this.rows = _.uniq(this.rows.sort(), true);
+      }
 
-    // Store event
-    this.events[e.host][e.service] = e;
+      // Host list
+      if (this.columns.indexOf(e.host) === -1) {
+        this.columns.push(e.host);
+        this.columns = _.uniq(this.columns.sort(), true);
+      }
+
+      // Events map
+      if (this.events[e.service] === undefined) {
+        // New host
+        this.events[e.service] = {};
+      }
+      var newEvent = (this.events[e.service][e.host] === undefined);
+
+      // Store event
+      this.events[e.service][e.host] = e;
+
+      return newEvent;
+
+    }
 
-    return newEvent;
   }
 
   // Add an event.
@@ -263,10 +334,10 @@
   }
 
   Grid.prototype.reflow = function() {
-//    this.el.find('table').height(
- //     this.height() -
-  //    this.el.find('h2').height()     
-   // );
+    // this.el.find('table').height(
+    //   this.height() -
+    //   this.el.find('h2').height()     
+    // );
   }
 
   Grid.prototype.delete = function() {

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

@@ -0,0 +1,230 @@
+(function() {
+    var fitopts = {min: 6, max: 1000};
+
+    var nameFor = function(event) {
+      return event.host ? event.host + ":" + event.service : event.service
+      return event.host + ":" + event.service;
+    };
+
+    var hextoRGB = function(hex) { // converts hex string to rgb triple
+      // only works for full 6 char hex, not shorthand
+      if (hex[0]=="#") hex=hex.substr(1);
+      var hexp = "([a-f0-9]{2})";
+      var colorGroups = RegExp('^'+hexp+hexp+hexp+'$', 'i').exec(hex).slice(1);
+      return _.map(colorGroups, function(color) { return parseInt(color, 16) });
+    }
+  
+    var rateLimit = 500; // ms
+  
+    var TimeSeriesView = function(json) {
+
+      var self = this;
+      
+      self.smoothie = new SmoothieChart({
+        grid: {strokeStyle:'#ccc', fillStyle:'rgba(255, 255, 255, 0.0)', lineWidth: 1, millisPerLine: 1000},
+        labels: { fillStyle:'#262626' }
+      });
+
+      // colors
+      var colorTemplate = _.template("rgba({{red}},{{green}},{{blue}},{{alpha}})");
+
+      var colorPallette = function() {
+        // should be customizable in future...
+        // default color pallette borrowed from http://code.shutterstock.com/rickshaw/examples/colors.html
+        // Array.prototype.reduce.call(svg.childNodes, function(accum, path) { accum.push(path.getAttribute("fill")); return accum; }, [])
+        var DEFAULT = ["#57306f", "#514c76", "#646583", "#738394",
+                       "#6b9c7d", "#84b665", "#a7ca50", "#bfe746",
+                       "#e2f528", "#fff726", "#ecdd00", "#d4b11d",
+                       "#de8800", "#de4800", "#c91515", "#9a0000",
+                       "#7b0429", "#580839", "#31082b"];
+        return DEFAULT;
+      };
+      this.pallette = colorPallette();
+
+      var takeColor = function() {
+        // pops a color off the pallette stack, or regenerates the
+        // stack if we're out of colors
+        var color = self.pallette.shift();
+        if (color) {
+          return color;
+        } else {
+          self.pallette = colorPallette();
+          return self.pallette.shift();
+        }
+      }
+
+      // map event names to colors
+      var colorMap = {};
+
+      var colorFromString = function(s) {
+        // caches a color in the color table
+        var color = colorMap[s];
+        if (color) return color;
+        color = colorMap[s] = takeColor()
+        return color;
+      }
+
+      var RGBfromString = function(s) {
+        // returns an RGB triple from a string
+        return hextoRGB(colorFromString(s));
+      };
+
+      var rgbaFromTriple = function(rgb, alpha) {
+        return colorTemplate({
+          red: rgb[0],
+          green: rgb[1],
+          blue: rgb[2],
+          alpha: alpha
+        });
+      }
+
+      // smoothiecharts timeseries
+      var seriesCollection = {};
+
+      // throttle appends to graph
+      var appendEvent = function(series, event) {
+        series.append(event);
+        return series.append(new Date(event.time).getTime(), format.float(event.metric));
+      };
+
+      var createTimeSeries = function(name, event) {
+        var seriesColor = RGBfromString(name),
+            series = new TimeSeries(),
+            color = rgbaFromTriple(seriesColor, 1),
+            seriesOpts = {lineWidth: self.lineWidth || 2,
+                          strokeStyle: color,
+                          fillStyle: rgbaFromTriple(seriesColor, self.opacity || 0)};
+
+        series.appendEvent = _.throttle(function(event) {
+          series.append(new Date(event.time).getTime(), format.float(event.metric));
+        }, rateLimit);;
+
+         self.smoothie.addTimeSeries(series, seriesOpts);
+        return series;
+      };
+
+      // stream data into series
+      var intoSeries = function(event) {
+        var seriesName = nameFor(event)
+        var cachedSeries = seriesCollection[seriesName];
+
+        if (cachedSeries) {
+          cachedSeries.appendEvent(event);
+        } else {
+          var newSeries = seriesCollection[seriesName] = createTimeSeries(seriesName, event);
+          newSeries.appendEvent(event);
+        };
+      };
+
+      var legendCollection = {};
+
+      var updateLegend = function(event) {
+        var eventName = nameFor(event),
+            cachedEl = legendCollection[eventName];
+
+        if (cachedEl) {
+          cachedEl.text(eventName + ": " + format.float(event.metric))
+        } else {
+          var $el = $("<div></div>");
+          var color = rgbaFromTriple(RGBfromString(eventName), 0.7);
+          $el.addClass('event-legend').css({"background-color": color});
+          $el.text = _.throttle($el.text, rateLimit);
+          setTimeout(function() {
+            if ($el) {
+              $el.text(eventName + ": " + format.float(event.metric));
+            }
+          }, +self.delay || 0);
+          legendCollection[eventName] = $el;
+          self.$legend.append($el)
+        }
+        
+      }
+
+      view.View.call(this, json);
+      this.query = json.query;
+      this.title = json.title;
+      this.delay = json.delay;
+      this.opacity = json.opacity;
+      this.lineWidth = json.lineWidth;
+
+      this.clickFocusable = true;
+      this.el.append(
+        '<div class="time-series-container">' +
+          '<div class="legend"></div>' +
+          '<div class="title">' + this.title +
+          '</div>' +
+          '<canvas class="timeseries"></canvas>' +
+        '</div>'
+      );
+
+      this.$canvas = this.el.find(".timeseries");
+      this.$legend = this.el.find(".legend");
+      this.$titlecontainer = this.el.find("div.title");
+      
+      this.$title = this.$titlecontainer.find("h2");
+      this.canvas = this.$canvas.get(0);
+
+
+      this.$legend = this.el.find(".legend");
+
+      this.reflow();
+
+      this.smoothie.streamTo(this.canvas, this.delay);      
+
+      if (this.query) {
+        this.sub = subs.subscribe(this.query, function(event) {
+          updateLegend(event)
+          intoSeries(event)
+        });
+      }
+    }
+
+    view.inherit(view.View, TimeSeriesView);
+    view.TimeSeries = TimeSeriesView;
+    view.types.TimeSeries = TimeSeriesView;
+
+    TimeSeriesView.prototype.json = function() {
+      return $.extend(view.View.prototype.json.call(this), {
+        type: 'TimeSeries',
+        title: this.title,
+        delay: this.delay,
+        query: this.query,
+        opacity: this.opacity,
+        lineWidth: this.lineWidth,
+      });
+    }
+
+    var editTemplate = _.template(
+      '<label for="title">title</label>' +
+      '<input type="text" name="title" value="{{title}}" /><br />' +
+      '<label for="query">query</label>' +
+      '<textarea type="text" name="query">{{ query }}</textarea><br />' +
+      '<label for="lineWidth">line width</label>' +
+      '<input type="text" name="lineWidth" value="{{lineWidth}}" /><br />' +
+      '<label for="opacity">fill opacity</label>' +
+      '<input type="text" name="opacity" value="{{opacity}}" /><br />' +
+      '<label for="delay">delay (smoother animation)</label>' +
+      '<input type="text" name="delay" value="{{delay}}" />'
+    )
+
+    TimeSeriesView.prototype.editForm = function() {
+      return editTemplate(this);
+    }
+
+    TimeSeriesView.prototype.reflow = function() {
+      // Size metric
+      var width = this.el.width();
+      var height = this.el.height();
+      this.$canvas.attr("width", width - 10);
+      this.$canvas.attr("height", height - 10);
+
+    }
+
+    TimeSeriesView.prototype.delete = function() {
+      if (this.sub) {
+        subs.unsubscribe(this.sub);
+      }
+      view.View.prototype.delete.call(this);
+    }
+})();
+

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

@@ -23,10 +23,13 @@
       });
     }
 
+    var editTemplate = _.template(
+      '<label for="title">Title</label>' +
+      '<input type="title" name="title" value="{{title}}" />'
+    );
+
     Title.prototype.editForm = function() {
-      return Mustache.render('<label for="title">Title</label>' +
-          '<input type="title" name="title" value="{{title}}" />',
-        this);
+      return editTemplate(this);
     }
 
     Title.prototype.reflow = function() {

data/lib/riemann/dash/version.rb

@@ -1,4 +1,4 @@
 module Riemann; end
-class Riemann::Dash
-  VERSION = '0.2.1'
+module Riemann::Dash
+  VERSION = '0.2.3'
 end

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

@@ -14,6 +14,13 @@ $grey: #888;
 $green: #06FA23;
 $yellow: #FEF206;
 
+@mixin vendor-prefix($name, $argument) {
+  #{$name}: $argument;
+  -webkit-#{$name}: $argument;
+  -ms-#{$name}: $argument;
+  -moz-#{$name}: $argument;
+}
+
 html {
   height: 100%;
   margin: 0;
@@ -153,7 +160,11 @@ html,table {
   border-radius: 3px;
 }
 
-.state.ok, .bar.ok {
+.state {
+  @include vendor-prefix(transition, all 0.3s linear);
+}
+
+.state.ok, .state.okay, .bar.ok, .bar.okay {
   background: $green;
   color: #000;
 }
@@ -161,7 +172,7 @@ html,table {
   background: $amber;
   color: #000;
 }
-.state.critical, .bar.critical {
+.state.critical, .state.failure, .bar.critical, .bar.failure {
   background: $orange;
   color: #000;
 }
@@ -380,3 +391,42 @@ h2 {
     width: 1px;
   }
 }
+
+.time-series-container {
+  .title {
+    font-weight: 700;
+    font-size: 1.5em;
+    background-color: hsla(0, 0%, 100%, 0.8);
+    z-index: 10;
+    position: absolute;
+    bottom: -5px;
+    right: 10px;
+    padding: 2px;
+    display: block;
+  }
+  .legend {
+    height: 100%;
+    font-size: 16px;
+    text-shadow: hsl(0, 0%, 95%) 0px 0px 1px;
+    color: hsl(0, 0%, 5%);
+    position: absolute;
+    bottom: 0px;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: flex;
+    @include vendor-prefix(flex-flow, column wrap);
+    @include vendor-prefix(align-content, flex-start);
+    @include vendor-prefix(justify-content, flex-start);
+    @include vendor-prefix(align-items, stretch);
+  }
+  .event-legend {
+    padding: 4px;
+    @include vendor-prefix(flex, 1 1 auto);
+    @include vendor-prefix(transition, all 0.3s ease-out);
+  }
+  .event-legend:hover {
+    background-color: hsla(0, 0%, 100%, .8) !important;
+  }
+
+}