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/eead09be Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/eead09be Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/eead09be Branch: refs/heads/branch-3.0-ams Commit: eead09bebb0c1887c8dd8fe90aa8a6d50009e897 Parents: 40f705a Author: Andrii Tkach <atk...@apache.org> Authored: Fri Sep 22 13:11:03 2017 +0300 Committer: Andrii Tkach <atk...@apache.org> Committed: Fri Sep 22 14:48:47 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 | 77 ++++++--- .../stack_upgrade/stack_upgrade_wizard.hbs | 170 +++++++++++-------- .../main/admin/stack_upgrade/upgrade_group.hbs | 18 +- .../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, 186 insertions(+), 102 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 fba6ad6..6d7560b 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 @@ -391,7 +391,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/eead09be/ambari-web/app/messages.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js index 113fb8f..db25104 100644 --- a/ambari-web/app/messages.js +++ b/ambari-web/app/messages.js @@ -1884,6 +1884,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/eead09be/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 24fa5e8..d36253a 100644 --- a/ambari-web/app/routes/stack_upgrade_routes.js +++ b/ambari-web/app/routes/stack_upgrade_routes.js @@ -40,7 +40,16 @@ module.exports = App.WizardRoute.extend({ return App.ModalPopup.show({ classNames: ['upgrade-wizard-modal'], modalDialogClasses: ['modal-xlg'], - 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/eead09be/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 2e4faff..0221311 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -418,7 +418,6 @@ } .details-box { padding: 5px; - margin-right: 95px; .button-row { text-align: right; padding: 5px; @@ -439,6 +438,7 @@ } } .task-list { + width: 100%; overflow-x: hidden; .progress { margin-bottom: 0; @@ -448,35 +448,70 @@ margin-right: 5px; } } + .active-task-label { + padding: 8px 15px; + display: inline-block; + } + .col-md-2.task-list-main-wrap { + padding-left: 0; + } + .upgrade-groups { + padding-left: 0; + .progress { + width: 85%; + display: inline-block; + } + .percent { + display: inline-block; + vertical-align: top; + } + } .task-list-main-wrap i { 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: 22px; - width: 100px; - a { - font-size: 13px; - } - .glyphicon-cogs { - color: #0088cc; - margin-right: 3px; + .pause-button { + margin-top: -5px; + padding-right: 0; + i { + padding-right: 4px; + font-size: 15px; } } - .upgrade-options-link.disabled { - cursor: not-allowed; - a, .glyphicon-cogs { - color: #808080; - } - a:hover { - text-decoration: none; - } + .button-row { + text-align: right; + padding: 5px; + } +} + +.upgrade-options-link { + padding-left: 50px; + display: inline-block; + cursor: pointer; + width: 150px; + vertical-align: bottom; + a { + font-size: 14px; + font-weight: normal; + } + .icon-cogs { + font-size: 16px; + color: #0088cc; + margin-right: 3px; + } +} +.upgrade-options-link.disabled { + cursor: not-allowed; + a, .icon-cogs { + color: #808080; + } + a:hover { + text-decoration: none; } } http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 cfbbb7a..7ab43b4 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,11 @@ }} <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"}}> - <div class="col-md-3 task-list-main-wrap">{{statusIcon controller.requestStatus}} + <div class="col-md-2 task-list-main-wrap">{{statusIcon controller.requestStatus}} {{view.upgradeStatusLabel}}</div> - <div class="col-md-8"> + <div class="col-md-7"> {{view App.ProgressBarView progressBinding="view.overallProgress" statusBinding="controller.requestStatus" @@ -33,73 +30,110 @@ <div class="col-md-1"> {{view.overallProgress}}% </div> - </div> - - <div class="task-list scrollable-block task-list-main-wrap"> - {{#if view.isLoaded}} - <div> - <div class="row"> - {{#if showPauseButton}} - {{#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}} - {{/if}} - </div> - {{#if view.runningItem}} - <div class="panel panel-default details-box row"> - <div class="row col-md-12"> - <div class="pull-left col-md-6">{{t admin.stackUpgrade.dialog.inProgress}} {{view.runningItem.text}}</div> - {{#if view.isDetailsOpened}} - <div class="pull-right col-md-6"><a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a></div> - {{#if view.runningItem.isTasksLoaded}} - <div class="clear col-md-12"> - {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} - </div> + <div class="col-md-2 pause-button pull-right"> + {{#if view.isLoaded}} + {{#if showPauseButton}} + {{#if isDowngrade}} + <button + class="btn btn-default pull-right" {{action confirmPauseDowngrade target="view"}}>{{t admin.stackUpgrade.pauseDowngrade}}</button> {{else}} - {{view App.SpinnerView classNames="clear"}} + <button + class="btn btn-default pull-right" {{action confirmPauseUpgrade target="view"}}>{{t admin.stackUpgrade.pauseUpgrade}}</button> {{/if}} - {{else}} - <div class="pull-right col-md-6"><a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a></div> - {{/if}} - </div> - </div> + {{/if}} {{/if}} - {{#if view.failedItem}} - {{#unless view.isSlaveComponentFailuresItem}} - <div class="panel panel-default details-box row"> - <div class="row col-md-12"> - <div class="pull-left col-md-6">{{t admin.stackUpgrade.dialog.failed}} {{view.failedItem.text}}</div> - {{#if view.isDetailsOpened}} - <div class="pull-right col-md-6"><a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.hide}}</a></div> - {{#if view.failedItem.isTasksLoaded}} - <div class="clear col-md-12"> - {{view App.upgradeTaskView contentBinding="view.taskDetails" outsideViewBinding="view.outsideView"}} - </div> - {{else}} - {{view App.SpinnerView classNames="clear"}} - {{/if}} - {{else}} - <div class="pull-right col-md-6"><a href="#" class="pull-right" {{action toggleDetails target="view"}}>{{t admin.stackUpgrade.dialog.details.open}}</a></div> - {{/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 btn-default" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button> + </div> + </div> + + <div class="task-list scrollable-block task-list-main-wrap upgrade-groups"> + {{#if view.isLoaded}} + <div class="panel-group"> + {{#if view.runningItem}} + <div class="panel panel-default details-box row"> + <div class="panel-heading row"> + <div class="pull-left col-md-6"> + {{t admin.stackUpgrade.dialog.inProgress}} {{view.runningItem.text}} + </div> + {{#if view.isDetailsOpened}} + <div class="pull-right col-md-6"> + <a href="#collapseBox" class="pull-right" {{action toggleDetails target="view"}} + data-toggle="collapse"> + {{t admin.stackUpgrade.dialog.details.hide}} + </a> + </div> + {{else}} + <div class="pull-right col-md-6"> + <a href="#collapseBox" class="pull-right" {{action toggleDetails target="view"}} + data-toggle="collapse"> + {{t admin.stackUpgrade.dialog.details.open}} + </a> + </div> + {{/if}} </div> - {{/if}} - </div> - {{/unless}} - {{/if}} + <div id="collapseBox" class="panel-collapse collapse"> + <div class="panel-body"> + {{#if view.runningItem.isTasksLoaded}} + <div class="clear col-md-12"> + {{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="panel panel-default details-box row"> + <div class="panel-heading row"> + <div class="pull-left col-md-6"> + {{t admin.stackUpgrade.dialog.failed}} {{view.failedItem.text}} + </div> + {{#if view.isDetailsOpened}} + <div class="pull-right col-md-6"> + <a href="#collapseBox" class="pull-right" {{action toggleDetails target="view"}} + data-toggle="collapse"> + {{t admin.stackUpgrade.dialog.details.hide}} + </a> + </div> + {{else}} + <div class="pull-right col-md-6"> + <a href="#collapseBox" class="pull-right" {{action toggleDetails target="view"}} + data-toggle="collapse"> + {{t admin.stackUpgrade.dialog.details.open}} + </a> + </div> + {{/if}} + </div> + <div id="collapseBox" class="panel-collapse collapse"> + <div class="panel-body"> + {{#if view.failedItem.isTasksLoaded}} + <div class="clear col-md-12"> + {{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 btn-default" {{bindAttr disabled="controller.requestInProgress"}} {{action retry view.failedItem target="view"}}>{{t common.retry}}</button> + </div> + {{/if}} + </div> + {{/unless}} + {{/if}} {{#if view.plainManualItem}} <div class="panel panel-default 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/eead09be/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 1a829fb..00cde9f 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="col-md-3"> + <div class="col-md-4 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="col-md-1"> - <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="col-md-3"> + <div class="col-md-4 pull-right"> {{view App.ProgressBarView progressBinding="item.progress" statusBinding="item.status" - }} - </div> - <div class="col-md-1"> - <div>{{item.progress}}%</div> + }} + <div class="percent pull-right"> + <span>{{item.progress}}%</span> + </div </div> {{/if}} </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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 fbd8e3a..b807976 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': 'glyphicon glyphicon-ok completed', 'WARNING': 'glyphicon glyphicon-warning-sign', 'FAILED': 'glyphicon glyphicon-exclamation-sign failed', http://git-wip-us.apache.org/repos/asf/ambari/blob/eead09be/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/eead09be/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 2f14e50..d0671f9 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/eead09be/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: {