parent 515a3ba

author Micah Stubbs <micah.stubbs@gmail.com> 1652219675 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121803 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121552 -0700 parent ed990b8 author Micah Stubbs <micah.stubbs@gmail.com> 1651701734 -0700 committer Micah Stubbs <micah.stubbs@gmail.com> 1654121488 -0700 ng update @angular/cli --from=5.2.11 --to=6 --migrate-only add engines, remove volta since it conflicts with necessary global angular-cli ngx-dag@0.0.2 --> @swimlane/ngx-graph@6.0.0 npm i -D rxjs-tslint, add rxjs specific linting rules, add lint:tslint alternative linting script npm install @angular/cdk@6.1.0 npm install @angular/{animations,cdk,common,compiler,compiler-cli,core,forms,material,platform-browser,platform-browser-dynamic,platform-server,router}@6.1.0 npm i ajv@6.9.1 npm i codelyzer@6.0.1 npm i ngx-clipboard@11.1.5 npm i tsickle@0.32.1 restore rxjs-compat@6.0.0-rc.0 to fix rxjs issue at npm run build WIP state with new Reactive Form Revert "WIP state with new Reactive Form" This reverts commit f9e2e37. upgrade to typescript@^3.2.4 pin typescript at 3.2.4 manually update @angular/material to ^7.2.16 npm i @angular/flex-layout@7.0.0-beta.24 npm i tsickle@0.34.2 npm i @swimlane/ngx-datatable@14.0.0 npm i @swimlane/ngx-graph@6.0.0-rc.2 ObservableMedia --> MediaObserver to handle breaking change introduce in @angular/flex-layout@7.0.0-beta.23 npm i @swimlane/ngx-charts@11.2.0 manually upgrade to Angular 8.2.14 and associated major deps fix new TypeScript errors update bundle target to ES2015 since Angular 8 now automatically creates an ES5 compat build too @ViewChild {static: true} NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/material@8 --force use @angular/core@8.2.3 and friends, fix bad upgrade script that jumped ahead to v9 npm i typescript@3.5.3 npm i zone.js@~0.9.1 npm i tsickle@0.37.0 npm i @angular/flex-layout@8.0.0-beta.27 npm i @swimlane/ngx-datatable@16.0.0 npm i @ngtools/webpack@9.0.0-next.7 npm uninstall node-sass && npm i sass nvm use 10.9.0 && npm i manually update material imports, use deep imports npm i -D @angular-devkit/build-angular@0.803.29 npm i ngx-clipboard@12.1.2 npm i @swimlane/ngx-charts@13.0.4 npm i @swimlane/ngx-graph@7.0.0 npm i @swimlane/ngx-datatable@16.0.3 npm i @swimlane/ngx-datatable@16.1.0 update ngx-datatable style paths: no longer a release folder nvm use 10.13.0 Angular CLI update for packages - @angular/core@9, @angular/cli@9 @angular/cli migration - workspace-version-9 Angular Workspace migration. Update an Angular CLI workspace to version 9. @angular/cli migration - schematic-options-9 Replace deprecated 'styleext' and 'spec' Angular schematic options. npm i tsickle@0.38.1 add generic type to ModuleWithProviders in app routing module npm i rxjs@6.5.5 NG_DISABLE_VERSION_CHECK=1 npx @angular/cli@9 update @angular/material@9 --force npm i @angular/flex-layout@9.0.0-beta.31 ngForm --> ng-form npm i angulartics2@9.1.0 Anglartics2Piwik --> Angulartics2Matomo Revert "Anglartics2Piwik --> Angulartics2Matomo" This reverts commit 30d00dc. update piwik import specify one budget of 500k for initial js needed to bootstrap app ng-form --> ngForm npm i ngx-vis@3.1.0 install peer deps for ngx-vis npm i ngx-vis@2.3.2 Revert "npm i ngx-vis@2.3.2" This reverts commit 0dd8588. update dashboard network vis code to new syntax from ngx-vis@3 increase build budget to 3503kb, using current es5 build size as the baseline use array instead to DataSet to fix tests temporarily disable tracking lib angulartics to work around v9 bug, re-enable at v10 fix lint config path. should be client add npm run lint:fix script npm run lint:fix disable linting rules that generate new errors for now remove obsolete property decorator linting rules remove deprecated linting rules remove duplicate import, properly turn off linting rules with new failures npm i upgrade helix-front to Angular 10.2 remove entryComponents in shared.module.ts since Ivy renderer does not use these npx @angular/cli@10 update @angular/core@10 @angular/cli@10 npx @angular/cli@10 update @angular/material@10 --force npm i @angular/flex-layout@10.0.0-beta.32 npm i jasmine-core@3.8 npm i codelyzer@6.0.2 npm i angulartics2@10.1.0 npm i @swimlane/ngx-graph@7.2.0 npm i @swimlane/ngx-graph@7.2.0 npm i @swimlane/ngx-datatable@18.0.0 npm i @swimlane/ngx-charts@16.0.0 nvm use 12.20.2 async --> waitForAsync async --> waitForAsync in the rest of the tests mock http calls in config detail component guard data loading use HttpClientTestingModule to mock http calls handle case where not found is returned add error handling at login service fix errors with better error handling in user.ts
apache · Jun 1, 2022 · 5bdb25c · 5bdb25c
1 parent 515a3ba
commit 5bdb25c
Show file tree

