Fix npm vulnerabilities

frontend/angular.json

@@ -29,8 +29,7 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": [],
-            "es5BrowserSupport": true
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -175,4 +174,4 @@
     }
   },
   "defaultProject": "frontend"
-}
+}

frontend/package.json

@@ -12,48 +12,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.12",
-    "@angular/cdk": "^7.3.7",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
-    "@angular/material": "^7.3.7",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
-    "@fortawesome/angular-fontawesome": "^0.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.18",
-    "@fortawesome/free-brands-svg-icons": "^5.8.2",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "core-js": "^2.5.4",
+    "@angular/animations": "^10.0.4",
+    "@angular/cdk": "^10.0.4",
+    "@angular/common": "^10.0.4",
+    "@angular/compiler": "^10.0.4",
+    "@angular/core": "^10.0.4",
+    "@angular/forms": "^10.0.4",
+    "@angular/material": "^10.0.4",
+    "@angular/platform-browser": "^10.0.4",
+    "@angular/platform-browser-dynamic": "^10.0.4",
+    "@angular/router": "^10.0.4",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "core-js": "^3.6.5",
     "fontawesome": "^5.6.3",
     "hammerjs": "^2.0.8",
-    "lodash": "^4.17.11",
+    "lodash": "^4.17.19",
     "material-icons": "^0.3.1",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26"
+    "node-sass": "^4.14.1",
+    "rxjs": "^6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/cli": "~7.3.0",
-    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "@angular-devkit/build-angular": "^0.1000.4",
+    "@angular/cli": "^10.0.4",
+    "@angular/compiler-cli": "^10.0.4",
+    "@angular/language-service": "^10.0.4",
+    "@types/jasmine": "^3.5.11",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^14.0.26",
+    "codelyzer": "~6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.2",
+    "karma": "~5.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "~3.3.1",
+    "karma-jasmine-html-reporter": "^1.5.4",
+    "protractor": "^7.0.0",
+    "ts-node": "~8.10.2",
+    "tslint": "~6.1.2",
+    "typescript": "~3.9.7"
   }
 }

frontend/src/app/app.module.ts

@@ -19,7 +19,7 @@ import { faDocker } from "@fortawesome/free-brands-svg-icons";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
-import { MaterialImportsModule } from "./utils/imports";
+import { MaterialModule } from "./utils/imports";
 
 import { NamespaceService } from "./services/namespace.service";
 import { KubernetesService } from "./services/kubernetes.service";
@@ -83,7 +83,7 @@ import { FormGpusComponent } from "./resource-form/form-gpus/form-gpus.component
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    MaterialImportsModule,
+    MaterialModule,
     FontAwesomeModule,
     BrowserAnimationsModule,
     FormsModule,

frontend/src/app/main-table/resource-table/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
 
 interface DialogConfig {
   title: string;

frontend/src/app/main-table/resource-table/resource-table.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { MatSort, MatTableDataSource, MatDialog } from "@angular/material";
+import { MatSort } from "@angular/material/sort";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 import { Subscription } from "rxjs";
 import { first } from "rxjs/operators";
 import { isEqual } from "lodash";

frontend/src/app/services/snack-bar.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { MatSnackBar } from "@angular/material";
+import { MatSnackBar } from "@angular/material/snack-bar";
 import { SnackBarComponent } from "./snack-bar/snack-bar.component";
 import { SnackType } from "../utils/types";
 

frontend/src/app/services/snack-bar/snack-bar.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from "@angular/material";
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from "@angular/material/snack-bar";
 import { SnackType } from "src/app/utils/types";
 
 @Component({

frontend/src/app/utils/imports.ts

@@ -1,33 +1,30 @@
-import { NgModule } from "@angular/core";
+import { ModuleWithProviders, NgModule} from "@angular/core";
+import { MatIconRegistry } from '@angular/material/icon';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
-import {
+const materialModules = [
   MatButtonModule,
-  MatMenuModule,
-  MatToolbarModule,
-  MatSidenavModule,
-  MatIconModule,
-  MatCardModule,
-  MatTableModule,
-  MatDividerModule,
-  MatSortModule,
-  MatAutocompleteModule,
-  MatFormFieldModule,
-  MatInputModule,
-  MatDialogModule,
-  MatGridListModule,
-  MatExpansionModule,
-  MatCheckboxModule,
-  MatSelectModule,
-  MatListModule,
-  MatSnackBarModule,
-  MatTooltipModule,
-  MatProgressSpinnerModule,
-  MatSlideToggleModule
-} from "@angular/material";
-
-@NgModule({
-  imports: [
-    MatButtonModule,
     MatMenuModule,
     MatToolbarModule,
     MatIconModule,
@@ -49,30 +46,24 @@ import {
     MatTooltipModule,
     MatProgressSpinnerModule,
     MatSlideToggleModule
-  ],
-  exports: [
-    MatButtonModule,
-    MatMenuModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatCardModule,
-    MatSidenavModule,
-    MatTableModule,
-    MatDividerModule,
-    MatSortModule,
-    MatAutocompleteModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatDialogModule,
-    MatGridListModule,
-    MatExpansionModule,
-    MatCheckboxModule,
-    MatSelectModule,
-    MatListModule,
-    MatSnackBarModule,
-    MatTooltipModule,
-    MatProgressSpinnerModule,
-    MatSlideToggleModule
-  ]
+]
+
+@NgModule({
+    imports: [ ...materialModules ],
+    exports: [...materialModules
+    ],
+    providers: [     
+    ]
 })
-export class MaterialImportsModule {}
+export class MaterialModule {
+    constructor(public matIconRegistry: MatIconRegistry) {
+    }
+
+    static forRoot(): ModuleWithProviders<MaterialModule> {
+        return {
+            ngModule: MaterialModule,
+            providers: [MatIconRegistry]
+        }
+    }
+}
+