diff --git a/ui/app/controllers/jobs/job/task-group.js b/ui/app/controllers/jobs/job/task-group.js
index 3cb6efe347779581804ae60bce2065dc4172361c..8a2c39ed981cac5c665a767d44b3d4989630092b 100644
--- a/ui/app/controllers/jobs/job/task-group.js
+++ b/ui/app/controllers/jobs/job/task-group.js
@@ -14,10 +14,10 @@ import classic from 'ember-classic-decorator';
@classic
export default class TaskGroupController extends Controller.extend(
- Sortable,
- Searchable,
- WithNamespaceResetting
-) {
+ Sortable,
+ Searchable,
+ WithNamespaceResetting
+ ) {
@service userSettings;
@service can;
diff --git a/ui/app/templates/csi/volumes/volume.hbs b/ui/app/templates/csi/volumes/volume.hbs
index 7ac8e68f92ba711f135886170b9758ba59481edc..a15171d0258aa7d50af7f707d663bcd5b29ca471 100644
--- a/ui/app/templates/csi/volumes/volume.hbs
+++ b/ui/app/templates/csi/volumes/volume.hbs
@@ -3,158 +3,108 @@
{{/each}}
{{page-title "CSI Volume " this.model.name}}
<section class="section with-headspace">
- <h1 class="title" data-test-title>
- {{this.model.name}}
- </h1>
+ <h1 class="title" data-test-title>{{this.model.name}}</h1>
+
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
- <span class="label">
- Volume Details
- </span>
+ <span class="label">Volume Details</span>
<span class="pair" data-test-volume-health>
- <span class="term">
- Health
- </span>
+ <span class="term">Health</span>
{{if this.model.schedulable "Schedulable" "Unschedulable"}}
</span>
<span class="pair" data-test-volume-provider>
- <span class="term">
- Provider
- </span>
+ <span class="term">Provider</span>
{{this.model.provider}}
</span>
<span class="pair" data-test-volume-external-id>
- <span class="term">
- External ID
- </span>
+ <span class="term">External ID</span>
{{this.model.externalId}}
</span>
{{#if this.system.shouldShowNamespaces}}
<span class="pair" data-test-volume-namespace>
- <span class="term">
- Namespace
- </span>
+ <span class="term">Namespace</span>
{{this.model.namespace.name}}
</span>
{{/if}}
</div>
</div>
+
<div class="boxed-section">
<div class="boxed-section-head">
Write Allocations
</div>
<div class="boxed-section-body {{if this.model.writeAllocations.length "is-full-bleed"}}">
{{#if this.model.writeAllocations.length}}
- <ListTable @source={{this.sortedWriteAllocations}} @class="with-foot" as |t|>
+ <ListTable
+ @source={{this.sortedWriteAllocations}}
+ @class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
- <th>
- ID
- </th>
- <th>
- Created
- </th>
- <th>
- Modified
- </th>
- <th>
- Status
- </th>
- <th>
- Client
- </th>
- <th>
- Job
- </th>
- <th>
- Version
- </th>
- <th>
- CPU
- </th>
- <th>
- Memory
- </th>
+ <th>ID</th>
+ <th>Created</th>
+ <th>Modified</th>
+ <th>Status</th>
+ <th>Client</th>
+ <th>Job</th>
+ <th>Version</th>
+ <th>CPU</th>
+ <th>Memory</th>
</t.head>
<t.body as |row|>
<AllocationRow
@data-test-write-allocation={{row.model.id}}
@allocation={{row.model}}
@context="volume"
- @onClick={{action "gotoAllocation" row.model}}
- />
+ @onClick={{action "gotoAllocation" row.model}} />
</t.body>
</ListTable>
{{else}}
<div class="empty-message" data-test-empty-write-allocations>
- <h3 class="empty-message-headline" data-test-empty-write-allocations-headline>
- No Write Allocations
- </h3>
- <p class="empty-message-body" data-test-empty-write-allocations-message>
- No allocations are depending on this volume for read/write access.
- </p>
+ <h3 class="empty-message-headline" data-test-empty-write-allocations-headline>No Write Allocations</h3>
+ <p class="empty-message-body" data-test-empty-write-allocations-message>No allocations are depending on this volume for read/write access.</p>
</div>
{{/if}}
</div>
</div>
+
<div class="boxed-section">
<div class="boxed-section-head">
Read Allocations
</div>
<div class="boxed-section-body {{if this.model.readAllocations.length "is-full-bleed"}}">
{{#if this.model.readAllocations.length}}
- <ListTable @source={{this.sortedReadAllocations}} @class="with-foot" as |t|>
+ <ListTable
+ @source={{this.sortedReadAllocations}}
+ @class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
- <th>
- ID
- </th>
- <th>
- Modified
- </th>
- <th>
- Created
- </th>
- <th>
- Status
- </th>
- <th>
- Client
- </th>
- <th>
- Job
- </th>
- <th>
- Version
- </th>
- <th>
- CPU
- </th>
- <th>
- Memory
- </th>
+ <th>ID</th>
+ <th>Modified</th>
+ <th>Created</th>
+ <th>Status</th>
+ <th>Client</th>
+ <th>Job</th>
+ <th>Version</th>
+ <th>CPU</th>
+ <th>Memory</th>
</t.head>
<t.body as |row|>
<AllocationRow
@data-test-read-allocation={{row.model.id}}
@allocation={{row.model}}
@context="volume"
- @onClick={{action "gotoAllocation" row.model}}
- />
+ @onClick={{action "gotoAllocation" row.model}} />
</t.body>
</ListTable>
{{else}}
<div class="empty-message" data-test-empty-read-allocations>
- <h3 class="empty-message-headline" data-test-empty-read-allocations-headline>
- No Read Allocations
- </h3>
- <p class="empty-message-body" data-test-empty-read-allocations-message>
- No allocations are depending on this volume for read-only access.
- </p>
+ <h3 class="empty-message-headline" data-test-empty-read-allocations-headline>No Read Allocations</h3>
+ <p class="empty-message-body" data-test-empty-read-allocations-message>No allocations are depending on this volume for read-only access.</p>
</div>
{{/if}}
</div>
</div>
+
<div class="boxed-section">
<div class="boxed-section-head">
Constraints
@@ -162,32 +112,20 @@
<div class="boxed-section-body is-full-bleed">
<table class="table">
<thead>
- <th>
- Setting
- </th>
- <th>
- Value
- </th>
+ <th>Setting</th>
+ <th>Value</th>
</thead>
<tbody>
<tr>
- <td>
- Access Mode
- </td>
- <td data-test-access-mode>
- {{this.model.accessMode}}
- </td>
+ <td>Access Mode</td>
+ <td data-test-access-mode>{{this.model.accessMode}}</td>
</tr>
<tr>
- <td>
- Attachment Mode
- </td>
- <td data-test-attachment-mode>
- {{this.model.attachmentMode}}
- </td>
+ <td>Attachment Mode</td>
+ <td data-test-attachment-mode>{{this.model.attachmentMode}}</td>
</tr>
</tbody>
</table>
</div>
</div>
-</section>
\ No newline at end of file
+</section>
diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index dd95b32e0a96939e47b7d456ed044ae30e50e81d..ce4468b5342938596af19aff08df881982c1b953 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -2,116 +2,64 @@
{{page-title "Task group " this.model.name " - Job " this.model.job.name}}
<div class="tabs is-subnav">
<ul>
- <li>
- <LinkTo
- @route="jobs.job.task-group"
- @models={{array this.model.job this.model}}
- @activeClass="is-active"
- >
- Overview
- </LinkTo>
- </li>
+ <li><LinkTo @route="jobs.job.task-group" @models={{array this.model.job this.model}} @activeClass="is-active">Overview</LinkTo></li>
</ul>
</div>
<section class="section">
<h1 class="title with-flex">
- <span>
- {{this.model.name}}
- </span>
+ <span>{{this.model.name}}</span>
<div>
<Exec::OpenButton @job={{this.model.job}} @taskGroup={{this.model}} />
{{#if this.model.scaling}}
- <StepperInput
- data-test-task-group-count-stepper
- aria-label={{this.tooltipText}}
- @min={{this.model.scaling.min}}
- @max={{this.model.scaling.max}}
- @value={{this.model.count}}
- @class="is-primary is-small"
- @disabled={{or
- this.model.job.runningDeployment
- (cannot "scale job" namespace=this.model.job.namespace.name)
- }}
- @onChange={{action "scaleTaskGroup"}}
- >
- Count
- </StepperInput>
+ <StepperInput
+ data-test-task-group-count-stepper
+ aria-label={{this.tooltipText}}
+ @min={{this.model.scaling.min}}
+ @max={{this.model.scaling.max}}
+ @value={{this.model.count}}
+ @class="is-primary is-small"
+ @disabled={{or this.model.job.runningDeployment (cannot "scale job" namespace=this.model.job.namespace.name)}}
+ @onChange={{action "scaleTaskGroup"}}>
+ Count
+ </StepperInput>
{{/if}}
</div>
</h1>
+
<div class="boxed-section is-small">
<div class="boxed-section-body inline-definitions">
- <span class="label">
- Task Group Details
- </span>
- <span class="pair" data-test-task-group-tasks>
- <span class="term">
- # Tasks
- </span>
- {{this.model.tasks.length}}
- </span>
- <span class="pair" data-test-task-group-cpu>
- <span class="term">
- Reserved CPU
- </span>
- {{format-scheduled-hertz this.model.reservedCPU}}
- </span>
+ <span class="label">Task Group Details</span>
+
+ <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{this.model.tasks.length}}</span>
+ <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{format-scheduled-hertz this.model.reservedCPU}}</span>
<span class="pair" data-test-task-group-mem>
- <span class="term">
- Reserved Memory
- </span>
+ <span class="term">Reserved Memory</span>
{{format-scheduled-bytes this.model.reservedMemory start="MiB"}}
{{#if (gt this.model.reservedMemoryMax this.model.reservedMemory)}}
- ({{format-scheduled-bytes this.model.reservedMemoryMax start="MiB"}}Max)
+ ({{format-scheduled-bytes this.model.reservedMemoryMax start="MiB"}} Max)
{{/if}}
</span>
- <span class="pair" data-test-task-group-disk>
- <span class="term">
- Reserved Disk
- </span>
- {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}}
- </span>
+ <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}}</span>
{{#if this.model.scaling}}
- <span class="pair" data-test-task-group-min>
- <span class="term">
- Count Range
- </span>
- {{this.model.scaling.min}}
- to
- {{this.model.scaling.max}}
+ <span class="pair" data-test-task-group-min><span class="term">Count Range</span>
+ {{this.model.scaling.min}} to {{this.model.scaling.max}}
</span>
- <span class="pair" data-test-task-group-max>
- <span class="term">
- Scaling Policy?
- </span>
+ <span class="pair" data-test-task-group-max><span class="term">Scaling Policy?</span>
{{if this.model.scaling.policy "Yes" "No"}}
</span>
{{/if}}
</div>
</div>
+
<div class="boxed-section">
<div class="boxed-section-head">
- <div>
- Allocation Status
- <span class="badge is-white">
- {{this.allocations.length}}
- </span>
- </div>
+ <div>Allocation Status <span class="badge is-white">{{this.allocations.length}}</span></div>
</div>
<div class="boxed-section-body">
- <AllocationStatusBar
- @allocationContainer={{this.model.summary}}
- @class="split-view" as |chart|
- >
+ <AllocationStatusBar @allocationContainer={{this.model.summary}} @class="split-view" as |chart|>
<ol class="legend">
{{#each chart.data as |datum index|}}
- <li
- class="{{datum.className}}
-
- {{if (eq datum.label chart.activeDatum.label) "is-active"}}
-
- {{if (eq datum.value 0) "is-empty"}}"
- >
+ <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
<JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
</li>
{{/each}}
@@ -152,102 +100,62 @@
@source={{this.sortedAllocations}}
@size={{this.pageSize}}
@page={{this.currentPage}}
- @class="allocations" as |p|
- >
+ @class="allocations" as |p|>
<ListTable
@source={{p.list}}
@sortProperty={{this.sortProperty}}
@sortDescending={{this.sortDescending}}
- @class="with-foot" as |t|
- >
+ @class="with-foot" as |t|>
<t.head>
<th class="is-narrow"></th>
- <t.sort-by @prop="shortId">
- ID
- </t.sort-by>
- <t.sort-by @prop="createIndex" @title="Create Index">
- Created
- </t.sort-by>
- <t.sort-by @prop="modifyIndex" @title="Modify Index">
- Modified
- </t.sort-by>
- <t.sort-by @prop="statusIndex">
- Status
- </t.sort-by>
- <t.sort-by @prop="jobVersion">
- Version
- </t.sort-by>
- <t.sort-by @prop="node.shortId">
- Client
- </t.sort-by>
- <th>
- Volume
- </th>
- <th>
- CPU
- </th>
- <th>
- Memory
- </th>
+ <t.sort-by @prop="shortId">ID</t.sort-by>
+ <t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
+ <t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
+ <t.sort-by @prop="statusIndex">Status</t.sort-by>
+ <t.sort-by @prop="jobVersion">Version</t.sort-by>
+ <t.sort-by @prop="node.shortId">Client</t.sort-by>
+ <th>Volume</th>
+ <th>CPU</th>
+ <th>Memory</th>
</t.head>
<t.body @key="model.id" as |row|>
- <AllocationRow
- @data-test-allocation={{row.model.id}}
- @allocation={{row.model}}
- @context="taskGroup"
- @onClick={{action "gotoAllocation" row.model}}
- />
+ <AllocationRow @data-test-allocation={{row.model.id}} @allocation={{row.model}} @context="taskGroup" @onClick={{action "gotoAllocation" row.model}} />
</t.body>
</ListTable>
<div class="table-foot">
<PageSizeSelect @onChange={{action this.resetPagination}} />
<nav class="pagination">
<div class="pagination-numbers">
- {{p.startsAt}}
- 鈥�
- {{p.endsAt}}
- of
- {{this.sortedAllocations.length}}
+ {{p.startsAt}}–{{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>
+ <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
+ <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
<ul class="pagination-list"></ul>
</nav>
</div>
</ListPagination>
- {{else if this.allocations.length}}
- <div class="boxed-section-body">
- <div class="empty-message" data-test-empty-allocations-list>
- <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>
- No Matches
- </h3>
- <p class="empty-message-body">
- No allocations match the term
- <strong>
- {{this.searchTerm}}
- </strong>
- </p>
- </div>
- </div>
{{else}}
- <div class="boxed-section-body">
- <div class="empty-message" data-test-empty-allocations-list>
- <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>
- No Allocations
- </h3>
- <p class="empty-message-body">
- No allocations have been placed.
- </p>
+ {{#if this.allocations.length}}
+ <div class="boxed-section-body">
+ <div class="empty-message" data-test-empty-allocations-list>
+ <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
+ <p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
+ </div>
</div>
- </div>
+ {{else}}
+ <div class="boxed-section-body">
+ <div class="empty-message" data-test-empty-allocations-list>
+ <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
+ <p class="empty-message-body">No allocations have been placed.</p>
+ </div>
+ </div>
+ {{/if}}
{{/if}}
</div>
</div>
+
<LifecycleChart @tasks={{this.model.tasks}} />
+
{{#if this.model.scaleState.isVisible}}
{{#if this.shouldShowScaleEventTimeline}}
<div data-test-scaling-timeline class="boxed-section">
@@ -259,6 +167,7 @@
</div>
</div>
{{/if}}
+
<div data-test-scaling-events class="boxed-section">
<div class="boxed-section-head">
Recent Scaling Events
@@ -268,6 +177,7 @@
</div>
</div>
{{/if}}
+
{{#if this.model.volumes.length}}
<div data-test-volumes class="boxed-section">
<div class="boxed-section-head">
@@ -276,47 +186,29 @@
<div class="boxed-section-body is-full-bleed">
<ListTable @source={{this.model.volumes}} as |t|>
<t.head>
- <th>
- Name
- </th>
- <th>
- Type
- </th>
- <th>
- Source
- </th>
- <th>
- Permissions
- </th>
+ <th>Name</th>
+ <th>Type</th>
+ <th>Source</th>
+ <th>Permissions</th>
</t.head>
<t.body as |row|>
<tr data-test-volume>
<td data-test-volume-name>
{{#if row.model.isCSI}}
- <LinkTo
- @route="csi.volumes.volume"
- @model={{row.model.source}}
- @query={{hash volumeNamespace=row.model.namespace.id}}
- >
+ <LinkTo @route="csi.volumes.volume" @model={{row.model.source}} @query={{hash volumeNamespace=row.model.namespace.id}}>
{{row.model.name}}
</LinkTo>
{{else}}
{{row.model.name}}
{{/if}}
</td>
- <td data-test-volume-type>
- {{row.model.type}}
- </td>
- <td data-test-volume-source>
- {{row.model.source}}
- </td>
- <td data-test-volume-permissions>
- {{if row.model.readOnly "Read" "Read/Write"}}
- </td>
+ <td data-test-volume-type>{{row.model.type}}</td>
+ <td data-test-volume-source>{{row.model.source}}</td>
+ <td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
</tr>
</t.body>
</ListTable>
</div>
</div>
{{/if}}
-</section>
\ No newline at end of file
+</section>
diff --git a/ui/app/templates/optimize.hbs b/ui/app/templates/optimize.hbs
index 5e1795c15a0b2819562fd736f1abbb388f8b46ff..d5beb0d73fa7a345ee93fc693c45301829a5fc90 100644
--- a/ui/app/templates/optimize.hbs
+++ b/ui/app/templates/optimize.hbs
@@ -9,12 +9,7 @@
data-test-recommendation-summaries-search
@onChange={{this.syncActiveSummary}}
@searchTerm={{mut this.searchTerm}}
- @placeholder="Search
- {{this.summaries.length}}
-
- {{pluralize "recommendation" this.summaries.length}}
- ..."
- />
+ @placeholder="Search {{this.summaries.length}} {{pluralize "recommendation" this.summaries.length}}..." />
{{/if}}
</div>
<div class="toolbar-item is-right-aligned is-mobile-full-width">
@@ -25,88 +20,72 @@
@label="Namespace"
@options={{this.optionsNamespaces}}
@selection={{this.qpNamespace}}
- @onSelect={{action
- (queue
- (action this.cacheNamespace) (action this.setFacetQueryParam "qpNamespace")
- )
- }}
- />
+ @onSelect={{action (queue
+ (action this.cacheNamespace)
+ (action this.setFacetQueryParam "qpNamespace")
+ )}} />
{{/if}}
<MultiSelectDropdown
data-test-type-facet
@label="Type"
@options={{this.optionsType}}
@selection={{this.selectionType}}
- @onSelect={{action this.setFacetQueryParam "qpType"}}
- />
+ @onSelect={{action this.setFacetQueryParam "qpType"}} />
<MultiSelectDropdown
data-test-status-facet
@label="Status"
@options={{this.optionsStatus}}
@selection={{this.selectionStatus}}
- @onSelect={{action this.setFacetQueryParam "qpStatus"}}
- />
+ @onSelect={{action this.setFacetQueryParam "qpStatus"}} />
<MultiSelectDropdown
data-test-datacenter-facet
@label="Datacenter"
@options={{this.optionsDatacenter}}
@selection={{this.selectionDatacenter}}
- @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
- />
+ @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
<MultiSelectDropdown
data-test-prefix-facet
@label="Prefix"
@options={{this.optionsPrefix}}
@selection={{this.selectionPrefix}}
- @onSelect={{action this.setFacetQueryParam "qpPrefix"}}
- />
+ @onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
</div>
</div>
</div>
+
{{#if this.filteredSummaries}}
{{outlet}}
- <ListTable @source={{this.filteredSummaries}} as |t|>
+
+ <ListTable
+ @source={{this.filteredSummaries}} as |t|>
<t.head>
- <th>
- Job
- </th>
- <th>
- Recommended At
- </th>
- <th>
- # Allocs
- </th>
- <th>
- CPU
- </th>
- <th>
- Mem
- </th>
- <th>
- Agg. CPU
- </th>
- <th>
- Agg. Mem
- </th>
+ <th>Job</th>
+ <th>Recommended At</th>
+ <th># Allocs</th>
+ <th>CPU</th>
+ <th>Mem</th>
+ <th>Agg. CPU</th>
+ <th>Agg. Mem</th>
</t.head>
<t.body as |row|>
{{#if row.model.isProcessed}}
- <Das::RecommendationRow class="is-disabled" @summary={{row.model}} />
+ <Das::RecommendationRow
+ class="is-disabled"
+ @summary={{row.model}}
+ />
{{else}}
<Das::RecommendationRow
- class="is-interactive
- {{if (eq row.model this.activeRecommendationSummary) "is-active"}}"
+ class="is-interactive {{if (eq row.model this.activeRecommendationSummary) 'is-active'}}"
@summary={{row.model}}
{{on "click" (fn this.transitionToSummary row.model)}}
/>
{{/if}}
+
</t.body>
</ListTable>
{{else}}
<div class="empty-message" data-test-empty-recommendations>
- <h3 class="empty-message-headline" data-test-empty-recommendations-headline>
- No Matches
- </h3>
+ <h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Matches</h3>
<p class="empty-message-body">
No recommendations match your current filter selection.
</p>
@@ -114,13 +93,11 @@
{{/if}}
{{else}}
<div class="empty-message" data-test-empty-recommendations>
- <h3 class="empty-message-headline" data-test-empty-recommendations-headline>
- No Recommendations
- </h3>
+ <h3 class="empty-message-headline" data-test-empty-recommendations-headline>No Recommendations</h3>
<p class="empty-message-body">
All recommendations have been accepted or dismissed. Nomad will continuously monitor applications so expect more recommendations in the future.
</p>
</div>
{{/if}}
</section>
-</PageLayout>
\ No newline at end of file
+</PageLayout>
diff --git a/ui/tests/integration/components/trigger-test.js b/ui/tests/integration/components/trigger-test.js
index bbcb41b32488d261e90419a1586a7b3febb7bad9..20999b01afdc9b5a55b393a03ae509bcd5df8d52 100644
--- a/ui/tests/integration/components/trigger-test.js
+++ b/ui/tests/integration/components/trigger-test.js
@@ -1,3 +1,4 @@
+/* eslint-disable ember-a11y-testing/a11y-audit-called */
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, waitFor } from '@ember/test-helpers';