You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by at...@apache.org on 2018/05/17 16:13:22 UTC
[ambari] branch trunk updated: AMBARI-23880 Install Wizard: fix
markup issues
This is an automated email from the ASF dual-hosted git repository.
atkach 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 69150f7 AMBARI-23880 Install Wizard: fix markup issues
69150f7 is described below
commit 69150f7ff7ae90cfb220624b7a72777fdac2fc32
Author: Andrii Tkach <at...@apache.org>
AuthorDate: Thu May 17 17:24:03 2018 +0300
AMBARI-23880 Install Wizard: fix markup issues
---
.../app/controllers/wizard/step7_controller.js | 2 +-
.../app/controllers/wizard/step8_controller.js | 2 +-
ambari-web/app/messages.js | 1 +
ambari-web/app/styles/application.less | 2 +-
ambari-web/app/styles/wizard.less | 49 +++++++++++++++-----
.../templates/common/configs/services_config.hbs | 54 +++++++++++-----------
ambari-web/app/templates/wizard/step3.hbs | 4 ++
ambari-web/app/templates/wizard/step6.hbs | 12 ++---
.../app/templates/wizard/step7/directories_tab.hbs | 2 +-
ambari-web/app/templates/wizard/step9.hbs | 10 ++--
.../app/views/common/configs/services_config.js | 30 ++++++++++++
ambari-web/app/views/wizard/step6_view.js | 10 ++++
12 files changed, 123 insertions(+), 55 deletions(-)
diff --git a/ambari-web/app/controllers/wizard/step7_controller.js b/ambari-web/app/controllers/wizard/step7_controller.js
index 8c52163..c408e7c 100644
--- a/ambari-web/app/controllers/wizard/step7_controller.js
+++ b/ambari-web/app/controllers/wizard/step7_controller.js
@@ -2071,7 +2071,7 @@ App.WizardStep7Controller = Em.Controller.extend(App.ServerValidatorMixin, App.E
var validations = this.get('stepConfigs').mapProperty('configsWithErrors.length').reduce(Em.sum, 0);
var configErrorList = this.get('configErrorList');
this.set('issuesCounter', recommendations + validations + configErrorList.get('issues.length') + configErrorList.get('criticalIssues.length'));
- if (validations > this.get('validationsCounter')) {
+ if (validations !== this.get('validationsCounter')) {
this.ringBell();
}
this.set('hasErrors', !!validations);
diff --git a/ambari-web/app/controllers/wizard/step8_controller.js b/ambari-web/app/controllers/wizard/step8_controller.js
index afba6bd..578c337 100644
--- a/ambari-web/app/controllers/wizard/step8_controller.js
+++ b/ambari-web/app/controllers/wizard/step8_controller.js
@@ -1709,7 +1709,7 @@ App.WizardStep8Controller = Em.Controller.extend(App.AddSecurityConfigs, App.wiz
showLoadingIndicator: function () {
return App.ModalPopup.show({
- header: '',
+ header: Em.I18n.t('installer.step8.deployPopup.header'),
showFooter: false,
diff --git a/ambari-web/app/messages.js b/ambari-web/app/messages.js
index 532766c..e38c522 100644
--- a/ambari-web/app/messages.js
+++ b/ambari-web/app/messages.js
@@ -1021,6 +1021,7 @@ Em.I18n.translations = {
'installer.step8.kerberors.warning': '<strong>Because Kerberos has been manually installed on the cluster, you will have to create/distribute principals and keytabs when this operation is finished.</strong>',
'installer.step8.generateBlueprint.popup.msg': 'You will be <b>downloading</b> blueprint.json and clustertemplate.json to your local machine. <br/><br/> You can use them to deploy a cluster via AMBARI REST API. <br/> Update clustertemplate.json with a custom cluster name if you do not want to use name <b>{0}</b>. <br/><br/>If you want to use custom repo URLs, make sure to update them via Ambari REST API before deploying the cluster.',
'installer.step8.deployPopup.message':'Preparing to Deploy: {0} of {1} tasks completed.',
+ 'installer.step8.deployPopup.header':'Initializing Tasks',
'installer.step8.hosts':' hosts',
'installer.step8.host':' host',
'installer.step8.other':'and {0} other hosts',
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 0c6d524..c54f5e1 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -378,7 +378,7 @@ footer {
}
.badge-warning {
- background-color: #e98a41!important;
+ background-color: #666 !important;
}
table.diff {
diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less
index d0308e9..3be7652 100644
--- a/ambari-web/app/styles/wizard.less
+++ b/ambari-web/app/styles/wizard.less
@@ -123,6 +123,9 @@
.compact-panel-heading {
padding: 10px;
+ .button-section {
+ min-height: 34px;
+ }
}
.hosts-panel {
padding-left: 0;
@@ -189,7 +192,10 @@
}
#confirm-hosts-table {
th:first-of-type {
- width: 25px;
+ width: 20px;
+ label {
+ top: 2px;
+ }
}
th:nth-of-type(2) {
width: 42%;
@@ -215,10 +221,8 @@
#display-action {
visibility:visible;
}
- .step3-table-checkbox {
- label {
- top: 1px;
- }
+ .step3-table-checkbox label {
+ top: 1px;
}
}
#warningsSection {
@@ -250,10 +254,10 @@
max-height: 440px;
position: relative;
display: flex;
- overflow-y: scroll;
+ overflow-y: auto;
#component_assign_table {
display: inline-block;
- overflow-x: scroll;
+ overflow-x: auto;
margin-left: 190px;
margin-bottom: 10px;
height: 100%;
@@ -275,11 +279,11 @@
.host-component-checkbox {
line-height: 17px;
font-size: 12px;
- top: 0px;
+ top: 0;
}
.freeze {
position: absolute;
- left: 0px;
+ left: 0;
width: 210px;
border-top-color: #eee;
border-bottom: 1px solid #eee;
@@ -294,7 +298,7 @@
}
.static-pagination {
position: absolute;
- right: 0px;
+ right: 10px;
}
}
}
@@ -321,6 +325,23 @@
table {
margin-bottom: 0;
}
+ .overall-progress {
+ margin-top: 10px;
+ .progress {
+ margin-bottom: 0;
+ width: calc(~"100% - 100px");
+ display: inline-block;
+ }
+ .progress-message {
+ display: inline-block;
+ vertical-align: top;
+ float: right;
+ line-height: 20px;
+ }
+ }
+ .panel.panel-default {
+ margin-top: 0;
+ }
#host-filter {
margin-top: 1px;
ul {
@@ -939,7 +960,8 @@
}
}
-#directories {
+.one-row-tabs-container {
+ padding: 5px 10px;
.left-arrow, .right-arrow {
float: left;
text-align: center;
@@ -959,6 +981,9 @@
}
overflow: hidden;
}
+}
+
+#directories {
.config-actions {
margin-right: 10px;
}
@@ -1138,7 +1163,7 @@
color: #B94A48;
}
&.warning {
- color: #e98a41;
+ color: #666;
}
&.animated {
-webkit-animation: ring 2s ease;
diff --git a/ambari-web/app/templates/common/configs/services_config.hbs b/ambari-web/app/templates/common/configs/services_config.hbs
index 044cbca..b578191 100644
--- a/ambari-web/app/templates/common/configs/services_config.hbs
+++ b/ambari-web/app/templates/common/configs/services_config.hbs
@@ -16,30 +16,32 @@
* limitations under the License.
}}
{{#if controller.isInstallWizard}}
- <span class="service-name">{{t common.service}} </span>
- <span class="btn-group">
- <button class="btn btn-default dropdown-toggle first select-service-dropdown" data-toggle="dropdown">
- {{controller.selectedService.displayName}}
- {{#if selectedService.configsWithErrors.length}}
- <span class="badge badge-important">{{selectedService.configsWithErrors.length}}</span>
- {{/if}}
- </button>
- <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </button>
- <ul class="dropdown-menu">
- {{#each service in controller.stepConfigs}}
- <li>
- <a href="#" {{action selectService service target="controller"}}>
- {{service.displayName}}
- {{#if service.configsWithErrors.length}}
- <span class="badge badge-important">{{service.configsWithErrors.length}}</span>
- {{/if}}
- </a>
- </li>
- {{/each}}
- </ul>
- </span>
+ <div class="row one-row-tabs-container">
+ <div class="left-arrow">
+ <a href="#"{{bindAttr class="view.isLeftArrowDisabled:disabled"}} {{action "scrollTabsLeft" target="view"}}> <i class="icon-angle-left"></i>
+ </a>
+ </div>
+ <div class="tabs-container">
+ <ul class="nav nav-tabs mbm">
+ {{#each tab in controller.stepConfigs}}
+ <li rel='tooltip' {{bindAttr class="tab.isActive:active" data-original-title="tab.tooltipMsg"}}>
+ <a href="#" {{action selectService tab target="controller"}} {{bindAttr data-target="tab.headingClass"}}
+ data-toggle="tab">
+ {{formatRole tab.serviceName}}
+ {{#if tab.errorsCount}}
+ <span class="badge badge-important">{{tab.errorsCount}}</span>
+ {{/if}}
+ </a>
+ </li>
+ {{/each}}
+ </ul>
+ </div>
+ <div class="right-arrow">
+ <a href="#" {{bindAttr class="view.isRightArrowDisabled:disabled"}} {{action "scrollTabsRight" target="view"}}>
+ <i class="icon-angle-right"></i>
+ </a>
+ </div>
+ </div>
{{else}}
{{#if controller.isRecommendedLoaded}}
<ul class="nav nav-tabs" {{QAAttr "config-tabs"}}>
@@ -60,7 +62,7 @@
{{/if}}
{{#if controller.isInstallWizard}}
{{#if issuesCounter}}
- <span class="notifications-group pull-right">
+ <div class="notifications-group align-right">
<span class="alerts-label dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="issues-bell" {{bindAttr class=":glyphicon :glyphicon-bell controller.hasErrors:important:warning"}}></span>
<span id="issues-counter" {{bindAttr class=":badge controller.hasErrors:badge-important:badge-warning"}}>
@@ -73,7 +75,7 @@
{{view App.DependentConfigsListView recommendationsBinding="controller.recommendations" requiredChangesBinding="controller.requiredChanges"}}
</div>
</div>
- </span>
+ </div>
{{/if}}
{{/if}}
{{#if hasChangedDependencies}}
diff --git a/ambari-web/app/templates/wizard/step3.hbs b/ambari-web/app/templates/wizard/step3.hbs
index 6b32c6f..5290845 100644
--- a/ambari-web/app/templates/wizard/step3.hbs
+++ b/ambari-web/app/templates/wizard/step3.hbs
@@ -71,6 +71,8 @@
<th {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.status}}</th>
<!-- given by the parsing function that parses data from bootstrap call, dynamically assign the color -->
<th {{QAAttr "confirm-hosts-table-heading-cell"}}>{{t common.action}}</th>
+ <!-- empty th to contain extra space of table -->
+ <th></th>
<!-- trash icon -->
<!-- retry icon -->
</tr>
@@ -103,6 +105,8 @@
<i class="glyphicon glyphicon-trash" {{translateAttr title="common.remove"}}></i>
</a>
</td>
+ <!-- empty td to contain extra space of table -->
+ <td></td>
{{/view}}
{{/each}}
{{else}}
diff --git a/ambari-web/app/templates/wizard/step6.hbs b/ambari-web/app/templates/wizard/step6.hbs
index 8071e10..9673abd 100644
--- a/ambari-web/app/templates/wizard/step6.hbs
+++ b/ambari-web/app/templates/wizard/step6.hbs
@@ -68,13 +68,11 @@
<tbody>
{{#each host in view.pageContent}}
<tr {{QAAttr "host-row"}} {{bindAttr class="host.isLast:last-row"}}>
- {{#view App.WizardStep6HostView hostBinding="host" }}
- <div class="checkbox">
- <span class="trim_hostname">{{host.hostName}}</span>
- {{#if host.hasMaster}}
- <i {{QAAttr "has-masters"}} class="glyphicon glyphicon-asterisks">✵</i>
- {{/if}}
- </div>
+ {{#view App.WizardStep6HostView hostBinding="host" }}
+ <span class="trim_hostname">{{host.hostName}}</span>
+ {{#if host.hasMaster}}
+ <i {{QAAttr "has-masters"}} class="glyphicon glyphicon-asterisks">✵</i>
+ {{/if}}
{{/view}}
{{#each checkbox in host.checkboxes}}
<td {{QAAttr "toggle-component"}} {{bindAttr class="checkbox.hasErrorMessage:error checkbox.hasWarnMessage:warning checkbox.component"}}>
diff --git a/ambari-web/app/templates/wizard/step7/directories_tab.hbs b/ambari-web/app/templates/wizard/step7/directories_tab.hbs
index 70fb8d3..a58c741 100644
--- a/ambari-web/app/templates/wizard/step7/directories_tab.hbs
+++ b/ambari-web/app/templates/wizard/step7/directories_tab.hbs
@@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
}}
-<div class="row" style="padding: 5px 10px;">
+<div class="row one-row-tabs-container">
<div class="left-arrow">
<a href="#"{{bindAttr class="view.isLeftArrowDisabled:disabled"}} {{action "scrollTabsLeft" target="view"}}> <i class="icon-angle-left"></i>
</a>
diff --git a/ambari-web/app/templates/wizard/step9.hbs b/ambari-web/app/templates/wizard/step9.hbs
index ba13c2c..2eb005a 100644
--- a/ambari-web/app/templates/wizard/step9.hbs
+++ b/ambari-web/app/templates/wizard/step9.hbs
@@ -22,14 +22,12 @@
<div class="panel panel-default">
<div class="panel-body">
- <div class="row" {{QAAttr "overall-progress"}}>
- <div class="col-md-10">
- <div class="progress" {{QAAttr "progress-{status}"}}>
- <div {{bindAttr class="view.isStepCompleted::progress-bar-striped view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr style="view.barWidth"}} {{QAAttr "progress-bar-{progress}"}}>
- </div>
+ <div class="overall-progress" {{QAAttr "overall-progress"}}>
+ <div class="progress" {{QAAttr "progress-{status}"}}>
+ <div {{bindAttr class="view.isStepCompleted::progress-bar-striped view.isStepCompleted::active view.barColor :progress-bar"}} {{bindAttr style="view.barWidth"}} {{QAAttr "progress-bar-{progress}"}}>
</div>
</div>
- <div class="col-md-2" {{QAAttr "progress-message"}}>{{view.progressMessage}}</div>
+ <div {{QAAttr "progress-message"}} class="progress-message">{{view.progressMessage}}</div>
</div>
<div class="panel panel-default panel-internal install-retry-panel">
diff --git a/ambari-web/app/views/common/configs/services_config.js b/ambari-web/app/views/common/configs/services_config.js
index 7d1ea5a..5d88a77 100644
--- a/ambari-web/app/views/common/configs/services_config.js
+++ b/ambari-web/app/views/common/configs/services_config.js
@@ -29,8 +29,38 @@ App.ServicesConfigView = Em.View.extend({
this.get('controller').loadStep();
} else {
this.get('controller').selectProperService();
+ this.set('controller.selectedService.isActive', true);
this.get('controller').selectedServiceObserver();
}
+ },
+
+ getScrollInterval: function () {
+ var INTERVAL = 300;
+ var container = $(this.get('element')).find('.tabs-container');
+ var content = container.find('ul');
+ var gap = content.width() - container.width();
+ var gapLeft = gap%INTERVAL;
+ var totalScrollsNamber = Math.floor(gap/INTERVAL) || 1;
+ return INTERVAL + Math.round(gapLeft/totalScrollsNamber) + 1;
+ },
+
+ scrollTabsLeft: function () {
+ if (!this.get('isLeftArrowDisabled')) this.scrollTabs('left');
+ },
+
+ scrollTabsRight: function () {
+ if (!this.get('isRightArrowDisabled')) this.scrollTabs('right');
+ },
+
+ scrollTabs: function (dir) {
+ var container = $(this.get('element')).find('.tabs-container');
+ var content = container.find('ul');
+ var interval = this.getScrollInterval();
+ this.set('isLeftArrowDisabled', dir === 'left' && interval >= container.scrollLeft());
+ this.set('isRightArrowDisabled', dir === 'right' && content.width() - container.width() <= container.scrollLeft() + interval);
+ container.animate({
+ scrollLeft: (dir === 'left' ? '-' : '+') + '=' + interval + 'px'
+ });
}
});
diff --git a/ambari-web/app/views/wizard/step6_view.js b/ambari-web/app/views/wizard/step6_view.js
index fdd0777..8810c49 100644
--- a/ambari-web/app/views/wizard/step6_view.js
+++ b/ambari-web/app/views/wizard/step6_view.js
@@ -50,6 +50,16 @@ App.WizardStep6View = App.TableView.extend({
didInsertElement: function () {
this.setLabel();
this.get('controller').loadStep();
+ Em.run.next(this, this.adjustColumnWidth);
+ },
+
+ adjustColumnWidth: function() {
+ const table = $('#component_assign_table');
+ const columnsCount = this.get('controller.headers.length');
+ if (table.width() > table.find('tbody').width()) {
+ const columnWidth = Math.floor(table.width() / columnsCount);
+ table.find("th:not('.freeze'), td:not('.freeze')").width(columnWidth);
+ }
},
/**
--
To stop receiving notification emails like this one, please contact
atkach@apache.org.