feat: added step interval instead of tplusone

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

@@ -14,10 +14,12 @@ import {
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
+import getStep from 'lib/getStep';
 import history from 'lib/history';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
+import store from 'store';
 import { UpdateTimeInterval } from 'store/actions';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
@@ -123,6 +125,16 @@ function DBCall(): JSX.Element {
 		[servicename, tagFilterItems],
 	);
 
+	const stepInterval = useMemo(
+		() =>
+			getStep({
+				end: store.getState().globalTime.maxTime,
+				inputFormat: 'ns',
+				start: store.getState().globalTime.minTime,
+			}),
+		[],
+	);
+
 	const logEventCalledRef = useRef(false);
 
 	useEffect(() => {
@@ -158,6 +170,7 @@ function DBCall(): JSX.Element {
 						selectedTraceTags,
 						timestamp: selectedTimeStamp,
 						apmToTraceQuery,
+						stepInterval,
 					})}
 				>
 					View Traces
@@ -192,6 +205,7 @@ function DBCall(): JSX.Element {
 						selectedTraceTags,
 						timestamp: selectedTimeStamp,
 						apmToTraceQuery,
+						stepInterval,
 					})}
 				>
 					View Traces

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

@@ -16,10 +16,12 @@ import {
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
+import getStep from 'lib/getStep';
 import history from 'lib/history';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
+import store from 'store';
 import { UpdateTimeInterval } from 'store/actions';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { EQueryType } from 'types/common/dashboard';
@@ -141,6 +143,15 @@ function External(): JSX.Element {
 		],
 	});
 
+	const stepInterval = useMemo(
+		() =>
+			getStep({
+				end: store.getState().globalTime.maxTime,
+				inputFormat: 'ns',
+				start: store.getState().globalTime.minTime,
+			}),
+		[],
+	);
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
@@ -222,6 +233,7 @@ function External(): JSX.Element {
 							selectedTraceTags,
 							timestamp: selectedTimeStamp,
 							apmToTraceQuery: errorApmToTraceQuery,
+							stepInterval,
 						})}
 					>
 						View Traces
@@ -257,6 +269,7 @@ function External(): JSX.Element {
 							selectedTraceTags,
 							timestamp: selectedTimeStamp,
 							apmToTraceQuery,
+							stepInterval,
 						})}
 					>
 						View Traces
@@ -295,6 +308,7 @@ function External(): JSX.Element {
 							selectedTraceTags,
 							timestamp: selectedTimeStamp,
 							apmToTraceQuery,
+							stepInterval,
 						})}
 					>
 						View Traces
@@ -330,6 +344,7 @@ function External(): JSX.Element {
 							selectedTraceTags,
 							timestamp: selectedTimeStamp,
 							apmToTraceQuery,
+							stepInterval,
 						})}
 					>
 						View Traces

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

@@ -15,6 +15,7 @@ import {
 	resourceAttributesToTagFilterItems,
 } from 'hooks/useResourceAttribute/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
+import getStep from 'lib/getStep';
 import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
@@ -180,6 +181,16 @@ function Application(): JSX.Element {
 		id: SERVICE_CHART_ID.errorPercentage,
 	});
 
