[#noissue] fix realtime agent

web-frontend/src/main/v3/apps/web/src/pages/ThreadDump.tsx

@@ -0,0 +1,4 @@
+import { withInitialFetch, ThreadDumpPage } from '@pinpoint-fe/ui';
+import { getLayoutWithSideNavigation } from '@/components/Layout/LayoutWithSideNavigation';
+
+export default withInitialFetch(() => getLayoutWithSideNavigation(<ThreadDumpPage />));

web-frontend/src/main/v3/apps/web/src/routes/index.tsx

@@ -27,12 +27,14 @@ import { transactionRouteLoader } from './loader/transaction';
 import { transactionDetailRouteLoader } from './loader/transactionDetail';
 import { inspectorRouteLoader } from './loader/inspector';
 import Inspector from '@/pages/Inspector';
+import ThreadDump from '@/pages/ThreadDump';
 import Help from '@/pages/config/Help';
 import Installation from '@/pages/config/Installation';
 import UserGroup from '@/pages/config/UserGroup';
 import Users from '@/pages/config/Users';
 import Alarm from '@/pages/config/Alarm';
 import Webhook from '@/pages/config/Webhook';
+import { threadDumpRouteLoader } from './loader/threadDump';
 
 const defaultLoader = () => redirect('/serverMap');
 
@@ -106,6 +108,11 @@ const router = createBrowserRouter(
       element: <Inspector />,
       loader: inspectorRouteLoader,
     },
+    {
+      path: `${APP_PATH.THREAD_DUMP}/:application?`,
+      element: <ThreadDump />,
+      loader: threadDumpRouteLoader,
+    },
     {
       path: `${APP_PATH.CONFIG_ALARM}`,
       element: <Alarm />,

web-frontend/src/main/v3/apps/web/src/routes/loader/threadDump.ts

@@ -0,0 +1,21 @@
+import { APP_PATH } from '@pinpoint-fe/constants';
+import { getApplicationTypeAndName } from '@pinpoint-fe/utils';
+import { LoaderFunctionArgs, redirect } from 'react-router-dom';
+
+export const threadDumpRouteLoader = ({ params, request }: LoaderFunctionArgs) => {
+  const application = getApplicationTypeAndName(params.application!);
+
+  if (application?.applicationName && application.serviceType) {
+    const redirectPath = `${APP_PATH.SERVER_MAP}/${params.application}`;
+    const queryParam = Object.fromEntries(new URL(request.url).searchParams);
+    const agentId = queryParam?.agentId as string;
+
+    if (agentId) {
+      return application;
+    } else {
+      return redirect(redirectPath);
+    }
+  } else {
+    return redirect(APP_PATH.SERVER_MAP);
+  }
+};

web-frontend/src/main/v3/packages/constants/src/EndPoints.ts

@@ -36,8 +36,8 @@ export const TRANSACTION_INFO = `${LOCAL_API_PATH}/transactionInfo`;
 // export const = '/sqlBind';
 // export const = '/jsonBind';
 export const SCATTER_DATA = `${LOCAL_API_PATH}/getScatterData`;
-// export const = '/agent/activeThreadLightDump';
-// export const = '/agent/activeThreadDump';
+export const ACTIVE_THREAD_LIGHT_DUMP = `${LOCAL_API_PATH}/agent/activeThreadLightDump`;
+export const ACTIVE_THREAD_DUMP = `${LOCAL_API_PATH}/agent/activeThreadDump`;
 // export const = '/getAgentInstallationInfo';
 // export const = '/isAvailableApplicationName';
 // export const = '/isAvailableAgentId';

web-frontend/src/main/v3/packages/constants/src/appSettingKeys.ts

@@ -19,5 +19,6 @@ export enum APP_SETTING_KEYS {
   TRANSACTION_LIST_RESIZABLE = 'transactionListResizable',
   TRANSACTION_DETAIL_RESIZABLE = 'transactionDetailResizable',
   SERVER_MAP_HORIZONTAL_RESIZABLE = 'serverMapHorizontalResizable',
+  REALTIME_ACTIVE_REQUEST_RESIZABLE = 'realtimeActiveRequestResizable',
   ALARM_LAST_SELECTED_APPLICATION = 'alarmLastSelectedApplication',
 }

web-frontend/src/main/v3/packages/constants/src/path.ts

@@ -19,6 +19,7 @@ export const APP_PATH = {
   SERVER_MAP_REALTIME: '/serverMap/realtime',
   SERVER_MAP: '/serverMap',
   SYSTEM_METRIC: '/systemMetric',
+  THREAD_DUMP: '/threadDump',
   TRANSACTION_DETAIL: '/transactionDetail',
   TRANSACTION_LIST: '/transactionList',
   URL_STATISTIC: '/urlStatistic',

web-frontend/src/main/v3/packages/constants/src/types/ActiveThreadDump.ts

@@ -0,0 +1,73 @@
+export namespace ActiveThreadDump {
+  export interface Parameters {
+    applicationName: string;
+    agentId: string;
+    threadName: string;
+    localTraceId: number;
+  }
+
+  export interface Response {
+    code: number;
+    message: Message;
+  }
+
+  export interface Message {
+    threadDumpData: ThreadDumpData[];
+    type: string;
+    subType: string;
+    version: string;
+  }
+
+  export interface ThreadDumpData {
+    threadId: string;
+    threadName: string;
+    threadState: string;
+    startTime: number;
+    execTime: number;
+    localTraceId: number;
+    sampled: boolean;
+    transactionId: string;
+    entryPoint: string;
+    detailMessage: string;
+  }
+
+  export interface ErrorResponse {
+    timestamp: string;
+    status: number;
+    error: string;
+    exception: string;
+    trace: string;
+    message: string;
+    path: string;
+    data: ErrorData;
+  }
+
+  export interface ErrorData {
+    hostName: string;
+    requestInfo: RequestInfo;
+  }
+
+  export interface RequestInfo {
+    method: string;
+    url: string;
+    headers: Headers;
+    parameters: Parameters;
+  }
+
+  export interface Headers {
+    'sec-fetch-mode': string[];
+    referer: string[];
+    'sec-fetch-site': string[];
+    'accept-language': string[];
+    cookie: string[];
+    pragma: string[];
+    accept: string[];
+    'sec-ch-ua': string[];
+    'sec-ch-ua-mobile': string[];
+    'sec-ch-ua-platform': string[];
+    'cache-control': string[];
+    'accept-encoding': string[];
+    'user-agent': string[];
+    'sec-fetch-dest': string[];
+  }
+}

web-frontend/src/main/v3/packages/constants/src/types/ActiveThreadLightDump.ts

@@ -0,0 +1,71 @@
+export namespace ActiveThreadLightDump {
+  export interface Parameters {
+    applicationName: string;
+    agentId: string;
+  }
+
+  export interface Response {
+    code: number;
+    message: Message;
+  }
+
+  export interface Message {
+    threadDumpData: ThreadDumpData[];
+    type: string;
+    subType: string;
+    version: string;
+  }
+
+  export interface ThreadDumpData {
+    threadId: string;
+    threadName: string;
+    threadState: string;
+    startTime: number;
+    execTime: number;
+    localTraceId: number;
+    sampled: boolean;
+    transactionId: string;
+    entryPoint: string;
+    detailMessage: string;
+  }
+
+  export interface ErrorResponse {
+    timestamp: string;
+    status: number;
+    error: string;
+    exception: string;
+    trace: string;
+    message: string;
+    path: string;
+    data: ErrorData;
+  }
+
+  export interface ErrorData {
+    hostName: string;
+    requestInfo: RequestInfo;
+  }
+
+  export interface RequestInfo {
+    method: string;
+    url: string;
+    headers: Headers;
+    parameters: Parameters;
+  }
+
+  export interface Headers {
+    'sec-fetch-mode': string[];
+    referer: string[];
+    'sec-fetch-site': string[];
+    'accept-language': string[];
+    cookie: string[];
+    pragma: string[];
+    accept: string[];
+    'sec-ch-ua': string[];
+    'sec-ch-ua-mobile': string[];
+    'sec-ch-ua-platform': string[];
+    'cache-control': string[];
+    'accept-encoding': string[];
+    'user-agent': string[];
+    'sec-fetch-dest': string[];
+  }
+}

web-frontend/src/main/v3/packages/constants/src/types/index.ts

@@ -1,4 +1,5 @@
-export * from './AgentActiveThread';
+export * from './ActiveThreadDump';
+export * from './ActiveThreadLightDump';
 export * from './AgentActiveThread';
 export * from './AlarmRule';
 export * from './Application';

web-frontend/src/main/v3/packages/hooks/src/api/index.ts

@@ -5,6 +5,8 @@ export * from './useAlarmRuleQuery';
 export * from './useDeleteConfigGroupMember';
 export * from './useDeleteConfigUserGroup';
 export * from './useDeleteConfigUsers';
+export * from './useGetActiveThreadLightDump';
+export * from './useGetActiveThreadDump';
 export * from './useGetAgentList';
 export * from './useGetAlarmRuleChecker';
 export * from './useGetApdexScore';

web-frontend/src/main/v3/packages/hooks/src/api/useGetActiveThreadDump.ts

@@ -0,0 +1,40 @@
+import useSWR from 'swr';
+import { END_POINTS, ActiveThreadDump, ActiveThreadLightDump } from '@pinpoint-fe/constants';
+import { swrConfigs } from './swrConfigs';
+import { convertParamsToQueryString } from '@pinpoint-fe/utils';
+import { useSearchParameters } from '../searchParameters';
+
+const getQueryString = (
+  queryParams: Partial<ActiveThreadDump.Parameters> & Partial<ActiveThreadLightDump.ThreadDumpData>,
+) => {
+  if (
+    queryParams?.agentId &&
+    queryParams?.applicationName &&
+    queryParams?.threadName &&
+    queryParams?.localTraceId
+  ) {
+    return '?' + convertParamsToQueryString(queryParams);
+  }
+
+  return '';
+};
+
+export const useGetActiveThreadDump = (thread?: ActiveThreadLightDump.ThreadDumpData) => {
+  const { searchParameters, application } = useSearchParameters();
+  const applicationName = application?.applicationName;
+  const agentId = searchParameters?.agentId;
+
+  const queryString = getQueryString({
+    applicationName,
+    agentId,
+    threadName: thread?.threadName,
+    localTraceId: thread?.localTraceId,
+  });
+
+  const { data, isLoading } = useSWR<ActiveThreadDump.Response>(
+    queryString ? [`${END_POINTS.ACTIVE_THREAD_DUMP}${queryString}`] : null,
+    swrConfigs,
+  );
+
+  return { data, isLoading };
+};

web-frontend/src/main/v3/packages/hooks/src/api/useGetActiveThreadLightDump.ts

@@ -0,0 +1,31 @@
+import useSWR from 'swr';
+import { END_POINTS, ActiveThreadLightDump } from '@pinpoint-fe/constants';
+import { swrConfigs } from './swrConfigs';
+import { convertParamsToQueryString } from '@pinpoint-fe/utils';
+import { useSearchParameters } from '../searchParameters';
+
+const getQueryString = (queryParams: Partial<ActiveThreadLightDump.Parameters>) => {
+  if (queryParams.agentId) {
+    return '?' + convertParamsToQueryString(queryParams);
+  }
+
+  return '';
+};
+
+export const useGetActiveThreadLightDump = () => {
+  const { searchParameters, application } = useSearchParameters();
+  const applicationName = application?.applicationName;
+  const agentId = searchParameters?.agentId;
+
+  const queryString = getQueryString({
+    applicationName,
+    agentId,
+  });
+
+  const { data, isLoading } = useSWR<ActiveThreadLightDump.Response>(
+    queryString ? [`${END_POINTS.ACTIVE_THREAD_LIGHT_DUMP}${queryString}`] : null,
+    swrConfigs,
+  );
+
+  return { data, isLoading };
+};

web-frontend/src/main/v3/packages/hooks/src/utility/index.ts

@@ -4,4 +4,5 @@ export * from './useExperimentals';
 export * from './useHeightToBottom';
 export * from './useLocalStorage';
 export * from './useLanguage';
+export * from './useTabFocus';
 // export * from './useSearchParameters';

web-frontend/src/main/v3/packages/hooks/src/utility/useTabFocus.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const useTabFocus = (delay = 3000) => {
+  const [isTabFocused, setIsTabFocused] = React.useState(true);
+
+  React.useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    const handleFocusChange = () => {
+      if (!document.hidden) {
+        setIsTabFocused(!document.hidden);
+        clearTimeout(timer);
+      } else {
+        timer = setTimeout(() => setIsTabFocused(!document.hidden), delay);
+      }
+    };
+
+    handleFocusChange();
+
+    document.addEventListener('visibilitychange', handleFocusChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleFocusChange);
+      clearTimeout(timer);
+    };
+  }, [delay]);
+  return isTabFocused;
+};

