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.
