fix broken link to `task-group` in `Recent Allocation` table in `jobs.job.index` (#12765)
* chore: run prettier on hbs files * ui: ensure to pass a real job object to task-group link * chore: add changelog entry * chore: prettify template * ui: template helper for formatting jobId in LinkTo component * ui: handle async relationship * ui: pass in job id to model arg instead of job model * update test for serialized namespace * ui: defend against null in tests * ui: prettified template added whitespace * ui: rollback ember-data to 3.24 because watcher return undefined on abort * ui: use format-job-helper instead of job model via alloc * ui: fix whitespace in template caused by prettier using template helper * ui: update test for new namespace * ui: revert prettier change Co-authored-by: Luiz Aoqui <luiz@hashicorp.com>
This commit is contained in:
parent
97cf204c00
commit
316daf581e
|
@ -0,0 +1,3 @@
|
||||||
|
```release-note:bug
|
||||||
|
ui: fix broken link to task-groups in the Recent Allocations table in the Job Detail overview page.
|
||||||
|
```
|
|
@ -0,0 +1,8 @@
|
||||||
|
import Helper from '@ember/component/helper';
|
||||||
|
|
||||||
|
export function formatJobId([jobId]) {
|
||||||
|
if (!jobId) return;
|
||||||
|
return JSON.parse(jobId).join('@');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Helper.helper(formatJobId);
|
|
@ -17,12 +17,13 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
|
||||||
// Preload the job for the allocation since it's required for the breadcrumb trail
|
// Preload the job for the allocation since it's required for the breadcrumb trail
|
||||||
return super
|
return super
|
||||||
.model(...arguments)
|
.model(...arguments)
|
||||||
.then((allocation) =>
|
.then((allocation) => {
|
||||||
allocation
|
const jobId = allocation.belongsTo('job').id();
|
||||||
.get('job')
|
return this.store
|
||||||
|
.findRecord('job', jobId)
|
||||||
.then(() => this.store.findAll('namespace')) // namespaces belong to a job and are an asynchronous relationship so we can peak them later on
|
.then(() => this.store.findAll('namespace')) // namespaces belong to a job and are an asynchronous relationship so we can peak them later on
|
||||||
.then(() => allocation)
|
.then(() => allocation);
|
||||||
)
|
})
|
||||||
.catch(notifyError(this));
|
.catch(notifyError(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,11 +5,12 @@
|
||||||
<div data-test-inline-error class="notification is-danger">
|
<div data-test-inline-error class="notification is-danger">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h3
|
<h3 data-test-inline-error-title class="title is-4">
|
||||||
data-test-inline-error-title
|
{{this.error.title}}
|
||||||
class="title is-4"
|
</h3>
|
||||||
>{{this.error.title}}</h3>
|
<p data-test-inline-error-body>
|
||||||
<p data-test-inline-error-body>{{this.error.description}}</p>
|
{{this.error.description}}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-centered is-minimum">
|
<div class="column is-centered is-minimum">
|
||||||
<button
|
<button
|
||||||
|
@ -17,19 +18,20 @@
|
||||||
class="button is-danger"
|
class="button is-danger"
|
||||||
onclick={{action this.onDismiss}}
|
onclick={{action this.onDismiss}}
|
||||||
type="button"
|
type="button"
|
||||||
>Okay</button>
|
>
|
||||||
|
Okay
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<h1 data-test-title class="title with-headroom with-flex">
|
<h1 data-test-title class="title with-headroom with-flex">
|
||||||
<div>
|
<div>
|
||||||
Allocation
|
Allocation
|
||||||
{{this.model.name}}
|
{{this.model.name}}
|
||||||
<span
|
<span class="bumper-left tag {{this.model.statusClass}}">
|
||||||
class="bumper-left tag {{this.model.statusClass}}"
|
{{this.model.clientStatus}}
|
||||||
>{{this.model.clientStatus}}</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{{#if this.model.isRunning}}
|
{{#if this.model.isRunning}}
|
||||||
|
@ -70,35 +72,44 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<span class="tag is-hollow is-small is-alone no-text-transform">
|
<span class="tag is-hollow is-small is-alone no-text-transform">
|
||||||
{{this.model.id}}
|
{{this.model.id}}
|
||||||
<CopyButton @clipboardText={{this.model.id}} />
|
<CopyButton @clipboardText={{this.model.id}} />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="boxed-section is-small">
|
<div class="boxed-section is-small">
|
||||||
<div
|
<div
|
||||||
data-test-allocation-details
|
data-test-allocation-details
|
||||||
class="boxed-section-body inline-definitions"
|
class="boxed-section-body inline-definitions"
|
||||||
>
|
>
|
||||||
<span class="label">Allocation Details</span>
|
<span class="label">
|
||||||
<span class="pair job-link"><span class="term">Job</span>
|
Allocation Details
|
||||||
|
</span>
|
||||||
|
<span class="pair job-link">
|
||||||
|
<span class="term">
|
||||||
|
Job
|
||||||
|
</span>
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="jobs.job"
|
@route="jobs.job"
|
||||||
@model={{this.model.job}}
|
@model={{format-job-id this.model.job.id}}
|
||||||
data-test-job-link
|
data-test-job-link
|
||||||
>{{this.model.job.name}}</LinkTo>
|
>
|
||||||
|
{{this.model.job.name}}
|
||||||
|
</LinkTo>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair node-link"><span class="term">Client</span>
|
<span class="pair node-link">
|
||||||
|
<span class="term">
|
||||||
|
Client
|
||||||
|
</span>
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="clients.client"
|
@route="clients.client"
|
||||||
@model={{this.model.node}}
|
@model={{this.model.node}}
|
||||||
data-test-client-link
|
data-test-client-link
|
||||||
>{{this.model.node.shortId}}</LinkTo>
|
>
|
||||||
|
{{this.model.node.shortId}}
|
||||||
|
</LinkTo>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boxed-section">
|
<div class="boxed-section">
|
||||||
<div class="boxed-section-head is-hollow">
|
<div class="boxed-section-head is-hollow">
|
||||||
Resource Utilization
|
Resource Utilization
|
||||||
|
@ -121,43 +132,55 @@
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div data-test-resource-error class="empty-message">
|
<div data-test-resource-error class="empty-message">
|
||||||
<h3
|
<h3 data-test-resource-error-headline class="empty-message-headline">
|
||||||
data-test-resource-error-headline
|
Allocation isn't running
|
||||||
class="empty-message-headline"
|
</h3>
|
||||||
>Allocation isn't running</h3>
|
<p class="empty-message-body">
|
||||||
<p class="empty-message-body">Only running allocations utilize
|
Only running allocations utilize
|
||||||
resources.</p>
|
resources.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<LifecycleChart @taskStates={{this.model.states}} />
|
<LifecycleChart @taskStates={{this.model.states}} />
|
||||||
|
|
||||||
<div class="boxed-section">
|
<div class="boxed-section">
|
||||||
<div class="boxed-section-head">
|
<div class="boxed-section-head">
|
||||||
Tasks
|
Tasks
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="boxed-section-body {{if this.sortedStates.length 'is-full-bleed'}}"
|
class="boxed-section-body {{if this.sortedStates.length "is-full-bleed"}}"
|
||||||
>
|
>
|
||||||
{{#if this.sortedStates.length}}
|
{{#if this.sortedStates.length}}
|
||||||
<ListTable
|
<ListTable
|
||||||
@source={{this.sortedStates}}
|
@source={{this.sortedStates}}
|
||||||
@sortProperty={{this.sortProperty}}
|
@sortProperty={{this.sortProperty}}
|
||||||
@sortDescending={{this.sortDescending}}
|
@sortDescending={{this.sortDescending}}
|
||||||
@class="is-striped"
|
@class="is-striped" as |t|
|
||||||
as |t|
|
|
||||||
>
|
>
|
||||||
<t.head>
|
<t.head>
|
||||||
<th class="is-narrow"></th>
|
<th class="is-narrow"></th>
|
||||||
<t.sort-by @prop="name">Name</t.sort-by>
|
<t.sort-by @prop="name">
|
||||||
<t.sort-by @prop="state">State</t.sort-by>
|
Name
|
||||||
<th>Last Event</th>
|
</t.sort-by>
|
||||||
<t.sort-by @prop="events.lastObject.time">Time</t.sort-by>
|
<t.sort-by @prop="state">
|
||||||
<th>Volumes</th>
|
State
|
||||||
<th>CPU</th>
|
</t.sort-by>
|
||||||
<th>Memory</th>
|
<th>
|
||||||
|
Last Event
|
||||||
|
</th>
|
||||||
|
<t.sort-by @prop="events.lastObject.time">
|
||||||
|
Time
|
||||||
|
</t.sort-by>
|
||||||
|
<th>
|
||||||
|
Volumes
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
CPU
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Memory
|
||||||
|
</th>
|
||||||
</t.head>
|
</t.head>
|
||||||
<t.body as |row|>
|
<t.body as |row|>
|
||||||
<TaskRow
|
<TaskRow
|
||||||
|
@ -172,16 +195,16 @@
|
||||||
<h3
|
<h3
|
||||||
data-test-empty-tasks-list-headline
|
data-test-empty-tasks-list-headline
|
||||||
class="empty-message-headline"
|
class="empty-message-headline"
|
||||||
>No Tasks</h3>
|
>
|
||||||
<p
|
No Tasks
|
||||||
data-test-empty-tasks-list-body
|
</h3>
|
||||||
class="empty-message-body"
|
<p data-test-empty-tasks-list-body class="empty-message-body">
|
||||||
>Allocations will not have tasks until they are in a running state.</p>
|
Allocations will not have tasks until they are in a running state.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if this.ports.length}}
|
{{#if this.ports.length}}
|
||||||
<div class="boxed-section" data-test-allocation-ports>
|
<div class="boxed-section" data-test-allocation-ports>
|
||||||
<div class="boxed-section-head">
|
<div class="boxed-section-head">
|
||||||
|
@ -190,28 +213,39 @@
|
||||||
<div class="boxed-section-body is-full-bleed">
|
<div class="boxed-section-body is-full-bleed">
|
||||||
<ListTable @source={{this.ports}} as |t|>
|
<ListTable @source={{this.ports}} as |t|>
|
||||||
<t.head>
|
<t.head>
|
||||||
<th>Name</th>
|
<th>
|
||||||
<th>Host Address</th>
|
Name
|
||||||
<th>Mapped Port</th>
|
</th>
|
||||||
|
<th>
|
||||||
|
Host Address
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Mapped Port
|
||||||
|
</th>
|
||||||
</t.head>
|
</t.head>
|
||||||
<t.body as |row|>
|
<t.body as |row|>
|
||||||
<tr data-test-allocation-port>
|
<tr data-test-allocation-port>
|
||||||
<td data-test-allocation-port-name>{{row.model.label}}</td>
|
<td data-test-allocation-port-name>
|
||||||
|
{{row.model.label}}
|
||||||
|
</td>
|
||||||
<td data-test-allocation-port-address>
|
<td data-test-allocation-port-address>
|
||||||
<a
|
<a
|
||||||
href="http://{{row.model.hostIp}}:{{row.model.value}}"
|
href="http://{{row.model.hostIp}}:{{row.model.value}}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
>{{row.model.hostIp}}:{{row.model.value}}</a>
|
>
|
||||||
|
{{row.model.hostIp}}:{{row.model.value}}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td data-test-allocation-port-to>
|
||||||
|
{{row.model.to}}
|
||||||
</td>
|
</td>
|
||||||
<td data-test-allocation-port-to>{{row.model.to}}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</t.body>
|
</t.body>
|
||||||
</ListTable>
|
</ListTable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if this.services.length}}
|
{{#if this.services.length}}
|
||||||
<div class="boxed-section">
|
<div class="boxed-section">
|
||||||
<div class="boxed-section-head">
|
<div class="boxed-section-head">
|
||||||
|
@ -220,31 +254,45 @@
|
||||||
<div class="boxed-section-body is-full-bleed">
|
<div class="boxed-section-body is-full-bleed">
|
||||||
<ListTable @source={{this.services}} as |t|>
|
<ListTable @source={{this.services}} as |t|>
|
||||||
<t.head>
|
<t.head>
|
||||||
<th class="is-2">Name</th>
|
<th class="is-2">
|
||||||
<th class="is-1">Port</th>
|
Name
|
||||||
<td>Tags</td>
|
</th>
|
||||||
<td>On Update</td>
|
<th class="is-1">
|
||||||
<td>Connect?</td>
|
Port
|
||||||
<td>Upstreams</td>
|
</th>
|
||||||
|
<td>
|
||||||
|
Tags
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
On Update
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Connect?
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
Upstreams
|
||||||
|
</td>
|
||||||
</t.head>
|
</t.head>
|
||||||
<t.body as |row|>
|
<t.body as |row|>
|
||||||
<tr data-test-service>
|
<tr data-test-service>
|
||||||
<td data-test-service-name>{{row.model.name}}</td>
|
<td data-test-service-name>
|
||||||
<td data-test-service-port>{{row.model.portLabel}}</td>
|
{{row.model.name}}
|
||||||
<td data-test-service-tags class="is-long-text">{{join
|
</td>
|
||||||
", "
|
<td data-test-service-port>
|
||||||
row.model.tags
|
{{row.model.portLabel}}
|
||||||
}}</td>
|
</td>
|
||||||
<td data-test-service-onupdate>{{row.model.onUpdate}}</td>
|
<td data-test-service-tags class="is-long-text">
|
||||||
<td data-test-service-connect>{{if
|
{{join ", " row.model.tags}}
|
||||||
row.model.connect
|
</td>
|
||||||
"Yes"
|
<td data-test-service-onupdate>
|
||||||
"No"
|
{{row.model.onUpdate}}
|
||||||
}}</td>
|
</td>
|
||||||
|
<td data-test-service-connect>
|
||||||
|
{{if row.model.connect "Yes" "No"}}
|
||||||
|
</td>
|
||||||
<td data-test-service-upstreams>
|
<td data-test-service-upstreams>
|
||||||
{{#each
|
{{#each
|
||||||
row.model.connect.sidecarService.proxy.upstreams
|
row.model.connect.sidecarService.proxy.upstreams as |upstream|
|
||||||
as |upstream|
|
|
||||||
}}
|
}}
|
||||||
{{upstream.destinationName}}:{{upstream.localBindPort}}
|
{{upstream.destinationName}}:{{upstream.localBindPort}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
@ -255,7 +303,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if this.model.hasRescheduleEvents}}
|
{{#if this.model.hasRescheduleEvents}}
|
||||||
<div class="boxed-section" data-test-reschedule-events>
|
<div class="boxed-section" data-test-reschedule-events>
|
||||||
<div class="boxed-section-head is-hollow">
|
<div class="boxed-section-head is-hollow">
|
||||||
|
@ -266,10 +313,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if this.model.wasPreempted}}
|
{{#if this.model.wasPreempted}}
|
||||||
<div class="boxed-section is-warning" data-test-was-preempted>
|
<div class="boxed-section is-warning" data-test-was-preempted>
|
||||||
<div class="boxed-section-head">Preempted By</div>
|
<div class="boxed-section-head">
|
||||||
|
Preempted By
|
||||||
|
</div>
|
||||||
<div class="boxed-section-body">
|
<div class="boxed-section-body">
|
||||||
{{#if this.preempter}}
|
{{#if this.preempter}}
|
||||||
<div class="boxed-section is-small">
|
<div class="boxed-section is-small">
|
||||||
|
@ -283,59 +331,84 @@
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair">
|
<span class="pair">
|
||||||
<span
|
<span class="term" data-test-allocation-name>
|
||||||
class="term"
|
{{this.preempter.name}}
|
||||||
data-test-allocation-name
|
</span>
|
||||||
>{{this.preempter.name}}</span>
|
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="allocations.allocation"
|
@route="allocations.allocation"
|
||||||
@model={{this.preempter}}
|
@model={{this.preempter}}
|
||||||
data-test-allocation-id
|
data-test-allocation-id
|
||||||
>{{this.preempter.shortId}}</LinkTo>
|
>
|
||||||
|
{{this.preempter.shortId}}
|
||||||
|
</LinkTo>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair job-link"><span class="term">Job</span>
|
<span class="pair job-link">
|
||||||
|
<span class="term">
|
||||||
|
Job
|
||||||
|
</span>
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="jobs.job"
|
@route="jobs.job"
|
||||||
@model={{this.preempter.job}}
|
@model={{this.preempter.job}}
|
||||||
data-test-job-link
|
data-test-job-link
|
||||||
>{{this.preempter.job.name}}</LinkTo>
|
>
|
||||||
|
{{this.preempter.job.name}}
|
||||||
|
</LinkTo>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair job-priority"><span class="term">Priority</span>
|
<span class="pair job-priority">
|
||||||
<span
|
<span class="term">
|
||||||
data-test-job-priority
|
Priority
|
||||||
>{{this.preempter.job.priority}}</span>
|
</span>
|
||||||
|
<span data-test-job-priority>
|
||||||
|
{{this.preempter.job.priority}}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair node-link"><span class="term">Client</span>
|
<span class="pair node-link">
|
||||||
|
<span class="term">
|
||||||
|
Client
|
||||||
|
</span>
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="clients.client"
|
@route="clients.client"
|
||||||
@model={{this.preempter.node}}
|
@model={{this.preempter.node}}
|
||||||
data-test-client-link
|
data-test-client-link
|
||||||
>{{this.preempter.node.shortId}}</LinkTo>
|
>
|
||||||
|
{{this.preempter.node.shortId}}
|
||||||
|
</LinkTo>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair"><span class="term">Reserved CPU</span>
|
<span class="pair">
|
||||||
<span data-test-allocation-cpu>{{format-scheduled-hertz
|
<span class="term">
|
||||||
this.preempter.resources.cpu
|
Reserved CPU
|
||||||
}}</span>
|
</span>
|
||||||
|
<span data-test-allocation-cpu>
|
||||||
|
{{format-scheduled-hertz this.preempter.resources.cpu}}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="pair"><span class="term">Reserved Memory</span>
|
<span class="pair">
|
||||||
<span data-test-allocation-memory>{{format-scheduled-bytes
|
<span class="term">
|
||||||
|
Reserved Memory
|
||||||
|
</span>
|
||||||
|
<span data-test-allocation-memory>
|
||||||
|
{{format-scheduled-bytes
|
||||||
this.preempter.resources.memory
|
this.preempter.resources.memory
|
||||||
start="MiB"
|
start="MiB"
|
||||||
}}</span>
|
}}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="empty-message">
|
<div class="empty-message">
|
||||||
<h3 class="empty-message-headline">Allocation is gone</h3>
|
<h3 class="empty-message-headline">
|
||||||
<p class="empty-message-body">This allocation has been stopped and
|
Allocation is gone
|
||||||
garbage collected.</p>
|
</h3>
|
||||||
|
<p class="empty-message-body">
|
||||||
|
This allocation has been stopped and
|
||||||
|
garbage collected.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if
|
{{#if
|
||||||
(and
|
(and
|
||||||
this.model.preemptedAllocations.isFulfilled
|
this.model.preemptedAllocations.isFulfilled
|
||||||
|
@ -343,24 +416,43 @@
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
<div class="boxed-section" data-test-preemptions>
|
<div class="boxed-section" data-test-preemptions>
|
||||||
<div class="boxed-section-head">Preempted Allocations</div>
|
<div class="boxed-section-head">
|
||||||
|
Preempted Allocations
|
||||||
|
</div>
|
||||||
<div class="boxed-section-body">
|
<div class="boxed-section-body">
|
||||||
<ListTable
|
<ListTable
|
||||||
@source={{this.model.preemptedAllocations}}
|
@source={{this.model.preemptedAllocations}}
|
||||||
@class="allocations is-isolated"
|
@class="allocations is-isolated" as |t|
|
||||||
as |t|
|
|
||||||
>
|
>
|
||||||
<t.head>
|
<t.head>
|
||||||
<th class="is-narrow"></th>
|
<th class="is-narrow"></th>
|
||||||
<th>ID</th>
|
<th>
|
||||||
<th>Task Group</th>
|
ID
|
||||||
<th>Created</th>
|
</th>
|
||||||
<th>Modified</th>
|
<th>
|
||||||
<th>Status</th>
|
Task Group
|
||||||
<th>Version</th>
|
</th>
|
||||||
<th>Node</th>
|
<th>
|
||||||
<th>CPU</th>
|
Created
|
||||||
<th>Memory</th>
|
</th>
|
||||||
|
<th>
|
||||||
|
Modified
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Version
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Node
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
CPU
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Memory
|
||||||
|
</th>
|
||||||
</t.head>
|
</t.head>
|
||||||
<t.body as |row|>
|
<t.body as |row|>
|
||||||
<AllocationRow
|
<AllocationRow
|
||||||
|
|
|
@ -1,40 +1,71 @@
|
||||||
<td data-test-indicators class="is-narrow">
|
<td data-test-indicators class="is-narrow">
|
||||||
{{#if this.allocation.unhealthyDrivers.length}}
|
{{#if this.allocation.unhealthyDrivers.length}}
|
||||||
<span data-test-icon="unhealthy-driver" class="tooltip text-center" role="tooltip" aria-label="Allocation depends on unhealthy drivers">
|
<span
|
||||||
|
data-test-icon="unhealthy-driver"
|
||||||
|
class="tooltip text-center"
|
||||||
|
role="tooltip"
|
||||||
|
aria-label="Allocation depends on unhealthy drivers"
|
||||||
|
>
|
||||||
{{x-icon "alert-triangle" class="is-warning"}}
|
{{x-icon "alert-triangle" class="is-warning"}}
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if this.allocation.nextAllocation}}
|
{{#if this.allocation.nextAllocation}}
|
||||||
<span data-test-icon="reschedule" class="tooltip text-center" role="tooltip" aria-label="Allocation was rescheduled">
|
<span
|
||||||
|
data-test-icon="reschedule"
|
||||||
|
class="tooltip text-center"
|
||||||
|
role="tooltip"
|
||||||
|
aria-label="Allocation was rescheduled"
|
||||||
|
>
|
||||||
{{x-icon "history" class="is-faded"}}
|
{{x-icon "history" class="is-faded"}}
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if this.allocation.wasPreempted}}
|
{{#if this.allocation.wasPreempted}}
|
||||||
<span data-test-icon="preemption" class="tooltip text-center" role="tooltip" aria-label="Allocation was preempted">
|
<span
|
||||||
|
data-test-icon="preemption"
|
||||||
|
class="tooltip text-center"
|
||||||
|
role="tooltip"
|
||||||
|
aria-label="Allocation was preempted"
|
||||||
|
>
|
||||||
{{x-icon "boot" class="is-faded"}}
|
{{x-icon "boot" class="is-faded"}}
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</td>
|
</td>
|
||||||
<td data-test-short-id>
|
<td data-test-short-id>
|
||||||
<LinkTo @route="allocations.allocation" @model={{this.allocation}} class="is-primary">
|
<LinkTo
|
||||||
|
@route="allocations.allocation"
|
||||||
|
@model={{this.allocation}}
|
||||||
|
class="is-primary"
|
||||||
|
>
|
||||||
{{this.allocation.shortId}}
|
{{this.allocation.shortId}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</td>
|
</td>
|
||||||
{{#if (eq this.context "job")}}
|
{{#if (eq this.context "job")}}
|
||||||
<td data-test-task-group>
|
<td data-test-task-group>
|
||||||
<LinkTo @route="jobs.job.task-group" @models={{array this.allocation.job this.allocation.taskGroupName}} @query={{hash jobNamespace=this.allocation.job.namespace.id}}>
|
<LinkTo
|
||||||
|
@route="jobs.job.task-group"
|
||||||
|
@models={{array
|
||||||
|
(format-job-id this.allocation.job.id)
|
||||||
|
this.allocation.taskGroupName
|
||||||
|
}}
|
||||||
|
>
|
||||||
{{this.allocation.taskGroupName}}
|
{{this.allocation.taskGroupName}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</td>
|
</td>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<td data-test-create-time>{{format-month-ts this.allocation.createTime}}</td>
|
<td data-test-create-time>
|
||||||
|
{{format-month-ts this.allocation.createTime}}
|
||||||
|
</td>
|
||||||
<td data-test-modify-time>
|
<td data-test-modify-time>
|
||||||
<span class="tooltip" aria-label="{{format-month-ts this.allocation.modifyTime}}">
|
<span
|
||||||
|
class="tooltip"
|
||||||
|
aria-label="{{format-month-ts this.allocation.modifyTime}}"
|
||||||
|
>
|
||||||
{{moment-from-now this.allocation.modifyTime}}
|
{{moment-from-now this.allocation.modifyTime}}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td data-test-client-status class="is-one-line">
|
<td data-test-client-status class="is-one-line">
|
||||||
<span class="color-swatch {{this.allocation.clientStatus}}" /> {{this.allocation.clientStatus}}
|
<span class="color-swatch {{this.allocation.clientStatus}}"></span>
|
||||||
|
{{this.allocation.clientStatus}}
|
||||||
</td>
|
</td>
|
||||||
{{#if (eq this.context "volume")}}
|
{{#if (eq this.context "volume")}}
|
||||||
<td data-test-client>
|
<td data-test-client>
|
||||||
|
@ -46,7 +77,9 @@
|
||||||
</td>
|
</td>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if (or (eq this.context "taskGroup") (eq this.context "job"))}}
|
{{#if (or (eq this.context "taskGroup") (eq this.context "job"))}}
|
||||||
<td data-test-job-version>{{this.allocation.jobVersion}}</td>
|
<td data-test-job-version>
|
||||||
|
{{this.allocation.jobVersion}}
|
||||||
|
</td>
|
||||||
<td data-test-client>
|
<td data-test-client>
|
||||||
<Tooltip @text={{this.allocation.node.name}}>
|
<Tooltip @text={{this.allocation.node.name}}>
|
||||||
<LinkTo @route="clients.client" @model={{this.allocation.node}}>
|
<LinkTo @route="clients.client" @model={{this.allocation.node}}>
|
||||||
|
@ -59,14 +92,27 @@
|
||||||
{{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
|
{{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
|
||||||
...
|
...
|
||||||
{{else}}
|
{{else}}
|
||||||
<LinkTo @route="jobs.job" @model={{this.allocation.job}} @query={{hash jobNamespace=this.allocation.job.namespace.id}} data-test-job>{{this.allocation.job.name}}</LinkTo>
|
<LinkTo
|
||||||
<span class="is-faded" data-test-task-group>/ {{this.allocation.taskGroup.name}}</span>
|
@route="jobs.job"
|
||||||
|
@model={{format-job-id this.allocation.job.id}}
|
||||||
|
data-test-job
|
||||||
|
>
|
||||||
|
{{this.allocation.job.name}}
|
||||||
|
</LinkTo>
|
||||||
|
<span class="is-faded" data-test-task-group>
|
||||||
|
/
|
||||||
|
{{this.allocation.taskGroup.name}}
|
||||||
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</td>
|
</td>
|
||||||
<td data-test-job-version class="is-1">{{this.allocation.jobVersion}}</td>
|
<td data-test-job-version class="is-1">
|
||||||
|
{{this.allocation.jobVersion}}
|
||||||
|
</td>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if (not (eq this.context "volume"))}}
|
{{#if (not (eq this.context "volume"))}}
|
||||||
<td data-test-volume>{{if this.allocation.taskGroup.volumes.length "Yes"}}</td>
|
<td data-test-volume>
|
||||||
|
{{if this.allocation.taskGroup.volumes.length "Yes"}}
|
||||||
|
</td>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<td data-test-cpu class="is-1 has-text-centered">
|
<td data-test-cpu class="is-1 has-text-centered">
|
||||||
<AllocationStat
|
<AllocationStat
|
||||||
|
@ -74,7 +120,8 @@
|
||||||
@allocation={{this.allocation}}
|
@allocation={{this.allocation}}
|
||||||
@statsTracker={{this.stats}}
|
@statsTracker={{this.stats}}
|
||||||
@isLoading={{this.fetchStats.isRunning}}
|
@isLoading={{this.fetchStats.isRunning}}
|
||||||
@error={{this.statsError}} />
|
@error={{this.statsError}}
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td data-test-mem class="is-1 has-text-centered">
|
<td data-test-mem class="is-1 has-text-centered">
|
||||||
<AllocationStat
|
<AllocationStat
|
||||||
|
@ -82,5 +129,6 @@
|
||||||
@allocation={{this.allocation}}
|
@allocation={{this.allocation}}
|
||||||
@statsTracker={{this.stats}}
|
@statsTracker={{this.stats}}
|
||||||
@isLoading={{this.fetchStats.isRunning}}
|
@isLoading={{this.fetchStats.isRunning}}
|
||||||
@error={{this.statsError}} />
|
@error={{this.statsError}}
|
||||||
|
/>
|
||||||
</td>
|
</td>
|
|
@ -2,46 +2,85 @@
|
||||||
<div class="boxed-section-head">
|
<div class="boxed-section-head">
|
||||||
Recent Allocations
|
Recent Allocations
|
||||||
</div>
|
</div>
|
||||||
<div class="boxed-section-body {{if this.job.allocations.length "is-full-bleed"}}">
|
<div
|
||||||
|
class="boxed-section-body
|
||||||
|
{{if this.job.allocations.length "is-full-bleed"}}"
|
||||||
|
>
|
||||||
{{#if this.job.allocations.length}}
|
{{#if this.job.allocations.length}}
|
||||||
<ListTable
|
<ListTable
|
||||||
@source={{this.sortedAllocations}}
|
@source={{this.sortedAllocations}}
|
||||||
@sortProperty={{this.sortProperty}}
|
@sortProperty={{this.sortProperty}}
|
||||||
@sortDescending={{this.sortDescending}}
|
@sortDescending={{this.sortDescending}}
|
||||||
@class="with-foot" as |t|>
|
@class="with-foot" as |t|
|
||||||
|
>
|
||||||
<t.head>
|
<t.head>
|
||||||
<th class="is-narrow"></th>
|
<th class="is-narrow"></th>
|
||||||
<th>ID</th>
|
<th>
|
||||||
<th>Task Group</th>
|
ID
|
||||||
<th>Created</th>
|
</th>
|
||||||
<th>Modified</th>
|
<th>
|
||||||
<th>Status</th>
|
Task Group
|
||||||
<th>Version</th>
|
</th>
|
||||||
<th>Client</th>
|
<th>
|
||||||
<th>Volume</th>
|
Created
|
||||||
<th>CPU</th>
|
</th>
|
||||||
<th>Memory</th>
|
<th>
|
||||||
|
Modified
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Version
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Client
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Volume
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
CPU
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Memory
|
||||||
|
</th>
|
||||||
</t.head>
|
</t.head>
|
||||||
<t.body as |row|>
|
<t.body as |row|>
|
||||||
<AllocationRow
|
<AllocationRow
|
||||||
@data-test-allocation={{row.model.id}}
|
@data-test-allocation={{row.model.id}}
|
||||||
@allocation={{row.model}}
|
@allocation={{row.model}}
|
||||||
@context="job"
|
@context="job"
|
||||||
@onClick={{action "gotoAllocation" row.model}} />
|
@onClick={{action "gotoAllocation" row.model}}
|
||||||
|
/>
|
||||||
</t.body>
|
</t.body>
|
||||||
</ListTable>
|
</ListTable>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class="empty-message" data-test-empty-recent-allocations>
|
<div class="empty-message" data-test-empty-recent-allocations>
|
||||||
<h3 class="empty-message-headline" data-test-empty-recent-allocations-headline>No Allocations</h3>
|
<h3
|
||||||
<p class="empty-message-body" data-test-empty-recent-allocations-message>No allocations have been placed.</p>
|
class="empty-message-headline"
|
||||||
|
data-test-empty-recent-allocations-headline
|
||||||
|
>
|
||||||
|
No Allocations
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
class="empty-message-body"
|
||||||
|
data-test-empty-recent-allocations-message
|
||||||
|
>
|
||||||
|
No allocations have been placed.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{#if this.job.allocations.length}}
|
{{#if this.job.allocations.length}}
|
||||||
<div class="boxed-section-foot">
|
<div class="boxed-section-foot">
|
||||||
<p class="pull-right" data-test-view-all-allocations><LinkTo @route="jobs.job.allocations" @model={{this.job}}>
|
<p class="pull-right" data-test-view-all-allocations>
|
||||||
View all {{this.job.allocations.length}} {{pluralize "allocation" this.job.allocations.length}}
|
<LinkTo @route="jobs.job.allocations" @model={{this.job}}>
|
||||||
</LinkTo></p>
|
View all
|
||||||
|
{{this.job.allocations.length}}
|
||||||
|
{{pluralize "allocation" this.job.allocations.length}}
|
||||||
|
</LinkTo>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
|
@ -42,7 +42,7 @@
|
||||||
<li data-test-tab="allocations">
|
<li data-test-tab="allocations">
|
||||||
<LinkTo
|
<LinkTo
|
||||||
@route="jobs.job.allocations"
|
@route="jobs.job.allocations"
|
||||||
@model={{@job}}
|
@model={{format-job-id @job.id}}
|
||||||
@activeClass="is-active"
|
@activeClass="is-active"
|
||||||
>
|
>
|
||||||
Allocations
|
Allocations
|
||||||
|
|
|
@ -84,7 +84,7 @@
|
||||||
"ember-composable-helpers": "^5.0.0",
|
"ember-composable-helpers": "^5.0.0",
|
||||||
"ember-concurrency": "^2.2.1",
|
"ember-concurrency": "^2.2.1",
|
||||||
"ember-copy": "^2.0.1",
|
"ember-copy": "^2.0.1",
|
||||||
"ember-data": "~3.28.6",
|
"ember-data": "~3.24",
|
||||||
"ember-data-model-fragments": "5.0.0-beta.3",
|
"ember-data-model-fragments": "5.0.0-beta.3",
|
||||||
"ember-decorators": "^6.1.1",
|
"ember-decorators": "^6.1.1",
|
||||||
"ember-exam": "6.1.0",
|
"ember-exam": "6.1.0",
|
||||||
|
|
|
@ -76,7 +76,7 @@ module('Acceptance | allocation detail', function (hooks) {
|
||||||
await Allocation.details.visitJob();
|
await Allocation.details.visitJob();
|
||||||
assert.equal(
|
assert.equal(
|
||||||
currentURL(),
|
currentURL(),
|
||||||
`/jobs/${job.id}`,
|
`/jobs/${job.id}@default`,
|
||||||
'Job link navigates to the job'
|
'Job link navigates to the job'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -305,7 +305,7 @@ module('Acceptance | client detail', function (hooks) {
|
||||||
|
|
||||||
assert.equal(
|
assert.equal(
|
||||||
currentURL(),
|
currentURL(),
|
||||||
`/jobs/${job.id}`,
|
`/jobs/${job.id}@default`,
|
||||||
'Allocation rows link to the job detail page for the allocation'
|
'Allocation rows link to the job detail page for the allocation'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
1042
ui/yarn.lock
1042
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue