kemko/nomad
1
0
Fork 0
mirror of https://github.com/kemko/nomad.git synced 2026-01-06 18:35:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add explicit this to templates (#8388)

Browse Source 
This is the result of running the no-implicit-this-codemod, some manual fixes,
and the addition of a linting rule to prevent future ambiguity.
This commit is contained in:
Buck Doyle
2020-07-09 15:19:07 -05:00
committed by GitHub
parent 0db4324275
commit 8b83cac9bd
118 changed files with 1135 additions and 1134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/.template-lintrc.js
View File

@@ -34,5 +34,6 @@ module.exports = {
// remove when moving from extending `recommended` to `octane`
'no-curly-component-invocation': true,
'no-implicit-this': true,
},
};

18
ui/app/templates/allocations/allocation/fs.hbs
View File

@@ -1,10 +1,10 @@
{{title pathWithLeadingSlash " - Allocation " allocation.shortId " filesystem"}}
<AllocationSubnav @allocation={{allocation}} />
{{title this.pathWithLeadingSlash " - Allocation " this.allocation.shortId " filesystem"}}
<AllocationSubnav @allocation={{this.allocation}} />
<Fs::Browser
@model={{allocation}}
@path={{path}}
@stat={{stat}}
@isFile={{isFile}}
@directoryEntries={{directoryEntries}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}} />
@model={{this.allocation}}
@path={{this.path}}
@stat={{this.stat}}
@isFile={{this.isFile}}
@directoryEntries={{this.directoryEntries}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}} />

98
ui/app/templates/allocations/allocation/index.hbs
View File

