open-nomad/ui/app/templates/jobs/job/task-group.hbs

172 lines
6.8 KiB
Handlebars
Raw Normal View History

{{title "Task group " model.name " - Job " model.job.name}}
2018-07-25 22:19:43 +00:00
<div class="tabs is-subnav">
<ul>
<li><LinkTo @route="jobs.job.task-group" @models={{array model.job model}} @activeClass="is-active">Overview</LinkTo></li>
2018-07-25 22:19:43 +00:00
</ul>
</div>
<section class="section">
<h1 class="title with-flex">
<span>{{model.name}}</span>
<div>
<Exec::OpenButton @job={{model.job}} @taskGroup={{model}} />
{{#if model.scaling}}
<StepperInput
@min={{model.scaling.min}}
@max={{model.scaling.max}}
@value={{model.count}}
@class="is-primary is-small"
@disabled={{or model.job.runningDeployment (cannot "scale job")}}
@onChange={{action "scaleTaskGroup"}}>
Count
</StepperInput>
{{/if}}
</div>
2018-07-25 22:19:43 +00:00
</h1>
2017-09-19 14:47:10 +00:00
2018-07-25 22:19:43 +00:00
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="label">Task Group Details</span>
2017-09-19 14:47:10 +00:00
2018-07-25 22:19:43 +00:00
<span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{model.tasks.length}}</span>
<span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{model.reservedCPU}} MHz</span>
<span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{model.reservedMemory}} MiB</span>
<span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{model.reservedEphemeralDisk}} MiB</span>
{{#if model.scaling}}
<span class="pair" data-test-task-group-min><span class="term">Count Range</span>
{{model.scaling.min}} to {{model.scaling.max}}
</span>
<span class="pair" data-test-task-group-max><span class="term">Scaling Policy?</span>
{{if model.scaling.policy "Yes" "No"}}
</span>
{{/if}}
2017-09-19 14:47:10 +00:00
</div>
2018-07-25 22:19:43 +00:00
</div>
2017-09-19 14:47:10 +00:00
2018-07-25 22:19:43 +00:00
<div class="boxed-section">
<div class="boxed-section-head">
<div>Allocation Status <span class="badge is-white">{{allocations.length}}</span></div>
</div>
<div class="boxed-section-body">
<AllocationStatusBar @allocationContainer={{model.summary}} @class="split-view" as |chart|>
2018-07-25 22:19:43 +00:00
<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"}}">
2018-07-25 22:19:43 +00:00
<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>
2017-09-19 14:47:10 +00:00
</div>
2018-07-25 22:19:43 +00:00
</div>
2017-09-19 14:47:10 +00:00
2018-07-25 22:19:43 +00:00
<div class="boxed-section">
<div class="boxed-section-head">
Allocations
<SearchBox
@searchTerm={{mut searchTerm}}
@placeholder="Search allocations..."
@onChange={{action resetPagination}}
@class="is-inline pull-right"
@inputClass="is-compact" />
2018-07-25 22:19:43 +00:00
</div>
<div class="boxed-section-body is-full-bleed">
{{#if sortedAllocations}}
<ListPagination
@source={{sortedAllocations}}
@size={{pageSize}}
@page={{currentPage}}
@class="allocations" as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{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>
2020-02-11 04:51:59 +00:00
<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="taskGroup" @onClick={{action "gotoAllocation" row.model}} />
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action resetPagination}} />
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{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>
2018-07-25 22:19:43 +00:00
{{else}}
{{#if 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>{{searchTerm}}</strong></p>
</div>
</div>
{{else}}
2018-07-25 22:19:43 +00:00
<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>
2018-07-25 22:19:43 +00:00
</div>
{{/if}}
{{/if}}
2017-09-19 14:47:10 +00:00
</div>
2018-07-25 22:19:43 +00:00
</div>
<LifecycleChart @tasks={{model.tasks}} />
{{#if 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={{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}}
2018-07-25 22:19:43 +00:00
</section>