chore: added service name and time params for top level operations (#5552)

* chore: added service name and time params for top level operations

* fix: build issues

* chore: update the useTopLevelOpertions to send start and end time

* chore: added extra checks to not send the param when undefined

* chore: added extra checks to not send the param when undefined

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/api/metrics/getTopLevelOperations.ts

@@ -1,7 +1,20 @@
 import axios from 'api';
+import { isNil } from 'lodash-es';
 
-const getTopLevelOperations = async (): Promise<ServiceDataProps> => {
-	const response = await axios.post(`/service/top_level_operations`);
+interface GetTopLevelOperationsProps {
+	service?: string;
+	start?: number;
+	end?: number;
+}
+
+const getTopLevelOperations = async (
+	props: GetTopLevelOperationsProps,
+): Promise<ServiceDataProps> => {
+	const response = await axios.post(`/service/top_level_operations`, {
+		start: !isNil(props.start) ? `${props.start}` : undefined,
+		end: !isNil(props.end) ? `${props.end}` : undefined,
+		service: props.service,
+	});
 	return response.data;
 };
 

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -20,12 +20,14 @@ import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuid } from 'uuid';
 
 import { GraphTitle, SERVICE_CHART_ID } from '../constant';
@@ -52,6 +54,11 @@ import {
 function Application(): JSX.Element {
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { search, pathname } = useLocation();
 	const { queries } = useResourceAttribute();
@@ -105,8 +112,13 @@ function Application(): JSX.Element {
 		isLoading: topLevelOperationsIsLoading,
 		isError: topLevelOperationsIsError,
 	} = useQuery<ServiceDataProps>({
-		queryKey: [servicename],
-		queryFn: getTopLevelOperations,
+		queryKey: [servicename, minTime, maxTime],
+		queryFn: (): Promise<ServiceDataProps> =>
+			getTopLevelOperations({
+				service: servicename || '',
+				start: minTime,
+				end: maxTime,
+			}),
 	});
 
 	const selectedTraceTags: string = JSON.stringify(

frontend/src/container/ServiceApplication/ServiceMetrics/index.tsx

@@ -32,7 +32,10 @@ function ServicesUsingMetrics(): JSX.Element {
 		selectedTags,
 		globalSelectedInterval,
 	];
-	const { data, isLoading, isError } = useGetTopLevelOperations(queryKey);
+	const { data, isLoading, isError } = useGetTopLevelOperations(queryKey, {
+		start: minTime,
+		end: maxTime,
+	});
 
 	const [skipOnboarding, setSkipOnboarding] = useState(
 		localStorageGet(SKIP_ONBOARDING) === 'true',

frontend/src/hooks/useGetTopLevelOperations.ts

@@ -3,14 +3,21 @@ import getTopLevelOperations, {
 } from 'api/metrics/getTopLevelOperations';
 import { QueryKey, useQuery, UseQueryResult } from 'react-query';
 
+interface UseGetTopLevelOperationsParams {
+	start: number;
+	end: number;
+}
+
 type UseGetTopLevelOperations = (
 	queryKey: QueryKey,
+	params: UseGetTopLevelOperationsParams,
 ) => UseQueryResult<ServiceDataProps>;
 
-const useGetTopLevelOperations: UseGetTopLevelOperations = (queryKey) =>
+const useGetTopLevelOperations: UseGetTopLevelOperations = (queryKey, params) =>
 	useQuery<ServiceDataProps>({
 		queryKey,
-		queryFn: getTopLevelOperations,
+		queryFn: (): Promise<ServiceDataProps> =>
+			getTopLevelOperations({ start: params.start, end: params.end }),
 	});
 
 export default useGetTopLevelOperations;