da65595db0
This changes the templates so the element that contains the search box is always present, instead hiding only the box itself when there’s nothing to search. Keeping the empty element lets it take up its flexbox space so the facets will no longer be in the centre.
108 lines
4 KiB
Handlebars
108 lines
4 KiB
Handlebars
<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>
|
|
{{#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>
|
|
{{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>
|
|
{{/list-pagination}}
|
|
{{/if}}
|
|
</section>
|