pinpoint-apm · jihea-park · Jan 10, 2025 · Jan 9, 2025
diff --git a/web-angular/src/main/angular/src/app/routes/inspector-page/index.ts b/web-angular/src/main/angular/src/app/routes/inspector-page/index.ts
@@ -11,23 +11,23 @@ import { InspectorPageComponent } from './inspector-page.component';
 import { HelpViewerPopupModule } from 'app/core/components/help-viewer-popup';
 import { AppWidgetModule } from 'app/core/components/app-widget';
 import { SideNavigationBarModule } from 'app/core/components/side-navigation-bar';
+import { MessagePopupModule } from 'app/core/components/message-popup';
 
 @NgModule({
-    declarations: [
-        InspectorPageComponent
-    ],
-    imports: [
-        SharedModule,
-        SideNavigationBarModule,
-        NoticeModule,
-        ServerAndAgentListModule,
-        ApplicationInspectorContentsModule,
-        AgentInspectorContentsModule,
-        HelpViewerPopupModule,
-        RouterModule.forChild(routing),
-        AppWidgetModule,
-    ],
-    exports: [],
-    providers: []
+  declarations: [InspectorPageComponent],
+  imports: [
+    SharedModule,
+    SideNavigationBarModule,
+    NoticeModule,
+    ServerAndAgentListModule,
+    ApplicationInspectorContentsModule,
+    AgentInspectorContentsModule,
+    HelpViewerPopupModule,
+    RouterModule.forChild(routing),
+    AppWidgetModule,
+    MessagePopupModule,
+  ],
+  exports: [],
+  providers: [],
 })
 export class InspectorPageModule {}
diff --git a/web-angular/src/main/angular/src/app/routes/inspector-page/inspector-page.component.ts b/web-angular/src/main/angular/src/app/routes/inspector-page/inspector-page.component.ts
@@ -1,116 +1,195 @@
-import { Component, OnInit, ComponentFactoryResolver, Injector, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ComponentFactoryResolver,
+  Injector,
+  OnDestroy,
+} from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { map, takeUntil, tap } from 'rxjs/operators';
 
-import { NewUrlStateNotificationService, AnalyticsService, TRACKED_EVENT_LIST, DynamicPopupService, WebAppSettingDataService, MessageQueueService, MESSAGE_TO, UrlRouteManagerService } from 'app/shared/services';
+import {
+  NewUrlStateNotificationService,
+  AnalyticsService,
+  TRACKED_EVENT_LIST,
+  DynamicPopupService,
+  WebAppSettingDataService,
+  MessageQueueService,
+  MESSAGE_TO,
+  UrlRouteManagerService,
+  TranslateReplaceService,
+} from 'app/shared/services';
 import { UrlPath, UrlPathId } from 'app/shared/models';
-import { HELP_VIEWER_LIST, HelpViewerPopupContainerComponent } from 'app/core/components/help-viewer-popup/help-viewer-popup-container.component';
+import {
+  HELP_VIEWER_LIST,
+  HelpViewerPopupContainerComponent,
+} from 'app/core/components/help-viewer-popup/help-viewer-popup-container.component';
+import { MessagePopupContainerComponent } from 'app/core/components/message-popup/message-popup-container.component';
 import { InspectorPageService } from './inspector-page.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
