[#5470] Handle the potential delay in realtime in inspector chart

pinpoint-apm · May 14, 2019 · d1b6d77 · d1b6d77
1 parent ee01fd6
commit d1b6d77
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 55 deletions.
diff --git a/...v2/src/app/core/components/inspector-chart/agent-data-source-chart-container.component.ts b/...v2/src/app/core/components/inspector-chart/agent-data-source-chart-container.component.ts
@@ -115,22 +115,14 @@ export class AgentDataSourceChartContainerComponent extends InspectorChartContai
  return Math.hypot(x1 - x2, y1 - y2);
  }
 
- protected getChartData(range: number[]): void {
- this.chartDataService.getData(range)
- .subscribe(
- (data: IAgentDataSourceChart[] | AjaxException) => {
- if (isThatType<AjaxException>(data, 'exception')) {
- this.setErrObj(data);
- } else {
- this.chartData = data;
- this.sourceDataArr = this.makeChartData(data);
- this.setChartConfig(this.sourceDataArr);
- }
- },
- () => {
- this.setErrObj();
- }
- );
+ chartDataResCallbackFn(data: IAgentDataSourceChart[] | AjaxException | null): void {
+ if (!data || isThatType<AjaxException>(data, 'exception')) {
+ this.setErrObj(data);
+ } else {
+ this.chartData = data;
+ this.sourceDataArr = this.makeChartData(data);
+ this.setChartConfig(this.sourceDataArr);
+ }
  }
 
  onCheckedIdChange(checkedIdSet: Set<number>): void {

diff --git a/.../app/core/components/inspector-chart/application-data-source-chart-container.component.ts b/.../app/core/components/inspector-chart/application-data-source-chart-container.component.ts
@@ -54,22 +54,14 @@ export class ApplicationDataSourceChartContainerComponent extends InspectorChart
  this.unsubscribe.complete();
  }
 
- protected getChartData(range: number[]): void {
- this.chartDataService.getData(range)
- .subscribe(
- (data: IApplicationDataSourceChart[] | AjaxException) => {
- if (isThatType<AjaxException>(data, 'exception')) {
- this.setErrObj(data);
- } else {
- this.chartData = data;
- this.sourceDataArr = this.makeChartData(data);
- this.setChartConfig(this.sourceDataArr[0]);
- }
- },
- () => {
- this.setErrObj();
- }
- );
+ chartDataResCallbackFn(data: IApplicationDataSourceChart[] | AjaxException | null): void {
+ if (!data || isThatType<AjaxException>(data, 'exception')) {
+ this.setErrObj(data);
+ } else {
+ this.chartData = data;
+ this.sourceDataArr = this.makeChartData(data);
+ this.setChartConfig(this.sourceDataArr[0]);
+ }
  }
 
  onSourceDataSelected(index: number): void {

diff --git a/web/src/main/webapp/v2/src/app/core/components/inspector-chart/inspector-chart-container.ts b/web/src/main/webapp/v2/src/app/core/components/inspector-chart/inspector-chart-container.ts
@@ -1,8 +1,8 @@
 import { ComponentFactoryResolver, Injector } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment-timezone';
-import { Subject, Observable, combineLatest, merge } from 'rxjs';
-import { filter, map, skip, withLatestFrom } from 'rxjs/operators';
+import { Subject, Observable, combineLatest, merge, of } from 'rxjs';
+import { filter, map, skip, withLatestFrom, exhaustMap, tap, catchError } from 'rxjs/operators';
 
 import { II18nText, IChartConfig, IErrObj } from 'app/core/components/inspector-chart/inspector-chart.component';
 import { WebAppSettingDataService, NewUrlStateNotificationService, AnalyticsService, TRACKED_EVENT_LIST, StoreHelperService, DynamicPopupService } from 'app/shared/services';
@@ -95,27 +95,29 @@ export abstract class InspectorChartContainer {
  skip(1),
  filter((_: number[]) => !this.newUrlStateNotificationService.isRealTimeMode())
  )
- ).subscribe((range: number[]) => {
- this.previousRange = range;
- this.getChartData(range);
- });
+ ).pipe(
+ tap((range: number[]) => this.previousRange = range),
+ exhaustMap((range: number[]) => {
+ return this.chartDataService.getData(range).pipe(
+ catchError(() => of(null))
+ );
+ })
+ ).subscribe((data) => this.chartDataResCallbackFn(data));
  }
 
  onRetryGetChartData(): void {
- this.getChartData(this.previousRange);
+ this.chartDataService.getData(this.previousRange).pipe(
+ catchError(() => of(null))
+ ).subscribe((data) => this.chartDataResCallbackFn(data));
  }
 
- protected getChartData(range: number[]): void {
- this.chartDataService.getData(range).subscribe((data: IChartDataFromServer | IChartDataFromServer[] | AjaxException) => {
- if (isThatType<AjaxException>(data, 'exception')) {
- this.setErrObj(data);
- } else {
- this.chartData = data;
- this.setChartConfig(this.makeChartData(data));
- }
- }, () => {
- this.setErrObj();
- });
+ protected chartDataResCallbackFn(data: IChartDataFromServer | IChartDataFromServer[] | AjaxException | null): void {
+ if (!data || isThatType<AjaxException>(data, 'exception')) {
+ this.setErrObj(data);
+ } else {
+ this.chartData = data;
+ this.setChartConfig(this.makeChartData(data));
+ }
  }
 
  protected setChartConfig(data: {[key: string]: any} | {[key: string]: any}[]): void {
@@ -127,11 +129,15 @@ export abstract class InspectorChartContainer {
  };
  }
 
- protected setErrObj(data?: AjaxException): void {
- this.errObj = {
- errType: data ? 'EXCEPTION' : 'ELSE',
- errMessage: data ? data.exception.message : null
- };
+ protected setErrObj(data: any): void {
+ this.errObj = data ?
+ {
+ errType: 'EXCEPTION',
+ errMessage: data.exception.message
+ } : {
+ errType: 'ELSE',
+ errMessage: null
+ };
  }
 
  protected isDataEmpty(data: {[key: string]: any} | {[key: string]: any}[]): boolean {