AMBARI-10772 Create widget -> Add metric popup: Aggregator Function dropdown for component metrics. (atkach)

ambari-web/app/messages.js

@@ -2534,6 +2534,8 @@ Em.I18n.translations = {
   'dashboard.widgets.wizard.step2.selectComponent': 'Select a Component',
   'dashboard.widgets.wizard.step2.selectMetric': 'Select a Metric',
   'dashboard.widgets.wizard.step2.addMetric': 'Add Metric',
+  'dashboard.widgets.wizard.step2.aggregateFunction': 'Aggregator Function',
+  'dashboard.widgets.wizard.step2.aggregateTooltip': 'This mathematical function will be applied to compute single value for selected metric across all host components',
 
   'restart.service.all': 'Restart All',
   'restart.service.all.affected': 'Restart All Affected',

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -423,6 +423,7 @@
       line-height: 30px;
     }
   }
+  .aggregator-select,
   .component-select {
     .btn.dropdown-toggle {
       border-radius: 4px;

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

@@ -61,3 +61,18 @@
     </select>
   </div>
 </div>
+
+<div class="row-fluid" {{bindAttr class=":row-fluid view.showAggregateSelect::hidden"}}>
+  <div class="span3">{{t dashboard.widgets.wizard.step2.aggregateFunction}}</div>
+  <div class="btn-group aggregator-select span5" {{translateAttr data-original-title="dashboard.widgets.wizard.step2.aggregateTooltip"}}>
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      {{view.parentView.aggregateFunction}}
+      <span class="caret pull-right"></span>
+    </button>
+    <ul class="dropdown-menu">
+      {{#each aggregation in view.parentView.AGGREGATE_FUNCTIONS}}
+        <li><a href="#" {{action selectAggregation aggregation target="view"}}>{{aggregation}}</a></li>
+      {{/each}}
+    </ul>
+  </div>
+</div>

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

@@ -164,11 +164,22 @@ App.WidgetWizardExpressionView = Em.View.extend({
       isHideBodyScroll: true,
       expression: this.get('expression'),
 
+      /**
+       * @type {Array}
+       * @const
+       */
+      AGGREGATE_FUNCTIONS: ['avg', 'sum', 'min', 'max'],
+
       /**
        * @type {object|null}
        */
       selectedMetric: null,
 
+      /**
+       * @type {string|null}
+       */
+      aggregateFunction: null,
+
       /**
        * @type {Ember.View}
        * @class
@@ -184,6 +195,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
           $('html').on('click.dropdown', '.dropdown-menu li', function (e) {
             $(this).hasClass('keep-open') && e.stopPropagation();
           });
+          App.tooltip($('#' + this.get('elementId') + ' .aggregator-select'));
+          this.propertyDidChange('selectedComponent');
 
           $(".chosen-select").chosen({
             placeholder_text: Em.I18n.t('dashboard.widgets.wizard.step2.selectMetric'),
@@ -205,20 +218,42 @@ App.WidgetWizardExpressionView = Em.View.extend({
          */
         selectedComponent: null,
 
-        showMore: Em.K,
+        /**
+         * @type {boolean}
+         */
+        showAggregateSelect: function () {
+          return Boolean(this.get('selectedComponent') && this.get('selectedComponent.level') === 'COMPONENT');
+        }.property('selectedComponent.level'),
 
+        /**
+         * select component
+         * @param {object} event
+         */
         selectComponents: function (event) {
           var component = this.get('componentMap').findProperty('serviceName', event.context.get('serviceName'))
             .get('components').findProperty('id', event.context.get('id'));
           $('#add-metric-popup .component-select').removeClass('open');
 
           this.set('selectedComponent', component);
+          if (this.get('showAggregateSelect')) {
+            this.set('parentView.aggregateFunction', this.get('parentView.AGGREGATE_FUNCTIONS').objectAt(0));
+          } else {
+            this.set('parentView.aggregateFunction', null);
+          }
           this.set('parentView.selectedMetric', null);
           Em.run.next(function () {
             $('.chosen-select').trigger('chosen:updated');
           });
         },
 
+        /**
+         * select aggregation function
+         * @param {object} event
+         */
+        selectAggregation: function(event) {
+          this.set('parentView.aggregateFunction', event.context);
+        },
+
         /**
          * map of components
          * has following hierarchy: service -> component -> metrics
@@ -292,10 +327,15 @@ App.WidgetWizardExpressionView = Em.View.extend({
       }),
       primary: Em.I18n.t('common.add'),
       onPrimary: function () {
-        var data = this.get('expression.data');
-        var id = (data.length > 0) ? Math.max.apply(this, data.mapProperty('id')) + 1 : 1;
-        var selectedMetric = this.get('selectedMetric');
+        var data = this.get('expression.data'),
+            id = (data.length > 0) ? Math.max.apply(this, data.mapProperty('id')) + 1 : 1,
+            selectedMetric = this.get('selectedMetric'),
+            aggregateFunction = this.get('aggregateFunction');
+
         selectedMetric.set('id', id);
+        if (aggregateFunction && aggregateFunction !== 'avg') {
+          selectedMetric.set('metricPath', selectedMetric.get('metricPath') + '._' + aggregateFunction);
+        }
         data.pushObject(selectedMetric);
         this.hide();
       }