Skip to content

Instantly share code, notes, and snippets.

@sardell

sardell/MGMT-PR-DRAFT.md

Created September 25, 2018 14:29
Show Gist options
  • Save sardell/3284837f323dc755ed52ec2247bee9ad to your computer and use it in GitHub Desktop.
Save sardell/3284837f323dc755ed52ec2247bee9ad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
MGMT-PR-DRAFT.md

METRON-1749: Update Angular to latest release in Management UI

Contributor Comments

Link to ASF JIRA ticket: https://issues.apache.org/jira/browse/METRON-1749

This Pull Request contains work which updates the Management UI's version of Angular from version 2.0.0 to version 6.1.8. A few benefits we get from this:

  • We gain new Angular features, such as Ahead-of-Time compiling, the new HttpClient library, ng update and Http Interceptors.
  • All npm dependencies now pass an npm vulnerability audit.
  • We are able to use rxjs version 6, which includes easier import paths and pipe method chaining.

Changes Included

  • Update to Angular 6.1.8 and related dependencies.
  • Change angular-cli.json to angular.json and update file schema.
  • Update karma.conf.js schema.
  • Update scripts to use the Ahead-of-Time flag.
  • Update name of scss file containing fonts to _fonts.scss.
  • Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service.
  • Replace the deprecated OpaqueToken with InjectionToken.
  • Replace the Observable emit method with next.
  • Update Observables to use the pipe() method for operators.
  • Update rxjs operator names, import statements and usage.
  • Remove lines in templates accessing service properties.
  • Remove passing event payloads if event handler method does not accept parameters.
  • Remove .compileComponents() since it is no longer needed because webpack inlines templates and css before tests are run.
  • Remove assertions testing Angular libraries.
  • Update unit tests to use the HttpClientTestingModule and HttpTestingController to mock responses.
  • Move default headers to an HttpInterceptor.
  • Format changed files to comply with rules set in tslint.config.

Testing

To test with unit tests, please follow the instructions listed in the Testing section of the Management UI README. To test manually, please follow the instructions listed in the Development section of the Management UI README and visit http://localhost:4200.

Other Considerations

  • We have a handful of nested Observable subscriptions in the Management UI. We would be better off using an operator like switchMap instead.
  • I updated the font paths to use absolute paths because of this issue. We should watch this issue in hopes that Angular's compiler gives us an option in the future to change the default path it applies.
  • The dialog box is currently implemented as a class without a template that utilizes jQuery to manipulate element class attributes. This is slightly confusing because it does not adhere to Angular best practices, and I see no advantage to the way it's currently implemented. I think this class would be much better off as an Angular component using either the class binding shorthand syntax or NgClass instead of jQuery to handle class additions/removals.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment