implementing initial version of vertical grids, still need to smooth out some rendering glitches

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,6 +49,7 @@
       title: this.title,
       query: this.query,
       max: this.max,
+      by: this.by
     });
   }
 
@@ -52,18 +58,21 @@
         '<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 (horizontal)</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>',
-      this)
+      this);
   }
 
   // Returns all events, flat.
   Grid.prototype.allEvents = function() {
     var events = [];
-    for (host in this.events) {
+    for (row in this.events) {
-      for (service in this.events[host]) {
+      for (column in this.events[row]) {
-        events.push(this.events[host][service]);
+        events.push(this.events[row][column]);
       }
     }
   }
@@ -106,10 +115,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);
+    if (this.by === "host") {
-    var serviceIndex = this.services.indexOf(event.service);
+      var rowIndex = this.rows.indexOf(event.host);
-    var row = this.el.find('tbody tr')[hostIndex];
+      var columnIndex = this.columns.indexOf(event.service);
-    var td = $($(row).find('td')[serviceIndex]);
+    } 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 +136,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);
+      row.find('th').text(name);
-      this.services.forEach(function(service) {
+      this.columns.forEach(function(subName) {
-        var event = this.events[host][service];
+        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,15 +165,17 @@
     }
 
     var e;
+
     if (this.max === "all") {
       this.currentMax = -1/0;
-      for (host in this.events) {
+      for (name in this.events) {
-        for (service in this.events[host]) {
+        for (subName in this.events[name]) {
-          e = this.events[host][service];
+          e = this.events[name][subName];
           this.currentMax = Math.max(e.metric, this.currentMax || -1/0);
         }
       }
-    } else if (this.max === "host" ) {
+    } else if (this.by == "host") {
+      if (this.max == "host") {
         this.currentMax = {};
         for (host in this.events) {
           for (service in this.events[host]) {
@@ -177,6 +193,27 @@
               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 {
       this.currentMax = this.max;
       return false;
@@ -188,16 +225,17 @@
   // Stores an event in the internal state tables. Returns true if we
   // haven't seen this host/service before.
   Grid.prototype.saveEvent = function(e) {
+    if (this.by === "host") {
       // Host list
-    if (this.hosts.indexOf(e.host) === -1) {
+      if (this.rows.indexOf(e.host) === -1) {
-      this.hosts.push(e.host);
+        this.rows.push(e.host);
-      this.hosts = _.uniq(this.hosts.sort(), true);
+        this.rows = _.uniq(this.rows.sort(), true);
       }
 
       // Services list
-    if (this.services.indexOf(e.service) === -1) {
+      if (this.columns.indexOf(e.service) === -1) {
-      this.services.push(e.service);
+        this.columns.push(e.service);
-      this.services = _.uniq(this.services.sort(), true);
+        this.columns = _.uniq(this.columns.sort(), true);
       }
 
       // Events map
@@ -205,17 +243,40 @@
         // New host
         this.events[e.host] = {};
       }
-    if (this.events[e.host][e.service] === undefined) {
+      var newEvent = (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;
+
+    } 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);
+      }
+
+      // 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;
+
+    }
+
   }
 
   // Add an event.
@@ -263,7 +324,7 @@
   }
 
   Grid.prototype.reflow = function() {
-//    this.el.find('table').height(
+    // this.el.find('table').height(
     //   this.height() -
     //   this.el.find('h2').height()     
     // );