diff --git a/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/errorAnalysisGroupedTableColumn.tsx b/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/errorAnalysisGroupedTableColumn.tsx index 79bcd339ee29..97b3431d805e 100644 --- a/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/errorAnalysisGroupedTableColumn.tsx +++ b/web-frontend/src/main/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 ; + return ; }, }, { 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 index af56897ab341..b957c0c955cc 100644 --- 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 ( - - - {tabList.map((tab) => ( - - {tab.display} - - ))} - - {tabList.map((tab) => ( - - - }> - - - - - ))} - + + }> + + + ); }; 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 index 0b2f4fba11b5..b5b533298bad 100644 --- 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 ; + }, + }, ]; 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 index 37a026a4ac90..99aa156d1881 100644 --- 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/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/ErrorGroupedTableVolumneChart.tsx b/web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx similarity index 65% rename from web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/ErrorGroupedTableVolumneChart.tsx rename to web-frontend/src/main/v3/packages/ui/src/components/common/MiniChart.tsx index 0ddf705f8ec3..2675a98c28de 100644 --- a/web-frontend/src/main/v3/packages/ui/src/components/ErrorAnalysis/table/ErrorGroupedTableVolumneChart.tsx +++ b/web-frontend/src/main/v3/packages/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 index 0fa64055fca3..bc084fd13784 100644 --- 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 index e936896dc7bb..a476ea2a52f0 100644 --- 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 index 10c6e879ffc0..99a73b71528f 100644 --- 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('total'); const handleChangeDateRagePicker = React.useCallback( (({ formattedDates: formattedDate }) => { @@ -72,11 +85,29 @@ export const UrlStatisticPage = ({ <> - - + setType(value as TYPE)} + > + + {TAB_LIST.map((tab) => ( + + {tab.display} + + ))} + + {TAB_LIST.map((tab) => ( + + + + ))} + + )}