chore(webui): dropping rxjs-compat in favor of pipe

webui/package.json

@@ -35,7 +35,6 @@
     "date-fns": "^1.29.0",
     "lodash": "^4.17.5",
     "rxjs": "^6.4.0",
-    "rxjs-compat": "^6.0.0-rc.0",
     "tslib": "^1.9.0",
     "zone.js": "^0.8.19"
   },

webui/src/app/components/health/health.component.ts

@@ -1,12 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { distanceInWordsStrict, format, subSeconds } from 'date-fns';
 import * as _ from 'lodash';
-import 'rxjs/add/observable/timer';
+import { Subscription, timer } from 'rxjs';
-import 'rxjs/add/operator/map';
+import { mergeMap, timeInterval } from 'rxjs/operators';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/timeInterval';
-import { Observable } from 'rxjs/Observable';
-import { Subscription } from 'rxjs/Subscription';
 import { ApiService } from '../../services/api.service';
 
 @Component({
@@ -32,9 +28,11 @@ export class HealthComponent implements OnInit, OnDestroy {
   constructor(private apiService: ApiService) {}
 
   ngOnInit() {
-    this.sub = Observable.timer(0, 3000)
+    this.sub = timer(0, 3000)
-      .timeInterval()
+      .pipe(
-      .mergeMap(() => this.apiService.fetchHealthStatus())
+        timeInterval(),
+        mergeMap(() => this.apiService.fetchHealthStatus())
+      )
       .subscribe(data => {
         if (data) {
           if (!_.isEqual(this.previousRecentErrors, data.recent_errors)) {

webui/src/app/components/providers/providers.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs/Observable';
+import { Subscription, timer } from 'rxjs';
-import { Subscription } from 'rxjs/Subscription';
+import { mergeMap, timeInterval } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 
 @Component({
@@ -23,9 +23,11 @@ export class ProvidersComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.maxItem = 100;
     this.keyword = '';
-    this.sub = Observable.timer(0, 2000)
+    this.sub = timer(0, 2000)
-      .timeInterval()
+      .pipe(
-      .mergeMap(() => this.apiService.fetchProviders())
+        timeInterval(),
+        mergeMap(() => this.apiService.fetchProviders())
+      )
       .subscribe(data => {
         if (!_.isEqual(this.previousData, data)) {
           this.previousData = _.cloneDeep(data);

webui/src/app/services/api.service.ts

@@ -4,12 +4,8 @@ import {
   HttpHeaders
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import 'rxjs/add/observable/of';
+import { Observable, EMPTY, of } from 'rxjs';
-import 'rxjs/add/operator/catch';
+import { catchError, map, retry } from 'rxjs/operators';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import { EMPTY } from 'rxjs/internal/observable/empty';
-import { Observable } from 'rxjs/Observable';
 
 export interface ProviderType {
   [provider: string]: {
@@ -29,40 +25,40 @@ export class ApiService {
   }
 
   fetchVersion(): Observable<any> {
-    return this.http
+    return this.http.get('../api/version', { headers: this.headers }).pipe(
-      .get('../api/version', { headers: this.headers })
+      retry(4),
-      .retry(4)
+      catchError((err: HttpErrorResponse) => {
-      .catch((err: HttpErrorResponse) => {
         console.error(
           `[version] returned code ${err.status}, body was: ${err.error}`
         );
         return EMPTY;
-      });
+      })
+    );
   }
 
   fetchHealthStatus(): Observable<any> {
-    return this.http
+    return this.http.get('../health', { headers: this.headers }).pipe(
-      .get('../health', { headers: this.headers })
+      retry(2),
-      .retry(2)
+      catchError((err: HttpErrorResponse) => {
-      .catch((err: HttpErrorResponse) => {
         console.error(
           `[health] returned code ${err.status}, body was: ${err.error}`
         );
         return EMPTY;
-      });
+      })
+    );
   }
 
   fetchProviders(): Observable<any> {
-    return this.http
+    return this.http.get('../api/providers', { headers: this.headers }).pipe(
-      .get('../api/providers', { headers: this.headers })
+      retry(2),
-      .retry(2)
+      catchError((err: HttpErrorResponse) => {
-      .catch((err: HttpErrorResponse) => {
         console.error(
           `[providers] returned code ${err.status}, body was: ${err.error}`
         );
-        return Observable.of<any>({});
+        return of<any>({});
-      })
+      }),
-      .map((data: any): ProviderType => this.parseProviders(data));
+      map((data: any): ProviderType => this.parseProviders(data))
+    );
   }
 
   parseProviders(data: any): ProviderType {

webui/src/app/services/window.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { EventManager } from '@angular/platform-browser';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
 @Injectable()
 export class WindowService {

webui/yarn.lock

@@ -6316,11 +6316,6 @@ rw@1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
 
-rxjs-compat@^6.0.0-rc.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.4.0.tgz#800923c15697948e1f30f18c531b12b49451c75c"
-  integrity sha512-eo/O8RS83hJdJukCtA+IF6qnqa8FPOuVo+OPCzgVi+dbTle9KCdNv97IcQO0WwNVik7DJLKmf0F8uwzc0q40vw==
-
 rxjs@6.3.3:
   version "6.3.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.3.3.tgz#3c6a7fa420e844a81390fb1158a9ec614f4bad55"