open-nomad/ui/app/templates/components/job-page/parts/recent-allocations.hbs
Phil Renaud eca0e7bf56
[ui] task logs in sidebar (#14612)
* 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
2022-09-22 10:58:52 -04:00

104 lines
2.8 KiB
Handlebars

<div class="boxed-section">
<div class="boxed-section-head">
Recent Allocations
<span class="pull-right is-padded">
<Toggle
@isActive={{this.showSubTasks}}
@onToggle={{this.toggleShowSubTasks}}
title="Show tasks of allocations"
>Show Tasks</Toggle>
</span>
</div>
<div
class="boxed-section-body
{{if this.job.allocations.length "is-full-bleed"}}"
>
{{#if this.job.allocations.length}}
<ListTable
@source={{this.sortedAllocations}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot {{if this.showSubTasks "with-collapsed-borders"}}" as |t|
>
<t.head>
<th class="is-narrow"></th>
<th>
ID
</th>
<th>
Task Group
</th>
<th>
Created
</th>
<th>
Modified
</th>
<th>
Status
</th>
<th>
Version
</th>
<th>
Client
</th>
<th>
Volume
</th>
<th>
CPU
</th>
<th>
Memory
</th>
</t.head>
<t.body as |row|>
<AllocationRow
@data-test-allocation={{row.model.id}}
@allocation={{row.model}}
@context="job"
@onClick={{action "gotoAllocation" row.model}}
@showSubTasks={{this.showSubTasks}}
{{keyboard-shortcut
enumerated=true
action=(action "gotoAllocation" row.model)
}}
/>
{{#if this.showSubTasks}}
{{#each row.model.states as |task|}}
<TaskSubRow @namespan="9" @taskState={{task}} @active={{eq @activeTask (concat task.allocation.id "-" task.name)}} @onSetActiveTask={{@setActiveTaskQueryParam}} />
{{/each}}
{{/if}}
</t.body>
</ListTable>
{{else}}
<div class="empty-message" data-test-empty-recent-allocations>
<h3
class="empty-message-headline"
data-test-empty-recent-allocations-headline
>
No Allocations
</h3>
<p
class="empty-message-body"
data-test-empty-recent-allocations-message
>
No allocations have been placed.
</p>
</div>
{{/if}}
</div>
{{#if this.job.allocations.length}}
<div class="boxed-section-foot">
<p class="pull-right" data-test-view-all-allocations>
<LinkTo @route="jobs.job.allocations" @model={{this.job}}>
View all
{{this.job.allocations.length}}
{{pluralize "allocation" this.job.allocations.length}}
</LinkTo>
</p>
</div>
{{/if}}
</div>