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
This commit is contained in:
Shaheer Kochai 2025-02-25 13:30:19 +04:30 committed by GitHub
parent e18bda8480
commit da9f112bee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 5 deletions

View File

@ -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());

View File

@ -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';

View File

@ -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);