mindreframer-riemann-dash 0.2.3

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

@@ -0,0 +1,76 @@
+(function() {
+    var fitopts = {min: 6, max: 1000};
+
+    var Gauge = function(json) {
+      view.View.call(this, json);
+      this.query = json.query;
+      this.title = json.title;
+      this.clickFocusable = true;
+      this.el.addClass('gauge');
+      this.el.append(
+        '<div class="box">' +
+          '<div class="quickfit metric value">?</div>' +
+          '<h2 class="quickfit"></div>' +
+          '</div>'
+      );
+
+      this.box = this.el.find('.box');
+      this.el.find('h2').text(this.title);
+
+      if (this.query) {
+        var reflowed = false;
+        var me = this;
+        var value = this.el.find('.value');
+        this.sub = subs.subscribe(this.query, function(e) {
+          me.box.attr('class', 'box state ' + e.state);
+          value.text(format.float(e.metric));
+          value.attr('title', e.description);
+
+          // The first time, do a full-height reflow.
+          if (reflowed) {
+            value.quickfit(fitopts);
+          } else {
+            me.reflow();
+            reflowed = true;
+          }
+        });
+      }
+    }
+
+    view.inherit(view.View, Gauge);
+    view.Gauge = Gauge;
+    view.types.Gauge = Gauge;
+
+    Gauge.prototype.json = function() {
+      return $.extend(view.View.prototype.json.call(this), {
+        type: 'Gauge',
+        title: this.title,
+        query: this.query
+      });
+    }
+
+    Gauge.prototype.editForm = function() {
+      return Mustache.render('<label for="title">Title</label>' +
+          '<input type="text" name="title" value="{{title}}" /><br />' +
+          '<label for="query">Query</label>' +
+          '<input type="text" name="query" value="{{query}}" />',
+        this)
+    }
+
+    Gauge.prototype.reflow = function() {
+      // Size metric
+      var value = this.el.find('.value');
+      value.quickfit({min: 6, max: 1000, font_height_scale: 1});
+
+      // Size title
+      var title = this.el.find('h2');
+      title.quickfit(fitopts);
+    }
+
+    Gauge.prototype.delete = function() {
+      if (this.sub) {
+        subs.unsubscribe(this.sub);
+      }
+      view.View.prototype.delete.call(this);
+    }
+})();

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

