[#7716] Config > Admin > Agent Statistic

web-frontend/src/main/v3/apps/web/src/components/Layout/LayoutWithConfiguration.tsx

@@ -51,6 +51,11 @@ export const CONFIG_MENU_MAP = {
         path: APP_PATH.CONFIG_AGENT_MANAGEMENT,
         href: APP_PATH.CONFIG_AGENT_MANAGEMENT,
       },
+      {
+        name: 'Agent statistic',
+        path: APP_PATH.CONFIG_AGENT_STATISTIC,
+        href: APP_PATH.CONFIG_AGENT_STATISTIC,
+      },
     ],
   },
   PERSONAL_SETTINGS: {

web-frontend/src/main/v3/apps/web/src/pages/config/AgentStatistic.tsx

@@ -0,0 +1,15 @@
+import { useAtomValue } from 'jotai';
+import { getLayoutWithConfiguration, getLayoutWithSideNavigation } from '@/components/Layout';
+import { AgentStatisticPage as CommonAgentStatisticPage, withInitialFetch } from '@pinpoint-fe/ui';
+import { configurationAtom } from '@pinpoint-fe/atoms';
+
+export interface AgentStatisticPageProps {}
+const AgentStatisticPage = () => {
+  const configuration = useAtomValue(configurationAtom);
+
+  return <CommonAgentStatisticPage configuration={configuration} />;
+};
+
+export default withInitialFetch((props: AgentStatisticPageProps) =>
+  getLayoutWithSideNavigation(getLayoutWithConfiguration(<AgentStatisticPage {...props} />)),
+);

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

@@ -36,6 +36,7 @@ import Users from '@/pages/config/Users';
 import Alarm from '@/pages/config/Alarm';
 import Webhook from '@/pages/config/Webhook';
 import AgentManagement from '@/pages/config/AgentManagement';
+import AgentStatistic from '@/pages/config/AgentStatistic';
 import { threadDumpRouteLoader } from './loader/threadDump';
 import { openTelemetryRouteLoader } from './loader/openTelemetry';
 import { handleV2RouteLoader } from './loader/handleV2';
@@ -169,6 +170,10 @@ const router = createBrowserRouter(
       path: `${APP_PATH.CONFIG_AGENT_MANAGEMENT}`,
       element: <AgentManagement />,
     },
+    {
+      path: `${APP_PATH.CONFIG_AGENT_STATISTIC}`,
+      element: <AgentStatistic />,
+    },
     {
       path: '*',
       element: <NotFound />,

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

@@ -68,6 +68,7 @@ export const APDEX_SCORE = `${LOCAL_API_PATH}/getApdexScore`;
 //   '/getAgentStat/apdexScore/chart',
 //   '/agents/search-all',
 export const SEARCH_APPLICATION = `${LOCAL_API_PATH}/agents/search-application`;
+export const AGENT_STATISTICS = `${LOCAL_API_PATH}/agents/statistics`;
 //   '/agents/statistics',
 export const ERROR_ANALYSIS_GROUPS = `${LOCAL_API_PATH}/errors/groups`;
 export const ERROR_ANALYSIS_ERROR_LIST = `${LOCAL_API_PATH}/errors/errorList`;

web-frontend/src/main/v3/packages/constants/src/locales/en.json

@@ -111,6 +111,12 @@
         "REMOVE_APPLICATION": "Remove application"
       }
     },
+    "AGENT_STATISTIC": {
+      "ZOOM_GUIDE": "You can zoom in/out the chart through the mouse.",
+      "LOAD_GUIDE": "It takes a long time to load the agent's statistical data.",
+      "LOADING": "Load",
+      "RELOAD": "Reload"
+    },
     "USERS": {
       "USER_ADD_TITLE": "Add user",
       "USER_INFO_TITLE": "User info",

web-frontend/src/main/v3/packages/constants/src/locales/ko.json

@@ -111,6 +111,12 @@
         "REMOVE_APPLICATION": "Application 삭제"
       }
     },
