This is an automated email from the ASF dual-hosted git repository. ababiichuk pushed a commit to branch trunk in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push: new c342120 AMBARI-23670 UI Styling Is Incorrect On Upgrade Repositories Page. (ababiichuk) c342120 is described below commit c34212027a41f01e4e292d4c742053c663176639 Author: aBabiichuk <ababiic...@hortonworks.com> AuthorDate: Tue Apr 24 18:11:17 2018 +0300 AMBARI-23670 UI Styling Is Incorrect On Upgrade Repositories Page. (ababiichuk) --- ambari-web/app/styles/stack_versions.less | 73 ++++++++++++-------- .../main/admin/stack_upgrade/upgrade_history.hbs | 8 +-- .../admin/stack_upgrade/upgrade_version_column.hbs | 34 +++++---- .../main/admin/stack_upgrade/versions.hbs | 4 +- .../stack_upgrade/upgrade_version_box_view.js | 80 ++++++++++++---------- .../stack_upgrade/upgrade_version_column_view.js | 9 +++ .../main/admin/stack_upgrade/versions_view.js | 10 ++- 7 files changed, 130 insertions(+), 88 deletions(-) diff --git a/ambari-web/app/styles/stack_versions.less b/ambari-web/app/styles/stack_versions.less index 60950ea..e40484d 100644 --- a/ambari-web/app/styles/stack_versions.less +++ b/ambari-web/app/styles/stack_versions.less @@ -18,6 +18,7 @@ @import 'common.less'; @left-menu-table-z-index: 999; +@left-menu-table-margin-top: 150px; @version-line-height: 20px; #advancedRepoAccordion{ @@ -162,7 +163,10 @@ } .left-menu-table { padding: 10px 0; - margin-top: 142px; + margin-top: @left-menu-table-margin-top; + &.has-special-type-repo-version { + margin-top: @left-menu-table-margin-top + @version-line-height; + } .border-extended-table { width: 100%; position: relative; @@ -269,7 +273,7 @@ } .patch-icon { text-align: center; - color: #ff4500; + color: @health-status-orange; height: @version-line-height; font-size: 14px; margin: 18px 0px -18px 1px; @@ -306,11 +310,16 @@ padding: 5px; margin-bottom: 0; } - .version-column-display-type{ + .version-column-repository-name { + text-align: center; + font-size: 12px; + color: #888; + } + .version-column-display-type { text-align: center; height: @version-line-height; margin-bottom: 0; - color: #ff4500; + color: @health-status-orange; } .version-column-show-details { text-align: center; @@ -326,26 +335,24 @@ margin: 5px 0 15px 0; line-height: @version-line-height; height: 35px; - .label-wrapper{ - display: inline-block; - position: relative; - .label-success { - line-height: 30px; - } - .dropdown-toggle{ - background: none; - height: auto; - padding: 8px 8px; - background: none; - border:none; - outline:none; - box-shadow: none; - position: absolute; - right: 0; - top: 0; - color: #fff; - &:hover, &:active, &:focus{ - color: #fff; + .label-wrapper { + .btn { + cursor: auto; + text-transform: none; + .state-label-text { + cursor: text; + } + &.btn-primary { + background-color: @bootstrap-success; + border-color: @bootstrap-success; + } + &.dropdown-toggle { + cursor: pointer; + padding-right: 8px; + padding-left: 8px; + } + &:active { + box-shadow: none; } } } @@ -814,7 +821,8 @@ } .accordion-group { border-right: none; - padding-left:20px; + padding-left: 20px; + overflow-x: visible; } .accordion-heading { background-color: transparent; @@ -828,12 +836,19 @@ cursor: pointer; } .accordion-body { + width: 400%; min-width: 400px; - .accordion-inner{ - padding-top:20px; - .label{ + .accordion-inner { + padding-top: 20px; + .label { padding: 5px 15px; - &.available{ + &.label-from { + margin-left: 8px; + } + &.label-to { + margin-left: -8px; + } + &.available { background-color: #468847; } } diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs index fce7171..b035524 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/upgrade_history.hbs @@ -78,19 +78,19 @@ <div class="accordion-inner"> {{#each service in item.services}} <div class="row service-version-info"> - <div class="col-xs-4 service-name"> + <div class="col-xs-3 service-name"> {{service.displayName}} </div> <div class="col-xs-3"> - <span class="label available"> + <span class="label label-from available"> {{service.fromVersion}} </span> </div> - <div class="col-xs-2 align-center"> + <div class="col-xs-3 align-center"> <i class="icon-arrow-right"></i> </div> <div class="col-xs-3"> - <span class="label available"> + <span class="label label-to available"> {{service.toVersion}} </span> </div> 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 de0c197..967a3ec 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 @@ -28,17 +28,21 @@ {{/if}} </p> -<p class="version-column-display-type"> - {{#if view.content.isMaint}} - <i class="icon-wrench"></i> {{t common.maint}} - {{/if}} - {{#if view.content.isPatch}} - <i class="icon-bug"></i> {{t common.patch}} - {{/if}} - {{#if view.content.isService}} - <i class="icon-umbrella"></i> {{t common.service}} - {{/if}} -</p> +<p class="version-column-repository-name">({{view.content.repositoryVersion}})</p> + +{{#if view.displayVersionTypeBlock}} + <p class="version-column-display-type"> + {{#if view.content.isMaint}} + <i class="icon-wrench"></i> {{t common.maint}} + {{/if}} + {{#if view.content.isPatch}} + <i class="icon-bug"></i> {{t common.patch}} + {{/if}} + {{#if view.content.isService}} + <i class="icon-umbrella"></i> {{t common.service}} + {{/if}} + </p> +{{/if}} <p class="version-column-show-details"> <a {{action openVersionBoxPopup target="view"}}>{{t admin.stackVersions.version.column.showDetails}}</a> @@ -73,10 +77,12 @@ </div> {{/if}} {{#if view.stateElement.isLabel}} - <div class="label-wrapper"> - <span {{bindAttr class="view.stateElement.class"}}>{{view.stateElement.text}}</span> + <div {{bindAttr class="view.stateElement.canBeReverted:btn-group :label-wrapper"}}> + <button {{bindAttr class="view.stateElement.class"}}> + <span class="state-label-text">{{view.stateElement.text}}</span> + </button> {{#if view.stateElement.canBeReverted}} - <button class="btn dropdown-toggle" data-toggle="dropdown"> + <button {{bindAttr class="view.stateElement.class :dropdown-toggle"}} data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> diff --git a/ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs b/ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs index 47f9a2d..b8c0761 100644 --- a/ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs +++ b/ambari-web/app/templates/main/admin/stack_upgrade/versions.hbs @@ -42,7 +42,7 @@ </div> </div> <div id="versions-section" class="row col-md-12"> - <div class="col-md-3 left-menu-table"> + <div {{bindAttr class=":col-md-3 :left-menu-table view.hasSpecialTypeRepoVersion:has-special-type-repo-version"}}> <table class="table border-extended-table"> <thead> </thead> @@ -60,7 +60,7 @@ <div class="versions-slides-bar"> {{#each version in view.repoVersions}} {{#if version.isVisible}} - {{view App.UpgradeVersionColumnView contentBinding="version"}} + {{view App.UpgradeVersionColumnView contentBinding="version" displayVersionTypeBlockBinding="view.hasSpecialTypeRepoVersion"}} {{/if}} {{/each}} </div> 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 65189f6..a52d3c6 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 @@ -108,48 +108,52 @@ App.UpgradeVersionBoxView = Em.View.extend({ */ content: null, + currentLabelClass: 'label label-success', + /** * map of properties which correspond to particular state of Upgrade version * @type {object} */ - statePropertiesMap: { - 'CURRENT': { - isLabel: true, - text: Em.I18n.t('common.current'), - class: 'label label-success' - }, - 'NOT_REQUIRED': { - isButton: true, - text: Em.I18n.t('admin.stackVersions.version.installNow'), - action: 'installRepoVersionPopup' - }, - 'LOADING': { - isSpinner: true, - class: 'spinner' - }, - 'INSTALLING': { - iconClass: 'glyphicon glyphicon-cog', - isLink: true, - text: Em.I18n.t('hosts.host.stackVersions.status.installing'), - action: 'showProgressPopup' - }, - 'INSTALLED': { - iconClass: 'glyphicon glyphicon-ok', - isButtonGroup: true, - text: Em.I18n.t('common.installed'), - action: null - }, - 'SUSPENDED': { - isButton: true, - text: Em.I18n.t('admin.stackUpgrade.dialog.resume'), - action: 'resumeUpgrade' - }, - 'CURRENT_PATCH': { - isLabel: true, - text: Em.I18n.t('common.current'), - class: 'label label-success' - } - }, + statePropertiesMap: function () { + return { + 'CURRENT': { + isLabel: true, + text: Em.I18n.t('common.current'), + class: this.get('currentLabelClass') + }, + 'NOT_REQUIRED': { + isButton: true, + text: Em.I18n.t('admin.stackVersions.version.installNow'), + action: 'installRepoVersionPopup' + }, + 'LOADING': { + isSpinner: true, + class: 'spinner' + }, + 'INSTALLING': { + iconClass: 'glyphicon glyphicon-cog', + isLink: true, + text: Em.I18n.t('hosts.host.stackVersions.status.installing'), + action: 'showProgressPopup' + }, + 'INSTALLED': { + iconClass: 'glyphicon glyphicon-ok', + isButtonGroup: true, + text: Em.I18n.t('common.installed'), + action: null + }, + 'SUSPENDED': { + isButton: true, + text: Em.I18n.t('admin.stackUpgrade.dialog.resume'), + action: 'resumeUpgrade' + }, + 'CURRENT_PATCH': { + isLabel: true, + text: Em.I18n.t('common.current'), + class: this.get('currentLabelClass') + } + }; + }.property(), /** * object that describes how content should be displayed 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 d775c27..778b7f5 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 @@ -23,6 +23,15 @@ App.UpgradeVersionColumnView = App.UpgradeVersionBoxView.extend({ isVersionColumnView: true, classNames: ['version-column', 'col-md-4'], + /** + * Indicates whether block for version type should be displayed. + * True if any of available versions is of PATCH, MAINT or SERVICE type + * @type {Boolean} + */ + displayVersionTypeBlock: false, + + currentLabelClass: 'btn btn-primary', + didInsertElement: function () { App.tooltip($('.out-of-sync-badge'), {title: Em.I18n.t('hosts.host.stackVersions.status.out_of_sync')}); App.tooltip($('.not-upgradable')); diff --git a/ambari-web/app/views/main/admin/stack_upgrade/versions_view.js b/ambari-web/app/views/main/admin/stack_upgrade/versions_view.js index 3899bb1..83203bb 100644 --- a/ambari-web/app/views/main/admin/stack_upgrade/versions_view.js +++ b/ambari-web/app/views/main/admin/stack_upgrade/versions_view.js @@ -126,7 +126,15 @@ App.MainAdminStackVersionsView = Em.View.extend({ * @type {Em.Array} */ repoVersions: App.RepositoryVersion.find(), - + + hasMaintRepoVersion: Em.computed.someBy('repoVersions', 'isMaint', true), + + hasPatchRepoVersion: Em.computed.someBy('repoVersions', 'isPatch', true), + + hasServiceRepoVersion: Em.computed.someBy('repoVersions', 'isService', true), + + hasSpecialTypeRepoVersion: Em.computed.or('hasMaintRepoVersion', 'hasPatchRepoVersion', 'hasServiceRepoVersion'), + /** * @type {Em.Array} */ -- To stop receiving notification emails like this one, please contact ababiic...@apache.org.