fnordmetric 0.7.5 → 0.9.7

data/web/js/fnordmetric.dashboard_view.js

@@ -0,0 +1,99 @@
+FnordMetric.views.dashboardView = (function(dashboard_name){
+    var widgets = [];
+    var widget_objs = {};
+    var viewport = null;
+
+    function load(_viewport){
+      viewport = _viewport.html('');
+      viewport.append('<div class="navbar"></div>');
+      viewport.append('<div class="dashboard_view"></div>');
+
+      FnordMetric.ui.navbar($('.navbar', viewport), {
+        breadcrumb: [ 
+          ["Dashboard", "/group/fnord"],
+          [dashboard_name, "/dashboard/"+dashboard_name]
+        ],
+        buttons: [
+          ["<i class='icon-refresh'></i>Refresh", function(){ load(viewport); }]
+        ]
+      });
+
+      $.ajax({
+        url: FnordMetric.p + '/' + FnordMetric.currentNamespace+'/dashboard/'+dashboard_name,
+        success: function(resp, status){
+          var conf = JSON.parse(resp);
+          renderWidgets(conf.widgets);
+        }
+      });
+    };
+
+    function renderWidgets(_widgets){
+      for(wkey in _widgets){
+        var widget = _widgets[wkey];
+        widget["elem"] = $('<div class="widget"></div>');
+        widgets[wkey] = widget;
+        $('.dashboard_view', viewport).append(widget.elem);
+        resizeWidget(wkey);
+        renderWidget(wkey);
+      };
+      resize();
+    };
+
+    function renderWidget(wkey, _w){
+      var widget = widgets[wkey];
+      if(!widget["widget_key"]){ widget["widget_key"] = wkey; }
+      /* argh... */
+      if(widget.klass=='TimelineWidget'){ _w = FnordMetric.widgets.timeseriesWidget(); }
+      if(widget.klass=='NumbersWidget'){ _w = FnordMetric.widgets.numbersWidget(); }
+
+      if(widget.klass=='ToplistWidget'){ _w = FnordMetric.widgets.toplistWidget(); }
+
+      if(widget.klass=='BarsWidget'){ _w = FnordMetric.widgets.barsWidget(); }
+      if(widget.klass=='PieWidget'){ _w = FnordMetric.widgets.pieWidget(); }
+      if(widget.klass=="HtmlWidget") { _w = FnordMetric.widgets.htmlWidget(); }
+
+      if(_w){ 
+        _w.render(widget);
+        widget_objs[wkey] = _w;
+      }
+    }
+
+    function resizeWidget(wkey){
+      var widget = widgets[wkey];
+      var wwperc = widgets[wkey].width;
+      if(!wwperc){ wwperc = 100; }
+      var wwidth = viewport.width() * (wwperc/100.0);
+      if(wwperc==100){
+        widgets[wkey].elem.addClass('full_width');
+      } else { wwidth -= 1; }
+      widget.elem.width(wwidth);
+    }
+
+    function resize(){
+      for(wkey in widgets){
+        resizeWidget(wkey);
+      };
+    };
+
+    function close(){
+      $('body').trigger('fm_dashboard_close');
+    };
+
+    function announce(evt){
+      if((evt.class == "widget_response") || (evt.class == "widget_push")){
+        for(wkey in widget_objs){
+          if(widget_objs[wkey].announce){ 
+            widget_objs[wkey].announce(evt)
+          }
+        }  
+      }
+    }
+
+    return {
+      load: load,
+      resize: resize,
+      announce: announce,
+      close: close
+    };
+
+  });

data/web/js/fnordmetric.gauge_view.js

