AMBARI-11005-PART2. Widgets: UI changes v4.(xiwang)

ambari-web/app/styles/enhanced_service_dashboard.less

@@ -377,6 +377,32 @@
       .controls.is-invalid {
         border-color: red;
       }
+      .add-item-input {
+        display: inline-block!important;
+        .ember-text-field{
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          position: relative;
+          font-weight: bold;
+          margin: 8px 0 10px 10px;
+          padding: 5px;
+          border: 1px solid #dddddd;
+          width: 50px;
+          -webkit-box-shadow: none;
+          -moz-box-shadow: none;
+          box-shadow: none;
+          border-radius: 0px;
+          -webkit-border-radius: 0px;
+          -moz-border-radius: 0px;
+          -webkit-transition: none;
+          -moz-transition: none;
+          -o-transition: none;
+          transition: none;
+        }
+        .ember-text-field.is-invalid {
+          border: 1px solid red;
+        }
+      }
     }
     .template {
       margin-bottom: 10px;

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

@@ -40,8 +40,15 @@
         <a href="#" {{action removeElement element target="view"}}><i class="icon-remove"></i></a>
       </div>
     {{/each}}
+    <div class="add-item-input">
+      {{view App.InputCursorTextfieldView parentViewBinding="view"}}
+    </div>
   {{else}}
+    <div class="add-item-input">
+      {{view App.InputCursorTextfieldView parentViewBinding="view"}}
+    </div>
     <div class="placeholder">{{t dashboard.widgets.wizard.step2.addMetrics}}</div>
   {{/if}}
+
 </div>
 

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

@@ -334,3 +334,50 @@ App.AddMetricExpressionView = Em.View.extend({
     return result;
   }.property('controller.filteredMetrics')
 });
+
+App.InputCursorTextfieldView = Ember.TextField.extend({
+  placeholder: "",
+  classNameBindings: ['isInvalid'],
+  isInvalid: false,
+
+  didInsertElement: function () {
+    this.focusCursor();
+  },
+
+  focusCursor: function () {
+    Em.run.next( function() { $('.add-item-input .ember-text-field').focus(); });
+  }.observes('parentView.expression.data.length'),
+
+  validateInput: function () {
+    var value = this.get('value');
+    var parentView = this.get('parentView');
+    this.set('isInvalid', false);
+    if (value && parentView.get('OPERATORS').contains(value)) {
+      // add operator
+      var data = parentView.get('expression.data');
+      var lastId = (data.length > 0) ? Math.max.apply(parentView, data.mapProperty('id')) : 0;
+      data.pushObject(Em.Object.create({
+        id: ++lastId,
+        name: value,
+        isOperator: true
+      }));
+      this.set('value', '');
+    } else if (value && value == 'm') {
+      // open add metric menu
+      $('#add-metric-menu > div > a').click();
+      this.set('value', '');
+    } else if (value) {
+      // invalid operator
+      this.set('isInvalid', true);
+    }
+  }.observes('value'),
+
+  keyDown: function (event) {
+    if ((event.keyCode == 8 || event.which == 8) && !this.get('value')) { // backspace
+      var data = this.get('parentView.expression.data');
+      if (data.length >= 1) {
+        data.removeObject(data[data.length - 1]);
+      }
+    }
+  }
+});