Repository: ambari Updated Branches: refs/heads/branch-feature-AMBARI-21450 445c7b011 -> fc0140930
AMBARI-21764. Patch / Maint UI Assets Need Style Adjustments (alexantonenko) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/fc014093 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/fc014093 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/fc014093 Branch: refs/heads/branch-feature-AMBARI-21450 Commit: fc0140930db3a32d56953a88f3d8608d28fbe407 Parents: 445c7b0 Author: Alex Antonenko <[email protected]> Authored: Mon Aug 21 16:43:09 2017 +0300 Committer: Alex Antonenko <[email protected]> Committed: Mon Aug 21 16:43:09 2017 +0300 ---------------------------------------------------------------------- .../main/admin/stack_and_upgrade_controller.js | 5 +- ambari-web/app/styles/common.less | 2 + ambari-web/app/styles/stack_versions.less | 82 +++++++++----- .../admin/stack_upgrade/upgrade_version_box.hbs | 13 --- .../stack_upgrade/upgrade_version_column.hbs | 113 ++++++++++--------- .../stack_upgrade/upgrade_version_box_view.js | 9 +- .../upgrade_version_column_view.js | 11 +- .../admin/stack_and_upgrade_controller_test.js | 2 +- .../upgrade_version_box_view_test.js | 10 +- 9 files changed, 129 insertions(+), 118 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/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 6718ba7..c00ddf5 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 @@ -1982,10 +1982,11 @@ App.MainAdminStackAndUpgradeController = Em.Controller.extend(App.LocalStorage, /** * - * @param {Em.Object} version + * @param {object} event */ - confirmRevertPatchUpgrade: function(version) { + confirmRevertPatchUpgrade: function(event) { var self = this; + var version = event.context; var currentStack = App.RepositoryVersion.find(this.get('currentVersion.id')); App.ModalPopup.show({ http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/app/styles/common.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less index 620bd5f..b1c280f 100644 --- a/ambari-web/app/styles/common.less +++ b/ambari-web/app/styles/common.less @@ -41,6 +41,8 @@ @green: #69BE28; @blue: #0572ff; @gray-blue: #80A0B9; +@gray: #999; +@current-green: #468847; @spinner-default-width: 36px; @spinner-default-height: 36px; http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/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 4d1e5bf..381cd20 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -158,16 +158,12 @@ } .left-menu-table { padding: 10px 0; - margin-top: 141px; + margin-top: 136px; td.service-display-name { border-top: 2px solid #e4e4e4; border-bottom: 2px solid #e4e4e4; } } - div.current-version-box { - background: none repeat scroll 0 0 #e6f1f6; - box-shadow: 0 8px 6px -6px black; - } .version-box { position: relative; background: none repeat scroll 0 0 #fff; @@ -273,8 +269,10 @@ } .version-column { min-height: 500px; - min-width: 145px; - margin: 15px 7px 0px 7px; + min-width: 175px; + margin: 15px 7px 0 7px; + padding-top: 0; + background-color: #efefef; .version-column-display-name { color: #000; text-align: center; @@ -288,8 +286,7 @@ text-align: center; font-size: 13px; padding: 5px 5px; - border-bottom: 1px solid #e4e4e4; - margin-bottom: 0px; + margin-bottom: 18px; a { cursor: pointer; } @@ -297,18 +294,57 @@ .patch-icon { margin: 0 0 -5px 0; } + .icon-trash { + padding: 3px 5px; + border-radius: 15px; + border: 1px solid black; + font-size: 12px; + cursor: pointer; + background: white; + } .state { - margin: 5px 0px 15px 0px; + margin: 0 0 25px 0; line-height: 20px; - .label-success { + padding-top: 0; + .top-label { + font-size: inherit; + border-radius: 0; + width: 100%; + display: inline-block; + padding: 0; line-height: 30px; + position: relative; } - .btn.btn-primary:not(.dropdown-toggle) { - padding: 4px 5px; - min-width: 70px; + .top-label::after { + content: ''; + position: absolute; + left: 0; + top: 100%; + width: 0; + height: 0; + border-left: 86px solid transparent; + border-right: 86px solid transparent; + border-top: 10px solid @current-green; + clear: both; + } + .btn-group { + display: inline-block; + width: 100%; + .btn:not(.dropdown-toggle) { + width: 81%; + border-radius: 0; + padding: 9px 5px; + min-width: 70px; + } + .dropdown-toggle { + width: 20%; + border-radius: 0; + padding: 9px 5px; + } } .open .dropdown-menu { - min-width: 90px; + min-width: 100px; + right: 0; } } .state.installing { @@ -340,18 +376,8 @@ .icon-info-sign { color: @blue; } - } - .patch-upgrade-column { - margin-left: -7px; - border-color: @health-status-red; - background-color: rgba(255, 0, 0, 0.1); - .services-section { - .line-separator { - margin-left: 0; - } - .line-separator-bottom { - margin-left: 0; - } + .icon-medkit, .icon-bug { + color: @gray; } } .service-version-info { @@ -364,7 +390,7 @@ position: relative; } span.label.available { - background-color: #468847; + background-color: @current-green;; } } } http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs index bc38130..c10a1b6 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_box.hbs @@ -28,19 +28,6 @@ </p> <p class="repository-name">({{view.content.repositoryVersion}})</p> -<p class="patch-icon"> - {{#if view.content.isMaint}} - <i class="icon-umbrella"></i> {{t common.maint}} - {{/if}} - {{#if view.content.isPatch}} - <i class="icon-umbrella"></i> {{t common.patch}} - {{/if}} - {{#if view.content.isService}} - <i class="icon-umbrella"></i> {{t common.service}} - {{/if}} -</p> - - <div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state :repo-version-tooltip"}}> {{#if view.stateElement.isButton}} <button class="btn btn-primary" http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_column.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_column.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_column.hbs index be59e44..96c22d5 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_column.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_version_column.hbs @@ -20,75 +20,76 @@ <i class="icon-exclamation-sign out-of-sync-badge"></i> {{/if}} +<div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state :repo-version-tooltip"}}> + {{#if view.stateElement.isButton}} + <button class="btn btn-primary" + {{action runAction target="view"}} + {{bindAttr disabled="view.stateElement.isDisabled"}}> + {{view.stateElement.text}} + </button> + {{/if}} + {{#if view.stateElement.isButtonGroup}} + <div class="btn-group"> + <button class="btn btn-primary" + {{action runAction target="view"}} + {{bindAttr disabled="view.stateElement.isDisabled"}}> + {{view.stateElement.text}} + </button> + <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.stateElement.isDisabled"}}> + <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + {{#each button in view.stateElement.buttons}} + <li {{bindAttr class="button.isDisabled:disabled"}}> + <a {{action runAction button.action target="view"}}> + {{button.text}} + </a> + </li> + {{/each}} + </ul> + </div> + {{/if}} + {{#if view.stateElement.isLabel}} + <span {{bindAttr class="view.stateElement.class"}}>{{view.stateElement.text}}</span> + {{/if}} + {{#if view.stateElement.isLink}} + {{#if view.stateElement.iconClass}} + <i {{bindAttr class="view.stateElement.iconClass" disabled="view.stateElement.isDisabled"}}></i> + {{/if}} + <a href="#" {{action runAction target="view"}} + {{bindAttr disabled="view.stateElement.isDisabled"}}>{{view.stateElement.text}}</a> + {{#if view.stateElement.isInstalling}} + {{view App.ProgressBarView + progressBinding="view.installProgress" + statusBinding="view.PROGRESS_STATUS" + }} + {{/if}} + {{/if}} + {{#if view.stateElement.isSpinner}} + {{view App.SpinnerView}} + {{/if}} +</div> + <p class="version-column-display-name"> {{#if view.content.isStandard}} <span>{{view.content.displayNameSimple}}</span> {{else}} - <span>{{view.content.displayName}}</span> - {{/if}} -</p> - -<p class="patch-icon"> {{#if view.content.isPatch}} - <i class="icon-umbrella"></i> {{t common.patch}} + <i class="icon-bug" aria-hidden="true"></i> {{/if}} {{#if view.content.isMaint}} - <i class="icon-umbrella"></i> {{t common.maint}} + <i class="icon-medkit" aria-hidden="true"></i> {{/if}} + <span>{{view.content.displayName}}</span> + {{#if view.stateElement.canBeReverted}} + <i class="icon-trash" {{action confirmRevertPatchUpgrade view.content target="controller"}}></i> + {{/if}} + {{/if}} </p> <p class="version-column-show-details"> <a {{action openVersionBoxPopup target="view"}}>{{t admin.stackVersions.version.column.showDetails}}</a> </p> -<div {{bindAttr class="view.stateElement.isInstalling:installing :align-center :state :repo-version-tooltip"}}> - {{#if view.stateElement.isButton}} - <button class="btn btn-primary" - {{action runAction target="view"}} - {{bindAttr disabled="view.stateElement.isDisabled"}}> - {{view.stateElement.text}} - </button> - {{/if}} - {{#if view.stateElement.isButtonGroup}} - <div class="btn-group"> - <button class="btn btn-primary" - {{action runAction target="view"}} - {{bindAttr disabled="view.stateElement.isDisabled"}}> - {{view.stateElement.text}} - </button> - <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.stateElement.isDisabled"}}> - <span class="caret"></span> - </button> - <ul class="dropdown-menu"> - {{#each button in view.stateElement.buttons}} - <li {{bindAttr class="button.isDisabled:disabled"}}> - <a {{action runAction button.action target="view"}}> - {{button.text}} - </a> - </li> - {{/each}} - </ul> - </div> - {{/if}} - {{#if view.stateElement.isLabel}} - <span {{bindAttr class="view.stateElement.class"}}>{{view.stateElement.text}}</span> - {{/if}} - {{#if view.stateElement.isLink}} - {{#if view.stateElement.iconClass}} - <i {{bindAttr class="view.stateElement.iconClass" disabled="view.stateElement.isDisabled"}}></i> - {{/if}} - <a href="#" {{action runAction target="view"}} - {{bindAttr disabled="view.stateElement.isDisabled"}}>{{view.stateElement.text}}</a> - {{#if view.stateElement.isInstalling}} - {{view App.ProgressBarView - progressBinding="view.installProgress" - statusBinding="view.PROGRESS_STATUS" - }} - {{/if}} - {{/if}} - {{#if view.stateElement.isSpinner}} - {{view App.SpinnerView}} - {{/if}} -</div> <div class="services-section"> {{#each service in view.services}} http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js index c3b58b6..216d34e 100644 --- a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js +++ b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_box_view.js @@ -114,7 +114,7 @@ App.UpgradeVersionBoxView = Em.View.extend({ 'CURRENT': { isLabel: true, text: Em.I18n.t('common.current'), - class: 'label label-success' + class: 'label top-label label-success' }, 'NOT_REQUIRED': { isButton: true, @@ -143,9 +143,10 @@ App.UpgradeVersionBoxView = Em.View.extend({ action: 'resumeUpgrade' }, 'CURRENT_PATCH': { - isButton: true, - text: Em.I18n.t('common.revert'), - action: 'confirmRevertPatchUpgrade' + isLabel: true, + text: Em.I18n.t('common.current'), + class: 'label top-label label-success', + canBeReverted: true } }, http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_column_view.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_column_view.js b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_column_view.js index 666d077..746873f 100644 --- a/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_column_view.js +++ b/ambari-web/app/views/main/admin/stack_upgrade/upgrade_version_column_view.js @@ -22,12 +22,7 @@ var stringUtils = require('utils/string_utils'); App.UpgradeVersionColumnView = App.UpgradeVersionBoxView.extend({ templateName: require('templates/main/admin/stack_upgrade/upgrade_version_column'), isVersionColumnView: true, - classNames: ['version-column', 'span4'], - classNameBindings: ['patchUpgradeClass'], - - patchUpgradeClass: function() { - return this.get('content.isPatch') ? 'patch-upgrade-column' : ''; - }.property('content'), + classNames: ['version-column'], didInsertElement: function () { App.tooltip($('.out-of-sync-badge'), {title: Em.I18n.t('hosts.host.stackVersions.status.out_of_sync')}); @@ -37,9 +32,7 @@ App.UpgradeVersionColumnView = App.UpgradeVersionBoxView.extend({ title: Em.I18n.t('admin.stackVersions.version.noCompatible.tooltip') }); } - //set the width, height of each version colum dynamically - var widthFactor = App.RepositoryVersion.find().get('length') > 3 ? 0.18: 0.31; - $('.version-column').width($('.versions-slides').width() * widthFactor); + var height = App.Service.find().get('length') > 10 ? ((App.Service.find().get('length') - 10) * 40 + 500) : 500; $('.version-column').height(height); http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/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 b685621..37f9595 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 @@ -3434,7 +3434,7 @@ describe('App.MainAdminStackAndUpgradeController', function() { }); it('App.ModalPopup.show should be called', function() { - controller.confirmRevertPatchUpgrade(Em.Object.create()); + controller.confirmRevertPatchUpgrade({context: Em.Object.create()}); expect(App.ModalPopup.show.calledOnce).to.be.true; }); }); http://git-wip-us.apache.org/repos/asf/ambari/blob/fc014093/ambari-web/test/views/main/admin/stack_upgrade/upgrade_version_box_view_test.js ---------------------------------------------------------------------- diff --git a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_version_box_view_test.js b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_version_box_view_test.js index 09ac9df..713f040 100644 --- a/ambari-web/test/views/main/admin/stack_upgrade/upgrade_version_box_view_test.js +++ b/ambari-web/test/views/main/admin/stack_upgrade/upgrade_version_box_view_test.js @@ -361,7 +361,7 @@ describe('App.UpgradeVersionBoxView', function () { status: 'CURRENT', isLabel: true, text: Em.I18n.t('common.current'), - class: 'label label-success' + class: 'label top-label label-success' }, title: 'current version' }, @@ -372,10 +372,10 @@ describe('App.UpgradeVersionBoxView', function () { 'isUpgrading': false }, expected: { - status: 'CURRENT', - isButton: true, - text: Em.I18n.t('common.revert'), - action: 'confirmRevertPatchUpgrade' + isLabel: true, + text: Em.I18n.t('common.current'), + class: 'label top-label label-success', + canBeReverted: true }, title: 'current patch version' },