@@ -1,15 +1,15 @@
{{title "Allocation " model.name}}
<AllocationSubnav @allocation={{model}} />
{{title "Allocation " this.model.name}}
<AllocationSubnav @allocation={{this.model}} />
<section class="section">
{{#if error}}
{{#if this.error}}
<div data-test-inline-error class="notification is-danger">
<div class="columns">
<div class="column">
<h3 data-test-inline-error-title class="title is-4">{{error.title}}</h3>
<p data-test-inline-error-body>{{error.description}}</p>
<h3 data-test-inline-error-title class="title is-4">{{this.error.title}}</h3>
<p data-test-inline-error-body>{{this.error.description}}</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
<button data-test-inline-error-close class="button is-danger" onclick={{action this.onDismiss}} type="button">Okay</button>
</div>
</div>
</div>
@@ -17,13 +17,13 @@
<h1 data-test-title class="title with-headroom with-flex">
<div>
Allocation {{model.name}}
<span class="bumper-left tag {{model.statusClass}}">{{model.clientStatus}}</span>
Allocation {{this.model.name}}
<span class="bumper-left tag {{this.model.statusClass}}">{{this.model.clientStatus}}</span>
</div>
<div>
{{#if model.isRunning}}
{{#if this.model.isRunning}}
<div class="two-step-button">
<Exec::OpenButton @job={{model.job}} @allocation={{model}} />
<Exec::OpenButton @job={{this.model.job}} @allocation={{this.model}} />
</div>
<TwoStepButton
data-test-stop
@@ -32,9 +32,9 @@
@cancelText="Cancel"
@confirmText="Yes, Stop"
@confirmationMessage="Are you sure? This will reschedule the allocation on a different client."
@awaitingConfirmation={{stopAllocation.isRunning}}
@disabled={{or stopAllocation.isRunning restartAllocation.isRunning}}
@onConfirm={{perform stopAllocation}} />
@awaitingConfirmation={{this.stopAllocation.isRunning}}
@disabled={{or this.stopAllocation.isRunning this.restartAllocation.isRunning}}
@onConfirm={{perform this.stopAllocation}} />
<TwoStepButton
data-test-restart
@alignRight={{true}}
@@ -42,26 +42,26 @@
@cancelText="Cancel"
@confirmText="Yes, Restart"
@confirmationMessage="Are you sure? This will restart the allocation in-place."
@awaitingConfirmation={{restartAllocation.isRunning}}
@disabled={{or stopAllocation.isRunning restartAllocation.isRunning}}
@onConfirm={{perform restartAllocation}} />
@awaitingConfirmation={{this.restartAllocation.isRunning}}
@disabled={{or this.stopAllocation.isRunning this.restartAllocation.isRunning}}
@onConfirm={{perform this.restartAllocation}} />
{{/if}}
</div>
</h1>
<span class="tag is-hollow is-small is-alone no-text-transform">
{{model.id}}
<CopyButton @clipboardText={{model.id}} />
{{this.model.id}}
<CopyButton @clipboardText={{this.model.id}} />
</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>
<LinkTo @route="jobs.job" @model={{model.job}} @query={{hash jobNamespace=model.job.namespace.id}} data-test-job-link>{{model.job.name}}</LinkTo>
<LinkTo @route="jobs.job" @model={{this.model.job}} @query={{hash jobNamespace=this.model.job.namespace.id}} data-test-job-link>{{this.model.job.name}}</LinkTo>
</span>
<span class="pair node-link"><span class="term">Client</span>
<LinkTo @route="clients.client" @model={{model.node}} data-test-client-link>{{model.node.shortId}}</LinkTo>
<LinkTo @route="clients.client" @model={{this.model.node}} data-test-client-link>{{this.model.node.shortId}}</LinkTo>
</span>
</div>
</div>
@@ -71,13 +71,13 @@
Resource Utilization
</div>
<div class="boxed-section-body">
{{#if model.isRunning}}
{{#if this.model.isRunning}}
<div class="columns">
<div class="column">
<PrimaryMetric @resource={{model}} @metric="cpu" />
<PrimaryMetric @resource={{this.model}} @metric="cpu" />
</div>
<div class="column">
<PrimaryMetric @resource={{model}} @metric="memory" />
<PrimaryMetric @resource={{this.model}} @metric="memory" />
</div>
</div>
{{else}}
@@ -89,18 +89,18 @@
</div>
</div>
<LifecycleChart @taskStates={{model.states}} />
<LifecycleChart @taskStates={{this.model.states}} />
<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}}
<div class="boxed-section-body {{if this.sortedStates.length "is-full-bleed"}}">
{{#if this.sortedStates.length}}
<ListTable
@source={{sortedStates}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@source={{this.sortedStates}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="is-striped" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -129,13 +129,13 @@
</div>
</div>
{{#if network.ports.length}}
{{#if this.network.ports.length}}
<div class="boxed-section" data-test-allocation-ports>
<div class="boxed-section-head">
Ports
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{network.ports}} as |t|>
<ListTable @source={{this.network.ports}} as |t|>
<t.head>
<th class="is-2">Name</th>
<th class="is-1">Dynamic?</th>
@@ -147,7 +147,7 @@
<td data-test-allocation-port-name>{{row.model.name}}</td>
<td data-test-allocation-port-is-dynamic>{{if row.model.isDynamic "Yes" "No"}}</td>
<td data-test-allocation-port-address>
<a href="http://{{network.ip}}:{{row.model.port}}" target="_blank" rel="noopener noreferrer">{{network.ip}}:{{row.model.port}}</a>
<a href="http://{{this.network.ip}}:{{row.model.port}}" target="_blank" rel="noopener noreferrer">{{this.network.ip}}:{{row.model.port}}</a>
</td>
<td data-test-allocation-port-to>{{row.model.to}}</td>
</tr>
@@ -157,13 +157,13 @@
</div>
{{/if}}
{{#if services.length}}
{{#if this.services.length}}
<div class="boxed-section">
<div class="boxed-section-head">
Services
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{services}} as |t|>
<ListTable @source={{this.services}} as |t|>
<t.head>
<th class="is-2">Name</th>
<th class="is-1">Port</th>
@@ -189,47 +189,47 @@
</div>
{{/if}}
{{#if model.hasRescheduleEvents}}
{{#if this.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">
<RescheduleEventTimeline @allocation={{model}} />
<RescheduleEventTimeline @allocation={{this.model}} />
</div>
</div>
{{/if}}
{{#if model.wasPreempted}}
{{#if this.model.wasPreempted}}
<div class="boxed-section is-warning" data-test-was-preempted>
<div class="boxed-section-head">Preempted By</div>
<div class="boxed-section-body">
{{#if preempter}}
{{#if this.preempter}}
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="pair">
<span data-test-allocation-status class="tag {{preempter.statusClass}}">
{{preempter.clientStatus}}
<span data-test-allocation-status class="tag {{this.preempter.statusClass}}">
{{this.preempter.clientStatus}}
</span>
</span>
<span class="pair">
<span class="term" data-test-allocation-name>{{preempter.name}}</span>
<LinkTo @route="allocations.allocation" @model={{preempter}} data-test-allocation-id>{{preempter.shortId}}</LinkTo>
<span class="term" data-test-allocation-name>{{this.preempter.name}}</span>
<LinkTo @route="allocations.allocation" @model={{this.preempter}} data-test-allocation-id>{{this.preempter.shortId}}</LinkTo>
</span>
<span class="pair job-link"><span class="term">Job</span>
<LinkTo @route="jobs.job" @model={{preempter.job}} @query={{hash jobNamespace=preempter.job.namespace.id}} data-test-job-link>{{preempter.job.name}}</LinkTo>
<LinkTo @route="jobs.job" @model={{this.preempter.job}} @query={{hash jobNamespace=this.preempter.job.namespace.id}} data-test-job-link>{{this.preempter.job.name}}</LinkTo>
</span>
<span class="pair job-priority"><span class="term">Priority</span>
<span data-test-job-priority>{{preempter.job.priority}}</span>
<span data-test-job-priority>{{this.preempter.job.priority}}</span>
</span>
<span class="pair node-link"><span class="term">Client</span>
<LinkTo @route="clients.client" @model={{preempter.node}} data-test-client-link>{{preempter.node.shortId}}</LinkTo>
<LinkTo @route="clients.client" @model={{this.preempter.node}} data-test-client-link>{{this.preempter.node.shortId}}</LinkTo>
</span>
<span class="pair"><span class="term">Reserved CPU</span>
<span data-test-allocation-cpu>{{preempter.resources.cpu}} MHz</span>
<span data-test-allocation-cpu>{{this.preempter.resources.cpu}} MHz</span>
</span>
<span class="pair"><span class="term">Reserved Memory</span>
<span data-test-allocation-memory>{{preempter.resources.memory}} MiB</span>
<span data-test-allocation-memory>{{this.preempter.resources.memory}} MiB</span>
</span>
</div>
</div>
@@ -243,12 +243,12 @@
</div>
{{/if}}
{{#if (and model.preemptedAllocations.isFulfilled model.preemptedAllocations.length)}}
{{#if (and this.model.preemptedAllocations.isFulfilled this.model.preemptedAllocations.length)}}
<div class="boxed-section" data-test-preemptions>
<div class="boxed-section-head">Preempted Allocations</div>
<div class="boxed-section-body">
<ListTable
@source={{model.preemptedAllocations}}
@source={{this.model.preemptedAllocations}}
@class="allocations is-isolated" as |t|>
<t.head>
<th class="is-narrow"></th>

18
ui/app/templates/allocations/allocation/task/fs.hbs
View File

@@ -1,10 +1,10 @@
{{title pathWithLeadingSlash " - Task " taskState.name " filesystem"}}
<TaskSubnav @task={{taskState}} />
{{title this.pathWithLeadingSlash " - Task " this.taskState.name " filesystem"}}
<TaskSubnav @task={{this.taskState}} />
<Fs::Browser
@model={{taskState}}
@path={{path}}
@stat={{stat}}
@isFile={{isFile}}
@directoryEntries={{directoryEntries}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}} />
@model={{this.taskState}}
@path={{this.path}}
@stat={{this.stat}}
@isFile={{this.isFile}}
@directoryEntries={{this.directoryEntries}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}} />

68
ui/app/templates/allocations/allocation/task/index.hbs
View File

@@ -1,15 +1,15 @@
{{title "Task " model.name}}
<TaskSubnav @task={{model}} />
{{title "Task " this.model.name}}
<TaskSubnav @task={{this.model}} />
<section class="section">
{{#if error}}
{{#if this.error}}
<div data-test-inline-error class="notification is-danger">
<div class="columns">
<div class="column">
<h3 data-test-inline-error-title class="title is-4">{{error.title}}</h3>
<p data-test-inline-error-body>{{error.description}}</p>
<h3 data-test-inline-error-title class="title is-4">{{this.error.title}}</h3>
<p data-test-inline-error-body>{{this.error.description}}</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-inline-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
<button data-test-inline-error-close class="button is-danger" onclick={{action this.onDismiss}} type="button">Okay</button>
</div>
</div>
</div>
@@ -17,20 +17,20 @@
<h1 class="title with-flex" data-test-title>
<div>
{{model.name}}
{{#if model.isConnectProxy}}
{{this.model.name}}
{{#if this.model.isConnectProxy}}
<ProxyTag @class="bumper-left" />
{{/if}}
<span class="{{unless model.isConnectProxy "bumper-left"}} tag {{model.stateClass}}" data-test-state>{{model.state}}</span>
<span class="{{unless this.model.isConnectProxy "bumper-left"}} tag {{this.model.stateClass}}" data-test-state>{{this.model.state}}</span>
</div>
<div>
{{#if model.isRunning}}
{{#if this.model.isRunning}}
<div class="two-step-button">
<Exec::OpenButton
@job={{model.task.taskGroup.job}}
@taskGroup={{model.task.taskGroup}}
@allocation={{model.allocation}}
@task={{model.task}} />
@job={{this.model.task.taskGroup.job}}
@taskGroup={{this.model.task.taskGroup}}
@allocation={{this.model.allocation}}
@task={{this.model.task}} />
</div>
<TwoStepButton
data-test-restart
@@ -39,9 +39,9 @@
@cancelText="Cancel"
@confirmText="Yes, Restart"
@confirmationMessage="Are you sure? This will restart the task in-place."
@awaitingConfirmation={{restartTask.isRunning}}
@disabled={{restartTask.isRunning}}
@onConfirm={{perform restartTask}} />
@awaitingConfirmation={{this.restartTask.isRunning}}
@disabled={{this.restartTask.isRunning}}
@onConfirm={{perform this.restartTask}} />
{{/if}}
</div>
</h1>
@@ -51,21 +51,21 @@
<span class="label">Task Details</span>
<span class="pair" data-test-started-at>
<span class="term">Started At</span>
{{format-ts model.startedAt}}
{{format-ts this.model.startedAt}}
</span>
{{#if model.finishedAt}}
{{#if this.model.finishedAt}}
<span class="pair">
<span class="term">Finished At</span>
{{format-ts model.finishedAt}}
{{format-ts this.model.finishedAt}}
</span>
{{/if}}
<span class="pair">
<span class="term">Driver</span>
{{model.task.driver}}
{{this.model.task.driver}}
</span>
<span class="pair">
<span class="term">Lifecycle</span>
<span data-test-lifecycle>{{model.task.lifecycleName}}</span>
<span data-test-lifecycle>{{this.model.task.lifecycleName}}</span>
</span>
</div>
</div>
@@ -75,13 +75,13 @@
Resource Utilization
</div>
<div class="boxed-section-body">
{{#if model.isRunning}}
{{#if this.model.isRunning}}
<div class="columns">
<div class="column">
<PrimaryMetric @resource={{model}} @metric="cpu" />
<PrimaryMetric @resource={{this.model}} @metric="cpu" />
</div>
<div class="column">
<PrimaryMetric @resource={{model}} @metric="memory" />
<PrimaryMetric @resource={{this.model}} @metric="memory" />
</div>
</div>
{{else}}
@@ -93,13 +93,13 @@
</div>
</div>
{{#if (and (not model.task.lifecycle) prestartTaskStates)}}
{{#if (and (not this.model.task.lifecycle) this.prestartTaskStates)}}
<div class="boxed-section" data-test-prestart-tasks>
<div class="boxed-section-head">
Prestart Tasks
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{prestartTaskStates}} as |t|>
<ListTable @source={{this.prestartTaskStates}} as |t|>
<t.head>
<th class="is-narrow"></th>
<th>Task</th>
@@ -125,13 +125,13 @@
</div>
{{/if}}
{{#if network.ports.length}}
{{#if this.network.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">
<ListTable @source={{network.ports}} as |t|>
<ListTable @source={{this.network.ports}} as |t|>
<t.head>
<th class="is-1">Dynamic?</th>
<th class="is-2">Name</th>
@@ -142,8 +142,8 @@
<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" rel="noopener noreferrer">
{{network.ip}}:{{row.model.port}}
<a href="http://{{this.network.ip}}:{{row.model.port}}" target="_blank" rel="noopener noreferrer">
{{this.network.ip}}:{{row.model.port}}
</a>
</td>
</tr>
@@ -153,13 +153,13 @@
</div>
{{/if}}
{{#if model.task.volumeMounts.length}}
{{#if this.model.task.volumeMounts.length}}
<div data-test-volumes class="boxed-section">
<div class="boxed-section-head">
Volumes
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{model.task.volumeMounts}} as |t|>
<ListTable @source={{this.model.task.volumeMounts}} as |t|>
<t.head>
<th>Name</th>
<th>Destination</th>
@@ -192,7 +192,7 @@
Recent Events
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{reverse model.events}} @class="is-striped" as |t|>
<ListTable @source={{reverse this.model.events}} @class="is-striped" as |t|>
<t.head>
<th class="is-3">Time</th>
<th class="is-1">Type</th>

6
ui/app/templates/allocations/allocation/task/logs.hbs
View File

@@ -1,5 +1,5 @@
{{title "Task " model.name " logs"}}
<TaskSubnav @task={{model}} />
{{title "Task " this.model.name " logs"}}
<TaskSubnav @task={{this.model}} />
<section class="section is-full-width">
<TaskLog data-test-task-log @allocation={{model.allocation}} @task={{model.name}} />
<TaskLog data-test-task-log @allocation={{this.model.allocation}} @task={{this.model.name}} />
</section>

18
ui/app/templates/application.hbs
View File

@@ -1,25 +1,25 @@
<HeadLayout />
{{title (if system.shouldShowRegions (concat system.activeRegion " - ")) "Nomad" separator=" - "}}
{{title (if this.system.shouldShowRegions (concat this.system.activeRegion " - ")) "Nomad" separator=" - "}}
<SvgPatterns />
{{#unless error}}
{{#unless this.error}}
{{outlet}}
{{else}}
<div class="error-container">
<div data-test-error class="error-message">
{{#if isNoLeader}}
{{#if this.isNoLeader}}
<h1 data-test-error-title class="title is-spaced">No Cluster Leader</h1>
<p data-test-error-message class="subtitle">
The cluster has no leader. <a href="https://www.nomadproject.io/guides/outage.html"> Read about Outage Recovery.</a>
</p>
{{else if is500}}
{{else if this.is500}}
<h1 data-test-error-title class="title is-spaced">Server Error</h1>
<p data-test-error-message class="subtitle">A server error prevented data from being sent to the client.</p>
{{else if is404}}
{{else if this.is404}}
<h1 data-test-error-title class="title is-spaced">Not Found</h1>
<p data-test-error-message class="subtitle">What you're looking for couldn't be found. It either doesn't exist or you are not authorized to see it.</p>
{{else if is403}}
{{else if this.is403}}
<h1 data-test-error-title class="title is-spaced">Not Authorized</h1>
{{#if token.secret}}
{{#if this.token.secret}}
<p data-test-error-message class="subtitle">Your <LinkTo @route="settings.tokens" data-test-error-acl-link>ACL token</LinkTo> does not provide the required permissions. Contact your administrator if this is an error.</p>
{{else}}
<p data-test-error-message class="subtitle">Provide an <LinkTo @route="settings.tokens" data-test-error-acl-link>ACL token</LinkTo> with requisite permissions to view this.</p>
@@ -28,8 +28,8 @@
<h1 data-test-error-title class="title is-spaced">Error</h1>
<p data-test-error-message class="subtitle">Something went wrong.</p>
{{/if}}
{{#if (eq config.environment "development")}}
<pre class="error-stack-trace"><code>{{errorStr}}</code></pre>
{{#if (eq this.config.environment "development")}}
<pre class="error-stack-trace"><code>{{this.errorStr}}</code></pre>
{{/if}}
</div>
<div class="error-links">

148
ui/app/templates/clients/client/index.hbs
View File

@@ -1,46 +1,46 @@
{{title "Client " (or model.name model.shortId)}}
<ClientSubnav @client={{model}} />
{{title "Client " (or this.model.name this.model.shortId)}}
<ClientSubnav @client={{this.model}} />
<section class="section">
{{#if eligibilityError}}
{{#if this.eligibilityError}}
<div data-test-eligibility-error class="columns">
<div class="column">
<div class="notification is-danger">
<h3 data-test-title class="title is-4">Eligibility Error</h3>
<p data-test-message>{{eligibilityError}}</p>
<p data-test-message>{{this.eligibilityError}}</p>
</div>
</div>
<div class="column is-centered is-minimum">
<button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}} type="button">Okay</button>
<button data-test-dismiss class="button is-danger" onclick={{action (mut this.eligibilityError) ""}} type="button">Okay</button>
</div>
</div>
{{/if}}
{{#if stopDrainError}}
{{#if this.stopDrainError}}
<div data-test-stop-drain-error class="columns">
<div class="column">
<div class="notification is-danger">
<h3 data-test-title class="title is-4">Stop Drain Error</h3>
<p data-test-message>{{stopDrainError}}</p>
<p data-test-message>{{this.stopDrainError}}</p>
</div>
</div>
<div class="column is-centered is-minimum">
<button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}} type="button">Okay</button>
<button data-test-dismiss class="button is-danger" onclick={{action (mut this.stopDrainError) ""}} type="button">Okay</button>
</div>
</div>
{{/if}}
{{#if drainError}}
{{#if this.drainError}}
<div data-test-drain-error class="columns">
<div class="column">
<div class="notification is-danger">
<h3 data-test-title class="title is-4">Drain Error</h3>
<p data-test-message>{{drainError}}</p>
<p data-test-message>{{this.drainError}}</p>
</div>
</div>
<div class="column is-centered is-minimum">
<button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}} type="button">Okay</button>
<button data-test-dismiss class="button is-danger" onclick={{action (mut this.drainError) ""}} type="button">Okay</button>
</div>
</div>
{{/if}}
{{#if showDrainStoppedNotification}}
{{#if this.showDrainStoppedNotification}}
<div class="notification is-info">
<div data-test-drain-stopped-notification class="columns">
<div class="column">
@@ -48,12 +48,12 @@
<p data-test-message>The drain has been stopped and the node has been set to ineligible.</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}} type="button">Okay</button>
<button data-test-dismiss class="button is-info" onclick={{action (mut this.showDrainStoppedNotification) false}} type="button">Okay</button>
</div>
</div>
</div>
{{/if}}
{{#if showDrainUpdateNotification}}
{{#if this.showDrainUpdateNotification}}
<div class="notification is-info">
<div data-test-drain-updated-notification class="columns">
<div class="column">
@@ -61,12 +61,12 @@
<p data-test-message>The new drain specification has been applied.</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}} type="button">Okay</button>
<button data-test-dismiss class="button is-info" onclick={{action (mut this.showDrainUpdateNotification) false}} type="button">Okay</button>
</div>
</div>
</div>
{{/if}}
{{#if showDrainNotification}}
{{#if this.showDrainNotification}}
<div class="notification is-info">
<div data-test-drain-complete-notification class="columns">
<div class="column">
@@ -74,7 +74,7 @@
<p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}} type="button">Okay</button>
<button data-test-dimiss class="button is-info" onclick={{action (mut this.showDrainNotification) false}} type="button">Okay</button>
</div>
</div>
</div>
@@ -82,22 +82,22 @@
<div class="toolbar">
<div class="toolbar-item is-top-aligned is-minimum">
<span class="title">
<span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}">
{{x-icon model.compositeStatusIcon}}
<span data-test-node-status="{{this.model.compositeStatus}}" class="node-status-light {{this.model.compositeStatus}}">
{{x-icon this.model.compositeStatusIcon}}
</span>
</span>
</div>
<div class="toolbar-item">
<h1 data-test-title class="title with-subheading">
{{or model.name model.shortId}}
{{or this.model.name this.model.shortId}}
</h1>
<p>
<label class="is-interactive">
<Toggle
data-test-eligibility-toggle
@isActive={{model.isEligible}}
@isDisabled={{or setEligibility.isRunning model.isDraining (cannot "write client")}}
@onToggle={{perform setEligibility (not model.isEligible)}}>
@isActive={{this.model.isEligible}}
@isDisabled={{or this.setEligibility.isRunning this.model.isDraining (cannot "write client")}}
@onToggle={{perform this.setEligibility (not this.model.isEligible)}}>
Eligible
</Toggle>
<span class="tooltip" aria-label="Only eligible clients can receive allocations">
@@ -105,26 +105,26 @@
</span>
</label>
<span data-test-node-id class="tag is-hollow is-small no-text-transform">
{{model.id}}
<CopyButton @clipboardText={{model.id}} />
{{this.model.id}}
<CopyButton @clipboardText={{this.model.id}} />
</span>
</p>
</div>
<div class="toolbar-item is-right-aligned is-top-aligned">
{{#if model.isDraining}}
{{#if this.model.isDraining}}
<TwoStepButton
data-test-drain-stop
@idleText="Stop Drain"
@cancelText="Cancel"
@confirmText="Yes, Stop"
@confirmationMessage="Are you sure you want to stop this drain?"
@awaitingConfirmation={{stopDrain.isRunning}}
@onConfirm={{perform stopDrain}} />
@awaitingConfirmation={{this.stopDrain.isRunning}}
@onConfirm={{perform this.stopDrain}} />
{{/if}}
</div>
<div class="toolbar-item is-right-aligned is-top-aligned">
<DrainPopover
@client={{model}}
@client={{this.model}}
@isDisabled={{cannot "write client"}}
@onDrain={{action "drainNotify"}}
@onError={{action "setDrainError"}} />
@@ -136,21 +136,21 @@
<span class="label">Client Details</span>
<span class="pair" data-test-status-definition>
<span class="term">Status</span>
<span class="status-text node-{{model.status}}">{{model.status}}</span>
<span class="status-text node-{{this.model.status}}">{{this.model.status}}</span>
</span>
<span class="pair" data-test-address-definition>
<span class="term">Address</span>
{{model.httpAddr}}
{{this.model.httpAddr}}
</span>
<span class="pair" data-test-datacenter-definition>
<span class="term">Datacenter</span>
{{model.datacenter}}
{{this.model.datacenter}}
</span>
<span class="pair" data-test-driver-health>
<span class="term">Drivers</span>
{{#if model.unhealthyDrivers.length}}
{{#if this.model.unhealthyDrivers.length}}
{{x-icon "warning" class="is-text is-warning"}}
{{model.unhealthyDrivers.length}} of {{model.detectedDrivers.length}} {{pluralize "driver" model.detectedDrivers.length}} unhealthy
{{this.model.unhealthyDrivers.length}} of {{this.model.detectedDrivers.length}} {{pluralize "driver" this.model.detectedDrivers.length}} unhealthy
{{else}}
All healthy
{{/if}}
@@ -158,39 +158,39 @@
</div>
</div>
{{#if model.drainStrategy}}
{{#if this.model.drainStrategy}}
<div data-test-drain-details class="boxed-section is-info">
<div class="boxed-section-head">
<div class="boxed-section-row">Drain Strategy</div>
<div class="boxed-section-row">
<div class="inline-definitions is-small">
{{#unless model.drainStrategy.hasNoDeadline}}
{{#unless this.model.drainStrategy.hasNoDeadline}}
<span class="pair">
<span class="term">Duration</span>
{{#if model.drainStrategy.isForced}}
{{#if this.model.drainStrategy.isForced}}
<span data-test-duration>--</span>
{{else}}
<span data-test-duration class="tooltip" aria-label={{format-duration model.drainStrategy.deadline}}>
{{format-duration model.drainStrategy.deadline}}
<span data-test-duration class="tooltip" aria-label={{format-duration this.model.drainStrategy.deadline}}>
{{format-duration this.model.drainStrategy.deadline}}
</span>
{{/if}}
</span>
{{/unless}}
<span class="pair">
<span class="term">{{if model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
{{#if model.drainStrategy.hasNoDeadline}}
<span class="term">{{if this.model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
{{#if this.model.drainStrategy.hasNoDeadline}}
<span data-test-deadline>No deadline</span>
{{else if model.drainStrategy.isForced}}
{{else if this.model.drainStrategy.isForced}}
<span data-test-deadline>--</span>
{{else}}
<span data-test-deadline class="tooltip" aria-label={{format-ts model.drainStrategy.forceDeadline}}>
{{moment-from-now model.drainStrategy.forceDeadline interval=1000 hideAffix=true}}
<span data-test-deadline class="tooltip" aria-label={{format-ts this.model.drainStrategy.forceDeadline}}>
{{moment-from-now this.model.drainStrategy.forceDeadline interval=1000 hideAffix=true}}
</span>
{{/if}}
</span>
<span data-test-force-drain-text class="pair">
<span class="term">Force Drain</span>
{{#if model.drainStrategy.isForced}}
{{#if this.model.drainStrategy.isForced}}
{{x-icon "warning" class="is-text is-warning"}} Yes
{{else}}
No
@@ -198,10 +198,10 @@
</span>
<span data-test-drain-system-jobs-text class="pair">
<span class="term">Drain System Jobs</span>
{{if model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
{{if this.model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
</span>
</div>
{{#unless model.drainStrategy.isForced}}
{{#unless this.model.drainStrategy.isForced}}
<div class="pull-right">
<TwoStepButton
data-test-force
@@ -211,8 +211,8 @@
@cancelText="Cancel"
@confirmText="Yes, Force Drain"
@confirmationMessage="Are you sure you want to force drain?"
@awaitingConfirmation={{forceDrain.isRunning}}
@onConfirm={{perform forceDrain}} />
@awaitingConfirmation={{this.forceDrain.isRunning}}
@onConfirm={{perform this.forceDrain}} />
</div>
{{/unless}}
</div>
@@ -223,26 +223,26 @@
<div class="metric-group">
<div class="metric is-primary">
<h3 class="label">Complete</h3>
<p data-test-complete-count class="value">{{model.completeAllocations.length}}</p>
<p data-test-complete-count class="value">{{this.model.completeAllocations.length}}</p>
</div>
</div>
<div class="metric-group">
<div class="metric">
<h3 class="label">Migrating</h3>
<p data-test-migrating-count class="value">{{model.migratingAllocations.length}}</p>
<p data-test-migrating-count class="value">{{this.model.migratingAllocations.length}}</p>
</div>
</div>
<div class="metric-group">
<div class="metric">
<h3 class="label">Remaining</h3>
<p data-test-remaining-count class="value">{{model.runningAllocations.length}}</p>
<p data-test-remaining-count class="value">{{this.model.runningAllocations.length}}</p>
</div>
</div>
</div>
<div class="column">
<h3 class="title is-4">Status</h3>
{{#if model.lastMigrateTime}}
<p data-test-status>{{moment-to-now model.lastMigrateTime interval=1000 hideAffix=true}} since an allocation was successfully migrated.</p>
{{#if this.model.lastMigrateTime}}
<p data-test-status>{{moment-to-now this.model.lastMigrateTime interval=1000 hideAffix=true}} since an allocation was successfully migrated.</p>
{{else}}
<p data-test-status>No allocations migrated.</p>
{{/if}}
@@ -259,10 +259,10 @@
<div class="boxed-section-body">
<div class="columns">
<div class="column">
<PrimaryMetric @resource={{model}} @metric="cpu" />
<PrimaryMetric @resource={{this.model}} @metric="cpu" />
</div>
<div class="column">
<PrimaryMetric @resource={{model}} @metric="memory" />
<PrimaryMetric @resource={{this.model}} @metric="memory" />
</div>
</div>
</div>
@@ -273,30 +273,30 @@
<div>
Allocations
<button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all type="button">
{{model.allocations.length}}
{{this.model.allocations.length}}
</button>
{{#if preemptions.length}}
{{#if this.preemptions.length}}
<button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions type="button">
{{preemptions.length}} {{pluralize "preemption" preemptions.length}}
{{this.preemptions.length}} {{pluralize "preemption" this.preemptions.length}}
</button>
{{/if}}
</div>
<SearchBox
@searchTerm={{mut searchTerm}}
@onChange={{action resetPagination}}
@searchTerm={{mut this.searchTerm}}
@onChange={{action this.resetPagination}}
@placeholder="Search allocations..."
@class="is-inline pull-right"
@inputClass="is-compact" />
</div>
<div class="boxed-section-body is-full-bleed">
<ListPagination
@source={{sortedAllocations}}
@size={{pageSize}}
@page={{currentPage}} as |p|>
@source={{this.sortedAllocations}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -321,7 +321,7 @@
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedAllocations.length}}
</div>
<p.prev @class="pagination-previous"> &lt; </p.prev>
<p.next @class="pagination-next"> &gt; </p.next>
@@ -337,7 +337,7 @@
Client Events
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{sortedEvents}} @class="is-striped" as |t|>
<ListTable @source={{this.sortedEvents}} @class="is-striped" as |t|>
<t.head>
<th class="is-2">Time</th>
<th class="is-2">Subsystem</th>
@@ -363,13 +363,13 @@
</div>
</div>
{{#if sortedHostVolumes.length}}
{{#if this.sortedHostVolumes.length}}
<div data-test-client-host-volumes class="boxed-section">
<div class="boxed-section-head">
Host Volumes
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{sortedHostVolumes}} @class="is-striped" as |t|>
<ListTable @source={{this.sortedHostVolumes}} @class="is-striped" as |t|>
<t.head>
<th>Name</th>
<th>Source</th>
@@ -392,7 +392,7 @@
Driver Status
</div>
<div class="boxed-section-body">
<ListAccordion @source={{sortedDrivers}} @key="name" as |a|>
<ListAccordion @source={{this.sortedDrivers}} @key="name" as |a|>
<a.head @buttonLabel="details" @isExpandable={{a.item.detected}}>
<div class="columns inline-definitions {{unless a.item.detected "is-faded"}}">
<div class="column is-1">
@@ -454,17 +454,17 @@
<div class="boxed-section-body is-full-bleed">
<AttributesTable
data-test-attributes
@attributes={{model.attributes.attributesStructured}}
@attributes={{this.model.attributes.attributesStructured}}
@class="attributes-table" />
</div>
<div class="boxed-section-head">
Meta
</div>
{{#if model.meta.attributesStructured}}
{{#if this.model.meta.attributesStructured}}
<div class="boxed-section-body is-full-bleed">
<AttributesTable
data-test-meta
@attributes={{model.meta.attributesStructured}}
@attributes={{this.model.meta.attributesStructured}}
@class="attributes-table" />
</div>
{{else}}

10
ui/app/templates/clients/client/monitor.hbs
View File

@@ -1,11 +1,11 @@
{{title "Client " (or model.name model.shortId)}}
<ClientSubnav @client={{model}} />
{{title "Client " (or this.model.name this.model.shortId)}}
<ClientSubnav @client={{this.model}} />
<section class="section is-full-width">
{{#if (can "read agent")}}
<AgentMonitor
@level={{level}}
@client={{model}}
@onLevelChange={{action (mut level)}} />
@level={{this.level}}
@client={{this.model}}
@onLevelChange={{action (mut this.level)}} />
{{else}}
<ForbiddenMessage @permission="agent:read" />
{{/if}}

56
ui/app/templates/clients/index.hbs
View File

@@ -1,14 +1,14 @@
{{title "Clients"}}
<section class="section">
{{#if isForbidden}}
{{#if this.isForbidden}}
<ForbiddenMessage />
{{else}}
<div class="toolbar">
<div class="toolbar-item">
{{#if nodes.length}}
{{#if this.nodes.length}}
<SearchBox
@searchTerm={{mut searchTerm}}
@onChange={{action resetPagination}}
@searchTerm={{mut this.searchTerm}}
@onChange={{action this.resetPagination}}
@placeholder="Search clients..." />
{{/if}}
</div>
@@ -17,39 +17,39 @@
<MultiSelectDropdown
data-test-class-facet
@label="Class"
@options={{optionsClass}}
@selection={{selectionClass}}
@onSelect={{action setFacetQueryParam "qpClass"}} />
@options={{this.optionsClass}}
@selection={{this.selectionClass}}
@onSelect={{action this.setFacetQueryParam "qpClass"}} />
<MultiSelectDropdown
data-test-state-facet
@label="State"
@options={{optionsState}}
@selection={{selectionState}}
@onSelect={{action setFacetQueryParam "qpState"}} />
@options={{this.optionsState}}
@selection={{this.selectionState}}
@onSelect={{action this.setFacetQueryParam "qpState"}} />
<MultiSelectDropdown
data-test-datacenter-facet
@label="Datacenter"
@options={{optionsDatacenter}}
@selection={{selectionDatacenter}}
@onSelect={{action setFacetQueryParam "qpDatacenter"}} />
@options={{this.optionsDatacenter}}
@selection={{this.selectionDatacenter}}
@onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
<MultiSelectDropdown
data-test-volume-facet
@label="Volume"
@options={{optionsVolume}}
@selection={{selectionVolume}}
@onSelect={{action setFacetQueryParam "qpVolume"}} />
@options={{this.optionsVolume}}
@selection={{this.selectionVolume}}
@onSelect={{action this.setFacetQueryParam "qpVolume"}} />
</div>
</div>
</div>
{{#if sortedNodes}}
{{#if this.sortedNodes}}
<ListPagination
@source={{sortedNodes}}
@size={{pageSize}}
@page={{currentPage}} as |p|>
@source={{this.sortedNodes}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -66,10 +66,10 @@
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action resetPagination}} />
<PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination" data-test-pagination>
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedNodes.length}}
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedNodes.length}}
</div>
<p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
<p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
@@ -79,19 +79,19 @@
</ListPagination>
{{else}}
<div class="empty-message" data-test-empty-clients-list>
{{#if (eq nodes.length 0)}}
{{#if (eq this.nodes.length 0)}}
<h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Clients</h3>
<p class="empty-message-body">
The cluster currently has no client nodes.
</p>
{{else if (eq filteredNodes.length 0)}}
{{else if (eq this.filteredNodes.length 0)}}
<h3 data-test-empty-clients-list-headline class="empty-message-headline">No Matches</h3>
<p class="empty-message-body">
No clients match your current filter selection.
</p>
{{else if searchTerm}}
{{else if this.searchTerm}}
<h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Matches</h3>
<p class="empty-message-body">No clients match the term <strong>{{searchTerm}}</strong></p>
<p class="empty-message-body">No clients match the term <strong>{{this.searchTerm}}</strong></p>
{{/if}}
</div>
{{/if}}

12
ui/app/templates/components/agent-monitor.hbs
View File

@@ -4,17 +4,17 @@
data-test-level-switcher
@tagName="div"
@triggerClass="is-compact pull-left"
@options={{levels}}
@selected={{level}}
@options={{this.levels}}
@selected={{this.level}}
@searchEnabled={{false}}
@onChange={{action setLevel}} as |level|>
@onChange={{action this.setLevel}} as |level|>
<span class="ember-power-select-prefix">Level: </span>{{capitalize level}}
</PowerSelect>
<button data-test-toggle class="button is-white is-compact pull-right" {{action toggleStream}} type="button">
{{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
<button data-test-toggle class="button is-white is-compact pull-right" {{action this.toggleStream}} type="button">
{{x-icon (if this.logger.isStreaming "media-pause" "media-play") class="is-text"}}
</button>
</div>
<div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
<StreamingFile @logger={{logger}} @isStreaming={{isStreaming}} />
<StreamingFile @logger={{this.logger}} @isStreaming={{this.isStreaming}} />
</div>
</div>

64
ui/app/templates/components/allocation-row.hbs
View File

@@ -1,74 +1,74 @@
<td data-test-indicators class="is-narrow">
{{#if 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">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}
{{#if allocation.nextAllocation}}
{{#if this.allocation.nextAllocation}}
<span data-test-icon="reschedule" class="tooltip text-center" role="tooltip" aria-label="Allocation was rescheduled">
{{x-icon "history" class="is-faded"}}
</span>
{{/if}}
{{#if allocation.wasPreempted}}
{{#if this.allocation.wasPreempted}}
<span data-test-icon="preemption" class="tooltip text-center" role="tooltip" aria-label="Allocation was preempted">
{{x-icon "boot" class="is-faded"}}
</span>
{{/if}}
</td>
<td data-test-short-id>
<LinkTo @route="allocations.allocation" @model={{allocation}} class="is-primary">
{{allocation.shortId}}
<LinkTo @route="allocations.allocation" @model={{this.allocation}} class="is-primary">
{{this.allocation.shortId}}
</LinkTo>
</td>
{{#if (eq context "job")}}
{{#if (eq this.context "job")}}
<td data-test-task-group>
<LinkTo @route="jobs.job.task-group" @models={{array allocation.job allocation.taskGroupName}} @query={{hash jobNamespace=allocation.job.namespace.id}}>
{{allocation.taskGroupName}}
<LinkTo @route="jobs.job.task-group" @models={{array this.allocation.job this.allocation.taskGroupName}} @query={{hash jobNamespace=this.allocation.job.namespace.id}}>
{{this.allocation.taskGroupName}}
</LinkTo>
</td>
{{/if}}
<td data-test-create-time>{{format-month-ts allocation.createTime}}</td>
<td data-test-create-time>{{format-month-ts this.allocation.createTime}}</td>
<td data-test-modify-time>
<span class="tooltip" aria-label="{{format-month-ts allocation.modifyTime}}">
{{moment-from-now allocation.modifyTime}}
<span class="tooltip" aria-label="{{format-month-ts this.allocation.modifyTime}}">
{{moment-from-now this.allocation.modifyTime}}
</span>
</td>
<td data-test-client-status class="is-one-line">
<span class="color-swatch {{allocation.clientStatus}}" /> {{allocation.clientStatus}}
<span class="color-swatch {{this.allocation.clientStatus}}" /> {{this.allocation.clientStatus}}
</td>
{{#if (eq context "volume")}}
<td data-test-client><LinkTo @route="clients.client" @model={{allocation.node}}>{{allocation.node.shortId}}</LinkTo></td>
{{#if (eq this.context "volume")}}
<td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
{{/if}}
{{#if (or (eq context "taskGroup") (eq context "job"))}}
<td data-test-job-version>{{allocation.jobVersion}}</td>
<td data-test-client><LinkTo @route="clients.client" @model={{allocation.node}}>{{allocation.node.shortId}}</LinkTo></td>
{{else if (or (eq context "node") (eq context "volume"))}}
{{#if (or (eq this.context "taskGroup") (eq this.context "job"))}}
<td data-test-job-version>{{this.allocation.jobVersion}}</td>
<td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
{{else if (or (eq this.context "node") (eq this.context "volume"))}}
<td>
{{#if (or allocation.job.isPending allocation.job.isReloading)}}
{{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
...
{{else}}
<LinkTo @route="jobs.job" @model={{allocation.job}} @query={{hash jobNamespace=allocation.job.namespace.id}} data-test-job>{{allocation.job.name}}</LinkTo>
<span class="is-faded" data-test-task-group>/ {{allocation.taskGroup.name}}</span>
<LinkTo @route="jobs.job" @model={{this.allocation.job}} @query={{hash jobNamespace=this.allocation.job.namespace.id}} data-test-job>{{this.allocation.job.name}}</LinkTo>
<span class="is-faded" data-test-task-group>/ {{this.allocation.taskGroup.name}}</span>
{{/if}}
</td>
<td data-test-job-version class="is-1">{{allocation.jobVersion}}</td>
<td data-test-job-version class="is-1">{{this.allocation.jobVersion}}</td>
{{/if}}
{{#if (not (eq context "volume"))}}
<td data-test-volume>{{if allocation.taskGroup.volumes.length "Yes"}}</td>
{{#if (not (eq this.context "volume"))}}
<td data-test-volume>{{if this.allocation.taskGroup.volumes.length "Yes"}}</td>
{{/if}}
<td data-test-cpu class="is-1 has-text-centered">
<AllocationStat
@metric="cpu"
@allocation={{allocation}}
@statsTracker={{stats}}
@isLoading={{fetchStats.isRunning}}
@error={{statsError}} />
@allocation={{this.allocation}}
@statsTracker={{this.stats}}
@isLoading={{this.fetchStats.isRunning}}
@error={{this.statsError}} />
</td>
<td data-test-mem class="is-1 has-text-centered">
<AllocationStat
@metric="memory"
@allocation={{allocation}}
@statsTracker={{stats}}
@isLoading={{fetchStats.isRunning}}
@error={{statsError}} />
@allocation={{this.allocation}}
@statsTracker={{this.stats}}
@isLoading={{this.fetchStats.isRunning}}
@error={{this.statsError}} />
</td>

14
ui/app/templates/components/allocation-stat.hbs
View File

@@ -1,17 +1,17 @@
{{#if allocation.isRunning}}
{{#if (and (not stat) isLoading)}}
{{#if this.allocation.isRunning}}
{{#if (and (not this.stat) this.isLoading)}}
&hellip;
{{else if error}}
{{else if this.error}}
<span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart tooltip" role="tooltip" aria-label="{{formattedStat}} / {{formattedReserved}}">
<div class="inline-chart tooltip" role="tooltip" aria-label="{{this.formattedStat}} / {{this.formattedReserved}}">
<progress
class="progress is-small {{statClass}}"
value="{{stat.percent}}"
class="progress is-small {{this.statClass}}"
value="{{this.stat.percent}}"
max="1">
{{stat.percent}}
{{this.stat.percent}}
</progress>
</div>
{{/if}}

4
ui/app/templates/components/allocation-subnav.hbs
View File

@@ -1,6 +1,6 @@
<div class="tabs is-subnav">
<ul>
<li><LinkTo @route="allocations.allocation.index" @model={{allocation}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="allocations.allocation.fs-root" @model={{allocation}} class={{if filesLinkActive "is-active"}}>Files</LinkTo></li>
<li><LinkTo @route="allocations.allocation.index" @model={{this.allocation}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="allocations.allocation.fs-root" @model={{this.allocation}} class={{if this.filesLinkActive "is-active"}}>Files</LinkTo></li>
</ul>
</div>

4
ui/app/templates/components/app-breadcrumbs.hbs
View File

@@ -1,5 +1,5 @@
{{#each breadcrumbs as |breadcrumb index|}}
<li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
{{#each this.breadcrumbs as |breadcrumb index|}}
<li class="{{if (eq (inc index) this.breadcrumbs.length) "is-active"}}">
{{#if breadcrumb.isPending}}
<a href="#" aria-label="loading" data-test-breadcrumb="loading">&hellip;</a>
{{else}}

8
ui/app/templates/components/attributes-section.hbs
View File

@@ -1,15 +1,15 @@
{{#each-in attributes as |key value|}}
{{#each-in this.attributes as |key value|}}
{{#if (is-object value)}}
<tr data-test-attributes-section>
<td data-test-heading class="is-subheading" colspan="2">
{{#if prefix}}<span class="is-faded" data-test-prefix>{{prefix}}.</span>{{/if}}{{key}}
{{#if this.prefix}}<span class="is-faded" data-test-prefix>{{this.prefix}}.</span>{{/if}}{{key}}
</td>
</tr>
<AttributesSection @prefix={{if prefix (concat prefix "." key) key}} @attributes={{value}} />
<AttributesSection @prefix={{if this.prefix (concat this.prefix "." key) key}} @attributes={{value}} />
{{else}}
<tr data-test-attributes-section>
<td data-test-key>
{{#if prefix}}<span class="is-faded" data-test-prefix>{{prefix}}.</span>{{/if}}
{{#if this.prefix}}<span class="is-faded" data-test-prefix>{{this.prefix}}.</span>{{/if}}
{{~key}}
</td>
<td data-test-value title="{{value}}">{{value}}</td>

2
ui/app/templates/components/attributes-table.hbs
View File

@@ -6,6 +6,6 @@
</tr>
</thead>
<tbody>
<AttributesSection @attributes={{attributes}} />
<AttributesSection @attributes={{this.attributes}} />
</tbody>
</table>

20
ui/app/templates/components/client-node-row.hbs
View File

@@ -1,24 +1,24 @@
<td data-test-icon class="is-narrow">
{{#if node.unhealthyDrivers.length}}
{{#if this.node.unhealthyDrivers.length}}
<span class="tooltip text-center" role="tooltip" aria-label="Client has unhealthy drivers">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}
</td>
<td data-test-client-id><LinkTo @route="clients.client" @model={{node.id}} class="is-primary">{{node.shortId}}</LinkTo></td>
<td data-test-client-name class="is-200px is-truncatable" title="{{node.name}}">{{node.name}}</td>
<td data-test-client-id><LinkTo @route="clients.client" @model={{this.node.id}} class="is-primary">{{this.node.shortId}}</LinkTo></td>
<td data-test-client-name class="is-200px is-truncatable" title="{{this.node.name}}">{{this.node.name}}</td>
<td data-test-client-composite-status>
<span class="tooltip" aria-label="{{node.status}} / {{if node.isDraining "draining" "not draining"}} / {{if node.isEligible "eligible" "not eligible"}}">
<span class="{{compositeStatusClass}}">{{node.compositeStatus}}</span>
<span class="tooltip" aria-label="{{this.node.status}} / {{if this.node.isDraining "draining" "not draining"}} / {{if this.node.isEligible "eligible" "not eligible"}}">
<span class="{{this.compositeStatusClass}}">{{this.node.compositeStatus}}</span>
</span>
</td>
<td data-test-client-address>{{node.httpAddr}}</td>
<td data-test-client-datacenter>{{node.datacenter}}</td>
<td data-test-client-volumes>{{if node.hostVolumes.length node.hostVolumes.length}}</td>
<td data-test-client-address>{{this.node.httpAddr}}</td>
<td data-test-client-datacenter>{{this.node.datacenter}}</td>
<td data-test-client-volumes>{{if this.node.hostVolumes.length this.node.hostVolumes.length}}</td>
<td data-test-client-allocations>
{{#if node.allocations.isPending}}
{{#if this.node.allocations.isPending}}
...
{{else}}
{{node.runningAllocations.length}}
{{this.node.runningAllocations.length}}
{{/if}}
</td>

4
ui/app/templates/components/client-subnav.hbs
View File

@@ -1,6 +1,6 @@
<div class="tabs is-subnav">
<ul>
<li><LinkTo @route="clients.client.index" @model={{client}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="clients.client.monitor" @model={{client}} @activeClass="is-active">Monitor</LinkTo></li>
<li><LinkTo @route="clients.client.index" @model={{this.client}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="clients.client.monitor" @model={{this.client}} @activeClass="is-active">Monitor</LinkTo></li>
</ul>
</div>

10
ui/app/templates/components/copy-button.hbs
View File

@@ -1,10 +1,10 @@
{{#if (eq state 'success')}}
{{#if (eq this.state 'success')}}
<div class='button is-borderless is-small is-static'>
<span class="tooltip text-center always-active" role="tooltip" aria-label="Copied!">
{{x-icon 'copy-success'}}
</span>
</div>
{{else if (eq state 'error')}}
{{else if (eq this.state 'error')}}
<div class='button is-borderless is-small is-static'>
<span class="tooltip text-center" role="tooltip" aria-label="Error copying">
{{x-icon 'alert-triangle'}}
@@ -13,9 +13,9 @@
{{else}}
<AddonCopyButton
@class="button is-borderless is-small"
@clipboardText={{clipboardText}}
@success={{perform indicateSuccess}}
@error={{action (mut state) "error"}}
@clipboardText={{this.clipboardText}}
@success={{perform this.indicateSuccess}}
@error={{action (mut this.state) "error"}}
>
{{x-icon 'copy-action'}}
</AddonCopyButton>

10
ui/app/templates/components/distribution-bar.hbs
View File

@@ -8,14 +8,14 @@
</svg>
{{#if hasBlock}}
{{yield (hash
data=_data
activeDatum=activeDatum
data=this._data
activeDatum=this.activeDatum
)}}
{{else}}
<div class="chart-tooltip {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
<div class="chart-tooltip {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
<ol>
{{#each _data as |datum index|}}
<li class="{{if (eq datum.label activeDatum.label) "active"}}">
{{#each this._data as |datum index|}}
<li class="{{if (eq datum.label this.activeDatum.label) "active"}}">
<span class="label {{if (eq datum.value 0) "is-empty"}}">
<span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
{{datum.label}}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 801 B

After

Width:  |  Height:  |  Size: 831 B

46
ui/app/templates/components/drain-popover.hbs
View File

@@ -1,21 +1,21 @@
<PopoverMenu
data-test-drain-popover
@isDisabled={{isDisabled}}
@label={{if client.isDraining "Update Drain" "Drain"}}
@tooltip={{if isDisabled "Not allowed to drain clients"}}
@isDisabled={{this.isDisabled}}
@label={{if this.client.isDraining "Update Drain" "Drain"}}
@tooltip={{if this.isDisabled "Not allowed to drain clients"}}
@triggerClass={{concat
"is-small "
(if drain.isRunning "is-loading ")
(if isDisabled "tooltip is-right-aligned"
(if this.drain.isRunning "is-loading ")
(if this.isDisabled "tooltip is-right-aligned"
)}} as |m|>
<form data-test-drain-popover-form onsubmit={{action (queue (action preventDefault) (perform drain m.actions.close))}} class="form is-small">
<form data-test-drain-popover-form onsubmit={{action (queue (action this.preventDefault) (perform this.drain m.actions.close))}} class="form is-small">
<h4 class="group-heading">Drain Options</h4>
<div class="field">
<label class="label is-interactive">
<Toggle
data-test-drain-deadline-toggle
@isActive={{deadlineEnabled}}
@onToggle={{action (mut deadlineEnabled) value="target.checked"}}>
@isActive={{this.deadlineEnabled}}
@onToggle={{action (mut this.deadlineEnabled) value="target.checked"}}>
Deadline
</Toggle>
<span class="tooltip multiline" aria-label="The amount of time a drain must complete within.">
@@ -23,30 +23,30 @@
</span>
</label>
</div>
{{#if deadlineEnabled}}
{{#if this.deadlineEnabled}}
<div class="field is-sub-field">
<PowerSelect
data-test-drain-deadline-option-select
@tagName="div"
@options={{durationQuickOptions}}
@selected={{selectedDurationQuickOption}}
@onChange={{action (mut selectedDurationQuickOption)}} as |opt|>
@options={{this.durationQuickOptions}}
@selected={{this.selectedDurationQuickOption}}
@onChange={{action (mut this.selectedDurationQuickOption)}} as |opt|>
{{opt.label}}
</PowerSelect>
</div>
{{#if durationIsCustom}}
{{#if this.durationIsCustom}}
<div class="field is-sub-field">
<label class="label">Deadline</label>
<input
data-test-drain-custom-deadline
type="text"
class="input {{if parseError "is-danger"}}"
class="input {{if this.parseError "is-danger"}}"
placeholder="1h30m"
oninput={{action (queue
(action (mut parseError) '')
(action (mut customDuration) value="target.value"))}} />
{{#if parseError}}
<em class="help is-danger">{{parseError}}</em>
(action (mut this.parseError) '')
(action (mut this.customDuration) value="target.value"))}} />
{{#if this.parseError}}
<em class="help is-danger">{{this.parseError}}</em>
{{/if}}
</div>
{{/if}}
@@ -55,8 +55,8 @@
<label class="label is-interactive">
<Toggle
data-test-force-drain-toggle
@isActive={{forceDrain}}
@onToggle={{action (mut forceDrain) value="target.checked"}}>
@isActive={{this.forceDrain}}
@onToggle={{action (mut this.forceDrain) value="target.checked"}}>
Force Drain
</Toggle>
<span class="tooltip multiline" aria-label="Immediately remove allocations from the client.">
@@ -68,8 +68,8 @@
<label class="label is-interactive">
<Toggle
data-test-system-jobs-toggle
@isActive={{drainSystemJobs}}
@onToggle={{action (mut drainSystemJobs) value="target.checked"}}>
@isActive={{this.drainSystemJobs}}
@onToggle={{action (mut this.drainSystemJobs) value="target.checked"}}>
Drain System Jobs
</Toggle>
<span class="tooltip multiline" aria-label="Stop allocations for system jobs.">
@@ -82,7 +82,7 @@
data-test-drain-submit
type="button"
class="popover-action is-primary"
onclick={{perform drain m.actions.close}}>
onclick={{perform this.drain m.actions.close}}>
Drain
</button>
<button data-test-drain-cancel type="button" class="popover-action" onclick={{action m.actions.close}}>Cancel</button>

6
ui/app/templates/components/exec/task-contents.hbs
View File

@@ -1,13 +1,13 @@
<div class="border-and-label">
<div class="border"></div>
<div class="task-label">{{task.name}}</div>
{{#if active}}
<div class="task-label">{{this.task.name}}</div>
{{#if this.active}}
<svg width="20" height="20" class="is-active" data-test-task-active>
<circle cx="10" cy="10" r="6" />
</svg>
{{/if}}
</div>
{{#if shouldOpenInNewWindow}}
{{#if this.shouldOpenInNewWindow}}
<span class="tooltip" aria-label="Open in a new window">
{{x-icon "exit" class="show-on-hover"}}
</span>

24
ui/app/templates/components/exec/task-group-parent.hbs
View File

@@ -1,23 +1,23 @@
<button {{action "toggleOpen"}} class="toggle-button {{if hasPendingAllocations "is-loading"}}" data-test-task-group-name type="button">
{{x-icon (if isOpen "chevron-down" "chevron-right")}}
{{taskGroup.name}}
<button {{action "toggleOpen"}} class="toggle-button {{if this.hasPendingAllocations "is-loading"}}" data-test-task-group-name type="button">
{{x-icon (if this.isOpen "chevron-down" "chevron-right")}}
{{this.taskGroup.name}}
</button>
{{#if isOpen}}
{{#if this.isOpen}}
<ul class="task-list">
{{#each sortedTasks as |task|}}
{{#if shouldOpenInNewWindow}}
<a {{on "click" (action "openInNewWindow" taskGroup.job taskGroup task)}} href="#" class="task-item" data-test-task>
{{#each this.sortedTasks as |task|}}
{{#if this.shouldOpenInNewWindow}}
<a {{on "click" (action "openInNewWindow" this.taskGroup.job this.taskGroup task)}} href="#" class="task-item" data-test-task>
<Exec::TaskContents
@task={{task}}
@active={{and currentRouteIsThisTaskGroup (eq task.name activeTaskName)}}
@shouldOpenInNewWindow={{shouldOpenInNewWindow}} />
@active={{and this.currentRouteIsThisTaskGroup (eq task.name this.activeTaskName)}}
@shouldOpenInNewWindow={{this.shouldOpenInNewWindow}} />
</a>
{{else}}
<LinkTo @route="exec.task-group.task" @models={{array taskGroup.job.plainId taskGroup.name task.name}} class="task-item" data-test-task={{true}}>
<LinkTo @route="exec.task-group.task" @models={{array this.taskGroup.job.plainId this.taskGroup.name task.name}} class="task-item" data-test-task={{true}}>
<Exec::TaskContents
@task={{task}}
@active={{and currentRouteIsThisTaskGroup (eq task.name activeTaskName)}}
@shouldOpenInNewWindow={{shouldOpenInNewWindow}} />
@active={{and this.currentRouteIsThisTaskGroup (eq task.name this.activeTaskName)}}
@shouldOpenInNewWindow={{this.shouldOpenInNewWindow}} />
</LinkTo>
{{/if}}
{{/each}}

10
ui/app/templates/components/forbidden-message.hbs
View File

@@ -1,18 +1,18 @@
<div data-test-error class="empty-message">
<h3 data-test-error-title class="empty-message-headline">Not Authorized</h3>
<p data-test-error-message class="empty-message-body">
{{#if token.secret}}
{{#if this.token.secret}}
Your <LinkTo @route="settings.tokens">ACL token</LinkTo> does not provide the
{{#if permission}}
<code>{{permission}}</code>
{{#if this.permission}}
<code>{{this.permission}}</code>
{{else}}
required
{{/if}}
permission. Contact your administrator if this is an error.
{{else}}
Provide an <LinkTo @route="settings.tokens">ACL token</LinkTo> with the
{{#if permission}}
<code>{{permission}}</code>
{{#if this.permission}}
<code>{{this.permission}}</code>
{{else}}
requisite
{{/if}}

10
ui/app/templates/components/fs/breadcrumbs.hbs
View File

@@ -1,12 +1,12 @@
<ul>
<li class={{if breadcrumbs "" "is-active"}}>
<Fs::Link @allocation={{allocation}} @taskState={{taskState}}>
{{if taskState taskState.name allocation.shortId}}
<li class={{if this.breadcrumbs "" "is-active"}}>
<Fs::Link @allocation={{this.allocation}} @taskState={{this.taskState}}>
{{if this.taskState this.taskState.name this.allocation.shortId}}
</Fs::Link>
</li>
{{#each breadcrumbs as |breadcrumb|}}
{{#each this.breadcrumbs as |breadcrumb|}}
<li class={{if breadcrumb.isLast "is-active"}}>
<Fs::Link @allocation={{allocation}} @taskState={{taskState}} @path={{breadcrumb.path}}>
<Fs::Link @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{breadcrumb.path}}>
{{breadcrumb.name}}
</Fs::Link>
</li>

26
ui/app/templates/components/fs/browser.hbs
View File

@@ -1,19 +1,19 @@
<section class="section is-closer {{if isFile "is-full-width"}}">
{{#if model.isRunning}}
{{#if isFile}}
<Fs::File @allocation={{allocation}} @taskState={{taskState}} @file={{path}} @stat={{stat}} @class="fs-explorer">
<Fs::Breadcrumbs @allocation={{allocation}} @taskState={{taskState}} @path={{path}} />
<section class="section is-closer {{if this.isFile "is-full-width"}}">
{{#if this.model.isRunning}}
{{#if this.isFile}}
<Fs::File @allocation={{this.allocation}} @taskState={{this.taskState}} @file={{this.path}} @stat={{this.stat}} @class="fs-explorer">
<Fs::Breadcrumbs @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{this.path}} />
</Fs::File>
{{else}}
<div class="fs-explorer boxed-section">
<div class="boxed-section-head">
<Fs::Breadcrumbs @allocation={{allocation}} @taskState={{taskState}} @path={{path}} />
<Fs::Breadcrumbs @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{this.path}} />
</div>
{{#if directoryEntries}}
{{#if this.directoryEntries}}
<ListTable
@source={{sortedDirectoryEntries}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@source={{this.sortedDirectoryEntries}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="boxed-section-body is-full-bleed is-compact" as |t|>
<t.head>
<t.sort-by @prop="Name" @class="is-two-thirds">Name</t.sort-by>
@@ -21,7 +21,7 @@
<t.sort-by @prop="ModTime" @class="has-text-right">Last Modified</t.sort-by>
</t.head>
<t.body as |row|>
<Fs::DirectoryEntry @path={{path}} @allocation={{allocation}} @taskState={{taskState}} @entry={{row.model}} />
<Fs::DirectoryEntry @path={{this.path}} @allocation={{this.allocation}} @taskState={{this.taskState}} @entry={{row.model}} />
</t.body>
</ListTable>
{{else}}
@@ -38,9 +38,9 @@
{{/if}}
{{else}}
<div data-test-not-running class="empty-message">
<h3 data-test-not-running-headline class="empty-message-headline">{{capitalize type}} is not Running</h3>
<h3 data-test-not-running-headline class="empty-message-headline">{{capitalize this.type}} is not Running</h3>
<p data-test-not-running-body class="empty-message-body">
Cannot access files of a{{if allocation 'n'}} {{type}} that is not running.
Cannot access files of a{{if this.allocation 'n'}} {{this.type}} that is not running.
</p>
</div>
{{/if}}

10
ui/app/templates/components/fs/directory-entry.hbs
View File

@@ -1,15 +1,15 @@
<tr data-test-entry>
<td>
<Fs::Link @allocation={{allocation}} @taskState={{taskState}} @path={{pathToEntry}}>
{{#if entry.IsDir}}
<Fs::Link @allocation={{this.allocation}} @taskState={{this.taskState}} @path={{this.pathToEntry}}>
{{#if this.entry.IsDir}}
{{x-icon "folder-outline"}}
{{else}}
{{x-icon "file-outline"}}
{{/if}}
<span class="name" data-test-name>{{entry.Name}}</span>
<span class="name" data-test-name>{{this.entry.Name}}</span>
</Fs::Link>
</td>
<td class="has-text-right" data-test-size>{{#unless entry.IsDir}}{{format-bytes entry.Size}}{{/unless}}</td>
<td class="has-text-right" title={{format-ts entry.ModTime}} data-test-last-modified>{{moment-from entry.ModTime interval=1000}}</td>
<td class="has-text-right" data-test-size>{{#unless this.entry.IsDir}}{{format-bytes this.entry.Size}}{{/unless}}</td>
<td class="has-text-right" title={{format-ts this.entry.ModTime}} data-test-last-modified>{{moment-from this.entry.ModTime interval=1000}}</td>
</tr>

26
ui/app/templates/components/fs/file.hbs
View File

@@ -1,38 +1,38 @@
{{#if noConnection}}
{{#if this.noConnection}}
<div data-test-connection-error class="notification is-error">
<h3 class="title is-4">Cannot fetch file</h3>
<p>The files for this {{if task 'task' 'allocation'}} are inaccessible. Check the condition of the client the allocation is on.</p>
<p>The files for this {{if this.task 'task' 'allocation'}} are inaccessible. Check the condition of the client the allocation is on.</p>
</div>
{{/if}}
<div data-test-header class="boxed-section-head">
{{yield}}
<span class="pull-right">
{{#unless fileTypeIsUnknown}}
<a data-test-log-action="raw" class="button is-white is-compact" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
{{#unless this.fileTypeIsUnknown}}
<a data-test-log-action="raw" class="button is-white is-compact" href="{{this.catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
{{/unless}}
{{#if (and isLarge isStreamable)}}
{{#if (and this.isLarge this.isStreamable)}}
<button data-test-log-action="head" class="button is-white is-compact" onclick={{action "gotoHead"}} type="button">Head</button>
<button data-test-log-action="tail" class="button is-white is-compact" onclick={{action "gotoTail"}} type="button">Tail</button>
{{/if}}
{{#if isStreamable}}
{{#if this.isStreamable}}
<button data-test-log-action="toggle-stream" class="button is-white is-compact" onclick={{action "toggleStream"}} type="button">
{{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
{{x-icon (if this.logger.isStreaming "media-pause" "media-play") class="is-text"}}
</button>
{{/if}}
</span>
</div>
<div data-test-file-box class="boxed-section-body {{if (eq fileComponent "stream") "is-dark is-full-bleed"}}">
{{#if (eq fileComponent "stream")}}
<StreamingFile @logger={{logger}} @mode={{mode}} @isStreaming={{isStreaming}} />
{{else if (eq fileComponent "image")}}
<ImageFile @src={{catUrl}} @alt={{stat.Name}} @size={{stat.Size}} />
<div data-test-file-box class="boxed-section-body {{if (eq this.fileComponent "stream") "is-dark is-full-bleed"}}">
{{#if (eq this.fileComponent "stream")}}
<StreamingFile @logger={{this.logger}} @mode={{this.mode}} @isStreaming={{this.isStreaming}} />
{{else if (eq this.fileComponent "image")}}
<ImageFile @src={{this.catUrl}} @alt={{this.stat.Name}} @size={{this.stat.Size}} />
{{else}}
<div data-test-unsupported-type class="empty-message is-hollow">
<h3 class="empty-message-headline">Unsupported File Type</h3>
<p class="empty-message-body message">The Nomad UI could not render this file, but you can still view the file directly.</p>
<p class="empty-message-body">
<a data-test-log-action="raw" class="button is-light" href="{{catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
<a data-test-log-action="raw" class="button is-light" href="{{this.catUrl}}" target="_blank" rel="noopener noreferrer">View Raw File</a>
</p>
</div>
{{/if}}

14
ui/app/templates/components/fs/link.hbs
View File

@@ -1,20 +1,20 @@
{{#if taskState}}
{{#if path}}
<LinkTo @route="allocations.allocation.task.fs" @models={{array allocation taskState path}} @activeClass="is-active">
{{#if this.taskState}}
{{#if this.path}}
<LinkTo @route="allocations.allocation.task.fs" @models={{array this.allocation this.taskState this.path}} @activeClass="is-active">
{{yield}}
</LinkTo>
{{else}}
<LinkTo @route="allocations.allocation.task.fs-root" @models={{array allocation taskState}} @activeClass="is-active">
<LinkTo @route="allocations.allocation.task.fs-root" @models={{array this.allocation this.taskState}} @activeClass="is-active">
{{yield}}
</LinkTo>
{{/if}}
{{else}}
{{#if path}}
<LinkTo @route="allocations.allocation.fs" @models={{array allocation path}} @activeClass="is-active">
{{#if this.path}}
<LinkTo @route="allocations.allocation.fs" @models={{array this.allocation this.path}} @activeClass="is-active">
{{yield}}
</LinkTo>
{{else}}
<LinkTo @route="allocations.allocation.fs-root" @model={{allocation}} @activeClass="is-active">
<LinkTo @route="allocations.allocation.fs-root" @model={{this.allocation}} @activeClass="is-active">
{{yield}}
</LinkTo>
{{/if}}

18
ui/app/templates/components/gauge-chart.hbs
View File

@@ -1,19 +1,19 @@
<svg data-test-gauge-svg role="img" height={{height}}>
<svg data-test-gauge-svg role="img" height={{this.height}}>
<defs>
<linearGradient x1="0" x2="1" y1="0" y2="0" class="{{chartClass}}" id="{{fillId}}">
<linearGradient x1="0" x2="1" y1="0" y2="0" class="{{this.chartClass}}" id="{{this.fillId}}">
<stop class="start" offset="0%" />
<stop class="end" offset="100%" />
</linearGradient>
<clipPath id="{{maskId}}">
<path class="fill" d="{{valueArc}}" />
<clipPath id="{{this.maskId}}">
<path class="fill" d="{{this.valueArc}}" />
</clipPath>
</defs>
<g class="canvas {{chartClass}}">
<path class="background" d="{{backgroundArc}}" />
<rect class="area" x="0" y="0" width="100%" height="100%" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
<g class="canvas {{this.chartClass}}">
<path class="background" d="{{this.backgroundArc}}" />
<rect class="area" x="0" y="0" width="100%" height="100%" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
</g>
</svg>
<div class="metric">
<h3 data-test-label class="label">{{label}}</h3>
<p data-test-percentage class="value">{{format-percentage value total=total complement=complement}}</p>
<h3 data-test-label class="label">{{this.label}}</h3>
<p data-test-percentage class="value">{{format-percentage this.value total=this.total complement=this.complement}}</p>
</div>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 765 B

After

Width:  |  Height:  |  Size: 830 B

2
ui/app/templates/components/global-header.hbs
View File

@@ -1,6 +1,6 @@
<nav class="navbar is-primary">
<div class="navbar-brand">
<span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action this.onHamburgerClick}}>
<HamburgerMenu />
</span>
<LinkTo @route="jobs" class="navbar-item is-logo">

6
ui/app/templates/components/global-search/match.hbs
View File

@@ -1,5 +1,5 @@
{{#if substrings}}
{{#each substrings as |substring|}}<span class="{{if substring.isHighlighted "highlighted"}}" data-test-match-substring>{{substring.string}}</span>{{/each}}
{{#if this.substrings}}
{{#each this.substrings as |substring|}}<span class="{{if substring.isHighlighted "highlighted"}}" data-test-match-substring>{{substring.string}}</span>{{/each}}
{{else}}
{{label}}
{{this.label}}
{{/if}}

4
ui/app/templates/components/global-search/trigger.hbs
View File

@@ -1,7 +1,7 @@
{{x-icon "search" class="is-small"}}
{{#unless select.isOpen}}
{{#unless this.select.isOpen}}
<span class='placeholder'>Jump to</span>
{{/unless}}
{{#if (not (or select.isActive select.isOpen))}}
{{#if (not (or this.select.isActive this.select.isOpen))}}
<span class='shortcut' title="Type '/' to search">/</span>
{{/if}}

28
ui/app/templates/components/gutter-menu.hbs
View File

@@ -1,7 +1,7 @@
<div data-test-gutter-menu class="page-column is-left {{if isOpen "is-open"}}">
<div class="gutter {{if isOpen "is-open"}}">
<header class="collapsed-menu {{if isOpen "is-open"}}">
<span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
<div data-test-gutter-menu class="page-column is-left {{if this.isOpen "is-open"}}">
<div class="gutter {{if this.isOpen "is-open"}}">
<header class="collapsed-menu {{if this.isOpen "is-open"}}">
<span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action this.onHamburgerClick}}>
<HamburgerMenu />
</span>
<span class="logo-container">
@@ -9,10 +9,10 @@
</span>
</header>
<aside class="menu">
{{#if system.shouldShowRegions}}
{{#if this.system.shouldShowRegions}}
<div class="collapsed-only">
<p class="menu-label">
Region {{if system.shouldShowNamespaces "& Namespace"}}
Region {{if this.system.shouldShowNamespaces "& Namespace"}}
</p>
<ul class="menu-list">
<li>
@@ -23,17 +23,17 @@
</ul>
</div>
{{/if}}
{{#if system.shouldShowNamespaces}}
{{#if this.system.shouldShowNamespaces}}
<ul class="menu-list">
<li>
<div class="menu-item is-wide">
<PowerSelect
data-test-namespace-switcher
@options={{sortedNamespaces}}
@selected={{system.activeNamespace}}
@options={{this.sortedNamespaces}}
@selected={{this.system.activeNamespace}}
@searchField="name"
@searchEnabled={{gt sortedNamespaces.length 10}}
@onChange={{action gotoJobsForNamespace}}
@searchEnabled={{gt this.sortedNamespaces.length 10}}
@onChange={{action this.gotoJobsForNamespace}}
@tagName="div"
@class="namespace-switcher"
as |namespace|>
@@ -54,7 +54,7 @@
<li>
<LinkTo
@route="jobs"
@query={{hash jobNamespace=system.activeNamespace.id}}
@query={{hash jobNamespace=this.system.activeNamespace.id}}
@activeClass="is-active"
data-test-gutter-link="jobs">
Jobs
@@ -68,7 +68,7 @@
<li>
<LinkTo
@route="csi"
@query={{hash volumeNamespace=system.activeNamespace.id}}
@query={{hash volumeNamespace=this.system.activeNamespace.id}}
@activeClass="is-active"
data-test-gutter-link="storage">
Storage <span class="tag is-small">Beta</span>
@@ -88,4 +88,4 @@
<div data-test-page-content class="page-column is-right">
{{yield}}
</div>
<div data-test-gutter-backdrop class="gutter-backdrop {{if isOpen "is-open"}}" onclick={{action onHamburgerClick}}></div>
<div data-test-gutter-backdrop class="gutter-backdrop {{if this.isOpen "is-open"}}" onclick={{action this.onHamburgerClick}}></div>

10
ui/app/templates/components/image-file.hbs
View File

@@ -1,11 +1,11 @@
<a data-test-image-link href={{src}} target="_blank" rel="noopener noreferrer" class="image-file-image">
<img data-test-image src={{src}} alt={{or alt fileName}} title={{fileName}} onload={{action updateImageMeta}} />
<a data-test-image-link href={{this.src}} target="_blank" rel="noopener noreferrer" class="image-file-image">
<img data-test-image src={{this.src}} alt={{or this.alt this.fileName}} title={{this.fileName}} onload={{action this.updateImageMeta}} />
</a>
<figcaption class="image-file-caption">
<span class="image-file-caption-primary">
<strong data-test-file-name>{{fileName}}</strong>
{{#if (and width height)}}
<span data-test-file-stats>({{width}}px &times; {{height}}px{{#if size}}, {{format-bytes size}}{{/if}})</span>
<strong data-test-file-name>{{this.fileName}}</strong>
{{#if (and this.width this.height)}}
<span data-test-file-stats>({{this.width}}px &times; {{this.height}}px{{#if this.size}}, {{format-bytes this.size}}{{/if}})</span>
{{/if}}
</span>
</figcaption>

6
ui/app/templates/components/job-deployment-details.hbs
View File

@@ -1,5 +1,5 @@
{{yield (hash
metrics=(component "job-deployment/deployment-metrics" deployment=deployment)
taskGroups=(component "job-deployment/task-groups" deployment=deployment)
allocations=(component "job-deployment/deployment-allocations" deployment=deployment)
metrics=(component "job-deployment/deployment-metrics" deployment=this.deployment)
taskGroups=(component "job-deployment/task-groups" deployment=this.deployment)
allocations=(component "job-deployment/deployment-allocations" deployment=this.deployment)
)}}

16
ui/app/templates/components/job-deployment.hbs
View File

@@ -1,25 +1,25 @@
<div class="boxed-section-head is-light inline-definitions">
<span>{{deployment.shortId}}</span>
<span class="bumper-left tag {{deployment.statusClass}}" data-test-deployment-status="{{deployment.statusClass}}">{{deployment.status}}</span>
{{#if deployment.requiresPromotion}}
<span>{{this.deployment.shortId}}</span>
<span class="bumper-left tag {{this.deployment.statusClass}}" data-test-deployment-status="{{this.deployment.statusClass}}">{{this.deployment.status}}</span>
{{#if this.deployment.requiresPromotion}}
<span data-test-promotion-required class="bumper-left badge is-warning is-hollow">Requires Promotion</span>
{{/if}}
<span class="pull-right">
<span class="pair is-faded">
<span class="term">Version</span>
<span class="has-emphasis" data-test-deployment-version>#{{deployment.version.number}}</span>
<span class="has-emphasis" data-test-deployment-version>#{{this.deployment.version.number}}</span>
<span data-test-deployment-submit-time>|
<span class="tooltip" aria-label="{{format-ts deployment.version.submitTime}}">
{{moment-from-now deployment.version.submitTime}}
<span class="tooltip" aria-label="{{format-ts this.deployment.version.submitTime}}">
{{moment-from-now this.deployment.version.submitTime}}
</span>
</span>
</span>
<button data-test-deployment-toggle-details class="button is-light is-compact pull-right" {{action (toggle "isOpen" this)}} type="button">details</button>
</span>
</div>
{{#if isOpen}}
{{#if this.isOpen}}
<div data-test-deployment-details class="boxed-section-body">
<JobDeploymentDetails @deployment={{deployment}} as |d|>
<JobDeploymentDetails @deployment={{this.deployment}} as |d|>
<d.metrics />
<d.taskGroups />
<d.allocations />

2
ui/app/templates/components/job-deployment/deployment-allocations.hbs
View File

@@ -4,7 +4,7 @@
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable
@source={{deployment.allocations}}
@source={{this.deployment.allocations}}
@class="allocations" as |t|>
<t.head>
<th class="is-narrow"></th>

20
ui/app/templates/components/job-deployment/deployment-metrics.hbs
View File

@@ -1,40 +1,40 @@
<div class="columns deployment-metrics">
<div class="column nowrap">
<div class="metric-group">
<div class="metric {{if (eq deployment.placedCanaries deployment.desiredCanaries) "is-primary"}} {{if (eq deployment.desiredCanaries 0) "is-faded"}}">
<div class="metric {{if (eq this.deployment.placedCanaries this.deployment.desiredCanaries) "is-primary"}} {{if (eq this.deployment.desiredCanaries 0) "is-faded"}}">
<h3 class="label">Canaries</h3>
<p data-test-deployment-metric="canaries" class="value">{{deployment.placedCanaries}} / {{deployment.desiredCanaries}}</p>
<p data-test-deployment-metric="canaries" class="value">{{this.deployment.placedCanaries}} / {{this.deployment.desiredCanaries}}</p>
</div>
</div>
<div class="metric-group">
<div class="metric">
<h3 class="label">Placed</h3>
<p data-test-deployment-metric="placed" class="value">{{deployment.placedAllocs}}</p>
<p data-test-deployment-metric="placed" class="value">{{this.deployment.placedAllocs}}</p>
</div>
<div class="metric">
<h3 class="label">Desired</h3>
<p data-test-deployment-metric="desired" class="value">{{deployment.desiredTotal}}</p>
<p data-test-deployment-metric="desired" class="value">{{this.deployment.desiredTotal}}</p>
</div>
</div>
<div class="metric-group">
<div class="metric {{if (gt deployment.healthyAllocs 0) "is-primary" "is-faded"}}">
<div class="metric {{if (gt this.deployment.healthyAllocs 0) "is-primary" "is-faded"}}">
<h3 class="label">Healthy</h3>
<p data-test-deployment-metric="healthy" class="value">{{deployment.healthyAllocs}}</p>
<p data-test-deployment-metric="healthy" class="value">{{this.deployment.healthyAllocs}}</p>
</div>
</div>
<div class="metric-group">
<div class="metric {{if (gt deployment.unhealthyAllocs 0) "is-danger" "is-faded"}}">
<div class="metric {{if (gt this.deployment.unhealthyAllocs 0) "is-danger" "is-faded"}}">
<h3 class="label">Unhealthy</h3>
<p data-test-deployment-metric="unhealthy" class="value">{{deployment.unhealthyAllocs}}</p>
<p data-test-deployment-metric="unhealthy" class="value">{{this.deployment.unhealthyAllocs}}</p>
</div>
</div>
</div>
<div class="column">
<div data-test-deployment-notification class="notification {{deployment.statusClass}}">
{{deployment.statusDescription}}
<div data-test-deployment-notification class="notification {{this.deployment.statusClass}}">
{{this.deployment.statusDescription}}
</div>
</div>
</div>

2
ui/app/templates/components/job-deployment/task-groups.hbs
View File

@@ -4,7 +4,7 @@
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable
@source={{deployment.taskGroupSummaries}}
@source={{this.deployment.taskGroupSummaries}}
@class="task-groups" as |t|>
<t.head>
<th>Name</th>

2
ui/app/templates/components/job-deployments-stream.hbs
View File

@@ -1,4 +1,4 @@
{{#each annotatedDeployments key="deployment.id" as |record|}}
{{#each this.annotatedDeployments key="deployment.id" as |record|}}
{{#if record.meta.showDate}}
<li data-test-deployment-time class="timeline-note">
{{#if record.deployment.version.submitTime}}

4
ui/app/templates/components/job-diff-fields-and-objects.hbs
View File

@@ -1,5 +1,5 @@
<div class="diff-section-table">
{{#each fields as |field|}}
{{#each this.fields as |field|}}
<div
data-test-diff-section-label="field"
data-test-diff-field="{{lowercase field.Type}}"
@@ -32,7 +32,7 @@
{{/each}}
</div>
{{#each objects as |object|}}
{{#each this.objects as |object|}}
<div
data-test-diff-section-label="object"
data-test-diff-field="{{lowercase object.Type}}"

26
ui/app/templates/components/job-diff.hbs
View File

@@ -1,34 +1,34 @@
{{!-- Job heading --}}
<div
data-test-diff-section-label="job"
data-test-diff-field="{{lowercase diff.Type}}"
class="{{if diff.Type
data-test-diff-field="{{lowercase this.diff.Type}}"
class="{{if this.diff.Type
(concat
"diff-section-label is-"
(lowercase diff.Type)
(lowercase this.diff.Type)
)
}}">
<span class="marker {{concat "is-" (lowercase diff.Type)}}">
{{#if (eq (lowercase diff.Type) "added")}}
<span class="marker {{concat "is-" (lowercase this.diff.Type)}}">
{{#if (eq (lowercase this.diff.Type) "added")}}
+
{{else if (eq (lowercase diff.Type) "deleted")}}
{{else if (eq (lowercase this.diff.Type) "deleted")}}
-
{{else if (eq (lowercase diff.Type) "edited")}}
{{else if (eq (lowercase this.diff.Type) "edited")}}
+/-
{{/if}}
</span>
<span class="diff-section-bold">Job: "{{diff.ID}}"</span>
<span class="diff-section-bold">Job: "{{this.diff.ID}}"</span>
</div>
{{!-- Show job field and object diffs if the job is edited --}}
{{#if (or verbose (eq (lowercase diff.Type) "edited"))}}
{{#if (or this.verbose (eq (lowercase this.diff.Type) "edited"))}}
<div data-test-diff-section-label="job-diff" class="diff-section-label">
<JobDiffFieldsAndObjects @fields={{diff.Fields}} @objects={{diff.Objects}} />
<JobDiffFieldsAndObjects @fields={{this.diff.Fields}} @objects={{this.diff.Objects}} />
</div>
{{/if}}
{{!-- Each task group --}}
{{#each diff.TaskGroups as |group|}}
{{#each this.diff.TaskGroups as |group|}}
<div data-test-diff-section-label="task-group" class="{{if group.Type
(concat
"diff-section-label is-"
@@ -52,7 +52,7 @@
{{/if}}
{{!-- Show task group field and object diffs if the task group is edited --}}
{{#if (or (eq (lowercase group.Type) "edited") verbose)}}
{{#if (or (eq (lowercase group.Type) "edited") this.verbose)}}
<div data-test-diff-section-label="task-group-diff" class="diff-section-label">
<JobDiffFieldsAndObjects @fields={{group.Fields}} @objects={{group.Objects}} />
</div>
@@ -85,7 +85,7 @@
{{#unless (eq index (dec task.Annotations.length))}},{{/unless}}
{{/each~}})
{{/if}}
{{#if (or verbose (eq (lowercase task.Type) "edited"))}}
{{#if (or this.verbose (eq (lowercase task.Type) "edited"))}}
<JobDiffFieldsAndObjects @fields={{task.Fields}} @objects={{task.Objects}} />
{{/if}}
</div>

46
ui/app/templates/components/job-editor.hbs
View File

@@ -1,24 +1,24 @@
{{#if parseError}}
{{#if this.parseError}}
<div data-test-parse-error class="notification is-danger">
<h3 class="title is-4" data-test-parse-error-title>Parse Error</h3>
<p data-test-parse-error-message>{{parseError}}</p>
<p data-test-parse-error-message>{{this.parseError}}</p>
</div>
{{/if}}
{{#if planError}}
{{#if this.planError}}
<div data-test-plan-error class="notification is-danger">
<h3 class="title is-4" data-test-plan-error-title>Plan Error</h3>
<p data-test-plan-error-message>{{planError}}</p>
<p data-test-plan-error-message>{{this.planError}}</p>
</div>
{{/if}}
{{#if runError}}
{{#if this.runError}}
<div data-test-run-error class="notification is-danger">
<h3 class="title is-4" data-test-run-error-title>Run Error</h3>
<p data-test-run-error-message>{{runError}}</p>
<p data-test-run-error-message>{{this.runError}}</p>
</div>
{{/if}}
{{#if (eq stage "editor")}}
{{#if (and showEditorMessage (eq context "new"))}}
{{#if (eq this.stage "editor")}}
{{#if (and this.showEditorMessage (eq this.context "new"))}}
<div class="notification is-info">
<div class="columns">
<div class="column">
@@ -34,15 +34,15 @@
<div class="boxed-section">
<div class="boxed-section-head">
Job Definition
{{#if cancelable}}
<button class="button is-light is-compact pull-right" onclick={{action onCancel}} data-test-cancel-editing type="button">Cancel</button>
{{#if this.cancelable}}
<button class="button is-light is-compact pull-right" onclick={{action this.onCancel}} data-test-cancel-editing type="button">Cancel</button>
{{/if}}
</div>
<div class="boxed-section-body is-full-bleed">
<IvyCodemirror
data-test-editor
@value={{or job._newDefinition jobSpec}}
@valueUpdated={{action (mut job._newDefinition)}}
@value={{or this.job._newDefinition this.jobSpec}}
@valueUpdated={{action (mut this.job._newDefinition)}}
@options={{hash
mode="javascript"
theme="hashi"
@@ -52,12 +52,12 @@
</div>
</div>
<div class="content is-associative">
<button class="button is-primary {{if plan.isRunning "is-loading"}}" type="button" onclick={{perform plan}} disabled={{or plan.isRunning (not job._newDefinition)}} data-test-plan>Plan</button>
<button class="button is-primary {{if this.plan.isRunning "is-loading"}}" type="button" onclick={{perform this.plan}} disabled={{or this.plan.isRunning (not this.job._newDefinition)}} data-test-plan>Plan</button>
</div>
{{/if}}
{{#if (eq stage "plan")}}
{{#if showPlanMessage}}
{{#if (eq this.stage "plan")}}
{{#if this.showPlanMessage}}
<div class="notification is-info">
<div class="columns">
<div class="column">
@@ -73,14 +73,14 @@
<div class="boxed-section">
<div class="boxed-section-head">Job Plan</div>
<div class="boxed-section-body is-dark">
<JobDiff data-test-plan-output @diff={{planOutput.diff}} @verbose={{false}} />
<JobDiff data-test-plan-output @diff={{this.planOutput.diff}} @verbose={{false}} />
</div>
</div>
<div class="boxed-section {{if planOutput.failedTGAllocs "is-warning" "is-primary"}}" data-test-dry-run-message>
<div class="boxed-section {{if this.planOutput.failedTGAllocs "is-warning" "is-primary"}}" data-test-dry-run-message>
<div class="boxed-section-head" data-test-dry-run-title>Scheduler dry-run</div>
<div class="boxed-section-body" data-test-dry-run-body>
{{#if planOutput.failedTGAllocs}}
{{#each planOutput.failedTGAllocs as |placementFailure|}}
{{#if this.planOutput.failedTGAllocs}}
{{#each this.planOutput.failedTGAllocs as |placementFailure|}}
<PlacementFailure @failedTGAlloc={{placementFailure}} />
{{/each}}
{{else}}
@@ -88,14 +88,14 @@
{{/if}}
</div>
</div>
{{#if (and planOutput.preemptions.isFulfilled planOutput.preemptions.length)}}
{{#if (and this.planOutput.preemptions.isFulfilled this.planOutput.preemptions.length)}}
<div class="boxed-section is-warning" data-test-preemptions>
<div class="boxed-section-head" data-test-preemptions-title>
Preemptions (if you choose to run this job, these allocations will be stopped)
</div>
<div class="boxed-section-body" data-test-preemptions-body>
<ListTable
@source={{planOutput.preemptions}}
@source={{this.planOutput.preemptions}}
@class="allocations is-isolated" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -118,7 +118,7 @@
</div>
{{/if}}
<div class="content is-associative">
<button class="button is-primary {{if submit.isRunning "is-loading"}}" type="button" onclick={{perform submit}} disabled={{submit.isRunning}} data-test-run>Run</button>
<button class="button is-light" type="button" onclick={{action reset}} data-test-cancel>Cancel</button>
<button class="button is-primary {{if this.submit.isRunning "is-loading"}}" type="button" onclick={{perform this.submit}} disabled={{this.submit.isRunning}} data-test-run>Run</button>
<button class="button is-light" type="button" onclick={{action this.reset}} data-test-cancel>Cancel</button>
</div>
{{/if}}

28
ui/app/templates/components/job-page/batch.hbs
View File

@@ -1,27 +1,27 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @handleError={{action "handleError"}} />
<JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
<span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::PlacementFailures @job={{job}} />
<JobPage::Parts::PlacementFailures @job={{this.job}} />
<JobPage::Parts::TaskGroups
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@gotoTaskGroup={{gotoTaskGroup}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@gotoTaskGroup={{this.gotoTaskGroup}} />
<JobPage::Parts::RecentAllocations @job={{job}} />
<JobPage::Parts::RecentAllocations @job={{this.job}} />
</JobPage::Parts::Body>

38
ui/app/templates/components/job-page/parameterized-child.hbs
View File

@@ -1,43 +1,43 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @title={{job.trimmedName}} @handleError={{action "handleError"}} />
<JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
<span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
<span data-test-job-stat="parent">
<strong>Parent:</strong>
<LinkTo @route="jobs.job" @model={{job.parent}} @query={{hash jobNamespace=job.parent.namespace.name}}>
{{job.parent.name}}
<LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash jobNamespace=this.job.parent.namespace.name}}>
{{this.job.parent.name}}
</LinkTo>
</span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::PlacementFailures @job={{job}} />
<JobPage::Parts::PlacementFailures @job={{this.job}} />
<JobPage::Parts::TaskGroups
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@gotoTaskGroup={{gotoTaskGroup}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@gotoTaskGroup={{this.gotoTaskGroup}} />
<JobPage::Parts::RecentAllocations @job={{job}} />
<JobPage::Parts::RecentAllocations @job={{this.job}} />
<div class="boxed-section">
<div class="boxed-section-head">Payload</div>
<div class="boxed-section-body is-dark">
{{#if payloadJSON}}
<JsonViewer @json={{payloadJSON}} />
{{#if this.payloadJSON}}
<JsonViewer @json={{this.payloadJSON}} />
{{else}}
<pre class="cli-window is-elastic"><code>{{payload}}</code></pre>
<pre class="cli-window is-elastic"><code>{{this.payload}}</code></pre>
{{/if}}
</div>
</div>

26
ui/app/templates/components/job-page/parameterized.hbs
View File

@@ -1,25 +1,25 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @handleError={{action "handleError"}}>
<JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}}>
<span class="tag is-hollow">Parameterized</span>
</JobPage::Parts::Title>
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="version"><strong>Version:</strong> {{job.version}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
<span data-test-job-stat="version"><strong>Version:</strong> {{this.job.version}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::Children
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@currentPage={{currentPage}}
@gotoJob={{gotoJob}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@currentPage={{this.currentPage}}
@gotoJob={{this.gotoJob}} />
</JobPage::Parts::Body>

18
ui/app/templates/components/job-page/parts/children.hbs
View File

@@ -1,16 +1,16 @@
<div class="boxed-section-head">
Job Launches
</div>
<div class="boxed-section-body {{if sortedChildren.length "is-full-bleed"}}">
{{#if sortedChildren}}
<div class="boxed-section-body {{if this.sortedChildren.length "is-full-bleed"}}">
{{#if this.sortedChildren}}
<ListPagination
@source={{sortedChildren}}
@size={{pageSize}}
@page={{currentPage}} as |p|>
@source={{this.sortedChildren}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<t.sort-by @prop="name">Name</t.sort-by>
@@ -21,13 +21,13 @@
<th class="is-3">Summary</th>
</t.head>
<t.body @key="model.id" as |row|>
<JobRow data-test-job-row @job={{row.model}} @onClick={{action gotoJob row.model}} />
<JobRow data-test-job-row @job={{row.model}} @onClick={{action this.gotoJob row.model}} />
</t.body>
</ListTable>
<div class="table-foot">
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedChildren.length}}
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedChildren.length}}
</div>
<p.prev @class="pagination-previous"> &lt; </p.prev>
<p.next @class="pagination-next"> &gt; </p.next>

8
ui/app/templates/components/job-page/parts/error.hbs
View File

@@ -1,12 +1,12 @@
{{#if errorMessage}}
{{#if this.errorMessage}}
<div class="notification is-danger">
<div class="columns">
<div class="column">
<h3 data-test-job-error-title class="title is-4">{{errorMessage.title}}</h3>
<p data-test-job-error-body>{{errorMessage.description}}</p>
<h3 data-test-job-error-title class="title is-4">{{this.errorMessage.title}}</h3>
<p data-test-job-error-body>{{this.errorMessage.description}}</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-job-error-close class="button is-danger" onclick={{action onDismiss}} type="button">Okay</button>
<button data-test-job-error-close class="button is-danger" onclick={{action this.onDismiss}} type="button">Okay</button>
</div>
</div>
</div>

32
ui/app/templates/components/job-page/parts/latest-deployment.hbs
View File

@@ -1,33 +1,33 @@
{{#if job.latestDeployment}}
<div class="boxed-section {{if job.latestDeployment.isRunning "is-info"}}" data-test-active-deployment>
{{#if this.job.latestDeployment}}
<div class="boxed-section {{if this.job.latestDeployment.isRunning "is-info"}}" data-test-active-deployment>
<div class="boxed-section-head">
<div class="boxed-section-row">
{{if job.latestDeployment.isRunning "Active" "Latest"}} Deployment
<span class="badge is-white {{if job.latestDeployment.isRunning "is-subtle"}} bumper-left" data-test-active-deployment-stat="id">{{job.latestDeployment.shortId}}</span>
{{#if job.latestDeployment.version.submitTime}}
<span class="pull-right submit-time tooltip" data-test-active-deployment-stat="submit-time" aria-label="{{format-ts job.latestDeployment.version.submitTime}}">
{{moment-from-now job.latestDeployment.version.submitTime}}
{{if this.job.latestDeployment.isRunning "Active" "Latest"}} Deployment
<span class="badge is-white {{if this.job.latestDeployment.isRunning "is-subtle"}} bumper-left" data-test-active-deployment-stat="id">{{this.job.latestDeployment.shortId}}</span>
{{#if this.job.latestDeployment.version.submitTime}}
<span class="pull-right submit-time tooltip" data-test-active-deployment-stat="submit-time" aria-label="{{format-ts this.job.latestDeployment.version.submitTime}}">
{{moment-from-now this.job.latestDeployment.version.submitTime}}
</span>
{{/if}}
</div>
<div class="boxed-section-row">
<span class="tag is-outlined {{job.latestDeployment.statusClass}}" data-test-deployment-status="{{job.latestDeployment.statusClass}}">
{{job.latestDeployment.status}}
<span class="tag is-outlined {{this.job.latestDeployment.statusClass}}" data-test-deployment-status="{{this.job.latestDeployment.statusClass}}">
{{this.job.latestDeployment.status}}
</span>
{{#if job.latestDeployment.requiresPromotion}}
{{#if this.job.latestDeployment.requiresPromotion}}
<button
data-test-promote-canary
type="button"
class="button is-warning is-small pull-right {{if promote.isRunning "is-loading"}}"
disabled={{promote.isRunning}}
onclick={{perform promote}}>Promote Canary</button>
class="button is-warning is-small pull-right {{if this.promote.isRunning "is-loading"}}"
disabled={{this.promote.isRunning}}
onclick={{perform this.promote}}>Promote Canary</button>
{{/if}}
</div>
</div>
<div class="boxed-section-body with-foot">
<JobDeploymentDetails @deployment={{job.latestDeployment}} as |d|>
<JobDeploymentDetails @deployment={{this.job.latestDeployment}} as |d|>
<d.metrics />
{{#if isShowingDeploymentDetails}}
{{#if this.isShowingDeploymentDetails}}
<d.taskGroups />
<d.allocations />
{{/if}}
@@ -35,7 +35,7 @@
</div>
<div class="boxed-section-foot">
<a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} href="#" data-test-deployment-toggle-details>
{{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
{{if this.isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
</a>
</div>
</div>

4
ui/app/templates/components/job-page/parts/placement-failures.hbs
View File

@@ -1,10 +1,10 @@
{{#if job.hasPlacementFailures}}
{{#if this.job.hasPlacementFailures}}
<div class="boxed-section is-danger" data-test-placement-failures>
<div class="boxed-section-head">
Placement Failures
</div>
<div class="boxed-section-body">
{{#each job.taskGroups as |taskGroup|}}
{{#each this.job.taskGroups as |taskGroup|}}
<PlacementFailure @taskGroup={{taskGroup}} />
{{/each}}
</div>

16
ui/app/templates/components/job-page/parts/recent-allocations.hbs
View File

@@ -2,12 +2,12 @@
<div class="boxed-section-head">
Recent Allocations
</div>
<div class="boxed-section-body {{if job.allocations.length "is-full-bleed"}}">
{{#if job.allocations.length}}
<div class="boxed-section-body {{if this.job.allocations.length "is-full-bleed"}}">
{{#if this.job.allocations.length}}
<ListTable
@source={{sortedAllocations}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@source={{this.sortedAllocations}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -37,10 +37,10 @@
</div>
{{/if}}
</div>
{{#if job.allocations.length}}
{{#if this.job.allocations.length}}
<div class="boxed-section-foot">
<p class="pull-right" data-test-view-all-allocations><LinkTo @route="jobs.job.allocations" @model={{job}}>
View all {{job.allocations.length}} {{pluralize "allocation" job.allocations.length}}
<p class="pull-right" data-test-view-all-allocations><LinkTo @route="jobs.job.allocations" @model={{this.job}}>
View all {{this.job.allocations.length}} {{pluralize "allocation" this.job.allocations.length}}
</LinkTo></p>
</div>
{{/if}}

2
ui/app/templates/components/job-page/parts/summary.hbs
View File

@@ -1,4 +1,4 @@
<ListAccordion data-test-job-summary @source={{array job}} @key="id" @startExpanded={{isExpanded}} @onToggle={{action persist}} as |a|>
<ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{this.isExpanded}} @onToggle={{action this.persist}} as |a|>
<a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
<div class="columns">
<div class="column is-minimum nowrap">

8
ui/app/templates/components/job-page/parts/task-groups.hbs
View File

@@ -4,9 +4,9 @@
</div>
<div class="boxed-section-body is-full-bleed">
<ListTable
@source={{sortedTaskGroups}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}} as |t|>
@source={{this.sortedTaskGroups}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}} as |t|>
<t.head>
<t.sort-by @prop="name">Name</t.sort-by>
<t.sort-by @prop="count">Count</t.sort-by>
@@ -19,7 +19,7 @@
<t.body as |row|>
<TaskGroupRow data-test-task-group
@taskGroup={{row.model}}
@onClick={{action gotoTaskGroup row.model}} />
@onClick={{action this.gotoTaskGroup row.model}} />
</t.body>
</ListTable>
</div>

16
ui/app/templates/components/job-page/parts/title.hbs
View File

@@ -1,13 +1,13 @@
<h1 class="title with-flex">
<div>
{{or title job.name}}
<span class="bumper-left tag {{job.statusClass}}" data-test-job-status>{{job.status}}</span>
{{or this.title this.job.name}}
<span class="bumper-left tag {{this.job.statusClass}}" data-test-job-status>{{this.job.status}}</span>
</div>
{{yield}}
<div>
{{#if (not (eq job.status "dead"))}}
{{#if (not (eq this.job.status "dead"))}}
<div class="two-step-button">
<Exec::OpenButton @job={{job}} />
<Exec::OpenButton @job={{this.job}} />
</div>
<TwoStepButton
data-test-stop
@@ -16,8 +16,8 @@
@cancelText="Cancel"
@confirmText="Yes, Stop"
@confirmationMessage="Are you sure you want to stop this job?"
@awaitingConfirmation={{stopJob.isRunning}}
@onConfirm={{perform stopJob}} />
@awaitingConfirmation={{this.stopJob.isRunning}}
@onConfirm={{perform this.stopJob}} />
{{else}}
<TwoStepButton
data-test-start
@@ -26,8 +26,8 @@
@cancelText="Cancel"
@confirmText="Yes, Start"
@confirmationMessage="Are you sure you want to start this job?"
@awaitingConfirmation={{startJob.isRunning}}
@onConfirm={{perform startJob}} />
@awaitingConfirmation={{this.startJob.isRunning}}
@onConfirm={{perform this.startJob}} />
{{/if}}
</div>
</h1>

32
ui/app/templates/components/job-page/periodic-child.hbs
View File

@@ -1,33 +1,33 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @title={{job.trimmedName}} @handleError={{action "handleError"}} />
<JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
<span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
<span data-test-job-stat="parent">
<strong>Parent:</strong>
<LinkTo @route="jobs.job" @model={{job.parent}} @query={{hash jobNamespace=job.parent.namespace.name}}>
{{job.parent.name}}
<LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash jobNamespace=this.job.parent.namespace.name}}>
{{this.job.parent.name}}
</LinkTo>
</span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::PlacementFailures @job={{job}} />
<JobPage::Parts::PlacementFailures @job={{this.job}} />
<JobPage::Parts::TaskGroups
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@gotoTaskGroup={{gotoTaskGroup}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@gotoTaskGroup={{this.gotoTaskGroup}} />
<JobPage::Parts::RecentAllocations @job={{job}} />
<JobPage::Parts::RecentAllocations @job={{this.job}} />
</JobPage::Parts::Body>

28
ui/app/templates/components/job-page/periodic.hbs
View File

@@ -1,27 +1,27 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @title={{job.trimmedName}} @handleError={{action "handleError"}}>
<JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}}>
<span class="tag is-hollow">periodic</span>
<button data-test-force-launch class="button is-warning is-small is-inline" onclick={{action "forceLaunch"}} type="button">Force Launch</button>
</JobPage::Parts::Title>
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="version"><strong>Version:</strong> {{job.version}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
<span data-test-job-stat="version"><strong>Version:</strong> {{this.job.version}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
<span data-test-job-stat="cron"> | <strong>Cron:</strong> <code>{{job.periodicDetails.Spec}}</code></span>
<span data-test-job-stat="cron"> | <strong>Cron:</strong> <code>{{this.job.periodicDetails.Spec}}</code></span>
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::Children
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@currentPage={{currentPage}}
@gotoJob={{gotoJob}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@currentPage={{this.currentPage}}
@gotoJob={{this.gotoJob}} />
</JobPage::Parts::Body>

30
ui/app/templates/components/job-page/service.hbs
View File

@@ -1,29 +1,29 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @handleError={{action "handleError"}} />
<JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
<span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::PlacementFailures @job={{job}} />
<JobPage::Parts::PlacementFailures @job={{this.job}} />
<JobPage::Parts::LatestDeployment @job={{job}} @handleError={{action "handleError"}} />
<JobPage::Parts::LatestDeployment @job={{this.job}} @handleError={{action "handleError"}} />
<JobPage::Parts::TaskGroups
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@gotoTaskGroup={{gotoTaskGroup}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@gotoTaskGroup={{this.gotoTaskGroup}} />
<JobPage::Parts::RecentAllocations @job={{job}} />
<JobPage::Parts::RecentAllocations @job={{this.job}} />
</JobPage::Parts::Body>

28
ui/app/templates/components/job-page/system.hbs
View File

@@ -1,27 +1,27 @@
<JobPage::Parts::Body @job={{job}}>
<JobPage::Parts::Error @errorMessage={{errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Body @job={{this.job}}>
<JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
<JobPage::Parts::Title @job={{job}} @handleError={{action "handleError"}} />
<JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
<div class="boxed-section job-stats">
<div class="boxed-section-body">
<span data-test-job-stat="type"><strong>Type:</strong> {{job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{job.priority}} </span>
{{#if (and job.namespace system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{job.namespace.name}}</span>
<span data-test-job-stat="type"><strong>Type:</strong> {{this.job.type}} | </span>
<span data-test-job-stat="priority"><strong>Priority:</strong> {{this.job.priority}} </span>
{{#if (and this.job.namespace this.system.shouldShowNamespaces)}}
<span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{this.job.namespace.name}}</span>
{{/if}}
</div>
</div>
<JobPage::Parts::Summary @job={{job}} />
<JobPage::Parts::Summary @job={{this.job}} />
<JobPage::Parts::PlacementFailures @job={{job}} />
<JobPage::Parts::PlacementFailures @job={{this.job}} />
<JobPage::Parts::TaskGroups
@job={{job}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@gotoTaskGroup={{gotoTaskGroup}} />
@job={{this.job}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@gotoTaskGroup={{this.gotoTaskGroup}} />
<JobPage::Parts::RecentAllocations @job={{job}} />
<JobPage::Parts::RecentAllocations @job={{this.job}} />
</JobPage::Parts::Body>

20
ui/app/templates/components/job-row.hbs
View File

@@ -1,26 +1,26 @@
<td data-test-job-name><LinkTo @route="jobs.job" @model={{job.plainId}} class="is-primary">{{job.name}}</LinkTo></td>
<td data-test-job-name><LinkTo @route="jobs.job" @model={{this.job.plainId}} class="is-primary">{{this.job.name}}</LinkTo></td>
<td data-test-job-status>
<span class="tag {{job.statusClass}}">{{job.status}}</span>
<span class="tag {{this.job.statusClass}}">{{this.job.status}}</span>
</td>
<td data-test-job-type>{{job.displayType}}</td>
<td data-test-job-priority>{{job.priority}}</td>
<td data-test-job-type>{{this.job.displayType}}</td>
<td data-test-job-priority>{{this.job.priority}}</td>
<td data-test-job-task-groups>
{{#if job.taskGroupCount}}
{{job.taskGroupCount}}
{{#if this.job.taskGroupCount}}
{{this.job.taskGroupCount}}
{{else}}
--
{{/if}}
</td>
<td data-test-job-allocations>
<div class="inline-chart">
{{#if job.hasChildren}}
{{#if (gt job.totalChildren 0)}}
<ChildrenStatusBar @job={{job}} @isNarrow={{true}} />
{{#if this.job.hasChildren}}
{{#if (gt this.job.totalChildren 0)}}
<ChildrenStatusBar @job={{this.job}} @isNarrow={{true}} />
{{else}}
<em class="is-faded">No Children</em>
{{/if}}
{{else}}
<AllocationStatusBar @allocationContainer={{job}} @isNarrow={{true}} />
<AllocationStatusBar @allocationContainer={{this.job}} @isNarrow={{true}} />
{{/if}}
</div>
</td>

2
ui/app/templates/components/job-subnav.hbs
View File

@@ -3,7 +3,7 @@
<li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{@job}} @activeClass="is-active">Overview</LinkTo></li>
<li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{@job}} @activeClass="is-active">Definition</LinkTo></li>
<li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{@job}} @activeClass="is-active">Versions</LinkTo></li>
{{#if job.supportsDeployments}}
{{#if this.job.supportsDeployments}}
<li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{@job}} @activeClass="is-active">Deployments</LinkTo></li>
{{/if}}
<li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{@job}} @activeClass="is-active">Allocations</LinkTo></li>

14
ui/app/templates/components/job-version.hbs
View File

@@ -1,21 +1,21 @@
<div class="boxed-section-head is-light inline-definitions">
Version #{{version.number}}
Version #{{this.version.number}}
<span class="bumper-left pair is-faded">
<span class="term">Stable</span>
<span class="badge is-light is-faded" data-test-version-stability><code>{{version.stable}}</code></span>
<span class="badge is-light is-faded" data-test-version-stability><code>{{this.version.stable}}</code></span>
</span>
<span class="pair is-faded">
<span class="term">Submitted</span>
<span data-test-version-submit-time class="submit-date">{{format-ts version.submitTime}}</span>
<span data-test-version-submit-time class="submit-date">{{format-ts this.version.submitTime}}</span>
</span>
{{#if version.diff}}
<button class="button is-light is-compact pull-right" {{action "toggleDiff"}} type="button">{{changeCount}} {{pluralize "Change" changeCount}}</button>
{{#if this.version.diff}}
<button class="button is-light is-compact pull-right" {{action "toggleDiff"}} type="button">{{this.changeCount}} {{pluralize "Change" this.changeCount}}</button>
{{else}}
<span class="pull-right">No Changes</span>
{{/if}}
</div>
{{#if isOpen}}
{{#if this.isOpen}}
<div class="boxed-section-body is-dark">
<JobDiff @diff={{version.diff}} @verbose={{verbose}} />
<JobDiff @diff={{this.version.diff}} @verbose={{this.verbose}} />
</div>
{{/if}}

4
ui/app/templates/components/job-versions-stream.hbs
View File

@@ -1,10 +1,10 @@
{{#each annotatedVersions key="version.id" as |record|}}
{{#each this.annotatedVersions key="version.id" as |record|}}
{{#if record.meta.showDate}}
<li data-test-version-time class="timeline-note">
{{format-date record.version.submitTime}}
</li>
{{/if}}
<li data-test-version class="timeline-object">
<JobVersion @version={{record.version}} @verbose={{verbose}} />
<JobVersion @version={{record.version}} @verbose={{this.verbose}} />
</li>
{{/each}}

2
ui/app/templates/components/json-viewer.hbs
View File

@@ -1,5 +1,5 @@
<IvyCodemirror
@value={{jsonStr}}
@value={{this.jsonStr}}
@options={{hash
mode="javascript"
theme="hashi-read-only"

12
ui/app/templates/components/lifecycle-chart-row.hbs
View File

@@ -1,16 +1,16 @@
<div
class="lifecycle-chart-row {{task.lifecycleName}} {{activeClass}} {{finishedClass}}"
class="lifecycle-chart-row {{this.task.lifecycleName}} {{this.activeClass}} {{this.finishedClass}}"
data-test-lifecycle-task>
<div class="task">
<div class="name" data-test-name>
{{#if taskState}}
<LinkTo @route="allocations.allocation.task" @models={{array taskState.allocation taskState}}>
{{task.name}}
{{#if this.taskState}}
<LinkTo @route="allocations.allocation.task" @models={{array this.taskState.allocation this.taskState}}>
{{this.task.name}}
</LinkTo>
{{else}}
{{task.name}}
{{this.task.name}}
{{/if}}
</div>
<div class="lifecycle" data-test-lifecycle>{{capitalize task.lifecycleName}} Task</div>
<div class="lifecycle" data-test-lifecycle>{{capitalize this.task.lifecycleName}} Task</div>
</div>
</div>

12
ui/app/templates/components/lifecycle-chart.hbs
View File

@@ -1,12 +1,12 @@
{{#if (gt lifecyclePhases.length 1)}}
{{#if (gt this.lifecyclePhases.length 1)}}
<div class="boxed-section" data-test-lifecycle-chart>
<div class="boxed-section-head">
Task Lifecycle {{if taskStates "Status" "Configuration"}}
Task Lifecycle {{if this.taskStates "Status" "Configuration"}}
</div>
<div class="boxed-section-body lifecycle-chart">
<div class="lifecycle-phases">
{{#each lifecyclePhases as |phase|}}
{{#each this.lifecyclePhases as |phase|}}
<div class="lifecycle-phase {{if phase.isActive "is-active"}} {{if (eq phase.name "Main") "main" "prestart"}}" data-test-lifecycle-phase>
<div class="name" data-test-name>{{phase.name}}</div>
</div>
@@ -17,12 +17,12 @@
</div>
<div class="lifecycle-chart-rows">
{{#if tasks}}
{{#each sortedLifecycleTasks as |task|}}
{{#if this.tasks}}
{{#each this.sortedLifecycleTasks as |task|}}
<LifecycleChartRow @task={{task}} />
{{/each}}
{{else}}
{{#each sortedLifecycleTaskStates as |state|}}
{{#each this.sortedLifecycleTaskStates as |state|}}
<LifecycleChartRow @taskState={{state}} @task={{state.task}} />
{{/each}}
{{/if}}

42
ui/app/templates/components/line-chart.hbs
View File

@@ -1,37 +1,37 @@
<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" elementId}} {{concat "desc-" elementId}}">
<title id="{{concat "title-" elementId}}">{{title}}</title>
<description id="{{concat "desc-" elementId}}">
{{#if description}}
{{description}}
<svg data-test-line-chart role="img" aria-labelledby="{{concat "title-" this.elementId}} {{concat "desc-" this.elementId}}">
<title id="{{concat "title-" this.elementId}}">{{this.title}}</title>
<description id="{{concat "desc-" this.elementId}}">
{{#if this.description}}
{{this.description}}
{{else}}
X-axis values range from {{xRange.firstObject}} to {{xRange.lastObject}},
and Y-axis values range from {{yRange.firstObject}} to {{yRange.lastObject}}.
X-axis values range from {{this.xRange.firstObject}} to {{this.xRange.lastObject}},
and Y-axis values range from {{this.yRange.firstObject}} to {{this.yRange.lastObject}}.
{{/if}}
</description>
<defs>
<linearGradient x1="0" x2="0" y1="0" y2="1" class="{{chartClass}}" id="{{fillId}}">
<linearGradient x1="0" x2="0" y1="0" y2="1" class="{{this.chartClass}}" id="{{this.fillId}}">
<stop class="start" offset="0%" />
<stop class="end" offset="100%" />
</linearGradient>
<clipPath id="{{maskId}}">
<path class="fill" d="{{area}}" />
<clipPath id="{{this.maskId}}">
<path class="fill" d="{{this.area}}" />
</clipPath>
</defs>
<g class="y-gridlines gridlines" transform="translate({{yAxisOffset}}, 0)"></g>
<g class="canvas {{chartClass}}">
<path class="line" d="{{line}}" />
<rect class="area" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
<rect class="hover-target" x="0" y="0" width="{{yAxisOffset}}" height="{{xAxisOffset}}" />
<g class="y-gridlines gridlines" transform="translate({{this.yAxisOffset}}, 0)"></g>
<g class="canvas {{this.chartClass}}">
<path class="line" d="{{this.line}}" />
<rect class="area" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
<rect class="hover-target" x="0" y="0" width="{{this.yAxisOffset}}" height="{{this.xAxisOffset}}" />
</g>
<g aria-hidden="true" class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
<g aria-hidden="true" class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
<g aria-hidden="true" class="x-axis axis" transform="translate(0, {{this.xAxisOffset}})"></g>
<g aria-hidden="true" class="y-axis axis" transform="translate({{this.yAxisOffset}}, 0)"></g>
</svg>
<div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
<div class="chart-tooltip is-snappy {{if this.isActive "active" "inactive"}}" style={{this.tooltipStyle}}>
<p>
<span class="label">
<span class="color-swatch {{chartClass}}" />
{{activeDatumLabel}}
<span class="color-swatch {{this.chartClass}}" />
{{this.activeDatumLabel}}
</span>
<span class="value">{{activeDatumValue}}</span>
<span class="value">{{this.activeDatumValue}}</span>
</p>
</div>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

6
ui/app/templates/components/list-accordion.hbs
View File

@@ -1,14 +1,14 @@
{{#each decoratedSource as |item|}}
{{#each this.decoratedSource as |item|}}
{{yield (hash
head=(component "list-accordion/accordion-head"
isOpen=item.isOpen
onOpen=(action (queue
(action (mut item.isOpen) true)
(action onToggle item.item item.isOpen)
(action this.onToggle item.item item.isOpen)
))
onClose=(action (queue
(action (mut item.isOpen) false)
(action onToggle item.item item.isOpen)
(action this.onToggle item.item item.isOpen)
))
)
body=(component "list-accordion/accordion-body" isOpen=item.isOpen)

2
ui/app/templates/components/list-accordion/accordion-body.hbs
View File

@@ -1,4 +1,4 @@
{{#if isOpen}}
{{#if this.isOpen}}
<div data-test-accordion-body class="accordion-body">
{{yield}}
</div>

6
ui/app/templates/components/list-accordion/accordion-head.hbs
View File

@@ -3,8 +3,8 @@
</div>
<button
data-test-accordion-toggle
class="button is-light is-compact pull-right accordion-toggle {{unless isExpandable "is-invisible"}}"
onclick={{action (if isOpen onClose onOpen) item}}
class="button is-light is-compact pull-right accordion-toggle {{unless this.isExpandable "is-invisible"}}"
onclick={{action (if this.isOpen this.onClose this.onOpen) this.item}}
type="button">
{{buttonLabel}}
{{this.buttonLabel}}
</button>

22
ui/app/templates/components/list-pagination.hbs
View File

@@ -1,14 +1,14 @@
{{#if source.length}}
{{#if this.source.length}}
{{yield (hash
first=(component "list-pagination/list-pager" test="first" page=1 visible=(not (eq page 1)))
prev=(component "list-pagination/list-pager" test="prev" page=(dec page) visible=(not (eq page 1)))
next=(component "list-pagination/list-pager" test="next" page=(inc page) visible=(not (eq page lastPage)))
last=(component "list-pagination/list-pager" test="last" page=lastPage visible=(not (eq page lastPage)))
pageLinks=pageLinks
currentPage=page
totalPages=lastPage
startsAt=startsAt
endsAt=endsAt
list=list
first=(component "list-pagination/list-pager" test="first" page=1 visible=(not (eq this.page 1)))
prev=(component "list-pagination/list-pager" test="prev" page=(dec this.page) visible=(not (eq this.page 1)))
next=(component "list-pagination/list-pager" test="next" page=(inc this.page) visible=(not (eq this.page this.lastPage)))
last=(component "list-pagination/list-pager" test="last" page=this.lastPage visible=(not (eq this.page this.lastPage)))
pageLinks=this.pageLinks
currentPage=this.page
totalPages=this.lastPage
startsAt=this.startsAt
endsAt=this.endsAt
list=this.list
)}}
{{/if}}

4
ui/app/templates/components/list-pagination/list-pager.hbs
View File

@@ -1,5 +1,5 @@
{{#if visible}}
<LinkTo @query={{hash currentPage=page}} class={{attrs.class}} data-test-pager={{test}}>
{{#if this.visible}}
<LinkTo @query={{hash currentPage=this.page}} class={{this.attrs.class}} data-test-pager={{this.test}}>
{{yield}}
</LinkTo>
{{/if}}

6
ui/app/templates/components/list-table.hbs
View File

@@ -1,8 +1,8 @@
{{yield (hash
head=(component "list-table/table-head")
body=(component "list-table/table-body" rows=decoratedSource)
body=(component "list-table/table-body" rows=this.decoratedSource)
sort-by=(component "list-table/sort-by"
currentProp=sortProperty
sortDescending=sortDescending
currentProp=this.sortProperty
sortDescending=this.sortDescending
)
)}}

4
ui/app/templates/components/list-table/sort-by.hbs
View File

@@ -1,5 +1,5 @@
<LinkTo
@query={{hash sortProperty=prop sortDescending=shouldSortDescending}}
data-test-sort-by={{prop}}>
@query={{hash sortProperty=this.prop sortDescending=this.shouldSortDescending}}
data-test-sort-by={{this.prop}}>
{{yield}}
</LinkTo>

2
ui/app/templates/components/list-table/table-body.hbs
View File

@@ -1,3 +1,3 @@
{{#each rows key=key as |row|}}
{{#each this.rows key=this.key as |row|}}
{{yield row}}
{{/each}}

14
ui/app/templates/components/multi-select-dropdown.hbs
View File

@@ -1,14 +1,14 @@
<BasicDropdown
@horizontalPosition="left"
@onOpen={{action (queue (action (mut isOpen) true) (action capture))}}
@onClose={{action (mut isOpen) false}} as |dd|
@onOpen={{action (queue (action (mut this.isOpen) true) (action this.capture))}}
@onClose={{action (mut this.isOpen) false}} as |dd|
>
<dd.Trigger data-test-dropdown-trigger class="dropdown-trigger" {{on "keydown" (action "openOnArrowDown" dd)}}>
<div class="dropdown-trigger-label">
{{label}}
{{#if selection.length}}
{{this.label}}
{{#if this.selection.length}}
<span data-test-dropdown-count class="tag is-light">
{{selection.length}}
{{this.selection.length}}
</span>
{{/if}}
</div>
@@ -16,7 +16,7 @@
</dd.Trigger>
<dd.Content class="dropdown-options">
<ul role="listbox" data-test-dropdown-options>
{{#each options key="key" as |option|}}
{{#each this.options key="key" as |option|}}
<li
data-test-dropdown-option={{option.key}}
class="dropdown-option"
@@ -27,7 +27,7 @@
<input
type="checkbox"
tabindex="-1"
checked={{contains option.key selection}}
checked={{contains option.key this.selection}}
onchange={{action "toggle" option}}
/>
{{option.label}}

6
ui/app/templates/components/page-layout.hbs
View File

@@ -1,11 +1,11 @@
<GlobalHeader
@class="page-header"
@onHamburgerClick={{action (mut isGutterOpen) true}}>
@onHamburgerClick={{action (mut this.isGutterOpen) true}}>
<AppBreadcrumbs />
</GlobalHeader>
<GutterMenu
@class="page-body"
@isOpen={{isGutterOpen}}
@onHamburgerClick={{action (mut isGutterOpen) false}}>
@isOpen={{this.isGutterOpen}}
@onHamburgerClick={{action (mut this.isGutterOpen) false}}>
{{yield}}
</GutterMenu>

8
ui/app/templates/components/page-size-select.hbs
View File

@@ -4,11 +4,11 @@
@tagName="div"
class="field-body"
data-test-page-size-select
@options={{pageSizeOptions}}
@selected={{userSettings.pageSize}}
@options={{this.pageSizeOptions}}
@selected={{this.userSettings.pageSize}}
@onChange={{action (queue
(action (mut userSettings.pageSize))
(action onChange)
(action (mut this.userSettings.pageSize))
(action this.onChange)
)}} as |option|>
{{option}}
</PowerSelect>

6
ui/app/templates/components/placement-failure.hbs
View File

@@ -1,7 +1,7 @@
{{#if placementFailures}}
{{#with placementFailures as |failures|}}
{{#if this.placementFailures}}
{{#with this.placementFailures as |failures|}}
<h3 class="title is-5" data-test-placement-failure-task-group>
{{placementFailures.name}}
{{this.placementFailures.name}}
<span class="badge is-light" data-test-placement-failure-coalesced-failures>{{inc failures.coalescedFailures}} unplaced</span>
</h3>
<ul class="simple-list">

54
ui/app/templates/components/plugin-allocation-row.hbs
View File

@@ -1,16 +1,16 @@
{{#if allocation}}
{{#if this.allocation}}
<td data-test-indicators class="is-narrow">
{{#if 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">
{{x-icon "warning" class="is-warning"}}
</span>
{{/if}}
{{#if allocation.nextAllocation}}
{{#if this.allocation.nextAllocation}}
<span data-test-icon="reschedule" class="tooltip text-center" role="tooltip" aria-label="Allocation was rescheduled">
{{x-icon "history" class="is-faded"}}
</span>
{{/if}}
{{#if allocation.wasPreempted}}
{{#if this.allocation.wasPreempted}}
<span data-test-icon="preemption" class="tooltip text-center" role="tooltip" aria-label="Allocation was preempted">
{{x-icon "boot" class="is-faded"}}
</span>
@@ -18,59 +18,59 @@
</td>
<td data-test-short-id>
<LinkTo @route="allocations.allocation" @model={{allocation}} class="is-primary">
{{allocation.shortId}}
<LinkTo @route="allocations.allocation" @model={{this.allocation}} class="is-primary">
{{this.allocation.shortId}}
</LinkTo>
</td>
<td data-test-create-time>
<span class="tooltip" aria-label="{{format-month-ts allocation.createTime}}">
{{format-month-ts allocation.createTime short=true}}
<span class="tooltip" aria-label="{{format-month-ts this.allocation.createTime}}">
{{format-month-ts this.allocation.createTime short=true}}
</span>
</td>
<td data-test-modify-time>
<span class="tooltip" aria-label="{{format-month-ts allocation.modifyTime}}">
{{moment-from-now allocation.modifyTime}}
<span class="tooltip" aria-label="{{format-month-ts this.allocation.modifyTime}}">
{{moment-from-now this.allocation.modifyTime}}
</span>
</td>
<td data-test-health>
<span class="nowrap">
{{x-icon
(if pluginAllocation.healthy "check-circle-outline" "minus-circle-outline")
class=(if pluginAllocation.healthy "is-success" "is-danger")}}
{{if pluginAllocation.healthy "Healthy" "Unhealthy"}}
(if this.pluginAllocation.healthy "check-circle-outline" "minus-circle-outline")
class=(if this.pluginAllocation.healthy "is-success" "is-danger")}}
{{if this.pluginAllocation.healthy "Healthy" "Unhealthy"}}
</span>
</td>
<td data-test-client><LinkTo @route="clients.client" @model={{allocation.node}}>{{allocation.node.shortId}}</LinkTo></td>
<td data-test-client><LinkTo @route="clients.client" @model={{this.allocation.node}}>{{this.allocation.node.shortId}}</LinkTo></td>
<td>
{{#if (or allocation.job.isPending allocation.job.isReloading)}}
{{#if (or this.allocation.job.isPending this.allocation.job.isReloading)}}
...
{{else}}
<LinkTo @route="jobs.job" @model={{allocation.job}} @query={{hash jobNamespace=allocation.job.namespace.id}} data-test-job>{{allocation.job.name}}</LinkTo>
<span class="is-faded" data-test-task-group>/ {{allocation.taskGroup.name}}</span>
<LinkTo @route="jobs.job" @model={{this.allocation.job}} @query={{hash jobNamespace=this.allocation.job.namespace.id}} data-test-job>{{this.allocation.job.name}}</LinkTo>
<span class="is-faded" data-test-task-group>/ {{this.allocation.taskGroup.name}}</span>
{{/if}}
</td>
<td data-test-job-version class="is-1">{{allocation.jobVersion}}</td>
<td data-test-volume>{{if allocation.taskGroup.volumes.length "Yes"}}</td>
<td data-test-job-version class="is-1">{{this.allocation.jobVersion}}</td>
<td data-test-volume>{{if this.allocation.taskGroup.volumes.length "Yes"}}</td>
<td data-test-cpu class="is-1 has-text-centered">
<AllocationStat
@metric="cpu"
@allocation={{allocation}}
@statsTracker={{stats}}
@isLoading={{fetchStats.isRunning}}
@error={{statsError}} />
@allocation={{this.allocation}}
@statsTracker={{this.stats}}
@isLoading={{this.fetchStats.isRunning}}
@error={{this.statsError}} />
</td>
<td data-test-mem class="is-1 has-text-centered">
<AllocationStat
@metric="memory"
@allocation={{allocation}}
@statsTracker={{stats}}
@isLoading={{fetchStats.isRunning}}
@error={{statsError}} />
@allocation={{this.allocation}}
@statsTracker={{this.stats}}
@isLoading={{this.fetchStats.isRunning}}
@error={{this.statsError}} />
</td>
{{else}}
<td colspan="10">&hellip;</td>

12
ui/app/templates/components/popover-menu.hbs
View File

@@ -1,16 +1,16 @@
<BasicDropdown
@horizontalPosition="right"
@disabled={{isDisabled}}
@onOpen={{action (queue (action (mut isOpen) true) (action capture))}}
@onClose={{action (mut isOpen) false}} as |dd|
@disabled={{this.isDisabled}}
@onOpen={{action (queue (action (mut this.isOpen) true) (action this.capture))}}
@onClose={{action (mut this.isOpen) false}} as |dd|
>
<dd.Trigger
data-test-popover-trigger
class={{concat "popover-trigger button is-primary " triggerClass (if isDisabled " is-disabled")}}
aria-label={{tooltip}}
class={{concat "popover-trigger button is-primary " this.triggerClass (if this.isDisabled " is-disabled")}}
aria-label={{this.tooltip}}
{{on "keydown" (action "openOnArrowDown" dd)}}
>
{{label}} {{x-icon "chevron-down" class="is-text"}}
{{this.label}} {{x-icon "chevron-down" class="is-text"}}
</dd.Trigger>
<dd.Content data-test-popover-menu class="popover-content">
{{yield dd}}

22
ui/app/templates/components/primary-metric.hbs
View File

@@ -1,28 +1,28 @@
<h4 data-test-primary-metric-title class="title is-5">{{metricLabel}}</h4>
<h4 data-test-primary-metric-title class="title is-5">{{this.metricLabel}}</h4>
<div class="primary-graphic">
<StatsTimeSeries @data={{data}} @chartClass={{chartClass}} />
<StatsTimeSeries @data={{this.data}} @chartClass={{this.chartClass}} />
</div>
<div class="columns secondary-graphic">
<div class="column">
<div class="inline-chart" data-test-percentage-bar>
<progress
class="progress {{chartClass}} is-small"
value="{{data.lastObject.percent}}"
class="progress {{this.chartClass}} is-small"
value="{{this.data.lastObject.percent}}"
max="1">
{{data.lastObject.percent}}
{{this.data.lastObject.percent}}
</progress>
</div>
</div>
<div class="column is-minimum">
<span class="nowrap" data-test-percentage>{{format-percentage data.lastObject.percent total=1}}</span>
<span class="nowrap" data-test-percentage>{{format-percentage this.data.lastObject.percent total=1}}</span>
</div>
</div>
<div class="annotation" data-test-absolute-value>
{{#if (eq metric "cpu")}}
<strong>{{data.lastObject.used}} Mhz</strong> / {{reservedAmount}} Mhz reserved
{{else if (eq metric "memory")}}
<strong>{{format-bytes data.lastObject.used}}</strong> / {{reservedAmount}} MiB reserved
{{#if (eq this.metric "cpu")}}
<strong>{{this.data.lastObject.used}} Mhz</strong> / {{this.reservedAmount}} Mhz reserved
{{else if (eq this.metric "memory")}}
<strong>{{format-bytes this.data.lastObject.used}}</strong> / {{this.reservedAmount}} MiB reserved
{{else}}
<strong>{{data.lastObject.used}}</strong> / {{reservedAmount}} reserved
<strong>{{this.data.lastObject.used}}</strong> / {{this.reservedAmount}} reserved
{{/if}}
</div>

10
ui/app/templates/components/region-switcher.hbs
View File

@@ -1,12 +1,12 @@
{{#if system.shouldShowRegions}}
{{#if this.system.shouldShowRegions}}
<PowerSelect
data-test-region-switcher
@tagName="div"
@triggerClass={{decoration}}
@options={{sortedRegions}}
@selected={{system.activeRegion}}
@triggerClass={{this.decoration}}
@options={{this.sortedRegions}}
@selected={{this.system.activeRegion}}
@searchEnabled={{false}}
@onChange={{action gotoRegion}} as |region|>
@onChange={{action this.gotoRegion}} as |region|>
<span class="ember-power-select-prefix">Region: </span>{{region}}
</PowerSelect>
{{/if}}

26
ui/app/templates/components/reschedule-event-row.hbs
View File

@@ -1,12 +1,12 @@
<li class="timeline-note">
{{#if label}}
<strong data-test-reschedule-label>{{label}}</strong>
{{#if this.label}}
<strong data-test-reschedule-label>{{this.label}}</strong>
{{/if}}
{{format-ts time}}
{{format-ts this.time}}
</li>
<li class="timeline-object" data-test-allocation={{allocation.id}}>
<li class="timeline-object" data-test-allocation={{this.allocation.id}}>
<div class="boxed-section">
{{#unless linkToAllocation}}
{{#unless this.linkToAllocation}}
<div class="boxed-section-head" data-test-row-heading>
This Allocation
</div>
@@ -14,27 +14,27 @@
<div class="boxed-section-body inline-definitions">
<div class="columns">
<div class="column is-centered is-minimum">
<span data-test-allocation-status class="tag {{allocation.statusClass}}">
{{allocation.clientStatus}}
<span data-test-allocation-status class="tag {{this.allocation.statusClass}}">
{{this.allocation.clientStatus}}
</span>
</div>
<div class="column">
<div class="boxed-section-row">
<span class="pair">
<span class="term">Allocation</span>
{{#if linkToAllocation}}
<LinkTo @route="allocations.allocation" @model={{allocation.id}}>
<code data-test-allocation-link>{{allocation.shortId}}</code>
{{#if this.linkToAllocation}}
<LinkTo @route="allocations.allocation" @model={{this.allocation.id}}>
<code data-test-allocation-link>{{this.allocation.shortId}}</code>
</LinkTo>
{{else}}
<code data-test-allocation-link>{{allocation.shortId}}</code>
<code data-test-allocation-link>{{this.allocation.shortId}}</code>
{{/if}}
</span>
<span class="pair">
<span class="term">Client</span>
<span>
<LinkTo @route="clients.client" @model={{allocation.node.id}} data-test-node-link>
<code>{{allocation.node.id}}</code>
<LinkTo @route="clients.client" @model={{this.allocation.node.id}} data-test-node-link>
<code>{{this.allocation.node.id}}</code>
</LinkTo>
</span>
</span>

20
ui/app/templates/components/reschedule-event-timeline.hbs
View File

@@ -1,29 +1,29 @@
<ol class="timeline">
{{#if allocation.nextAllocation}}
{{#if this.allocation.nextAllocation}}
<RescheduleEventRow
@label="Next Allocation"
@allocation={{allocation.nextAllocation}}
@time={{allocation.nextAllocation.modifyTime}} />
@allocation={{this.allocation.nextAllocation}}
@time={{this.allocation.nextAllocation.modifyTime}} />
{{/if}}
{{#if allocation.hasStoppedRescheduling}}
{{#if this.allocation.hasStoppedRescheduling}}
<li class="timeline-note" data-test-stop-warning>
{{x-icon "warning" class="is-warning is-text"}} Nomad has stopped attempting to reschedule this allocation.
</li>
{{/if}}
{{#if (and allocation.followUpEvaluation.waitUntil (not allocation.nextAllocation))}}
{{#if (and this.allocation.followUpEvaluation.waitUntil (not this.allocation.nextAllocation))}}
<li class="timeline-note" data-test-attempt-notice>
{{x-icon "clock" class="is-info is-text"}} Nomad will attempt to reschedule
<span class="tooltip" aria-label="{{format-ts allocation.followUpEvaluation.waitUntil}}">
{{moment-from-now allocation.followUpEvaluation.waitUntil interval=1000}}
<span class="tooltip" aria-label="{{format-ts this.allocation.followUpEvaluation.waitUntil}}">
{{moment-from-now this.allocation.followUpEvaluation.waitUntil interval=1000}}
</span>
</li>
{{/if}}
<RescheduleEventRow
@allocation={{allocation}}
@allocation={{this.allocation}}
@linkToAllocation={{false}}
@time={{allocation.modifyTime}} />
@time={{this.allocation.modifyTime}} />
{{#each (reverse allocation.rescheduleEvents) as |event|}}
{{#each (reverse this.allocation.rescheduleEvents) as |event|}}
<RescheduleEventRow
@allocationId={{event.previousAllocationId}}
@time={{event.time}} />

6
ui/app/templates/components/search-box.hbs
View File

@@ -1,10 +1,10 @@
<div class="control">
<span class="prefix-icon">{{x-icon "search"}}</span>
<input
class="input {{inputClass}}"
class="input {{this.inputClass}}"
type="text"
placeholder={{placeholder}}
value={{_searchTerm}}
placeholder={{this.placeholder}}
value={{this._searchTerm}}
oninput={{action "setSearchTerm"}}
size="1">
<button class="suffix-icon" onclick={{action "clear"}} type="button">{{x-icon "cancel"}}</button>

12
ui/app/templates/components/server-agent-row.hbs
View File

@@ -1,6 +1,6 @@
<td data-test-server-name><LinkTo @route="servers.server" @model={{agent.id}} class="is-primary">{{agent.name}}</LinkTo></td>
<td data-test-server-status>{{agent.status}}</td>
<td data-test-server-is-leader>{{if agent.isLeader "True" "False"}}</td>
<td data-test-server-address>{{agent.address}}</td>
<td data-test-server-port>{{agent.serfPort}}</td>
<td data-test-server-datacenter>{{agent.datacenter}}</td>
<td data-test-server-name><LinkTo @route="servers.server" @model={{this.agent.id}} class="is-primary">{{this.agent.name}}</LinkTo></td>
<td data-test-server-status>{{this.agent.status}}</td>
<td data-test-server-is-leader>{{if this.agent.isLeader "True" "False"}}</td>
<td data-test-server-address>{{this.agent.address}}</td>
<td data-test-server-port>{{this.agent.serfPort}}</td>
<td data-test-server-datacenter>{{this.agent.datacenter}}</td>

4
ui/app/templates/components/server-subnav.hbs
View File

@@ -1,6 +1,6 @@
<div class="tabs is-subnav">
<ul>
<li><LinkTo @route="servers.server.index" @model={{server}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="servers.server.monitor" @model={{server}} @activeClass="is-active">Monitor</LinkTo></li>
<li><LinkTo @route="servers.server.index" @model={{this.server}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="servers.server.monitor" @model={{this.server}} @activeClass="is-active">Monitor</LinkTo></li>
</ul>
</div>

16
ui/app/templates/components/stepper-input.hbs
View File

@@ -5,10 +5,10 @@
<input
data-test-stepper-input
type="number"
min={{min}}
max={{max}}
value={{internalValue}}
disabled={{disabled}}
min={{this.min}}
max={{this.max}}
value={{this.internalValue}}
disabled={{this.disabled}}
class="stepper-input-input"
onFocus={{action "selectValue"}}
onKeyDown={{action "resetTextInput"}}
@@ -17,8 +17,8 @@
data-test-stepper-decrement
role="button"
aria-label="decrement"
class="stepper-input-stepper button {{class}}"
disabled={{or disabled (lte internalValue min)}}
class="stepper-input-stepper button {{this.class}}"
disabled={{or this.disabled (lte this.internalValue this.min)}}
onclick={{action "decrement"}}
type="button">
{{x-icon "minus-plain"}}
@@ -27,8 +27,8 @@
data-test-stepper-increment
role="button"
aria-label="increment"
class="stepper-input-stepper button {{class}}"
disabled={{or disabled (gte internalValue max)}}
class="stepper-input-stepper button {{this.class}}"
disabled={{or this.disabled (gte this.internalValue this.max)}}
onclick={{action "increment"}}
type="button">
{{x-icon "plus-plain"}}

2
ui/app/templates/components/streaming-file.hbs
View File

@@ -1 +1 @@
<code data-test-output>{{logger.output}}</code>
<code data-test-output>{{this.logger.output}}</code>

26
ui/app/templates/components/task-group-row.hbs
View File

@@ -1,21 +1,21 @@
<td data-test-task-group-name>
<LinkTo @route="jobs.job.task-group" @models={{array taskGroup.job taskGroup}} class="is-primary">
{{taskGroup.name}}
<LinkTo @route="jobs.job.task-group" @models={{array this.taskGroup.job this.taskGroup}} class="is-primary">
{{this.taskGroup.name}}
</LinkTo>
</td>
<td data-test-task-group-count class="nowrap">
{{count}}
{{#if taskGroup.scaling}}
{{this.count}}
{{#if this.taskGroup.scaling}}
<div
data-test-scale-controls
class="button-bar is-shadowless is-text bumper-left {{if (or runningDeployment (cannot "scale job")) "tooltip multiline"}}"
aria-label={{tooltipText}}>
class="button-bar is-shadowless is-text bumper-left {{if (or this.runningDeployment (cannot "scale job")) "tooltip multiline"}}"
aria-label={{this.tooltipText}}>
<button
data-test-scale="decrement"
role="button"
aria-label="decrement"
class="button is-xsmall is-light"
disabled={{or isMinimum runningDeployment (cannot "scale job")}}
disabled={{or this.isMinimum this.runningDeployment (cannot "scale job")}}
onclick={{action "countDown"}}
type="button">
{{x-icon "minus-plain" class="is-text"}}
@@ -25,7 +25,7 @@
role="button"
aria-label="increment"
class="button is-xsmall is-light"
disabled={{or isMaximum runningDeployment (cannot "scale job")}}
disabled={{or this.isMaximum this.runningDeployment (cannot "scale job")}}
onclick={{action "countUp"}}
type="button">
{{x-icon "plus-plain" class="is-text"}}
@@ -34,9 +34,9 @@
{{/if}}
</td>
<td data-test-task-group-allocs>
<div class="inline-chart"><AllocationStatusBar @allocationContainer={{taskGroup.summary}} @isNarrow={{true}} /></div>
<div class="inline-chart"><AllocationStatusBar @allocationContainer={{this.taskGroup.summary}} @isNarrow={{true}} /></div>
</td>
<td data-test-task-group-volume>{{if taskGroup.volumes.length "Yes"}}</td>
<td data-test-task-group-cpu>{{taskGroup.reservedCPU}} MHz</td>
<td data-test-task-group-mem>{{taskGroup.reservedMemory}} MiB</td>
<td data-test-task-group-disk>{{taskGroup.reservedEphemeralDisk}} MiB</td>
<td data-test-task-group-volume>{{if this.taskGroup.volumes.length "Yes"}}</td>
<td data-test-task-group-cpu>{{this.taskGroup.reservedCPU}} MHz</td>
<td data-test-task-group-mem>{{this.taskGroup.reservedMemory}} MiB</td>
<td data-test-task-group-disk>{{this.taskGroup.reservedEphemeralDisk}} MiB</td>

12
ui/app/templates/components/task-log.hbs
View File

@@ -1,4 +1,4 @@
{{#if noConnection}}
{{#if this.noConnection}}
<div data-test-connection-error class="notification is-error">
<div class="columns">
<div class="column">
@@ -6,24 +6,24 @@
<p>The logs for this task are inaccessible. Check the condition of the node the allocation is on.</p>
</div>
<div class="column is-centered is-minimum">
<button data-test-connection-error-dismiss class="button is-danger" onclick={{action (mut noConnection) false}} type="button">Okay</button>
<button data-test-connection-error-dismiss class="button is-danger" onclick={{action (mut this.noConnection) false}} type="button">Okay</button>
</div>
</div>
</div>
{{/if}}
<div class="boxed-section-head">
<span>
<button data-test-log-action="stdout" class="button {{if (eq mode "stdout") "is-info"}}" {{action "setMode" "stdout"}} type="button">stdout</button>
<button data-test-log-action="stderr" class="button {{if (eq mode "stderr") "is-danger"}}" {{action "setMode" "stderr"}} type="button">stderr</button>
<button data-test-log-action="stdout" class="button {{if (eq this.mode "stdout") "is-info"}}" {{action "setMode" "stdout"}} type="button">stdout</button>
<button data-test-log-action="stderr" class="button {{if (eq this.mode "stderr") "is-danger"}}" {{action "setMode" "stderr"}} type="button">stderr</button>
</span>
<span class="pull-right">
<button data-test-log-action="head" class="button is-white" onclick={{action "gotoHead"}} type="button">Head</button>
<button data-test-log-action="tail" class="button is-white" onclick={{action "gotoTail"}} type="button">Tail</button>
<button data-test-log-action="toggle-stream" class="button is-white" onclick={{action "toggleStream"}} type="button">
{{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
{{x-icon (if this.logger.isStreaming "media-pause" "media-play") class="is-text"}}
</button>
</span>
</div>
<div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
<StreamingFile @logger={{logger}} @mode={{streamMode}} @isStreaming={{isStreaming}} />
<StreamingFile @logger={{this.logger}} @mode={{this.streamMode}} @isStreaming={{this.isStreaming}} />
</div>

46
ui/app/templates/components/task-row.hbs
View File

@@ -1,30 +1,30 @@
<td class="is-narrow">
{{#unless task.driverStatus.healthy}}
<span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{task.driver}} is unhealthy">
{{#unless this.task.driverStatus.healthy}}
<span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{this.task.driver}} is unhealthy">
{{x-icon "warning" class="is-warning"}}
</span>
{{/unless}}
</td>
<td data-test-name class="nowrap">
<LinkTo @route="allocations.allocation.task" @models={{array task.allocation task}} class="is-primary">
{{task.name}}
{{#if task.isConnectProxy}}
<LinkTo @route="allocations.allocation.task" @models={{array this.task.allocation this.task}} class="is-primary">
{{this.task.name}}
{{#if this.task.isConnectProxy}}
<ProxyTag @class="bumper-left" />
{{/if}}
</LinkTo>
</td>
<td data-test-state>{{task.state}}</td>
<td data-test-state>{{this.task.state}}</td>
<td data-test-message>
{{#if task.events.lastObject.message}}
{{task.events.lastObject.message}}
{{#if this.task.events.lastObject.message}}
{{this.task.events.lastObject.message}}
{{else}}
<em>No message</em>
{{/if}}
</td>
<td data-test-time>{{format-ts task.events.lastObject.time}}</td>
<td data-test-time>{{format-ts this.task.events.lastObject.time}}</td>
<td data-test-volumes>
<ul>
{{#each task.task.volumeMounts as |volume|}}
{{#each this.task.task.volumeMounts as |volume|}}
<li data-test-volume>
<strong>{{volume.volume}}:</strong>
{{#if volume.isCSI}}
@@ -40,7 +40,7 @@
</td>
<td data-test-ports>
<ul>
{{#let task.resources.networks.firstObject as |network|}}
{{#let this.task.resources.networks.firstObject as |network|}}
{{#each network.ports as |port|}}
<li data-test-port>
<strong>{{port.name}}:</strong>
@@ -51,40 +51,40 @@
</ul>
</td>
<td data-test-cpu class="is-1 has-text-centered">
{{#if task.isRunning}}
{{#if (and (not cpu) fetchStats.isRunning)}}
{{#if this.task.isRunning}}
{{#if (and (not this.cpu) this.fetchStats.isRunning)}}
...
{{else if statsError}}
{{else if this.statsError}}
<span class="tooltip text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{cpu.used}} / {{taskStats.reservedCPU}} MHz">
<div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{this.cpu.used}} / {{this.taskStats.reservedCPU}} MHz">
<progress
class="progress is-info is-small"
value="{{cpu.percent}}"
value="{{this.cpu.percent}}"
max="1">
{{cpu.percent}}
{{this.cpu.percent}}
</progress>
</div>
{{/if}}
{{/if}}
</td>
<td data-test-mem class="is-1 has-text-centered">
{{#if task.isRunning}}
{{#if (and (not memory) fetchStats.isRunning)}}
{{#if this.task.isRunning}}
{{#if (and (not this.memory) this.fetchStats.isRunning)}}
...
{{else if statsError}}
{{else if this.statsError}}
<span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
{{x-icon "warning" class="is-warning"}}
</span>
{{else}}
<div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes memory.used}} / {{taskStats.reservedMemory}} MiB">
<div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes this.memory.used}} / {{this.taskStats.reservedMemory}} MiB">
<progress
class="progress is-danger is-small"
value="{{memory.percent}}"
value="{{this.memory.percent}}"
max="1">
{{memory.percent}}
{{this.memory.percent}}
</progress>
</div>
{{/if}}

6
ui/app/templates/components/task-subnav.hbs
View File

@@ -1,7 +1,7 @@
<div class="tabs is-subnav">
<ul>
<li><LinkTo @route="allocations.allocation.task.index" @models={{array task.allocation task}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="allocations.allocation.task.logs" @models={{array task.allocation task}} @activeClass="is-active">Logs</LinkTo></li>
<li><LinkTo @route="allocations.allocation.task.fs-root" @models={{array task.allocation task}} class={{if filesLinkActive "is-active"}}>Files</LinkTo></li>
<li><LinkTo @route="allocations.allocation.task.index" @models={{array this.task.allocation this.task}} @activeClass="is-active">Overview</LinkTo></li>
<li><LinkTo @route="allocations.allocation.task.logs" @models={{array this.task.allocation this.task}} @activeClass="is-active">Logs</LinkTo></li>
<li><LinkTo @route="allocations.allocation.task.fs-root" @models={{array this.task.allocation this.task}} class={{if this.filesLinkActive "is-active"}}>Files</LinkTo></li>
</ul>
</div>

6
ui/app/templates/components/toggle.hbs
View File

@@ -1,9 +1,9 @@
<input
data-test-input
type="checkbox"
checked={{isActive}}
disabled={{isDisabled}}
checked={{this.isActive}}
disabled={{this.isDisabled}}
class="input"
onchange={{action onToggle}} />
onchange={{action this.onToggle}} />
<span data-test-toggler class="toggler" />
{{yield}}

28
ui/app/templates/components/two-step-button.hbs
View File

@@ -1,35 +1,35 @@
{{#if isIdle}}
{{#if this.isIdle}}
<button
data-test-idle-button
type="button"
class="button {{if isInfoAction "is-warning" "is-danger is-outlined"}} is-important is-small"
disabled={{disabled}}
class="button {{if this.isInfoAction "is-warning" "is-danger is-outlined"}} is-important is-small"
disabled={{this.disabled}}
onclick={{action "promptForConfirmation"}}>
{{idleText}}
{{this.idleText}}
</button>
{{else if isPendingConfirmation}}
{{else if this.isPendingConfirmation}}
<span
data-test-confirmation-message
class="confirmation-text {{if isInfoAction "inherit-color"}} {{if alignRight "is-right-aligned"}}">
{{confirmationMessage}}
class="confirmation-text {{if this.isInfoAction "inherit-color"}} {{if this.alignRight "is-right-aligned"}}">
{{this.confirmationMessage}}
</span>
<button
data-test-cancel-button
type="button"
class="button {{if isInfoAction "is-danger is-important" "is-dark"}} is-outlined is-small"
disabled={{awaitingConfirmation}}
class="button {{if this.isInfoAction "is-danger is-important" "is-dark"}} is-outlined is-small"
disabled={{this.awaitingConfirmation}}
onclick={{action (queue
(action "setToIdle")
(action onCancel)
(action this.onCancel)
)}}>
{{cancelText}}
{{this.cancelText}}
</button>
<button
data-test-confirm-button
class="button {{if isInfoAction "is-warning" "is-danger"}} is-small {{if awaitingConfirmation "is-loading"}}"
disabled={{awaitingConfirmation}}
class="button {{if this.isInfoAction "is-warning" "is-danger"}} is-small {{if this.awaitingConfirmation "is-loading"}}"
disabled={{this.awaitingConfirmation}}
onclick={{action "confirm"}}
type="button">
{{confirmText}}
{{this.confirmText}}
</button>
{{/if}}

30
ui/app/templates/csi/plugins/index.hbs
View File

@@ -6,29 +6,29 @@
</ul>
</div>
<section class="section">
{{#if isForbidden}}
{{#if this.isForbidden}}
<ForbiddenMessage />
{{else}}
<div class="toolbar">
<div class="toolbar-item">
{{#if model.length}}
{{#if this.model.length}}
<SearchBox
data-test-plugins-search
@searchTerm={{mut searchTerm}}
@onChange={{action resetPagination}}
@searchTerm={{mut this.searchTerm}}
@onChange={{action this.resetPagination}}
@placeholder="Search plugins..." />
{{/if}}
</div>
</div>
{{#if sortedPlugins}}
{{#if this.sortedPlugins}}
<ListPagination
@source={{sortedPlugins}}
@size={{pageSize}}
@page={{currentPage}} as |p|>
@source={{this.sortedPlugins}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<t.sort-by @prop="plainId">ID</t.sort-by>
@@ -58,10 +58,10 @@
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action resetPagination}} />
<PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedPlugins.length}}
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedPlugins.length}}
</div>
<p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
<p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
@@ -71,15 +71,15 @@
</ListPagination>
{{else}}
<div data-test-empty-plugins-list class="empty-message">
{{#if (eq model.length 0)}}
{{#if (eq this.model.length 0)}}
<h3 data-test-empty-plugins-list-headline class="empty-message-headline">No Plugins</h3>
<p class="empty-message-body">
The cluster currently has no registered CSI Plugins.
</p>
{{else if searchTerm}}
{{else if this.searchTerm}}
<h3 data-test-empty-plugins-list-headline class="empty-message-headline">No Matches</h3>
<p class="empty-message-body">
No plugins match the term <strong>{{searchTerm}}</strong>
No plugins match the term <strong>{{this.searchTerm}}</strong>
</p>
{{/if}}
</div>

40
ui/app/templates/csi/plugins/plugin/allocations.hbs
View File

@@ -1,41 +1,41 @@
{{title "CSI Plugin " model.plainId " allocations"}}
{{title "CSI Plugin " this.model.plainId " allocations"}}
<div data-test-subnav="plugins" class="tabs is-subnav">
<ul>
<li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{model}} @activeClass="is-active">Overview</LinkTo></li>
<li data-test-tab="allocations"><LinkTo @route="csi.plugins.plugin.allocations" @model={{model}} @activeClass="is-active">Allocations</LinkTo></li>
<li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{this.model}} @activeClass="is-active">Overview</LinkTo></li>
<li data-test-tab="allocations"><LinkTo @route="csi.plugins.plugin.allocations" @model={{this.model}} @activeClass="is-active">Allocations</LinkTo></li>
</ul>
</div>
<section class="section">
<div class="toolbar">
<div class="toolbar-item">
<h1 class="title">Allocations for {{model.plainId}}</h1>
<h1 class="title">Allocations for {{this.model.plainId}}</h1>
</div>
<div class="toolbar-item is-right-aligned is-mobile-full-width">
<div class="button-bar">
<MultiSelectDropdown
data-test-health-facet
@label="Health"
@options={{optionsHealth}}
@selection={{selectionHealth}}
@onSelect={{action setFacetQueryParam "qpHealth"}} />
@options={{this.optionsHealth}}
@selection={{this.selectionHealth}}
@onSelect={{action this.setFacetQueryParam "qpHealth"}} />
<MultiSelectDropdown
data-test-type-facet
@label="Type"
@options={{optionsType}}
@selection={{selectionType}}
@onSelect={{action setFacetQueryParam "qpType"}} />
@options={{this.optionsType}}
@selection={{this.selectionType}}
@onSelect={{action this.setFacetQueryParam "qpType"}} />
</div>
</div>
</div>
{{#if sortedAllocations}}
{{#if this.sortedAllocations}}
<ListPagination
@source={{sortedAllocations}}
@size={{pageSize}}
@page={{currentPage}} as |p|>
@source={{this.sortedAllocations}}
@size={{this.pageSize}}
@page={{this.currentPage}} as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{sortProperty}}
@sortDescending={{sortDescending}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -57,10 +57,10 @@
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action resetPagination}} />
<PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination">
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.length}}
{{p.startsAt}}&ndash;{{p.endsAt}} of {{this.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>
@@ -70,12 +70,12 @@
</ListPagination>
{{else}}
<div data-test-empty-list class="empty-message">
{{#if (eq combinedAllocations.length 0)}}
{{#if (eq this.combinedAllocations.length 0)}}
<h3 data-test-empty-list-headline class="empty-message-headline">No Allocations</h3>
<p class="empty-message-body">
The plugin has no allocations.
</p>
{{else if (eq sortedAllocations.length 0)}}
{{else if (eq this.sortedAllocations.length 0)}}
<h3 data-test-empty-list-headline class="empty-message-headline">No Matches</h3>
<p class="empty-message-body">
No allocations match your current filter selection.

66
ui/app/templates/csi/plugins/plugin/index.hbs
View File

@@ -1,37 +1,37 @@
{{title "CSI Plugin " model.plainId}}
{{title "CSI Plugin " this.model.plainId}}
<div data-test-subnav="plugins" class="tabs is-subnav">
<ul>
<li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{model}} @activeClass="is-active">Overview</LinkTo></li>
<li data-test-tab="allocations"><LinkTo @route="csi.plugins.plugin.allocations" @model={{model}} @activeClass="is-active">Allocations</LinkTo></li>
<li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{this.model}} @activeClass="is-active">Overview</LinkTo></li>
<li data-test-tab="allocations"><LinkTo @route="csi.plugins.plugin.allocations" @model={{this.model}} @activeClass="is-active">Allocations</LinkTo></li>
</ul>
</div>
<section class="section">
<h1 class="title" data-test-title>{{model.plainId}}</h1>
<h1 class="title" data-test-title>{{this.model.plainId}}</h1>
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
<span class="label">Plugin Details</span>
{{#if model.controllerRequired}}
{{#if this.model.controllerRequired}}
<span class="pair" data-test-plugin-controller-health>
<span class="term">Controller Health</span>
{{format-percentage model.controllersHealthy total=model.controllersExpected}}
({{model.controllersHealthy}}/{{model.controllersExpected}})
{{format-percentage this.model.controllersHealthy total=this.model.controllersExpected}}
({{this.model.controllersHealthy}}/{{this.model.controllersExpected}})
</span>
{{/if}}
<span class="pair" data-test-plugin-node-health>
<span class="term">Node Health</span>
{{format-percentage model.nodesHealthy total=model.nodesExpected}}
({{model.nodesHealthy}}/{{model.nodesExpected}})
{{format-percentage this.model.nodesHealthy total=this.model.nodesExpected}}
({{this.model.nodesHealthy}}/{{this.model.nodesExpected}})
</span>
<span class="pair" data-test-plugin-provider>
<span class="term">Provider</span>
{{model.provider}}
{{this.model.provider}}
</span>
</div>
</div>
<div class="columns">
{{#if model.controllerRequired}}
{{#if this.model.controllerRequired}}
<div class="column" data-test-plugin-controller-availability>
<div class="boxed-section">
<div class="boxed-section-head is-hollow">Controller Health</div>
@@ -40,19 +40,19 @@
<div class="column is-half">
<GaugeChart
@label="Availability"
@value={{model.controllersHealthy}}
@total={{model.controllersExpected}} />
@value={{this.model.controllersHealthy}}
@total={{this.model.controllersExpected}} />
</div>
<div class="column">
<div class="metric">
<h3 class="label">Available</h3>
<p class="value">{{model.controllersHealthy}}</p>
<p class="value">{{this.model.controllersHealthy}}</p>
</div>
</div>
<div class="column">
<div class="metric">
<h3 class="label">Expected</h3>
<p class="value">{{model.controllersExpected}}</p>
<p class="value">{{this.model.controllersExpected}}</p>
</div>
</div>
</div>
@@ -64,23 +64,23 @@
<div class="boxed-section" data-test-plugin-node-availability>
<div class="boxed-section-head is-hollow">Node Health</div>
<div class="boxed-section-body">
<div class="columns is-centered is-bottom-aligned {{unless model.controllerRequired "is-max-half"}}">
<div class="columns is-centered is-bottom-aligned {{unless this.model.controllerRequired "is-max-half"}}">
<div class="column is-half">
<GaugeChart
@label="Availability"
@value={{model.nodesHealthy}}
@total={{model.nodesExpected}} />
@value={{this.model.nodesHealthy}}
@total={{this.model.nodesExpected}} />
</div>
<div class="column">
<div class="metric">
<h3 class="label">Available</h3>
<p class="value">{{model.nodesHealthy}}</p>
<p class="value">{{this.model.nodesHealthy}}</p>
</div>
</div>
<div class="column">
<div class="metric">
<h3 class="label">Expected</h3>
<p class="value">{{model.nodesExpected}}</p>
<p class="value">{{this.model.nodesExpected}}</p>
</div>
</div>
</div>
@@ -89,15 +89,15 @@
</div>
</div>
{{#if model.controllerRequired}}
{{#if this.model.controllerRequired}}
<div class="boxed-section" data-test-controller-allocations>
<div class="boxed-section-head">
Controller Allocations
</div>
<div class="boxed-section-body {{if model.controllers "is-full-bleed"}}">
{{#if model.controllers}}
<div class="boxed-section-body {{if this.model.controllers "is-full-bleed"}}">
{{#if this.model.controllers}}
<ListTable
@source={{take 10 sortedControllers}}
@source={{take 10 this.sortedControllers}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -125,15 +125,15 @@
</div>
{{/if}}
</div>
{{#if model.controllers}}
{{#if this.model.controllers}}
<div class="boxed-section-foot">
<p class="pull-right">
<LinkTo
@route="csi.plugins.plugin.allocations"
@model={{model}}
@model={{this.model}}
@query={{hash qpType=(qp-serialize (array "controller"))}}
data-test-go-to-controller-allocations>
View all {{model.controllers.length}} Controller {{pluralize "allocation" model.controllers.length}}
View all {{this.model.controllers.length}} Controller {{pluralize "allocation" this.model.controllers.length}}
</LinkTo>
</p>
</div>
@@ -145,10 +145,10 @@
<div class="boxed-section-head">
Node Allocations
</div>
<div class="boxed-section-body {{if model.nodes "is-full-bleed"}}">
{{#if model.nodes}}
<div class="boxed-section-body {{if this.model.nodes "is-full-bleed"}}">
{{#if this.model.nodes}}
<ListTable
@source={{take 10 sortedNodes}}
@source={{take 10 this.sortedNodes}}
@class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
@@ -176,15 +176,15 @@
</div>
{{/if}}
</div>
{{#if model.nodes}}
{{#if this.model.nodes}}
<div class="boxed-section-foot">
<p class="pull-right">
<LinkTo
@route="csi.plugins.plugin.allocations"
@model={{model}}
@model={{this.model}}
@query={{hash qpType=(qp-serialize (array "node"))}}
data-test-go-to-node-allocations>
View all {{model.nodes.length}} Node {{pluralize "allocation" model.nodes.length}}
View all {{this.model.nodes.length}} Node {{pluralize "allocation" this.model.nodes.length}}
</LinkTo>
</p>
</div>

Some files were not shown because too many files have changed in this diff Show More