fnordmetric 1.0.1 → 1.2.0

data/web/js/fnordmetric.dashboard_view.js

@@ -80,7 +80,7 @@ FnordMetric.views.dashboardView = (function(dashboard_name){
     };
 
     function announce(evt){
-      if((evt.class == "widget_response") || (evt.class == "widget_push")){
+      if((evt.type == "widget_response") || (evt.type == "widget_push")){
         for(wkey in widget_objs){
           if(widget_objs[wkey].announce){ 
             widget_objs[wkey].announce(evt)

data/web/js/fnordmetric.gauge_explorer.js

@@ -0,0 +1,173 @@
+FnordMetric.views.gaugeExplorer = (function(){
+
+  var elem, widget, gauge_list, widget_inst;
+  var start_timestamp, end_timestamp, time_range;
+  var currentGauge;
+  var autoupdate_timer, autodiscover_timer;
+
+  var time_range = 3600;
+  var default_time_ranges = [
+    ["5m", 300],
+    ["15m", 900],
+    ["30m", 1800],
+    ["1h", 3600],
+    ["2h", 3600 * 2],
+    ["6h", 3600 * 6],
+    ["12h", 3600 * 12],
+    ["24h", 3600 * 24],
+    ["48h", 3600 * 48]
+  ];
+
+  function load(_elem){
+    elem = _elem;
+
+    elem.html('<div class="navbar"></div><div class="ge_controlpanel">' +
+       '<label>Select a Gauge</label><select class="ge_gauge_picker">' + 
+       '<option selected=selected>Please select a gauge...</option></select>' +
+     '<div class="ge_meta">Type to autocomplete...</div>' +
+     '</div><div class="ge_controlpanel" style="border-right:none;">' +
+       '<label>Select the Timerange</label><a class="button datepicker_sa"><div class="date" style="width:300px;">&nbsp;</div>' +
+       '<i class="icon-calendar"></i></a>' +
+     '<div class="ge_timerange_links ge_meta">Recent Data: </div></div>' +
+     '<div style="clear:both;" class="widget_viewport"><div class="headbar"><h2>Please select a gauge...</h2></div><i class="ge_empty">Please select a gauge...</i></div>');
+
+    FnordMetric.ui.navbar($('.navbar', elem), {
+      breadcrumb: [
+        ["Gauge Explorer", "#gauge_explorer"],
+      ],
+      buttons: [
+        ["<i class='icon-refresh'></i>Refresh", function(){ load(elem); }]
+      ]
+    });
+
+    $(default_time_ranges).each(function(i, tr){
+      $('.ge_timerange_links', elem).append(
+        $('<a>')
+          .attr('href', '#')
+          .attr('data-timerange', tr[1])
+          .click(function(){
+            time_range = parseInt($(this).attr('data-timerange'), 10);
+            autoupdate();
+            return false; 
+          })
+          .html(tr[0]));
+    });
+
+    autoupdate();
+    render();
+    requestGaugeInfoAsync();
+
+    autodiscover_timer = window.setInterval(requestGaugeInfoAsync, 5000);
+    autoupdate_timer = window.setInterval(autoupdate, 1000);
+  };
+
+  function autoupdate() {
+    end_timestamp = ((new Date()).getTime() / 1000) + 60;
+    start_timestamp = end_timestamp - time_range;
+
+    if (widget)
+      widget.set_timerange(start_timestamp, end_timestamp);
+
+    $(".datepicker_sa .date", elem).html(
+      FnordMetric.util.dateFormat(start_timestamp) +
+      '&nbsp;&dash;&nbsp;' +
+      FnordMetric.util.dateFormat(end_timestamp)
+    )
+  }
+
+  function render() {
+    if (!currentGauge) return;
+
+    $(".widget_viewport", elem).html('');
+    widget = FnordMetric.widgets.timeseriesWidget();
+
+    var gauges = [currentGauge.key];
+    var series = [{
+      "color": "#4572a7",
+      "data": [{x:0, y:0}],
+      name: currentGauge.key,
+      title: currentGauge.title
+    }];
+
+    var wheight = FnordMetric.get_conf().gauge_explorer_widget_height;
+
+    if (!wheight)
+      wheight = window.innerHeight - 300;
+
+    widget_inst = widget.render({
+      elem: $(".widget_viewport", elem),
+      title: currentGauge.title,
+      async_chart: true,
+      start_timestamp: start_timestamp,
+      end_timestamp: end_timestamp,
+      include_current: true,
+      width: 100,
+      height: wheight,
+      gauges: gauges,
+      series: series,
+      default_cardinal: false,
+      default_style: "line",
+      no_update_range: true,
+      no_datepicker: true,
+      widget_key: "gauge_explorer"
+    });
+  }
+
+  function resize(_width, _height){
+    render();
+  };
+
+  function announce(evt){
+    if (evt.type == "widget_response" && widget)
+      widget.announce(evt);
+
+    if (evt.type == "gauge_list_response"){
+      $('.ge_gauge_picker', elem).html();
+      gauge_list = {};
+      var changed = false;
+
+      $(evt.gauges).each(function(n, gauge){
+        if (typeof gauge_list[gauge.key] == 'undefined') {
+          var gauge_title = gauge.title + ' [' + gauge.key + ']';
+
+          gauge_list[gauge.key] = {
+            "key": gauge.key, 
+            "title": gauge.title
+          };
+
+          $('.ge_gauge_picker', elem).append(
+            '<option value=' + gauge.key + '>' + gauge_title + '</option>');
+
+          changed = true;
+        }
+      });
+
+      if (changed || evt.gauges.length == 0)
+        $('.ge_gauge_picker', elem)
+          .bind('value_changed', function(){
+            currentGauge = gauge_list[$(this).val()];
+            render();
+          })
+          .combobox();
+    }
+  }
+
+  function requestGaugeInfoAsync() {
+    FnordMetric.publish({
+      "type": "gauge_list_request"
+    });
+  }
+
+  function close(){
+    window.clearInterval(autoupdate_timer);
+    window.clearInterval(autodiscover_timer);
+  };
+
+  return {
+    load: load,
+    resize: resize,
+    announce: announce,
+    close: close
+  };
+
+});

data/web/js/fnordmetric.js

@@ -1,8 +1,10 @@
-var FnordMetric = (function(){
+var FnordMetric = (function(pre_init){
 
   var canvasElem = false;
   var currentView = false;
   var currentNamespace = false;
+  var ws_addr = null;
+  var js_api = false;
   var gauges = {};
   var socket, conf;
 
@@ -26,7 +28,7 @@ var FnordMetric = (function(){
 
     return ul;
   }
-  
+
   function renderSidebar(){
     var prev_active = false;
 
@@ -37,18 +39,23 @@ var FnordMetric = (function(){
     $('#sidebar')
       .html('');
 
-    /*if(!conf.hide_overview){
-      renderSidebarGroup('Overview')
+    var sidebar_overview;
+
+    if (!conf.hide_active_users || !conf.hide_gauge_explorer)
+      sidebar_overview = renderSidebarGroup('Overview');
+
+    if (!conf.hide_gauge_explorer) {
+      sidebar_overview
         .append($('<li class="overview">')
-          .append('<span class="picto piechart">')
-          .append($('<a href="#" class="title">').html('App Overview')));
-    }*/
+        .append($('<a href="#" class="title">').html('<i class="icon-bar-chart"></i> Gauge Explorer'))
+        .click(function(){ renderGaugeExplorer(); }));
+    }
 
-    if(!conf.hide_active_users){
-      renderSidebarGroup('Overview')
+    if (!conf.hide_active_users) {
+      sidebar_overview
         .append($('<li class="overview">')
-          .append($('<a href="#" class="title">').html('Active Users'))
-          .click(function(){ renderSessionView(); }));
+        .append($('<a href="#" class="title">').html('<i class="icon icon-group"></i> Active Users'))
+        .click(function(){ renderSessionView(); }));
     }
 
     for(gkey in gauges){
@@ -61,7 +68,7 @@ var FnordMetric = (function(){
       ul.append($('<li class="gauge">')
         .attr('data-token', gkey)
         .attr('data-view', gauges[gkey].view_type)
-        .append('<i class="icon-folder-close">')
+        .append('<i class="icon-arrow-right">')
         .append($('<a href="#" class="title">').html(gauges[gkey].title)));
     }
 
@@ -101,10 +108,10 @@ var FnordMetric = (function(){
       renderSidebar();
 
       if(!currentView && (window.location.hash.length < 2)){
-        sidebarClick.apply($('#sidebar li:first'));
-      } else if(!navigatedViaHash){
-        navigateViaHash();
+        window.location.hash = "gauge_explorer";
       }
+
+      navigateViaHash();
     }
   }
 
@@ -113,6 +120,11 @@ var FnordMetric = (function(){
     loadView(FnordMetric.views.sessionView());
   }
 
+  function renderGaugeExplorer(){
+    window.location.hash = 'gauge_explorer';
+    loadView(FnordMetric.views.gaugeExplorer());
+  }
+
   function renderOverviewView(){
     loadView(FnordMetric.views.overviewView());
   }
@@ -127,10 +139,13 @@ var FnordMetric = (function(){
   };
 
   function resizeView(){
-    var viewport_width = window.innerWidth - 220;
-    if(viewport_width < 780){ viewport_width=780; }
-    $('#viewport').width(viewport_width);
-    $('.navbar').width(viewport_width);
+    if (!conf.no_resize_viewport) {
+      var viewport_width = window.innerWidth - 220;
+      if(viewport_width < 780){ viewport_width=780; }
+      $('#viewport').width(viewport_width);
+      $('.navbar').width(viewport_width);
+    }
+
     FnordMetric.ui.resizable('.viewport_inner');
     if(currentView){
       currentView.resize(
@@ -144,11 +159,16 @@ var FnordMetric = (function(){
     $(".resize_listener").trigger('fm_resize');
   };
 
-
   function init(_conf){
     conf = _conf;
     this.currentNamespace = _conf.token;
 
+    if (conf.address) {
+      this.ws_addr = "ws://" + conf.address + '/stream';
+    } else {
+      this.ws_addr = "ws://" + document.location.host + '/stream';
+    }
+
     if(conf.title){ $('title').html(conf.title); }
 
     canvasElem = $("<div class='viewport_inner'>");
@@ -161,15 +181,23 @@ var FnordMetric = (function(){
     connect();
 
     $('#app').html(_wrap_elem);
-    $(window).resize(resizeView);    
+    $(document).ready(renderSidebar);
+    $(window).resize(resizeView);
     resizeView();
   };
 
   function connect(){
-    socket = new WebSocket("ws://" + document.location.host + '/stream');
-    socket.onmessage = socketMessage;
-    socket.onclose = socketClose;
-    socket.onopen = socketOpen;
+    socket = new WebSocket(FnordMetric.ws_addr);
+
+    if (js_api == false) {
+      socket.onmessage = socketMessage;
+      socket.onclose = socketClose;
+      socket.onopen = socketOpen;
+    } else {
+      socket.onmessage = js_api.socketMessage;
+      socket.onclose = js_api.socketClose;
+      socket.onopen = js_api.socketOpen;
+    }
   }
 
   function publish(obj){
@@ -190,13 +218,16 @@ var FnordMetric = (function(){
   }
 
   function socketOpen(){
-    console.log("connected...");
-    publish({"type": "discover_request"});
-    $('.flash_msg_over').fadeOut(function(){ $(this).remove(); }); 
+    console.log("[FnordMetric] connected...");
+
+    if (!conf.no_discovery)
+      publish({"type": "discover_request"});
+
+    $('.flash_msg_over').fadeOut(function(){ $(this).remove(); });
   }
 
   function socketClose(){
-    console.log("socket closed"); 
+    console.log("[FnordMetric] socket closed"); 
 
     if($('.flash_msg_over').length == 0){
       $(viewport)
@@ -211,7 +242,7 @@ var FnordMetric = (function(){
       }, 20);
     }
 
-    window.setTimeout(connect, 1000); 
+    window.setTimeout(connect, 1000);
   }
 
   function navigateViaHash(){
@@ -221,6 +252,9 @@ var FnordMetric = (function(){
         elem = $('#sidebar li.gauge[data-token="'+window.location.hash.slice(11)+'"]');
       } else if (!!window.location.hash.match(/^#gauge\/[a-zA-Z_0-9-]+$/)){
         elem = $('#sidebar li.gauge[data-token="'+window.location.hash.slice(7)+'"]');
+      } else if(window.location.hash == "#gauge_explorer") {
+        navigatedViaHash = true;
+        renderGaugeExplorer();
       } else if(window.location.hash == "#active_users") {
         navigatedViaHash = true;
         renderSessionView();
@@ -233,23 +267,49 @@ var FnordMetric = (function(){
     }
   }
 
+  var setup = function(opts){
+    if (typeof $ == 'undefined') {
+      console.log("error: FnordMetric requires jQuery 1.6.2+");
+      return;
+    }
+
+    FnordMetric.currentNamespace = opts.namespace;
+    FnordMetric.ws_addr = "ws://" + opts.address + "/stream";
+
+    $(document).ready(function(){
+      js_api = FnordMetric.js_api;
+      connect();
+    });
+  }
+
+  var get_conf = function(){
+    return conf;
+  }
+
   return {
     renderDashboard: renderDashboard,
     renderGauge: renderGauge,
     renderSessionView: renderSessionView,
     renderOverviewView: renderOverviewView,
+    renderGaugeExplorer: renderGaugeExplorer,
     resizeView: resizeView,
+    loadView: loadView,
     init: init,
     publish: publish,
+    setup: setup,
     p: '',
     socket: socket,
-    currentNamespace: null,
+    currentNamespace: currentNamespace,
+    ws_addr: ws_addr,
     currentWidgetUID: 23,
     ui: {},
     views: {},
     widgets: {},
     util: {},
-    gauges: gauges
+    gauges: gauges,
+    get_conf: get_conf,
+    rickshaw: pre_init.rickshaw,
+    util: pre_init.util
   };
 
-})();
+})(FnordMetric);

data/web/js/fnordmetric.numbers_widget.js

@@ -15,19 +15,15 @@ FnordMetric.widgets.numbersWidget = function(){
     });
 
     if(!opts.series_titles){
-      opts.series_titles = {};
+      opts.series_titles = opts.series;
     }
 
     for(k in opts.series){
 
-      if (!opts.series_titles[opts.series[k]]){
-        opts.series_titles[opts.series[k]] = opts.series[k];
-      }
-
       var container = $('<div></div>')
         .addClass('numbers_container')
         .attr('rel', opts.series[k])
-        .append($('<div class="title">').html(opts.series_titles[opts.series[k]]));
+        .append($('<div class="title">').html(opts.series_titles[k]));
 
       opts.elem.append(container);
     }
@@ -53,7 +49,7 @@ FnordMetric.widgets.numbersWidget = function(){
     $('.numbers_container', opts.elem).each(function(i, e){
       var num_numbers = $('.number', e).length;
       if(num_numbers > max_per_row){ num_numbers = max_per_row; }
-      $(e).css('width', (num_numbers * 95)+'px');
+      $(e).css('width', (num_numbers * 90)+'px');
     });
   }
 
@@ -62,7 +58,7 @@ FnordMetric.widgets.numbersWidget = function(){
       FnordMetric.publish({
         "namespace": FnordMetric.currentNamespace,
         "type": "widget_request",
-        "klass": "NumbersWidget",
+        "klass": "generic",
         "channel": opts.channel,
         "cmd": "values_for",
         "gauge": opts.series[k],
@@ -86,17 +82,22 @@ FnordMetric.widgets.numbersWidget = function(){
           .attr('rel', vkey)
           .append($('<span class="desc">').html(vdesc))
           .append($('<span class="value">').html(0))
+
+        if (opts.series_units[series]) {
+          velem.attr("data-unit", opts.series_units[series]);
+        }
+
         celem.append(velem);
       }
 
       if(!!opts.dont_animate){
-        velem.attr('data', values[vkey].value) 
+        velem.attr('data', values[vkey].value)
         $('.value', velem).html(FnordMetric.util.formatGaugeValue(vkey, values[vkey].value));
       } else {
-        velem.attr('data', values[vkey].value)      
+        velem.attr('data', values[vkey].value)
       }
     }
-    
+
     resize();
 
     if(!opts.dont_animate){
@@ -106,8 +107,8 @@ FnordMetric.widgets.numbersWidget = function(){
 
   function announce(ev){
     if(ev.widget_key == opts.widget_key){
-      if((ev.class == "widget_response") && (ev.cmd == "values_for")){
-        renderValues(ev.series, ev.values)
+      if((ev.type == "widget_response") && (ev.cmd == "values_for")){
+        renderValues(ev.gauge, ev.values)
       }
     }
   }
@@ -118,4 +119,4 @@ FnordMetric.widgets.numbersWidget = function(){
     announce: announce
   };
 
-};
+};