github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/templates/jobs/job/task-group.hbs (about)

     1  {{title "Task group " model.name " - Job " model.job.name}}
     2  <div class="tabs is-subnav">
     3    <ul>
     4      <li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>
     5    </ul>
     6  </div>
     7  <section class="section">
     8    <h1 class="title with-flex">
     9      <span>{{model.name}}</span>
    10      {{exec/open-button job=model.job taskGroup=model}}
    11    </h1>
    12  
    13    <div class="boxed-section is-small">
    14      <div class="boxed-section-body inline-definitions">
    15        <span class="label">Task Group Details</span>
    16  
    17        <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
    18        <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
    19        <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
    20        <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
    21      </div>
    22    </div>
    23  
    24    <div class="boxed-section">
    25      <div class="boxed-section-head">
    26        <div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
    27      </div>
    28      <div class="boxed-section-body">
    29        {{#allocation-status-bar allocationContainer=model.summary class="split-view" as |chart|}}
    30          <ol class="legend">
    31            {{#each chart.data as |datum index|}}
    32              <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
    33                <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
    34                <span class="value">{{datum.value}}</span>
    35                <span class="label">
    36                  {{datum.label}}
    37                </span>
    38              </li>
    39            {{/each}}
    40          </ol>
    41        {{/allocation-status-bar}}
    42      </div>
    43    </div>
    44  
    45    <div class="boxed-section">
    46      <div class="boxed-section-head">
    47        Allocations
    48        {{search-box
    49          searchTerm=(mut searchTerm)
    50          placeholder="Search allocations..."
    51          onChange=(action resetPagination)
    52          class="is-inline pull-right"
    53          inputClass="is-compact"}}
    54      </div>
    55      <div class="boxed-section-body is-full-bleed">
    56        {{#if sortedAllocations}}
    57          {{#list-pagination
    58            source=sortedAllocations
    59            size=pageSize
    60            page=currentPage
    61            class="allocations" as |p|}}
    62            {{#list-table
    63              source=p.list
    64              sortProperty=sortProperty
    65              sortDescending=sortDescending
    66              class="with-foot" as |t|}}
    67              {{#t.head}}
    68                <th class="is-narrow"></th>
    69                {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
    70                {{#t.sort-by prop="createIndex" title="Create Index"}}Created{{/t.sort-by}}
    71                {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
    72                {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
    73                {{#t.sort-by prop="jobVersion"}}Version{{/t.sort-by}}
    74                {{#t.sort-by prop="node.shortId"}}Client{{/t.sort-by}}
    75                <th>Volume</th>
    76                <th>CPU</th>
    77                <th>Memory</th>
    78              {{/t.head}}
    79              {{#t.body as |row|}}
    80                {{allocation-row data-test-allocation=row.model.id allocation=row.model context="taskGroup" onClick=(action "gotoAllocation" row.model)}}
    81              {{/t.body}}
    82            {{/list-table}}
    83            <div class="table-foot">
    84              {{page-size-select onChange=(action resetPagination)}}
    85              <nav class="pagination">
    86                <div class="pagination-numbers">
    87                  {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
    88                </div>
    89                {{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
    90                {{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
    91                <ul class="pagination-list"></ul>
    92              </nav>
    93            </div>
    94          {{/list-pagination}}
    95        {{else}}
    96          {{#if allocations.length}}
    97            <div class="boxed-section-body">
    98              <div class="empty-message" data-test-empty-allocations-list>
    99                <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
   100                <p class="empty-message-body">No allocations match the term <strong>{{searchTerm}}</strong></p>
   101              </div>
   102            </div>
   103          {{else}}
   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 Allocations</h3>
   107                <p class="empty-message-body">No allocations have been placed.</p>
   108              </div>
   109            </div>
   110          {{/if}}
   111        {{/if}}
   112      </div>
   113    </div>
   114  
   115    {{lifecycle-chart tasks=model.tasks}}
   116  
   117    {{#if model.volumes.length}}
   118      <div data-test-volumes class="boxed-section">
   119        <div class="boxed-section-head">
   120          Volume Requirements
   121        </div>
   122        <div class="boxed-section-body is-full-bleed">
   123          {{#list-table source=model.volumes as |t|}}
   124            {{#t.head}}
   125              <th>Name</th>
   126              <th>Type</th>
   127              <th>Source</th>
   128              <th>Permissions</th>
   129            {{/t.head}}
   130            {{#t.body as |row|}}
   131              <tr data-test-volume>
   132                <td data-test-volume-name>
   133                  {{#if row.model.isCSI}}
   134                    {{#link-to "csi.volumes.volume" row.model.name (query-params volumeNamespace=row.model.namespace.id)}}
   135                      {{row.model.name}}
   136                    {{/link-to}}
   137                  {{else}}
   138                    {{row.model.name}}
   139                  {{/if}}
   140                </td>
   141                <td data-test-volume-type>{{row.model.type}}</td>
   142                <td data-test-volume-source>{{row.model.source}}</td>
   143                <td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
   144              </tr>
   145            {{/t.body}}
   146          {{/list-table}}
   147        </div>
   148      </div>
   149    {{/if}}
   150  </section>