fnordmetric 0.3.2 → 0.5.0

data/lib/fnordmetric/widget.rb

@@ -1,75 +1,80 @@
 class FnordMetric::Widget
 
-  attr_accessor :report
+  attr_accessor :gauges, :tick
 
-  def initialize(options={})
-    @options = options
-    add_report(@options[:report]) if @options[:report]
+  def initialize(opts={})
+    @opts = opts
+
+    unless opts.has_key?(:title)
+      error! "widget can't be initialized without a title"
+    end
+
+    add_gauges(opts.delete(:gauges))
   end
 
   def title
-    @options[:title]
+    @opts[:title]
   end
 
-  def metrics
-    [@options[:metrics]].flatten.map{ |m|
-      m.is_a?(FnordMetric::Metric) ? m : FnordMetric.metrics.fetch(m)
-    }
+  def token
+    title.to_s.gsub(/[\W]/, '').downcase
   end
 
-  def tick
-    @options[:tick] || 1.day
+  def add_gauges(gauges)
+    if gauges.blank? && has_tick?
+      error! "initializing a widget without gauges is void"
+    else
+      @gauges = gauges
+    end
+    
+    if (ticks = gauges.map{ |g| g.tick }).uniq.length == 1
+      @tick = ticks.first
+    else
+      error! "you can't add gauges with different ticks to the same widget"
+    end
   end
 
-  def range
-    @options[:range] || default_range
+  def error!(msg)
+    FnordMetric.error!(msg)
   end
 
-  def range_to_i
-    (range.first.to_i..range.last.to_i)
+  def range
+    ensure_has_tick!
+    #@opts[:range] || default_range # FIXME: allow custom ranges, but assure that the range-start is 'on a tick'
+    default_range
   end
 
   def ticks
-    range_to_i.step(tick.to_i).map{ |ts|
-      (Time.at(ts)..Time.at(ts+tick.to_i))
-    }.compact
+    ensure_has_tick!
+    range.step(@tick)
   end
 
   def default_range(now=Time.now)
-    if tick.to_i == 1.day.to_i
-      now = now+1.day
-      te = Time.utc(now.year, now.month, now.day) 
-      (te-30.days)..(te-1.second)
-    elsif tick.to_i == 1.hour.to_i
-      te = Time.utc(now.year, now.month, now.day, now.hour) 
-      (te-24.hours)..(te-1.second)
-    else
-      (now-(tick*30))..now
-    end
-  end
-    
-  def add_report(report)
-    @report = report
+    ensure_has_tick!
+    te = gauges.first.tick_at(now.to_i)
+    te += @tick if include_current?
+    rs = @tick == 1.hour.to_i ? 24 : 30
+    (te-(@tick*rs)..te)
   end
 
-  def data
-    { :title => @options[:title] }
+  def include_current?
+    !(@opts[:include_current] == false)
   end
-
-  def data_json
-    data.to_json.gsub('"', '\'')
+    
+  def data
+    { 
+      :title => @opts[:title], 
+      :width => @opts[:width] || 100,
+      :klass => self.class.name.split("::").last 
+    }
   end
 
-  def include_current?
-    !(@options[:current] == false)
+  def render
+    data
   end
 