+	const stepInterval = useMemo(
+		() =>
+			getStep({
+				end: maxTime,
+				inputFormat: 'ns',
+				start: minTime,
+			}),
+		[maxTime, minTime],
+	);
+
 	const onDragSelect = useCallback(
 		(start: number, end: number) => {
 			const startTimestamp = Math.trunc(start);
@@ -204,11 +215,12 @@ function Application(): JSX.Element {
 			isViewLogsClicked?: boolean,
 		): (() => void) => (): void => {
 			const currentTime = timestamp;
-			const tPlusOne = timestamp + 60;
+			const endTime = timestamp + stepInterval;
+			console.log(endTime, stepInterval);
 
 			const urlParams = new URLSearchParams(search);
 			urlParams.set(QueryParams.startTime, currentTime.toString());
-			urlParams.set(QueryParams.endTime, tPlusOne.toString());
+			urlParams.set(QueryParams.endTime, endTime.toString());
 			urlParams.delete(QueryParams.relativeTime);
 			const avialableParams = routeConfig[ROUTES.TRACE];
 			const queryString = getQueryString(avialableParams, urlParams);
@@ -229,7 +241,7 @@ function Application(): JSX.Element {
 			history.push(newPath);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
+		[stepInterval],
 	);
 
 	const logErrorQuery = useGetAPMToLogsQueries({
@@ -280,6 +292,7 @@ function Application(): JSX.Element {
 						selectedTraceTags={selectedTraceTags}
 						topLevelOperationsRoute={topLevelOperationsRoute}
 						topLevelOperationsIsLoading={topLevelOperationsIsLoading}
+						stepInterval={stepInterval}
 					/>
 				</Col>
 
@@ -293,6 +306,7 @@ function Application(): JSX.Element {
 							selectedTraceTags,
 							timestamp: selectedTimeStamp,
 							apmToTraceQuery,
+							stepInterval,
 						})}
 					>
 						View Traces
@@ -321,6 +335,7 @@ function Application(): JSX.Element {
 								selectedTraceTags,
 								timestamp: selectedTimeStamp,
 								apmToTraceQuery,
+								stepInterval,
 							})}
 						>
 							View Traces

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

@@ -35,6 +35,7 @@ function ServiceOverview({
 	selectedTimeStamp,
 	topLevelOperationsRoute,
 	topLevelOperationsIsLoading,
+	stepInterval,
 }: ServiceOverviewProps): JSX.Element {
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
@@ -88,12 +89,14 @@ function ServiceOverview({
 					timestamp: selectedTimeStamp,
 					apmToTraceQuery: apmToLogQuery,
 					isViewLogsClicked: true,
+					stepInterval,
 				})}
 				onViewTracesClick={onViewTracePopupClick({
 					servicename,
 					selectedTraceTags,
 					timestamp: selectedTimeStamp,
 					apmToTraceQuery,
+					stepInterval,
 				})}
 			/>
 			<Card data-testid="service_latency">
@@ -120,8 +123,8 @@ function ServiceOverview({
 		</>
 	);
 }
-
 interface ServiceOverviewProps {
+	stepInterval: number;
 	selectedTimeStamp: number;
 	selectedTraceTags: string;
 	onDragSelect: (start: number, end: number) => void;

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -35,6 +35,7 @@ interface OnViewTracePopupClickProps {
 	timestamp: number;
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
+	stepInterval?: number;
 }
 
 export function generateExplorerPath(
@@ -54,21 +55,22 @@ export function generateExplorerPath(
 	}=${JSONCompositeQuery}&${queryString.join('&')}`;
 }
 
+// TODO(@rahul-signoz): update the name of this function once we have view logs button in every panel
 export function onViewTracePopupClick({
 	selectedTraceTags,
 	servicename,
 	timestamp,
 	apmToTraceQuery,
 	isViewLogsClicked,
+	stepInterval,
 }: OnViewTracePopupClickProps): VoidFunction {
 	return (): void => {
 		const currentTime = timestamp;
-
+		const endTime = timestamp + (stepInterval || 60);
-		const tPlusOne = timestamp + 60;
 
 		const urlParams = new URLSearchParams(window.location.search);
 		urlParams.set(QueryParams.startTime, currentTime.toString());
-		urlParams.set(QueryParams.endTime, tPlusOne.toString());
+		urlParams.set(QueryParams.endTime, endTime.toString());
 		urlParams.delete(QueryParams.relativeTime);
 		const avialableParams = routeConfig[ROUTES.TRACE];
 		const queryString = getQueryString(avialableParams, urlParams);
@@ -175,7 +177,7 @@ export function useGetAPMToLogsQueries({
 	const serviceName = {
 		id: 'service.name--string--resource--true',
 		dataType: DataTypes.String,
-		isColumn: true,
+		isColumn: false,
 		key: 'service.name',
 		type: 'resource',
 		isJSON: false,