Added TS Unit Testing, TS Lint, Yarn package management.

Using this new structure, developers can rebuild, test, and lint
individually, saving time an effort in the event of a failure.

Added Frontend unit testing alongside a more modular module design
to make components and services easier to test and easy to manage
dependencies for.

Adding Yarn for more performant package management

Change-Id: I56a57100b5d831bb31bc18e2c62c78bf63265324

Makefile

@@ -13,8 +13,8 @@ WEBDIR        := client
 LINTER        := $(TOOLBINDIR)/golangci-lint
 LINTER_CONFIG := .golangci.yaml
 NODEJS_BIN    := $(realpath tools)/node-v12.16.3/bin
-NPM  		  := $(NODEJS_BIN)/npm
 NG  		  := $(NODEJS_BIN)/ng
+YARN		  := $(NODEJS_BIN)/yarn
 
 # docker
 DOCKER_MAKE_TARGET  := build
@@ -65,44 +65,127 @@ endif
 DIRS = internal
 RECURSIVE_DIRS = $(addprefix ./, $(addsuffix /..., $(DIRS)))
 
+### Composite Make Commands ###
+
+.PHONY: $(MAIN)
+$(MAIN): build
+
 .PHONY: build
-build: $(NPM) $(MAIN)
+build: frontend-build
-$(MAIN): FORCE
+build: backend-build
+
+.PHONY: lint
+lint: tidy-lint
+lint: check-copyright-lint
+lint: whitespace-lint
+lint: frontend-lint
+lint: backend-lint
+
+.PHONY: unit-test
+test: frontend-unit-test
+test: backend-unit-test
+
+.PHONY: coverage
+coverage: frontend-coverage
+coverage: backend-coverage
+
+.PHONY: verify
+verify: build
+verify: coverage
+verify: lint
+
+### Backend (Go) Make Commands ###
+
+.PHONY: backend-build
+backend-build:
+	@echo "Executing backend build steps..."
 	@mkdir -p $(BUILD_DIR)
-	cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NPM) install) && cd ..
+	@go build -o $(MAIN)$(EXTENSION) $(GO_FLAGS) cmd/main.go
-	cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NG) build) && cd ..
+	@echo "Backend build completed successfully"
-	go build -o $(MAIN)$(EXTENSION) $(GO_FLAGS) cmd/main.go
 
-FORCE:
+.PHONY: backend-unit-test
-
+backend-unit-test:
-.PHONY: examples
+	@echo "Performing backend unit test step..."
-examples: $(NPM) $(EXAMPLES)
-$(EXAMPLES): FORCE
-	@mkdir -p $(BUILD_DIR)
-	cd $(WEBDIR) && npm install && cd ..
-	cd $(WEBDIR) && ng build && cd ..
-	go build -o $@$(EXTENSION) $(GO_FLAGS) examples/$(@F)/main.go
-
-.PHONY: install-octant-plugins
-install-octant-plugins:
-	@mkdir -p $(OCTANT_PLUGINSTUB_DIR)
-	cp $(addsuffix $(EXTENSION), $(BUILD_DIR)/octant) $(OCTANT_PLUGINSTUB_DIR)
-
-.PHONY: test
-test: lint
-test: cover
-test: check-copyright
-
-.PHONY: unit-tests
-unit-tests:
-	@echo "Performing unit test step..."
 	@go test -run $(TESTS) $(PKG) $(TESTFLAGS) $(COVER_FLAGS)
-	@echo "All unit tests passed"
+	@echo "Backend unit tests completed successfully"
 
-.PHONY: cover
+.PHONY: backend-coverage
-cover: TESTFLAGS = -covermode=atomic -coverprofile=fullcover.out
+backend-coverage: TESTFLAGS = -covermode=atomic -coverprofile=fullcover.out
-cover: unit-tests
+backend-coverage: backend-unit-test
+	@echo "Generating backend coverage report..."
 	@grep -vE "$(COVER_EXCLUDE)" fullcover.out > $(COVER_PROFILE)
