196 lines
7.7 KiB
Handlebars
196 lines
7.7 KiB
Handlebars
{{title "Task group " this.model.name " - Job " this.model.job.name}}
|
|
<div class="tabs is-subnav">
|
|
<ul>
|
|
<li><LinkTo @route="jobs.job.task-group" @models={{array this.model.job this.model}} @activeClass="is-active">Overview</LinkTo></li>
|
|
</ul>
|
|
</div>
|
|
<section class="section">
|
|
<h1 class="title with-flex">
|
|
<span>{{this.model.name}}</span>
|
|
<div>
|
|
<Exec::OpenButton @job={{this.model.job}} @taskGroup={{this.model}} />
|
|
{{#if this.model.scaling}}
|
|
<StepperInput
|
|
data-test-task-group-count-stepper
|
|
aria-label={{this.tooltipText}}
|
|
@min={{this.model.scaling.min}}
|
|
@max={{this.model.scaling.max}}
|
|
@value={{this.model.count}}
|
|
@class="is-primary is-small"
|
|
@disabled={{or this.model.job.runningDeployment (cannot "scale job")}}
|
|
@onChange={{action "scaleTaskGroup"}}>
|
|
Count
|
|
</StepperInput>
|
|
{{/if}}
|
|
</div>
|
|
</h1>
|
|
|
|
<div class="boxed-section is-small">
|
|
<div class="boxed-section-body inline-definitions">
|
|
<span class="label">Task Group Details</span>
|
|
|
|
<span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{this.model.tasks.length}}</span>
|
|
<span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{this.model.reservedCPU}} MHz</span>
|
|
<span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{this.model.reservedMemory}} MiB</span>
|
|
<span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{this.model.reservedEphemeralDisk}} MiB</span>
|
|
{{#if this.model.scaling}}
|
|
<span class="pair" data-test-task-group-min><span class="term">Count Range</span>
|
|
{{this.model.scaling.min}} to {{this.model.scaling.max}}
|
|
</span>
|
|
<span class="pair" data-test-task-group-max><span class="term">Scaling Policy?</span>
|
|
{{if this.model.scaling.policy "Yes" "No"}}
|
|
</span>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boxed-section">
|
|
<div class="boxed-section-head">
|
|
<div>Allocation Status <span class="badge is-white">{{this.allocations.length}}</span></div>
|
|
</div>
|
|
<div class="boxed-section-body">
|
|
<AllocationStatusBar @allocationContainer={{this.model.summary}} @class="split-view" as |chart|>
|
|
<ol class="legend">
|
|
{{#each chart.data as |datum index|}}
|
|
<li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
|
|
<span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
|
|
<span class="value">{{datum.value}}</span>
|
|
<span class="label">
|
|
{{datum.label}}
|
|
</span>
|
|
</li>
|
|
{{/each}}
|
|
</ol>
|
|
</AllocationStatusBar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boxed-section">
|
|
<div class="boxed-section-head">
|
|
Allocations
|
|
<SearchBox
|
|
@searchTerm={{mut this.searchTerm}}
|
|
@placeholder="Search allocations..."
|
|
@onChange={{action this.resetPagination}}
|
|
@class="is-inline pull-right"
|
|
@inputClass="is-compact" />
|
|
</div>
|
|
<div class="boxed-section-body is-full-bleed">
|
|
{{#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" as |t|>
|
|
<t.head>
|
|
<th class="is-narrow"></th>
|
|
<t.sort-by @prop="shortId">ID</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 @key="model.id" as |row|>
|
|
<AllocationRow @data-test-allocation={{row.model.id}} @allocation={{row.model}} @context="taskGroup" @onClick={{action "gotoAllocation" row.model}} />
|
|
</t.body>
|
|
</ListTable>
|
|
<div class="table-foot">
|
|
<PageSizeSelect @onChange={{action this.resetPagination}} />
|
|
<nav class="pagination">
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{this.sortedAllocations.length}}
|
|
</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>
|
|
{{else}}
|
|
{{#if this.allocations.length}}
|
|
<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>
|
|
{{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}}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
|
|
<LifecycleChart @tasks={{this.model.tasks}} />
|
|
|
|
{{#if this.model.scaleState.isVisible}}
|
|
{{#if this.shouldShowScaleEventTimeline}}
|
|
<div data-test-scaling-timeline class="boxed-section">
|
|
<div class="boxed-section-head is-hollow">
|
|
Scaling Timeline
|
|
</div>
|
|
<div class="boxed-section-body">
|
|
<ScaleEventsChart @events={{this.sortedScaleEvents}} />
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div data-test-scaling-events class="boxed-section">
|
|
<div class="boxed-section-head">
|
|
Recent Scaling Events
|
|
</div>
|
|
<div class="boxed-section-body">
|
|
<ScaleEventsAccordion @events={{this.sortedScaleEvents}} />
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if this.model.volumes.length}}
|
|
<div data-test-volumes class="boxed-section">
|
|
<div class="boxed-section-head">
|
|
Volume Requirements
|
|
</div>
|
|
<div class="boxed-section-body is-full-bleed">
|
|
<ListTable @source={{this.model.volumes}} as |t|>
|
|
<t.head>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Source</th>
|
|
<th>Permissions</th>
|
|
</t.head>
|
|
<t.body as |row|>
|
|
<tr data-test-volume>
|
|
<td data-test-volume-name>
|
|
{{#if row.model.isCSI}}
|
|
<LinkTo @route="csi.volumes.volume" @model={{row.model.name}} @query={{hash volumeNamespace=row.model.namespace.id}}>
|
|
{{row.model.name}}
|
|
</LinkTo>
|
|
{{else}}
|
|
{{row.model.name}}
|
|
{{/if}}
|
|
</td>
|
|
<td data-test-volume-type>{{row.model.type}}</td>
|
|
<td data-test-volume-source>{{row.model.source}}</td>
|
|
<td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
|
|
</tr>
|
|
</t.body>
|
|
</ListTable>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</section>
|