@@ -0,0 +1,279 @@
+(function() {
+  var fitopts = {min: 6, max: 1000};
+
+  var Grid = function(json) {
+    view.View.call(this, json);
+    this.query = json.query;
+    this.title = json.title;
+    this.max = json.max || "all";
+    this.clickFocusable = true;
+
+    // Initial display
+    this.el.addClass('grid');
+    this.el.append(
+      '<h2></h2>' +
+      '<div class="container"><table></table></div>'
+    );
+    this.box = this.el.find('.box');
+    this.el.find('h2').text(this.title);
+   
+    // State 
+    this.hosts = [];
+    this.services = [];
+    this.events = {};
+    if (this.max === "service" || this.max === "host") {
+      this.currentMax = {};
+    }
+
+    // Subscribe
+    if (this.query) {
+      var me = this;
+      this.sub = subs.subscribe(this.query, function(e) {
+        me.update.call(me, e);
+      });
+    }
+  }
+
+  view.inherit(view.View, Grid);
+  view.Grid = Grid;
+  view.types.Grid = Grid;
+
+  Grid.prototype.json = function() {
+    return $.extend(view.View.prototype.json.call(this), {
+      type: 'Grid',
+      title: this.title,
+      query: this.query,
+      max: this.max,
+    });
+  }
+
+  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)
+  }
+
+  // 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]);
+      }
+    }
+  }
+
+  // What is the maximum for this event?
+  Grid.prototype.eventMax = function(event) {
+    if (this.max === "host") {
+      return this.currentMax[event.host] || -1/0;
+    } else if (this.max === "service") {
+      return this.currentMax[event.service] || -1/0;
+    } else {
+      return this.currentMax || -1/0;
+    }
+  }
+
+  // Update a single jq element with information about an event.
+  Grid.prototype.renderElement = function(element, event) {
+    if (event === undefined) {
+      return;
+    }
+
+    // State
+    element.attr('class', "state box " + event.state);
+
+    // Metric
+    element.find('.metric').text(format.float(event.metric));
+
+    // Description
+    element.attr('title', event.state + ' at ' + event.time + "\n\n" +
+        event.description);
+
+    // Bar chart
+    if (event.metric) {
+      element.find('.bar').css('width', 
+          (event.metric / this.eventMax(event) * 100) + "%");
+    }
+  }
+
+
+  // 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]);
+
+    this.renderElement(td, event);
+  }
+
+  // Rerender the table
+  Grid.prototype.render = util.slur(200, function() {
+    var table = this.el.find('table');
+    table.empty();
+
+    // Header
+    table.append("<thead><tr><th></th></tr></thead>");
+    var row = table.find("thead tr");
+    this.services.forEach(function(service) {
+      var element = $('<th>');
+      element.text(service);
+      row.append(element);
+    });
+
+    this.hosts.forEach(function(host) {
+      row = $("<tr><th></th>");
+      table.append(row);
+      row.find('th').text(host);
+      this.services.forEach(function(service) {
+        var event = this.events[host][service];
+        var element = $('<td><span class="bar"><span class="metric"/></span></td>');
+        this.renderElement(element, event);
+        row.append(element);
+      }, this);
+    }, this);
+  });
+
+  // Update cached maxima with a new event. Returns true if maxima changed.
+  Grid.prototype.updateMax = function(event) {
+    if (event !== undefined &&
+        (event.metric === undefined ||
+         event.metric <= (this.eventMax(event) || -1/0))) {
+      // We haven't bumped our max; no change.
+      return false;
+    }
+
+    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];
+          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.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 {
+      this.currentMax = this.max;
+      return false;
+    }
+
+    return true;
+  }
+
+  // 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);
+    }
+
+    // Services list
+    if (this.services.indexOf(e.service) === -1) {
+      this.services.push(e.service);
+      this.services = _.uniq(this.services.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;
+    }
+
+    // Store event
+    this.events[e.host][e.service] = e;
+
+    return newEvent;
+  }
+
+  // Add an event.
+  Grid.prototype.add = function(e) {
+    var newEvent = this.saveEvent(e);
+    var newMax   = this.updateMax(e);
+
+    if (newEvent || newMax) {
+      this.render();
+    } else {
+      this.partialRender(e);
+    }
+  }
+
+  // Remove an event.
+  Grid.prototype.remove = function(e) {
+    delete this.events[e.host][e.service];
+    if (_.isEmpty(this.events[e.host])) {
+      delete this.events[e.host];
+    };
+
+    // Recompute hosts
+    this.hosts = _.keys(this.events).sort();
+
+    // Recompute services
+    var services = {};
+    for (var host in this.events) {
+      for (var service in this.events[host]) {
+        services[this.events[host][service].service] = true;
+      }
+    }
+    this.services = _.keys(services).sort();
+
+    this.updateMax();
+    this.render();
+  }
+  
+  // Accept an event.
+  Grid.prototype.update = function(e) {
+    if (e.state === "expired") {
+      this.remove(e);
+    } else {
+      this.add(e);
+    }
+  }
+
+  Grid.prototype.reflow = function() {
+//    this.el.find('table').height(
+ //     this.height() -
+  //    this.el.find('h2').height()     
+   // );
+  }
+
+  Grid.prototype.delete = function() {
+    if (this.sub != undefined) {
+      subs.unsubscribe(this.sub);
+    }
+    this.update = function() {};
+    view.View.prototype.delete.call(this);
+  }
+})();

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

