Add Ember ESLint plugin (#8134)

This is extracted from #8094, where I have run into some snags. Since
these ESLint fixes aren’t actually connected to the Ember 3.16 update
but involve changes to many files, we might as well address them
separately. Where possible I fixed the problems but in cases where
a fix seemed too involved, I added per-line or -file exceptions.

.circleci/config/jobs/test-ui.yml

@@ -7,13 +7,13 @@ steps:
   - checkout
   - restore_cache:
       keys:
-        - v1-deps-{{ checksum "ui/yarn.lock" }}
-        - v1-deps-
+        - v2-deps-{{ checksum "ui/yarn.lock" }}
+        - v2-deps-
   - run:
       name: yarn install
       command: cd ui && yarn install
   - save_cache:
-      key: v1-deps-{{ checksum "ui/yarn.lock" }}
+      key: v2-deps-{{ checksum "ui/yarn.lock" }}
       paths:
         - ./ui/node_modules
   - run:

ui/.eslintrc.js

@@ -7,12 +7,18 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  extends: 'eslint:recommended',
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended',
+  ],
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
+  plugins: [
+    'ember'
+  ],
   rules: {
     indent: ['error', 2, { SwitchCase: 1 }],
     'linebreak-style': ['error', 'unix'],

ui/app/adapters/application.js

@@ -24,6 +24,8 @@ export default RESTAdapter.extend({
         'X-Nomad-Token': token,
       };
     }
+
+    return;
   }),
 
   handleResponse(status, headers, payload) {

ui/app/adapters/job.js

@@ -3,9 +3,9 @@ import addToPath from 'nomad-ui/utils/add-to-path';
 import WithNamespaceIDs from 'nomad-ui/mixins/with-namespace-ids';
 
 export default Watchable.extend(WithNamespaceIDs, {
-  relationshipFallbackLinks: {
+  relationshipFallbackLinks: Object.freeze({
     summary: '/summary',
-  },
+  }),
 
   fetchRawDefinition(job) {
     const url = this.urlForFindRecord(job.get('id'), 'job');

ui/app/adapters/plugin.js

@@ -1,7 +1,7 @@
 import Watchable from './watchable';
 
 export default Watchable.extend({
-  queryParamsToAttrs: {
+  queryParamsToAttrs: Object.freeze({
     type: 'type',
-  },
+  }),
 });

ui/app/adapters/volume.js

@@ -2,8 +2,8 @@ import Watchable from './watchable';
 import WithNamespaceIDs from 'nomad-ui/mixins/with-namespace-ids';
 
 export default Watchable.extend(WithNamespaceIDs, {
-  queryParamsToAttrs: {
+  queryParamsToAttrs: Object.freeze({
     type: 'type',
     plugin_id: 'plugin.id',
-  },
+  }),
 });

ui/app/components/allocation-stat.js

@@ -24,6 +24,8 @@ export default Component.extend({
     if (metric === 'cpu' || metric === 'memory') {
       return this[this.metric];
     }
+
+    return;
   }),
 
   formattedStat: computed('metric', 'stat.used', function() {
@@ -32,13 +34,9 @@ export default Component.extend({
     return this.stat.used;
   }),
 
-  formattedReserved: computed(
-    'metric',
-    'statsTracker.reservedMemory',
-    'statsTracker.reservedCPU',
-    function() {
-      if (this.metric === 'memory') return `${this.statsTracker.reservedMemory} MiB`;
-      if (this.metric === 'cpu') return `${this.statsTracker.reservedCPU} MHz`;
-    }
-  ),
+  formattedReserved: computed('metric', 'statsTracker.{reservedMemory,reservedCPU}', function() {
+    if (this.metric === 'memory') return `${this.statsTracker.reservedMemory} MiB`;
+    if (this.metric === 'cpu') return `${this.statsTracker.reservedCPU} MHz`;
+    return;
+  }),
 });

ui/app/components/distribution-bar.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-observers */
 import Component from '@ember/component';
 import { computed, observer, set } from '@ember/object';
 import { run } from '@ember/runloop';

ui/app/components/drain-popover.js

@@ -27,14 +27,16 @@ export default Component.extend({
   durationIsCustom: equal('selectedDurationQuickOption.value', 'custom'),
   customDuration: '',
 
-  durationQuickOptions: computed(() => [
-    { label: '1 Hour', value: '1h' },
-    { label: '4 Hours', value: '4h' },
-    { label: '8 Hours', value: '8h' },
-    { label: '12 Hours', value: '12h' },
-    { label: '1 Day', value: '1d' },
-    { label: 'Custom', value: 'custom' },
-  ]),
+  durationQuickOptions: computed(function() {
+    return [
+      { label: '1 Hour', value: '1h' },
+      { label: '4 Hours', value: '4h' },
+      { label: '8 Hours', value: '8h' },
+      { label: '12 Hours', value: '12h' },
+      { label: '1 Day', value: '1d' },
+      { label: 'Custom', value: 'custom' },
+    ];
+  }),
 
   deadline: computed(
     'deadlineEnabled',

ui/app/components/fs/browser.js

@@ -19,6 +19,8 @@ export default Component.extend({
     if (this.model.allocation) {
       return this.model;
     }
+
+    return;
   }),
 
   type: computed('taskState', function() {
@@ -53,5 +55,4 @@ export default Component.extend({
       }
     }
   ),
-
 });

ui/app/components/fs/file.js

@@ -64,19 +64,15 @@ export default Component.extend({
     } else if (this.mode === 'head' || this.mode === 'tail') {
       return 'readat';
     }
+
+    return;
   }),
 
-  fileUrl: computed(
-    'allocation.id',
-    'allocation.node.httpAddr',
-    'fetchMode',
-    'useServer',
-    function() {
-      const address = this.get('allocation.node.httpAddr');
-      const url = `/v1/client/fs/${this.fetchMode}/${this.allocation.id}`;
-      return this.useServer ? url : `//${address}${url}`;
-    }
-  ),
+  fileUrl: computed('allocation.{id,node.httpAddr}', 'fetchMode', 'useServer', function() {
+    const address = this.get('allocation.node.httpAddr');
+    const url = `/v1/client/fs/${this.fetchMode}/${this.allocation.id}`;
+    return this.useServer ? url : `//${address}${url}`;
+  }),
 
   fileParams: computed('taskState.name', 'file', 'mode', function() {
     // The Log class handles encoding query params

ui/app/components/lifecycle-chart-row.js

@@ -8,11 +8,15 @@ export default Component.extend({
     if (this.taskState && this.taskState.state === 'running') {
       return 'is-active';
     }
+
+    return;
   }),
 
   finishedClass: computed('taskState.finishedAt', function() {
     if (this.taskState && this.taskState.finishedAt) {
       return 'is-finished';
     }
+
+    return;
   }),
 });

ui/app/components/line-chart.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-observers */
 import Component from '@ember/component';
 import { computed, observer } from '@ember/object';
 import { computed as overridable } from 'ember-overridable-computed';

ui/app/components/list-accordion.js

@@ -25,6 +25,7 @@ export default Component.extend({
       };
     });
 
+    // eslint-disable-next-line ember/no-side-effects
     this.set('stateCache', decoratedSource);
     return decoratedSource;
   }),

ui/app/components/multi-select-dropdown.js

@@ -29,12 +29,14 @@ export default Component.extend({
   didReceiveAttrs() {
     const dropdown = this.dropdown;
     if (this.isOpen && dropdown) {
-      run.scheduleOnce('afterRender', () => {
-        dropdown.actions.reposition();
-      });
+      run.scheduleOnce('afterRender', this, this.repositionDropdown);
     }
   },
 
+  repositionDropdown() {
+    this.dropdown.actions.reposition();
+  },
+
   actions: {
     toggle({ key }) {
       const newSelection = this.selection.slice();

ui/app/components/popover-menu.js

@@ -12,7 +12,7 @@ const FOCUSABLE = [
 ].join(', ');
 
 export default Component.extend({
-  classnames: ['popover'],
+  classNames: ['popover'],
 
   triggerClass: '',
   isOpen: false,
@@ -31,12 +31,14 @@ export default Component.extend({
   didReceiveAttrs() {
     const dropdown = this.dropdown;
     if (this.isOpen && dropdown) {
-      run.scheduleOnce('afterRender', () => {
-        dropdown.actions.reposition();
-      });
+      run.scheduleOnce('afterRender', this, this.repositionDropdown);
     }
   },
 
+  repositionDropdown() {
+    this.dropdown.actions.reposition();
+  },
+
   actions: {
     openOnArrowDown(dropdown, e) {
       if (!this.isOpen && e.keyCode === ARROW_DOWN) {

ui/app/components/streaming-file.js

@@ -17,23 +17,25 @@ export default Component.extend(WindowResizable, {
       return;
     }
 
-    run.scheduleOnce('actions', () => {
-      switch (this.mode) {
-        case 'head':
-          this.head.perform();
-          break;
-        case 'tail':
-          this.tail.perform();
-          break;
-        case 'streaming':
-          if (this.isStreaming) {
-            this.stream.perform();
-          } else {
-            this.logger.stop();
-          }
-          break;
-      }
-    });
+    run.scheduleOnce('actions', this, this.performTask);
+  },
+
+  performTask() {
+    switch (this.mode) {
+      case 'head':
+        this.head.perform();
+        break;
+      case 'tail':
+        this.tail.perform();
+        break;
+      case 'streaming':
+        if (this.isStreaming) {
+          this.stream.perform();
+        } else {
+          this.logger.stop();
+        }
+        break;
+    }
   },
 
   didInsertElement() {
@@ -54,17 +56,16 @@ export default Component.extend(WindowResizable, {
 
   head: task(function*() {
     yield this.get('logger.gotoHead').perform();
-    run.scheduleOnce('afterRender', () => {
-      this.element.scrollTop = 0;
-    });
+    run.scheduleOnce('afterRender', this, this.scrollToTop);
   }),
 
+  scrollToTop() {
+    this.element.scrollTop = 0;
+  },
+
   tail: task(function*() {
     yield this.get('logger.gotoTail').perform();
-    run.scheduleOnce('afterRender', () => {
-      const cliWindow = this.element;
-      cliWindow.scrollTop = cliWindow.scrollHeight;
-    });
+    run.scheduleOnce('afterRender', this, this.synchronizeScrollPosition, [true]);
   }),
 
   synchronizeScrollPosition(force = false) {
@@ -78,7 +79,7 @@ export default Component.extend(WindowResizable, {
   stream: task(function*() {
     // Force the scroll position to the bottom of the window when starting streaming
     this.logger.one('tick', () => {
-      run.scheduleOnce('afterRender', () => this.synchronizeScrollPosition(true));
+      run.scheduleOnce('afterRender', this, this.synchronizeScrollPosition, [true]);
     });
 
     // Follow the log if the scroll position is near the bottom of the cli window
@@ -89,7 +90,7 @@ export default Component.extend(WindowResizable, {
   }),
 
   scheduleScrollSynchronization() {
-    run.scheduleOnce('afterRender', () => this.synchronizeScrollPosition());
+    run.scheduleOnce('afterRender', this, this.synchronizeScrollPosition);
   },
 
   willDestroy() {

ui/app/components/task-log.js

@@ -28,7 +28,7 @@ export default Component.extend({
 
   mode: 'stdout',
 
-  logUrl: computed('allocation.id', 'allocation.node.httpAddr', 'useServer', function() {
+  logUrl: computed('allocation.{id,node.httpAddr}', 'useServer', function() {
     const address = this.get('allocation.node.httpAddr');
     const allocation = this.get('allocation.id');
 

ui/app/components/task-row.js

@@ -19,7 +19,9 @@ export default Component.extend({
   // Internal state
   statsError: false,
 
-  enablePolling: computed(() => !Ember.testing),
+  enablePolling: computed(function() {
+    return !Ember.testing;
+  }),
 
   // Since all tasks for an allocation share the same tracker, use the registry
   stats: computed('task', 'task.isRunning', function() {

ui/app/controllers/allocations/allocation/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-observers */
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { computed, observer } from '@ember/object';

ui/app/controllers/allocations/allocation/task/index.js

@@ -15,7 +15,7 @@ export default Controller.extend({
   }),
 
   network: alias('model.resources.networks.firstObject'),
-  ports: computed('network.reservedPorts.[]', 'network.dynamicPorts.[]', function() {
+  ports: computed('network.{reservedPorts.[],dynamicPorts.[]}', function() {
     return (this.get('network.reservedPorts') || [])
       .map(port => ({
         name: port.Label,

ui/app/controllers/application.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-observers */
 import { inject as service } from '@ember/service';
 import Controller from '@ember/controller';
 import { run } from '@ember/runloop';