AMBARI-1484. Reintroduce client-side paging for Hosts table. (yusaku)

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

CHANGES.txt

@@ -51,6 +51,8 @@ Trunk (unreleased changes):
 
  IMPROVEMENTS
 
+ AMBARI-1484. Reintroduce client-side paging for Hosts table. (yusaku)
+
  AMBARI-1473. Further optimization of querying host information from the
  server. (yusaku)
 

ambari-web/app/styles/application.less

@@ -1265,6 +1265,45 @@ table.graphs {
 }
 /*Hosts*/
 #hosts {
+  .page-bar {
+    border: 1px solid silver;
+    text-align:right;
+    div {
+      display: inline-block;
+      margin:0 10px;
+    }
+    .items-on-page {
+      label {
+        display:inline;
+      }
+      select {
+        margin-bottom: 4px;
+        margin-top: 4px;
+        width:70px;
+      }
+    }
+    .paging_two_button {
+      a.paginate_disabled_next, a.paginate_disabled_previous {
+        color: gray;
+        &:hover {
+          color: gray;
+          text-decoration: none;
+          cursor: default;
+        }
+      }
+
+      a.paginate_next, a.paginate_previous {
+        &:hover {
+          text-decoration: none;
+          cursor: pointer;
+        }
+      }
+      a {
+        padding:0 5px;
+      }
+    }
+  }
+
   .health-status-HEALTHY{
     background-image: @status-live-marker;
   }
