github.com/ferranbt/nomad@v0.9.3-0.20190607002617-85c449b7667c/ui/app/templates/jobs/job/task-group.hbs (about)

     1  <div class="tabs is-subnav">
     2    <ul>
     3      <li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
     4    </ul>
     5  </div>
     6  <section class="section">
     7    <h1 class="title">
     8      {{model.name}}
     9    </h1>
    10  
    11    <div class="boxed-section is-small">
    12      <div class="boxed-section-body inline-definitions">
    13        <span class="label">Task Group Details</span>
    14  
    15        <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
    16        <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
    17        <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
    18        <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
    19      </div>
    20    </div>
    21  
    22    <div class="boxed-section">
    23      <div class="boxed-section-head">
    24        <div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
    25      </div>
    26      <div class="boxed-section-body">
    27        {{#allocation-status-bar allocationContainer=model.summary class="split-view" as |chart|}}
    28          <ol class="legend">
    29            {{#each chart.data as |datum index|}}
    30              <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
    31                <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
    32                <span class="value">{{datum.value}}</span>
    33                <span class="label">
    34                  {{datum.label}}
    35                </span>
    36              </li>
    37            {{/each}}
    38          </ol>
    39        {{/allocation-status-bar}}
    40      </div>
    41    </div>
    42  
    43    <div class="boxed-section">
    44      <div class="boxed-section-head">
    45        Allocations
    46        {{search-box
    47          searchTerm=(mut searchTerm)
    48          placeholder="Search allocations..."
    49          onChange=(action resetPagination)
    50          class="is-inline pull-right"
    51          inputClass="is-compact"}}
    52      </div>
    53      <div class="boxed-section-body is-full-bleed">
    54        {{#list-pagination
    55          source=sortedAllocations
    56          size=pageSize
    57          page=currentPage
    58          class="allocations" as |p|}}
    59          {{#list-table
    60            source=p.list
    61            sortProperty=sortProperty
    62            sortDescending=sortDescending
    63            class="with-foot" as |t|}}
    64            {{#t.head}}
    65              <th class="is-narrow"></th>
    66              {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
    67              {{#t.sort-by prop="createIndex" title="Create Index"}}Created{{/t.sort-by}}
    68              {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
    69              {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
    70              {{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
    71              {{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
    72              <th>CPU</th>
    73              <th>Memory</th>
    74            {{/t.head}}
    75            {{#t.body as |row|}}
    76              {{allocation-row data-test-allocation=row.model.id allocation=row.model context="taskGroup" onClick=(action "gotoAllocation" row.model)}}
    77            {{/t.body}}
    78          {{/list-table}}
    79          <div class="table-foot">
    80            <nav class="pagination">
    81              <div class="pagination-numbers">
    82                {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
    83              </div>
    84              {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
    85              {{#p.next class="pagination-next"}} &gt; {{/p.next}}
    86              <ul class="pagination-list"></ul>
    87            </nav>
    88          </div>
    89        {{else}}
    90          {{#if allocations.length}}
    91            <div class="boxed-section-body">
    92              <div class="empty-message" data-test-empty-allocations-list>
    93                <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
    94                <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
    95              </div>
    96            </div>
    97          {{else}}
    98            <div class="boxed-section-body">
    99              <div class="empty-message" data-test-empty-allocations-list>
   100                <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
   101                <p class="empty-message-body">No allocations have been placed.</p>
   102              </div>
   103            </div>
   104          {{/if}}
   105        {{/list-pagination}}
   106      </div>
   107    </div>
   108  </section>