AMBARI-6002 Substitute pagination info with values from server. (atkach)

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

@@ -27,6 +27,8 @@ App.MainHostController = Em.ArrayController.extend(App.UserPref, {
   dataSource: App.Host.find(),
   clearFilters: null,
 
+  filteredCount: 0,
+
   /**
    * Components which will be shown in component filter
    * @returns {Array}

ambari-web/app/mappers/hosts_mapper.js

@@ -88,6 +88,7 @@ App.hostsMapper = App.QuickDataMapper.create({
         }
       });
       App.store.loadMany(App.Host, hostsWithFullInfo);
+      App.router.set('mainHostController.filteredCount', json.itemTotal);
     }
     console.timeEnd('App.hostsMapper execution time');
   }

ambari-web/app/mixins/common/tableServerProvider.js

@@ -37,15 +37,6 @@ App.TableServerProvider = Em.Mixin.create({
     return this.get('filteredContent');
   }.property('filteredContent'),
 
-  /**
-   * Return pagination information displayed on the page
-   * @type {String}
-   */
-  paginationInfo: function () {
-    return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('totalCount'));
-  }.property('totalCount', 'endIndex'),
-
-
   /**
    * request latest data filtered by new parameters
    * called when trigger property(<code>refreshTriggers</code>) is changed

ambari-web/app/views/common/table_view.js

@@ -67,6 +67,13 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   defaultDisplayLength: "10",
 
+  /**
+   * number of hosts in table after applying filters
+   */
+  filteredCount: function () {
+    return this.get('filteredContent.length');
+  }.property('filteredContent.length'),
+
   /**
    * Do filtering, using saved in the local storage filter conditions
    */
@@ -122,8 +129,8 @@ App.TableView = Em.View.extend(App.UserPref, {
    * @type {String}
    */
   paginationInfo: function () {
-    return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
-  }.property('filteredContent.length', 'endIndex'),
+    return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredCount'));
+  }.property('filteredCount', 'endIndex'),
 
   paginationLeft: Ember.View.extend({
     tagName: 'a',
@@ -134,7 +141,7 @@ App.TableView = Em.View.extend(App.UserPref, {
         return "paginate_previous";
       }
       return "paginate_disabled_previous";
-    }.property("parentView.startIndex", 'filteredContent.length'),
+    }.property("parentView.startIndex", 'filteredCount'),
 
     click: function () {
       if (this.get('class') === "paginate_previous") {
@@ -148,11 +155,11 @@ App.TableView = Em.View.extend(App.UserPref, {
     template: Ember.Handlebars.compile('<i class="icon-arrow-right"></i>'),
     classNameBindings: ['class'],
     class: function () {
-      if ((this.get("parentView.endIndex")) < this.get("parentView.filteredContent.length")) {
+      if ((this.get("parentView.endIndex")) < this.get("parentView.filteredCount")) {
         return "paginate_next";
       }
       return "paginate_disabled_next";
-    }.property("parentView.endIndex", 'filteredContent.length'),
+    }.property("parentView.endIndex", 'filteredCount'),
 
     click: function () {
       if (this.get('class') === "paginate_next") {
@@ -170,7 +177,7 @@ App.TableView = Em.View.extend(App.UserPref, {
         return "paginate_previous";
       }
       return "paginate_disabled_previous";
-    }.property("parentView.endIndex", 'filteredContent.length'),
+    }.property("parentView.endIndex", 'filteredCount'),
 
     click: function () {
       if (this.get('class') === "paginate_previous") {
@@ -184,11 +191,11 @@ App.TableView = Em.View.extend(App.UserPref, {
     template: Ember.Handlebars.compile('<i class="icon-step-forward"></i>'),
     classNameBindings: ['class'],
     class: function () {
-      if (this.get("parentView.endIndex") !== this.get("parentView.filteredContent.length")) {
+      if (this.get("parentView.endIndex") !== this.get("parentView.filteredCount")) {
         return "paginate_next";
       }
       return "paginate_disabled_next";
-    }.property("parentView.endIndex", 'filteredContent.length'),
+    }.property("parentView.endIndex", 'filteredCount'),
 
     click: function () {
       if (this.get('class') === "paginate_next") {
@@ -218,11 +225,11 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   endIndex: function () {
     if (this.get('pagination')) {
-      return Math.min(this.get('filteredContent.length'), this.get('startIndex') + parseInt(this.get('displayLength')) - 1);
+      return Math.min(this.get('filteredCount'), this.get('startIndex') + parseInt(this.get('displayLength')) - 1);
     } else {
-      return this.get('filteredContent.length')
+      return this.get('filteredCount')
     }
-  }.property('startIndex', 'displayLength', 'filteredContent.length'),
+  }.property('startIndex', 'displayLength', 'filteredCount'),
 
   /**
    * Onclick handler for previous page button on the page
@@ -237,7 +244,7 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   nextPage: function () {
     var result = this.get('startIndex') + parseInt(this.get('displayLength'));
-    if (result - 1 < this.get('filteredContent.length')) {
+    if (result - 1 < this.get('filteredCount')) {
       this.set('startIndex', result);
     }
   },
@@ -251,8 +258,8 @@ App.TableView = Em.View.extend(App.UserPref, {
    * Onclick handler for last page button on the page
    */
   lastPage: function () {
-    var pagesCount = this.get('filteredContent.length') / parseInt(this.get('displayLength'));
-    var startIndex = (this.get('filteredContent.length') % parseInt(this.get('displayLength')) === 0) ?
+    var pagesCount = this.get('filteredCount') / parseInt(this.get('displayLength'));
+    var startIndex = (this.get('filteredCount') % parseInt(this.get('displayLength')) === 0) ?
       (pagesCount - 1) * parseInt(this.get('displayLength')) :
       Math.floor(pagesCount) * parseInt(this.get('displayLength'));
     this.set('startIndex', ++startIndex);
@@ -263,7 +270,7 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   updatePaging: function (controller, property) {
     var displayLength = this.get('displayLength');
-    var filteredContentLength = this.get('filteredContent.length');
+    var filteredContentLength = this.get('filteredCount');
     if (property == 'displayLength') {
       this.set('startIndex', Math.min(1, filteredContentLength));
     } else if (!filteredContentLength) {
@@ -273,7 +280,7 @@ App.TableView = Em.View.extend(App.UserPref, {
     } else if (!this.get('startIndex')) {
       this.set('startIndex', 1);
     }
-  }.observes('displayLength', 'filteredContent.length'),
+  }.observes('displayLength', 'filteredCount'),
 
   /**
    * Apply each filter to each row
@@ -347,8 +354,8 @@ App.TableView = Em.View.extend(App.UserPref, {
    * @type {Boolean}
    */
   hasFilteredItems: function() {
-    return !!this.get('filteredContent.length');
-  }.property('filteredContent.length'),
+    return !!this.get('filteredCount');
+  }.property('filteredCount'),
 
   /**
    * Contains content to show on the current page of data page view
@@ -356,7 +363,7 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   pageContent: function () {
     return this.get('filteredContent').slice(this.get('startIndex') - 1, this.get('endIndex'));
-  }.property('filteredContent.length', 'startIndex', 'endIndex'),
+  }.property('filteredCount', 'startIndex', 'endIndex'),
 
   /**
    * Filter table by filterConditions

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

@@ -40,6 +40,14 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
    * Contains all selected hosts on cluster
    */
   selectedHosts: [],
+  /**
+   * total number of installed hosts
+   */
+  totalCount: 0,
+
+  filteredCount: function () {
+    return this.get('controller.filteredCount');
+  }.property('controller.filteredCount'),
 
   /**
    * List of hosts in cluster
@@ -67,9 +75,16 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
    * @returns {String}
    */
   filteredContentInfo: function () {
-    //TODO API should return number of filtered hosts
-    return this.t('hosts.filters.filteredHostsInfo').format(this.get('filteredContent.length'), this.get('content').get('length'));
-  }.property('content.length', 'filteredContent.length'),
+    return this.t('hosts.filters.filteredHostsInfo').format(this.get('filteredCount'), this.get('totalCount'));
+  }.property('filteredCount', 'totalCount'),
+
+  /**
+   * Return pagination information displayed on the page
+   * @type {String}
+   */
+  paginationInfo: function () {
+    return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredCount'));
+  }.property('totalCount', 'endIndex', 'filteredCount'),
 
   clearFiltersObs: function() {
     var self = this;

ambari-web/test/controllers/global/cluster_controller_test.js

@@ -389,35 +389,6 @@ describe('App.clusterController', function () {
     });
   });
 
-  describe('#deferServiceMetricsLoad()', function () {
-    beforeEach(function () {
-      sinon.spy(App.serviceMetricsMapper, 'map');
-    });
-    afterEach(function () {
-      App.serviceMetricsMapper.map.restore();
-    });
-    it('json is null', function () {
-      controller.set('serviceMetricsJson', {});
-      controller.set('dataLoadList.serviceMetrics', false);
-      controller.deferServiceMetricsLoad(null);
-      expect(controller.get('serviceMetricsJson')).to.equal(null);
-      expect(controller.get('dataLoadList.serviceMetrics')).to.equal(true);
-      expect(App.serviceMetricsMapper.map.calledOnce).to.equal(true);
-    });
-    it('json is correct', function () {
-      controller.deferServiceMetricsLoad({data: ''});
-      expect(controller.get('serviceMetricsJson')).to.eql({data: ''});
-    });
-    it('json is correct and dataLoadList.hosts is true', function () {
-      controller.set('serviceMetricsJson', {});
-      controller.set('dataLoadList.serviceMetrics', false);
-      controller.set('dataLoadList.hosts', true);
-      controller.deferServiceMetricsLoad(null);
-      expect(controller.get('dataLoadList.serviceMetrics')).to.equal(true);
-      expect(App.serviceMetricsMapper.map.calledOnce).to.equal(true);
-    });
-  });
-
   describe('#clusterName', function () {
     var testCases = [
       {

ambari-web/test/controllers/global/update_controller_test.js

@@ -80,7 +80,7 @@ describe('App.UpdateController', function () {
     };
 
     beforeEach(function () {
-      sinon.spy(controller, 'updateHost');
+      sinon.stub(controller, 'updateHost', Em.K);
       sinon.spy(context, 'callback');
     });
     afterEach(function () {

ambari-web/test/views/main/charts/heatmap/heatmap_rack_test.js

@@ -28,31 +28,43 @@ describe('App.MainChartsHeatmapRackView', function() {
 
   describe('#hostCssStyle', function () {
     var testCases = [
+      {
+        title: 'if hosts haven\'t been loaded yet then hostCssStyle should be have width 100%',
+        rack: Em.Object.create({
+          hosts: new Array(0),
+          isLoaded: false
+        }),
+        result: "width:100%;float:left;"
+      },
       {
         title: 'if hosts number is zero then hostCssStyle should be have width 10%',
         rack: Em.Object.create({
-          hosts: new Array(0)
+          hosts: new Array(0),
+          isLoaded: true
         }),
         result: "width:10%;float:left;"
       },
       {
         title: 'if hosts number is one then hostCssStyle should be have width 99.5%',
         rack: Em.Object.create({
-          hosts: new Array(1)
+          hosts: new Array(1),
+          isLoaded: true
         }),
         result: "width:99.5%;float:left;"
       },
       {
         title: 'if hosts number is ten then hostCssStyle should be have width 9.5%',
         rack: Em.Object.create({
-          hosts: new Array(10)
+          hosts: new Array(10),
+          isLoaded: true
         }),
         result: "width:9.5%;float:left;"
       },
       {
         title: 'if hosts number is ten then hostCssStyle should be have width 10%',
         rack: Em.Object.create({
-          hosts: new Array(11)
+          hosts: new Array(11),
+          isLoaded: true
         }),
         result: "width:10%;float:left;"
       }