open-nomad/ui/app/templates/jobs/job/allocations.hbs
2021-12-17 19:47:25 -05:00

105 lines
4.1 KiB
Handlebars

{{page-title "Job " this.job.name " allocations"}}
<JobSubnav @job={{this.job}} />
<section class="section">
{{#if this.model.allocations.length}}
<div class="toolbar">
<div class="toolbar-item">
<SearchBox
data-test-allocations-search
@searchTerm={{mut this.searchTerm}}
@onChange={{action this.resetPagination}}
@placeholder="Search allocations..." />
</div>
<div class="toolbar-item is-right-aligned">
<div class="button-bar">
<MultiSelectDropdown
data-test-allocation-status-facet
@label="Status"
@options={{this.optionsAllocationStatus}}
@selection={{this.selectionStatus}}
@onSelect={{action this.setFacetQueryParam "qpStatus"}}
/>
<MultiSelectDropdown
data-test-allocation-client-facet
@label="Client"
@options={{this.optionsClients}}
@selection={{this.selectionClient}}
@onSelect={{action this.setFacetQueryParam "qpClient"}}
/>
<MultiSelectDropdown
data-test-task-group-facet
@label="Task Group"
@options={{this.optionsTaskGroups}}
@selection={{this.selectionTaskGroup}}
@onSelect={{action this.setFacetQueryParam "qpTaskGroup"}}
/>
<MultiSelectDropdown
data-test-job-version-facet
@label="Job Version"
@options={{this.optionsJobVersions}}
@selection={{this.selectionJobVersion}}
@onSelect={{action this.setFacetQueryParam "qpJobVersion"}}
/>
</div>
</div>
</div>
{{#if this.sortedAllocations}}
<ListPagination
@source={{this.sortedAllocations}}
@size={{this.pageSize}}
@page={{this.currentPage}}
@class="allocations" as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
<t.sort-by @prop="shortId">ID</t.sort-by>
<t.sort-by @prop="taskGroupName">Task Group</t.sort-by>
<t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
<t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
<t.sort-by @prop="statusIndex">Status</t.sort-by>
<t.sort-by @prop="jobVersion">Version</t.sort-by>
<t.sort-by @prop="node.shortId">Client</t.sort-by>
<th>Volume</th>
<th>CPU</th>
<th>Memory</th>
</t.head>
<t.body as |row|>
<AllocationRow
@data-test-allocation={{row.model.id}}
@allocation={{row.model}}
@context="job"
@onClick={{action "gotoAllocation" row.model}} />
</t.body>
</ListTable>
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedAllocations.length}}
</div>
<p.prev @class="pagination-previous"> &lt; </p.prev>
<p.next @class="pagination-next"> &gt; </p.next>
<ul class="pagination-list"></ul>
</nav>
</div>
</ListPagination>
{{else}}
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
<p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
</div>
</div>
{{/if}}
{{else}}
<div class="boxed-section-body">
<div class="empty-message" data-test-empty-allocations-list>
<h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
<p class="empty-message-body">No allocations have been placed.</p>
</div>
</div>
{{/if}}
</section>