open-nomad/ui/app/templates/jobs/index.hbs

132 lines
5.1 KiB
Handlebars
Raw Normal View History

{{page-title "Jobs"}}
2018-07-25 22:19:43 +00:00
<section class="section">
{{#if this.isForbidden}}
<ForbiddenMessage />
2018-07-25 22:19:43 +00:00
{{else}}
<div class="toolbar">
<div class="toolbar-item">
{{#if this.visibleJobs.length}}
<SearchBox
data-test-jobs-search
@searchTerm={{mut this.searchTerm}}
@onChange={{action this.resetPagination}}
@placeholder="Search jobs..." />
{{/if}}
</div>
{{#if (media "isMobile")}}
<div class="toolbar-item is-right-aligned">
{{#if (can "run job")}}
<LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
{{else}}
<button
data-test-run-job
class="button is-primary is-disabled tooltip is-right-aligned"
aria-label="You dont have permission to run jobs"
disabled
type="button"
>Run Job</button>
{{/if}}
</div>
{{/if}}
<div class="toolbar-item is-right-aligned is-mobile-full-width">
<div class="button-bar">
<MultiSelectDropdown
2019-01-24 04:35:51 +00:00
data-test-type-facet
@label="Type"
@options={{this.optionsType}}
@selection={{this.selectionType}}
@onSelect={{action this.setFacetQueryParam "qpType"}} />
<MultiSelectDropdown
2019-01-24 04:35:51 +00:00
data-test-status-facet
@label="Status"
@options={{this.optionsStatus}}
@selection={{this.selectionStatus}}
@onSelect={{action this.setFacetQueryParam "qpStatus"}} />
<MultiSelectDropdown
2019-01-24 04:35:51 +00:00
data-test-datacenter-facet
@label="Datacenter"
@options={{this.optionsDatacenter}}
@selection={{this.selectionDatacenter}}
@onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
<MultiSelectDropdown
2019-01-24 04:35:51 +00:00
data-test-prefix-facet
@label="Prefix"
@options={{this.optionsPrefix}}
@selection={{this.selectionPrefix}}
@onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
</div>
</div>
{{#if (not (media "isMobile"))}}
<div class="toolbar-item is-right-aligned">
{{#if (can "run job")}}
<LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
{{else}}
<button
data-test-run-job
class="button is-primary is-disabled tooltip is-right-aligned"
aria-label="You dont have permission to run jobs"
disabled
type="button"
>Run Job</button>
{{/if}}
</div>
{{/if}}
</div>
{{#if this.sortedJobs}}
<ListPagination
@source={{this.sortedJobs}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.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|>
<JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @onClick={{action "gotoJob" row.model}} />
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedJobs.length}}
{{#if this.searchTerm}}
<em>({{dec this.sortedJobs.length this.filteredJobs.length}} hidden by search term)</em>
{{/if}}
</div>
<p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
<p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
<ul class="pagination-list"></ul>
</nav>
</div>
</ListPagination>
2018-07-25 22:19:43 +00:00
{{else}}
<div data-test-empty-jobs-list class="empty-message">
{{#if (eq this.visibleJobs.length 0)}}
2018-07-25 22:19:43 +00:00
<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 this.filteredJobs.length 0)}}
2019-01-24 04:35:51 +00:00
<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 this.searchTerm}}
2018-07-25 22:19:43 +00:00
<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>{{this.searchTerm}}</strong></p>
2018-07-25 22:19:43 +00:00
{{/if}}
</div>
{{/if}}
2018-07-25 22:19:43 +00:00
{{/if}}
</section>