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,8 +47,6 @@ function FullView({
 		enum: widget?.timePreferance || 'GLOBAL_TIME',
 	});
 
-	const onFetchDataHandler = useCallback(async () => {
-		try {
 	const maxMinTime = GetMaxMinTime({
 		graphType: widget.panelTypes,
 		maxTime,
@@ -83,11 +73,15 @@ function FullView({
 	};
 
 	const queryMinMax = getMinMax(selectedTime.enum);
-			const response = await Promise.all(
+
-				widget.query
+	const queryLength = widget.query.filter((e) => e.query.length !== 0);
-					.filter((e) => e.query.length !== 0)
+
-					.map(async (query) => {
+	const response = useQueries(
-						const result = await getQueryResult({
+		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(),
@@ -97,68 +91,41 @@ function FullView({
 							inputFormat: 's',
 						})}`,
 					});
-						return {
+				},
-							query: query.query,
+				queryHash: `${query.query}-${query.legend}-${selectedTime.enum}`,
-							queryData: result,
+				retryOnMount: false,
-							legend: query.legend,
 			};
 		}),
 	);
 
-			const isError = response.find((e) => e.queryData.statusCode !== 200);
+	const isError =
+		response.find((e) => e?.data?.statusCode !== 200) !== undefined ||
+		response.some((e) => e.isError === true);
 
-			if (isError !== undefined) {
+	const isLoading = response.some((e) => e.isLoading === true);
-				setState((state) => ({
+
-					...state,
+	const errorMessage = response.find((e) => e.data?.error !== null)?.data?.error;
-					error: true,
+
-					errorMessage: isError.queryData.error || 'Something went wrong',
+	const data = response.map((responseOfQuery) =>
-					loading: false,
+		responseOfQuery?.data?.payload?.result.map((e, index) => ({
-				}));
+			query: queryLength[index]?.query,
-			} else {
+			queryData: e,
-				const chartDataSet = getChartData({
+			legend: queryLength[index]?.legend,
-					queryData: response.map((e) => ({
-						query: e.query,
-						legend: e.legend,
-						queryData: e.queryData.payload?.result || [],
 		})),
-				});
+	);
 
-				setState((state) => ({
+	if (isLoading) {
-					...state,
+		return <Spinner height="100%" size="large" tip="Loading..." />;
-					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(() => {
+	if (isError || data === undefined || data[0] === undefined) {
-		onFetchDataHandler();
-	}, [onFetchDataHandler]);
-
-	if (state.error && !state.loading) {
 		return (
 			<NotFoundContainer>
-				<Typography>{state.errorMessage}</Typography>
+				<Typography>{errorMessage}</Typography>
 			</NotFoundContainer>
 		);
 	}
 
-	if (state.loading || state.payload === undefined) {
-		return (
-			<div>
-				<Spinner height="80vh" size="large" tip="Loading..." />
-			</div>
-		);
-	}
-
 	return (
 		<>
 			{fullViewOptions && (
@@ -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;