GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 01:28:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: added onDragSelect to DBCall and External metric app (#5694)

Browse Source 
* fix: added onDragSelect to DBCall and External metric app

* fix: handled back navigation
This commit is contained in:
SagarRajput-7 2024-08-20 17:45:22 +05:30 committed by GitHub
parent 5796d6cb8c
commit 7cff07333f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/GridCardLayout/GridCardLayout.tsx
View File

@ -194,7 +194,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
history.replace(generatedUrl);
history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));

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

@ -1,6 +1,7 @@
import { Col } from 'antd';
import logEvent from 'api/common/logEvent';
import { ENTITY_VERSION_V4 } from 'constants/app';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import {
@ -12,8 +13,12 @@ import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'hooks/useResourceAttribute/utils';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import useUrlQuery from 'hooks/useUrlQuery';
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 { UpdateTimeInterval } from 'store/actions';
import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
import { EQueryType } from 'types/common/dashboard';
import { v4 as uuid } from 'uuid';
@ -37,6 +42,26 @@ function DBCall(): JSX.Element {
const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { queries } = useResourceAttribute();
const urlQuery = useUrlQuery();
const { pathname } = useLocation();
const dispatch = useDispatch();
const onDragSelect = useCallback(
(start: number, end: number) => {
const startTimestamp = Math.trunc(start);
const endTimestamp = Math.trunc(end);
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
}
},
[dispatch, pathname, urlQuery],
);
const tagFilterItems: TagFilterItem[] = useMemo(
() =>
@ -150,6 +175,7 @@ function DBCall(): JSX.Element {
'database_call_rps',
);
}}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>
@ -185,6 +211,7 @@ function DBCall(): JSX.Element {
'database_call_avg_duration',
);
}}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>

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

@ -1,6 +1,7 @@
import { Col } from 'antd';
import logEvent from 'api/common/logEvent';
import { ENTITY_VERSION_V4 } from 'constants/app';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import {
@ -14,8 +15,12 @@ import {
convertRawQueriesToTraceSelectedTags,
resourceAttributesToTagFilterItems,
} from 'hooks/useResourceAttribute/utils';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import useUrlQuery from 'hooks/useUrlQuery';
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 { UpdateTimeInterval } from 'store/actions';
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { EQueryType } from 'types/common/dashboard';
import { v4 as uuid } from 'uuid';
@ -40,6 +45,27 @@ function External(): JSX.Element {
const servicename = decodeURIComponent(encodedServiceName);
const { queries } = useResourceAttribute();
const urlQuery = useUrlQuery();
const { pathname } = useLocation();
const dispatch = useDispatch();
const onDragSelect = useCallback(
(start: number, end: number) => {
const startTimestamp = Math.trunc(start);
const endTimestamp = Math.trunc(end);
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
}
},
[dispatch, pathname, urlQuery],
);
const tagFilterItems = useMemo(
() =>
handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [],
@ -214,6 +240,7 @@ function External(): JSX.Element {
'external_call_error_percentage',
);
}}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>
@ -249,6 +276,7 @@ function External(): JSX.Element {
'external_call_duration',
);
}}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>
@ -285,6 +313,7 @@ function External(): JSX.Element {
'external_call_rps_by_address',
)
}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>
@ -320,6 +349,7 @@ function External(): JSX.Element {
'external_call_duration_by_address',
);
}}
onDragSelect={onDragSelect}
version={ENTITY_VERSION_V4}
/>
</GraphContainer>

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

@ -185,7 +185,7 @@ function Application(): JSX.Element {
urlQuery.set(QueryParams.startTime, startTimestamp.toString());
urlQuery.set(QueryParams.endTime, endTimestamp.toString());
const generatedUrl = `${pathname}?${urlQuery.toString()}`;
history.replace(generatedUrl);
history.push(generatedUrl);
if (startTimestamp !== endTimestamp) {
dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));