@@ -0,0 +1,260 @@
+FnordMetric.views.gaugeView = (function(gauge_name){
+  var widgets = [];
+  var widget_objs = {};
+  var viewport = null;
+  var tabs = [];
+  var conf = {};
+  var tick;
+
+  var start_timestamp, end_timestamp;
+
+  function load(_viewport){
+    viewport = _viewport;
+    viewport.html('');
+    viewport.append('<div class="navbar"></div>');
+    viewport.append($('<div class="gauge_viewport"></div>'));
+
+    conf.title = gauge_name;
+    tick = FnordMetric.gauges[gauge_name].tick
+    ctick = Math.max(3600, tick);
+
+    FnordMetric.ui.navbar($('.navbar', viewport), {
+      breadcrumb: [ 
+        ["Fnord", "/group/fnord"],
+        [conf.title, "/gauge/"+gauge_name]
+      ],
+      buttons: [
+        ["<i class='icon-refresh'></i>Refresh", function(){ load(viewport); }]
+      ],
+      datepicker: true
+    });
+
+    var now = parseInt((new Date()).getTime() / 1000);
+
+    start_timestamp = atTick((now-(ctick*24)));
+    end_timestamp   = atTick(now);
+
+    updateDatepicker();
+    load_interval();
+  }
+
+  function atTick(t){
+    return (Math.ceil(t / ctick) * ctick);
+  }
+
+  function close(){
+
+  }
+
+  function resize(){
+
+  }
+
+  function updateDatepicker(){
+    $(".navbar .datepicker .date", viewport).html(
+      FnordMetric.util.dateFormat(start_timestamp) +
+      '&nbsp;&dash;&nbsp;' +
+      FnordMetric.util.dateFormat(end_timestamp)
+    ).parent().click(function(){
+      open_interval_modal();
+    });
+  }
+
+  function announce(evt){
+    if ((evt.gauge != gauge_name) ||
+       (evt.type != "render_response") ||
+       (!evt.payload)){ return true; }
+
+    if(evt.payload.html){
+      $('.gauge_viewport', viewport)
+        .html(evt.payload.html); 
+    }
+
+    if(evt.payload.exec){
+      eval(evt.payload.exec); 
+    }
+
+    FnordMetric.resizeView();
+  }
+
+  function interval_modal_done(modal){
+    var _sdate = $('.start_date', modal).val().match('([0-9]{2})\.([0-9]{2})\.([0-9]{4})')
+    var _stime = $('.start_time', modal).val().match('([0-9]{2}):([0-9]{2})')
+    var _edate = $('.end_date', modal).val().match('([0-9]{2})\.([0-9]{2})\.([0-9]{4})')
+    var _etime = $('.end_time', modal).val().match('([0-9]{2}):([0-9]{2})')
+
+    if (_sdate && _stime && _edate && _etime){
+      var sd = new Date();
+      var ed = new Date();
+      sd.setHours(parseInt(_stime[1]), parseInt(_stime[2]), 0);
+      sd.setFullYear(parseInt(_sdate[3]), parseInt(_sdate[2])-1, parseInt(_sdate[1]));
+      ed.setHours(parseInt(_etime[1]), parseInt(_etime[2]), 0);
+      ed.setFullYear(parseInt(_edate[3]), parseInt(_edate[2])-1, parseInt(_edate[1]));
+
+      if (sd && ed && (ed.getTime() > sd.getTime())) {
+        start_timestamp = parseInt(sd.getTime() / 1000);
+        end_timestamp   = parseInt(ed.getTime() / 1000);
+
+        load_interval();
+        FnordMetric.ui.close_modal('body');
+      }
+
+    }
+  }
+
+  function open_interval_modal(){
+    var modal = $('<div>');
+
+    var interval_list = $('<ul>');
+    var now = parseInt((new Date()).getTime() / 1000);
+
+    var enter_catcher = function(e){
+      if (e.which == 13) interval_modal_done(modal);
+    }
+
+    var offset_opener = function(e){
+      var now = parseInt((new Date()).getTime() / 1000);
+
+      if($(this).attr('data-offset-off')){
+        now -= eval($(this).attr('data-offset-off'));
+      }
+
+      var off = eval($(this).attr('data-offset'));
+
+      if (off > ctick) {
+        start_timestamp = atTick((now-(off)));
+        end_timestamp   = atTick(now);
+      } else {
+        start_timestamp = now-off;
+        end_timestamp   = now;
+      }
+
+      load_interval();
+      FnordMetric.ui.close_modal('body');
+    }
+
+    modal.append(
+      $('<div>')
+        .css({
+          background: '#f2f2f2',
+          borderBottom: "1px solid #ddd",
+          padding: '12px 20px 10px 20px'
+        })
+        .append('<a class="button dark" style="height:30px; float:right; margin:1px; line-height:30px;">OK</a>')
+        .append('<input class="input ropen start_date" style="width:100px;" placeholder="DD.MM.YYYY" />')
+        .append('<input class="input lopen start_time" style="width:50px;" placeholder="HH:MM" />')
+        .append('<span style="margin:0 15px; color:#999;">&mdash;</span>')
+        .append('<input class="input ropen end_date" style="width:100px;" placeholder="DD.MM.YYYY" />')
+        .append('<input type="text" class="input lopen end_time" style="width:50px;" placeholder="HH:MM" />')
+      ).append($('<div style="padding:15px 20px;" class="offset_links ui_fancylinks">'));
+
+    if (tick < 300){
+      $('.offset_links', modal)
+        .append('<b>Just now</b>')
+        .append('<a data-offset="5*60">Last 5 Minutes</a> ')
+        .append('<a data-offset="10*60">Last 10 Minutes</a> ')
+        .append('<a data-offset="15*60">Last 15 Minutes</a> ')
+        .append('<a data-offset="30*60">Last 30 Minutes</a> ')
+        .append('<a data-offset="45*60">Last 45 Minutes</a><br /><br />');
+    }
+
+    if (tick < 4000){
+      $('.offset_links', modal)
+      .append('<b>Hourly</b>')
+      .append('<a data-offset="3600">Last Hour</a> ')
+      .append('<a data-offset="3600*3">Last 3 Hours</a> ')
+      .append('<a data-offset="3600*6">Last 6 Hours</a> ')
+      .append('<a data-offset="3600*12">Last 12 Hours</a> ')
+      .append('<a data-offset="3600*18">Last 18 Hours</a><br /><br />');
+    }
+
+    $('.offset_links', modal)
+      .append('<b>Daily</b>')
+      .append('<a data-offset="3600*24">Today</a>, ')
+      .append('<a data-offset="3600*24" data-offset-off="3600*24">Yesterday</a> ')
+      .append('<a data-offset="3600*3*24">Last 3 Days</a> ')
+      .append('<a data-offset="3600*7*24">Last 7 Days</a> ')
+      .append('<a data-offset="3600*7*24*14">Last 14 Days</a> ')
+      .append('<a data-offset="3600*7*24*30">Last 30 Days</a> ');
+
+    $('.offset_links a', modal)
+      .click(offset_opener);
+
+    $.mask.definitions['~']='[0-5]';
+    $.mask.definitions['%']='[0-2]';
+    $.mask.definitions['$']='[0-2]';
+    $.mask.definitions['#']='[0-3]';
+
+    $('.button', modal)
+      .click(function(){ interval_modal_done(modal) });
+
+    $('.start_date', modal)
+      .mask("#9.$9.2099")
+      .keypress(enter_catcher)
+      .val(FnordMetric.util.dateFormat(start_timestamp).split(" ")[0]);
+
+    $('.start_time', modal)
+      .mask("%9:~9")
+      .keypress(enter_catcher)
+      .val(FnordMetric.util.dateFormat(start_timestamp).split(" ")[1]);
+
+    $('.end_date', modal)
+      .mask("#9.$9.2099")
+      .keypress(enter_catcher)
+      .val(FnordMetric.util.dateFormat(end_timestamp).split(" ")[0]);
+
+    $('.end_time', modal)
+      .mask("%9:~9")
+      .keypress(enter_catcher)
+      .val(FnordMetric.util.dateFormat(end_timestamp).split(" ")[1]);
+
+
+    /*for(n=0; n < 10; n++){
+      var interval = now;
+      now -= 3600;
+      interval += "-" + now;
+      interval_list.append(
+        $('<li>')
+          .html($('<a href="#">')
+          .html(interval)
+          .attr('data', interval)
+          .click(function(){
+            select_interval($(this).attr('data'))
+          }))
+      );
+    }*/
+
+    FnordMetric.ui.modal({
+      height: 280,
+      max_width: 570,
+      content: modal
+    });
+  }
+
+  function select_interval(inter){
+    start_timestamp = parseInt(inter.split("-")[0]);
+    end_timestamp = parseInt(inter.split("-")[1]);
+    updateDatepicker();
+    load_interval();
+    FnordMetric.ui.close_modal(this);
+  }
+
+  function load_interval(){
+    $('.gauge_viewport', viewport)
+      .html("");
+
+    FnordMetric.publish({
+      "gauge": gauge_name,
+      "type": "render_request",
+      "interval": start_timestamp + "-" + end_timestamp
+    })
+  }
+
+  return {
+    load: load,
+    resize: resize,
+    announce: announce,
+    close: close
+  };
+
+});

