AMBARI-6675. Enable NameNode HA wizard->Review Page: Show spinner and disable next button while configurations are getting loaded. (alexantonenko)

ambari-web/app/controllers/main/admin/highAvailability/nameNode/step3_controller.js

@@ -25,6 +25,7 @@ App.HighAvailabilityWizardStep3Controller = Em.Controller.extend({
   serverConfigData: {},
   haConfig: $.extend(true, {}, require('data/HDP2/ha_properties').haConfig),
   once: false,
+  isLoaded: false,
 
   clearStep: function () {
     this.get('stepConfigs').clear();
@@ -75,6 +76,7 @@ App.HighAvailabilityWizardStep3Controller = Em.Controller.extend({
     this.set('serverConfigData',data);
     this.tweakServiceConfigs(this.get('haConfig.configs'));
     this.renderServiceConfigs(this.get('haConfig'));
+    this.set('isLoaded', true);
   },
 
 
@@ -165,7 +167,11 @@ App.HighAvailabilityWizardStep3Controller = Em.Controller.extend({
       serviceConfigProperty.set('isEditable', serviceConfigProperty.get('isReconfigurable'));
       serviceConfigProperty.validate();
     }, this);
-  }
+  },
+
+  isNextDisabled: function () {
+    return !this.get('isLoaded');
+  }.property('isLoaded')
 
 });
 

ambari-web/app/templates/main/admin/highAvailability/nameNode/step3.hbs

@@ -67,13 +67,15 @@
 
 
 <div id="serviceConfig">
-
+{{#if controller.isLoaded}}
   {{{t admin.highAvailability.wizard.step3.confirm.config.body}}}
-
   {{view App.ServiceConfigView isNotEditableBinding="controller.isNotEditable"}}
+{{else}}
+  <div class="spinner"></div>
+{{/if}}
 </div>
 
 <div class="btn-area">
   <a class="btn" {{action back}}>&larr; {{t common.back}}</a>
-  <a class="btn btn-success pull-right" {{action next}}>{{t common.next}} &rarr;</a>
+  <a class="btn btn-success pull-right" {{bindAttr disabled="controller.isNextDisabled"}} {{action next}}>{{t common.next}} &rarr;</a>
 </div>