riemann-dash 0.2.8 → 0.2.9

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

@@ -1,47 +1,9 @@
 (function() {
   var fitopts = {min: 6, max: 1000};
 
-  // Takes a string and returns a function which extracts
-  // a value from an event.
-  var extract_fn = function(str) {
-    // When null/undefined, stay null/undefined.
-    if (! str) {
-      return str;
-    }
-
-    // Probably the worst hack ever. I'm not documenting this because it's so
-    // evil--though tremendously useful.
-    if (str.match(/^fn /)) {
-      // Grab the rest of the string, turn it into an anonymous fn taking a
-      // single arg `e`.
-      return Function.apply(null, ['e', str.substring(3)]);
-    } 
-
-    // Property access
-    return function(e) {
-      return e[str];
-    };
-  };
-
-  // Takes a string and returns either:
-  // - a function which extracts a maximum value from an event.
-  // - a number to be used as the constant maximum.
-  var max_fn = function(str) {
-    if ((!str) || str === "all") {
-      // Always the same value: global maxima
-      return function(e) { return "all"; };
-    }
-    if (isNaN(parseFloat(str))) {
-      // Not a number. Extract a field.
-      return function(e) { return e[str]; };
-    }
-    // Return a constant number.
-    return parseFloat(str);
-  };
-
   var Grid = function(json) {
     // We want a per-grid slurred rendering.
-    this.render = util.slur(200, this.render);
+    this.render = util.slur(500, this.render);
 
     view.View.call(this, json);
     this.query = json.query;
@@ -49,9 +11,11 @@
     this.max = json.max;
     this.rows_str = json.rows;
     this.cols_str = json.cols;
-    this.max_fn = max_fn(json.max);
-    this.row_fn = extract_fn(json.rows) || extract_fn('host');
-    this.col_fn = extract_fn(json.cols) || extract_fn('service');
+    this.max_fn = util.max_fn(json.max);
+    this.row_sort = json.row_sort || "lexical";
+    this.col_sort = json.col_sort || "lexical";
+    this.row_fn = util.extract_fn(json.rows) || util.extract_fn('host');
+    this.col_fn = util.extract_fn(json.cols) || util.extract_fn('service');
     this.clickFocusable = true;
 
     // Initial display
@@ -62,14 +26,12 @@
     );
     this.box = this.el.find('.box');
     this.el.find('h2').text(this.title);
-   
+
     // State
     this.cols = [];
     this.rows = [];
     // events[row_key][col_key] = event
     this.events = {};
-    // elCache[row_key][col_key] = {td: , metric: }
-    this.elCache = {};
     // maxima[maxima_value] = 500
     this.maxima = {};
 
@@ -93,10 +55,12 @@
       query: this.query,
       max: this.max,
       rows: this.rows_str,
-      cols: this.cols_str
+      cols: this.cols_str,
+      row_sort: this.row_sort,
+      col_sort: this.col_sort
     });
   };
-  
+
   var editTemplate = _.template(
     "<label for='title'>Title</label>" +
     "<input type='text' name='title' value=\"{{-title}}\" /><br />" +
@@ -107,23 +71,29 @@
     "<label for='cols'>Columns</label>" +
     "<input type='text' name='cols' value=\"{{-cols_str}}\" /><br />" +
     "<span class='desc'>'host' or 'service'</span><br />" +
+    "<label for='row_sort'>Sort rows</label>" +
+    "<select name='row_sort'>" +
+      "<option value='lexical' {{row_sort_lexical}}>Lexically</option>" +
+      "<option value='metric' {{row_sort_metric}}>By metric</option>" +
+    "</select><br />" +
+    "<label for='col_sort'>Sort columns</label>" +
+    "<select name='col_sort'>" +
+      "<option value='lexical' {{col_sort_lexical}}>Lexically</option>" +
+      "<option value='metric' {{col_sort_metric}}>By metric</option>" +
+    "</select><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 editTemplate(this);
-  };
-
-  // Returns all events, flat.
-  Grid.prototype.allEvents = function() {
-    var events = [];
-    for (var row in this.events) {
-      for (var column in this.events[row]) {
-        events.push(this.events[row][column]);
-      }
-    }
+    return editTemplate(
+        util.merge(this, {
+          row_sort_lexical: (this.row_sort === "lexical" ? "selected" : ""),
+          row_sort_metric:  (this.row_sort === "metric" ? "selected" : ""),
+          col_sort_lexical: (this.col_sort === "lexical" ? "selected" : ""),
+          col_sort_metric:  (this.col_sort === "metric" ? "selected" : "")
+        }));
   };
 
   // What is the maximum for this event?
