AMBARI-18942 - Auto-start services: Avoid full page reload after "Save" / "Discard" (rzang)

ambari-web/app/controllers/main/admin/service_auto_start.js

@@ -25,6 +25,8 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
   componentsConfigs: [],
   isSaveDisabled: true,
   valueChanged: false,
+  syncTrigger: false, // trigger status reset in switch view after "save"
+  revertTrigger: false, // trigger status reset in switch view after "discard"
 
   loadClusterConfig: function () {
     return App.ajax.send({
@@ -60,7 +62,9 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
             component_name: serviceComponentInfo.component_name,
             recovery_enabled: serviceComponentInfo.recovery_enabled === 'true',
             valueChanged: false,
-            service_name: serviceComponentInfo.service_name
+            service_name: serviceComponentInfo.service_name,
+            syncTrigger: false,
+            revertTrigger: false,
           });
           if (services[serviceComponentInfo.service_name]) {
             services[serviceComponentInfo.service_name].get('componentRecovery').push(componentRecovery);
@@ -121,6 +125,34 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
     this.set('isSaveDisabled', !valuesChanged);
   }.observes('valueChanged'),
 
+  syncStatus: function () {
+    // component level switches
+    this.get('tabs').forEach(function (service) {
+      service.get('componentRecovery').forEach(function (component) {
+        component.set('valueChanged', false);
+        component.toggleProperty('syncTrigger');
+      });
+    });
+    // service level switch
+    this.toggleProperty('syncTrigger');
+    this.set('valueChanged', false);
+    this.set('isSaveDisabled', true);
+  },
+
+  revertStatus: function () {
+    // component level switches
+    this.get('tabs').forEach(function (service) {
+      service.get('componentRecovery').forEach(function (component) {
+        component.set('valueChanged', false);
+        component.toggleProperty('revertTrigger');
+      });
+    });
+    // service level switch
+    this.toggleProperty('revertTrigger');
+    this.set('valueChanged', false);
+    this.set('isSaveDisabled', true);
+  },
+
   enableAll: function (event) {
     event.context.get('componentRecovery').forEach(function (component) {
       component.set('recoveryEnabled', true);
@@ -133,10 +165,6 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
     });
   },
 
-  doReload: function () {
-    window.location.reload();
-  },
-
   /**
    * If some configs are changed and user navigates away or select another config-group, show this popup with propose to save changes
    * @param {object} transitionCallback - callback with action to change configs view
@@ -184,7 +212,7 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
           });
         });
         if (enabledComponents.length){
-          App.ajax.send({
+          var promise1 = App.ajax.send({
             name: 'components.update',
             sender: this,
             data: {
@@ -196,7 +224,7 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
           });
         }
         if (disabledComponents.length){
-          App.ajax.send({
+          var promise2 = App.ajax.send({
             name: 'components.update',
             sender: this,
             data: {
@@ -207,19 +235,21 @@ App.MainAdminServiceAutoStartController = Em.Controller.extend({
             }
           });
         }
-        if (typeof transitionCallback === 'function') {
-          transitionCallback();
-        } else {
-          self.doReload();
-        }
+        $.when(promise1, promise2).done(
+          function () {
+            if (typeof transitionCallback === 'function') {
+              transitionCallback();
+            }
+            self.syncStatus();
+          }
+        );
         this.hide();
       },
       onDiscard: function () {
         if (typeof transitionCallback === 'function') {
           transitionCallback();
-        } else {
-          self.doReload();
         }
+        self.revertStatus();
         this.hide();
       },
       onCancel: function () {

ambari-web/app/templates/main/admin/service_auto_start.hbs

@@ -32,7 +32,7 @@
           {{view Ember.Checkbox checkedBinding="view.switcherValue"}}
       </div>
       <div class="pull-right operations-button pull-right">
-          <button class="btn" {{action doReload target="controller"}} {{bindAttr disabled="controller.isSaveDisabled"}}>{{t common.discard}}</button>
+          <button class="btn" {{action revertStatus target="controller"}} {{bindAttr disabled="controller.isSaveDisabled"}}>{{t common.discard}}</button>
           <button class="btn btn-success" {{action showSavePopup target="controller"}} {{bindAttr disabled="controller.isSaveDisabled"}}>{{t common.save}}</button>
       </div>
   </div>

ambari-web/app/views/main/admin/service_auto_start.js

@@ -72,7 +72,7 @@ App.MainAdminServiceAutoStartView = Em.View.extend({
   initSwitcher: function () {
     var self = this;
     if (this.$()) {
-      this.$("input:eq(0)").bootstrapSwitch({
+      this.set('switcher', this.$("input:eq(0)").bootstrapSwitch({
         onText: Em.I18n.t('common.enabled'),
         offText: Em.I18n.t('common.disabled'),
         offColor: 'default',
@@ -81,8 +81,23 @@ App.MainAdminServiceAutoStartView = Em.View.extend({
         onSwitchChange: function (event, state) {
           self.updateClusterConfigs(state);
         }
-      });
+      }));
+    }
+  },
+
+  syncComponentRecoveryStatus: function () {
+    this.set('savedRecoveryEnabled', this.get('switcherValue'));
+  }.observes('controller.syncTrigger'),
+
+  revertComponentRecoveryStatus: function () {
+    this.set('switcherValue', this.get('savedRecoveryEnabled'));
+    if (this.get('controller.clusterConfigs')) {
+      this.set('controller.clusterConfigs.recovery_enabled', '' +  this.get('savedRecoveryEnabled'));
+    }
+    var switcher = this.get('switcher');
+    if (switcher) {
+      switcher.bootstrapSwitch('state', this.get('savedRecoveryEnabled'));
     }
-  }
+  }.observes('controller.revertTrigger')
 });
 

ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js

@@ -31,6 +31,14 @@ App.MainAdminServiceAutoStartComponentView = Em.View.extend({
     this.initSwitcher();
   },
 
+  syncComponentRecoveryStatus: function () {
+    this.set('savedRecoveryEnabled', this.get('component.recoveryEnabled'))
+  }.observes('component.syncTrigger'),
+
+  revertComponentRecoveryStatus: function () {
+    this.set('component.recoveryEnabled', this.get('savedRecoveryEnabled'));
+  }.observes('component.revertTrigger'),
+
   onValueChange: function () {
     this.get('switcher').bootstrapSwitch('state', this.get('component.recoveryEnabled'));
   }.observes('component.recoveryEnabled'),
@@ -52,6 +60,7 @@ App.MainAdminServiceAutoStartComponentView = Em.View.extend({
         onSwitchChange: function (event, state) {
           self.set('tab.enabledComponents', self.get('tab.enabledComponents') + (state ? 1 : -1));
           self.set('recoveryEnabled', state);
+          self.set('component.recoveryEnabled', state);
           self.set('component.valueChanged', self.get('savedRecoveryEnabled') !== state);
           self.get('parentView.controller').checkValuesChange();
         }