riemann-dash 0.1.1 → 0.2.0

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

@@ -1,4 +1,5 @@
 var util = (function() {
+  // Unique IDs
   var uniqueId = function(bytes) {
     bytes = bytes || 20;
     var s = '';
@@ -13,8 +14,38 @@ var util = (function() {
     return _.extend(_.clone(m1), m2);
   }
 
+  // Wraps a function in another, which calls f at most once every period
+  // milliseconds. Tries to minimize latency.
+  var slur = function(period, f) {
+    var lastRun = new Date();
+    lastRun.setYear(0);
+    var queued = false;
+    var execute = function(context, args) {
+      f.apply(context, args);
+      lastRun = new Date();
+      queued = false;
+    };
+
+    return function() {
+      // If queued, do nothing
+      if (queued) {
+        return;
+      }
+
+      var dt = (new Date()) - lastRun;
+      if (period <= dt) {
+        // We're free to go
+        execute(this, arguments);
+      } else {
+        // Too soon, enqueue a new job.
+        window.setTimeout(execute, period - dt, this, arguments);
+      }
+    }
+  }
+
   return {
     merge: merge,
+    slur: slur,
     uniqueId: uniqueId
   }
 })();

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

@@ -10,12 +10,12 @@
       this.el.append(
         '<div class="box">' +
           '<div class="quickfit metric value">?</div>' +
-          '<div class="quickfit title"></div>' +
+          '<h2 class="quickfit"></div>' +
           '</div>'
       );
 
       this.box = this.el.find('.box');
-      this.el.find('.title').text(this.title);
+      this.el.find('h2').text(this.title);
 
       if (this.query) {
         var reflowed = false;
@@ -63,13 +63,13 @@
       value.quickfit({min: 6, max: 1000, font_height_scale: 1});
 
       // Size title
-      var title = this.el.find('.title');
+      var title = this.el.find('h2');
       title.quickfit(fitopts);
     }
 
     Gauge.prototype.delete = function() {
       if (this.sub) {
-        this.sub.close();
+        subs.unsubscribe(this.sub);
       }
       view.View.prototype.delete.call(this);
     }

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

@@ -11,11 +11,11 @@
     // Initial display
     this.el.addClass('grid');
     this.el.append(
-      '<div class="title"></div>' +
-      '<table></table>'
+      '<h2></h2>' +
+      '<div class="container"><table></table></div>'
     );
     this.box = this.el.find('.box');
-    this.el.find('.title').text(this.title);
+    this.el.find('h2').text(this.title);
    
     // State 
     this.hosts = [];
@@ -115,7 +115,7 @@
   }
 
   // Rerender the table
-  Grid.prototype.render = function() {
+  Grid.prototype.render = util.slur(200, function() {
     var table = this.el.find('table');
     table.empty();
 
@@ -134,12 +134,12 @@
       row.find('th').text(host);
       this.services.forEach(function(service) {
         var event = this.events[host][service];
-        var element = $('<td><span class="metric" /><div class="bar" /></td>');
+        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) {
@@ -263,15 +263,15 @@
   }
 
   Grid.prototype.reflow = function() {
-    this.el.find('table').height(
-      this.height() -
-      this.el.find('.title').height()
-    );
+//    this.el.find('table').height(
+ //     this.height() -
+  //    this.el.find('h2').height()     
+   // );
   }
 
   Grid.prototype.delete = function() {
     if (this.sub != undefined) {
-      this.sub.close();
+      subs.unsubscribe(this.sub);
     }
     this.update = function() {};
     view.View.prototype.delete.call(this);

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

@@ -6,7 +6,9 @@
       this.title = json.title;
       this.clickFocusable = true;
       this.el.addClass("title");
-      this.el.text(this.title);
+      this.h2 = $('<h2/>');
+      this.el.append(this.h2);
+      this.h2.text(this.title);
       this.reflow();
     }
 
@@ -28,6 +30,6 @@
     }
 
     Title.prototype.reflow = function() {
-      this.el.quickfit(fitopts);
+      this.h2.quickfit(fitopts);
     }
 })();

data/lib/riemann/dash/version.rb

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

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

@@ -8,7 +8,9 @@ $amber: #FFC712;
 $light-blue: #2CCCFE;
 $blue: #2C55FF;
 $dark-grey: #1F1F1F;
-$grey: #777;
+$light-grey: #ccc;
+$off-white: #dedede;
+$grey: #888;
 $green: #06FA23;
 $yellow: #FEF206;
 
@@ -23,36 +25,35 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  background: #000;
-  color: #fff;
+  background: #fff;
+  color: $dark-grey;
 }
 
 html,table {
-  font-family: Helvetica Nueue, Helvetica, sans;
-  font-size: 12pt;
-}
-h1 {
-  margin-bottom: 0.2em;
-}
-h2 {
-  margin-top: 0;
-  margin-bottom: 0.1em;
+  font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  font-weight:400;
+  font-stretch:normal;
+  font-size: 14px;
 }
 
 #toolbar {
-  width: 100%;
   height: 28px;
   overflow: hidden;
   position: absolute;
+  top: 3px;
+  left: 3px;
+  right: 3px;
   font-size: 12px;
  
   input {
-    background: $dark-grey;
-    color: #fff;
-    border: 1px solid $grey;
+    background: $off-white;
+    border: 1px solid $dark-grey;
     margin: 3px;
     padding: 3px 6px;
   }
+  input:hover {
+    background: lighten($off-white, 5%);
+  }
 
   .server {
     float: right;
@@ -62,14 +63,15 @@ h2 {
     position: relative;
     margin: 3px;
     float: right;
-    border: 1px solid $grey;
     width: 100px;
-    padding: 3px 6px;
+    padding: 4px 6px 3px 6px;
+    border: 1px solid $dark-grey;
     span {
       z-index: -1;
     }
     .bar {
-      background: rgba(255,255,255,0.25);
+      border-radius: 0;
+      background: rgba(0,0,0,0.25);
       width: 1%;
     }
   }
@@ -78,11 +80,13 @@ h2 {
     display: inline-block;
     margin: 3px;
     padding: 3px 6px;
-    border: 1px solid $grey;
-    color: #fff;
-    background: $dark-grey;
+    border: 1px solid $light-grey;
+    background: $off-white;
     cursor: pointer;
   }
+  .button:hover {
+    background: lighten($off-white, 5%);
+  }
 
   .pager {
     margin: 0;
@@ -103,11 +107,11 @@ h2 {
     }
 
     li:hover {
-      background: $grey;
+      background: lighten($off-white, 10%);
     }
 
     li.current {
-      border-color: white;
+      border-color: $dark-grey;
 
       .delete {
         display: inline;
@@ -118,10 +122,11 @@ h2 {
 }
 
 #view {
-  width: 100%;
   position: absolute;
+  left: 3px;
+  right: 3px;
   top: 28px;
-  bottom: 0px;
+  bottom: 3px;
 }
 
 .box {
@@ -134,7 +139,7 @@ h2 {
   right: 0;
   margin: 3px;
   padding: 3px;
-  background: $dark-grey;
+  background: $light-grey;
   border-radius: 3px;
 }
 
@@ -144,7 +149,8 @@ h2 {
   top: 0;
   bottom: 0;
   height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 }
 
 .state.ok, .bar.ok {
@@ -243,7 +249,7 @@ h2 {
   position: absolute;
   z-index: 1000;
   border-radius: 5px;
-  background: rgba(255,251,180,0.5);
+  background: rgba(0,0,0,0.5);
 }
 
 #simplemodal-overlay {
@@ -269,15 +275,16 @@ h2 {
   cursor:pointer;
 }
 
-
 .quickfit {
   display: block;
   white-space: nowrap;
   width: 100%;
 }
 
-.title {
-  text-align: right;
+h2 {
+  display: block;
+  padding: 3px;
+  margin: 0;
 }
 
 .metric {
@@ -285,8 +292,16 @@ h2 {
   text-align: right;
 }
 
+.title h2 {
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 3px;
+  bottom: 3px;
+}
+
 .gauge {
-  .title {
+  h2 {
     position: absolute;
     height: 25%;
     width: 75%;
@@ -306,46 +321,57 @@ h2 {
 }
 
 .grid {
-  .title {
-    height: 32px;
+  h2 {
+    height: 28px;
     font-size: 24px;
-    text-align: right;
   }
 
-  table {
+  .container {
     position: absolute;
-    width: 100%;
-    border-spacing: 3px;
+    top: 28px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
 
-    tr > *:first-child {
-      width: 1px;
-    }
+  .bar {
+    position: static;
+    display: block;
+    height: 100%;    
+  }
 
-    th {
+  .box {
+    margin: 0;
+    padding: 0;
+    position: static;
+
+    .metric {
+      padding: 3px;
       font-weight: normal;
-      vertical-align: top;
-      text-align: right;
-      padding: 0 3px;
     }
+  }
+
+  table {
+    font-size: 12px;
+    position: absolute;
+    width: 100%;
+    border-spacing: 3px;
 
     thead {
       margin: 0;
       padding: 0;
 
-      tr {
-        padding: 0;
-      }
-
       th {
-        margin: 0;
+        // Work around https://bugs.webkit.org/show_bug.cgi?id=20040
+        position: relative;
+        top: 3px;
         vertical-align: bottom;
+        text-align: right;
       }
     }
-
-    .box {
-      position: relative;
-      vertical-align: top;
-      text-align: right;
-    }
+  }
+  
+  tr > *:first-child {
+    width: 1px;
   }
 }

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

@@ -1,8 +1,202 @@
-<h2>Problems</h2>
-<div class="box"><%= state_list query('state != "ok"') %></div>
+<!doctype html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Riemann</title>
+  <link rel="stylesheet" href="/css" type="text/css" />
+  <link rel="stylesheet" href="/toastr.css" type="text/css" />
+</head>
+<body>
+  <div id="toolbar"></div>
+  <div id="view"></div>
 
-<div class="box">
-<%= state_chart query('service = "cpu" or service = "memory" or service =~ "disk%" or service = "load"'), :title => "Health" %>
-</div>
+  <script type="text/javascript" src="/underscore-min.js"></script>
+  <script type="text/javascript" src="/jquery-1.7.2.min.js"></script>
+  <script type="text/javascript" src="/jquery-ui-1.9.0.custom.min.js"></script>
+  <script type="text/javascript" src="/jquery.json-2.2.min.js"></script>
+  <script type="text/javascript" src="/jquery.simplemodal.1.4.3.min.js"></script>
+  <script type="text/javascript" src="/toastr.js"></script>
+  <script type="text/javascript" src="/jquery.quickfit.js"></script>
+  <script type="text/javascript" src="/util.js"></script>
+  <script type="text/javascript" src="/mustache.js"></script>
+  <script src="http://d3js.org/d3.v2.js"></script>
+  <script type="text/javascript" src="/profile.js"></script>
+  <script type="text/javascript" src="/clock.js"></script>
+  <script type="text/javascript" src="/persistence.js"></script>
+  <script type="text/javascript" src="/keys.js"></script>
+  <script type="text/javascript" src="/subs.js"></script>
+  <script type="text/javascript" src="/format.js"></script>
+  <script type="text/javascript" src="/toolbar.js"></script>
+  <script type="text/javascript" src="/view.js"></script>
+  <script type="text/javascript" src="/views/title.js"></script>
+  <script type="text/javascript" src="/views/help.js"></script>
+  <script type="text/javascript" src="/views/gauge.js"></script>
+  <script type="text/javascript" src="/views/grid.js"></script>
+  <script type="text/javascript" src="/dash.js"></script>
 
-<div class="box"><%= state_chart query('true'), :title => "Everything" %></div>
+  <script type="text/javascript">
+function logTable(container, query) {
+  var $container = $(container);
+  $container.addClass("log-table");
+  $container.append('<input type="text" class="query"></input>');
+  var prompt = $container.find('input');
+  $container.append('<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>');
+  var scroll = $container.find('.scroll');
+  var log = $container.find('tbody');
+  var sub = null;
+  var tracking = true;
+
+  var template = "<tr><td>{{host}}</td><td>{{service}}</td><td>{{state}}</td><td>{{{metric}}}</td><td>{{description}}</td></tr>";
+
+  // Are we following the bottom of the log?
+  scroll.scroll(function(e) {
+    if (scroll.scrollTop() > (log.height() - scroll.height())) {
+      tracking = true;
+    } else {
+      tracking = false;
+    }
+  });
+
+  var scrollToBottom = function() {
+    scroll.stop().animate({
+      scrollTop: (log.height() - scroll.height() + 20)
+    }, 1000, "swing");
+  }
+
+  var atBottom = function() {
+    console.log(scroll.scrollTop());
+    console.log(log.height() - scroll.height());
+    return (scroll.scrollTop() > (log.height() - scroll.height()));
+  }
+
+  // Add an event  
+  var append = function(e) {
+    $.extend(e, {
+      metric: format.metric(e)
+    });
+    log.append(Mustache.render(template, e));
+    if (tracking) { scrollToBottom() };
+  }
+
+  // Set up our query
+  var startQuery = function(query) {
+    // Cancel existing sub     
+    if (sub != null) { sub.close(); }
+
+    // Subscribe
+    sub = subs.subscribe(query, function(e) {
+      e.time = d3.time.format.iso.parse(e.time);
+      clock.advance(e.time);
+      append(e);
+    });
+  }
+
+  // Initial subscription
+  if (query) { prompt[0].value = query; startQuery(query); }
+
+  // Prompt entry
+  prompt.change(function() { startQuery(this.value) });
+}
+
+
+function timeSeries(container) {
+  // Container
+  var $container = $(container);
+  var container = d3.select(container);
+  $container.append('<input type=\"text\" style="display: block"></input>');
+  var prompt = $container.children().last();
+
+  // Data structures
+  var data = [];
+  var n = 60;
+  var sub = null;
+
+  // Scale
+  var w = 20;
+  var h = 80;
+
+  var x = d3.time.scale()
+    .domain([0,1])
+    .range([0, w * n]);
+  var y = d3.scale.linear()
+    .domain([0,100])
+    .rangeRound([0,h]);
+
+  var updateTime = function(max) {
+    var min = d3.time.minute.offset(max, -1);
+    x.domain([min, max]);
+  }
+  updateTime(new Date());
+
+  // Chart itself
+  var chart = container.append("svg")
+    .attr("class", "timeSeries")
+    .attr("width", w * (n - 1))
+    .attr("height", h);
+
+  // Baseline
+  chart.append("line")
+    .attr("x1", 0)
+    .attr("x2", w * n)
+    .attr("y1", h - .5)
+    .attr("y2", h - .5)
+    .style("stroke", "#000");
+  
+  // Subscribe
+  prompt.change(function() {
+    if (sub != null) { sub.close(); }
+
+    sub = subscribe(this.value, function(e) {
+      // Move time
+      e.time = d3.time.format.iso.parse(e.time);
+      clock.advance(e.time);
+      
+      // Append to window
+      if (data.length >= n) {
+        data.shift();
+      }
+      data.push(e);
+      
+      console.log(e.time, "maps to", x(e.time), "in", x.domain(), x.range());
+    });
+  });
+
+  var clockSub = clock.register(function(t) {
+    updateTime(t);
+    
+    // Move events
+    var rect = chart.selectAll("rect")
+      .data(data, function(e) { if (e) { return e.time } });
+
+    rect.enter().insert("rect", "line")
+        .attr("x", function(e, i) { 
+          return x(e.time) - .5; })
+        .attr("y", function(e) { return h - y(e.metric) - .5 })
+        .attr("width", w)
+        .attr("height", function(e) { return y(e.metric); })
+      .transition()
+        .duration(1000)
+        .attr("x", function(e, i) { return x(e.time) - .5 });
+
+    rect.transition()
+      .duration(1000)
+      .attr("x", function(e) { return x(e.time) - .5; });
+
+    rect.exit().transition()
+      .duration(1000)
+      .attr("x", function(e) { return x(e.time) - .5 })
+      .remove();
+  });
+
+}
+
+  dash.reload();
+  </script>
+</body>
+</html>