eca0e7bf56
* button styles * Further styles including global toggle adjustment * sidebar funcs and header * Functioning task logs in high-level sidebars * same-lineify the show tasks toggle * Changelog * Full-height sidebar calc in css, plz drop soon container queries * Active status and query params for allocations page * Reactive shouldShowLogs getter and added to client and task group pages * Higher order func passing, thanks @DingoEatingFuzz * Non-service job types get allocation params passed * Keyframe animation for task log sidebar * Acceptance test * A few more sub-row tests * Lintfix
106 lines
4.2 KiB
Handlebars
106 lines
4.2 KiB
Handlebars
{{page-title "Job " this.job.name " allocations"}}
|
|
<JobSubnav @job={{this.job}} />
|
|
<section class="section">
|
|
{{#if this.allocations.length}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
<SearchBox
|
|
data-test-allocations-search
|
|
@searchTerm={{mut this.searchTerm}}
|
|
@onChange={{action this.resetPagination}}
|
|
@placeholder="Search allocations..." />
|
|
</div>
|
|
<div class="toolbar-item is-right-aligned">
|
|
<div class="button-bar">
|
|
<MultiSelectDropdown
|
|
data-test-allocation-status-facet
|
|
@label="Status"
|
|
@options={{this.optionsAllocationStatus}}
|
|
@selection={{this.selectionStatus}}
|
|
@onSelect={{action this.setFacetQueryParam "qpStatus"}}
|
|
/>
|
|
<MultiSelectDropdown
|
|
data-test-allocation-client-facet
|
|
@label="Client"
|
|
@options={{this.optionsClients}}
|
|
@selection={{this.selectionClient}}
|
|
@onSelect={{action this.setFacetQueryParam "qpClient"}}
|
|
/>
|
|
<MultiSelectDropdown
|
|
data-test-allocation-task-group-facet
|
|
@label="Task Group"
|
|
@options={{this.optionsTaskGroups}}
|
|
@selection={{this.selectionTaskGroup}}
|
|
@onSelect={{action this.setFacetQueryParam "qpTaskGroup"}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if this.sortedAllocations}}
|
|
<ListPagination
|
|
@source={{this.sortedAllocations}}
|
|
@size={{this.pageSize}}
|
|
@page={{this.currentPage}}
|
|
@class="allocations" as |p|>
|
|
<ListTable
|
|
@source={{p.list}}
|
|
@sortProperty={{this.sortProperty}}
|
|
@sortDescending={{this.sortDescending}}
|
|
@class="with-foot with-collapsed-borders" 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>Volume</th>
|
|
<th>CPU</th>
|
|
<th>Memory</th>
|
|
</t.head>
|
|
<t.body as |row|>
|
|
<AllocationRow
|
|
{{keyboard-shortcut
|
|
enumerated=true
|
|
action=(action "gotoAllocation" row.model)
|
|
}}
|
|
@data-test-allocation={{row.model.id}}
|
|
@allocation={{row.model}}
|
|
@context="job"
|
|
@onClick={{action "gotoAllocation" row.model}} />
|
|
{{#each row.model.states as |task|}}
|
|
<TaskSubRow @active={{eq this.activeTask (concat task.allocation.id "-" task.name)}} @onSetActiveTask={{action 'setActiveTaskQueryParam'}} @namespan="9" @taskState={{task}} />
|
|
{{/each}}
|
|
|
|
</t.body>
|
|
</ListTable>
|
|
<div class="table-foot">
|
|
<nav class="pagination">
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{this.sortedAllocations.length}}
|
|
</div>
|
|
<p.prev @class="pagination-previous"> < </p.prev>
|
|
<p.next @class="pagination-next"> > </p.next>
|
|
<ul class="pagination-list"></ul>
|
|
</nav>
|
|
</div>
|
|
</ListPagination>
|
|
{{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>{{this.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> |