From a405307c968fbf17c90c32fe130ec0d9fb7409c9 Mon Sep 17 00:00:00 2001 From: Chintan Sudani <46838508+csudani7@users.noreply.github.com> Date: Mon, 23 Jan 2023 20:21:24 +0530 Subject: [PATCH] fix: Redundant call on resize or rearrange layout on dashboard (#2099) * fix: Removed Strict mode to stop render twice * fix: Redundant call on resize or rearrange layout on dashboard * fix: Resolved suggested changes * fix: Resolved suggested changes * chore: some of the refactoring is updated Co-authored-by: Palash Gupta --- .../container/GridGraphLayout/Graph/index.tsx | 193 +++++------------- 1 file changed, 53 insertions(+), 140 deletions(-) diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx index 84942ef05a..1a45b8174d 100644 --- a/frontend/src/container/GridGraphLayout/Graph/index.tsx +++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx @@ -1,13 +1,12 @@ import { Typography } from 'antd'; -import { AxiosError } from 'axios'; -import { ChartData } from 'chart.js'; import Spinner from 'components/Spinner'; import GridGraphComponent from 'container/GridGraphComponent'; import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables'; import getChartData from 'lib/getChartData'; import isEmpty from 'lodash-es/isEmpty'; -import React, { memo, useCallback, useEffect, useState } from 'react'; +import React, { memo, useCallback, useMemo, useState } from 'react'; import { Layout } from 'react-grid-layout'; +import { useQuery } from 'react-query'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -19,7 +18,9 @@ import { GetMetricQueryRange } from 'store/actions/dashboard/getQueryResults'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import { GlobalTime } from 'types/actions/globalTime'; +import { ErrorResponse, SuccessResponse } from 'types/api'; import { Widgets } from 'types/api/dashboard/getAll'; +import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { GlobalReducer } from 'types/reducer/globalTime'; import { LayoutProps } from '..'; @@ -37,12 +38,6 @@ function GridCardGraph({ setLayout, onDragSelect, }: GridCardGraphProps): JSX.Element { - const [state, setState] = useState({ - loading: true, - errorMessage: '', - error: false, - payload: undefined, - }); const [hovered, setHovered] = useState(false); const [modal, setModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false); @@ -55,112 +50,40 @@ function GridCardGraph({ GlobalReducer >((state) => state.globalTime); - // const getMaxMinTime = GetMaxMinTime({ - // graphType: widget?.panelTypes, - // maxTime, - // minTime, - // }); + const response = useQuery< + SuccessResponse | ErrorResponse + >( + [ + `GetMetricsQueryRange-${widget.timePreferance}-${globalSelectedInterval}-${widget.id}`, + { widget, maxTime, minTime, globalSelectedInterval }, + ], + () => + GetMetricQueryRange({ + selectedTime: widget.timePreferance, + graphType: widget.panelTypes, + query: widget.query, + globalSelectedInterval, + variables: getDashboardVariables(), + }), + { + keepPreviousData: true, + refetchOnMount: false, + }, + ); - // const { start, end } = GetStartAndEndTime({ - // type: widget?.timePreferance, - // maxTime: getMaxMinTime.maxTime, - // minTime: getMaxMinTime.minTime, - // }); - - // 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, - // query: query?.query, - // start, - // step: '60', - // }); - // }, - // queryHash: `${query?.query}-${query?.legend}-${start}-${end}`, - // 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, - // })), - // ); - - useEffect(() => { - (async (): Promise => { - try { - setState((state) => ({ - ...state, - error: false, - errorMessage: '', - loading: true, - })); - const response = await GetMetricQueryRange({ - selectedTime: widget.timePreferance, - graphType: widget.panelTypes, - query: widget.query, - globalSelectedInterval, - variables: getDashboardVariables(), - }); - - const isError = response.error; - - if (isError != null) { - setState((state) => ({ - ...state, - error: true, - errorMessage: isError || 'Something went wrong', - loading: false, - })); - } else { - const chartDataSet = getChartData({ - queryData: [ - { - queryData: response.payload?.data?.result - ? response.payload?.data?.result - : [], - }, - ], - }); - - setState((state) => ({ - ...state, - loading: false, - payload: chartDataSet, - })); - } - } catch (error) { - setState((state) => ({ - ...state, - error: true, - errorMessage: (error as AxiosError).toString(), - loading: false, - })); - } finally { - setState((state) => ({ - ...state, - loading: false, - })); - } - })(); - }, [widget, maxTime, minTime, globalSelectedInterval]); + const chartData = useMemo( + () => + getChartData({ + queryData: [ + { + queryData: response?.data?.payload?.data?.result + ? response?.data?.payload?.data?.result + : [], + }, + ], + }), + [response?.data?.payload], + ); const onToggleModal = useCallback( (func: React.Dispatch>) => { @@ -224,7 +147,7 @@ function GridCardGraph({ const isEmptyLayout = widget?.id === 'empty' || isEmpty(widget); - if (state.error && !isEmptyLayout) { + if (response.isError && !isEmptyLayout) { return ( <> {getModals()} @@ -238,15 +161,14 @@ function GridCardGraph({ /> - {state.errorMessage} + + {response.isError && 'Something went wrong'} + ); } - if ( - (state.loading === true || state.payload === undefined) && - !isEmptyLayout - ) { + if (response.isFetching) { return ( <> onToggleModal(setModal)} - onDelete={(): void => onToggleModal(setDeleteModal)} + onView={handleOnView} + onDelete={handleOnDelete} /> )} {!isEmptyLayout && getModals()} - {!isEmpty(widget) && !!state.payload && ( + {!isEmpty(widget) && !!response.data?.payload?.data?.result && ( )} @@ -310,13 +230,6 @@ function GridCardGraph({ ); } -interface GridCardGraphState { - loading: boolean; - error: boolean; - errorMessage: string; - payload: ChartData | undefined; -} - interface DispatchProps { deleteWidget: ({ widgetId,