[#8843] Implement apdex score chart in inspector

web/src/main/angular/src/app/core/components/agent-inspector-contents/agent-inspector-contents-container.component.html

@@ -16,6 +16,7 @@
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_JVM_HEAP"></pp-inspector-chart-container></div>
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_JVM_NON_HEAP"></pp-inspector-chart-container></div>
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_CPU"></pp-inspector-chart-container></div>
+        <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_APDEX_SCORE"></pp-inspector-chart-container></div>
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_TPS"></pp-inspector-chart-container></div>
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_ACTIVE_REQUEST"></pp-inspector-chart-container></div>
         <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.AGENT_TOTAL_THREAD"></pp-inspector-chart-container></div>

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-container.component.html

@@ -0,0 +1,3 @@
+<pp-apdex-score
+    [score]="apdexScore">
+</pp-apdex-score>

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<void>();
+
+    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();
+    }
+}

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});
+    }
+}

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);
         }

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: [
     ]

web/src/main/angular/src/app/core/components/application-inspector-contents/application-inspector-contents-container.component.html

@@ -16,6 +16,7 @@
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_JVM_NON_HEAP"></pp-inspector-chart-container></div>
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_JVM_CPU"></pp-inspector-chart-container></div>
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_SYSTEM_CPU"></pp-inspector-chart-container></div>
+            <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_APDEX_SCORE"></pp-inspector-chart-container></div>
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_TPS"></pp-inspector-chart-container></div>
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_ACTIVE_REQUEST"></pp-inspector-chart-container></div>
             <div class="l-chart-wrapper"><pp-inspector-chart-container [chartType]="chartType.APPLICATION_RESPONSE_TIME"></pp-inspector-chart-container></div>

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',

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'];
 

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<IInspectorChartData> {
+        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);
+    }
+}

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}%`;
     }

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();
     }

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'];
 

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'];
 

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'];
 

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();
     }

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();
     }

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'];
 

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();
     }

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'];
 

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();
     }

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'];