AMBARI-10427. Display service specific Heatmap in the respective service page. (jaimin)

ambari-web/app/controllers.js

@@ -137,6 +137,7 @@ require('controllers/main/charts/heatmap_metrics/heatmap_metric_hbase_compaction
 require('controllers/main/charts/heatmap_metrics/heatmap_metric_hbase_regions');
 require('controllers/main/charts/heatmap_metrics/heatmap_metric_hbase_memstoresize');
 require('controllers/main/charts/heatmap');
+require('controllers/main/service/info/heatmap');
 require('controllers/main/views_controller');
 require('controllers/main/views/details_controller');
 require('controllers/wizard/slave_component_groups_controller');

ambari-web/app/controllers/main/charts/heatmap.js

@@ -22,6 +22,7 @@ App.MainChartsHeatmapController = Em.Controller.extend({
   rackMap: [],
   modelRacks: [],
   rackViews: [],
+  loadRacksUrlParams: 'fields=Hosts/rack_info,Hosts/host_name,Hosts/public_host_name,Hosts/os_type,Hosts/ip,host_components,metrics/disk,metrics/cpu/cpu_system,metrics/cpu/cpu_user,metrics/memory/mem_total,metrics/memory/mem_free&minimal_response=true',
 
   racks: function () {
     return this.get('modelRacks');
@@ -33,10 +34,13 @@ App.MainChartsHeatmapController = Em.Controller.extend({
   loadRacks: function () {
     this.get('modelRacks').clear();
     this.get('rackMap').clear();
+    var urlParams = this.get('loadRacksUrlParams');
     App.ajax.send({
       name: 'hosts.heatmaps',
       sender: this,
-      data: {},
+      data: {
+        urlParams: urlParams
+      },
       success: 'getHostsSuccessCallback'
     });
   },
@@ -108,64 +112,13 @@ App.MainChartsHeatmapController = Em.Controller.extend({
 
     // Display host heatmaps if the stack definition has a host metrics service to display it.
     if(App.get('services.hostMetrics').length) {
-      metrics.push(
-        Em.Object.create({
-          label: Em.I18n.t('charts.heatmap.category.host'),
-          category: 'host',
-          items: [
-            App.MainChartHeatmapDiskSpaceUsedMetric.create(),
-            App.MainChartHeatmapMemoryUsedMetric.create(),
-            App.MainChartHeatmapCpuWaitIOMetric.create()
-            /*, App.MainChartHeatmapProcessRunMetric.create()*/
-          ]
-        })
-      );
+      metrics.pushObjects([
+        App.MainChartHeatmapDiskSpaceUsedMetric.create(),
+        App.MainChartHeatmapMemoryUsedMetric.create(),
+        App.MainChartHeatmapCpuWaitIOMetric.create()
+      ]);
     }
 
-    if(App.HDFSService.find().get('length')) {
-      metrics.push(
-        Em.Object.create({
-          label: Em.I18n.t('charts.heatmap.category.hdfs'),
-          category: 'hdfs',
-          items: [
-            App.MainChartHeatmapDFSBytesReadMetric.create(),
-            App.MainChartHeatmapDFSBytesWrittenMetric.create(),
-            App.MainChartHeatmapDFSGCTimeMillisMetric.create(),
-            App.MainChartHeatmapDFSMemHeapUsedMetric.create()
-          ]
-        })
-      );
-    }
-
-    if (App.YARNService.find().get('length')) {
-      metrics.push(
-        Em.Object.create({
-          label: Em.I18n.t('charts.heatmap.category.yarn'),
-          category: 'yarn',
-          items: [
-            App.MainChartHeatmapYarnGCTimeMillisMetric.create(),
-            App.MainChartHeatmapYarnMemHeapUsedMetric.create(),
-            App.MainChartHeatmapYarnResourceUsedMetric.create()
-          ]
-        })
-      );
-    }
-
-    if (App.HBaseService.find().get('length')) {
-      metrics.push(
-        Em.Object.create({
-          label: Em.I18n.t('charts.heatmap.category.hbase'),
-          category: 'hbase',
-          items: [
-            App.MainChartHeatmapHbaseReadReqCount.create(),
-            App.MainChartHeatmapHbaseWriteReqCount.create(),
-            App.MainChartHeatmapHbaseCompactionQueueSize.create(),
-            App.MainChartHeatmapHbaseRegions.create(),
-            App.MainChartHeatmapHbaseMemStoreSize.create()
-          ]
-        })
-      );
-    }
     return metrics;
   }.property(),
 
@@ -213,7 +166,6 @@ App.MainChartsHeatmapController = Em.Controller.extend({
   loadMetrics: function () {
     var selectedMetric = this.get('selectedMetric');
     var hostNames = [];
-
     if (selectedMetric && this.get('racks').everyProperty('isLoaded', true)) {
       this.get('racks').forEach(function (rack) {
         hostNames = hostNames.concat(rack.hosts.mapProperty('hostName'));

ambari-web/app/controllers/main/service/info/heatmap.js

@@ -0,0 +1,52 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var App = require('app');
+App.MainServiceInfoHeatmapController = App.MainChartsHeatmapController.extend({
+  name: 'mainServiceInfoHeatmapController',
+  allMetrics: function () {
+    var metrics = [];
+    var serviceName = this.get('content.serviceName');
+    switch (serviceName) {
+      case 'HDFS':
+        metrics.pushObjects([
+          App.MainChartHeatmapDFSBytesReadMetric.create(),
+          App.MainChartHeatmapDFSBytesWrittenMetric.create(),
+          App.MainChartHeatmapDFSGCTimeMillisMetric.create(),
+          App.MainChartHeatmapDFSMemHeapUsedMetric.create()
+        ]);
+        break;
+      case 'YARN':
+        metrics.pushObjects([
+          App.MainChartHeatmapYarnGCTimeMillisMetric.create(),
+          App.MainChartHeatmapYarnMemHeapUsedMetric.create(),
+          App.MainChartHeatmapYarnResourceUsedMetric.create()
+        ]);
+        break;
+      case 'HBASE':
+        metrics.pushObjects([
+          App.MainChartHeatmapHbaseReadReqCount.create(),
+          App.MainChartHeatmapHbaseWriteReqCount.create(),
+          App.MainChartHeatmapHbaseCompactionQueueSize.create(),
+          App.MainChartHeatmapHbaseRegions.create(),
+          App.MainChartHeatmapHbaseMemStoreSize.create()
+        ]);
+        break;
+    }
+    return metrics;
+  }.property('content.serviceName')
+});

ambari-web/app/messages.js

@@ -1660,6 +1660,7 @@ Em.I18n.translations = {
 
   'services.service.info.menu.summary':'Summary',
   'services.service.info.menu.configs':'Configs',
+  'services.service.info.menu.heatmaps':'Heatmaps',
   'services.service.info.summary.hostsRunningMonitor':'{0}/{1}',
   'services.service.info.summary.serversHostCount':'{0} more',
 

ambari-web/app/models/stack_service.js

@@ -102,7 +102,7 @@ App.StackService = DS.Model.extend({
 
   // Is the service required for reporting host metrics
   isHostMetricsService: function () {
-      var services = ['GANGLIA'];
+      var services = ['GANGLIA', 'AMBARI_METRICS'];
       return services.contains(this.get('serviceName'));
   }.property('serviceName'),
 
@@ -155,6 +155,10 @@ App.StackService = DS.Model.extend({
     return App.StackService.reviewPageHandlers[this.get('serviceName')];
   }.property('serviceName'),
 
+  hasHeatmapSection: function() {
+    return ['HDFS', 'YARN', 'HBASE'].contains(this.get('serviceName'));
+  }.property('serviceName'),
+
   /**
    * configCategories are fetched from  App.StackService.configCategories.
    * Also configCategories that does not match any serviceComponent of a service and not included in the permissible default pattern are omitted

ambari-web/app/routes/main.js

@@ -657,6 +657,18 @@ module.exports = Em.Route.extend(App.RouterRedirections, {
           }
         }
       }),
+      heatmaps: Em.Route.extend({
+        route: '/heatmaps',
+        connectOutlets: function (router, context) {
+          var item = router.get('mainServiceItemController.content');
+          if (item.get('isLoaded')) {
+            router.get('mainController').dataLoading().done(function () {
+              router.get('mainServiceInfoHeatmapController').loadRacks();
+              router.get('mainServiceItemController').connectOutlet('mainServiceInfoHeatmap', item);
+            });
+          }
+        }
+      }),
       audit: Em.Route.extend({
         route: '/audit',
         connectOutlets: function (router, context) {

ambari-web/app/styles/application.less

@@ -3964,6 +3964,14 @@ ul.filter {
   #heatmap-metric-title {
     margin-left: 23px;
   }
+
+  #select-metric-btn-group {
+    margin-top:5px;
+  }
+
+  li.heatmap-metrics-dropdown-links{
+    cursor: pointer;
+  }
   .rack.rack-5-2 {
     .hosts {
       height: 86px;

ambari-web/app/templates/main/charts/heatmap.hbs

@@ -21,23 +21,16 @@
   <div class="container-fluid">
 	  <div class="row-fluid">
 	    <div class="span2 legend-column">
-		     <div class="btn-group">
+		     <div class="btn-group" id="select-metric-btn-group">
 				  <button class="btn heatmap-select-metric-btn">{{t charts.heatmap.selectMetric}}</button>
 				  <button class="btn dropdown-toggle heatmap-toggle-metrics-btn" data-toggle="dropdown">
 				    <span class="caret"></span>
 				  </button>
 				  <ul class="dropdown-menu">
-				    {{#each category in controller.allMetrics}}
-               <li class="dropdown-submenu">
-                <a tabindex="-1" >{{category.label}}</a>
-                <ul class="dropdown-menu">
-                  {{#each metric in category.items}}
-                    <li>
-                      <a tabindex="-1" {{action showHeatMapMetric metric target="controller"}}>{{metric.name}}</a>
-                    </li>
-                  {{/each}}
-                </ul>
-               </li>
+				    {{#each metric in controller.allMetrics}}
+							<li class="heatmap-metrics-dropdown-links">
+                <a tabindex="-1" {{action showHeatMapMetric metric target="controller"}}>{{metric.name}}</a>
+							</li>
             {{/each}}
 				  </ul>
 				</div>
@@ -61,9 +54,15 @@
 	    </div>
 	    <div class="span10 heatmap-content">
 	      <h4 id="heatmap-metric-loading">
-	        <span id="heatmap-metric-title">{{controller.selectedMetric.name}}</span>
+	        <span id="heatmap-metric-title">
+						{{controller.selectedMetric.name}} &nbsp;
+						{{#if controller.selectedMetric.loading}}
+              <i class='icon-spinner icon-spin icon-small'></i>
+						{{/if}}
+					</span>
 	      </h4>
 	      <div class="row-fluid">
+
 				  {{#each rack in controller.racks}}
 				    <div {{bindAttr class="controller.rackClass"}}>
 				      {{view App.MainChartsHeatmapRackView rackBinding="rack" }}

ambari-web/app/templates/main/service/item.hbs

@@ -16,7 +16,7 @@
 * limitations under the License.
 }}
 
-{{view App.MainServiceInfoMenuView configTabBinding="view.hasConfigTab"}}
+{{view App.MainServiceInfoMenuView configTabBinding="view.hasConfigTab" heatmapTabBinding="view.hasHeatmapTab"}}
   <div class="span3 quick-links-wrapper">
     {{#if view.service.quickLinks.length}}
       {{#view App.QuickViewLinks contentBinding="view.service"}}

ambari-web/app/views.js

@@ -313,6 +313,7 @@ require('views/main/charts/heatmap');
 require('views/main/charts/heatmap/heatmap_rack');
 require('views/main/charts/heatmap/heatmap_host');
 require('views/main/charts/heatmap/heatmap_host_detail');
+require('views/main/service/info/heatmap_view');
 
 require('views/main/service/widgets/create/wizard_view');
 require('views/main/service/widgets/create/step1_view');

ambari-web/app/views/main/charts/heatmap.js

@@ -19,37 +19,10 @@ var App = require('app');
 
 App.MainChartsHeatmapView = Em.View.extend({
   templateName: require('templates/main/charts/heatmap'),
-  spinner: null,
   didInsertElement: function () {
     this._super();
     // set default metric
-    this.set('controller.selectedMetric', this.get('controller.allMetrics')[0].get('items')[0]);
+    this.set('controller.selectedMetric', this.get('controller.allMetrics')[0]);
     $("#heatmapDetailsBlock").hide();
-  },
-  /**
-   * show spinner while loading selected metric
-   */
-  showLoading: function () {
-    if (this.get('controller.selectedMetric.loading')) {
-      var e = document.getElementById("heatmap-metric-loading");
-      if (e) {
-        $(e).children('div.spinner').remove();
-        var spinOpts = {
-          lines: 9,
-          length: 4,
-          width: 2,
-          radius: 3,
-          top: '0',
-          left: '0'
-        };
-        this.set('spinner', new Spinner(spinOpts).spin(e));
-      }
-    } else {
-      var spinner = this.get('spinner');
-      if (spinner) {
-        spinner.stop();
-      }
-      this.set('spinner', null);
-    }
-  }.observes('controller.selectedMetric.loading')
+  }
 });

ambari-web/app/views/main/charts/heatmap/heatmap_rack.js

@@ -37,7 +37,7 @@ App.MainChartsHeatmapRackView = Em.View.extend({
    * get hosts from the root controller
    */
   getHosts: function () {
-    var controller = App.router.get('mainChartsHeatmapController');
+    var controller = this.get('controller');
     var rackId = this.get('rack.rackId');
     var rackMap = controller.get('rackMap');
     this.pushHostsToRack(rackMap[rackId].hosts);
@@ -53,7 +53,7 @@ App.MainChartsHeatmapRackView = Em.View.extend({
    */
   displayHosts: function () {
     var rackHosts = this.get('rack.hosts');
-    var rackCount = App.router.get('mainChartsHeatmapController.modelRacks.length');
+    var rackCount = this.get('controller.modelRacks.length');
 
     if (this.get('hosts.length') === 0) {
       if (rackHosts.length > 100 && rackCount == 1) {
@@ -143,7 +143,7 @@ App.MainChartsHeatmapRackView = Em.View.extend({
       this.displayHosts();
     }
     this.getHosts();
-    App.router.get('mainChartsHeatmapController').addRackView(this);
+    this.get('controller').addRackView(this);
   },
   /**
    * Provides the CSS style for an individual host.

ambari-web/app/views/main/service/info/heatmap_view.js

@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var App = require('app');
+App.MainServiceInfoHeatmapView = App.MainChartsHeatmapView.extend({
+  templateName: require('templates/main/charts/heatmap')
+});

ambari-web/app/views/main/service/info/menu.js

@@ -26,6 +26,8 @@ App.MainServiceInfoMenuView = Em.CollectionView.extend({
       { label: Em.I18n.t('services.service.info.menu.summary'), id: 'summary-service-tab',routing:'summary', active:"active"}
       //{ label:'Audit', routing:'audit'}
     ];
+
+    if(this.get('heatmapTab')) menuItems.push({ label: Em.I18n.t('services.service.info.menu.heatmaps'), id: 'heatmap-service-tab', routing:'heatmaps'});
     if(this.get('configTab')) menuItems.push({ label: Em.I18n.t('services.service.info.menu.configs'), id: 'configs-service-tab', routing:'configs'});
     return menuItems;
   }.property(),
@@ -49,4 +51,4 @@ App.MainServiceInfoMenuView = Em.CollectionView.extend({
     active: "",
     template: Ember.Handlebars.compile('<a {{action showInfo view.content.routing}} {{bindAttr id="view.content.id"}} href="#"> {{unbound view.content.label}}</a>')
   })
-});
+});

ambari-web/app/views/main/service/item.js

@@ -245,6 +245,10 @@ App.MainServiceItemView = Em.View.extend({
     return !App.get('services.noConfigTypes').contains(this.get('controller.content.serviceName'));
   }.property('controller.content.serviceName','App.services.noConfigTypes'),
 
+  hasHeatmapTab: function() {
+    return App.StackService.find().findProperty('serviceName', this.get('controller.content.serviceName')).get('hasHeatmapSection');
+  }.property('controller.content.serviceName'),
+
   didInsertElement: function () {
     this.get('controller').setStartStopState();
   },