Apache
/
hadoop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
sunilg 2016-08-12 14:51:03 +05:30 committed by Wangda Tan
parent b61e60fb92
commit 23b0287f62
2 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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