UI: Ember Upgrade & Miscellaneous Tech Debt Sprint

[DingoEatingFuzz]

This outlines a sprint of UI Spring cleaning that will take place between 0.11.2 and 0.12.0. It should all be invisible to Nomad users but will ideally reduce UI page weight and bring our code up to date with Ember patterns.

Phase 1: Remove Freestyle & lib-sass

• Replace Freestyle component usage in Storybook with our own copies or spiritual successors.
• Remove the Freestyle dep
• Verify that lib-sass is no longer required (yarn why node-sass)
  • 

Phase 2: Remove jQuery

• Update integration tests that use jQuery selectors
  • the deprecation warnings seem to come via ember-cli-page-object which uses jQuery in integration tests vs acceptance… looking into how to address it 🤔 — @backspace
• Update components (and maybe controllers 😱) that use jQuery
• Refactor Ember Data adapters to use ember-fetch

Phase 3: Upgrade to Ember 3.16 LTS

• Straight upgrade.
• Make sure tests pass.
• Upgrade third-party addons as needed.

Phase 4: Update Patterns

• Angle bracket invocation (codemod)
• Class syntax instead of extends (codemod)
• Computed -> Tracked properties (codemod)
• No implicit this (codemod)
• Clean up low-hanging deprecations.
• Run through the standard upgrade guide.
• Add component files where needed to permit turning on template-only components and Octane edition

Phase 5: Update tooling

• Template linting
• Audit testing dependencies

Phase 6: Update external tooling

• Update Makefile (probably small changes)
• Update Vagrantfile (also probably small changes)

Between each phase we should do some benchmarking just to understand the impact of the upgrades.

1. ember-test-audit Gives an average test run time + slowest tests
2. ember build --prod Gives file sizes of generated assets

[DingoEatingFuzz]

Benchmark output from master. We'll want to make sure to control external variance of this somehow. Ideally we could hook it into Circle.

$ npx ember-test-audit 3

Total Tests: 1,216 Total Time: 279,342ms (4m 39s 342ms)

Slowest Modules (avg)
02s 520ms avg per test (02s 520ms total): Acceptance | task detail (different namespace)
01s 709ms avg per test (06s 835ms total): Acceptance | allocation detail (preemptions)
01s 676ms avg per test (06s 703ms total): Integration | Component | allocation row
01s 347ms avg per test (01s 347ms total): Acceptance | client detail (multi-namespace)
01s 333ms avg per test (06s 664ms total): Acceptance | job allocations
01s 230ms avg per test (20s 906ms total): Acceptance | task group detail
01s 197ms avg per test (02s 394ms total): Acceptance | job detail (with namespaces)
01s 185ms avg per test (02s 369ms total): Acceptance | task logs
01s 063ms avg per test (09s 563ms total): Acceptance | job detail (service)
958ms avg per test (06s 709ms total): Acceptance | job detail (periodic child)

Slowest Tests (avg)
03s 726ms: Acceptance | allocation detail: /allocation/:id should name the allocation and link to the corresponding job and node
03s 318ms: Acceptance | allocation detail (preemptions): shows a dedicated section to the allocation that preempted this allocation
02s 852ms: Integration | Component | allocation row: Allocation row polls for stats, even when it errors or has an invalid response
02s 520ms: Acceptance | task detail (different namespace): breadcrumbs match jobs / job / task group / allocation / task
02s 455ms: Acceptance | task detail: breadcrumbs match jobs / job / task group / allocation / task
02s 415ms: Acceptance | client detail: clicking the total allocations badge resets the filter and removes the query param
02s 338ms: Acceptance | task group detail: changing the page size updates the allocations list and also updates the user setting in localStorage
02s 336ms: Integration | Component | allocation row: when an allocation is not running, the utilization graphs are omitted
02s 300ms: Acceptance | job allocations: allocations table is sortable
02s 045ms: Acceptance | client detail: each allocation should link to the job the allocation belongs to

$ ember build --prod

File sizes:
 - dist/assets/auto-import-fastboot.js: 0 B
 - dist/assets/nomad-ui.css:            219.52 KB (32.8 KB gzipped)
 - dist/assets/nomad-ui.js:             616.93 KB (94.72 KB gzipped)
 - dist/assets/vendor.css:              7.15 KB (1.92 KB gzipped)
 - dist/assets/vendor.js:               1.78 MB (475.89 KB gzipped)
 - dist/ember-fetch/fetch-fastboot.js:  1013 B (558 B gzipped)

[DingoEatingFuzz]

We didn't get to all of the things on the list, but I think this issue has served its purpose.

[github-actions]

I'm going to lock this issue because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active issues.
If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.