github.com/emate/nomad@v0.8.2-wo-binpacking/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                {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
    77                {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
    78                {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
    79                {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
    80                {{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
    81                {{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
    82                <th>CPU</th>
    83                <th>Memory</th>
    84              {{/t.head}}
    85              {{#t.body as |row|}}
    86                {{allocation-row data-test-allocation allocation=row.model context="job" onClick=(action "gotoAllocation" row.model)}}
    87              {{/t.body}}
    88            {{/list-table}}
    89            <div class="table-foot">
    90              <nav class="pagination">
    91                <div class="pagination-numbers">
    92                  {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
    93                </div>
    94                {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
    95                {{#p.next class="pagination-next"}} &gt; {{/p.next}}
    96                <ul class="pagination-list"></ul>
    97              </nav>
    98            </div>
    99          {{else}}
   100            {{#if allocations.length}}
   101              <div class="boxed-section-body">
   102                <div class="empty-message" data-test-empty-allocations-list>
   103                  <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
   104                  <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
   105                </div>
   106              </div>
   107            {{else}}
   108              <div class="boxed-section-body">
   109                <div class="empty-message" data-test-empty-allocations-list>
   110                  <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
   111                  <p class="empty-message-body">No allocations have been placed.</p>
   112                </div>
   113              </div>
   114            {{/if}}
   115          {{/list-pagination}}
   116        </div>
   117      </div>
   118    </section>
   119  {{/gutter-menu}}