-    selector: 'pp-inspector-page',
-    templateUrl: './inspector-page.component.html',
-    styleUrls: ['./inspector-page.component.css'],
-    providers: [InspectorPageService]
+  selector: 'pp-inspector-page',
+  templateUrl: './inspector-page.component.html',
+  styleUrls: ['./inspector-page.component.css'],
+  providers: [InspectorPageService],
 })
 export class InspectorPageComponent implements OnInit, OnDestroy {
-    private unsubscribe = new Subject<void>();
-    private funcImagePath: Function;
-
-    unAuthImgPath: string;
-
-    showSideMenu: boolean;
-    isAccessDenyed$: Observable<boolean>;
-
-    mainSectionStyle = {};
-    isAppActivated: boolean;
-    selectedAppImg: string;
-    selectedAppName: string;
-
-    constructor(
-        private inspectorPageService: InspectorPageService,
-        private newUrlStateNotificationService: NewUrlStateNotificationService,
-        private analyticsService: AnalyticsService,
-        private dynamicPopupService: DynamicPopupService,
-        private componentFactoryResolver: ComponentFactoryResolver,
-        private injector: Injector,
-        private webAppSettingDataService: WebAppSettingDataService,
-        private messageQueueService: MessageQueueService,
-        private urlRouteManagerService: UrlRouteManagerService,
-    ) {}
-
-    ngOnInit() {
-        this.funcImagePath = this.webAppSettingDataService.getIconPathMakeFunc();
-        this.unAuthImgPath = this.webAppSettingDataService.getServerMapIconPathMakeFunc()('UNAUTHORIZED');
-
-        this.newUrlStateNotificationService.onUrlStateChange$.pipe(
-            takeUntil(this.unsubscribe),
-            tap((urlService: NewUrlStateNotificationService) => {
-                if (urlService.hasValue(UrlPathId.APPLICATION)) {
-                    const selectedApp: IApplication = urlService.getPathValue(UrlPathId.APPLICATION);
-
-                    this.selectedAppName = selectedApp.getApplicationName();
-                    this.selectedAppImg = this.funcImagePath(selectedApp.getServiceType());
-                    this.isAppActivated = !urlService.hasValue(UrlPathId.AGENT_ID);
-                }
-            }),
-            map((urlService: NewUrlStateNotificationService) => {
-                return urlService.isRealTimeMode() || urlService.hasValue(UrlPathId.END_TIME);
-            })
-        ).subscribe((showSideMenu: boolean) => {
-            this.showSideMenu = showSideMenu;
-            this.mainSectionStyle = {
-                width: showSideMenu ? 'calc(100% - 250px)' : '100%'
-            };
-        });
-        this.isAccessDenyed$ = this.messageQueueService.receiveMessage(this.unsubscribe, MESSAGE_TO.IS_ACCESS_DENYED);
-        this.inspectorPageService.activate(this.unsubscribe);
-    }
-
-    ngOnDestroy() {
-        this.unsubscribe.next();
-        this.unsubscribe.complete();
-    }
-
-    onSelectApp(): void {
-        const url = this.newUrlStateNotificationService.isRealTimeMode() ?
-            [
-                UrlPath.INSPECTOR,
-                UrlPath.REAL_TIME,
-                this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getUrlStr(),
-            ] :
-            [
-                UrlPath.INSPECTOR,
-                this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getUrlStr(),
-                this.newUrlStateNotificationService.getPathValue(UrlPathId.PERIOD).getValueWithTime(),
-                this.newUrlStateNotificationService.getPathValue(UrlPathId.END_TIME).getEndTime(),
-            ];
-
-        this.urlRouteManagerService.moveOnPage({url});
-        // this.urlRouteManagerService.moveOnPage({
-        //     url: [
-        //         UrlPath.INSPECTOR,
-        //         this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getUrlStr(),
-        //         this.newUrlStateNotificationService.getPathValue(UrlPathId.PERIOD).getValueWithTime(),
-        //         this.newUrlStateNotificationService.getPathValue(UrlPathId.END_TIME).getEndTime(),
-        //     ]
-        // })
-    }
-
-    onShowHelp($event: MouseEvent): void {
-        this.analyticsService.trackEvent(TRACKED_EVENT_LIST.TOGGLE_HELP_VIEWER, HELP_VIEWER_LIST.NAVBAR);
-        const {left, top, width, height} = ($event.target as HTMLElement).getBoundingClientRect();
-
-        this.dynamicPopupService.openPopup({
-            data: HELP_VIEWER_LIST.NAVBAR,
-            coord: {
-                coordX: left + width / 2,
-                coordY: top + height / 2
-            },
-            component: HelpViewerPopupContainerComponent
-        }, {
-            resolver: this.componentFactoryResolver,
-            injector: this.injector
-        });
-    }
+  private unsubscribe = new Subject<void>();
+  private funcImagePath: Function;
+  private noticeMessage: string;
+
+  unAuthImgPath: string;
+
+  showSideMenu: boolean;
+  isAccessDenyed$: Observable<boolean>;
+
+  mainSectionStyle = {};
+  isAppActivated: boolean;
+  selectedAppImg: string;
+  selectedAppName: string;
+
+  constructor(
+    private inspectorPageService: InspectorPageService,
+    private newUrlStateNotificationService: NewUrlStateNotificationService,
+    private analyticsService: AnalyticsService,
+    private dynamicPopupService: DynamicPopupService,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector,
+    private webAppSettingDataService: WebAppSettingDataService,
+    private messageQueueService: MessageQueueService,
+    private urlRouteManagerService: UrlRouteManagerService,
+    private translateService: TranslateService,
+    private translateReplaceService: TranslateReplaceService
+  ) {}
+
+  ngOnInit() {
+    this.funcImagePath = this.webAppSettingDataService.getIconPathMakeFunc();
+    this.unAuthImgPath =
+      this.webAppSettingDataService.getServerMapIconPathMakeFunc()(
+        'UNAUTHORIZED'
+      );
+
+    this.newUrlStateNotificationService.onUrlStateChange$
+      .pipe(
+        takeUntil(this.unsubscribe),
+        tap((urlService: NewUrlStateNotificationService) => {
+          if (urlService.hasValue(UrlPathId.APPLICATION)) {
+            const selectedApp: IApplication = urlService.getPathValue(
+              UrlPathId.APPLICATION
+            );
+
+            this.selectedAppName = selectedApp.getApplicationName();
+            this.selectedAppImg = this.funcImagePath(
+              selectedApp.getServiceType()
+            );
+            this.isAppActivated = !urlService.hasValue(UrlPathId.AGENT_ID);
+          }
+        }),
+        map((urlService: NewUrlStateNotificationService) => {
+          return (
+            urlService.isRealTimeMode() ||
+            urlService.hasValue(UrlPathId.END_TIME)
+          );
+        })
+      )
+      .subscribe((showSideMenu: boolean) => {
+        this.showSideMenu = showSideMenu;
+        this.mainSectionStyle = {
+          width: showSideMenu ? 'calc(100% - 250px)' : '100%',
+        };
+      });
+    this.isAccessDenyed$ = this.messageQueueService.receiveMessage(
+      this.unsubscribe,
+      MESSAGE_TO.IS_ACCESS_DENYED
+    );
+    this.inspectorPageService.activate(this.unsubscribe);
+
+    this.translateService
+      .get('INSPECTOR.DEPRECATED_MESSAGE')
+      .subscribe((text: string) => {
+        this.noticeMessage = this.translateReplaceService.replace(
+          text,
+          `/inspector/${this.selectedAppName || ''}`
+        );
+      });
+
+    this.dynamicPopupService.openPopup(
+      {
+        data: {
+          title: 'Notice',
+          contents: this.noticeMessage,
+          type: 'html',
+        },
+        component: MessagePopupContainerComponent,
+      },
+      {
+        resolver: this.componentFactoryResolver,
+        injector: this.injector,
+      }
+    );
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.next();
+    this.unsubscribe.complete();
+  }
+
+  onSelectApp(): void {
+    const url = this.newUrlStateNotificationService.isRealTimeMode()
+      ? [
+          UrlPath.INSPECTOR,
+          UrlPath.REAL_TIME,
+          this.newUrlStateNotificationService
+            .getPathValue(UrlPathId.APPLICATION)
+            .getUrlStr(),
+        ]
+      : [
+          UrlPath.INSPECTOR,
+          this.newUrlStateNotificationService
+            .getPathValue(UrlPathId.APPLICATION)
+            .getUrlStr(),
+          this.newUrlStateNotificationService
+            .getPathValue(UrlPathId.PERIOD)
+            .getValueWithTime(),
+          this.newUrlStateNotificationService
+            .getPathValue(UrlPathId.END_TIME)
+            .getEndTime(),
+        ];
+
+    this.urlRouteManagerService.moveOnPage({ url });
+    // this.urlRouteManagerService.moveOnPage({
+    //     url: [
+    //         UrlPath.INSPECTOR,
+    //         this.newUrlStateNotificationService.getPathValue(UrlPathId.APPLICATION).getUrlStr(),
+    //         this.newUrlStateNotificationService.getPathValue(UrlPathId.PERIOD).getValueWithTime(),
+    //         this.newUrlStateNotificationService.getPathValue(UrlPathId.END_TIME).getEndTime(),
+    //     ]
+    // })
+  }
+
+  onShowHelp($event: MouseEvent): void {
+    this.analyticsService.trackEvent(
+      TRACKED_EVENT_LIST.TOGGLE_HELP_VIEWER,
+      HELP_VIEWER_LIST.NAVBAR
+    );
+    const { left, top, width, height } = (
+      $event.target as HTMLElement
+    ).getBoundingClientRect();
+
+    this.dynamicPopupService.openPopup(
+      {
+        data: HELP_VIEWER_LIST.NAVBAR,
+        coord: {
+          coordX: left + width / 2,
+          coordY: top + height / 2,
+        },
+        component: HelpViewerPopupContainerComponent,
+      },
+      {
+        resolver: this.componentFactoryResolver,
+        injector: this.injector,
+      }
+    );
+  }
 }
