spring-cloudgh-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
cppwfs · Feb 9, 2018 · 9be4231 · 9be4231
1 parent d5ac6e0
commit 9be4231
Show file tree

Hide file tree

Showing 44 changed files with 105 additions and 111 deletions.
diff --git a/.travis.yml b/.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

diff --git a/ui/karma.conf.js b/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

diff --git a/ui/package.json b/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": {

diff --git a/ui/src/app/about/about-details.component.spec.ts b/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';
 

diff --git a/ui/src/app/about/about.component.spec.ts b/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';

diff --git a/ui/src/app/about/about.service.spec.ts b/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';

diff --git a/ui/src/app/analytics/analytics.service.ts b/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';

diff --git a/ui/src/app/analytics/dashboard/dashboard.component.spec.ts b/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', () => {

diff --git a/ui/src/app/apps/apps.service.spec.ts b/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';

diff --git a/ui/src/app/auth/auth.service.spec.ts b/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';

diff --git a/ui/src/app/auth/feature-disabled.component.spec.ts b/ui/src/app/auth/feature-disabled.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 { FormsModule } from '@angular/forms';
 
 import { LogoutComponent } from './logout.component';

diff --git a/ui/src/app/auth/login.component.spec.ts b/ui/src/app/auth/login.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 { FormsModule } from '@angular/forms';
 
 import { LoginComponent } from './login.component';

diff --git a/ui/src/app/auth/logout.component.spec.ts b/ui/src/app/auth/logout.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 { FormsModule } from '@angular/forms';
 
 import { LogoutComponent } from './logout.component';

diff --git a/ui/src/app/jobs/jobs.component.spec.ts b/ui/src/app/jobs/jobs.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 { NgxPaginationModule } from 'ngx-pagination';
 import { ToastyService } from 'ng2-toasty';
 import { JobsComponent } from './jobs.component';

diff --git a/ui/src/app/jobs/jobs.service.spec.ts b/ui/src/app/jobs/jobs.service.spec.ts
@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { JobsService } from './jobs.service';
 import { HttpUtils } from '../shared/support/http.utils';

diff --git a/ui/src/app/runtime/runtime-apps.component.spec.ts b/ui/src/app/runtime/runtime-apps.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 { NgxPaginationModule } from 'ngx-pagination';
 import { ToastyService } from 'ng2-toasty';
 import { ModalModule } from 'ngx-bootstrap';

