AMBARI-10858 Create widget -> Add metric popup: UI tweaks. (atkach)

ambari-web/app/controllers/main/service/widgets/create/step2_controller.js

@@ -107,23 +107,62 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
     switch (this.get('content.widgetType')) {
       case "NUMBER":
       case "GAUGE":
-        return this.get('expressions')[0] &&
-          (this.get('expressions')[0].get('isInvalid') ||
-            this.get('expressions')[0].get('isEmpty'));
+        return !this.isExpressionComplete(this.get('expressions')[0]);
       case "GRAPH":
-        return this.get('dataSets.length') > 0 &&
-          (this.get('dataSets').someProperty('expression.isInvalid') ||
-            this.get('dataSets').someProperty('expression.isEmpty'));
+        return !this.isGraphDataComplete(this.get('dataSets'));
       case "TEMPLATE":
-        return !this.get('templateValue') ||
-          this.get('expressions.length') > 0 &&
-            (this.get('expressions').someProperty('isInvalid') ||
-              this.get('expressions').someProperty('isEmpty'));
+        return !this.isTemplateDataComplete(this.get('expressions'), this.get('templateValue'));
     }
     return false;
-  }.property('widgetPropertiesViews.@each.isValid', 'templateValue',
-    'dataSets.@each.expression', 'dataSets.@each.isInvalid', 'dataSets.@each.isExpressionEmpty',
-    'expressions.@each.isInvalid', 'expressions.@each.isEmpty'),
+  }.property(
+    'widgetPropertiesViews.@each.isValid',
+    'dataSets.@each.label',
+    'templateValue'
+  ),
+
+  /**
+   * check whether data of expression is complete
+   * @param {Em.Object} expression
+   * @returns {boolean}
+   */
+  isExpressionComplete: function (expression) {
+    return expression && !expression.get('isInvalid') && !expression.get('isEmpty');
+  },
+
+  /**
+   * check whether data of graph widget is complete
+   * @param dataSets
+   * @returns {boolean} isComplete
+   */
+  isGraphDataComplete: function (dataSets) {
+    var isComplete = Boolean(dataSets.length);
+
+    for (var i = 0; i < dataSets.length; i++) {
+      if (dataSets[i].get('label').trim() === '' || !this.isExpressionComplete(dataSets[i].get('expression'))) {
+        isComplete = false;
+        break;
+      }
+    }
+    return isComplete;
+  },
+
+  /**
+   * check whether data of template widget is complete
+   * @param {Array} expressions
+   * @param {string} templateValue
+   * @returns {boolean} isComplete
+   */
+  isTemplateDataComplete: function (expressions, templateValue) {
+    var isComplete = Boolean(expressions.length > 0 && templateValue.trim() !== '');
+
+    for (var i = 0; i < expressions.length; i++) {
+      if (!this.isExpressionComplete(expressions[i])) {
+        isComplete = false;
+        break;
+      }
+    }
+    return isComplete;
+  },
 
   /**
    * Add data set
@@ -138,17 +177,13 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       id: id,
       label: '',
       isRemovable: !isDefault,
-      expression: {
+      expression: Em.Object.create({
         data: [],
         isInvalid: false,
-        isEmpty: true
-      },
-      isInvalid: function() {
-        return this.get('expression.isInvalid');
-      }.property('expression.isInvalid'),
-      isExpressionEmpty: function() {
-        return this.get('expression.isEmpty');
-      }.property('expression.isEmpty')
+        isEmpty: function () {
+          return (this.get('data.length') === 0);
+        }.property('data.length')
+      })
     }));
     return id;
   },
@@ -176,7 +211,9 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       data: [],
       alias: '{{' + this.get('EXPRESSION_PREFIX') + id + '}}',
       isInvalid: false,
-      isEmpty: true
+      isEmpty: function () {
+        return (this.get('data.length') === 0);
+      }.property('data.length')
     }));
     return id;
   },
@@ -201,6 +238,7 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       return Em.Object.create(item);
     }, this));
     this.set('dataSets', this.get('content.dataSets').map(function (item) {
+      item.expression = Em.Object.create(item.expression);
       return Em.Object.create(item);
     }, this));
     this.set('templateValue', this.get('content.templateValue'));

ambari-web/app/controllers/main/service/widgets/create/wizard_controller.js

@@ -206,7 +206,9 @@ App.WidgetWizardController = App.WizardController.extend({
       sender: this,
       data: {
         stackVersionURL: App.get('stackVersionURL'),
-        serviceNames: App.Service.find().mapProperty('serviceName').join(',')
+        serviceNames: App.Service.find().filter(function (item) {
+          return App.StackService.find(item.get('id')).get('isServiceWithWidgets');
+        }).mapProperty('serviceName').join(',')
       },
       callback: callback,
       success: 'loadAllMetricsFromServerCallback'

ambari-web/app/messages.js

@@ -2518,7 +2518,7 @@ Em.I18n.translations = {
   'widget.create.wizard.step2.body.warning':'Note: Valid operators are +, -, *, /',
   'widget.create.wizard.step2.addExpression': 'Add Expression',
   'widget.create.wizard.step2.addDataset': 'Add data set',
-  'widget.create.wizard.step2.allComponents': 'All {0}',
+  'widget.create.wizard.step2.allComponents': 'All {0}s',
   'widget.create.wizard.step2.activeComponents': 'Active {0}',
   'widget.create.wizard.step2.noMetricFound': 'No metric found',
   'widget.create.wizard.step3.widgetName': 'Name',

ambari-web/app/mixins/common/widgets/widget_mixin.js

@@ -518,7 +518,7 @@ App.WidgetPreviewMixin = Ember.Mixin.create({
     id: 1,
     values: []
   }),
-  drawWidget: function () {
+  loadMetrics: function () {
     this.get('content').setProperties({
       'values': this.get('controller.widgetValues'),
       'properties': this.get('controller.widgetProperties'),
@@ -534,8 +534,9 @@ App.WidgetPreviewMixin = Ember.Mixin.create({
         }
       })
     });
-    this.loadMetrics();
     this._super();
   }.observes('controller.widgetProperties', 'controller.widgetValues', 'controller.widgetMetrics', 'controller.widgetName'),
-  onMetricsLoaded: Em.K
+  onMetricsLoaded: function () {
+    this.drawWidget();
+  }
 });

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

@@ -55,6 +55,7 @@
   <div class="span3">{{t dashboard.widgets.wizard.step2.Metric}}</div>
   <div class="span9">
     <select class="chosen-select">
+      <option value="" disabled selected>{{t dashboard.widgets.wizard.step2.selectMetric}}</option>
       {{#each metric in view.selectedComponent.metrics}}
         <option>{{unbound metric}}</option>
       {{/each}}

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

@@ -138,8 +138,10 @@ App.WidgetWizardExpressionView = Em.View.extend({
 
     this.set('isInvalid', isInvalid);
     this.set('expression.isInvalid', isInvalid);
-    this.set('expression.isEmpty', this.get('expression.data.length') == 0);
-    if (!isInvalid) this.get('controller').updateExpressions();
+    this.get('controller').propertyDidChange('isSubmitDisabled');
+    if (!isInvalid) {
+      this.get('controller').updateExpressions();
+    }
   }.observes('expression.data.length'),
 
   /**
@@ -233,6 +235,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
           }
           this.set('parentView.selectedMetric', null);
           Em.run.next(function () {
+            $('.chosen-select option').first().attr('selected','selected');
             $('.chosen-select').trigger('chosen:updated');
           });
         },
@@ -282,19 +285,22 @@ App.WidgetWizardExpressionView = Em.View.extend({
           for (var serviceName in servicesMap) {
             components = [];
             for (var componentId in servicesMap[serviceName].components) {
+
+              //HBase service should not show "Active HBase master"
+              if (servicesMap[serviceName].components[componentId].component_name === 'HBASE_MASTER' &&
+                servicesMap[serviceName].components[componentId].level === 'HOSTCOMPONENT') continue;
+
               components.push(Em.Object.create({
                 componentName: servicesMap[serviceName].components[componentId].component_name,
                 level: servicesMap[serviceName].components[componentId].level,
                 displayName: function() {
                   var stackComponent = App.StackServiceComponent.find(this.get('componentName'));
                   if (stackComponent.get('isMaster')) {
-                    if (this.get('level') === 'COMPONENT') {
-                      return Em.I18n.t('widget.create.wizard.step2.allComponents').format(stackComponent.get('displayName'));
-                    } else {
+                    if (this.get('level') === 'HOSTCOMPONENT') {
                       return Em.I18n.t('widget.create.wizard.step2.activeComponents').format(stackComponent.get('displayName'));
                     }
                   }
-                  return stackComponent.get('displayName');
+                  return Em.I18n.t('widget.create.wizard.step2.allComponents').format(stackComponent.get('displayName'));
                 }.property('componentName', 'level'),
                 count: servicesMap[serviceName].components[componentId].count,
                 metrics: servicesMap[serviceName].components[componentId].metrics.uniq().sort(),