Merge branch 'main' into enhancement/cmd-click-across-routes

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -43,7 +43,7 @@ function TopContributorsCard({
 
 			return newState;
 		});
-		history.push({ search: searchParams.toString() });
+		history.push(`${history.location.pathname}?${searchParams.toString()}`);
 	};
 
 	return (

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -102,9 +102,7 @@ function HorizontalTimelineGraph({
 								urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 								urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 
-								history.push({
-									search: urlQuery.toString(),
-								});
+								history.push(`${history.location.pathname}?${urlQuery.toString()}`);
 							}
 						}
 					},

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -50,7 +50,7 @@ function TimelineFilters(): JSX.Element {
 
 	const handleFilter = (value: TimelineFilter): void => {
 		searchParams.set('timelineFilter', value);
-		history.push({ search: searchParams.toString() });
+		history.push(`${history.location.pathname}?${searchParams.toString()}`);
 	};
 
 	const tabs = [

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -20,11 +20,12 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { user } = useAppContext();
 	const [action] = useComponentPermission(['new_alert_action'], user.role);
 
-	const onClickEditHandler = useCallback((id: string) => {
+	const onClickEditHandler = useCallback((id: string, e: React.MouseEvent) => {
 		history.push(
 			generatePath(ROUTES.CHANNELS_EDIT, {
 				channelId: id,
 			}),
+			e,
 		);
 	}, []);
 
@@ -52,7 +53,10 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
-					<Button onClick={(): void => onClickEditHandler(id)} type="link">
+					<Button
+						onClick={(e: React.MouseEvent): void => onClickEditHandler(id, e)}
+						type="link"
+					>
 						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} notifications={notifications} />

frontend/src/container/AllAlertChannels/index.tsx

@@ -30,8 +30,8 @@ function AlertChannels(): JSX.Element {
 		['add_new_channel'],
 		user.role,
 	);
-	const onToggleHandler = useCallback(() => {
-		history.push(ROUTES.CHANNELS_NEW);
+	const onToggleHandler = useCallback((e: React.MouseEvent) => {
+		history.push(ROUTES.CHANNELS_NEW, e);
 	}, []);
 
 	const { isLoading, data, error } = useQuery<
@@ -78,7 +78,7 @@ function AlertChannels(): JSX.Element {
 						}
 					>
 						<Button
-							onClick={onToggleHandler}
+							onClick={(e: React.MouseEvent): void => onToggleHandler(e)}
 							icon={<PlusOutlined />}
 							disabled={!addNewChannelPermission}
 						>

frontend/src/container/ErrorDetails/index.tsx

@@ -111,14 +111,16 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			value: errorDetail[key as keyof GetByErrorTypeAndServicePayload],
 		}));
 
-	const onClickTraceHandler = (): void => {
+	const onClickTraceHandler = (event?: React.MouseEvent): void => {
 		logEvent('Exception: Navigate to trace detail page', {
 			groupId: errorDetail?.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
 			exceptionId: errorDetail?.errorId,
 		});
-		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
+		const path = `/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`;
+
+		history.push(path, event);
 	};
 
 	const logEventCalledRef = useRef(false);
@@ -185,7 +187,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<DashedContainer>
 				<Typography>{t('see_trace_graph')}</Typography>
-				<Button onClick={onClickTraceHandler} type="primary">
+				<Button onClick={(e): void => onClickTraceHandler(e)} type="primary">
 					{t('see_error_in_trace_graph')}
 				</Button>
 			</DashedContainer>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -190,7 +190,7 @@ function ExplorerOptions({
 	);
 
 	const onCreateAlertsHandler = useCallback(
-		(defaultQuery: Query | null) => {
+		(defaultQuery: Query | null, event?: React.MouseEvent) => {
 			if (sourcepage === DataSource.TRACES) {
 				logEvent('Traces Explorer: Create alert', {
 					panelType,
@@ -209,11 +209,20 @@ function ExplorerOptions({
 
 			const stringifiedQuery = handleConditionalQueryModification(defaultQuery);
 
-			history.push(
-				`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-					stringifiedQuery,
-				)}`,
-			);
+			if (event) {
+				history.push(
+					`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+						stringifiedQuery,
+					)}`,
+					event,
+				);
+			} else {
+				history.push(
+					`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
+						stringifiedQuery,
+					)}`,
+				);
+			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[handleConditionalQueryModification, history],
@@ -726,7 +735,7 @@ function ExplorerOptions({
 			<Button
 				disabled={disabled}
 				shape="round"
-				onClick={(): void => onCreateAlertsHandler(query)}
+				onClick={(e: React.MouseEvent): void => onCreateAlertsHandler(query, e)}
 				icon={<ConciergeBell size={16} />}
 			>
 				Create an Alert

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

@@ -9,8 +9,8 @@ export default function FullScreenHeader({
 }: {
 	overrideRoute?: string;
 }): React.ReactElement {
-	const handleLogoClick = (): void => {
-		history.push(overrideRoute || '/');
+	const handleLogoClick = (event?: React.MouseEvent): void => {
+		history.push(overrideRoute || '/', event);
 	};
 	return (
 		<div className="full-screen-header-container">

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -114,7 +114,10 @@ export default function AlertRules({
 		</div>
 	);
 
-	const onEditHandler = (record: GettableAlert) => (): void => {
+	const onEditHandler = (
+		record: GettableAlert,
+		event?: React.MouseEvent | React.KeyboardEvent,
+	) => (): void => {
 		logEvent('Homepage: Alert clicked', {
 			ruleId: record.id,
 			ruleName: record.alert,
@@ -131,7 +134,9 @@ export default function AlertRules({
 
 		params.set(QueryParams.ruleId, record.id.toString());
 
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		const path = `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
+
+		history.push(path, event);
 	};
 
 	const renderAlertRules = (): JSX.Element => (
@@ -143,10 +148,10 @@ export default function AlertRules({
 						tabIndex={0}
 						className="alert-rule-item home-data-item"
 						key={rule.id}
-						onClick={onEditHandler(rule)}
+						onClick={(e): void => onEditHandler(rule, e)()}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter') {
-								onEditHandler(rule);
+								onEditHandler(rule, e)();
 							}
 						}}
 					>

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -84,14 +84,14 @@ function DataSourceInfo({
 								icon={<img src="/Icons/container-plus.svg" alt="plus" />}
 								role="button"
 								tabIndex={0}
-								onClick={(): void => {
+								onClick={(e): void => {
 									logEvent('Homepage: Connect dataSource clicked', {});
 
 									if (
 										activeLicense &&
 										activeLicense.platform === LicensePlatform.CLOUD
 									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+										history.push(ROUTES.GET_STARTED_WITH_CLOUD, e);
 									} else {
 										window?.open(
 											DOCS_LINKS.ADD_DATA_SOURCE,

frontend/src/container/Home/Home.tsx

@@ -413,12 +413,12 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											className="active-ingestion-card-actions"
-											onClick={(): void => {
+											onClick={(e): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												history.push(ROUTES.LOGS_EXPLORER);
+												history.push(ROUTES.LOGS_EXPLORER, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -455,11 +455,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												history.push(ROUTES.TRACES_EXPLORER);
+												history.push(ROUTES.TRACES_EXPLORER, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -496,11 +496,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												history.push(ROUTES.METRICS_EXPLORER);
+												history.push(ROUTES.METRICS_EXPLORER, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -550,11 +550,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													history.push(ROUTES.LOGS_EXPLORER, e);
 												}}
 											>
 												Open Logs Explorer
@@ -564,11 +564,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													history.push(ROUTES.TRACES_EXPLORER, e);
 												}}
 											>
 												Open Traces Explorer
@@ -578,11 +578,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
+													history.push(ROUTES.METRICS_EXPLORER_EXPLORER, e);
 												}}
 											>
 												Open Metrics Explorer
@@ -619,11 +619,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													history.push(ROUTES.ALL_DASHBOARD);
+													history.push(ROUTES.ALL_DASHBOARD, e);
 												}}
 											>
 												Create dashboard
@@ -661,11 +661,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													history.push(ROUTES.ALERTS_NEW);
+													history.push(ROUTES.ALERTS_NEW, e);
 												}}
 											>
 												Create an alert

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -86,18 +86,18 @@ function HomeChecklist({
 												<Button
 													type="default"
 													className="periscope-btn secondary"
-													onClick={(): void => {
+													onClick={(e): void => {
 														logEvent('Welcome Checklist: Get started clicked', {
 															step: item.id,
 														});
 
 														if (item.toRoute !== ROUTES.GET_STARTED_WITH_CLOUD) {
-															history.push(item.toRoute || '');
+															history.push(item.toRoute || '', e);
 														} else if (
 															activeLicense &&
 															activeLicense.platform === LicensePlatform.CLOUD
 														) {
-															history.push(item.toRoute || '');
+															history.push(item.toRoute || '', e);
 														} else {
 															window?.open(
 																item.docsLink || '',

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -116,7 +116,7 @@ const ServicesListTable = memo(
 		onRowClick,
 	}: {
 		services: ServicesList[];
-		onRowClick: (record: ServicesList) => void;
+		onRowClick: (record: ServicesList, event: React.MouseEvent) => void;
 	}): JSX.Element => (
 		<div className="services-list-container home-data-item-container metrics-services-list">
 			<div className="services-list">
@@ -125,8 +125,8 @@ const ServicesListTable = memo(
 					dataSource={services}
 					pagination={false}
 					className="services-table"
-					onRow={(record): { onClick: () => void } => ({
-						onClick: (): void => onRowClick(record),
+					onRow={(record): { onClick: (event: React.MouseEvent) => void } => ({
+						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
 					})}
 				/>
 			</div>
@@ -284,11 +284,12 @@ function ServiceMetrics({
 	}, [onUpdateChecklistDoneItem, loadingUserPreferences, servicesExist]);
 
 	const handleRowClick = useCallback(
-		(record: ServicesList) => {
+		(record: ServicesList, event: React.MouseEvent) => {
 			logEvent('Homepage: Service clicked', {
 				serviceName: record.serviceName,
 			});
-			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+
+			safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, event);
 		},
 		[safeNavigate],
 	);

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -172,13 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record): { onClick: () => void } => ({
-							onClick: (): void => {
+						onRow={(record): { onClick: (e: React.MouseEvent) => void } => ({
+							onClick: (e: React.MouseEvent): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, e);
 							},
 						})}
 					/>

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -36,9 +36,9 @@ export function AlertsEmptyState(): JSX.Element {
 
 	const [loading, setLoading] = useState(false);
 
-	const onClickNewAlertHandler = useCallback(() => {
+	const onClickNewAlertHandler = useCallback((e: React.MouseEvent) => {
 		setLoading(false);
-		history.push(ROUTES.ALERTS_NEW);
+		history.push(ROUTES.ALERTS_NEW, e);
 	}, []);
 
 	return (
@@ -70,7 +70,7 @@ export function AlertsEmptyState(): JSX.Element {
 						<div className="action-container">
 							<Button
 								className="add-alert-btn"
-								onClick={onClickNewAlertHandler}
+								onClick={(e: React.MouseEvent): void => onClickNewAlertHandler(e)}
 								icon={<PlusOutlined />}
 								disabled={!addNewAlert}
 								loading={loading}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -2,6 +2,8 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+// Had to add event to the props because we need to pass the event to the onCreateNewDashboard function
 import './DashboardTemplatesModal.styles.scss';
 
 import { Button, Input, Modal, Typography } from 'antd';
@@ -118,7 +120,7 @@ const templatesList: DashboardTemplate[] = [
 
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
-	onCreateNewDashboard: () => void;
+	onCreateNewDashboard: (event: React.MouseEvent) => void;
 	onCancel: () => void;
 }
 
@@ -204,7 +206,9 @@ export default function DashboardTemplatesModal({
 									type="primary"
 									className="periscope-btn primary"
 									icon={<Plus size={14} />}
-									onClick={onCreateNewDashboard}
+									onClick={(event: React.MouseEvent): void =>
+										onCreateNewDashboard(event)
+									}
 								>
 									New dashboard
 								</Button>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -282,35 +282,39 @@ function DashboardsList(): JSX.Element {
 			refetchDashboardList,
 		})) || [];
 
-	const onNewDashboardHandler = useCallback(async () => {
-		try {
-			logEvent('Dashboard List: Create dashboard clicked', {});
-			setNewDashboardState({
-				...newDashboardState,
-				loading: true,
-			});
-			const response = await createDashboard({
-				title: t('new_dashboard_title', {
-					ns: 'dashboard',
-				}),
-				uploadedGrafana: false,
-				version: ENTITY_VERSION_V5,
-			});
+	const onNewDashboardHandler = useCallback(
+		async (event: React.MouseEvent) => {
+			try {
+				logEvent('Dashboard List: Create dashboard clicked', {});
+				setNewDashboardState({
+					...newDashboardState,
+					loading: true,
+				});
+				const response = await createDashboard({
+					title: t('new_dashboard_title', {
+						ns: 'dashboard',
+					}),
+					uploadedGrafana: false,
+					version: ENTITY_VERSION_V5,
+				});
 
-			safeNavigate(
-				generatePath(ROUTES.DASHBOARD, {
-					dashboardId: response.data.id,
-				}),
-			);
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setNewDashboardState({
-				...newDashboardState,
-				error: true,
-				errorMessage: (error as AxiosError).toString() || 'Something went Wrong',
-			});
-		}
-	}, [newDashboardState, safeNavigate, showErrorModal, t]);
+				safeNavigate(
+					generatePath(ROUTES.DASHBOARD, {
+						dashboardId: response.data.id,
+					}),
+					event,
+				);
+			} catch (error) {
+				showErrorModal(error as APIError);
+				setNewDashboardState({
+					...newDashboardState,
+					error: true,
+					errorMessage: (error as AxiosError).toString() || 'Something went Wrong',
+				});
+			}
+		},
+		[newDashboardState, safeNavigate, showErrorModal, t],
+	);
 
 	const onModalHandler = (uploadedGrafana: boolean): void => {
 		logEvent('Dashboard List: Import JSON clicked', {});
@@ -639,8 +643,8 @@ function DashboardsList(): JSX.Element {
 				label: (
 					<div
 						className="create-dashboard-menu-item"
-						onClick={(): void => {
-							onNewDashboardHandler();
+						onClick={(e: React.MouseEvent): void => {
+							onNewDashboardHandler(e);
 						}}
 					>
 						<LayoutGrid size={14} /> Create dashboard
@@ -927,7 +931,9 @@ function DashboardsList(): JSX.Element {
 
 				<DashboardTemplatesModal
 					showNewDashboardTemplatesModal={showNewDashboardTemplatesModal}
-					onCreateNewDashboard={onNewDashboardHandler}
+					onCreateNewDashboard={(e: React.MouseEvent): Promise<void> =>
+						onNewDashboardHandler(e)
+					}
 					onCancel={(): void => {
 						setShowNewDashboardTemplatesModal(false);
 					}}

frontend/src/container/ListOfDashboard/SearchFilter/index.tsx

@@ -56,13 +56,11 @@ function SearchFilter({
 
 	const updateURLWithQuery = useCallback(
 		(inputQueries?: IQueryStructure[]): void => {
-			history.push({
-				pathname: history.location.pathname,
-				search:
-					inputQueries || queries
-						? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
-						: '',
-			});
+			const searchQuery =
+				inputQueries || queries
+					? `?search=${convertQueriesToURLQuery(inputQueries || queries)}`
+					: '';
+			history.push(`${history.location.pathname}${searchQuery}`);
 		},
 		[queries],
 	);
@@ -149,10 +147,7 @@ function SearchFilter({
 
 	const clearQueries = (): void => {
 		setQueries([]);
-		history.push({
-			pathname: history.location.pathname,
-			search: ``,
-		});
+		history.push(history.location.pathname);
 	};
 
 	return (

frontend/src/container/Login/index.tsx

@@ -302,8 +302,8 @@ function Login({
 						<Typography.Paragraph italic style={{ color: '#ACACAC' }}>
 							If you are admin,{' '}
 							<Typography.Link
-								onClick={(): void => {
-									history.push(ROUTES.SIGN_UP);
+								onClick={(e): void => {
+									history.push(ROUTES.SIGN_UP, e);
 								}}
 								style={{ fontWeight: 700 }}
 							>

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -235,7 +235,9 @@ function Application(): JSX.Element {
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
+			e?: React.MouseEvent,
 		): (() => void) => (): void => {
+			// eslint-disable-line @typescript-eslint/no-explicit-any
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -259,7 +261,7 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			history.push(newPath);
+			history.push(newPath, e);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],
@@ -299,6 +301,28 @@ function Application(): JSX.Element {
 	});
 	const { safeNavigate } = useSafeNavigate();
 
+	const handleViewTracesClick = useCallback(
+		(e: React.MouseEvent): void => {
+			onViewTracePopupClick({
+				servicename,
+				selectedTraceTags,
+				timestamp: selectedTimeStamp,
+				apmToTraceQuery,
+				stepInterval,
+				safeNavigate,
+				event: e,
+			})();
+		},
+		[
+			servicename,
+			selectedTraceTags,
+			selectedTimeStamp,
+			apmToTraceQuery,
+			stepInterval,
+			safeNavigate,
+		],
+	);
+
 	return (
 		<>
 			<Row gutter={24}>
@@ -319,14 +343,7 @@ function Application(): JSX.Element {
 						type="default"
 						size="small"
 						id="Rate_button"
-						onClick={onViewTracePopupClick({
-							servicename,
-							selectedTraceTags,
-							timestamp: selectedTimeStamp,
-							apmToTraceQuery,
-							stepInterval,
-							safeNavigate,
-						})}
+						onClick={handleViewTracesClick}
 					>
 						View Traces
 					</Button>
@@ -349,14 +366,7 @@ function Application(): JSX.Element {
 							type="default"
 							size="small"
 							id="ApDex_button"
-							onClick={onViewTracePopupClick({
-								servicename,
-								selectedTraceTags,
-								timestamp: selectedTimeStamp,
-								apmToTraceQuery,
-								stepInterval,
-								safeNavigate,
-							})}
+							onClick={handleViewTracesClick}
 						>
 							View Traces
 						</Button>
@@ -370,15 +380,12 @@ function Application(): JSX.Element {
 					<ColErrorContainer>
 						<GraphControlsPanel
 							id="Error_button"
-							onViewLogsClick={onErrorTrackHandler(
-								selectedTimeStamp,
-								logErrorQuery,
-								true,
-							)}
-							onViewTracesClick={onErrorTrackHandler(
-								selectedTimeStamp,
-								errorTrackQuery,
-							)}
+							onViewLogsClick={(e: React.MouseEvent): void =>
+								onErrorTrackHandler(selectedTimeStamp, logErrorQuery, undefined, e)()
+							}
+							onViewTracesClick={(e: React.MouseEvent): void =>
+								onErrorTrackHandler(selectedTimeStamp, errorTrackQuery, undefined, e)()
+							}
 						/>
 
 						<TopLevelOperation

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -6,9 +6,9 @@ import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
 
 interface GraphControlsPanelProps {
 	id: string;
-	onViewLogsClick?: () => void;
-	onViewTracesClick: () => void;
-	onViewAPIMonitoringClick?: () => void;
+	onViewLogsClick?: (e: React.MouseEvent) => void;
+	onViewTracesClick: (e: React.MouseEvent) => void;
+	onViewAPIMonitoringClick?: (e: React.MouseEvent) => void;
 }
 
 function GraphControlsPanel({
@@ -23,7 +23,7 @@ function GraphControlsPanel({
 				type="link"
 				icon={<DraftingCompass size={14} />}
 				size="small"
-				onClick={onViewTracesClick}
+				onClick={(e: React.MouseEvent): void => onViewTracesClick(e)}
 				style={{ color: Color.BG_VANILLA_100 }}
 			>
 				View traces
@@ -33,7 +33,7 @@ function GraphControlsPanel({
 					type="link"
 					icon={<ScrollText size={14} />}
 					size="small"
-					onClick={onViewLogsClick}
+					onClick={(e: React.MouseEvent): void => onViewLogsClick(e)}
 					style={{ color: Color.BG_VANILLA_100 }}
 				>
 					View logs
@@ -44,7 +44,7 @@ function GraphControlsPanel({
 					type="link"
 					icon={<Binoculars size={14} />}
 					size="small"
-					onClick={onViewAPIMonitoringClick}
+					onClick={(e: React.MouseEvent): void => onViewAPIMonitoringClick(e)}
 					style={{ color: Color.BG_VANILLA_100 }}
 				>
 					View External APIs

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -103,23 +103,29 @@ function ServiceOverview({
 		<>
 			<GraphControlsPanel
 				id="Service_button"
-				onViewLogsClick={onViewTracePopupClick({
-					servicename,
-					selectedTraceTags,
-					timestamp: selectedTimeStamp,
-					apmToTraceQuery: apmToLogQuery,
-					isViewLogsClicked: true,
-					stepInterval,
-					safeNavigate,
-				})}
-				onViewTracesClick={onViewTracePopupClick({
-					servicename,
-					selectedTraceTags,
-					timestamp: selectedTimeStamp,
-					apmToTraceQuery,
-					stepInterval,
-					safeNavigate,
-				})}
+				onViewLogsClick={(e: React.MouseEvent): void => {
+					onViewTracePopupClick({
+						servicename,
+						selectedTraceTags,
+						timestamp: selectedTimeStamp,
+						apmToTraceQuery: apmToLogQuery,
+						isViewLogsClicked: true,
+						stepInterval,
+						safeNavigate,
+						event: e,
+					})();
+				}}
+				onViewTracesClick={(e: React.MouseEvent): void => {
+					onViewTracePopupClick({
+						servicename,
+						selectedTraceTags,
+						timestamp: selectedTimeStamp,
+						apmToTraceQuery,
+						stepInterval,
+						safeNavigate,
+						event: e,
+					})();
+				}}
 			/>
 			<Card data-testid="service_latency">
 				<GraphContainer>

frontend/src/container/MetricsApplication/Tabs/util.ts

@@ -42,7 +42,8 @@ interface OnViewTracePopupClickProps {
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
-	safeNavigate: (url: string) => void;
+	safeNavigate: (url: string, event?: React.MouseEvent) => void;
+	event?: React.MouseEvent;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -51,8 +52,8 @@ interface OnViewAPIMonitoringPopupClickProps {
 	stepInterval?: number;
 	domainName: string;
 	isError: boolean;
-
-	safeNavigate: (url: string) => void;
+	event?: React.MouseEvent;
+	safeNavigate: (url: string, event?: React.MouseEvent) => void;
 }
 
 export function generateExplorerPath(
@@ -83,7 +84,7 @@ export function generateExplorerPath(
  * @param isViewLogsClicked - Whether this is for viewing logs vs traces
  * @param stepInterval - Time interval in seconds
  * @param safeNavigate - Navigation function
- 
+ * @param event - Event object
  */
 export function onViewTracePopupClick({
 	selectedTraceTags,
@@ -93,6 +94,7 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
+	event,
 }: OnViewTracePopupClickProps): VoidFunction {
 	return (): void => {
 		const endTime = secondsToMilliseconds(timestamp);
@@ -118,7 +120,11 @@ export function onViewTracePopupClick({
 			queryString,
 		);
 
-		safeNavigate(newPath);
+		if (event) {
+			safeNavigate(newPath, event);
+		} else {
+			safeNavigate(newPath);
+		}
 	};
 }
 
@@ -149,6 +155,7 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
+	event,
 }: OnViewAPIMonitoringPopupClickProps): VoidFunction {
 	return (): void => {
 		const endTime = timestamp + (stepInterval || 60);
@@ -190,7 +197,11 @@ export function onViewAPIMonitoringPopupClick({
 			filters,
 		);
 
-		safeNavigate(newPath);
+		if (event) {
+			safeNavigate(newPath, event);
+		} else {
+			safeNavigate(newPath);
+		}
 	};
 }
 

frontend/src/container/NewExplorerCTA/index.tsx

@@ -21,17 +21,25 @@ function NewExplorerCTA(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const onClickHandler = useCallback((): void => {
-		if (location.pathname === ROUTES.LOGS_EXPLORER) {
-			history.push(ROUTES.OLD_LOGS_EXPLORER);
-		} else if (location.pathname === ROUTES.TRACE) {
-			history.push(ROUTES.TRACES_EXPLORER);
-		} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
-			history.push(ROUTES.LOGS_EXPLORER);
-		} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
-			history.push(ROUTES.TRACE);
-		}
-	}, [location.pathname]);
+	const onClickHandler = useCallback(
+		(event?: React.MouseEvent): void => {
+			let targetRoute = '';
+			if (location.pathname === ROUTES.LOGS_EXPLORER) {
+				targetRoute = ROUTES.OLD_LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACE) {
+				targetRoute = ROUTES.TRACES_EXPLORER;
+			} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
+				targetRoute = ROUTES.LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+				targetRoute = ROUTES.TRACE;
+			}
+
+			if (targetRoute) {
+				history.push(targetRoute, event);
+			}
+		},
+		[location.pathname],
+	);
 
 	const button = useMemo(
 		() => (

frontend/src/container/NoLogs/NoLogs.tsx

@@ -38,7 +38,7 @@ export default function NoLogs({
 			} else {
 				link = ROUTES.GET_STARTED_LOGS_MANAGEMENT;
 			}
-			history.push(link);
+			history.push(link, e);
 		} else if (dataSource === 'traces') {
 			window.open(DOCLINKS.TRACES_EXPLORER_EMPTY_STATE, '_blank');
 		} else if (dataSource === DataSource.METRICS) {

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -61,7 +61,7 @@ export interface ModuleProps {
 export interface SelectedModuleStepProps {
 	id: string;
 	title: string;
-	component: any;
+	component: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export const useCases = {
@@ -317,10 +317,18 @@ export default function Onboarding(): JSX.Element {
 			{activeStep === 1 && (
 				<div className="onboarding-page">
 					<div
-						onClick={(): void => {
+						onClick={(e): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							history.push(ROUTES.APPLICATION);
+							history.push(ROUTES.APPLICATION, e);
 						}}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								logEvent('Onboarding V2: Skip Button Clicked', {});
+								history.push(ROUTES.APPLICATION);
+							}
+						}}
+						role="button"
+						tabIndex={0}
 						className="skip-to-console"
 					>
 						{t('skip')}
@@ -332,7 +340,7 @@ export default function Onboarding(): JSX.Element {
 					<div className="modulesContainer">
 						<div className="moduleContainerRowStyles">
 							{Object.keys(ModulesMap).map((module) => {
-								const selectedUseCase = (useCases as any)[module];
+								const selectedUseCase = (useCases as any)[module]; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 								return (
 									<Card

frontend/src/hooks/useSafeNavigate.ts

@@ -83,6 +83,84 @@ const isDefaultNavigation = (currentUrl: URL, targetUrl: URL): boolean => {
 
 	return newKeys.length > 0;
 };
+// Helper function to determine if an argument is an event
+const isEventObject = (arg: any): boolean =>
+	arg &&
+	(arg instanceof MouseEvent ||
+		arg instanceof KeyboardEvent ||
+		arg.nativeEvent instanceof MouseEvent ||
+		arg.nativeEvent instanceof KeyboardEvent ||
+		arg.metaKey !== undefined ||
+		arg.ctrlKey !== undefined);
+
+// Helper function to extract options from arguments
+const extractOptions = (
+	optionsOrEvent?:
+		| NavigateOptions
+		| React.MouseEvent
+		| MouseEvent
+		| KeyboardEvent,
+	options?: NavigateOptions,
+): NavigateOptions => {
+	const isEvent = isEventObject(optionsOrEvent);
+	const actualOptions = isEvent ? options : (optionsOrEvent as NavigateOptions);
+
+	const shouldOpenInNewTab =
+		isEvent &&
+		((optionsOrEvent as any).metaKey || (optionsOrEvent as any).ctrlKey);
+
+	return {
+		...actualOptions,
+		newTab: shouldOpenInNewTab || actualOptions?.newTab,
+	};
+};
+
+// Helper function to create target URL
+const createTargetUrl = (
+	to: string | SafeNavigateParams,
+	location: { pathname: string; search: string },
+): URL => {
+	if (typeof to === 'string') {
+		return new URL(to, window.location.origin);
+	}
+	return new URL(
+		`${to.pathname || location.pathname}${to.search || ''}`,
+		window.location.origin,
+	);
+};
+
+// Helper function to handle new tab navigation
+const handleNewTabNavigation = (
+	to: string | SafeNavigateParams,
+	location: { pathname: string; search: string },
+): void => {
+	const targetPath =
+		typeof to === 'string'
+			? to
+			: `${to.pathname || location.pathname}${to.search || ''}`;
+	window.open(targetPath, '_blank');
+};
+
+// Helper function to perform navigation
+const performNavigation = (
+	to: string | SafeNavigateParams,
+	navigationOptions: NavigateOptions,
+	navigate: any,
+	location: { pathname: string; search: string },
+): void => {
+	if (typeof to === 'string') {
+		navigate(to, navigationOptions);
+	} else {
+		navigate(
+			{
+				pathname: to.pathname || location.pathname,
+				search: to.search,
+			},
+			navigationOptions,
+		);
+	}
+};
+
 export const useSafeNavigate = (
 	{ preventSameUrlNavigation }: UseSafeNavigateProps = {
 		preventSameUrlNavigation: true,
@@ -90,6 +168,11 @@ export const useSafeNavigate = (
 ): {
 	safeNavigate: (
 		to: string | SafeNavigateParams,
+		optionsOrEvent?:
+			| NavigateOptions
+			| React.MouseEvent
+			| MouseEvent
+			| KeyboardEvent,
 		options?: NavigateOptions,
 	) => void;
 } => {
@@ -97,30 +180,25 @@ export const useSafeNavigate = (
 	const location = useLocation();
 
 	const safeNavigate = useCallback(
-		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
+		(
+			to: string | SafeNavigateParams,
+			optionsOrEvent?:
+				| NavigateOptions
+				| React.MouseEvent
+				| MouseEvent
+				| KeyboardEvent,
+			options?: NavigateOptions,
+		) => {
+			const finalOptions = extractOptions(optionsOrEvent, options);
 			const currentUrl = new URL(
 				`${location.pathname}${location.search}`,
 				window.location.origin,
 			);
+			const targetUrl = createTargetUrl(to, location);
 
-			let targetUrl: URL;
-
-			if (typeof to === 'string') {
-				targetUrl = new URL(to, window.location.origin);
-			} else {
-				targetUrl = new URL(
-					`${to.pathname || location.pathname}${to.search || ''}`,
-					window.location.origin,
-				);
-			}
-
-			// If newTab is true, open in new tab and return early
-			if (options?.newTab) {
-				const targetPath =
-					typeof to === 'string'
-						? to
-						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(targetPath, '_blank');
+			// Handle new tab navigation
+			if (finalOptions?.newTab) {
+				handleNewTabNavigation(to, location);
 				return;
 			}
 
@@ -132,23 +210,13 @@ export const useSafeNavigate = (
 			}
 
 			const navigationOptions = {
-				...options,
-				replace: isDefaultParamsNavigation || options?.replace,
+				...finalOptions,
+				replace: isDefaultParamsNavigation || finalOptions?.replace,
 			};
 
-			if (typeof to === 'string') {
-				navigate(to, navigationOptions);
-			} else {
-				navigate(
-					{
-						pathname: to.pathname || location.pathname,
-						search: to.search,
-					},
-					navigationOptions,
-				);
-			}
+			performNavigation(to, navigationOptions, navigate, location);
 		},
-		[navigate, location.pathname, location.search, preventSameUrlNavigation],
+		[navigate, location, preventSameUrlNavigation],
 	);
 
 	return { safeNavigate };

frontend/src/lib/history.ts

@@ -1,3 +1,53 @@
-import { createBrowserHistory } from 'history';
+import { createBrowserHistory, History } from 'history';
 
-export default createBrowserHistory();
+// Create the base history instance
+const baseHistory = createBrowserHistory();
+
+// Extend the History interface to include enhanced push method
+interface EnhancedHistory extends History {
+	push: {
+		(path: string, state?: any): void;
+		(
+			path: string,
+			event?: React.MouseEvent | MouseEvent | KeyboardEvent,
+			state?: any,
+		): void;
+	};
+	originalPush: History['push'];
+}
+
+// Create enhanced history with overridden push method
+const history = baseHistory as EnhancedHistory;
+
+// Store the original push method
+history.originalPush = baseHistory.push;
+
+// Override push to handle meta/ctrl key events
+history.push = function (
+	path: string,
+	eventOrState?: React.MouseEvent | MouseEvent | KeyboardEvent | any,
+	state?: any,
+): void {
+	// Check if second argument is an event object
+	const isEvent =
+		eventOrState &&
+		(eventOrState instanceof MouseEvent ||
+			eventOrState instanceof KeyboardEvent ||
+			eventOrState.nativeEvent instanceof MouseEvent ||
+			eventOrState.nativeEvent instanceof KeyboardEvent ||
+			eventOrState.metaKey !== undefined ||
+			eventOrState.ctrlKey !== undefined);
+
+	// If it's an event and meta/ctrl key is pressed, open in new tab
+	if (isEvent && (eventOrState.metaKey || eventOrState.ctrlKey)) {
+		window.open(path, '_blank');
+		return;
+	}
+
+	// Otherwise, use normal navigation
+	// If eventOrState is not an event, treat it as state
+	const actualState = isEvent ? state : eventOrState;
+	history.originalPush(path, actualState);
+};
+
+export default history;

frontend/src/pages/Logs/index.tsx

@@ -79,7 +79,7 @@ function OldLogsExplorer(): JSX.Element {
 		});
 		const params = new URLSearchParams(location.search);
 		params.set(QueryParams.order, value);
-		history.push({ search: params.toString() });
+		history.push(`${history.location.pathname}?${params.toString()}`);
 	};
 
 	return (

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -784,6 +784,7 @@ describe('TracesExplorer - ', () => {
 
 		expect(historyPush).toHaveBeenCalledWith(
 			expect.stringContaining(`${ROUTES.ALERTS_NEW}`),
+			expect.any(Object),
 		);
 	});
 });