open-nomad/ui/app/templates/jobs/job/allocations.hbs
2021-11-20 10:04:15 -05:00

125 lines
3.7 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{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"}}
/>
</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}}
{{p.endsAt}}
of
{{this.sortedAllocations.length}}
</div>
<p.prev @class="pagination-previous" />
<p.next @class="pagination-next">
>
</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>