feat: signoz cloud - update polling logic to fetch latest services (#3538)

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<number | false>(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(
+	const {
-		{
+		data,
-			minTime,
+		error,
-			maxTime,
+		isFetching: isServiceLoading,
-			selectedTime,
+		isError,
-			selectedTags,
+		refetch,
-			options: {
+	} = useQueryService({
-				refetchInterval: pollingInterval,
+		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 (
 		<div className="connection-status-container">
 			<div className="full-docs-link">{renderDocsReference()}</div>

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<boolean>(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<void> => {
-							history.push(ROUTES.APPLICATION);
+							if (isOnboardingEnabled) {
+								history.push(ROUTES.GET_STARTED);
+							} else {
+								history.push(ROUTES.APPLICATION);
+							}
 						},
 					);
 				}