Merge pull request #1170 from palash-signoz/full-view

feat: full view is updated to use query

frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx

@@ -1,7 +1,5 @@
 import { Button, Typography } from 'antd';
 import getQueryResult from 'api/widgets/getQuery';
-import { AxiosError } from 'axios';
-import { ChartData } from 'chart.js';
 import { GraphOnClickHandler } from 'components/Graph';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
@@ -17,7 +15,8 @@ import GetMaxMinTime from 'lib/getMaxMinTime';
 import GetMinMax from 'lib/getMinMax';
 import getStartAndEndTime from 'lib/getStartAndEndTime';
 import getStep from 'lib/getStep';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -37,13 +36,6 @@ function FullView({
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const [state, setState] = useState<FullViewState>({
-		error: false,
-		errorMessage: '',
-		loading: true,
-		payload: undefined,
-	});
-
 	const getSelectedTime = useCallback(
 		() =>
 			timeItems.find((e) => e.enum === (widget?.timePreferance || 'GLOBAL_TIME')),
@@ -55,107 +47,82 @@ function FullView({
 		enum: widget?.timePreferance || 'GLOBAL_TIME',
 	});
 
-	const onFetchDataHandler = useCallback(async () => {
-		try {
-			const maxMinTime = GetMaxMinTime({
-				graphType: widget.panelTypes,
-				maxTime,
-				minTime,
-			});
+	const maxMinTime = GetMaxMinTime({
+		graphType: widget.panelTypes,
+		maxTime,
+		minTime,
+	});
 
-			const getMinMax = (
-				time: timePreferenceType,
-			): { min: string | number; max: string | number } => {
-				if (time === 'GLOBAL_TIME') {
-					const minMax = GetMinMax(globalSelectedTime);
-					return {
-						min: convertToNanoSecondsToSecond(minMax.minTime / 1000),
-						max: convertToNanoSecondsToSecond(minMax.maxTime / 1000),
-					};
-				}
-
-				const minMax = getStartAndEndTime({
-					type: selectedTime.enum,
-					maxTime: maxMinTime.maxTime,
-					minTime: maxMinTime.minTime,
-				});
-				return { min: parseInt(minMax.start, 10), max: parseInt(minMax.end, 10) };
+	const getMinMax = (
+		time: timePreferenceType,
+	): { min: string | number; max: string | number } => {
+		if (time === 'GLOBAL_TIME') {
+			const minMax = GetMinMax(globalSelectedTime);
+			return {
+				min: convertToNanoSecondsToSecond(minMax.minTime / 1000),
+				max: convertToNanoSecondsToSecond(minMax.maxTime / 1000),
 			};
-
-			const queryMinMax = getMinMax(selectedTime.enum);
-			const response = await Promise.all(
-				widget.query
-					.filter((e) => e.query.length !== 0)
-					.map(async (query) => {
-						const result = await getQueryResult({
-							end: queryMinMax.max.toString(),
-							query: query.query,
-							start: queryMinMax.min.toString(),
-							step: `${getStep({
-								start: queryMinMax.min,
-								end: queryMinMax.max,
-								inputFormat: 's',
-							})}`,
-						});
-						return {
-							query: query.query,
-							queryData: result,
-							legend: query.legend,
-						};
-					}),
-			);
-
-			const isError = response.find((e) => e.queryData.statusCode !== 200);
-
-			if (isError !== undefined) {
-				setState((state) => ({
-					...state,
-					error: true,
-					errorMessage: isError.queryData.error || 'Something went wrong',
-					loading: false,
-				}));
-			} else {
-				const chartDataSet = getChartData({
-					queryData: response.map((e) => ({
-						query: e.query,
-						legend: e.legend,
-						queryData: e.queryData.payload?.result || [],
-					})),
-				});
-
-				setState((state) => ({
-					...state,
-					loading: false,
-					payload: chartDataSet,
-				}));
-			}
-		} catch (error) {
-			setState((state) => ({
-				...state,
-				error: true,
-				errorMessage: (error as AxiosError).toString(),
-				loading: false,
-			}));
 		}
-	}, [widget, maxTime, minTime, selectedTime.enum, globalSelectedTime]);
 
-	useEffect(() => {
-		onFetchDataHandler();
-	}, [onFetchDataHandler]);
+		const minMax = getStartAndEndTime({
+			type: selectedTime.enum,
+			maxTime: maxMinTime.maxTime,
+			minTime: maxMinTime.minTime,
+		});
+		return { min: parseInt(minMax.start, 10), max: parseInt(minMax.end, 10) };
+	};
 
-	if (state.error && !state.loading) {
-		return (
-			<NotFoundContainer>
-				<Typography>{state.errorMessage}</Typography>
-			</NotFoundContainer>
-		);
+	const queryMinMax = getMinMax(selectedTime.enum);
+
+	const queryLength = widget.query.filter((e) => e.query.length !== 0);
+
+	const response = useQueries(
+		queryLength.map((query) => {
+			return {
+				// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+				queryFn: () => {
+					return getQueryResult({
+						end: queryMinMax.max.toString(),
+						query: query.query,
+						start: queryMinMax.min.toString(),
+						step: `${getStep({
+							start: queryMinMax.min,
+							end: queryMinMax.max,
+							inputFormat: 's',
+						})}`,
+					});
+				},
+				queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
+				retryOnMount: false,
+			};
+		}),
+	);
+
+	const isError =
+		response.find((e) => e?.data?.statusCode !== 200) !== undefined ||
+		response.some((e) => e.isError === true);
+
+	const isLoading = response.some((e) => e.isLoading === true);
+
+	const errorMessage = response.find((e) => e.data?.error !== null)?.data?.error;
+
+	const data = response.map((responseOfQuery) =>
+		responseOfQuery?.data?.payload?.result.map((e, index) => ({
+			query: queryLength[index]?.query,
+			queryData: e,
+			legend: queryLength[index]?.legend,
+		})),
+	);
+
+	if (isLoading) {
+		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
-	if (state.loading || state.payload === undefined) {
+	if (isError || data === undefined || data[0] === undefined) {
 		return (
-			<div>
-				<Spinner height="80vh" size="large" tip="Loading..." />
-			</div>
+			<NotFoundContainer>
+				<Typography>{errorMessage}</Typography>
+			</NotFoundContainer>
 		);
 	}
 
@@ -169,17 +136,27 @@ function FullView({
 							setSelectedTime,
 						}}
 					/>
-					<Button onClick={onFetchDataHandler} type="primary">
+					<Button
+						onClick={(): void => {
+							response.forEach((e) => e.refetch());
+						}}
+						type="primary"
+					>
 						Refresh
 					</Button>
 				</TimeContainer>
 			)}
 
-			{/* <GraphContainer> */}
 			<GridGraphComponent
 				{...{
 					GRAPH_TYPES: widget.panelTypes,
-					data: state.payload,
+					data: getChartData({
+						queryData: data.map((e) => ({
+							query: e?.map((e) => e.query).join(' ') || '',
+							queryData: e?.map((e) => e.queryData) || [],
+							legend: e?.map((e) => e.legend).join('') || '',
+						})),
+					}),
 					isStacked: widget.isStacked,
 					opacity: widget.opacity,
 					title: widget.title,
@@ -188,18 +165,10 @@ function FullView({
 					yAxisUnit,
 				}}
 			/>
-			{/* </GraphContainer> */}
 		</>
 	);
 }
 
-interface FullViewState {
-	loading: boolean;
-	error: boolean;
-	errorMessage: string;
-	payload: ChartData | undefined;
-}
-
 interface FullViewProps {
 	widget: Widgets;
 	fullViewOptions?: boolean;