riemann-dash 0.1.1 → 0.2.0

data/lib/riemann/dash/controller/index.rb

@@ -1,5 +1,50 @@
 class Riemann::Dash
+  require 'multi_json'
+  require 'fileutils'
+  require 'set'
+
+  WS_CONFIG_FILE = "config/config.json"
+
   get '/' do
-    erb :index
+    erb :index, :layout => false
+  end
+
+  get '/config', :provides => 'json' do
+    if File.exists? WS_CONFIG_FILE
+      send_file WS_CONFIG_FILE, :type => :json
+    else
+      MultiJson.encode({})
+    end
+  end
+
+  post '/config' do
+    # Read update
+    request.body.rewind
+    update = MultiJson.decode(request.body.read)
+
+    # Read old config
+    if File.exists? WS_CONFIG_FILE
+      old = MultiJson.decode File.read WS_CONFIG_FILE
+    else
+      old = {}
+    end
+
+    new = {}
+
+    # Server
+    new['server'] = update['server'] or old['server']
+
+    p update['workspaces']
+    new['workspaces'] = update['workspaces'] or old['workspaces']
+
+    # Save new config
+    FileUtils.mkdir_p 'config'
+    File.open(WS_CONFIG_FILE, 'w') do |f|
+      f.write(MultiJson.encode(new))
+    end
+
+    # Return current config
+    content_type "application/json"
+    MultiJson.encode(new)
   end
 end

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

