fnordmetric 0.7.5 → 0.9.7

data/web/haml/app.haml

@@ -0,0 +1,38 @@
+!!!
+%html
+  %head
+    %title FnordMetric
+    %script{:src => "/vendor/jquery-1.6.2.min.js", :type => "text/javascript"}
+    %script{:src => "/vendor/jquery-ui.min.js", :type => "text/javascript"}
+    %script{:src => "/vendor/jquery.maskedinput.js", :type => "text/javascript"}
+    %script{:src => "/vendor/d3.v2.js", :type => "text/javascript"}
+    %script{:src => "/vendor/rickshaw.fnordmetric.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.util.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.ui.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.timeline_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.numbers_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.bars_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.pie_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.toplist_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.html_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.realtime_value_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.timeseries_widget.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.overview_view.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.gauge_view.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.dashboard_view.js", :type => "text/javascript"}
+    %script{:src => "/js/fnordmetric.session_view.js", :type => "text/javascript"}
+    %link{:href => "/vendor/rickshaw.css", :rel => "stylesheet", :type => "text/css"}
+    %link{:href => "/vendor/font-awesome/css/font-awesome.css", :rel => "stylesheet", :type => "text/css"}
+    %link{:href => "/fnordmetric.css", :rel => "stylesheet", :type => "text/css"}
+
+  %body
+    #app.clearfix(style="overflow:hidden;")
+
+    #preload
+      %img(src="/img/loader_white.gif")
+
+:javascript
+  $(document).ready(function(){
+    FnordMetric.init(#{current_namespace.to_json});
+  });

data/web/haml/distribution_gauge.haml

@@ -0,0 +1,118 @@
+.report_view
+
+  %ul.ui_numbers(style="float:right;")
+    %li
+      .val
+        %span.ui_value(data-value="#{@samples}")
+      .title Number of Samples
+    %li
+      .val
+        %span.ui_value(data-value="#{@values.mean}")
+      .title Total Value Mean
+    %li
+      .val
+        %span.ui_value(data-value="#{@values.median}")
+      .title Total Value Median
+    %li.twoline
+      .title Time Range
+      .val= (fancy_timerange(@interval) * " - ")
+
+
+  %h1= @opts[:title]
+  %h3 Numeric Distribution Gauge
+
+  %ul.ui_tabs.tabs
+    %li.active{"data-tab" => "Overview"}
+      %a{:href => "#"} Overview
+    / %li{"data-tab" => "Overview"}
+    /   %a{:href => "#"} Histograms
+    / %li{"data-tab" => "Export"}
+    /   %a{:href => "#"} Export
+
+
+  .headbar
+    %h2 Histogram: #{@opts[:title]}
+
+  .widget_histogram_bars
+  %br
+
+
+  .resizable.right.resize_min_full_height(data-width="40" style="border-left:1px solid #ddd;")
+    .headbar.small Standard Deviation
+
+  .resizable(data-width="60")
+
+    .clearfix
+      .headbar.small Value Distribution
+      .numbers_container.resizable.numbers_pad_bottom(data-width="50")
+        .number
+          %span.desc Mean (Avg.)
+          %span.value.ui_value{:"data-value" => @values.mean }
+        .number
+          %span.desc Minimum
+          %span.value.ui_value{:"data-value" => @values.min }
+        .number
+          %span.desc Maximum
+          %span.value.ui_value{:"data-value" => @values.max }
+        .number
+          %span.desc Median
+          %span.value.ui_value{:"data-value" => @values.median }
+        / .number
+        /   %span.desc Trend
+        /   %span.value
+        /     .ui_trend{:"data-trend" => (@mmm_timeseries_arr[0][-1][:avg].mean / (@mmm_timeseries_arr[-1][-1][:avg].mean - @mmm_timeseries_arr[0][-1][:avg].mean) rescue 0) }
+        .number
+          %span.desc Range
+          %span.value.ui_value{:"data-value" => @values.range }
+        .number
+          %span.desc Mode
+          %span.value.ui_value{:"data-value" => @values.mode }
+
+
+    .headbar
+      %h2 Mean, Min and Max over Time
+    .widget_mmm_timeseries
+
+
+:gaugejs
+
+  FnordMetric.ui.resizable('.report_view');
+  FnordMetric.util.format('.report_view');
+
+  FnordMetric.widgets.barsWidget().render({
+    title: "Histogram: Number of #{key_nouns.last}",
+    color: "#{FnordMetric::COLORS.last}",
+    elem: $('.widget_histogram_bars'),
+    height: 320,
+    no_headbar: true,
+    values: #{@histogram.json_histogram(@histogram_mode)}
+  });
+
+
+  FnordMetric.widgets.timeseriesWidget().render({
+    title: "#{key_nouns.last}",
+    elem: $('.widget_mmm_timeseries'),
+    height: 260,
+    no_headbar: true,
+    default_style: 'line',
+    series_resolutions: #{@zooms.to_json},
+    series: [      
+      { 
+        name: 'Max',
+        color: "#{FnordMetric::COLORS[-1]}",
+        data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:max]} }.to_json}
+      },
+      { 
+        name: 'Min',
+        color: "#{FnordMetric::COLORS[-1]}",
+        data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:min]} }.to_json}
+      },
+      { 
+        name: 'Mean',
+        color: "#{FnordMetric::COLORS[-2]}",
+        data: #{@mmm_timeseries_arr.map{|t,v| {:x=>t.to_i,:y=>v[:avg].average} }.to_json}
+      }
+    ]
+  });
+
+  

