fix: fix the issue of service to logs/traces explorer caused by simil…

…ar start and end timestamps (#7181)

* fix: fix the issue of service to logs/traces explorer caused by similar start and end timestamps

* refactor: extract seconds to milliseconds conversion utility

* docs: add JSDoc for onViewTracePopupClick function

* fix: handle seconds to milli seconds in onErrorTrackHandler

* chore: add jsdoc to onErrorTrackHandler

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

@@ -30,6 +30,7 @@ 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 { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
 import { GraphTitle, SERVICE_CHART_ID } from '../constant';
@@ -220,14 +221,21 @@ function Application(): JSX.Element {
 		[dispatch, pathname, urlQuery],
 	);
 
+	/**
+	 *
+	 * @param timestamp - The timestamp in seconds
+	 * @param apmToTraceQuery - query object
+	 * @param isViewLogsClicked - Whether this is for viewing logs vs traces
+	 * @returns A callback function that handles the navigation when executed
+	 */
 	const onErrorTrackHandler = useCallback(
 		(
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
 		): (() => void) => (): void => {
-			const endTime = timestamp;
-			const startTime = timestamp - stepInterval;
+			const endTime = secondsToMilliseconds(timestamp);
+			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
 			const urlParams = new URLSearchParams(search);
 			urlParams.set(QueryParams.startTime, startTime.toString());

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

@@ -16,6 +16,7 @@ import {
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { Tags } from 'types/reducer/trace';
+import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
 export const dbSystemTags: Tags[] = [
@@ -56,6 +57,18 @@ export function generateExplorerPath(
 }
 
 // TODO(@rahul-signoz): update the name of this function once we have view logs button in every panel
+
+/**
+ * Handles click events for viewing trace/logs popup
+ * @param selectedTraceTags - Selected trace tags
+ * @param servicename - Name of the service
+ * @param timestamp - Timestamp in seconds
+ * @param apmToTraceQuery - Query object
+ * @param isViewLogsClicked - Whether this is for viewing logs vs traces
+ * @param stepInterval - Time interval in seconds
+ * @param safeNavigate - Navigation function
+ 
+ */
 export function onViewTracePopupClick({
 	selectedTraceTags,
 	servicename,
@@ -66,8 +79,8 @@ export function onViewTracePopupClick({
 	safeNavigate,
 }: OnViewTracePopupClickProps): VoidFunction {
 	return (): void => {
-		const endTime = timestamp;
-		const startTime = timestamp - (stepInterval || 60);
+		const endTime = secondsToMilliseconds(timestamp);
+		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
 		const urlParams = new URLSearchParams(window.location.search);
 		urlParams.set(QueryParams.startTime, startTime.toString());
@@ -112,7 +125,7 @@ export function onGraphClickHandler(
 				buttonElement.style.display = 'block';
 				buttonElement.style.left = `${mouseX}px`;
 				buttonElement.style.top = `${mouseY}px`;
-				setSelectedTimeStamp(Math.floor(xValue * 1_000));
+				setSelectedTimeStamp(Math.floor(xValue));
 			}
 		} else if (buttonElement && buttonElement.style.display === 'block') {
 			buttonElement.style.display = 'none';

frontend/src/utils/timeUtils.ts

@@ -124,6 +124,9 @@ export function formatTime(seconds: number): string {
 export const nanoToMilli = (nanoseconds: number): number =>
 	nanoseconds / 1_000_000;
 
+export const secondsToMilliseconds = (seconds: number): number =>
+	seconds * 1_000;
+
 export const epochToTimeString = (epochMs: number): string => {
 	console.log({ epochMs });
 	const date = new Date(epochMs);