feat: add the table view for the traces explorer (#2964)

* feat: add dynamic table based on query

* feat: add the list view for the traces explorer

* feat: add the list view for the traces explorer

* feat: add the list view for the traces explorer

* feat: add the table view for the traces explorer

* feat: remove unnecessary part of code for the table view in the traces explorer

* fix: resolve comments

---------

Co-authored-by: Yevhen Shevchenko <y.shevchenko@seedium.io>
Co-authored-by: Nazarenko19 <danil.nazarenko2000@gmail.com>
Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -0,0 +1,53 @@
+import { Space } from 'antd';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { QueryTable } from 'container/QueryTable';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+function TableView(): JSX.Element {
+	const { stagedQuery, panelType } = useQueryBuilder();
+
+	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
+	const { data, isLoading } = useGetQueryRange(
+		{
+			query: stagedQuery || initialQueriesMap.traces,
+			graphType: panelType || PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: globalSelectedTime,
+			params: {
+				dataSource: 'traces',
+			},
+		},
+		{
+			queryKey: [
+				REACT_QUERY_KEY.GET_QUERY_RANGE,
+				globalSelectedTime,
+				maxTime,
+				minTime,
+				stagedQuery,
+			],
+			enabled: !!stagedQuery && panelType === PANEL_TYPES.TABLE,
+		},
+	);
+
+	return (
+		<Space.Compact block direction="vertical">
+			<QueryTable
+				query={stagedQuery || initialQueriesMap.traces}
+				queryTableData={data?.payload.data.newResult.data.result || []}
+				loading={isLoading}
+			/>
+		</Space.Compact>
+	);
+}
+
+export default memo(TableView);

frontend/src/pages/TracesExplorer/utils.tsx

@@ -3,6 +3,7 @@ import TabLabel from 'components/TabLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeriesView from 'container/TimeSeriesView';
 import ListView from 'container/TracesExplorer/ListView';
+import TableView from 'container/TracesExplorer/TableView';
 import TracesView from 'container/TracesExplorer/TracesView';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -42,4 +43,9 @@ export const getTabsItems = ({
 		key: PANEL_TYPES.TIME_SERIES,
 		children: <TimeSeriesView dataSource={DataSource.TRACES} />,
 	},
+	{
+		label: 'Table View',
+		key: PANEL_TYPES.TABLE,
+		children: <TableView />,
+	},
 ];

frontend/src/types/api/widgets/getQuery.ts

@@ -5,10 +5,7 @@ export interface PayloadProps {
 	result: QueryData[];
 }
 
-export type ListItem = {
+export type ListItem = { timestamp: string; data: Omit<ILog, 'timestamp'> };
-	timestamp: string;
-	data: Omit<ILog, 'timestamp'>;
-};
 
 export interface QueryData {
 	metric: {