Hide file tree

Showing 79 changed files with 12,789 additions and 10,260 deletions.
diff --git a/helix-front/.nvmrc b/helix-front/.nvmrc
@@ -0,0 +1 @@
+v12.20.2
diff --git 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,
@@ -86,8 +93,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "client/tsconfig.app.json",
+              "client/tsconfig.spec.json"
             ],
             "exclude": []
           }
@@ -122,7 +129,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "hi",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "hi"

diff --git 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
@@ -1,16 +1,17 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } 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';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        TestingModule
+        TestingModule,
       ],
       declarations: [
         AppComponent
@@ -21,25 +22,25 @@ describe('AppComponent', () => {
       ],
       // TODO vxu: I don't want to add the following two but ...
       providers: [
-        Angulartics2,
-        Angulartics2Piwik
+        // Angulartics2,
+        // Angulartics2Piwik,
       ]
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 
-  it(`should have a variable controlling footer`, async(() => {
+  it(`should have a variable controlling footer`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.footerEnabled).toBeDefined();
   }));
 
-  xit('should render title in a mat-toolbar', async(() => {
+  xit('should render title in a mat-toolbar', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

diff --git 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() {
@@ -87,13 +88,29 @@ export class AppComponent implements OnInit {
             .subscribe(
               isAuthorized => {
                 if (!isAuthorized) {
-                  this.helper.showError("You're not part of helix-admin group or password incorrect");
+                  this.helper.showError('You\'re not part of helix-admin group or password incorrect');
                 }
                 this.currentUser = this.service.getCurrentUser();
               },
-              error => this.helper.showError(error)
+              error => {
+                // since rest API simply throws 404 instead of empty config when config is not initialized yet
+                // frontend has to treat 404 as normal result
+                if (error != 'Not Found') {
+                  this.helper.showError(error);
+                }
+                this.isLoading = false;
+              },
             );
         }
-      });
+      },
+      error => {
+        // since rest API simply throws 404 instead of empty config when config is not initialized yet
+        // frontend has to treat 404 as normal result
+        if (error != 'Not Found') {
+          this.helper.showError(error);
+        }
+        this.isLoading = false;
+      },
+      );
   }
 }
diff --git 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/chooser/helix-list/helix-list.component.spec.ts b/helix-front/client/app/chooser/helix-list/helix-list.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -9,7 +9,7 @@ describe('HelixListComponent', () => {
   let component: HelixListComponent;
   let fixture: ComponentFixture<HelixListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

diff --git a/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.spec.ts b/helix-front/client/app/cluster/cluster-detail/cluster-detail.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -8,7 +8,7 @@ describe('ClusterDetailComponent', () => {
   let component: ClusterDetailComponent;
   let fixture: ComponentFixture<ClusterDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

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
@@ -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.spec.ts b/helix-front/client/app/cluster/cluster-list/cluster-list.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TestingModule } from '../../../testing/testing.module';
@@ -8,7 +8,7 @@ describe('ClusterListComponent', () => {
   let component: ClusterListComponent;
   let fixture: ComponentFixture<ClusterListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule

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
@@ -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';
@@ -15,9 +16,9 @@ import { InputDialogComponent } from '../../shared/dialog/input-dialog/input-dia
 export class ClusterListComponent implements OnInit {
 
   clusters: Cluster[] = [];
-  errorMessage: string = '';
-  isLoading: boolean = true;
-  can: boolean = false;
+  errorMessage = '';
+  isLoading = true;
+  can = false;
   service = '';
 
   constructor(

diff --git a/helix-front/client/app/cluster/cluster.component.spec.ts b/helix-front/client/app/cluster/cluster.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -9,7 +9,7 @@ describe('ClusterComponent', () => {
   let component: ClusterComponent;
   let fixture: ComponentFixture<ClusterComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         FlexLayoutModule,
@@ -34,7 +34,7 @@ describe('ClusterComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should contain cluster list', async(() => {
+  it('should contain cluster list', waitForAsync(() => {
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
     expect(compiled.querySelector('hi-cluster-list')).toBeDefined();

diff --git a/helix-front/client/app/cluster/cluster.component.ts b/helix-front/client/app/cluster/cluster.component.ts
@@ -8,7 +8,7 @@ import { MediaChange, MediaObserver } from '@angular/flex-layout';
 })
 export class ClusterComponent implements OnInit {
 
-  @ViewChild('sidenav') sidenav;
+  @ViewChild('sidenav', {static: true}) sidenav;
 
   isNarrowView: boolean;
 
@@ -24,7 +24,7 @@ export class ClusterComponent implements OnInit {
       change.forEach((item) => {
         this.isNarrowView = (item.mqAlias === 'xs' || item.mqAlias === 'sm');
       })
-      
+
     });
   }
 

diff --git a/helix-front/client/app/cluster/shared/cluster.model.ts b/helix-front/client/app/cluster/shared/cluster.model.ts
@@ -23,8 +23,8 @@ export class Cluster {
     this.resources = obj.resources;
     this.inMaintenance = obj.maintenance;
 
-    let ins: Instance[] = [];
-    for (let instance of obj.instances) {
+    const ins: Instance[] = [];
+    for (const instance of obj.instances) {
       ins.push(new Instance(
         instance,
         this.name,

diff --git a/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts b/helix-front/client/app/configuration/config-detail/config-detail.component.spec.ts
@@ -1,5 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { HttpClientTestingModule } from '@angular/common/http/testing'
 
 import { TestingModule } from '../../../testing/testing.module';
 import { ConfigDetailComponent } from './config-detail.component';
@@ -8,10 +9,10 @@ describe('ConfigDetailComponent', () => {
   let component: ConfigDetailComponent;
   let fixture: ComponentFixture<ConfigDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        TestingModule
+        TestingModule, HttpClientTestingModule
       ],
       declarations: [
         ConfigDetailComponent

diff --git a/helix-front/client/app/controller/controller-detail/controller-detail.component.spec.ts b/helix-front/client/app/controller/controller-detail/controller-detail.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { ControllerDetailComponent } from './controller-detail.component';
@@ -9,11 +9,11 @@ describe('ControllerDetailComponent', () => {
   let component: ControllerDetailComponent;
   let fixture: ComponentFixture<ControllerDetailComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientModule,
-        RouterTestingModule
+        HttpClientTestingModule,
+        RouterTestingModule,
       ],
       declarations: [ ControllerDetailComponent ],
       schemas: [

diff --git a/helix-front/client/app/core/helix.service.ts b/helix-front/client/app/core/helix.service.ts
@@ -71,7 +71,7 @@ export class HelixService {
   }
 
   protected getHeaders() {
-    let headers = new HttpHeaders();
+    const headers = new HttpHeaders();
     headers.append('Accept', 'application/json');
     headers.append('Content-Type', 'application/json');
     return headers;

diff --git a/helix-front/client/app/core/user.service.ts b/helix-front/client/app/core/user.service.ts
@@ -31,7 +31,7 @@ export class UserService {
   }
 
   protected getHeaders() {
-    let headers = new HttpHeaders();
+    const headers = new HttpHeaders();
     headers.append('Accept', 'application/json');
     headers.append('Content-Type', 'application/json');
     return headers;