From 07833b98592c37790e40700402dbf8ac3438e7b9 Mon Sep 17 00:00:00 2001
From: dnazarenkoo <134951516+dnazarenkoo@users.noreply.github.com>
Date: Tue, 18 Jul 2023 13:17:32 +0300
Subject: [PATCH] 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>
---
 .../TracesExplorer/TableView/index.tsx        | 53 +++++++++++++++++++
 frontend/src/pages/TracesExplorer/utils.tsx   |  6 +++
 frontend/src/types/api/widgets/getQuery.ts    |  5 +-
 3 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/container/TracesExplorer/TableView/index.tsx

diff --git a/frontend/src/container/TracesExplorer/TableView/index.tsx b/frontend/src/container/TracesExplorer/TableView/index.tsx
new file mode 100644
index 0000000000..11f27f6201
--- /dev/null
+++ b/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);
diff --git a/frontend/src/pages/TracesExplorer/utils.tsx b/frontend/src/pages/TracesExplorer/utils.tsx
index c2aa7b58ce..dc3f1197b3 100644
--- a/frontend/src/pages/TracesExplorer/utils.tsx
+++ b/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 />,
+	},
 ];
diff --git a/frontend/src/types/api/widgets/getQuery.ts b/frontend/src/types/api/widgets/getQuery.ts
index f60eebc0bb..0b36af1541 100644
--- a/frontend/src/types/api/widgets/getQuery.ts
+++ b/frontend/src/types/api/widgets/getQuery.ts
@@ -5,10 +5,7 @@ export interface PayloadProps {
 	result: QueryData[];
 }
 
-export type ListItem = {
-	timestamp: string;
-	data: Omit<ILog, 'timestamp'>;
-};
+export type ListItem = { timestamp: string; data: Omit<ILog, 'timestamp'> };
 
 export interface QueryData {
 	metric: {