UI: Ember 2.18 → 3.4 Take two

.gitignore

@@ -87,6 +87,11 @@ rkt-*
 /ui/testem.log
 .ignore
 
+# ember-try
+/ui/.node_modules.ember-try/
+/ui/bower.json.ember-try
+/ui/package.json.ember-try
+
 # generated routes file
 command/agent/bindata_assetfs.go
 

.travis.yml

@@ -71,13 +71,14 @@ 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 [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$RUN_STATIC_CHECKS" ]]; then sudo -E bash ./scripts/vagrant-linux-priv-protoc.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 curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.15.2 ; fi
   - if [[ "$RUN_UI_TESTS" ]]; then export PATH="$HOME/.yarn/bin:$PATH" ; fi
+  - echo "Travis Node Version" && node -v
 
 install:
   - if [[ -z "$SKIP_NOMAD_TESTS" ]] || [[ "$RUN_STATIC_CHECKS" ]]; then make deps; fi
   - if [[ "$RUN_STATIC_CHECKS" ]]; then make lint-deps ; fi
-  - if [[ "$RUN_UI_TESTS" ]]; then . $HOME/.nvm/nvm.sh && cd ui && nvm use && cd .. ; fi
+  - if [[ "$RUN_UI_TESTS" ]]; then . $HOME/.nvm/nvm.sh && cd ui && nvm install && nvm use && cd .. ; fi
 
 script:
   - sudo -E "PATH=$PATH" GOTESTSUM_JUNITFILE=/tmp/results.xml make travis

scripts/vagrant-linux-unpriv-ui.sh

@@ -9,12 +9,12 @@ export NVM_DIR="/home/vagrant/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
 
 # Install Node, Ember CLI, and Phantom for UI development
-nvm install 8.11.2
-nvm alias default 8.11.2
+nvm install 10
+nvm alias default 10
 npm install -g ember-cli
 
 # Install Yarn for front-end dependency management
-curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.7.0
+curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.15.2
 
 # Install Chrome for running tests (in headless mode)
 wget -qO- - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -

ui/.eslintignore

@@ -1 +1,22 @@
 mirage/
+
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

ui/.eslintrc.js

@@ -8,11 +8,8 @@ module.exports = {
   },
   extends: 'eslint:recommended',
   parserOptions: {
-    ecmaVersion: 2017,
+    ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-    },
   },
   rules: {
     indent: ['error', 2, { SwitchCase: 1 }],
@@ -26,4 +23,26 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    // node files
+    {
+      files: [
+        '.eslintrc.js',
+        '.template-lintrc.js',
+        'ember-cli-build.js',
+        'testem.js',
+        'blueprints/*/index.js',
+        'config/**/*.js',
+        'lib/*/index.js',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+        ecmaVersion: 2015,
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+    },
+  ],
 };

ui/.nvmrc

@@ -1 +1 @@
-8
+10

ui/.template-lintrc.js

@@ -0,0 +1,40 @@
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+  rules: {
+    // should definitely move to template only
+    // glimmer components for this one
+    'no-partial': false,
+
+    // these need to be looked into, but
+    // may be a bigger change
+    'no-invalid-interactive': false,
+    'simple-unless': false,
+
+    'self-closing-void-elements': false,
+    'no-unnecessary-concat': false,
+    'no-quoteless-attributes': false,
+    'no-nested-interactive': false,
+
+    // Only used in list-pager, which can be replaced with
+    // an angle-bracket component
+    'no-attrs-in-components': false,
+
+    // Used in practice with charts. Ideally this would be true
+    // except for a whitelist of chart files.
+    'no-inline-styles': false,
+
+    // not sure we'll ever want these on,
+    // would be nice but if prettier isn't doing
+    // it for us, then not sure it's worth it
+    'attribute-indentation': false,
+    'block-indentation': false,
+    quotes: false,
+  },
+
+  ignore: [
+    'app/templates/components/freestyle/**',
+    'nomad-ui/templates/components/freestyle/**'
+  ]
+};

ui/README.md

