github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/templates/jobs/job/allocations.hbs (about)

     1  {{page-title "Job " this.job.name " allocations"}}
     2  <JobSubnav @job={{this.job}} />
     3  <section class="section">
     4    {{#if this.allocations.length}}
     5      <div class="toolbar">
     6        <div class="toolbar-item">
     7          <SearchBox
     8            data-test-allocations-search
     9            @searchTerm={{mut this.searchTerm}}
    10            @onChange={{action this.resetPagination}}
    11            @placeholder="Search allocations..." />
    12        </div>
    13        <div class="toolbar-item is-right-aligned">
    14          <div class="button-bar">
    15            <MultiSelectDropdown
    16              data-test-allocation-status-facet
    17              @label="Status"
    18              @options={{this.optionsAllocationStatus}}
    19              @selection={{this.selectionStatus}}
    20              @onSelect={{action this.setFacetQueryParam "qpStatus"}}
    21            />
    22            <MultiSelectDropdown
    23              data-test-allocation-client-facet
    24              @label="Client"
    25              @options={{this.optionsClients}}
    26              @selection={{this.selectionClient}}
    27              @onSelect={{action this.setFacetQueryParam "qpClient"}}
    28            />
    29            <MultiSelectDropdown
    30              data-test-allocation-task-group-facet
    31              @label="Task Group"
    32              @options={{this.optionsTaskGroups}}
    33              @selection={{this.selectionTaskGroup}}
    34              @onSelect={{action this.setFacetQueryParam "qpTaskGroup"}}
    35            />
    36          </div>
    37        </div>
    38      </div>
    39      {{#if this.sortedAllocations}}
    40        <ListPagination
    41          @source={{this.sortedAllocations}}
    42          @size={{this.pageSize}}
    43          @page={{this.currentPage}}
    44          @class="allocations" as |p|>
    45          <ListTable
    46            @source={{p.list}}
    47            @sortProperty={{this.sortProperty}}
    48            @sortDescending={{this.sortDescending}}
    49            @class="with-foot with-collapsed-borders" as |t|>
    50            <t.head>
    51              <th class="is-narrow"></th>
    52              <t.sort-by @prop="shortId">ID</t.sort-by>
    53              <t.sort-by @prop="taskGroupName">Task Group</t.sort-by>
    54              <t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
    55              <t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
    56              <t.sort-by @prop="statusIndex">Status</t.sort-by>
    57              <t.sort-by @prop="jobVersion">Version</t.sort-by>
    58              <t.sort-by @prop="node.shortId">Client</t.sort-by>
    59              <th>Volume</th>
    60              <th>CPU</th>
    61              <th>Memory</th>
    62            </t.head>
    63            <t.body as |row|>
    64              <AllocationRow
    65                {{keyboard-shortcut 
    66                  enumerated=true
    67                  action=(action "gotoAllocation" row.model)
    68                }}
    69                @data-test-allocation={{row.model.id}}
    70                @allocation={{row.model}}
    71                @context="job"
    72                @onClick={{action "gotoAllocation" row.model}} />
    73                {{#each row.model.states as |task|}}
    74                  <TaskSubRow @active={{eq this.activeTask (concat task.allocation.id "-" task.name)}} @onSetActiveTask={{action 'setActiveTaskQueryParam'}} @namespan="9" @taskState={{task}} />
    75                {{/each}}
    76  
    77            </t.body>
    78          </ListTable>
    79          <div class="table-foot">
    80            <nav class="pagination">
    81              <div class="pagination-numbers">
    82                {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedAllocations.length}}
    83              </div>
    84              <p.prev @class="pagination-previous"> &lt; </p.prev>
    85              <p.next @class="pagination-next"> &gt; </p.next>
    86              <ul class="pagination-list"></ul>
    87            </nav>
    88          </div>
    89        </ListPagination>
    90      {{else}}
    91        <div class="boxed-section-body">
    92          <div class="empty-message" data-test-empty-allocations-list>
    93            <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
    94            <p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
    95          </div>
    96        </div>
    97      {{/if}}
    98    {{else}}
    99      <div class="boxed-section-body">
   100        <div class="empty-message" data-test-empty-allocations-list>
   101          <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
   102          <p class="empty-message-body">No allocations have been placed.</p>
   103        </div>
   104      </div>
   105    {{/if}}
   106  </section>