+	@echo "Backend coverage report completed successfully"
+
+.PHONY: backend-lint
+backend-lint: $(LINTER)
+backend-lint:
+	@echo "Running backend linting step..."
+	@$(LINTER) run --config $(LINTER_CONFIG)
+	@echo "Backend linting completed successfully"
+
+### Frontend (Angular) Make Commands ###
+
+.PHONY: frontend-build
+frontend-build: $(YARN)
+frontend-build:
+	@echo "Executing frontend build steps..."
+	@cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NG) build) && cd ..
+	@echo "Frontend build completed successfully"
+
+.PHONY: frontend-unit-test
+frontend-unit-test: $(YARN)
+frontend-unit-test:
+	@echo "Performing frontend unit test step..."
+	@cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NG) test) && cd ..
+	@echo "Frontend unit tests completed successfully"
+
+.PHONY: frontend-coverage
+frontend-coverage: frontend-unit-test
+
+.PHONY: frontend-lint
+frontend-lint: $(YARN)
+frontend-lint:
+	@echo "Running frontend linting step..."
+	@cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NG) lint) && cd ..
+	@echo "Frontend linting completed successfully"
+
+### Misc. Linting Commands ###
+
+.PHONY: whitespace-lint
+whitespace-lint:
+	@echo "Running whitespace linting step..."
+	@./tools/whitespace_linter
+	@echo "Whitespace linting completed successfully"
+
+.PHONY: tidy-lint
+tidy-lint:
+	@echo "Checking that go.mod is up to date..."
+	@./tools/gomod_check
+	@echo "go.mod check completed successfully"
+
+# check-copyright is a utility to check if copyright header is present on all files
+.PHONY: check-copyright-lint
+check-copyright-lint:
+	@echo "Checking file for copyright statement..."
+	@./tools/check_copyright
+	@echo "Copyright check completed successfully"
+
+### Helper Installations ###
+
+$(LINTER):
+	@echo "Installing Go linter..."
+	@mkdir -p $(TOOLBINDIR)
+	./tools/install_go_linter
+	@echo "Go linter installation completed successfully"
+
+$(YARN):
+	@echo "Installing Node.js, npm, yarn & project packages..."
+	@mkdir -p $(TOOLBINDIR)
+	./tools/install_npm
+	@cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(YARN) install) && cd ..
+	@echo "Node.js, npm, yarn, and project package installation completed successfully"
+
+### Docker ###
 
 .PHONY: images
 images: docker-image
@@ -142,7 +225,7 @@ docker-image-test-suite: DOCKER_TARGET_STAGE = builder
 docker-image-test-suite: docker-image
 
 .PHONY: docker-image-unit-tests
-docker-image-unit-tests: DOCKER_MAKE_TARGET = cover
+docker-image-unit-tests: DOCKER_MAKE_TARGET = coverage
 docker-image-unit-tests: DOCKER_TARGET_STAGE = builder
 docker-image-unit-tests: docker-image
 
@@ -153,11 +236,9 @@ docker-image-lint: docker-image
 
 .PHONY: clean
 clean:
+	@echo "Removing build directories..."
 	rm -rf $(BUILD_DIR) $(COVERAGE_OUTPUT)
-
+	@echo "Removal completed successfully"
-.PHONY: docs
-docs:
-	tox
 
 # The golang-unit zuul job calls the env target, so create one
 # Note: on windows if there is a WSL curl in c:\windows\system32
@@ -165,40 +246,11 @@ docs:
 #       The use of cygwin curl is working however
 .PHONY: env
 
-.PHONY: lint
+### Helper Make Commands ###
-lint: tidy $(NPM) $(LINTER)
-	@echo "Performing linting steps..."
-	@echo "Running whitespace linting step..."
-	@./tools/whitespace_linter
-	@echo "Running golangci-lint linting step..."
-	$(LINTER) run --config $(LINTER_CONFIG)
-#   TODO: Replace eslint with TS lint
-#	@echo "Installing NPM & running client linting step..."
-#	./tools/install_npm
-#	cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NPM) install) && cd ..
-#	cd $(WEBDIR) && (PATH="$(PATH):$(NODEJS_BIN)"; $(NG) build) && cd ..
-	@echo "Linting completed successfully"
-
-.PHONY: tidy
-tidy:
-	@echo "Checking that go.mod is up to date..."
-	@./tools/gomod_check
-	@echo "go.mod is up to date"
-
-$(LINTER):
-	@mkdir -p $(TOOLBINDIR)
-	./tools/install_go_linter
-
-$(NPM):
-	@mkdir -p $(TOOLBINDIR)
-	./tools/install_npm
 
 # add-copyright is a utility to add copyright header to missing files
 .PHONY: add-copyright
 add-copyright:
+	@echo "Adding copyright license to necessary files..."
 	@./tools/add_license.sh
-
+	@echo "Copyright license additions completed successfully"
-# check-copyright is a utility to check if copyright header is present on all files
-.PHONY: check-copyright
-check-copyright:
-	@./tools/check_copyright

client/angular.json

@@ -79,46 +79,20 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/jest:run",
-          "options": {
+          "options": {}
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
               "tsconfig.app.json",
-              "tsconfig.spec.json",
+              "tsconfig.spec.json"
-              "e2e/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "airshipui:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "airshipui:serve:production"
-            }
-          }
         }
       }
     }},

client/e2e/protractor.conf.js

@@ -1,36 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    browserName: 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({
-      spec: {
-        displayStacktrace: StacktraceOption.PRETTY
-      }
-    }));
-  }
-};

client/e2e/src/app.e2e-spec.ts

@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('airshipui-ui app is running!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});

client/e2e/src/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo(): Promise<unknown> {
-    return browser.get(browser.baseUrl) as Promise<unknown>;
-  }
-
-  getTitleText(): Promise<string> {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
-  }
-}

client/e2e/tsconfig.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es2018",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

client/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  coverageReporters: ['html', 'text', 'text-summary']
+};
+