data/web/haml/timeseries_gauge.haml

@@ -0,0 +1,80 @@
+.report_view
+
+  %ul.ui_numbers(style="float:right;")
+    %li
+      .val
+        %span.ui_value(data-value="#{@total}")
+      .title Number of Samples
+    %li.twoline
+      .title Time Range
+      .val= (fancy_timerange(@interval) * " - ")
+
+  %h1= @opts[:title] || @opts[:key]
+  %h3 Numeric Timeseries Gauge
+
+  %ul.ui_tabs.tabs
+    %li.active{"data-tab" => "Overview"}
+      %a{:href => "#"} Overview
+    %li{"data-tab" => "Punchcards"}
+      %a{:href => "#"} Punchcards
+    / %li{"data-tab" => "Realtime"}
+    /   %a{:href => "#"} Realtime
+    / %li{"data-tab" => "Export"}
+    /   %a{:href => "#"} Export
+
+
+  .widget_timeseries
+
+  .resizable(data-width="65" style="border-right:1px solid #ddd;")
+    .headbar.small Series Values
+
+    %table(cellspacing="0")
+      %tr
+        %th
+        -@series.each do |series, sopts|
+          %th(style="padding-top:4px")
+            %span.swatch(style="background:#{sopts[:color]}; display:inline-block;")
+            %span= series
+
+      %tr
+        %td Total (<span class="ui_value" data-timerange="#{@interval.size}"></span>)
+        -@series.each do |series, sopts|
+          %td
+            .ui_value.large.left{:"data-value" => sopts[:timeseries].sum, :style => "min-width:70px;"}
+            .ui_trend.left{:style => "margin-left:5px", :"data-trend" =>  sopts[:timeseries].trend}
+
+      -FnordMetric::TICKS[tick, @interval.size].each do |zoom|
+        %tr
+          %td
+            .ui_value{:"data-timerange-offset" => zoom, :"data-offset" => -1}
+          -@series.each do |series, sopts|
+            %td
+              -srange = ((@interval.last-zoom)..@interval.last)
+              .ui_value.large.left{:"data-value" => sopts[:timeseries].sum(srange), :style => "width:70px;"}
+              .ui_trend.left{:style => "margin-left:5px", :"data-trend" => sopts[:timeseries].trend(srange)}
+
+
+
+  .resizable(data-width="35")
+    .headbar.small Series Weights
+
+
+
+:gaugejs
+
+  FnordMetric.ui.resizable('.report_view');
+  FnordMetric.util.updateNumbers('.report_view', 4);
+  FnordMetric.util.format('.report_view');
+
+  FnordMetric.widgets.timeseriesWidget().render({
+    title: "#{key_nouns.last}",
+    elem: $('.widget_timeseries'),
+    height: 420,
+    default_style: 'stack',
+    series_resolutions: #{@zooms.to_json},
+    timespan: #{@interval.size},
+    series: [#{@series.map{ |k,s| 
+      dat = s[:data].map{ |k,d| "data#{k}: #{d.to_json(&@calculate_proc)}" }
+      "{ name: #{k.to_json}, color: '#{s[:color]}', #{dat * ","} }" 
+    } * ","}]
+  });

