AMBARI-11118. Create widget: Unable to add metric in expression builder box. (jaimin)

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

@@ -0,0 +1,23 @@
+{{!
+* 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.
+}}
+
+<option value="" disabled
+        selected>{{view.selectionObj.placeholder_text}}</option>
+{{#each item in view.options}}
+  <option>{{unbound item}}</option>
+{{/each}}

ambari-web/app/templates/main/service/widgets/create/step2_add_metric.hbs

@@ -33,24 +33,13 @@
                 <ul class="dropdown-menu select-options-dropdown">
                   <!--metrics level-->
                   <li class="keep-open metric-select" {{action selectComponents component target="view"}}>
-                    <select class="metrics-select chosen-select">
-                      <option value="" disabled selected>{{t dashboard.widgets.wizard.step2.selectMetric}}</option>
-                      {{#each metric in component.metrics}}
-                        <option>{{unbound metric}}</option>
-                      {{/each}}
-                    </select>
+                      {{view App.JqueryChosenView optionsBinding="component.metrics" elementIdBinding="component.id" selectionObjBinding="view.metricsSelectionObj"}}
                   </li>
                   <!--select aggregare function -->
                   <li {{bindAttr class=":keep-open :aggregator-select component.showAggregateSelect::hidden"}}
                     {{action selectComponents component target="view"}}
                     {{translateAttr data-original-title="dashboard.widgets.wizard.step2.aggregateTooltip"}}>
-                    <select class="aggregate-function-select chosen-select">
-                      <option value="" disabled
-                              selected>{{t dashboard.widgets.wizard.step2.aggregateFunction.scanOps}}</option>
-                      {{#each function in view.parentView.AGGREGATE_FUNCTIONS}}
-                        <option>{{unbound function}}</option>
-                      {{/each}}
-                    </select>
+                    {{view App.JqueryChosenView optionsBinding="view.parentView.AGGREGATE_FUNCTIONS" elementIdBinding="component.aggregatorId" selectionObjBinding="view.aggregateFnSelectionObj"}}
                   </li>
                   <li class="actions-buttons">
                     <button class="btn" href="#" {{action cancel target="view"}}>{{t common.cancel}}</button>

ambari-web/app/views.js

@@ -80,6 +80,7 @@ require('views/common/widget/gauge_widget_view');
 require('views/common/widget/number_widget_view');
 require('views/common/widget/heatmap_widget_view');
 require('views/common/assign_master_components_view');
+require('views/common/chosen_plugin');
 require('views/login');
 require('views/main');
 require('views/main/menu');

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

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+App.JqueryChosenView = Em.View.extend({
+  templateName: require('templates/common/chosen_plugin'),
+  tagName: 'select',
+  // This needs to be binded from template
+  elementId: '',
+  title: '',
+  options: [],
+  /**
+   * @name: selectionObj {Object}
+   *  Object =   {
+   *    placeholder_text: {String}
+   *    no_results_text: {String}
+   *    nChangeCallback: {Function}
+   *  }
+   */
+  selectionObj: {},
+
+  didInsertElement: function () {
+    var self = this;
+    var elementId = "#" + self.get("elementId");
+    $(elementId).chosen({
+      placeholder_text: self.get('selectionObj.placeholder_text'),
+      no_results_text: self.get('selectionObj.no_results_text')
+    }).change(self.get('selectionObj.onChangeCallback'));
+  }
+});

ambari-web/app/views/main/service/widgets/create/expression_view.js

@@ -210,35 +210,41 @@ App.AddMetricExpressionView = Em.View.extend({
     $('html').on('click.dropdown', '.dropdown-menu li', function (e) {
       $(this).hasClass('keep-open') && e.stopPropagation();
     });
-    var self = this;
-    Em.run.later(this, function () {
-      $(".metrics-select.chosen-select").chosen({
-        placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.selectMetric'),
-        no_results_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound')
-      }).change(function (event, obj) {
-          var filteredComponentMetrics = self.get('controller.filteredMetrics').filterProperty('component_name', self.get('currentSelectedComponent.componentName')).filterProperty('level',self.get('currentSelectedComponent.level'));
-          var filteredMetric = filteredComponentMetrics.findProperty('name', obj.selected);
-          var selectedMetric =  Em.Object.create({
-            name: obj.selected,
-            componentName: self.get('currentSelectedComponent.componentName'),
-            serviceName: self.get('currentSelectedComponent.serviceName'),
-            metricPath: filteredMetric.widget_id,
-            isMetric: true
-          });
-          if (self.get('currentSelectedComponent.hostComponentCriteria')) {
-            selectedMetric.hostComponentCriteria = self.get('currentSelectedComponent.hostComponentCriteria');
-          }
-          self.set('currentSelectedComponent.selectedMetric', selectedMetric);
-      });
-
-      $(".aggregate-function-select.chosen-select").chosen({
-        placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.aggregateFunction.scanOps')
-      }).change(function (event, obj) {
-          self.set('currentSelectedComponent.selectedAggregation', obj.selected);
-      });
-    }, 1600);
   },
 
+  metricsSelectionObj: function () {
+    var self = this;
+    return Em.Object.create({
+      placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.selectMetric'),
+      no_results_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound'),
+      onChangeCallback: function (event, obj) {
+        var filteredComponentMetrics = self.get('controller.filteredMetrics').filterProperty('component_name', self.get('currentSelectedComponent.componentName')).filterProperty('level', self.get('currentSelectedComponent.level'));
+        var filteredMetric = filteredComponentMetrics.findProperty('name', obj.selected);
+        var selectedMetric = Em.Object.create({
+          name: obj.selected,
+          componentName: self.get('currentSelectedComponent.componentName'),
+          serviceName: self.get('currentSelectedComponent.serviceName'),
+          metricPath: filteredMetric.widget_id,
+          isMetric: true
+        });
+        if (self.get('currentSelectedComponent.hostComponentCriteria')) {
+          selectedMetric.hostComponentCriteria = self.get('currentSelectedComponent.hostComponentCriteria');
+        }
+        self.set('currentSelectedComponent.selectedMetric', selectedMetric);
+      }
+    })
+  }.property(),
+
+  aggregateFnSelectionObj: function () {
+    var self = this;
+    return Em.Object.create({
+      placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.aggregateFunction.scanOps'),
+      onChangeCallback: function (event, obj) {
+        self.set('currentSelectedComponent.selectedAggregation', obj.selected);
+      }
+    })
+  }.property(),
+
   /**
    * @type {Ember.Object}
    * @default null
@@ -347,6 +353,7 @@ App.AddMetricExpressionView = Em.View.extend({
           metrics: servicesMap[serviceName].components[componentId].metrics.uniq().sort(),
           selected: false,
           id: componentId,
+          aggregatorId: componentId + '_aggregator',
           serviceName: serviceName,
           showAggregateSelect: function () {
             return this.get('level') === 'COMPONENT';