luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

chore: prettify children template

Browse source
This commit is contained in:
Jai Bhagat 2022-01-03 12:04:44 -05:00
parent a12e60c822
commit 0079fc3b6f
1 changed files with 56 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
ui/app/templates/components/job-page/parts/children.hbs
View file

@ -5,7 +5,8 @@
<LinkTo <LinkTo
data-test-dispatch-button data-test-dispatch-button
@route="jobs.job.dispatch" @route="jobs.job.dispatch"
class="button is-primary is-compact pull-right"> class="button is-primary is-compact pull-right"
>
Dispatch Job Dispatch Job
</LinkTo> </LinkTo>
{{else}} {{else}}
@ -14,7 +15,8 @@
class="button is-disabled is-primary is-compact pull-right tooltip multiline" class="button is-disabled is-primary is-compact pull-right tooltip multiline"
aria-label="You don’t have permission to dispatch jobs" aria-label="You don’t have permission to dispatch jobs"
disabled disabled
type="button"> type="button"
>
Dispatch Job Dispatch Job
</button> </button>
{{/if}} {{/if}}
@ -25,44 +27,79 @@
<ListPagination <ListPagination
@source={{this.sortedChildren}} @source={{this.sortedChildren}}
@size={{this.pageSize}} @size={{this.pageSize}}
@page={{this.currentPage}} as |p|> @page={{this.currentPage}} as |p|
>
<ListTable <ListTable
@source={{p.list}} @source={{p.list}}
@sortProperty={{this.sortProperty}} @sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}} @sortDescending={{this.sortDescending}}
@class="with-foot" as |t|> @class="with-foot" as |t|
>
<t.head data-test-jobs-header> <t.head data-test-jobs-header>
<t.sort-by @prop="name">Name</t.sort-by> <t.sort-by @prop="name">
Name
</t.sort-by>
{{#if this.system.shouldShowNamespaces}} {{#if this.system.shouldShowNamespaces}}
<t.sort-by @prop="namespace.name" data-test-jobs-namespace-header>Namespace</t.sort-by> <t.sort-by @prop="namespace.name" data-test-jobs-namespace-header>
Namespace
</t.sort-by>
{{/if}} {{/if}}
<t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>Submitted At</t.sort-by> <t.sort-by @prop="submitTime" data-test-jobs-submit-time-header>
<t.sort-by @prop="status">Status</t.sort-by> Submitted At
<t.sort-by @prop="type">Type</t.sort-by> </t.sort-by>
<t.sort-by @prop="priority">Priority</t.sort-by> <t.sort-by @prop="status">
<th>Groups</th> Status
<th class="is-3">Summary</th> </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.head>
<t.body @key="model.id" as |row|> <t.body @key="model.id" as |row|>
<JobRow data-test-job-row @job={{row.model}} @context="child" @onClick={{action this.gotoJob row.model}} /> <JobRow
data-test-job-row
@job={{row.model}}
@context="child"
@onClick={{action this.gotoJob row.model}}
/>
</t.body> </t.body>
</ListTable> </ListTable>
<div class="table-foot"> <div class="table-foot">
<PageSizeSelect @onChange={{action this.resetPagination}} /> <PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination"> <nav class="pagination">
<div class="pagination-numbers"> <div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedChildren.length}} {{p.startsAt}}
–
{{p.endsAt}}
of
{{this.sortedChildren.length}}
</div> </div>
<p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev> <p.prev @class="pagination-previous">
<p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next> {{x-icon "chevron-left"}}
</p.prev>
<p.next @class="pagination-next">
{{x-icon "chevron-right"}}
</p.next>
<ul class="pagination-list"></ul> <ul class="pagination-list"></ul>
</nav> </nav>
</div> </div>
</ListPagination> </ListPagination>
{{else}} {{else}}
<div class="empty-message"> <div class="empty-message">
<h3 class="empty-message-headline">No Job Launches</h3> <h3 class="empty-message-headline">
<p class="empty-message-body">No remaining living job launches.</p> No Job Launches
</h3>
<p class="empty-message-body">
No remaining living job launches.
</p>
</div> </div>
{{/if}} {{/if}}
</div> </div>