open-nomad/ui/app/templates/allocations/allocation/index.hbs
2018-12-13 07:53:17 -08:00

91 lines
3.3 KiB
Handlebars

<section class="section">
<h1 data-test-title class="title">
Allocation {{model.name}}
<span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
<span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
</h1>
<div class="boxed-section is-small">
<div data-test-allocation-details class="boxed-section-body inline-definitions">
<span class="label">Allocation Details</span>
<span class="pair job-link"><span class="term">Job</span>
{{#link-to "jobs.job" model.job (query-params jobNamespace=model.job.namespace.id) data-test-job-link}}{{model.job.name}}{{/link-to}}
</span>
<span class="pair node-link"><span class="term">Client</span>
{{#link-to "clients.client" model.node data-test-client-link}}{{model.node.shortId}}{{/link-to}}
</span>
</div>
</div>
<div class="boxed-section">
<div class="boxed-section-head is-hollow">
Resource Utilization
</div>
<div class="boxed-section-body">
{{#if model.isRunning}}
<div class="columns">
<div class="column">
{{primary-metric resource=model metric="cpu"}}
</div>
<div class="column">
{{primary-metric resource=model metric="memory"}}
</div>
</div>
{{else}}
<div data-test-resource-error class="empty-message">
<h3 data-test-resource-error-headline class="empty-message-headline">Allocation isn't running</h3>
<p class="empty-message-body">Only running allocations utilize resources.</p>
</div>
{{/if}}
</div>
</div>
<div class="boxed-section">
<div class="boxed-section-head">
Tasks
</div>
<div class="boxed-section-body {{if sortedStates.length "is-full-bleed"}}">
{{#if sortedStates.length}}
{{#list-table
source=sortedStates
sortProperty=sortProperty
sortDescending=sortDescending
class="is-striped" as |t|}}
{{#t.head}}
<th class="is-narrow"></th>
{{#t.sort-by prop="name"}}Name{{/t.sort-by}}
{{#t.sort-by prop="state"}}State{{/t.sort-by}}
<th>Last Event</th>
{{#t.sort-by prop="events.lastObject.time"}}Time{{/t.sort-by}}
<th>Addresses</th>
<th>CPU</th>
<th>Memory</th>
{{/t.head}}
{{#t.body as |row|}}
{{task-row
data-test-task-row=row.model.name
task=row.model
onClick=(action "taskClick" row.model.allocation row.model)}}
{{/t.body}}
{{/list-table}}
{{else}}
<div data-test-empty-tasks-list class="empty-message">
<h3 data-test-empty-tasks-list-headline class="empty-message-headline">No Tasks</h3>
<p data-test-empty-tasks-list-body class="empty-message-body">Allocations will not have tasks until they are in a running state.</p>
</div>
{{/if}}
</div>
</div>
{{#if model.hasRescheduleEvents}}
<div class="boxed-section" data-test-reschedule-events>
<div class="boxed-section-head is-hollow">
Reschedule Events
</div>
<div class="boxed-section-body">
{{reschedule-event-timeline allocation=model}}
</div>
</div>
{{/if}}
</section>