AMBARI-3999. Long host names are inconvenient for viewing in background operations popup. (xiwang via yusaku)

ambari-web/app/styles/application.less

@@ -1361,6 +1361,7 @@ width:100%;
     .host-name-icon-wrap{
       float: left;
       width: 50%;
+      white-space: nowrap;
     }
     .log-list-wrap {
       padding: 10px 10px 10px 20px;

ambari-web/app/templates/common/host_progress_popup.hbs

@@ -92,7 +92,7 @@
               <div class="host-name-icon-wrap">
                 <i {{bindAttr class="hostInfo.status hostInfo.icon"}}></i>
                 <a href="#">
-                  {{hostInfo.name}}
+                  {{hostInfo.displayName}}
                 </a>
               </div>
               <div class="progress-bar span2">

ambari-web/app/utils/host_progress_popup.js

@@ -394,6 +394,9 @@ App.HostPopup = Em.Object.create({
           var hostInfo = Ember.Object.create({
             name: hostName,
             publicName: _host.publicName,
+            displayName: function () {
+              return this.get('name').length < 43 ? this.get('name') : (this.get('name').substr(0, 40) + '...');
+            }.property('name'),
             progress: 0,
             status: App.format.taskStatus("PENDING"),
             serviceName: _host.serviceName,
@@ -530,7 +533,7 @@ App.HostPopup = Em.Object.create({
         isHostEmptyList: true,
         isTasksEmptyList: true,
         controller: this,
-        hosts: self.get("hosts"),
+        hosts: self.get('hosts'),
         services: self.get('servicesInfo'),
 
         tasks: function () {