Update to Ember 3.16/Data 3.12 (#8319)

This updates to Ember 3.16 but leaves Ember Data at 3.12 so we don’t need
to use the model fragments beta. It can be reviewed on a commit-by-commit
basis: blueprint updates, fixes for test failures, and the removal of
now-deprecated partials.

It’s not a true update to Octane as that would involve turning on template-only
components by default, which breaks various things. We can accomplish that
separately and then add the edition setting to package.json.

ui/.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

ui/.eslintrc.js

@@ -1,3 +1,5 @@
+'use strict';
+
 module.exports = {
   root: true,
   globals: {
@@ -35,6 +37,7 @@ module.exports = {
     ],
     'ember/classic-decorator-hooks': 'error',
     'ember/classic-decorator-no-classic-methods': 'error',
+    'ember/no-jquery': 'error',
   },
   overrides: [
     // node files

ui/app/app.js

@@ -1,16 +1,12 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
-
-App = class AppApplication extends Application {
+export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
   Resolver = Resolver;
-};
+}
 
 loadInitializers(App, config.modulePrefix);
-
-export default App;

ui/app/components/forbidden-message.js

@@ -1,5 +1,8 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
 
 @tagName('')
-export default class ForbiddenMessage extends Component {}
+export default class ForbiddenMessage extends Component {
+  @service token;
+}

ui/app/components/hamburger-menu.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class HamburgerMenu extends Component {
+}

ui/app/components/job-subnav.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class JobSubnav extends Component {
+}

ui/app/components/list-table.js

@@ -13,7 +13,7 @@ export default class ListTable extends Component {
   // Plan for a future with metadata (e.g., isSelected)
   @computed('source.[]')
   get decoratedSource() {
-    return this.source.map(row => ({
+    return (this.source || []).map(row => ({
       model: row,
     }));
   }

ui/app/components/loading-spinner.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class LoadingSpinner extends Component {
+}

ui/app/components/reschedule-event-row.js

@@ -14,7 +14,11 @@ export default class RescheduleEventRow extends Component {
 
   // An allocation can also be provided directly
   @overridable('allocationId', function() {
+    if (this.allocationId) {
       return this.store.findRecord('allocation', this.allocationId);
+    }
+
+    return null;
   })
   allocation;
 

ui/app/components/stats-time-series.js

@@ -5,11 +5,14 @@ import d3Format from 'd3-format';
 import d3Scale from 'd3-scale';
 import d3Array from 'd3-array';
 import LineChart from 'nomad-ui/components/line-chart';
+import layout from '../templates/components/line-chart';
 import formatDuration from 'nomad-ui/utils/format-duration';
 import classic from 'ember-classic-decorator';
 
 @classic
 export default class StatsTimeSeries extends LineChart {
+  layout = layout;
+
   xProp = 'timestamp';
   yProp = 'percent';
   timeseries = true;

ui/app/components/svg-patterns.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class SvgPatterns extends Component {
+}

ui/app/resolver.js

@@ -1,3 +0,0 @@
-import Resolver from 'ember-resolver';
-
-export default Resolver;

ui/app/router.js

@@ -1,7 +1,7 @@
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-class Router extends EmberRouter {
+export default class Router extends EmberRouter {
   location = config.locationType;
   rootURL = config.rootURL;
 }
@@ -68,5 +68,3 @@ Router.map(function() {
 
   this.route('not-found', { path: '/*' });
 });
-
-export default Router;

ui/app/templates/application.hbs

@@ -1,6 +1,6 @@
 <HeadLayout />
 {{title (if system.shouldShowRegions (concat system.activeRegion " - ")) "Nomad" separator=" - "}}
-{{partial "svg-patterns"}}
+<SvgPatterns />
 {{#unless error}}
   {{outlet}}
 {{else}}

ui/app/templates/clients/index.hbs

@@ -1,7 +1,7 @@
 {{title "Clients"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/clients/loading.hbs

@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>

ui/app/templates/components/global-header.hbs

@@ -1,10 +1,10 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
     <span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-      {{partial "partials/hamburger-menu"}}
+      <HamburgerMenu />
     </span>
     <LinkTo @route="jobs" class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </LinkTo>
   </div>
   {{#unless (media "isMobile")}}

ui/app/templates/components/gutter-menu.hbs

@@ -2,10 +2,10 @@
   <div class="gutter {{if isOpen "is-open"}}">
     <header class="collapsed-menu {{if isOpen "is-open"}}">
       <span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-        {{partial "partials/hamburger-menu"}}
+        <HamburgerMenu />
       </span>
       <span class="logo-container">
-        {{partial "partials/nomad-logo"}}
+        <NomadLogo />
       </span>
     </header>
     <aside class="menu">

ui/app/templates/components/job-page/parts/body.hbs

@@ -1,4 +1,4 @@
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{@job}} />
 <section class="section">
   {{yield}}
 </section>

ui/app/templates/components/job-subnav.hbs

@@ -1,12 +1,12 @@
 <div data-test-subnav="job" class="tabs is-subnav">
   <ul>
-    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{job}} @activeClass="is-active">Overview</LinkTo></li>
-    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{job}} @activeClass="is-active">Definition</LinkTo></li>
-    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{job}} @activeClass="is-active">Versions</LinkTo></li>
+    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{@job}} @activeClass="is-active">Overview</LinkTo></li>
+    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{@job}} @activeClass="is-active">Definition</LinkTo></li>
+    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{@job}} @activeClass="is-active">Versions</LinkTo></li>
     {{#if job.supportsDeployments}}
-      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{job}} @activeClass="is-active">Deployments</LinkTo></li>
+      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{@job}} @activeClass="is-active">Deployments</LinkTo></li>
     {{/if}}
-    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{job}} @activeClass="is-active">Allocations</LinkTo></li>
-    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{job}} @activeClass="is-active">Evaluations</LinkTo></li>
+    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{@job}} @activeClass="is-active">Allocations</LinkTo></li>
+    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{@job}} @activeClass="is-active">Evaluations</LinkTo></li>
   </ul>
 </div>

ui/app/templates/components/stats-time-series.hbs

@@ -1 +0,0 @@
-{{partial "components/line-chart"}}

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

@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

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

@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

ui/app/templates/exec-loading.hbs

@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
 
@@ -13,5 +13,5 @@
 </nav>
 
 <div class="exec-window loading">
-  {{partial "partials/loading-spinner"}}
+  <LoadingSpinner />
 </div>

ui/app/templates/exec.hbs

@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
     {{#if system.shouldShowRegions}}

ui/app/templates/jobs/index.hbs

@@ -1,7 +1,7 @@
 {{title "Jobs"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">

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

@@ -1,5 +1,5 @@
 {{title "Job " job.name " allocations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if allocations.length}}
     <div class="content">

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

@@ -1,5 +1,5 @@
 {{title "Job " job.name " definition"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#unless isEditing}}
     <div class="boxed-section">

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

@@ -1,5 +1,5 @@
 {{title "Job " job.name " deployments"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobDeploymentsStream @deployments={{model.deployments}} />
 </section>

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

@@ -1,5 +1,5 @@
 {{title "Job " job.name " evaluations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if sortedEvaluations.length}}
     <ListTable

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

@@ -1,2 +1,2 @@
-{{partial "jobs/job/subnav"}}
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<JobSubnav @job={{job}} />
+<section class="section has-text-centered"><LoadingSpinner /></section>

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

@@ -1,5 +1,5 @@
 {{title "Job " job.name " versions"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobVersionsStream @versions={{model.versions}} @verbose={{true}} />
 </section>

ui/app/templates/jobs/loading.hbs

@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>

ui/app/templates/loading.hbs

@@ -1,3 +1,3 @@
 <PageLayout>
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>
 </PageLayout>

ui/app/templates/partials/forbidden-message.hbs

@@ -1,10 +0,0 @@
-<div data-test-error class="empty-message">
-  <h3 data-test-error-title class="empty-message-headline">Not Authorized</h3>
-  <p data-test-error-message class="empty-message-body">
-    {{#if token.secret}}
-      Your <LinkTo @route="settings.tokens">ACL token</LinkTo> does not provide the required permissions. Contact your administrator if this is an error.
-    {{else}}
-      Provide an <LinkTo @route="settings.tokens">ACL token</LinkTo> with requisite permissions to view this.
-    {{/if}}
-  </p>
-</div>

ui/app/templates/servers/index.hbs

@@ -1,7 +1,7 @@
 {{title "Servers"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <ListPagination
       @source={{sortedAgents}}

ui/app/templates/servers/loading.hbs

@@ -1 +1 @@
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>

ui/config/deprecation-workflow.js

@@ -7,5 +7,6 @@ self.deprecationWorkflow.config = {
     { handler: 'throw', matchId: 'ember-console.deprecate-logger' },
     { handler: 'throw', matchId: 'ember-test-helpers.rendering-context.jquery-element' },
     { handler: 'throw', matchId: 'ember-cli-page-object.is-property' },
+    { handler: 'throw', matchId: 'ember-views.partial' },
   ],
 };

ui/config/optional-features.json

@@ -1,3 +1,6 @@
 {
-  "jquery-integration": false
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": false
 }

ui/package.json

@@ -8,7 +8,7 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "./node_modules/ember-cli/bin/ember build -prod",
+    "build": "ember build --environment=production",
     "precommit": "lint-staged",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
@@ -32,7 +32,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
-    "@ember/optional-features": "^0.7.0",
+    "@ember/optional-features": "^1.3.0",
+    "@glimmer/component": "^1.0.0",
+    "@glimmer/tracking": "^1.0.0",
     "@hashicorp/structure-icons": "^1.3.0",
     "@storybook/ember-cli-storybook": "^0.2.0",
     "anser": "^1.4.8",
@@ -50,55 +52,53 @@
     "d3-time-format": "^2.1.0",
     "d3-transition": "^1.1.0",
     "duration-js": "^4.0.0",
-    "ember-ajax": "^5.0.0",
-    "ember-auto-import": "^1.2.21",
+    "ember-auto-import": "^1.5.3",
     "ember-can": "^2.0.0",
     "ember-classic-decorator": "^1.0.8",
-    "ember-cli": "~3.12.0",
-    "ember-cli-babel": "^7.7.3",
+    "ember-cli": "~3.16.2",
+    "ember-cli-babel": "^7.17.2",
     "ember-cli-clipboard": "^0.13.0",
-    "ember-cli-dependency-checker": "^3.1.0",
+    "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^1.0.1",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-funnel": "^0.6.1",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
-    "ember-cli-inject-live-reload": "^2.0.1",
+    "ember-cli-htmlbars": "^4.2.2",
+    "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-mirage": "^1.1.2",
     "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-page-object": "^1.17.2",
     "ember-cli-sass": "^10.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^1.5.0",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^2.1.0",
+    "ember-cli-template-lint": "^1.0.0-beta.3",
+    "ember-cli-uglify": "^3.0.0",
     "ember-composable-helpers": "^2.0.3",
     "ember-concurrency": "^1.0.0",
     "ember-copy": "^1.0.0",
     "ember-data": "~3.12.0",
     "ember-data-model-fragments": "4.0.0",
     "ember-decorators": "^6.1.1",
-    "ember-export-application-global": "^2.0.0",
-    "ember-fetch": "^6.5.0",
+    "ember-export-application-global": "^2.0.1",
+    "ember-fetch": "^7.0.0",
     "ember-inflector": "^3.0.0",
     "ember-inline-svg": "^0.3.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-moment": "^7.8.1",
     "ember-overridable-computed": "^1.0.0",
     "ember-page-title": "^5.0.2",
     "ember-power-select": "^3.0.4",
-    "ember-qunit": "^4.4.1",
+    "ember-qunit": "^4.6.0",
     "ember-qunit-nice-errors": "^1.2.0",
-    "ember-resolver": "^5.0.1",
+    "ember-resolver": "^7.0.0",
     "ember-responsive": "^3.0.4",
     "ember-sinon": "^4.0.0",
-    "ember-source": "~3.12.0",
+    "ember-source": "~3.16.0",
     "ember-test-selectors": "^2.1.0",
     "ember-truth-helpers": "^2.0.0",
     "eslint": "^5.16.0",
-    "eslint-plugin-ember": "^6.2.0",
-    "eslint-plugin-node": "^9.0.1",
+    "eslint-plugin-ember": "^7.7.2",
+    "eslint-plugin-node": "^11.0.0",
     "faker": "^4.1.0",
     "flat": "^4.0.0",
     "fuse.js": "^3.4.4",
@@ -114,7 +114,7 @@
     "pretender": "^3.0.1",
     "prettier": "^1.4.4",
     "query-string": "^5.0.0",
-    "qunit-dom": "^0.9.0",
+    "qunit-dom": "^1.0.0",
     "sass": "^1.17.3",
     "testem": "^3.0.3",
     "testem-multi-reporter": "^1.2.0",
@@ -134,7 +134,7 @@
     "ember-cli-string-utils": "^1.1.0"
   },
   "engines": {
-    "node": "8.* || >= 10.*"
+    "node": "10.* || >= 12"
   },
   "private": true,
   "ember-addon": {

ui/stories/components/header.stories.js

@@ -11,10 +11,10 @@ export let Header = () => {
       <nav class="navbar is-primary">
         <div class="navbar-brand">
           <span class="gutter-toggle" aria-label="menu">
-            {{partial "partials/hamburger-menu"}}
+            <HamburgerMenu />
           </span>
           <span class="navbar-item is-logo">
-            {{partial "partials/nomad-logo"}}
+            <NomadLogo />
           </span>
         </div>
         <div class="navbar-end">

ui/testem.js

@@ -1,4 +1,5 @@
-/* eslint-env node */
+'use strict';
+
 const MultiReporter = require('testem-multi-reporter');
 const TapReporter = require('testem/lib/reporters/tap_reporter');
 const XunitReporter = require('testem/lib/reporters/xunit_reporter');
@@ -9,6 +10,7 @@ const config = {
   disable_watching: true,
   launch_in_ci: ['Chrome'],
   launch_in_dev: ['Chrome'],
+  browser_start_timeout: 120,
   browser_args: {
     // New format in testem/master, but not in a release yet
     // Chrome: {