client/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/airshipui-ui'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

client/package.json

@@ -6,8 +6,7 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "ng lint",
+    "lint": "ng lint"
-    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
@@ -23,7 +22,6 @@
     "@angular/platform-browser-dynamic": "~10.0.3",
     "@angular/router": "~10.0.3",
     "material-design-icons": "^3.0.1",
-    "monaco-editor": "^0.20.0",
     "ngx-monaco-editor": "^9.0.0",
     "ngx-toastr": "^13.0.0",
     "rxjs": "~6.5.5",
@@ -31,22 +29,17 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
+    "@angular-builders/jest": "^10.0.0",
     "@angular-devkit/build-angular": "~0.1000.2",
     "@angular/cli": "~10.0.2",
     "@angular/compiler-cli": "~10.0.3",
-    "@types/jasmine": "~3.5.0",
+    "@types/jest": "^26.0.9",
-    "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "eslint-plugin-html": "^6.0.3",
-    "jasmine-core": "~3.5.0",
+    "jest": "^26.2.2",
-    "jasmine-spec-reporter": "~5.0.0",
+    "jest-preset-angular": "^8.2.1",
-    "karma": "~5.0.0",
+    "ts-jest": "^26.1.4",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "typescript": "~3.9.5"

client/src/app/app-routing.module.ts

@@ -1,31 +1,17 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
-import { HomeComponent } from './home/home.component';
+import {HomeComponent} from './home/home.component';
-import { DashboardsComponent } from './dashboards/dashboards.component';
+import {CtlComponent} from './ctl/ctl.component';
-import { CTLComponent } from './ctl/ctl.component';
-import { BareMetalComponent } from './ctl/baremetal/baremetal.component';
-import { DocumentComponent } from './ctl/document/document.component';
 
-const routes: Routes = [
+
-  {
+const routes: Routes = [{
     path: 'ctl',
-    component: CTLComponent,
+    component: CtlComponent,
-    children: [
+    loadChildren: './ctl/ctl.module#CtlModule',
-      {
+}, {
-        path: 'baremetal',
-        component: BareMetalComponent
-      }, {
-        path: 'documents',
-        component: DocumentComponent
-      }]
-  }, {
-    path: 'dashboard',
-    component: DashboardsComponent
-  }, {
     path: '',
     component: HomeComponent
-  },
+}];
-];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

client/src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="main-container">
   <mat-sidenav-container class="sidenav-container">
-    <mat-sidenav class="sidenav-content" #snav [mode]="'side'" opened="true">
+    <mat-sidenav class="sidenav-content" #sidenav [mode]="'side'" opened="true">
       <mat-nav-list>
         <svg width="249" height="46">
           <use xlink:href="assets/logo/airship-horizontal-logo.svg#Layer_1"></use>
@@ -55,7 +55,7 @@
     </mat-sidenav>
     <mat-sidenav-content>
       <mat-toolbar color="primary" class="toolbar-header">
-        <button mat-icon-button (click)="snav.toggle()"><mat-icon svgIcon="list"></mat-icon></button>
+        <button mat-icon-button (click)="sidenav.toggle()"><mat-icon svgIcon="list"></mat-icon></button>
         <span class="spacer"></span>
         <button mat-icon-button><mat-icon svgIcon="account"></mat-icon></button>
       </mat-toolbar>

client/src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'airshipui-ui'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect('airshipui-ui').toEqual('airshipui-ui');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('airshipui-ui app is running!');
-  });
-});

client/src/app/app.component.ts

