johnf-fnordmetric 1.2.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.type == "widget_response") || (evt.type == "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_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;
+    gauge_list = {};
+
+    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();
+      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.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
+  };
+}