Upgrade to Angular 10

angular.json

@@ -11,6 +11,18 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "allowedCommonJsDependencies": [
+              "moment-timezone",
+              "js-yaml",
+              "webcola",
+              "dagre",
+              "lodash/isEqual",
+              "ajv",
+              "lodash/filter",
+              "lodash/map",
+              "lodash/uniqueId",
+              "lodash/cloneDeep"
+            ],
             "customWebpackConfig": {
               "path": "./dist-devkit/build/main.js"
             },

package.json

@@ -48,48 +48,48 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "^9.1.6",
-    "@angular/cdk": "^9.2.3",
-    "@angular/common": "^9.1.6",
-    "@angular/compiler": "^9.1.6",
-    "@angular/core": "^9.1.6",
-    "@angular/flex-layout": "^9.0.0-beta.29",
-    "@angular/forms": "^9.1.6",
-    "@angular/material": "^9.2.3",
-    "@angular/material-moment-adapter": "^9.2.3",
-    "@angular/platform-browser": "^9.1.6",
-    "@angular/platform-browser-dynamic": "^9.1.6",
-    "@angular/platform-server": "^9.1.6",
-    "@angular/router": "^9.1.6",
+    "@angular/animations": "^10.2.0",
+    "@angular/cdk": "^10.2.0",
+    "@angular/common": "^10.2.0",
+    "@angular/compiler": "^10.2.0",
+    "@angular/core": "^10.2.0",
+    "@angular/flex-layout": "^10.0.0-beta.32",
+    "@angular/forms": "^10.2.0",
+    "@angular/material": "^10.2.5",
+    "@angular/material-moment-adapter": "^10.2.5",
+    "@angular/platform-browser": "^10.2.0",
+    "@angular/platform-browser-dynamic": "^10.2.0",
+    "@angular/platform-server": "^10.2.0",
+    "@angular/router": "^10.2.0",
     "@cfstratos/ajsf-material": "^0.1.6",
     "@cfstratos/monaco-yaml": "^2.5.0",
-    "@ngrx/effects": "^9.1.2",
-    "@ngrx/router-store": "^9.1.2",
-    "@ngrx/store": "^9.1.2",
-    "@ngrx/store-devtools": "^9.1.2",
-    "@swimlane/ngx-charts": "^13.0.3",
-    "@swimlane/ngx-graph": "^7.0.1",
-    "@types/marked": "^0.7.4",
+    "@ngrx/effects": "^10.0.1",
+    "@ngrx/router-store": "^10.0.1",
+    "@ngrx/store": "^10.0.1",
+    "@ngrx/store-devtools": "^10.0.1",
+    "@swimlane/ngx-charts": "^16.0.0",
+    "@swimlane/ngx-graph": "^7.2.0",
+    "@types/marked": "^1.1.0",
     "@types/moment-timezone": "^0.5.13",
     "angular2-virtual-scroll": "^0.4.16",
     "core-js": "^3.6.5",
     "immer": "^6.0.3",
     "intersect": "^1.0.1",
     "lodash-es": "^4.17.14",
     "mappy-breakpoints": "^0.2.3",
-    "marked": "^0.8.2",
+    "marked": "^1.1.0",
     "moment": "^2.24.0",
-    "moment-timezone": "^0.5.28",
-    "ngrx-store-localstorage": "9.0.0",
+    "moment-timezone": "^0.5.13",
+    "ngrx-store-localstorage": "10.1.1",
     "ngx-moment": "^3.5.0",
     "ngx-monaco-editor": "^9.0.0",
     "normalizr": "^3.6.0",
     "reselect": "^4.0.0",
-    "rxjs": "^6.5.5",
-    "rxjs-spy": "^7.0.2",
+    "rxjs": "^6.6.3",
+    "rxjs-spy": "^7.5.2",
     "rxjs-websockets": "~8.0.1",
     "ts-md5": "^1.2.7",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.3",
     "web-animations-js": "^2.3.2",
     "xterm": "^4.5.0",
     "xterm-addon-fit": "^0.3.0",
