AMBARI-6312. Hosts page: paging behaves randomly. (akovalenko)

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

@@ -18,7 +18,6 @@
 
 var App = require('app');
 var validator = require('utils/validator');
-var componentHelper = require('utils/component');
 var batchUtils = require('utils/batch_scheduled_requests');
 
 App.MainHostController = Em.ArrayController.extend({
@@ -36,6 +35,8 @@ App.MainHostController = Em.ArrayController.extend({
 
   hostsCountMap: {},
 
+  startIndex: 1,
+
   /**
    * Components which will be shown in component filter
    * @returns {Array}

ambari-web/app/mappers/hosts_mapper.js

@@ -104,10 +104,11 @@ App.hostsMapper = App.QuickDataMapper.create({
           host.set('isRequested', false);
         }
       });
+      App.store.commit();
       App.store.loadMany(App.HostComponent, components);
       App.store.loadMany(App.Host, hostsWithFullInfo);
       var itemTotal = parseInt(json.itemTotal);
-      if (itemTotal) {
+      if (!isNaN(itemTotal) && itemTotal!==undefined && itemTotal!==null) {
         App.router.set('mainHostController.filteredCount', itemTotal);
       }
     }

ambari-web/app/models/cluster_states.js

@@ -189,6 +189,7 @@ App.clusterStatus = Em.Object.create(App.UserPref, {
     if (App.get('testMode')) return false;
     var user = App.db.getUser();
     var login = App.db.getLoginName();
+    var displayLength = App.db.data.app.tables.displayLength;
     var val = {clusterName: this.get('clusterName')};
     if (newValue) {
       App.db.cleanTmp();
@@ -212,14 +213,18 @@ App.clusterStatus = Em.Object.create(App.UserPref, {
           delete newValue.localdb.app.user;
         if (newValue.localdb.app && newValue.localdb.app.loginName)
           delete newValue.localdb.app.loginName;
+        if (newValue.localdb.app && newValue.localdb.app.tables && newValue.localdb.app.tables.displayLength)
+          delete newValue.localdb.app.tables.displayLength;
         this.set('localdb', newValue.localdb);
         val.localdb = newValue.localdb;
       } else {
         delete App.db.data.app.user;
         delete App.db.data.app.loginName;
+        delete App.db.data.app.tables.displayLength;
         val.localdb = App.db.data;
         App.db.setUser(user);
         App.db.setLoginName(login);
+        App.db.data.app.tables.displayLength = displayLength;
       }
 
       if (opt) {

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

@@ -165,8 +165,8 @@
     </div>
     <div class="info">{{view.paginationInfo}}</div>
     <div class="paging_two_button">
-      {{view view.paginationLeft}}
-      {{view view.paginationRight}}
+      <a {{bindAttr class="view.paginationLeftClass"}}{{action previousPage target="view"}}><i class="icon-arrow-left"></i></a>
+      <a {{bindAttr class="view.paginationRightClass"}}{{action nextPage target="view"}}><i class="icon-arrow-right"></i></a>
     </div>
   </div>
 </div>

ambari-web/app/utils/db.js

@@ -78,7 +78,7 @@ App.db.cleanUp = function () {
 App.db.cleanTmp = function() {
   App.db.data.tmp = {};
   localStorage.setObject('ambari', App.db.data);
-}
+};
 
 App.db.updateStorage = function() {
   App.db.data = localStorage.getObject('ambari');

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

@@ -68,9 +68,6 @@ App.TableView = Em.View.extend(App.UserPref, {
   willInsertElement:function () {
     var self = this;
     var name = this.get('controller.name');
-    if (App.db.getStartIndex(name)) {
-      this.set('startIndex', App.db.getStartIndex(name));
-    }
     if (!this.get('displayLength')) {
       if (App.db.getDisplayLength(name)) {
         this.set('displayLength', App.db.getDisplayLength(name));
@@ -242,10 +239,10 @@ App.TableView = Em.View.extend(App.UserPref, {
    * Calculate end index for displayed content on the page
    */
   endIndex: function () {
-    if (this.get('pagination')) {
+    if (this.get('pagination') && this.get('displayLength')) {
       return Math.min(this.get('filteredCount'), this.get('startIndex') + parseInt(this.get('displayLength')) - 1);
     } else {
-      return this.get('filteredCount')
+      return this.get('filteredCount') || 0;
     }
   }.property('startIndex', 'displayLength', 'filteredCount'),
 
@@ -341,18 +338,10 @@ App.TableView = Em.View.extend(App.UserPref, {
     });
   },
 
-  saveStartIndex: function() {
-    App.db.setStartIndex(this.get('controller.name'), this.get('startIndex'));
-  }.observes('startIndex'),
-
   clearFilterCondition: function() {
     App.db.setFilterConditions(this.get('controller.name'), null);
   },
 
-  clearStartIndex: function() {
-    App.db.setStartIndex(this.get('controller.name'), null);
-  },
-
   /**
    * Contain filter conditions for each column
    * @type {Array}

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

@@ -81,12 +81,7 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     return content.sort(function (a, b) {
       return a.get('index') - b.get('index');
     });
-  }.property('filteredCount', 'startIndex', 'endIndex'),
-
-  /**
-   * Stub function
-   */
-  updatePaging: function () {},
+  }.property('filteredCount'),
 
   /**
    * flag to toggle displaying selected hosts counter
@@ -111,12 +106,85 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     return this.t('tableView.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredCount'));
   }.property('totalCount', 'endIndex', 'filteredCount'),
 
+  paginationLeftClass: function () {
+    if (this.get("startIndex") > 1 && this.get('filteringComplete')) {
+      return "paginate_previous";
+    }
+    return "paginate_disabled_previous";
+  }.property("startIndex", 'filteringComplete'),
+
+  previousPage: function () {
+    if (this.get('paginationLeftClass') === 'paginate_previous') {
+      this._super();
+    }
+  },
+
+  paginationRightClass: function () {
+    if ((this.get("endIndex")) < this.get("filteredCount") && this.get('filteringComplete')) {
+      return "paginate_next";
+    }
+    return "paginate_disabled_next";
+  }.property("endIndex", 'filteredCount', 'filteringComplete'),
+
+  nextPage: function () {
+    if (this.get('paginationRightClass') === 'paginate_next') {
+      this._super();
+    }
+  },
+
+  /**
+   * Select View with list of "rows-per-page" options
+   * @type {Ember.View}
+   */
+  rowsPerPageSelectView: Em.Select.extend({
+    content: ['10', '25', '50', '100'],
+    attributeBindings: ['disabled'],
+    disabled: function () {
+      return !this.get('parentView.filteringComplete');
+    }.property('parentView.filteringComplete'),
+
+    change: function () {
+      this.get('parentView').saveDisplayLength();
+      var self = this;
+      if (this.get('parentView.startIndex') === 1) {
+        Ember.run.next(function () {
+          self.get('parentView').updateViewProperty();
+        });
+      } else {
+        Ember.run.next(function () {
+          self.set('parentView.startIndex', 1);
+        });
+      }
+    }
+  }),
+
+  saveStartIndex: function () {
+    this.set('controller.startIndex', this.get('startIndex'));
+  }.observes('startIndex'),
+
+  /**
+   * Calculates default value for startIndex property after applying filter or changing displayLength
+   */
+  updatePaging: function (controller, property) {
+    var displayLength = this.get('displayLength');
+    var filteredContentLength = this.get('filteredCount');
+    if (property == 'displayLength' && this.get('filteringComplete')) {
+      this.set('startIndex', Math.min(1, filteredContentLength));
+    } else if (!filteredContentLength) {
+      this.set('startIndex', 0);
+    } else if (this.get('startIndex') > filteredContentLength) {
+      this.set('startIndex', Math.floor((filteredContentLength - 1) / displayLength) * displayLength + 1);
+    } else if (!this.get('startIndex')) {
+      this.set('startIndex', 1);
+    }
+  }.observes('displayLength', 'filteredCount'),
+
+
   clearFiltersObs: function() {
     var self = this;
     Em.run.next(function() {
       if (self.get('controller.clearFilters')) {
         self.clearFilters();
-        self.clearStartIndex();
       }
     });
   },
@@ -125,6 +193,7 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
    */
   willInsertElement: function () {
     this._super();
+    this.set('startIndex', this.get('controller.startIndex'));
     var filterConditions = App.db.getFilterConditions(this.get('controller.name'));
     if (filterConditions) {
       var childViews = this.get('childViews');
@@ -164,15 +233,17 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     this.set('controller.isCountersUpdating', true);
     this.get('controller').updateStatusCounters();
     this.addObserver('filteringComplete', this, this.overlayObserver);
+    this.overlayObserver();
   },
 
   /**
    * synchronize properties of view with controller to generate query parameters
    */
-  updateViewProperty: function (context, property) {
-    this.get('controller.viewProperties').findProperty('key', property).set('viewValue', this.get(property));
+  updateViewProperty: function () {
+    this.get('controller.viewProperties').findProperty('key', 'displayLength').set('viewValue', this.get('displayLength'));
+    this.get('controller.viewProperties').findProperty('key', 'startIndex').set('viewValue', this.get('startIndex'));
     this.refresh();
-  }.observes('displayLength', 'startIndex'),
+  }.observes('startIndex'),
 
   willDestroyElement: function() {
     this.set('controller.isCountersUpdating', false);