AMBARI-8350. Usability: confusing typeahead widget for host selection when there are more than 25 hosts in the cluster (onechiporenko)

ambari-web/app/views/wizard/step5_view.js

@@ -73,7 +73,7 @@ App.InputHostView = Em.TextField.extend(App.SelectHost, {
    */
   changeHandler: function() {
     if (!this.shouldChangeHandlerBeCalled()) return;
-    var host = this.get('controller.hosts').findProperty('host_info', this.get('value'));
+    var host = this.get('controller.hosts').findProperty('host_name', this.get('value'));
     if (Em.isNone(host)) {
       this.get('controller').updateIsHostNameValidFlag(this.get("component.component_name"), this.get("component.serviceComponentId"), false);
       return;
@@ -84,11 +84,14 @@ App.InputHostView = Em.TextField.extend(App.SelectHost, {
 
   didInsertElement: function () {
     this.initContent();
-    var value = this.get('content').findProperty('host_name', this.get('component.selectedHost')).get('host_info');
+    var value = this.get('content').findProperty('host_name', this.get('component.selectedHost')).get('host_name');
     this.set("value", value);
     var content = this.get('content').mapProperty('host_info'),
       self = this,
-      typeahead = this.$().typeahead({items: 10, source: content, minLength: 0});
+      updater = function (item) {
+        return self.get('content').findProperty('host_info', item).get('host_name');
+      },
+      typeahead = this.$().typeahead({items: 10, source: content, updater: updater, minLength: 0});
     typeahead.on('blur', function() {
       self.change();
     }).on('keyup', function(e) {

ambari-web/test/views/wizard/step5_view_test.js

@@ -163,10 +163,10 @@ describe('App.InputHostView', function() {
       expect(view.initContent.calledOnce).to.equal(true);
     });
 
-    it('should set selectedHost host_info to value', function() {
+    it('should set selectedHost host_name to value', function() {
       view.set('value', '');
       view.didInsertElement();
-      expect(view.get('value')).to.equal('h1 info');
+      expect(view.get('value')).to.equal('h1');
     });
 
   });
@@ -177,7 +177,7 @@ describe('App.InputHostView', function() {
       view.get('controller').reopen({multipleComponents: ['HBASE_MASTER', 'ZOOKEEPER_SERVER']});
       view.set('component', {component_name: 'ZOOKEEPER_SERVER', serviceComponentId: 1});
       view.set('controller.hosts', [Em.Object.create({host_info: 'h1 info', host_name: 'h1'})]);
-      view.set('value', 'h1 info');
+      view.set('value', 'h1');
       view.set('controller.rebalanceComponentHostsCounter', 0);
       view.set('controller.componentToRebalance', '');
       sinon.stub(view.get('controller'), 'assignHostToMaster', Em.K);