@@ -1357,20 +1396,6 @@ table.graphs {
     .sorting_desc { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAIEAAAIDAQAAAAAAAAAAAAAAAAAGBwgJCgEBAAIDAQAAAAAAAAAAAAAAAAMFBAYHCBAAAAUDAwMFAAAAAAAAAAAAAQIDBAUABgcSNTYRFQgTZFUWZhEAAAQEAggGAwAAAAAAAAAAAAECAxEhBAYSMjFBYRMzFDQFUZFSYmMHJFRk/9oADAMBAAIRAxEAPwDv4oAKACgCKc1tMmusb3Eph6cSgsgx7fucEZxGRks2llGIGVWgVm8q1dt0+6ogKaapSgdNbQPXTqAdwsN602bopk3vTnUW24rduwccbU2S5E8Sm1JM92czSZwNOKUYDFrCqTp1corDUFMpEcYap+Ipb4P5O8n81y9xXXlG50yY+thR3AEivqFvRDmduvSUrhuLtrFNXqCFvJm1LAQ5RMuchB6gBy13f7+tP6lsOipuz2jSGdy1ZJeNzmXnEtU+pWFTikmbxyTEjgglKKZpMU3ZanudYtTtSr8dMoYSKKvKMte0aUV5YGxgoASbD2iQ4Tyi6uB7Rvz/AHD9R8r7/wBWr64uta6/pKfq+JwUZP5/1/hwCFjIeTMrLo0np93q2xDtVCJh/9k=) no-repeat right 50%; }
     .sorting { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAEwATAwERAAIRAQMRAf/EAGgAAAIDAQAAAAAAAAAAAAAAAAUHAAYICgEBAQAAAAAAAAAAAAAAAAAAAAEQAAEEAQIFAgcAAAAAAAAAAAECAwQFABEGIRI0NQcTFDFBMmNUZRYRAQEBAQAAAAAAAAAAAAAAAAABEUH/2gAMAwEAAhEDEQA/AO93cd/XbXpLC9tHQ1Dr46nljUBby/gzGZB+p+Q6QhA+ZOApfDnllW/ha1tv6Ee7iyH5kRlvlbTIqHndWkNJ0HO7XFQbWeJUkpUeOpySrZh65UUnyFUW1ztaexRmIbaPyzoLE6vg2UWW9GC1e0XHnsSGEqfQohCwApK9OIGuAjfBP9VuG0m39vGqINVUe4r2xF21TVsuXZOI9N9lMmLBYkttQ21auBKhqtSUngCMkW5xqjKiYASh6SR2Tulr2HpOvf6j9p+V9/mwDeB//9k=) no-repeat right 50%; }
 
-    a.paginate_disabled_next, a.paginate_disabled_previous {
-      color: gray;
-      &:hover {
-        color: gray;
-        text-decoration: none;
-      }
-    }
-
-    a.paginate_enabled_next, a.paginate_enabled_previous {
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
     div.view-wrapper {
       .btn-group{
         margin-bottom: 9px;

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

@@ -58,8 +58,8 @@
     </tr>
     </thead>
     <tbody>
-    {{#if view.filteredContent.length}}
-    {{#each host in view.filteredContent}}
+    {{#if view.pageContent}}
+    {{#each host in view.pageContent}}
     {{#view view.HostView contentBinding="host"}}
       <td class="first">
         <span {{bindAttr class="host.healthClass"}} {{bindAttr title="host.healthToolTip" }}></span>
@@ -94,4 +94,15 @@
     {{/if}}
     </tbody>
   </table>
+
+  <div class="page-bar">
+    <div class="items-on-page">
+      <label>{{t common.show}}: {{view view.hostPerPageSelectView selectionBinding="view.displayLength"}}</label>
+    </div>
+    <div class="info">{{view.paginationInfo}}</div>
+    <div class="paging_two_button">
+      {{view view.paginationLeft}}
+      {{view view.paginationRight}}
+    </div>
+  </div>
 </div>

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

@@ -106,10 +106,10 @@ var fieldView = Em.View.extend({
    */
   click: function(event){
     if(this.get('status') === 'sorting_desc'){
-      this.get('parentView').sort(this, true);
+      this.get('parentView').sort(this, false);
       this.set('status', 'sorting_asc');
     } else {
-      this.get('parentView').sort(this, false);
+      this.get('parentView').sort(this, true);
       this.set('status', 'sorting_desc');
     }
   }

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

@@ -37,6 +37,87 @@ App.MainHostView = Em.View.extend({
       this.set('controller.filteredByAlerts', false);
     }
   },
+
+  /**
+   * return pagination information displayed on the hosts page
+   */
+  paginationInfo: function () {
+    return this.t('apps.filters.paginationInfo').format(this.get('startIndex'), this.get('endIndex'), this.get('filteredContent.length'));
+  }.property('displayLength', 'filteredContent.length', 'startIndex', 'endIndex'),
+
+  paginationLeft: Ember.View.extend({
+    tagName: 'a',
+    template: Ember.Handlebars.compile('<i class="icon-arrow-left"></i>'),
+    classNameBindings: ['class'],
+    class: function () {
+      if (this.get("parentView.startIndex") > 1) {
+       return "paginate_previous";
+      }
+      return "paginate_disabled_previous";
+    }.property("parentView.startIndex", 'filteredContent.length'),
+
+    click: function () {
+      this.get('parentView').previousPage();
+    }
+  }),
+
+  paginationRight: Ember.View.extend({
+    tagName: 'a',
+    template: Ember.Handlebars.compile('<i class="icon-arrow-right"></i>'),
+    classNameBindings: ['class'],
+    class: function () {
+      if ((this.get("parentView.endIndex")) < this.get("parentView.filteredContent.length")) {
+       return "paginate_next";
+      }
+      return "paginate_disabled_next";
+    }.property("parentView.endIndex", 'filteredContent.length'),
+
+    click: function () {
+      this.get('parentView').nextPage();
+    }
+  }),
+
+  hostPerPageSelectView: Em.Select.extend({
+    content: ['10', '25', '50']
+  }),
+
+  // start index for displayed content on the hosts page
+  startIndex: 1,
+
+  // calculate end index for displayed content on the hosts page
+  endIndex: function () {
+    return Math.min(this.get('filteredContent.length'), this.get('startIndex') + parseInt(this.get('displayLength')) - 1);
+  }.property('startIndex', 'displayLength', 'filteredContent.length'),
+
+  /**
+   * onclick handler for previous page button on the hosts page
+   */
+  previousPage: function () {
+    var result = this.get('startIndex') - parseInt(this.get('displayLength'));
+    if (result  < 2) {
+      result = 1;
+    }
+    this.set('startIndex', result);
+  },
+
+  /**
+   * onclick handler for next page button on the hosts page
+   */
+  nextPage: function () {
+    var result = this.get('startIndex') + parseInt(this.get('displayLength'));
+    if (result - 1 < this.get('filteredContent.length')) {
+      this.set('startIndex', result);
+    }
+  },
+
+  // the number of hosts to show on every page of the hosts page view
+  displayLength: null,
+
+  // calculates default value for startIndex property after applying filter or changing displayLength
+  updatePaging: function () {
+      this.set('startIndex', Math.min(1, this.get('filteredContent.length')));
+  }.observes('displayLength', 'filteredContent.length'),
+
   sortView: sort.wrapperView,
   nameSort: sort.fieldView.extend({
     name:'publicHostName',
@@ -257,10 +338,6 @@ App.MainHostView = Em.View.extend({
     }
   }.observes('controller.filteredByAlerts'),
 
-  startIndex : function(){
-    return Math.random();
-  }.property(),
-
   /**
    * Apply each filter to host
    *
@@ -326,7 +403,13 @@ App.MainHostView = Em.View.extend({
    * contain filter conditions for each column
    */
   filterConditions: [],
-  filteredContent: null,
+  filteredContent: [],
+
+  // contain content to show on the current page of hosts page view
+  pageContent: function () {
+    return this.get('filteredContent').slice(this.get('startIndex') - 1, this.get('endIndex'));
+  }.property('filteredContent.length', 'startIndex', 'endIndex'),
+
   /**
    * filter table by filterConditions
    */
@@ -350,7 +433,7 @@ App.MainHostView = Em.View.extend({
         });
         this.set('filteredContent', result);
       } else {
-        this.set('filteredContent', content);
+        this.set('filteredContent', content.toArray());
       }
     }
   }.observes('content')