@@ -59,7 +59,7 @@ dash = (function() {
   var stash = function() {
     var currentIndex = currentWorkspaceIndex();
     if (currentIndex != null) {
-      console.log(util.merge(currentWorkspace(), {view: currentView.json()}));
+      //console.log(util.merge(currentWorkspace(), {view: currentView.json()}));
       workspaces[currentIndex] = 
         util.merge(currentWorkspace(), {view: currentView.json()});
     }
@@ -149,8 +149,11 @@ dash = (function() {
         server: toolbar.server(),
         workspaces: workspaces
       },
-      function() { console.log("Saved config."); },
-      function(xhr, x, msg) { console.log("Error saving config", msg); }
+      function() { toastr.info("Configuration saved.") },
+      function(xhr, msg) { 
+        console.log("Error saving config", msg);
+        toastr.error("Error saving config: " + msg);
+      }
     );
   }
 

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

@@ -3,7 +3,7 @@ var persistence = (function() {
   // Saves configuration to persistent store. Calls success() or error() when 
   // complete.
   var save = function(config, success, error) {
-    jQuery.ajax('/ws/config', {
+    jQuery.ajax('/config', {
       type: 'POST',
       success: success,
       error: error,
@@ -15,7 +15,7 @@ var persistence = (function() {
 
   // Returns configuration from persistent store.
   var load = function(success, error) {
-    jQuery.ajax('/ws/config', {
+    jQuery.ajax('/config', {
         type: 'GET',
         success: success,
         error: error,

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

@@ -1,23 +1,74 @@
 var subs = (function() {
-  var server = "127.0.0.1:5556";
+  // What server shall we connect to by default?
+  var server;
+
+  // Subscription ID counter.
+  var id_counter = -1;
+
+  // Subscriptions
+  var subs = {};
+  
+  // Switch to turn on/off event processing
   var active = true;
+ 
+  // Error queue for notification
+  var errorQueue = [];
 
+  // Instrumentation
   var load1 = profile.load(1000);
   var load5 = profile.load(5000);
 
-  // Loads index with query, calling f with each received event.
-  var subscribe = function(query, f) {
-    var queryString = "query=" + encodeURI(query);
-    var uri = "ws://" + server + "/index?subscribe=true&" + queryString;
-    var ws = new WebSocket(uri);
-    var $ws = $(ws);
+  // Get a new subscription ID.
+  var newId = function() {
+    return id_counter += 1;
+  }
 
+  // Close a subscription's websocket channel.
+  var close = function(sub) {
+    if (sub.ws == null) {
+      return sub;
+    }
+    sub.ws.close();
+    sub.ws == null;
+    return sub;
+  }
+
+  // Closes a subscription and deletes it from the subscription manager.
+  var unsubscribe = function(sub) {
+    delete subs[sub.id];
+    close(sub);
+  }
+
+  // Unsubscribe from all subscriptions.
+  var unsubscribeAll = function() {
+    _.each(subs, unsubscribe);
+  }
+
+  // Open a subscription's websocket channel.
+  var open = function(sub) {
+    if (sub.ws != null && sub.ws.readyState != WebSocket.CLOSED) {
+      return sub;
+    }
+
+    var f = sub.f;
+    var queryString = "query=" + encodeURI(sub.query);
+    var uri = "ws://" + server + "/index?subscribe=true&" + queryString;
+    sub.ws = new WebSocket(uri);
+    var $ws = $(sub.ws);
+    
     $ws.bind('open', function() {
-      console.log("connected", query);
+      console.log("Socket opened", sub.query);
+    });
+
+    $ws.bind('close', function(e) {
+      console.log("Socket closed", sub.query);
+      sub.ws = null;
     });
 
-    $ws.bind('close', function() {
-      console.log("closed", query);
+    $ws.bind('error', function(e) {
+      console.log("Socket error", sub.query);
+      errorQueue.push(e);
+      ws.close();
     });
 
     $ws.bind('message', function(e) {
@@ -29,14 +80,68 @@ var subs = (function() {
       load5(t1, Date.now());
     });
 
-    $(window).unload(function() { ws.close; ws = null });
-    return ws;
+    return sub;
   }
 
+  // Add a subscription. Returns a subscription object. Subscriptions are
+  // opened immediately.
+  var subscribe = function(query, f) {
+    var sub = {
+      id: newId(),
+      query: query,
+      f: f,
+      ws: null
+    }
+    subs[sub.id] = sub;
+    open(sub);
+    return sub;
+  }
+
+  // Reconnect all inactive subs.
+  var converge = function() {
+    var closed = _.filter(subs, function(sub) {
+      return (sub.ws == null || sub.ws.readyState == WebSocket.CLOSED);
+    });
+    if (_.isEmpty(closed)) {
+      // Done here.
+      return;
+    }
+  
+    // Display reconnection notice
+    toastr.warning(_.size(closed) + " lost connections");
+
+    // Reopen
+    _.each(closed, function(sub) {
+      open(sub);
+    });
+  }
+
+  var notifyErrors = function() {
+    if (errorQueue.length == 0) {
+      return;
+    }
+    _.warning(errorQueue.length + " socket errors");
+    errorQueue.length = 0;
+    converge();
+  }
+
+  // Periodically notify of errors.
+  window.setInterval(notifyErrors, 100);
+
+  // Periodically converge.
+  setInterval(converge, 6000);
+
+  // When terminating, close all connections.
+  $(window).unload(unsubscribeAll);
+
   return {
     subscribe: subscribe,
+    unsubscribe: unsubscribe,
+    unsubscribeAll: unsubscribeAll,
+    converge: converge,
     load1:   load1,
     load5:   load5,
+    subs:    function() { return subs; },
     enable:  function() { active = true; console.log("Subs enabled."); },
     disable: function() { active = false; console.log("Subs disabled."); },
     toggle:  function() {

data/lib/riemann/dash/public/toastr.css

@@ -0,0 +1,174 @@
+.toast-title
+{
+  font-weight: bold;
+}
+
+.toast-message
+{
+  -ms-word-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.toast-message a,
+.toast-message label
+{
+  color: #FFF;
+}
+
+.toast-message a:hover
+{
+  color: #CCC;
+  text-decoration: none;
+}
+
+.toast-top-left
+{
+  left: 12px;
+  top: 12px;
+}
+
+.toast-bottom-right
+{
+  bottom: 12px;
+  right: 12px;
+}
+
+.toast-bottom-left
+{
+  bottom: 12px;
+  left: 12px;
+}
+
+#toast-container
+{
+  position: fixed;
+  z-index: 9999;
+}
+
+#toast-container > div
+{
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  -moz-box-shadow: 0 0 12px #999999;
+  -webkit-box-shadow: 0 0 12px #999999;
+  box-shadow: 0 0 12px #999999;
+  color: #FFFFFF;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+  margin: 0 0 6px;
+  opacity: 0.8;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+}
+
+.toast
+{
+  background-color: #030303;
+}
+
+.toast-success
+{
+  background-color: #51A351;
+}
+
+.toast-error
+{
+  background-color: #BD362F;
+}
+
+.toast-info
+{
+  background-color: #2F96B4;
+}
+
+.toast-warning
+{
+  background-color: #F89406;
+}
+
+.toast-top-right
+{
+  right: 12px;
+  top: 12px;
+}
+
+#toast-container > :hover
+{
+  -moz-box-shadow: 0 0 12px #000000;
+  -webkit-box-shadow: 0 0 12px #000000;
+  box-shadow: 0 0 12px #000000;
+  cursor: pointer;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+#toast-container > .toast-info
+{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
+}
+
+#toast-container > .toast-error
+{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+}
+
+#toast-container > .toast-success
+{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+}
+
+#toast-container > .toast-warning
+{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+}
+
+/*Responsive Design*/
+
+@media all and (max-width: 240px)
+{
+  #toast-container > div
+  {
+    padding: 8px 8px 8px 50px;
+    width: 108px;
+  }
+}
+
+@media all and (min-width: 241px) and (max-width: 320px)
+{
+  #toast-container > div
+  {
+    padding: 8px 8px 8px 50px;
+    width: 128px;
+  }
+}
+
+@media all and (min-width: 321px) and (max-width: 480px)
+{
+  #toast-container > div
+  {
+    padding: 8px 8px 8px 50px;
+    width: 192px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 768px)
+{
+  #toast-container > div
+  {
+    padding: 15px 15px 15px 50px;
+    width: 300px;
+  }
+}
+
+@media all and (min-width: 769px)
+{
+  #toast-container > div
+  {
+    padding: 15px 15px 15px 50px;
+    width: 300px;
+  }
+}

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

@@ -0,0 +1,207 @@
+// By: Hans Fjällemark and John Papa
+// https://github.com/CodeSeven/toastr
+// 
+// Modified to support css styling instead of inline styling
+// Inspired by https://github.com/Srirangan/notifer.js/
+
+; (function (define) {
+    define(['jquery'], function ($) {
+        var toastr = (function () {
+            var
+                defaults = {
+                    tapToDismiss: true,
+                    toastClass: 'toast',
+                    containerId: 'toast-container',
+                    debug: false,
+                    fadeIn: 300,
+                    fadeOut: 1000,
+                    extendedTimeOut: 1000,
+                    iconClasses: {
+                        error: 'toast-error',
+                        info: 'toast-info',
+                        success: 'toast-success',
+                        warning: 'toast-warning'
+                    },
+                    iconClass: 'toast-info',
+                    positionClass: 'toast-top-right',
+                    timeOut: 5000, // Set timeOut to 0 to make it sticky
+                    titleClass: 'toast-title',
+                    messageClass: 'toast-message'
+                },
+
+                error = function (message, title, optionsOverride) {
+                    return notify({
+                        iconClass: getOptions().iconClasses.error,
+                        message: message,
+                        optionsOverride: optionsOverride,
+                        title: title
+                    });
+                },
+
+                getContainer = function (options) {
+                    var $container = $('#' + options.containerId);
+                    if ($container.length) {
+                        return $container;
+                    }
+                    $container = $('<div/>')
+                        .attr('id', options.containerId)
+                        .addClass(options.positionClass);
+                    $container.appendTo($('body'));
+                    return $container;
+                },
+
+                getOptions = function () {
+                    return $.extend({}, defaults, toastr.options);
+                },
+
+                info = function (message, title, optionsOverride) {
+                    return notify({
+                        iconClass: getOptions().iconClasses.info,
+                        message: message,
+                        optionsOverride: optionsOverride,
+                        title: title
+                    });
+                },
+
+                notify = function (map) {
+                    var
+                        options = getOptions(),
+                        iconClass = map.iconClass || options.iconClass;
+
+                    if (typeof (map.optionsOverride) !== 'undefined') {
+                        options = $.extend(options, map.optionsOverride);
+                        iconClass = map.optionsOverride.iconClass || iconClass;
+                    }
+
+                    var
+                        intervalId = null,
+                        $container = getContainer(options),
+                        $toastElement = $('<div/>'),
+                        $titleElement = $('<div/>'),
+                        $messageElement = $('<div/>'),
+                        response = { options: options, map: map };
+
+                    if (map.iconClass) {
+                        $toastElement.addClass(options.toastClass).addClass(iconClass);
+                    }
+
+                    if (map.title) {
+                        $titleElement.append(map.title).addClass(options.titleClass);
+                        $toastElement.append($titleElement);
+                    }
+
+                    if (map.message) {
+                        $messageElement.append(map.message).addClass(options.messageClass);
+                        $toastElement.append($messageElement);
+                    }
+
+                    var fadeAway = function () {
+                        if ($(':focus', $toastElement).length > 0) {
+                            return;
+                        }
+                        var fade = function (callback) {
+                            return $toastElement.fadeOut(options.fadeOut, callback);
+                        };
+                        var removeToast = function () {
+                            if ($toastElement.is(':visible')) {
+                                return;
+                            }
+                            $toastElement.remove();
+                            if ($container.children().length === 0) {
+                                $container.remove();
+                            }
+                        };
+                        fade(removeToast);
+                    };
+                    var delayedFadeAway = function () {
+                        if (options.timeOut > 0 || options.extendedTimeOut > 0) {
+                            intervalId = setTimeout(fadeAway, options.extendedTimeOut);
+                        }
+                    };
+                    var stickAround = function () {
+                        clearTimeout(intervalId);
+                        $toastElement.stop(true, true).fadeIn(options.fadeIn);
+                    };
+                    $toastElement.hide();
+                    $container.prepend($toastElement);
+                    $toastElement.fadeIn(options.fadeIn);
+                    if (options.timeOut > 0) {
+                        intervalId = setTimeout(fadeAway, options.timeOut);
+                    }
+
+                    $toastElement.hover(stickAround, delayedFadeAway);
+                    if (!options.onclick && options.tapToDismiss) {
+                        $toastElement.click(fadeAway);
+                    }
+
+                    if (options.onclick) {
+                        $toastElement.click(function () {
+                            options.onclick() && fadeAway();
+                        });
+                    }
+
+                    if (options.debug && console) {
+                        console.log(response);
+                    }
+                    return $toastElement;
+                },
+
+                success = function (message, title, optionsOverride) {
+                    return notify({
+                        iconClass: getOptions().iconClasses.success,
+                        message: message,
+                        optionsOverride: optionsOverride,
+                        title: title
+                    });
+                },
+
+                warning = function (message, title, optionsOverride) {
+                    return notify({
+                        iconClass: getOptions().iconClasses.warning,
+                        message: message,
+                        optionsOverride: optionsOverride,
+                        title: title
+                    });
+                },
+
+                clear = function ($toastElement) {
+                    var options = getOptions();
+                    var $container = $('#' + options.containerId);
+                    if ($toastElement && $(':focus', $toastElement).length === 0) {
+                        var removeToast = function () {
+                            if ($toastElement.is(':visible')) {
+                                return;
+                            }
+                            $toastElement.remove();
+                            if ($container.children().length === 0) {
+                                $container.remove();
+                            }
+                        };
+                        $toastElement.fadeOut(options.fadeOut, removeToast);
+                        return;
+                    }
+                    if ($container.length) {
+                        $container.fadeOut(options.fadeOut, function () {
+                            $container.remove();
+                        });
+                    }
+                };
+            return {
+                clear: clear,
+                error: error,
+                info: info,
+                options: {},
+                success: success,
+                version: '1.1.2',
+                warning: warning
+            };
+        })();
+        return toastr;
+    });
+}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
+    if (typeof module !== 'undefined' && module.exports) { //Node
+        module.exports = factory(require(deps[0]));
+    } else {
+        window['toastr'] = factory(window['jQuery']);
+    }
+}));