riemann-dash 0.2.7 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f4c289eed32e6170e10dbe98f328ad9eef4be086
-  data.tar.gz: 72850ab6107b78532fe7c786aa42d27ec3e3e765
+  metadata.gz: 333646d7d876e408d47965ae5a0f27234e6b8821
+  data.tar.gz: 286df1ba3416046249397560a6572cff9b87974d
 SHA512:
-  metadata.gz: 58bfdfb8cbaff5681efc68a5c3836c47e849b17b9ff80e1895f9e19b31c9364690ae942afee15bde2b8107eec2d2de7326554dd048f4c6165441d897447f79fd
-  data.tar.gz: 04db465f234ea5d5e55003d719e8c2026393e6da7a5556b4c0acbff432be56a778102f3177c43546b4d6ad72956b3695e37563936d31759969545d9325d27c11
+  metadata.gz: 71467857647cd99ea04b87956f644897b61405e29e0b950a9dc67501e31128cc249113a27842544c61b385cd32f710da8b8ecf59f77815e91de775fd623a8af6
+  data.tar.gz: c903a2a28580057a35bb83c7dc5e2126012704b5995c7a19b2a10db0ba521634bb5198e6ce754161851668d26656cb84c178f7b4ec3f07cd01b77310f0c6135c

data/lib/riemann/dash/public/clock.js

