UI: add explicit this to templates

ui/.template-lintrc.js

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

ui/app/templates/allocations/allocation/fs.hbs

@@ -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}} />

ui/app/templates/allocations/allocation/index.hbs

@@ -1,29 +1,29 @@
-{{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>
   {{/if}}
 
   <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,36 +32,36 @@
           @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}}
           @idleText="Restart"
           @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>

ui/app/templates/allocations/allocation/task/fs.hbs

@@ -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}} />