Merge pull request #3665 from hashicorp/f-ui-upgrade-deps

UI: Upgrade dependencies

.travis.yml

@@ -6,6 +6,9 @@ language: go
 go:
   -  1.9.x
 
+addons:
+  chrome: stable
+
 git:
   depth: 300
 
@@ -28,13 +31,11 @@ matrix:
     - os: osx
   fast_finish: true
 
-cache:
-  directories:
-    - ui/node_modules
-
 before_install:
   - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ -z "$SKIP_NOMAD_TESTS" ]]; then sudo -E bash ./scripts/travis-mac-priv.sh ; fi
   - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ -z "$SKIP_NOMAD_TESTS" ]]; then sudo -E bash ./scripts/travis-linux.sh ; fi
+  - if [[ "$RUN_UI_TESTS" ]]; then curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.0.1 ; fi
+  - if [[ "$RUN_UI_TESTS" ]]; then export PATH="$HOME/.yarn/bin:$PATH" ; fi
 
 install:
   - if [[ -z "$SKIP_NOMAD_TESTS" ]]; then make deps ; fi

GNUmakefile

@@ -283,8 +283,8 @@ static-assets: ## Compile the static routes to serve alongside the API
 .PHONY: test-ui
 test-ui: ## Run Nomad UI test suite
 	@echo "--> Installing JavaScript assets"
+	@cd ui && npm rebuild node-sass
 	@cd ui && yarn install
-	@cd ui && npm install phantomjs-prebuilt
 	@echo "--> Running ember tests"
 	@cd ui && phantomjs --version
 	@cd ui && npm test

ui/.nvmrc

@@ -1 +1 @@
-6
+8

ui/.prettierrc

@@ -0,0 +1,3 @@
+printWidth: 100
+singleQuote: true
+trailingComma: es5

ui/.travis.yml

@@ -1,21 +0,0 @@
----
-language: node_js
-node_js:
-  - "6"
-
-sudo: false
-
-cache:
-  directories:
-    - $HOME/.npm
-
-before_install:
-  - npm config set spin false
-  - npm install -g phantomjs-prebuilt
-  - phantomjs --version
-
-install:
-  - npm install
-
-script:
-  - npm test

ui/app/adapters/application.js

@@ -1,15 +1,14 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { computed, get } from '@ember/object';
 import RESTAdapter from 'ember-data/adapters/rest';
 import codesForError from '../utils/codes-for-error';
 
