AMBARI-10465 Create widget -> Metrics and Expression page: Misc UI tweaks. (atkach)

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

@@ -56,11 +56,6 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
     }
   },
 
-  //TODO: Following computed property needs to be implemented. Next button should be enabled when there is no validation error and all required fields are filled
-  isSubmitDisabled: function () {
-    return this.get('widgetProperties').someProperty('isValid', false);
-  }.property('widgetProperties.@each.isValid'),
-
   /**
    * metrics filtered by type
    * @type {Array}

ambari-web/app/messages.js

@@ -2505,6 +2505,9 @@ Em.I18n.translations = {
   'widget.create.wizard.step3.header': 'Name and Description',
   '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.activeComponents': 'Active {0}',
+  'widget.create.wizard.step2.noMetricFound': 'No metric found',
 
   'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
   'dashboard.widgets.wizard.step2.newMetric': '+ New Metric',

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -235,6 +235,15 @@
         a {
           margin-left: 5px;
           text-decoration: none;
+          display: none;
+          .icon-remove {
+            color: #A69B9B;
+          }
+        }
+      }
+      .metric-instance:hover {
+        a {
+          display: inline-block;
         }
       }
       .controls {

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

@@ -16,7 +16,7 @@
 * limitations under the License.
 }}
 
-{{#if view.editMode}}
+{{#if view.expression.editMode}}
   <div class="metric-field">
     {{#each element in view.expression.data}}
       <div class="metric-instance" {{bindAttr id="element.id"}}>{{element.name}}
@@ -39,8 +39,8 @@
     </div>
   </div>
   <div {{bindAttr class="view.isInvalid:is-invalid :controls"}}>
-    <button class="btn" {{action cancelEdit target="view"}}>{{t common.discard}}</button>
-    <button class="btn btn-primary" {{action saveMetrics target="view"}} {{bindAttr disabled="view.isInvalid"}}>{{t common.save}}</button>
+    <button class="btn" {{action cancelEdit target="view"}}>{{t common.reset}}</button>
+    <button class="btn btn-primary" {{action saveMetrics target="view"}} {{bindAttr disabled="view.isInvalid"}}>{{t common.done}}</button>
   </div>
 {{else}}
   <a {{action startEdit target="view"}} class="edit-link"><i class="icon-edit"></i></a>

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

@@ -50,6 +50,6 @@
 
   <div class="btn-area">
     <button id="add-widget-step2-back" class="btn" {{action back}}>&larr; {{t common.back}}</button>
-    <button id="add-widget-step2-next" class="btn btn-success pull-right" {{bindAttr disabled="isSubmitDisabled"}} {{action "next" target="controller"}}>{{t common.next}} &rarr;</button>
+    <button id="add-widget-step2-next" class="btn btn-success pull-right" {{bindAttr disabled="view.isSubmitDisabled"}} {{action "next" target="controller"}}>{{t common.next}} &rarr;</button>
   </div>
 </div>

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

@@ -19,8 +19,8 @@
 <div class="row-fluid">
   <div class="span3">{{t dashboard.widgets.wizard.step2.selectComponent}}</div>
   <div class="btn-group component-select span5">
-    <button class="btn" {{bindAttr disabled="view.isComponentSelected"}}>{{t dashboard.widgets.wizard.step2.selectComponent}}</button>
-    <button class="btn dropdown-toggle" data-toggle="dropdown" {{bindAttr disabled="view.isComponentSelected"}}>
+    <button class="btn">{{t dashboard.widgets.wizard.step2.selectComponent}}</button>
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu accordion" id="accordion2">
@@ -28,16 +28,14 @@
         <li class="accordion-group keep-open">
           <div class="accordion-heading">
             <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
-              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.serviceName}}
+              <i class="icon-caret-down"></i><i class="icon-caret-right"></i>{{service.displayName}}
             </a>
           </div>
           <div id="collapseOne" class="accordion-body collapse in">
             <ul class="accordion-inner">
               {{#each component in service.components}}
                 <li>
-                  <label class="checkbox">
-                    {{view Ember.Checkbox checkedBinding="component.selected"}} {{component.componentName}}
-                  </label>
+                  <a href="#" {{action selectComponents component target="view"}}> {{component.displayName}}</a>
                 </li>
               {{/each}}
             </ul>
@@ -45,22 +43,21 @@
         </li>
       {{/each}}
       <li><a class="link" href="#" {{action showMore target="view"}}>{{t hostPopup.serviceInfo.showMore}}</a></li>
-      {{#unless view.isComponentSelected}}
-        <li class="row-fluid">
-          <button class="btn span4 offset1">{{t common.cancel}}</button>
-          <button class="btn btn-primary span4" {{action selectComponents target="view"}} >{{t common.apply}}</button>
-        </li>
-      {{/unless}}
+      <li class="row-fluid">
+        <button class="btn span4 offset1">{{t common.cancel}}</button>
+        <button class="btn btn-primary span4">{{t common.apply}}</button>
+      </li>
     </ul>
   </div>
 </div>
 
-{{#if view.isComponentSelected}}
-  <div class="row-fluid">
-    <div class="span3">{{t dashboard.widgets.wizard.step2.selectMetric}}</div>
-    <div class="span5">{{view Em.Select contentBinding="view.componentMetrics" selectionBinding="view.parentView.selectedMetric"}}</div>
-    <div class="span4">
-      <button class="btn" {{action cancelMetric target="view"}}>{{t common.cancel}}</button>
-    </div>
+<div class="row-fluid">
+  <div class="span3">{{t dashboard.widgets.wizard.step2.selectMetric}}</div>
+  <div class="span9">
+    <select class="chosen-select">
+      {{#each metric in view.componentMetrics}}
+        <option>{{unbound metric}}</option>
+      {{/each}}
+    </select>
   </div>
-{{/if}}
+</div>

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

@@ -48,11 +48,6 @@ App.WidgetWizardExpressionView = Em.View.extend({
    */
   expression: null,
 
