AMBARI-20082. Wizard 'Assign Master ' step is showing inconsistent Select view (akovalenko)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/ece4d36c Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/ece4d36c Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/ece4d36c Branch: refs/heads/branch-feature-AMBARI-20053 Commit: ece4d36cb32a0a4b60025e9d54ba4131105a794b Parents: 6feb46a Author: Aleksandr Kovalenko <akovale...@hortonworks.com> Authored: Mon Feb 20 14:44:38 2017 +0200 Committer: Aleksandr Kovalenko <akovale...@hortonworks.com> Committed: Mon Feb 20 15:42:13 2017 +0200 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 8 +- ambari-web/app/styles/wizard.less | 8 ++ .../common/assign_master_components.hbs | 5 +- .../app/templates/common/form/dropdown.hbs | 29 +++++++ ambari-web/app/views.js | 1 + .../common/assign_master_components_view.js | 5 +- ambari-web/app/views/common/form/dropdown.js | 84 ++++++++++++++++++++ 7 files changed, 133 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index aa8f075..686b28b 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -2637,4 +2637,10 @@ table.table.inner-table { a.abort-icon:hover { text-decoration: none; -} \ No newline at end of file +} + +.dropdown { + button .selected-item { + text-transform: none; + } +} http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/styles/wizard.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less index 579b21b..3855c9a 100644 --- a/ambari-web/app/styles/wizard.less +++ b/ambari-web/app/styles/wizard.less @@ -410,6 +410,14 @@ height: 100px; color: #ccc; } + .dropdown { + button .selected-item { + width: 95%; + margin-right: 5px; + float: left; + overflow: hidden; + } + } } label.host-name { http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/templates/common/assign_master_components.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/assign_master_components.hbs b/ambari-web/app/templates/common/assign_master_components.hbs index a0a4990..d5eaf75 100644 --- a/ambari-web/app/templates/common/assign_master_components.hbs +++ b/ambari-web/app/templates/common/assign_master_components.hbs @@ -89,8 +89,9 @@ {{view App.SelectHostView componentBinding="this" disabledBinding="isInstalled" - optionValuePath="content.host_name" - optionLabelPath="content.host_info" }} + contentBinding="content" + optionValuePath="host_name" + optionLabelPath="host_info" }} {{/if}} <span rel="popover" title="Warning" {{bindAttr data-content="warnMessage"}}> {{#if warnMessage}} http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/templates/common/form/dropdown.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/common/form/dropdown.hbs b/ambari-web/app/templates/common/form/dropdown.hbs new file mode 100644 index 0000000..605389a --- /dev/null +++ b/ambari-web/app/templates/common/form/dropdown.hbs @@ -0,0 +1,29 @@ +{{! +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +}} + +<div class="dropdown"> + <button {{bindAttr class=":btn :btn-default :dropdown-toggle view.disabled:disabled"}} type="button" data-toggle="dropdown"> + {{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}} + <li><a href="#" {{action "selectOption" option target="view"}}>{{view App.DropdownOptionView optionBinding="option" optionLabelPathBinding="view.optionLabelPath"}}</a></li> + {{/each}} + </ul> +</div> http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/views.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views.js b/ambari-web/app/views.js index 6972d2a..d7df2ac 100644 --- a/ambari-web/app/views.js +++ b/ambari-web/app/views.js @@ -60,6 +60,7 @@ require('views/common/form/field'); require('views/common/form/datepicker_view'); require('views/common/form/spinner_input_view'); require('views/common/form/manage_credentials_form_view'); +require('views/common/form/dropdown'); require('views/common/quick_view_link_view'); require('views/common/configs/services_config'); require('views/common/configs/service_config_container_view'); http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/views/common/assign_master_components_view.js ---------------------------------------------------------------------- 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 4646cf0..73654c7 100644 --- a/ambari-web/app/views/common/assign_master_components_view.js +++ b/ambari-web/app/views/common/assign_master_components_view.js @@ -127,10 +127,7 @@ App.InputHostView = Em.TextField.extend(App.SelectHost, { }); -App.SelectHostView = Em.Select.extend(App.SelectHost, { - - classNames: ['form-control'], - attributeBindings: ['disabled'], +App.SelectHostView = App.DropdownView.extend(App.SelectHost, { didInsertElement: function () { this.initContent(); http://git-wip-us.apache.org/repos/asf/ambari/blob/ece4d36c/ambari-web/app/views/common/form/dropdown.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/common/form/dropdown.js b/ambari-web/app/views/common/form/dropdown.js new file mode 100644 index 0000000..2e751b7 --- /dev/null +++ b/ambari-web/app/views/common/form/dropdown.js @@ -0,0 +1,84 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var App = require('app'); + +App.DropdownView = Em.View.extend({ + + templateName: require('templates/common/form/dropdown'), + + selection: null, + + value: '', + + optionValuePath: '', + + optionLabelPath: '', + + /** + * Used to prevent infinite loop because of cyclic updating of value and selection + * @type {Boolean} + */ + isUpdating: false, + + change: Em.K, + + /** + * value should be updated after updating selection and vise versa + */ + onValueOrSelectionUpdate: function (context, property) { + var selection = this.get('selection'); + var value = this.get('value'); + var content = this.get('content'); + var optionValuePath = this.get('optionValuePath'); + this.set('isUpdating', true); + if (property === 'value') { + this.set('selection', optionValuePath ? content.findProperty(optionValuePath, value) : value); + } else if (property === 'selection') { + this.set('value', Em.getWithDefault(selection, optionValuePath, selection) || ''); + } + this.set('isUpdating', false); + }.observes('selection', 'value'), + + selectOption: function (option) { + this.set('selection', option.context); + this.change(); + }, + + /** + * Set default selection + */ + observeEmptySelection: function () { + if (this.get('content.length') && !this.get('selection')) this.set('selection', this.get('content')[0]); + }.observes('content') + +}); + +App.DropdownOptionView = Em.View.extend({ + + template: Em.Handlebars.compile('{{view.optionLabel}}'), + + optionLabel: function () { + var optionLabelPath = this.get('optionLabelPath'); + var option = this.get('option'); + if (!option) return ''; + if (optionLabelPath) return Em.get(option, optionLabelPath); + return option; + }.property('option', 'optionLabelPath') + +});