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/07 09:54:01 UTC
[ambari] branch trunk updated: AMBARI-23760 Dropdowns in Host
Details Page do not conform to the new UI
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 dc078be AMBARI-23760 Dropdowns in Host Details Page do not conform to the new UI
dc078be is described below
commit dc078be307e91271d44e29382015b3644ddf1b8f
Author: Andrii Tkach <at...@apache.org>
AuthorDate: Fri May 4 13:59:55 2018 +0300
AMBARI-23760 Dropdowns in Host Details Page do not conform to the new UI
---
.../main/service/configs/config_overridable.js | 1 +
ambari-web/app/styles/alerts.less | 10 ++------
ambari-web/app/styles/application.less | 14 +++++++++++
ambari-web/app/styles/config_versions_control.less | 6 +++++
ambari-web/app/styles/hosts.less | 27 ++++++++++++++++++----
ambari-web/app/styles/service_configurations.less | 9 ++++++++
ambari-web/app/styles/wizard.less | 13 -----------
.../templates/common/configs/service_config.hbs | 2 +-
ambari-web/app/templates/common/form/dropdown.hbs | 4 ++--
ambari-web/app/templates/main/host/host_alerts.hbs | 2 +-
.../config_launch_switch_config_group_of_host.hbs | 12 ++++------
.../views/common/assign_master_components_view.js | 2 ++
ambari-web/app/views/common/filter_view.js | 20 ++++++++--------
ambari-web/app/views/common/form/dropdown.js | 8 +++++++
.../views/main/alerts/definition_details_view.js | 2 +-
15 files changed, 84 insertions(+), 48 deletions(-)
diff --git a/ambari-web/app/mixins/main/service/configs/config_overridable.js b/ambari-web/app/mixins/main/service/configs/config_overridable.js
index 0e8b7ee..dcdda60 100644
--- a/ambari-web/app/mixins/main/service/configs/config_overridable.js
+++ b/ambari-web/app/mixins/main/service/configs/config_overridable.js
@@ -370,6 +370,7 @@ App.ConfigOverridable = Em.Mixin.create({
launchSwitchConfigGroupOfHostDialog: function (selectedGroup, configGroups, hostName, callback) {
var self = this;
return App.ModalPopup.show({
+ classNames: ['change-config-group-modal'],
header: Em.I18n.t('config.group.host.switch.dialog.title'),
configGroups: configGroups,
selectedConfigGroup: selectedGroup,
diff --git a/ambari-web/app/styles/alerts.less b/ambari-web/app/styles/alerts.less
index 5c7bd12..a3fdf6d 100644
--- a/ambari-web/app/styles/alerts.less
+++ b/ambari-web/app/styles/alerts.less
@@ -169,7 +169,7 @@
.col0,
td:first-child,
th:first-child {
- width: 10%;
+ width: 13%;
}
.col1,
@@ -181,7 +181,7 @@
.col2,
td:first-child + td + td,
th:first-child + th + th {
- width: 23%;
+ width: 20%;
}
.col3,
@@ -280,9 +280,6 @@
td:first-child,
th:first-child {
width: 15%;
- .filter-input-width {
- width: 80%;
- }
}
.col1,
@@ -298,9 +295,6 @@
td:first-child + td + td,
th:first-child + th + th {
width: 20%;
- .filter-input-width {
- width: inherit;
- }
}
.col3,
td:first-child + td + td + td,
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index 7ea0f2e..7f21e1c 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -2493,6 +2493,20 @@ a.abort-icon:hover {
}
}
+.dropdown-select {
+ .btn, .btn:focus {
+ padding: 10px;
+ width: 100%;
+ text-align: left;
+ .selected-item {
+ width: calc(~"100% - 20px");
+ .ellipsis-overflow;
+ margin-right: 10px;
+ float: left;
+ }
+ }
+}
+
.clock-view {
bottom: 10px;
right: 4px;
diff --git a/ambari-web/app/styles/config_versions_control.less b/ambari-web/app/styles/config_versions_control.less
index 9ed84c8..9150003 100644
--- a/ambari-web/app/styles/config_versions_control.less
+++ b/ambari-web/app/styles/config_versions_control.less
@@ -98,6 +98,12 @@
}
}
+.host-configs {
+ .config-layout {
+ margin-bottom: 10px;
+ }
+}
+
.config-manage-nav {
.config-groups-dropdown {
display: inline-block;
diff --git a/ambari-web/app/styles/hosts.less b/ambari-web/app/styles/hosts.less
index 40b10de..8842f7b 100644
--- a/ambari-web/app/styles/hosts.less
+++ b/ambari-web/app/styles/hosts.less
@@ -432,11 +432,6 @@
font-size: 16px;
}
- .logs-tab-content {
- a.external-link {
- font-size: @smaller-font-size;
- }
- }
.host-stack-version-status {
.label {
font-size: 14px;
@@ -444,12 +439,34 @@
}
.logs-tab-content {
+ padding: 0 10px;
+ background-color: #ffffff;
+ a.external-link {
+ font-size: @smaller-font-size;
+ }
.table {
table-layout: auto;
+ td:first-child,
+ th:first-child {
+ width: 20%;
+ }
+ td:first-child + td,
+ th:first-child + th {
+ width: 30%;
+ }
+ td:first-child + td + td,
+ th:first-child + th + th {
+ width: 50%;
+ }
}
}
}
+#host-alerts {
+ padding: 0 10px;
+ background-color: #ffffff;
+}
+
@media all and (max-width: 2560px) {
#hosts {
.table {
diff --git a/ambari-web/app/styles/service_configurations.less b/ambari-web/app/styles/service_configurations.less
index 8d7989c..6f36bf8 100644
--- a/ambari-web/app/styles/service_configurations.less
+++ b/ambari-web/app/styles/service_configurations.less
@@ -361,3 +361,12 @@
padding: 0;
}
}
+
+.change-config-group-modal {
+ .modal-body {
+ overflow-y: visible;
+ .dropdown-select {
+ min-width: 120px;
+ }
+ }
+}
diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less
index 8fe9de8..74e596a 100644
--- a/ambari-web/app/styles/wizard.less
+++ b/ambari-web/app/styles/wizard.less
@@ -489,19 +489,6 @@
.hosts-dropdown {
padding-left: 10px;
}
- .dropdown {
- button {
- width: 100%;
- text-align: left;
- padding: 10px;
- .selected-item {
- .ellipsis-overflow;
- width: 95%;
- margin-right: 5px;
- float: left;
- }
- }
- }
.assign-masters-controls {
padding-left: 30px;
div {
diff --git a/ambari-web/app/templates/common/configs/service_config.hbs b/ambari-web/app/templates/common/configs/service_config.hbs
index 29f07dd..ad74cfd 100644
--- a/ambari-web/app/templates/common/configs/service_config.hbs
+++ b/ambari-web/app/templates/common/configs/service_config.hbs
@@ -47,7 +47,7 @@
{{/if}}
-<div>
+<div class="config-layout clearfix">
<div class="mbm">
{{#if view.isOnTheServicePage}}
{{#if allVersionsLoaded}}
diff --git a/ambari-web/app/templates/common/form/dropdown.hbs b/ambari-web/app/templates/common/form/dropdown.hbs
index 129925b..8f5bd85 100644
--- a/ambari-web/app/templates/common/form/dropdown.hbs
+++ b/ambari-web/app/templates/common/form/dropdown.hbs
@@ -16,10 +16,10 @@
* limitations under the License.
}}
-<div class="dropdown" {{QAAttr "select-host-for-component"}}>
+<div class="dropdown dropdown-select" {{QAAttr "{view.qaAttr}"}}>
<button {{bindAttr class=":btn :btn-default :dropdown-toggle view.disabled:disabled"}} type="button" data-toggle="dropdown">
+ <span class="caret pull-caret-right"></span>
{{view App.DropdownOptionView optionBinding="view.selection" optionLabelPathBinding="view.optionLabelPath" class="selected-item"}}
- <span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{#each option in view.content}}
diff --git a/ambari-web/app/templates/main/host/host_alerts.hbs b/ambari-web/app/templates/main/host/host_alerts.hbs
index 2b02388..6d6eb51 100644
--- a/ambari-web/app/templates/main/host/host_alerts.hbs
+++ b/ambari-web/app/templates/main/host/host_alerts.hbs
@@ -16,7 +16,7 @@
* limitations under the License.
}}
-<div id="alerts">
+<div id="host-alerts">
<div class="row">
<div class="col-md-12">
<h2 class="table-title">{{t hosts.host.alerts.label}}</h2>
diff --git a/ambari-web/app/templates/utils/config_launch_switch_config_group_of_host.hbs b/ambari-web/app/templates/utils/config_launch_switch_config_group_of_host.hbs
index 4320f04..09bad62 100644
--- a/ambari-web/app/templates/utils/config_launch_switch_config_group_of_host.hbs
+++ b/ambari-web/app/templates/utils/config_launch_switch_config_group_of_host.hbs
@@ -17,11 +17,9 @@
}}
<span>{{t installer.controls.slaveComponentGroups}}: </span>
-<div class="display-inline-block">
- {{view Em.Select
- contentBinding="view.parentView.configGroups"
- optionLabelPath="content.displayName"
- selectionBinding="view.parentView.selectedConfigGroup"
- class="form-control"}}
-</div>
+{{view App.DropdownView
+ contentBinding="view.parentView.configGroups"
+ optionLabelPath="displayName"
+ selectionBinding="view.parentView.selectedConfigGroup"
+ class="display-inline-block" }}
diff --git a/ambari-web/app/views/common/assign_master_components_view.js b/ambari-web/app/views/common/assign_master_components_view.js
index 0217aae..50e58e3 100644
--- a/ambari-web/app/views/common/assign_master_components_view.js
+++ b/ambari-web/app/views/common/assign_master_components_view.js
@@ -131,6 +131,8 @@ App.InputHostView = Em.TextField.extend(App.SelectHost, {
App.SelectHostView = App.DropdownView.extend(App.SelectHost, {
+ qaAttr: 'select-host-for-component',
+
didInsertElement: function () {
this.initContent();
this.set("value", this.get("component.selectedHost"));
diff --git a/ambari-web/app/views/common/filter_view.js b/ambari-web/app/views/common/filter_view.js
index 8110d80..0dbfab7 100644
--- a/ambari-web/app/views/common/filter_view.js
+++ b/ambari-web/app/views/common/filter_view.js
@@ -296,13 +296,14 @@ var componentFieldView = Ember.View.extend({
/**
* Simple select control for wrapperView
*/
-var selectFieldView = Ember.Select.extend({
- classNames: ['input-sm', 'form-control'],
- selectionBinding: 'parentView.selected',
- contentBinding: 'parentView.content',
- optionValuePath: "content.value",
- optionLabelPath: "content.label"
-});
+var getSelectFieldView = function() {
+ return App.DropdownView.extend({
+ selectionBinding: 'parentView.selected',
+ contentBinding: 'parentView.content',
+ optionValuePath: "value",
+ optionLabelPath: "label"
+ });
+};
/**
* Result object, which will be accessible outside
@@ -318,7 +319,6 @@ module.exports = {
* And also controls views if need it
*/
textFieldView: textFieldView,
- selectFieldView: selectFieldView,
componentFieldView: componentFieldView,
/**
@@ -357,8 +357,8 @@ module.exports = {
*/
createSelectView: function (config) {
config.fieldType = config.fieldType || 'input-medium';
- config.filterView = selectFieldView.extend({
- classNames: config.fieldType.split(','),
+ config.filterView = getSelectFieldView().extend({
+ classNames: config.fieldType.split(',').concat('display-inline-block'),
attributeBindings: ['disabled', 'multiple'],
disabled: false
});
diff --git a/ambari-web/app/views/common/form/dropdown.js b/ambari-web/app/views/common/form/dropdown.js
index 648905d..ef6cd12 100644
--- a/ambari-web/app/views/common/form/dropdown.js
+++ b/ambari-web/app/views/common/form/dropdown.js
@@ -22,6 +22,8 @@ App.DropdownView = Em.View.extend({
templateName: require('templates/common/form/dropdown'),
+ qaAttr: '',
+
selection: null,
value: '',
@@ -38,6 +40,10 @@ App.DropdownView = Em.View.extend({
change: Em.K,
+ didInsertElement: function() {
+ this.observeEmptySelection();
+ },
+
/**
* value should be updated after updating selection and vise versa
*/
@@ -71,6 +77,8 @@ App.DropdownView = Em.View.extend({
App.DropdownOptionView = Em.View.extend({
+ tagName: 'span',
+
template: Em.Handlebars.compile('{{view.optionLabel}}'),
optionLabel: function () {
diff --git a/ambari-web/app/views/main/alerts/definition_details_view.js b/ambari-web/app/views/main/alerts/definition_details_view.js
index 68d7ea4..0469a34 100644
--- a/ambari-web/app/views/main/alerts/definition_details_view.js
+++ b/ambari-web/app/views/main/alerts/definition_details_view.js
@@ -156,7 +156,7 @@ App.MainAlertDefinitionDetailsView = App.TableView.extend({
*/
serviceFilterView: filters.createSelectView({
column: 0,
- fieldType: 'input-sm',
+ fieldType: 'filter-input-width',
content: filters.getComputedServicesList(),
onChangeValue: function () {
this.get('parentView').updateFilter(this.get('column'), this.get('value'), 'select');
--
To stop receiving notification emails like this one, please contact
atkach@apache.org.