mirror of
https://github.com/kemko/nomad.git
synced 2026-01-06 02:15:43 +03:00
Use page-layout for allocations routes
This commit is contained in:
Michael Lange
@@ -1,6 +1,3 @@
|
||||
<div class="page-layout">
|
||||
{{#global-header class="page-header"}}
|
||||
{{app-breadcrumbs}}
|
||||
{{/global-header}}
|
||||
{{#page-layout}}
|
||||
{{outlet}}
|
||||
</div>
|
||||
{{/page-layout}}
|
||||
|
||||
@@ -1,100 +1,98 @@
|
||||
{{#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>
|
||||
<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 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>
|
||||
|
||||
<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}}
|
||||
{{/if}}
|
||||
</section>
|
||||
|
||||
@@ -1,85 +1,83 @@
|
||||
{{#gutter-menu class="page-body"}}
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
<section class="section">
|
||||
<h1 class="title" data-test-title>
|
||||
{{model.name}}
|
||||
<span class="bumper-left tag {{model.stateClass}}" data-test-state>{{model.state}}</span>
|
||||
</h1>
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
<section class="section">
|
||||
<h1 class="title" data-test-title>
|
||||
{{model.name}}
|
||||
<span class="bumper-left tag {{model.stateClass}}" data-test-state>{{model.state}}</span>
|
||||
</h1>
|
||||
|
||||
<div class="boxed-section is-small">
|
||||
<div class="boxed-section-body inline-definitions">
|
||||
<span class="label">Task Details</span>
|
||||
<span class="pair" data-test-started-at>
|
||||
<span class="term">Started At</span>
|
||||
{{moment-format model.startedAt "MM/DD/YY HH:mm:ss"}}
|
||||
</span>
|
||||
{{#if model.finishedAt}}
|
||||
<span class="pair">
|
||||
<span class="term">Finished At</span>
|
||||
{{moment-format model.finishedAt "MM/DD/YY HH:mm:ss"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<div class="boxed-section is-small">
|
||||
<div class="boxed-section-body inline-definitions">
|
||||
<span class="label">Task Details</span>
|
||||
<span class="pair" data-test-started-at>
|
||||
<span class="term">Started At</span>
|
||||
{{moment-format model.startedAt "MM/DD/YY HH:mm:ss"}}
|
||||
</span>
|
||||
{{#if model.finishedAt}}
|
||||
<span class="pair">
|
||||
<span class="term">Driver</span>
|
||||
{{model.task.driver}}
|
||||
<span class="term">Finished At</span>
|
||||
{{moment-format model.finishedAt "MM/DD/YY HH:mm:ss"}}
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<span class="pair">
|
||||
<span class="term">Driver</span>
|
||||
{{model.task.driver}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if ports.length}}
|
||||
<div class="boxed-section" data-test-task-addresses>
|
||||
<div class="boxed-section-head">
|
||||
Addresses
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
{{#list-table source=ports as |t|}}
|
||||
{{#t.head}}
|
||||
<th class="is-1">Dynamic?</th>
|
||||
<th class="is-2">Name</th>
|
||||
<th>Address</th>
|
||||
{{/t.head}}
|
||||
{{#t.body as |row|}}
|
||||
<tr data-test-task-address>
|
||||
<td data-test-task-address-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td>
|
||||
<td data-test-task-address-name>{{row.model.name}}</td>
|
||||
<td data-test-task-address-address>
|
||||
<a href="http://{{network.ip}}:{{row.model.port}}" target="_blank">
|
||||
{{network.ip}}:{{row.model.port}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{/t.body}}
|
||||
{{/list-table}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="boxed-section">
|
||||
{{#if ports.length}}
|
||||
<div class="boxed-section" data-test-task-addresses>
|
||||
<div class="boxed-section-head">
|
||||
Recent Events
|
||||
Addresses
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
{{#list-table source=(reverse model.events) class="is-striped" as |t|}}
|
||||
{{#list-table source=ports as |t|}}
|
||||
{{#t.head}}
|
||||
<th class="is-3">Time</th>
|
||||
<th class="is-1">Type</th>
|
||||
<th>Description</th>
|
||||
<th class="is-1">Dynamic?</th>
|
||||
<th class="is-2">Name</th>
|
||||
<th>Address</th>
|
||||
{{/t.head}}
|
||||
{{#t.body as |row|}}
|
||||
<tr data-test-task-event>
|
||||
<td data-test-task-event-time>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td>
|
||||
<td data-test-task-event-type>{{row.model.type}}</td>
|
||||
<td data-test-task-event-message>
|
||||
{{#if row.model.message}}
|
||||
{{row.model.message}}
|
||||
{{else}}
|
||||
<em>No message</em>
|
||||
{{/if}}
|
||||
<tr data-test-task-address>
|
||||
<td data-test-task-address-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td>
|
||||
<td data-test-task-address-name>{{row.model.name}}</td>
|
||||
<td data-test-task-address-address>
|
||||
<a href="http://{{network.ip}}:{{row.model.port}}" target="_blank">
|
||||
{{network.ip}}:{{row.model.port}}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{/t.body}}
|
||||
{{/list-table}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/gutter-menu}}
|
||||
{{/if}}
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Recent Events
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
{{#list-table source=(reverse model.events) class="is-striped" as |t|}}
|
||||
{{#t.head}}
|
||||
<th class="is-3">Time</th>
|
||||
<th class="is-1">Type</th>
|
||||
<th>Description</th>
|
||||
{{/t.head}}
|
||||
{{#t.body as |row|}}
|
||||
<tr data-test-task-event>
|
||||
<td data-test-task-event-time>{{moment-format row.model.time "MM/DD/YY HH:mm:ss"}}</td>
|
||||
<td data-test-task-event-type>{{row.model.type}}</td>
|
||||
<td data-test-task-event-message>
|
||||
{{#if row.model.message}}
|
||||
{{row.model.message}}
|
||||
{{else}}
|
||||
<em>No message</em>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/t.body}}
|
||||
{{/list-table}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
{{#gutter-menu class="page-body"}}
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
<section class="section">
|
||||
{{task-log data-test-task-log allocation=model.allocation task=model.name}}
|
||||
</section>
|
||||
{{/gutter-menu}}
|
||||
{{partial "allocations/allocation/task/subnav"}}
|
||||
<section class="section">
|
||||
{{task-log data-test-task-log allocation=model.allocation task=model.name}}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user