GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-06-04 11:25:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed view trace or logs button on graph not disappearing on outside click (#7177)

Browse Source 
* fix: fixed view trace or logs button on graph not disappearing on outside click

* fix: removed older function
This commit is contained in:
SagarRajput-7 2025-03-03 11:22:14 +05:30 committed by GitHub
parent b4a1d72123
commit fe73ca63a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
View File

@ -8,7 +8,7 @@ import { ViewMenuAction } from 'container/GridCardLayout/config';
import GridCard from 'container/GridCardLayout/GridCard';
import { Card } from 'container/GridCardLayout/styles';
import { Button } from 'container/MetricsApplication/Tabs/styles';
import { onGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
import { useIsDarkMode } from 'hooks/useDarkMode';
import useUrlQuery from 'hooks/useUrlQuery';
import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@ -122,6 +122,8 @@ function CeleryTaskLatencyGraph({
setSelectedTimeStamp(selectTime);
}, []);
const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);
const onGraphClick = useCallback(
(type: string): OnClickPluginOpts['onClick'] => (
xValue,
@ -137,14 +139,9 @@ function CeleryTaskLatencyGraph({
value,
});
return onGraphClickHandler(handleSetTimeStamp)(
xValue,
yValue,
mouseX,
mouseY,
type,
);
return onGraphClickHandler(xValue, yValue, mouseX, mouseY, type);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[handleSetTimeStamp],
);

8
frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
View File

@ -34,9 +34,9 @@ import { IServiceName } from './types';
import {
dbSystemTags,
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
useGetAPMToTracesQueries,
useGraphClickHandler,
} from './util';
function DBCall(): JSX.Element {
@ -160,6 +160,8 @@ function DBCall(): JSX.Element {
});
const { safeNavigate } = useSafeNavigate();
const onGraphClickHandler = useGraphClickHandler(setSelectedTimeStamp);
return (
<Row gutter={24}>
<Col span={12}>
@ -183,7 +185,7 @@ function DBCall(): JSX.Element {
<Graph
widget={databaseCallsRPSWidget}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,
@ -221,7 +223,7 @@ function DBCall(): JSX.Element {
widget={databaseCallsAverageDurationWidget}
headerMenuList={MENU_ITEMS}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,

12
frontend/src/container/MetricsApplication/Tabs/External.tsx
View File

@ -35,9 +35,9 @@ import { Button } from './styles';
import { IServiceName } from './types';
import {
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
useGetAPMToTracesQueries,
useGraphClickHandler,
} from './util';
function External(): JSX.Element {
@ -223,6 +223,8 @@ function External(): JSX.Element {
const { safeNavigate } = useSafeNavigate();
const onGraphClickHandler = useGraphClickHandler(setSelectedTimeStamp);
return (
<>
<Row gutter={24}>
@ -248,7 +250,7 @@ function External(): JSX.Element {
headerMenuList={MENU_ITEMS}
widget={externalCallErrorWidget}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,
@ -286,7 +288,7 @@ function External(): JSX.Element {
headerMenuList={MENU_ITEMS}
widget={externalCallDurationWidget}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,
@ -325,7 +327,7 @@ function External(): JSX.Element {
widget={externalCallRPSWidget}
headerMenuList={MENU_ITEMS}
onClickHandler={(xValue, yValue, mouseX, mouseY): Promise<void> =>
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,
@ -363,7 +365,7 @@ function External(): JSX.Element {
widget={externalCallDurationAddressWidget}
headerMenuList={MENU_ITEMS}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
onGraphClickHandler(
xValue,
yValue,
mouseX,

14
frontend/src/container/MetricsApplication/Tabs/Overview.tsx
View File

@ -51,10 +51,10 @@ import { IServiceName } from './types';
import {
generateExplorerPath,
handleNonInQueryRange,
onGraphClickHandler,
onViewTracePopupClick,
useGetAPMToLogsQueries,
useGetAPMToTracesQueries,
useGraphClickHandler,
} from './util';
function Application(): JSX.Element {
@ -79,6 +79,8 @@ function Application(): JSX.Element {
setSelectedTimeStamp(selectTime);
}, []);
const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);
const dispatch = useDispatch();
const handleGraphClick = useCallback(
(type: string): OnClickPluginOpts['onClick'] => (
@ -86,14 +88,8 @@ function Application(): JSX.Element {
yValue,
mouseX,
mouseY,
): Promise<void> =>
onGraphClickHandler(handleSetTimeStamp)(
xValue,
yValue,
mouseX,
mouseY,
type,
),
): Promise<void> => onGraphClickHandler(xValue, yValue, mouseX, mouseY, type),
// eslint-disable-next-line react-hooks/exhaustive-deps
[handleSetTimeStamp],
);

27
frontend/src/container/MetricsApplication/Tabs/util.ts
View File

@ -4,11 +4,12 @@ import ROUTES from 'constants/routes';
import { routeConfig } from 'container/SideNav/config';
import { getQueryString } from 'container/SideNav/helper';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import useClickOutside from 'hooks/useClickOutside';
import useResourceAttribute from 'hooks/useResourceAttribute';
import { resourceAttributesToTracesFilterItems } from 'hooks/useResourceAttribute/utils';
import { prepareQueryWithDefaultTimestamp } from 'pages/LogsExplorer/utils';
import { traceFilterKeys } from 'pages/TracesExplorer/Filter/filterUtils';
import { Dispatch, SetStateAction, useMemo } from 'react';
import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
import {
BaseAutocompleteData,
DataTypes,
@ -106,9 +107,27 @@ export function onViewTracePopupClick({
};
}
export function onGraphClickHandler(
export function useGraphClickHandler(
setSelectedTimeStamp: (n: number) => void | Dispatch<SetStateAction<number>>,
) {
): (
xValue: number,
yValue: number,
mouseX: number,
mouseY: number,
type: string,
) => Promise<void> {
const buttonRef = useRef<HTMLElement | null>(null);
useClickOutside({
ref: buttonRef,
onClickOutside: () => {
if (buttonRef.current) {
buttonRef.current.style.display = 'none';
}
},
eventType: 'mousedown',
});
return async (
xValue: number,
yValue: number,
@ -117,8 +136,8 @@ export function onGraphClickHandler(
type: string,
): Promise<void> => {
const id = `${type}_button`;
const buttonElement = document.getElementById(id);
buttonRef.current = buttonElement;
if (xValue) {
if (buttonElement) {

6
frontend/src/hooks/useClickOutside.tsx
View File

@ -3,11 +3,13 @@ import { useEffect } from 'react';
type UseClickOutsideProps = {
ref: React.RefObject<HTMLElement>;
onClickOutside: () => void;
eventType?: 'mousedown' | 'mouseup' | 'click' | 'dblclick';
};
const useClickOutside = ({
ref,
onClickOutside,
eventType,
}: UseClickOutsideProps): void => {
const handleClickOutside = (event: MouseEvent): void => {
if (ref.current && !ref.current.contains(event.target as Node)) {
@ -16,10 +18,10 @@ const useClickOutside = ({
};
useEffect(() => {
document.addEventListener('click', handleClickOutside);
document.addEventListener(eventType ?? 'click', handleClickOutside);
return (): void => {
document.removeEventListener('click', handleClickOutside);
document.removeEventListener(eventType ?? 'click', handleClickOutside);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ref, onClickOutside]);

14
frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/OverviewRightPanelGraph.tsx
View File

@ -7,7 +7,7 @@ import { QueryParams } from 'constants/query';
import { ViewMenuAction } from 'container/GridCardLayout/config';
import GridCard from 'container/GridCardLayout/GridCard';
import { Button } from 'container/MetricsApplication/Tabs/styles';
import { onGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
import { useGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
import useUrlQuery from 'hooks/useUrlQuery';
import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
import { useCallback, useEffect, useMemo, useState } from 'react';
@ -84,20 +84,16 @@ export default function OverviewRightPanelGraph({
const navigateToTraces = useNavigateToTraces();
const onGraphClickHandler = useGraphClickHandler(handleSetTimeStamp);
const handleGraphClick = useCallback(
(type: string): OnClickPluginOpts['onClick'] => (
xValue,
yValue,
mouseX,
mouseY,
): Promise<void> =>
onGraphClickHandler(handleSetTimeStamp)(
xValue,
yValue,
mouseX,
mouseY,
type,
),
): Promise<void> => onGraphClickHandler(xValue, yValue, mouseX, mouseY, type),
// eslint-disable-next-line react-hooks/exhaustive-deps
[handleSetTimeStamp],
);