open-nomad/ui/app/templates/jobs/job/allocations.hbs
Buck Doyle e525ff99d3
Remove inverse block for list-pagination (#6523)
As the angle bracket invocation RFC says:

> There is no dedicated syntax for passing an "else" block
> directly. If needed, that can be passed using the named
> blocks syntax.

https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block

Unfortunately, using a contextual component doesn’t help as
the yield inside that component will still result in content
rendering that would show when the source isn’t empty. So
we decided to change the interface so you have to check
whether the source is empty before using it, which aligns with
how list-table works.
2019-10-24 07:05:43 -05:00

73 lines
2.7 KiB
Handlebars

{{title "Job " job.name " allocations"}}
{{partial "jobs/job/subnav"}}
<section class="section">
{{#if allocations.length}}
<div class="content">
<div>
{{search-box
data-test-allocations-search
searchTerm=(mut searchTerm)
onChange=(action resetPagination)
placeholder="Search allocations..."}}
</div>
</div>
{{#if sortedAllocations}}
{{#list-pagination
source=sortedAllocations
size=pageSize
page=currentPage
class="allocations" as |p|}}
{{#list-table
source=p.list
sortProperty=sortProperty
sortDescending=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>CPU</th>
<th>Memory</th>
{{/t.head}}
{{#t.body as |row|}}
{{allocation-row
data-test-allocation=row.model.id
allocation=row.model
context="job"
onClick=(action "gotoAllocation" row.model)}}
{{/t.body}}
{{/list-table}}
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{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>
{{/list-pagination}}
{{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>{{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>