From 3668b549839b188d6ce8a6df8ab555ab369a2b6f Mon Sep 17 00:00:00 2001 From: QooQooDass Date: Wed, 25 May 2022 15:16:24 +0900 Subject: [PATCH] [#8843] Implement apdex score chart in inspector --- ...nspector-contents-container.component.html | 1 + .../apdex-score-container.component.css | 0 .../apdex-score-container.component.html | 3 + .../apdex-score-container.component.ts | 65 +++++++++++ .../apdex-score/apdex-score-data.service.ts | 16 +++ .../apdex-score/apdex-score.component.ts | 4 +- .../app/core/components/apdex-score/index.ts | 4 +- ...nspector-contents-container.component.html | 1 + .../help-viewer-popup-container.component.ts | 2 + .../agent-active-request-chart-container.ts | 6 +- .../agent-apdex-score-chart.container.ts | 90 ++++++++++++++++ .../agent-cpu-chart-container.ts | 4 + ...ent-direct-buffer-count-chart-container.ts | 4 + ...nt-direct-buffer-memory-chart-container.ts | 4 + .../agent-jvm-heap-chart-container.ts | 4 + .../agent-jvm-non-heap-chart-container.ts | 4 + ...gent-loaded-class-count-chart-container.ts | 4 + ...ent-mapped-buffer-count-chart-container.ts | 4 + ...nt-mapped-buffer-memory-chart-container.ts | 4 + ...nt-open-file-descriptor-chart-container.ts | 4 + .../agent-response-time-chart-container.ts | 4 + ...gent-total-thread-count-chart-container.ts | 4 + .../agent-tps-chart-container.ts | 4 + ...nt-unloaded-class-count-chart-container.ts | 8 +- ...lication-active-request-chart-container.ts | 4 + ...application-apdex-score-chart.container.ts | 102 ++++++++++++++++++ ...ion-direct-buffer-count-chart-container.ts | 4 + ...on-direct-buffer-memory-chart-container.ts | 4 + .../application-jvm-cpu-chart-container.ts | 4 + .../application-jvm-heap-chart-container.ts | 4 + ...pplication-jvm-non-heap-chart-container.ts | 4 + ...tion-loaded-class-count-chart-container.ts | 4 + ...ion-mapped-buffer-count-chart-container.ts | 4 + ...on-mapped-buffer-memory-chart-container.ts | 4 + ...on-open-file-descriptor-chart-container.ts | 4 + ...plication-response-time-chart-container.ts | 4 + .../application-system-cpu-chart-container.ts | 4 + ...tion-total-thread-count-chart-container.ts | 4 + .../application-tps-chart-container.ts | 4 + ...on-unloaded-class-count-chart-container.ts | 4 + .../inspector-chart-container-factory.ts | 17 ++- .../inspector-chart-container.component.ts | 14 ++- .../inspector-chart-data.service.ts | 9 +- .../scatter-chart-container.component.html | 1 - .../scatter-chart-options.component.html | 2 +- .../scatter-chart-options.component.ts | 6 +- .../side-bar-container.component.html | 2 +- .../side-bar/side-bar-container.component.ts | 5 +- web/src/main/angular/src/assets/i18n/en.json | 32 +++++- web/src/main/angular/src/assets/i18n/ko.json | 28 +++++ web/src/main/angular/src/proxy.conf.js | 3 + 51 files changed, 505 insertions(+), 24 deletions(-) create mode 100644 web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.css create mode 100644 web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.html create mode 100644 web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.ts create mode 100644 web/src/main/angular/src/app/core/components/apdex-score/apdex-score-data.service.ts create mode 100644 web/src/main/angular/src/app/core/components/inspector-chart/agent-apdex-score-chart.container.ts create mode 100644 web/src/main/angular/src/app/core/components/inspector-chart/application-apdex-score-chart.container.ts diff --git a/web/src/main/angular/src/app/core/components/agent-inspector-contents/agent-inspector-contents-container.component.html b/web/src/main/angular/src/app/core/components/agent-inspector-contents/agent-inspector-contents-container.component.html index 9d90b3251949..68a1f1883a7f 100644 --- a/web/src/main/angular/src/app/core/components/agent-inspector-contents/agent-inspector-contents-container.component.html +++ b/web/src/main/angular/src/app/core/components/agent-inspector-contents/agent-inspector-contents-container.component.html @@ -16,6 +16,7 @@
+
diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.css b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.html b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.html new file mode 100644 index 000000000000..0c0ddc0e92fc --- /dev/null +++ b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.html @@ -0,0 +1,3 @@ + + diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.ts b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.ts new file mode 100644 index 000000000000..02de5d2d1166 --- /dev/null +++ b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.ts @@ -0,0 +1,65 @@ +import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { Subject, merge } from 'rxjs'; +import { filter, switchMap, tap, map, takeUntil } from 'rxjs/operators'; + +import { MessageQueueService, MESSAGE_TO, NewUrlStateNotificationService } from 'app/shared/services'; +import { ApdexScoreDataService } from './apdex-score-data.service'; +import { ServerMapData } from 'app/core/components/server-map/class/server-map-data.class'; + +@Component({ + selector: 'pp-apdex-score-container', + templateUrl: './apdex-score-container.component.html', + styleUrls: ['./apdex-score-container.component.css'] +}) +export class ApdexScoreContainerComponent implements OnInit, OnDestroy { + private unsubscribe = new Subject(); + + private selectedTarget: ISelectedTarget; + private serverMapData: ServerMapData; + private previousRange: number[]; + + apdexScore: number; + + constructor( + private apdexScoreDataService: ApdexScoreDataService, + private messageQueueService: MessageQueueService, + private newUrlStateNotificationService: NewUrlStateNotificationService, + private cd: ChangeDetectorRef, + ) { } + + ngOnInit() { + this.newUrlStateNotificationService.onUrlStateChange$.pipe( + takeUntil((this.unsubscribe)), + ).subscribe(() => { + this.serverMapData = null; + this.selectedTarget = null; + }); + + merge( + this.messageQueueService.receiveMessage(this.unsubscribe, MESSAGE_TO.SERVER_MAP_DATA_UPDATE).pipe( + tap(({serverMapData, range}: {serverMapData: ServerMapData, range: number[]}) => { + this.serverMapData = serverMapData; + this.previousRange = range; + }), + filter(() => !!this.selectedTarget), + ), + this.messageQueueService.receiveMessage(this.unsubscribe, MESSAGE_TO.SERVER_MAP_TARGET_SELECT).pipe( + filter(({isWAS, isMerged}: ISelectedTarget) => isWAS && !isMerged), + tap((target: ISelectedTarget) => this.selectedTarget = target), + ) + ).pipe( + map(() => this.serverMapData.getNodeData(this.selectedTarget.node[0])), + switchMap(({applicationName, serviceTypeCode}: INodeInfo) => { + return this.apdexScoreDataService.getApdexScore({applicationName, serviceTypeCode, from: this.previousRange[0], to: this.previousRange[1]}); + }) + ).subscribe(({apdexScore}: {apdexScore: number}) => { + this.apdexScore = apdexScore; + this.cd.detectChanges(); + }); + } + + ngOnDestroy() { + this.unsubscribe.next(); + this.unsubscribe.complete(); + } +} diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-data.service.ts b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-data.service.ts new file mode 100644 index 000000000000..356ce3273173 --- /dev/null +++ b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score-data.service.ts @@ -0,0 +1,16 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; + +@Injectable({providedIn: 'root'}) +export class ApdexScoreDataService { + private url = 'getApdexScore.pinpoint'; + + constructor( + private http: HttpClient, + ) { } + + getApdexScore(params: {[key: string]: any}): Observable<{apdexScore: number}> { + return this.http.get<{apdexScore: number}>(this.url, {params}); + } +} diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.ts b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.ts index 769ae9b1ef2a..b48b9beeaf18 100644 --- a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.ts +++ b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.ts @@ -32,8 +32,8 @@ export class ApdexScoreComponent implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges) { - const score: number = changes.score.currentValue - + const score: number = changes.score.currentValue; + if (!isNaN(Number(score))) { this.fixedScore = (Math.floor(score * 100) / 100).toFixed(2); } diff --git a/web/src/main/angular/src/app/core/components/apdex-score/index.ts b/web/src/main/angular/src/app/core/components/apdex-score/index.ts index 6714b4c55ee8..3d4487a2df4c 100644 --- a/web/src/main/angular/src/app/core/components/apdex-score/index.ts +++ b/web/src/main/angular/src/app/core/components/apdex-score/index.ts @@ -3,17 +3,19 @@ import { NgModule } from '@angular/core'; import { SharedModule } from 'app/shared'; import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup'; import { ApdexScoreComponent } from './apdex-score.component'; +import { ApdexScoreContainerComponent } from './apdex-score-container.component'; @NgModule({ declarations: [ ApdexScoreComponent, + ApdexScoreContainerComponent ], imports: [ HelpViewerPopupModule, SharedModule ], exports: [ - ApdexScoreComponent, + ApdexScoreContainerComponent, ], providers: [ ] diff --git a/web/src/main/angular/src/app/core/components/application-inspector-contents/application-inspector-contents-container.component.html b/web/src/main/angular/src/app/core/components/application-inspector-contents/application-inspector-contents-container.component.html index aaab73f4dee9..cb2582ae1e17 100644 --- a/web/src/main/angular/src/app/core/components/application-inspector-contents/application-inspector-contents-container.component.html +++ b/web/src/main/angular/src/app/core/components/application-inspector-contents/application-inspector-contents-container.component.html @@ -16,6 +16,7 @@
+
diff --git a/web/src/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts b/web/src/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts index 33f2bbefce09..d4a8a28dd76d 100644 --- a/web/src/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts +++ b/web/src/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts @@ -16,6 +16,7 @@ export enum HELP_VIEWER_LIST { AGENT_JVM_HEAP = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.HEAP', AGENT_JVM_NON_HEAP = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.NON_HEAP', AGENT_CPU = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.CPU_USAGE', + AGENT_APDEX_SCORE = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.APDEX_SCORE', AGENT_TPS = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.TPS', AGENT_ACTIVE_REQUEST = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.ACTIVE_REQUEST', AGENT_RESPONSE_TIME = 'HELP_VIEWER.INSPECTOR.AGENT_CHART.RESPONSE_TIME', @@ -32,6 +33,7 @@ export enum HELP_VIEWER_LIST { APPLICATION_JVM_NON_HEAP = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.NON_HEAP', APPLICATION_JVM_CPU = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.JVM_CPU_USAGE', APPLICATION_SYSTEM_CPU = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.SYSTEM_CPU_USAGE', + APPLICATION_APDEX_SCORE = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.APDEX_SCORE', APPLICATION_TPS = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.TPS', APPLICATION_ACTIVE_REQUEST = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.ACTIVE_REQUEST', APPLICATION_TOTAL_THREAD = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.TOTAL_THREAD', diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-active-request-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-active-request-chart-container.ts index 12a8bdd44c58..e4bd9733b279 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-active-request-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-active-request-chart-container.ts @@ -33,7 +33,7 @@ export class AgentActiveRequestChartContainer implements IInspectorChartContaine makeDataOption(): Data { const alpha = this.inspectorChartThemeService.getAlpha(0.4); - + return { type: areaSpline(), names: { @@ -83,6 +83,10 @@ export class AgentActiveRequestChartContainer implements IInspectorChartContaine }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-apdex-score-chart.container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-apdex-score-chart.container.ts new file mode 100644 index 000000000000..6aaafd07559b --- /dev/null +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-apdex-score-chart.container.ts @@ -0,0 +1,90 @@ +import { PrimitiveArray, Data, spline } from 'billboard.js'; +import { Observable } from 'rxjs'; + +import { IInspectorChartContainer } from './inspector-chart-container-factory'; +import { makeYData, makeXData, getMaxTickValue } from 'app/core/utils/chart-util'; +import { IInspectorChartData, InspectorChartDataService } from './inspector-chart-data.service'; +import { InspectorChartThemeService } from './inspector-chart-theme.service'; +import { NewUrlStateNotificationService } from 'app/shared/services'; +import { UrlPathId } from 'app/shared/models'; + +export class AgentApdexScoreChartContainer implements IInspectorChartContainer { + private apiUrl = 'getAgentStat/apdexScore/chart.pinpoint'; + + defaultYMax = 1; + title = 'Apdex Score'; + + constructor( + private inspectorChartDataService: InspectorChartDataService, + private inspectorChartThemeService: InspectorChartThemeService, + private newUrlStateNotificationService: NewUrlStateNotificationService, + ) {} + + getData(range: number[]): Observable { + const applicationId = this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getApplicationName(); + const serviceTypeName = this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getServiceType(); + + return this.inspectorChartDataService.getData(this.apiUrl, range, {serviceTypeName, applicationId}); + } + + makeChartData({charts}: IInspectorChartData): PrimitiveArray[] { + return [ + ['x', ...makeXData(charts.x)], + ['apdexScore', ...makeYData(charts.y['APDEX_SCORE'], 2)], + ]; + } + + makeDataOption(): Data { + const alpha = this.inspectorChartThemeService.getAlpha(0.4); + + return { + type: spline(), + names: { + apdexScore: 'Apdex Score', + }, + colors: { + apdexScore: `rgba(65, 196, 100, ${alpha})`, + } + }; + } + + makeElseOption(): {[key: string]: any} { + return {}; + } + + makeYAxisOptions(data: PrimitiveArray[]): {[key: string]: any} { + return { + y: { + label: { + text: 'Apdex Score', + position: 'outer-middle' + }, + tick: { + count: 5, + format: (v: number): string => this.convertWithUnit(v) + }, + padding: { + top: 0, + bottom: 0 + }, + min: 0, + max: this.defaultYMax, + default: [0, this.defaultYMax] + } + }; + } + + makeTooltipOptions(): {[key: string]: any} { + return { + linked: false + }; + } + + convertWithUnit(value: number): string { + return (Math.floor(value * 100) / 100).toFixed(2); + } + + getTooltipFormat(v: number, columnId: string, i: number): string { + return this.convertWithUnit(v); + } +} diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-cpu-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-cpu-chart-container.ts index a32c4e27cfae..796675acf578 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-cpu-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-cpu-chart-container.ts @@ -74,6 +74,10 @@ export class AgentCPUChartContainer implements IInspectorChartContainer { }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return `${value}%`; } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-count-chart-container.ts index 4429efc20893..27d4078d82f8 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-count-chart-container.ts @@ -72,6 +72,10 @@ export class AgentDirectBufferCountChartContainer implements IInspectorChartCont }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-memory-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-memory-chart-container.ts index 7c0b4d1066bc..4da426c41776 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-memory-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-direct-buffer-memory-chart-container.ts @@ -72,6 +72,10 @@ export class AgentDirectBufferMemoryChartContainer implements IInspectorChartCon }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-heap-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-heap-chart-container.ts index 5bbfb9e77e0a..9eedf7d98c5d 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-heap-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-heap-chart-container.ts @@ -132,6 +132,10 @@ export class AgentJVMHeapChartContainer implements IInspectorChartContainer { }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-non-heap-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-non-heap-chart-container.ts index ebbdd564e27a..d25850c4013b 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-non-heap-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-jvm-non-heap-chart-container.ts @@ -132,6 +132,10 @@ export class AgentJVMNonHeapChartContainer implements IInspectorChartContainer { }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-loaded-class-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-loaded-class-count-chart-container.ts index e91a39c4b33e..0b5eb43a4703 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-loaded-class-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-loaded-class-count-chart-container.ts @@ -72,6 +72,10 @@ export class AgentLoadedCLassCountChartContainer implements IInspectorChartConta }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-count-chart-container.ts index 81d2c49ff7a8..e7eeadaca267 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-count-chart-container.ts @@ -72,6 +72,10 @@ export class AgentMappedBufferCountChartContainer implements IInspectorChartCont }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-memory-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-memory-chart-container.ts index 03d1c6651719..e8c764d764e2 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-memory-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-mapped-buffer-memory-chart-container.ts @@ -72,6 +72,10 @@ export class AgentMappedBufferMemoryChartContainer implements IInspectorChartCon }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-open-file-descriptor-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-open-file-descriptor-chart-container.ts index 9972e9c5dcca..806acfb131cf 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-open-file-descriptor-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-open-file-descriptor-chart-container.ts @@ -72,6 +72,10 @@ export class AgentOpenFileDescriptorChartContainer implements IInspectorChartCon }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-response-time-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-response-time-chart-container.ts index a236e4347b60..e161c9f67e8d 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-response-time-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-response-time-chart-container.ts @@ -78,6 +78,10 @@ export class AgentResponseTimeChartContainer implements IInspectorChartContainer }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['ms', 'sec']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-total-thread-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-total-thread-count-chart-container.ts index 3e74a1039766..b16e5a7e3c4f 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-total-thread-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-total-thread-count-chart-container.ts @@ -72,6 +72,10 @@ export class AgentTotalThreadCountChartContainer implements IInspectorChartConta }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-tps-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-tps-chart-container.ts index 7a6cef67a6ee..039af503f7ce 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-tps-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-tps-chart-container.ts @@ -94,6 +94,10 @@ export class AgentTPSChartContainer implements IInspectorChartContainer { }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/agent-unloaded-class-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/agent-unloaded-class-count-chart-container.ts index 4cf955450d52..70c3713f1ff9 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/agent-unloaded-class-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/agent-unloaded-class-count-chart-container.ts @@ -34,10 +34,10 @@ export class AgentUnloadedCLassCountChartContainer implements IInspectorChartCon return { type: spline(), names: { - loadedClassCount: 'Unloaded Class Count' + unloadedClassCount: 'Unloaded Class Count' }, colors: { - loadedClassCount: `rgba(31, 119, 180, ${alpha})` + unloadedClassCount: `rgba(31, 119, 180, ${alpha})` } }; } @@ -72,6 +72,10 @@ export class AgentUnloadedCLassCountChartContainer implements IInspectorChartCon }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-active-request-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-active-request-chart-container.ts index 5d856f735562..6b49f4650167 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-active-request-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-active-request-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationActiveRequestChartContainer implements IInspectorChartCo }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-apdex-score-chart.container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-apdex-score-chart.container.ts new file mode 100644 index 000000000000..37508959d1e2 --- /dev/null +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-apdex-score-chart.container.ts @@ -0,0 +1,102 @@ +import { PrimitiveArray, Data, spline } from 'billboard.js'; +import { Observable } from 'rxjs'; + +import { IInspectorChartContainer } from './inspector-chart-container-factory'; +import { makeYData, makeXData } from 'app/core/utils/chart-util'; +import { IInspectorChartData, InspectorChartDataService } from './inspector-chart-data.service'; +import { getAgentId } from './inspector-chart-util'; +import { InspectorChartThemeService } from './inspector-chart-theme.service'; +import { NewUrlStateNotificationService } from 'app/shared/services'; +import { UrlPathId } from 'app/shared/models'; + +export class ApplicationApdexScoreChartContainer implements IInspectorChartContainer { + private apiUrl = 'getApplicationStat/apdexScore/chart.pinpoint'; + private minAgentIdList: string[]; + private maxAgentIdList: string[]; + + defaultYMax = 1; + title = 'Apdex Score'; + + constructor( + private inspectorChartDataService: InspectorChartDataService, + private inspectorChartThemeService: InspectorChartThemeService, + private newUrlStateNotificationService: NewUrlStateNotificationService, + ) {} + + getData(range: number[]): Observable { + const applicationId = this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getApplicationName(); + const serviceTypeName = this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getServiceType(); + + return this.inspectorChartDataService.getData(this.apiUrl, range, {serviceTypeName, applicationId}); + } + + makeChartData({charts}: IInspectorChartData): PrimitiveArray[] { + this.minAgentIdList = makeYData(charts.y['APDEX_SCORE'], 1) as string[]; + this.maxAgentIdList = makeYData(charts.y['APDEX_SCORE'], 3) as string[]; + + return [ + ['x', ...makeXData(charts.x)], + ['max', ...makeYData(charts.y['APDEX_SCORE'], 2)], + ['avg', ...makeYData(charts.y['APDEX_SCORE'], 4)], + ['min', ...makeYData(charts.y['APDEX_SCORE'], 0)], + ]; + } + + makeDataOption(): Data { + return { + type: spline(), + names: { + min: 'Min', + avg: 'Avg', + max: 'Max', + }, + colors: { + ...this.inspectorChartThemeService.getMinAvgMaxColors() + } + }; + } + + makeElseOption(): {[key: string]: any} { + return { + line: { + classes: ['min', 'avg', 'max'] + } + }; + } + + makeYAxisOptions(data: PrimitiveArray[]): {[key: string]: any} { + return { + y: { + label: { + text: 'Apdex Score', + position: 'outer-middle' + }, + tick: { + count: 5, + format: (v: number): string => this.convertWithUnit(v) + }, + padding: { + top: 0, + bottom: 0 + }, + min: 0, + max: this.defaultYMax, + default: [0, this.defaultYMax] + } + }; + } + + makeTooltipOptions(): {[key: string]: any} { + return { + linked: false, + }; + } + + convertWithUnit(value: number): string { + return (Math.floor(value * 100) / 100).toFixed(2); + } + + getTooltipFormat(v: number, columnId: string, i: number): string { + return `${this.convertWithUnit(v)} ${getAgentId(columnId, i, this.minAgentIdList, this.maxAgentIdList)}`; + } +} diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-count-chart-container.ts index 8abd4e6a47fe..b8081a08ab37 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-count-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationDirectBufferCountChartContainer implements IInspectorCha }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-memory-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-memory-chart-container.ts index f13189c31321..926c2db0d400 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-memory-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-direct-buffer-memory-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationDirectBufferMemoryChartContainer implements IInspectorCh }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-cpu-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-cpu-chart-container.ts index b0a14da550f1..a43009d3cca4 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-cpu-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-cpu-chart-container.ts @@ -80,6 +80,10 @@ export class ApplicationJVMCpuChartContainer implements IInspectorChartContainer }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return `${value}%`; } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-heap-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-heap-chart-container.ts index 73819c5a1737..c1dd3a16facc 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-heap-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-heap-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationJVMHeapChartContainer implements IInspectorChartContaine }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-non-heap-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-non-heap-chart-container.ts index 2caabe91df58..d5fc8ddea5f8 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-non-heap-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-jvm-non-heap-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationJVMNonHeapChartContainer implements IInspectorChartConta }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-loaded-class-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-loaded-class-count-chart-container.ts index 2ff8d5c2d238..3af955957755 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-loaded-class-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-loaded-class-count-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationLoadedClassCountChartContainer implements IInspectorChar }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-count-chart-container.ts index a5dc48b30332..763ca7f5e670 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-count-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationMappedBufferCountChartContainer implements IInspectorCha }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-memory-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-memory-chart-container.ts index aa579d8cf98f..68e674cb9f52 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-memory-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-mapped-buffer-memory-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationMappedBufferMemoryChartContainer implements IInspectorCh }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-open-file-descriptor-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-open-file-descriptor-chart-container.ts index a39e42b9400b..bb563aea1465 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-open-file-descriptor-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-open-file-descriptor-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationOpenFileDescriptorChartContainer implements IInspectorCh }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-response-time-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-response-time-chart-container.ts index 8bdaf058b5a3..265e3edda97e 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-response-time-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-response-time-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationResponseTimeChartContainer implements IInspectorChartCon }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['ms', 'sec']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-system-cpu-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-system-cpu-chart-container.ts index 8b9ae5ff84d2..8fa57811bb0d 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-system-cpu-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-system-cpu-chart-container.ts @@ -80,6 +80,10 @@ export class ApplicationSystemCpuChartContainer implements IInspectorChartContai }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return `${value}%`; } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-total-thread-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-total-thread-count-chart-container.ts index 3c8e6897d1f2..7901d5adbdbc 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-total-thread-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-total-thread-count-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationTotalThreadCountChartContainer implements IInspectorChar }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-tps-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-tps-chart-container.ts index e573b16bbd6c..32540c5a7782 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-tps-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-tps-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationTPSChartContainer implements IInspectorChartContainer { }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { const unitList = ['', 'K', 'M', 'G']; diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/application-unloaded-class-count-chart-container.ts b/web/src/main/angular/src/app/core/components/inspector-chart/application-unloaded-class-count-chart-container.ts index 3314d97d2135..38615b83dbe1 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/application-unloaded-class-count-chart-container.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/application-unloaded-class-count-chart-container.ts @@ -84,6 +84,10 @@ export class ApplicationUnloadedClassCountChartContainer implements IInspectorCh }; } + makeTooltipOptions(): {[key: string]: any} { + return {}; + } + convertWithUnit(value: number): string { return value.toString(); } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container-factory.ts b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container-factory.ts index 9237de1106b1..9ded7ba6ff60 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container-factory.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container-factory.ts @@ -16,6 +16,7 @@ import { AgentMappedBufferCountChartContainer } from './agent-mapped-buffer-coun import { AgentMappedBufferMemoryChartContainer } from './agent-mapped-buffer-memory-chart-container'; import { AgentLoadedCLassCountChartContainer } from './agent-loaded-class-count-chart-container'; import { AgentUnloadedCLassCountChartContainer } from './agent-unloaded-class-count-chart-container'; +import { AgentApdexScoreChartContainer } from './agent-apdex-score-chart.container'; import { ApplicationJVMHeapChartContainer } from './application-jvm-heap-chart-container'; import { ApplicationJVMNonHeapChartContainer } from './application-jvm-non-heap-chart-container'; import { ApplicationJVMCpuChartContainer } from './application-jvm-cpu-chart-container'; @@ -31,8 +32,10 @@ import { ApplicationMappedBufferCountChartContainer } from './application-mapped import { ApplicationMappedBufferMemoryChartContainer } from './application-mapped-buffer-memory-chart-container'; import { ApplicationLoadedClassCountChartContainer } from './application-loaded-class-count-chart-container'; import { ApplicationUnloadedClassCountChartContainer } from './application-unloaded-class-count-chart-container'; +import { ApplicationApdexScoreChartContainer } from './application-apdex-score-chart.container'; import { IInspectorChartData } from './inspector-chart-data.service'; import { InspectorChartThemeService } from './inspector-chart-theme.service'; +import { NewUrlStateNotificationService } from 'app/shared/services'; export interface IInspectorChartContainer { title: string; @@ -43,6 +46,7 @@ export interface IInspectorChartContainer { makeDataOption(): Data; makeElseOption(): {[key: string]: any}; makeYAxisOptions(data: PrimitiveArray[]): {[key: string]: any}; + makeTooltipOptions(): {[key: string]: any}; convertWithUnit(value: number): string; getTooltipFormat(value: number, columnId: string, i: number): string; } @@ -51,6 +55,7 @@ export enum ChartType { AGENT_JVM_HEAP = 'AGENT_JVM_HEAP', AGENT_JVM_NON_HEAP = 'AGENT_JVM_NON_HEAP', AGENT_CPU = 'AGENT_CPU', + AGENT_APDEX_SCORE = 'AGENT_APDEX_SCORE', AGENT_TPS = 'AGENT_TPS', AGENT_ACTIVE_REQUEST = 'AGENT_ACTIVE_REQUEST', AGENT_TOTAL_THREAD = 'AGENT_TOTAL_THREAD', @@ -67,6 +72,7 @@ export enum ChartType { APPLICATION_JVM_NON_HEAP = 'APPLICATION_JVM_NON_HEAP', APPLICATION_JVM_CPU = 'APPLICATION_JVM_CPU', APPLICATION_SYSTEM_CPU = 'APPLICATION_SYSTEM_CPU', + APPLICATION_APDEX_SCORE = 'APPLICATION_APDEX_SCORE', APPLICATION_TPS = 'APPLICATION_TPS', APPLICATION_ACTIVE_REQUEST = 'APPLICATION_ACTIVE_REQUEST', APPLICATION_TOTAL_THREAD = 'APPLICATION_TOTAL_THREAD', @@ -82,7 +88,12 @@ export enum ChartType { } export class InspectorChartContainerFactory { - static createInspectorChartContainer(chartType: ChartType, dataService: InspectorChartDataService, themeService?: InspectorChartThemeService): IInspectorChartContainer { + static createInspectorChartContainer( + chartType: ChartType, + dataService: InspectorChartDataService, + themeService?: InspectorChartThemeService, + urlService?: NewUrlStateNotificationService + ): IInspectorChartContainer { switch (chartType) { case ChartType.AGENT_JVM_HEAP: return new AgentJVMHeapChartContainer(dataService, themeService); @@ -112,6 +123,8 @@ export class InspectorChartContainerFactory { return new AgentLoadedCLassCountChartContainer(dataService, themeService); case ChartType.AGENT_UNLOADED_CLASS_COUNT: return new AgentUnloadedCLassCountChartContainer(dataService, themeService); + case ChartType.AGENT_APDEX_SCORE: + return new AgentApdexScoreChartContainer(dataService, themeService, urlService); case ChartType.APPLICATION_JVM_HEAP: return new ApplicationJVMHeapChartContainer(dataService, themeService); case ChartType.APPLICATION_JVM_NON_HEAP: @@ -142,6 +155,8 @@ export class InspectorChartContainerFactory { return new ApplicationLoadedClassCountChartContainer(dataService, themeService); case ChartType.APPLICATION_UNLOADED_CLASS_COUNT: return new ApplicationUnloadedClassCountChartContainer(dataService, themeService); + case ChartType.APPLICATION_APDEX_SCORE: + return new ApplicationApdexScoreChartContainer(dataService, themeService, urlService); } } } diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts index ed7cd3c9ae9f..0a66e71f4039 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-container.component.ts @@ -11,7 +11,8 @@ import { DynamicPopupService, TRACKED_EVENT_LIST, MessageQueueService, - MESSAGE_TO + MESSAGE_TO, + NewUrlStateNotificationService } from 'app/shared/services'; import { InspectorPageService, ISourceForChart } from 'app/routes/inspector-page/inspector-page.service'; import { HELP_VIEWER_LIST, HelpViewerPopupContainerComponent } from 'app/core/components/help-viewer-popup/help-viewer-popup-container.component'; @@ -35,7 +36,12 @@ export class InspectorChartContainerComponent implements OnInit, OnDestroy { @Input() set chartType(chartType: ChartType) { this._chartType = chartType; - this.chartContainer = InspectorChartContainerFactory.createInspectorChartContainer(chartType, this.inspectorChartDataService, this.inspectorChartThemeService); + this.chartContainer = InspectorChartContainerFactory.createInspectorChartContainer( + chartType, + this.inspectorChartDataService, + this.inspectorChartThemeService, + this.newUrlStateNotificationService + ); } get chartType(): ChartType { @@ -70,6 +76,7 @@ export class InspectorChartContainerComponent implements OnInit, OnDestroy { private injector: Injector, private inspectorPageService: InspectorPageService, private messageQueueService: MessageQueueService, + private newUrlStateNotificationService: NewUrlStateNotificationService, ) { } ngOnInit() { @@ -246,7 +253,8 @@ export class InspectorChartContainerComponent implements OnInit, OnDestroy { return this.chartContainer.getTooltipFormat(v, columnId, i); } }, - order: '' + order: '', + ...this.chartContainer.makeTooltipOptions() }, transition: { duration: 0 diff --git a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-data.service.ts b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-data.service.ts index ed5e155c303a..be708527c757 100644 --- a/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-data.service.ts +++ b/web/src/main/angular/src/app/core/components/inspector-chart/inspector-chart-data.service.ts @@ -24,12 +24,12 @@ export class InspectorChartDataService { private newUrlStateNotificationService: NewUrlStateNotificationService, ) {} - getData(url: string, range: number[]): Observable { - return this.http.get(url, this.getHttpParams(range)); + // TODO: include range, agent, applicationInfo into params? + getData(url: string, range: number[], params = {}): Observable { + return this.http.get(url, this.getHttpParams(range, params)); } - // TODO: Include agent/application info in parameter along with range - private getHttpParams([from, to]: number[]): object { + private getHttpParams([from, to]: number[], params: any): object { const isAgentPage = this.newUrlStateNotificationService.hasValue(UrlPathId.AGENT_ID) || this.newUrlStateNotificationService.hasValue(UrlQuery.TRANSACTION_INFO); @@ -39,6 +39,7 @@ export class InspectorChartDataService { return { params: { + ...params, ...idObj, from, to, diff --git a/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html b/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html index b02437bc9277..89f3ba9563d5 100644 --- a/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html +++ b/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html @@ -7,7 +7,6 @@ (outCancel)="onCancelSetting()"> - +
diff --git a/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts b/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts index 8f331968f512..cc7a2f8933a8 100644 --- a/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts +++ b/web/src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts @@ -11,12 +11,10 @@ export class ScatterChartOptionsComponent implements OnInit { @Output() outOpenScatterPage: EventEmitter = new EventEmitter(); @Output() outShowHelp: EventEmitter = new EventEmitter(); @Input() instanceKey: string; - @Input() apdexScore: number; @Input() hiddenOptions: { setting: boolean, download: boolean, open: boolean, help: boolean }; + constructor() {} - ngOnInit() { - } - + ngOnInit() {} onShowHelp($event: MouseEvent): void { this.outShowHelp.emit($event); } diff --git a/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.html b/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.html index ef7295690582..b29fa9e33431 100644 --- a/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.html +++ b/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.html @@ -21,7 +21,7 @@
- + diff --git a/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.ts b/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.ts index e4c03fad903a..9ff35f22a1c5 100644 --- a/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.ts +++ b/web/src/main/angular/src/app/core/components/side-bar/side-bar-container.component.ts @@ -3,7 +3,7 @@ import { Router, RouterEvent, NavigationStart } from '@angular/router'; import { Subject, Observable, merge } from 'rxjs'; import { filter, tap, mapTo, map, takeUntil } from 'rxjs/operators'; -import { MessageQueueService, MESSAGE_TO } from 'app/shared/services'; +import { MessageQueueService, MESSAGE_TO, NewUrlStateNotificationService } from 'app/shared/services'; import { ServerMapData } from 'app/core/components/server-map/class'; @Component({ @@ -20,16 +20,19 @@ export class SideBarContainerComponent implements OnInit, OnDestroy { showDivider = false; isTargetMerged$: Observable; sidebarVisibility = 'hidden'; + renderInfoPerServer: boolean; constructor( private router: Router, private messageQueueService: MessageQueueService, + private newUrlStateNotificationService: NewUrlStateNotificationService, private el: ElementRef, private renderer: Renderer2, private cd: ChangeDetectorRef, ) {} ngOnInit() { + this.renderInfoPerServer = !this.newUrlStateNotificationService.isRealTimeMode(); this.addPageLoadingHandler(); this.connectStore(); } diff --git a/web/src/main/angular/src/assets/i18n/en.json b/web/src/main/angular/src/assets/i18n/en.json index 53d2502a6773..626ef3fc420b 100644 --- a/web/src/main/angular/src/assets/i18n/en.json +++ b/web/src/main/angular/src/assets/i18n/en.json @@ -447,6 +447,17 @@ }] }] }], + "APDEX_SCORE": [{ + "TITLE": "Apdex Score", + "DESC": "Shows status of the agent's Apdex Score", + "CATEGORY": [{ + "TITLE": "Legend", + "ITEMS": [{ + "NAME": "Apdex Score", + "DESC": "Agent's Apdex Score" + }] + }] + }], "TPS": [{ "TITLE": "Transactions Per Second", "DESC": "Transactions received by the server per second", @@ -565,7 +576,7 @@ }], "MAPPED_BUFFER_COUNT": [{ "TITLE": "Mapped Buffer", - "DESC": "Shows the status of agent's Mapped buffer.", + "DESC": "Shows the status of agent's mapped buffer.", "CATEGORY": [{ "TITLE": "Legend", "ITEMS": [{ @@ -576,7 +587,7 @@ }], "MAPPED_BUFFER_MEMORY": [{ "TITLE": "Mapped Buffer Memory", - "DESC": "Shows the status of agent's used Mapped buffer memory.", + "DESC": "Shows the status of agent's used mapped buffer memory.", "CATEGORY": [{ "TITLE": "Legend", "ITEMS": [{ @@ -688,6 +699,23 @@ }] }] }], + "APDEX_SCORE": [{ + "TITLE": "Apdex Score", + "DESC": "Apdex Score of the agents and the application", + "CATEGORY": [{ + "TITLE": "Legend", + "ITEMS": [{ + "NAME": "Min", + "DESC": "Min Apdex Score among the agents" + }, { + "NAME": "Avg", + "DESC": "Apdex Score of the application" + }, { + "NAME": "Max", + "DESC": "Max Apdex Score among the agents" + }] + }] + }], "TPS": [{ "TITLE": "Transactions Per Second", "DESC": "Number of transactions received by the agents per second", diff --git a/web/src/main/angular/src/assets/i18n/ko.json b/web/src/main/angular/src/assets/i18n/ko.json index 8a84969cd3e8..8e629a6f577a 100644 --- a/web/src/main/angular/src/assets/i18n/ko.json +++ b/web/src/main/angular/src/assets/i18n/ko.json @@ -446,6 +446,17 @@ }] }] }], + "APDEX_SCORE": [{ + "TITLE": "Apdex Score", + "DESC": "Agent의 Apdex Score 현황을 보여줍니다.", + "CATEGORY": [{ + "TITLE": "범례", + "ITEMS": [{ + "NAME": "Apdex Score", + "DESC": "현재 Agent의 Apdex Score" + }] + }] + }], "TPS": [{ "TITLE": "Transactions Per Second", "DESC": "서버로 인입된 초당 트랜잭션 수", @@ -687,6 +698,23 @@ }] }] }], + "APDEX_SCORE": [{ + "TITLE": "Apdex Score", + "DESC": "Agent, Application의 Apdex Score 현황", + "CATEGORY": [{ + "TITLE": "범례", + "ITEMS": [{ + "NAME": "Min", + "DESC": "각 Agent의 Apdex Score 중 가장 작은 값" + }, { + "NAME": "Avg", + "DESC": "현재 Application의 Apdex Score" + }, { + "NAME": "Max", + "DESC": "각 Agent의 Apdex Score 중 가장 큰 값" + }] + }] + }], "TPS": [{ "TITLE": "Transactions Per Second", "DESC": "Agent들에 인입된 초당 트랜잭션 수", diff --git a/web/src/main/angular/src/proxy.conf.js b/web/src/main/angular/src/proxy.conf.js index 05439d5cf482..3029703a9061 100644 --- a/web/src/main/angular/src/proxy.conf.js +++ b/web/src/main/angular/src/proxy.conf.js @@ -59,6 +59,9 @@ const PROXY_CONFIG = [ "/application/webhook.pinpoint", "/application/webhookSendInfo.pinpoint", "/application/alarmRule/includeWebhooks.pinpoint", + "/getApdexScore.pinpoint", + "/getApplicationStat/apdexScore/chart.pinpoint", + "/getAgentStat/apdexScore/chart.pinpoint" ], target: 'http://localhost:8080', secure: false