data/web/haml/toplist_gauge.haml

@@ -0,0 +1,194 @@
+.report_view
+
+  %ul.ui_numbers(style="float:right;")
+    %li
+      .val
+        %span.ui_value(data-value="#{@toplist.total}")
+      .title Number of Samples
+    %li.twoline
+      .title Time Range
+      .val= (fancy_timerange(@interval) * " - ")
+
+  %h1= @opts[:title] || @opts[:key]
+  %h3 Toplist Gauge
+
+  %ul.ui_tabs.toplgauge_tabs
+    %li.active{"data-tab" => "Overview", :onclick=>"toplgaugeTabClick.apply(this);"}
+      %a{:href => "#"} Overview
+    %li{"data-tab" => "Trending", :onclick=>"toplgaugeTabClick.apply(this);"}
+      %a{:href => "#"} Trending
+    / %li{"data-tab" => "Compate"}
+    /   %a{:href => "#"} Compare
+    / %li{"data-tab" => "Export"}
+    /   %a{:href => "#"} Export
+
+
+
+  .ui_sidebar_toplist.resizable.resize_min_full_height(data-width="55")
+
+    .widget_toplist.toplgauge_tab.overview
+      .headbar
+        %h2 Top #{key_nouns.last}
+      .ui_toplist.clickable
+        .searchbar
+          %input(type="search" placeholder="Search..." style="width:95%; margin-top:1px; height:36px; line-height:36px;" onchange="toplgaugeSeach($(this).val());" onkeyup="toplgaugeSeach($(this).val());" onclick="toplgaugeSeach($(this).val());")
+
+        - @toplist.toplist(top_k).each_with_index do |(item, score), ind|
+          .toplist_item(onclick="toplgaugeSelectItem.apply(this); return false;" data-item="#{item}" style="#{ind > 49 ? 'display:none;' : nil}" class="#{ind > 49 ? nil : :initial}")
+            .title= item
+            .value
+              %span.ui_value{:"data-value" => score }
+            .percent
+              %span.ui_value{:"data-percent" => @toplist.percentage(item) }
+              %span.ui_trend{ :"data-trend" => @toplist.trend(item).round(1) }
+
+
+    .toplgauge_tab.trending(style="display:none;")
+      .headbar
+        %h2 Trending #{key_nouns.last}
+
+      .ui_toplist.clickable
+        - @toplist.trending(50).each do |item, trend|
+
+          .toplist_item(onclick="toplgaugeSelectItem.apply(this); return false;" data-item="#{item}")
+            .title= item
+            .value.large
+              %span.ui_value{:"data-value" => @toplist.value(item) }
+              = " / "
+              %span.ui_value{:"data-percent" => @toplist.percentage(item) }
+
+            .trend
+              %span.ui_trend(data-trend="#{trend.round(1)}")
+
+
+
+  .widget_keystats.resize_full_height.resizable(data-width="45")
+    .empty_state.resize_full_height
+      .headbar
+
+      %div(style="font-weight:bold; font-size:16px; color:#aaa; text-align:center; margin-top:50%;")
+        %i.icon.icon-arrow-left
+          Please select an item
+
+
+    .keystats(style="display:none;")
+      .widget_item_timeseries
+      .headbar.small
+
+      .numbers_container(style="width:auto; border-bottom:none;")
+        .title
+        .number.total
+          %span.desc Total
+          %span.value.ui_value
+        .number.percent
+          %span.desc Percent
+          %span.value.ui_value
+        .number.delta
+          %span.desc Delta
+          %span.value
+            .ui_trend
+        .number.rank
+          %span.desc Rank
+          %span.value
+
+
+:gaugejs
+
+  FnordMetric.util.updateNumbers('.report_view', 4);
+  FnordMetric.util.format('.report_view');
+
+  FnordMetric.ui.resizable('#viewport');
+
+
+:javascript
+
+  var toplist_gauge_timeseries = #{@toplist.timelines.to_json};
+  var toplist_gauge_ticks = #{@all_ticks.sort.to_json};
+
+  var toplist_gauge_numbers = #{Hash[@toplist.toplist(top_k).map{ |k,t| 
+    [k, { :total => t, 
+          :percent => @toplist.percentage(k),
+          :rank => @toplist.rank(k),
+          :delta => @toplist.trend(k) }]
+  }].to_json};
+
+
+  function toplgaugeSelectItem(){
+    var item_key = $(this).attr('data-item');
+
+    $(this).addClass('active')
+      .siblings().removeClass('active');
+
+    $('.widget_keystats .widget_item_timeseries').html('');
+    $('.widget_keystats .keystats').show();
+    $('.widget_keystats .empty_state').hide();
+
+    $('.widget_keystats .numbers_container .title')
+      .html(item_key);
+
+    $('.widget_keystats .headbar.small')
+      .html("#{key_nouns.first}: " + item_key);
+
+    $('.widget_keystats .number.total .ui_value')
+      .attr('data-value', toplist_gauge_numbers[item_key].total);
+
+    $('.widget_keystats .number.percent .ui_value')
+      .attr('data-percent', toplist_gauge_numbers[item_key].percent);
+
+    $('.widget_keystats .number.delta .ui_trend')
+      .attr('data-trend', toplist_gauge_numbers[item_key].delta);
+
+    $('.widget_keystats .number.rank .value')
+      .html('#' + toplist_gauge_numbers[item_key].rank);
+
+    FnordMetric.util.format('.widget_keystats .keystats');
+
+    var series_data = [];
+
+    for(ind in toplist_gauge_ticks){
+      var _time = toplist_gauge_ticks[ind];
+      var _val  = toplist_gauge_timeseries[item_key][_time];
+      if(!_val){ _val = 0; }
+      series_data.push({x: parseInt(_time), y: parseFloat(_val)});
+    }
+
+    FnordMetric.widgets.timeseriesWidget().render({
+      title: "#{key_nouns.first}: " + item_key,
+      elem: $('.widget_item_timeseries'),
+      height: 320,
+      default_style: 'line',
+      series: [{
+        name: item_key,
+        color: "#{FnordMetric::COLORS.last}",
+        data: series_data
+      }]
+    });
+
+  }
+
+
+  function toplgaugeTabClick(){
+    if($(this).attr('data-tab') == "Overview"){
+      $('.toplgauge_tab').hide().filter('.overview').show();
+    } else if($(this).attr('data-tab') == "Trending"){
+      $('.toplgauge_tab').hide().filter('.trending').show();
+    }
+
+    $('.toplgauge_tabs li').removeClass('active');
+    $(this).addClass('active');
+  }
+
+
+  function toplgaugeSeach(item){
+    $('.widget_toplist .toplist_item').hide();
+
+    if(item.length < 2){
+      $('.widget_toplist .toplist_item.initial').show();
+    } else {
+      $('.widget_toplist .toplist_item[data-item^="'+item+'"]').show();
+    }
+    
+  }
+
+
+  

