AMBARI-18942 - Auto-start services: Avoid full page reload after "Save" / "Discard" (rzang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/2152c6a2 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/2152c6a2 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/2152c6a2 Branch: refs/heads/branch-dev-patch-upgrade Commit: 2152c6a2d6c8aba1ee145f4f9d85e1de157c3caf Parents: 0bbdb93 Author: Richard Zang <[email protected]> Authored: Mon Nov 21 14:09:47 2016 -0800 Committer: Richard Zang <[email protected]> Committed: Mon Nov 21 14:29:15 2016 -0800 ---------------------------------------------------------------------- .../main/admin/service_auto_start.js | 58 +++++++++++++++----- .../templates/main/admin/service_auto_start.hbs | 2 +- .../app/views/main/admin/service_auto_start.js | 21 ++++++- .../service_auto_start/component_auto_start.js | 9 +++ 4 files changed, 72 insertions(+), 18 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/2152c6a2/ambari-web/app/controllers/main/admin/service_auto_start.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/admin/service_auto_start.js b/ambari-web/app/controllers/main/admin/service_auto_start.js index b425c78..3365cae 100644 --- a/ambari-web/app/controllers/main/admin/service_auto_start.js +++ b/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 () { http://git-wip-us.apache.org/repos/asf/ambari/blob/2152c6a2/ambari-web/app/templates/main/admin/service_auto_start.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/service_auto_start.hbs b/ambari-web/app/templates/main/admin/service_auto_start.hbs index bd2be51..91d3706 100644 --- a/ambari-web/app/templates/main/admin/service_auto_start.hbs +++ b/ambari-web/app/templates/main/admin/service_auto_start.hbs @@ -28,7 +28,7 @@ </div> <div class="col-md-6"> <div class="pull-right operations-button"> - <button class="btn btn-default" {{action doReload target="controller"}} {{bindAttr disabled="controller.isSaveDisabled"}}>{{t common.discard}}</button> + <button class="btn btn-default" {{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> http://git-wip-us.apache.org/repos/asf/ambari/blob/2152c6a2/ambari-web/app/views/main/admin/service_auto_start.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/admin/service_auto_start.js b/ambari-web/app/views/main/admin/service_auto_start.js index dcbbfc9..5b10d1b 100644 --- a/ambari-web/app/views/main/admin/service_auto_start.js +++ b/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') }); http://git-wip-us.apache.org/repos/asf/ambari/blob/2152c6a2/ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js b/ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js index a25d835..ceafd21 100644 --- a/ambari-web/app/views/main/admin/service_auto_start/component_auto_start.js +++ b/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(); }