@@ -133,109 +103,160 @@
       return this.max_fn;
     } else {
       // Use fn to group maxima
-      var max_key = this.max_fn(event);
-      return this.maxima[this.max_fn(event)] || -1/0;
+      return this.maxima[this.max_fn(event)] || 1/0;
     }
   };
 
-  // Generates a td cell for an event. Returns a map of the td, bar, and metric
-  // elements.
-  Grid.prototype.newTdCache = function() {
-    var td = $('<td><span class="bar"><span class="metric"/></span></td>');
-    var bar = td.find('.bar');
-    var metric = td.find('.metric');
-    return {td: td, bar: bar, metric: metric};
+  // Recomputes all maxima.
+  Grid.prototype.refreshMaxima = function() {
+    if (typeof(this.max_fn) === "number") {
+      // We're done; no need to update a fixed maximum.
+      return;
+    }
+
+    this.maxima = {};
+    var e;
+    var max_key;
+    var current_max;
+    for (var row in this.events) {
+      for (var col in this.events[row]) {
+        e = this.events[row][col];
+        if (e.metric) {
+          max_key = this.max_fn(e);
+          current_max = this.maxima[max_key];
+          if ((current_max === undefined) || (current_max < e.metric)) {
+            this.maxima[max_key] = e.metric;
+          }
+        }
+      }
+    }
+  }
+
+  // Update cached maxima with a new event. Returns true if maxima changed.
+  Grid.prototype.updateMax = function(event) {
+    if (typeof(this.max_fn) === "number") {
+      // Absolute maximum; no need to recompute anything.
+      return false;
+    }
+
+    if (event.metric === undefined) {
+      // No metric present
+      return false;
+    }
+
+    var max_key = this.max_fn(event);
+
+    if (this.maxima[max_key] && (event.metric <= this.maxima[max_key])) {
+      // We haven't bumped our max; no change.
+      return false;
+    }
+
+    // Traverse all events looking for a match.
+    var e;
+    var currentMax = -1/0;
+    for (var name in this.events) {
+      for (var subName in this.events[name]) {
+        e = this.events[name][subName];
+        if (e.metric && this.max_fn(e) === max_key) {
+          currentMax = Math.max(currentMax, e.metric);
+        }
+      }
+    }
+
+    // Set new maximum.
+    this.maxima[max_key] = currentMax;
+
+    return true;
+  };
+
+  // Full refresh of column list
+  Grid.prototype.refreshCols = function() {
+    var cols = {};
+    for (var row in this.events) {
+      for (var col in this.events[row]) {
+        cols[col] = Math.max(
+            (cols[col] || -1/0), this.events[row][col].metric);
+      }
+    }
+    if (this.col_sort === "lexical") {
+      this.cols = _.keys(cols).sort();
+    } else {
+      this.cols = _.sortBy(_.keys(cols), function(c) { return -cols[c]; });
+    }
+  };
+
+  // Full refresh of row list
+  Grid.prototype.refreshRows = function() {
+    if (this.row_sort === "lexical") {
+      this.rows = _.keys(this.events).sort();
+    } else {
+      var rows = {};
+      for (var row in this.events) {
+        for (var col in this.events[row]) {
+          rows[row] = Math.max(
+              (rows[row] || -1/0), this.events[row][col].metric);
+        }
+      }
+      this.rows = _.sortBy(_.keys(rows), function(r) { return -rows[r]; });
+    }
   };
 
-  // Update a single jq element with information about an event.
-  Grid.prototype.renderElement = function(e, event) {
+  // Returns a td for the given element.
+  Grid.prototype.renderElement = function(event) {
     if (event === undefined) {
       // Nuke element
-      e.metric.text('');
-      e.bar.css('width', 0);
-      e.td.attr('class', '');
-      e.td.attr('title', '');
-      return false;
+      return $('<td></td>');
     }
 
+    var td = $('<td><span class="bar"><span class="metric"/></span></td>');
+    var bar = td.find('.bar');
+    var metric = td.find('.metric');
+
+    // Event pane
+    td.click(function(_) { eventPane.show(event); });
+
     // State
-    e.td.attr('class', "state box " + event.state);
+    td.attr('class', "state box " + event.state);
 
     // Description
-    e.td.attr('title', event.host + ' ' + event.service + "\n" + event.state +
+    td.attr('title', event.host + ' ' + event.service + "\n" + event.state +
         "\nreceived at " + new Date(event.time).toString() +
         "\nexpiring at " + new Date(event.time + event.ttl * 1000).toString() +
         (event.description ? ("\n\n" + event.description) : ""));
 
     // Metric
     if (event.metric != undefined) {
-      e.metric.text(format.float(event.metric));
+      metric.text(format.float(event.metric));
     } else if (event.state != undefined) {
-      e.metric.text(event.state);
+      metric.text(event.state);
     }
 
     // Bar chart
-    if (event.metric === 0) {
-      // Zero
-      e.bar.css('width', 0);
-    } else if (0 < event.metric) {
+    if (event.metric === null ||
+        event.metric === undefined ||
+        event.metric <= 0) {
+      bar.css('width', 0);
+    } else {
       // Positive
-      e.bar.css('width', 
+      bar.css('width',
           (event.metric / this.eventMax(event) * 100) + "%");
-    } else {
-      // Nil or negative
-      e.bar.css('width', 0);
-    }
-  };
-
-  // Render a single event if there's been no change to table structure.
-  Grid.prototype.partialRender = function(event) {
-    var rowKey = this.row_fn(event);
-    var colKey = this.col_fn(event);
-    var cache = (this.elCache[rowKey] && this.elCache[rowKey][colKey]);
-    if (!cache) {
-      // No cached td element
-      cache = this.newTdCache();
-
-      // Update cache
-      if (!this.elCache[rowKey]) {
-        this.elCache[rowKey] = {};
-      }
-      this.elCache[rowKey][colKey] = cache;
-
-      // Update table.
-      var table = this.el.find('table');
-      var rowIndex = this.rows.indexOf(rowKey);
-      var columnIndex = this.cols.indexOf(colKey);
-      var row = this.el.find('tbody tr')[rowIndex];
-      $($(row).find('td')[columnIndex]).replaceWith(cache.td);
     }
 
-    this.renderElement(cache, event);
+    return td;
   };
 
   // A full re-rendering of the table.
   Grid.prototype.render = function() {
+    // Update data model
+    this.refreshMaxima();
+    this.refreshRows();
+    this.refreshCols();
+
     var table = this.el.find('table');
     table.empty();
 
-    // Compute short names.
-    var colPrefix = strings.commonPrefix(this.cols);
-    var rowPrefix = strings.commonPrefix(this.rows);
-    var colPrefixLen = colPrefix.length;
-    var rowPrefixLen = rowPrefix.length;
-
-    var shortener = function(fieldLen, s) {
-      var res = s;
-      if (s && s.length !== fieldLen) {
-        // Avoid trimming if it would trim the entire string.
-        res = s.substring(fieldLen);
-      }
-      return res;
-    };
-
-    var shortColNames = _.map(this.cols, _.partial(shortener, colPrefixLen));
-    var shortRowNames = _.map(this.rows, _.partial(shortener, rowPrefixLen));
+    var shortColNames = strings.shorten(strings.commonPrefix, this.cols);
+    var shortRowNames = strings.shorten(strings.commonPrefix, this.rows);
 
     // Header
     table.append("<thead><tr><th></th></tr></thead>");
@@ -246,90 +267,22 @@
       row.append(element);
     });
 
-    this.rows.forEach(function(name, i) {
+    this.rows.forEach(function(rowName, i) {
       row = $("<tr><th></th>");
-      table.append(row);
       row.find('th').text(shortRowNames[i] || 'nil');
-      this.cols.forEach(function(subName) {
-        var event = this.events[name][subName];
-        var cache = (this.elCache[name] && this.elCache[name][subName]);
-        if (!cache) {
-          // Not cached; generate and render.
-          cache = this.newTdCache();
-
-          // Cache element
-          if (!this.elCache[name]) {
-            this.elCache[name] = {};
-          }
-          this.elCache[name][subName] = cache;
-
-          // Render element
-          this.renderElement(cache, event);
-        }
-        row.append(cache.td);
+      this.cols.forEach(function(colName) {
+        row.append(this.renderElement(this.events[rowName][colName]));
       }, this);
+      table.append(row);
     }, this);
   };
 
-  // Update cached maxima with a new event. Returns true if maxima changed.
-  Grid.prototype.updateMax = function(event) {
-    if (typeof(this.max_fn) === "number") {
-      // Absolute maximum; no need to recompute anything.
-      return false;
-    }
-
-    if (event === undefined) {
-      return false;
-    }
-
-    if (event.metric === undefined) {
-      // No metric present
-      return false;
-    }
-
-    var max_key = this.max_fn(event);
-
-    if (this.maxima[max_key] && (event.metric <= this.maxima[max_key])) {
-      // We haven't bumped our max; no change.
-      return false;
-    }
-
-    // Traverse all events looking for a match.
-    var e;
-    var currentMax = -1/0;
-    for (var name in this.events) {
-      for (var subName in this.events[name]) {
-        e = this.events[name][subName];
-        if (e.metric && this.max_fn(e) === max_key) {
-          currentMax = Math.max(currentMax, e.metric);
-        }
-      }
-    }
-
-    // Set new maximum.
-    this.maxima[max_key] = currentMax;
-
-    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) {
     var row_key = this.row_fn(e);
     var col_key = this.col_fn(e);
 
-    // Update row list
-    if (this.rows.indexOf(row_key) === -1) {
-      this.rows.push(row_key);
-      this.rows = _.uniq(this.rows.sort(), true);
-    }
-
-    // Update column list
-    if (this.cols.indexOf(col_key) === -1) {
-      this.cols.push(col_key);
-      this.cols = _.uniq(this.cols.sort(), true);
-    }
-
     // Update events map
     if (this.events[row_key] === undefined) {
       // New row
@@ -345,14 +298,14 @@
 
   // Add an event.
   Grid.prototype.add = function(e) {
-    console.log("Adding", e);
     var newEvent = this.saveEvent(e);
     var newMax   = this.updateMax(e);
 
     if (newEvent || newMax) {
       this.render();
     } else {
-      this.partialRender(e);
+//      this.partialRender(e);
+      this.render();
     }
   };
 
@@ -369,49 +322,16 @@
       }
     }
 
-    // Wipe element cache
-    if (this.elCache[row_key]) {
-      delete this.elCache[row_key][col_key];
-      if (_.isEmpty(this.elCache[row_key])) {
-        delete this.elCache[row_key];
-      }
-    }
-
-    // Recompute rows
-    this.rows = _.keys(this.events).sort();
-
-    // Recompute cols
-    var cols = {};
-    for (var row in this.events) {
-      for (var col in this.events[row]) {
-        cols[col] = true;
-      }
-    }
-    this.cols = _.keys(cols).sort();
-
-    this.updateMax();
     this.render();
   };
 
   // Accept an event.
   Grid.prototype.update = function(e) {
-    console.log("Update", e);
     if (e.state === "expired") {
       this.remove(e);
     } else {
       this.add(e);
     }
-    console.log("elCache", this.elCache);
-    console.log("events", this.events);
-    console.log("rows", this.rows);
-    console.log("cols", this.cols);
-  };
-
-  Grid.prototype.reflow = function() {
-    // this.el.find('table').height(
-    //   this.height() -
-    //   this.el.find('h2').height()
-    // );
   };
 
   Grid.prototype.delete = function() {