Repository: ambari
Updated Branches:
  refs/heads/trunk 2c9f06257 -> 0272e8a43


AMBARI-18802 Test and fix new tables styles on Ambari (part 4). (ababiichuk)


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/0272e8a4
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/0272e8a4
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/0272e8a4

Branch: refs/heads/trunk
Commit: 0272e8a43b2d9e2ff37697d379a0f7ad15679cff
Parents: 2c9f062
Author: ababiichuk <[email protected]>
Authored: Fri Nov 4 18:56:55 2016 +0200
Committer: ababiichuk <[email protected]>
Committed: Fri Nov 4 18:56:55 2016 +0200

----------------------------------------------------------------------
 ambari-web/app/assets/test/tests.js             |   1 +
 ambari-web/app/messages.js                      |   1 +
 ambari-web/app/styles/alerts.less               |  16 ++-
 ambari-web/app/styles/application.less          |  57 ----------
 ambari-web/app/styles/config_history_flow.less  |   3 -
 .../app/styles/theme/bootstrap-ambari.css       |  18 ++-
 .../templates/common/configs/overrideWindow.hbs |  92 ++++++++--------
 .../templates/common/host_progress_popup.hbs    |   8 +-
 .../common/modal_popups/alerts_popup.hbs        |   8 +-
 ambari-web/app/templates/common/pagination.hbs  |  33 ++++++
 .../admin/stack_upgrade/upgrade_history.hbs     | 110 +++++++++----------
 ambari-web/app/templates/main/alerts.hbs        |  20 ++--
 .../alerts/add_definition_to_group_popup.hbs    |  21 ++--
 .../main/alerts/definition_details.hbs          |  21 ++--
 .../templates/main/dashboard/config_history.hbs |  22 ++--
 ambari-web/app/templates/main/host.hbs          |  25 ++---
 .../app/templates/main/host/host_alerts.hbs     |  22 ++--
 ambari-web/app/templates/main/host/logs.hbs     |  21 ++--
 .../app/templates/main/host/stack_versions.hbs  |  21 ++--
 ambari-web/app/templates/wizard/step3.hbs       |  29 ++---
 ambari-web/app/templates/wizard/step6.hbs       |  16 ++-
 ambari-web/app/templates/wizard/step9.hbs       | 107 +++++++++---------
 ambari-web/app/views.js                         |   1 +
 ambari-web/app/views/common/pagination_view.js  |  81 ++++++++++++++
 ambari-web/app/views/common/table_view.js       | 100 ++---------------
 ambari-web/app/views/main/host.js               |  16 ++-
 .../test/views/common/pagination_view_test.js   |  74 +++++++++++++
 ambari-web/test/views/main/host_test.js         |  26 +++--
 28 files changed, 476 insertions(+), 494 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/assets/test/tests.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/assets/test/tests.js 