@@ -1,47 +1,80 @@
 // Global clock
 var clock = (function() {
+  // We keep track of two clocks here. The stream clock is the most recent time
+  // from the streaming system. The official clock is what time we *think* it
+  // is.
+  var stream_clock = 0;
   var clock = new Date();
-  var offset = 0;
+
+  // If we *stop* receiving updates from the stream clock, we still want time
+  // to advance--but gradually, we want to reconverge on the local system
+  // clock. The last stream clock update is used to track how long it's been
+  // since we last advanced the stream clock.
+  var last_stream_clock_update = new Date(0);
+
+  // Over this many milliseconds, we want to converge on the current time.
+  var convergence_time = 60000;
+
+  // Callback_i is used to uniquely identify each callback so we can
+  // unsubscribe to clock updates.
   var callback_i = 0;
+
+  // A map of callback indices to callback functions.
   var callbacks = {};
 
+  // Advance the clock to a new time.
   var advance = function(t) {
-    if (clock < t) {
-      // New local offset
-      offset = t - (new Date());
-//      console.log("new offset is", offset);
-
-      clock = t;
-//      console.log("Clock advanced to", t / 1000);
+    if (stream_clock < t) {
+      // This is the highest value ever received for the stream clock.
+      stream_clock = t;
+      // console.log("New stream clock:", stream_clock);
+      last_stream_clock_update = new Date();
     }
   }
 
+  // Create a new subscription. Returns a subscription key used to unsubscribe.
   var subscribe = function(f) {
     callback_i = callback_i + 1;
     callbacks[callback_i] = f;
     return callback_i;
   }
 
+  // Unsubscribes a given subscription, by ID.
   var unsubscribe = function(i) {
     delete callbacks[i];
   }
 
   // Automatically advance clock.
   setInterval(function() {
-    t1 = new Date();
-    offset = offset * 0.99;
-    advance(new Date(t1.valueOf() + offset));
+    // What time is the local system?
+    var now = new Date();
+
+    // What time does the stream clock think it is?
+    var stream_now = stream_clock + (now - last_stream_clock_update);
+
+    // What fraction of the convergence window has elapsed?
+    var convergence_fraction =
+      Math.min(1, (now - last_stream_clock_update) / convergence_time);
+
+    // console.log("Convergence:", convergence_fraction);
+    // console.log("Clock offset:", stream_now - now);
+
+    // The effective clock is the current stream time, plus the delta from the
+    // stream time to the local time, multiplied by the convergence fraction.
+    clock = stream_now + ((now - stream_now) * convergence_fraction);
+
     $.each(callbacks, function(k, f) {
       f(clock);
     });
+
     t2 = new Date();
-    subs.load1(t1, t2);
-    subs.load5(t1, t2);
+    subs.load1(now, t2);
+    subs.load5(now, t2);
   }, 1000);
 
   return {
     'clock': clock,
-    'offset': offset,
+    'stream_clock': stream_clock,
     'advance': advance,
     'subscribe': subscribe,
     'unsubscribe': unsubscribe

data/lib/riemann/dash/public/subs.js

@@ -11,7 +11,7 @@ var subs = (function() {
 
   // Subscriptions
   var subs = {};
-  
+
   // Switch to turn on/off event processing
   var active = true;
 
@@ -58,6 +58,7 @@ var subs = (function() {
         expiry = new Date(bottom);
         if (expiry < now) {
           expired = prioqueue.shift();
+          expired.time = expiry;
           expired.state = 'expired';
           sub.f(expired);
         }
@@ -77,9 +78,9 @@ var subs = (function() {
 
     isOpen: function() {
       if (server_type == "ws") {
-        return this.ws && (this.ws.readyState != EventSource.CLOSED)
-      } else {
         return this.ws && (this.ws.readyState != WebSocket.CLOSED)
+      } else {
+        return this.ws && (this.ws.readyState != EventSource.CLOSED)
       }
     },
     isClosed: function() { return !this.isOpen() },
@@ -98,7 +99,8 @@ var subs = (function() {
 
     open: function() {
       if (this.isOpen()) return this;
-	console.log("will open url: " + this.url());
+
+      console.log("will open url: " + this.url());
 
       var ws;
       if (server_type == "sse") {
@@ -128,13 +130,17 @@ var subs = (function() {
           var event = JSON.parse(e.data);
           event.time = Date.parse(event.time);
           clock.advance(event.time);
-          if (event.ttl > 0) { // only expired events have no TTL
+
+          // Update local index.
+          if (event.state !== "expired") { // only expired events have no TTL
+            // TODO: get a prioqueue supporting delete so we can delete expired
+            // events.
             this.prioqueue.update(
               {host: event.host, service: event.service},
-              event.time + (event.ttl * 1000) // convert TTL to ms
+              event.time + ((event.ttl || 60) * 1000) // convert TTL to ms
             );
+            this.f(event);
           }
-          this.f(event);
         }
         var t2 = Date.now();
         load1(t1, t2);
@@ -142,7 +148,6 @@ var subs = (function() {
       }, this);
 
       return this;
-
     },
 
     close: function() {
@@ -176,9 +181,6 @@ var subs = (function() {
       // Done here.
       return;
     }
-  
-    // Display reconnection notice
-    toastr.warning(_.size(closed) + " lost connections&mdash;check the server field above.");
 
     // Reopen
     _.each(closed, function(sub) {
@@ -190,9 +192,8 @@ var subs = (function() {
     if (errorQueue.length == 0) {
       return;
     }
-    toastr.warning(errorQueue.length + " socket errors");
+    toastr.warning(errorQueue.length + " socket errors; check the server field above.");
     errorQueue.length = 0;
-    converge();
   }
 
   // Periodically notify of errors.
@@ -216,7 +217,7 @@ var subs = (function() {
     disable: function() { active = false; console.log("Subs disabled."); },
     toggle:  function() {
       active = ! active;
-      if (active) { 
+      if (active) {
         console.log("Subs enabled.");
       } else {
         console.log("Subs disabled.");

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

@@ -135,7 +135,7 @@
       // Use fn to group maxima
       var max_key = this.max_fn(event);
       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
@@ -170,6 +170,8 @@
     // Metric
     if (event.metric != undefined) {
       e.metric.text(format.float(event.metric));
+    } else if (event.state != undefined) {
+      e.metric.text(event.state);
     }
 
     // Bar chart
@@ -200,8 +202,8 @@
         this.elCache[rowKey] = {};
       }
       this.elCache[rowKey][colKey] = cache;
-     
-      // Update table.      
+
+      // Update table.
       var table = this.el.find('table');
       var rowIndex = this.rows.indexOf(rowKey);
       var columnIndex = this.cols.indexOf(colKey);
@@ -230,7 +232,7 @@
         res = s.substring(fieldLen);
       }
       return res;
-    }; 
+    };
 
     var shortColNames = _.map(this.cols, _.partial(shortener, colPrefixLen));
     var shortRowNames = _.map(this.rows, _.partial(shortener, rowPrefixLen));
@@ -254,12 +256,12 @@
         if (!cache) {
           // Not cached; generate and render.
           cache = this.newTdCache();
-                
+
           // Cache element
           if (!this.elCache[name]) {
             this.elCache[name] = {};
           }
-          this.elCache[name][subName] = cache; 
+          this.elCache[name][subName] = cache;
 
           // Render element
           this.renderElement(cache, event);
@@ -343,6 +345,7 @@
 
   // Add an event.
   Grid.prototype.add = function(e) {
+    console.log("Adding", e);
     var newEvent = this.saveEvent(e);
     var newMax   = this.updateMax(e);
 
@@ -357,20 +360,22 @@
   Grid.prototype.remove = function(e) {
     var row_key = this.row_fn(e);
     var col_key = this.col_fn(e);
-    if (this.events[row_key] && this.events[row_key][col_key]) {
+
+    // Remove from events table.
+    if (this.events[row_key]) {
       delete this.events[row_key][col_key];
+      if (_.isEmpty(this.events[row_key])) {
+        delete this.events[row_key];
+      }
     }
 
     // Wipe element cache
     if (this.elCache[row_key]) {
       delete this.elCache[row_key][col_key];
-      if (_.isEmpty(this.events[row_key])) {
-        delete this.events[row_key];
+      if (_.isEmpty(this.elCache[row_key])) {
+        delete this.elCache[row_key];
       }
     }
-    if (_.isEmpty(this.elCache[row_key])) {
-      delete this.events[row_key];
-    }
 
     // Recompute rows
     this.rows = _.keys(this.events).sort();
@@ -387,20 +392,25 @@
     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()     
+    //   this.el.find('h2').height()
     // );
   };
 

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

@@ -5,6 +5,7 @@
       this.el.addClass("help");
       this.el.append('<div class="box">' +
         "<p>Welcome to Riemann-Dash.</p>" +
+        "<p>Need a refresher on the query language? See the <a href=\"https://github.com/aphyr/riemann/blob/master/test/riemann/query_test.clj\">query tests</a> for examples, or read the <a href=\"https://github.com/aphyr/riemann/blob/master/src/riemann/Query.g\">spec</a>.</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>" +

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

@@ -0,0 +1,119 @@
+(function() {
+    // Reify a log view from JSON
+    var LogView = function(json) {
+      // Extract state from JSON
+      view.View.call(this, json);
+      this.query = json.query;
+      this.title = json.title;
+      this.lines = json.lines || 1000;
+
+      var self = this;
+
+      // Set up HTML
+      this.el.addClass('log');
+      this.el.append('<h2></h2>' +
+        '<div class="scroll"><table><thead><tr>' +
+        '<th>host</th>' +
+        '<th>service</th>' +
+        '<th>state</th>' +
+        '<th>metric</th>' +
+        '<th>description</th>' +
+        '</tr></thead><tbody></tbody></table></div>');
+      this.el.find('h2').text(this.title);
+      this.scroll = this.el.find('.scroll');
+      this.log = this.el.find('tbody');
+
+      // Line template
+      this.lineTemplate = _.template("<tr><td>{{host}}</td><td>{{service}}</td><td>{{state}}</td><td>{{metric}}</td><td>{{description}}</td></tr>");
+
+      // When scrolling occurs, toggle tracking state.
+      this.scroll.scroll(function(e) {
+        if (self.scroll.scrollTop() >
+             (self.log.height() - self.scroll.height())) {
+          tracking = true;
+        } else {
+          tracking = false;
+        }
+      });
+
+      // Are we currently following the bottom of the log?
+      this.tracking = true;
+
+      // This view can be clicked to focus on it.
+      this.clickFocusable = true;
+
+      if (this.query) {
+        // Subscribe to our query
+        this.sub = subs.subscribe(
+            this.query,
+            function(e) {
+              self.update(e);
+            }
+        );
+      }
+    };
+
+    // Set up our LogView class and register it with the view system
+    view.inherit(view.View, LogView);
+    view.Log = LogView;
+    view.types.Log = LogView;
+
+    // Scroll to bottom of log.
+    LogView.prototype.scrollToBottom = function() {
+      this.scroll.stop().animate({
+        scrollTop: (this.log.height() - this.scroll.height() + 20)
+      }, 1000, "swing");
+    };
+
+    // Are we at the bottom of the log?
+    LogView.prototype.atBottom = function() {
+      console.log(this.scroll.scrollTop());
+      console.log(this.log.height() - this.scroll.height());
+      return (this.scroll.scrollTop() >
+          (this.log.height() - this.scroll.height()));
+    };
+
+    // Accept events from a subscription and update the log.
+    LogView.prototype.update = function(event) {
+      this.log.append(this.lineTemplate(event));
+      if (this.tracking) { this.scrollToBottom(); };
+    };
+
+    // Serialize current state to JSON
+    LogView.prototype.json = function() {
+      return $.extend(view.View.prototype.json.call(this), {
+        type: 'Log',
+        title: this.title,
+        query: this.query,
+        lines: this.lines
+      });
+    };
+
+    // 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="lines">Maximum lines (number of events)</label>' +
+      '<input type="text" name="lines" value="{{lines}}" />'
+    );
+
+    // Returns the edit form
+    LogView.prototype.editForm = function() {
+      return editTemplate(this);
+    };
+
+    // Called when our parent needs to resize us
+    LogView.prototype.reflow = function() {
+    };
+
+    // When the view is deleted, remove our subscription
+    LogView.prototype.delete = function() {
+      if (this.sub) {
+        subs.unsubscribe(this.sub);
+      }
+      view.View.prototype.delete.call(this);
+    };
+})();
+

data/lib/riemann/dash/version.rb

@@ -1,4 +1,4 @@
 module Riemann; end
 module Riemann::Dash
-  VERSION = '0.2.7'
+  VERSION = '0.2.8'
 end

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

@@ -442,7 +442,7 @@ h2 {
     color: #000;
     opacity: 1;
   }
-  
+
   h2 {
     height: 28px;
     font-size: 24px;
@@ -456,3 +456,30 @@ h2 {
     bottom: 0;
   }
 }
+
+.log.view {
+  .scroll {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    position: absolute;
+    top: 28px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead {
+    text-align: left;
+  }
+
+  td, th {
+    padding: 2px;
+    vertical-align: top;
+    border-bottom: 1px solid #eee;
+  }
+}

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

@@ -47,6 +47,7 @@
   <script src="views/timeseries.js"></script>
   <script src="views/flot.js"></script>
   <script src="views/title.js"></script>
+  <script src="views/log.js"></script>
   <script src="views/help.js"></script>
   <script src="views/gauge.js"></script>
   <script src="views/grid.js"></script>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: riemann-dash
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.2.8
 platform: ruby
 authors:
 - Kyle Kingsbury
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-03 00:00:00.000000000 Z
+date: 2014-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: riemann-client
@@ -172,6 +172,7 @@ files:
 - lib/riemann/dash/public/views/gauge.js
 - lib/riemann/dash/public/views/grid.js
 - lib/riemann/dash/public/views/help.js
+- lib/riemann/dash/public/views/log.js
 - lib/riemann/dash/public/views/timeseries.js
 - lib/riemann/dash/public/views/title.js
 - lib/riemann/dash/public/x.png