AMBARI-6314. UI: Assign Slaves and Clients page shows hidden info in scrollbar. (xiwang via yusaku)

ambari-web/app/styles/application.less

@@ -749,6 +749,17 @@ h1 {
     .progress {
       margin-bottom: 0;
     }
+    #confirm-hosts-table {
+      td.host {
+        max-width: 290px;
+      }
+      td.host .trim_hostname {
+        max-width: 97% !important;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
   #step4, #step5, #step6 {
     a.selected {
@@ -766,6 +777,14 @@ h1 {
     .pre-scrollable {
       max-height: 440px;
       position: relative;
+      #component_assign_table {
+        .trim_hostname {
+          max-width: 180px;
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
     }
     .spinner-overlay {
       position: absolute;
@@ -848,6 +867,15 @@ h1 {
       th.messgage {
         width: 35%;
       }
+      td.host {
+        max-width: 290px;
+      }
+      td.host .trim_hostname {
+        max-width: 97% !important;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       .progress-bar {
         width: 73%;
         .progress {

ambari-web/app/templates/wizard/step3.hbs

@@ -54,7 +54,7 @@
     </div>
 
     <div class="pre-scrollable" style="max-height: 440px;">
-      <table class="table table-bordered table-striped">
+      <table id="confirm-hosts-table" class="table table-bordered table-striped">
         <thead>
         <tr>
           <th class="tinyspan">
@@ -77,8 +77,8 @@
               <td>
                 {{view Ember.Checkbox checkedBinding="host.isChecked"}}
               </td>
-              <td>
-                {{host.name}}
+              <td class="host">
+                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
               </td>
               <td>
                 <div {{bindAttr class="host.bootBarColor host.isBootDone::progress-striped host.isBootDone::active :progress"}}>

ambari-web/app/templates/wizard/step6.hbs

@@ -44,7 +44,7 @@
           {{#each host in view.pageContent}}
             <tr>
               {{#view App.WizardStep6HostView hostBinding="host" }}
-                {{host.hostName}}
+                <span class="trim_hostname">{{host.hostName}}</span>
                 {{#if host.hasMaster}}
                   <i class=icon-asterisks>&#10037;</i>
                 {{/if}}

ambari-web/app/templates/wizard/step9.hbs

@@ -79,8 +79,8 @@
           {{#if view.pageContent}}
             {{#each host in view.pageContent}}
               {{#view App.HostStatusView objBinding="host" controllerBinding="controller"}}
-              <td>
-                {{host.name}}
+              <td class="host">
+                <span title="{{unbound host.name}}" class="trim_hostname">{{host.name}}</span>
               </td>
               <td>
                 <div class="progress-bar pull-left">