From 8f16ff9c49b52c1f68482bf96087cb8d03867ddd Mon Sep 17 00:00:00 2001 From: Cotton Hou Date: Tue, 26 Feb 2019 23:48:07 +0800 Subject: [PATCH] chore(webui): dropping rxjs-compat in favor of pipe --- webui/package.json | 1 - .../app/components/health/health.component.ts | 16 ++++--- .../providers/providers.component.ts | 12 +++--- webui/src/app/services/api.service.ts | 42 +++++++++---------- webui/src/app/services/window.service.ts | 2 +- webui/yarn.lock | 5 --- 6 files changed, 34 insertions(+), 44 deletions(-) diff --git a/webui/package.json b/webui/package.json index 7cee00f0b..da6abcfaa 100644 --- a/webui/package.json +++ b/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" }, diff --git a/webui/src/app/components/health/health.component.ts b/webui/src/app/components/health/health.component.ts index 2a31b5008..ff290fa16 100644 --- a/webui/src/app/components/health/health.component.ts +++ b/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)) { diff --git a/webui/src/app/components/providers/providers.component.ts b/webui/src/app/components/providers/providers.component.ts index 2519f8eba..37790bf20 100644 --- a/webui/src/app/components/providers/providers.component.ts +++ b/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); diff --git a/webui/src/app/services/api.service.ts b/webui/src/app/services/api.service.ts index 33f6bedd2..4cf518afa 100644 --- a/webui/src/app/services/api.service.ts +++ b/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 { - 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 { - 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 { - 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({}); - }) - .map((data: any): ProviderType => this.parseProviders(data)); + return of({}); + }), + map((data: any): ProviderType => this.parseProviders(data)) + ); } parseProviders(data: any): ProviderType { diff --git a/webui/src/app/services/window.service.ts b/webui/src/app/services/window.service.ts index 7106ad34f..b54e993e5 100644 --- a/webui/src/app/services/window.service.ts +++ b/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 { diff --git a/webui/yarn.lock b/webui/yarn.lock index 566bda075..e568d6c91 100644 --- a/webui/yarn.lock +++ b/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"