open-nomad/ui/app/templates/allocations/allocation/index.hbs
Michael Lange dc1d31eec8 Move the global-header up the route hierarchy
Now that breadcrumbs are a zero config component, the corresponding
template can be moved up to parent routes.
2018-07-06 11:12:12 -07:00

101 lines
4.1 KiB
Handlebars

{{#gutter-menu class="page-body"}}
<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">
Tasks
</div>
<div class="boxed-section-body is-full-bleed">
{{#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>
{{/t.head}}
{{#t.body as |row|}}
<tr
data-test-task-row={{row.model.task.name}}
onclick={{action "taskClick" row.model.allocation row.model}}
class="is-interactive">
<td class="is-narrow">
{{#if (not row.model.driverStatus.healthy)}}
<span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{row.model.driver}} is unhealthy">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}
</td>
<td data-test-name>
{{#link-to "allocations.allocation.task" row.model.allocation row.model class="is-primary"}}
{{row.model.name}}
{{/link-to}}
</td>
<td data-test-state>{{row.model.state}}</td>
<td data-test-message>
{{#if row.model.events.lastObject.message}}
{{row.model.events.lastObject.message}}
{{else}}
<em>No message</em>
{{/if}}
</td>
<td data-test-time>{{moment-format row.model.events.lastObject.time "MM/DD/YY HH:mm:ss"}}</td>
<td data-test-ports>
<ul>
{{#with row.model.resources.networks.firstObject as |network|}}
{{#each network.reservedPorts as |port|}}
<li data-test-port>
<strong>{{port.Label}}:</strong>
<a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a>
</li>
{{/each}}
{{#each network.dynamicPorts as |port|}}
<li>
<strong>{{port.Label}}:</strong>
<a href="http://{{network.ip}}:{{port.Value}}" target="_blank">{{network.ip}}:{{port.Value}}</a>
</li>
{{/each}}
{{/with}}
</ul>
</td>
</tr>
{{/t.body}}
{{/list-table}}
</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>
{{/gutter-menu}}