Upgrade to Angular 8 and Clarity 2.2 (#286)

* Upgrade to Angular 8
* Upgrade to Clarity 2.2.0
Signed-off-by: GuessWhoSamFoo <foos@vmware.com>

.circleci/config.yml

@@ -9,8 +9,13 @@ jobs:
     - run:
         name: Build
         command: |
-          docker build -t octant-image .
+          docker build --build-arg NODE_VERSION=$(cat .nvmrc | cut -c 2-) -t octant-image .
           docker run --name octant-builder octant-image
+    - run:
+        name: Setup nvm
+        command: |
+          echo 'export NVM_DIR="/opt/circleci/.nvm"' >> $BASH_ENV
+          echo ' [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
     - run:
         name: Build plugin
         command: |
@@ -48,6 +53,8 @@ jobs:
         name: Cypress
         command: |
           source $BASH_ENV
+          nvm install $(cat .nvmrc)
+          nvm use
           cd web && npm install
           ./node_modules/.bin/cypress run --record --key $CYPRESS_RECORD_KEY --group $CIRCLE_JOB
         environment:

.gitignore

@@ -17,6 +17,7 @@ rice-box.go
 
 /build
 /dist
+/node_modules
 
 # generated fakes
 internal/api/fake

.nvmrc

-v10.15.0
+v10.15.3

Dockerfile

@@ -4,7 +4,9 @@
 # ------------------------------------------------------------------------------
 # Build web assets
 # ------------------------------------------------------------------------------
-FROM node:10.15.3 as base
+ARG NODE_VERSION
+
+FROM node:$NODE_VERSION as base
 
 ADD web/ /web
 WORKDIR /web

changelogs/unreleased/272-nfarruggiagl

+Upgrade to Angular 8 and Clarity 2.2
\ No newline at end of file

package-lock.json

+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "cytoscape": {
+      "version": "3.10.0",
+      "resolved": "https://build-artifactory.eng.vmware.com/api/npm/npm/cytoscape/-/cytoscape-3.10.0.tgz",
+      "integrity": "sha1-O0YuDTUSHs0tJwL0cJFf1trgF3c=",
+      "requires": {
+        "heap": "^0.2.6",
+        "lodash.debounce": "^4.0.8"
+      }
+    },
+    "heap": {
+      "version": "0.2.6",
+      "resolved": "https://build-artifactory.eng.vmware.com/api/npm/npm/heap/-/heap-0.2.6.tgz",
+      "integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
+    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://build-artifactory.eng.vmware.com/api/npm/npm/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    }
+  }
+}

web/angular.json

@@ -57,8 +57,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "3mb",
+                  "maximumError": "6mb"
                 }
               ]
             }

web/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "node --max-old-space-size=2048 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build": "node --max-old-space-size=8000 ./node_modules/@angular/cli/bin/ng build --prod",
     "test": "ng test --browsers=ChromeDebug",
     "test:headless": "ng test --watch=false --browsers=ChromeHeadless",
     "lint": "ng lint",
@@ -19,22 +19,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
-    "@angular/common": "~7.2.0",
-    "@angular/compiler": "~7.2.0",
-    "@angular/core": "~7.2.0",
-    "@angular/forms": "~7.2.0",
-    "@angular/platform-browser": "~7.2.0",
-    "@angular/platform-browser-dynamic": "~7.2.0",
-    "@angular/router": "~7.2.0",
-    "@clr/angular": "^1.1.0",
-    "@clr/icons": "^1.1.0",
-    "@clr/ui": "^1.1.0",
+    "@angular/animations": "~8.2.6",
+    "@angular/common": "~8.2.6",
+    "@angular/compiler": "~8.2.6",
+    "@angular/core": "~8.2.6",
+    "@angular/forms": "~8.2.6",
+    "@angular/platform-browser": "~8.2.6",
+    "@angular/platform-browser-dynamic": "~8.2.6",
+    "@angular/router": "~8.2.6",
+    "@clr/angular": "^2.2.0",
+    "@clr/icons": "^2.2.0",
+    "@clr/ui": "^2.2.0",
     "@ng-select/ng-select": "^2.20.0",
-    "@types/cytoscape": "^3.4.3",
+    "@types/cytoscape": "^3.8.2",
     "@webcomponents/custom-elements": "^1.0.0",
     "core-js": "^2.5.4",
-    "cytoscape": "^3.7.3",
+    "cytoscape": "^3.10.0",
     "cytoscape-dagre": "^2.2.2",
     "cytoscape-node-html-label": "^1.1.3",
     "d3-graphviz": "^2.6.1",
@@ -48,16 +48,16 @@
     "moment": "^2.24.0",
     "ngx-highlightjs": "^3.0.3",
     "ngx-markdown": "^8.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.3",
     "tslib": "^1.9.0",
     "ws": "^7.1.2",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/cli": "~7.3.3",
-    "@angular/compiler-cli": "~7.2.0",
-    "@angular/language-service": "~7.2.0",
+    "@angular-devkit/build-angular": "~0.803.4",
+    "@angular/cli": "~8.3.4",
+    "@angular/compiler-cli": "~8.2.6",
+    "@angular/language-service": "~8.2.6",
     "@types/d3": "~4.11.0",
     "@types/graphlib-dot": "^0.6.1",
     "@types/jasmine": "~2.8.8",
@@ -65,7 +65,7 @@
     "@types/lodash": "^4.14.123",
     "@types/node": "~8.9.4",
     "@types/ws": "^6.0.3",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.1",
     "cypress": "^3.4.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
