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

helix-front/.nvmrc

@@ -1 +1 @@
-v10.13.0
+v12.20.2

helix-front/angular.json

@@ -93,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": []
           }
@@ -129,7 +129,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "hi",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "hi"

helix-front/client/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 // import { Angulartics2 } from 'angulartics2';
@@ -8,7 +8,7 @@ import { TestingModule } from '../testing/testing.module';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         TestingModule,
@@ -28,19 +28,19 @@ describe('AppComponent', () => {
     }).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;

helix-front/client/app/app.component.ts

@@ -88,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;
+      },
+      );
   }
 }

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

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

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

helix-front/client/app/cluster/cluster-list/cluster-list.component.ts

@@ -16,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(

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();

helix-front/client/app/cluster/cluster.component.ts

@@ -24,7 +24,7 @@ export class ClusterComponent implements OnInit {
       change.forEach((item) => {
         this.isNarrowView = (item.mqAlias === 'xs' || item.mqAlias === 'sm');
       })
-      
+
     });
   }
 

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,

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

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: [

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;

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;

helix-front/client/app/dashboard/dashboard.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 { VisModule } from 'ngx-vis';
 
@@ -10,9 +11,9 @@ describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ TestingModule, VisModule ],
+      imports: [ TestingModule, VisModule, HttpClientTestingModule ],
       schemas: [ NO_ERRORS_SCHEMA ],
       declarations: [ DashboardComponent ]
     })

helix-front/client/app/dashboard/dashboard.component.ts

@@ -5,8 +5,8 @@ import {
   AfterViewInit,
   OnDestroy
 } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Observable, Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import * as _ from 'lodash';
@@ -27,7 +27,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   public visNetworkData: Data;
   public visNetworkOptions: Options;
   public nodes: Node[];
-  public edges: Edge[]; 
+  public edges: Edge[];
 
   public clusterName: string;
   public isLoading = false;
@@ -39,7 +39,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   public updateInterval = 3000;
 
   public constructor(
-    private el:ElementRef,
+    private el: ElementRef,
     private route: ActivatedRoute,
     protected visNetworkService: VisNetworkService,
     protected resourceService: ResourceService,
@@ -82,7 +82,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.nodes = 
+    this.nodes = [];
     this.edges = [];
     this.visNetworkData = { nodes: this.nodes, edges: this.edges }
     this.visNetworkOptions = {
@@ -131,20 +131,22 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
 
   initDashboard() {
     // resize container according to the parent
-    let width = this.el.nativeElement.offsetWidth;
-    let height = this.el.nativeElement.offsetHeight - 36;
-    let dashboardDom = this.el.nativeElement.getElementsByClassName(this.visNetwork)[0];
+    const width = this.el.nativeElement.offsetWidth;
+    const height = this.el.nativeElement.offsetHeight - 36;
+    const dashboardDom = this.el.nativeElement.getElementsByClassName(this.visNetwork)[0];
     dashboardDom.style.width = `${ width }px`;
     dashboardDom.style.height = `${ height }px`;
 
     // load data
-    this.route.parent.params
-      .pipe(map(p => p.name))
-      .subscribe(name => {
-        this.clusterName = name;
-        this.fetchResources();
-        // this.updateResources();
+    if (this.route && this.route.parent) {
+      this.route.parent.params
+        .pipe(map(p => p.name))
+        .subscribe(name => {
+          this.clusterName = name;
+          this.fetchResources();
+          // this.updateResources();
       });
+    }
   }
 
   ngAfterViewInit() {

helix-front/client/app/history/history-list/history-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 { HttpClientModule } from '@angular/common/http';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -9,7 +9,7 @@ describe('HistoryListComponent', () => {
   let component: HistoryListComponent;
   let fixture: ComponentFixture<HistoryListComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientModule,

helix-front/client/app/history/history-list/history-list.component.ts

@@ -36,9 +36,9 @@ export class HistoryListComponent implements OnInit {
 
   ngOnInit() {
     if (this.route.parent) {
-      let clusterName = this.route.parent.snapshot.params['cluster_name'];
-      let instanceName = this.route.parent.snapshot.params['instance_name'];
-      let observable = instanceName
+      const clusterName = this.route.parent.snapshot.params['cluster_name'];
+      const instanceName = this.route.parent.snapshot.params['instance_name'];
+      const observable = instanceName
         ? this.service.getInstanceHistory(clusterName, instanceName)
         : this.service.getControllerHistory(clusterName);