YARN-5488. [YARN-3368] Applications table overflows beyond the page boundary(Harish Jaiprakash via Sunil G)

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css

@@ -273,3 +273,7 @@ li a.navigation-link.ember-view {
   right: 20px;
   top: 3px;
 }
+
+.x-scroll {
+  overflow-x: scroll;
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/yarn-app.hbs

@@ -49,55 +49,57 @@
         <div class="col-md-12 container-fluid">
           <div class="panel panel-default">
             <div class="panel-heading">Basic Info</div>
-            <table class="display table table-striped table-bordered"
-                   cellspacing="0" width="100%">
-              <thead>
-                <tr>
-                  <th>Application ID</th>
-                  <th>Name</th>
-                  <th>User</th>
-                  <th>Queue</th>
-                  <th>State</th>
-                  <th>Final Status</th>
-                  <th>Start Time</th>
-                  <th>Elapsed Time</th>
-                  <th>Finished Time</th>
-                  <th>Priority</th>
-                  <th>Progress</th>
-                  <th>Is Unmanaged AM</th>
-                </tr>
-              </thead>
+            <div class="x-scroll">
+              <table class="display table table-striped table-bordered"
+                     cellspacing="0" width="100%">
+                <thead>
+                  <tr>
+                    <th>Application ID</th>
+                    <th>Name</th>
+                    <th>User</th>
+                    <th>Queue</th>
+                    <th>State</th>
+                    <th>Final Status</th>
+                    <th>Start Time</th>
+                    <th>Elapsed Time</th>
+                    <th>Finished Time</th>
+                    <th>Priority</th>
+                    <th>Progress</th>
+                    <th>Is Unmanaged AM</th>
+                  </tr>
+                </thead>
 
-              <tbody>
-                <tr>
-                  <td>{{model.app.id}}</td>
-                  <td>{{model.app.appName}}</td>
-                  <td>{{model.app.user}}</td>
-                  <td>{{model.app.queue}}</td>
-                  <td>{{model.app.state}}</td>
-                  <td>
-                    <span class={{model.app.finalStatusStyle}}>
-                      {{model.app.finalStatus}}
-                    </span>
-                  </td>
-                  <td>{{model.app.startTime}}</td>
-                  <td>{{model.app.elapsedTime}}</td>
-                  <td>{{model.app.validatedFinishedTs}}</td>
-                  <td>{{model.app.priority}}</td>
-                  <td>
-                    <div class="progress" style="margin-bottom: 0;">
-                      <div class="progress-bar" role="progressbar"
-                           aria-valuenow="60" aria-valuemin="0"
-                           aria-valuemax="100"
-                           style={{model.app.progressStyle}}>
-                        {{model.app.progress}}%
+                <tbody>
+                  <tr>
+                    <td>{{model.app.id}}</td>
+                    <td>{{model.app.appName}}</td>
+                    <td>{{model.app.user}}</td>
+                    <td>{{model.app.queue}}</td>
+                    <td>{{model.app.state}}</td>
+                    <td>
+                      <span class={{model.app.finalStatusStyle}}>
+                        {{model.app.finalStatus}}
+                      </span>
+                    </td>
+                    <td>{{model.app.startTime}}</td>
+                    <td>{{model.app.elapsedTime}}</td>
+                    <td>{{model.app.validatedFinishedTs}}</td>
+                    <td>{{model.app.priority}}</td>
+                    <td>
+                      <div class="progress" style="margin-bottom: 0;">
+                        <div class="progress-bar" role="progressbar"
+                             aria-valuenow="60" aria-valuemin="0"
+                             aria-valuemax="100"
+                             style={{model.app.progressStyle}}>
+                          {{model.app.progress}}%
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                  <td>{{model.app.unmanagedApplication}}</td>
-                </tr>
-              </tbody>
-            </table>
+                    </td>
+                    <td>{{model.app.unmanagedApplication}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
@@ -248,4 +250,4 @@
   </div>
 </div>
 {{/if}}
-{{outlet}}
+{{outlet}}