-const { get, computed, inject } = Ember;
-
 export const namespace = 'v1';
 
 export default RESTAdapter.extend({
   namespace,
 
-  token: inject.service(),
+  token: service(),
 
   headers: computed('token.secret', function() {
     const token = this.get('token.secret');

ui/app/adapters/job.js

@@ -1,10 +1,10 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import RSVP from 'rsvp';
+import { assign } from '@ember/polyfills';
 import ApplicationAdapter from './application';
 
-const { RSVP, inject, assign } = Ember;
-
 export default ApplicationAdapter.extend({
-  system: inject.service(),
+  system: service(),
 
   shouldReloadAll: () => true,
 

ui/app/adapters/token.js

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
 import { default as ApplicationAdapter, namespace } from './application';
 
-const { inject } = Ember;
-
 export default ApplicationAdapter.extend({
-  store: inject.service(),
+  store: service(),
 
   namespace: namespace + '/acl',
 

ui/app/app.js

@@ -1,16 +1,14 @@
-import Ember from 'ember';
+import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
 let App;
 
-Ember.MODEL_FACTORY_INJECTIONS = true;
-
-App = Ember.Application.extend({
+App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
-  Resolver
+  Resolver,
 });
 
 loadInitializers(App, config.modulePrefix);

ui/app/components/allocation-row.js

@@ -1,10 +1,10 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
 import { lazyClick } from '../helpers/lazy-click';
 
-const { Component, inject, run } = Ember;
-
 export default Component.extend({
-  store: inject.service(),
+  store: service(),
 
   tagName: 'tr',
 

ui/app/components/allocation-status-bar.js

@@ -1,8 +1,6 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
 import DistributionBar from './distribution-bar';
 
-const { computed } = Ember;
-
 export default DistributionBar.extend({
   layoutName: 'components/distribution-bar',
 

ui/app/components/attributes-section.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: '',

ui/app/components/client-node-row.js

@@ -1,8 +1,6 @@
-import Ember from 'ember';
+import Component from '@ember/component';
 import { lazyClick } from '../helpers/lazy-click';
 
-const { Component } = Ember;
-
 export default Component.extend({
   tagName: 'tr',
   classNames: ['client-node-row', 'is-interactive'],

ui/app/components/distribution-bar.js

@@ -1,10 +1,13 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { run } from '@ember/runloop';
+import { assign } from '@ember/polyfills';
+import { guidFor } from '@ember/object/internals';
 import d3 from 'npm:d3-selection';
 import 'npm:d3-transition';
 import WindowResizable from '../mixins/window-resizable';
 import styleStringProperty from '../utils/properties/style-string';
 
-const { Component, computed, run, assign, guidFor } = Ember;
 const sumAggregate = (total, val) => total + val;
 
 export default Component.extend(WindowResizable, {
@@ -96,7 +99,7 @@ export default Component.extend(WindowResizable, {
       });
 
     slices = slices.merge(slicesEnter);
-    slices.attr('class', d => d.className || `slice-${filteredData.indexOf(d)}`);
+    slices.attr('class', d => d.className || `slice-${_data.indexOf(d)}`);
 
     const setWidth = d => `${width * d.percent - (d.index === sliceCount - 1 || d.index === 0 ? 1 : 2)}px`
     const setOffset = d => `${width * d.offset + (d.index === 0 ? 0 : 1)}px`

ui/app/components/freestyle/sg-boxed-section.js

@@ -0,0 +1,27 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  variants: computed(() => [
+    {
+      key: 'Normal',
+      title: 'Normal',
+      slug: '',
+    },
+    {
+      key: 'Info',
+      title: 'Info',
+      slug: 'is-info',
+    },
+    {
+      key: 'Warning',
+      title: 'Warning',
+      slug: 'is-warning',
+    },
+    {
+      key: 'Danger',
+      title: 'Danger',
+      slug: 'is-danger',
+    },
+  ]),
+});

ui/app/components/freestyle/sg-colors.js

@@ -0,0 +1,97 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  nomadTheme: computed(() => [
+    {
+      name: 'Primary',
+      base: '#25ba81',
+    },
+    {
+      name: 'Primary Dark',
+      base: '#1d9467',
+    },
+    {
+      name: 'Text',
+      base: '#0a0a0a',
+    },
+    {
+      name: 'Link',
+      base: '#1563ff',
+    },
+    {
+      name: 'Gray',
+      base: '#bbc4d1',
+    },
+    {
+      name: 'Off-white',
+      base: '#f5f5f5',
+    },
+  ]),
+
+  productColors: computed(() => [
+    {
+      name: 'Consul Pink',
+      base: '#ff0087',
+    },
+    {
+      name: 'Consul Pink Dark',
+      base: '#c62a71',
+    },
+    {
+      name: 'Packer Blue',
+      base: '#1daeff',
+    },
+    {
+      name: 'Packer Blue Dark',
+      base: '#1d94dd',
+    },
+    {
+      name: 'Terraform Purple',
+      base: '#5c4ee5',
+    },
+    {
+      name: 'Terraform Purple Dark',
+      base: '#4040b2',
+    },
+    {
+      name: 'Vagrant Blue',
+      base: '#1563ff',
+    },
+    {
+      name: 'Vagrant Blue Dark',
+      base: '#104eb2',
+    },
+    {
+      name: 'Nomad Green',
+      base: '#25ba81',
+    },
+    {
+      name: 'Nomad Green Dark',
+      base: '#1d9467',
+    },
+    {
+      name: 'Nomad Green Darker',
+      base: '#16704d',
+    },
+  ]),
+
+  emotiveColors: computed(() => [
+    {
+      name: 'Success',
+      base: '#23d160',
+    },
+    {
+      name: 'Warning',
+      base: '#fa8e23',
+    },
+    {
+      name: 'Danger',
+      base: '#c84034',
+    },
+    {
+      name: 'Info',
+      base: '#1563ff',
+    },
+  ]),
+});

ui/app/components/freestyle/sg-distribution-bar-jumbo.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  distributionBarData: computed(() => {
+    return [
+      { label: 'one', value: 10 },
+      { label: 'two', value: 20 },
+      { label: 'three', value: 0 },
+      { label: 'four', value: 35 },
+    ];
+  }),
+});

ui/app/components/freestyle/sg-distribution-bar.js

@@ -0,0 +1,43 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  timerTicks: 0,
+
+  startTimer: function() {
+    this.set(
+      'timer',
+      setInterval(() => {
+        this.incrementProperty('timerTicks');
+      }, 500)
+    );
+  }.on('init'),
+
+  willDestroy() {
+    clearInterval(this.get('timer'));
+  },
+
+  distributionBarData: computed(() => {
+    return [
+      { label: 'one', value: 10 },
+      { label: 'two', value: 20 },
+      { label: 'three', value: 30 },
+    ];
+  }),
+
+  distributionBarDataWithClasses: computed(() => {
+    return [
+      { label: 'Queued', value: 10, className: 'queued' },
+      { label: 'Complete', value: 20, className: 'complete' },
+      { label: 'Failed', value: 30, className: 'failed' },
+    ];
+  }),
+
+  distributionBarDataRotating: computed('timerTicks', () => {
+    return [
+      { label: 'one', value: Math.round(Math.random() * 50) },
+      { label: 'two', value: Math.round(Math.random() * 50) },
+      { label: 'three', value: Math.round(Math.random() * 50) },
+    ];
+  }),
+});

ui/app/components/gutter-menu.js

@@ -1,9 +1,9 @@
-import Ember from 'ember';
-
-const { Component, inject, computed } = Ember;
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
-  system: inject.service(),
+  system: service(),
 
   sortedNamespaces: computed('system.namespaces.@each.name', function() {
     const namespaces = this.get('system.namespaces').toArray() || [];

ui/app/components/job-deployment.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   classNames: ['job-deployment', 'boxed-section'],

ui/app/components/job-deployment/deployment-metrics.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: '',

ui/app/components/job-deployments-stream.js

@@ -1,17 +1,16 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 import moment from 'moment';
 
-const { Component, computed } = Ember;
-
 export default Component.extend({
   tagName: 'ol',
   classNames: ['timeline'],
 
   deployments: computed(() => []),
 
-  sortedDeployments: computed('deployments.@each.version.submitTime', function() {
+  sortedDeployments: computed('deployments.@each.versionSubmitTime', function() {
     return this.get('deployments')
-      .sortBy('version.submitTime')
+      .sortBy('versionSubmitTime')
       .reverse();
   }),
 

ui/app/components/job-diff-fields-and-objects.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: '',

ui/app/components/job-diff.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Component, computed } = Ember;
+import { equal } from '@ember/object/computed';
+import Component from '@ember/component';
 
 export default Component.extend({
   classNames: ['job-diff'],
@@ -10,7 +9,7 @@ export default Component.extend({
 
   verbose: true,
 
-  isEdited: computed.equal('diff.Type', 'Edited'),
-  isAdded: computed.equal('diff.Type', 'Added'),
-  isDeleted: computed.equal('diff.Type', 'Deleted'),
+  isEdited: equal('diff.Type', 'Edited'),
+  isAdded: equal('diff.Type', 'Added'),
+  isDeleted: equal('diff.Type', 'Deleted'),
 });

ui/app/components/job-row.js

@@ -1,8 +1,6 @@
-import Ember from 'ember';
+import Component from '@ember/component';
 import { lazyClick } from '../helpers/lazy-click';
 
-const { Component } = Ember;
-
 export default Component.extend({
   tagName: 'tr',
   classNames: ['job-row', 'is-interactive'],

ui/app/components/job-version.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Component, computed } = Ember;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 const changeTypes = ['Added', 'Deleted', 'Edited'];
 

ui/app/components/job-versions-stream.js

@@ -1,8 +1,7 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 import moment from 'moment';
 
-const { Component, computed } = Ember;
-
 export default Component.extend({
   tagName: 'ol',
   classNames: ['timeline'],

ui/app/components/json-viewer.js

@@ -1,8 +1,8 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { run } from '@ember/runloop';
 import JSONFormatterPkg from 'npm:json-formatter-js';
 
-const { Component, computed, run } = Ember;
-
 // json-formatter-js is packaged in a funny way that ember-cli-browserify
 // doesn't unwrap properly.
 const { default: JSONFormatter } = JSONFormatterPkg;

ui/app/components/list-pagination.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Component, computed } = Ember;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   source: computed(() => []),
@@ -31,9 +30,11 @@ export default Component.extend({
     const lowerBound = Math.max(1, page - spread);
     const upperBound = Math.min(lastPage, page + spread) + 1;
 
-    return Array(upperBound - lowerBound).fill(null).map((_, index) => ({
-      pageNumber: lowerBound + index,
-    }));
+    return Array(upperBound - lowerBound)
+      .fill(null)
+      .map((_, index) => ({
+        pageNumber: lowerBound + index,
+      }));
   }),
 
   list: computed('source.[]', 'page', 'size', function() {

ui/app/components/list-pagination/list-pager.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: '',

ui/app/components/list-table.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Component, computed } = Ember;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   tagName: 'table',

ui/app/components/list-table/sort-by.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Component, computed } = Ember;
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 
 export default Component.extend({
   tagName: 'th',

ui/app/components/list-table/table-body.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: 'tbody',

ui/app/components/list-table/table-head.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Component } = Ember;
+import Component from '@ember/component';
 
 export default Component.extend({
   tagName: 'thead',

ui/app/components/search-box.js

@@ -1,13 +1,13 @@
-import Ember from 'ember';
-
-const { Component, computed, run } = Ember;
+import { reads } from '@ember/object/computed';
+import Component from '@ember/component';
+import { run } from '@ember/runloop';
 
 export default Component.extend({
   // Passed to the component (mutable)
   searchTerm: null,
 
   // Used as a debounce buffer
-  _searchTerm: computed.reads('searchTerm'),
+  _searchTerm: reads('searchTerm'),
 
   // Used to throttle sets to searchTerm
   debounce: 150,

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

@@ -1,13 +1,15 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { lazyClick } from '../helpers/lazy-click';
 
-const { Component, inject, computed } = Ember;
-
 export default Component.extend({
-  // TODO Switch back to the router service style when it is no longer feature-flagged
+  // 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'),
-  _router: inject.service('-routing'),
-  router: computed.alias('_router.router'),
+  _router: service('-routing'),
+  router: alias('_router.router'),
 
   tagName: 'tr',
   classNames: ['server-agent-row', 'is-interactive'],
@@ -15,7 +17,8 @@ export default Component.extend({
 
   agent: null,
   isActive: computed('agent', 'router.currentURL', function() {
-    // TODO Switch back to the router service style when it is no longer feature-flagged
+    // TODO Switch back to the router service once the service behaves more like Route
+    // https://github.com/emberjs/ember.js/issues/15801
     // const targetURL = this.get('router').urlFor('servers.server', this.get('agent'));
     // const currentURL = `${this.get('router.rootURL').slice(0, -1)}${this.get('router.currentURL')}`;
 

ui/app/components/task-group-row.js

@@ -1,8 +1,6 @@
-import Ember from 'ember';
+import Component from '@ember/component';
 import { lazyClick } from '../helpers/lazy-click';
 
-const { Component } = Ember;
-
 export default Component.extend({
   tagName: 'tr',
 

ui/app/components/task-log.js

@@ -1,12 +1,13 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { run } from '@ember/runloop';
 import { task } from 'ember-concurrency';
 import { logger } from 'nomad-ui/utils/classes/log';
 import WindowResizable from 'nomad-ui/mixins/window-resizable';
 
-const { Component, computed, inject, run } = Ember;
-
 export default Component.extend(WindowResizable, {
-  token: inject.service(),
+  token: service(),
 
   classNames: ['boxed-section', 'task-log'],
 

ui/app/controllers/allocations/allocation.js

@@ -1,5 +1,3 @@
-import Ember from 'ember';
-
-const { Controller } = Ember;
+import Controller from '@ember/controller';
 
 export default Controller.extend({});

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

@@ -1,8 +1,7 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller from '@ember/controller';
 import Sortable from 'nomad-ui/mixins/sortable';
 
-const { Controller, computed } = Ember;
-
 export default Controller.extend(Sortable, {
   queryParams: {
     sortProperty: 'sort',
@@ -12,6 +11,6 @@ export default Controller.extend(Sortable, {
   sortProperty: 'name',
   sortDescending: false,
 
-  listToSort: computed.alias('model.states'),
-  sortedStates: computed.alias('listSorted'),
+  listToSort: alias('model.states'),
+  sortedStates: alias('listSorted'),
 });

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

@@ -1,9 +1,9 @@
-import Ember from 'ember';
-
-const { Controller, computed } = Ember;
+import { alias } from '@ember/object/computed';
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
 
 export default Controller.extend({
-  network: computed.alias('model.resources.networks.firstObject'),
+  network: alias('model.resources.networks.firstObject'),
   ports: computed('network.reservedPorts.[]', 'network.dynamicPorts.[]', function() {
     return (this.get('network.reservedPorts') || [])
       .map(port => ({

ui/app/controllers/application.js

@@ -1,10 +1,12 @@
+import { inject as service } from '@ember/service';
+import Controller from '@ember/controller';
+import { run } from '@ember/runloop';
+import { observer, computed } from '@ember/object';
 import Ember from 'ember';
 import codesForError from '../utils/codes-for-error';
 
-const { Controller, computed, inject, run, observer } = Ember;
-
 export default Controller.extend({
-  config: inject.service(),
+  config: service(),
 
   error: null,
 
@@ -33,7 +35,7 @@ export default Controller.extend({
       run.next(() => {
         throw this.get('error');
       });
-    } else {
+    } else if (!Ember.testing) {
       run.next(() => {
         // eslint-disable-next-line
         console.warn('UNRECOVERABLE ERROR:', this.get('error'));

ui/app/controllers/clients.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Controller } = Ember;
+import Controller from '@ember/controller';
 
 export default Controller.extend({
   isForbidden: false,

ui/app/controllers/clients/client.js

@@ -1,9 +1,9 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 
-const { Controller, computed } = Ember;
-
 export default Controller.extend(Sortable, Searchable, {
   queryParams: {
     currentPage: 'page',
@@ -20,9 +20,9 @@ export default Controller.extend(Sortable, Searchable, {
 
   searchProps: computed(() => ['shortId', 'name']),
 
-  listToSort: computed.alias('model.allocations'),
-  listToSearch: computed.alias('listSorted'),
-  sortedAllocations: computed.alias('listSearched'),
+  listToSort: alias('model.allocations'),
+  listToSearch: alias('listSorted'),
+  sortedAllocations: alias('listSearched'),
 
   actions: {
     gotoAllocation(allocation) {

ui/app/controllers/clients/index.js

@@ -1,14 +1,14 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
+import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(Sortable, Searchable, {
-  clientsController: inject.controller('clients'),
+  clientsController: controller('clients'),
 
-  nodes: computed.alias('model.nodes'),
-  agents: computed.alias('model.agents'),
+  nodes: alias('model.nodes'),
+  agents: alias('model.agents'),
 
   queryParams: {
     currentPage: 'page',
@@ -25,11 +25,11 @@ export default Controller.extend(Sortable, Searchable, {
 
   searchProps: computed(() => ['id', 'name', 'datacenter']),
 
-  listToSort: computed.alias('nodes'),
-  listToSearch: computed.alias('listSorted'),
-  sortedNodes: computed.alias('listSearched'),
+  listToSort: alias('nodes'),
+  listToSearch: alias('listSorted'),
+  sortedNodes: alias('listSearched'),
 
-  isForbidden: computed.alias('clientsController.isForbidden'),
+  isForbidden: alias('clientsController.isForbidden'),
 
   actions: {
     gotoNode(node) {

ui/app/controllers/freestyle.js

@@ -1,47 +1,6 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
 import FreestyleController from 'ember-freestyle/controllers/freestyle';
 
-const { inject, computed } = Ember;
-
 export default FreestyleController.extend({
-  emberFreestyle: inject.service(),
-
-  timerTicks: 0,
-
-  startTimer: function() {
-    this.set(
-      'timer',
-      setInterval(() => {
-        this.incrementProperty('timerTicks');
-      }, 500)
-    );
-  }.on('init'),
-
-  stopTimer: function() {
-    clearInterval(this.get('timer'));
-  }.on('willDestroy'),
-
-  distributionBarData: computed(() => {
-    return [
-      { label: 'one', value: 10 },
-      { label: 'two', value: 20 },
-      { label: 'three', value: 30 },
-    ];
-  }),
-
-  distributionBarDataWithClasses: computed(() => {
-    return [
-      { label: 'Queued', value: 10, className: 'queued' },
-      { label: 'Complete', value: 20, className: 'complete' },
-      { label: 'Failed', value: 30, className: 'failed' },
-    ];
-  }),
-
-  distributionBarDataRotating: computed('timerTicks', () => {
-    return [
-      { label: 'one', value: Math.round(Math.random() * 50) },
-      { label: 'two', value: Math.round(Math.random() * 50) },
-      { label: 'three', value: Math.round(Math.random() * 50) },
-    ];
-  }),
+  emberFreestyle: service(),
 });

ui/app/controllers/jobs.js

@@ -1,9 +1,10 @@
-import Ember from 'ember';
-
-const { Controller, inject, observer, run } = Ember;
+import { inject as service } from '@ember/service';
+import Controller from '@ember/controller';
+import { observer } from '@ember/object';
+import { run } from '@ember/runloop';
 
 export default Controller.extend({
-  system: inject.service(),
+  system: service(),
 
   queryParams: {
     jobNamespace: 'namespace',

ui/app/controllers/jobs/index.js

@@ -1,18 +1,19 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { alias, filterBy } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
+import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(Sortable, Searchable, {
-  system: inject.service(),
-  jobsController: inject.controller('jobs'),
+  system: service(),
+  jobsController: controller('jobs'),
 
-  isForbidden: computed.alias('jobsController.isForbidden'),
+  isForbidden: alias('jobsController.isForbidden'),
 
-  pendingJobs: computed.filterBy('model', 'status', 'pending'),
-  runningJobs: computed.filterBy('model', 'status', 'running'),
-  deadJobs: computed.filterBy('model', 'status', 'dead'),
+  pendingJobs: filterBy('model', 'status', 'pending'),
+  runningJobs: filterBy('model', 'status', 'running'),
+  deadJobs: filterBy('model', 'status', 'dead'),
 
   queryParams: {
     currentPage: 'page',
@@ -42,9 +43,9 @@ export default Controller.extend(Sortable, Searchable, {
     }
   ),
 
-  listToSort: computed.alias('filteredJobs'),
-  listToSearch: computed.alias('listSorted'),
-  sortedJobs: computed.alias('listSearched'),
+  listToSort: alias('filteredJobs'),
+  listToSearch: alias('listSorted'),
+  sortedJobs: alias('listSearched'),
 
   isShowingDeploymentDetails: false,
 

ui/app/controllers/jobs/job.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Controller, computed } = Ember;
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
 
 export default Controller.extend({
   breadcrumbs: computed('model.{name,id}', function() {

ui/app/controllers/jobs/job/definition.js

@@ -1,12 +1,11 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(WithNamespaceResetting, {
-  jobController: inject.controller('jobs.job'),
+  jobController: controller('jobs.job'),
 
-  job: computed.alias('model.job'),
+  job: alias('model.job'),
 
-  breadcrumbs: computed.alias('jobController.breadcrumbs'),
+  breadcrumbs: alias('jobController.breadcrumbs'),
 });

ui/app/controllers/jobs/job/deployments.js

@@ -1,13 +1,12 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(WithNamespaceResetting, {
-  jobController: inject.controller('jobs.job'),
+  jobController: controller('jobs.job'),
 
-  job: computed.alias('model'),
-  deployments: computed.alias('model.deployments'),
+  job: alias('model'),
+  deployments: alias('model.deployments'),
 
-  breadcrumbs: computed.alias('jobController.breadcrumbs'),
+  breadcrumbs: alias('jobController.breadcrumbs'),
 });

ui/app/controllers/jobs/job/index.js

@@ -1,12 +1,13 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
+import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(Sortable, WithNamespaceResetting, {
-  system: inject.service(),
-  jobController: inject.controller('jobs.job'),
+  system: service(),
+  jobController: controller('jobs.job'),
 
   queryParams: {
     currentPage: 'page',
@@ -20,15 +21,15 @@ export default Controller.extend(Sortable, WithNamespaceResetting, {
   sortProperty: 'name',
   sortDescending: false,
 
-  breadcrumbs: computed.alias('jobController.breadcrumbs'),
-  job: computed.alias('model'),
+  breadcrumbs: alias('jobController.breadcrumbs'),
+  job: alias('model'),
 
   taskGroups: computed('model.taskGroups.[]', function() {
     return this.get('model.taskGroups') || [];
   }),
 
-  listToSort: computed.alias('taskGroups'),
-  sortedTaskGroups: computed.alias('listSorted'),
+  listToSort: alias('taskGroups'),
+  sortedTaskGroups: alias('listSorted'),
 
   sortedEvaluations: computed('model.evaluations.@each.modifyIndex', function() {
     return (this.get('model.evaluations') || []).sortBy('modifyIndex').reverse();

ui/app/controllers/jobs/job/loading.js

@@ -1,8 +1,7 @@
-import Ember from 'ember';
-
-const { Controller, computed, inject } = Ember;
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
 
 export default Controller.extend({
-  jobController: inject.controller('jobs.job'),
-  breadcrumbs: computed.alias('jobController.breadcrumbs'),
+  jobController: controller('jobs.job'),
+  breadcrumbs: alias('jobController.breadcrumbs'),
 });

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

@@ -1,12 +1,12 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
+import { computed } from '@ember/object';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
-  jobController: inject.controller('jobs.job'),
+  jobController: controller('jobs.job'),
 
   queryParams: {
     currentPage: 'page',
@@ -27,9 +27,9 @@ export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
     return this.get('model.allocations') || [];
   }),
 
-  listToSort: computed.alias('allocations'),
-  listToSearch: computed.alias('listSorted'),
-  sortedAllocations: computed.alias('listSearched'),
+  listToSort: alias('allocations'),
+  listToSearch: alias('listSorted'),
+  sortedAllocations: alias('listSearched'),
 
   breadcrumbs: computed('jobController.breadcrumbs.[]', 'model.{name}', function() {
     return this.get('jobController.breadcrumbs').concat([

ui/app/controllers/jobs/job/versions.js

@@ -1,13 +1,12 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-const { Controller, computed, inject } = Ember;
-
 export default Controller.extend(WithNamespaceResetting, {
-  jobController: inject.controller('jobs.job'),
+  jobController: controller('jobs.job'),
 
-  job: computed.alias('model'),
-  versions: computed.alias('model.versions'),
+  job: alias('model'),
+  versions: alias('model.versions'),
 
-  breadcrumbs: computed.alias('jobController.breadcrumbs'),
+  breadcrumbs: alias('jobController.breadcrumbs'),
 });

ui/app/controllers/servers.js

@@ -1,11 +1,10 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
+import Controller from '@ember/controller';
 import Sortable from 'nomad-ui/mixins/sortable';
 
-const { Controller, computed } = Ember;
-
 export default Controller.extend(Sortable, {
-  nodes: computed.alias('model.nodes'),
-  agents: computed.alias('model.agents'),
+  nodes: alias('model.nodes'),
+  agents: alias('model.agents'),
 
   queryParams: {
     currentPage: 'page',
@@ -21,6 +20,6 @@ export default Controller.extend(Sortable, {
 
   isForbidden: false,
 
-  listToSort: computed.alias('agents'),
-  sortedAgents: computed.alias('listSorted'),
+  listToSort: alias('agents'),
+  sortedAgents: alias('listSorted'),
 });

ui/app/controllers/servers/index.js

@@ -1,8 +1,7 @@
-import Ember from 'ember';
-
-const { Controller, computed, inject } = Ember;
+import { alias } from '@ember/object/computed';
+import Controller, { inject as controller } from '@ember/controller';
 
 export default Controller.extend({
-  serversController: inject.controller('servers'),
-  isForbidden: computed.alias('serversController.isForbidden'),
+  serversController: controller('servers'),
+  isForbidden: alias('serversController.isForbidden'),
 });

ui/app/controllers/servers/server.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Controller, computed } = Ember;
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
 
 export default Controller.extend({
   activeTab: 'tags',

ui/app/controllers/settings/tokens.js

@@ -1,12 +1,13 @@
-import Ember from 'ember';
-
-const { Controller, inject, computed, getOwner } = Ember;
+import { inject as service } from '@ember/service';
+import { reads } from '@ember/object/computed';
+import Controller from '@ember/controller';
+import { getOwner } from '@ember/application';
 
 export default Controller.extend({
-  token: inject.service(),
-  store: inject.service(),
+  token: service(),
+  store: service(),
 
-  secret: computed.reads('token.secret'),
+  secret: reads('token.secret'),
 
   tokenIsValid: false,
   tokenIsInvalid: false,

ui/app/helpers/css-class.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import { helper } from '@ember/component/helper';
 
 /**
  * CSS Class
@@ -12,4 +12,4 @@ export function cssClass([updateType]) {
   return updateType.replace(/\//g, '-').dasherize();
 }
 
-export default Ember.Helper.helper(cssClass);
+export default helper(cssClass);

ui/app/helpers/format-bytes.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Helper } = Ember;
+import Helper from '@ember/component/helper';
 
 const UNITS = ['Bytes', 'KiB', 'MiB'];
 

ui/app/helpers/format-percentage.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import { helper } from '@ember/component/helper';
 
 /**
  * Percentage Calculator
@@ -35,4 +35,4 @@ function safeNumber(value) {
   return isNaN(value) ? 0 : +value;
 }
 
-export default Ember.Helper.helper(formatPercentage);
+export default helper(formatPercentage);

ui/app/helpers/is-object.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Helper } = Ember;
+import Helper from '@ember/component/helper';
 
 export function isObject([value]) {
   const isObject = !Array.isArray(value) && value !== null && typeof value === 'object';

ui/app/helpers/lazy-click.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Helper, $ } = Ember;
+import Helper from '@ember/component/helper';
+import $ from 'jquery';
 
 /**
  * Lazy Click Event

ui/app/helpers/pluralize.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Helper } = Ember;
+import Helper from '@ember/component/helper';
 
 export function pluralize([term, count]) {
   return count === 1 ? term : term.pluralize();

ui/app/helpers/x-icon.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import { helper } from '@ember/component/helper';
 import { inlineSvg } from 'ember-inline-svg/helpers/inline-svg';
 
 // Generated at compile-time by ember-inline-svg
@@ -18,4 +18,4 @@ export function xIcon(params, options) {
   return inlineSvg(SVGs, name, { class: classes });
 }
 
-export default Ember.Helper.helper(xIcon);
+export default helper(xIcon);

ui/app/mixins/searchable.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Mixin, computed, get } = Ember;
+import Mixin from '@ember/object/mixin';
+import { get, computed } from '@ember/object';
 
 /**
   Searchable mixin

ui/app/mixins/sortable.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Mixin, computed } = Ember;
+import Mixin from '@ember/object/mixin';
+import { computed } from '@ember/object';
 
 /**
   Sortable mixin

ui/app/mixins/window-resizable.js

@@ -1,8 +1,8 @@
-import Ember from 'ember';
+import Mixin from '@ember/object/mixin';
+import { run } from '@ember/runloop';
+import $ from 'jquery';
 
-const { run, $ } = Ember;
-
-export default Ember.Mixin.create({
+export default Mixin.create({
   setupWindowResize: function() {
     run.scheduleOnce('afterRender', this, () => {
       this.set('_windowResizeHandler', this.get('windowResizeHandler').bind(this));

ui/app/mixins/with-forbidden-state.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Mixin } = Ember;
+import Mixin from '@ember/object/mixin';
 
 export default Mixin.create({
   setupController(controller) {

ui/app/mixins/with-model-error-handling.js

@@ -1,8 +1,6 @@
-import Ember from 'ember';
+import Mixin from '@ember/object/mixin';
 import notifyError from 'nomad-ui/utils/notify-error';
 
-const { Mixin } = Ember;
-
 export default Mixin.create({
   model() {
     return this._super(...arguments).catch(notifyError(this));

ui/app/mixins/with-namespace-resetting.js

@@ -1,10 +1,10 @@
-import Ember from 'ember';
-
-const { Mixin, inject } = Ember;
+import { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import Mixin from '@ember/object/mixin';
 
 export default Mixin.create({
-  system: inject.service(),
-  jobsController: inject.controller('jobs'),
+  system: service(),
+  jobsController: controller('jobs'),
 
   actions: {
     gotoJobs(namespace) {

ui/app/models/agent.js

@@ -1,11 +1,10 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 
-const { computed, inject } = Ember;
-
 export default Model.extend({
-  system: inject.service(),
+  system: service(),
 
   name: attr('string'),
   address: attr('string'),

ui/app/models/allocation.js

@@ -1,4 +1,7 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import { readOnly } from '@ember/object/computed';
+import { computed } from '@ember/object';
+import RSVP from 'rsvp';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { belongsTo } from 'ember-data/relationships';
@@ -7,8 +10,6 @@ import PromiseObject from '../utils/classes/promise-object';
 import timeout from '../utils/timeout';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 
-const { computed, RSVP, inject } = Ember;
-
 const STATUS_ORDER = {
   pending: 1,
   running: 2,
@@ -18,7 +19,7 @@ const STATUS_ORDER = {
 };
 
 export default Model.extend({
-  token: inject.service(),
+  token: service(),
 
   shortId: shortUUIDProperty('id'),
   job: belongsTo('job'),
@@ -56,7 +57,7 @@ export default Model.extend({
     return taskGroups && taskGroups.findBy('name', this.get('taskGroupName'));
   }),
 
-  memoryUsed: computed.readOnly('stats.ResourceUsage.MemoryStats.RSS'),
+  memoryUsed: readOnly('stats.ResourceUsage.MemoryStats.RSS'),
   cpuUsed: computed('stats.ResourceUsage.CpuStats.TotalTicks', function() {
     return Math.floor(this.get('stats.ResourceUsage.CpuStats.TotalTicks') || 0);
   }),

ui/app/models/deployment.js

@@ -1,4 +1,5 @@
-import Ember from 'ember';
+import { alias } 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';
@@ -6,8 +7,6 @@ import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 import sumAggregation from '../utils/properties/sum-aggregation';
 
-const { computed } = Ember;
-
 export default Model.extend({
   shortId: shortUUIDProperty('id'),
 
@@ -34,6 +33,9 @@ export default Model.extend({
     return (this.get('job.versions') || []).findBy('number', this.get('versionNumber'));
   }),
 
+  // Dependent keys can only go one level past an @each so an alias is needed
+  versionSubmitTime: alias('version.submitTime'),
+
   placedCanaries: sumAggregation('taskGroupSummaries', 'placedCanaries'),
   desiredCanaries: sumAggregation('taskGroupSummaries', 'desiredCanaries'),
   desiredTotal: sumAggregation('taskGroupSummaries', 'desiredTotal'),

ui/app/models/evaluation.js

@@ -1,12 +1,10 @@
-import Ember from 'ember';
+import { bool } from '@ember/object/computed';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { belongsTo } from 'ember-data/relationships';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 
-const { computed } = Ember;
-
 export default Model.extend({
   shortId: shortUUIDProperty('id'),
   priority: attr('number'),
@@ -16,7 +14,7 @@ export default Model.extend({
   statusDescription: attr('string'),
   failedTGAllocs: fragmentArray('placement-failure', { defaultValue: () => [] }),
 
-  hasPlacementFailures: computed.bool('failedTGAllocs.length'),
+  hasPlacementFailures: bool('failedTGAllocs.length'),
 
   // TEMPORARY: https://github.com/emberjs/data/issues/5209
   originalJobId: attr('string'),

ui/app/models/job.js

@@ -1,12 +1,11 @@
-import Ember from 'ember';
+import { collect, sum, bool, equal } 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 { fragmentArray } from 'ember-data-model-fragments/attributes';
 import sumAggregation from '../utils/properties/sum-aggregation';
 
-const { computed } = Ember;
-
 export default Model.extend({
   region: attr('string'),
   name: attr('string'),
@@ -35,7 +34,7 @@ export default Model.extend({
   failedAllocs: sumAggregation('taskGroupSummaries', 'failedAllocs'),
   lostAllocs: sumAggregation('taskGroupSummaries', 'lostAllocs'),
 
-  allocsList: computed.collect(
+  allocsList: collect(
     'queuedAllocs',
     'startingAllocs',
     'runningAllocs',
@@ -44,7 +43,7 @@ export default Model.extend({
     'lostAllocs'
   ),
 
-  totalAllocs: computed.sum('allocsList'),
+  totalAllocs: sum('allocsList'),
 
   pendingChildren: attr('number'),
   runningChildren: attr('number'),
@@ -56,7 +55,7 @@ export default Model.extend({
   evaluations: hasMany('evaluations'),
   namespace: belongsTo('namespace'),
 
-  hasPlacementFailures: computed.bool('latestFailureEvaluation'),
+  hasPlacementFailures: bool('latestFailureEvaluation'),
 
   latestEvaluation: computed('evaluations.@each.modifyIndex', 'evaluations.isPending', function() {
     const evaluations = this.get('evaluations');
@@ -82,7 +81,7 @@ export default Model.extend({
     }
   ),
 
-  supportsDeployments: computed.equal('type', 'service'),
+  supportsDeployments: equal('type', 'service'),
 
   runningDeployment: computed('deployments.@each.status', function() {
     return this.get('deployments').findBy('status', 'running');

ui/app/models/namespace.js

@@ -1,11 +1,9 @@
-import Ember from 'ember';
+import { readOnly } from '@ember/object/computed';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 
-const { computed } = Ember;
-
 export default Model.extend({
-  name: computed.readOnly('id'),
+  name: readOnly('id'),
   hash: attr('string'),
   description: attr('string'),
 });

ui/app/models/node-attributes.js

@@ -1,9 +1,8 @@
-import Ember from 'ember';
+import { get, computed } from '@ember/object';
 import attr from 'ember-data/attr';
 import Fragment from 'ember-data-model-fragments/fragment';
 import flat from 'npm:flat';
 
-const { computed, get } = Ember;
 const { unflatten } = flat;
 
 export default Fragment.extend({
@@ -12,10 +11,12 @@ export default Fragment.extend({
   attributesStructured: computed('attributes', function() {
     // `unflatten` doesn't sort keys before unflattening, so manual preprocessing is necessary.
     const original = this.get('attributes');
-    const attrs = Object.keys(original).sort().reduce((obj, key) => {
-      obj[key] = original[key];
-      return obj;
-    }, {});
+    const attrs = Object.keys(original)
+      .sort()
+      .reduce((obj, key) => {
+        obj[key] = original[key];
+        return obj;
+      }, {});
     return unflatten(attrs, { overwrite: true });
   }),
 

ui/app/models/node.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { hasMany } from 'ember-data/relationships';
@@ -6,8 +6,6 @@ import { fragment } from 'ember-data-model-fragments/attributes';
 import shortUUIDProperty from '../utils/properties/short-uuid';
 import ipParts from '../utils/ip-parts';
 
-const { computed } = Ember;
-
 export default Model.extend({
   // Available from list response
   name: attr('string'),

ui/app/models/task-event.js

@@ -1,10 +1,9 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
 import attr from 'ember-data/attr';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 import moment from 'moment';
 
-const { computed } = Ember;
 const displayProps = [
   'message',
   'validationError',

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

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { gt } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
 import attr from 'ember-data/attr';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
-const { computed } = Ember;
-
 export default Fragment.extend({
   deployment: fragmentOwner(),
 
@@ -12,7 +10,7 @@ export default Fragment.extend({
 
   autoRevert: attr('boolean'),
   promoted: attr('boolean'),
-  requiresPromotion: computed.gt('desiredCanaries', 0),
+  requiresPromotion: gt('desiredCanaries', 0),
 
   placedCanaries: attr('number'),
   desiredCanaries: attr('number'),

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

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { collect, sum } from '@ember/object/computed';
 import Fragment from 'ember-data-model-fragments/fragment';
 import attr from 'ember-data/attr';
 import { fragmentOwner } from 'ember-data-model-fragments/attributes';
 
-const { computed } = Ember;
-
 export default Fragment.extend({
   job: fragmentOwner(),
   name: attr('string'),
@@ -16,7 +14,7 @@ export default Fragment.extend({
   failedAllocs: attr('number'),
   lostAllocs: attr('number'),
 
-  allocsList: computed.collect(
+  allocsList: collect(
     'queuedAllocs',
     'startingAllocs',
     'runningAllocs',
@@ -25,5 +23,5 @@ export default Fragment.extend({
     'lostAllocs'
   ),
 
-  totalAllocs: computed.sum('allocsList'),
+  totalAllocs: sum('allocsList'),
 });

ui/app/models/task-group.js

@@ -1,11 +1,9 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
 import attr from 'ember-data/attr';
 import { fragmentOwner, fragmentArray } from 'ember-data-model-fragments/attributes';
 import sumAggregation from '../utils/properties/sum-aggregation';
 
-const { computed } = Ember;
-
 export default Fragment.extend({
   job: fragmentOwner(),
 

ui/app/models/task-state.js

@@ -1,10 +1,9 @@
-import Ember from 'ember';
+import { none } from '@ember/object/computed';
+import { computed } from '@ember/object';
 import Fragment from 'ember-data-model-fragments/fragment';
 import attr from 'ember-data/attr';
 import { fragment, fragmentOwner, fragmentArray } from 'ember-data-model-fragments/attributes';
 
-const { computed } = Ember;
-
 export default Fragment.extend({
   name: attr('string'),
   state: attr('string'),
@@ -12,7 +11,7 @@ export default Fragment.extend({
   finishedAt: attr('date'),
   failed: attr('boolean'),
 
-  isActive: computed.none('finishedAt'),
+  isActive: none('finishedAt'),
 
   allocation: fragmentOwner(),
   task: computed('allocation.taskGroup.tasks.[]', function() {

ui/app/models/token.js

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { alias } from '@ember/object/computed';
 import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { hasMany } from 'ember-data/relationships';
 
-const { computed } = Ember;
-
 export default Model.extend({
   secret: attr('string'),
   name: attr('string'),
@@ -14,5 +12,5 @@ export default Model.extend({
   policies: hasMany('policy'),
   policyNames: attr(),
 
-  accessor: computed.alias('id'),
+  accessor: alias('id'),
 });

ui/app/router.js

@@ -1,7 +1,7 @@
-import Ember from 'ember';
+import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-const Router = Ember.Router.extend({
+const Router = EmberRouter.extend({
   location: config.locationType,
   rootURL: config.rootURL,
 });

ui/app/routes/allocations/allocation.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
 import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
 
-const { Route } = Ember;
-
 export default Route.extend(WithModelErrorHandling);

ui/app/routes/allocations/allocation/task.js

@@ -1,9 +1,9 @@
-import Ember from 'ember';
-
-const { Route, inject, Error: EmberError } = Ember;
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import EmberError from '@ember/error';
 
 export default Route.extend({
-  store: inject.service(),
+  store: service(),
 
   model({ name }) {
     const allocation = this.modelFor('allocations.allocation');

ui/app/routes/allocations/allocation/task/logs.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Route } = Ember;
+import Route from '@ember/routing/route';
 
 export default Route.extend({
   model() {

ui/app/routes/application.js

@@ -1,9 +1,8 @@
-import Ember from 'ember';
-
-const { Route, inject } = Ember;
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
 
 export default Route.extend({
-  config: inject.service(),
+  config: service(),
 
   resetController(controller, isExiting) {
     if (isExiting) {

ui/app/routes/clients.js

@@ -1,12 +1,12 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
 import WithForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
 import notifyForbidden from 'nomad-ui/utils/notify-forbidden';
 
-const { Route, inject, RSVP } = Ember;
-
 export default Route.extend(WithForbiddenState, {
-  store: inject.service(),
-  system: inject.service(),
+  store: service(),
+  system: service(),
 
   beforeModel() {
     return this.get('system.leader');

ui/app/routes/clients/client.js

@@ -1,10 +1,9 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
 import notifyError from 'nomad-ui/utils/notify-error';
 
-const { Route, inject } = Ember;
-
 export default Route.extend({
-  store: inject.service(),
+  store: service(),
 
   model() {
     return this._super(...arguments).catch(notifyError(this));

ui/app/routes/freestyle.js

@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  emberFreestyle: service(),
+
+  beforeModel() {
+    let emberFreestyle = this.get('emberFreestyle');
+
+    return emberFreestyle.ensureHljs().then(() => {
+      return RSVP.all([
+        emberFreestyle.ensureHljsLanguage('handlebars'),
+        emberFreestyle.ensureHljsLanguage('htmlbars'),
+      ]);
+    });
+  },
+});

ui/app/routes/index.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Route } = Ember;
+import Route from '@ember/routing/route';
 
 export default Route.extend({
   redirect() {

ui/app/routes/jobs.js

@@ -1,12 +1,12 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { run } from '@ember/runloop';
 import WithForbiddenState from 'nomad-ui/mixins/with-forbidden-state';
 import notifyForbidden from 'nomad-ui/utils/notify-forbidden';
 
-const { Route, inject, run } = Ember;
-
 export default Route.extend(WithForbiddenState, {
-  system: inject.service(),
-  store: inject.service(),
+  system: service(),
+  store: service(),
 
   beforeModel() {
     return this.get('system.namespaces');

ui/app/routes/jobs/index.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Route } = Ember;
+import Route from '@ember/routing/route';
 
 export default Route.extend({
   actions: {

ui/app/routes/jobs/job.js

@@ -1,10 +1,10 @@
-import Ember from 'ember';
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
 import notifyError from 'nomad-ui/utils/notify-error';
 
-const { Route, RSVP, inject } = Ember;
-
 export default Route.extend({
-  store: inject.service(),
+  store: service(),
 
   serialize(model) {
     return { job_name: model.get('plainId') };
@@ -13,7 +13,7 @@ export default Route.extend({
   model(params, transition) {
     const namespace = transition.queryParams.namespace || this.get('system.activeNamespace.id');
     const name = params.job_name;
-    const fullId = JSON.stringify([name, namespace]);
+    const fullId = JSON.stringify([name, namespace || 'default']);
     return this.get('store')
       .findRecord('job', fullId, { reload: true })
       .then(job => {

ui/app/routes/jobs/job/definition.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
-
-const { Route } = Ember;
+import Route from '@ember/routing/route';
 
 export default Route.extend({
   model() {

ui/app/routes/jobs/job/deployments.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
-
-const { Route, RSVP } = Ember;
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
 
 export default Route.extend({
   model() {