-  /**
-   * @type {boolean}
-   */
-  editMode: false,
-
   /**
    * @type {boolean}
    */
@@ -89,7 +84,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
   startEdit: function () {
     var self = this;
     this.set('dataBefore', this.get('expression.data').slice(0));
-    this.set('editMode', true);
+    this.set('expression.editMode', true);
+    this.propertyDidChange('expression');
     Em.run.next(function () {
       $(self.get('element')).find('.metric-field').sortable({
         items: "> div",
@@ -107,14 +103,16 @@ App.WidgetWizardExpressionView = Em.View.extend({
    */
   cancelEdit: function () {
     this.set('expression.data', this.get('dataBefore'));
-    this.set('editMode', false);
+    this.set('expression.editMode', false);
+    this.propertyDidChange('expression');
   },
 
   /**
    * save changes and disable metric edit area
    */
   saveMetrics: function () {
-    this.set('editMode', false);
+    this.set('expression.editMode', false);
+    this.propertyDidChange('expression');
   },
 
   /**
@@ -160,7 +158,9 @@ App.WidgetWizardExpressionView = Em.View.extend({
     return App.ModalPopup.show({
       header: Em.I18n.t('dashboard.widgets.wizard.step2.addMetric'),
       classNames: ['modal-690px-width'],
-      disablePrimary: true,
+      disablePrimary: function () {
+        return Em.isNone(this.get('selectedMetric'));
+      }.property('selectedMetric'),
       expression: this.get('expression'),
 
       /**
@@ -178,10 +178,19 @@ App.WidgetWizardExpressionView = Em.View.extend({
         controller: this.get('controller'),
         elementId: 'add-metric-popup',
         didInsertElement: function () {
+          var self = this;
+
           //prevent dropdown closing on checkbox click
           $('html').on('click.dropdown', '.dropdown-menu li', function (e) {
             $(this).hasClass('keep-open') && e.stopPropagation();
           });
+
+          $(".chosen-select").chosen({
+            placeholder_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound'),
+            no_results_text: Em.I18n.t('widget.create.wizard.step2.noMetricFound')
+          }).change(function (event, obj) {
+            self.set('parentView.selectedMetric', obj.selected);
+          });
         },
 
         /**
@@ -189,41 +198,41 @@ App.WidgetWizardExpressionView = Em.View.extend({
          */
         componentMetrics: [],
 
-        /**
-         * @type {boolean}
-         */
-        isComponentSelected: false,
-        selectComponents: function () {
+        selectComponents: function (event) {
           var componentMetrics = [];
 
           this.get('componentMap').forEach(function (service) {
-            service.get('components').filterProperty('selected').forEach(function (component) {
-              componentMetrics.pushObjects(component.get('metrics'));
-            }, this);
+            componentMetrics = service.get('components').findProperty('id', event.context.get('id')).get('metrics');
           }, this);
           this.set('componentMetrics', componentMetrics);
-          this.set('isComponentSelected', true);
-          this.set('parentView.disablePrimary', false);
-        },
-        cancelMetric: function () {
-          this.get('componentMetrics').clear();
-          this.set('parentView.disablePrimary', true);
-          this.set('isComponentSelected', false);
+          this.set('parentView.selectedMetric', null);
+          Em.run.next(function () {
+            $('.chosen-select').trigger('chosen:updated');
+          });
         },
+
+        /**
+         * map of components
+         * has following hierarchy: service -> component -> metrics
+         */
         componentMap: function () {
           var servicesMap = {};
           var result = [];
           var components = [];
+          var masterNames = App.StackServiceComponent.find().filterProperty('isMaster').mapProperty('componentName');
 
           this.get('controller.filteredMetrics').forEach(function (metric) {
             var service = servicesMap[metric.service_name];
+            var componentId = masterNames.contains(metric.component_name) ? metric.component_name + '_' + metric.level : metric.component_name;
             if (service) {
               service.count++;
-              if (service.components[metric.component_name]) {
-                service.components[metric.component_name].count++;
-                service.components[metric.component_name].metrics.push(metric.name);
+              if (service.components[componentId]) {
+                service.components[componentId].count++;
+                service.components[componentId].metrics.push(metric.name);
               } else {
-                service.components[metric.component_name] = {
+                service.components[componentId] = {
+                  component_name: metric.component_name,
+                  level: metric.level,
                   count: 1,
                   metrics: [metric.name]
                 };
@@ -237,16 +246,30 @@ App.WidgetWizardExpressionView = Em.View.extend({
           }, this);
 
           for (var serviceName in servicesMap) {
-            for (var componentName in servicesMap[serviceName].components) {
+            for (var componentId in servicesMap[serviceName].components) {
               components.push(Em.Object.create({
-                componentName: componentName,
-                count: servicesMap[serviceName].components[componentName].count,
-                metrics: servicesMap[serviceName].components[componentName].metrics,
-                selected: false
+                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 {
+                      return Em.I18n.t('widget.create.wizard.step2.activeComponents').format(stackComponent.get('displayName'));
+                    }
+                  }
+                  return stackComponent.get('displayName');
+                }.property('componentName', 'level'),
+                count: servicesMap[serviceName].components[componentId].count,
+                metrics: servicesMap[serviceName].components[componentId].metrics.uniq().sort(),
+                selected: false,
+                id: componentId
               }));
             }
             result.push(Em.Object.create({
               serviceName: serviceName,
+              displayName: App.StackService.find(serviceName).get('displayName'),
               count: servicesMap[serviceName].count,
               components: components
             }));

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

@@ -60,6 +60,34 @@ App.WidgetWizardStep2View = Em.View.extend({
    */
   dataSets: [],
 
+  /**
+   * @type {boolean}
+   */
+  isSubmitDisabled: function() {
+    if (this.get('controller.widgetProperties').someProperty('isValid', false)) {
+      return true;
+    }
+    switch (this.get('controller.content.widgetType')) {
+      case "NUMBER":
+      case "GAUGE":
+        return this.get('expressions')[0] &&
+          (this.get('expressions')[0].get('editMode') ||
+          this.get('expressions')[0].get('data.length') === 0);
+      case "GRAPH":
+        return this.get('dataSets.length') > 0 &&
+          (this.get('dataSets').someProperty('expression.editMode') ||
+          this.get('dataSets').someProperty('expression.data.length', 0));
+      case "TEMPLATE":
+        return !this.get('templateValue') ||
+          this.get('expressions.length') > 0 &&
+          (this.get('expressions').someProperty('editMode') ||
+          this.get('expressions').someProperty('data.length', 0));
+    }
+    return false;
+  }.property('controller.widgetProperties.@each.isValid',
+             'expressions.@each.editMode',
+             'dataSets.@each.expression'),
+
   /**
    * Add data set
    * @param {object|null} event
@@ -73,7 +101,8 @@ App.WidgetWizardStep2View = Em.View.extend({
       label: '',
       isRemovable: !isDefault,
       expression: Em.Object.create({
-        data: []
+        data: [],
+        editMode: false
       })
     }));
   },
@@ -98,7 +127,8 @@ App.WidgetWizardStep2View = Em.View.extend({
       id: id,
       isRemovable: !isDefault,
       data: [],
-      alias: '{{' + this.get('EXPRESSION_PREFIX') + id + '}}'
+      alias: '{{' + this.get('EXPRESSION_PREFIX') + id + '}}',
+      editMode: false
     }));
   },
 
@@ -112,6 +142,7 @@ App.WidgetWizardStep2View = Em.View.extend({
 
   updatePreview: function() {
     this.get('controller').updateExpressions(this);
+    this.propertyDidChange('isSubmitDisabled');
   }.observes('templateValue', 'dataSets.@each.label'),
 
   didInsertElement: function () {