AMBARI-1427. Add ability to increase the time range for the zoomed-in graphs beyond last one hour.

(yusaku)

git-svn-id: https://svn.apache.org/repos/asf/incubator/ambari/trunk@1446035 13f79535-47bb-0310-9956-ffa450edef68

CHANGES.txt

@@ -40,6 +40,9 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1427. Add ability to increase the time range for the zoomed-in graphs
+ beyond last one hour. (yusaku) 
+
  AMBARI-1375. Remove text from templates (main). (jaimin)
 
  AMBARI-1374. Add filter by alerts on the Hosts page. (jaimin)

ambari-web/app/messages.js

@@ -96,8 +96,17 @@ Em.I18n.translations = {
   
   'graphs.noData.title': 'No Data',
   'graphs.noData.message': 'There was no data available. Possible reasons include inaccessible Ganglia service.',
+  'graphs.noDataAtTime.message': 'No available data for the time period.',
   'graphs.error.title': 'Error',
   'graphs.error.message': 'There was a problem getting data for the chart ({0}: {1})',
+  'graphs.timeRange.hour': 'Last 1 hour',
+  'graphs.timeRange.twoHours': 'Last 2 hours',
+  'graphs.timeRange.fourHours': 'Last 4 hours',
+  'graphs.timeRange.twelveHours': 'Last 12 hours',
+  'graphs.timeRange.day': 'Last 24 hours',
+  'graphs.timeRange.week': 'Last 1 week',
+  'graphs.timeRange.month': 'Last 1 month',
+  'graphs.timeRange.year': 'Last 1 year',
 
   'users.userName.validationFail': 'Value should contains only letters and digits and start with letter',
 
@@ -437,6 +446,7 @@ Em.I18n.translations = {
   'hosts.host.add':'Add New Hosts',
   'hosts.host.back':'Back to Hosts',
   'hosts.table.noHosts':'No hosts to display',
+  'hosts.table.Search': 'Search:',
 
   'hosts.host.metrics.cpu':'CPU Usage',
   'hosts.host.metrics.disk':'Disk Usage',

ambari-web/app/styles/application.less

@@ -232,6 +232,27 @@ h1 {
   z-index: 1050;
 }
 
+.arrow-right {
+  display: inline-block;
+  margin: 0 0 20px 70px;
+  border-top: 70px solid transparent;
+  border-bottom: 70px solid transparent;
+  border-left: 20px solid transparent;
+}
+
+.arrow-left {
+  display: inline-block;
+  margin: 0 -10px 20px 3px;
+  border-top: 70px solid transparent;
+  border-bottom: 70px solid transparent;
+  border-right:20px solid transparent;
+}
+
+.visibleArrow {
+  border-right-color: #dedede;
+  border-left-color: #dedede;
+}
+
 #installer, #add-host, #add-service {
   h2 {
     margin-top: 0;
@@ -944,7 +965,7 @@ a:focus {
 }
 
 .modal-graph-line {
-  width: 790px;
+  width: 810px;
   .modal-body {
     min-height: 420px !important;
     overflow: hidden;
@@ -1051,6 +1072,9 @@ a:focus {
       background-color: #999 !important;
     }
   }
+  .rickshaw_legend:empty {
+    padding: 0;
+  }
   .rickshaw_graph {
     .x_tick{
       .title {
@@ -1072,6 +1096,15 @@ a:focus {
   }
 }
 
+.modal-body{
+  .show {
+    display: inline-block;
+  }
+  .time-label {
+    text-align: center;
+  }
+}
+
 .mini-chart{
   position: absolute;
   .chart-container{
@@ -1244,6 +1277,7 @@ table.graphs {
     top: 10px;
   }
   .box-header {
+    margin-left: 0;
     .btn-group {
       float: left;
     }

ambari-web/app/templates/main/host.hbs

@@ -18,9 +18,9 @@
 
 <div id="hosts">
 
-  <div class="box-header">
+  <div class="box-header row">
     <div class="pull-left">
-        <span>Search:&nbsp;</span>{{view Ember.TextField valueBinding="view.globalSearchValue"}}
+        <span>{{t hosts.table.Search}}&nbsp;</span>{{view Ember.TextField valueBinding="view.globalSearchValue"}}
     </div>
     {{#if App.isAdmin}}
     <div class="button-section pull-right">

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

@@ -142,7 +142,7 @@ App.ChartLinearTimeView = Ember.View.extend({
   },
 
   loadData: function() {
-    var validUrl = this.get('url');
+    var validUrl = this.getFormattedUrl();
     if (validUrl) {
       var hash = {};
       hash.url = validUrl;
@@ -303,7 +303,6 @@ App.ChartLinearTimeView = Ember.View.extend({
     }
     var seriesData = this.transformToSeries(jsonData);
 
-    if (this.checkSeries(seriesData)) {
       //if graph opened as modal popup
       var popup_path = $("#" + this.id + "-container" + this.get('popupSuffix'));
       var graph_container = $("#" + this.id + "-container");
@@ -318,6 +317,7 @@ App.ChartLinearTimeView = Ember.View.extend({
           $(value).children().remove();
         });
       }
+    if (this.checkSeries(seriesData)) {
       // Check container exists (may be not, if we go to another page and wait while graphs loading)
       if (graph_container.length) {
         this.draw(seriesData);
@@ -326,26 +326,49 @@ App.ChartLinearTimeView = Ember.View.extend({
     }
     else {
       this.set('isReady', true);
-      this._showMessage('info', this.t('graphs.noData.title'), this.t('graphs.noData.message'));
+      //if Axis X time interval is default(60 minutes)
+      if(this.get('timeUnitSeconds') === 3600){
+        this._showMessage('info', this.t('graphs.noData.title'), this.t('graphs.noData.message'));
+        this.set('hasData', false);
+      } else {
+        this._showMessage('info', this.t('graphs.noData.title'), this.t('graphs.noDataAtTime.message'));
+      }
       this.set('isPopup', false);
-      this.set('hasData', false);
     }
   },
 
   /**
-   * Returns a custom time unit for the graph's X axis. This is needed
-   * as Rickshaw's default time X axis uses UTC time, which can be confusing
-   * for users expecting locale specific time. This value defaults to
-   * App.ChartLinearTimeView.FifteenMinuteTimeUnit.
+   * Returns a custom time unit, that depends on X axis interval length, for the graph's X axis.
+   * This is needed as Rickshaw's default time X axis uses UTC time, which can be confusing
+   * for users expecting locale specific time.
    *
    * If <code>null</code> is returned, Rickshaw's default time unit is used.
    *
    * @type Function
    * @return Rickshaw.Fixtures.Time
-   * @default App.ChartLinearTimeView.FifteenMinuteTimeUnit
    */
-  localeTimeUnit: function(){
-    return App.ChartLinearTimeView.FifteenMinuteTimeUnit;
+  localeTimeUnit: function(timeUnitSeconds){
+    var timeUnit = new Rickshaw.Fixtures.Time();
+    switch (timeUnitSeconds){
+      case 604800:
+        timeUnit = timeUnit.unit('day');
+        break;
+      case 2592000:
+        timeUnit = timeUnit.unit('week');
+        break;
+      case 31104000:
+        timeUnit = timeUnit.unit('month');
+        break;
+      default:
+        timeUnit = {
+          name: timeUnitSeconds / 240 + ' minute',
+          seconds: timeUnitSeconds / 4,
+          formatter: function (d) {
+            return d.toLocaleString().match(/(\d+:\d+):/)[1];
+          }
+        };
+    }
+    return timeUnit;
   },
 
   /**
@@ -369,6 +392,26 @@ App.ChartLinearTimeView = Ember.View.extend({
           + "px");
     }
   },
+  /**
+   * temporary fix for incoming data for graph
+   * to shift data time to correct time point
+   */
+  dataShiftFix: function(data){
+    var nowTime = Math.round(new Date().getTime() / 1000);
+    data.forEach(function(series){
+      var l = series.data.length;
+      var shiftDiff = nowTime - series.data[l - 1].x;
+      if(shiftDiff > 3600){
+        for(var i = 0;i < l;i++){
+          series.data[i].x = series.data[i].x + shiftDiff;
+        }
+        series.data.unshift({
+          x: nowTime - this.get('timeUnitSeconds'),
+          y: 0
+        });
+      }
+    }, this);
+  },
 
   draw: function(seriesData) {
     var isPopup = this.get('isPopup');
@@ -378,6 +421,8 @@ App.ChartLinearTimeView = Ember.View.extend({
     }
     var palette = new Rickshaw.Color.Palette({ scheme: 'munin'});
 
+    this.dataShiftFix(seriesData);
+
     // var palette = new Rickshaw.Color.Palette({
     //   scheme: this._paletteScheme
     // });
@@ -467,7 +512,7 @@ App.ChartLinearTimeView = Ember.View.extend({
 
     xAxis = new Rickshaw.Graph.Axis.Time({
       graph: _graph,
-      timeUnit: this.localeTimeUnit()
+      timeUnit: this.localeTimeUnit(this.get('timeUnitSeconds'))
     });
 
     var orientation = 'right';
@@ -561,7 +606,6 @@ App.ChartLinearTimeView = Ember.View.extend({
     else {
       this.set('_graph', _graph);
     }
-    this.set('isPopup', false);
   },
 
 
@@ -586,13 +630,16 @@ App.ChartLinearTimeView = Ember.View.extend({
         '{{#if bodyClass}}{{view bodyClass}}',
         '{{else}}',
           '<div class="screensaver no-borders chart-container" {{bindAttr class="view.isReady:hide"}} ></div>',
+          '<div class="time-label" {{bindAttr class="view.isReady::hidden"}}>{{view.currentTimeState.name}}</div>',
+          '{{#if view.isTimePagingEnable}}<div class="arrow-left" {{bindAttr class="view.leftArrowVisible:visibleArrow"}} {{action "switchTimeBack" target="view"}}></div>{{/if}}',
           '<div id="'+this.get('id')+'-container'+this.get('popupSuffix')+'" class="chart-container chart-container'+this.get('popupSuffix')+' hide" {{bindAttr class="view.isReady:show"}} >',
             '<div id="'+this.get('id')+'-yaxis'+this.get('popupSuffix')+'" class="'+this.get('id')+'-yaxis chart-y-axis"></div>',
             '<div id="'+this.get('id')+'-xaxis'+this.get('popupSuffix')+'" class="'+this.get('id')+'-xaxis chart-x-axis"></div>',
             '<div id="'+this.get('id')+'-legend'+this.get('popupSuffix')+'" class="'+this.get('id')+'-legend chart-legend"></div>',
             '<div id="'+this.get('id')+'-chart'+this.get('popupSuffix')+'" class="'+this.get('id')+'-chart chart"></div>',
-            '<div id="'+this.get('id')+'-title'+this.get('popupSuffix')+'" class="'+this.get('id')+'-title chart-title">{{view.title}}</div>'+
+            '<div id="'+this.get('id')+'-title'+this.get('popupSuffix')+'" class="'+this.get('id')+'-title chart-title">{{view.title}}</div>',
           '</div>',
+        '{{#if view.isTimePagingEnable}}<div class="arrow-right" {{bindAttr class="view.rightArrowVisible:visibleArrow"}} {{action "switchTimeForward" "forward" target="view"}}></div>{{/if}}',
         '{{/if}}',
         '</div>',
         '<div class="modal-footer">',
@@ -610,13 +657,107 @@ App.ChartLinearTimeView = Ember.View.extend({
       onPrimary: function() {
         this.hide();
         self.set('isPopup', false);
-      }
+        self.set('timeUnitSeconds', 3600);
+      },
+      onClose: function(){
+        this.hide();
+        self.set('isPopup', false);
+        self.set('timeUnitSeconds', 3600);
+      },
+      /**
+       * check is time paging feature is enable for graph
+       */
+      isTimePagingEnable: function(){
+        return !self.get('isTimePagingDisable');
+      }.property(),
+      rightArrowVisible: function(){
+        return (this.get('isReady') && (this.get('currentTimeIndex') != 0))? true : false;
+      }.property('isReady', 'currentTimeIndex'),
+      leftArrowVisible: function(){
+        return (this.get('isReady') && (this.get('currentTimeIndex') != 7))? true : false;
+      }.property('isReady', 'currentTimeIndex'),
+      /**
+       * move graph back by time
+       * @param event
+       */
+      switchTimeBack: function(event){
+        var index = this.get('currentTimeIndex');
+        // 7 - number of last time state
+        if(index < 7){
+          this.reloadGraphByTime(++index);
+        }
+      },
+      /**
+       * move graph forward by time
+       * @param event
+       */
+      switchTimeForward: function(event){
+        var index = this.get('currentTimeIndex');
+        if(index > 0){
+          this.reloadGraphByTime(--index);
+        }
+      },
+      /**
+       * reload graph depending on the time
+       * @param index
+       */
+      reloadGraphByTime: function(index){
+        this.set('currentTimeIndex', index);
+        self.set('timeUnitSeconds', this.get('timeStates')[index].seconds);
+        self.loadData();
+      },
+      timeStates: [
+        {name: Em.I18n.t('graphs.timeRange.hour'), seconds: 3600},
+        {name: Em.I18n.t('graphs.timeRange.twoHours'), seconds: 7200},
+        {name: Em.I18n.t('graphs.timeRange.fourHours'), seconds: 14400},
+        {name: Em.I18n.t('graphs.timeRange.twelveHours'), seconds: 43200},
+        {name: Em.I18n.t('graphs.timeRange.day'), seconds: 86400},
+        {name: Em.I18n.t('graphs.timeRange.week'), seconds: 604800},
+        {name: Em.I18n.t('graphs.timeRange.month'), seconds: 2592000},
+        {name: Em.I18n.t('graphs.timeRange.year'), seconds: 31104000}
+      ],
+      currentTimeIndex: 0,
+      currentTimeState: function(){
+        return this.get('timeStates').objectAt(this.get('currentTimeIndex'));
+      }.property('currentTimeIndex')
     });
     Ember.run.next(function() {
       self.loadData();
       self.set('isPopupReady', false);
     });
-  }
+  },
+  /**
+   * return formatted URL that depends on timeUnit
+   * on host metrics depends on host name
+   * on MapReduce metrics depends on  jobTracker Node
+   * @return {String}
+   */
+  getFormattedUrl:function(){
+    var toSeconds = Math.round(new Date().getTime() / 1000);
+    var hostName = (this.get('content')) ? this.get('content.hostName') : "";
+    var nameNodeName = (App.HDFSService.find().objectAt(0)) ?
+      App.HDFSService.find().objectAt(0).get('nameNode').get('hostName') :
+      "";
+    var jobTrackerNode = (App.MapReduceService.find().objectAt(0))
+      ? App.MapReduceService.find().objectAt(0).get('jobTracker').get('hostName')
+      : "";
+    var timeUnit = this.get('timeUnitSeconds');
+
+    return App.formatUrl(
+      this.get('urlPrefix') + this.get('sourceUrl'),
+      {
+        toSeconds: toSeconds,
+        fromSeconds: toSeconds - timeUnit,
+        stepSeconds: 15,
+        hostName: hostName,
+        nameNodeName: nameNodeName,
+        jobTrackerNode: jobTrackerNode
+      },
+      this.get('mockUrl')
+    );
+  },
+  //60 minute interval on X axis.
+  timeUnitSeconds: 3600
 });
 
 /**
@@ -694,17 +835,4 @@ App.ChartLinearTimeView.TimeElapsedFormatter = function (millis) {
     }
   }
   return value;
-};
-
-/**
- * A time unit which can be used for showing 15 minute intervals on X axis.
- * 
- * @type Rickshaw.Fixtures.Time
- */
-App.ChartLinearTimeView.FifteenMinuteTimeUnit = {
-  name: '15 minute',
-  seconds: 60 * 15,
-  formatter: function (d) {
-    return d.toLocaleString().match(/(\d+:\d+):/)[1];
-  }
 };

ambari-web/app/views/main/dashboard/cluster_metrics/cpu.js

@@ -28,17 +28,12 @@ var App = require('app');
  */
 App.ChartClusterMetricsCPU = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-cpu",
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "?fields=metrics/cpu[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/cluster_metrics/cpu_1hr.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "?fields=metrics/cpu[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/cluster_metrics/cpu_1hr.json",
 
   title: Em.I18n.t('dashboard.clusterMetrics.cpu'),
   yAxisFormatter: App.ChartLinearTimeView.PercentageFormatter,
-  
+  isTimePagingDisable: true,
   transformToSeries: function (jsonData) {
     var seriesArray = [];
     if (jsonData && jsonData.metrics && jsonData.metrics.cpu) {

ambari-web/app/views/main/dashboard/cluster_metrics/load.js

@@ -29,14 +29,9 @@ var App = require('app');
  */
 App.ChartClusterMetricsLoad = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-load",
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "?fields=metrics/load[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/cluster_metrics/load_1hr.json"
-    );
-  }.property('clusterName').volatile(),
-
+  sourceUrl: "?fields=metrics/load[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/cluster_metrics/load_1hr.json",
+  isTimePagingDisable: true,
   renderer: 'line',
   title: Em.I18n.t('dashboard.clusterMetrics.load'),
   

ambari-web/app/views/main/dashboard/cluster_metrics/memory.js

@@ -28,14 +28,9 @@ var App = require('app');
  */
 App.ChartClusterMetricsMemory = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-memory",
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "?fields=metrics/memory[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/cluster_metrics/memory_1hr.json"
-    );
-  }.property('clusterName').volatile(),
-
+  sourceUrl: "?fields=metrics/memory[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/cluster_metrics/memory_1hr.json",
+  isTimePagingDisable: true,
   title: Em.I18n.t('dashboard.clusterMetrics.memory'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',

ambari-web/app/views/main/dashboard/cluster_metrics/network.js

@@ -29,14 +29,9 @@ var App = require('app');
  */
 App.ChartClusterMetricsNetwork = App.ChartLinearTimeView.extend({
   id: "cluster-metrics-network",
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "?fields=metrics/network[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/cluster_metrics/network_1hr.json"
-    );
-  }.property('clusterName').volatile(),
-
+  sourceUrl: "?fields=metrics/network[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/cluster_metrics/network_1hr.json",
+  isTimePagingDisable: true,
   title: Em.I18n.t('dashboard.clusterMetrics.network'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',

ambari-web/app/views/main/host/metrics/cpu.js

@@ -31,16 +31,8 @@ App.ChartHostMetricsCPU = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('hosts.host.metrics.cpu'),
   yAxisFormatter: App.ChartLinearTimeView.PercentageFormatter,
 
-
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/cpu/cpu_user[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_wio[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_nice[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_aidle[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_system[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_idle[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/cpu.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/cpu/cpu_user[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_wio[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_nice[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_aidle[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_system[{fromSeconds},{toSeconds},{stepSeconds}],metrics/cpu/cpu_idle[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/cpu.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/host/metrics/disk.js

@@ -31,15 +31,8 @@ App.ChartHostMetricsDisk = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('hosts.host.metrics.disk'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/disk/disk_total[{fromSeconds},{toSeconds},{stepSeconds}],metrics/disk/disk_free[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/disk.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/disk/disk_total[{fromSeconds},{toSeconds},{stepSeconds}],metrics/disk/disk_free[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/disk.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/host/metrics/load.js

@@ -30,15 +30,8 @@ App.ChartHostMetricsLoad = App.ChartLinearTimeView.extend({
   id: "host-metrics-load",
   title: Em.I18n.t('hosts.host.metrics.load'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/load/load_fifteen[{fromSeconds},{toSeconds},{stepSeconds}],metrics/load/load_one[{fromSeconds},{toSeconds},{stepSeconds}],metrics/load/load_five[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/load.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/load/load_fifteen[{fromSeconds},{toSeconds},{stepSeconds}],metrics/load/load_one[{fromSeconds},{toSeconds},{stepSeconds}],metrics/load/load_five[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/load.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/host/metrics/memory.js

@@ -31,16 +31,8 @@ App.ChartHostMetricsMemory = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('hosts.host.metrics.memory'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/memory/swap_free[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_shared[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_free[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_cached[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_buffers[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        clusterName: this.get('clusterName'),
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/memory.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/memory/swap_free[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_shared[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_free[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_cached[{fromSeconds},{toSeconds},{stepSeconds}],metrics/memory/mem_buffers[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/memory.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/host/metrics/network.js

@@ -31,15 +31,8 @@ App.ChartHostMetricsNetwork = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('hosts.host.metrics.network'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/network/bytes_in[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/bytes_out[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/pkts_in[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/pkts_out[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/network.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/network/bytes_in[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/bytes_out[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/pkts_in[{fromSeconds},{toSeconds},{stepSeconds}],metrics/network/pkts_out[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/network.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/host/metrics/processes.js

@@ -30,15 +30,8 @@ App.ChartHostMetricsProcesses = App.ChartLinearTimeView.extend({
   id: "host-metrics-processes",
   title: Em.I18n.t('hosts.host.metrics.processes'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}?fields=metrics/process/proc_total[{fromSeconds},{toSeconds},{stepSeconds}],metrics/process/proc_run[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: this.get('content').get('hostName')
-      },
-      "/data/hosts/metrics/processes.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{hostName}?fields=metrics/process/proc_total[{fromSeconds},{toSeconds},{stepSeconds}],metrics/process/proc_run[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/hosts/metrics/processes.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/cluster_requests.js

@@ -29,14 +29,8 @@ var App = require('app');
 App.ChartServiceMetricsHBASE_ClusterRequests = App.ChartLinearTimeView.extend({
   id: "service-metrics-hbase-cluster-requests",
   title: Em.I18n.t('services.service.info.metrics.hbase.clusterRequests'),
-
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/cluster_requests[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/cluster_requests.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/cluster_requests[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/cluster_requests.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/hlog_split_size.js

@@ -31,13 +31,8 @@ App.ChartServiceMetricsHBASE_HlogSplitSize = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hbase.hlogSplitSize'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
 
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/splitSize_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/hlog_split_size.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/splitSize_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/hlog_split_size.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/hlog_split_time.js

@@ -31,13 +31,8 @@ App.ChartServiceMetricsHBASE_HlogSplitTime = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hbase.hlogSplitTime'),
   yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
 
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/splitTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/hlog_split_time.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_MASTER?fields=metrics/hbase/master/splitTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/hlog_split_time.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/regionserver_queuesize.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsHBASE_RegionServerQueueSize = App.ChartLinearTimeView.ext
   id: "service-metrics-hbase-regionserver-queuesize",
   title: Em.I18n.t('services.service.info.metrics.hbase.regionServerQueueSize'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/flushQueueSize[{fromSeconds},{toSeconds},{stepSeconds}],metrics/hbase/regionserver/compactionQueueSize[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/regionserver_queuesize.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/flushQueueSize[{fromSeconds},{toSeconds},{stepSeconds}],metrics/hbase/regionserver/compactionQueueSize[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/regionserver_queuesize.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/regionserver_regions.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsHBASE_RegionServerRegions = App.ChartLinearTimeView.exten
   id: "service-metrics-hbase-regionserver-regions",
   title: Em.I18n.t('services.service.info.metrics.hbase.regionServerRegions'),
 
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/regions[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/regionserver_regions.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/regions[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/regionserver_regions.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hbase/regionserver_rw_requests.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsHBASE_RegionServerReadWriteRequests = App.ChartLinearTime
   id: "service-metrics-hbase-regionserver-rw-requests",
   title: Em.I18n.t('services.service.info.metrics.hbase.regionServerRequests'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/readRequestsCount[{fromSeconds},{toSeconds},{stepSeconds}],metrics/hbase/regionserver/writeRequestsCount[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hbase/regionserver_rw_requests.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HBASE/components/HBASE_REGIONSERVER?fields=metrics/hbase/regionserver/readRequestsCount[{fromSeconds},{toSeconds},{stepSeconds}],metrics/hbase/regionserver/writeRequestsCount[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hbase/regionserver_rw_requests.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/block_status.js

@@ -30,17 +30,8 @@ App.ChartServiceMetricsHDFS_BlockStatus = App.ChartLinearTimeView.extend({
   id: "service-metrics-hdfs-block-status",
   title: Em.I18n.t('services.service.info.metrics.hdfs.blockStatus'),
   renderer: 'line',
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/dfs/FSNamesystem/PendingReplicationBlocks[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/UnderReplicatedBlocks[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/block_status.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/dfs/FSNamesystem/PendingReplicationBlocks[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/UnderReplicatedBlocks[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl:"/data/services/metrics/hdfs/block_status.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/file_operations.js

@@ -30,17 +30,8 @@ App.ChartServiceMetricsHDFS_FileOperations = App.ChartLinearTimeView.extend({
   id: "service-metrics-hdfs-file-operations",
   title: Em.I18n.t('services.service.info.metrics.hdfs.fileOperations'),
   renderer: 'line',
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/dfs/namenode/FileInfoOps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/namenode/CreateFileOps[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/file_operations.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/dfs/namenode/FileInfoOps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/namenode/CreateFileOps[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/file_operations.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/gc.js

@@ -31,17 +31,8 @@ App.ChartServiceMetricsHDFS_GC = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hdfs.gc'),
   yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
 
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/jvm/gcTimeMillis[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/gc.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/jvm/gcTimeMillis[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/gc.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/io.js

@@ -31,13 +31,8 @@ App.ChartServiceMetricsHDFS_IO = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hdfs.io'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/HDFS/components/DATANODE?fields=metrics/dfs/datanode/bytes_written[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/datanode/bytes_read[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/hdfs/io.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/HDFS/components/DATANODE?fields=metrics/dfs/datanode/bytes_written[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/datanode/bytes_read[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/io.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/jvm_heap.js

@@ -31,17 +31,8 @@ App.ChartServiceMetricsHDFS_JVMHeap = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hdfs.jvmHeap'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/jvm/memNonHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memNonHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/jvm_heap.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl:"/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/jvm/memNonHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memNonHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/jvm_heap.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/jvm_threads.js

@@ -30,17 +30,8 @@ App.ChartServiceMetricsHDFS_JVMThreads = App.ChartLinearTimeView.extend({
   id: "service-metrics-hdfs-jvm-threads",
   title: Em.I18n.t('services.service.info.metrics.hdfs.jvmThreads'),
   renderer: 'line',
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/jvm/threadsRunnable[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsBlocked[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsWaiting[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsTimedWaiting[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/jvm_threads.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/jvm/threadsRunnable[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsBlocked[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsWaiting[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsTimedWaiting[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/jvm_threads.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/rpc.js

@@ -30,18 +30,8 @@ App.ChartServiceMetricsHDFS_RPC = App.ChartLinearTimeView.extend({
   id: "service-metrics-hdfs-rpc",
   title: Em.I18n.t('services.service.info.metrics.hdfs.rpc'),
   yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
-
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/rpc/RpcQueueTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/rpc.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/rpc/RpcQueueTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/rpc.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/hdfs/space_utilization.js

@@ -31,17 +31,8 @@ App.ChartServiceMetricsHDFS_SpaceUtilization = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.hdfs.spaceUtilization'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    var hdfsService = App.HDFSService.find().objectAt(0);
-    var nameNodeHostName = hdfsService.get('nameNode').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/NAMENODE?fields=metrics/dfs/FSNamesystem/CapacityRemainingGB[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/CapacityUsedGB[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/CapacityTotalGB[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: nameNodeHostName
-      },
-      "/data/services/metrics/hdfs/space_utilization.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{nameNodeName}/host_components/NAMENODE?fields=metrics/dfs/FSNamesystem/CapacityRemainingGB[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/CapacityUsedGB[{fromSeconds},{toSeconds},{stepSeconds}],metrics/dfs/FSNamesystem/CapacityTotalGB[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/hdfs/space_utilization.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/gc.js

@@ -30,18 +30,8 @@ App.ChartServiceMetricsMapReduce_GC = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-gc",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.gc'),
   yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
-
-  url: function () {
-    var mrService = App.MapReduceService.find().objectAt(0);
-    var jtHostName = mrService.get('jobTracker').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/JOBTRACKER?fields=metrics/jvm/gcTimeMillis[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: jtHostName
-      },
-      "/data/services/metrics/mapreduce/gc.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{jobTrackerNode}/host_components/JOBTRACKER?fields=metrics/jvm/gcTimeMillis[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/gc.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/jobs_status.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsMapReduce_JobsStatus = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-jobs-status",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.jobsStatus'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/jobs_completed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_preparing[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_failed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_submitted[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_failed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_running[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/mapreduce/jobs_status.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/jobs_completed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_preparing[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_failed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_submitted[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_failed[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/jobs_running[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/jobs_status.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/jvm_heap.js

@@ -31,17 +31,8 @@ App.ChartServiceMetricsMapReduce_JVMHeap = App.ChartLinearTimeView.extend({
   title: Em.I18n.t('services.service.info.metrics.mapreduce.jvmHeap'),
   yAxisFormatter: App.ChartLinearTimeView.BytesFormatter,
   renderer: 'line',
-  url: function () {
-    var mrService = App.MapReduceService.find().objectAt(0);
-    var jtHostName = mrService.get('jobTracker').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/JOBTRACKER?fields=metrics/jvm/memNonHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memNonHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: jtHostName
-      },
-      "/data/services/metrics/mapreduce/jvm_heap.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{jobTrackerNode}/host_components/JOBTRACKER?fields=metrics/jvm/memNonHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memNonHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapUsedM[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/memHeapCommittedM[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/jvm_heap.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/jvm_threads.js

@@ -30,17 +30,8 @@ App.ChartServiceMetricsMapReduce_JVMThreads = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-jvm-threads",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.jvmThreads'),
   renderer: 'line',
-  url: function () {
-    var mrService = App.MapReduceService.find().objectAt(0);
-    var jtHostName = mrService.get('jobTracker').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/JOBTRACKER?fields=metrics/jvm/threadsRunnable[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsBlocked[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsWaiting[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsTimedWaiting[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: jtHostName
-      },
-      "/data/services/metrics/mapreduce/jvm_threads.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{jobTrackerNode}/host_components/JOBTRACKER?fields=metrics/jvm/threadsRunnable[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsBlocked[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsWaiting[{fromSeconds},{toSeconds},{stepSeconds}],metrics/jvm/threadsTimedWaiting[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/jvm_threads.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/map_slots.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsMapReduce_MapSlots = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-map-slots",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.mapSlots'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/occupied_map_slots[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/reserved_map_slots[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/mapreduce/map_slots.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/occupied_map_slots[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/reserved_map_slots[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/map_slots.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/reduce_slots.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsMapReduce_ReduceSlots = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-reduce-slots",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.reduceSlots'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/occupied_reduce_slots[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/reserved_reduce_slots[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/mapreduce/reduce_slots.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/occupied_reduce_slots[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/reserved_reduce_slots[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/reduce_slots.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/rpc.js

@@ -30,18 +30,8 @@ App.ChartServiceMetricsMapReduce_RPC = App.ChartLinearTimeView.extend({
   id: "service-metrics-mapreduce-rpc",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.rpc'),
   yAxisFormatter: App.ChartLinearTimeView.TimeElapsedFormatter,
-
-  url: function () {
-    var mrService = App.MapReduceService.find().objectAt(0);
-    var jtHostName = mrService.get('jobTracker').get('hostName');
-    return App.formatUrl(
-      this.get('urlPrefix') + "/hosts/{hostName}/host_components/JOBTRACKER?fields=metrics/rpc/RpcQueueTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {
-        hostName: jtHostName
-      },
-      "/data/services/metrics/mapreduce/rpc.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/hosts/{jobTrackerNode}/host_components/JOBTRACKER?fields=metrics/rpc/RpcQueueTime_avg_time[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/rpc.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];

ambari-web/app/views/main/service/info/metrics/mapreduce/tasks_running_waiting.js

@@ -30,13 +30,8 @@ App.ChartServiceMetricsMapReduce_TasksRunningWaiting = App.ChartLinearTimeView.e
   id: "service-metrics-mapreduce-tasks-running-waiting",
   title: Em.I18n.t('services.service.info.metrics.mapreduce.tasksRunningWaiting'),
   renderer: 'line',
-  url: function () {
-    return App.formatUrl(
-      this.get('urlPrefix') + "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/running_maps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/running_reduces[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/waiting_maps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/waiting_reduces[{fromSeconds},{toSeconds},{stepSeconds}]",
-      {},
-      "/data/services/metrics/mapreduce/tasks_running_waiting.json"
-    );
-  }.property('clusterName').volatile(),
+  sourceUrl: "/services/MAPREDUCE/components/JOBTRACKER?fields=metrics/mapred/jobtracker/running_maps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/running_reduces[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/waiting_maps[{fromSeconds},{toSeconds},{stepSeconds}],metrics/mapred/jobtracker/waiting_reduces[{fromSeconds},{toSeconds},{stepSeconds}]",
+  mockUrl: "/data/services/metrics/mapreduce/tasks_running_waiting.json",
 
   transformToSeries: function (jsonData) {
     var seriesArray = [];