From e125d146b5358b95af22c8f3a9fb63014ac7fe14 Mon Sep 17 00:00:00 2001 From: sawhil Date: Thu, 24 Apr 2025 02:53:19 +0530 Subject: [PATCH] feat: added url sharing for main domain list page api monitoring --- .../Explorer/Domains/DomainList.tsx | 75 +++++++++++++------ .../Explorer/Explorer.styles.scss | 5 ++ .../ApiMonitoring/Explorer/Explorer.tsx | 44 +---------- frontend/src/container/Toolbar/Toolbar.tsx | 7 +- 4 files changed, 67 insertions(+), 64 deletions(-) diff --git a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx index 7b3f0cd6d8..b3c563c27a 100644 --- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx +++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx @@ -7,16 +7,22 @@ import logEvent from 'api/common/logEvent'; import { ErrorResponseHandler } from 'api/ErrorResponseHandler'; import { AxiosError } from 'axios'; import cx from 'classnames'; +import { initialQueriesMap } from 'constants/queryBuilder'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; +import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions'; import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2'; -import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2'; -import { useMemo, useState } from 'react'; +import Toolbar from 'container/Toolbar/Toolbar'; +import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam'; +import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; +import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations'; +import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl'; +import { useCallback, useMemo, useState } from 'react'; import { useQuery } from 'react-query'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData'; -import { HandleChangeQueryData } from 'types/common/operations.types'; +import { DataSource } from 'types/common/queryBuilder'; import { GlobalReducer } from 'types/reducer/globalTime'; import { @@ -26,20 +32,49 @@ import { } from '../../utils'; import DomainDetails from './DomainDetails/DomainDetails'; -function DomainList({ - query, - showIP, - handleChangeQueryData, -}: { - query: IBuilderQuery; - showIP: boolean; - handleChangeQueryData: HandleChangeQueryData; -}): JSX.Element { +function DomainList({ showIP }: { showIP: boolean }): JSX.Element { const [selectedDomainIndex, setSelectedDomainIndex] = useState(-1); const { maxTime, minTime } = useSelector( (state) => state.globalTime, ); + const { currentQuery, handleRunQuery } = useQueryBuilder(); + const query = currentQuery?.builder?.queryData[0] || null; + + const { handleChangeQueryData } = useQueryOperations({ + index: 0, + query, + entityVersion: '', + }); + + // initialise tab with default query. + useShareBuilderUrl({ + ...initialQueriesMap.traces, + builder: { + ...initialQueriesMap.traces.builder, + queryData: [ + { + ...initialQueriesMap.traces.builder.queryData[0], + dataSource: DataSource.TRACES, + aggregateOperator: 'noop', + aggregateAttribute: { + ...initialQueriesMap.traces.builder.queryData[0].aggregateAttribute, + }, + queryName: '', + }, + ], + }, + }); + + const compositeData = useGetCompositeQueryParam(); + + const handleChangeTagFilters = useCallback( + (value: IBuilderQuery['filters']) => { + handleChangeQueryData('filters', value); + }, + [handleChangeQueryData], + ); + const fetchApiOverview = async (): Promise< SuccessResponse | ErrorResponse > => { @@ -70,7 +105,7 @@ function DomainList({ }; const { data, isLoading, isFetching } = useQuery( - [REACT_QUERY_KEY.GET_DOMAINS_LIST, minTime, maxTime, query, showIP], + [REACT_QUERY_KEY.GET_DOMAINS_LIST, minTime, maxTime, compositeData, showIP], fetchApiOverview, ); @@ -81,20 +116,18 @@ function DomainList({ return (
+ } + /> + {/* add bottom border here */}
- handleChangeQueryData('filters', searchFilters) - } + onChange={handleChangeTagFilters} placeholder="Search filters..." hardcodedAttributeKeys={hardcodedAttributeKeys} /> -
(true); - const { currentQuery } = useQueryBuilder(); - useEffect(() => { logEvent('API Monitoring: Landing page visited', {}); }, []); - const { handleChangeQueryData } = useQueryOperations({ - index: 0, - query: currentQuery.builder.queryData[0], - entityVersion: '', - }); - - const updatedCurrentQuery = useMemo( - () => ({ - ...currentQuery, - builder: { - ...currentQuery.builder, - queryData: [ - { - ...currentQuery.builder.queryData[0], - dataSource: DataSource.TRACES, - aggregateOperator: 'noop', - aggregateAttribute: { - ...currentQuery.builder.queryData[0].aggregateAttribute, - }, - }, - ], - }, - }), - [currentQuery], - ); - const query = updatedCurrentQuery?.builder?.queryData[0] || null; - return ( }>
@@ -83,16 +50,9 @@ function Explorer(): JSX.Element { source={QuickFiltersSource.API_MONITORING} config={ApiMonitoringQuickFiltersConfig} handleFilterVisibilityChange={(): void => {}} - onFilterChange={(query: Query): void => - handleChangeQueryData('filters', query.builder.queryData[0].filters) - } /> - +
); diff --git a/frontend/src/container/Toolbar/Toolbar.tsx b/frontend/src/container/Toolbar/Toolbar.tsx index ced99ca45c..85d6cd3467 100644 --- a/frontend/src/container/Toolbar/Toolbar.tsx +++ b/frontend/src/container/Toolbar/Toolbar.tsx @@ -24,6 +24,11 @@ export default function Toolbar({ const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [ pathname, ]); + + const isApiMonitoringPage = useMemo(() => pathname === ROUTES.API_MONITORING, [ + pathname, + ]); + return (
{leftActions}
@@ -31,7 +36,7 @@ export default function Toolbar({ {showOldCTA && }
{rightActions}