@@ -100,26 +100,27 @@
     "node": "12.13.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^9.1.0",
-    "@angular-devkit/architect": "^0.901.7",
-    "@angular-devkit/build-angular": "^0.901.12",
-    "@angular-devkit/build-ng-packagr": "~0.901.5",
-    "@angular-devkit/core": "^9.1.7",
-    "@angular-devkit/schematics": "^9.1.5",
-    "@angular/cli": "^9.1.5",
-    "@angular/compiler-cli": "^9.1.6",
-    "@angular/language-service": "^9.1.6",
+    "@angular-builders/custom-webpack": "^10.0.1",
+    "@angular-devkit/architect": "^0.1002.0",
+    "@angular-devkit/build-angular": "^0.1002.0",
+    "@angular-devkit/build-ng-packagr": "~0.1002.0",
+    "@angular-devkit/core": "^10.2.0",
+    "@angular-devkit/schematics": "^10.2.0",
+    "@angular/cli": "^10.2.0",
+    "@angular/compiler-cli": "^10.2.0",
+    "@angular/language-service": "^10.2.0",
     "@schematics/angular": "^9.1.5",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "~2.0.8",
+    "@types/js-yaml": "^3.12.5",
     "@types/karma": "^5.0.0",
     "@types/node": "^13.11.1",
     "@types/request": "^2.48.4",
     "acorn": "^7.1.1",
     "adm-zip": "^0.4.16",
     "browserstack-local": "^1.4.5",
     "codecov": "^3.7.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^6.0.1",
     "copy-webpack-plugin": "^6.2.0",
     "delete": "^1.1.0",
     "fs-extra": "^9.0.0",
@@ -130,7 +131,7 @@
     "jasmine-core": "~3.5.0",
     "jasmine-protractor-browser-log-reporter": "cf-stratos/jasmine-protractor-browser-log-reporter",
     "jasmine-spec-reporter": "~5.0.1",
-    "js-yaml": "~3.13.1",
+    "js-yaml": "~3.14.0",
     "json-schema-to-typescript": "^9.1.0",
     "karma": "~5.0.1",
     "karma-chrome-launcher": "~3.1.0",
@@ -143,7 +144,7 @@
     "lodash": "^4.17.19",
     "mem": "6.1.0",
     "mktemp": "^1.0.0",
-    "ng-packagr": "^9.1.1",
+    "ng-packagr": "^10.1.2",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "protractor": "^5.4.3",
@@ -155,7 +156,7 @@
     "sass-lint": "^1.12.1",
     "stratos-protractor-reporter": "^1.2.3",
     "ts-node": "^8.8.2",
-    "tslint": "~6.1.1",
-    "typescript": "3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "4.0.5"
   }
 }

src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-credential/edit-autoscaler-credential.component.ts

@@ -120,7 +120,7 @@ export class EditAutoscalerCredentialComponent implements OnInit, OnDestroy {
           ...creds,
           authHeader: 'basic ' + btoa(`${creds.username}:${creds.password}`),
           fullUrl: `${creds.url}/v1/apps/${creds.app_id}/metrics`
-        }
+        };
       }),
       publishReplay(1),
       refCount()

