feat: added url sharing for main domain list page api monitoring

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<number>(-1);
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(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<any> | 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 (
 		<section className={cx('api-module-right-section')}>
+			<Toolbar
+				showAutoRefresh={false}
+				rightActions={<RightToolbarActions onStageRunQuery={handleRunQuery} />}
+			/>
+			{/* add bottom border here */}
 			<div className={cx('api-monitoring-list-header')}>
 				<QueryBuilderSearchV2
 					query={query}
-					onChange={(searchFilters): void =>
-						handleChangeQueryData('filters', searchFilters)
-					}
+					onChange={handleChangeTagFilters}
 					placeholder="Search filters..."
 					hardcodedAttributeKeys={hardcodedAttributeKeys}
 				/>
-				<DateTimeSelectionV2
-					showAutoRefresh={false}
-					showRefreshText={false}
-					hideShareModal
-				/>
 			</div>
 			<Table
 				className={cx('api-monitoring-domain-list-table')}

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -9,6 +9,7 @@
 		.api-quick-filters-header {
 			padding: 12px;
 			border-bottom: 1px solid var(--bg-slate-400);
+			border-right: 1px solid var(--bg-slate-400);
 
 			display: flex;
 			align-items: center;
@@ -24,6 +25,10 @@
 		flex-direction: column;
 		width: 100%;
 
+		.toolbar {
+			border-bottom: 1px solid var(--bg-slate-400);
+		}
+
 		.api-monitoring-list-header {
 			width: 100%;
 			padding: 8px;

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -7,12 +7,8 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useEffect, useMemo, useState } from 'react';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+import { useEffect, useState } from 'react';
 
 import { ApiMonitoringQuickFiltersConfig } from '../utils';
 import DomainList from './Domains/DomainList';
@@ -20,39 +16,10 @@ import DomainList from './Domains/DomainList';
 function Explorer(): JSX.Element {
 	const [showIP, setShowIP] = useState<boolean>(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 (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className={cx('api-monitoring-page', 'filter-visible')}>
@@ -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)
-						}
 					/>
 				</section>
-				<DomainList
-					query={query}
-					showIP={showIP}
-					handleChangeQueryData={handleChangeQueryData}
-				/>
+				<DomainList showIP={showIP} />
 			</div>
 		</Sentry.ErrorBoundary>
 	);

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 (
 		<div className="toolbar">
 			<div className="leftActions">{leftActions}</div>
@@ -31,7 +36,7 @@ export default function Toolbar({
 				{showOldCTA && <NewExplorerCTA />}
 				<DateTimeSelectionV2
 					showAutoRefresh={showAutoRefresh}
-					showRefreshText={!isLogsExplorerPage}
+					showRefreshText={!isLogsExplorerPage && !isApiMonitoringPage}
 				/>
 			</div>
 			<div className="rightActions">{rightActions}</div>