data/web/js/fnordmetric.html_widget.js

@@ -0,0 +1,21 @@
+FnordMetric.widgets.htmlWidget = function(){
+  function render(opts){
+
+    opts.elem.append(
+      $('<div class="headbar small"></div>').html(opts.title)
+    ).css({
+      'marginBottom': 20,
+      'overflow': 'hidden'
+    });
+
+    var container = $('<div></div>')
+      .addClass('html_container')
+      .html(opts.html);
+
+    opts.elem.append(container);
+  }
+
+  return {
+    render: render
+  };
+}

data/web/js/fnordmetric.js

@@ -0,0 +1,255 @@
+var FnordMetric = (function(){
+
+  var canvasElem = false;
+  var currentView = false;
+  var currentNamespace = false;
+  var gauges = {};
+  var socket, conf;
+
+  var navigatedViaHash = false;
+
+  function renderDashboard(_dash){
+    loadView(FnordMetric.views.dashboardView(_dash));
+  }
+
+  function renderGauge(_gauge){
+    loadView(FnordMetric.views.gaugeView(_gauge));
+  }
+
+  function renderSidebarGroup(grname){
+    var ul = $("<ul>")
+      .attr('data-group', grname);
+
+    $('#sidebar')
+      .append('<div class="ul_head">' + grname + '</div>')
+      .append(ul);
+
+    return ul;
+  }
+  
+  function renderSidebar(){
+    var prev_active = false;
+
+    if($('#sidebar li.active').length > 0){
+      prev_active = $('#sidebar li.active:first').attr('data-token');
+    }
+
+    $('#sidebar')
+      .html('');
+
+    /*if(!conf.hide_overview){
+      renderSidebarGroup('Overview')
+        .append($('<li class="overview">')
+          .append('<span class="picto piechart">')
+          .append($('<a href="#" class="title">').html('App Overview')));
+    }*/
+
+    if(!conf.hide_active_users){
+      renderSidebarGroup('Overview')
+        .append($('<li class="overview">')
+          .append($('<a href="#" class="title">').html('Active Users'))
+          .click(function(){ renderSessionView(); }));
+    }
+
+    for(gkey in gauges){
+      if(!gauges[gkey].group){ gauges[gkey].group = 'Gauges'; }
+      if(!gauges[gkey].title){ gauges[gkey].title = gkey; }
+
+      var ul = $('#sidebar ul[data-group="' + gauges[gkey].group + '"]');
+      if(ul.length == 0){ ul = renderSidebarGroup(gauges[gkey].group); }
+
+      ul.append($('<li class="gauge">')
+        .attr('data-token', gkey)
+        .attr('data-view', gauges[gkey].view_type)
+        .append('<i class="icon-folder-close">')
+        .append($('<a href="#" class="title">').html(gauges[gkey].title)));
+    }
+
+    $('#sidebar li').click(sidebarClick);
+
+    if(prev_active){
+      $('#sidebar li[data-token="'+prev_active+'"]').addClass('active');
+    }
+  }
+
+  function sidebarClick(){
+    $('#sidebar li').removeClass('active');
+    $(this).addClass('active');
+
+    if($(this).attr('data-view') == "dashboard"){
+      FnordMetric.renderDashboard($(this).attr('data-token'));
+      window.location.hash = 'dashboard/' + $(this).attr('data-token');  
+    } else if($(this).attr('data-view') == "gauge"){ 
+      FnordMetric.renderGauge($(this).attr('data-token'));
+      window.location.hash = 'gauge/' + $(this).attr('data-token');
+    }
+
+    $(this).addClass('active');
+
+    return false;
+  }
+
+  function addGauge(msg){
+    if(!gauges[msg.gauge_key]){
+      gauges[msg.gauge_key] = {
+        "view_type": msg.view,
+        "title": msg.title,
+        "tick": msg.tick,
+        "group": msg.group
+      };
+
+      renderSidebar();
+
+      if(!currentView && (window.location.hash.length < 2)){
+        sidebarClick.apply($('#sidebar li:first'));
+      } else if(!navigatedViaHash){
+        navigateViaHash();
+      }
+    }
+  }
+
+  function renderSessionView(){
+    window.location.hash = 'active_users';
+    loadView(FnordMetric.views.sessionView());
+  }
+
+  function renderOverviewView(){
+    loadView(FnordMetric.views.overviewView());
+  }
+
+  function loadView(_view){
+    FnordMetric.ui.close_modal('body');
+    if(currentView){ currentView.close(); }
+    canvasElem.html('loading!');
+    currentView = _view;
+    currentView.load(canvasElem);
+    resizeView();
+  };
+
+  function resizeView(){
+    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(
+        canvasElem.innerWidth(),
+        canvasElem.innerHeight()
+      );  
+    }
+    $('.resize_full_height').height(window.innerHeight-40);
+    $('#viewport .viewport_inner').css('minHeight', window.innerHeight-2);
+    $('.resize_min_full_height').css('minHeight', window.innerHeight-2);
+    $(".resize_listener").trigger('fm_resize');
+  };
+
+
+  function init(_conf){
+    conf = _conf;
+    this.currentNamespace = _conf.token;
+
+    if(conf.title){ $('title').html(conf.title); }
+
+    canvasElem = $("<div class='viewport_inner'>");
+    canvasElem.addClass('clearfix');
+
+    var _wrap_elem = $("<div id='wrap'>")
+        .append($("<div id='sidebar'>"))
+        .append($("<div id='viewport'>").append(canvasElem));
+
+    connect();
+
+    $('#app').html(_wrap_elem);
+    $(window).resize(resizeView);    
+    resizeView();
+  };
+
+  function connect(){
+    socket = new WebSocket("ws://" + document.location.host + '/stream');
+    socket.onmessage = socketMessage;
+    socket.onclose = socketClose;
+    socket.onopen = socketOpen;
+  }
+
+  function publish(obj){
+    if(!obj.namespace){ 
+      obj.namespace = FnordMetric.currentNamespace; 
+    }
+    socket.send(JSON.stringify(obj));
+  }
+
+  function socketMessage(raw){
+    var evt = JSON.parse(raw.data);
+
+    if((evt.type == "discover_response")){
+      addGauge(evt);
+    } else {
+      if(currentView){ currentView.announce(evt); }
+    }
+  }
+
+  function socketOpen(){
+    console.log("connected...");
+    publish({"type": "discover_request"});
+    $('.flash_msg_over').fadeOut(function(){ $(this).remove(); }); 
+  }
+
+  function socketClose(){
+    console.log("socket closed"); 
+
+    if($('.flash_msg_over').length == 0){
+      $(viewport)
+        .append($("<div class='flash_msg_over'>")
+          .append($("<div class='inner'>")
+            .append('<h1>Oopsiedaisy, lost the connection...</h1>')
+            .append('<h2>Reconnecting to server...</h2>')
+            .append('<div class="loader_white">')));
+
+      window.setTimeout(function(){
+        $('.flash_msg_over').addClass('visible');  
+      }, 20);
+    }
+
+    window.setTimeout(connect, 1000); 
+  }
+
+  function navigateViaHash(){
+    if (window.location.hash){
+      var elem = null;
+      if (!!window.location.hash.match(/^#dashboard\/[a-zA-Z_0-9-]+$/)) {
+        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 == "#active_users") {
+        navigatedViaHash = true;
+        renderSessionView();
+      }
+
+      if (elem && (elem.length > 0)) {
+        navigatedViaHash = true;
+        elem.click();
+      }
+    }
+  }
+
+  return {
+    renderDashboard: renderDashboard,
+    renderGauge: renderGauge,
+    renderSessionView: renderSessionView,
+    renderOverviewView: renderOverviewView,
+    resizeView: resizeView,
+    init: init,
+    publish: publish,
+    p: '',
+    socket: socket,
+    currentNamespace: null,
+    currentWidgetUID: 23,
+    ui: {},
+    views: {},
+    widgets: {},
+    util: {},
+    gauges: gauges
+  };
+
+})();