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