github.com/blixtra/nomad@v0.7.2-0.20171221000451-da9a1d7bb050/ui/app/templates/jobs/job/task-group.hbs (about)

     1  {{#global-header class="page-header"}}
     2    {{#each breadcrumbs as |breadcrumb|}}
     3      {{#link-to
     4        params=(append
     5          breadcrumb.args
     6          (query-params jobNamespace=(or model.namespace.id "default"))
     7        )
     8        class="breadcrumb"}}
     9        {{breadcrumb.label}}
    10      {{/link-to}}
    11    {{/each}}
    12  {{/global-header}}
    13  {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
    14    <div class="tabs is-subnav">
    15      <ul>
    16        <li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
    17      </ul>
    18    </div>
    19    <section class="section">
    20      <h1 class="title">
    21        {{model.name}}
    22      </h1>
    23  
    24      <div class="boxed-section is-small">
    25        <div class="boxed-section-body inline-definitions">
    26          <span class="label">Task Group Details</span>
    27  
    28          <span class="pair"><span class="term"># Tasks</span> {{model.tasks.length}}</span>
    29          <span class="pair"><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
    30          <span class="pair"><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
    31          <span class="pair"><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
    32        </div>
    33      </div>
    34  
    35      <div class="boxed-section">
    36        <div class="boxed-section-head">
    37          <div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
    38        </div>
    39        <div class="boxed-section-body">
    40          {{#allocation-status-bar allocationContainer=model.summary class="split-view" as |chart|}}
    41            <ol class="legend">
    42              {{#each chart.data as |datum index|}}
    43                <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
    44                  <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
    45                  <span class="value">{{datum.value}}</span>
    46                  <span class="label">
    47                    {{datum.label}}
    48                  </span>
    49                </li>
    50              {{/each}}
    51            </ol>
    52          {{/allocation-status-bar}}
    53        </div>
    54      </div>
    55  
    56      <div class="boxed-section">
    57        <div class="boxed-section-head">
    58          Allocations
    59          {{search-box
    60            searchTerm=(mut searchTerm)
    61            placeholder="Search allocations..."
    62            class="is-inline pull-right"
    63            inputClass="is-compact"}}
    64        </div>
    65        <div class="boxed-section-body is-full-bleed">
    66          {{#list-pagination
    67            source=sortedAllocations
    68            size=pageSize
    69            page=currentPage
    70            class="allocations" as |p|}}
    71            {{#list-table
    72              source=p.list
    73              sortProperty=sortProperty
    74              sortDescending=sortDescending
    75              class="with-foot" as |t|}}
    76              {{#t.head}}
    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 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            <div class="boxed-section-body">
   102              <div class="empty-message">
   103                <h3 class="empty-message-headline">No Matches</h3>
   104                <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
   105              </div>
   106            </div>
   107          {{/list-pagination}}
   108        </div>
   109      </div>
   110    </section>
   111  {{/gutter-menu}}