Skip to content
Permalink
Browse files
Upgrade helix-front to Angular 9.1 (#2125)
Fix security vulnerabilities in helix-front dependencies.
Upgrade helix-front dependencies to improve contributor productivity.
  • Loading branch information
micahstubbs committed Jun 2, 2022
1 parent 2097a08 commit ac0af966778ad77d0d2811ad71957546ff84dfb6
Show file tree
Hide file tree
Showing 19 changed files with 118 additions and 104 deletions.
@@ -0,0 +1 @@
v10.13.0
@@ -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,
@@ -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);
@@ -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();
}));
@@ -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() {
@@ -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,
@@ -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';
@@ -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';
@@ -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)
@@ -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';
@@ -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',
@@ -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',
@@ -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',
@@ -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';
@@ -54,7 +54,6 @@ import {
import {
MatExpansionModule
} from '@angular/material/expansion';
import 'hammerjs';

@NgModule({
imports: [
@@ -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';

0 comments on commit ac0af96

Please sign in to comment.