@@ -49,6 +49,16 @@ Nomad UI tests can be run independently of Nomad golang tests.
 * `ember test` (single run, headless browser)
 * `ember test --server` (watches for changes, runs in a full browser)
 
+
+
+### Linting
+
+Linting should happen automatically in your editor and when committing changes, but it can also be invoked manually.
+
+* `npm run lint:hbs`
+* `npm run lint:js`
+* `npm run lint:js -- --fix`
+
 ### Building
 
 Typically `make release` or `make dev-ui` will be the desired build workflow, but in the event that build artifacts need to be inspected, `ember build` will output compiled files in `ui/dist`.

ui/app/adapters/job.js

@@ -78,7 +78,7 @@ export default Watchable.extend({
 
   plan(job) {
     const jobId = job.get('id');
-    const store = this.get('store');
+    const store = this.store;
     const url = addToPath(this.urlForFindRecord(jobId, 'job'), '/plan');
 
     return this.ajax(url, 'POST', {

ui/app/adapters/token.js

@@ -8,7 +8,7 @@ export default ApplicationAdapter.extend({
 
   findSelf() {
     return this.ajax(`${this.buildURL()}/token/self`, 'GET').then(token => {
-      const store = this.get('store');
+      const store = this.store;
       store.pushPayload('token', {
         tokens: [token],
       });

ui/app/adapters/watchable.js

@@ -42,9 +42,9 @@ export default ApplicationAdapter.extend({
       if (previousBeforeSend) {
         previousBeforeSend(...arguments);
       }
-      this.get('xhrs').track(key, jqXHR);
+      this.xhrs.track(key, jqXHR);
       jqXHR.always(() => {
-        this.get('xhrs').remove(key, jqXHR);
+        this.xhrs.remove(key, jqXHR);
       });
     };
 
@@ -60,7 +60,7 @@ export default ApplicationAdapter.extend({
     const url = this.urlForFindAll(type.modelName);
 
     if (get(snapshotRecordArray || {}, 'adapterOptions.watch')) {
-      params.index = this.get('watchList').getIndexFor(url);
+      params.index = this.watchList.getIndexFor(url);
     }
 
     return this.ajax(url, 'GET', {
@@ -73,7 +73,7 @@ export default ApplicationAdapter.extend({
     params = assign(queryString.parse(params) || {}, this.buildQuery(), additionalParams);
 
     if (get(snapshot || {}, 'adapterOptions.watch')) {
-      params.index = this.get('watchList').getIndexFor(url);
+      params.index = this.watchList.getIndexFor(url);
     }
 
     return this.ajax(url, 'GET', {
@@ -97,7 +97,7 @@ export default ApplicationAdapter.extend({
       let params = {};
 
       if (watch) {
-        params.index = this.get('watchList').getIndexFor(url);
+        params.index = this.watchList.getIndexFor(url);
       }
 
       // Avoid duplicating existing query params by passing them to ajax
@@ -113,7 +113,7 @@ export default ApplicationAdapter.extend({
         data: params,
       }).then(
         json => {
-          const store = this.get('store');
+          const store = this.store;
           const normalizeMethod =
             relationship.kind === 'belongsTo'
               ? 'normalizeFindBelongsToResponse'
@@ -138,7 +138,7 @@ export default ApplicationAdapter.extend({
     // case sensitive.
     const newIndex = headers['x-nomad-index'] || headers['X-Nomad-Index'];
     if (newIndex) {
-      this.get('watchList').setIndexFor(requestData.url, newIndex);
+      this.watchList.setIndexFor(requestData.url, newIndex);
     }
 
     return this._super(...arguments);
@@ -149,7 +149,7 @@ export default ApplicationAdapter.extend({
       return;
     }
     const url = this.urlForFindRecord(id, modelName);
-    this.get('xhrs').cancel(`GET ${url}`);
+    this.xhrs.cancel(`GET ${url}`);
   },
 
   cancelFindAll(modelName) {
@@ -161,7 +161,7 @@ export default ApplicationAdapter.extend({
     if (params) {
       url = `${url}?${params}`;
     }
-    this.get('xhrs').cancel(`GET ${url}`);
+    this.xhrs.cancel(`GET ${url}`);
   },
 
   cancelReloadRelationship(model, relationshipName) {
@@ -175,7 +175,7 @@ export default ApplicationAdapter.extend({
       );
     } else {
       const url = model[relationship.kind](relationship.key).link();
-      this.get('xhrs').cancel(`GET ${url}`);
+      this.xhrs.cancel(`GET ${url}`);
     }
   },
 });

ui/app/components/allocation-row.js

@@ -30,8 +30,8 @@ export default Component.extend({
     if (!this.get('allocation.isRunning')) return;
 
     return AllocationStatsTracker.create({
-      fetch: url => this.get('token').authorizedRequest(url),
-      allocation: this.get('allocation'),
+      fetch: url => this.token.authorizedRequest(url),
+      allocation: this.allocation,
     });
   }),
 
@@ -41,22 +41,22 @@ export default Component.extend({
   onClick() {},
 
   click(event) {
-    lazyClick([this.get('onClick'), event]);
+    lazyClick([this.onClick, event]);
   },
 
   didReceiveAttrs() {
-    const allocation = this.get('allocation');
+    const allocation = this.allocation;
 
     if (allocation) {
       run.scheduleOnce('afterRender', this, qualifyAllocation);
     } else {
-      this.get('fetchStats').cancelAll();
+      this.fetchStats.cancelAll();
     }
   },
 
   fetchStats: task(function*() {
     do {
-      if (this.get('stats')) {
+      if (this.stats) {
         try {
           yield this.get('stats.poll').perform();
           this.set('statsError', false);
@@ -66,14 +66,14 @@ export default Component.extend({
       }
 
       yield timeout(500);
-    } while (this.get('enablePolling'));
+    } while (this.enablePolling);
   }).drop(),
 });
 
 function qualifyAllocation() {
-  const allocation = this.get('allocation');
+  const allocation = this.allocation;
   return allocation.reload().then(() => {
-    this.get('fetchStats').perform();
+    this.fetchStats.perform();
 
     // Make sure that the job record in the store for this allocation
     // is complete and not a partial from the list endpoint

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

@@ -11,11 +11,11 @@ export default DistributionBar.extend({
   data: computed(
     'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs}',
     function() {
-      if (!this.get('allocationContainer')) {
+      if (!this.allocationContainer) {
         return [];
       }
 
-      const allocs = this.get('allocationContainer').getProperties(
+      const allocs = this.allocationContainer.getProperties(
         'queuedAllocs',
         'completeAllocs',
         'failedAllocs',

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

@@ -9,11 +9,11 @@ export default DistributionBar.extend({
   'data-test-children-status-bar': true,
 
   data: computed('job.{pendingChildren,runningChildren,deadChildren}', function() {
-    if (!this.get('job')) {
+    if (!this.job) {
       return [];
     }
 
-    const children = this.get('job').getProperties(
+    const children = this.job.getProperties(
       'pendingChildren',
       'runningChildren',
       'deadChildren'

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

@@ -15,32 +15,32 @@ export default Component.extend(WithVisibilityDetection, {
   onClick() {},
 
   click(event) {
-    lazyClick([this.get('onClick'), event]);
+    lazyClick([this.onClick, event]);
   },
 
   didReceiveAttrs() {
     // Reload the node in order to get detail information
-    const node = this.get('node');
+    const node = this.node;
     if (node) {
       node.reload().then(() => {
-        this.get('watch').perform(node, 100);
+        this.watch.perform(node, 100);
       });
     }
   },
 
   visibilityHandler() {
     if (document.hidden) {
-      this.get('watch').cancelAll();
+      this.watch.cancelAll();
     } else {
-      const node = this.get('node');
+      const node = this.node;
       if (node) {
-        this.get('watch').perform(node, 100);
+        this.watch.perform(node, 100);
       }
     }
   },
 
   willDestroy() {
-    this.get('watch').cancelAll();
+    this.watch.cancelAll();
     this._super(...arguments);
   },