[pinpoint-apm#4044][WEB/UI] add Apdex Score UI

BillionaireDY · Mar 28, 2022 · 7ab8b70 · 7ab8b70
1 parent 3d54abe
commit 7ab8b70
Show file tree

Hide file tree

Showing 22 changed files with 229 additions and 19 deletions.
diff --git a/web/src/main/angular/src/app/app.module.ts b/web/src/main/angular/src/app/app.module.ts
@@ -26,7 +26,7 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
     declarations: [
         AppComponent,
-        PageNotFoundComponent
+        PageNotFoundComponent,
     ],
     imports: [
         BrowserAnimationsModule,

diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.css b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.css
@@ -0,0 +1,38 @@
+:host {
+    font-size: 16px;
+}
+
+div {
+    cursor: pointer;
+    margin-left: 15px;
+}
+
+.title {
+    position: relative;
+    margin-right: 15px;
+}
+
+.score {
+    font-weight: bold;
+}
+
+button {
+    position: absolute;
+    top: 1px;
+    right: -6.5px;
+    font-size: 0.6em;
+    opacity: 0.7;
+}
+
+.excellent {
+    color: var(--status-success);
+}
+.good {
+    color: var(--status-good);
+}
+.poor {
+    color: var(--status-warn);
+}
+.unacceptable {
+    color: var(--status-fail);
+}
diff --git a/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.html b/web/src/main/angular/src/app/core/components/apdex-score/apdex-score.component.html
@@ -0,0 +1,7 @@
+<div class="helper-viewer-exclude" (click)="onShowHelp($event)">
+    <span class="title">
+        Apdex
+        <button class="fa fa-question-circle"></button>
+    </span>
+    <span class={{getScoreTextClassName()}}>{{ fixedScore }}</span>
+</div>
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
@@ -0,0 +1,80 @@
+import { Component, ComponentFactoryResolver, Injector, Input, OnInit, SimpleChanges } from '@angular/core';
+import { AnalyticsService, DynamicPopupService, TRACKED_EVENT_LIST } from 'app/shared/services';
+
+import { HELP_VIEWER_LIST, HelpViewerPopupContainerComponent } from 'app/core/components/help-viewer-popup/help-viewer-popup-container.component';
+
+const enum APDEX_SCORE_RANK {
+    EXCELLENT = 'excellent',
+    GOOD = 'good',
+    FAIR = 'fair',
+    POOR = 'poor',
+    UNACCEPTABLE = 'unacceptable',
+}
+
+@Component({
+    selector: 'pp-apdex-score',
+    templateUrl: './apdex-score.component.html',
+    styleUrls: ['./apdex-score.component.css']
+})
+export class ApdexScoreComponent implements OnInit {
+    @Input() score: number;
+
+    fixedScore: string;
+
+    constructor(
+        private injector: Injector,
+        private analyticsService: AnalyticsService,
+        private dynamicPopupService: DynamicPopupService,
+        private componentFactoryResolver: ComponentFactoryResolver,
+    ) { }
+
+    ngOnInit() {
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        const score = changes.score.currentValue
+
+        if (!isNaN(Number(score))) {
+            this.fixedScore = (score as number).toFixed(2);
+        }
+    }
+
+    getScoreTextClassName() {
+        let className = '';
+
+        if (!this.score) {
+            return 'score';
+        }
+
+        if (this.score < 0.5) {
+            className = APDEX_SCORE_RANK.UNACCEPTABLE;
+        } else if (this.score < 0.7) {
+            className = APDEX_SCORE_RANK.POOR;
+        } else if (this.score < 0.85) {
+            className = APDEX_SCORE_RANK.FAIR;
+        } else if (this.score < 0.94) {
+            className = APDEX_SCORE_RANK.GOOD;
+        } else {
+            className = APDEX_SCORE_RANK.EXCELLENT;
+        }
+
+        return `score ${className}`;
+    }
+
+    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,
+            coord: {
+                coordX: left,
+                coordY: top + height / 2
+            },
+            component: HelpViewerPopupContainerComponent
+        }, {
+            resolver: this.componentFactoryResolver,
+            injector: this.injector
+        });
+    }
+}
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
@@ -0,0 +1,23 @@
+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 { ApplicationNameIssuePopupModule } from '../application-name-issue-popup';
+
+@NgModule({
+    declarations: [
+        ApdexScoreComponent,
+    ],
+    imports: [
+        HelpViewerPopupModule,
+        ApplicationNameIssuePopupModule,
+        SharedModule
+    ],
+    exports: [
+        ApdexScoreComponent,
+    ],
+    providers: [
+    ]
+})
+export class ApdexScoreModule { }
diff --git a/...ular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.html b/...ular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.html
@@ -2,7 +2,7 @@
     <pp-help-viewer-popup
         [data]="data"
         (clickOutside)="onClickOutside()"
