hadoop/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/app/templates/yarn-app.hbs

<div class="container-fluid">
  <!-- app table -->
  <div class="row">
    <div class="col-md-12 container-fluid">
      <div class="panel panel-default">
          <div class="panel-heading">
            Application Basic Information
          </div>
          {{app-table table-id="app-table" app=model.app}}
       </div>
    </div>
  </div>

  <!-- diag info and other infos -->
  <div class="row">
    <!-- diag info -->
    <div class="col-md-4 container-fluid">
      {{#if model.app.isFailed}}
        <div class="panel panel-danger">
          <div class="panel-heading">
            Diagnostics
          </div>
          <div class="panel-body">{{model.app.diagnostics}}</div>
        </div>
      {{else}}
        <div class="panel panel-default">
          <div class="panel-body">
            Diagnostics
          </div>
          <div class="panel-footer">{{model.app.diagnostics}}</div>
        </div>
      {{/if}}
    </div>

    <div class="col-md-5 container-fluid">
      <div class="panel panel-default">
        <div class="panel-heading">Scheduling Info</div>
        <table class="table">
          <tbody>
            <tr>
              <td>Allocated Resource</td>
              <td>{{model.app.allocatedResource}}</td>
            </tr>
            <tr>
              <td>Running Containers</td>
              <td>{{model.app.runningContainers}}</td>
            </tr>
            <tr>
              <td>Preempted Resource</td>
              <td>{{model.app.preemptedResource}}</td>
            </tr>
            <tr>
              <td>Num Non-AM container preempted</td>
              <td>{{model.app.numAMContainerPreempted}}</td>
            </tr>
            <tr>
              <td>Num AM container preempted</td>
              <td>{{model.app.numAMContainerPreempted}}</td>
            </tr>
            <tr>
              <td>Aggregated Resource Usage</td>
              <td>{{model.app.aggregatedResourceUsage}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- other info -->
    <div class="col-md-3 container-fluid">
      <div class="panel panel-default">
        <div class="panel-heading">Other Info</div>
        <table class="table">
          <tbody>
            <tr>
              <td>AM Container Log</td>
              <td><a href={{model.app.amContainerLogs}}>Link</a></td>
            </tr>
            <tr>
              <td>AM Host Http Addr</td>
              <td><a href={{model.app.amHostHttpAddress}}>Link</a></td>
            </tr>
            <tr>
              <td>Log Aggregation Status</td>
              <td>{{model.app.logAggregationStatus}}</td>
            </tr>
            <tr>
              <td>Is Unmanaged AM</td>
              <td>{{model.app.unmanagedApplication}}</td>
            </tr>
            <tr>
              <td>AM Node Label Expression</td>
              <td>{{model.app.amNodeLabelExpression}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

<!--
  <div class="row">
    <div class="col-md-12 container-fluid">
      <div class="panel panel-default">
          <div class="panel-heading">
            Application Attempts
          </div>
          <table id="app-attempt-table" class="table table-striped table-bordered" cellspacing="0" width="100%" height="100%">
            <thead>
              <tr>
                    <th>Start Time</th>
                    <th>Master ContainerId</th>
                    <th>Node Http Address</th>
                    <th>Node Id</th>
                    <th>Logs Link</th>
                  </tr>
            </thead>
            <tbody>
              {{#each model.attempts as |attempt|}}
                <tr>
                  <td>{{attempt.startTime}}</td>
                  <td>{{attempt.containerId}}</td>
                  <td><a href={{attempt.nodeHttpAddress}}>{{attempt.nodeHttpAddress}}</a></td>
                  <td>{{attempt.nodeId}}</td>
                  <td><a href={{attempt.logsLink}}>link</a></td>
                </tr>
              {{/each}}
            </tbody>
        </table>
        </div>
    </div>
  </div>
-->
  <!-- timeline view of children -->
  <div class="row">
     {{timeline-view parent-id="attempt-timeline-div" my-id="timeline-view" height="100%" rmModel=model.attempts label="shortAppAttemptId" attemptModel=true}}
  </div>
</div>

<!--
{{simple-table table-id="app-attempt-table" paging=false bFilter=false}}
-->


{{outlet}}