scout_realtime 0.5.3 → 0.5.4

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.5.4
+
+* Misc UI updates
+
 ## 0.5.3
 
 * Update executable output - instructions for accessing from your browser.

data/lib/scout_realtime/models/processes.rb

@@ -1,7 +1,7 @@
 class Scout::Realtime::Processes < Scout::Realtime::Metric
   include Scout::Realtime::MultiAggregator
 
-  FIELDS = { :cpu              => {'label'=>'CPU usage', 'units'=>'', 'precision'=>2},
+  FIELDS = { :cpu              => {'label'=>'CPU usage', 'units'=>'%', 'precision'=>2},
              :memory           => {'units'=>'MB', 'precision'=>1},
              :count            => {'units'=>'', 'precision'=>0}
            }

data/lib/scout_realtime/version.rb

@@ -1,5 +1,5 @@
 module Scout
   module Realtime
-    VERSION = "0.5.3"
+    VERSION = "0.5.4"
   end
 end

data/lib/scout_realtime/web/javascripts/application.js

@@ -1,31 +1,30 @@
 var refreshInterval = 1000;
 var processIteration = 0;
+var firstShift = true;
+var overviewChartMargin = 30; // pulled from lineChart overview margin 
 function d(s){console.debug(s)}
 
-
-$(function(){ setChartSizes()})
-
 window.refresher = null;
 function toggleData() {
   if (window.refresher) {
     clearInterval(window.refresher);
     window.refresher = null;
-    $("#toggle .on-button").addClass("disabled");
-    $("#toggle .off-button").removeClass("disabled");
+    $("#toggle #on.button").addClass("disabled");
+    $("#toggle #off.button").removeClass("disabled");
   } else {
     window.refresher = setInterval(refresh, refreshInterval);
-    $("#toggle .on-button").removeClass("disabled");
-    $("#toggle .off-button").addClass("disabled");
+    $("#toggle #on.button").removeClass("disabled");
+    $("#toggle #off.button").addClass("disabled");
   }
 }
 
 var graphs = {};
 
 var Processes={
-  index:{},
-  element:null,
-  tableBody:null,
-  tableRowTemplate:null,
+  index:{}, // processName: {count:chart, cpu:chart, memory:chart, row:jQueryObject}
+  element:null, // passed on init
+  tableBody:null, // jQuery object, saved here for fast access
+  tableRowTemplate:null, // a handlebars template - is compiled on init
   sortBy:"memory",
 
   init:function(opts){
@@ -33,7 +32,16 @@ var Processes={
     Processes.element=opts.element
     Processes.tableBody=$(Processes.element).find("tbody");
     Processes.tableRowTemplate = Handlebars.compile($("#process-template").html());
-    console.debug("Finished Processes.init")
+
+    // process sorting
+    $('#processes th[data-sort-by="memory"] .sort-down').show();
+    $(Processes.element).find("th").hover().click(function(e){
+      $this=$(this);
+      $(Processes.element).find('.sort-down, .sort-up').hide();
+      $this.find('.sort-down').show();
+      Processes.setSort($this.data('sort-by'));
+      e.stopPropagation();
+    })
   },
 
   update:function(raw_processes){
@@ -59,8 +67,6 @@ var Processes={
         }
       }
     }
-    
-    this.initialUpdateCompleted = true;
 
     // 3. add data and update charts
     for(cmd in Processes.index) {
@@ -76,12 +82,12 @@ var Processes={
       });
 
       if(data) {
-        Processes.index[cmd]['row'].data({'memory':data['memory'],'cpu':data['cpu']}); // raw numbers for sorting
+        Processes.index[cmd]['row'].data({'memory':data['memory'],'cpu':data['cpu'],'count':data['count']}); // raw numbers for sorting
       }
     }
 
     if(processIteration % 10 == 0) {
-      // TODO 3. reorder table rows as needed
+      // 4. reorder table rows as needed
       rows = Processes.tableBody.children('tr').get();
       rows.sort(function(a, b) {
         var compA = $(a).data(Processes.sortBy);
@@ -119,8 +125,7 @@ var Processes={
       $.each(bufferedData, function(data_index, value) {
         data.push({time: startTime + data_index * 1000, value: [value]})
       });
-
-      chart = new lineChart({ element: $(this).get(0), data: data, metadata: meta.processes[metric] });
+      chart = new lineChart({ element: $(this).get(0), data: data, metadata: meta.processes[metric], type: 'process' });
       chart.draw();
       Processes.index[cmd][metric] = chart;
     });
@@ -129,6 +134,13 @@ var Processes={
   remove:function(cmd){
     Processes.index[cmd]['row'].remove();
     delete Processes.index[cmd];
+  },
+  setSort:function(sortBy){
+    if (sortBy != Processes.sortBy) {
+      Processes.sortBy = sortBy;
+      processIteration = 0;
+      Processes.update(metrics['processes']);
+    }
   }
 }
 
@@ -137,8 +149,13 @@ var Processes={
 $(document).ready(init);
 
 function init() {
-  $("#sort_cpu, #sort_memory").change(function(){Processes.sortBy=this.value; d("sort by "+this.value)})
-  Processes.init({element:document.getElementById('processes')})
+  Processes.init({element:document.getElementById('processes')});
+	setOverviewChartWidths();
+	
+	$(window).on("debouncedresize", function( event ) {
+		setOverviewChartWidths();
+	});
+
   $(".overview_chart").each(function (i) {
     var $chart = $(this);
     var collector = $chart.data("collector");
@@ -172,8 +189,7 @@ function init() {
 
         data.push({time: startTime + data_index * 1000, value: [valueSum], valueBreakdown: valueBreakdown})
       });
-
-      chart = new lineChart({ element: $chart.get(0), data: data, yScaleMax: yScaleMax, metadata: meta[collector][chartMetrics[0]] });
+      chart = new lineChart({ element: $chart.get(0), data: data, yScaleMax: yScaleMax, metadata: (chartMetrics.length > 1 ? meta[collector] : meta[collector][chartMetrics[0]]), type: 'overview' });
       chart.draw();
       graphs[id] = chart;
     } else {
@@ -181,7 +197,7 @@ function init() {
     }
   });
 
-  $('#toggle').on('click', function() {
+  $('#toggle .button').on('click', function() {
     toggleData();
   });
 
@@ -189,9 +205,15 @@ function init() {
   toggleData(); // uncomment to get continuous data
   // setTimeout(updateGraphData, 1000) // uncomment to get ONE update in a second (for development)
   // normally, lines 1 and 2 above will be uncommented
+
+	// in chrome, the initial chart size is larger than what the parent container is. calling it here resets things. 
+	// still need to call it before drawing charts as FF won't draw it full width.
+	setOverviewChartWidths()
+
 }
 
 function updateGraphData() {
+
   Processes.update(metrics['processes']);
 
   $(".overview_chart").each(function (i) {
@@ -218,15 +240,20 @@ function updateGraphData() {
       });
 
       graph.data.push({time: new Date().getTime(), value: [valueSum], valueBreakdown: valueBreakdown});
-      graph.data.shift();
+      if(firstShift) {
+        // only don't shift off the data on the first iteration. leave it a tail so the graph does not clip along choppily
+        firstShift = false;
+      } else {
+        graph.data.shift();
+      }
     }
   });
 
   $('#report-time').html(formatTime(new Date));
   $('#memory-used').html(parseInt(metrics.memory.used));
-  $('#memory-available').html(parseInt(metrics.memory.size));
+  $('#memory-size').html(parseInt(metrics.memory.size));
   $('#disk-used').html(parseInt(metrics.disk[Object.keys(metrics.disk)[0]].used));
-  $('#disk-available').html(parseInt(metrics.disk[Object.keys(metrics.disk)[0]].avail));
+  $('#disk-size').html(parseInt(metrics.disk[Object.keys(metrics.disk)[0]].size));
 }
 
 function formatTime(timestamp) {
@@ -256,10 +283,25 @@ function refresh() {
 
 /*
 Called on initial load. Just sets the svg element to the size of its parent. This is needed on firefox.
+
+Why don't we just use % widths for containers? 
+
+The chart SVGs have a 30px left margin to handle the y-axis. We need to shift the charts over 30px to the left
+to handle this. We also need to add 30px to the width of the chart so it ends up using the entire container width
+after the 30px left shift.
+
  */
-function setChartSizes(){
+function setOverviewChartWidths(){
+	$overview_charts_td = $('#overview_charts');
+	totalWidth = $overview_charts_td.width(); // width of the td container for the 4 overview charts
+	padding = parseInt($overview_charts_td.css('padding-left'));
+	containerWidth = (totalWidth-2*padding-5)/2; // why -5? chrome overlaps at -4, ff at -5. don't know why.
+	$('.overview_chart_container').each(function(i,e) {
+		$(e).width(containerWidth).css('margin-right',padding)
+	});
+	
   $('.overview_chart').each(function(i,e){
     $svg=$(e);
-    $svg.width($svg.parent().width());
+    $svg.width(containerWidth+overviewChartMargin);
   });
 }

data/lib/scout_realtime/web/javascripts/d3.linechart.js

@@ -3,15 +3,24 @@ function lineChart(params) {
   this.yScaleMax = params.yScaleMax;
   this.element = params.element;
   this.metadata = params.metadata;
-	var line, path, x, y, barWidth, height, selection, chartInfo, latestValue, chartId;
+	// charts can plot multiple metrics. if so, we assume units are the same. fetch that data from the first metric.
+	this.shared_metadata = ('units' in this.metadata ? this.metadata : this.metadata[Object.keys(this.metadata)[0]]);
+	
+	var line, path, x, y, barWidth, height, selection, chartInfo, latestValue, chartId, xAxis, yAxis;
+  var type = params.type;
+  if(type == 'overview') {
+    var margin = { top: 20, right: 0, bottom: 20, left: 30 };
+  } else {
+    var margin = { top: 0, right: 0, bottom: 0, left: 0 };
+  }
 	
   this.draw = function() {
     var _this = this;
 	  selection = d3.select(this.element);
     chartId = $(selection[0]).data('collector') + $(selection[0]).data('instance-name');
     // get the width and height form the selection
-    var width = selection.node().clientWidth || parseInt($(selection.node()).css('width'));
-    height = selection.node().clientHeight || parseInt($(selection.node()).css('height'));
+    var width = (selection.node().clientWidth || parseInt($(selection.node()).css('width'))) - margin.right; // don't take left margin into account for smoothness' sake
+		height = (selection.node().clientHeight || parseInt($(selection.node()).css('height'))) - margin.bottom - margin.top;
     y = d3.scale.linear().range([height, 0]);
     x = d3.time.scale().range([0, width]);
 		now = new Date();
@@ -32,7 +41,8 @@ function lineChart(params) {
         .attr("class", "clip-path")
 		  .append("rect")
 		    .attr("width", width - (barWidth * 2)) // new data points are drawn outside of clip area
-		    .attr("height", height);
+		    .attr("height", height)
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
     line = d3.svg.line()
 		    .interpolate("basis")
@@ -40,6 +50,18 @@ function lineChart(params) {
 		    .y(function(d, i) { return y(d.value[0]); });
 	
 
+    if(type == 'overview') {
+      xAxis = selection.append("g")
+        .attr("class", 'x axis')
+        .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
+        .call(x.axis = d3.svg.axis().scale(x).ticks(d3.time.seconds, 15).tickFormat(d3.time.format("%I:%M:%S")).orient("bottom"));
+
+      yAxis = selection.append("g")
+        .attr("class", 'y axis')
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+        .call(y.axis = d3.svg.axis().scale(y).ticks(1).orient("right"));
+    }
+
     chartInfo = $(selection[0]).parent().siblings('.chart_info');
     latestValue = $(selection[0]).parent().siblings('.latest_value');
     latestValue.html(this.format(this.data[this.data.length - 1].value[0]));
@@ -52,13 +74,22 @@ function lineChart(params) {
         .attr("class", "chart_section")
         .attr("width", barWidth)
         .attr("height", height)
-        .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+        .attr("transform", function(d, i) { return "translate(" + ((x(d.time) - barWidth) + margin.left) + "," + margin.top + ")"; })
+				// for overview charts, the latest value stays visible and the mouseover values appear beneath the chart. 
+				// because of space constraints, the latest value is hidden in process charts and the mouseover value takes its place.
         .on("mouseover", function(d) {
-          //latestValue.html(_this.format(d.value[0]));
-          chartInfo.html(_this.tooltip(d));
+          chartInfo.html(_this.tooltip(d))
+					if (chartInfo.css('display') == 'none') {
+						latestValue.hide();
+						chartInfo.show();
+					}
         })
         .on("mouseout", function(d) {
-          chartInfo.html("");
+          chartInfo.html("")
+					if (latestValue.css('display') == 'none') {
+						latestValue.show();
+						chartInfo.hide();
+					}
         });
 
 		path = selection.append("g")
@@ -87,19 +118,31 @@ function lineChart(params) {
 
       latestValue.html(this.format(this.data[this.data.length - 1].value[0]));
 
+      var translateTarget = x(x.domain()[0] - refreshInterval) + margin.left;
+
       path
         // update the line - this isn't part of the transition. new points will be off to the right.
         .attr("d", line)
-        .attr("transform", null)	
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
         // slide the path to the left 1 second
         .transition()
           .duration(refreshInterval - 50) // duration is the same as the update interval...if it equals the update interval, it gets canceled?
           .ease("linear")
-          .attr("transform", "translate(" + x(x.domain()[0] - refreshInterval) + ")")
+          .attr("transform", "translate(" + translateTarget + "," + margin.top + ")")
           .each("end", function() {
             _this.refresh();
           });
 
+      if(type == 'overview') {
+        xAxis.transition()
+          .duration(refreshInterval - 50)
+          .ease("linear")
+          .call(x.axis);
+
+        yAxis.transition()
+          .call(y.axis);
+      }
+
       chartSection = selection.selectAll("rect")
           .data(this.data);
 
@@ -108,7 +151,7 @@ function lineChart(params) {
           .attr("class", "chart_section")
           .attr("width", barWidth)
           .attr("height", height)
-          .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+          .attr("transform", function(d, i) { return "translate(" + ((x(d.time) - barWidth) + margin.left) + "," + margin.top + ")"; })
           .on("mouseover", function(d) {
             chartInfo.html(_this.tooltip(d));
           })
@@ -117,7 +160,7 @@ function lineChart(params) {
           })
         .transition()
           .duration(0)
-          .attr("transform", function(d, i) { return "translate(" + (x(d.time) - barWidth) + ",0)"; })
+          .attr("transform", function(d, i) { return "translate(" + ((x(d.time) - barWidth) + margin.left) + "," + margin.top + ")"; })
     } else {
       setTimeout(function() { _this.refresh() }, refreshInterval);
     }
@@ -148,18 +191,23 @@ function lineChart(params) {
   }
 
   this.format = function(value) {
-    var formattedUnits = ( this.metadata.units == '%' ? '%' : ' ' + this.metadata.units )
-    return(value.toFixed(this.metadata.precision) + formattedUnits);
+    var formattedUnits = ( this.shared_metadata.units == '%' ? '%' : ' ' + this.shared_metadata.units )
+    return(value.toFixed(this.shared_metadata.precision) + formattedUnits);
   }
 
   this.tooltip = function(data) {
     var tooltipStr = '';
-    if(data.valueBreakdown) {
+		// if multiple values (ex: io wait, system, user), display the metric label + value. otherwise,
+		// just display the value.
+    if(data.valueBreakdown && Object.keys(data.valueBreakdown).length > 1) {
       for(var key in data.valueBreakdown) {
-        tooltipStr += key + ': ' + this.format(data.valueBreakdown[key]) + '; ';
+				var label = ('units' in this.metadata ? this.metadata.label : this.metadata[key].label);
+				if (!label) { label = key };
+				// metrics aren't guarenteed to have a label. use it if they do.
+        tooltipStr += '<span>'+label + '<span>' + this.format(data.valueBreakdown[key]) + '</span></span>';
       }
     } else {
-      tooltipStr = this.format(data.value[0]);
+      tooltipStr = '<span><span>'+this.format(data.value[0])+'</span></span>';
     }
     return tooltipStr;
   }

data/lib/scout_realtime/web/javascripts/jquery.debouncedresize.js

@@ -0,0 +1,47 @@
+/*
+ * debouncedresize: special jQuery event that happens once after a window resize
+ *
+ * latest version and complete README available on Github:
+ * https://github.com/louisremi/jquery-smartresize
+ *
+ * Copyright 2012 @louis_remi
+ * Licensed under the MIT license.
+ *
+ * This saved you an hour of work? 
+ * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
+ */
+(function($) {
+
+var $event = $.event,
+	$special,
+	resizeTimeout;
+
+$special = $event.special.debouncedresize = {
+	setup: function() {
+		$( this ).on( "resize", $special.handler );
+	},
+	teardown: function() {
+		$( this ).off( "resize", $special.handler );
+	},
+	handler: function( event, execAsap ) {
+		// Save the context
+		var context = this,
+			args = arguments,
+			dispatch = function() {
+				// set correct event type
+				event.type = "debouncedresize";
+				$event.dispatch.apply( context, args );
+			};
+
+		if ( resizeTimeout ) {
+			clearTimeout( resizeTimeout );
+		}
+
+		execAsap ?
+			dispatch() :
+			resizeTimeout = setTimeout( dispatch, $special.threshold );
+	},
+	threshold: 150
+};
+
+})(jQuery);