Update Ember/Ember CLI to 3.20 (#9641)

This doesn’t include Ember Data, as we are still back on 3.12.

Most changes are deprecation updates, linting fixes, and dependencies. It can
be read commit-by-commit, though many of them are mechanical and skimmable.
For the new linting exclusions, I’ve added them to the Tech Debt list.

The decrease in test count is because linting is no longer included in ember test.

There’s a new deprecation warning in the logs that can be fixed by updating Ember
Power Select but when I tried that it caused it to render incorrectly, so I decided to
ignore it for now and address it separately.

ui/.eslintrc.js

@@ -37,7 +37,8 @@ module.exports = {
     ],
     'ember/classic-decorator-hooks': 'error',
     'ember/classic-decorator-no-classic-methods': 'error',
-    'ember/no-jquery': 'error',
+    'ember/no-get': 'off',
+    'ember/no-mixins': 'off',
   },
   overrides: [
     // node files
@@ -60,13 +61,9 @@ module.exports = {
         node: true,
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-
-        // this can be removed once the following is fixed
-        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+      rules: {
         'node/no-unpublished-require': 'off'
-      }),
+      },
     },
     {
       files: [

ui/app/adapters/application.js

@@ -1,6 +1,6 @@
 import { inject as service } from '@ember/service';
-import { computed, get } from '@ember/object';
-import RESTAdapter from 'ember-data/adapters/rest';
+import { computed } from '@ember/object';
+import RESTAdapter from '@ember-data/adapter/rest';
 import codesForError from '../utils/codes-for-error';
 import removeRecord from '../utils/remove-record';
 import { default as NoLeaderError, NO_LEADER } from '../utils/no-leader-error';
@@ -92,7 +92,7 @@ export default class ApplicationAdapter extends RESTAdapter {
   urlForFindRecord(id, modelName) {
     let path;
     let url = [];
-    let host = get(this, 'host');
+    let host = this.host;
     let prefix = this.urlPrefix();
 
     if (modelName) {

ui/app/app.js

@@ -1,7 +1,7 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'nomad-ui/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

ui/app/components/agent-monitor.js

@@ -23,7 +23,7 @@ export default class AgentMonitor extends Component {
   isStreaming = true;
   logger = null;
 
-  @computed('level', 'client.id', 'server.id')
+  @computed('client.id', 'level', 'server.{id,region}')
   get monitorParams() {
     assert(
       'Provide a client OR a server to AgentMonitor, not both.',

ui/app/components/das/dismissed.hbs

@@ -15,7 +15,7 @@
         data-test-understood
         class='button is-info'
         type='button'
-        {{@on 'click' this.understoodClicked}}
+        {{on 'click' this.understoodClicked}}
       >Understood</button>
       <label>
         <input

ui/app/components/das/error.hbs

@@ -16,7 +16,7 @@
       data-test-dismiss
       class='button is-light'
       type='button'
-      {{@on 'click' this.dismissClicked}}
+      {{on 'click' this.dismissClicked}}
     >Okay</button>
   </section>
 </section>

ui/app/components/das/recommendation-card.hbs

@@ -131,7 +131,7 @@
               @currentValue={{recommendation.currentValue}}
               @recommendedValue={{recommendation.value}}
               @stats={{recommendation.stats}}
-              @disabled={{contains recommendation @summary.excludedRecommendations}}
+              @disabled={{includes recommendation @summary.excludedRecommendations}}
             />
           </li>
         {{/each}}

ui/app/components/exec/task-group-parent.js

@@ -12,7 +12,7 @@ export default class TaskGroupParent extends Component {
 
   @or('clickedOpen', 'currentRouteIsThisTaskGroup') isOpen;
 
-  @computed('router.currentRoute')
+  @computed('router.currentRoute', 'taskGroup.{job.name,name}')
   get currentRouteIsThisTaskGroup() {
     const route = this.router.currentRoute;
 
@@ -48,10 +48,10 @@ export default class TaskGroupParent extends Component {
   @mapBy('activeTasks', 'taskGroup') activeTaskGroups;
 
   @computed(
-    'taskGroup.name',
+    'activeTaskGroups.@each.name',
     'activeTaskStates.@each.name',
     'activeTasks.@each.name',
-    'activeTaskGroups.@each.name'
+    'taskGroup.{name,tasks}'
   )
   get tasksWithRunningStates() {
     const activeTaskStateNames = this.activeTaskStates

ui/app/components/fs/browser.js

@@ -9,7 +9,7 @@ import classic from 'ember-classic-decorator';
 export default class Browser extends Component {
   model = null;
 
-  @computed('model')
+  @computed('model.allocation')
   get allocation() {
     if (this.model.allocation) {
       return this.model.allocation;
@@ -18,7 +18,7 @@ export default class Browser extends Component {
     }
   }
 
-  @computed('model')
+  @computed('model.allocation')
   get taskState() {
     if (this.model.allocation) {
       return this.model;
@@ -39,7 +39,7 @@ export default class Browser extends Component {
   @filterBy('directoryEntries', 'IsDir') directories;
   @filterBy('directoryEntries', 'IsDir', false) files;
 
-  @computed('directoryEntries.[]', 'sortProperty', 'sortDescending')
+  @computed('directories', 'directoryEntries.[]', 'files', 'sortDescending', 'sortProperty')
   get sortedDirectoryEntries() {
     const sortProperty = this.sortProperty;
 

ui/app/components/fs/directory-entry.js

@@ -12,7 +12,7 @@ export default class DirectoryEntry extends Component {
 
   @computed('path', 'entry.Name')
   get pathToEntry() {
-    const pathWithNoLeadingSlash = this.get('path').replace(/^\//, '');
+    const pathWithNoLeadingSlash = this.path.replace(/^\//, '');
     const name = encodeURIComponent(this.get('entry.Name'));
 
     if (isEmpty(pathWithNoLeadingSlash)) {

ui/app/components/fs/file.js

@@ -58,7 +58,7 @@ export default class File extends Component {
     return `/v1/client/fs/cat/${this.allocation.id}?path=${encodedPath}`;
   }
 
-  @computed('catUrlWithoutRegion')
+  @computed('catUrlWithoutRegion', 'system.{activeRegion,shouldIncludeRegion}')
   get catUrl() {
     let apiPath = this.catUrlWithoutRegion;
     if (this.system.shouldIncludeRegion) {
@@ -89,7 +89,7 @@ export default class File extends Component {
     return this.useServer ? url : `//${address}${url}`;
   }
 
-  @computed('taskState.name', 'file', 'mode')
+  @computed('file', 'mode', 'stat.Size', 'taskState.name')
   get fileParams() {
     // The Log class handles encoding query params
     const taskUrlPrefix = this.taskState ? `${this.taskState.name}/` : '';
@@ -107,7 +107,7 @@ export default class File extends Component {
     }
   }
 
-  @computed('fileUrl', 'fileParams', 'mode')
+  @computed('clientTimeout', 'fileParams', 'fileUrl', 'mode', 'serverTimeout', 'useServer')
   get logger() {
     // The cat and readat APIs are in plainText while the stream API is always encoded.
     const plainText = this.mode === 'head' || this.mode === 'tail';

ui/app/components/global-search/match.js

@@ -12,7 +12,7 @@ export default class GlobalSearchMatch extends Component {
     return get(this, 'match.name') || '';
   }
 
-  @computed('label', 'firstMatch.indices.[]')
+  @computed('firstMatch.indices.[]', 'label.length')
   get substrings() {
     const indices = get(this, 'firstMatch.indices');
     const labelLength = this.label.length;

ui/app/components/job-editor.js

@@ -17,7 +17,7 @@ export default class JobEditor extends Component {
   job = null;
   onSubmit() {}
 
-  @computed
+  @computed('_context')
   get context() {
     return this._context;
   }
@@ -28,7 +28,6 @@ export default class JobEditor extends Component {
     assert(`context must be one of: ${allowedValues.join(', ')}`, allowedValues.includes(value));
 
     this.set('_context', value);
-    return value;
   }
 
   _context = null;

ui/app/components/line-chart.js

@@ -85,7 +85,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
 
   activeDatum = null;
 
-  @computed('activeDatum')
+  @computed('activeDatum', 'timeseries', 'xProp')
   get activeDatumLabel() {
     const datum = this.activeDatum;
 
@@ -95,7 +95,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
     return this.xFormat(this.timeseries)(x);
   }
 
-  @computed('activeDatum')
+  @computed('activeDatum', 'yProp')
   get activeDatumValue() {
     const datum = this.activeDatum;
 
@@ -180,7 +180,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
       .domain([0, max]);
   }
 
-  @computed('xScale')
+  @computed('timeseries', 'xScale')
   get xAxis() {
     const formatter = this.xFormat(this.timeseries);
 
@@ -191,7 +191,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
       .tickFormat(formatter);
   }
 
-  @computed('xAxisOffset')
+  @computed('xAxisOffset', 'yScale')
   get yTicks() {
     const height = this.xAxisOffset;
     const tickCount = Math.ceil(height / 120) * 2 + 1;
@@ -200,7 +200,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
     return domain[1] - domain[0] > 1 ? nice(ticks) : ticks;
   }
 
-  @computed('yScale')
+  @computed('yScale', 'yTicks')
   get yAxis() {
     const formatter = this.yFormat();
 
@@ -211,7 +211,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
       .tickFormat(formatter);
   }
 
-  @computed('yScale')
+  @computed('yAxisOffset', 'yScale', 'yTicks')
   get yGridlines() {
     // The first gridline overlaps the x-axis, so remove it
     const [, ...ticks] = this.yTicks;
@@ -224,7 +224,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
       .tickFormat('');
   }
 
-  @computed()
+  @computed('element')
   get xAxisHeight() {
     // Avoid divide by zero errors by always having a height
     if (!this.element) return 1;
@@ -233,7 +233,7 @@ export default class LineChart extends Component.extend(WindowResizable) {
     return axis && axis.getBBox().height;
   }
 
-  @computed()
+  @computed('element')
   get yAxisWidth() {
     // Avoid divide by zero errors by always having a width
     if (!this.element) return 1;

ui/app/components/list-accordion.js

@@ -13,7 +13,7 @@ export default class ListAccordion extends Component {
   onToggle /* item, isOpen */() {}
   startExpanded = false;
 
-  @computed('source.[]')
+  @computed('key', 'source.[]', 'startExpanded', 'stateCache')
   get decoratedSource() {
     const stateCache = this.stateCache;
     const key = this.key;

ui/app/components/primary-metric.js

@@ -33,7 +33,7 @@ export default class PrimaryMetric extends Component {
     return resource && resource.constructor.modelName;
   }
 
-  @computed('resource', 'type')
+  @computed('resource.allocation', 'type')
   get trackedResource() {
     // TaskStates use the allocation stats tracker
     return this.type === 'task-state' ? this.get('resource.allocation') : this.resource;
@@ -49,7 +49,7 @@ export default class PrimaryMetric extends Component {
     return mappings[metric] || metric;
   }
 
-  @computed('resource', 'metric', 'type')
+  @computed('metric', 'resource.name', 'tracker.tasks', 'type')
   get data() {
     if (!this.tracker) return [];
 
@@ -63,7 +63,7 @@ export default class PrimaryMetric extends Component {
     return this.get(`tracker.${metric}`);
   }
 
-  @computed('resource', 'metric', 'type')
+  @computed('metric', 'resource.name', 'tracker.tasks', 'type')
   get reservedAmount() {
     const metricProperty = this.metric === 'cpu' ? 'reservedCPU' : 'reservedMemory';
 

ui/app/components/scale-events-chart.js

@@ -11,7 +11,7 @@ export default class ScaleEventsChart extends Component {
 
   activeEvent = null;
 
-  @computed('events.[]')
+  @computed('annotations', 'events.[]')
   get data() {
     const data = this.events.filterBy('hasCount').sortBy('time');
 

ui/app/components/server-agent-row.js

@@ -14,6 +14,7 @@ export default class ServerAgentRow extends Component {
   // TODO Switch back to the router service once the service behaves more like Route
   // https://github.com/emberjs/ember.js/issues/15801
   // router: inject.service('router'),
+  // eslint-disable-next-line ember/no-private-routing-service
   @service('-routing') _router;
   @alias('_router.router') router;
 

ui/app/components/task-row.js

@@ -27,7 +27,7 @@ export default class TaskRow extends Component {
   }
 
   // Since all tasks for an allocation share the same tracker, use the registry
-  @computed('task', 'task.isRunning')
+  @computed('task.{allocation,isRunning}')
   get stats() {
     if (!this.get('task.isRunning')) return undefined;
 

ui/app/controllers/clients/index.js

@@ -69,7 +69,7 @@ export default class IndexController extends Controller.extend(
   @selection('qpDatacenter') selectionDatacenter;
   @selection('qpVolume') selectionVolume;
 
-  @computed('nodes.[]')
+  @computed('nodes.[]', 'selectionClass')
   get optionsClass() {
     const classes = Array.from(new Set(this.nodes.mapBy('nodeClass')))
       .compact()
@@ -95,7 +95,7 @@ export default class IndexController extends Controller.extend(
     ];
   }
 
-  @computed('nodes.[]')
+  @computed('nodes.[]', 'selectionDatacenter')
   get optionsDatacenter() {
     const datacenters = Array.from(new Set(this.nodes.mapBy('datacenter'))).compact();
 
@@ -108,7 +108,7 @@ export default class IndexController extends Controller.extend(
     return datacenters.sort().map(dc => ({ key: dc, label: dc }));
   }
 
-  @computed('nodes.[]')
+  @computed('nodes.[]', 'selectionVolume')
   get optionsVolume() {
     const flatten = (acc, val) => acc.concat(val.toArray());
 

ui/app/controllers/csi/volumes/index.js

@@ -61,7 +61,7 @@ export default class IndexController extends Controller.extend(
   /**
     Visible volumes are those that match the selected namespace
   */
-  @computed('model.{[],@each.parent}')
+  @computed('model.@each.parent', 'system.{activeNamespace.id,namespaces.length}')
   get visibleVolumes() {
     if (!this.model) return [];
 

ui/app/controllers/jobs/index.js

@@ -93,7 +93,7 @@ export default class IndexController extends Controller.extend(Sortable, Searcha
     ];
   }
 
-  @computed('visibleJobs.[]')
+  @computed('selectionDatacenter', 'visibleJobs.[]')
   get optionsDatacenter() {
     const flatten = (acc, val) => acc.concat(val);
     const allDatacenters = new Set(this.visibleJobs.mapBy('datacenters').reduce(flatten, []));
@@ -111,7 +111,7 @@ export default class IndexController extends Controller.extend(Sortable, Searcha
     return availableDatacenters.sort().map(dc => ({ key: dc, label: dc }));
   }
 
-  @computed('visibleJobs.[]')
+  @computed('selectionPrefix', 'visibleJobs.[]')
   get optionsPrefix() {
     // A prefix is defined as the start of a job name up to the first - or .
     // ex: mktg-analytics -> mktg, ds.supermodel.classifier -> ds
@@ -154,7 +154,7 @@ export default class IndexController extends Controller.extend(Sortable, Searcha
     Visible jobs are those that match the selected namespace and aren't children
     of periodic or parameterized jobs.
   */
-  @computed('model.{[],@each.parent}')
+  @computed('model.@each.parent', 'system.{activeNamespace.id,namespaces.length}')
   get visibleJobs() {
     // Namespace related properties are ommitted from the dependent keys
     // due to a prop invalidation bug caused by region switching.