-  def render(elem_id)
-    %Q{      
-      <script type='text/javascript'>
-        FnordMetric.render('#{elem_id}', #{data_json});
-      </script>
-    }
+  def ensure_has_tick!
+    error! "widget does not have_tick" unless has_tick?
   end
 
 end

data/lib/fnordmetric/worker.rb

@@ -0,0 +1,80 @@
+class FnordMetric::Worker
+
+  def initialize(namespaces, opts)        
+    @namespaces = {}
+    @opts = opts
+    configure(namespaces)
+  end
+
+  def ready!
+    @redis = EM::Hiredis.connect(@opts[:redis_uri]) 
+    tick
+  end
+
+  def configure(namespaces)   
+    namespaces.each do |key, block|
+      @namespaces[key] = FnordMetric::Namespace.new(key, @opts.clone)
+      @namespaces[key].instance_eval(&block)
+    end
+  end
+
+  def tick
+    @redis.blpop(queue_key, 0).callback do |list, event_id|           
+      @redis.get(event_key(event_id)).callback do |event_data|                     
+        process_event(event_id, event_data) if event_data        
+        FnordMetric.log("oops, lost an event :(") unless event_data
+        EM.next_tick(&method(:tick))      
+        @redis.hincrby(stats_key, :events_processed, 1)
+      end
+    end
+  end
+
+  def process_event(event_id, event_data)
+    EM.defer do      
+      parse_json(event_data).tap do |event|                
+        event[:_time] ||= Time.now.to_i
+        event[:_eid] = event_id
+        announce_event(event)
+        publish_event(event)        
+        expire_event(event_id)       
+      end
+    end
+  end
+
+  def pubsub_key
+    [@opts[:redis_prefix], 'announce'].join("-")
+  end
+
+  def queue_key
+    [@opts[:redis_prefix], 'queue'].join("-")
+  end
+
+  def event_key(event_id)
+    [@opts[:redis_prefix], 'event', event_id].join("-")
+  end
+
+  def stats_key
+    [@opts[:redis_prefix], 'stats'].join("-")
+  end
+
+  def announce_event(event)   
+    namespace(event[:_namespace]).ready!(@redis).announce(event)
+  end
+
+  def expire_event(event_id)
+    @redis.expire(event_key(event_id), @opts[:event_data_ttl])
+  end
+
+  def publish_event(event)    
+    @redis.publish(pubsub_key, event[:_eid])    
+  end
+
+  def namespace(key)
+    (@namespaces[key] || @namespaces.first.last).clone
+  end
+
+  def parse_json(data)
+    Yajl::Parser.new(:symbolize_keys => true).parse(data)
+  end
+
+end

data/pub/fnordmetric/fnordmetric.css

@@ -1,21 +1,32 @@
 body, html{ height:100%; padding:0px;}
-body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
+body{ background:#3b3e45; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
-#wrap{ margin:0 40px; }
+.topbar{ height:43px; background:#24272c; display:none; }
 
-#tabs{ width:200px; position:fixed; height:100%; margin-top:70px; }
-#tabs ul{ list-style-type:none; padding:0; margin:0; }
-#tabs ul li{ height:34px; line-height:35px; border-bottom:1px dotted #ececec; cursor:pointer; color:#666; font-size:13px; }
+#wrap{ margin:0 20px; }
+
+#tabs{ width:150px; position:fixed; height:100%; margin-top:70px; }
+#tabs ul{ list-style-type:none; padding:0; margin:0; width:156px;}
+#tabs ul li{ height:34px; line-height:35px; cursor:pointer; color:#ccc; font-size:13px; border-radius:3px; margin-bottom:5px; }
 #tabs ul li:after{ content:'›'; display:block; float:right; margin-right:15px; color:#ccc; font-size:16px; line-height:35px; }
 #tabs ul li .picto{ margin-top:10px; margin-right:7px; }
-#tabs ul li:hover, #tabs ul li:hover:after{ color:#000; }
+#tabs ul li:hover, #tabs ul li:hover:after{ color:#fff; }
 #tabs ul li:hover .picto{ opacity:1; }
 
 .picto{ display:block; height:14px; width:14px; float:left; background:url('/fnordmetric/sprite.png') no-repeat 14px 14px; opacity:0.7; }
 .picto.piechart{ background-position:-42px -173px; width:9px; margin-right:5px; }
 
-#viewport{ min-height:800px; float:left; margin-left:220px; padding-top:20px; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0; }
+#viewport{ float:left; margin-left:150px; margin-top:30px; border-radius:3px; min-width:790px; }
+#viewport .viewport_inner{ margin:6px; background:#fff; min-height:1200px; border-radius:2px; }
+
+#viewport, #tabs ul li:hover, #tabs ul li.active{ background:#24272c; box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.4); }
 
+.widget{ min-height:100px; border-right:1px solid #ececec; float:left; }
+.widget.full_width{ border-right:none; }
+.widget .inner{ margin:20px; }
+.widget .headbar{ margin-bottom:30px; }
+
+/*
 .headbar{ height:36px; background:#f2f2f2; border-bottom:1px solid #e2e2e2; }
 .headbar h2{ margin:8px; line-height:21px; float:left; height:20px; font-size:14px; }
 .headbar .datepicker{ background:#fff; border:1px solid #999; height:20px; padding:0 7px; float:right; margin:8px -1px; min-width:100px; font-size:11px; font-style:italic; }
@@ -42,8 +53,8 @@ body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font:
 }
 
 .headbar .button:hover, .headbar.button.active{background:#ddd;border-bottom-color:#999;-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, .05)}
-
-.numbers_container, .number{ float:left; border-right:1px solid #ececec;}
+*/
+.numbers_container, .number{ float:left; border-right:1px solid #ececec; }
 .number{ margin-left:12px; padding-right:20px; margin-right:10px; }
 .number .value{ color:#333; font-size:30px; display:block; margin-bottom:5px; }
 .number .desc{ color:#999; font-size:12px; }
@@ -51,3 +62,59 @@ body{ background:#fff; color:#333; margin:0; padding:0; overflow-y:scroll; font:
 .numbers_container{ padding-right:0px; width:33.2%; }
 
 .numbers_container .title{ padding:4px 10px 1px 10px; color:#333; font-size:13px; display:block; background:#f2f2f2; border-bottom:1px solid #e2e2e2; margin-bottom:15px; }
+
+
+.headbar {
+background-color: #F4F4F4;
+background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e9e9e9));
+background-image: -webkit-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -moz-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -ms-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: -o-linear-gradient(top, #f4f4f4, #e9e9e9);
+background-image: linear-gradient(top, #f4f4f4, #e9e9e9);
+filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f4f4f4', EndColorStr='#e9e9e9');
+padding: 0 15px;
+border-bottom: 1px solid #C9C9C9;
+border-top: 1px solid #F9F9F9;
+height: 28px;
+font-size:13px;
+line-height:29px;
+text-shadow: 1px 0px 2px rgba(255, 255, 255, 1);
+-moz-text-shadow: 1px 0px 2px rgba(255,255,255,1);
+-webkit-text-shadow: 1px 0px 2px rgba(255,255,255,1);
+}
+
+
+ul.session_list{ list-style-type:none; margin:0; padding:9px 16px 0 11px; }
+ul.session_list li{ color:#0A0A0A; margin-bottom:10px; height:18px; overflow:hidden; line-height:18px; padding:4px; }
+ul.session_list li:hover{ background:#eee; cursor:pointer; }
+ul.session_list li .picture{ height:18px; width:18px; float:left; background:#333; overflow:hidden; }
+ul.session_list li .name{ float:left; width:120px; overflow:hidden; margin-left:10px; font-size:12px; }
+ul.session_list li .time{ float:right; width:40px; overflow:hidden; text-align:right; font-size:10px; }
+
+.sessions_feed{ min-width:300px; min-height:100px; float:left; }
+.sessions_feed ul.feed_inner{ margin:5px 15px; min-height:100px; padding:0px; }
+.sessions_feed ul.feed_inner li{ list-style-type:none; border-bottom:1px solid #e2e2e2; min-height:54px; }
+.sessions_feed ul.feed_inner li .message{ font-size:12px; line-height:19px; padding-top:9px; display:block; }
+.sessions_feed ul.feed_inner li .properties{ margin-left:50px; font-size:10px; display:block; color:#555; }
+.sessions_feed ul.feed_inner li .time{ font-size:10px; line-height:20px; padding-top:19px; padding-right:10px; display:block; color:#999; float:right; font-style:italic; }
+.sessions_feed ul.feed_inner li .picture{ height:40px; overflow:hidden; width:40px; float:left; background:#333; margin:7px 10px 0 0;  }
+.sessions_sidebar{ min-height:1200px; float:right; width:250px; border-left:1px solid #C7C9CC; }
+.events_sidebar{ min-height:1200px; float:left; width:200px; border-right:1px solid #C7C9CC; }
+
+ul.event_type_list{ margin:10px; padding:0; }
+ul.event_type_list li{ list-style-type:none; color:#0A0A0A; margin-bottom:8px; height:18px; overflow:hidden; line-height:18px; padding:4px; }
+ul.event_type_list li input{ margin-right:7px; }
+ul.event_type_list li:hover{ background:#eee; cursor:pointer; }
+ul.event_type_list li .history{ float:right; color:#999; font-size:10px; }
+ul.event_type_list li .history:hover{ color:#333; text-decoration:underline; }
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+ 

data/pub/fnordmetric/fnordmetric.js

@@ -1,44 +1,543 @@
-FnordMetric = {
-  d: document,
-  p: '/fnordmetric/',
-  id: function(id){return FnordMetric.d.getElementById(id)},
-  tag: function(element){return FnordMetric.d.getElementsByTagName(element)},
-  ce: function(element){return FnordMetric.d.createElement(element)},
-
-  init: function(){
-    if(widget_config.path_prefix){ FnordMetric.p = widget_config.path_prefix; } 
-  },
-
-  js: function(url, callback){
-    var s = FnordMetric.ce('script');
-    s.type = "text/javascript";
-    s.onload = callback;
-    FnordMetric.init();
-    s.src = FnordMetric.p+url;
-    FnordMetric.tag('head')[0].appendChild(s);  
-  },
-
-  css: function(url, callback){
-    var s = FnordMetric.ce('link');
-    s.type = "text/css";
-    s.rel = 'stylesheet';
-    s.href = FnordMetric.p+url;
-    s.onload = callback;         
-    FnordMetric.tag('head')[0].appendChild(s); 
-  },
-
-  render: function(elem, widget_config){
-    var f = FnordMetric.ce('iframe');    
-    f.style.width = '100%'; f.style.height = widget_config.widget_height+'px';
-    f.frameBorder = 'none'; f.scrolling = 'no';
-    FnordMetric.id(elem).appendChild(f);
-    var s = f.contentDocument.createElement('script')
-    s.type = "text/javascript";
-    s.src = FnordMetric.p+'/fnordmetric/fnordmetric.js';    
-    widget_config.path_prefix = FnordMetric.p;
-    s.onload = function(){ f.contentWindow.FnordMetric.js(widget_config.widget_url); }
-    f.contentWindow.widget_config = widget_config;        
-    f.contentDocument.getElementsByTagName('head')[0].appendChild(s);   	
+var FnordMetric = (function(){
+ 
+  var canvasElem = false;
+
+  var currentNamespace = false;
+  var currentView = false;
+
+  function decPrint(val){
+    return (val < 10 ? '0'+val : val);
+  }
+
+  function formatTimeOfDay(_time){
+    var time = new Date();
+    time.setTime(_time*1000);
+    return decPrint(time.getHours()) + ':' +
+           decPrint(time.getMinutes()) + ':' +
+           decPrint(time.getSeconds());
+  }
+  
+  function formatTimeSince(time){
+    var now = new Date().getTime()/1000;
+    var since = now - time;
+    if(since < 60){
+      return parseInt(since) + 's';
+    } else if(since<3600){
+      return parseInt(since/60) + 'm';
+    } else if(since<(3600*24)){
+      return parseInt(since/3600) + 'h';
+    } else {
+      return ">1d"
+    }
+  }
+
+  var numbersWidget = function(opts){
+    
+    function render(){
+      //console.log(opts);
+    }
+
+    return {
+      render: render  
+    };
+
+  };
+
+  var timelineWidget = function(opts){
+    
+    function render(){
+
+      var labels = opts.labels;
+      var series = opts.series;
+
+      var elem_id = "fm_graph_"+parseInt(Math.random()*99999);
+      var elem_inner = $('.inner', opts.elem);
+      elem_inner.append($('<div id="'+elem_id+'"></div>'));
+
+      var width = elem_inner.width();
+      var height = 240;
+      var canvas = Raphael(elem_id, width, height+30);
+      var xtick = width / (labels.length-1);
+
+      var label_mod = Math.ceil((labels.length/10));
+
+      if(opts.independent_y_axis){
+        var max = false;  
+      } else {
+        var amax = [];   
+        $(series).each(function(n,_series){
+          amax.push(Math.max.apply(Math, _series.data));
+        });
+        var max = Math.max.apply(Math, amax);
+      }
+
+      $(series).each(function(n,_series){
+
+        //var path_string = "M0,"+height;
+        var path_string = "";
+        var _max = max;
+
+        if(!_max){ _max = Math.max.apply(Math, _series.data); }
+        
+        _max = _max * 1.1;
+
+        $(_series.data).each(function(i,v){    
+
+          var p_x = (i*xtick);
+          var p_y = (height-((v/_max)*height));
+            
+          path_string += ( ( i == 0 ? "M" : "L" ) + p_x + ',' + p_y );
+
+          if(i%label_mod==0){
+            canvas.text(p_x, height+10, labels[i]).attr({
+              font: '10px Helvetica, Arial', 
+              fill: "#777"
+            });
+          }
+
+          canvas.circle(p_x, p_y, 4).attr({
+            fill: _series.color,
+            stroke: '#fff',
+            "stroke-width": 1, 
+          }).toBack();
+
+
+          var htrgt = canvas.rect(p_x - 20, p_y - 20, 40, 40).attr({
+            stroke: "none", 
+            fill: "#fff", 
+            opacity: 0
+          }).toFront();
+
+          (function(htrgt){
+
+            var t_y = p_y + 9;
+            var ttt = canvas.text(p_x, t_y+10, v).attr({
+              font: '12px Helvetica, Arial',
+              fill: "#fff",
+              opacity: 0
+            });
+            
+            var tttb = ttt.getBBox();
+            var ttw = tttb.width+20;
+            var tt = canvas.rect(p_x-(ttw/2), t_y, ttw, 22, 5).attr({
+              stroke: "none",
+              fill: "#000",
+              opacity: 0
+            }).toBack();
+
+
+            $(htrgt[0]).hover(function(){
+              tt.animate({ opacity: 0.8 }, 300);
+              ttt.animate({ opacity: 0.8 }, 300);
+            }, function(){
+              tt.animate({ opacity: 0 }, 300);
+              ttt.animate({ opacity: 0 }, 300);
+            });
+
+          })(htrgt);
+
+        });
+
+        if(_max>0){
+
+          canvas.path(path_string).attr({
+            stroke: _series.color, 
+            "stroke-width": 3, 
+            "stroke-linejoin": 'round'
+          }).toBack(); 
+
+          path_string += "L"+width+","+height+" L0,"+height+" Z";
+
+          canvas.path(path_string).attr({
+            stroke: "none", 
+            fill: _series.color, 
+            opacity: 0.1
+          }).toBack();
+
+        }
+       
+
+      });
+
+      canvas.drawGrid(0, 0, width, height, 1, 6, "#ececec");
+
+    }
+
+    return {
+      render: render  
+    };
+
+  };
+
+  var sessionView = (function(){
+    
+    var listElem = $('<ul class="session_list"></ul>');
+    var feedInnerElem = $('<ul class="feed_inner"></ul>');
+    var typeListElem  = $('<ul class="event_type_list"></ul>');
+    var filterElem = $('<div class="events_sidebar"></div>').html(
+      $('<div class="headbar"></div>').html('Event Types')
+    ).append(typeListElem);
+    var feedElem = $('<div class="sessions_feed"></div>').html(
+      $('<div class="headbar"></div>').html('Event Feed')
+    ).append(feedInnerElem);
+    var sideElem = $('<div class="sessions_sidebar"></div>').html(
+      $('<div class="headbar"></div>').html('Active Users')
+    ).append(listElem);
+
+    var eventsPolledUntil = false;
+    var eventsFilter = [];
+    var sessionData = {};
+    var pollRunning = true;
+
+    function load(elem){
+      eventsPolledUntil = parseInt(new Date().getTime()/10000);
+      elem.html('')
+        .append(filterElem)
+        .append(feedElem)
+        .append(sideElem);
+      startPoll();
+      loadEventTypes();
+    };
+
+    function resize(_width, _height){
+      $('.sessions_feed').width(_width-452);
+    };
+
+    function startPoll(){
+      (doSessionPoll())();
+      (doEventsPoll())();
+      sessionView.session_poll = window.setInterval(doSessionPoll(), 1000);
+    };
+
+    function stopPoll(){
+      pollRunning = false;
+      window.clearInterval(sessionView.session_poll);
+    }
+
+    function doSessionPoll(){
+      return (function(){
+        $.ajax({
+          url: '/'+currentNamespace+'/sessions',
+          success: callbackSessionPoll()
+        });
+      });
+    };
+
+    function loadEventHistory(event_type){
+      feedInnerElem.html('');
+      $.ajax({
+        url: '/'+currentNamespace+'/events?type='+event_type,
+        success: function(_data, _status){
+          var data = JSON.parse(_data).events;
+          for(var n=data.length; n >= 0; n--){
+            if(data[n]){ renderEvent(data[n]); }
+          }
+        }
+      });
+    }
+
+    function callbackSessionPoll(){
+      return (function(_data, _status){
+        $.each(JSON.parse(_data).sessions, function(i,v){
+          updateSession(v);  
+        });
+        sortSessions();
+      });
+    };
+
+    function loadEventTypes(){
+      $.ajax({
+        url: '/'+currentNamespace+'/event_types',
+        success: function(_data){
+          var data = JSON.parse(_data);
+          $(data.types).each(function(i,v){
+            if(v.slice(0,5)!='_set_'){ addEventType(v,v); }
+          });
+        }
+      });
+    };
+
+    function addEventType(type, display){
+      typeListElem.append(
+        $('<li class="event_type"></li>').append(
+          $('<span class="history"></span>').html('history')
+          .click(function(){ 
+            $('.event_type_list .event_type input').attr('checked', false);
+            $('input', $(this).parent()).attr('checked', true);
+            updateEventFilter(); loadEventHistory(type); 
+          })
+        ).append(
+          $('<input type="checkbox" />').attr('checked', true)
+          .click(function(){ updateEventFilter(); })
+        ).append(
+          $('<span></span>').html(display)
+        ).attr('rel', type)
+      );
+    }
+
+    function updateEventFilter(){
+      var _unchecked_types = [];
+      $('ul.event_type_list li.event_type').each(function(i,v){
+        if(!$('input', v).attr('checked')){
+          _unchecked_types.push($(v).attr('rel'));
+        }
+      });
+      eventsFilter = _unchecked_types;
+    }
+
+    function doEventsPoll(){
+      return (function(){         
+        $.ajax({
+          url: '/'+currentNamespace+'/events?since='+eventsPolledUntil,
+          success: callbackEventsPoll()
+        });
+      });
+    };
+
+    function callbackEventsPoll(){
+      return (function(_data, _status){
+        var data = JSON.parse(_data)
+        var events = data.events;
+        var timout = 1000;
+        var maxevents = 200;
+        if(events.length > 0){ 
+          timeout = 200; 
+          eventsPolledUntil = parseInt(events[0]._time)-1;
+        }
+	      for(var n=events.length-1; n >= 0; n--){
+	        var v = events[n];
+          if(eventsFilter.indexOf(v._type) == -1){
+            if(parseInt(v._time)<=eventsPolledUntil){
+              renderEvent(v);  
+            }
+          }
+        };
+        var elems = $("p", feedInnerElem);
+        for(var n=maxevents; n < elems.length; n++){
+          $(elems[n]).remove();
+        }
+        if(pollRunning){
+          window.setTimeout(doEventsPoll(), timout);
+        }
+      });
+    };
+
+    function updateSession(session_data){
+      sessionData[session_data.session_key] = session_data;
+      renderSession(session_data);
+    }
+
+    function sortSessions(){
+      console.log("fixme: sort and splice to 100");
+    }
+
+    function renderSession(session_data){
+
+      var session_name = session_data["_name"];
+      var session_time = formatTimeSince(session_data["_updated_at"]);
+      var session_elem = $('li[data-session='+session_data["session_key"]+']:first');
+
+      if(session_elem.length>0){
+
+        if(session_data["_picture"] && (session_data["_picture"].length > 1)){
+          $('.picture img', session_elem).attr('src', session_data["_picture"])
+        }
+
+        if(session_name){
+          $('.name', session_elem).html(session_name);
+        }
+        
+        $('.time', session_elem).html(session_time);
+
+      } else {
+        
+        var session_picture = $('<img width="18" />');
+
+        if(!session_name){ 
+          session_name = session_data["session_key"].substr(0,15)
+        };
+
+        if(session_data["_picture"]){ 
+          session_picture.attr('src', session_data["_picture"]);
+        };
+        
+        listElem.append(
+          $('<li class="session"></li>').append(
+            $('<div class="picture"></div>').html(session_picture)
+          ).append(
+            $('<span class="name"></span>').html(session_name)
+          ).append(
+            $('<span class="time"></span>').html(session_time)
+          ).attr('data-session', session_data["session_key"])
+        );
+
+      }
+    };
+
+    function renderEvent(event_data){
+      var event_time = $('<span class="time"></span>');
+      var event_message = $('<span class="message"></span>');
+      var event_props = $('<span class="properties"></span>');
+      var event_picture = $('<div class="picture"></picture>');
+
+      var event_type = event_data._type;
+      
+      if(!event_type){ return true; }
+
+      if(event_data._message){
+        event_message.html(event_data._message);
+      } else if(event_type=="_pageview"){
+        event_message.html("Pageview: " + event_data.url);
+      } else if(event_type.substr(0,5) == '_set_'){
+        return true; /* dont render */
+      } else {
+        event_message.html(event_type);
+      }
+
+      event_time.html(formatTimeOfDay(event_data._time));
+      
+      if(event_data._session_key && event_data._session_key.length > 0){
+        if(session_data=sessionData[event_data._session_key]){
+          if(session_data._name){            
+            event_props.append(
+              $('<strong></strong>').html(session_data._name)
+            );
+          }
+          if(session_data._picture){ 
+            event_picture.append(
+              $('<img width="40" />').attr('src', session_data._picture)
+            )
+          }
+        }
+      }
+
+      feedInnerElem.prepend(
+        $('<li class="feed_event"></li>')
+        .append(event_time)
+        .append(event_picture)
+        .append(event_message)
+        .append(event_props)
+      );
+    }
+
+    function close(){
+      stopPoll();
+    };
+
+    return {
+      load: load,
+      resize: resize,
+      close: close
+    };
+
+  });
+  
+
+  var dashboardView = (function(dashboard_name){
+
+    var widgets = [];
+    var viewport = null;
+
+    function load(_viewport){
+      viewport = _viewport.html('');
+      /*alert('yay, new dashboard view loaded: ' + dashboard_name);*/
+      $.ajax({
+        url: '/'+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>').append(
+          $('<div class="headbar"></div>').html(widget.title)
+        ).append(
+          $('<div class="inner"></div>')
+        );
+        widgets[wkey] = widget;
+        viewport.append(widget.elem);
+        resizeWidget(wkey);
+        renderWidget(wkey);
+      };
+      resize();
+    };
+
+    function renderWidget(wkey){
+      var widget = widgets[wkey];
+      /* argh... */
+      if(widget.klass=='TimelineWidget'){ timelineWidget(widget).render(); }
+      if(widget.klass=='NumbersWidget'){ numbersWidget(widget).render(); }
+    };
+
+    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(){
+      
+    };
+
+    return {
+      load: load,
+      resize: resize,
+      close: close
+    };
+
+  });
+
+
+  function renderDashboard(_dash){  
+    loadView(dashboardView(_dash));
+  };
+
+  function renderSessionView(){
+    loadView(sessionView());
   }
 
-};
+  function loadView(_view){
+    if(currentView){ currentView.close(); }
+    canvasElem.html('loading!');
+    currentView = _view;
+    currentView.load(canvasElem);
+    resizeView();
+  };
+
+  function resizeView(){
+    currentView.resize(
+      canvasElem.innerWidth(), 
+      canvasElem.innerHeight()
+    );
+  };
+
+  function init(_namespace, _canvasElem){
+    canvasElem = _canvasElem;
+    currentNamespace = _namespace;
+    loadView(sessionView());
+  };
+
+  return {
+    p: '/fnordmetric/',  
+    renderDashboard: renderDashboard,
+    renderSessionView: renderSessionView,
+    resizeView: resizeView,
+    init: init
+  };
+
+})();