AMBARI-5071 Long wait at Assign Slaves and Clients screen. (atkach)

ambari-web/app/controllers/wizard/step6_controller.js

@@ -38,6 +38,10 @@ App.WizardStep6Controller = Em.Controller.extend({
 
   headers: [],
 
+  /**
+   * number of checkboxes for detecting time point when they are completely inserted into the view
+   */
+  checkboxesCount: 0,
   /**
    * true - assign ZK, HB
    * false - slaves and clients
@@ -118,7 +122,7 @@ App.WizardStep6Controller = Em.Controller.extend({
    * @param event
    */
   selectAllNodes: function (event) {
-    this.setAllNodes(event.context.label, true);
+    this.setAllNodes(event.context.name, true);
   },
 
   /**
@@ -126,24 +130,23 @@ App.WizardStep6Controller = Em.Controller.extend({
    * @param event
    */
   deselectAllNodes: function (event) {
-    this.setAllNodes(event.context.label, false);
+    this.setAllNodes(event.context.name, false);
   },
 
   /**
    * Enable/disable some service for all hosts
-   * @param {String} label - service name
+   * @param {String} component - component name
    * @param {Boolean} checked - true - enable, false - disable
    */
-  setAllNodes: function (label, checked) {
+  setAllNodes: function (component, checked) {
     this.get('hosts').forEach(function (host) {
       host.get('checkboxes').filterProperty('isInstalled', false).forEach(function (checkbox) {
-        if (checkbox.get('title') === label) {
-          checkbox.set('setAll', true);
+        if (checkbox.get('component') === component) {
           checkbox.set('checked', checked);
         }
       });
     });
-    this.checkCallback(label);
+    this.checkCallback(component);
   },
 
   /**
@@ -158,17 +161,16 @@ App.WizardStep6Controller = Em.Controller.extend({
 
   /**
    * Checkbox check callback
-   * @param {String} title
+   * @param {String} component
    */
-  checkCallback: function (title) {
-
-    var header = this.get('headers').findProperty('label', title);
+  checkCallback: function (component) {
+    var header = this.get('headers').findProperty('name', component);
     var hosts = this.get('hosts');
     var allTrue = true;
     var allFalse = true;
     hosts.forEach(function (host) {
       host.get('checkboxes').filterProperty('isInstalled', false).forEach(function (cb) {
-        if (cb.get('title') === title) {
+        if (cb.get('component') === component) {
           allTrue &= cb.get('checked');
           allFalse &= !cb.get('checked');
         }
@@ -296,14 +298,17 @@ App.WizardStep6Controller = Em.Controller.extend({
 
       self.get('headers').forEach(function (header) {
         obj.checkboxes.pushObject(Em.Object.create({
+          component: header.name,
           title: header.label,
           checked: false,
-          isInstalled: false
+          isInstalled: false,
+          id: header.name + "_DELIMITER_" + _hostName
         }));
       });
 
       hostsObj.push(obj);
     });
+    this.set('checkboxesCount', (allHosts.length * self.get('headers').length));
 
     if (this.get('isMasters')) {
       hostsObj = this.renderMasters(hostsObj);
@@ -319,7 +324,7 @@ App.WizardStep6Controller = Em.Controller.extend({
         context: this,
         initSize: 50,
         chunkSize: 100,
-        delay: 100
+        delay: 50
       });
     } else {
       hostsObj.forEach(function (host) {
@@ -328,7 +333,7 @@ App.WizardStep6Controller = Em.Controller.extend({
       this.set('isLoaded', true);
     }
     this.get('headers').forEach(function (header) {
-      self.checkCallback(header.get('label'));
+      self.checkCallback(header.get('name'));
     });
   },
 

ambari-web/app/templates/wizard/step6.hbs

@@ -26,7 +26,7 @@
   <div {{bindAttr class="controller.isLoaded::hidden-scroll :pre-scrollable" }}>
       <div {{bindAttr class=":spinner-overlay controller.isLoaded:hidden"}}></div>
       <i {{bindAttr class=":icon-spin :spinner controller.isLoaded:hidden"}}></i>
-    <table class="table table-striped">
+    <table class="table table-striped" id="component_assign_table">
       <thead>
         <tr>
           <th>{{t common.host}}</th>
@@ -54,7 +54,7 @@
             {{/view}}
             {{#each checkbox in host.checkboxes}}
               <td>
-                  <label class="checkbox">{{view App.WizardStep6CheckboxView checkboxBinding="checkbox"}}</label>
+                  <label class="checkbox"><input {{bindAttr disabled="checkbox.isInstalled" checked="checkbox.checked" id="checkbox.id"}} type="checkbox"/>{{checkbox.title}}</label>
               </td>
             {{/each}}
           </tr>

ambari-web/app/views/wizard/step6_view.js

@@ -58,7 +58,32 @@ App.WizardStep6View = Em.View.extend({
         }
     }, this);
     this.set('label', label);
-  }
+  },
+  /**
+   * attach event handlers to checkboxes
+   */
+  attachHandlers: function () {
+    var controller = this.get('controller');
+    var checkBuildStatus = function () {
+      setTimeout(function () {
+        var checkboxes = jQuery("#component_assign_table input[type=checkbox]");
+        if (checkboxes.length === controller.get('checkboxesCount')) {
+          checkboxes.bind('click', function (event) {
+            var idInfo = event.target.id.split('_DELIMITER_');
+            var component = idInfo[0];
+            var hostName = idInfo[1];
+            controller.get('hosts').findProperty('hostName', hostName).get('checkboxes').findProperty('component', component).toggleProperty('checked');
+            controller.checkCallback(component);
+          });
+        } else {
+          checkBuildStatus();
+        }
+      }, 100);
+    };
+    if (this.get('controller.isLoaded') && this.state === "inDOM") {
+      checkBuildStatus();
+    }
+  }.observes('controller.isLoaded')
 });
 
 App.WizardStep6HostView = Em.View.extend({
@@ -83,36 +108,4 @@ App.WizardStep6HostView = Em.View.extend({
       }
     }
   }
-});
-
-/**
- * Binding host property with dynamic name
- * @type {*}
- */
-App.WizardStep6CheckboxView = Em.Checkbox.extend({
-  /**
-   * Header object with host property name
-   */
-  checkbox: null,
-
-  //if setAll true there is no need to check every checkbox whether all checked or not
-  setAllBinding: 'checkbox.setAll',
-
-  checkedBinding: 'checkbox.checked',
-
-  disabledBinding: 'checkbox.isInstalled',
-
-  checkCallback: function() {
-    var self = this;
-    if(this.get('setAll')){
-      this.set('setAll', false);
-    } else {
-      Ember.run.next(function(){
-        self.get('controller').checkCallback(self.get('checkbox.title'));
-      });
-    }
-  }.observes('checked'),
-
-  template: Ember.Handlebars.compile('{{checkbox.title}}')
-
-});
+});