src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-base-step.ts

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { Directive, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -7,7 +7,8 @@ import { StepOnNextFunction } from '../../../../core/src/shared/components/stepp
 import { AppAutoscalerPolicy, AppAutoscalerPolicyLocal } from '../../store/app-autoscaler.types';
 import { EditAutoscalerPolicyService } from './edit-autoscaler-policy-service';
 
-export abstract class EditAutoscalerPolicy implements OnInit {
+@Directive()
+export abstract class EditAutoscalerPolicyDirective implements OnInit {
   public currentPolicy: AppAutoscalerPolicyLocal;
   public appAutoscalerPolicy$: Observable<AppAutoscalerPolicy>;
   protected isCreate = false;
@@ -31,5 +32,5 @@ export abstract class EditAutoscalerPolicy implements OnInit {
   onNext: StepOnNextFunction = () => {
     this.service.setState(this.currentPolicy);
     return of({ success: true });
-  }
+  };
 }

src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step1/edit-autoscaler-policy-step1.component.ts

@@ -11,7 +11,7 @@ import { StepOnNextFunction } from '../../../../../core/src/shared/components/st
 import { autoscalerTransformArrayToMap } from '../../../core/autoscaler-helpers/autoscaler-transform-policy';
 import { PolicyAlert } from '../../../core/autoscaler-helpers/autoscaler-util';
 import { numberWithFractionOrExceedRange } from '../../../core/autoscaler-helpers/autoscaler-validation';
-import { EditAutoscalerPolicy } from '../edit-autoscaler-policy-base-step';
+import { EditAutoscalerPolicyDirective } from '../edit-autoscaler-policy-base-step';
 import { EditAutoscalerPolicyService } from '../edit-autoscaler-policy-service';
 
 @Component({
@@ -22,7 +22,7 @@ import { EditAutoscalerPolicyService } from '../edit-autoscaler-policy-service';
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ]
 })
-export class EditAutoscalerPolicyStep1Component extends EditAutoscalerPolicy implements OnInit {
+export class EditAutoscalerPolicyStep1Component extends EditAutoscalerPolicyDirective implements OnInit {
 
   policyAlert = PolicyAlert;
   timezoneOptions = moment.tz.names();
@@ -68,10 +68,10 @@ export class EditAutoscalerPolicyStep1Component extends EditAutoscalerPolicy imp
     this.currentPolicy.schedules.timezone = this.editLimitForm.get('timezone').value;
     this.service.setState(this.currentPolicy);
     return observableOf({ success: true });
-  }
+  };
 
   validateGlobalLimitMin(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       const invalid = this.editLimitForm ?
         numberWithFractionOrExceedRange(control.value, 1, this.editLimitForm.get('instance_max_count').value - 1, true) : false;
       const lastValid = this.editLimitValid;
@@ -84,7 +84,7 @@ export class EditAutoscalerPolicyStep1Component extends EditAutoscalerPolicy imp
   }
 
   validateGlobalLimitMax(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       const invalid = this.editLimitForm ? numberWithFractionOrExceedRange(control.value,
         this.editLimitForm.get('instance_min_count').value + 1, Number.MAX_VALUE, true) : false;
       const lastValid = this.editLimitValid;

src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step2/edit-autoscaler-policy-step2.component.ts

@@ -20,7 +20,7 @@ import {
   numberWithFractionOrExceedRange,
 } from '../../../core/autoscaler-helpers/autoscaler-validation';
 import { AppAutoscalerInvalidPolicyError, AppAutoscalerPolicyLocal } from '../../../store/app-autoscaler.types';
-import { EditAutoscalerPolicy } from '../edit-autoscaler-policy-base-step';
+import { EditAutoscalerPolicyDirective } from '../edit-autoscaler-policy-base-step';
 import { EditAutoscalerPolicyService } from '../edit-autoscaler-policy-service';
 
 @Component({
@@ -31,7 +31,7 @@ import { EditAutoscalerPolicyService } from '../edit-autoscaler-policy-service';
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ]
 })
-export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy implements OnInit, OnDestroy {
+export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicyDirective implements OnInit, OnDestroy {
 
   policyAlert = PolicyAlert;
   metricTypes = AutoscalerConstants.MetricTypes;
@@ -83,14 +83,14 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
     this.filteredMetricTypes$ = this.editTriggerForm.controls.metric_type.valueChanges.pipe(
       startWith(''),
       map(value => this.metricTypes.filter(type => type.toLocaleLowerCase().includes(value)))
-    )
+    );
   }
 
   addTrigger = () => {
     const { ...newTrigger } = AutoscalerConstants.PolicyDefaultTrigger;
     this.currentPolicy.scaling_rules_form.push(newTrigger);
     this.editTrigger(this.currentPolicy.scaling_rules_form.length - 1);
-  }
+  };
 
   removeTrigger(index: number) {
     if (this.editIndex === index) {
@@ -143,7 +143,7 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
   }
 
   validateTriggerMetricType(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (!this.editTriggerForm) {
         return null;
       }
@@ -158,7 +158,7 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
   }
 
   validateTriggerOperator(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (this.editTriggerForm) {
         this.editScaleType = getScaleType(control.value);
         this.editTriggerForm.controls.threshold.updateValueAndValidity();
@@ -168,7 +168,7 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
   }
 
   validateTriggerThreshold(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (!this.editTriggerForm) {
         return null;
       }
@@ -188,7 +188,7 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
   }
 
   validateTriggerAdjustment(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (!this.editTriggerForm) {
         return null;
       }
@@ -202,7 +202,7 @@ export class EditAutoscalerPolicyStep2Component extends EditAutoscalerPolicy imp
   }
 
   validateTriggerAdjustmentType(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (this.editTriggerForm) {
         this.editAdjustmentType = control.value;
         this.editTriggerForm.controls.adjustment.updateValueAndValidity();

src/frontend/packages/cf-autoscaler/src/features/edit-autoscaler-policy/edit-autoscaler-policy-step3/edit-autoscaler-policy-step3.component.ts

@@ -13,7 +13,7 @@ import {
   timeIsSameOrAfter,
 } from '../../../core/autoscaler-helpers/autoscaler-validation';
 import { AppAutoscalerInvalidPolicyError, AppAutoscalerPolicyLocal } from '../../../store/app-autoscaler.types';
-import { EditAutoscalerPolicy } from '../edit-autoscaler-policy-base-step';
+import { EditAutoscalerPolicyDirective } from '../edit-autoscaler-policy-base-step';
 import { EditAutoscalerPolicyService } from '../edit-autoscaler-policy-service';
 import {
   validateRecurringSpecificMax,
@@ -28,7 +28,7 @@ import {
     { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher }
   ]
 })
-export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy implements OnInit {
+export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicyDirective implements OnInit {
 
   policyAlert = PolicyAlert;
   weekdayOptions = AutoscalerConstants.WeekdayOptions;
@@ -71,7 +71,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
     const { ...newSchedule } = AutoscalerConstants.PolicyDefaultRecurringSchedule;
     this.currentPolicy.schedules.recurring_schedule.push(newSchedule);
     this.editRecurringSchedule(this.currentPolicy.schedules.recurring_schedule.length - 1);
-  }
+  };
 
   removeRecurringSchedule(index: number) {
     if (this.editIndex === index) {
@@ -160,7 +160,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
   }
 
   validateRecurringScheduleGlobal(controlName?: string): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (this.editRecurringScheduleForm) {
         if (controlName === 'repeat_type') {
           this.editRepeatType = control.value;
@@ -177,7 +177,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
   }
 
   validateRecurringScheduleInitialMin(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       const invalid = this.editRecurringScheduleForm &&
         numberWithFractionOrExceedRange(control.value, this.editRecurringScheduleForm.get('instance_min_count').value,
           this.editRecurringScheduleForm.get('instance_max_count').value + 1, false);
@@ -186,7 +186,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
   }
 
   validateRecurringScheduleDate(mutualName: string): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       if (this.editEffectiveType === 'always') {
         return null;
       }
@@ -206,7 +206,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
   }
 
   validateRecurringScheduleTime(mutualName: string): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       const invalid = this.editRecurringScheduleForm &&
         timeIsSameOrAfter(this.editRecurringScheduleForm.get('start_time').value, this.editRecurringScheduleForm.get('end_time').value);
       const lastValid = this.editMutualValidation.time;
@@ -217,7 +217,7 @@ export class EditAutoscalerPolicyStep3Component extends EditAutoscalerPolicy imp
   }
 
   validateRecurringScheduleWeekMonth(): ValidatorFn {
-    return (control: AbstractControl): { [key: string]: any } => {
+    return (control: AbstractControl): { [key: string]: any, } => {
       const newSchedule: any = {
         start_time: this.editRecurringScheduleForm.get('start_time').value,
         end_time: this.editRecurringScheduleForm.get('end_time').value