WIP Angular 8 migration

cloudfoundry · KlapTrap · Nov 19, 2019 · Oct 2, 2019 · Oct 2, 2019 · Oct 2, 2019
commit 8f0ac85cc8ac0a1337fb0f662c806283d9492612
diff --git a/package.json b/package.json
@@ -145,4 +145,4 @@
     "typescript": "<3.6.0",
     "@nrwl/workspace": "8.5.2"
   }
-}
+}
diff --git a/...cations/application/application-tabs-base/tabs/log-stream-tab/log-stream-tab.component.ts b/...cations/application/application-tabs-base/tabs/log-stream-tab/log-stream-tab.component.ts
@@ -3,8 +3,8 @@ import { NgModel } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import * as moment from 'moment';
 import { NEVER, Observable, Subject } from 'rxjs';
-import websocketConnect from 'rxjs-websockets';
-import { catchError, filter, share } from 'rxjs/operators';
+import makeWebSocketObservable, { GetWebSocketResponses } from 'rxjs-websockets';
+import { catchError, filter, share, switchMap, map } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../../../../cloud-foundry/src/cf-app-state';
 import { LoggerService } from '../../../../../../../../core/src/core/logger.service';
@@ -53,18 +53,27 @@ export class LogStreamTabComponent implements OnInit {
         this.applicationService.cfGuid
         }/apps/${this.applicationService.appGuid}/stream`;
 
-      const { messages, connectionStatus } = websocketConnect(streamUrl, new Subject<string>());
-      messages.pipe(catchError(e => {
+      const socket$ = makeWebSocketObservable(streamUrl);
+      socket$.pipe(catchError(e => {
         this.logService.error(
           'Error while connecting to socket: ' + JSON.stringify(e)
         );
         return [];
       }),
         share(),
-        filter(data => !!data && data.length));
-
-      this.messages = messages;
-      this.connectionStatus = connectionStatus;
+        filter(data => !!data && data.length)
+      );
+
+      this.messages = socket$.pipe(
+        // the observable produces a value once the websocket has been opened
+        switchMap((getResponses: GetWebSocketResponses) => {
+          console.log('websocket opened')
+          return getResponses(new Subject<string>());
+        }),
+        map((message: string) => message),
+        share()
+      );
+      // this.connectionStatus = connectionStatus;
     }
   }
 

diff --git a/...cloud-foundry/src/features/applications/deploy-application/deploy-application-deployer.ts b/...cloud-foundry/src/features/applications/deploy-application/deploy-application-deployer.ts
@@ -134,7 +134,7 @@ export class DeployApplicationDeployer {
 
         this.inputStream = new Subject<string>();
         this.messages = websocketConnect(streamUrl, this.inputStream)
-          .messages.pipe(
+          .pipe(
             catchError(e => {
               return [];
             }),

diff --git a/...ages/cloud-foundry/src/features/applications/ssh-application/ssh-application.component.ts b/...ages/cloud-foundry/src/features/applications/ssh-application/ssh-application.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { NEVER, Observable, Subject, Subscription } from 'rxjs';
 import websocketConnect from 'rxjs-websockets';
-import { catchError, first, map } from 'rxjs/operators';
+import { catchError, first, map, switchMap } from 'rxjs/operators';
 
 import { CFAppState } from '../../../../../cloud-foundry/src/cf-app-state';
 import { IApp } from '../../../../../core/src/core/cf-api.types';
@@ -81,19 +81,20 @@ export class SshApplicationComponent implements OnInit {
       );
       this.sshInput = new Subject<string>();
       const connection = websocketConnect(
-        streamUrl,
-        this.sshInput
+        streamUrl
       );
 
-      this.messages = connection.messages.pipe(
+      this.messages = connection.pipe(
+        switchMap(getResponse => getResponse(this.sshInput)),
         catchError(e => {
           if (e.type === 'error') {
             this.errorMessage = 'Error connecting to web socket';
           }
           return [];
         }));
 
-      this.connectionStatus = connection.connectionStatus;
+      // TODO angular 8
+      // this.connectionStatus = connection.connectionStatus;
 
       this.breadcrumbs$ = this.applicationService.waitForAppEntity$.pipe(
         map(app => this.getBreadcrumbs(app.entity.entity)),

diff --git a/...rc/features/cloud-foundry/tabs/cloud-foundry-firehose/cloud-foundry-firehose.component.ts b/...rc/features/cloud-foundry/tabs/cloud-foundry-firehose/cloud-foundry-firehose.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import websocketConnect from 'rxjs-websockets';
-import { catchError, filter, share } from 'rxjs/operators';
+import { catchError, filter, share, map, switchMap } from 'rxjs/operators';
 
 import { LoggerService } from '../../../../../../core/src/core/logger.service';
 import { UtilsService } from '../../../../../../core/src/core/utils.service';
@@ -41,14 +41,15 @@ export class CloudFoundryFirehoseComponent implements OnInit {
   }
 
   private setupFirehoseStream(streamUrl: string) {
-    const { messages, connectionStatus } = websocketConnect(
-      streamUrl,
-      new Subject<string>()
+    this.messages = websocketConnect(
+      streamUrl
+    ).pipe(
+      switchMap((get) => get(new Subject<string>())),
+      map((message: string) => message)
     );
-
-    this.messages = messages;
-    this.connectionStatus = connectionStatus;
-    messages.pipe(
+    // TODO Angular 8
+    // this.connectionStatus = connectionStatus;
+    this.messages.pipe(
       catchError(e => {
         return [];
       }),

diff --git a/src/frontend/packages/core/src/core/entity-catalogue/action-dispatcher/action-dispatcher.ts b/src/frontend/packages/core/src/core/entity-catalogue/action-dispatcher/action-dispatcher.ts
@@ -69,7 +69,7 @@ export class EntityActionDispatcherManager<T extends OrchestratedActionBuilders
     return this.getActionDispatcher('create').dispatch(...args);
   }
 
-  public dispatchGetAll(...args: Parameters<T['getAll']>) {
+  public dispatchGetAll(...args: Parameters<T['getMultiple']>) {
     return this.getActionDispatcher('getMultiple').dispatch(...args);
   }
 

diff --git a/...ontend/packages/core/src/core/entity-catalogue/action-orchestrator/action-orchestrator.ts b/...ontend/packages/core/src/core/entity-catalogue/action-orchestrator/action-orchestrator.ts
@@ -187,12 +187,12 @@ export class ActionOrchestrator<T extends OrchestratedActionBuilders = Orchestra
     return new EntityActionDispatcherManager<T>(actionDispatcher, this);
   }
 
-  public getActionBuilder<Y extends keyof T>(actionType: Y): T[Y] {
+  public getActionBuilder<Y extends keyof T>(actionType: Y) {
     const actionBuilderForType = this.actionBuilders[actionType];
     if (!actionBuilderForType) {
       return null;
     }
-    const actionBuilder: T[Y] = (...args: Parameters<T[Y]>) => {
+    const actionBuilder = (...args: Parameters<T[Y]>) => {
       const action = actionBuilderForType(...args) as ActionBuilderAction;
       if (action) {
         action.actionBuilderActionType = actionType as string;

diff --git a/...re/src/shared/components/list/list-table/table-cell-select/table-cell-select.component.ts b/...re/src/shared/components/list/list-table/table-cell-select/table-cell-select.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input } from '@angular/core';
-import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 

diff --git a/src/frontend/packages/core/src/shared/components/list/simple-list/simple-list.component.ts b/src/frontend/packages/core/src/shared/components/list/simple-list/simple-list.component.ts
@@ -19,7 +19,7 @@ export class SimpleListComponent implements OnInit {
   @Input()
   public catalogueEntity: StratosCatalogueEntity;
 
-  @ViewChild(ListHostDirective)
+  @ViewChild(ListHostDirective, { static: true })
   public listHost: ListHostDirective;
 
   private listConfig: ListConfig<any>;

diff --git a/src/frontend/packages/core/src/shared/components/page-subheader/page-subheader.component.ts b/src/frontend/packages/core/src/shared/components/page-subheader/page-subheader.component.ts
@@ -136,13 +136,13 @@ export class PageSubheaderComponent implements AfterViewInit, OnDestroy {
       this.checkScrollBounds();
     }
   }
-
+  // TODO ANGULAR 8
   private navIsOverflowing() {
-    if (this.navOuter) {
-      const avaliableWidth = this.navOuter.nativeElement.offsetWidth;
-      const navFullWidth = this.nav._elementRef.nativeElement.offsetWidth;
-      return avaliableWidth < navFullWidth;
-    }
+    // if (this.navOuter) {
+    //   const avaliableWidth = this.navOuter.nativeElement.offsetWidth;
+    //   const navFullWidth = this.nav._elementRef.nativeElement.offsetWidth;
+    //   return avaliableWidth < navFullWidth;
+    // }
     return false;
   }
 
@@ -174,10 +174,11 @@ export class PageSubheaderComponent implements AfterViewInit, OnDestroy {
       this.disableRight = false;
     }
   }
-
+  // TODO ANGULAR 8
   private navScrolledFarRight() {
-    const { scrollLeft } = this.navScroller.nativeElement;
-    return this.nav._elementRef.nativeElement.offsetWidth === (this.navScroller.nativeElement.offsetWidth + scrollLeft);
+    // const { scrollLeft } = this.navScroller.nativeElement;
+    // return this.nav._elementRef.nativeElement.offsetWidth === (this.navScroller.nativeElement.offsetWidth + scrollLeft);
+    return false;
   }
 
   private navScrolledFarLeft() {

diff --git a/src/frontend/packages/core/src/shared/components/ssh-viewer/ssh-viewer.component.ts b/src/frontend/packages/core/src/shared/components/ssh-viewer/ssh-viewer.component.ts
@@ -10,7 +10,8 @@ import {
 } from '@angular/core';
 
 import { Terminal } from 'xterm';
-import { fit } from 'xterm/lib/addons/fit/fit';
+// TODO
+// import { fit } from 'xterm/lib/addons/fit/fit';
 
 import { Observable, Subject, Subscription } from 'rxjs';
 
@@ -71,23 +72,26 @@ export class SshViewerComponent implements OnInit, OnDestroy, AfterViewChecked {
     });
 
     this.xterm.open(this.container.nativeElement);
-    this.xterm.on('data', this.onTermSendData);
-    this.xterm.on('resize', this.onTermResize);
+    // TODO
+    // this.xterm.on('data', this.onTermSendData);
+    // this.xterm.on('resize', this.onTermResize);
 
     this.reconnect();
   }
 
   ngAfterViewChecked() {
     if (this.xterm) {
-      fit(this.xterm);
+      // TODO ANGULAR 8
+      // fit(this.xterm);
     }
   }
 
   ngOnDestroy() {
     this.isDestroying = true;
     if (this.xterm) {
-      this.xterm.off('data', this.onTermSendData);
-      this.xterm.off('resize', this.onTermResize);
+      // TODO ANGULAR 8
+      // this.xterm.off('data', this.onTermSendData);
+      // this.xterm.off('resize', this.onTermResize);
     }
     this.disconnect();
     if (this.connectSubscription && !this.connectSubscription.closed) {

diff --git a/...ore/src/entity-request-pipeline/entity-request-base-handlers/build-entity-request.pipe.ts b/...ore/src/entity-request-pipeline/entity-request-base-handlers/build-entity-request.pipe.ts
@@ -1,5 +1,4 @@
 import { HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http';
-import { RequestOptions } from '@angular/http';
 
 import { ApiRequestTypes } from '../../reducers/api-request-reducer/request-helpers';
 
@@ -19,35 +18,36 @@ export function getRequestTypeFromRequestType(requestType: ApiRequestTypes) {
 
   return 'GET';
 }
-
-function getHttpParams(options: RequestOptions) {
-  if (!options.params) {
-    return null;
-  }
-  return Array.from(options.params.paramsMap.entries()).reduce((obj, [key, value]) => {
-    obj[key] = value;
-    return obj;
-  }, {});
-}
+// TODO Remove -  angular 8
+// function getHttpParams(options: RequestOptions) {
+//   if (!options.params) {
+//     return null;
+//   }
+//   return Array.from(options.params.paramsMap.entries()).reduce((obj, [key, value]) => {
+//     obj[key] = value;
+//     return obj;
+//   }, {} as { [param: string]: string });
+// }
 
 // This will convert the old style RequestOptions into a new HttpRequest
-function getRequestFromLegacyOptions(
-  options: RequestOptions,
-  requestType: ApiRequestTypes
-) {
-  const method = getRequestTypeFromRequestType(requestType);
-  return new HttpRequest(
-    method,
-    options.url,
-    options.body,
-    {
-      headers: new HttpHeaders(options.headers ? options.headers.toJSON() : null),
-      params: new HttpParams({
-        fromObject: getHttpParams(options)
-      })
-    },
-  );
-}
+// TODO Remove -  angular 8
+// function getRequestFromLegacyOptions(
+//   options: RequestOptions,
+//   requestType: ApiRequestTypes
+// ) {
+//   const method = getRequestTypeFromRequestType(requestType);
+//   return new HttpRequest(
+//     method,
+//     options.url,
+//     options.body,
+//     {
+//       headers: new HttpHeaders(options.headers ? options.headers.toJSON() : null),
+//       params: new HttpParams({
+//         fromObject: getHttpParams(options)
+//       })
+//     },
+//   );
+// }
 
 
 export const buildRequestEntityPipe = (

diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -9,10 +9,20 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "module": "es2015",
-    "types": ["hammerjs", "jasmine", "jasminewd2", "karma"],
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2017", "dom"],
+    "module": "commonjs",
+    "types": [
+      "hammerjs",
+      "jasmine",
+      "jasminewd2",
+      "karma"
+    ],
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
     "preserveSymlinks": true
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -145,4 +145,4 @@ @@
         "typescript": "<3.6.0",
         "@nrwl/workspace": "8.5.2"
       }
-    }
+    }