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