@@ -81,6 +81,6 @@
     "tslint": "~5.11.0",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "typescript": "~3.2.2"
+    "typescript": "~3.5.3"
   }
 }

web/src/app/app.component.ts

@@ -19,7 +19,7 @@ import { IconService } from './modules/overview/services/icon.service';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit, OnDestroy {
-  @ViewChild('scrollTarget') scrollTarget: ElementRef;
+  @ViewChild('scrollTarget', { static: false }) scrollTarget: ElementRef;
   navigation: Navigation;
   previousUrl: string;
 

web/src/app/modules/overview/components/card/card.component.spec.ts

@@ -9,8 +9,7 @@ import {
 import { CardComponent } from './card.component';
 import { OverviewModule } from '../../overview.module';
 import { CardView, TextView, Action } from '../../../../models/content';
-import { FormGroup } from '@angular/forms/src/model';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
 import { SimpleChange } from '@angular/core';
 import { ViewService } from '../../services/view/view.service';
 import { viewServiceStub } from 'src/app/testing/view-service.stub';

web/src/app/modules/overview/components/card/card.component.ts

@@ -20,7 +20,7 @@ export class CardComponent implements OnChanges {
   @Input()
   view: CardView;
 
-  @ViewChild('appForm') appForm: FormComponent;
+  @ViewChild('appForm', { static: false }) appForm: FormComponent;
 
   title: string;
 

web/src/app/modules/overview/components/cytoscape/cytoscape.component.ts

@@ -35,7 +35,7 @@ cytoscape.use(dagre);
   ],
 })
 export class CytoscapeComponent implements OnChanges {
-  @ViewChild('cy') private cy: ElementRef;
+  @ViewChild('cy', { static: true }) private cy: ElementRef;
   @Input() public elements: any;
   @Input() public style: Stylesheet[];
   @Input() public layout: any;

web/src/app/modules/overview/components/form/form.component.html

@@ -17,7 +17,7 @@
                     <ng-container *ngSwitchCase="'radio'">
                         <clr-radio-container>
                             <label [for]="field.name">{{field.label}}</label>
-                            <clr-radio-wrapper *ngFor="let opt of fieldChoices(field)">
+                            <clr-radio-wrapper *ngFor="let opt of fieldChoices(field); trackBy: trackByFn">
                                 <input type="radio" clrRadio [formControlName]="field.name" [value]="opt.value"/>
                                 <label>{{opt.label}}</label>
                             </clr-radio-wrapper>
@@ -45,7 +45,7 @@
                         <clr-select-container>
                             <label [for]="field.name">{{field.label}}</label>
                             <select clrSelect [formControlName]="field.name" [multiple]="field.configuration.multiple">
-                                <option *ngFor="let opt of fieldChoices(field)" [value]="opt.value">
+                                <option *ngFor="let opt of fieldChoices(field); trackBy: trackByFn" [value]="opt.value">
                                     {{opt.label}}
                                 </option>
                             </select>

web/src/app/modules/overview/components/graphviz/graphviz.component.ts

@@ -23,7 +23,7 @@ import { D3GraphvizService } from '../../services/d3/d3graphviz.service';
   encapsulation: ViewEncapsulation.None,
 })
 export class GraphvizComponent implements AfterViewChecked {
-  @ViewChild('viewer') private viewer: ElementRef;
+  @ViewChild('viewer', { static: true }) private viewer: ElementRef;
   @Input() view: GraphvizView;
 
   constructor(private d3GraphvizService: D3GraphvizService) {}

web/src/app/modules/overview/components/heptagon-label/heptagon-label.component.spec.ts

@@ -2,15 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { ElementRef } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Point } from '../../models/point';
 import { HeptagonLabelComponent } from './heptagon-label.component';
 
-class MockElementRef extends ElementRef {
-  nativeElement = {};
-}
-
 describe('HeptagonLabelComponent', () => {
   let component: HeptagonLabelComponent;
   let fixture: ComponentFixture<HeptagonLabelComponent>;
@@ -18,7 +13,6 @@ describe('HeptagonLabelComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [HeptagonLabelComponent],
-      providers: [{ provide: ElementRef, useClass: MockElementRef }],
     }).compileComponents();
   }));
 

web/src/app/modules/overview/components/heptagon-label/heptagon-label.component.ts

@@ -40,10 +40,10 @@ import { Point } from '../../models/point';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeptagonLabelComponent implements AfterViewChecked {
-  @ViewChild('container')
+  @ViewChild('container', { static: true })
   container: ElementRef;
 
-  @ViewChild('label')
+  @ViewChild('label', { static: true })
   labelText: ElementRef;
 
   @Input()

web/src/app/modules/overview/components/logs/logs.component.ts

@@ -30,7 +30,7 @@ export class LogsComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   private containerLogsDiffer: IterableDiffer<LogEntry>;
   @Input() view: LogsView;
-  @ViewChild('scrollTarget') scrollTarget: ElementRef;
+  @ViewChild('scrollTarget', { static: true }) scrollTarget: ElementRef;
   containerLogs: LogEntry[] = [];
 
   selectedContainer = '';

web/src/app/modules/overview/components/pod-status/pod-status.component.ts

@@ -21,7 +21,7 @@ import { PodStatus } from '../../models/pod-status';
   encapsulation: ViewEncapsulation.None,
 })
 export class PodStatusComponent implements OnChanges {
-  @ViewChild('container') private container: ElementRef;
+  @ViewChild('container', { static: false }) private container: ElementRef;
 
   @Input() view: PodStatusView;