-        [exclude]="'.fa-question-circle'">
+        [exclude]="'.fa-question-circle, .helper-viewer-exclude'">
     </pp-help-viewer-popup>
     <div class="tooltip-triangle" [ngStyle]="tooltipTriangleStyle"></div>
 </ng-container> 
diff --git a/...ngular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts b/...ngular/src/app/core/components/help-viewer-popup/help-viewer-popup-container.component.ts
@@ -44,7 +44,8 @@ export enum HELP_VIEWER_LIST {
     APPLICATION_MAPPED_BUFFER_MEMORY = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.MAPPED_BUFFER_MEMORY',
     APPLICATION_LOADED_CLASS_COUNT = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.LOADED_CLASS_COUNT',
     APPLICATION_UNLOADED_CLASS_COUNT = 'HELP_VIEWER.INSPECTOR.APPLICATION_CHART.UNLOADED_CLASS_COUNT',
-    ALARM = 'HELP_VIEWER.ALARM'
+    ALARM = 'HELP_VIEWER.ALARM',
+    APDEX_SCORE = 'HELP_VIEWER.APDEX_SCORE'
 }
 
 const enum HELP_VIEWER_WIDTH_STATE {

diff --git a/...rc/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup.component.css b/...rc/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup.component.css
@@ -44,7 +44,7 @@
 }
 
 .category-list {
-    padding: 14px 8px;
+    padding: 14px 14px;
 }
 
 .category-list:not(:last-of-type) {

diff --git a/...c/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup.component.html b/...c/main/angular/src/app/core/components/help-viewer-popup/help-viewer-popup.component.html
@@ -5,7 +5,7 @@
     </div>
     <div class="contents-group">
         <dl *ngFor="let category of helpViewerText.CATEGORY" class="category-list">
-            <dt class="category-title">{{category.TITLE}}</dt>
+            <dt *ngIf="category.TITLE" class="category-title">{{category.TITLE}}</dt>
             <dd *ngFor="let item of category.ITEMS">
                 <dl class="category-item-list">
                     <dt [innerHTML]="item.NAME | jsonTextParser | safeHtml"></dt>

diff --git a/...c/main/angular/src/app/core/components/main-contents/main-contents-container.component.ts b/...c/main/angular/src/app/core/components/main-contents/main-contents-container.component.ts
@@ -47,8 +47,6 @@ export class MainContentsContainerComponent implements OnInit {
         this.isAppSelected$ = this.newUrlStateNotificationService.onUrlStateChange$.pipe(
             map((urlService: NewUrlStateNotificationService) => urlService.hasValue(UrlPathId.APPLICATION))
         );
-
-        console.log(this.isAppSelected$)
     }
 
     onShowHelp($event: MouseEvent): void {

diff --git a/web/src/main/angular/src/app/core/components/scatter-chart/index.ts b/web/src/main/angular/src/app/core/components/scatter-chart/index.ts
@@ -13,6 +13,7 @@ import { ScatterChartForFullScreenModeContainerComponent } from './scatter-chart
 import { ScatterChartInteractionService } from './scatter-chart-interaction.service';
 import { ScatterChartDataService } from './scatter-chart-data.service';
 import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup';
+import { ApdexScoreModule } from 'app/core/components/apdex-score';
 
 @NgModule({
     declarations: [
@@ -24,11 +25,12 @@ import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup';
         ScatterChartForFilteredMapSideBarContainerComponent,
         ScatterChartForFilteredMapInfoPerServerContainerComponent,
         ScatterChartForInfoPerServerContainerComponent,
-        ScatterChartForFullScreenModeContainerComponent
+        ScatterChartForFullScreenModeContainerComponent,
     ],
     imports: [
         HelpViewerPopupModule,
-        SharedModule
+        SharedModule,
+        ApdexScoreModule,
     ],
     exports: [
         ScatterChartContainerComponent,

diff --git a/...main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html b/...main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.html
@@ -7,6 +7,7 @@
         (outCancel)="onCancelSetting()">
     </pp-scatter-chart-setting-popup>
     <pp-scatter-chart-options
+        [apdexScore]="apdexScore"
         [instanceKey]="instanceKey"
         [hiddenOptions]="{ setting: false, download: false, open: false, help: false }"
         (outShowSetting)="onShowSetting()"

diff --git a/...c/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.ts b/...c/main/angular/src/app/core/components/scatter-chart/scatter-chart-container.component.ts
@@ -58,6 +58,7 @@ export class ScatterChartContainerComponent implements OnInit, OnDestroy {
     showBlockMessagePopup = false;
     shouldHide = true;
     enableServerSideScan: boolean;
+    apdexScore: number;
 
     constructor(
         private storeHelperService: StoreHelperService,
@@ -224,11 +225,13 @@ export class ScatterChartContainerComponent implements OnInit, OnDestroy {
         ).subscribe((target: ISelectedTarget) => {
             this.selectedTarget = target;
             this.shouldHide = !(this.selectedTarget.isNode && this.selectedTarget.isWAS && !this.selectedTarget.isMerged);
+
             if (!this.shouldHide) {
                 this.selectedAgent = '';
                 this.selectedApplication = this.selectedTarget.node[0];
                 this.reset({fromX: this.fromX, toX: this.toX});
                 this.getScatterData();
+                this.apdexScore = target.apdexScore;
             }
             this.cd.detectChanges();
         });

diff --git a/...rc/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.css b/...rc/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.css
@@ -1,9 +1,10 @@
 .l-tool-box {
+    display: flex;
+    justify-content: space-between;
     font-size:14px;
     color: var(--icon-default);
-    text-align:right;
     position:relative;
-    padding: 0 25px 0
+    padding: 0 25px 0;
 }
 .l-tool-box button {
     margin:0 0 0 14px;

diff --git a/...c/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.html b/...c/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.html
@@ -1,6 +1,9 @@
 <div class="l-tool-box">
-    <button [hidden]="hiddenOptions.setting" class="fas fa-cog" (click)="outShowSetting.emit()"></button>
-    <button [hidden]="hiddenOptions.download" class="fas fa-download" (click)="outDownload.emit()"></button>
-    <button [hidden]="hiddenOptions.open" class="fas fa-expand-arrows-alt" (click)="outOpenScatterPage.emit()"></button>
-    <button [hidden]="hiddenOptions.help" class="fas fa-question-circle l-last-child" (click)="onShowHelp($event)"></button>
+    <pp-apdex-score [score]="apdexScore"></pp-apdex-score>
+    <div>
+        <button [hidden]="hiddenOptions.setting" class="fas fa-cog" (click)="outShowSetting.emit()"></button>
+        <button [hidden]="hiddenOptions.download" class="fas fa-download" (click)="outDownload.emit()"></button>
+        <button [hidden]="hiddenOptions.open" class="fas fa-expand-arrows-alt" (click)="outOpenScatterPage.emit()"></button>
+        <button [hidden]="hiddenOptions.help" class="fas fa-question-circle l-last-child" (click)="onShowHelp($event)"></button>
+    </div>
 </div>
diff --git a/...src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts b/...src/main/angular/src/app/core/components/scatter-chart/scatter-chart-options.component.ts
@@ -11,9 +11,12 @@ export class ScatterChartOptionsComponent implements OnInit {
     @Output() outOpenScatterPage: EventEmitter<null> = new EventEmitter();
     @Output() outShowHelp: EventEmitter<MouseEvent> = 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/server-map/server-map-container.component.ts b/web/src/main/angular/src/app/core/components/server-map/server-map-container.component.ts
@@ -229,7 +229,8 @@ export class ServerMapContainerComponent implements OnInit, OnDestroy {
                 isWAS: nodeData.isWas,
                 node: nodeData.mergedNodes.map((nodeInfo: any) => {
                     return nodeInfo.key;
-                })
+                }),
+                apdexScore: nodeData.apdexScore,
             };
             if (nodeData.mergedSourceNodes) {
                 payload.groupedNode = nodeData.mergedSourceNodes.map((nodeInfo: any) => {
@@ -244,7 +245,8 @@ export class ServerMapContainerComponent implements OnInit, OnDestroy {
                 isMerged: false,
                 isWAS: nodeData.isWas,
                 node: [nodeData.key],
-                hasServerList: nodeData.instanceCount > 0 ? true : false
+                hasServerList: nodeData.instanceCount > 0 ? true : false,
+                apdexScore: nodeData.apdexScore,
             };
         }
         this.messageQueueService.sendMessage({

diff --git a/web/src/main/angular/src/app/shared/services/analytics.service.ts b/web/src/main/angular/src/app/shared/services/analytics.service.ts
@@ -145,6 +145,7 @@ export enum TRACKED_EVENT_LIST {
     SELECT_APPLICATION_FOR_WEBHOOK = 'Select Application For Webhook',
     SHOW_WEBHOOK_UPDATE_POPUP = 'Show Webhook Update Popup',
     CLICK_SIDE_NAVIGATION_BAR = 'Click Side Navigation Bar',
+    CLICK_APDEX_SCORE = 'Click Apdex Score',
 }
 
 @Injectable()

diff --git a/web/src/main/angular/src/assets/i18n/en.json b/web/src/main/angular/src/assets/i18n/en.json
@@ -949,6 +949,27 @@
                     "DESC": "Sends an alarm when the number of open file descriptors exceeds the configured threshold."
                 }]
             }]
+        }],
+        "APDEX_SCORE": [{
+            "TITLE": "Apdex Score",
+            "CATEGORY": [{
+                "ITEMS": [{
+                    "DESC": "[ICON]:{className=fa-smile-beam\\style=font-size:15px;color:var(--status-success);\\value=Excellent}|[TEXT]:{value=&nbsp;&nbsp;Excellent}",
+                    "NAME": "0.94 ~ 1.00"
+                }, {
+                    "DESC": "[ICON]:{className=fa-smile\\style=font-size:15px;color:var(--status-good);}|[TEXT]:{value=&nbsp;&nbsp;Good}",
+                    "NAME": "0.85 ~ 0.94"
+                }, {
+                    "DESC": "[ICON]:{className=fa-meh\\style=font-size:15px;}|[TEXT]:{value=&nbsp;&nbsp;Fair}",
+                    "NAME": "0.7 ~ 0.85"
+                }, {
+                    "DESC": "[ICON]:{className=fa-frown\\style=font-size:15px;color:var(--status-warn);}|[TEXT]:{value=&nbsp;&nbsp;Poor}",
+                    "NAME": "0.5 ~ 0.7"
+                }, {
+                    "DESC": "[ICON]:{className=fa-angry\\style=font-size:15px;color:var(--status-fail);}|[TEXT]:{value=&nbsp;&nbsp;Unacceptable}",
+                    "NAME": "< 0.5"
+                }]
+            }]
         }]
     }
 }
diff --git a/web/src/main/angular/src/assets/i18n/ko.json b/web/src/main/angular/src/assets/i18n/ko.json
@@ -948,6 +948,28 @@
                     "DESC": "열려있는 File Descriptor 개수가 임계치를 초가한 경우 알람이 전송된다."
                 }]
             }]
