AMBARI-12592. FE: Switching between service summary and configs tabs does not cleanup DOM nodes and listeners (alexantonenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/4728e316 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/4728e316 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/4728e316 Branch: refs/heads/trunk Commit: 4728e31679dff2f73279667173b2ca9c87abb513 Parents: 9e7d0d5 Author: Alex Antonenko <[email protected]> Authored: Thu Jul 30 18:01:48 2015 +0300 Committer: Alex Antonenko <[email protected]> Committed: Thu Jul 30 18:31:46 2015 +0300 ---------------------------------------------------------------------- .../controllers/main/service/info/configs.js | 1 + .../common/configs/config_history_flow.hbs | 4 +- .../common/configs/service_version_box.hbs | 30 +++---- ambari-web/app/utils/helper.js | 6 +- .../views/common/configs/config_history_flow.js | 93 +++++++++++++------- 5 files changed, 79 insertions(+), 55 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/4728e316/ambari-web/app/controllers/main/service/info/configs.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/service/info/configs.js b/ambari-web/app/controllers/main/service/info/configs.js index 2c51a88..130d45d 100644 --- a/ambari-web/app/controllers/main/service/info/configs.js +++ b/ambari-web/app/controllers/main/service/info/configs.js @@ -279,6 +279,7 @@ App.MainServiceInfoConfigsController = Em.Controller.extend(App.ConfigsLoader, A }, clearConfigs: function() { + this.get('selectedConfigGroup', null); this.get('allConfigs').invoke('destroy'); this.get('stepConfigs').invoke('destroy'); this.set('stepConfigs', []); http://git-wip-us.apache.org/repos/asf/ambari/blob/4728e316/ambari-web/app/templates/common/configs/config_history_flow.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/config_history_flow.hbs b/ambari-web/app/templates/common/configs/config_history_flow.hbs index db18a9b..1c99f57 100644 --- a/ambari-web/app/templates/common/configs/config_history_flow.hbs +++ b/ambari-web/app/templates/common/configs/config_history_flow.hbs @@ -23,8 +23,8 @@ {{bindAttr data-original-title="view.leftArrowTooltip"}}><i class="icon-chevron-left icon-3x"></i></div> <div {{bindAttr class=":icon-chevron-box :pull-left view.showRightArrow::disabled"}} {{action shiftForward target="view"}} data-toggle="arrow-tooltip" {{bindAttr data-original-title="view.rightArrowTooltip"}}><i class="icon-chevron-right icon-3x"></i></div> - {{#each serviceVersion in view.visibleServiceVersion}} - {{view view.serviceVersionBox serviceVersionBinding=serviceVersion}} + {{#each sV in view.visibleServiceVersion}} + {{view App.ConfigsServiceVersionBoxView serviceVersionBinding="sV"}} {{/each}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/4728e316/ambari-web/app/templates/common/configs/service_version_box.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/configs/service_version_box.hbs b/ambari-web/app/templates/common/configs/service_version_box.hbs index 4c8095b..e4be74f 100644 --- a/ambari-web/app/templates/common/configs/service_version_box.hbs +++ b/ambari-web/app/templates/common/configs/service_version_box.hbs @@ -16,20 +16,20 @@ * limitations under the License. }} -<div {{bindAttr class=":flow-element :pull-left serviceVersion.first:first"}}> +<div {{bindAttr class=":flow-element :pull-left view.serviceVersion.first:first"}}> <div class="arrow-box pull-left"></div> <div class="version-box"> - <div {{bindAttr class=":version-info :box :pull-right serviceVersion.isDisplayed:displayed serviceVersion.isDisabled:grayedOut"}} {{action doAction serviceVersion view.actionTypes.SWITCH target="view.parentView"}}> + <div {{bindAttr class=":version-info :box :pull-right view.serviceVersion.isDisplayed:displayed view.serviceVersion.isDisabled:grayedOut"}} {{action doAction view.serviceVersion view.actionTypes.SWITCH target="view.parentView"}}> <div class="top-label"> - <span class="label label-info">{{serviceVersion.versionText}}</span> - <span class="author pull-right">{{serviceVersion.author}}</span> + <span class="label label-info">{{view.serviceVersion.versionText}}</span> + <span class="author pull-right">{{view.serviceVersion.author}}</span> </div> - <div class="content">{{serviceVersion.timeSinceCreated}}</div> - <div class="stack-label">{{serviceVersion.stackVersion}}</div> - {{#if serviceVersion.isCurrent}} + <div class="content">{{view.serviceVersion.timeSinceCreated}}</div> + <div class="stack-label">{{view.serviceVersion.stackVersion}}</div> + {{#if view.serviceVersion.isCurrent}} <div class="current-label"> <span class="label label-success label-current icon-ok" data-toggle="tooltip" {{translateAttr title="common.current"}}> - <i {{bindAttr class=":icon-refresh :restart-required-service serviceVersion.isRestartRequired::hidden"}}></i> + <i {{bindAttr class=":icon-refresh :restart-required-service view.serviceVersion.isRestartRequired::hidden"}}></i> </span> </div> {{/if}} @@ -37,16 +37,16 @@ <div class="version-popover"> <div class="content"> - <span class="label label-info">{{serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{serviceVersion.configGroupName}}</strong></span> - <span class="stack">{{serviceVersion.stackVersion}}</span> - <div class="date"><strong>{{serviceVersion.author}}</strong> {{t dashboard.configHistory.info-bar.authoredOn}} <strong>{{serviceVersion.createdDate}}</strong></div> - <div class="notes">{{serviceVersion.fullNotes}}</div> + <span class="label label-info">{{view.serviceVersion.versionText}}</span> <span class="pull-right"><strong>{{view.serviceVersion.configGroupName}}</strong></span> + <span class="stack">{{view.serviceVersion.stackVersion}}</span> + <div class="date"><strong>{{view.serviceVersion.author}}</strong> {{t dashboard.configHistory.info-bar.authoredOn}} <strong>{{view.serviceVersion.createdDate}}</strong></div> + <div class="notes">{{view.serviceVersion.fullNotes}}</div> </div> <div class="version-operations-buttons"> - <button {{bindAttr disabled="serviceVersion.disabledActionAttr.view" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.view"}} {{action doAction serviceVersion view.actionTypes.SWITCH target="view.parentView"}}><i class="icon-search"></i> {{t common.view}}</button> + <button {{bindAttr disabled="view.disabledActionAttr.view" class=":btn view.serviceVersion.isDisplayed:not-allowed-cursor" title="view.disabledActionMessages.view"}} {{action doAction view.serviceVersion view.actionTypes.SWITCH target="view.parentView"}}><i class="icon-search"></i> {{t common.view}}</button> {{#isAccessible MANAGER}} - <button {{bindAttr disabled="serviceVersion.disabledActionAttr.compare" class=":btn serviceVersion.isDisplayed:not-allowed-cursor" title="serviceVersion.disabledActionMessages.compare"}} {{action doAction serviceVersion view.actionTypes.COMPARE target="view.parentView"}}><i class="icon-copy"></i> {{t common.compare}}</button> - <button {{bindAttr disabled="serviceVersion.disabledActionAttr.revert" class=":btn serviceVersion.isCurrent:not-allowed-cursor serviceVersion.isCompatible::hidden" title="serviceVersion.disabledActionMessages.revert"}} {{action doAction serviceVersion view.actionTypes.REVERT target="view.parentView"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button> + <button {{bindAttr disabled="view.disabledActionAttr.compare" class=":btn view.serviceVersion.isDisplayed:not-allowed-cursor" title="view.disabledActionMessages.compare"}} {{action doAction view.serviceVersion view.actionTypes.COMPARE target="view.parentView"}}><i class="icon-copy"></i> {{t common.compare}}</button> + <button {{bindAttr disabled="view.disabledActionAttr.revert" class=":btn view.serviceVersion.isCurrent:not-allowed-cursor view.serviceVersion.isCompatible::hidden" title="view.disabledActionMessages.revert"}} {{action doAction view.serviceVersion view.actionTypes.REVERT target="view.parentView"}}>{{t dashboard.configHistory.info-bar.revert.button}}</button> {{/isAccessible}} </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/4728e316/ambari-web/app/utils/helper.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/utils/helper.js b/ambari-web/app/utils/helper.js index 6110c26..0775099 100644 --- a/ambari-web/app/utils/helper.js +++ b/ambari-web/app/utils/helper.js @@ -579,8 +579,7 @@ App.popover = function (self, options) { if (!self) return; self.popover(options); self.on("remove", function () { - $(this).trigger('mouseleave'); - $(this).off(); + $(this).trigger('mouseleave').off().removeData('popover'); }); }; @@ -597,8 +596,7 @@ App.tooltip = function (self, options) { self.tooltip(options); /* istanbul ignore next */ self.on("remove", function () { - $(this).trigger('mouseleave'); - $(this).off(); + $(this).trigger('mouseleave').off().removeData('tooltip'); }); }; http://git-wip-us.apache.org/repos/asf/ambari/blob/4728e316/ambari-web/app/views/common/configs/config_history_flow.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/configs/config_history_flow.js b/ambari-web/app/views/common/configs/config_history_flow.js index 4f11bfd..b51ea4a 100644 --- a/ambari-web/app/views/common/configs/config_history_flow.js +++ b/ambari-web/app/views/common/configs/config_history_flow.js @@ -65,6 +65,10 @@ App.ConfigHistoryFlowView = Em.View.extend({ }) }, + allServiceVersions: function() { + return App.ServiceConfigVersion.find().filterProperty('serviceName', this.get('serviceName')); + }.property('serviceName'), + showCompareVersionBar: function() { return !Em.isNone(this.get('compareServiceVersion')); }.property('compareServiceVersion'), @@ -99,16 +103,15 @@ App.ConfigHistoryFlowView = Em.View.extend({ }.property('displayedServiceVersion'), serviceVersions: function () { - var allServiceVersions = App.ServiceConfigVersion.find().filterProperty('serviceName', this.get('serviceName')); var groupName = this.get('controller.selectedConfigGroup.isDefault') ? 'default' : this.get('controller.selectedConfigGroup.name'); var groupId = this.get('controller.selectedConfigGroup.configGroupId'); - allServiceVersions.forEach(function (version) { + this.get('allServiceVersions').forEach(function (version) { version.set('isDisabled', !(version.get('groupName') === groupName)); }, this); - var serviceVersions = allServiceVersions.filter(function(s) { + var serviceVersions = this.get('allServiceVersions').filter(function(s) { return (s.get('groupId') === groupId) || s.get('groupName') == 'default'; }); @@ -121,11 +124,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ * disable versions visible to the user to prevent actions on them */ disableVersions: function () { - var allServiceVersions = App.ServiceConfigVersion.find().filterProperty('serviceName', this.get('serviceName')); - - allServiceVersions.forEach(function (version) { - version.set('isDisabled', true); - }, this); + this.get('allServiceVersions').setEach('isDisabled', true); }, /** @@ -170,7 +169,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ }, computePosition: function(event) { - var $el = Em.$('.dropdown-menu', event.currentTarget); + var $el = this.$('.dropdown-menu', event.currentTarget); // remove existing style - in case user scrolls the page $el.removeAttr('style'); var elHeight = $el.outerHeight(), @@ -181,6 +180,7 @@ App.ConfigHistoryFlowView = Em.View.extend({ if (shouldShowUp) { $el.css('margin-top', -(elHeight - parentHeight)); } + $el = null; }, didInsertElement: function () { @@ -191,33 +191,17 @@ App.ConfigHistoryFlowView = Em.View.extend({ App.tooltip(this.$('[data-toggle=arrow-tooltip]'),{ placement: 'top' }); - $(".version-info-bar-wrapper").stick_in_parent({parent: '#serviceConfig', offset_top: 10}); + this.$(".version-info-bar-wrapper").stick_in_parent({parent: '#serviceConfig', offset_top: 10}); + }, + + willDestroyElement: function() { + Em.keys(this.get('serviceVersionsReferences')).forEach(function(key) { + Em.get(this.get('serviceVersionsReferences'), key).destroy(); + }, this); + this.$('.version-info-bar-wrapper').trigger('sticky_kit:detach').off(); + this.$('[data-toggle=tooltip], [data-toggle=arrow-tooltip]').remove(); }, - serviceVersionBox: Em.View.extend({ - actionTypes: function() { - return this.get('parentView.actionTypes'); - }.property('parentView.actionTypes'), - templateName: require('templates/common/configs/service_version_box'), - didInsertElement: function () { - $('.version-box').hoverIntent(function() { - var self = this; - setTimeout(function() { - if ($(self).is(':hover')) { - $(self).find('.version-popover').fadeIn(200); - } - }, 700); - }, function() { - $(this).find('.version-popover').hide(); - }); - App.tooltip(this.$('[data-toggle=tooltip]'),{ - placement: 'bottom' - }); - App.tooltip(this.$('[data-toggle=arrow-tooltip]'),{ - placement: 'top' - }); - } - }), willInsertElement: function () { var serviceVersions = this.get('serviceVersions'); @@ -529,3 +513,44 @@ App.ConfigHistoryFlowView = Em.View.extend({ } } }); + +App.ConfigsServiceVersionBoxView = Em.View.extend({ + + actionTypesBinding: 'parentView.actionTypes', + + disabledActionAttr: function() { + if (this.get('serviceVersion')) { + return this.get('serviceVersion').get('disabledActionAttr'); + } + }.property('serviceVersion.disabledActionAttr'), + + disabledActionMessages: function() { + if (this.get('serviceVersion')) { + return this.get('serviceVersion').get('disabledActionMessages'); + } + }.property('serviceVersion.disabledActionMessages'), + + templateName: require('templates/common/configs/service_version_box'), + + didInsertElement: function () { + this._super(); + this.$('.version-box').hoverIntent(function() { + if ($(this).is(':hover')) { + $(this).find('.version-popover').delay(700).fadeIn(200).end(); + } + }, function() { + $(this).find('.version-popover').stop().fadeOut(200).end(); + }); + App.tooltip(this.$('[data-toggle=tooltip]'), { + placement: 'bottom' + }); + App.tooltip(this.$('[data-toggle=arrow-tooltip]'), { + placement: 'top' + }); + }, + + willDestroyElement: function() { + this.$('.version-box').off(); + this.$('[data-toggle=tooltip], [data-toggle=arrow-tooltip]').remove(); + } +});
