added cadvisor meter for host and services

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+LATEST
+------------------
+
+### Added
+- Updated cAdvisor meter for host and services
+
+
+
 0.2.4 - 2014-10-10
 ------------------
 

app/assets/javascripts/init.js

@@ -37,7 +37,9 @@
 
     $('.service-edit-form').progressiveForm();
 
-    $('aside.host').hostHealth();
+    $('aside.metrics').hostHealth();
+
+    $('.service-details .state span.metrics').serviceHealth();
 
     $('.service-help-icon').contextHelp();
 

app/assets/javascripts/jquery.docker_run/jquery.docker_run.js

@@ -141,7 +141,7 @@
         var $containerPath = $(element).find(base.options.volumeContainerPathSelector);
         if ($containerPath.length == 1) {
           volumes.push({
-            hostPath: base.extractText($hostPath),
+            hostPath: ($hostPath.length == 1) ? base.extractText($hostPath) : '',
             containerPath: base.extractText($containerPath)
           });
         }

app/assets/javascripts/jquery.health/jquery.health_graph.js

@@ -0,0 +1,66 @@
+(function($) {
+
+
+  $.PMX.HealthGraph = function($el, options) {
+    var base = this;
+
+    base.$el = $el;
+
+    base.defaultOptions = {
+      cpuSelector: '.health .cpu .bar',
+      memSelector: '.health .mem .bar',
+      maxWidth: 60
+    };
+
+    base.init = function() {
+      base.options = $.extend({}, base.defaultOptions, options);
+    };
+
+    base.calculateHealth = function(data) {
+      var datum = [
+        {
+          'element': base.$el.find(base.options.cpuSelector),
+          'percent': data.overall_cpu.percent
+        },
+        {
+          'element': base.$el.find(base.options.memSelector),
+          'percent': data.overall_mem.percent
+        }
+      ];
+
+      datum.forEach(function(item) {
+        base.healthColor(item.element, item.percent);
+        base.datumSize(item.element, item.percent);
+      });
+    };
+
+    base.datumSize = function($el, percent) {
+      $el.animate({
+        'width': Math.ceil((percent / 100)  * base.options.maxWidth) + 'px'
+      }, 600);
+    };
+
+    base.healthColor = function($el, percent) {
+      $el.removeClass('good warning danger').addClass(base.colorLevel(percent));
+    };
+
+    base.colorLevel = function(percentage) {
+      if (percentage >= 90) {
+        return 'danger';
+      }
+
+      if (percentage >= 75) {
+        return 'warning';
+      }
+
+      return 'good';
+    };
+  };
+
+  $.fn.healthGraph = function(options){
+    return this.each(function(){
+      (new $.PMX.HealthGraph($(this), options)).init();
+    });
+  };
+
+})(jQuery);

app/assets/javascripts/jquery.health/jquery.host_health.js

@@ -0,0 +1,43 @@
+(function($) {
+  $.PMX.HostHealth = function($el, options) {
+    var base = this;
+
+    base.$el = $el;
+
+    base.defaultOptions = {
+      baseUrl: '/host_health',
+      interval: 6 * 1000
+    };
+
+    base.init = function() {
+      base.options = $.extend({}, base.defaultOptions, options);
+      base.buildGraph();
+      base.initiateRequest();
+    };
+
+    base.buildGraph = function() {
+      base.graph = new $.PMX.HealthGraph(base.$el, base.options);
+      base.graph.init();
+    };
+
+    base.initiateRequest = function() {
+      $.ajax({
+        url: base.options.baseUrl,
+        headers: {
+          'Accept': 'application/json'
+        }
+      }).success(function(response) {
+        base.graph.calculateHealth(response);
+      }).always(function() {
+        if (base.timer !== null) { clearTimeout(base.timer); }
+        base.timer = setTimeout(base.initiateRequest, base.options.interval);
+      });
+    };
+  };
+
+  $.fn.hostHealth = function(options){
+    return this.each(function(){
+      (new $.PMX.HostHealth($(this), options)).init();
+    });
+  };
+})(jQuery);

app/assets/javascripts/jquery.health/jquery.service_health.js

@@ -0,0 +1,68 @@
+(function($) {
+  $.PMX.ServiceHealth = function($el, options) {
+    var base = this;
+
+    base.$el = $el;
+
+    base.defaultOptions = {
+      baseUrl: '/service_health',
+      serviceData: 'data-service-name',
+      $dockerStatus: $('.service-details .service-status'),
+      $metricLink: $('.service-details .metric-details')
+    };
+
+    base.init = function() {
+      base.options = $.extend({}, base.defaultOptions, options);
+      base.hideHealth();
+      base.buildGraph();
+      base.bindEvents();
+    };
+
+    base.buildGraph = function() {
+      base.graph = new $.PMX.HealthGraph(base.$el, base.options);
+      base.graph.init();
+    };
+
+    base.bindEvents = function () {
+      base.options.$dockerStatus.on('update-service-status', base.checkStatusHandler);
+    };
+
+    base.showHealth = function() {
+      base.options.$metricLink.show();
+      base.$el.show();
+      base.initiateRequest();
+    };
+
+    base.hideHealth = function() {
+      base.options.$metricLink.hide();
+      base.$el.hide();
+    };
+
+    base.checkStatusHandler = function(_, response) {
+      (response.sub_state === 'running') ? base.showHealth() : base.hideHealth();
+    };
+
+    base.healthUrl = function() {
+      var serviceName = base.$el.attr(base.options.serviceData);
+
+      return base.options.baseUrl + '/' + serviceName;
+    };
+
+    base.initiateRequest = function() {
+      $.ajax({
+        url: base.healthUrl(),
+        headers: {
+          'Accept': 'application/json'
+        }
+      }).success(function(response) {
+        base.graph.calculateHealth(response);
+      });
+    };
+  };
+
+  $.fn.serviceHealth = function(options){
+    return this.each(function(){
+      (new $.PMX.ServiceHealth($(this), options)).init();
+    });
+  };
+})(jQuery);