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

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 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/timeInterval';
-import { Observable } from 'rxjs/Observable';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription, timer } from 'rxjs';
+import { mergeMap, timeInterval } from 'rxjs/operators';
 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)
-      .timeInterval()
-      .mergeMap(() => this.apiService.fetchHealthStatus())
+    this.sub = timer(0, 3000)
+      .pipe(
+        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 } from 'rxjs/Subscription';
+import { Subscription, timer } from 'rxjs';
+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)
-      .timeInterval()
-      .mergeMap(() => this.apiService.fetchProviders())
+    this.sub = timer(0, 2000)
+      .pipe(
+        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 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import { EMPTY } from 'rxjs/internal/observable/empty';
-import { Observable } from 'rxjs/Observable';
+import { Observable, EMPTY, of } from 'rxjs';
+import { catchError, map, retry } from 'rxjs/operators';
 
 export interface ProviderType {
   [provider: string]: {
@@ -29,40 +25,40 @@ export class ApiService {
   }
 
   fetchVersion(): Observable<any> {
-    return this.http
-      .get('../api/version', { headers: this.headers })
-      .retry(4)
-      .catch((err: HttpErrorResponse) => {
+    return this.http.get('../api/version', { headers: this.headers }).pipe(
+      retry(4),
+      catchError((err: HttpErrorResponse) => {
         console.error(
           `[version] returned code ${err.status}, body was: ${err.error}`
         );
         return EMPTY;
-      });
+      })
+    );
   }
 
   fetchHealthStatus(): Observable<any> {
-    return this.http
-      .get('../health', { headers: this.headers })
-      .retry(2)
-      .catch((err: HttpErrorResponse) => {
+    return this.http.get('../health', { headers: this.headers }).pipe(
+      retry(2),
+      catchError((err: HttpErrorResponse) => {
         console.error(
           `[health] returned code ${err.status}, body was: ${err.error}`
         );
         return EMPTY;
-      });
+      })
+    );
   }
 
   fetchProviders(): Observable<any> {
-    return this.http
-      .get('../api/providers', { headers: this.headers })
-      .retry(2)
-      .catch((err: HttpErrorResponse) => {
+    return this.http.get('../api/providers', { headers: this.headers }).pipe(
+      retry(2),
+      catchError((err: HttpErrorResponse) => {
         console.error(
           `[providers] returned code ${err.status}, body was: ${err.error}`
         );
-        return Observable.of<any>({});
-      })
-      .map((data: any): ProviderType => this.parseProviders(data));
+        return of<any>({});
+      }),
+      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 {