diff --git a/frontend/src/container/OnboardingContainer/APM/common/ConnectionStatus/ConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/APM/common/ConnectionStatus/ConnectionStatus.tsx index d474428b39..7204b5819a 100644 --- a/frontend/src/container/OnboardingContainer/APM/common/ConnectionStatus/ConnectionStatus.tsx +++ b/frontend/src/container/OnboardingContainer/APM/common/ConnectionStatus/ConnectionStatus.tsx @@ -10,8 +10,9 @@ import { useQueryService } from 'hooks/useQueryService'; import useResourceAttribute from 'hooks/useResourceAttribute'; import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils'; import { useEffect, useMemo, useState } from 'react'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; +import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime'; import { PayloadProps as QueryServicePayloadProps } from 'types/api/metrics/getService'; import { GlobalReducer } from 'types/reducer/globalTime'; import { Tags } from 'types/reducer/trace'; @@ -22,12 +23,14 @@ interface ConnectionStatusProps { framework: string; } +const pollingInterval = 15000; + export default function ConnectionStatus({ serviceName, language, framework, }: ConnectionStatusProps): JSX.Element { - const { maxTime, minTime, selectedTime } = useSelector< + const { minTime, maxTime, selectedTime } = useSelector< AppState, GlobalReducer >((state) => state.globalTime); @@ -37,22 +40,23 @@ export default function ConnectionStatus({ [queries], ); - const [pollingInterval, setPollingInterval] = useState(15000); // initial Polling interval of 15 secs , Set to false after 5 mins const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins const [loading, setLoading] = useState(true); const [isReceivingData, setIsReceivingData] = useState(false); + const dispatch = useDispatch(); - const { data, error, isFetching: isServiceLoading, isError } = useQueryService( - { - minTime, - maxTime, - selectedTime, - selectedTags, - options: { - refetchInterval: pollingInterval, - }, - }, - ); + const { + data, + error, + isFetching: isServiceLoading, + isError, + refetch, + } = useQueryService({ + minTime, + maxTime, + selectedTime, + selectedTags, + }); const renderDocsReference = (): JSX.Element => { switch (language) { @@ -107,10 +111,8 @@ export default function ConnectionStatus({ const verifyApplicationData = (response?: QueryServicePayloadProps): void => { if (data || isError) { setRetryCount(retryCount - 1); - if (retryCount < 0) { setLoading(false); - setPollingInterval(false); } } @@ -126,11 +128,44 @@ export default function ConnectionStatus({ } }; + // Use useEffect to update query parameters when the polling interval lapses + useEffect(() => { + const pollingTimer = setInterval(() => { + // Trigger a refetch with the updated parameters + const updatedMinTime = (Date.now() - 15 * 60 * 1000) * 1000000; + const updatedMaxTime = Date.now() * 1000000; + + const payload = { + maxTime: updatedMaxTime, + minTime: updatedMinTime, + selectedTime, + }; + + dispatch({ + type: UPDATE_TIME_INTERVAL, + payload, + }); + + // refetch(updatedParams); + }, pollingInterval); // Same interval as pollingInterval + + // Clean up the interval when the component unmounts + return (): void => { + clearInterval(pollingTimer); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [refetch, selectedTags, selectedTime]); + useEffect(() => { verifyApplicationData(data); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isServiceLoading, data, error, isError]); + useEffect(() => { + refetch(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return (
{renderDocsReference()}
diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx index 7f36d099a5..d1cdccccf4 100644 --- a/frontend/src/pages/SignUp/SignUp.tsx +++ b/frontend/src/pages/SignUp/SignUp.tsx @@ -5,7 +5,9 @@ import loginApi from 'api/user/login'; import signUpApi from 'api/user/signup'; import afterLogin from 'AppRoutes/utils'; import WelcomeLeftContainer from 'components/WelcomeLeftContainer'; +import { FeatureKeys } from 'constants/features'; import ROUTES from 'constants/routes'; +import useFeatureFlag from 'hooks/useFeatureFlag'; import { useNotifications } from 'hooks/useNotifications'; import history from 'lib/history'; import { useEffect, useState } from 'react'; @@ -57,6 +59,8 @@ function SignUp({ version }: SignUpProps): JSX.Element { const token = params.get('token'); const [isDetailsDisable, setIsDetailsDisable] = useState(false); + const isOnboardingEnabled = useFeatureFlag(FeatureKeys.ONBOARDING)?.active; + const getInviteDetailsResponse = useQuery({ queryFn: () => getInviteDetails({ @@ -237,7 +241,11 @@ function SignUp({ version }: SignUpProps): JSX.Element { await commonHandler( values, async (): Promise => { - history.push(ROUTES.APPLICATION); + if (isOnboardingEnabled) { + history.push(ROUTES.GET_STARTED); + } else { + history.push(ROUTES.APPLICATION); + } }, ); }