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.

ui/app/controllers/jobs/job/task-group.js

@@ -60,7 +60,7 @@ export default class TaskGroupController extends Controller.extend(
   })
   sortedScaleEvents;
 
-  @computed('sortedScaleEvents.@each.{hasCount}', function() {
+  @computed('sortedScaleEvents.@each.hasCount', function() {
     const countEventsCount = this.sortedScaleEvents.filterBy('hasCount').length;
     return countEventsCount > 1 && countEventsCount >= this.sortedScaleEvents.length / 2;
   })

ui/app/controllers/optimize.js

@@ -138,6 +138,10 @@ export default class OptimizeController extends Controller {
     return this.summarySearch.listSearched.filter(summary => {
       const job = summary.get('job');
 
+      if (job.isDestroying) {
+        return false;
+      }
+
       if (
         shouldShowNamespaces &&
         !this.includeAllNamespaces &&

ui/app/controllers/topology.js

@@ -42,7 +42,7 @@ export default class TopologyControllers extends Controller {
     return reduceToLargestUnit(this.totalMemory)[0].toFixed(2);
   }
 
-  @computed('totalCPU')
+  @computed('totalMemory')
   get totalMemoryUnits() {
     return reduceToLargestUnit(this.totalMemory)[1];
   }
@@ -72,7 +72,7 @@ export default class TopologyControllers extends Controller {
     return this.totalReservedCPU / this.totalCPU;
   }
 
-  @computed('activeAllocation', 'scheduledAllocations.@each.{taskGroupName,job}')
+  @computed('activeAllocation.taskGroupName', 'scheduledAllocations.@each.{job,taskGroupName}')
   get siblingAllocations() {
     if (!this.activeAllocation) return [];
     const taskGroup = this.activeAllocation.taskGroupName;

ui/app/mixins/searchable.js

@@ -50,7 +50,7 @@ export default Mixin.create({
     }
   },
 
-  fuse: computed('listToSearch.[]', 'fuzzySearchProps.[]', function() {
+  fuse: computed('fuzzySearchProps.[]', 'includeFuzzySearchMatches', 'listToSearch.[]', function() {
     return new Fuse(this.listToSearch, {
       shouldSort: true,
       threshold: 0.4,
@@ -69,14 +69,16 @@ export default Mixin.create({
   }),
 
   listSearched: computed(
-    'searchTerm',
-    'listToSearch.[]',
     'exactMatchEnabled',
-    'fuzzySearchEnabled',
-    'regexEnabled',
     'exactMatchSearchProps.[]',
+    'fuse',
+    'fuzzySearchEnabled',
     'fuzzySearchProps.[]',
+    'includeFuzzySearchMatches',
+    'listToSearch.[]',
+    'regexEnabled',
     'regexSearchProps.[]',
+    'searchTerm',
     function() {
       const searchTerm = this.searchTerm.trim();
 

ui/app/mixins/sortable-factory.js

@@ -34,9 +34,10 @@ export default function sortableFactory(properties, fromSortableMixin) {
 
     listSorted: computed(
       ...eachProperties,
+      '_sortableFactoryWarningPrinted',
       'listToSort.[]',
-      'sortProperty',
       'sortDescending',
+      'sortProperty',
       function() {
         if (!this._sortableFactoryWarningPrinted && !Ember.testing) {
           let message =

ui/app/models/agent.js

@@ -1,7 +1,7 @@
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
 import classic from 'ember-classic-decorator';
 
 @classic
@@ -23,7 +23,7 @@ export default class Agent extends Model {
     return address && rpcPort && `${address}:${rpcPort}`;
   }
 
-  @computed('system.leader.rpcAddr')
+  @computed('rpcAddr', 'system.leader.rpcAddr')
   get isLeader() {
     return this.get('system.leader.rpcAddr') === this.rpcAddr;
   }

ui/app/models/allocation.js

@@ -1,9 +1,8 @@
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
 import { equal, none } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo, hasMany } from '@ember-data/model';
 import { fragment, fragmentArray } from 'ember-data-model-fragments/attributes';
 import intersection from 'lodash.intersection';
 import shortUUIDProperty from '../utils/properties/short-uuid';
@@ -120,7 +119,7 @@ export default class Allocation extends Model {
     return this.get('rescheduleEvents.length') > 0 || this.nextAllocation;
   }
 
-  @computed('nextAllocation', 'clientStatus', 'followUpEvaluation.content')
+  @computed('clientStatus', 'followUpEvaluation.content', 'nextAllocation.content')
   get hasStoppedRescheduling() {
     return (
       !this.get('nextAllocation.content') &&

ui/app/models/deployment.js

@@ -1,9 +1,8 @@
 import { alias, equal } from '@ember/object/computed';
 import { computed } from '@ember/object';
 import { assert } from '@ember/debug';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo, hasMany } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 import sumAggregation from '../utils/properties/sum-aggregation';
@@ -19,7 +18,7 @@ export default class Deployment extends Model {
 
   // If any task group is not promoted yet requires promotion and the deployment
   // is still running, the deployment needs promotion.
-  @computed('taskGroupSummaries.@each.promoted')
+  @computed('status', 'taskGroupSummaries.@each.promoted')
   get requiresPromotion() {
     return (
       this.status === 'running' &&

ui/app/models/drain-strategy.js

@@ -1,5 +1,5 @@
 import { lt, equal } from '@ember/object/computed';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import classic from 'ember-classic-decorator';
 

ui/app/models/evaluation.js

@@ -1,7 +1,6 @@
 import { bool, equal } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 

ui/app/models/group-scaling.js

@@ -1,5 +1,5 @@
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 import classic from 'ember-classic-decorator';
 

ui/app/models/host-volume.js

@@ -1,5 +1,5 @@
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class HostVolume extends Fragment {

ui/app/models/job-plan.js

@@ -1,7 +1,7 @@
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
-import { hasMany } from 'ember-data/relationships';
+import { hasMany } from '@ember-data/model';
 
 export default class JobPlan extends Model {
   @attr() diff;

ui/app/models/job-scale.js

@@ -1,5 +1,5 @@
-import Model from 'ember-data/model';
-import { belongsTo } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { belongsTo } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import classic from 'ember-classic-decorator';
 

ui/app/models/job-summary.js

@@ -1,7 +1,6 @@
 import { collect, sum } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import sumAggregation from '../utils/properties/sum-aggregation';
 import classic from 'ember-classic-decorator';

ui/app/models/job-version.js

@@ -1,6 +1,5 @@
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo } from '@ember-data/model';
 
 export default class JobVersion extends Model {
   @belongsTo('job') job;

ui/app/models/job.js

@@ -1,8 +1,7 @@
 import { alias, equal, or, and, mapBy } from '@ember/object/computed';
 import { computed } from '@ember/object';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo, hasMany } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import RSVP from 'rsvp';
 import { assert } from '@ember/debug';
@@ -43,7 +42,7 @@ export default class Job extends Model {
   @hasMany('job', { inverse: 'parent' }) children;
 
   // The parent job name is prepended to child launch job names
-  @computed('name', 'parent')
+  @computed('name', 'parent.content')
   get trimmedName() {
     return this.get('parent.content') ? this.name.replace(/.+?\//, '') : this.name;
   }
@@ -139,7 +138,7 @@ export default class Job extends Model {
 
   // Getting all unhealthy drivers for a job can be incredibly expensive if the job
   // has many allocations. This can lead to making an API request for many nodes.
-  @computed('allocationsUnhealthyDrivers.[]')
+  @computed('allocations', 'allocationsUnhealthyDrivers.[]')
   get unhealthyDrivers() {
     return this.allocations
       .mapBy('unhealthyDrivers')

ui/app/models/lifecycle.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 

ui/app/models/namespace.js

@@ -1,6 +1,6 @@
 import { readOnly } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
 
 export default class Namespace extends Model {
   @readOnly('id') name;

ui/app/models/network.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { array } from 'ember-data-model-fragments/attributes';
 

ui/app/models/node-attributes.js

@@ -1,5 +1,5 @@
 import { get, computed } from '@ember/object';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import flat from 'flat';
 

ui/app/models/node-driver.js

@@ -1,7 +1,7 @@
 import classic from 'ember-classic-decorator';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { get, computed } from '@ember/object';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 import { fragment } from 'ember-data-model-fragments/attributes';
 

ui/app/models/node-event.js

@@ -1,6 +1,6 @@
 import { alias } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class NodeEvent extends Fragment {

ui/app/models/node.js

@@ -1,8 +1,8 @@
 import { computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
+import { hasMany } from '@ember-data/model';
 import { fragment, fragmentArray } from 'ember-data-model-fragments/attributes';
 import RSVP from 'rsvp';
 import shortUUIDProperty from '../utils/properties/short-uuid';

ui/app/models/placement-failure.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 
 export default class PlacementFailure extends Fragment {

ui/app/models/plugin.js

@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 
 export default class Plugin extends Model {

ui/app/models/policy.js

@@ -1,5 +1,5 @@
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
 
 export default class Policy extends Model {
   @attr('string') name;

ui/app/models/port.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 
 export default class Port extends Fragment {

ui/app/models/recommendation-summary.js

@@ -1,6 +1,5 @@
-import Model from 'ember-data/model';
-import { attr } from '@ember-data/model';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo, hasMany } from '@ember-data/model';
 import { get } from '@ember/object';
 import { action } from '@ember/object';
 

ui/app/models/recommendation.js

@@ -1,6 +1,5 @@
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo } from '@ember-data/model';
 import { get } from '@ember/object';
 
 export default class Recommendation extends Model {

ui/app/models/reschedule-event.js

@@ -1,5 +1,5 @@
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 

ui/app/models/resources.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 

ui/app/models/scale-event.js

@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class ScaleEvent extends Fragment {

ui/app/models/service.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragment } from 'ember-data-model-fragments/attributes';
 

ui/app/models/sidecar-proxy-upstream.js

@@ -1,5 +1,5 @@
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 
 export default class SidecarProxyUpstream extends Fragment {
   @attr('string') destinationName;

ui/app/models/storage-controller.js

@@ -1,5 +1,4 @@
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import { attr, belongsTo } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 

ui/app/models/storage-node.js

@@ -1,5 +1,4 @@
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
+import { attr, belongsTo } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 

ui/app/models/task-event.js

@@ -1,5 +1,5 @@
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class TaskEvent extends Fragment {

ui/app/models/task-group-deployment-summary.js

@@ -1,6 +1,6 @@
 import { gt, alias } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class TaskGroupDeploymentSummary extends Fragment {

ui/app/models/task-group-scale.js

@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner, fragmentArray } from 'ember-data-model-fragments/attributes';
 
 export default class TaskGroupScale extends Fragment {
@@ -16,8 +16,6 @@ export default class TaskGroupScale extends Fragment {
 
   @fragmentArray('scale-event') events;
 
-  @computed('events.length', function() {
-    return this.events.length;
-  })
+  @computed.reads('events.length')
   isVisible;
 }

ui/app/models/task-group-summary.js

@@ -1,6 +1,6 @@
 import { sum, collect } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
 export default class TaskGroupSummary extends Fragment {

ui/app/models/task-group.js

@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragmentOwner, fragmentArray, fragment } from 'ember-data-model-fragments/attributes';
 import sumAggregation from '../utils/properties/sum-aggregation';
 import classic from 'ember-classic-decorator';
@@ -27,7 +27,7 @@ export default class TaskGroup extends Fragment {
     return this.tasks.mapBy('driver').uniq();
   }
 
-  @computed('job.allocations.@each.taskGroup')
+  @computed('job.allocations.@each.taskGroup', 'name')
   get allocations() {
     return maybe(this.get('job.allocations')).filterBy('taskGroupName', this.name);
   }
@@ -38,7 +38,7 @@ export default class TaskGroup extends Fragment {
 
   @attr('number') reservedEphemeralDisk;
 
-  @computed('job.latestFailureEvaluation.failedTGAllocs.[]')
+  @computed('job.latestFailureEvaluation.failedTGAllocs.[]', 'name')
   get placementFailures() {
     const placementFailures = this.get('job.latestFailureEvaluation.failedTGAllocs');
     return placementFailures && placementFailures.findBy('name', this.name);
@@ -49,12 +49,12 @@ export default class TaskGroup extends Fragment {
     return this.get('summary.queuedAllocs') + this.get('summary.startingAllocs');
   }
 
-  @computed('job.taskGroupSummaries.[]')
+  @computed('job.taskGroupSummaries.[]', 'name')
   get summary() {
     return maybe(this.get('job.taskGroupSummaries')).findBy('name', this.name);
   }
 
-  @computed('job.scaleState.taskGroupScales.[]')
+  @computed('job.scaleState.taskGroupScales.[]', 'name')
   get scaleState() {
     return maybe(this.get('job.scaleState.taskGroupScales')).findBy('name', this.name);
   }

ui/app/models/task-state.js

@@ -1,7 +1,7 @@
 import { computed } from '@ember/object';
 import { alias, none, and } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import { fragment, fragmentOwner, fragmentArray } from 'ember-data-model-fragments/attributes';
 import classic from 'ember-classic-decorator';
 

ui/app/models/task.js

@@ -1,4 +1,4 @@
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragment, fragmentArray, fragmentOwner } from 'ember-data-model-fragments/attributes';
 import { computed } from '@ember/object';

ui/app/models/token.js

@@ -1,7 +1,7 @@
 import { alias } from '@ember/object/computed';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
+import { hasMany } from '@ember-data/model';
 
 export default class Token extends Model {
   @attr('string') secret;

ui/app/models/volume-definition.js

@@ -1,5 +1,5 @@
 import { alias, equal } from '@ember/object/computed';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 

ui/app/models/volume-mount.js

@@ -1,6 +1,6 @@
 import { computed } from '@ember/object';
 import { alias, equal } from '@ember/object/computed';
-import attr from 'ember-data/attr';
+import { attr } from '@ember-data/model';
 import Fragment from 'ember-data-model-fragments/fragment';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
@@ -9,7 +9,7 @@ export default class VolumeMount extends Fragment {
 
   @attr('string') volume;
 
-  @computed('task.taskGroup.volumes.@each.name')
+  @computed('task.taskGroup.volumes.@each.name', 'volume')
   get volumeDeclaration() {
     return this.task.taskGroup.volumes.findBy('name', this.volume);
   }

ui/app/models/volume.js

@@ -1,7 +1,6 @@
 import { computed } from '@ember/object';
-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo, hasMany } from 'ember-data/relationships';
+import Model from '@ember-data/model';
+import { attr, belongsTo, hasMany } from '@ember-data/model';
 
 export default class Volume extends Model {
   @attr('string') plainId;

ui/app/router.js

@@ -1,5 +1,5 @@
 import EmberRouter from '@ember/routing/router';
-import config from './config/environment';
+import config from 'nomad-ui/config/environment';
 
 export default class Router extends EmberRouter {
   location = config.locationType;

ui/app/serializers/application.js

@@ -1,7 +1,7 @@
 import { copy } from 'ember-copy';
 import { get } from '@ember/object';
 import { makeArray } from '@ember/array';
-import JSONSerializer from 'ember-data/serializers/json';
+import JSONSerializer from '@ember-data/serializer/json';
 import { pluralize, singularize } from 'ember-inflector';
 import removeRecord from '../utils/remove-record';
 import { assign } from '@ember/polyfills';

ui/app/services/system.js

@@ -87,7 +87,6 @@ export default class SystemService extends Service {
       // the return value is consistent with what is persisted.
       const strValue = value + '';
       window.localStorage.nomadActiveRegion = strValue;
-      return strValue;
     }
   }
 
@@ -135,10 +134,8 @@ export default class SystemService extends Service {
       return;
     } else if (typeof value === 'string') {
       window.localStorage.nomadActiveNamespace = value;
-      return this.namespaces.findBy('id', value);
     } else {
       window.localStorage.nomadActiveNamespace = value.get('name');
-      return value;
     }
   }
 

ui/app/services/token.js

@@ -26,8 +26,6 @@ export default class TokenService extends Service {
     } else {
       window.localStorage.nomadTokenSecret = value;
     }
-
-    return value;
   }
 
   @task(function*() {

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

@@ -1,4 +1,4 @@
-{{title this.pathWithLeadingSlash " -  Allocation " this.allocation.shortId " filesystem"}}
+{{page-title this.pathWithLeadingSlash " -  Allocation " this.allocation.shortId " filesystem"}}
 <AllocationSubnav @allocation={{this.allocation}} />
 <Fs::Browser
   @model={{this.allocation}}

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

@@ -1,4 +1,4 @@
-{{title "Allocation " this.model.name}}
+{{page-title "Allocation " this.model.name}}
 <AllocationSubnav @allocation={{this.model}} />
 <section class="section">
   {{#if this.error}}

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

@@ -1,4 +1,4 @@
-{{title this.pathWithLeadingSlash " -  Task " this.taskState.name " filesystem"}}
+{{page-title this.pathWithLeadingSlash " -  Task " this.taskState.name " filesystem"}}
 <TaskSubnav @task={{this.taskState}} />
 <Fs::Browser
   @model={{this.taskState}}

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

@@ -1,4 +1,4 @@
-{{title "Task " this.model.name}}
+{{page-title "Task " this.model.name}}
 <TaskSubnav @task={{this.model}} />
 <section class="section">
   {{#if this.error}}

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

@@ -1,4 +1,4 @@
-{{title "Task " this.model.name " logs"}}
+{{page-title "Task " this.model.name " logs"}}
 <TaskSubnav @task={{this.model}} />
 <section class="section is-full-width">
   <TaskLog data-test-task-log @allocation={{this.model.allocation}} @task={{this.model.name}} />

ui/app/templates/application.hbs

@@ -1,5 +1,4 @@
-<HeadLayout />
-{{title (if this.system.shouldShowRegions (concat this.system.activeRegion " - ")) "Nomad" separator=" - "}}
+{{page-title (if this.system.shouldShowRegions (concat this.system.activeRegion " - ")) "Nomad" separator=" - "}}
 <SvgPatterns />
 {{#unless this.error}}
   {{outlet}}

ui/app/templates/clients/client/index.hbs

@@ -1,4 +1,4 @@
-{{title "Client " (or this.model.name this.model.shortId)}}
+{{page-title "Client " (or this.model.name this.model.shortId)}}
 <ClientSubnav @client={{this.model}} />
 <section class="section">
   {{#if this.eligibilityError}}

ui/app/templates/clients/client/monitor.hbs

@@ -1,4 +1,4 @@
-{{title "Client " (or this.model.name this.model.shortId)}}
+{{page-title "Client " (or this.model.name this.model.shortId)}}
 <ClientSubnav @client={{this.model}} />
 <section class="section is-full-width">
   {{#if (can "read agent")}}

ui/app/templates/clients/index.hbs

@@ -1,4 +1,4 @@
-{{title "Clients"}}
+{{page-title "Clients"}}
 <section class="section">
   {{#if this.isForbidden}}
     <ForbiddenMessage />

ui/app/templates/components/multi-select-dropdown.hbs

@@ -28,7 +28,7 @@
               <input
                 type="checkbox"
                 tabindex="-1"
-                checked={{contains option.key this.selection}}
+                checked={{includes option.key this.selection}}
                 role="option"
                 onchange={{action "toggle" option}}
               />

ui/app/templates/csi/plugins/index.hbs

@@ -1,4 +1,4 @@
-{{title "CSI Plugins"}}
+{{page-title "CSI Plugins"}}
 <div class="tabs is-subnav">
   <ul>
     <li data-test-tab="volumes"><LinkTo @route="csi.volumes.index" @activeClass="is-active">Volumes</LinkTo></li>

ui/app/templates/csi/plugins/plugin/allocations.hbs

@@ -1,4 +1,4 @@
-{{title "CSI Plugin " this.model.plainId " allocations"}}
+{{page-title "CSI Plugin " this.model.plainId " allocations"}}
 <div data-test-subnav="plugins" class="tabs is-subnav">
   <ul>
     <li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{this.model}} @activeClass="is-active">Overview</LinkTo></li>

ui/app/templates/csi/plugins/plugin/index.hbs

@@ -1,4 +1,4 @@
-{{title "CSI Plugin " this.model.plainId}}
+{{page-title "CSI Plugin " this.model.plainId}}
 <div data-test-subnav="plugins" class="tabs is-subnav">
   <ul>
     <li data-test-tab="overview"><LinkTo @route="csi.plugins.plugin.index" @model={{this.model}} @activeClass="is-active">Overview</LinkTo></li>

ui/app/templates/csi/volumes/index.hbs

@@ -1,4 +1,4 @@
-{{title "CSI Volumes"}}
+{{page-title "CSI Volumes"}}
 <div class="tabs is-subnav">
   <ul>
     <li data-test-tab="volumes"><LinkTo @route="csi.volumes.index" @activeClass="is-active">Volumes</LinkTo></li>

ui/app/templates/csi/volumes/volume.hbs

@@ -1,4 +1,4 @@
-{{title "CSI Volume " this.model.name}}
+{{page-title "CSI Volume " this.model.name}}
 <section class="section with-headspace">
   <h1 class="title" data-test-title>{{this.model.name}}</h1>
 

ui/app/templates/exec-loading.hbs

@@ -1,4 +1,4 @@
-{{title "Exec"}}
+{{page-title "Exec"}}
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">

ui/app/templates/exec.hbs

@@ -1,4 +1,4 @@
-{{title "Exec"}}
+{{page-title "Exec"}}
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">

ui/app/templates/head.hbs

@@ -1 +0,0 @@
-<title>{{this.model.title}}</title>

ui/app/templates/jobs/index.hbs

@@ -1,4 +1,4 @@
-{{title "Jobs"}}
+{{page-title "Jobs"}}
 <section class="section">
   {{#if this.isForbidden}}
     <ForbiddenMessage />

ui/app/templates/jobs/job/allocations.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.job.name " allocations"}}
+{{page-title "Job " this.job.name " allocations"}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
   {{#if this.allocations.length}}

ui/app/templates/jobs/job/definition.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.job.name " definition"}}
+{{page-title "Job " this.job.name " definition"}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
   {{#unless this.isEditing}}

ui/app/templates/jobs/job/deployments.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.job.name " deployments"}}
+{{page-title "Job " this.job.name " deployments"}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
   <JobDeploymentsStream @deployments={{this.model.deployments}} />

ui/app/templates/jobs/job/evaluations.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.job.name " evaluations"}}
+{{page-title "Job " this.job.name " evaluations"}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
   {{#if this.sortedEvaluations.length}}

ui/app/templates/jobs/job/index.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.model.name}}
+{{page-title "Job " this.model.name}}
 {{component (concat "job-page/" this.model.templateType)
   job=this.model
   sortProperty=this.sortProperty

ui/app/templates/jobs/job/task-group.hbs

@@ -1,4 +1,4 @@
-{{title "Task group " this.model.name " - Job " this.model.job.name}}
+{{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>

ui/app/templates/jobs/job/versions.hbs

@@ -1,4 +1,4 @@
-{{title "Job " this.job.name " versions"}}
+{{page-title "Job " this.job.name " versions"}}
 <JobSubnav @job={{this.job}} />
 <section class="section">
   <JobVersionsStream @versions={{this.model.versions}} @verbose={{true}} />