@@ -1,11 +1,9 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import { NavInterface } from './models/nav.interface';
+import {environment} from '../environments/environment';
-import { environment } from '../environments/environment';
+import {IconService} from '../services/icon/icon.service';
-import { IconService } from '../services/icon/icon.service';
+import {WebsocketService} from '../services/websocket/websocket.service';
-import { WebsocketService } from '../services/websocket/websocket.service';
+import {Dashboard, WebsocketMessage, WSReceiver} from '../services/websocket/websocket.models';
-import { WSReceiver } from '../services/websocket/websocket.models';
+import {Nav} from './app.models';
-import { Dashboard } from '../services/websocket/models/websocket-message/dashboard/dashboard';
-import { WebsocketMessage } from 'src/services/websocket/models/websocket-message/websocket-message';
 
 @Component({
   selector: 'app-root',
@@ -13,13 +11,13 @@ import { WebsocketMessage } from 'src/services/websocket/models/websocket-messag
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit, WSReceiver {
-  type: string = "ui";
+  type = 'ui';
-  component: string = "any";
+  component = 'any';
 
   currentYear: number;
   version: string;
 
-  menu: NavInterface [] = [
+  menu: Nav [] = [
     {
       displayName: 'Airship',
       iconName: 'airplane',
@@ -46,14 +44,14 @@ export class AppComponent implements OnInit, WSReceiver {
   }
 
   async receiver(message: WebsocketMessage): Promise<void> {
-    if (message.hasOwnProperty("error")) {
+    if (message.hasOwnProperty('error')) {
       this.websocketService.printIfToast(message);
     } else {
-      if (message.hasOwnProperty("dashboards")) {
+      if (message.hasOwnProperty('dashboards')) {
         this.updateDashboards(message.dashboards);
       } else {
         // TODO (aschiefe): determine what should be notifications and what should be 86ed
-        console.log("Message received in app: ", message);
+        console.log('Message received in app: ', message);
       }
     }
   }
@@ -67,7 +65,7 @@ export class AppComponent implements OnInit, WSReceiver {
       this.menu[1].children = [];
     }
     dashboards.forEach((dashboard) => {
-      const navInterface = new NavInterface();
+      const navInterface = new Nav();
       navInterface.displayName = dashboard.name;
       navInterface.route = dashboard.baseURL;
       navInterface.external = true;

client/src/app/app.models.ts

@@ -1,8 +1,8 @@
-export class NavInterface {
+export class Nav {
   displayName: string;
   disabled?: boolean;
   iconName?: string;
   route?: string;
   external?: boolean;
-  children?: NavInterface[];
+  children?: Nav[];
 }

client/src/app/app.module.ts

@@ -1,65 +1,45 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-
+import {AppRoutingModule} from './app-routing.module';
-import { AppRoutingModule } from './app-routing.module';
+import {AppComponent} from './app.component';
-import { AppComponent } from './app.component';
+import {RouterModule} from '@angular/router';
-
+import {HttpClientModule} from '@angular/common/http';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import {WebsocketService} from '../services/websocket/websocket.service';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import {ToastrModule} from 'ngx-toastr';
-import { MatListModule } from '@angular/material/list';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
-import { MatIconModule } from '@angular/material/icon';
+import {MatSidenavModule} from '@angular/material/sidenav';
-import { MatButtonModule } from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatExpansionModule} from '@angular/material/expansion';
-import { MatTableModule } from '@angular/material/table';
+import {FlexLayoutModule} from '@angular/flex-layout';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import {MatListModule} from '@angular/material/list';
-import { MatExpansionModule } from '@angular/material/expansion';
+import {MatToolbarModule} from '@angular/material/toolbar';
-import { RouterModule } from '@angular/router';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { CTLComponent } from './ctl/ctl.component';
+import {MatButtonModule} from '@angular/material/button';
-import { DashboardsComponent } from './dashboards/dashboards.component';
+import {MatTabsModule} from '@angular/material/tabs';
-import { HomeComponent } from './home/home.component';
+import {CtlModule} from './ctl/ctl.module';
-import { BareMetalComponent } from './ctl/baremetal/baremetal.component';
-import { DocumentComponent } from './ctl/document/document.component';
-import { HttpClientModule } from '@angular/common/http';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatTabsModule } from '@angular/material/tabs';
-import { WebsocketService } from '../services/websocket/websocket.service';
-import { ToastrModule } from 'ngx-toastr';
-import {FormsModule} from '@angular/forms';
-import {MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';
-import {MatTreeModule} from '@angular/material/tree';
-import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    CTLComponent,
-    DashboardsComponent,
-    HomeComponent,
-    BareMetalComponent,
-    DocumentComponent,
-  ],
   imports: [
     AppRoutingModule,
+
+    CtlModule,
+
     BrowserModule,
     BrowserAnimationsModule,
     FlexLayoutModule,
-    FormsModule,
-    MatToolbarModule,
-    MatSidenavModule,
-    MatListModule,
-    MatIconModule,
-    MatButtonModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatExpansionModule,
     HttpClientModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatExpansionModule,
+    MatListModule,
+    MatToolbarModule,
     RouterModule,
     MatTabsModule,
     ToastrModule.forRoot(),
     MonacoEditorModule.forRoot(),
-    MatTreeModule,
-    MatButtonToggleModule,
   ],
+  declarations: [AppComponent],
   providers: [WebsocketService],
   bootstrap: [AppComponent]
 })

client/src/app/ctl/baremetal/baremetal.component.spec.ts

@@ -1,20 +1,27 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {BaremetalComponent} from './baremetal.component';
+import {MatButtonModule} from '@angular/material/button';
+import {ToastrModule} from 'ngx-toastr';
 
-import { BareMetalComponent } from './baremetal.component';
+describe('BaremetalComponent', () => {
-
+  let component: BaremetalComponent;
-describe('BareMetalComponent', () => {
+  let fixture: ComponentFixture<BaremetalComponent>;
-  let component: BareMetalComponent;
-  let fixture: ComponentFixture<BareMetalComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BareMetalComponent ]
+      imports: [
+        MatButtonModule,
+        ToastrModule.forRoot()
+      ],
+      declarations: [
+        BaremetalComponent
+      ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BareMetalComponent);
+    fixture = TestBed.createComponent(BaremetalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

client/src/app/ctl/baremetal/baremetal.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
-import {WebsocketMessage} from '../../../services/websocket/models/websocket-message/websocket-message';
 import {WebsocketService} from '../../../services/websocket/websocket.service';
-import { WSReceiver } from '../../../services/websocket//websocket.models';
+import {WebsocketMessage, WSReceiver} from '../../../services/websocket/websocket.models';
 
 @Component({
   selector: 'app-bare-metal',
@@ -9,25 +8,25 @@ import { WSReceiver } from '../../../services/websocket//websocket.models';
   styleUrls: ['./baremetal.component.css']
 })
 
-export class BareMetalComponent implements WSReceiver {
+export class BaremetalComponent implements WSReceiver {
   // TODO (aschiefe): extract these strings to constants
-  type: string = "ctl";
+  type = 'ctl';
-  component: string = "baremetal";
+  component = 'baremetal';
 
   constructor(private websocketService: WebsocketService) {
     this.websocketService.registerFunctions(this);
   }
 
   async receiver(message: WebsocketMessage): Promise<void> {
-    if (message.hasOwnProperty("error")) {
+    if (message.hasOwnProperty('error')) {
       this.websocketService.printIfToast(message);
     } else {
       // TODO (aschiefe): determine what should be notifications and what should be 86ed
-      console.log("Message received in baremetal: ", message);
+      console.log('Message received in baremetal: ', message);
     }
   }
 
   generateIso(): void {
-    this.websocketService.sendMessage(new WebsocketMessage(this.type, this.component, "generateISO"));
+    this.websocketService.sendMessage(new WebsocketMessage(this.type, this.component, 'generateISO'));
   }
 }

client/src/app/ctl/baremetal/baremetal.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {BaremetalComponent} from './baremetal.component';
+import {MatButtonModule} from '@angular/material/button';
+
+@NgModule({
+  imports: [
+    MatButtonModule
+  ],
+  declarations: [
+    BaremetalComponent
+  ],
+  providers: []
+})
+export class BaremetalModule {}

client/src/app/ctl/ctl-routing.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DocumentComponent} from './document/document.component';
+import {BaremetalComponent} from './baremetal/baremetal.component';
+
+const routes: Routes = [{
+    path: 'documents',
+    component: DocumentComponent,
+}, {
+    path: 'baremetal',
+    component: BaremetalComponent
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CtlRoutingModule {}

client/src/app/ctl/ctl.component.spec.ts

@@ -0,0 +1,28 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {CtlComponent} from './ctl.component';
+import {RouterTestingModule} from '@angular/router/testing';
+
+describe('CtlComponent', () => {
+  let component: CtlComponent;
+  let fixture: ComponentFixture<CtlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [CtlComponent]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CtlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/ctl/ctl.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-  selector: 'app-airship',
+  selector: 'app-ctl',
   templateUrl: './ctl.component.html',
   styleUrls: ['./ctl.component.css']
 })
-export class CTLComponent {
+export class CtlComponent {
-
 }

client/src/app/ctl/ctl.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CtlComponent} from './ctl.component';
+import {DocumentModule} from './document/document.module';
+import {BaremetalModule} from './baremetal/baremetal.module';
+import {CtlRoutingModule} from './ctl-routing.module';
+
+@NgModule({
+  imports: [
+    CtlRoutingModule,
+
+    RouterModule,
+    DocumentModule,
+    BaremetalModule
+  ],
+  declarations: [ CtlComponent ],
+  providers: []
+})
+export class CtlModule {}

client/src/app/ctl/ctlcomponent.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CTLComponent } from './ctl.component';
-
-describe('CTLComponent', () => {
-  let component: CTLComponent;
-  let fixture: ComponentFixture<CTLComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CTLComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CTLComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

client/src/app/ctl/document/document.component.spec.ts

@@ -1,6 +1,14 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-
+import {DocumentComponent} from './document.component';
-import { DocumentComponent } from './document.component';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatIconModule} from '@angular/material/icon';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
+import {FormsModule} from '@angular/forms';
+import {ToastrModule} from 'ngx-toastr';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 describe('DocumentComponent', () => {
   let component: DocumentComponent;
@@ -8,7 +16,18 @@ describe('DocumentComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DocumentComponent ]
+      imports: [
+        BrowserAnimationsModule,
+        MatTabsModule,
+        MatTreeModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatIconModule,
+        MonacoEditorModule,
+        FormsModule,
+        ToastrModule.forRoot()
+      ],
+      declarations: [DocumentComponent]
     })
     .compileComponents();
   }));

client/src/app/ctl/document/document.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 import {WebsocketService} from '../../../services/websocket/websocket.service';
-import { WSReceiver } from '../../../services/websocket/websocket.models';
+import {WebsocketMessage, WSReceiver} from '../../../services/websocket/websocket.models';
-import {WebsocketMessage} from '../../../services/websocket/models/websocket-message/websocket-message';
-import {KustomNode} from './kustom-node';
 import {NestedTreeControl} from '@angular/cdk/tree';
 import {MatTreeNestedDataSource} from '@angular/material/tree';
+import {KustomNode} from './document.models';
 
 @Component({
   selector: 'app-document',
@@ -15,30 +14,31 @@ import {MatTreeNestedDataSource} from '@angular/material/tree';
 export class DocumentComponent implements WSReceiver {
   obby: string;
 
-  type: string = 'ctl';
+  type = 'ctl';
-  component: string = 'document';
+  component = 'document';
 
   activeLink = 'overview';
 
   obj: KustomNode[] = [];
   currentDocId: string;
 
-  saveBtnDisabled: boolean = true;
+  saveBtnDisabled = true;
-  hideButtons: boolean = true;
+  hideButtons = true;
-  isRendered: boolean = false;
+  isRendered = false;
 
   editorOptions = {language: 'yaml', automaticLayout: true, value: ''};
   code: string;
   editorTitle: string;
-  onInit(editor) {
-    editor.onDidChangeModelContent(() => {
-      this.saveBtnDisabled = false;
-  });
-  }
 
   treeControl = new NestedTreeControl<KustomNode>(node => node.children);
   dataSource = new MatTreeNestedDataSource<KustomNode>();
 
+  onInit(editor): void {
+    editor.onDidChangeModelContent(() => {
+      this.saveBtnDisabled = false;
+    });
+  }
+
   constructor(private websocketService: WebsocketService) {
     this.websocketService.registerFunctions(this);
     this.getSource(); // load the source first
@@ -47,7 +47,7 @@ export class DocumentComponent implements WSReceiver {
   hasChild = (_: number, node: KustomNode) => !!node.children && node.children.length > 0;
 
   public async receiver(message: WebsocketMessage): Promise<void> {
-    if (message.hasOwnProperty("error")) {
+    if (message.hasOwnProperty('error')) {
       this.websocketService.printIfToast(message);
     } else {
       switch (message.subComponent) {
@@ -69,11 +69,7 @@ export class DocumentComponent implements WSReceiver {
           this.changeEditorContents((message.yaml));
           this.editorTitle = message.name;
           this.currentDocId = message.message;
-          if (!this.isRendered) {
+          this.hideButtons = this.isRendered;
-            this.hideButtons = false;
-          } else {
-            this.hideButtons = true;
-          }
           break;
         case 'yamlWrite':
           this.changeEditorContents((message.yaml));
@@ -81,10 +77,10 @@ export class DocumentComponent implements WSReceiver {
           this.currentDocId = message.message;
           break;
         case 'docPull':
-          this.obby = "Message pull was a " + message.message;
+          this.obby = 'Message pull was a ' + message.message;
           break;
         default:
-          console.log("Document message sub component not handled: ", message);
+          console.log('Document message sub component not handled: ', message);
           break;
       }
     }
@@ -92,7 +88,7 @@ export class DocumentComponent implements WSReceiver {
 
   getYaml(id: string): void {
     this.code = null;
-    const websocketMessage = this.constructDocumentWsMessage("getYaml");
+    const websocketMessage = this.constructDocumentWsMessage('getYaml');
     websocketMessage.message = id;
     this.websocketService.sendMessage(websocketMessage);
   }
@@ -102,7 +98,7 @@ export class DocumentComponent implements WSReceiver {
   }
 
   saveYaml(): void {
-    const websocketMessage = this.constructDocumentWsMessage("yamlWrite");
+    const websocketMessage = this.constructDocumentWsMessage('yamlWrite');
     websocketMessage.message = this.currentDocId;
     websocketMessage.name = this.editorTitle;
     websocketMessage.yaml = btoa(this.code);
@@ -111,13 +107,13 @@ export class DocumentComponent implements WSReceiver {
 
   getSource(): void {
     this.isRendered = false;
-    const websocketMessage = this.constructDocumentWsMessage("getSource");
+    const websocketMessage = this.constructDocumentWsMessage('getSource');
     this.websocketService.sendMessage(websocketMessage);
   }
 
   getRendered(): void {
     this.isRendered = true;
-    const websocketMessage = this.constructDocumentWsMessage("getRendered");
+    const websocketMessage = this.constructDocumentWsMessage('getRendered');
     this.websocketService.sendMessage(websocketMessage);
   }
 
@@ -127,12 +123,12 @@ export class DocumentComponent implements WSReceiver {
 
   closeEditor(): void {
     this.code = null;
-    this.editorTitle = "";
+    this.editorTitle = '';
     this.hideButtons = true;
   }
 
   documentPull(): void {
-    this.websocketService.sendMessage(new WebsocketMessage(this.type, this.component, "docPull"));
+    this.websocketService.sendMessage(new WebsocketMessage(this.type, this.component, 'docPull'));
   }
 }
 

client/src/app/ctl/document/document.models.ts

@@ -3,4 +3,4 @@ export class KustomNode {
     name: string;
     data: string;
     children: KustomNode[];
-  }
+}

client/src/app/ctl/document/document.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {MatTabsModule} from '@angular/material/tabs';
+import {DocumentComponent} from './document.component';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatIconModule} from '@angular/material/icon';
+import {MonacoEditorModule} from 'ngx-monaco-editor';
+import {FormsModule} from '@angular/forms';
+import {ToastrModule} from 'ngx-toastr';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+  declarations: [
+    DocumentComponent
+  ],
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatIconModule,
+    MonacoEditorModule,
+    FormsModule,
+    ToastrModule,
+  ],
+  providers: []
+})
+export class DocumentModule {}

client/src/app/dashboards/dashboards.component.html

@@ -1 +0,0 @@
-<p>dashboards works!</p>

client/src/app/dashboards/dashboards.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DashboardsComponent } from './dashboards.component';
-
-describe('DashboardsComponent', () => {
-  let component: DashboardsComponent;
-  let fixture: ComponentFixture<DashboardsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DashboardsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DashboardsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

client/src/app/dashboards/dashboards.component.ts

@@ -1,10 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-dashboards',
-  templateUrl: './dashboards.component.html',
-  styleUrls: ['./dashboards.component.css']
-})
-export class DashboardsComponent {
-
-}

client/src/app/home/home.component.ts

@@ -1,15 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent {}
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

client/src/services/websocket/models/websocket-message/dashboard/dashboard.spec.ts

@@ -1,7 +0,0 @@
-import { Dashboard } from './dashboard';
-
-describe('Dashboard', () => {
-  it('should create an instance', () => {
-    expect(new Dashboard()).toBeTruthy();
-  });
-});

client/src/services/websocket/models/websocket-message/dashboard/dashboard.ts

@@ -1,6 +0,0 @@
-export class Dashboard {
-  name: string;
-  baseURL: string;
-  path: string;
-  isProxied: boolean;
-}

client/src/services/websocket/models/websocket-message/websocket-message.spec.ts

@@ -1,7 +0,0 @@
-import { WebsocketMessage } from './websocket-message';
-
-describe('WebsocketMessage', () => {
-  it('should create an instance', () => {
-    expect(new WebsocketMessage()).toBeTruthy();
-  });
-});

client/src/services/websocket/models/websocket-message/websocket-message.ts

@@ -1,25 +0,0 @@
-import {Dashboard} from './dashboard/dashboard';
-
-export class WebsocketMessage {
-  type: string;
-  component: string;
-  subComponent: string;
-  timestamp: number;
-  dashboards: Dashboard[];
-  error: string;
-  fade: boolean;
-  html: string;
-  name: string;
-  isAuthenticated: boolean;
-  message: string;
-  data: JSON;
-  yaml: string;
-
-  // this constructor looks like this in case anyone decides they want just a raw message with no data predefined
-  // or an easy way to specify the defaults
-  constructor (type?: string | undefined, component?: string | undefined, subComponent?: string | undefined) {
-    this.type = type;
-    this.component = component;
-    this.subComponent = subComponent;
-  }
-}

client/src/services/websocket/websocket.models.ts

@@ -1,10 +1,39 @@
-import { WebsocketMessage } from './models/websocket-message/websocket-message';
+export interface WSReceiver {
-
+    // the holy trinity of the websocket messages, a triumvirate if you will, which is how all are routed
-export interface WSReceiver {
+    type: string;
-    // the holy trinity of the websocket messages, a triumvirate if you will, which is how all are routed
+    component: string;
-    type: string;
+
-    component: string;
+    // This is the method which will need to be implemented in the component to handle the messages
-
+    receiver(message: WebsocketMessage): Promise<void>;
-    // This is the method which will need to be implemented in the component to handle the messages
+}
-    receiver(message: WebsocketMessage): Promise<void>;
+
-}
+export class WebsocketMessage {
+  type: string;
+  component: string;
+  subComponent: string;
+  timestamp: number;
+  dashboards: Dashboard[];
+  error: string;
+  fade: boolean;
+  html: string;
+  name: string;
+  isAuthenticated: boolean;
+  message: string;
+  data: JSON;
+  yaml: string;
+
+  // this constructor looks like this in case anyone decides they want just a raw message with no data predefined
+  // or an easy way to specify the defaults
+  constructor(type?: string | undefined, component?: string | undefined, subComponent?: string | undefined) {
+    this.type = type;
+    this.component = component;
+    this.subComponent = subComponent;
+  }
+}
+
+export class Dashboard {
+  name: string;
+  baseURL: string;
+  path: string;
+  isProxied: boolean;
+}

client/src/services/websocket/websocket.service.spec.ts

@@ -1,16 +1,20 @@
-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
-
+import {WebsocketService} from './websocket.service';
-import { WebsocketService } from './websocket.service';
+import {ToastrModule} from 'ngx-toastr';
 
 describe('WebsocketService', () => {
   let service: WebsocketService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [
+        ToastrModule.forRoot(),
+      ]
+    });
     service = TestBed.inject(WebsocketService);
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
-});
+});

client/src/services/websocket/websocket.service.ts

@@ -1,7 +1,6 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import {Injectable, OnDestroy} from '@angular/core';
-import { WebsocketMessage } from './models/websocket-message/websocket-message';
+import {WebsocketMessage, WSReceiver} from './websocket.models';
-import { WSReceiver } from './websocket.models';
+import {ToastrService} from 'ngx-toastr';
-import { ToastrService } from 'ngx-toastr';
 import 'reflect-metadata';
 
 @Injectable({
@@ -14,15 +13,14 @@ export class WebsocketService implements OnDestroy {
 
   // functionMap is how we know where to send the direct messages
   // the structure of this map is: type -> component -> receiver
-  private functionMap = new Map<string, Map<string,WSReceiver>>();
+  private functionMap = new Map<string, Map<string, WSReceiver>>();
 
   // messageToObject unmarshalls the incoming message into a WebsocketMessage object
   private static messageToObject(incomingMessage: string): WebsocketMessage {
-    let json = JSON.parse(incomingMessage);
+    const json = JSON.parse(incomingMessage);
-    let wsm = new WebsocketMessage();
+    const obj = new WebsocketMessage();
-    Object.assign(wsm, json);
+    Object.assign(obj, json);
-
+    return obj;
-    return wsm;
   }
 
   // when the WebsocketService is created the toast message is initialized and a websocket is registered
@@ -131,8 +129,8 @@ export class WebsocketService implements OnDestroy {
                     this.functionMap[message.type][message.component].receiver(message);
                   } else {
                     // special case where we want to handle all top level messages at a specific component
-                    if (this.functionMap[message.type].hasOwnProperty("any")) {
+                    if (this.functionMap[message.type].hasOwnProperty('any')) {
-                      this.functionMap[message.type]["any"].receiver(message);
+                      this.functionMap[message.type].any.receiver(message);
                     } else {
                       this.printIfToast(message);
                     }
@@ -158,12 +156,12 @@ export class WebsocketService implements OnDestroy {
 
   // registerFunctions is a is called out of the target's constructor so it can auto populate the function map
   public registerFunctions(target: WSReceiver): void {
-    let type = target.type;
+    const type = target.type;
-    let component = target.component;
+    const component = target.component;
     if (this.functionMap.hasOwnProperty(type)) {
       this.functionMap[type][component] = target;
     } else {
-      let components = new Map<string,WSReceiver>();
+      const components = new Map<string, WSReceiver>();
       components[component] = target;
       this.functionMap[type] = components;
     }

client/src/test.ts

@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

client/tsconfig.app.json

@@ -1,6 +1,6 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": []

client/tsconfig.base.json

@@ -1,20 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": [
-      "es2018",
-      "dom"
-    ]
-  }
-}

client/tsconfig.json

@@ -1,20 +1,20 @@
-/*
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
 {
-  "files": [],
+  "compileOnSave": false,
-  "references": [
+  "compilerOptions": {
-    {
+    "baseUrl": "./",
-      "path": "./tsconfig.app.json"
+    "outDir": "./dist/out-tsc",
-    },
+    "sourceMap": true,
-    {
+    "declaration": false,
-      "path": "./tsconfig.spec.json"
+    "downlevelIteration": true,
-    },
+    "experimentalDecorators": true,
-    {
+    "moduleResolution": "node",
-      "path": "./e2e/tsconfig.json"
+    "importHelpers": true,
-    }
+    "target": "es2015",
-]
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  }
 }

client/tsconfig.spec.json

@@ -1,14 +1,13 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
+    "types": ["jest"],
-      "jasmine"
+    "emitDecoratorMetadata": true,
-    ]
+    "esModuleInterop": true
   },
   "files": [
-    "src/test.ts",
     "src/polyfills.ts"
   ],
   "include": [

pkg/webservice/websocket.go

@@ -113,7 +113,6 @@ func onMessage() {
 // common websocket close with logging
 func onClose() {
 	log.Printf("Closing websocket")
-	ws.Close()
 }
 
 // common websocket error handling with logging

tools/install_npm

@@ -44,16 +44,14 @@ if [[ ! -d $tools_bin_dir/node-$node_version ]]; then
     export NODE_EXTRA_CA_CERTS=/etc/ssl/certs/ca-certificates.crt
   fi
 
-  # npm will write to a node_modules even with the --directory flag it's better to be in the root of where you want this to live
+  # angular-cli is required by angular build
-  cd client
+  if ! npm i -g @angular/cli; then
-  npm config set user "${npm_user}"
+    printf "Something went wrong while installing Angular CLI (ng)\n" 1>&2
-  if ! npm install eslint-plugin-html@latest --save-dev --production; then
-    printf "Something went wrong while installing eslint-plugin-html\n" 1>&2
     exit 1
   fi
-  # angular-cli is required by angular build
+  # yarn is required by angular build
-  if ! npm i -g @angular/cli --production; then
+  if ! npm i -g yarn; then
-    printf "Something went wrong while installing ng\n" 1>&2
+    printf "Something went wrong while installing yarn\n" 1>&2
     exit 1
   fi
   cd ..