AMBARI-5854 Background Operations popup hangs and makes UI non-responsive with requests containing 1000+ hosts. (atkach)

ambari-web/app/styles/application.less

@@ -351,6 +351,61 @@ footer {
   }
 }
 
+.page-bar {
+  border: 1px solid #E4E4E4;
+  color: #7B7B7B;
+  text-align: right;
+  font-size: 12px;
+  label {
+    font-size: 12px;
+  }
+  div {
+    display: inline-block;
+    margin:0 10px;
+  }
+  .filtered-hosts-info, .selected-hosts-info {
+    text-align: left;
+    margin-top: 8px;
+    margin-left: 17px;
+  }
+  .items-on-page {
+    label {
+      display:inline;
+    }
+    select {
+      margin-bottom: 4px;
+      margin-top: 4px;
+      width:70px;
+      font-size: 12px;
+      height: 27px;
+    }
+  }
+  .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;
+    }
+  }
+}
+
+.hidden-scroll {
+  overflow-y: hidden;
+}
+
 #version-mismatch-title {
   font-size: 18px;
   font-weight: bold;
@@ -694,9 +749,6 @@ h1 {
       max-height: 440px;
       position: relative;
     }
-    .hidden-scroll {
-      overflow-y: hidden;
-    }
     .spinner-overlay {
       position: absolute;
       width: 100%;
@@ -1754,6 +1806,8 @@ width:100%;
     }
   }
   #host-info, #service-info{
+    overflow: auto;
+    max-height: 340px;
     .span2{
       width:20%;
       float: left;
@@ -1915,6 +1969,8 @@ width:100%;
   }
 
   #host-log {
+    max-height: 340px;
+    overflow: auto;
     .log-list-wrap {
       padding: 10px 10px 10px 20px;
       border-top: 1px solid #CCC;
@@ -1961,7 +2017,10 @@ width:100%;
 }
 
 .task-detail-info {
-
+  .task-detail-log-info {
+    max-height: 340px;
+    overflow: auto;
+  }
   .task-detail-log-clipboard {
     display: none;
     resize: none;
@@ -3177,56 +3236,6 @@ table.graphs {
       background: none repeat scroll 0 0 #F8F8F8;
     }
   }
-  .page-bar {
-    border: 1px solid #E4E4E4;
-    color: #7B7B7B;
-    text-align: right;
-    font-size: 12px;
-	label {
-    font-size: 12px;
-    }
-    div {
-      display: inline-block;
-      margin:0 10px;
-    }
-    .filtered-hosts-info, .selected-hosts-info {
-      text-align: left;
-      margin-top: 8px;
-      margin-left: 17px;
-    }
-    .items-on-page {
-      label {
-        display:inline;
-      }
-      select {
-        margin-bottom: 4px;
-        margin-top: 4px;
-        width:70px;
-        font-size: 12px;
-        height: 27px;
-      }
-    }
-    .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;
-      }
-    }
-  }
   .status-dot-position {
     background-position: center;
     background-repeat: no-repeat;
@@ -4491,58 +4500,6 @@ ul.filter {
       }
     }
   }
-
-  .page-bar {
-    border: 1px solid #E4E4E4;
-    color: #7B7B7B;
-    text-align: right;
-    font-size: 12px;
-    label {
-      font-size: 12px;
-    }
-    div {
-      display: inline-block;
-      margin:0 10px;
-    }
-    .filtered-hosts-info, .selected-hosts-info {
-      text-align: left;
-      margin-top: 8px;
-      margin-left: 17px;
-    }
-    .items-on-page {
-      label {
-        display:inline;
-      }
-      select {
-        margin-bottom: 4px;
-        margin-top: 4px;
-        width:70px;
-        font-size: 12px;
-        height: 27px;
-      }
-    }
-    .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;
-      }
-    }
-  }
-
   .status-dot-position {
     background-position: center;
     background-repeat: no-repeat;
@@ -6134,6 +6091,11 @@ i.icon-asterisks {
 .mlc {
   margin-left: 0;
 }
+
+.mtm {
+  margin-top: @space-m;
+}
+
 #cleanerContainer {
   z-index: 2;
   position: absolute;

ambari-web/app/templates/common/host_progress_popup.hbs

@@ -106,7 +106,7 @@
       {{#if view.isHostEmptyList}}
         <div class="log-list-wrap">{{t hostPopup.noHostsToShow}}</div>
       {{else}}
-        {{#each hostInfo in view.hosts}}
+        {{#each hostInfo in view.pageContent}}
           <div {{bindAttr class="hostInfo.isVisible::hidden :log-list-wrap"}}>
             <div {{action gotoTasks hostInfo}} class="task-list-line-cursor">
               <div class="host-name-icon-wrap">
@@ -198,3 +198,17 @@
       <div class="spinner"></div>
     {{/if}}
 </div>
+{{#if view.pagination}}
+  <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>
+    <div class="paging_two_button">
+      {{view view.paginationFirst}}
+      {{view view.paginationLeft}}
+      {{view view.paginationRight}}
+      {{view view.paginationLast}}
+    </div>
+  </div>
+{{/if}}

ambari-web/app/templates/common/modal_popup.hbs

@@ -31,7 +31,7 @@
       {{/if}}
     </h3>
   </div>
-  <div class="modal-body">
+  <div {{bindAttr class=":modal-body view.isHideBodyScroll:hidden-scroll"}}>
     {{#if bodyClass}}
       {{view bodyClass}}
     {{else}}

ambari-web/app/utils/host_progress_popup.js

@@ -444,6 +444,8 @@ App.HostPopup = Em.Object.create({
       }.property('count')
     });
     self.set('isPopup', App.ModalPopup.show({
+
+      isHideBodyScroll: true,
       /**
        * no need to track is it loaded when popup contain only list of hosts
        * @type {bool}
@@ -516,7 +518,7 @@ App.HostPopup = Em.Object.create({
       },
       secondary: null,
 
-      bodyClass: Em.View.extend({
+      bodyClass: App.TableView.extend({
         templateName: require('templates/common/host_progress_popup'),
         isLogWrapHidden: true,
         isTaskListHidden: true,
@@ -534,6 +536,12 @@ App.HostPopup = Em.Object.create({
         hosts: self.get('hosts'),
         services: self.get('servicesInfo'),
 
+        pagination: false,
+        displayLength: "25",
+        content: function() {
+          return this.get('hosts') || [];
+        }.property('hosts.length', 'isHostListHidden'),
+
         currentHost: function () {
           return this.get('hosts') && this.get('hosts').findProperty('name', this.get('controller.currentHostName'));
         }.property('controller.currentHostName'),
@@ -685,14 +693,17 @@ App.HostPopup = Em.Object.create({
          * Depending on currently viewed tab, call setSelectCount function
          */
         updateSelectView: function () {
+          var isPaginate;
           if (!this.get('isHostListHidden')) {
             //since lazy loading used for hosts, we need to get hosts info directly from controller, that always contains entire array of data
             this.get('controller').setSelectCount(this.get("controller.hosts"), this.get('categories'));
+            isPaginate = true;
           } else if (!this.get('isTaskListHidden')) {
             this.get('controller').setSelectCount(this.get("tasks"), this.get('categories'));
           } else if (!this.get('isServiceListHidden')) {
             this.get('controller').setSelectCount(this.get("services"), this.get('categories'));
           }
+          this.set('pagination', !!isPaginate);
         }.observes('tasks.@each.status', 'hosts.@each.status', 'isTaskListHidden', 'isHostListHidden', 'services.length', 'services.@each.status'),
 
         /**