AMBARI-6431. Individual flume graph data not loading correctly. (akovalenko)

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

@@ -1574,8 +1574,13 @@ var urls = {
     }
   },
   'host.host_component.flume.metrics.timeseries': {
-    'real': '/clusters/{clusterName}/hosts/{hostName}/host_components/FLUME_HANDLER?fields=metrics/flume/flume/{flumeComponent}/*/{flumeComponentMetric}[{fromSeconds},{toSeconds},{stepSeconds}]',
-    'mock': ''
+    'real': '',
+    'mock': '',
+    format: function (data) {
+      return {
+        url: data.url
+      }
+    }
   },
   'host.host_components.filtered': {
     'real': '/clusters/{clusterName}/hosts?{fields}',

ambari-web/app/views/main/service/info/metrics/flume/flume_metric_graph.js

@@ -33,6 +33,7 @@ App.ChartServiceFlumeMetricGraph = App.ChartLinearTimeView.extend({
   metricType: null,
   metricName: null,
   hostName: null,
+  metricItems: null,
 
   id: function(){
     return "service-metrics-flume-metric-graph-" + this.get('metricType') + '-' + this.get('metricName');
@@ -46,9 +47,15 @@ App.ChartServiceFlumeMetricGraph = App.ChartLinearTimeView.extend({
 
   getDataForAjaxRequest: function() {
     var data = this._super();
-    data.flumeComponentMetric = this.get('metricName');
-    data.flumeComponent = this.get('metricType');
-    data.hostName = this.get('hostName');
+
+    var urlFields = '';
+    this.get('metricItems').forEach(function (metricItem, index) {
+      urlFields += index === 0 ? '' : ',';
+      urlFields += 'metrics/flume/flume/' + this.get('metricType') + '/' + metricItem + '/' + this.get('metricName') +
+          '[' + data.fromSeconds + ',' + data.toSeconds + ',' + data.stepSeconds + ']'
+    }, this);
+
+    data.url = App.get('apiPrefix') + '/clusters/' + App.get('clusterName') + '/hosts/' + this.get('hostName') + '/host_components/FLUME_HANDLER?fields=' + urlFields;
     return data;
   },
 

ambari-web/app/views/main/service/info/metrics/flume/flume_metric_graphs.js

@@ -20,43 +20,18 @@ require('views/main/service/service');
 
 App.MainServiceInfoFlumeGraphsView = App.MainServiceInfoSummaryMetricGraphsView.extend({
 
-  serviceMetricGraphs: function() {
+  serviceMetricGraphs: [],
+
+  loadMetrics: function () {
     var graphRows = [];
     var viewData = this.get('viewData');
     if (viewData != null) {
       var metricType = viewData.metricType;
       var hostName = viewData.agent.get('hostName');
-      var metricNamesGatherer = {
-        success: function(data) {
-          var metricNames = {};
-          if (data != null && data.metrics != null && data.metrics.flume != null && data.metrics.flume.flume != null && data.metrics.flume.flume[metricType] != null) {
-            for ( var name in data.metrics.flume.flume[metricType]) {
-              for ( var metricName in data.metrics.flume.flume[metricType][name]) {
-                metricNames[metricName] = name;
-              }
-            }
-          }
-          // Now that we have collected all metric names, we create
-          // views for each of them and store them 4 in a row.
-          graphRows.push([]);
-          var graphs = graphRows[0];
-          for (var metricName in metricNames) {
-            if (graphs.length > 3) {
-              graphRows.push([]);
-              graphs = graphRows[graphRows.length - 1];
-            }
-            graphs.push(App.ChartServiceFlumeMetricGraph.extend({
-              metricType: metricType,
-              metricName: metricName,
-              hostName: hostName
-            }));
-          }
-        }
-      };
       App.ajax.send({
         'name': 'host.host_component.flume.metrics',
-        'sender': metricNamesGatherer,
-        'success': 'success',
+        'sender': this,
+        'success': 'onLoadMetricsSuccess',
         'data': {
           async: false,
           hostName: hostName,
@@ -65,6 +40,44 @@ App.MainServiceInfoFlumeGraphsView = App.MainServiceInfoSummaryMetricGraphsView.
       });
     }
     return graphRows;
-  }.property('viewData', 'metricType')
+  }.observes('viewData', 'metricType'),
+
+  onLoadMetricsSuccess: function (data) {
+    var graphRows = [];
+    var viewData = this.get('viewData');
+    var metricType = viewData.metricType;
+    var hostName = viewData.agent.get('hostName');
+    var metricNames = {};
+    var metricItems = [];
+    if (data != null && data.metrics != null && data.metrics.flume != null && data.metrics.flume.flume != null && data.metrics.flume.flume[metricType] != null) {
+      for (var name in data.metrics.flume.flume[metricType]) {
+        for (var metricName in data.metrics.flume.flume[metricType][name]) {
+          metricNames[metricName] = name;
+        }
+        metricItems.push(name);
+      }
+    }
+    // Now that we have collected all metric names, we create
+    // views for each of them and store them 4 in a row.
+    graphRows.push([]);
+    var graphs = graphRows[0];
+    for (var metricName in metricNames) {
+      if (graphs.length > 3) {
+        graphRows.push([]);
+        graphs = graphRows[graphRows.length - 1];
+      }
+      graphs.push(App.ChartServiceFlumeMetricGraph.extend({
+        metricType: metricType,
+        metricName: metricName,
+        hostName: hostName,
+        metricItems: metricItems
+      }));
+    }
+    this.set('serviceMetricGraphs', graphRows);
+  },
+
+  didInsertElement: function () {
+    this.loadMetrics();
+  }
 
 });