Repository: ambari Updated Branches: refs/heads/branch-2.6 59b25468b -> 1cb4ee144
AMBARI-22023 Upgrade dialog style issues. (atkach) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/1cb4ee14 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/1cb4ee14 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/1cb4ee14 Branch: refs/heads/branch-2.6 Commit: 1cb4ee144779f013c5454033c77c6f1870b00130 Parents: 59b2546 Author: Andrii Tkach <[email protected]> Authored: Thu Sep 21 16:39:20 2017 +0300 Committer: Andrii Tkach <[email protected]> Committed: Thu Sep 21 16:47:55 2017 +0300 ---------------------------------------------------------------------- .../main/admin/stack_and_upgrade_controller.js | 2 +- ambari-web/app/messages.js | 2 + ambari-web/app/routes/stack_upgrade_routes.js | 11 +- ambari-web/app/styles/stack_versions.less | 134 ++++++---------- .../stack_upgrade/stack_upgrade_wizard.hbs | 158 ++++++++++--------- .../main/admin/stack_upgrade/upgrade_group.hbs | 16 +- .../views/common/helpers/status_icon_view.js | 1 + .../admin/stack_upgrade/upgrade_wizard_view.js | 3 + .../admin/stack_and_upgrade_controller_test.js | 2 +- .../stack_upgrade/upgrade_wizard_view_test.js | 2 +- 10 files changed, 159 insertions(+), 172 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/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 618abdb..4e72128 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 @@ -372,7 +372,7 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage, } else if (this.get('upgradeData.Upgrade')){ return this.get('upgradeData.Upgrade.request_status'); } else { - return ''; + return 'INIT'; } }.property('upgradeData.Upgrade.request_status', 'App.upgradeSuspended'), http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 8b9bd12..a058ae9 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1861,6 +1861,8 @@ Em.I18n.translations = { 'admin.stackUpgrade.state.aborted': "Upgrade Aborted", 'admin.stackUpgrade.state.completed': "Upgrade Finished", 'admin.stackUpgrade.state.inProgress.downgrade': "Downgrade in Progress", + 'admin.stackUpgrade.state.init': "Upgrade Initializing", + 'admin.stackUpgrade.state.init.downgrade': "Downgrade Initializing", 'admin.stackUpgrade.state.paused.downgrade': "Downgrade Paused", 'admin.stackUpgrade.state.aborted.downgrade': "Downgrade Aborted", 'admin.stackUpgrade.state.completed.downgrade': "Downgrade Finished", http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/routes/stack_upgrade_routes.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/routes/stack_upgrade_routes.js b/ambari-web/app/routes/stack_upgrade_routes.js index 1d4dc61..c7075c0 100644 --- a/ambari-web/app/routes/stack_upgrade_routes.js +++ b/ambari-web/app/routes/stack_upgrade_routes.js @@ -35,7 +35,16 @@ module.exports = App.WizardRoute.extend({ return App.ModalPopup.show({ classNames: ['full-width-modal'], - header: Em.computed.alias('App.router.mainAdminStackAndUpgradeController.wizardModalTitle'), + headerClass: Em.View.extend({ + header: Em.computed.alias('controller.wizardModalTitle'), + controllerBinding: 'App.router.mainAdminStackAndUpgradeController', + template: Ember.Handlebars.compile( + '{{view.header}}' + + '<div {{bindAttr class=":upgrade-options-link controller.isDowngrade:disabled" disabled="controller.isDowngrade"}} {{action openUpgradeOptions target="controller"}}>' + + '<i class="icon-cogs"></i><a>{{t admin.stackVersions.version.upgrade.upgradeOptions.header}}</a>' + + '</div>' + ) + }), bodyClass: App.upgradeWizardView, primary: Em.I18n.t('common.dismiss'), secondary: null, http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/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 bea711a..ad477d8 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -457,16 +457,12 @@ } } -#stack-upgrade-dialog { +#stack-upgrade-dialog, +#stack-upgrade-record-dialog { + margin-top: 5px; .details-box { padding: 5px; - margin-left: 15px; - margin-right: 95px; - margin-top: 10px; - .button-row { - text-align: right; - padding: 5px; - } + margin-top: 5px; input[type="checkbox"] { margin: 0; } @@ -474,6 +470,10 @@ line-height: 30px; } } + .button-row { + text-align: right; + padding: 5px; + } .task-details { .manage-controls a { cursor: pointer; @@ -497,102 +497,58 @@ } .task-list-main-warp i { font-size: 16px; + vertical-align: baseline; } ul.failed-info-list { max-height: 500px; margin-top: 5px; } - .upgrade-options-link { - position: absolute; - cursor: pointer; - right: 10%; - top: 13px; - width: 100px; - a { - font-size: 13px; - } - .icon-cogs { - color: #0088cc; - margin-right: 3px; - } - } - .upgrade-options-link.disabled { - cursor: not-allowed; - a, .icon-cogs { - color: #808080; - } - a:hover { - text-decoration: none; - } - } -} - -#stack-upgrade-record-dialog { - .details-box { - padding: 5px; - margin-left: 15px; - margin-right: 95px; - .button-row { - text-align: right; - padding: 5px; - } - input[type="checkbox"] { - margin: 0; - } - .message { - line-height: 30px; + .pause-button { + margin-top: -5px; + i { + padding-right: 4px; + font-size: 15px; } } - .task-details { - .manage-controls a { - cursor: pointer; - margin-right: 12px; - } - textarea { - width: 100%; - min-height: 100px; - box-sizing: border-box; - } + .active-task-label { + padding: 8px 15px; + display: inline-block; } - .task-list { - overflow-x: hidden; + .upgrade-groups { + padding-left: 0; .progress { - margin-bottom: 0; + width: 85%; + display: inline-block; } - padding-left: 20px; - i { - margin-right: 5px; + .percent { + display: inline-block; + vertical-align: top; } } - .task-list-main-warp i { +} + +.upgrade-options-link { + cursor: pointer; + display: inline-block; + padding-left: 20px; + vertical-align: bottom; + a { + font-size: 14px; + font-weight: normal; + } + .icon-cogs { font-size: 16px; + color: #0088cc; + margin-right: 3px; } - ul.failed-info-list { - max-height: 500px; - margin-top: 5px; - } - .upgrade-options-link { - position: absolute; - cursor: pointer; - right: 10%; - top: 13px; - width: 100px; - a { - font-size: 13px; - } - .icon-cogs { - color: #0088cc; - margin-right: 3px; - } +} +.upgrade-options-link.disabled { + cursor: not-allowed; + a, .icon-cogs { + color: #808080; } - .upgrade-options-link.disabled { - cursor: not-allowed; - a, .icon-cogs { - color: #808080; - } - a:hover { - text-decoration: none; - } + a:hover { + text-decoration: none; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs index 01109b8..5884eb5 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/stack_upgrade_wizard.hbs @@ -17,14 +17,12 @@ }} <div id="stack-upgrade-dialog"> - <div {{bindAttr class=":upgrade-options-link controller.isDowngrade:disabled"}} {{action openUpgradeOptions target="controller"}}> - <i class="icon-cogs"></i><a>{{t common.options}}</a> - </div> <div {{bindAttr class="view.isLoaded::hidden :row-fluid"}}> - <div class="span3 task-list-main-warp">{{statusIcon controller.requestStatus}} - {{view.upgradeStatusLabel}}</div> - <div class="span8"> + <div class="span2 task-list-main-warp"> + {{statusIcon controller.requestStatus}} {{view.upgradeStatusLabel}} + </div> + <div class="span7"> {{view App.ProgressBarView progressBinding="view.overallProgress" statusBinding="controller.requestStatus" @@ -33,75 +31,93 @@ <div class="span1"> {{view.overallProgress}}% </div> - </div> - - <div class="task-list scrollable-block task-list-main-warp"> - {{#if view.isLoaded}} - <div> - <div class="row"> - {{#if showPauseButton}} - <div class="span12"> - {{#if isDowngrade}} - <button - class="btn btn-default" {{action confirmPauseDowngrade target="view"}}>{{t admin.stackUpgrade.pauseDowngrade}}</button> - {{else}} - <button - class="btn btn-default" {{action confirmPauseUpgrade target="view"}}>{{t admin.stackUpgrade.pauseUpgrade}}</button> - {{/if}} - </div> - {{/if}} - </div> - {{#if view.runningItem}} - <div class="box details-box"> - <div class="row-fluid"> - <div class="pull-left">{{t admin.stackUpgrade.dialog.inProgress}} {{view.runningItem.text}}</div> - {{#if view.isDetailsOpened}} - <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a> - {{#if view.runningItem.isTasksLoaded}} - <div class="clear"> - {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} - </div> + <div class="span2 pause-button pull-right"> + {{#if view.isLoaded}} + {{#if showPauseButton}} + {{#if isDowngrade}} + <button class="btn btn-default pull-right" {{action confirmPauseDowngrade target="view"}}> + <i class="icon-pause"></i>{{t admin.stackUpgrade.pauseDowngrade}} + </button> {{else}} - {{view App.SpinnerView classNames="clear"}} + <button class="btn btn-default pull-right" {{action confirmPauseUpgrade target="view"}}> + <i class="icon-pause"></i>{{t admin.stackUpgrade.pauseUpgrade}} + </button> {{/if}} - {{else}} - <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a> - {{/if}} - </div> - </div> + {{/if}} {{/if}} - {{#if view.failedItem}} - {{#unless view.isSlaveComponentFailuresItem}} - <div class="box details-box"> - <div class="row-fluid"> - <div class="pull-left">{{t admin.stackUpgrade.dialog.failed}} {{view.failedItem.text}}</div> - {{#if view.isDetailsOpened}} - <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a> - {{#if view.failedItem.isTasksLoaded}} - <div class="clear"> - {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} - </div> - {{else}} - {{view App.SpinnerView classNames="clear"}} - {{/if}} - {{else}} - <a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a> - {{/if}} - </div> - {{#if view.isHoldingState}} - <div class="button-row"> - {{#if view.isDowngradeAvailable}} - <button class="btn btn-danger" {{bindAttr disabled="controller.requestInProgress"}} {{action confirmDowngrade view.failedItem target="controller"}}>{{t common.downgrade}}</button> - {{/if}} - {{#if view.failedItem.skippable}} - <button class="btn btn-warning" {{bindAttr disabled="controller.requestInProgress"}} {{action continue view.failedItem target="view"}}>{{t admin.stackUpgrade.dialog.continue}}</button> - {{/if}} - <button class="btn" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button> + </div> + </div> + + <div class="task-list upgrade-groups scrollable-block task-list-main-warp"> + {{#if view.isLoaded}} + <div class="accordion"> + {{#if view.runningItem}} + <div class="accordion-group"> + <div class="accordion-heading row-fluid"> + <span class="active-task-label">{{t admin.stackUpgrade.dialog.inProgress}} + {{view.runningItem.text}}</span> + <a class="accordion-toggle pull-right" data-toggle="collapse" + href="#collapseBox" {{action toggleDetails target="view"}}> + {{#if view.isDetailsOpened}} + {{t admin.stackUpgrade.dialog.details.hide}} + {{else}} + {{t admin.stackUpgrade.dialog.details.open}} + {{/if}} + </a> </div> - {{/if}} - </div> - {{/unless}} - {{/if}} + <div class="accordion-body collapse" id="collapseBox"> + <div class="accordion-inner"> + {{#if view.runningItem.isTasksLoaded}} + <div class="clear"> + {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} + </div> + {{else}} + {{view App.SpinnerView classNames="clear"}} + {{/if}} + </div> + </div> + </div> + {{/if}} + {{#if view.failedItem}} + {{#unless view.isSlaveComponentFailuresItem}} + <div class="accordion-group"> + <div class="accordion-heading row-fluid"> + <span class="active-task-label"> + {{t admin.stackUpgrade.dialog.failed}} {{view.failedItem.text}} + </span> + <a class="accordion-toggle pull-right" data-toggle="collapse" href="#collapseBox" {{action toggleDetails target="view"}}> + {{#if view.isDetailsOpened}} + {{t admin.stackUpgrade.dialog.details.hide}} + {{else}} + {{t admin.stackUpgrade.dialog.details.open}} + {{/if}} + </a> + </div> + <div class="accordion-body collapse" id="collapseBox"> + <div class="accordion-inner"> + {{#if view.failedItem.isTasksLoaded}} + <div class="clear"> + {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} + </div> + {{else}} + {{view App.SpinnerView classNames="clear"}} + {{/if}} + </div> + </div> + {{#if view.isHoldingState}} + <div class="button-row"> + {{#if view.isDowngradeAvailable}} + <button class="btn btn-danger" {{bindAttr disabled="controller.requestInProgress"}} {{action confirmDowngrade view.failedItem target="controller"}}>{{t common.downgrade}}</button> + {{/if}} + {{#if view.failedItem.skippable}} + <button class="btn btn-warning" {{bindAttr disabled="controller.requestInProgress"}} {{action continue view.failedItem target="view"}}>{{t admin.stackUpgrade.dialog.continue}}</button> + {{/if}} + <button class="btn" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button> + </div> + {{/if}} + </div> + {{/unless}} + {{/if}} {{#if view.plainManualItem}} <div class="box details-box"> <p class="manual-steps-title"><strong>{{t admin.stackUpgrade.dialog.manual}}</strong></p> http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs index 7b62599..f8a887e 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_group.hbs @@ -23,16 +23,16 @@ <a href="#" {{action toggleExpanded view.content controller.upgradeData.upgradeGroups target="view"}}>{{view.content.title}}</a> </div> {{#if view.content.isRunning}} - <div class="span3"> + <div class="span4 pull-right"> {{view view.progressBarView progressBinding="view.content.progress" statusBinding="view.content.status" totalTasksBinding="view.content.total_task_count" completedTasksBinding="view.content.completed_task_count" }} - </div> - <div class="span1"> - <div>{{view.content.progress}}%</div> + <div class="percent pull-right"> + <span>{{view.content.progress}}%</span> + </div> </div> {{/if}} </div> @@ -48,14 +48,14 @@ <a href="#" {{action toggleExpanded item view.content.upgradeItems target="view"}}>{{item.context}}</a> </div> {{#if item.isRunning}} - <div class="span3"> + <div class="span4 pull-right"> {{view App.ProgressBarView progressBinding="item.progress" statusBinding="item.status" }} - </div> - <div class="span1"> - <div>{{item.progress}}%</div> + <div class="percent pull-right"> + <div>{{item.progress}}%</div> + </div> </div> {{/if}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/views/common/helpers/status_icon_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/helpers/status_icon_view.js b/ambari-web/app/views/common/helpers/status_icon_view.js index 70f56a9..75950df 100644 --- a/ambari-web/app/views/common/helpers/status_icon_view.js +++ b/ambari-web/app/views/common/helpers/status_icon_view.js @@ -26,6 +26,7 @@ App.StatusIconView = Em.View.extend({ * @type {object} */ statusIconMap: { + 'INIT': 'icon-cogs in_progress', 'COMPLETED': 'icon-ok completed', 'WARNING': 'icon-warning-sign', 'FAILED': 'icon-exclamation-sign failed', http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js index a5e7730..415d87d 100644 --- a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js +++ b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_wizard_view.js @@ -250,6 +250,9 @@ App.upgradeWizardView = Em.View.extend({ case 'HOLDING': labelKey = 'admin.stackUpgrade.state.paused'; break; + default: + labelKey = 'admin.stackUpgrade.state.init'; + break; } if (labelKey) { labelKey += (this.get('controller.isDowngrade')) ? '.downgrade' : ""; http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js b/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js index 44e738b..2920ae0 100644 --- a/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js +++ b/ambari-web/test/controllers/main/admin/stack_and_upgrade_controller_test.js @@ -107,7 +107,7 @@ describe('App.MainAdminStackAndUpgradeController', function() { this.mock.returns(false); controller.set('upgradeData', null); controller.propertyDidChange('requestStatus'); - expect(controller.get('requestStatus')).to.be.empty; + expect(controller.get('requestStatus')).to.equal('INIT'); }); }); http://git-wip-us.apache.org/repos/asf/ambari/blob/1cb4ee14/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js index 8ad711e..a303e60 100644 --- a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js +++ b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_wizard_view_test.js @@ -544,7 +544,7 @@ describe('App.upgradeWizardView', function () { status: '', isDowngrade: false }, - result: '' + result: Em.I18n.t('admin.stackUpgrade.state.init') }, { data: {