@@ -0,0 +1,28 @@
+(function() {
+    var Help = function(json) {
+      view.View.call(this, json);
+      this.clickFocusable = true;
+      this.el.addClass("help");
+      this.el.append('<div class="box">' +
+        "<p>Welcome to Riemann-Dash.</p>" +
+        "<p>Click to select a view. Escape unfocuses. Use the arrow keys to move a view. Use Control+arrow to <i>split</i> a view in the given direction.</p>" +
+        "<p>To edit a view, hit e. Use enter, or click 'apply', to apply your changes. Escape cancels.</p>" +
+        "<p>To save your changes to the server, press s. You can refresh the page, or press r to reload.</p>" +
+        "<p>Make views bigger and smaller with the +/- keys. Pageup selects the parent of the current view. To delete a view, use the delete key.</p>" +
+        "<p>Switch between workspaces with alt-1, alt-2, etc.</p>" +
+        "<p>My sincere apologies for layout jankiness. There are a few gross bugs and incapabilities in the current hstack/vstack system; if things get really bad, you can always edit ws/config.json on the server. The control scheme will probably change; I appreciate your ideas and patches.</p>" +
+        '</div>'
+    );
+    }
+
+    view.inherit(view.View, Help);
+    view.Help = Help;
+    view.types.Help = Help;
+
+    Help.prototype.json = function() {
+      return {
+        type: 'Help',
+        title: this.title
+      };
+    }
+})();

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

@@ -0,0 +1,107 @@
+(function() {
+    var fitopts = {min: 6, max: 1000};
+
+    var TimeSeriesView = function(json) {
+      view.View.call(this, json);
+      this.query = json.query;
+      this.title = json.title;
+      this.delay = json.delay;
+      this.lineWidth = json.lineWidth;
+      this.strokeStyle = json.strokeStyle;
+      this.fillStyle = json.fillStyle;
+
+      this.clickFocusable = true;
+      this.el.addClass('timeseries');
+      this.el.append(
+        '<div class="box">' +
+          '<div class="title">' +
+            '<h2>' + this.title + '</h2>' +
+          '</div>' +
+          '<canvas class="timeseries"></canvas>' +
+        '</div>'
+      );
+
+      this.$canvas = this.el.find(".timeseries");
+      this.$titlecontainer = this.el.find("div.title");
+      this.$titlecontainer.css({"color": "#f2f2f2",
+                                "text-shadow": "#262626 2px 2px 4px",
+                                "font-size": "2em"})
+      
+      this.$title = this.$titlecontainer.find("h2");
+      this.canvas = this.$canvas.get(0);
+
+      this.reflow();
+
+      this.smoothie = new SmoothieChart();
+      this.smoothie.streamTo(this.canvas, this.delay);
+
+      this.series = new TimeSeries();
+      this.smoothie.addTimeSeries(this.series, {lineWidth: this.lineWidth || 2,
+                                                strokeStyle: this.strokeStyle || "#FFF",
+                                                fillStyle: this.fillStyle});
+      
+      if (this.query) {
+        var reflowed = false;
+        var me = this;
+        this.sub = subs.subscribe(this.query, function(e) {
+          var metric = format.float(e.metric);
+          me.series.append(new Date(e.time).getTime(), metric);
+          _.delay(function() {
+            if (me.$title) {
+              me.$title.text(me.title + ": " + metric);
+            }
+          }, +me.delay)
+
+        });
+      }
+    }
+
+    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,
+        strokeStyle: this.strokeStyle,
+        lineWidth: this.lineWidth,
+        fillStyle: this.fillStyle
+      });
+    }
+
+    TimeSeriesView.prototype.editForm = function() {
+      return Mustache.render('<label for="title">Title</label>' +
+          '<input type="text" name="title" value="{{title}}" /><br />' +
+          '<label for="query">Query</label>' +
+          '<input type="text" name="query" value="{{query}}" /><br />' +
+          '<label for="strokeStyle">StrokeStyle</label>' +
+          '<input type="text" name="strokeStyle" value="{{strokeStyle}}" /><br />' +
+          '<label for="lineWidth">LineWidth</label>' +
+          '<input type="text" name="lineWidth" value="{{lineWidth}}" /><br />' +
+          '<label for="fillStyle">FillStyle</label>' +
+          '<input type="text" name="fillStyle" value="{{fillStyle}}" /><br />' +
+          '<label for="delay">Delay</label>' +
+          '<input type="text" name="delay" value="{{delay}}" />',
+        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);
+    }
+})();
+