gh-526 Update to Angular 5 (Incl CLI 1.5)

* Update versions to Angular `5.2.3` and Angular CLI `1.6.7`
* Compare and update all relevant files from a freshly created angular CLI project
* Fix issues around Angular2 Busy and RxJs
  - Use the latest GitHub version of Angular2 Busy
  - Polish RxJs imports
* Remove StompJS for (Not used and has issues with Angular 5)
* Update `ngx-bootstrap` to `2.0.0-beta.8` to fix build error
* Update `ngx-clipboard` from `8.1.3` to `9.0.0`
* Update `compodoc` from `1.0.3` to `1.0.4`
* Update `d3` from `4.11.0` to `4.12.0`
* Switch from `template` to `ng-template` to get tooltips working again
* Switch from PhantomJS to headless Chrome for test executions
* Ensure Maven build passes

Author: ghillert

.travis.yml

@@ -3,9 +3,9 @@ cache:
   directories:
     - $HOME/.m2
 dist: trusty
-language: java  
+language: java
 addons:
-    chrome: stable
+  chrome: stable
 jdk:
   - oraclejdk8
 install: true

ui/karma.conf.js

@@ -10,9 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma'),
-
-      require('karma-phantomjs-launcher')
+      require('@angular/cli/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser

ui/package.json

@@ -16,57 +16,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "4.4.6",
-    "@angular/common": "4.4.6",
-    "@angular/compiler": "4.4.6",
-    "@angular/core": "4.4.6",
-    "@angular/forms": "4.4.6",
-    "@angular/http": "4.4.6",
-    "@angular/platform-browser": "4.4.6",
-    "@angular/platform-browser-dynamic": "4.4.6",
-    "@angular/router": "4.4.6",
+    "@angular/animations": "5.2.3",
+    "@angular/common": "5.2.3",
+    "@angular/compiler": "5.2.3",
+    "@angular/core": "5.2.3",
+    "@angular/forms": "5.2.3",
+    "@angular/http": "5.2.3",
+    "@angular/platform-browser": "5.2.3",
+    "@angular/platform-browser-dynamic": "5.2.3",
+    "@angular/router": "5.2.3",
+    "core-js": "2.5.3",
+    "rxjs": "5.5.6",
+    "zone.js": "0.8.20",
     "bootstrap-sass": "3.3.7",
-    "core-js": "^2.5.1",
-    "d3": "4.11.0",
+    "d3": "4.12.0",
     "dagre": "0.7.4",
     "moment": "2.19.3",
     "ng2-stomp-service": "1.2.2",
     "ng2-toasty": "4.0.3",
-    "ngx-bootstrap": "1.9.3",
-    "ngx-clipboard": "8.1.1",
-    "ngx-pagination": "3.0.1",
-    "rxjs": "5.5.2",
+    "ngx-bootstrap": "2.0.0-beta.9",
+    "ngx-clipboard": "9.0.0",
+    "ngx-pagination": "3.0.3",
     "sockjs-client": "1.1.4",
-    "spring-flo": "0.7.0",
-    "tixif-ngx-busy": "0.0.5",
     "web-animations-js": "2.3.1",
-    "zone.js": "0.8.18",
-    "jshint": "2.9.5"
+    "stompjs": "2.3.3",
+    "jshint": "2.9.5",
+    "spring-flo": "git://github.com/spring-projects/spring-flo.git#angular5",
+    "angular2-busy": "git://github.com/devyumao/angular2-busy.git"
   },
   "devDependencies": {
-    "@angular/cli": "1.3.0",
-    "@angular/compiler-cli": "4.4.6",
-    "@angular/language-service": "4.4.6",
-    "@compodoc/compodoc": "1.0.1",
-    "@types/d3": "4.11.0",
-    "@types/jasmine": "2.5.54",
+    "@angular/cli": "1.6.7",
+    "@angular/compiler-cli": "5.2.3",
+    "@angular/language-service": "5.2.3",
+    "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.90",
-    "codelyzer": "3.1.2",
+    "@types/node": "6.0.96",
+    "codelyzer": "4.1.0",
     "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.1.1",
-    "karma": "1.7.1",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
+    "karma-coverage-istanbul-reporter": "1.4.1",
+    "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
-    "karma-phantomjs-launcher": "1.0.4",
-    "napa": "2.3.0",
     "protractor": "5.1.2",
-    "ts-node": "3.2.2",
-    "tslint": "5.3.2",
-    "typescript": "2.4.2",
+    "ts-node": "4.1.0",
+    "tslint": "5.9.1",
+    "typescript": "2.5.3",
+    "@compodoc/compodoc": "1.0.4",
+    "@types/d3": "4.12.0",
+    "napa": "2.3.0",
     "webpack-bundle-analyzer": "2.9.0"
   },
   "napa-config": {

ui/src/app/about/about-details.component.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {BusyModule} from 'tixif-ngx-busy';
+import {BusyModule} from 'angular2-busy';
 import {ToastyService} from 'ng2-toasty';
 import {MockToastyService} from '../tests/mocks/toasty';
 import {MockActivatedRoute} from '../tests/mocks/activated-route';
@@ -10,6 +10,7 @@ import {DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {RouterTestingModule} from '@angular/router/testing';
 import {AboutDetailsComponent} from './about-details.component';
+import {KeyValuePipe} from '../shared/pipes/key-value-filter.pipe';
 import {ClipboardModule} from 'ngx-clipboard/dist';
 import { MapValuesPipe } from '../shared/pipes/map-values-pipe.pipe';
 

ui/src/app/about/about.component.spec.ts

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {BusyModule} from 'tixif-ngx-busy';
+import {BusyModule} from 'angular2-busy';
 import { AboutComponent } from './about.component';
 import {ToastyService} from 'ng2-toasty';
 import {MockToastyService} from '../tests/mocks/toasty';

ui/src/app/about/about.service.spec.ts

@@ -1,5 +1,5 @@
 import { AboutService } from './about.service';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 import { ErrorHandler } from '../shared/model/error-handler';
 import { Response, ResponseOptions } from '@angular/http';
 import { SharedAboutService } from '../shared/services/shared-about.service';

ui/src/app/analytics/analytics.service.ts

@@ -4,6 +4,10 @@ import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/interval';
+
+import 'rxjs/add/operator/switchMap';
+
 import { ErrorHandler, Page } from '../shared/model';
 import { AggregateCounter, BaseCounter, Counter, DashboardItem, FieldValueCounter, MetricType } from './model';
 import { HttpUtils } from '../shared/support/http.utils';

ui/src/app/analytics/dashboard/dashboard.component.spec.ts

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DashboardComponent } from './dashboard.component';
-import {BusyModule} from 'tixif-ngx-busy';
+import {BusyModule} from 'angular2-busy';
 import {AnalyticsModule} from '../analytics.module';
 
 describe('DashboardComponent', () => {

ui/src/app/apps/apps.service.spec.ts

@@ -1,5 +1,5 @@
 import { URLSearchParams } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { AppsService } from './apps.service';
 import { HttpUtils } from '../shared/support/http.utils';

ui/src/app/auth/auth.service.spec.ts

@@ -1,5 +1,5 @@
 import { URLSearchParams } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { HttpUtils } from '../shared/support/http.utils';
 import { ErrorHandler } from '../shared/model';