ui: fix CI (#11785)

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;
 

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>

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}}&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>
+              <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>

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>

ui/tests/integration/components/trigger-test.js

+/* 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';