Add differential chart option to charts

ManageIQ · Jun 6, 2017 · 8029d14 · 8029d14
1 parent e2865c1
commit 8029d14
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 23 deletions.
diff --git a/app/assets/javascripts/controllers/live_metrics/ad_hoc_metrics_controller.js b/app/assets/javascripts/controllers/live_metrics/ad_hoc_metrics_controller.js
@@ -1,16 +1,17 @@
 /* global miqHttpInject */
-ManageIQ.angular.app.controller('adHocMetricsController', ['$http', '$window', 'miqService',
+ManageIQ.angular.app.controller('adHocMetricsController', ['$http', '$window', '$timeout', 'miqService',
   'metricsUtilsFactory', 'metricsHttpFactory', 'metricsConfigFactory', 'metricsParseUrlFactory',
-  function($http, $window, miqService, metricsUtilsFactory, metricsHttpFactory, metricsConfigFactory, metricsParseUrlFactory) {
+  function($http, $window, $timeout, miqService, metricsUtilsFactory, metricsHttpFactory, metricsConfigFactory, metricsParseUrlFactory) {
     var dash = this;
-    var utils = metricsUtilsFactory(dash);
+    var utils = metricsUtilsFactory(dash, $timeout);
     var httpUtils = metricsHttpFactory(dash, $http, utils, miqService);
 
     dash.getTenants = httpUtils.getTenants;
     dash.refreshList = httpUtils.refreshList;
     dash.refreshGraph = httpUtils.refreshGraph;
     dash.setFilterOptions = utils.setFilterOptions;
     dash.metricPrefix = utils.metricPrefix;
+    dash.calcDataDifferentials = utils.calcDataDifferentials;
     dash.setPage = httpUtils.setPage;
 
     var pageSetup = function() {
@@ -146,6 +147,9 @@ ManageIQ.angular.app.controller('adHocMetricsController', ['$http', '$window', '
       dash.showGraph = true;
       dash.chartDataInit = false;
       httpUtils.refreshGraph();
+
+      // enable the bootstrapSwitch to run chart refresh
+      angular.element('[name=rate-switch]').bootstrapSwitch({ onSwitchChange: utils.redrawGraph });
     };
 
     dash.viewMetrics = function() {

diff --git a/app/assets/javascripts/controllers/live_metrics/util/metrics-http-factory.js b/app/assets/javascripts/controllers/live_metrics/util/metrics-http-factory.js
@@ -23,7 +23,7 @@ angular.module('miq.util').factory('metricsHttpFactory', function() {
       dash.filterConfig.resultsCount = data.items;
     }
 
-    function refreshOneGraph(metricId, metricType, currentItem) {
+    function refreshOneGraph(currentItem) {
       var numberOfBucketsInChart = 300;
 
       var ends = dash.timeFilter.date.valueOf(); // javascript time is in milisec
@@ -37,12 +37,12 @@ angular.module('miq.util').factory('metricsHttpFactory', function() {
       }
 
       // hawkular time is in milisec (hawkular bucket_duration is in seconds)
-      var params = '&query=get_data&type=' + metricType + '&metric_id=' + metricId + '&ends=' + ends +
+      var params = '&query=get_data&type=' + currentItem.type + '&metric_id=' + currentItem.id + '&ends=' + ends +
                    '&starts=' + starts + '&bucket_duration=' + bucket_duration + 's';
 
       $http.get(dash.url + params)
         .then(function(response) {
-          utils.getContainerParamsData(metricId, currentItem, response); })
+          utils.getContainerParamsData(currentItem, response); })
         .catch(function(error) {
           dash.loadCount++;
           if (dash.loadCount >= dash.selectedItems.length) {
@@ -101,11 +101,10 @@ angular.module('miq.util').factory('metricsHttpFactory', function() {
       dash.chartData = {};
       dash.selectedItems = dash.items.filter(function(item) { return item.selected });
 
-      for (var i = 0; i < dash.selectedItems.length; i++) {
-        var metric_id = dash.selectedItems[i].id;
-        var metric_type = dash.selectedItems[i].type;
-        refreshOneGraph(metric_id, metric_type, i);
-      }
+      angular.forEach(dash.selectedItems, function(item, index) {
+        item.index = index;
+        refreshOneGraph(item);
+      });
     };
 
     var setPage = function(page) {

diff --git a/app/assets/javascripts/controllers/live_metrics/util/metrics-utils-factory.js b/app/assets/javascripts/controllers/live_metrics/util/metrics-utils-factory.js
@@ -1,7 +1,21 @@
 angular.module('miq.util').factory('metricsUtilsFactory', function() {
-  return function (dash) {
+  return function (dash, $timeout) {
     var UNKNOWN_ERROR_STR = __('Something is wrong, try reloading the page');
 
+    function calcDataDifferentials(data) {
+      var outData = [];
+
+      data.forEach(function(value, i) {
+        if ((value !== null) && (data[i + 1] !== null) && (typeof data[i + 1] !== 'undefined')) {
+          outData[i] = data[i + 1] - value;
+        } else {
+          outData[i] = null;
+        }
+      });
+
+      return outData;
+    }
+
     var checkResponse = function(response) {
       if (response.error || response.data.error || typeof response.data === 'string') {
         add_flash(response.error || response.data.error || UNKNOWN_ERROR_STR, 'error');
@@ -72,7 +86,7 @@ angular.module('miq.util').factory('metricsUtilsFactory', function() {
       }
     }
 
-    var getContainerParamsData = function(metricId, currentItem, response) {
+    var getContainerParamsData = function(currentItem, response) {
       'use strict';
       dash.loadCount++;
       if (dash.loadCount >= dash.selectedItems.length) {
@@ -83,15 +97,33 @@ angular.module('miq.util').factory('metricsUtilsFactory', function() {
         return;
       }
 
-      var data  = response.data.data;
-      var xData = data.map(function(d) { return d.start; });
-      var yData = data.map(function(d) { return d.avg || null; });
+      currentItem.responseData  = response.data.data.slice();
+      drawOneGraph(currentItem);
+    }
+
+    function redrawGraph() {
+      dash.selectedItems = dash.items.filter(function(item) { return item.selected });
+      $timeout(function () {
+        angular.forEach(dash.selectedItems, drawOneGraph);
+      }, 10);
+    }
+
+    function drawOneGraph(currentItem) {
+      var switchObj = angular.element('#rate-switch');
+      var showRate = switchObj.bootstrapSwitch('state');
+      var xData = currentItem.responseData.map(function(d) { return d.start; });
+      var yData = currentItem.responseData.map(function(d) { return d.avg || null; });
+
+      // if diff checkbox is on, do diff
+      if (showRate) {
+        yData = calcDataDifferentials(yData);
+      }
 
       xData.unshift('time');
-      yData.unshift(metricId);
+      yData.unshift(currentItem.id);
 
       dash.chartData.xData = xData;
-      dash.chartData['yData'+ currentItem] = yData;
+      dash.chartData['yData'+ currentItem.index] = yData;
 
       dash.chartDataInit = true;
     }
@@ -183,6 +215,8 @@ angular.module('miq.util').factory('metricsUtilsFactory', function() {
       getContainerDashboardData: getContainerDashboardData,
       checkResponse: checkResponse,
       setFilterOptions: setFilterOptions,
+      calcDataDifferentials: calcDataDifferentials,
+      redrawGraph: redrawGraph,
       metricPrefix: metricPrefix
     }
   }

diff --git a/app/assets/stylesheets/metrics.scss b/app/assets/stylesheets/metrics.scss
@@ -36,6 +36,9 @@
     }
     overflow-x: hidden;
     overflow-y: hidden;
+    .rate-switch {
+      margin-left: 5px;
+    }
     .bootstrap-select.btn-group {
       .dropdown-menu {
         margin-left: 5px;

diff --git a/app/views/ems_container/ad_hoc/_chart_view_form.html.haml b/app/views/ems_container/ad_hoc/_chart_view_form.html.haml
@@ -26,6 +26,13 @@
                                          "options"            => "dash.dateOptions",
                                          "date"               => "dash.timeFilter.date"}
 
+    .pull-left.rate-switch
+      %label
+        = _("Rate")
+        %input.bootstrap-switch.ad-hoc-refresh{"type" => "checkbox",
+                                               "name" => "rate-switch",
+                                               "id"   => "rate-switch"}
+
     %button.btn.btn-primary.pull-left{"type" => "button", "ng-click" => "dash.refreshGraph()"}
       = _("Refresh")
 

diff --git a/...ascripts/controllers/container_live_dashboard/container_live_dashboard_controller_spec.js b/...ascripts/controllers/container_live_dashboard/container_live_dashboard_controller_spec.js
@@ -24,8 +24,8 @@ describe('adHocMetricsController', function() {
   }));
 
   afterEach(function() {
-      $httpBackend.verifyNoOutstandingExpectation();
-      $httpBackend.verifyNoOutstandingRequest();
+    $httpBackend.verifyNoOutstandingExpectation();
+    $httpBackend.verifyNoOutstandingRequest();
   });
 
   describe('loading page data', function() {
@@ -59,15 +59,29 @@ describe('adHocMetricsController', function() {
 
       m = $controller.metricPrefix(10000, 'ms');
       expect(m.multiplier).toBe(Math.pow(10, -3));
-      expect(m.unitLable).toBe('s');
+      expect(m.unitLabel).toBe('s');
 
       m = $controller.metricPrefix(10000, 'ns');
       expect(m.multiplier).toBe(Math.pow(10, -9));
-      expect(m.unitLable).toBe('s');
+      expect(m.unitLabel).toBe('s');
 
       m = $controller.metricPrefix(10000, 's');
       expect(m.multiplier).toBe(Math.pow(10, -3));
-      expect(m.unitLable).toBe('Ks');
+      expect(m.unitLabel).toBe('Ks');
+    });
+
+    it('should calculate differentials currectly', function() {
+      var data = [1, 2, 3, 4, 5, 6];
+
+      data = $controller.calcDataDifferentials(data);
+      expect(data).toEqual([1, 1, 1, 1, 1, null]);
+    });
+
+    it('differentials should not fail on missing data', function() {
+      var data = [1, 2, null, 4, 5, 6];
+
+      data = $controller.calcDataDifferentials(data);
+      expect(data).toEqual([1, null, null, 1, 1, null]);
     });
   });
 });