AMBARI-5135 Improve responsiveness of Host Selection popup. (atkach)

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

@@ -38,9 +38,10 @@
                 <div class="span2" id="filter-dropdown-div">
                   <!-- Filter text box with drop-down -->
 		              <div class="input-append">
-		                {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton" placeholderBinding="view.filterTextPlaceholder" class="span2"}}
+		                {{view Ember.TextField valueBinding="view.filterText" id="appendedDropdownButton"
+                    placeholderBinding="view.filterTextPlaceholder" class="span2" disabledBinding="view.isDisabled"}}
 		                <div class="btn-group">
-		                  <button class="btn dropdown-toggle" data-toggle="dropdown">
+		                  <button class="btn dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isDisabled"}}>
 		                    <span class="caret"></span>
 		                  </button>
 		                  <ul class="dropdown-menu">
@@ -63,10 +64,10 @@
                 <div class="span2" id="component-dropdown-div">
                   <!-- Host-components drop-down -->
 		              <div class="btn-group">
-		                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+		                <button class="btn dropdown-toggle" data-toggle="dropdown" href="#" {{bindAttr disabled="view.isDisabled"}}>
 		                  {{t common.components}}
 		                  <span class="caret"></span>
-		                </a>
+		                </button>
 		                <ul class="dropdown-menu">
 		                  <!-- dropdown menu links -->
 		                  {{#each component in view.filterComponents}}
@@ -92,7 +93,7 @@
           <thead>
             <tr class="success">
               <th width="10%">
-                {{view Ember.Checkbox checkedBinding="view.allHostsSelected"}}
+                {{view Ember.Checkbox checkedBinding="view.allHostsSelected" disabledBinding="view.isDisabled"}}
               </th>
               <th width="45%">{{t common.host}}</th>
               <th width="45%">{{view.filterColumn.name}}</th>
@@ -101,7 +102,7 @@
          </table>
         <div class="hosts-table-container">
           <table class="table table-striped hosts-table">
-          {{#each entry in view.availableHosts}}
+          {{#each entry in view.parentView.availableHosts}}
             <tr {{bindAttr class="entry.filtered::hidden"}}>
               <td width="10%">
                 {{view Ember.Checkbox checkedBinding="entry.selected"}}

ambari-web/app/utils/hosts.js

@@ -14,6 +14,9 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
+
+var lazyloading = require('utils/lazy_loading');
+
 module.exports = {
 
   /**
@@ -33,7 +36,7 @@ module.exports = {
    *   Example: {header: 'header', dialogMessage: 'message'}
    *  is closed, cancelled or OK is pressed.
    */
-  launchHostsSelectionDialog : function(availableHosts, selectedHosts, 
+  launchHostsSelectionDialog : function(initialHosts, selectedHosts,
       selectAtleastOneHost, validComponents, callback, popupDescription) {
     // set default popup description
     var defaultPopupDescription = {
@@ -48,9 +51,10 @@ module.exports = {
       header: popupDescription.header,
       dialogMessage: popupDescription.dialogMessage,
       warningMessage: null,
+      availableHosts: [],
       onPrimary: function () {
         this.set('warningMessage', null);
-        var arrayOfSelectedHosts = availableHosts.filterProperty('selected', true).mapProperty('host.id');
+        var arrayOfSelectedHosts = this.get('availableHosts').filterProperty('selected', true).mapProperty('host.id');
         if (selectAtleastOneHost && arrayOfSelectedHosts.length < 1) {
           this.set('warningMessage', Em.I18n.t('hosts.selectHostsDialog.message.warning'));
           return;
@@ -59,6 +63,9 @@ module.exports = {
         console.debug('(new-selectedHosts)=', arrayOfSelectedHosts);
         this.hide();
       },
+      disablePrimary: function () {
+        return !this.get('isLoaded');
+      }.property('isLoaded'),
       onSecondary: function () {
         callback(null);
         this.hide();
@@ -68,7 +75,6 @@ module.exports = {
         controllerBinding: 'App.router.mainServiceInfoConfigsController',
         filterText: '',
         filterTextPlaceholder: Em.I18n.t('hosts.selectHostsDialog.filter.placeHolder'),
-        availableHosts: availableHosts,
         filterColumn: null,
         filterColumns: Ember.A([
           Ember.Object.create({id: 'ip', name: 'IP Address', selected: true}),
@@ -82,9 +88,29 @@ module.exports = {
         showOnlySelectedHosts: false,
         filterComponents: validComponents,
         filterComponent: null,
+        isDisabled: function () {
+          return !this.get('parentView.isLoaded');
+        }.property('parentView.isLoaded'),
         didInsertElement: function(){
           var defaultFilterColumn = this.get('filterColumns').findProperty('selected');
           this.set('filterColumn', defaultFilterColumn);
+          this.initContent();
+        },
+        initContent: function () {
+          initialHosts.setEach('filtered', true);
+          if (initialHosts.length > 100) {
+            lazyloading.run({
+              destination: this.get('parentView.availableHosts'),
+              source: initialHosts,
+              context: this.get('parentView'),
+              initSize: 50,
+              chunkSize: 100,
+              delay: 50
+            });
+          } else {
+            this.set('parentView.availableHosts', initialHosts);
+            this.set('parentView.isLoaded', true);
+          }
         },
         filterHosts: function () {
           var filterText = this.get('filterText');
@@ -92,7 +118,7 @@ module.exports = {
           var filterComponent = this.get('filterComponent');
           var filterColumn = this.get('filterColumn');
 
-          this.get('availableHosts').forEach(function (host) {
+          this.get('parentView.availableHosts').forEach(function (host) {
             var skip = showOnlySelectedHosts && !host.get('selected');
             var value = host.get('host').get(filterColumn.id);
             var hostComponentNames = host.get('hostComponentNames');
@@ -111,12 +137,12 @@ module.exports = {
             }
             host.set('filtered', !skip);
           }, this);
-        }.observes('availableHosts', 'filterColumn', 'filterText', 'filterComponent', 'filterComponent.componentName', 'showOnlySelectedHosts'),
+        }.observes('parentView.availableHosts', 'filterColumn', 'filterText', 'filterComponent', 'filterComponent.componentName', 'showOnlySelectedHosts'),
         hostSelectMessage: function () {
-          var hosts = this.get('availableHosts');
+          var hosts = this.get('parentView.availableHosts');
           var selectedHosts = hosts.filterProperty('selected', true);
           return this.t('hosts.selectHostsDialog.selectedHostsLink').format(selectedHosts.get('length'), hosts.get('length'))
-        }.property('availableHosts.@each.selected'),
+        }.property('parentView.availableHosts.@each.selected'),
         selectFilterColumn: function (event) {
           if (event != null && event.context != null && event.context.id != null) {
             var filterColumn = this.get('filterColumn');
@@ -144,7 +170,7 @@ module.exports = {
         },
         allHostsSelected: false,
         toggleSelectAllHosts: function (event) {
-          this.get('availableHosts').filterProperty('filtered').setEach('selected', this.get('allHostsSelected'));
+          this.get('parentView.availableHosts').filterProperty('filtered').setEach('selected', this.get('allHostsSelected'));
         }.observes('allHostsSelected'),
         toggleShowSelectedHosts: function () {
           var currentFilter = this.get('filterComponent');

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

@@ -25,8 +25,7 @@ App.QuickViewLinks = Em.View.extend({
     App.ajax.send({
       name: 'config.tags.sync',
       sender: this,
-      success: 'loadTagsSuccess',
-      error: 'loadTagsError'
+      success: 'loadTagsSuccess'
     });
   },