feat: added time series tab in logs explorer (#2982)

frontend/src/container/LogsExplorerViews/index.tsx

@@ -5,6 +5,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import LogsExplorerList from 'container/LogsExplorerList';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
+import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useCallback, useEffect, useMemo } from 'react';
@@ -29,12 +30,15 @@ function LogsExplorerViews(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
-	const { data, isFetching } = useGetQueryRange(
+	const { data, isFetching, isError } = useGetQueryRange(
 		{
 			query: stagedQuery || initialQueriesMap.metrics,
 			graphType: panelType || PANEL_TYPES.LIST,
 			globalSelectedInterval: selectedTime,
 			selectedTime: 'GLOBAL_TIME',
+			params: {
+				dataSource: DataSource.LOGS,
+			},
 		},
 		{
 			queryKey: [REACT_QUERY_KEY.GET_QUERY_RANGE, selectedTime, stagedQuery],
@@ -71,14 +75,20 @@ function LogsExplorerViews(): JSX.Element {
 				disabled: isMultipleQueries || isGroupByExist,
 				children: <LogsExplorerList data={currentData} isLoading={isFetching} />,
 			},
-			{ label: 'TimeSeries', key: PANEL_TYPES.TIME_SERIES },
+			{
+				label: 'TimeSeries',
+				key: PANEL_TYPES.TIME_SERIES,
+				children: (
+					<TimeSeriesView isLoading={isFetching} data={data} isError={isError} />
+				),
+			},
 			{
 				label: 'Table',
 				key: PANEL_TYPES.TABLE,
 				children: <LogsExplorerTable data={currentData} isLoading={isFetching} />,
 			},
 		],
-		[isMultipleQueries, isGroupByExist, currentData, isFetching],
+		[isMultipleQueries, isGroupByExist, currentData, isFetching, data, isError],
 	);
 
 	const handleChangeView = useCallback(

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -0,0 +1,53 @@
+import Graph from 'components/Graph';
+import Spinner from 'components/Spinner';
+import getChartData from 'lib/getChartData';
+import { useMemo } from 'react';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { Container, ErrorText } from './styles';
+
+function TimeSeriesView({
+	data,
+	isLoading,
+	isError,
+}: TimeSeriesViewProps): JSX.Element {
+	const chartData = useMemo(
+		() =>
+			getChartData({
+				queryData: [
+					{
+						queryData: data?.payload?.data?.result || [],
+					},
+				],
+			}),
+		[data],
+	);
+
+	return (
+		<Container>
+			{isLoading && <Spinner height="50vh" size="small" tip="Loading..." />}
+			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
+			{!isLoading && !isError && (
+				<Graph
+					animate={false}
+					data={chartData}
+					name="tracesExplorerGraph"
+					type="line"
+				/>
+			)}
+		</Container>
+	);
+}
+
+interface TimeSeriesViewProps {
+	data?: SuccessResponse<MetricRangePayloadProps>;
+	isLoading: boolean;
+	isError: boolean;
+}
+
+TimeSeriesView.defaultProps = {
+	data: undefined,
+};
+
+export default TimeSeriesView;

frontend/src/container/TimeSeriesView/index.tsx

@@ -1,18 +1,17 @@
-import Graph from 'components/Graph';
-import Spinner from 'components/Spinner';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import getChartData from 'lib/getChartData';
-import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
+import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { Container, ErrorText } from './styles';
+import TimeSeriesView from './TimeSeriesView';
 
-function TimeSeriesView(): JSX.Element {
+function TimeSeriesViewContainer({
+	dataSource = DataSource.TRACES,
+}: TimeSeriesViewProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
@@ -22,12 +21,12 @@ function TimeSeriesView(): JSX.Element {
 
 	const { data, isLoading, isError } = useGetQueryRange(
 		{
-			query: stagedQuery || initialQueriesMap.traces,
+			query: stagedQuery || initialQueriesMap[dataSource],
 			graphType: 'graph',
 			selectedTime: 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,
 			params: {
-				dataSource: 'traces',
+				dataSource,
 			},
 		},
 		{
@@ -42,32 +41,15 @@ function TimeSeriesView(): JSX.Element {
 		},
 	);
 
-	const chartData = useMemo(
+	return <TimeSeriesView isError={isError} isLoading={isLoading} data={data} />;
-		() =>
-			getChartData({
-				queryData: [
-					{
-						queryData: data?.payload?.data?.result || [],
-					},
-				],
-			}),
-		[data],
-	);
-
-	return (
-		<Container>
-			{isLoading && <Spinner height="50vh" size="small" tip="Loading..." />}
-			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
-			{!isLoading && !isError && (
-				<Graph
-					animate={false}
-					data={chartData}
-					name="tracesExplorerGraph"
-					type="line"
-				/>
-			)}
-		</Container>
-	);
 }
 
-export default TimeSeriesView;
+interface TimeSeriesViewProps {
+	dataSource?: DataSource;
+}
+
+TimeSeriesViewContainer.defaultProps = {
+	dataSource: DataSource.TRACES,
+};
+
+export default TimeSeriesViewContainer;

frontend/src/pages/TracesExplorer/utils.tsx

@@ -1,12 +1,13 @@
 import { TabsProps } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import TimeSeriesView from 'container/TracesExplorer/TimeSeriesView';
+import TimeSeriesView from 'container/TimeSeriesView';
+import { DataSource } from 'types/common/queryBuilder';
 
 export const getTabsItems = (): TabsProps['items'] => [
 	{
 		label: 'Time Series',
 		key: PANEL_TYPES.TIME_SERIES,
-		children: <TimeSeriesView />,
+		children: <TimeSeriesView dataSource={DataSource.TRACES} />,
 	},
 	{
 		label: 'Traces',