diff --git a/ui/src/app/shared/components/tri-state-button.component.ts b/ui/src/app/shared/components/tri-state-button.component.ts
@@ -1,7 +1,8 @@
 import {
   Component, Input, Output, AfterViewInit, DoCheck, ViewChild, EventEmitter
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/throttleTime';
 import 'rxjs/add/observable/fromEvent';

diff --git a/ui/src/app/shared/components/tri-state-checkbox.component.ts b/ui/src/app/shared/components/tri-state-checkbox.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, AfterViewInit, DoCheck, ViewChild } from '@angular/core';
-import { Observable, Subscription } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import { Selectable } from '../../shared/model/selectable';
 
 /**

diff --git a/ui/src/app/shared/flo/decoration/decoration.component.html b/ui/src/app/shared/flo/decoration/decoration.component.html
@@ -5,8 +5,8 @@
   </svg:g>
 </svg:g>
 
-<template #markerTooltip>
+<ng-template #markerTooltip>
   <ul class="marker-tooltip">
     <li *ngFor="let msg of getMessages()">{{msg}}</li>
   </ul>
-</template>
+</ng-template>
diff --git a/ui/src/app/shared/model/about/security-info.model.spec.ts b/ui/src/app/shared/model/about/security-info.model.spec.ts
@@ -1,5 +1,5 @@
 import { URLSearchParams } from '@angular/http';
-import { Observable } from 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
 
 import { SecurityInfo } from './security-info.model';
 

diff --git a/ui/src/app/shared/services/shared-apps.service.spec.ts b/ui/src/app/shared/services/shared-apps.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 '../support/http.utils';
 import { ApplicationType, AppRegistration, ErrorHandler } from '../model';

diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
@@ -6,7 +6,7 @@ import { HttpModule } from '@angular/http';
 
 import { ToastyModule } from 'ng2-toasty';
 
-import { BusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS } from 'tixif-ngx-busy';
+import { BusyModule, BusyConfig, BUSY_CONFIG_DEFAULTS } from 'angular2-busy';
 import { ErrorHandler } from './model/error-handler';
 import { CapitalizePipe } from './pipes/capitalize.pipe';
 import { TriStateCheckboxComponent } from './components/tri-state-checkbox.component';

diff --git a/ui/src/app/streams/flo/instance-dot/instance-dot.component.html b/ui/src/app/streams/flo/instance-dot/instance-dot.component.html
@@ -4,7 +4,7 @@
   </svg:g>
 </svg:g>
 
-<template #dotTooltip>
+<ng-template #dotTooltip>
   <table *ngIf="instance; else noData" class="table-hover table-condensed container-details-table">
     <tbody>
     <tr>
@@ -21,7 +21,7 @@
     </tr>
     </tbody>
   </table>
-</template>
+</ng-template>
 
 <ng-template #noData>
   <span>App instance either is down or not deployed</span>

diff --git a/ui/src/app/streams/flo/message-rate/message-rate.component.html b/ui/src/app/streams/flo/message-rate/message-rate.component.html
@@ -5,4 +5,4 @@
   </svg:text>
 </svg:g>
 
-<template #content>{{rateTooltip}}</template>
+<ng-template #content>{{rateTooltip}}</ng-template>
diff --git a/ui/src/app/streams/flo/node/node.component.html b/ui/src/app/streams/flo/node/node.component.html
@@ -24,7 +24,7 @@
 
 </svg:g>
 
-<template #canvasNodeTooltip>
+<ng-template #canvasNodeTooltip>
   <div ng-if="cell.attr('metadata/name')">
     <span><strong>{{metaName | uppercase}}</strong></span>
     <span><strong>{{'(' + (metaGroup | capitalize) + ')'}}</strong></span>
@@ -40,4 +40,4 @@
     </tr>
     </tbody>
   </table>
-</template>
+</ng-template>
diff --git a/ui/src/app/streams/stream-create/stream-create.component.spec.ts b/ui/src/app/streams/stream-create/stream-create.component.spec.ts
@@ -1,5 +1,5 @@
 import {StreamCreateComponent} from './stream-create.component';
-import {BusyModule} from 'tixif-ngx-busy';
+import {BusyModule} from 'angular2-busy';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {MockActivatedRoute} from '../../tests/mocks/activated-route';

diff --git a/ui/src/app/streams/stream-definitions/stream-definitions.component.spec.ts b/ui/src/app/streams/stream-definitions/stream-definitions.component.spec.ts
@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed, tick} from '@angular/core/testing';
-import {BusyModule} from 'tixif-ngx-busy';
+import {BusyModule} from 'angular2-busy';
 import {NgxPaginationModule} from 'ngx-pagination';
 import {ToastyService} from 'ng2-toasty';
 import {BsModalRef, ModalModule, PopoverModule} from 'ngx-bootstrap';

diff --git a/ui/src/app/streams/stream-deploy-multi/stream-deploy-multi.component.spec.ts b/ui/src/app/streams/stream-deploy-multi/stream-deploy-multi.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 {MockStreamsService} from '../../tests/mocks/streams';

diff --git a/ui/src/app/streams/stream-deploy/stream-deploy.component.spec.ts b/ui/src/app/streams/stream-deploy/stream-deploy.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 {MockStreamsService} from '../../tests/mocks/streams';

diff --git a/ui/src/app/tasks/task-app-details/task-app-details.component.spec.ts b/ui/src/app/tasks/task-app-details/task-app-details.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { BusyModule } from 'tixif-ngx-busy';
+import { BusyModule } from 'angular2-busy';
 import { ToastyService } from 'ng2-toasty';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TasksService } from '../tasks.service';

diff --git a/ui/src/app/tasks/task-apps/task-apps.component.spec.ts b/ui/src/app/tasks/task-apps/task-apps.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { BusyModule } from 'tixif-ngx-busy';
+import { BusyModule } from 'angular2-busy';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { ToastyService } from 'ng2-toasty';
 import { Router } from '@angular/router';

diff --git a/ui/src/app/tasks/task-create-composed-task/task-create-composed-task.component.spec.ts b/ui/src/app/tasks/task-create-composed-task/task-create-composed-task.component.spec.ts
@@ -8,7 +8,7 @@ import { MetamodelService } from '../flo/metamodel.service';
 import { RenderService } from '../flo/render.service';
 import { EditorService } from '../flo/editor.service';
 import { ContentAssistService } from '../flo/content-assist.service';
-import { BusyModule } from 'tixif-ngx-busy';
+import { BusyModule } from 'angular2-busy';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MockSharedAppService } from '../../tests/mocks/shared-app';
 import { MockToolsService } from '../../tests/mocks/mock-tools';

diff --git a/ui/src/app/tasks/task-create/task-create.component.spec.ts b/ui/src/app/tasks/task-create/task-create.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { BusyModule } from 'tixif-ngx-busy';
+import { BusyModule } from 'angular2-busy';
 import { ToastyService } from 'ng2-toasty';
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

diff --git a/ui/src/app/tasks/task-create/task-create.component.ts b/ui/src/app/tasks/task-create/task-create.component.ts
@@ -5,6 +5,7 @@ import { ToastyService } from 'ng2-toasty';
 import { Subscription } from 'rxjs/Subscription';
 import { TasksService } from '../tasks.service';
 import { AppInfo } from '../model/app-info';
+import 'rxjs/add/operator/do';
 
 @Component({
   selector: 'app-task-create',

diff --git a/ui/src/app/tasks/task-details/task-details.component.spec.ts b/ui/src/app/tasks/task-details/task-details.component.spec.ts
@@ -1,7 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { BusyModule } from 'tixif-ngx-busy';
+import { BusyModule } from 'angular2-busy';
 import { ToastyService } from 'ng2-toasty';
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';

diff --git a/ui/src/app/tests/mocks/modal.ts b/ui/src/app/tests/mocks/modal.ts
@@ -15,5 +15,5 @@ import {TemplateRef} from '@angular/core';
  * @author Damien Vitrac
  */
 export class MockBsModalRef extends BsModalRef {
-  hide() {}
+  hide = Function
 }