From 1295e179b28618a242c54b45fec5ebffa017022d Mon Sep 17 00:00:00 2001 From: dnazarenkoo <134951516+dnazarenkoo@users.noreply.github.com> Date: Fri, 7 Jul 2023 13:29:15 +0300 Subject: [PATCH] fix: update text in the traces page, update table for the list view (#3066) * fix: update text in the traces page, update table for the list view * fix: update logic of link --- .../TracesExplorer/ListView/index.tsx | 30 ++--- .../TracesExplorer/ListView/utils.tsx | 124 +++++++----------- .../TracesExplorer/TracesView/configs.tsx | 1 + .../TracesExplorer/TracesView/index.tsx | 10 +- 4 files changed, 69 insertions(+), 96 deletions(-) diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx index e93b11b1f4..faaad6a3ff 100644 --- a/frontend/src/container/TracesExplorer/ListView/index.tsx +++ b/frontend/src/container/TracesExplorer/ListView/index.tsx @@ -1,8 +1,7 @@ -import { ColumnsType } from 'antd/es/table'; +import { ResizeTable } from 'components/ResizeTable'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import { useOptionsMenu } from 'container/OptionsMenu'; -import { QueryTable } from 'container/QueryTable'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { Pagination, URL_PAGINATION } from 'hooks/queryPagination'; @@ -18,7 +17,7 @@ import { GlobalReducer } from 'types/reducer/globalTime'; import TraceExplorerControls from '../Controls'; import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs'; import { Container, ErrorText, tableStyles } from './styles'; -import { getTraceLink, modifyColumns, transformDataWithDate } from './utils'; +import { getListColumns, getTraceLink, transformDataWithDate } from './utils'; function ListView(): JSX.Element { const { stagedQuery, panelType } = useQueryBuilder(); @@ -79,15 +78,13 @@ function ListView(): JSX.Element { queryTableDataResult, ]); - const transformedQueryTableData = useMemo( - () => transformDataWithDate(queryTableData), - [queryTableData], - ); + const columns = useMemo(() => getListColumns(options?.selectColumns || []), [ + options?.selectColumns, + ]); - const handleModifyColumns = useCallback( - (columns: ColumnsType) => - modifyColumns(columns, options?.selectColumns || []), - [options?.selectColumns], + const transformedQueryTableData = useMemo( + () => transformDataWithDate(queryTableData) || [], + [queryTableData], ); const handleRow = useCallback( @@ -117,13 +114,14 @@ function ListView(): JSX.Element { {isError && {data?.error || 'Something went wrong'}} {!isError && ( - )} diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx index 350ba98a6d..316938b307 100644 --- a/frontend/src/container/TracesExplorer/ListView/utils.tsx +++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx @@ -6,88 +6,17 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util'; import { formUrlParams } from 'container/TraceDetail/utils'; import dayjs from 'dayjs'; import { RowData } from 'lib/query/createTableColumnsFromQuery'; +import { ILog } from 'types/api/logs/log'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { QueryDataV3 } from 'types/api/widgets/getQuery'; import { DateText } from './styles'; -export const transformDataWithDate = (data: QueryDataV3[]): QueryDataV3[] => - data.map((query) => ({ - ...query, - list: - query?.list?.map((listItem) => ({ - ...listItem, - data: { - ...listItem?.data, - date: listItem?.timestamp, - }, - })) || null, - })); - -export const modifyColumns = ( - columns: ColumnsType, - selectedColumns: BaseAutocompleteData[], -): ColumnsType => { - const initialColumns = selectedColumns.reduce( - (acc, { key: selectedColumnKey }) => { - const column = columns.find(({ key }) => selectedColumnKey === key); - - if (column) { - return [...acc, column]; - } - - return acc; - }, - [] as ColumnsType, - ); - - const dateColumn = columns.find(({ key }) => key === 'date'); - - if (dateColumn) { - initialColumns.unshift(dateColumn); - } - - return initialColumns.map((column) => { - const key = column.key as string; - - const getHttpMethodOrStatus = (value: string): JSX.Element => { - if (value === 'N/A') { - return {value}; - } - - return {value}; - }; - - if (key === 'durationNano') { - return { - ...column, - render: (duration: string): JSX.Element => ( - {getMs(duration)}ms - ), - }; - } - - if (key === 'httpMethod' || key === 'responseStatusCode') { - return { - ...column, - render: getHttpMethodOrStatus, - }; - } - - if (key === 'date') { - return { - ...column, - width: 145, - render: (date: string): JSX.Element => { - const day = dayjs(date); - return {day.format('YYYY/MM/DD HH:mm:ss')}; - }, - }; - } - - return column; - }); -}; +export const transformDataWithDate = ( + data: QueryDataV3[], +): Omit[] => + data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) || + []; export const getTraceLink = (record: RowData): string => `${ROUTES.TRACE}/${record.traceID}${formUrlParams({ @@ -95,3 +24,44 @@ export const getTraceLink = (record: RowData): string => levelUp: 0, levelDown: 0, })}`; + +export const getListColumns = ( + selectedColumns: BaseAutocompleteData[], +): ColumnsType => { + const initialColumns: ColumnsType = [ + { + title: 'date', + dataIndex: 'date', + key: 'date', + width: 145, + render: (date: string): JSX.Element => { + const day = dayjs(date); + return {day.format('YYYY/MM/DD HH:mm:ss')}; + }, + }, + ]; + + const columns: ColumnsType = + selectedColumns.map(({ dataType, key, type }) => ({ + title: key, + dataIndex: key, + key: `${key}-${dataType}-${type}`, + render: (value): JSX.Element => { + if (value === '') { + return N/A; + } + + if (key === 'httpMethod' || key === 'responseStatusCode') { + return {value}; + } + + if (key === 'durationNano') { + return {getMs(value)}ms; + } + + return {value}; + }, + })) || []; + + return [...initialColumns, ...columns]; +}; diff --git a/frontend/src/container/TracesExplorer/TracesView/configs.tsx b/frontend/src/container/TracesExplorer/TracesView/configs.tsx index 3bbf528eee..171f827b00 100644 --- a/frontend/src/container/TracesExplorer/TracesView/configs.tsx +++ b/frontend/src/container/TracesExplorer/TracesView/configs.tsx @@ -7,6 +7,7 @@ import { generatePath } from 'react-router-dom'; import { ListItem } from 'types/api/widgets/getQuery'; export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS]; +export const TRACES_DETAILS_LINK = 'https://signoz.io/docs/userguide/traces/'; export const columns: ColumnsType = [ { diff --git a/frontend/src/container/TracesExplorer/TracesView/index.tsx b/frontend/src/container/TracesExplorer/TracesView/index.tsx index 0d1eae9d02..3643e3c5e0 100644 --- a/frontend/src/container/TracesExplorer/TracesView/index.tsx +++ b/frontend/src/container/TracesExplorer/TracesView/index.tsx @@ -1,4 +1,4 @@ -import Typography from 'antd/es/typography/Typography'; +import { Typography } from 'antd'; import { ResizeTable } from 'components/ResizeTable'; import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; @@ -12,7 +12,7 @@ import { AppState } from 'store/reducers'; import { GlobalReducer } from 'types/reducer/globalTime'; import TraceExplorerControls from '../Controls'; -import { columns, PER_PAGE_OPTIONS } from './configs'; +import { columns, PER_PAGE_OPTIONS, TRACES_DETAILS_LINK } from './configs'; import { ActionsContainer, Container } from './styles'; function TracesView(): JSX.Element { @@ -64,7 +64,11 @@ function TracesView(): JSX.Element { - Showing up to X of the slowest traces form the selected time range + This tab only shows Root Spans. More details + + {' '} + here +