[#11982] URL stat > mini chart

pinpoint-apm · Jan 22, 2025 · d8163d2 · d8163d2
1 parent 3e6430d
commit d8163d2
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 41 deletions.
diff --git a/...ain/v3/packages/ui/src/components/ErrorAnalysis/table/errorAnalysisGroupedTableColumn.tsx b/...ain/v3/packages/ui/src/components/ErrorAnalysis/table/errorAnalysisGroupedTableColumn.tsx
@@ -3,8 +3,7 @@ import { RxCross2 } from 'react-icons/rx';
 import { Badge } from '../../ui';
 import { ErrorAnalysisGroupedErrorList } from '@pinpoint-fe/ui/constants';
 import { addCommas, format } from '@pinpoint-fe/ui/utils';
-import { ErrorGroupedTableVolumneChart } from './ErrorGroupedTableVolumneChart';
-// import { cn } from '../../../lib';
+import { MiniChart } from '../../common/MiniChart';
 
 interface ErrorGroupedTableColumnProps {
   groupBy?: string[];
@@ -89,7 +88,7 @@ export const errorGroupedTableColumns = ({
     header: 'Volume',
     cell: (props) => {
       const chart = props.getValue() as ErrorAnalysisGroupedErrorList.ErrorData['chart'];
-      return <ErrorGroupedTableVolumneChart chart={chart} />;
+      return <MiniChart chart={chart} />;
     },
   },
   {

diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/charts/UrlStatChart.tsx
@@ -2,35 +2,15 @@ import React from 'react';
 import { ErrorBoundary } from '../../Error/ErrorBoundary';
 import { UrlStatChartFetcher, UrlStatChartFetcherProps } from './UrlStatChartFetcher';
 import { ChartSkeleton } from '../../Chart';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui';
 
 export interface UrlStatChartProps extends UrlStatChartFetcherProps {}
 
 export const UrlStatChart = ({ ...props }: UrlStatChartProps) => {
-  const tabList = [
-    { id: 'total', display: 'Total Count' },
-    { id: 'failure', display: 'Failure Count' },
-    { id: 'apdex', display: 'Apdex' },
-    { id: 'latency', display: 'Latency' },
-  ];
   return (
-    <Tabs defaultValue="total" className="p-3 bg-white border rounded">
-      <TabsList>
-        {tabList.map((tab) => (
-          <TabsTrigger key={tab.id} value={tab.id}>
-            {tab.display}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-      {tabList.map((tab) => (
-        <TabsContent key={tab.id} value={tab.id} className="h-72">
-          <ErrorBoundary>
-            <React.Suspense fallback={<ChartSkeleton />}>
-              <UrlStatChartFetcher {...props} type={tab.id} />
-            </React.Suspense>
-          </ErrorBoundary>
-        </TabsContent>
-      ))}
-    </Tabs>
+    <ErrorBoundary>
+      <React.Suspense fallback={<ChartSkeleton />}>
+        <UrlStatChartFetcher {...props} />
+      </React.Suspense>
+    </ErrorBoundary>
   );
 };
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryColumns.tsx
@@ -4,6 +4,7 @@ import { UrlStatSummary } from '@pinpoint-fe/ui/constants';
 import { Button } from '../../ui';
 import { addCommas, numberInDecimal, numberInInteger } from '@pinpoint-fe/ui/utils';
 import { cn } from '../../../lib';
+import { MiniChart } from '../../common/MiniChart';
 
 interface SummaryColumnProps {
   orderBy: string;
@@ -147,4 +148,16 @@ export const summaryColumns = ({
       cellClassName: 'px-4 text-right',
     },
   },
+  {
+    accessorKey: 'chart',
+    header: 'Volume',
+    meta: {
+      headerClassName: 'w-40 text-sm font-medium text-center',
+      cellClassName: 'text-[-webkit-right]',
+    },
+    cell: (props) => {
+      const chart = props.getValue() as UrlStatSummary.SummaryData['chart'];
+      return <MiniChart chart={chart} />;
+    },
+  },
 ];
diff --git a/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryFetcher.tsx b/web-frontend/src/main/v3/packages/ui/src/components/URL/summary/UrlSummaryFetcher.tsx
@@ -5,12 +5,14 @@ import { useGetUrlStatSummaryData } from '@pinpoint-fe/ui/hooks';
 import { summaryColumns } from './UrlSummaryColumns';
 import { DataTable, DataTableCountOfRows } from '../../DataTable';
 import { cn } from '../../../lib';
+import { UrlStatSummary } from '@pinpoint-fe/ui/constants';
 
 export interface UrlSummaryFetcherProps {
+  type?: UrlStatSummary.Parameters['type'];
   className?: string;
 }
 
-export const UrlSummaryFetcher = ({ className }: UrlSummaryFetcherProps) => {
+export const UrlSummaryFetcher = ({ className, type }: UrlSummaryFetcherProps) => {
   const [urlSelectedSummaryData, setUrlSelectedSummaryData] = useAtom(urlSelectedSummaryDataAtom);
   const [count, setCount] = React.useState(50);
   const [orderBy, setOrderBy] = React.useState('totalCount');
@@ -19,6 +21,7 @@ export const UrlSummaryFetcher = ({ className }: UrlSummaryFetcherProps) => {
     count,
     isDesc,
     orderBy,
+    type,
   });
   const columns = summaryColumns({
     orderBy,

diff --git a/...s/table/ErrorGroupedTableVolumneChart.tsx → ...es/ui/src/components/common/MiniChart.tsx b/...s/table/ErrorGroupedTableVolumneChart.tsx → ...es/ui/src/components/common/MiniChart.tsx
@@ -1,12 +1,12 @@
-import { ErrorAnalysisGroupedErrorList } from '@pinpoint-fe/ui/constants';
+import { Chart } from '@pinpoint-fe/ui/constants';
 import { ComposedChart, ReferenceLine } from 'recharts';
-import { useRechart } from '../../ReChart/useRechart';
+import { useRechart } from '../ReChart/useRechart';
 
-export interface ErrorGroupedTableVolumneChart {
-  chart: ErrorAnalysisGroupedErrorList.ErrorData['chart'];
+export interface MiniChart {
+  chart: Chart;
 }
 
-export const ErrorGroupedTableVolumneChart = ({ chart }: ErrorGroupedTableVolumneChart) => {
+export const MiniChart = ({ chart }: MiniChart) => {
   const { data, maxValue, renderChartChildComponents } = useRechart(chart);
 
   return (
@@ -17,7 +17,7 @@ export const ErrorGroupedTableVolumneChart = ({ chart }: ErrorGroupedTableVolumn
       margin={{
         top: 6,
         right: 30,
-        bottom: 2,
+        bottom: 6,
         left: 2,
       }}
     >

diff --git a/web-frontend/src/main/v3/packages/ui/src/constants/types/UrlStatSummary.ts b/web-frontend/src/main/v3/packages/ui/src/constants/types/UrlStatSummary.ts
@@ -1,3 +1,4 @@
+import { Chart } from './common/Chart';
 export namespace UrlStatSummary {
   export interface Parameters {
     applicationName: string;
@@ -7,6 +8,7 @@ export namespace UrlStatSummary {
     isDesc: boolean;
     count: number;
     agentId?: string;
+    type?: 'total' | 'failure' | 'apdex' | 'latency';
   }
 
   export type Response = SummaryData[];
@@ -17,5 +19,7 @@ export namespace UrlStatSummary {
     apdex: number;
     avgTimeMs: number;
     maxTimeMs: number;
+    version: string;
+    chart: Chart;
   }
 }
diff --git a/web-frontend/src/main/v3/packages/ui/src/hooks/api/useGetUrlStatSummaryData.ts b/web-frontend/src/main/v3/packages/ui/src/hooks/api/useGetUrlStatSummaryData.ts
@@ -15,10 +15,12 @@ export const useGetUrlStatSummaryData = ({
   orderBy,
   isDesc,
   count,
+  type,
 }: {
   orderBy?: string;
   isDesc?: boolean;
   count?: number;
+  type?: UrlStatSummary.Parameters['type'];
 }) => {
   const { application, dateRange, agentId } = useUrlStatSearchParameters();
   const from = dateRange.from.getTime();
@@ -31,7 +33,7 @@ export const useGetUrlStatSummaryData = ({
     agentId,
     isDesc: isDesc ?? true,
     count: count || 50,
-    // orderBy: orderBy || 'totalCount',
+    type,
     orderby: orderBy || 'totalCount', // * url 통계 쪽 api에선 파라미터를 orderby로 쓰고있음
   };
   const queryString = getQueryString(queryParams);

diff --git a/web-frontend/src/main/v3/packages/ui/src/pages/UrlStatistic.tsx b/web-frontend/src/main/v3/packages/ui/src/pages/UrlStatistic.tsx
@@ -15,6 +15,18 @@ import { convertParamsToQueryString, getUrlStatPath } from '@pinpoint-fe/ui/util
 import { useUrlStatSearchParameters } from '@pinpoint-fe/ui/hooks';
 import { useTranslation } from 'react-i18next';
 import { PiChartBarDuotone } from 'react-icons/pi';
+// import { ErrorBoundary } from '../../Error/ErrorBoundary';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@pinpoint-fe/ui/components';
+import { UrlStatSummary } from '../constants';
+
+const TAB_LIST = [
+  { id: 'total', display: 'Total Count' },
+  { id: 'failure', display: 'Failure Count' },
+  { id: 'apdex', display: 'Apdex' },
+  { id: 'latency', display: 'Latency' },
+];
+
+type TYPE = UrlStatSummary.Parameters['type'];
 
 export interface UrlStatisticPageProps {
   ApplicationList?: (props: ApplicationCombinedListProps) => JSX.Element;
@@ -26,6 +38,7 @@ export const UrlStatisticPage = ({
   const navigate = useNavigate();
   const { searchParameters, application, agentId } = useUrlStatSearchParameters();
   const { t } = useTranslation();
+  const [type, setType] = React.useState<TYPE>('total');
 
   const handleChangeDateRagePicker = React.useCallback(
     (({ formattedDates: formattedDate }) => {
@@ -72,11 +85,29 @@ export const UrlStatisticPage = ({
         <LayoutWithContentSidebar>
           <UrlSidebar />
           <>
-            <UrlStatChart
-              emptyMessage={t('COMMON.NO_DATA')}
-              guideMessage={t('URL_STAT.SELECT_URL_INFO')}
-            />
-            <UrlSummary />
+            <Tabs
+              defaultValue="total"
+              className="p-3 bg-white border rounded"
+              onValueChange={(value) => setType(value as TYPE)}
+            >
+              <TabsList>
+                {TAB_LIST.map((tab) => (
+                  <TabsTrigger key={tab.id} value={tab.id}>
+                    {tab.display}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              {TAB_LIST.map((tab) => (
+                <TabsContent key={tab.id} value={tab.id} className="h-72">
+                  <UrlStatChart
+                    type={tab.id}
+                    emptyMessage={t('COMMON.NO_DATA')}
+                    guideMessage={t('URL_STAT.SELECT_URL_INFO')}
+                  />
+                </TabsContent>
+              ))}
+            </Tabs>
+            <UrlSummary type={type} />
           </>
         </LayoutWithContentSidebar>
       )}