AMBARI-10805. Create Widget Wizard - Expression page UI changes.(XIWANG)

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

@@ -108,22 +108,22 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       case "NUMBER":
       case "GAUGE":
         return this.get('expressions')[0] &&
-          (this.get('expressions')[0].get('editMode') ||
-          this.get('expressions')[0].get('data.length') === 0);
+          (this.get('expressions')[0].get('isInvalid') ||
+            this.get('expressions')[0].get('isEmpty'));
       case "GRAPH":
         return this.get('dataSets.length') > 0 &&
-          (this.get('dataSets').someProperty('expression.editMode') ||
-          this.get('dataSets').someProperty('expression.data.length', 0));
+          (this.get('dataSets').someProperty('expression.isInvalid') ||
+            this.get('dataSets').someProperty('expression.isEmpty'));
       case "TEMPLATE":
         return !this.get('templateValue') ||
           this.get('expressions.length') > 0 &&
-          (this.get('expressions').someProperty('editMode') ||
-          this.get('expressions').someProperty('data.length', 0));
+            (this.get('expressions').someProperty('isInvalid') ||
+              this.get('expressions').someProperty('isEmpty'));
     }
     return false;
-  }.property('widgetPropertiesViews.@each.isValid',
-    'expressions.@each.editMode',
-    'dataSets.@each.expression'),
+  }.property('widgetPropertiesViews.@each.isValid', 'templateValue',
+    'dataSets.@each.expression', 'dataSets.@each.isInvalid', 'dataSets.@each.isExpressionEmpty',
+    'expressions.@each.isInvalid', 'expressions.@each.isEmpty'),
 
   /**
    * Add data set
@@ -140,8 +140,15 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       isRemovable: !isDefault,
       expression: {
         data: [],
-        editMode: false
-      }
+        isInvalid: false,
+        isEmpty: true
+      },
+      isInvalid: function() {
+        return this.get('expression.isInvalid');
+      }.property('expression.isInvalid'),
+      isExpressionEmpty: function() {
+        return this.get('expression.isEmpty');
+      }.property('expression.isEmpty')
     }));
     return id;
   },
@@ -168,7 +175,8 @@ App.WidgetWizardStep2Controller = Em.Controller.extend({
       isRemovable: !isDefault,
       data: [],
       alias: '{{' + this.get('EXPRESSION_PREFIX') + id + '}}',
-      editMode: false
+      isInvalid: false,
+      isEmpty: true
     }));
     return id;
   },

ambari-web/app/messages.js

@@ -2527,8 +2527,8 @@ Em.I18n.translations = {
   'widget.clone.body': 'Are you sure you want to clone current widget {0}?',
 
   'dashboard.widgets.wizard.step2.addMetrics': 'Add Metrics and operators here...',
-  'dashboard.widgets.wizard.step2.newMetric': '+ New Metric',
-  'dashboard.widgets.wizard.step2.newOperator': '+ New Operator',
+  'dashboard.widgets.wizard.step2.newMetric': '+ Add Metric',
+  'dashboard.widgets.wizard.step2.newOperator': '+ Add Operator',
   'dashboard.widgets.wizard.step2.Component': 'Component',
   'dashboard.widgets.wizard.step2.Metric': 'Metric',
   'dashboard.widgets.wizard.step2.selectComponent': 'Select a Component',
@@ -2536,6 +2536,8 @@ Em.I18n.translations = {
   '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',
+  'dashboard.widgets.wizard.step2.threshold.ok.tooltip': 'This is the threshold value at which the widget color changes from green (OK) to orange (Warning)',
+  'dashboard.widgets.wizard.step2.threshold.warning.tooltip': 'This is the threshold value at which the widget color changes from orange (Warning) to red (Critical)',
 
   'restart.service.all': 'Restart All',
   'restart.service.all.affected': 'Restart All Affected',

ambari-web/app/models/widget.js

@@ -93,7 +93,7 @@ App.WidgetType.FIXTURES = [
     properties: [
       {
         name : 'threshold',
-        isRequired: true,
+        isRequired: false,
         smallValue: '0.7',
         bigValue: '0.9'
       }
@@ -116,7 +116,8 @@ App.WidgetType.FIXTURES = [
       {
         name : 'display_unit',
         isRequired: false,
-        value: 'MB'
+        value: '',
+        placeholder: 'Optional: MB, ms, etc.'
       }
     ]
   },
@@ -140,7 +141,8 @@ App.WidgetType.FIXTURES = [
       {
         name : 'display_unit',
         isRequired: false,
-        value: 'MB'
+        value: '',
+        placeholder: 'Optional: MB, ms, etc.'
       }
     ]
   },
@@ -154,7 +156,8 @@ App.WidgetType.FIXTURES = [
       {
         name : 'display_unit',
         isRequired: false,
-        value: 'MB'
+        value: '',
+        placeholder: 'Optional: MB, ms, etc.'
       }
     ]
   }

ambari-web/app/models/widget_property.js

@@ -214,33 +214,15 @@ App.WidgetPropertyTypes = [
      * @returns {boolean}
      */
     validate: function (value) {
-      if (!this.get('isRequired') && !this.get('smallValue') && !this.get('bigValue')) {
+      if (!value) {
         return true;
-      } else if (!value) {
-        return false;
       }
       value = ('' + value).trim();
       return validator.isValidFloat(value) && value > this.get('MIN_VALUE') && value <= this.get('MAX_VALUE');
     },
 
-    thresholdError: function () {
-      if (this.get('isSmallValueValid') && this.get('isBigValueValid')) {
-        return Number(this.get('smallValue')) > Number(this.get('bigValue'));
-      } else {
-        return false;
-      }
-    }.property('smallValue', 'bigValue', 'isSmallValueValid', 'isBigValueValid'),
-
     isValid: function () {
-      return this.get('isSmallValueValid') && this.get('isBigValueValid') && (!this.get('thresholdError'));
-    }.property( 'isSmallValueValid', 'isBigValueValid', 'thresholdError'),
-
-    /**
-     * Define whether warning threshold < critical threshold
-     * @type {Boolean}
-     */
-    errorMsg: function () {
-      return this.get('thresholdError') ? "Threshold 1 should be smaller than threshold 2" : null;
-    }.property('thresholdError')
+      return this.get('isSmallValueValid') && this.get('isBigValueValid') ;
+    }.property( 'isSmallValueValid', 'isBigValueValid')
   }
 ];

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -273,13 +273,26 @@
     }
   }
   .step2 {
+    .form-horizontal {
+      .control-label {
+        width: auto;
+      }
+      .controls {
+        margin-left: 130px;
+        .threshold-input {
+          width: 85px;
+          //margin-left: 0px;
+        }
+      }
+    }
     .badge-container {
       height: 26px;
+      width: 80px;
       .OK, .WARNING, .CRITICAL {
         line-height: 26px;
         height: 26px;
         display: inline-block;
-        width: 70px;
+        width: 60px;
         text-align: center;
       }
       .OK {
@@ -319,23 +332,16 @@
       }
       .placeholder {
         color: #999999;
-        margin: 50px;
-      }
-      .edit-link {
-        padding: 5px;
-        cursor: pointer;
-        color: #555555;
-        right: 10px;
-        top: 10px;
-        position: absolute;
+        padding: 50px;
       }
       .metric-field {
         height: 100%;
+        background-color: #f5f5f5;
       }
       .metric-instance {
         font-weight: bold;
         cursor: pointer;
-        background: #E6F1F6;
+        background: white;
         display: inline-block;
         margin: 10px 0 10px 10px;
         padding: 5px;
@@ -355,7 +361,7 @@
         }
       }
       .controls {
-        background-color: white;
+        background-color: #f5f5f5;
         padding: 0 5px;
         border: 1px @border-color solid;
         margin-right: 20px;

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

@@ -16,44 +16,35 @@
 * limitations under the License.
 }}
 
