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

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<RowData>) =>
-			modifyColumns(columns, options?.selectColumns || []),
-		[options?.selectColumns],
+	const transformedQueryTableData = useMemo(
+		() => transformDataWithDate(queryTableData) || [],
+		[queryTableData],
 	);
 
 	const handleRow = useCallback(
@@ -117,13 +114,14 @@ function ListView(): JSX.Element {
 			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
 
 			{!isError && (
-				<QueryTable
-					query={stagedQuery || initialQueriesMap.traces}
-					queryTableData={transformedQueryTableData}
-					modifyColumns={handleModifyColumns}
-					loading={isFetching}
+				<ResizeTable
+					tableLayout="fixed"
 					pagination={false}
+					scroll={{ x: true }}
+					loading={isFetching}
 					style={tableStyles}
+					dataSource={transformedQueryTableData}
+					columns={columns}
 					onRow={handleRow}
 				/>
 			)}

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<RowData>,
-	selectedColumns: BaseAutocompleteData[],
-): ColumnsType<RowData> => {
-	const initialColumns = selectedColumns.reduce(
-		(acc, { key: selectedColumnKey }) => {
-			const column = columns.find(({ key }) => selectedColumnKey === key);
-
-			if (column) {
-				return [...acc, column];
-			}
-
-			return acc;
-		},
-		[] as ColumnsType<RowData>,
-	);
-
-	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 <Typography>{value}</Typography>;
-			}
-
-			return <Tag color="magenta">{value}</Tag>;
-		};
-
-		if (key === 'durationNano') {
-			return {
-				...column,
-				render: (duration: string): JSX.Element => (
-					<Typography>{getMs(duration)}ms</Typography>
-				),
-			};
-		}
-
-		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 <DateText>{day.format('YYYY/MM/DD HH:mm:ss')}</DateText>;
-				},
-			};
-		}
-
-		return column;
-	});
-};
+export const transformDataWithDate = (
+	data: QueryDataV3[],
+): Omit<ILog, 'timestamp'>[] =>
+	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<RowData> => {
+	const initialColumns: ColumnsType<RowData> = [
+		{
+			title: 'date',
+			dataIndex: 'date',
+			key: 'date',
+			width: 145,
+			render: (date: string): JSX.Element => {
+				const day = dayjs(date);
+				return <DateText>{day.format('YYYY/MM/DD HH:mm:ss')}</DateText>;
+			},
+		},
+	];
+
+	const columns: ColumnsType<RowData> =
+		selectedColumns.map(({ dataType, key, type }) => ({
+			title: key,
+			dataIndex: key,
+			key: `${key}-${dataType}-${type}`,
+			render: (value): JSX.Element => {
+				if (value === '') {
+					return <Typography>N/A</Typography>;
+				}
+
+				if (key === 'httpMethod' || key === 'responseStatusCode') {
+					return <Tag color="magenta">{value}</Tag>;
+				}
+
+				if (key === 'durationNano') {
+					return <Typography>{getMs(value)}ms</Typography>;
+				}
+
+				return <Typography>{value}</Typography>;
+			},
+		})) || [];
+
+	return [...initialColumns, ...columns];
+};

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<ListItem['data']> = [
 	{

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 {
 		<Container>
 			<ActionsContainer>
 				<Typography>
-					Showing up to X of the slowest traces form the selected time range
+					This tab only shows Root Spans. More details
+					<Typography.Link href={TRACES_DETAILS_LINK} target="_blank">
+						{' '}
+						here
+					</Typography.Link>
 				</Typography>
 				<TraceExplorerControls
 					isLoading={isLoading}