data/web/js/fnordmetric.bars_widget.js

@@ -0,0 +1,178 @@
+FnordMetric.widgets.barsWidget = function(){
+
+    var widget_uid = "fnord-" + parseInt(Math.random()*99990000);
+    var width, height, opts, graph, gconfig, legend, hoverDetail, shelving, highlighter, values;
+
+    var cardinal = true;
+
+    function render(_opts){
+      opts = _opts;
+
+      if(!opts.default_style){ opts.default_style = 'line'; }
+      if(!opts.default_cardinal){ opts.default_cardinal = true; }
+
+      draw_layout();
+
+      $(opts.elem)
+        .addClass('resize_listener')
+        .bind('fm_resize', renderChart);
+
+      gconfig = {
+        element: $('.container', opts.elem)[0],
+        renderer: "bar",
+        width: width,
+        height: height - 20,
+        padding: { top: 0.1, bottom: 0 }
+      }
+
+      if(opts.async_chart){
+        updateChart();
+      } else {
+        if(!opts.values){ opts.values = [[0,0],[1,0]]; }
+        values = opts.values;
+        renderChart();
+      }
+    }
+
+
+    function draw_layout(){
+      if(!opts.no_headbar){
+        $(opts.elem).append(
+          $('<div></div>')
+            .addClass('headbar')
+            .append($('<h2></h2>').html(opts.title))
+        );
+      }
+
+      $(opts.elem).append(
+        $('<div></div>')
+          .addClass('container')
+          .css({
+            height: opts.height,
+            margin: '10px 23px 25px 23px',
+          })
+      );
+
+      if(opts.async_chart){
+        $('.headbar', opts.elem).prepend(
+          $('<div></div>')
+            .addClass('button ml')
+            .append($('<span></span>').html('&larr;'))
+            .click(function(){ moveRange(-1); })
+        ).prepend(
+          $('<div></div>')
+            .addClass('datepicker')
+        ).prepend(
+          $('<div></div>')
+            .addClass('button')
+            .append($('<span></span>').html('&rarr;'))
+            .click(function(){ moveRange(1); })
+        );
+      }
+    }
+
+    function renderChart(){
+      width = opts.elem.width() - 50;
+      height = opts.height || 240;
+
+      gconfig.width = width;
+      gconfig.height = height;
+
+      $(gconfig.element).html("");
+
+      gconfig.series = [{
+        name: opts.title,
+        color: opts.color,
+        data: []
+      }];
+
+
+      if (values.length == 0)
+        values.push(["No data yet",1]);
+
+      for(var n=0; n < values.length; n++){
+        gconfig.series[0].data.push({
+          x: n,
+          label: values[n][0],
+          y: values[n][1]
+        });
+      }
+
+      graph = new Rickshaw.Graph(gconfig);
+
+      new Rickshaw.Graph.Axis.Y({
+        graph: graph,
+      }).render();
+
+      graph.configure(gconfig);
+      graph.render();
+    }
+
+
+    function announce(evt){
+      if(evt.widget_key == opts.widget_key){
+        if((evt.class == "widget_response") && (evt.cmd == "values_for")){
+          running_request = false;
+          $(opts.elem).css('opacity', 1); 
+          values = evt.values;
+          renderChart();
+        }
+      }
+    }
+
+    function requestValuesAsync(){
+      FnordMetric.publish({
+        "type": "widget_request",
+        "klass": "BarsWidget",
+        "gauge": opts.gauge,
+        "cmd": "values_for",
+        "since": opts.start_timestamp,
+        "until": opts.end_timestamp,
+        "widget_key": opts.widget_key
+      })
+    }
+
+    function updateChart(first_time, silent){
+      if(!silent){ $(opts.elem).css('opacity', 0.5); }    
+      updateRange();
+      redrawDatepicker();
+      requestValuesAsync();
+    }
+
+    function redrawDatepicker(){
+      $('.datepicker', opts.elem).html(
+        FnordMetric.util.dateFormat(opts.start_timestamp) +
+        '&nbsp;&dash;&nbsp;' +
+        FnordMetric.util.dateFormat(opts.end_timestamp)
+      );
+    }
+
+    function updateRange(force){
+      if(!opts.tick){
+        opts.tick = opts.ticks[0];
+      }
+
+      if(!opts.start_timestamp || !opts.end_timestamp || !!force){
+        opts.end_timestamp = parseInt(new Date().getTime() / 1000);
+        opts.start_timestamp = opts.end_timestamp - opts.tick;
+      }
+    }
+
+    function moveRange(direction){
+      v = opts.tick*direction*8;
+
+      if(((opts.end_timestamp + v)*1000) < new Date().getTime()){
+        opts.start_timestamp += v;
+        opts.end_timestamp += v;  
+      }
+
+      updateChart();
+    }
+
+    return {
+      render: render,
+      announce: announce
+    }
+
+};
+