AMBARI-4258 Reduce loading delay on Heatmaps and Hosts page routing. (atkach)

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

@@ -19,9 +19,19 @@ var App = require('app');
 
 App.MainChartsHeatmapController = Em.Controller.extend({
   name: 'mainChartsHeatmapController',
-  cluster: function () {
-    return App.Cluster.find().objectAt(0);
-  }.property(''),
+  modelRacks: App.Rack.find(),
+  racks: function () {
+    var racks = [];
+    this.get('modelRacks').forEach(function (rack) {
+      racks.push(Em.Object.create({
+        name: rack.get('name'),
+        hosts: rack.get('hosts'),
+        isLoaded: false
+      }));
+    });
+    return racks;
+  }.property('modelRacks.@each.isLoaded'),
+
   allMetrics: function () {
     var metrics = [
       Em.Object.create({
@@ -133,7 +143,7 @@ App.MainChartsHeatmapController = Em.Controller.extend({
    * @this App.MainChartsHeatmapController
    */
   rackClass: function () {
-    var rackCount = this.get('cluster.racks.length');
+    var rackCount = this.get('racks.length');
     if (rackCount < 2) {
       return "span12";
     } else if (rackCount == 2) {
@@ -141,5 +151,5 @@ App.MainChartsHeatmapController = Em.Controller.extend({
     } else {
       return "span4";
     }
-  }.property('cluster')
+  }.property('racks.length')
 });

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

@@ -64,7 +64,7 @@
 	        <span id="heatmap-metric-title">{{controller.selectedMetric.name}}</span>
 	      </h4>
 	      <div class="row-fluid">
-				  {{#each rack in controller.cluster.racks}}
+				  {{#each rack in controller.racks}}
 				    <div {{bindAttr class="controller.rackClass"}}>
 				      {{view App.MainChartsHeatmapRackView rackBinding="rack" }}
 				    </div>

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

@@ -20,9 +20,6 @@
   <div class="statusName clearfix">
     <div {{bindAttr class="view.statusIndicator rack.status"}}></div>
     <div class="rackName">{{rack.name}}</div>
-    <!--<a href="#" class="toggler" {{!action toggleRack target="view" on="click" }}>-->
-      <!--<span {{!bindAttr class="view.heatmapTogglerClass"}}></span>-->
-    <!--</a>-->
   </div>
 </div>
 <!--<div class="hostsSummary clearfix">-->
@@ -42,8 +39,8 @@
     <!--</div>-->
   <!--{{!/if}}-->
 <!--</div>-->
-<div {{bindAttr class="view.heatmapTogglerClass view.hostsBlockClass"}}>
-  {{#each rack.hosts}}
+<div class="isActive hosts clearfix">
+  {{#each view.hosts}}
     <div {{bindAttr style="view.hostCssStyle"}}>
       {{view App.MainChartsHeatmapHostView contentBinding="this"}}
     </div>

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

@@ -24,12 +24,14 @@ App.MainChartsHeatmapView = Em.View.extend({
     this._super();
     // set default metric
     this.set('controller.selectedMetric', this.get('controller.allMetrics')[0].get('items')[0]);
+    this.get('controller.racks').setEach('isLoaded', false);
     $("#heatmapDetailsBlock").hide();
   },
   showLoading: function () {
-    if (this.get('controller.selectedMetric.loading')) {
+    if (this.get('controller.selectedMetric.loading') || !this.get('controller.racks').everyProperty('isLoaded')) {
       var e = document.getElementById("heatmap-metric-loading");
       if (e) {
+        $(e).children('div.spinner').remove();
         var spinOpts = {
           lines: 9,
           length: 4,
@@ -47,5 +49,5 @@ App.MainChartsHeatmapView = Em.View.extend({
       }
       this.set('spinner', null);
     }
-  }.observes('controller.selectedMetric.loading')
+  }.observes('controller.selectedMetric.loading', 'controller.racks.@each.isLoaded')
 });

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

@@ -17,50 +17,51 @@
  */
 
 var App = require('app');
+var lazyloading = require('utils/lazy_loading');
 
 App.MainChartsHeatmapRackView = Em.View.extend({
   templateName: require('templates/main/charts/heatmap/heatmap_rack'),
   classNames: ['rack'],
   classNameBindings: ['visualSchema'],
-  /**
-   * this is the class for binding attribute to hosts block
-   * @private
-   */
-  hostsBlockClass:"hosts clearfix",
-  heatmapIsOpened: 1,
 
   /** rack status block class */
   statusIndicator:'statusIndicator',
+  /** loaded hosts of rack */
+  hosts: [],
 
-  toggleRack: function(){
-    var newHeatmapStatus = 1 - this.get('heatmapIsOpened');
-    this.set('heatmapIsOpened', newHeatmapStatus);
+  willInsertElement: function () {
+    this.set('hosts', []);
   },
 
-  /**
-   * change toggler class, depends on heatmapIsOpened property
-   * @this App.MainChartsHeatmapRackView
-   */
-  heatmapTogglerClass:function () {
-    if (this.heatmapIsOpened) {
-      return "isActive"
+  didInsertElement: function () {
+    var rackHosts = this.get('rack.hosts').toArray();
+    if (rackHosts.length > 100) {
+      lazyloading.run({
+        destination: this.get('hosts'),
+        source: rackHosts,
+        context: this.get('rack'),
+        initSize: 25,
+        chunkSize: 100,
+        delay: 25
+      });
+    } else {
+      this.set('hosts', rackHosts);
+      this.set('rack.isLoaded', true);
     }
-    return "";
-  }.property("heatmapIsOpened"),
-  
+  },
   /**
    * Provides the CSS style for an individual host.
    * This can be used as the 'style' attribute of element.
    */
-  hostCssStyle: function(){
+  hostCssStyle: function () {
     var rack = this.get('rack');
     var widthPercent = 100;
     var hostCount = rack.get('hosts.length');
-    if(hostCount<11){
-      widthPercent = (100/hostCount)-0.5;
-    }else{
+    if (hostCount < 11) {
+      widthPercent = (100 / hostCount) - 0.5;
+    } else {
       widthPercent = 10; // max out at 10%
     }
-    return "width:"+widthPercent+"%;float:left;";
+    return "width:" + widthPercent + "%;float:left;";
   }.property('rack')
 });

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

@@ -175,7 +175,7 @@ App.MainHostView = App.TableView.extend({
      */
     labels: function() {
       return this.get('content.hostComponents').getEach('displayName').join("<br />");
-    }.property('content.hostComponents.@each'),
+    }.property('content.hostComponents.length'),
 
     /**
      * CSS value for disk usage bar
@@ -228,7 +228,7 @@ App.MainHostView = App.TableView.extend({
 
     label: function () {
       return "%@ (%@)".fmt(this.get('value'), this.get('hostsCount'));
-    }.property('value', 'hostsCount')
+    }.property('hostsCount')
   }),
 
   categories: function () {