AMBARI-6334. "Manage Configuration Groups" popup takes more than 30 seconds to load on a 2k-node cluster(Denys Buzhor via alexantonenko)

ambari-web/app/styles/application.less

@@ -1797,10 +1797,11 @@ input{
 }
 }
 .hosts-table-container{
-width:100%;
-height: 250px;
-overflow: auto;
-border: 1px solid #eee;
+  width:100%;
+  height: 225px;
+  max-height: 225px;
+  overflow: auto;
+  border: 1px solid #eee;
 }
 table{
 th {
@@ -6175,6 +6176,8 @@ i.icon-asterisks {
   margin-top: @space-m;
 }
 
+.mbm { margin-bottom: @space-m; }
+
 .mll {
   margin-left: @space-l;
 }

ambari-web/app/templates/common/configs/overrideWindow.hbs

@@ -17,7 +17,7 @@
 }}
 
 {{! #with view.categoryConfigProperty}}
-  <form class="form-horizontal" autocomplete="off">
+  <form class="form-horizontal mbm" autocomplete="off">
       <div class="override-controls">
         <div class="alert alert-info">{{view.parentView.dialogMessage}}</div>
         {{#if view.parentView.warningMessage}}
@@ -102,7 +102,7 @@
          </table>
         <div class="hosts-table-container">
           <table class="table table-striped hosts-table">
-          {{#each entry in view.parentView.availableHosts}}
+          {{#each entry in view.pageContent}}
             <tr {{bindAttr class="entry.filtered::hidden"}}>
               <td width="10%">
                 {{view Ember.Checkbox checkedBinding="entry.selected"}}
@@ -119,4 +119,19 @@
         </div>
       </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>
+      <div class="paging_two_button">
+        {{view view.paginationFirst}}
+        {{view view.paginationLeft}}
+        {{view view.paginationRight}}
+        {{view view.paginationLast}}
+      </div>
+    </div>
+  {{/if}}
 {{! /with}}

ambari-web/app/utils/hosts.js

@@ -15,6 +15,9 @@
  * the License.
  */
 
+require('views/common/table_view');
+
+var App = require('app');
 var lazyloading = require('utils/lazy_loading');
 
 module.exports = {
@@ -70,9 +73,13 @@ module.exports = {
         callback(null);
         this.hide();
       },
-      bodyClass: Ember.View.extend({
+      bodyClass: App.TableView.extend({
         templateName: require('templates/common/configs/overrideWindow'),
         controllerBinding: 'App.router.mainServiceInfoConfigsController',
+        isPaginate: true,
+        filteredContent: function() {
+          return this.get('parentView.availableHosts').filterProperty('filtered') || [];
+        }.property('parentView.availableHosts.@each.filtered'),
         filterText: '',
         filterTextPlaceholder: Em.I18n.t('hosts.selectHostsDialog.filter.placeHolder'),
         filterColumn: null,
@@ -137,6 +144,8 @@ module.exports = {
             }
             host.set('filtered', !skip);
           }, this);
+
+          this.set('startIndex', 1);
         }.observes('parentView.availableHosts', 'filterColumn', 'filterText', 'filterComponent', 'filterComponent.componentName', 'showOnlySelectedHosts'),
         hostSelectMessage: function () {
           var hosts = this.get('parentView.availableHosts');