[#9189] Add apdex-score formula in the apdex-score guide popup

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

@@ -0,0 +1,16 @@
+:host {
+    display: block;
+}
+
+.apdex-score-wrapper {
+    cursor: pointer;
+    position: relative;
+}
+
+.fa-question-circle {
+    position: absolute;
+    top: 1px;
+    right: 37px;
+    font-size: 0.6em;
+    color: var(--icon-default);
+}

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

@@ -1,3 +1,7 @@
-<pp-apdex-score
-    [score]="apdexScore">
-</pp-apdex-score>
+<div class="helper-viewer-exclude apdex-score-wrapper" (click)="onShowHelp($event)"> 
+    <pp-apdex-score
+        [isEmpty]="isEmpty"
+        [score]="apdexScore">
+    </pp-apdex-score>
+    <button class="fas fa-question-circle"></button>
+</div>

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

@@ -1,10 +1,13 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, ComponentFactoryResolver, Injector, 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 { AnalyticsService, DynamicPopupService, MessageQueueService, MESSAGE_TO, NewUrlStateNotificationService, TRACKED_EVENT_LIST } from 'app/shared/services';
+import { IApdexFormulaData, ApdexScoreDataService } from './apdex-score-data.service';
 import { ServerMapData } from 'app/core/components/server-map/class/server-map-data.class';
+import { HELP_VIEWER_LIST, HelpViewerPopupContainerComponent } from 'app/core/components/help-viewer-popup/help-viewer-popup-container.component';
+import { ApdexScoreGuideComponent } from './apdex-score-guide.component';
+import { ApdexScoreInteractionService } from './apdex-score-interaction.service';
 
 @Component({
     selector: 'pp-apdex-score-container',
@@ -19,12 +22,18 @@ export class ApdexScoreContainerComponent implements OnInit, OnDestroy {
     private previousRange: number[];
 
     apdexScore: number;
+    isEmpty: boolean;
 
     constructor(
         private apdexScoreDataService: ApdexScoreDataService,
         private messageQueueService: MessageQueueService,
         private newUrlStateNotificationService: NewUrlStateNotificationService,
         private cd: ChangeDetectorRef,
+        private injector: Injector,
+        private analyticsService: AnalyticsService,
+        private dynamicPopupService: DynamicPopupService,
+        private componentFactoryResolver: ComponentFactoryResolver,
+        private apdexScoreInteractionService: ApdexScoreInteractionService
     ) { }
 
     ngOnInit() {
@@ -52,8 +61,10 @@ export class ApdexScoreContainerComponent implements OnInit, OnDestroy {
             switchMap(({applicationName, serviceTypeCode}: INodeInfo) => {
                 return this.apdexScoreDataService.getApdexScore({applicationName, serviceTypeCode, from: this.previousRange[0], to: this.previousRange[1]});
             })
-        ).subscribe(({apdexScore}: {apdexScore: number}) => {
+        ).subscribe(({apdexScore, apdexFormula: apdexFormulaData}: {apdexScore: number, apdexFormula: IApdexFormulaData}) => {
             this.apdexScore = apdexScore;
+            this.isEmpty = apdexFormulaData.totalSamples === 0;
+            this.apdexScoreInteractionService.setApdexFormulaData(apdexFormulaData);
             this.cd.detectChanges();
         });
     }
@@ -62,4 +73,22 @@ export class ApdexScoreContainerComponent implements OnInit, OnDestroy {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
+
+    onShowHelp($event: MouseEvent): void {
+        this.analyticsService.trackEvent(TRACKED_EVENT_LIST.CLICK_APDEX_SCORE, HELP_VIEWER_LIST.APDEX_SCORE);
+        const {left, top, height} = ($event.target as HTMLElement).getBoundingClientRect();
+
+        this.dynamicPopupService.openPopup({
+            data: HELP_VIEWER_LIST.APDEX_SCORE,
+            template: ApdexScoreGuideComponent,
+            coord: {
+                coordX: left,
+                coordY: top + height / 2
+            },
+            component: HelpViewerPopupContainerComponent
+        }, {
+            resolver: this.componentFactoryResolver,
+            injector: this.injector
+        });
+    }
 }

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-data.service.ts

@@ -2,6 +2,12 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
+export interface IApdexFormulaData {
+   satisfiedCount: number;
+   toleratingCount: number;
+   totalSamples: number; 
+}
+
 @Injectable({providedIn: 'root'})
 export class ApdexScoreDataService {
     private url = 'getApdexScore.pinpoint';
@@ -10,7 +16,7 @@ export class ApdexScoreDataService {
         private http: HttpClient,
     ) { }
 
-    getApdexScore(params: {[key: string]: any}): Observable<{apdexScore: number}> {
-        return this.http.get<{apdexScore: number}>(this.url, {params});
+    getApdexScore(params: {[key: string]: any}): Observable<{apdexScore: number, apdexFormula: IApdexFormulaData}> {
+        return this.http.get<{apdexScore: number, apdexFormula: IApdexFormulaData}>(this.url, {params});
     }
 }

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-guide.component.css

@@ -0,0 +1,119 @@
+:host {
+    display: block;
+}
+
+.title-group {
+    display: block;
+    padding: 14px 18px;
+    height: auto;
+    border-bottom: 1px solid var(--border-primary);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.desc-group {
+    font-size: 12px;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-primary);
+    padding: 14px 18px 7px 18px;
+    font-weight: 600;
+}
+
+.title-group .title-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--primary);
+    margin-bottom: 15px;
+}
+
+.title-group .title-desc {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.contents-group {
+    padding: 14px 14px;
+}
+
+.contents-group .category-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 12px;
+    padding-left: 26px;
+}
+
+.contents-group .category-item-list {
+    display: flex;
+    padding: 5px 0;
+    line-height: 20px;
+}
+
+.apdex-formula-wrapper {
+}
+
+.upper {
+    display: flex;
+    justify-content: center;
+}
+
+.lower {
+    display: flex;
+    justify-content: center;
+}
+
+.sign {
+    padding: 5px;
+}
+
+.divider {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 5px 0;
+    padding: 0;
+}
+
+.formula-elem {
+    padding: 5px;
+}
+
+.apdex-score-range {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-primary-lightest);
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    text-align: center;
+}
+
+.apdex-score-rank {
+    font-size: 12px;
+    color: var(--text-secondary);
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+
+.fas {
+    font-size: 15px;
+    margin-right: 3px;
+}
+
+.excellent {
+    color: var(--status-success);
+}
+.good {
+    color: var(--status-good);
+}
+.poor {
+    color: var(--status-warn);
+}
+.unacceptable {
+    color: var(--status-fail);
+}

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

@@ -0,0 +1,31 @@
+<div class="desc-wrapper">
+    <div class="title-group">
+        <div class="title-text">Apdex Score</div>
+        <div class="title-desc">
+            <div class="apdex-formula-wrapper">
+                <div class="upper">
+                    <div class="formula-elem" title="Satisfied Count">{{apdexFormulaData.satisfiedCount}}</div>
+                    <div class="sign">+ [</div>
+                    <div class="formula-elem" title="Tolerating Count">{{apdexFormulaData.toleratingCount}}</div>
+                    <div class="sign">/</div>
+                    <div class="formula-elem">2</div>
+                    <div class="sign">]</div>
+                </div>
+                <hr class="divider"/>
+                <div class="lower">
+                    <div class="formula-elem" title="Total Samples">{{apdexFormulaData.totalSamples}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="contents-group">
+        <div class="category-title">Score</div>
+        <div *ngFor="let score of apdexScoreGuide" class="category-item-list">
+            <span class="apdex-score-range">{{score.range}}</span>
+            <span class="apdex-score-rank">
+                <span class="fas" [ngClass]="getIconClass(score.rank)"></span>
+                <span>{{score.rank | titlecase}}</span>
+            </span>
+        </div>
+    </div>
+</div>

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-guide.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+import { IApdexFormulaData } from './apdex-score-data.service';
+import { ApdexScoreInteractionService } from './apdex-score-interaction.service';
+import { APDEX_SCORE_RANK } from './apdex-score-utils';
+
+@Component({
+	selector: 'pp-apdex-score-guide',
+	templateUrl: './apdex-score-guide.component.html',
+	styleUrls: ['./apdex-score-guide.component.css']
+})
+export class ApdexScoreGuideComponent implements OnInit {
+	apdexScoreGuide: {range: string, rank: APDEX_SCORE_RANK}[];
+	apdexFormulaData: IApdexFormulaData;
+
+	constructor(
+		private apdexScoreInteractionService: ApdexScoreInteractionService
+	) { }
+
+	ngOnInit() {
+		this.apdexScoreGuide = [
+			{range: '0.94 ~ 1.00', rank: APDEX_SCORE_RANK.EXCELLENT},
+			{range: '0.85 ~ 0.94', rank: APDEX_SCORE_RANK.GOOD},
+			{range: '0.7 ~ 0.85', rank: APDEX_SCORE_RANK.FAIR},
+			{range: '0.5 ~ 0.7', rank: APDEX_SCORE_RANK.POOR},
+			{range: '< 0.5', rank: APDEX_SCORE_RANK.UNACCEPTABLE},
+		];
+
+		this.apdexScoreInteractionService.onApdexFormulaData$.subscribe((data: IApdexFormulaData) => {
+			this.apdexFormulaData = data;
+		});
+	}
+
+	getIconClass(apdexScoreRank: APDEX_SCORE_RANK) {
+		const iconClass = apdexScoreRank === APDEX_SCORE_RANK.EXCELLENT ? 'fa-smile-beam'
+			: apdexScoreRank === APDEX_SCORE_RANK.GOOD ? 'fa-smile'
+			: apdexScoreRank === APDEX_SCORE_RANK.FAIR ? 'fa-meh'
+			: apdexScoreRank === APDEX_SCORE_RANK.POOR ? 'fa-frown'
+			: 'fa-angry';
+
+		return `${apdexScoreRank} ${iconClass}`;
+	}
+}

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-interaction.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { IApdexFormulaData } from './apdex-score-data.service';
+
+@Injectable({providedIn: 'root'})
+export class ApdexScoreInteractionService {
+    private outApdexFormulaData = new BehaviorSubject<IApdexFormulaData>(null);
+
+    onApdexFormulaData$: Observable<IApdexFormulaData>;
+
+    constructor() {
+        this.onApdexFormulaData$ = this.outApdexFormulaData.asObservable();
+    }
+
+    setApdexFormulaData(apdexFormulaData: IApdexFormulaData): void {
+        this.outApdexFormulaData.next(apdexFormulaData);
+    }
+}

web/src/main/angular/src/app/core/components/apdex-score/apdex-score-utils.ts

@@ -0,0 +1,15 @@
+export enum APDEX_SCORE_RANK {
+    EXCELLENT = 'excellent',
+    GOOD = 'good',
+    FAIR = 'fair',
+    POOR = 'poor',
+    UNACCEPTABLE = 'unacceptable',
+}
+
+export function getApdexScoreRank(score: number): string {
+    return score < 0.5 ? APDEX_SCORE_RANK.UNACCEPTABLE
+        : score < 0.7 ? APDEX_SCORE_RANK.POOR
+        : score < 0.85 ? APDEX_SCORE_RANK.FAIR
+        : score < 0.94 ? APDEX_SCORE_RANK.GOOD
+        : APDEX_SCORE_RANK.EXCELLENT;
+}

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

@@ -2,12 +2,7 @@
     font-size: 16px;
 }
 
-div {
-    cursor: pointer;
-}
-
 .title {
-    position: relative;
     margin-right: 15px;
     color: var(--text-primary);
 }
@@ -16,12 +11,9 @@ div {
     font-weight: bold;
 }
 
-button {
-    position: absolute;
-    top: 1px;
-    right: -6.5px;
-    font-size: 0.6em;
-    color: var(--icon-default);
+.empty-text {
+    font-weight: bold;
+    color: var(--text-primary-lightest);
 }
 
 .excellent {
@@ -35,4 +27,4 @@ button {
 }
 .unacceptable {
     color: var(--status-fail);
-}
+}