AMBARI-4086 Need clear filter action in configs filter textfield. (Mikhail Bayuk via atkach)

ambari-web/app/styles/application.less

@@ -5039,3 +5039,17 @@ i.icon-asterisks {
   right: 10px;
 }
 
+#cleanerContainer {
+  z-index: 1000;
+  position: absolute;
+  left: -20px;
+  width: 16px;
+  margin-top: 7px;
+  #filterCleaner {
+    opacity: .5;
+
+  }
+  #filterCleaner:hover {
+    opacity: .9;
+  }
+}

ambari-web/app/templates/common/configs/service_config.hbs

@@ -68,9 +68,9 @@
       &nbsp;<a href="#" {{action "switchHostGroup" target="controller"}}>{{t common.change}}</a>
     {{/if}}
      <a href="#" class="link" {{action "manageConfigurationGroup" target="controller"}}>{{t services.service.actions.manage_configuration_groups.short}}</a>
-     <div class="pull-right">
-       {{view App.FilterComboboxView filterBinding="view.filter" columnsBinding="view.columns" }}
-     </div>
+    <div class="pull-right">
+      {{view App.FilterComboCleanableView filterBinding="view.filter" columnsBinding="view.columns" }}
+    </div>
 	</div>
 {{/if}}
 <div class="accordion">

ambari-web/app/templates/common/filter_combo_cleanable.hbs

@@ -0,0 +1,38 @@
+{{!
+* 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.
+}}
+
+  {{view Ember.TextField valueBinding="view.filter" placeholderBinding="view.placeHolder"}}
+  <div class="btn-group">
+    <div id="cleanerContainer" class="pull-left">
+      <a href="#" id="filterCleaner" {{action "clearFilter" target="view"}}
+        {{bindAttr class="view.filterNotEmpty::hidden :ui-icon :ui-icon-circle-close"}}></a>
+    </div>
+      <button class="btn dropdown-toggle" data-toggle="dropdown">
+          <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        {{#each column in view.columns}}
+            <li>
+                <a href="#" {{action selectFilterColumn column target="view"}}>
+                  <i {{bindAttr class="column.selected:icon-ok-sign:icon-placeholder :text-success"}}></i>
+                  {{column.name}}
+                </a>
+            </li>
+        {{/each}}
+      </ul>
+  </div>

ambari-web/app/views.js

@@ -32,6 +32,7 @@ require('views/common/quick_view_link_view');
 require('views/common/configs/services_config');
 require('views/common/configs/overriddenProperty_view');
 require('views/common/filter_combobox');
+require('views/common/filter_combo_cleanable');
 require('views/common/table_view');
 require('views/login');
 require('views/main');

ambari-web/app/views/common/filter_combo_cleanable.js

@@ -0,0 +1,54 @@
+/**
+ * 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');
+
+
+/**
+ * Filter component with custom dropdown and cross-circled cleaner. Build on Twitter Bootstrap styles
+ * @type {*}
+ */
+App.FilterComboCleanableView = Ember.View.extend({
+  templateName: require('templates/common/filter_combo_cleanable'),
+
+  classNames: ['filter-combobox', 'input-append'],
+
+  placeHolder: function(){
+    return this.t('common.combobox.placeholder');
+  }.property(),
+
+  /**
+   * Onclick handler for dropdown menu
+   * @param event
+   */
+  selectFilterColumn: function(event){
+    var column = event.context;
+    column.set('selected', !column.get('selected'));
+  },
+
+  filterNotEmpty: function(target){
+    return (this.get('filter').length > 0);
+  }.property('filter'),
+
+  /**
+   * clear Filter textfield
+   */
+  clearFilter: function() {
+    this.set('filter', '');
+  }
+});