+        }],
+        "APDEX_SCORE": [{
+            "TITLE": "Apdex Score",
+            "CATEGORY": [{
+                "TITLE": "Score",
+                "ITEMS": [{
+                    "DESC": "[ICON]:{className=fa-smile-beam\\style=font-size:15px;color:var(--status-success);\\value=Excellent}|[TEXT]:{value=&nbsp;Excellent}",
+                    "NAME": "0.94 ~ 1.00"
+                }, {
+                    "DESC": "[ICON]:{className=fa-smile\\style=font-size:15px;color:var(--status-good);}|[TEXT]:{value=&nbsp;Good}",
+                    "NAME": "0.85 ~ 0.94"
+                }, {
+                    "DESC": "[ICON]:{className=fa-meh\\style=font-size:15px;}|[TEXT]:{value=&nbsp;Fair}",
+                    "NAME": "0.7 ~ 0.85"
+                }, {
+                    "DESC": "[ICON]:{className=fa-frown\\style=font-size:15px;color:var(--status-warn);}|[TEXT]:{value=&nbsp;Poor}",
+                    "NAME": "0.5 ~ 0.7"
+                }, {
+                    "DESC": "[ICON]:{className=fa-angry\\style=font-size:15px;color:var(--status-fail);}|[TEXT]:{value=&nbsp;Unacceptable}",
+                    "NAME": "< 0.5"
+                }]
+            }]
         }]
     }
 }