+    "AGENT_STATISTIC": {
+      "ZOOM_GUIDE": "마우스를 통해 차트를 Zoom In/Out 할 수 있습니다.",
+      "LOAD_GUIDE": "Agent의 통계 정보를 가져오는 작업은 많은 시간을 소요합니다.",
+      "LOADING": "데이터 가져오기",
+      "RELOAD": "데이터 다시 가져오기"
+    },
     "USERS": {
       "USER_ADD_TITLE": "사용자 등록",
       "USER_INFO_TITLE": "사용자 정보",

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

@@ -11,6 +11,7 @@ export const APP_PATH = {
   CONFIG_USERS: '/config/users',
   CONFIG_WEBHOOK: '/config/webhook',
   CONFIG_AGENT_MANAGEMENT: '/config/agentManagement',
+  CONFIG_AGENT_STATISTIC: '/config/agentStatistic',
   CONFIG: '/config',
   ERROR_ANALYSIS: '/errorAnalysis',
   FILTERED_MAP: '/filteredMap',

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

@@ -4,6 +4,7 @@ export * from './useAdmin';
 export * from './useAlarmRuleMutation';
 export * from './useAlarmRuleQuery';
 export * from './useAgentsSearchApplication';
+export * from './useAgentsStatistics';
 export * from './useConfigUsers';
 export * from './useDeleteConfigGroupMember';
 export * from './useDeleteConfigUserGroup';

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

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { END_POINTS, SearchApplication } from '@pinpoint-fe/constants';
+import { queryFn } from './reactQueryHelper';
+
+export const useGetAgentsStatistics = (load: boolean) => {
+  const { data, isLoading, refetch } = useQuery<SearchApplication.Response>({
+    queryKey: [END_POINTS.AGENT_STATISTICS],
+    queryFn: queryFn(`${END_POINTS.AGENT_STATISTICS}`),
+    enabled: !!load,
+  });
+
+  return { data, isLoading, refetch };
+};

web-frontend/src/main/v3/packages/ui/src/components/Config/agentStatistic/AgentStatisticChart.tsx

@@ -0,0 +1,61 @@
+import { colors } from '../../../constant';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+} from '../../../components/ui';
+import { XAxis, YAxis, LabelList, Bar, BarChart } from 'recharts';
+
+export type ChartData = {
+  vmVersion?: string;
+  agentVersion?: string;
+  value: number;
+};
+
+export function AgentStatisticChart({
+  type,
+  chartData,
+}: {
+  type: 'vmVersion' | 'agentVersion';
+  chartData?: ChartData[];
+}) {
+  const chartConfig = {
+    value: {
+      label: type === 'vmVersion' ? 'JVM' : 'Agent',
+      color: type === 'vmVersion' ? colors.blue[600] : colors.orange[500],
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <ChartContainer config={chartConfig} className="w-full h-full">
+      <BarChart
+        accessibilityLayer
+        data={chartData}
+        layout="vertical"
+        margin={{
+          right: 50,
+          left: 15,
+        }}
+      >
+        <XAxis type="number" dataKey={'value'} />
+        <YAxis
+          dataKey={type}
+          type="category"
+          width={type === 'vmVersion' ? 60 : 120}
+          tickLine={false}
+        />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="value" fill="var(--color-value)">
+          <LabelList
+            dataKey="value"
+            position="right"
+            offset={8}
+            className="fill-foreground"
+            fontSize={12}
+          />
+        </Bar>
+      </BarChart>
+    </ChartContainer>
+  );
+}

web-frontend/src/main/v3/packages/ui/src/components/Config/agentStatistic/AgentStatisticChartContainer.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { AgentStatisticChart, ChartData } from './AgentStatisticChart';
+import { SearchApplication } from '@pinpoint-fe/constants';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const useVersionChartData = (data: any, versionKey: 'vmVersion' | 'agentVersion') =>
+  React.useMemo(() => {
+    const instances = data?.flatMap((group: SearchApplication.Application) => group.instancesList);
+
+    const versionCounts = instances?.reduce((acc: any, instance: SearchApplication.Instance) => {
+      const version = instance[versionKey];
+      if (version) {
+        acc[version] = (acc[version] || 0) + 1;
+      }
+      return acc;
+    }, {} as any);
+
+    return Object.entries(versionCounts || {}).map(([version, value]) => ({
+      [versionKey]: version,
+      value,
+    }));
+  }, [data, versionKey]);
+
+export function AgentStatisticContainer({ data }: { data?: SearchApplication.Application[] }) {
+  const vmVersionChartData = useVersionChartData(data, 'vmVersion');
+  const agentVersionChartData = useVersionChartData(data, 'agentVersion');
+
+  return (
+    <div className="flex min-w-full gap-5 max-h-[40%]">
+      <AgentStatisticChart type="vmVersion" chartData={vmVersionChartData as ChartData[]} />
+      <AgentStatisticChart type="agentVersion" chartData={agentVersionChartData as ChartData[]} />
+    </div>
+  );
+}

web-frontend/src/main/v3/packages/ui/src/components/Config/agentStatistic/AgentStatisticFetcher.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { HiOutlineRefresh } from 'react-icons/hi';
+import { useTranslation } from 'react-i18next';
+import { Configuration } from '@pinpoint-fe/constants';
+import { Button, Separator } from '../../../components';
+import { useGetAgentsStatistics } from '@pinpoint-fe/hooks';
+import { CgSpinner } from 'react-icons/cg';
+import { cn } from '../../../lib';
+import { AgentStatisticContainer } from './AgentStatisticChartContainer';
+import { AgentStatisticTable } from './AgentStatisticTable';
+import { format } from 'date-fns';
+
+export interface AgentStatisticFetcherProps {
+  configuration?: Configuration;
+}
+
+export const AgentStatisticFetcher = ({ configuration }: AgentStatisticFetcherProps) => {
+  void configuration; // Not use configuration
+
+  const { t } = useTranslation();
+  const [load, setLoad] = React.useState(false);
+  const [loadDate, setLoadDate] = React.useState<Date>();
+
+  const { data, isLoading, refetch } = useGetAgentsStatistics(load);
+
+  function handleClickLoad() {
+    setLoad(true);
+  }
+
+  function handleReload() {
+    refetch();
+  }
+
+  React.useEffect(() => {
+    setLoadDate(new Date());
+  }, [data]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex gap-10">
+        <h3 className="text-lg font-semibold">Agent statistic</h3>
+      </div>
+      <Separator className="my-6" />
+      <div className="bg-red-300"></div>
+      <div className="h-[-webkit-fill-available] relative overflow-hidden">
+        {isLoading && (
+          <div className="absolute flex items-center justify-center w-full h-full">
+            <CgSpinner className="absolute opacity-100 animate-spin" size={100} />
+            <div className="w-full h-full bg-gray-400 opacity-20"></div>
+          </div>
+        )}
+        {data ? (
+          <div className="flex flex-col h-full gap-5">
+            <div className="flex flex-row items-center justify-end gap-1">
+              {loadDate && format(loadDate, 'yyyy.MM.dd HH:mm:ss')}
+              <Button onClick={handleReload} size="sm">
+                <HiOutlineRefresh size={18} />
+              </Button>
+            </div>
+            <AgentStatisticContainer data={data} />
+            <AgentStatisticTable data={data} />
+          </div>
+        ) : (
+          <div
+            className={cn('flex flex-col items-center justify-center h-full gap-3', {
+              'opacity-20': isLoading,
+            })}
+          >
+            {t('CONFIGURATION.AGENT_STATISTIC.LOAD_GUIDE')}
+            <Button className="w-max" onClick={handleClickLoad} disabled={isLoading}>
+              {t('CONFIGURATION.AGENT_STATISTIC.LOADING')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};