-{{#if view.expression.editMode}}
-  <div class="metric-field">
+
+<div class="metric-field">
+  {{#if view.expression.isRemovable}}
+      <a {{action removeExpression view.expression target="controller"}} class="remove-link"><i class="icon-trash"></i></a>
+  {{/if}}
+  {{#if view.expression.data.length}}
     {{#each element in view.expression.data}}
       <div class="metric-instance" {{bindAttr id="element.id"}}>{{element.name}}
         <a href="#" {{action removeElement element target="view"}}><i class="icon-remove"></i></a>
       </div>
     {{/each}}
-  </div>
-  <div class="pull-left">
-    <button class="btn btn-primary" {{action addMetric target="view"}}>{{t dashboard.widgets.wizard.step2.newMetric}}</button>
-    <div class="btn-group pull-right">
-      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-        {{t dashboard.widgets.wizard.step2.newOperator}}
-        <span class="caret"></span>
-      </a>
-      <ul class="dropdown-menu">
-        {{#each operator in view.OPERATORS}}
-          <li><a href="#" {{action addOperator operator target="view"}}>{{operator}}</a></li>
-        {{/each}}
-      </ul>
-    </div>
-  </div>
-  <div {{bindAttr class="view.isInvalid:is-invalid :controls"}}>
-    <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>
-  {{#if view.expression.isRemovable}}
-    <a {{action removeExpression view.expression target="controller"}} class="remove-link"><i class="icon-trash"></i></a>
-  {{/if}}
-  {{#if view.expression.data.length}}
-    <div class="metric-field">
-      {{#each element in view.expression.data}}
-        <div class="metric-instance">{{element.name}}</div>
-      {{/each}}
-    </div>
   {{else}}
     <div class="placeholder">{{t dashboard.widgets.wizard.step2.addMetrics}}</div>
   {{/if}}
-{{/if}}
+</div>
+<div class="pull-left">
+  <button class="btn" {{action addMetric target="view"}}>{{t dashboard.widgets.wizard.step2.newMetric}}</button>
+  <div class="btn-group pull-right">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+      {{t dashboard.widgets.wizard.step2.newOperator}}
+      <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      {{#each operator in view.OPERATORS}}
+        <li><a href="#" {{action addOperator operator target="view"}}>{{operator}}</a></li>
+      {{/each}}
+    </ul>
+  </div>
+</div>
+<div {{bindAttr class="view.isInvalid:is-invalid :controls"}}>
+  <button class="btn" {{action cancelEdit target="view"}}>{{t common.reset}}</button>
+</div>

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

@@ -19,9 +19,6 @@
 <h2>{{t widget.create.wizard.step2.header}}</h2>
 <div class="alert alert-info">
   {{t widget.create.wizard.step2.body.text}}
-  <div class="alert alert-warning">
-    {{t widget.create.wizard.step2.body.warning}}
-  </div>
 </div>
 
 {{#each dataSet in dataSets}}

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

@@ -19,9 +19,6 @@
 <h2>{{t widget.create.wizard.step2.header}}</h2>
 <div class="alert alert-info">
   {{t widget.create.wizard.step2.body.text}}
-  <div class="alert alert-warning">
-    {{t widget.create.wizard.step2.body.warning}}
-  </div>
 </div>
 
 {{#each expression in expressions}}

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

@@ -28,9 +28,6 @@
 
 <div class="alert alert-info">
   {{t widget.create.wizard.step2.body.text}}
-  <div class="alert alert-warning">
-    {{t widget.create.wizard.step2.body.warning}}
-  </div>
 </div>
 
 {{#each expression in expressions}}

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

@@ -18,11 +18,13 @@
 
 <div>
     <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeOK"}}>{{view.property.badgeOK}}</span>&nbsp;</div>
-    <div {{bindAttr class=":span2 property.isSmallValueValid::error"}}>
+    <div {{bindAttr class=":span2 :threshold-input property.isSmallValueValid::error"}} rel="threshold-tooltip"
+      {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.ok.tooltip"}}>
       {{view Em.TextField valueBinding="view.property.smallValue" class ="span10"}}
     </div>
     <div class="span2 badge-container"><span {{bindAttr class=":label view.property.badgeWarning"}}>{{view.property.badgeWarning}}</span>&nbsp;</div>
-    <div {{bindAttr class=":span2 property.isBigValueValid::error"}}>
+    <div {{bindAttr class=":span2 :threshold-input property.isBigValueValid::error"}} rel="threshold-tooltip"
+      {{translateAttr data-original-title="dashboard.widgets.wizard.step2.threshold.warning.tooltip"}}>
       {{view Em.TextField valueBinding="view.property.bigValue" class ="span10"}}
     </div>
     <div class="span3 badge-container"><span {{bindAttr class=":label view.property.badgeCritical"}}>{{view.property.badgeCritical}}</span>&nbsp;</div>

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

@@ -81,10 +81,8 @@ App.WidgetWizardExpressionView = Em.View.extend({
   /**
    * enable metric edit area
    */
-  startEdit: function () {
+  didInsertElement: function () {
     var self = this;
-    this.set('dataBefore', this.get('expression.data').slice(0));
-    this.set('expression.editMode', true);
     this.propertyDidChange('expression');
     Em.run.next(function () {
       $(self.get('element')).find('.metric-field').sortable({
@@ -102,16 +100,7 @@ App.WidgetWizardExpressionView = Em.View.extend({
    * discard changes and disable metric edit area
    */
   cancelEdit: function () {
-    this.set('expression.data', this.get('dataBefore'));
-    this.set('expression.editMode', false);
-    this.propertyDidChange('expression');
-  },
-
-  /**
-   * save changes and disable metric edit area
-   */
-  saveMetrics: function () {
-    this.set('expression.editMode', false);
+    this.set('expression.data', []);
     this.propertyDidChange('expression');
   },
 
@@ -148,6 +137,8 @@ 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();
   }.observes('expression.data.length'),
 

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

@@ -41,8 +41,15 @@ App.WidgetWizardStep2View = Em.View.extend({
     }
   }.property('controller.content.widgetType'),
 
+  ensureTooltip: function () {
+    Em.run.later(this, function () {
+      App.tooltip($("[rel='threshold-tooltip']"));
+    }, 500);
+  }.observes(''),
+
   didInsertElement: function () {
     var controller = this.get('controller');
+    this.ensureTooltip();
     controller.initWidgetData();
     controller.renderProperties();
     controller.updateExpressions();
@@ -52,6 +59,7 @@ App.WidgetWizardStep2View = Em.View.extend({
 
 App.WidgetPropertyTextFieldView = Em.TextField.extend({
   valueBinding: 'property.value',
+  placeholderBinding: 'property.placeholder',
   classNameBindings: ['property.classNames', 'parentView.basicClass']
 });