AMBARI-11064 Widgets: Graph change API calls to use null padding rather than zero padding (graphs are misleading for recent data points as they are shown as zero when there's no data). (atkach)

ambari-web/app/utils/ajax/ajax.js

@@ -2496,7 +2496,7 @@ var urls = {
   },
 
   'widgets.serviceComponent.metrics.get': {
-    real: '/clusters/{clusterName}/services/{serviceName}/components/{componentName}?fields={metricPaths}',
+    real: '/clusters/{clusterName}/services/{serviceName}/components/{componentName}?fields={metricPaths}&format=null_padding',
     mock: '/data/metrics/{serviceName}/Append_num_ops_&_Delete_num_ops.json'
   },
 
@@ -2506,12 +2506,12 @@ var urls = {
   },
 
   'widgets.hostComponent.metrics.get': {
-    real: '/clusters/{clusterName}/hosts/{hostName}/host_components/{componentName}?fields={metricPaths}',
+    real: '/clusters/{clusterName}/hosts/{hostName}/host_components/{componentName}?fields={metricPaths}&format=null_padding',
     mock: '/data/metrics/{serviceName}/Append_num_ops.json'
   },
 
   'widgets.hosts.metrics.get': {
-    real: '/clusters/{clusterName}/hosts?fields={metricPaths}',
+    real: '/clusters/{clusterName}/hosts?fields={metricPaths}&format=null_padding',
     mock: '/data/metrics/{serviceName}/Append_num_ops.json'
   },
 

ambari-web/app/views/common/chart/linear_time.js

@@ -539,7 +539,7 @@ App.ChartLinearTimeView = Ember.View.extend({
       }
     }
 
-    var _graph = new Rickshaw.Graph({
+    var _graph = new Rickshaw.GraphReopened({
       height: height,
       width: width,
       element: chartElement,
@@ -923,4 +923,71 @@ App.ChartLinearTimeView.CreateRateFormatter = function (unitsPrefix, valueFormat
     value = valueFormatter(value) + suffix;
     return value;
   };
+};
+
+Rickshaw.GraphReopened = function(a){
+  Rickshaw.Graph.call(this, a);
+};
+
+//reopened in order to exclude "null" value from validation
+Rickshaw.GraphReopened.prototype = Object.create(Rickshaw.Graph.prototype, {
+  validateSeries : {
+    value: function(series) {
+
+      if (!(series instanceof Array) && !(series instanceof Rickshaw.Series)) {
+        var seriesSignature = Object.prototype.toString.apply(series);
+        throw "series is not an array: " + seriesSignature;
+      }
+
+      var pointsCount;
+
+      series.forEach( function(s) {
+
+        if (!(s instanceof Object)) {
+          throw "series element is not an object: " + s;
+        }
+        if (!(s.data)) {
+          throw "series has no data: " + JSON.stringify(s);
+        }
+        if (!(s.data instanceof Array)) {
+          throw "series data is not an array: " + JSON.stringify(s.data);
+        }
+
+        pointsCount = pointsCount || s.data.length;
+
+        if (pointsCount && s.data.length != pointsCount) {
+          throw "series cannot have differing numbers of points: " +
+          pointsCount	+ " vs " + s.data.length + "; see Rickshaw.Series.zeroFill()";
+        }
+      })
+    },
+    enumerable: true,
+    configurable: false,
+    writable: false
+  }
+});
+
+//show no line if point is "null"
+Rickshaw.Graph.Renderer.Line.prototype.seriesPathFactory = function() {
+
+  var graph = this.graph;
+
+  return d3.svg.line()
+    .x( function(d) { return graph.x(d.x) } )
+    .y( function(d) { return graph.y(d.y) } )
+    .defined(function(d) { return d.y!=null; })
+    .interpolate(this.graph.interpolation).tension(this.tension);
+};
+
+//show no area if point is null
+Rickshaw.Graph.Renderer.Stack.prototype.seriesPathFactory = function() {
+
+  var graph = this.graph;
+
+  return d3.svg.area()
+    .x( function(d) { return graph.x(d.x) } )
+    .y0( function(d) { return graph.y(d.y0) } )
+    .y1( function(d) { return graph.y(d.y + d.y0) } )
+    .defined(function(d) { return d.y!=null; })
+    .interpolate(this.graph.interpolation).tension(this.tension);
 };

ambari-web/app/views/common/widget/graph_widget_view.js

@@ -106,7 +106,8 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
       dataLength = -1,
       beforeCompute,
       result = {},
-      isDataCorrupted = false;
+      isDataCorrupted = false,
+      isPointNull = false;
 
     //replace values with metrics data
     expression.match(this.get('VALUE_NAME_REGEX')).forEach(function (match) {
@@ -127,11 +128,13 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
         this.adjustData(dataLinks, dataLength);
       }
       for (var i = 0, timestamp; i < dataLength; i++) {
+        isPointNull = false;
         beforeCompute = expression.replace(this.get('VALUE_NAME_REGEX'), function (match) {
           timestamp = dataLinks[match][i][1];
+          isPointNull = (isPointNull) ? true : (Em.isNone(dataLinks[match][i][0]));
           return dataLinks[match][i][0];
         });
-        var dataLinkPointValue = window.isNaN(Number(window.eval(beforeCompute))) ? 0 : Number(window.eval(beforeCompute));
+        var dataLinkPointValue = isPointNull ? null : Number(window.eval(beforeCompute));
         value.push([dataLinkPointValue, timestamp]);
       }
     }
@@ -149,7 +152,7 @@ App.GraphWidgetView = Em.View.extend(App.WidgetMixin, {
   adjustData: function(dataLinks, length) {
     //series with full data taken as original
     var original = [];
-    var substituteValue = 0;
+    var substituteValue = null;
 
     for (var i in dataLinks) {
       if (dataLinks[i].length === length) {

ambari-web/test/views/common/widget/graph_widget_view_test.js

@@ -55,7 +55,7 @@ describe('App.GraphWidgetView', function () {
         },
         result:  {
           s1: [[1, 0]],
-          s2: [[0, 0]]
+          s2: [[null, 0]]
         }
       },
       {
@@ -69,7 +69,7 @@ describe('App.GraphWidgetView', function () {
         },
         result:  {
           s1: [[1, 0], [2, 1], [3, 2]],
-          s2: [[1, 0], [0, 1], [0, 2]]
+          s2: [[1, 0], [null, 1], [null, 2]]
         }
       },
       {
@@ -83,7 +83,7 @@ describe('App.GraphWidgetView', function () {
         },
         result:  {
           s1: [[1, 0], [2, 1], [3, 2]],
-          s2: [[0, 0], [0, 1], [3, 2]]
+          s2: [[null, 0], [null, 1], [3, 2]]
         }
       },
       {
@@ -97,7 +97,7 @@ describe('App.GraphWidgetView', function () {
         },
         result:  {
           s1: [[1, 0], [2, 1], [3, 2]],
-          s2: [[0, 0], [1, 1], [0, 2]]
+          s2: [[null, 0], [1, 1], [null, 2]]
         }
       },
       {
@@ -112,8 +112,8 @@ describe('App.GraphWidgetView', function () {
         },
         result:  {
           s1: [[1, 0], [2, 1], [3, 2]],
-          s2: [[0, 0], [1, 1], [0, 2]],
-          s3: [[0, 0], [0, 1], [1, 2]]
+          s2: [[null, 0], [1, 1], [null, 2]],
+          s3: [[null, 0], [null, 1], [1, 2]]
         }
       }
     ];