open-nomad/ui/app/templates/allocations/allocation/index.hbs

<section class="section">
  <h1 data-test-title class="title">
    Allocation {{model.name}}
    <span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
    <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
  </h1>

  <div class="boxed-section is-small">
    <div data-test-allocation-details class="boxed-section-body inline-definitions">
      <span class="label">Allocation Details</span>
      <span class="pair job-link"><span class="term">Job</span>
        {{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id) data-test-job-link}}{{model.job.name}}{{/link-to}}
      </span>
      <span class="pair node-link"><span class="term">Client</span>
        {{#link-to "clients.client" model.node data-test-client-link}}{{model.node.shortId}}{{/link-to}}
      </span>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head is-hollow">
      Resource Utilization
    </div>
    <div class="boxed-section-body">
      <div class="columns">
        <div class="column">
          {{primary-metric resource=model metric="cpu"}}
        </div>
        <div class="column">
          {{primary-metric resource=model metric="memory"}}
        </div>
      </div>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      Tasks
    </div>
    <div class="boxed-section-body {{if sortedStates.length "is-full-bleed"}}">
      {{#if sortedStates.length}}
        {{#list-table
          source=sortedStates
          sortProperty=sortProperty
          sortDescending=sortDescending
          class="is-striped" as |t|}}
          {{#t.head}}
            <th class="is-narrow"></th>
            {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
            {{#t.sort-by prop="state"}}State{{/t.sort-by}}
            <th>Last Event</th>
            {{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
            <th>Addresses</th>
            <th>CPU</th>
            <th>Memory</th>
          {{/t.head}}
          {{#t.body as |row|}}
            {{task-row
              data-test-task-row=row.model.name
              task=row.model
              onClick=(action "taskClick" row.model.allocation row.model)}}
          {{/t.body}}
        {{/list-table}}
      {{else}}
        <div data-test-empty-tasks-list class="empty-message">
          <h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3>
          <p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p>
        </div>
      {{/if}}
    </div>
  </div>

  {{#if model.hasRescheduleEvents}}
    <div class="boxed-section" data-test-reschedule-events>
      <div class="boxed-section-head is-hollow">
        Reschedule Events
      </div>
      <div class="boxed-section-body">
        {{reschedule-event-timeline allocation=model}}
      </div>
    </div>
  {{/if}}
</section>