AMBARI-20123 Click feedback/disable toggle is missing for transition buttons in Kerberos Wizard - prone to various failures (dbuzhor)

ambari-web/app/controllers/main/admin/kerberos/step1_controller.js

@@ -143,7 +143,7 @@ App.KerberosWizardStep1Controller = Em.Controller.extend({
     }
   },
 
-  next: function () {
+  submit: function () {
     if (!this.get('isSubmitDisabled')) {
       App.router.send('next');
     }

ambari-web/app/controllers/main/admin/kerberos/step2_controller.js

@@ -60,16 +60,17 @@ App.KerberosWizardStep2Controller = App.WizardStep7Controller.extend(App.KDCCred
    * Should Back-button be disabled
    * @type {boolean}
    */
-  isBackBtnDisabled: Em.computed.alias('testConnectionInProgress'),
+  isBackBtnDisabled: Em.computed.or('testConnectionInProgress', 'App.router.nextBtnClickInProgress'),
 
   /**
    * Should Next-button be disabled
    * @type {boolean}
    */
   isSubmitDisabled: function () {
-    if (!this.get('stepConfigs.length') || this.get('testConnectionInProgress') || this.get('submitButtonClicked')) return true;
+    if (!this.get('stepConfigs.length') || this.get('testConnectionInProgress')
+      || this.get('submitButtonClicked') || App.get('router.nextBtnClickInProgress')) return true;
     return (!this.get('stepConfigs').filterProperty('showConfig', true).everyProperty('errorCount', 0) || this.get("miscModalVisible"));
-  }.property('stepConfigs.@each.errorCount', 'miscModalVisible', 'submitButtonClicked', 'testConnectionInProgress'),
+  }.property('stepConfigs.@each.errorCount', 'miscModalVisible', 'submitButtonClicked', 'testConnectionInProgress', 'App.router.nextBtnClickInProgress'),
 
   hostNames: Em.computed.alias('App.allHostNames'),
 
@@ -170,8 +171,8 @@ App.KerberosWizardStep2Controller = App.WizardStep7Controller.extend(App.KDCCred
 
   submit: function () {
     var self = this;
-
     if (this.get('isSubmitDisabled')) return false;
+    App.set('router.nextBtnClickInProgress', true);
     this.get('wizardController').deleteKerberosService().always(function () {
       self.configureKerberos();
     });
@@ -183,6 +184,7 @@ App.KerberosWizardStep2Controller = App.WizardStep7Controller.extend(App.KDCCred
     var callback = function () {
       self.createConfigurations().done(function () {
         self.createKerberosAdminSession().done(function () {
+          App.set('router.nextBtnClickInProgress', false);
           App.router.send('next');
         });
       });

ambari-web/app/controllers/main/admin/kerberos/step4_controller.js

@@ -29,6 +29,7 @@ App.KerberosWizardStep4Controller = App.WizardStep7Controller.extend(App.AddSecu
 
   clearStep: function() {
     this.set('isRecommendedLoaded', false);
+    this.set('submitButtonClicked', false);
     this.set('selectedService', null);
     this.set('stepConfigs', []);
   },
@@ -312,6 +313,7 @@ App.KerberosWizardStep4Controller = App.WizardStep7Controller.extend(App.AddSecu
   },
 
   submit: function() {
+    this.set('submitButtonClicked', true);
     this.saveConfigurations();
     App.router.send('next');
   },

ambari-web/app/controllers/main/admin/kerberos/step5_controller.js

@@ -48,6 +48,8 @@ App.KerberosWizardStep5Controller = App.KerberosProgressPageController.extend({
     }
   ],
 
+  isCSVRequestInProgress: false,
+
   submit: function() {
     App.router.send('next');
   },
@@ -56,6 +58,7 @@ App.KerberosWizardStep5Controller = App.KerberosProgressPageController.extend({
    * get CSV data from the server
    */
   getCSVData: function (skipDownload) {
+    this.set('isCSVRequestInProgress', true);
     return App.ajax.send({
       name: 'admin.kerberos.cluster.csv',
       sender: this,
@@ -75,6 +78,7 @@ App.KerberosWizardStep5Controller = App.KerberosProgressPageController.extend({
    */
   getCSVDataSuccessCallback: function (data, opt, params) {
     this.set('csvData', this.prepareCSVData(data.split('\n')));
+    this.set('isCSVRequestInProgress', false);
     if (!Em.get(params, 'skipDownload')) {
       fileUtils.downloadTextFile(stringUtils.arrayToCSV(this.get('csvData')), 'csv', 'kerberos.csv');
     }

ambari-web/app/mixins/wizard/wizardProgressPageController.js

@@ -731,6 +731,7 @@ App.wizardProgressPageControllerMixin = Em.Mixin.create(App.InstallComponent, {
 
   done: function () {
     if (!this.get('isSubmitDisabled')) {
+      this.set('isSubmitDisabled', true);
       this.removeObserver('tasks.@each.status', this, 'onTaskStatusChange');
       App.router.send('next');
     }
@@ -738,6 +739,7 @@ App.wizardProgressPageControllerMixin = Em.Mixin.create(App.InstallComponent, {
 
   back: function () {
     if (!this.get('isBackButtonDisabled')) {
+      this.set('isBackButtonDisabled', true);
       this.removeObserver('tasks.@each.status', this, 'onTaskStatusChange');
       App.router.send('back');
     }

ambari-web/app/routes/add_kerberos_routes.js

@@ -110,7 +110,7 @@ module.exports = App.WizardRoute.extend({
     });
   },
 
-  step1: Em.Route.extend({
+  step1: App.StepRoute.extend({
     route: '/step1',
 
     connectOutlets: function (router) {
@@ -127,7 +127,7 @@ module.exports = App.WizardRoute.extend({
       return false;
     },
 
-    next: function (router) {
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       var kerberosStep1controller = router.get('kerberosWizardStep1Controller');
 
@@ -138,7 +138,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step2: Em.Route.extend({
+  step2: App.StepRoute.extend({
     route: '/step2',
 
     connectOutlets: function (router) {
@@ -155,16 +155,14 @@ module.exports = App.WizardRoute.extend({
     unroutePath: function () {
       return false;
     },
-    back: function(router) {
+    backTransition: function(router) {
       var controller = router.get('kerberosWizardStep2Controller');
       var kerberosWizardController = router.get('kerberosWizardController');
-      if (!controller.get('isBackBtnDisabled')) {
-        kerberosWizardController.overrideVisibility(controller.get('configs'), true, []);
-        router.transitionTo('step1');
-      }
+      kerberosWizardController.overrideVisibility(controller.get('configs'), true, []);
+      router.transitionTo('step1');
     },
 
-    next: function (router) {
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       var kerberosWizardStep2Controller = router.get('kerberosWizardStep2Controller');
 
@@ -186,7 +184,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step3: Em.Route.extend({
+  step3: App.StepRoute.extend({
     route: '/step3',
 
     connectOutlets: function (router) {
@@ -202,7 +200,7 @@ module.exports = App.WizardRoute.extend({
       return false;
     },
     back: Em.Router.transitionTo('step2'),
-    next: function (router) {
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       kerberosWizardController.setDBProperty('kerberosDescriptorConfigs', null);
       kerberosWizardController.clearCachedStepConfigValues(router.get('kerberosWizardStep4Controller'));
@@ -210,7 +208,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step4: Em.Route.extend({
+  step4: App.StepRoute.extend({
     route: '/step4',
 
     connectOutlets: function (router) {
@@ -229,14 +227,14 @@ module.exports = App.WizardRoute.extend({
     unroutePath: function () {
       return false;
     },
-    back: function (router) {
+    backTransition: function (router) {
       if (router.get('kerberosWizardController.skipClientInstall')) {
         router.transitionTo('step2');
       } else {
         router.transitionTo('step3');
       }
     },
-    next: function (router) {
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       var step5Controller = router.get('kerberosWizardStep5Controller');
       var kerberosDescriptor = kerberosWizardController.get('kerberosDescriptorConfigs');
@@ -251,7 +249,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step5: Em.Route.extend({
+  step5: App.StepRoute.extend({
     route: '/step5',
 
     connectOutlets: function (router) {
@@ -279,9 +277,9 @@ module.exports = App.WizardRoute.extend({
       kerberosWizardStep5Controller.getCSVData();
     },
 
-    back: Em.Router.transitionTo('step4'),
+    backTransition: Em.Router.transitionTo('step4'),
 
-    next: function (router) {
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       kerberosWizardController.setDBProperties({
         tasksStatuses: null,
@@ -291,7 +289,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step6: Em.Route.extend({
+  step6: App.StepRoute.extend({
     route: '/step6',
 
     connectOutlets: function (router) {
@@ -307,8 +305,8 @@ module.exports = App.WizardRoute.extend({
     unroutePath: function () {
       return false;
     },
-    back: Em.Router.transitionTo('step4'),
-    next: function (router) {
+    backTransition: Em.Router.transitionTo('step4'),
+    nextTransition: function (router) {
       var kerberosWizardController = router.get('kerberosWizardController');
       kerberosWizardController.setDBProperties({
         tasksStatuses: null,
@@ -318,7 +316,7 @@ module.exports = App.WizardRoute.extend({
     }
   }),
 
-  step7: Em.Route.extend({
+  step7: App.StepRoute.extend({
     route: '/step7',
 
     connectOutlets: function (router) {
@@ -336,13 +334,13 @@ module.exports = App.WizardRoute.extend({
     unroutePath: function () {
       return false;
     },
-    back: Em.Router.transitionTo('step4'),
-    next: function (router) {
+    backTransition: Em.Router.transitionTo('step4'),
+    nextTransition: function (router) {
       router.transitionTo('step8');
     }
   }),
 
-  step8: Em.Route.extend({
+  step8: App.StepRoute.extend({
     route: '/step8',
 
     connectOutlets: function (router) {
@@ -358,8 +356,8 @@ module.exports = App.WizardRoute.extend({
     unroutePath: function () {
       return false;
     },
-    back: Em.Router.transitionTo('step7'),
-    next: function (router) {
+    backTransition: Em.Router.transitionTo('step7'),
+    nextTransition: function (router) {
       var controller = router.get('kerberosWizardController');
       controller.resetOnClose(controller, 'adminKerberos.index');
     }

ambari-web/app/styles/common.less

@@ -461,4 +461,10 @@
 .tabs-right>li>a {
   border-radius: 0 4px 4px 0;
   margin-right: 0;
-}
+}
+
+.btn-primary[disabled] {
+  .icon-spinner {
+    color: white;
+  }
+}

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

@@ -0,0 +1,29 @@
+{{!
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+}}
+
+<a {{bindAttr id="view.buttonId" class=":btn view.buttonClassNames" disabled="view.isDisabled"}} {{action handleClick target="view"}}>
+  {{#if view.doSpinRight}}
+    {{yield}}
+  {{/if}}
+  {{#if view.isInProgress}}
+    {{view App.SpinnerView tagName="span" classNames="service-button-spinner"}}
+  {{/if}}
+  {{#unless view.doSpinRight}}
+    {{yield}}
+  {{/unless}}
+</a>

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

@@ -71,8 +71,10 @@
   {{/if}}
   <div class="btn-area">
     {{#if view.showBackButton}}
-      <button class="btn pull-left" {{bindAttr disabled="controller.isBackButtonDisabled"}} {{action back target="controller"}}>&larr; {{t common.back}}</button>
+      {{view App.WizardBackButton action="back" target="controller"}}
     {{/if}}
-    <button class="btn btn-success pull-right" {{bindAttr disabled="controller.isSubmitDisabled"}} {{action done target="controller"}}>{{{view.submitButtonText}}}</button>
+    {{#view App.WizardNextButton action="done" target="controller"}}
+      {{{view.parentView.submitButtonText}}}
+    {{/view}}
   </div>
 </div>

ambari-web/app/templates/main/admin/kerberos/step1.hbs

@@ -45,6 +45,6 @@
   </div>
 
   <div class="btn-area">
-    <a id="submit-kerberos-step1" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "next" target="controller"}}>{{t common.next}} &rarr;</a>
+    {{view App.WizardNextButton buttonId="submit-kerberos-step1" action="submit" target="controller"}}
   </div>
 </div>

ambari-web/app/templates/main/admin/kerberos/step2.hbs

@@ -30,9 +30,8 @@
     {{/if}}
 
     <div class="btn-area">
-      <a id="back-kerberos-step2" class="btn" {{bindAttr disabled="isBackBtnDisabled"}} {{action back}}>&larr; {{t common.back}}</a>
-      <a id="submit-kerberos-step2" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}
-        {{action submit target="controller"}}>{{t common.next}} &rarr;</a>
+      {{view App.WizardBackButton buttonId="back-kerberos-step2" action="back" disabledBinding="controller.isBackBtnDisabled"}}
+      {{view App.WizardNextButton buttonId="submit-kerberos-step2" action="submit" target="controller"}}
     </div>
   </div>
 </div>

ambari-web/app/templates/main/admin/kerberos/step3.hbs

@@ -87,9 +87,9 @@
       {{/if}}
         <div class="btn-area">
           {{#if view.showBackButton}}
-              <button class="btn pull-left" {{bindAttr disabled="controller.isBackButtonDisabled"}} {{action back target="controller"}}>&larr; {{t common.back}}</button>
+              {{view App.WizardBackButton action="back" target="controller"}}
           {{/if}}
-            <button class="btn btn-success pull-right" {{bindAttr disabled="controller.isSubmitDisabled"}} {{action done target="controller"}}>{{{view.submitButtonText}}}</button>
+          {{view App.WizardNextButton buttonId="submit-kerberos-step3" action="done" target="controller"}}
         </div>
     </div>
 </div>

ambari-web/app/templates/main/admin/kerberos/step4.hbs

@@ -26,9 +26,8 @@
     {{view App.ServicesConfigView}}
 
     <div class="btn-area">
-      <button id="back-kerberos-step4" class="btn" {{action back}}>&larr; {{t common.back}}</button>
-      <button id="submit-kerberos-step4" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}
-        {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
+      {{view App.WizardBackButton buttonId="back-kerberos-step4" action="back"}}
+      {{view App.WizardNextButton buttonId="submit-kerberos-step4" action="submit" target="controller"}}
     </div>
   </div>
 </div>

ambari-web/app/templates/main/admin/kerberos/step5.hbs

@@ -44,14 +44,19 @@
     </div>
 
     <div class="additional btn-area clearfix">
-      <button class="btn btn-primary pull-right mls" {{action downloadCSV}}>{{t admin.kerberos.wizard.step5.downloadCSV}}</button>
+      {{#view App.ButtonProgressView
+         classNames="pull-right mls"
+         buttonClassNames="btn-primary"
+         action="downloadCSV"
+         isInProgressBinding="controller.isCSVRequestInProgress"}}
+        {{t admin.kerberos.wizard.step5.downloadCSV}}
+      {{/view}}
       <button class="btn pull-right" {{action exitWizard}}>{{t admin.kerberos.wizard.step5.exitWizard}}</button>
     </div>
 
     <div class="btn-area">
-      <button id="back-kerberos-step5" class="btn" {{action back}}>&larr; {{t common.back}}</button>
-      <button id="submit-kerberos-step5" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}}
-        {{action submit target="controller"}}>{{t common.next}} &rarr;</button>
+      {{view App.WizardBackButton buttonId="back-kerberos-step5" action="back"}}
+      {{view App.WizardNextButton buttonId="submit-kerberos-step5" action="submit" target="controller"}}
     </div>
   </div>
 </div>

ambari-web/app/views.js

@@ -26,6 +26,8 @@ require('views/common/log_file_search_view');
 require('views/common/log_tail_view');
 require('views/common/global/spinner');
 require('views/common/ajax_default_error_popup_body');
+require('views/common/buttons/button_progress_view');
+require('views/common/buttons/wizard_buttons');
 require('views/common/chart');
 require('views/common/chart/pie');
 require('views/common/chart/linear');

ambari-web/app/views/common/buttons/button_progress_view.js

@@ -0,0 +1,77 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+App.ButtonProgressView = Em.View.extend(Em.TargetActionSupport, {
+  layoutName: require('templates/common/button_progress'),
+  isDisabled: Em.computed.or('disabled', 'isInProgress'),
+  /**
+   * Target to perform `onClick` function default to App.router
+   * @type {Em.Object|Em.View|Em.Controller}
+   */
+  target: null,
+  /**
+   * Property determines progress state
+   * @type {Boolean}
+   */
+  isInProgress: null,
+  /**
+   * on click handler
+   * @type {Function}
+   */
+  action: null,
+  /**
+   * When true spinner appears to right side, when false - to left
+   * @type {Boolean}
+   */
+  doSpinRight: true,
+
+  targetObject: function() {
+    var target = this.get('target'),
+        splitted;
+    if (!target) {
+      return this.get('controller.target');
+    } else if (typeof target === 'string') {
+      splitted = target.split('.');
+      if (splitted[0] === 'view') {
+        splitted = ['parentView'].concat(splitted.slice(1));
+      }
+      return Em.get(this, splitted.join('.'))
+    } else {
+      return target;
+    }
+  }.property('target'),
+
+  handleClick: function() {
+    if (this.get('isDisabled')) {
+      return;
+    }
+    var target = this.get('targetObject');
+    var targetMethod = this.get('action');
+    if (target.isState && typeof target.send === 'function') {
+      target.send(targetMethod);
+    } else if (targetMethod && typeof targetMethod === 'function') {
+      targetMethod.apply(target);
+    } else if (typeof targetMethod === 'string' && typeof Em.get(target, targetMethod) === 'function') {
+      Em.get(target, targetMethod).call(target);
+    } else {
+      Ember.Logger.error('Cannot invoke action %s on target %s', targetMethod, target);
+    }
+  }
+});

ambari-web/app/views/common/buttons/wizard_buttons.js

@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var App = require('app');
+
+App.WizardNextButton = App.ButtonProgressView.extend({
+  classNames: ['pull-right'],
+  isInProgressBinding: 'App.router.nextBtnClickInProgress',
+  buttonClassNames: ['btn-success'],
+  template: Em.Handlebars.compile('{{t common.next}} →'),
+  disabledBinding: 'controller.isSubmitDisabled'
+});
+
+App.WizardBackButton = App.ButtonProgressView.extend({
+  classNames: ['pull-left'],
+  isInProgressBinding: 'App.router.backBtnClickInProgress',
+  template: Em.Handlebars.compile('← {{t common.back}}'),
+  doSpinRight: false,
+  disabledBinding: 'controller.isBackButtonDisabled'
+});

ambari-web/test/controllers/main/admin/kerberos/step1_controller_test.js

@@ -67,7 +67,7 @@ describe('App.KerberosWizardStep1Controller', function() {
     });
   });
 
-  describe("#next()", function () {
+  describe("#submit()", function () {
 
     beforeEach(function() {
       sinon.stub(App.router, 'send');
@@ -81,7 +81,7 @@ describe('App.KerberosWizardStep1Controller', function() {
       controller.reopen({
         'isSubmitDisabled': false
       });
-      controller.next();
+      controller.submit();
       expect(App.router.send.calledOnce).to.be.true;
     });
 
@@ -89,7 +89,7 @@ describe('App.KerberosWizardStep1Controller', function() {
       controller.reopen({
         'isSubmitDisabled': true
       });
-      controller.next();
+      controller.submit();
       expect(App.router.send.called).to.be.false;
     });
   });

ambari-web/test/controllers/main/admin/kerberos/step2_controller_test.js

@@ -37,7 +37,7 @@ describe('App.KerberosWizardStep2Controller', function() {
     controller = getController();
   });
 
-  App.TestAliases.testAsComputedAlias(getController(), 'isBackBtnDisabled', 'testConnectionInProgress', 'boolean');
+  App.TestAliases.testAsComputedOr(getController(), 'isBackBtnDisabled', ['testConnectionInProgress', 'App.router.nextBtnClickInProgress'], 'boolean');
 
   App.TestAliases.testAsComputedAlias(getController(), 'hostNames', 'App.allHostNames', 'array');