e525ff99d3
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.
111 lines
4.1 KiB
Handlebars
111 lines
4.1 KiB
Handlebars
{{title "Jobs"}}
|
|
<section class="section">
|
|
{{#if isForbidden}}
|
|
{{partial "partials/forbidden-message"}}
|
|
{{else}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
{{#if visibleJobs.length}}
|
|
{{search-box
|
|
data-test-jobs-search
|
|
searchTerm=(mut searchTerm)
|
|
onChange=(action resetPagination)
|
|
placeholder="Search jobs..."}}
|
|
{{/if}}
|
|
</div>
|
|
{{#if (media "isMobile")}}
|
|
<div class="toolbar-item is-right-aligned">
|
|
{{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
|
|
</div>
|
|
{{/if}}
|
|
<div class="toolbar-item is-right-aligned is-mobile-full-width">
|
|
<div class="button-bar">
|
|
{{multi-select-dropdown
|
|
data-test-type-facet
|
|
label="Type"
|
|
options=optionsType
|
|
selection=selectionType
|
|
onSelect=(action setFacetQueryParam "qpType")}}
|
|
{{multi-select-dropdown
|
|
data-test-status-facet
|
|
label="Status"
|
|
options=optionsStatus
|
|
selection=selectionStatus
|
|
onSelect=(action setFacetQueryParam "qpStatus")}}
|
|
{{multi-select-dropdown
|
|
data-test-datacenter-facet
|
|
label="Datacenter"
|
|
options=optionsDatacenter
|
|
selection=selectionDatacenter
|
|
onSelect=(action setFacetQueryParam "qpDatacenter")}}
|
|
{{multi-select-dropdown
|
|
data-test-prefix-facet
|
|
label="Prefix"
|
|
options=optionsPrefix
|
|
selection=selectionPrefix
|
|
onSelect=(action setFacetQueryParam "qpPrefix")}}
|
|
</div>
|
|
</div>
|
|
{{#if (not (media "isMobile"))}}
|
|
<div class="toolbar-item is-right-aligned">
|
|
{{#link-to "jobs.run" data-test-run-job class="button is-primary"}}Run Job{{/link-to}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{#if sortedJobs}}
|
|
{{#list-pagination
|
|
source=sortedJobs
|
|
size=pageSize
|
|
page=currentPage as |p|}}
|
|
{{#list-table
|
|
source=p.list
|
|
sortProperty=sortProperty
|
|
sortDescending=sortDescending
|
|
class="with-foot" as |t|}}
|
|
{{#t.head}}
|
|
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
|
|
{{#t.sort-by prop="status"}}Status{{/t.sort-by}}
|
|
{{#t.sort-by prop="type"}}Type{{/t.sort-by}}
|
|
{{#t.sort-by prop="priority"}}Priority{{/t.sort-by}}
|
|
<th>Groups</th>
|
|
<th class="is-3">Summary</th>
|
|
{{/t.head}}
|
|
{{#t.body key="model.id" as |row|}}
|
|
{{job-row data-test-job-row=row.model.plainId job=row.model onClick=(action "gotoJob" row.model)}}
|
|
{{/t.body}}
|
|
{{/list-table}}
|
|
<div class="table-foot">
|
|
<nav class="pagination">
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{sortedJobs.length}}
|
|
{{#if searchTerm}}
|
|
<em>({{dec sortedJobs.length filteredJobs.length}} hidden by search term)</em>
|
|
{{/if}}
|
|
</div>
|
|
{{#p.prev class="pagination-previous"}} < {{/p.prev}}
|
|
{{#p.next class="pagination-next"}} > {{/p.next}}
|
|
<ul class="pagination-list"></ul>
|
|
</nav>
|
|
</div>
|
|
{{/list-pagination}}
|
|
{{else}}
|
|
<div data-test-empty-jobs-list class="empty-message">
|
|
{{#if (eq visibleJobs.length 0)}}
|
|
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
|
|
<p class="empty-message-body">
|
|
The cluster is currently empty.
|
|
</p>
|
|
{{else if (eq filteredJobs.length 0)}}
|
|
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
|
|
<p class="empty-message-body">
|
|
No jobs match your current filter selection.
|
|
</p>
|
|
{{else if searchTerm}}
|
|
<h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
|
|
<p class="empty-message-body">No jobs match the term <strong>{{searchTerm}}</strong></p>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</section>
|