From da9f112bee660eec5520761918cd26895139c6b0 Mon Sep 17 00:00:00 2001 From: Shaheer Kochai Date: Tue, 25 Feb 2025 13:30:19 +0430 Subject: [PATCH] fix: fix the issue of service to logs/traces explorer caused by similar 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 --- .../MetricsApplication/Tabs/Overview.tsx | 12 ++++++++++-- .../container/MetricsApplication/Tabs/util.ts | 19 ++++++++++++++++--- frontend/src/utils/timeUtils.ts | 3 +++ 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index 43f7d71c212..d96034e9af5 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/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()); diff --git a/frontend/src/container/MetricsApplication/Tabs/util.ts b/frontend/src/container/MetricsApplication/Tabs/util.ts index f38e48edfb1..f48b346b464 100644 --- a/frontend/src/container/MetricsApplication/Tabs/util.ts +++ b/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'; diff --git a/frontend/src/utils/timeUtils.ts b/frontend/src/utils/timeUtils.ts index e64284a34f4..08216e6fd65 100644 --- a/frontend/src/utils/timeUtils.ts +++ b/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);