Upgrade helix-front to Angular 12.2 (#2131)
Fix security vulnerabilities in helix-front dependencies.
Upgrade helix-front dependencies to improve contributor productivity.
diff --git a/helix-front/angular.json b/helix-front/angular.json
index adc7e35..99a33d6 100644
--- a/helix-front/angular.json
+++ b/helix-front/angular.json
@@ -25,21 +25,26 @@
"client/styles.scss",
"client/theme.scss"
],
- "scripts": []
+ "scripts": [],
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "buildOptimizer": false,
+ "sourceMap": true,
+ "optimization": false,
+ "namedChunks": true
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
- "maximumWarning": "3503kb"
+ "maximumWarning": "3523kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
- "aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
@@ -49,20 +54,25 @@
"with": "client/environments/environment.prod.ts"
}
]
- }
- }
+ },
+ "development": {}
+ },
+ "defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
- "browserTarget": "helix-front:build",
"proxyConfig": "./proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "helix-front:build:production"
+ },
+ "development": {
+ "browserTarget": "helix-front:build:development"
}
- }
+ },
+ "defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
@@ -110,7 +120,8 @@
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "helix-front:serve"
- }
+ },
+ "configurations": {}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss b/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss
index 391ff96..ed53ffb 100644
--- a/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss
+++ b/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss
@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
@import 'client/theme.scss';
.mat-spinner {
@@ -6,7 +7,7 @@
.cluster-list-item-selected h4 {
font-weight: 500;
- color: mat-color($hi-primary);
+ color: mat.get-color-from-palette($hi-primary);
}
.error-message {
diff --git a/helix-front/client/app/cluster/cluster.component.scss b/helix-front/client/app/cluster/cluster.component.scss
index e913047..7a988c3 100644
--- a/helix-front/client/app/cluster/cluster.component.scss
+++ b/helix-front/client/app/cluster/cluster.component.scss
@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
.mat-sidenav {
width: 25vw;
min-width: 200px;
@@ -9,7 +7,7 @@
position: fixed;
top: 50%;
z-index: 3;
- transition: $swift-ease-out;
+ transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
&.open {
diff --git a/helix-front/client/app/history/history-list/history-list.component.scss b/helix-front/client/app/history/history-list/history-list.component.scss
index 459c950..a3b60d9 100644
--- a/helix-front/client/app/history/history-list/history-list.component.scss
+++ b/helix-front/client/app/history/history-list/history-list.component.scss
@@ -1,11 +1,11 @@
// Import theming functions
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
// Import custom theme
@import 'client/theme.scss';
hi-history-list {
.current {
- color: mat-color($hi-primary);
+ color: mat.get-color-from-palette($hi-primary);
}
.mat-icon {
diff --git a/helix-front/client/app/instance/instance-list/instance-list.component.scss b/helix-front/client/app/instance/instance-list/instance-list.component.scss
index 878bc98..1fe2cbe 100644
--- a/helix-front/client/app/instance/instance-list/instance-list.component.scss
+++ b/helix-front/client/app/instance/instance-list/instance-list.component.scss
@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.info {
padding: 24px;
}
.status-healthy {
- color: mat-color(mat-palette($mat-blue));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
}
.status-not-healthy {
- color: mat-color(mat-palette($mat-grey, 900, 900, 900));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900));
}
diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.scss b/helix-front/client/app/resource/partition-list/partition-list.component.scss
index 4ef24e2..dad3a24 100644
--- a/helix-front/client/app/resource/partition-list/partition-list.component.scss
+++ b/helix-front/client/app/resource/partition-list/partition-list.component.scss
@@ -1,15 +1,15 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
div.message {
padding: 20px;
}
.status-ready {
- color: mat-color(mat-palette($mat-blue));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
}
.status-not-ready {
- color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
+ color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900), darker);
}
.footer {
diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.scss b/helix-front/client/app/resource/resource-detail/resource-detail.component.scss
index bb71765..d0c7c6d 100644
--- a/helix-front/client/app/resource/resource-detail/resource-detail.component.scss
+++ b/helix-front/client/app/resource/resource-detail/resource-detail.component.scss
@@ -1,9 +1,10 @@
+@use '~@angular/material' as mat;
@import 'client/theme.scss';
.offline {
font-size: 14px;
padding-left: 24px;
- color: mat-color($hi-warn);
+ color: mat.get-color-from-palette($hi-warn);
}
.information {
diff --git a/helix-front/client/app/shared/data-table/data-table.component.scss b/helix-front/client/app/shared/data-table/data-table.component.scss
index 9b1c6c4..0de0e8c 100644
--- a/helix-front/client/app/shared/data-table/data-table.component.scss
+++ b/helix-front/client/app/shared/data-table/data-table.component.scss
@@ -1,10 +1,11 @@
+@use '~@angular/material' as mat;
@import 'client/theme.scss';
.mat-icon {
@include md-icon-size(20px);
&:hover {
- color: mat-color($hi-warn);
+ color: mat.get-color-from-palette($hi-warn);
}
}
diff --git a/helix-front/client/app/shared/detail-header/detail-header.component.scss b/helix-front/client/app/shared/detail-header/detail-header.component.scss
index e17143d..7ca69b9 100644
--- a/helix-front/client/app/shared/detail-header/detail-header.component.scss
+++ b/helix-front/client/app/shared/detail-header/detail-header.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.secondary {
color: rgba(0, 0, 0, 0.54);
@@ -18,22 +18,22 @@
}
.cluster {
- background-color: mat-color(mat-palette($mat-indigo));
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$indigo-palette));
}
.controller {
- background-color: mat-color(mat-palette($mat-purple));
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$purple-palette));
}
.resource {
- background-color: mat-color(mat-palette($mat-teal));
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$teal-palette));
}
.instance {
- background-color: mat-color(mat-palette($mat-blue));
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
}
.workflow {
- background-color: mat-color(mat-palette($mat-deep-orange));
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
}
}
diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss
index a3bdc51..cf674fc 100644
--- a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss
+++ b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.status-disabled {
margin-left: 10px;
@@ -6,7 +6,7 @@
font-size: 12px;
line-height: 40px;
border-radius: 4px;
- border: 1px solid mat-color(mat-palette($mat-red), 900);
- background-color: mat-color(mat-palette($mat-red), darker);
+ border: 1px solid mat.get-color-from-palette(mat.define-palette(mat.$red-palette), 900);
+ background-color: mat.get-color-from-palette(mat.define-palette(mat.$red-palette), darker);
color: rgb(255, 255, 255);
}
diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.scss b/helix-front/client/app/shared/node-viewer/node-viewer.component.scss
index a1e27f2..e6adcec 100644
--- a/helix-front/client/app/shared/node-viewer/node-viewer.component.scss
+++ b/helix-front/client/app/shared/node-viewer/node-viewer.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
@import 'client/theme.scss';
.node-viewer {
@@ -6,7 +6,7 @@
}
.primary {
- color: mat-color($hi-primary);
+ color: mat.get-color-from-palette($hi-primary);
}
.search-form-field {
@@ -36,7 +36,7 @@
@include md-icon-size(20px);
&:hover {
- color: mat-color($hi-warn);
+ color: mat.get-color-from-palette($hi-warn);
}
}
}
diff --git a/helix-front/client/app/shared/state-label/state-label.component.scss b/helix-front/client/app/shared/state-label/state-label.component.scss
index 06fcd3c..6380391 100644
--- a/helix-front/client/app/shared/state-label/state-label.component.scss
+++ b/helix-front/client/app/shared/state-label/state-label.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.state-label {
font-size: 12px;
@@ -9,9 +9,9 @@
}
.state-label-ready {
- border-color: mat-color(mat-palette($mat-blue), darker);
+ border-color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette), darker);
}
.state-label-not-ready {
- border-color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
+ border-color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900), darker);
}
diff --git a/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss b/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss
index 87fd120..dca5699 100644
--- a/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss
+++ b/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss
@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.state-default {
- fill: mat-color(mat-palette($mat-deep-orange));
+ fill: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
}
.state-COMPLETED {
- fill: mat-color(mat-palette($mat-green));
+ fill: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
}
.state-PENDING {
- fill: mat-color(mat-palette($mat-grey));
+ fill: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
}
diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss
index 0c43021..b57dc26 100644
--- a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss
+++ b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss
@@ -1,17 +1,17 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
.content {
padding: 20px;
}
.state-default {
- color: mat-color(mat-palette($mat-deep-orange));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
}
.state-COMPLETED {
- color: mat-color(mat-palette($mat-green));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
}
.state-PENDING {
- color: mat-color(mat-palette($mat-grey));
+ color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
}
diff --git a/helix-front/client/polyfills.ts b/helix-front/client/polyfills.ts
index 729c4eb..f9a66f9 100644
--- a/helix-front/client/polyfills.ts
+++ b/helix-front/client/polyfills.ts
@@ -53,7 +53,7 @@
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
diff --git a/helix-front/client/theme.scss b/helix-front/client/theme.scss
index 5f425a2..03c6106 100644
--- a/helix-front/client/theme.scss
+++ b/helix-front/client/theme.scss
@@ -1,7 +1,7 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
// Include the common styles for Angular Material
-@include mat-core();
+@include mat.core();
@mixin md-icon-size($size: 24px) {
font-size: $size;
@@ -26,22 +26,22 @@
A200: #86BAFF,
A400: #539DFF,
A700: #3A8FFF,
- contrast: map-get($mat-indigo, contrast)
+ contrast: map-get(mat.$indigo-palette, contrast)
);
// Define the palettes for the theme using the Material Design palettes available in palette.scss
// For each palette, optionally specify a default, lighter, and darker hue.
-$hi-primary: mat-palette($hi-nuage);
-$hi-accent: mat-palette($mat-pink, A200, A100, A400);
+$hi-primary: mat.define-palette($hi-nuage);
+$hi-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$hi-warn: mat-palette($mat-red);
+$hi-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
-$hi-theme: mat-light-theme($hi-primary, $hi-accent, $hi-warn);
+$hi-theme: mat.define-light-theme($hi-primary, $hi-accent, $hi-warn);
// Include theme styles for core and each component used in the app
-@include angular-material-theme($hi-theme);
+@include mat.all-component-themes($hi-theme);
// Additional adjusts by vivo
.mat-toolbar {
diff --git a/helix-front/package.json b/helix-front/package.json
index 6547e81..bdb8f43 100644
--- a/helix-front/package.json
+++ b/helix-front/package.json
@@ -13,7 +13,7 @@
],
"scripts": {
"ng": "ng",
- "build": "rm -rf dist && mkdir dist && ng build --aot --prod && tsc -p server",
+ "build": "rm -rf dist && mkdir dist && ng build --aot --configuration production && tsc -p server",
"start": "tsc -p server && concurrently -r \"ng serve\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"",
"prod": "npm run build && node dist/server/app.js",
"test": "ng test",
@@ -31,21 +31,21 @@
"npm": "6.14.11"
},
"dependencies": {
- "@angular/animations": "11.2.14",
- "@angular/cdk": "11.2.13",
- "@angular/common": "11.2.14",
- "@angular/compiler": "11.2.14",
- "@angular/core": "11.2.14",
- "@angular/flex-layout": "^11.0.0-beta.33",
- "@angular/forms": "11.2.14",
- "@angular/material": "^11.2.13",
- "@angular/platform-browser": "11.2.14",
- "@angular/platform-browser-dynamic": "11.2.14",
- "@angular/platform-server": "11.2.14",
- "@angular/router": "11.2.14",
+ "@angular/animations": "12.2.16",
+ "@angular/cdk": "12.2.13",
+ "@angular/common": "12.2.16",
+ "@angular/compiler": "12.2.16",
+ "@angular/core": "12.2.16",
+ "@angular/flex-layout": "^12.0.0-beta.35",
+ "@angular/forms": "12.2.16",
+ "@angular/material": "^12.2.13",
+ "@angular/platform-browser": "12.2.16",
+ "@angular/platform-browser-dynamic": "12.2.16",
+ "@angular/platform-server": "12.2.16",
+ "@angular/router": "12.2.16",
"@egjs/hammerjs": "^2.0.17",
"@swimlane/ngx-charts": "^16.0.0",
- "@swimlane/ngx-datatable": "^19.0.0",
+ "@swimlane/ngx-datatable": "^20.0.0",
"@swimlane/ngx-graph": "^8.0.0-rc.2",
"ajv": "^6.9.1",
"angulartics2": "^10.1.0",
@@ -69,19 +69,19 @@
"rxjs-compat": "^6.0.0-rc.0",
"sass": "^1.51.0",
"timsort": "^0.3.0",
- "tsickle": "github:angular/tsickle#fdf6e86717648f1b9603752cb83486fa6dcac38f",
+ "tsickle": "^0.43.0",
"tslib": "^2.0.0",
"uuid": "^7.0.3",
"vis": "^4.21.0",
"vis-data": "^6.5.1",
"vis-util": "^4.0.0",
"xss": "^1.0.11",
- "zone.js": "~0.10.2"
+ "zone.js": "~0.11.4"
},
"devDependencies": {
- "@angular-devkit/build-angular": "~0.1102.19",
- "@angular/cli": "11.2.19",
- "@angular/compiler-cli": "11.2.14",
+ "@angular-devkit/build-angular": "~12.2.17",
+ "@angular/cli": "12.2.17",
+ "@angular/compiler-cli": "12.2.16",
"@types/hammerjs": "^2.0.34",
"@types/jasmine": "~3.6.0",
"@types/lodash": "4.14.120",
@@ -103,6 +103,6 @@
"rxjs-tslint": "^0.1.8",
"ts-node": "~2.0.0",
"tslint": "^6.1.3",
- "typescript": "4.0.8"
+ "typescript": "4.3.5"
}
}
diff --git a/helix-front/tsconfig.json b/helix-front/tsconfig.json
index a10f859..a059a5e 100644
--- a/helix-front/tsconfig.json
+++ b/helix-front/tsconfig.json
@@ -7,7 +7,6 @@
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
- "emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES2015",
"skipLibCheck": true,
