github.com/anuvu/nomad@v0.8.7-atom1/ui/app/templates/jobs/job/task-group.hbs (about)

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