web-frontend/src/main/v3/packages/scatter-chart/src/ui/ScatterChart.ts

@@ -200,24 +200,35 @@ export class ScatterChart {
     this.gridAxis.setPadding(this.options.padding);
   }
 
-  private setRatio() {
+  private setXRatio() {
     const axisOption = this.options?.axis;
     const xAxis = this.xAxis.getOption();
-    const yAxis = this.yAxis.getOption();
     const padding = this.options.padding;
     const width = this.viewport.canvas.width / this.viewport.viewLayer.dpr;
-    const height = this.viewport.canvas.height / this.viewport.viewLayer.dpr;
     const minX = xAxis.min;
     const maxX = xAxis.max;
+    const innerPaddingX = axisOption.x.padding ?? this.xAxis.innerPadding;
+
+    this.xRatio = (width - padding.left - padding.right - innerPaddingX * 2) / (maxX - minX);
+  }
+
+  private setYRatio() {
+    const axisOption = this.options?.axis;
+    const yAxis = this.yAxis.getOption();
+    const padding = this.options.padding;
+    const height = this.viewport.canvas.height / this.viewport.viewLayer.dpr;
     const minY = yAxis.min;
     const maxY = yAxis.max;
-    const innerPaddingX = axisOption.x.padding ?? this.xAxis.innerPadding;
     const innerPaddingY = axisOption.y.padding ?? this.yAxis?.innerPadding;
 
-    this.xRatio = (width - padding.left - padding.right - innerPaddingX * 2) / (maxX - minX);
     this.yRatio = (height - padding.bottom - padding.top - innerPaddingY * 2) / (maxY - minY);
   }
 
+  private setRatio() {
+    this.setXRatio();
+    this.setYRatio();
+  }
+
   private setGuide() {
     if (!this.options.guide.hidden) {
       this.guide = new Guide(this.viewport.containerElement, {
@@ -633,6 +644,7 @@ export class ScatterChart {
   }
 
   public clear() {
+    Object.values(this.dataLayers).forEach((layer) => layer.clear());
     this.render([]);
   }