AMBARI-6236. Hosts page: there is no indication that filtering/sorting/paging is happening or not (confusing). (onechiporenko)

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

@@ -206,7 +206,7 @@ App.MainHostController = Em.ArrayController.extend({
    * Detect if user have passed string as regular expression or extend
    * string to regexp.
    *
-   * @params {String} value
+   * @param {String} value
    * @return {String}
    **/
   getRegExp: function (value) {

ambari-web/app/mixins/common/tableServerProvider.js

@@ -52,7 +52,8 @@ App.TableServerProvider = Em.Mixin.create({
     if (!this.get('filteringComplete')) return false;
 
     this.set('filteringComplete', false);
-    this.get('updater')[this.get('updater.tableUpdaterMap')[this.get('tableName')]](function () {
+    var updaterMethodName = this.get('updater.tableUpdaterMap')[this.get('tableName')];
+    this.get('updater')[updaterMethodName](function () {
       self.set('filteringComplete', true);
       self.propertyDidChange('pageContent');
     }, function() {

ambari-web/app/styles/application.less

@@ -3284,6 +3284,13 @@ table.graphs {
       background: none repeat scroll 0 0 #F8F8F8;
     }
   }
+
+  .hosts-overlay {
+    position: absolute;
+    opacity: 0.9;
+    background-color: #fefefe;
+  }
+
   .status-dot-position {
     background-position: center;
     background-repeat: no-repeat;

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

@@ -142,6 +142,10 @@
     </tbody>
   </table>
 
+  <div {{bindAttr class="view.filteringComplete:hidden :hosts-overlay"}}>
+    <div class="spinner"></div>
+  </div>
+
   <div class="page-bar">
     <div class="filtered-hosts-info span4">
       <label>{{view.filteredContentInfo}} - <a {{action clearFilters target="view"}} href="#">{{t tableView.filters.clearAllFilters}}</a></label>

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

@@ -246,6 +246,26 @@ App.MainHostView = App.TableView.extend(App.TableServerProvider, {
     return selectedFilter;
   },
 
+  /**
+   * Show spinner when filter/sorting request is processed
+   * @method overlayObserver
+   */
+  overlayObserver: function() {
+    if (!this.get('filteringComplete')) {
+      var $tbody = this.$('tbody');
+      if (!$tbody) return;
+      var tbodyPos =  $tbody.position();
+      if (!tbodyPos) return;
+
+      this.$('.hosts-overlay').css({
+        top: tbodyPos.top,
+        left: tbodyPos.left,
+        width: $tbody.width(),
+        height: $tbody.height()
+      });
+    }
+  }.observes('filteringComplete'),
+
   /**
    * Clear selectedFilter
    * Set <code>selected</code> to false for each host