AMBARI-13461. Express Upgrade: UX edits. (xiwang via yusaku)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/4017f064 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/4017f064 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/4017f064 Branch: refs/heads/branch-dev-patch-upgrade Commit: 4017f064c9bbb3337ae1aa55f0e29e915806d1b0 Parents: c908531 Author: Yusaku Sako <[email protected]> Authored: Fri Oct 16 23:19:35 2015 -0700 Committer: Yusaku Sako <[email protected]> Committed: Fri Oct 16 23:19:35 2015 -0700 ---------------------------------------------------------------------- .../main/admin/stack_and_upgrade_controller.js | 71 ++++++++++++++------ ambari-web/app/messages.js | 17 +++-- ambari-web/app/styles/stack_versions.less | 54 +++++++-------- .../admin/stack_upgrade/upgrade_options.hbs | 24 ++++--- 4 files changed, 97 insertions(+), 69 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/4017f064/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js b/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js index 6a94e6e..9c779ce 100644 --- a/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js +++ b/ambari-web/app/controllers/main/admin/stack_and_upgrade_controller.js @@ -573,37 +573,32 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage, type: method.get('type') }); } - if (method.get('selected')) { - view.set('parentView.selectedMethod', method); - } }); - App.tooltip($(".not-allowed.thumbnail"), { + + App.tooltip($(".failure-tolerance-tooltip"), { + placement: "top", + title: Em.I18n.t('admin.stackVersions.version.upgrade.upgradeOptions.tolerance.tooltip') + }); + App.tooltip($(".not-allowed-by-version"), { placement: "bottom", title: Em.I18n.t('admin.stackVersions.version.upgrade.upgradeOptions.notAllowed') }); + Em.run.later(this, function () { + App.tooltip($(".thumbnail.check-failed"), { + placement: "bottom", + title: Em.I18n.t('admin.stackVersions.version.upgrade.upgradeOptions.preCheck.failed.tooltip') + }); + }, 1000); }, parentView: this.get('parentView'), isInUpgradeWizard: isInUpgradeWizard, versionText: isInUpgradeWizard? '' : Em.I18n.t('admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.version').format(version.get('displayName')), upgradeMethods: function () { - if (isInUpgradeWizard) { - self.get('upgradeMethods').forEach(function(method){ - if (method.get('displayName') == self.get('upgradeTypeDisplayName')) { - method.set('selected', true); - } else { - method.set('selected', false); - } - }); - } else { - var ruMethod = self.get('upgradeMethods').findProperty('type', 'ROLLING'); - var ssuMethod = self.get('upgradeMethods').findProperty('type', 'NON_ROLLING'); - ruMethod.set('selected', ruMethod.get('allowed')); - ssuMethod.set('selected', !ruMethod.get('allowed') && ssuMethod.get('allowed')); - } + self.updateSelectedMethod(isInUpgradeWizard); return self.get('upgradeMethods'); - }.property('self.upgradeMethods', 'upgradeTypeDisplayName'), + }.property('self.upgradeMethods'), selectMethod: function(event) { - if (isInUpgradeWizard || !event.context.get('allowed')) return; + if (isInUpgradeWizard || !event.context.get('allowed') || event.context.get('isPrecheckFailed')) return; var selectedMethod = event.context; this.get('upgradeMethods').forEach(function(method){ method.set('selected', false); @@ -655,8 +650,8 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage, disablePrimary: function() { if (isInUpgradeWizard) return false; var selectedMethod = self.get('upgradeMethods').findProperty('selected', true); - return selectedMethod ? selectedMethod.get('precheckResultsMessageClass') == 'RED' : true; - }.property('selectedMethod', 'selectedMethod.precheckResultsMessageClass'), + return selectedMethod ? selectedMethod.get('isPrecheckFailed') : true; + }.property('selectedMethod', 'selectedMethod.isPrecheckFailed'), onPrimary: function () { this.hide(); if (isInUpgradeWizard) { @@ -749,8 +744,40 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage, var method = self.get('upgradeMethods').findProperty('type', params.type); method.set('precheckResultsMessage', message); method.set('precheckResultsMessageClass', messageClass); + method.set('isPrecheckFailed', messageClass == 'RED'); method.set('precheckResultsMessageIconClass', messageIconClass); method.set('precheckResultsData', data); + this.updateSelectedMethod(false); + Em.run.later(this, function () { + App.tooltip($(".thumbnail.check-failed"), { + placement: "bottom", + title: Em.I18n.t('admin.stackVersions.version.upgrade.upgradeOptions.preCheck.failed.tooltip') + }); + $(".thumbnail").not(".check-failed").not(".not-allowed-by-version").tooltip("destroy"); + }, 1000); + }, + + /** + * In Upgrade Wizard: update which method already been selected on open + * Not in upgrade wizard: de-select the method with pre-check errors + * @param isInUpgradeWizard {boolean} + */ + updateSelectedMethod: function(isInUpgradeWizard) { + var self = this; + if (isInUpgradeWizard) { + this.get('upgradeMethods').forEach(function(method){ + if (method.get('displayName') == self.get('upgradeTypeDisplayName')) { + method.set('selected', true); + } else { + method.set('selected', false); + } + }); + } else { + var ruMethod = this.get('upgradeMethods').findProperty('type', 'ROLLING'); + var euMethod = this.get('upgradeMethods').findProperty('type', 'NON_ROLLING'); + if (ruMethod.get('isPrecheckFailed')) ruMethod.set('selected', false); + if (euMethod.get('isPrecheckFailed')) euMethod.set('selected', false); + } }, /** http://git-wip-us.apache.org/repos/asf/ambari/blob/4017f064/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 5df161b..349ae70 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1447,16 +1447,19 @@ Em.I18n.translations = { 'admin.stackVersions.version.upgrade.upgradeOptions.header': "Upgrade Options", 'admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.version': "You are about to perform an upgrade to <b>{0}</b>.", - 'admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.method': "Please choose the method to perform this upgrade:", - 'admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.tolerance': "Please choose the tolerance with failures. (Can be modified later)", - 'admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option1': "Skip all component failures", - 'admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option2': "Skip all service check failures", + 'admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.method': "Choose the upgrade method:", + 'admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.tolerance': "Select optional upgrade failure tolerance:", + 'admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option1': "Skip all Slave Component failures", + 'admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option2': "Skip all Service Check failures", + 'admin.stackVersions.version.upgrade.upgradeOptions.tolerance.tooltip': "These upgrade failure tolerance options are useful when performing an upgrade on a large cluster and you want to minimize user intervention.", 'admin.stackVersions.version.upgrade.upgradeOptions.RU.title': "Rolling Upgrade", - 'admin.stackVersions.version.upgrade.upgradeOptions.RU.description': "Services remain up while the upgrade is performed. <br/>No downtime, but slower.", + 'admin.stackVersions.version.upgrade.upgradeOptions.RU.description': "Services remain running while the upgrade is performed. Minimized disruption but slower upgrade.", 'admin.stackVersions.version.upgrade.upgradeOptions.EU.title': "Express Upgrade", - 'admin.stackVersions.version.upgrade.upgradeOptions.EU.description': "Services are shut down while the upgrade is performed. <br/>Incurs downtime, but faster.", + 'admin.stackVersions.version.upgrade.upgradeOptions.EU.description': "Services are stopped while the upgrade is performed. Incurs downtime, but faster upgrade.", 'admin.stackVersions.version.upgrade.upgradeOptions.preCheck.rerun':'Rerun Checks', - 'admin.stackVersions.version.upgrade.upgradeOptions.preCheck.allPassed':'Pre-Upgrade checks passed', + 'admin.stackVersions.version.upgrade.upgradeOptions.preCheck.msg.title':'Checks:', + 'admin.stackVersions.version.upgrade.upgradeOptions.preCheck.allPassed':'Passed', + 'admin.stackVersions.version.upgrade.upgradeOptions.preCheck.failed.tooltip':'Option not available', 'admin.stackVersions.version.upgrade.upgradeOptions.notAllowed':'Not allowed by the current version', 'admin.stackVersions.hosts.popup.header.current': "Current", http://git-wip-us.apache.org/repos/asf/ambari/blob/4017f064/ambari-web/app/styles/stack_versions.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/stack_versions.less b/ambari-web/app/styles/stack_versions.less index 97e1c64..048e3dd 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -293,8 +293,8 @@ } .thumbnail { height: 140px; - border: solid 2px white; cursor: pointer; + border: none; width: 99%; .method-icon { font-size: 40px; @@ -310,41 +310,36 @@ text-align: center; } } + + .ROLLING, .NON_ROLLING { + background-color: #e4e4e4; + .method-name,.method-icon,.method-description { + color: #333333; + } + } .ROLLING { - background-color: #d3e7ca; .method-icon { margin-left: 88px; } } - .selected.ROLLING { - border: solid 2px #a3c197; - box-shadow: 0 8px 6px -6px #91ac86; - } - .ROLLING:hover { - background-color: #c4dfb9; - } .NON_ROLLING { - background-color: #d8e7fb; .method-icon { margin-left: 94px; } } - .selected.NON_ROLLING { - border: solid 2px #7fb2f4; - box-shadow: 0 8px 6px -6px #72a0db; + .selected.ROLLING, .selected.NON_ROLLING { + background-color: #cbe3c2; + box-shadow: 0 8px 6px -6px #b3b3b3; } - .NON_ROLLING:hover { - background-color: #c9defa; + .ROLLING:hover, .NON_ROLLING:hover { + background-color: #d3e7ca; } - .ROLLING.not-allowed:hover, .NON_ROLLING.not-allowed:hover { - background-color: #f3f3f3; + + .thumbnail.not-allowed:hover { + background-color: #e4e4e4; } .thumbnail.not-allowed { cursor: not-allowed; - background-color: #f3f3f3; - .method-name,.method-icon,.method-description { - color: #a9a9a9; - } } } @@ -367,32 +362,26 @@ } .method-precheck-message { - cursor: pointer; + a { + cursor: pointer; + } text-align: center; padding-top: 10px; + font-size: 13px; } .method-precheck-message.GREEN { - a { - font-size: 13px; - } .icon-ok { color: @health-status-green; font-size: 16px; } } .method-precheck-message.RED { - a { - font-size: 13px; - } .icon-remove { color: #cf2a27; font-size: 16px; } } .method-precheck-message.ORANGE { - a { - font-size: 13px; - } .icon-warning-sign { color: @health-status-orange; font-size: 16px; @@ -404,6 +393,9 @@ .text { margin-left: 10px; } + .icon-question-sign { + color: @blue; + } } .admin-cluster { http://git-wip-us.apache.org/repos/asf/ambari/blob/4017f064/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs index 5902433..7d50785 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_options.hbs @@ -22,28 +22,34 @@ <div {{bindAttr class=":row-fluid :method-options view.isInUpgradeWizard:disabled"}}> {{#each method in view.upgradeMethods}} <div class="method-option span5"> - <div {{bindAttr class="method.allowed::not-allowed method.selected:selected method.type :thumbnail"}} + <div {{bindAttr class="method.allowed::not-allowed method.allowed::not-allowed-by-version + method.isPrecheckFailed:not-allowed method.isPrecheckFailed:check-failed + method.selected:selected method.type :thumbnail"}} {{action selectMethod method target="view"}}> <div {{bindAttr class="method.icon :method-icon"}}></div> <div class="method-name">{{method.displayName}}</div> <div class="method-description">{{{method.description}}}</div> </div> {{#unless view.isInUpgradeWizard}} - <div {{bindAttr class=":method-precheck-message method.precheckResultsMessageClass"}}> - <i {{bindAttr class="method.precheckResultsMessageIconClass"}}></i> - <a {{action openMessage method target="view"}}> - {{method.precheckResultsMessage}} - </a> - </div> + {{#if method.precheckResultsMessage}} + <div {{bindAttr class=":method-precheck-message method.precheckResultsMessageClass"}}> + <i {{bindAttr class="method.precheckResultsMessageIconClass"}}></i> + <b>{{t admin.stackVersions.version.upgrade.upgradeOptions.preCheck.msg.title}}</b> + <a {{action openMessage method target="view"}}> + {{method.precheckResultsMessage}} + </a> + </div> + {{/if}} {{/unless}} </div> {{/each}} </div> <div class="text tolerance-text">{{t admin.stackVersions.version.upgrade.upgradeOptions.bodyMsg.tolerance}} - <div class="tolerance-option">{{view Ember.Checkbox checkedBinding="view.parentView.skipComponentFailures"}} - {{t admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option1}}</div> + <i class="icon-question-sign failure-tolerance-tooltip" data-toggle="tooltip"></i> <div class="tolerance-option">{{view Ember.Checkbox checkedBinding="view.parentView.skipSCFailures"}} {{t admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option2}}</div> + <div class="tolerance-option">{{view Ember.Checkbox checkedBinding="view.parentView.skipComponentFailures"}} + {{t admin.stackVersions.version.upgrade.upgradeOptions.tolerance.option1}}</div> </div> </div>