diff --git a/web-angular/src/main/angular/src/assets/i18n/en.json b/web-angular/src/main/angular/src/assets/i18n/en.json
@@ -44,7 +44,8 @@
         "For case 1, you should delete the mapping between !{0} and !{1}.",
         "For case 2, the agent id of the duplicate agent must change."
       ]
-    }
+    },
+    "DEPRECATED_MESSAGE": "V2's inspector data is no longer provided. Use <a href=\"!{0}\" style=\"color:#428bca\">V3 inspector</a>."
   },
   "TRANSACTION_LIST": {
     "SELECT_TRANSACTION": "Select your transaction",

diff --git a/web-angular/src/main/angular/src/assets/i18n/ko.json b/web-angular/src/main/angular/src/assets/i18n/ko.json
@@ -44,7 +44,8 @@
         "1의 경우 !{0}과 !{1}간의 매핑 정보를 삭제해야 합니다.",
         "2의 경우 중복 등록된 agent의 id를 변경해야 합니다."
       ]
-    }
+    },
+    "DEPRECATED_MESSAGE": "V2의 inspector 데이터는 더 이상 제공하지 않습니다. <a href=\"!{0}\" style=\"color:#428bca\">V3 inspector</a>를 사용하세요."
   },
   "TRANSACTION_LIST": {
     "SELECT_TRANSACTION": "Transaction을 선택하세요.",