You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2017/02/21 16:39:43 UTC

[12/25] ambari git commit: AMBARI-20082. Wizard 'Assign Master ' step is showing inconsistent Select view (akovalenko)

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-12556
Commit: ece4d36cb32a0a4b60025e9d54ba4131105a794b
Parents: 6feb46a
Author: Aleksandr Kovalenko <ak...@hortonworks.com>
Authored: Mon Feb 20 14:44:38 2017 +0200
Committer: Aleksandr Kovalenko <ak...@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')
+
+});