This is an automated email from the ASF dual-hosted git repository. nealsun pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/helix.git
The following commit(s) were added to refs/heads/master by this push: new ac0af9667 Upgrade helix-front to Angular 9.1 (#2125) ac0af9667 is described below commit ac0af966778ad77d0d2811ad71957546ff84dfb6 Author: Micah Stubbs <micah.stu...@gmail.com> AuthorDate: Thu Jun 2 12:54:49 2022 -0700 Upgrade helix-front to Angular 9.1 (#2125) Fix security vulnerabilities in helix-front dependencies. Upgrade helix-front dependencies to improve contributor productivity. --- helix-front/.nvmrc | 1 + helix-front/angular.json | 7 ++ helix-front/client/app/app-routing.module.ts | 2 +- helix-front/client/app/app.component.spec.ts | 9 ++- helix-front/client/app/app.component.ts | 9 ++- helix-front/client/app/app.module.ts | 6 +- .../cluster-detail/cluster-detail.component.ts | 2 +- .../cluster/cluster-list/cluster-list.component.ts | 3 +- .../client/app/dashboard/dashboard.component.ts | 94 +++++++++++----------- .../app/shared/data-table/data-table.component.ts | 2 +- .../dialog/alert-dialog/alert-dialog.component.ts | 2 +- .../confirm-dialog/confirm-dialog.component.ts | 4 +- .../dialog/input-dialog/input-dialog.component.ts | 4 +- helix-front/client/app/shared/helper.service.ts | 3 +- helix-front/client/app/shared/material.module.ts | 1 - .../shared/node-viewer/node-viewer.component.ts | 2 +- helix-front/client/tsconfig.app.json | 10 ++- helix-front/client/tsconfig.spec.json | 1 - helix-front/package.json | 60 +++++++------- 19 files changed, 118 insertions(+), 104 deletions(-) diff --git a/helix-front/.nvmrc b/helix-front/.nvmrc new file mode 100644 index 000000000..ceeec5689 --- /dev/null +++ b/helix-front/.nvmrc @@ -0,0 +1 @@ +v10.13.0 diff --git a/helix-front/angular.json b/helix-front/angular.json index 57f98cd1c..6700114bc 100644 --- a/helix-front/angular.json +++ b/helix-front/angular.json @@ -11,6 +11,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { + "aot": true, "outputPath": "dist/public", "index": "client/index.html", "main": "client/main.ts", @@ -28,6 +29,12 @@ }, "configurations": { "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "3503kb" + } + ], "optimization": true, "outputHashing": "all", "sourceMap": false, diff --git a/helix-front/client/app/app-routing.module.ts b/helix-front/client/app/app-routing.module.ts index 3e34485e3..7cb10c8eb 100644 --- a/helix-front/client/app/app-routing.module.ts +++ b/helix-front/client/app/app-routing.module.ts @@ -145,4 +145,4 @@ const HELIX_ROUTES: Routes = [ } ]; -export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(HELIX_ROUTES); +export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(HELIX_ROUTES); diff --git a/helix-front/client/app/app.component.spec.ts b/helix-front/client/app/app.component.spec.ts index 2ac2d909e..600dbb10d 100644 --- a/helix-front/client/app/app.component.spec.ts +++ b/helix-front/client/app/app.component.spec.ts @@ -1,7 +1,8 @@ import { TestBed, async } from '@angular/core/testing'; import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { Angulartics2, Angulartics2Piwik } from 'angulartics2'; +// import { Angulartics2 } from 'angulartics2'; +// import { Angulartics2Piwik } from 'angulartics2/piwik'; import { TestingModule } from '../testing/testing.module'; import { AppComponent } from './app.component'; @@ -10,7 +11,7 @@ describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - TestingModule + TestingModule, ], declarations: [ AppComponent @@ -21,8 +22,8 @@ describe('AppComponent', () => { ], // TODO vxu: I don't want to add the following two but ... providers: [ - Angulartics2, - Angulartics2Piwik + // Angulartics2, + // Angulartics2Piwik, ] }).compileComponents(); })); diff --git a/helix-front/client/app/app.component.ts b/helix-front/client/app/app.component.ts index 1b31f6cea..a1403d791 100644 --- a/helix-front/client/app/app.component.ts +++ b/helix-front/client/app/app.component.ts @@ -7,9 +7,9 @@ import { NavigationCancel, NavigationError } from '@angular/router'; -import { MatDialog } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; -import { Angulartics2Piwik } from 'angulartics2'; +// import { Angulartics2Piwik } from 'angulartics2/piwik'; import { UserService } from './core/user.service'; import { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component'; @@ -19,7 +19,7 @@ import { HelperService } from './shared/helper.service'; selector: 'hi-root', templateUrl: './app.component.html', styleUrls: [ './app.component.scss' ], - providers: [ UserService ] + providers: [ UserService/*, Angulartics2Piwik */ ] }) export class AppComponent implements OnInit { @@ -29,9 +29,9 @@ export class AppComponent implements OnInit { currentUser: any; constructor( + // protected angulartics2Piwik: Angulartics2Piwik, protected route: ActivatedRoute, protected router: Router, - protected angulartics: Angulartics2Piwik, protected dialog: MatDialog, protected service: UserService, protected helper: HelperService @@ -50,6 +50,7 @@ export class AppComponent implements OnInit { this.isLoading = false; } }); + // angulartics2Piwik.startTracking(); } ngOnInit() { diff --git a/helix-front/client/app/app.module.ts b/helix-front/client/app/app.module.ts index 1cedb009b..085c39ef2 100644 --- a/helix-front/client/app/app.module.ts +++ b/helix-front/client/app/app.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; -import { Angulartics2Module, Angulartics2Piwik } from 'angulartics2'; - +// import { Angulartics2Module } from 'angulartics2'; +// import { Angulartics2Piwik } from 'angulartics2/piwik'; import { AppRoutingModule } from './app-routing.module'; import { CoreModule } from './core/core.module'; import { SharedModule } from './shared/shared.module'; @@ -28,7 +28,7 @@ import { DashboardModule } from './dashboard/dashboard.module'; FormsModule, HttpClientModule, AppRoutingModule, - Angulartics2Module.forRoot([ Angulartics2Piwik ]), + // Angulartics2Module.forRoot(), CoreModule, SharedModule, ClusterModule, diff --git a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts index c7deca452..c7ccae859 100644 --- a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts +++ b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts @@ -2,7 +2,7 @@ import {map} from 'rxjs/operators'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; -import { MatDialog } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; import { Cluster } from '../shared/cluster.model'; import { HelperService } from '../../shared/helper.service'; diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts b/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts index 2e1cb06be..7144575e1 100644 --- a/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts +++ b/helix-front/client/app/cluster/cluster-list/cluster-list.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { MatDialog, MatSnackBar } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { Router } from '@angular/router'; import { ClusterService } from '../shared/cluster.service'; diff --git a/helix-front/client/app/dashboard/dashboard.component.ts b/helix-front/client/app/dashboard/dashboard.component.ts index 1e9224625..9c45aa604 100644 --- a/helix-front/client/app/dashboard/dashboard.component.ts +++ b/helix-front/client/app/dashboard/dashboard.component.ts @@ -10,17 +10,11 @@ import { Observable, Subscription } from 'rxjs'; import { map } from 'rxjs/operators'; import * as _ from 'lodash'; -import { VisNode, VisNodes, VisEdges, VisNetworkService, VisNetworkData, VisNetworkOptions } from 'ngx-vis'; +import {Data, Edge, Node, Options, VisNetworkService } from 'ngx-vis'; import { ResourceService } from '../resource/shared/resource.service'; import { InstanceService } from '../instance/shared/instance.service'; import { HelperService } from '../shared/helper.service'; - -class DashboardNetworkData implements VisNetworkData { - public nodes: VisNodes; - public edges: VisEdges; -} - @Component({ selector: 'hi-dashboard', templateUrl: './dashboard.component.html', @@ -29,37 +23,40 @@ class DashboardNetworkData implements VisNetworkData { }) export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { - visNetwork = 'cluster-dashboard'; - visNetworkData: DashboardNetworkData; - visNetworkOptions: VisNetworkOptions; + public visNetwork = 'cluster-dashboard'; + public visNetworkData: Data; + public visNetworkOptions: Options; + public nodes: Node[]; + public edges: Edge[]; - clusterName: string; - isLoading = false; - resourceToId = {}; - instanceToId = {}; - selectedResource: any; - selectedInstance: any; - updateSubscription: Subscription; - updateInterval = 3000; + public clusterName: string; + public isLoading = false; + public resourceToId = {}; + public instanceToId = {}; + public selectedResource: any; + public selectedInstance: any; + public updateSubscription: Subscription; + public updateInterval = 3000; - constructor( + public constructor( private el:ElementRef, private route: ActivatedRoute, - protected visService: VisNetworkService, + protected visNetworkService: VisNetworkService, protected resourceService: ResourceService, protected instanceService: InstanceService, protected helper: HelperService ) { } networkInitialized() { - this.visService.on(this.visNetwork, 'click'); - this.visService.on(this.visNetwork, 'zoom'); + this.visNetworkService.on(this.visNetwork, 'click'); + this.visNetworkService.on(this.visNetwork, 'zoom'); - this.visService.click + this.visNetworkService.click .subscribe((eventData: any[]) => { if (eventData[0] === this.visNetwork) { - // clear the edges first - this.visNetworkData.edges.clear(); + + // clear the edges + this.visNetworkData.edges = [] this.selectedResource = null; this.selectedInstance = null; @@ -71,7 +68,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { } }); - this.visService.zoom + this.visNetworkService.zoom .subscribe((eventData: any) => { if (eventData[0] === this.visNetwork) { const scale = eventData[1].scale; @@ -85,10 +82,9 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { } ngOnInit() { - const nodes = new VisNodes(); - const edges = new VisEdges(); - this.visNetworkData = { nodes, edges }; - + this.nodes = + this.edges = []; + this.visNetworkData = { nodes: this.nodes, edges: this.edges } this.visNetworkOptions = { interaction: { navigationButtons: true, @@ -160,8 +156,8 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { this.updateSubscription.unsubscribe(); } - this.visService.off(this.visNetwork, 'zoom'); - this.visService.off(this.visNetwork, 'click'); + this.visNetworkService.off(this.visNetwork, 'zoom'); + this.visNetworkService.off(this.visNetwork, 'click'); } protected fetchResources() { @@ -172,17 +168,18 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { .subscribe( result => { _.forEach(result, (resource) => { - const newId = this.visNetworkData.nodes.getLength() + 1; + const lastId = this.nodes.length; + const newId = this.nodes.length + 1; this.resourceToId[resource.name] = newId; - this.visNetworkData.nodes.add({ + (this.visNetworkData.nodes as Node[])[this.visNetworkData.nodes.length] = { id: newId, label: resource.name, group: 'resource', title: JSON.stringify(resource) - }); + }; }); - this.visService.fit(this.visNetwork); + this.visNetworkService.fit(this.visNetwork); }, error => this.helper.showError(error), () => this.isLoading = false @@ -193,17 +190,17 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { .subscribe( result => { _.forEach(result, (instance) => { - const newId = this.visNetworkData.nodes.getLength() + 1; + const newId = this.visNetworkData.nodes.length + 1; this.instanceToId[instance.name] = newId; - this.visNetworkData.nodes.add({ + (this.visNetworkData.nodes as Node[])[this.visNetworkData.nodes.length] = { id: newId, label: instance.name, group: instance.healthy ? 'instance' : 'instance_bad', title: JSON.stringify(instance), - }); + }; }); - this.visService.fit(this.visNetwork); + this.visNetworkService.fit(this.visNetwork); }, error => this.helper.showError(error), () => this.isLoading = false @@ -218,12 +215,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { this.instanceService.getAll(this.clusterName) .subscribe( result => { - _.forEach(result, instance => { - const id = this.instanceToId[instance.name]; - this.visNetworkData.nodes.update([{ - id: id, + _.forEach(result, (instance, index, _collection) => { + (this.visNetworkData.nodes as Node[])[index] = { + id: this.instanceToId[instance.name], group: instance.healthy ? 'instance' : 'instance_bad' - }]); + }; }); } ); @@ -239,10 +235,10 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { .subscribe( resources => { _.forEach(resources, (resource) => { - this.visNetworkData.edges.add({ + (this.visNetworkData.edges as Edge[])[this.visNetworkData.nodes.length] = { from: id, to: this.resourceToId[resource.name] - }); + }; }); }, error => this.helper.showError(error) @@ -260,10 +256,10 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy { .unionBy('instanceName') .map('instanceName') .forEach((instanceName) => { - this.visNetworkData.edges.add({ + (this.visNetworkData.edges as Edge[])[this.visNetworkData.nodes.length] = { from: this.instanceToId[instanceName], to: this.resourceToId[resourceName] - }); + }; }); }, error => this.helper.showError(error) diff --git a/helix-front/client/app/shared/data-table/data-table.component.ts b/helix-front/client/app/shared/data-table/data-table.component.ts index dffae924e..aa471d328 100644 --- a/helix-front/client/app/shared/data-table/data-table.component.ts +++ b/helix-front/client/app/shared/data-table/data-table.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { MatDialog } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; import { Settings } from '../../core/settings'; import { InputDialogComponent } from '../dialog/input-dialog/input-dialog.component'; diff --git a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts index d276e889b..56cf480ed 100644 --- a/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/alert-dialog/alert-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA } from '@angular/material'; +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ selector: 'hi-alert-dialog', diff --git a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts index 6f4ec8d0c..7d6f1d618 100644 --- a/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/confirm-dialog/confirm-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MatDialogRef } from '@angular/material'; -import { MAT_DIALOG_DATA } from '@angular/material'; +import { MatDialogRef } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ selector: 'hi-confirm-dialog', diff --git a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts index d09800829..64de0ab4d 100644 --- a/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts +++ b/helix-front/client/app/shared/dialog/input-dialog/input-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Inject } from '@angular/core'; -import { MatDialogRef } from '@angular/material'; -import { MAT_DIALOG_DATA } from '@angular/material'; +import { MatDialogRef } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ selector: 'hi-input-dialog', diff --git a/helix-front/client/app/shared/helper.service.ts b/helix-front/client/app/shared/helper.service.ts index 29c10ecd8..0eafd6413 100644 --- a/helix-front/client/app/shared/helper.service.ts +++ b/helix-front/client/app/shared/helper.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; -import { MatDialog, MatSnackBar } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { AlertDialogComponent } from './dialog/alert-dialog/alert-dialog.component'; import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component'; diff --git a/helix-front/client/app/shared/material.module.ts b/helix-front/client/app/shared/material.module.ts index cd630be59..4800bd833 100644 --- a/helix-front/client/app/shared/material.module.ts +++ b/helix-front/client/app/shared/material.module.ts @@ -54,7 +54,6 @@ import { import { MatExpansionModule } from '@angular/material/expansion'; -import 'hammerjs'; @NgModule({ imports: [ diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.ts b/helix-front/client/app/shared/node-viewer/node-viewer.component.ts index 3d78b2b5d..54f9b2088 100644 --- a/helix-front/client/app/shared/node-viewer/node-viewer.component.ts +++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Input, Output, ViewChild, ViewEncapsulation, EventEmitter } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { MatDialog } from '@angular/material'; +import { MatDialog } from '@angular/material/dialog'; import * as _ from 'lodash'; diff --git a/helix-front/client/tsconfig.app.json b/helix-front/client/tsconfig.app.json index 5e2507db5..5ea7521e0 100644 --- a/helix-front/client/tsconfig.app.json +++ b/helix-front/client/tsconfig.app.json @@ -2,12 +2,14 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", - "module": "es2015", "baseUrl": "", "types": [] }, - "exclude": [ - "test.ts", - "**/*.spec.ts" + "files": [ + "main.ts", + "polyfills.ts" + ], + "include": [ + "client/**/*.d.ts" ] } diff --git a/helix-front/client/tsconfig.spec.json b/helix-front/client/tsconfig.spec.json index 15458edba..a6d21fd52 100644 --- a/helix-front/client/tsconfig.spec.json +++ b/helix-front/client/tsconfig.spec.json @@ -2,7 +2,6 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", - "module": "commonjs", "target": "es5", "baseUrl": "", "types": [ diff --git a/helix-front/package.json b/helix-front/package.json index 9d14d331d..eba5744cc 100644 --- a/helix-front/package.json +++ b/helix-front/package.json @@ -26,58 +26,64 @@ "type:check:watch": "npm run type:check -- --watch" }, "engines": { - "node": "10.9.0", - "npm": "6.2.0" + "node": "10.13.0", + "npm": "6.4.1" }, "dependencies": { - "@angular/animations": "8.2.14", - "@angular/cdk": "8.2.3", - "@angular/common": "8.2.14", - "@angular/compiler": "8.2.14", - "@angular/core": "8.2.14", - "@angular/flex-layout": "^8.0.0-beta.27", - "@angular/forms": "8.2.14", - "@angular/material": "^8.2.3", - "@angular/platform-browser": "8.2.14", - "@angular/platform-browser-dynamic": "8.2.14", - "@angular/platform-server": "8.2.14", - "@angular/router": "8.2.14", + "@angular/animations": "9.1.13", + "@angular/cdk": "9.2.4", + "@angular/common": "9.1.13", + "@angular/compiler": "9.1.13", + "@angular/core": "9.1.13", + "@angular/flex-layout": "^9.0.0-beta.31", + "@angular/forms": "9.1.13", + "@angular/material": "^9.2.4", + "@angular/platform-browser": "9.1.13", + "@angular/platform-browser-dynamic": "9.1.13", + "@angular/platform-server": "9.1.13", + "@angular/router": "9.1.13", + "@egjs/hammerjs": "^2.0.17", "@swimlane/ngx-charts": "^13.0.4", - "@swimlane/ngx-datatable": "^16.1.1", + "@swimlane/ngx-datatable": "^17.1.0", "@swimlane/ngx-graph": "^7.0.0", "ajv": "^6.9.1", - "angulartics2": "^2.2.1", + "angulartics2": "^9.1.0", "body-parser": "^1.17.2", + "component-emitter": "^1.3.0", "core-js": "^2.4.1", "d3-shape": "^1.2.0", "dotenv": "^4.0.0", "express": "^4.15.3", "express-session": "^1.15.6", - "hammerjs": "^2.0.8", + "keycharm": "^0.3.0", "ldapjs": "^1.0.2", "lodash": "^4.17.12", "moment": "^2.29.2", "morgan": "^1.8.2", "ngx-clipboard": "^12.1.2", "ngx-json-viewer": "^2.3.0", - "ngx-vis": "^0.1.0", + "ngx-vis": "^3.1.0", "request": "^2.81.0", - "rxjs": "^6.6.7", + "rxjs": "^6.5.5", "rxjs-compat": "^6.0.0-rc.0", "sass": "^1.51.0", - "tsickle": "^0.37.0", - "tslib": "^1.9.0", + "tsickle": "^0.38.1", + "tslib": "^1.10.0", + "uuid": "^7.0.3", "vis": "^4.21.0", - "zone.js": "^0.9.1" + "vis-data": "^6.5.1", + "vis-util": "^4.0.0", + "xss": "^1.0.11", + "zone.js": "~0.10.2" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.803.29", - "@angular/cli": "8.3.29", - "@angular/compiler-cli": "8.2.14", + "@angular-devkit/build-angular": "~0.901.15", + "@angular/cli": "9.1.15", + "@angular/compiler-cli": "9.1.13", "@types/hammerjs": "^2.0.34", "@types/jasmine": "2.5.38", "@types/lodash": "4.14.120", - "@types/node": "~6.0.60", + "@types/node": "^12.11.1", "@types/request": "^2.0.0", "codelyzer": "^6.0.1", "concurrently": "^3.5.0", @@ -95,6 +101,6 @@ "rxjs-tslint": "^0.1.8", "ts-node": "~2.0.0", "tslint": "^5.8.0", - "typescript": "3.5.3" + "typescript": "3.8.3" } }