b/ambari-web/app/assets/test/tests.js
index 92def58..5c794ea 100644
--- a/ambari-web/app/assets/test/tests.js
+++ b/ambari-web/app/assets/test/tests.js
@@ -231,6 +231,7 @@ var files = [
   'test/views/common/ajax_default_error_popup_body_test',
   'test/views/common/filter_combo_cleanable_test',
   'test/views/common/filter_view_test',
+  'test/views/common/pagination_view_test',
   'test/views/common/table_view_test',
   'test/views/common/quick_link_view_test',
   'test/views/common/rolling_restart_view_test',

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/messages.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index fa5e1bb..7c8ac0e 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -2995,6 +2995,7 @@ Em.I18n.translations = {
   'tableView.filters.all': 'All',
   'tableView.filters.filtered': 'Filtered',
   'tableView.filters.clearFilters': 'Clear filters',
+  'tableView.filters.itemsPerPage': 'Items per page:',
   'tableView.filters.paginationInfo': '{0} - {1} of {2}',
   'tableView.filters.clearAllFilters': 'clear filters',
   'tableView.filters.showAll': 'Show All',

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/styles/alerts.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/alerts.less 
b/ambari-web/app/styles/alerts.less
index 2657444..1ea3492 100644
--- a/ambari-web/app/styles/alerts.less
+++ b/ambari-web/app/styles/alerts.less
@@ -79,9 +79,11 @@
 }
 
 #alert-definitions-table {
-  a {
-    &.disabled {
-      color: #000;
+  tbody {
+    a {
+      &.disabled {
+        color: #000;
+      }
     }
   }
 
@@ -292,9 +294,11 @@
 }
 
 #host-alerts-table {
-  a {
-    &.disabled {
-      color: #000;
+  tbody {
+    a {
+      &.disabled {
+        color: #000;
+      }
     }
   }
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less 
b/ambari-web/app/styles/application.less
index dc98ce1..aa5069d 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -567,63 +567,6 @@ table.diff {
   float: none;
 }
 
-.page-bar {
-  border: 1px solid #E4E4E4;
-  color: #7B7B7B;
-  text-align: right;
-  font-size: 12px;
-  background-color: #FFFFFF;
-  label {
-    font-size: 12px;
-  }
-  .pagination {
-    margin: 0;
-  }
-  div {
-    display: inline-block;
-    margin:0 10px;
-  }
-  .filtered-info, .selected-hosts-info {
-    text-align: left;
-    margin-top: 8px;
-    margin-left: 17px;
-  }
-  .items-on-page {
-    label {
-      display:inline;
-    }
-    select {
-      display: initial;
-      margin-bottom: 4px;
-      margin-top: 4px;
-      width:70px;
-      font-size: 12px;
-      height: 27px;
-    }
-  }
-  .paging_two_button {
-    li.paginate_disabled_next, li.paginate_disabled_previous {
-      color: gray;
-      &:hover {
-        color: gray;
-        text-decoration: none;
-        cursor: default;
-      }
-    }
-
-    li.paginate_next, li.paginate_previous {
-      &:hover {
-        text-decoration: none;
-        cursor: pointer;
-      }
-    }
-    li {
-      padding:0 5px;
-      color: #0088cc;
-    }
-  }
-}
-
 .hidden-scroll {
   overflow-y: hidden;
 }

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/styles/config_history_flow.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/config_history_flow.less 
b/ambari-web/app/styles/config_history_flow.less
index 3613949..1a8d598 100644
--- a/ambari-web/app/styles/config_history_flow.less
+++ b/ambari-web/app/styles/config_history_flow.less
@@ -398,9 +398,6 @@
       font-size: @default-font-size - 1;
     }
   }
-  div.page-bar div.filtered-info {
-    margin-left: 17px;
-  }
   a {
     cursor: pointer;
   }

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/styles/theme/bootstrap-ambari.css
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css 
b/ambari-web/app/styles/theme/bootstrap-ambari.css
index 8ae609a..1a93cbb 100644
--- a/ambari-web/app/styles/theme/bootstrap-ambari.css
+++ b/ambari-web/app/styles/theme/bootstrap-ambari.css
@@ -377,10 +377,6 @@ h2.table-title {
 .table tfoot > tr:first-of-type > td {
   border-top-width: 2px;
 }
-.table tfoot .pagination-block .pagination-block-item {
-  float: left;
-  padding: 0 5px;
-}
 .table.table-hover .action {
   visibility: hidden;
   padding: 0;
@@ -421,6 +417,20 @@ h2.table-title {
 .table.table-hover > tbody > tr:first-of-type:hover > td {
   border-color: #A7DFF2;
 }
+.pagination-block .pagination-block-item {
+  float: left;
+  padding: 0 5px;
+}
+.pagination-block .pagination-block-item a,
+.pagination-block .pagination-block-item a:visited,
+.pagination-block .pagination-block-item a:focus {
+  text-decoration: none;
+}
+.pagination-block .pagination-block-item select {
+  border: none;
+  background-color: transparent;
+  color: #1491C1;
+}
 .wizard {
   border: 2px solid #ebecf1;
 }

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/common/configs/overrideWindow.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/configs/overrideWindow.hbs 
b/ambari-web/app/templates/common/configs/overrideWindow.hbs
index b41e8f1..1154bea 100644
--- a/ambari-web/app/templates/common/configs/overrideWindow.hbs
+++ b/ambari-web/app/templates/common/configs/overrideWindow.hbs
@@ -21,9 +21,9 @@
       <div class="override-controls">
         <div class="alert alert-info">{{view.parentView.dialogMessage}}</div>
         {{#if view.parentView.warningMessage}}
-               <div class="text-warning">
-                 {{view.parentView.warningMessage}}
-               </div>
+          <div class="text-warning">
+            {{view.parentView.warningMessage}}
+          </div>
         {{/if}}
         <table style="width: 100%;">
           <tr>
@@ -37,52 +37,52 @@
               <div class="row">
                 <div class="col-md-7" id="filter-dropdown-div">
                   <!-- Filter text box with drop-down -->
-                             <div class="input-group">
-                               {{view Ember.TextField 
valueBinding="view.filterText" id="appendedDropdownButton"
+                  <div class="input-group">
+                    {{view Ember.TextField valueBinding="view.filterText" 
id="appendedDropdownButton"
                     placeholderBinding="view.filterTextPlaceholder" 
classNames="form-control" disabledBinding="view.isDisabled"}}
-                               <div class="input-group-btn">
-                                 <button class="btn btn-default 
dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
-                                   <span class="caret"></span>
-                                 </button>
-                                 <ul class="dropdown-menu">
-                                         {{#each column in view.filterColumns}}
-                                           <li>
-                                             <a href="#" {{action 
selectFilterColumn column target="view"}}>
-                                               {{#if column.selected}}
-                                     <i class='glyphicon 
glyphicon-ok-sign'></i>
-                                   {{else}}
+                    <div class="input-group-btn">
+                      <button class="btn btn-default dropdown-toggle" 
data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
+                        <span class="caret"></span>
+                      </button>
+                      <ul class="dropdown-menu">
+                        {{#each column in view.filterColumns}}
+                          <li>
+                            <a href="#" {{action selectFilterColumn column 
target="view"}}>
+                              {{#if column.selected}}
+                                <i class='glyphicon glyphicon-ok-sign'></i>
+                              {{else}}
                                 <i class='glyphicon glyphicon-placeholder'></i>
-                                   {{/if}}
-                                               {{column.name}}
-                                             </a>
-                                           </li>
-                                         {{/each}}
-                                 </ul>
-                               </div>
-                             </div>
+                              {{/if}}
+                              {{column.name}}
+                            </a>
+                          </li>
+                        {{/each}}
+                      </ul>
+                    </div>
+                  </div>
                 </div>
                 <div class="col-md-5" id="component-dropdown-div">
                   <!-- Host-components drop-down -->
-                             <div>
-                               <button class="btn btn-block btn-default 
dropdown-toggle" data-toggle="dropdown" href="#" {{bindAttr 
disabled="view.isDisabled"}}>
-                                 {{t common.components}}
-                                 <span class="caret"></span>
-                               </button>
-                               <ul class="dropdown-menu">
-                                 <!-- dropdown menu links -->
-                                 {{#each component in view.filterComponents}}
+                  <div>
+                    <button class="btn btn-block btn-default dropdown-toggle" 
data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
+                      {{t common.components}}
+                      <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu">
+                      <!-- dropdown menu links -->
+                      {{#each component in view.filterComponents}}
                         <li>
                           <a href="#" {{action selectFilterComponent component 
target="view"}}>
                             {{#if component.selected}}
                               <i class='glyphicon glyphicon-ok-sign'></i>
                             {{else}}
                               <i class='glyphicon glyphicon-placeholder'></i>
-                                 {{/if}}
-                                 {{component.displayName}}
-                               </a>
+                            {{/if}}
+                            {{component.displayName}}
+                          </a>
                         </li>
                       {{/each}}
-                               </ul>
+                    </ul>
                   </div>
                 </div>
               </div>
@@ -119,16 +119,18 @@
             </tbody>
          </table>
         </div>
+        {{#if view.isPaginate}}
+          <table class="table table-hover">
+            <tfoot>
+              <tr>
+                <td>
+                  {{view App.PaginationView}}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        {{/if}}
       </div>
   </form>
 
-  {{#if view.isPaginate}}
-    <div class="page-bar pull-right no-borders">
-      <div class="items-on-page">
-        <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-      </div>
-      <div class="info">{{view.paginationInfo}}</div>
-      {{view view.pagination4Btns}}
-    </div>
-  {{/if}}
 {{! /with}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/common/host_progress_popup.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/host_progress_popup.hbs 
b/ambari-web/app/templates/common/host_progress_popup.hbs
index 61a6a9d..4536ce3 100644
--- a/ambari-web/app/templates/common/host_progress_popup.hbs
+++ b/ambari-web/app/templates/common/host_progress_popup.hbs
@@ -290,11 +290,5 @@
 {{/if}}
 </div>
 {{#if view.isPaginate}}
-  <div class="page-bar pull-right no-borders mtm">
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-    </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    {{view view.pagination4Btns}}
-  </div>
+  {{view App.PaginationView}}
 {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/common/modal_popups/alerts_popup.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/modal_popups/alerts_popup.hbs 
b/ambari-web/app/templates/common/modal_popups/alerts_popup.hbs
index fcab416..7ace34c 100644
--- a/ambari-web/app/templates/common/modal_popups/alerts_popup.hbs
+++ b/ambari-web/app/templates/common/modal_popups/alerts_popup.hbs
@@ -57,13 +57,7 @@
     </div>
 
     {{#if view.isPaginate}}
-      <div class="page-bar pull-right no-borders mtm">
-        <div class="items-on-page">
-          <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-        </div>
-        <div class="info">{{view.paginationInfo}}</div>
-        {{view view.pagination4Btns}}
-      </div>
+      {{view App.PaginationView}}
     {{/if}}
   {{else}}
     {{view App.SpinnerView}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/common/pagination.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/common/pagination.hbs 
b/ambari-web/app/templates/common/pagination.hbs
new file mode 100644
index 0000000..d917f92
--- /dev/null
+++ b/ambari-web/app/templates/common/pagination.hbs
@@ -0,0 +1,33 @@
+{{!
+* 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.
+}}
+
+<div class="pagination-block-item">
+  {{t tableView.filters.itemsPerPage}}
+  {{view view.rowsPerPageSelectView 
selectionBinding="view.dataView.displayLength"}}
+</div>
+<div class="pagination-block-item">{{view.dataView.paginationInfo}}</div>
+<div class="pagination-block-item">
+  {{#if hasFirstAndLastPageLinks}}
+    <a {{action firstPage target="view.dataView"}} {{bindAttr 
class="view.isPreviousDisabled:disabled"}}><span class="icon 
icon-step-backward"></span></a>
+  {{/if}}
+  <a {{action previousPage target="view.dataView"}} {{bindAttr 
class="view.isPreviousDisabled:disabled"}}><span class="icon 
icon-chevron-left"></span></a>
+  <a {{action nextPage target="view.dataView"}} {{bindAttr 
class="view.isNextDisabled:disabled"}}><span class="icon 
icon-chevron-right"></span></a>
+  {{#if hasFirstAndLastPageLinks}}
+    <a {{action lastPage target="view.dataView"}} {{bindAttr 
class="view.isNextDisabled:disabled"}}><span class="icon 
icon-step-forward"></span></a>
+  {{/if}}
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs 
b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs
index 6692c8e..e023fbb 100644
--- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs
+++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs
@@ -46,60 +46,60 @@
         </div>
       </div>
     </div>
-         <table class="table advanced-header-table table-hover" 
id="upgrade-summary-table">
-           <thead>
-             <th>{{t common.direction}}</th>
-             <th>{{t common.type}}</th>
-             <th>{{t common.from.version}}</th>
-             <th>{{t common.to.version}}</th>
-             <th>{{t common.start.time}}</th>
-             <th>{{t common.duration}}</th>
-             <th>{{t common.end.time}}</th>
-             <th>{{t common.status}}</th>
-           </thead>
-           <tbody>
-                   {{#if view.pageContent}}
-                     {{#each item in view.pageContent}}
-                       <tr>
-                         <td class='name'>
-                           <span class="trim_hostname">
-                             <a href="#" class="black" {{action 
"showUpgradeHistoryRecord" item target="view"}}>
-                               {{unbound item.directionLabel}}
-                             </a>
-                           </span>
-                         </td>
-                         <td>
-                           <span>{{item.upgradeTypeLabel}}</span>
-                         </td>
-                         <td>
-                           <span>{{item.fromVersion}}</span>
-                         </td>
-                         <td>
-                           <span>{{item.toVersion}}</span>
-                         </td>
-                         <td>
-                           <span>{{item.startTimeLabel}}</span>
-                         </td>
-                         <td>
-                     <span>{{item.duration}}</span>
-                   </td>
-                         <td>
-                           <span>{{item.endTimeLabel}}</span>
-                         </td>
-                         <td>
-                           <span>{{item.requestStatus}}</span>
-                         </td>
-                       </tr>
-                     {{/each}}
-                   {{/if}}
-           </tbody>
-         </table>
-         <div class="page-bar">
-           <div class="items-on-page">
-             <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-           </div>
-           <div class="info">{{view.paginationInfo}}</div>
-      {{view view.pagination2Btns}}
-         </div>
+    <table class="table advanced-header-table table-hover" 
id="upgrade-summary-table">
+      <thead>
+        <th>{{t common.direction}}</th>
+        <th>{{t common.type}}</th>
+        <th>{{t common.from.version}}</th>
+        <th>{{t common.to.version}}</th>
+        <th>{{t common.start.time}}</th>
+        <th>{{t common.duration}}</th>
+        <th>{{t common.end.time}}</th>
+        <th>{{t common.status}}</th>
+      </thead>
+      <tbody>
+        {{#if view.pageContent}}
+          {{#each item in view.pageContent}}
+            <tr>
+              <td class='name'>
+                <span class="trim_hostname">
+                  <a href="#" class="black" {{action 
"showUpgradeHistoryRecord" item target="view"}}>
+                    {{unbound item.directionLabel}}
+                  </a>
+                </span>
+              </td>
+              <td>
+                <span>{{item.upgradeTypeLabel}}</span>
+              </td>
+              <td>
+                <span>{{item.fromVersion}}</span>
+              </td>
+              <td>
+                <span>{{item.toVersion}}</span>
+              </td>
+              <td>
+                <span>{{item.startTimeLabel}}</span>
+              </td>
+              <td>
+                <span>{{item.duration}}</span>
+              </td>
+              <td>
+                <span>{{item.endTimeLabel}}</span>
+              </td>
+              <td>
+                <span>{{item.requestStatus}}</span>
+              </td>
+            </tr>
+          {{/each}}
+        {{/if}}
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="8">
+            {{view App.PaginationView}}
+          </td>
+        </tr>
+        </tfoot>
+    </table>
   </div>
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/alerts.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/alerts.hbs 
b/ambari-web/app/templates/main/alerts.hbs
index c55396c..a8cc513 100644
--- a/ambari-web/app/templates/main/alerts.hbs
+++ b/ambari-web/app/templates/main/alerts.hbs
@@ -86,19 +86,13 @@
       </tr>
     {{/if}}
     </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="5">
+          {{view App.PaginationView}}
+        </td>
+      </tr>
+    </tfoot>
   </table>
 
-  <div class="page-bar">
-    <div class="filtered-info col-md-4">
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-              href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    </div>
-    <div class="selected-hosts-info col-md-4">
-    </div>
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-    </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    {{view view.pagination2Btns}}
-  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/alerts/add_definition_to_group_popup.hbs
----------------------------------------------------------------------
diff --git 
a/ambari-web/app/templates/main/alerts/add_definition_to_group_popup.hbs 
b/ambari-web/app/templates/main/alerts/add_definition_to_group_popup.hbs
index e79c399..445cfd4 100644
--- a/ambari-web/app/templates/main/alerts/add_definition_to_group_popup.hbs
+++ b/ambari-web/app/templates/main/alerts/add_definition_to_group_popup.hbs
@@ -124,17 +124,18 @@
           </tbody>
         </table>
       </div>
+      {{#if view.isPaginate}}
+        <table class="table table-hover">
+          <tfoot>
+            <tr>
+              <td>
+                {{view App.PaginationView}}
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      {{/if}}
     </div>
   </form>
 
-  {{#if view.isPaginate}}
-    <div class="page-bar pull-right no-borders">
-      <div class="items-on-page">
-        <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-      </div>
-      <div class="info">{{view.paginationInfo}}</div>
-      {{view view.pagination4Btns}}
-    </div>
-  {{/if}}
-
 {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/alerts/definition_details.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/alerts/definition_details.hbs 
b/ambari-web/app/templates/main/alerts/definition_details.hbs
index 0318b91..b74dae6 100644
--- a/ambari-web/app/templates/main/alerts/definition_details.hbs
+++ b/ambari-web/app/templates/main/alerts/definition_details.hbs
@@ -256,22 +256,15 @@
           </tr>
         {{/if}}
         </tbody>
+        <tfoot>
+        <tr>
+          <td colspan="5">
+            {{view App.PaginationView}}
+          </td>
+        </tr>
+        </tfoot>
       </table>
 
-      <div class="page-bar">
-        <div class="filtered-info col-md-4">
-          {{#if view.showFilteredContent}}
-            <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-              href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-          {{/if}}
-        </div>
-        <div class="items-on-page">
-          <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-        </div>
-        <div class="info">{{view.paginationInfo}}</div>
-        {{view view.pagination2Btns}}
-      </div>
-
     {{else}}
       {{view App.SpinnerView}}
     {{/if}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/dashboard/config_history.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/dashboard/config_history.hbs 
b/ambari-web/app/templates/main/dashboard/config_history.hbs
index bcb15be..77bb808 100644
--- a/ambari-web/app/templates/main/dashboard/config_history.hbs
+++ b/ambari-web/app/templates/main/dashboard/config_history.hbs
@@ -90,19 +90,13 @@
       <tr><td colspan="5">{{view App.SpinnerView}}</td></tr>
     {{/if}}
     </tbody>
-</table>
+    <tfoot>
+    <tr>
+      <td colspan="5">
+        {{view App.PaginationView dataViewBinding="view" 
isDataLoadedBinding="view.filteringComplete"}}
+      </td>
+    </tr>
+    </tfoot>
+  </table>
 
-  <div class="page-bar">
-    <div class="filtered-info col-md-4">
-    {{#if view.showFilteredContent}}
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-              href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    {{/if}}
-    </div>
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-    </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    {{view view.pagination2Btns}}
-  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/host.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host.hbs 
b/ambari-web/app/templates/main/host.hbs
index 721728b..ae37a0f 100644
--- a/ambari-web/app/templates/main/host.hbs
+++ b/ambari-web/app/templates/main/host.hbs
@@ -121,28 +121,17 @@
       </tr>
     {{/if}}
     </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="13">
+          {{view App.PaginationView 
isDataLoadedBinding="view.filteringComplete" 
rowsPerPageSelectViewBinding="view.rowsPerPageSelectView"}}
+        </td>
+      </tr>
+    </tfoot>
   </table>
 
   <div {{bindAttr class="view.filteringComplete:hidden :table-overlay"}}>
     {{view App.SpinnerView}}
   </div>
 
-  <div class="page-bar">
-    <div class="selected-hosts-info col-md-4">
-      {{#if view.showSelectedFilter}}
-        <div>
-          <a {{action filterSelected target="view"}} href="#">
-            {{view.selectedHosts.length}}
-            {{pluralize view.selectedHostsCount 
singular="t:hosts.filters.selectedHostInfo" 
plural="t:hosts.filters.selectedHostsInfo"}}
-          </a>
-          - <a {{action clearSelection target="view"}} href="#">{{t 
hosts.filters.clearSelection}}</a>
-        </div>
-      {{/if}}
-    </div>
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-    </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    {{view view.pagination2Btns}}
-  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/host/host_alerts.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/host_alerts.hbs 
b/ambari-web/app/templates/main/host/host_alerts.hbs
index f40575c..51b600c 100644
--- a/ambari-web/app/templates/main/host/host_alerts.hbs
+++ b/ambari-web/app/templates/main/host/host_alerts.hbs
@@ -69,25 +69,17 @@
         </tr>
       {{/if}}
       </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="4">
+            {{view App.PaginationView}}
+          </td>
+        </tr>
+      </tfoot>
     </table>
 
   {{else}}
     {{view App.SpinnerView}}
   {{/if}}
 
-  <div class="page-bar">
-    <div class="filtered-info col-md-4">
-      {{#if view.showFilteredContent}}
-        <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-                href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-      {{/if}}
-    </div>
-    <div class="selected-hosts-info col-md-4">
-    </div>
-    <div class="items-on-page">
-      <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-    </div>
-    <div class="info">{{view.paginationInfo}}</div>
-    {{view view.pagination2Btns}}
-  </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/host/logs.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/logs.hbs 
b/ambari-web/app/templates/main/host/logs.hbs
index a0b831c..6d4066b 100644
--- a/ambari-web/app/templates/main/host/logs.hbs
+++ b/ambari-web/app/templates/main/host/logs.hbs
@@ -55,18 +55,11 @@
       {{/each}}
     {{/if}}
   </tbody>
+  <tfoot>
+  <tr>
+    <td colspan="3">
+      {{view App.PaginationView}}
+    </td>
+  </tr>
+  </tfoot>
 </table>
-
-<div class="page-bar">
-  <div class="filtered-info col-md-4">
-    {{#if view.showFilteredContent}}
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-        href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    {{/if}}
-  </div>
-  <div class="items-on-page">
-    <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-  </div>
-  <div class="info">{{view.paginationInfo}}</div>
-  {{view view.pagination2Btns}}
-</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/main/host/stack_versions.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/main/host/stack_versions.hbs 
b/ambari-web/app/templates/main/host/stack_versions.hbs
index 27bb348..60e6571 100644
--- a/ambari-web/app/templates/main/host/stack_versions.hbs
+++ b/ambari-web/app/templates/main/host/stack_versions.hbs
@@ -68,18 +68,11 @@
     </tr>
   {{/if}}
   </tbody>
+  <tfoot>
+  <tr>
+    <td colspan="4">
+      {{view App.PaginationView}}
+    </td>
+  </tr>
+  </tfoot>
 </table>
-
-<div class="page-bar">
-  <div class="filtered-info col-md-4">
-    {{#if view.showFilteredContent}}
-      <label>{{view.filteredContentInfo}} - <a {{action clearFilters 
target="view"}}
-        href="#">{{t tableView.filters.clearAllFilters}}</a></label>
-    {{/if}}
-  </div>
-  <div class="items-on-page">
-    <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.parentView.displayLength"}}</label>
-  </div>
-  <div class="info">{{view.paginationInfo}}</div>
-  {{view view.pagination2Btns}}
-</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/wizard/step3.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step3.hbs 
b/ambari-web/app/templates/wizard/step3.hbs
index aa4181e..d827de8 100644
--- a/ambari-web/app/templates/wizard/step3.hbs
+++ b/ambari-web/app/templates/wizard/step3.hbs
@@ -112,26 +112,15 @@
                   </td>
                 </tr>
               {{/if}}
-              </tbody>
-            </table>
-          </div>
-          <div class="page-bar">
-            <div class="selected-hosts-info pull-left">
-              {{#if view.selectedHostsCount}}
-                <a {{action selectedHostsPopup target="controller"}} href="#">
-                  {{view.selectedHostsCount}}
-                  {{pluralize view.selectedHostsCount 
singular="t:hosts.filters.selectedHostInfo" 
plural="t:hosts.filters.selectedHostsInfo"}}
-                </a>
-                -
-                <a {{action unSelectAll target="view"}} href="#">{{t 
hosts.filters.clearSelection}}</a>
-              {{/if}}
-            </div>
-            <div class="items-on-page">
-              <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-            </div>
-            <div class="info">{{view.paginationInfo}}</div>
-            {{view view.pagination4Btns}}
-          </div>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="5">
+                  {{view App.PaginationView}}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
         </div>
       </div>
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/wizard/step6.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step6.hbs 
b/ambari-web/app/templates/wizard/step6.hbs
index 3ba56a5..ae9f80c 100644
--- a/ambari-web/app/templates/wizard/step6.hbs
+++ b/ambari-web/app/templates/wizard/step6.hbs
@@ -80,17 +80,15 @@
               {{/if}}
             {{/each}}
           </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="100">
+                {{view App.PaginationView}}
+              </td>
+            </tr>
+          </tfoot>
         </table>
       </div>
-      <div id="hosts">
-        <div class="page-bar">
-          <div class="items-on-page">
-            <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-          </div>
-          <div class="info">{{view.paginationInfo}}</div>
-          {{view view.pagination4Btns}}
-        </div>
-      </div>
     </div>
   </div>
 </div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/templates/wizard/step9.hbs
----------------------------------------------------------------------
diff --git a/ambari-web/app/templates/wizard/step9.hbs 
b/ambari-web/app/templates/wizard/step9.hbs
index fa166bb..f079d92 100644
--- a/ambari-web/app/templates/wizard/step9.hbs
+++ b/ambari-web/app/templates/wizard/step9.hbs
@@ -63,65 +63,56 @@
           <div class="clearfix"></div>
         </div>
         <div class="panel-body pre-scrollable">
-            <table id="deploy-status-by-host" class="table table-hover">
-              <thead>
-                <tr>
-                  <th class="host">
-                    {{t common.host}}
-                  </th>
-                  <th class="status">{{t common.status}}</th>
-                  <!--  given by the parsing function that parses data from 
bootstrap call -->
-                  <th class="message">{{t common.message}}</th>
-                  <!-- retrieved from local storage initially -->
-                </tr>
-              </thead>
-              <tbody>
-                {{#if view.pageContent}}
-                  {{#each host in view.pageContent}}
-                    {{#view App.HostStatusView objBinding="host" 
controllerBinding="controller"}}
-                      <td class="host">
-                        <span title="{{unbound host.name}}" 
class="trim_hostname">{{host.name}}</span>
-                      </td>
-                      <td>
-                        <div class="progress-wrapper pull-left">
-                          <div class="progress">
-                            <div {{bindAttr 
class="view.isHostCompleted::active view.isHostCompleted::progress-bar-striped 
view.barColor :progress-bar" style="view.barWidth"}}></div>
-                          </div>
-                        </div>
-                        <div class="progress-percentage 
pull-left">{{host.progress}}%</div>
-                      </td>
-                      <td class="host-message">
-                        <a {{bindAttr class="view.isFailed:text-danger 
view.isSuccess:text-success view.isWarning:text-warning"}}
-                          href="javascript:void(null)"
-                          data-toggle="modal" {{action hostLogPopup 
target="view"}}>{{host.message}}</a>
-                      </td>
-                    {{/view}}
-                  {{/each}}
-                {{else}}
-                  <tr>
-                    <td colspan="3"><p>{{t 
installer.step3.hosts.noHosts}}</p></td>
-                  </tr>
-                {{/if}}
-              </tbody>
-            </table>
-
-            <div class="page-bar">
-              <div class="selected-hosts-info pull-left">
-                {{view.filteredHostsInfo}}
-                -
-                <a {{action showAllHosts target="view"}} href="#">{{t 
tableView.filters.showAll}}</a>
-              </div>
-              <div class="items-on-page">
-                <label>{{t common.show}}: {{view view.rowsPerPageSelectView 
selectionBinding="view.displayLength"}}</label>
-              </div>
-              <div class="info">{{view.paginationInfo}}</div>
-              {{view view.pagination4Btns}}
-            </div>
-
-          </div>
-
+          <table id="deploy-status-by-host" class="table table-hover">
+            <thead>
+            <tr>
+              <th class="host">
+                {{t common.host}}
+              </th>
+              <th class="status">{{t common.status}}</th>
+              <!--  given by the parsing function that parses data from 
bootstrap call -->
+              <th class="message">{{t common.message}}</th>
+              <!-- retrieved from local storage initially -->
+            </tr>
+            </thead>
+            <tbody>
+              {{#if view.pageContent}}
+                {{#each host in view.pageContent}}
+                  {{#view App.HostStatusView objBinding="host" 
controllerBinding="controller"}}
+                  <td class="host">
+                    <span title="{{unbound host.name}}" 
class="trim_hostname">{{host.name}}</span>
+                  </td>
+                  <td>
+                    <div class="progress-wrapper pull-left">
+                      <div class="progress">
+                        <div {{bindAttr class="view.isHostCompleted::active 
view.isHostCompleted::progress-bar-striped view.barColor :progress-bar" 
style="view.barWidth"}}></div>
+                      </div>
+                    </div>
+                    <div class="progress-percentage 
pull-left">{{host.progress}}%</div>
+                  </td>
+                  <td class="host-message">
+                    <a {{bindAttr class="view.isFailed:text-danger 
view.isSuccess:text-success view.isWarning:text-warning"}}
+                        href="javascript:void(null)"
+                        data-toggle="modal" {{action hostLogPopup 
target="view"}}>{{host.message}}</a>
+                  </td>
+                  {{/view}}
+                {{/each}}
+              {{else}}
+              <tr>
+                <td colspan="3"><p>{{t installer.step3.hosts.noHosts}}</p></td>
+              </tr>
+              {{/if}}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="3">
+                  {{view App.PaginationView}}
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
       </div>
-
       {{#if view.resultMsg}}
         <p {{bindAttr class="view.resultMsgColor :alert 
:alert-warning"}}>{{view.resultMsg}}
           {{#if view.isHostHeartbeatLost}}

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/views.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views.js b/ambari-web/app/views.js
index a04dcc4..77b5d5a 100644
--- a/ambari-web/app/views.js
+++ b/ambari-web/app/views.js
@@ -95,6 +95,7 @@ 
require('views/common/configs/widgets/comparison/config_widget_comparison_view')
 require('views/common/configs/service_config_layout_tab_view');
 require('views/common/filter_combobox');
 require('views/common/filter_combo_cleanable');
+require('views/common/pagination_view');
 require('views/common/table_view');
 require('views/common/progress_bar_view');
 require('views/common/controls_view');

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/views/common/pagination_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/pagination_view.js 
b/ambari-web/app/views/common/pagination_view.js
new file mode 100644
index 0000000..28e41e1
--- /dev/null
+++ b/ambari-web/app/views/common/pagination_view.js
@@ -0,0 +1,81 @@
+/**
+ * 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');
+
+/**
+ * Set of typical properties for Select View with list of "rows-per-page" 
options
+ * @type {Ember.View}
+ */
+App.PaginationSelectMixin = Em.Mixin.create({
+
+  content: ['10', '25', '50', '100'],
+
+  attributeBindings: ['disabled'],
+
+  disabled: false,
+
+  change: function () {
+    this.get('parentView.dataView').saveDisplayLength();
+  }
+
+});
+
+App.PaginationView = Em.View.extend({
+
+  templateName: require('templates/common/pagination'),
+
+  classNames: ['pagination-block', 'pull-right'],
+
+  /**
+   * Link to view corresponding to paginated data
+   */
+  dataViewBinding: 'parentView',
+
+  /**
+   * Determines whether links to the first and last pages should be displayed
+   * @type {Boolean}
+   */
+  hasFirstAndLastPageLinks: false,
+
+  /**
+   * Determines whether paginated data is loaded
+   * Should be bound to property from dataView if necessary
+   * @type {Boolean}
+   */
+  isDataLoaded: true,
+
+  /**
+   * Determines whether link to previous page should be disabled
+   * @type {Boolean}
+   */
+  isPreviousDisabled: Em.computed.or('dataView.isCurrentPageFirst', 
'!isDataLoaded'),
+
+  /**
+   * Determines whether link to next page should be disabled
+   * @type {Boolean}
+   */
+  isNextDisabled: Em.computed.or('dataView.isCurrentPageLast', 
'!isDataLoaded'),
+
+  /**
+   * Select View with list of "rows-per-page" options
+   * @type {Ember.View}
+   */
+  rowsPerPageSelectView: Em.Select.extend(App.PaginationSelectMixin)
+
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/views/common/table_view.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/common/table_view.js 
b/ambari-web/app/views/common/table_view.js
index 543be03..7d6419a 100644
--- a/ambari-web/app/views/common/table_view.js
+++ b/ambari-web/app/views/common/table_view.js
@@ -19,22 +19,6 @@
 var App = require('app');
 var filters = require('views/common/filter_view');
 
-App.PaginationBtnsView = Ember.View.extend({
-  tag: 'div',
-  previousBtnClass: function () {
-    if (this.get("parentView.startIndex") > 1) {
-      return "paginate_previous";
-    }
-    return "paginate_disabled_previous";
-  }.property("parentView.startIndex", 'parentView.filteredCount'),
-  nextBtnClass: function () {
-    if ((this.get("parentView.endIndex")) < 
this.get("parentView.filteredCount")) {
-      return "paginate_next";
-    }
-    return "paginate_disabled_next";
-  }.property("parentView.endIndex", 'parentView.filteredCount')
-});
-
 App.TableView = Em.View.extend(App.UserPref, {
 
   init: function() {
@@ -86,6 +70,16 @@ App.TableView = Em.View.extend(App.UserPref, {
   totalCount: Em.computed.alias('content.length'),
 
   /**
+   * Determines whether cuurent page is the first one
+   */
+  isCurrentPageFirst: Em.computed.equal('startIndex', 1),
+
+  /**
+   * Determines whether cuurent page is the last one
+   */
+  isCurrentPageLast: Em.computed.equalProperties('endIndex', 'filteredCount'),
+
+  /**
    * Do filtering, using saved in the local storage filter conditions
    */
   willInsertElement: function () {
@@ -198,80 +192,6 @@ App.TableView = Em.View.extend(App.UserPref, {
    */
   paginationInfo: Em.computed.i18nFormat('tableView.filters.paginationInfo', 
'startIndex', 'endIndex', 'filteredCount'),
 
-  pagination2Btns: App.PaginationBtnsView.extend({
-    classNames: ['paging_two_button'],
-    template: Em.Handlebars.compile('<ul class="pagination">' +
-        '<li {{action previousPage target="view.parentView"}} {{bindAttr 
class="view.previousBtnClass"}}>' +
-        '<i class="glyphicon glyphicon-arrow-left"></i>' +
-        '</li>' +
-        '<li {{action nextPage target="view.parentView"}} {{bindAttr 
class="view.nextBtnClass"}}>' +
-        '<i class="glyphicon glyphicon-arrow-right"></i>' +
-        '</li>' +
-        '</ul>')
-  }),
-
-  pagination4Btns: App.PaginationBtnsView.extend({
-    classNames: ['paging_two_button'],
-    template: Em.Handlebars.compile('<ul class="pagination">' +
-        '{{view view.parentView.paginationFirst}}' +
-        '<li {{action previousPage target="view.parentView"}} {{bindAttr 
class="view.previousBtnClass"}}>' +
-        '<i class="glyphicon glyphicon-arrow-left"></i>' +
-        '</li>' +
-        '<li {{action nextPage target="view.parentView"}} {{bindAttr 
class="view.nextBtnClass"}}>' +
-        '<i class="glyphicon glyphicon-arrow-right"></i>' +
-        '</li>' +
-        '{{view view.parentView.paginationLast}}' +
-        '</ul>')
-  }),
-
-  paginationFirst: Ember.View.extend({
-    tagName: 'li',
-    template: Ember.Handlebars.compile('<i class="glyphicon 
glyphicon-step-backward"></i>'),
-    classNameBindings: ['class'],
-    class: function () {
-      if ((this.get("parentView.parentView.endIndex")) > 
parseInt(this.get("parentView.parentView.displayLength"))) {
-        return "paginate_previous";
-      }
-      return "paginate_disabled_previous";
-    }.property("parentView.parentView.endIndex", 
'parentView.parentView.filteredCount'),
-
-    click: function () {
-      if (this.get('class') === "paginate_previous") {
-        this.get('parentView.parentView').firstPage();
-      }
-    }
-  }),
-
-  paginationLast: Ember.View.extend({
-    tagName: 'li',
-    template: Ember.Handlebars.compile('<i class="glyphicon 
glyphicon-step-forward"></i>'),
-    classNameBindings: ['class'],
-    class: function () {
-      if (this.get("parentView.parentView.endIndex") !== 
this.get("parentView.parentView.filteredCount")) {
-        return "paginate_next";
-      }
-      return "paginate_disabled_next";
-    }.property("parentView.parentView.endIndex", 
'parentView.parentView.filteredCount'),
-
-    click: function () {
-      if (this.get('class') === "paginate_next") {
-        this.get('pparentView.arentView').lastPage();
-      }
-    }
-  }),
-
-  /**
-   * Select View with list of "rows-per-page" options
-   * @type {Ember.View}
-   */
-  rowsPerPageSelectView: Em.Select.extend({
-    classNames: ['form-control'],
-    content: ['10', '25', '50', '100'],
-    change: function () {
-      this.get('parentView').saveDisplayLength();
-    }
-  }),
-
   /**
    * Start index for displayed content on the page
    */

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/app/views/main/host.js
----------------------------------------------------------------------
diff --git a/ambari-web/app/views/main/host.js 
b/ambari-web/app/views/main/host.js
index 39b45b0..6043d63 100644
--- a/ambari-web/app/views/main/host.js
+++ b/ambari-web/app/views/main/host.js
@@ -131,24 +131,22 @@ App.MainHostView = 
App.TableView.extend(App.TableServerViewMixin, {
    * Select View with list of "rows-per-page" options
    * @type {Ember.View}
    */
-  rowsPerPageSelectView: Em.Select.extend({
-    classNames: ['form-control'],
-    content: ['10', '25', '50', '100'],
-    attributeBindings: ['disabled'],
+  rowsPerPageSelectView: Em.Select.extend(App.PaginationSelectMixin, {
+
     disabled: true,
 
     disableView: function () {
       Em.run.next(this, function(){
-        this.set('disabled', !this.get('parentView.filteringComplete'));
+        this.set('disabled', 
!this.get('parentView.dataView.filteringComplete'));
       });
-    }.observes('parentView.filteringComplete'),
+    }.observes('parentView.dataView.filteringComplete'),
 
     change: function () {
-      this.get('parentView').saveDisplayLength();
+      this.get('parentView.dataView').saveDisplayLength();
       var self = this;
-      if (this.get('parentView.startIndex') !== 1 && 
this.get('parentView.startIndex') !== 0) {
+      if (this.get('parentView.dataView.startIndex') !== 1 && 
this.get('parentView.dataView.startIndex') !== 0) {
         Ember.run.next(function () {
-          self.set('parentView.startIndex', 1);
+          self.set('parentView.dataView.startIndex', 1);
         });
       }
     }

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/test/views/common/pagination_view_test.js
----------------------------------------------------------------------
diff --git a/ambari-web/test/views/common/pagination_view_test.js 
b/ambari-web/test/views/common/pagination_view_test.js
new file mode 100644
index 0000000..54899e1
--- /dev/null
+++ b/ambari-web/test/views/common/pagination_view_test.js
@@ -0,0 +1,74 @@
+/**
+ * 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');
+require('views/common/pagination_view');
+
+describe('App.PaginationSelectMixin', function () {
+
+  var obj;
+
+  beforeEach(function () {
+    obj = Em.Object.create(App.PaginationSelectMixin);
+  });
+
+  describe('#change', function () {
+
+    var dataView = {
+      saveDisplayLength: Em.K
+    };
+
+    beforeEach(function () {
+      sinon.spy(dataView, 'saveDisplayLength');
+      obj.set('parentView', {
+        dataView: dataView
+      });
+      obj.change();
+    });
+
+    it('should call saveDisplayLength', function () {
+      expect(dataView.saveDisplayLength.calledOnce).to.be.true;
+    });
+
+  });
+
+});
+
+describe('App.PaginationView', function () {
+
+  var dataView = {},
+    getView = function () {
+      return App.PaginationView.create({
+        parentView: dataView
+      });
+    };
+
+  describe('#dataView', function () {
+
+    it('should be bound to parentView', function () {
+      var view = getView();
+      expect(view.get('dataView')).to.eql(dataView);
+    });
+
+  });
+
+  App.TestAliases.testAsComputedOr(getView(), 'isPreviousDisabled', 
['dataView.isCurrentPageFirst', '!isDataLoaded']);
+
+  App.TestAliases.testAsComputedOr(getView(), 'isNextDisabled', 
['dataView.isCurrentPageLast', '!isDataLoaded']);
+
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/0272e8a4/ambari-web/test/views/main/host_test.js
----------------------------------------------------------------------
diff --git a/ambari-web/test/views/main/host_test.js 
b/ambari-web/test/views/main/host_test.js
index 79cc65c..50279e6 100644
--- a/ambari-web/test/views/main/host_test.js
+++ b/ambari-web/test/views/main/host_test.js
@@ -242,8 +242,10 @@ describe('App.MainHostView', function () {
     beforeEach(function () {
       rowsPerPageSelectView = view.get('rowsPerPageSelectView').create({
         parentView: Em.Object.create({
-          saveDisplayLength: Em.K,
-          startIndex: 1
+          dataView: {
+            saveDisplayLength: Em.K,
+            startIndex: 1
+          }
         }),
         controller: Em.Object.create()
       });
@@ -262,7 +264,7 @@ describe('App.MainHostView', function () {
       });
 
       it("disabled should be false", function () {
-        rowsPerPageSelectView.set('parentView.filteringComplete', true);
+        rowsPerPageSelectView.set('parentView.dataView.filteringComplete', 
true);
         expect(rowsPerPageSelectView.get('disabled')).to.be.false;
       });
     });
@@ -270,36 +272,36 @@ describe('App.MainHostView', function () {
     describe("#change()", function () {
 
       beforeEach(function () {
-        sinon.stub(rowsPerPageSelectView.get('parentView'), 
'saveDisplayLength');
+        sinon.stub(rowsPerPageSelectView.get('parentView.dataView'), 
'saveDisplayLength');
         sinon.stub(Ember.run, 'next', Em.clb);
       });
 
       afterEach(function () {
-        rowsPerPageSelectView.get('parentView').saveDisplayLength.restore();
+        
rowsPerPageSelectView.get('parentView.dataView').saveDisplayLength.restore();
         Ember.run.next.restore();
       });
 
       it("saveDisplayLength should be called", function () {
         rowsPerPageSelectView.change();
-        
expect(rowsPerPageSelectView.get('parentView').saveDisplayLength.calledOnce).to.be.true;
+        
expect(rowsPerPageSelectView.get('parentView.dataView').saveDisplayLength.calledOnce).to.be.true;
       });
 
       it("startIndex = 1", function () {
-        rowsPerPageSelectView.set('parentView.startIndex', 1);
+        rowsPerPageSelectView.set('parentView.dataView.startIndex', 1);
         rowsPerPageSelectView.change();
-        
expect(rowsPerPageSelectView.get('parentView.startIndex')).to.be.equal(1);
+        
expect(rowsPerPageSelectView.get('parentView.dataView.startIndex')).to.be.equal(1);
       });
 
       it("startIndex = 0", function () {
-        rowsPerPageSelectView.set('parentView.startIndex', 0);
+        rowsPerPageSelectView.set('parentView.dataView.startIndex', 0);
         rowsPerPageSelectView.change();
-        
expect(rowsPerPageSelectView.get('parentView.startIndex')).to.be.equal(0);
+        
expect(rowsPerPageSelectView.get('parentView.dataView.startIndex')).to.be.equal(0);
       });
 
       it("startIndex = 2", function () {
-        rowsPerPageSelectView.set('parentView.startIndex', 2);
+        rowsPerPageSelectView.set('parentView.dataView.startIndex', 2);
         rowsPerPageSelectView.change();
-        
expect(rowsPerPageSelectView.get('parentView.startIndex')).to.be.equal(1);
+        
expect(rowsPerPageSelectView.get('parentView.dataView.startIndex')).to.be.equal(1);
       });
     });
   });

Reply via email to