chore: update test cases

* fix: json qb array expression

* fix: comment

* fix: unnecessary casting of float64

* revert: changes

---------

Co-authored-by: Nityananda Gohain <nityanandagohain@gmail.com>

README.de-de.md

@@ -176,25 +176,6 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
 Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #contributing Kanal in unserer [slack community](https://signoz.io/slack)
 
-### Unsere Projektbetreuer
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### Frontend
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## Dokumentation

README.md

@@ -221,34 +221,6 @@ We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
-### Project maintainers
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
-- [Ekansh Gupta](https://github.com/eKuG)
-- [Aniket Agarwal](https://github.com/aniketio-ctrl)
-
-#### Frontend
-
-- [Yunus M](https://github.com/YounixM)
-- [Vikrant Gupta](https://github.com/vikrantgupta25)
-- [Sagar Rajput](https://github.com/SagarRajput-7)
-- [Shaheer Kochai](https://github.com/ahmadshaheer)
-- [Amlan Kumar Nandy](https://github.com/amlannandy)
-- [Sahil Khan](https://github.com/sawhil)
-- [Aditya Singh](https://github.com/aks07)
-- [Abhi Kumar](https://github.com/ahrefabhi)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-- [Vibhu Pandey](https://github.com/therealpandey)
-
 <br /><br />
 
 

README.zh-cn.md

@@ -187,25 +187,6 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
-### 项目维护人员
-
-#### 后端
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### 前端
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### 运维开发
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## 文档

conf/example.yaml

@@ -294,7 +294,6 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
-      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -309,3 +308,14 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
+  root:
+    # Whether to enable the root user. When enabled, a root user is provisioned
+    # on startup using the email and password below. The root user cannot be
+    # deleted, updated, or have their password changed through the UI.
+    enabled: false
+    # The email address of the root user.
+    email: ""
+    # The password of the root user. Must meet password requirements.
+    password: ""
+    # The name of the organization to create or look up for the root user.
+    org_name: default

deploy/docker-swarm/docker-compose.ha.yaml

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/api/openapi.yml

@@ -4678,6 +4678,8 @@ components:
           type: string
         id:
           type: string
+        isRoot:
+          type: boolean
         orgId:
           type: string
         role:

ee/query-service/app/api/api.go

@@ -45,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -58,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	})
+	}, config)
 
 	if err != nil {
 		return nil, err

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
 	if err != nil {
 		return nil, err
 	}

frontend/__mocks__/useSafeNavigate.ts

@@ -2,6 +2,8 @@
 interface SafeNavigateOptions {
 	replace?: boolean;
 	state?: unknown;
+	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateTo {
@@ -20,9 +22,7 @@ interface UseSafeNavigateReturn {
 
 export const useSafeNavigate = (): UseSafeNavigateReturn => ({
 	safeNavigate: jest.fn(
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
-			console.log(`Mock safeNavigate called with:`, to, options);
-		},
+		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
 	) as jest.MockedFunction<
 		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
 	>,

frontend/package.json

@@ -55,6 +55,7 @@
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
+		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/table": "0.3.7",

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1542,6 +1542,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	id?: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
 	/**
 	 * @type string
 	 */

frontend/src/auto-import-registry.d.ts

@@ -21,6 +21,7 @@ import '@signozhq/design-tokens';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
+import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/table';

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -10,6 +11,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -28,6 +31,15 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -72,29 +84,40 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const renderFooter = useCallback(
@@ -118,6 +141,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -139,7 +163,24 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="host-metrics-logs-list-container">{renderContent}</div>
+				<div
+					className="host-metrics-logs-list-container"
+					data-log-detail-ignore="true"
+				>
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,6 +13,9 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
+	logs?: ILog[];
+	onNavigateLog?: (log: ILog) => void;
+	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -15,6 +15,8 @@
 		}
 
 		.log-detail-drawer__title-right {
+			display: flex;
+			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -66,6 +68,10 @@
 		margin-bottom: 16px;
 	}
 
+	.log-detail-drawer__content {
+		height: 100%;
+	}
+
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -183,9 +189,115 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-200);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
+	.log-arrows {
+		display: flex;
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 6px;
+		padding: 2px 6px;
+		align-items: center;
+		margin-left: 8px;
+	}
+
+	.log-arrow-btn {
+		padding: 0;
+		min-width: 28px;
+		height: 28px;
+		border-radius: 4px;
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-ink-400);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
+	}
+
+	.log-arrow-btn[disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);
+
+		.log-arrow-btn:hover:not([disabled]) {
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
 }
 
 .lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -252,4 +364,33 @@
 			color: var(--text-ink-300);
 		}
 	}
+
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,8 +32,12 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
+	ArrowDown,
+	ArrowUp,
 	BarChart2,
 	Braces,
+	ChevronDown,
+	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -60,6 +64,9 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
+	logs,
+	onNavigateLog,
+	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -74,6 +81,78 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
+	// Handle clicks outside to close drawer, except on explicitly ignored regions
+	useEffect(() => {
+		const handleClickOutside = (e: MouseEvent): void => {
+			const target = e.target as HTMLElement;
+
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
+				return;
+			}
+
+			// Close the drawer for any other outside click
+			onClose?.(e as any);
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [onClose]);
+
+	// Keyboard navigation - handle up/down arrow keys
+	// Only listen when in OVERVIEW tab
+	useEffect(() => {
+		if (
+			!logs ||
+			!onNavigateLog ||
+			logs.length === 0 ||
+			selectedView !== VIEW_TYPES.OVERVIEW
+		) {
+			return;
+		}
+
+		const handleKeyDown = (e: KeyboardEvent): void => {
+			const currentIndex = logs.findIndex((l) => l.id === log.id);
+			if (currentIndex === -1) {
+				return;
+			}
+
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to previous log
+				if (currentIndex > 0) {
+					const prevLog = logs[currentIndex - 1];
+					onNavigateLog(prevLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(prevLog.id);
+					}
+				}
+			} else if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to next log
+				if (currentIndex < logs.length - 1) {
+					const nextLog = logs[currentIndex + 1];
+					onNavigateLog(nextLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(nextLog.id);
+					}
+				}
+			}
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
+
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -135,7 +214,7 @@ function LogDetailInner({
 	};
 
 	// Go to logs explorer page with the log data
-	const handleOpenInExplorer = (): void => {
+	const handleOpenInExplorer = (e?: React.MouseEvent): void => {
 		const queryParams = {
 			[QueryParams.activeLogId]: `"${log?.id}"`,
 			[QueryParams.startTime]: minTime?.toString() || '',
@@ -148,7 +227,9 @@ function LogDetailInner({
 				),
 			),
 		};
-		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`, {
+			event: e,
+		});
 	};
 
 	const handleQueryExpressionChange = useCallback(
@@ -227,32 +308,87 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
+	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
+	const isPrevDisabled =
+		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
+	const isNextDisabled =
+		!logs ||
+		!onNavigateLog ||
+		logs.length === 0 ||
+		currentLogIndex === logs.length - 1;
+
+	type HandleNavigateLogParams = {
+		direction: 'next' | 'previous';
+	};
+
+	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
+		if (!logs || !onNavigateLog || currentLogIndex === -1) {
+			return;
+		}
+		if (direction === 'previous' && !isPrevDisabled) {
+			const prevLog = logs[currentLogIndex - 1];
+			onNavigateLog(prevLog);
+			onScrollToLog?.(prevLog.id);
+		} else if (direction === 'next' && !isNextDisabled) {
+			const nextLog = logs[currentLogIndex + 1];
+			onNavigateLog(nextLog);
+			onScrollToLog?.(nextLog.id);
+		}
+	};
 
 	return (
 		<Drawer
 			width="60%"
-			maskStyle={{ background: 'none' }}
+			mask={false}
+			maskClosable={false}
 			title={
-				<div className="log-detail-drawer__title">
+				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					{showOpenInExplorerBtn && (
-						<div className="log-detail-drawer__title-right">
-							<Button
-								className="open-in-explorer-btn"
-								icon={<Compass size={16} />}
-								onClick={handleOpenInExplorer}
+					<div className="log-detail-drawer__title-right">
+						<div className="log-arrows">
+							<Tooltip
+								title={isPrevDisabled ? '' : 'Move to previous log'}
+								placement="top"
+								mouseLeaveDelay={0}
 							>
-								Open in Explorer
-							</Button>
+								<Button
+									icon={<ChevronUp size={14} />}
+									className="log-arrow-btn log-arrow-btn-up"
+									disabled={isPrevDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
+								/>
+							</Tooltip>
+							<Tooltip
+								title={isNextDisabled ? '' : 'Move to next log'}
+								placement="top"
+								mouseLeaveDelay={0}
+							>
+								<Button
+									icon={<ChevronDown size={14} />}
+									className="log-arrow-btn log-arrow-btn-down"
+									disabled={isNextDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'next' })}
+								/>
+							</Tooltip>
 						</div>
-					)}
+						{showOpenInExplorerBtn && (
+							<div>
+								<Button
+									className="open-in-explorer-btn"
+									icon={<Compass size={16} />}
+									onClick={handleOpenInExplorer}
+								>
+									Open in Explorer
+								</Button>
+							</div>
+						)}
+					</div>
 				</div>
 			}
 			placement="right"
-			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -263,138 +399,164 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__log">
-				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-				</Tooltip>
+			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__log">
+					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+					</Tooltip>
 
-				<div className="log-overflow-shadow">&nbsp;</div>
-			</div>
+					<div className="log-overflow-shadow">&nbsp;</div>
+				</div>
 
-			<div className="tabs-and-search">
-				<Radio.Group
-					className="views-tabs"
-					onChange={handleModeChange}
-					value={selectedView}
-				>
-					<Radio.Button
-						className={
-							// eslint-disable-next-line sonarjs/no-duplicate-string
-							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.OVERVIEW}
+				<div className="tabs-and-search">
+					<Radio.Group
+						className="views-tabs"
+						onChange={handleModeChange}
+						value={selectedView}
 					>
-						<div className="view-title">
-							<Table size={14} />
-							Overview
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
-						value={VIEW_TYPES.JSON}
-					>
-						<div className="view-title">
-							<Braces size={14} />
-							JSON
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.CONTEXT}
-					>
-						<div className="view-title">
-							<TextSelect size={14} />
-							Context
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.INFRAMETRICS}
-					>
-						<div className="view-title">
-							<BarChart2 size={14} />
-							Metrics
-						</div>
-					</Radio.Button>
-				</Radio.Group>
+						<Radio.Button
+							className={
+								// eslint-disable-next-line sonarjs/no-duplicate-string
+								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.OVERVIEW}
+						>
+							<div className="view-title">
+								<Table size={14} />
+								Overview
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.JSON}
+						>
+							<div className="view-title">
+								<Braces size={14} />
+								JSON
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.CONTEXT}
+						>
+							<div className="view-title">
+								<TextSelect size={14} />
+								Context
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.INFRAMETRICS}
+						>
+							<div className="view-title">
+								<BarChart2 size={14} />
+								Metrics
+							</div>
+						</Radio.Button>
+					</Radio.Group>
+
+					<div className="log-detail-drawer__actions">
+						{selectedView === VIEW_TYPES.CONTEXT && (
+							<Tooltip
+								title="Show Filters"
+								placement="topLeft"
+								aria-label="Show Filters"
+							>
+								<Button
+									className="action-btn"
+									icon={<Filter size={16} />}
+									onClick={handleFilterVisible}
+								/>
+							</Tooltip>
+						)}
 
-				<div className="log-detail-drawer__actions">
-					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title="Show Filters"
+							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
 							placement="topLeft"
-							aria-label="Show Filters"
+							aria-label={
+								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+							}
 						>
 							<Button
 								className="action-btn"
-								icon={<Filter size={16} />}
-								onClick={handleFilterVisible}
+								icon={<Copy size={16} />}
+								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 							/>
 						</Tooltip>
-					)}
-
-					<Tooltip
-						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-						placement="topLeft"
-						aria-label={
-							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-						}
-					>
-						<Button
-							className="action-btn"
-							icon={<Copy size={16} />}
-							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+					</div>
+				</div>
+				{isFilterVisible && contextQuery?.builder.queryData[0] && (
+					<div className="log-detail-drawer-query-container">
+						<QuerySearch
+							onChange={(value): void => handleQueryExpressionChange(value, 0)}
+							dataSource={DataSource.LOGS}
+							queryData={contextQuery?.builder.queryData[0]}
+							onRun={handleRunQuery}
 						/>
-					</Tooltip>
-				</div>
-			</div>
-			{isFilterVisible && contextQuery?.builder.queryData[0] && (
-				<div className="log-detail-drawer-query-container">
-					<QuerySearch
-						onChange={(value): void => handleQueryExpressionChange(value, 0)}
-						dataSource={DataSource.LOGS}
-						queryData={contextQuery?.builder.queryData[0]}
-						onRun={handleRunQuery}
+					</div>
+				)}
+
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<Overview
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+						isListViewPanel={isListViewPanel}
+						selectedOptions={options}
+						listViewPanelSelectedFields={listViewPanelSelectedFields}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
-				</div>
-			)}
+				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
-			{selectedView === VIEW_TYPES.OVERVIEW && (
-				<Overview
-					logData={log}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onClickActionItem}
-					isListViewPanel={isListViewPanel}
-					selectedOptions={options}
-					listViewPanelSelectedFields={listViewPanelSelectedFields}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+				{selectedView === VIEW_TYPES.CONTEXT && (
+					<ContextView
+						log={log}
+						filters={filters}
+						contextQuery={contextQuery}
+						isEdit={isEdit}
+					/>
+				)}
+				{selectedView === VIEW_TYPES.INFRAMETRICS && (
+					<InfraMetrics
+						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+						timestamp={log.timestamp.toString()}
+						dataSource={DataSource.LOGS}
+					/>
+				)}
 
-			{selectedView === VIEW_TYPES.CONTEXT && (
-				<ContextView
-					log={log}
-					filters={filters}
-					contextQuery={contextQuery}
-					isEdit={isEdit}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.INFRAMETRICS && (
-				<InfraMetrics
-					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-					timestamp={log.timestamp.toString()}
-					dataSource={DataSource.LOGS}
-				/>
-			)}
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<div className="log-detail-drawer__footer-hint">
+						<div className="log-detail-drawer__footer-hint-content">
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								Use
+							</Typography.Text>
+							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+							<span>/</span>
+							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								to view previous/next log
+							</Typography.Text>
+						</div>
+					</div>
+				)}
+			</div>
 		</Drawer>
 	);
 }

frontend/src/components/Logs/ListLogView/index.tsx

@@ -2,13 +2,11 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -104,12 +102,17 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (log: ILog) => void;
+	onSetActiveLog: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -120,7 +123,8 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	handleChangeSelectedView,
+	isActiveLog,
+	onClearActiveLog,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -129,35 +133,24 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
-	const {
-		activeLog: activeContextLog,
-		onAddToQuery: handleAddToQuery,
-		onSetActiveLog: handleSetActiveContextLog,
-		onClearActiveLog: handleClearActiveContextLog,
-	} = useActiveLog();
-
 	const isDarkMode = useIsDarkMode();
 
-	const handlerClearActiveContextLog = useCallback(
-		(event: React.MouseEvent | React.KeyboardEvent) => {
-			event.preventDefault();
-			event.stopPropagation();
-			handleClearActiveContextLog();
-		},
-		[handleClearActiveContextLog],
-	);
-
 	const handleDetailedView = useCallback(() => {
+		if (isActiveLog) {
+			onClearActiveLog?.();
+			return;
+		}
+
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog]);
+	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			handleSetActiveContextLog(logData);
+			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
 		},
-		[logData, handleSetActiveContextLog],
+		[logData, onSetActiveLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -186,11 +179,7 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={
-					isHighlighted ||
-					activeLog?.id === logData.id ||
-					activeContextLog?.id === logData.id
-				}
+				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -251,15 +240,6 @@ function ListLogView({
 					/>
 				)}
 			</Container>
-			{activeContextLog && (
-				<LogDetail
-					log={activeContextLog}
-					onAddToQuery={handleAddToQuery}
-					selectedTab={VIEW_TYPES.CONTEXT}
-					onClose={handlerClearActiveContextLog}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</>
 	);
 }

frontend/src/components/Logs/RawLogView/index.tsx

@@ -1,19 +1,15 @@
 import {
-	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
-	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerProps, Tooltip } from 'antd';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+import { Tooltip } from 'antd';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -39,7 +35,8 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	handleChangeSelectedView,
+	onSetActiveLog,
+	onClearActiveLog,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -48,15 +45,6 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
-
-	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
-
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -134,34 +122,24 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-			} else {
-				onSetActiveLog(data);
-				setSelectedTab(VIEW_TYPES.OVERVIEW);
+				return;
+			}
+			if (isActiveLog) {
+				onClearActiveLog?.();
+				return;
 			}
-		},
-		[isReadOnly, data, onSetActiveLog, onLogClick],
-	);
 
-	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
-		(
-			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
-		) => {
-			event.preventDefault();
-			event.stopPropagation();
-
-			onClearActiveLog();
-			setSelectedTab(undefined);
+			onSetActiveLog?.(data);
 		},
-		[onClearActiveLog],
+		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			// handleSetActiveContextLog(data);
-			setSelectedTab(VIEW_TYPES.CONTEXT);
-			onSetActiveLog(data);
+
+			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
 		},
 		[data, onSetActiveLog],
 	);
@@ -181,7 +159,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={activeLog?.id === data.id || isActiveLog}
+			$isActiveLog={isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -218,17 +196,6 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
-
-			{selectedTab && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</RawLogViewContainer>
 	);
 }

frontend/src/components/Logs/RawLogView/styles.ts

@@ -45,9 +45,6 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
-	${({ $isActiveLog, $logType }): string =>
-		getActiveLogBackground($isActiveLog, true, $logType)}
-
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -16,6 +17,11 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -70,8 +70,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 								</Tag>
 							) : undefined
 						}
-						onClick={(): void => {
-							onSelect(option.selection);
+						onClick={(e): void => {
+							onSelect(option.selection, e);
 						}}
 						data-testid={`alert-type-card-${option.selection}`}
 					>
@@ -108,7 +108,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 }
 
 interface SelectAlertTypeProps {
-	onSelect: (typ: AlertTypes) => void;
+	onSelect: (type: AlertTypes, event?: React.MouseEvent) => void;
 }
 
 export default SelectAlertType;

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -33,9 +33,9 @@ function Footer(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
 
-	const handleDiscard = (): void => {
+	const handleDiscard = (e: React.MouseEvent): void => {
 		discardAlertRule();
-		safeNavigate('/alerts');
+		safeNavigate('/alerts', { event: e });
 	};
 
 	const alertValidationMessage = useMemo(

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -9,74 +9,6 @@
 		padding: 0px;
 	}
 
-	.dashboard-header {
-		border-bottom: 1px solid var(--bg-slate-400);
-		display: flex;
-		justify-content: space-between;
-		gap: 16px;
-		align-items: center;
-		padding: 0 8px;
-		box-sizing: border-box;
-
-		.dashboard-breadcrumbs {
-			width: 100%;
-			height: 48px;
-			display: flex;
-			gap: 6px;
-			align-items: center;
-			max-width: 80%;
-
-			.dashboard-btn {
-				display: flex;
-				align-items: center;
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				padding: 0px;
-				height: 20px;
-			}
-
-			.dashboard-btn:hover {
-				background-color: unset;
-			}
-
-			.id-btn {
-				display: flex;
-				align-items: center;
-				padding: 0px 2px;
-				border-radius: 2px;
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				height: 20px;
-
-				max-width: calc(100% - 120px);
-
-				span {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-
-				.ant-btn-icon {
-					margin-inline-end: 4px;
-				}
-			}
-			.id-btn:hover {
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-300);
-			}
-		}
-	}
-
 	.dashboard-details {
 		display: flex;
 		justify-content: space-between;
@@ -535,15 +467,6 @@
 	.dashboard-description-container {
 		color: var(--bg-ink-400);
 
-		.dashboard-header {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-			.dashboard-breadcrumbs {
-				.dashboard-btn {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
 		.dashboard-details {
 			.left-section {
 				.dashboard-title {

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -161,6 +161,7 @@ describe('Dashboard landing page actions header tests', () => {
 		// Verify navigation was called with correct URL
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			'/dashboard?columnKey=updatedAt&order=descend&page=1&search=',
+			expect.objectContaining({ event: expect.any(Object) }),
 		);
 
 		// Ensure the URL contains only essential dashboard list params

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,9 +16,7 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -27,7 +25,6 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import {
 	Check,
@@ -37,7 +34,6 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
-	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -51,6 +47,7 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
@@ -71,7 +68,6 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -80,7 +76,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
-		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -292,17 +287,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
-	function goToListPage(): void {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
-
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}
-
 	const {
 		data: publicDashboardResponse,
 		isLoading: isLoadingPublicDashboardData,
@@ -351,32 +335,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<div className="dashboard-header">
-				<section className="dashboard-breadcrumbs">
-					<Button
-						type="text"
-						icon={<LayoutGrid size={14} />}
-						className="dashboard-btn"
-						onClick={(): void => goToListPage()}
-					>
-						Dashboard /
-					</Button>
-					<Button type="text" className="id-btn dashboard-name-btn">
-						<img
-							src={image}
-							alt="dashboard-icon"
-							style={{ height: '14px', width: '14px' }}
-						/>
-						{title}
-					</Button>
-				</section>
-
-				<HeaderRightSection
-					enableAnnouncements={false}
-					enableShare
-					enableFeedback
-				/>
-			</div>
+			<DashboardHeader />
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -0,0 +1,71 @@
+.dashboard-breadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+
+	.dashboard-btn {
+		display: flex;
+		align-items: center;
+		color: var(--bg-vanilla-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		padding: 0px;
+		height: 20px;
+	}
+
+	.dashboard-btn:hover {
+		background-color: unset;
+	}
+
+	.id-btn {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0px 2px;
+		border-radius: 2px;
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		height: 20px;
+
+		max-width: calc(100% - 120px);
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.ant-btn-icon {
+			margin-inline-end: 4px;
+		}
+	}
+	.id-btn:hover {
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboard-icon-image {
+		height: 14px;
+		width: 14px;
+	}
+}
+
+.lightMode {
+	.dashboard-breadcrumbs {
+		.dashboard-btn {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback } from 'react';
+import { Button } from 'antd';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { LayoutGrid } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { DashboardData } from 'types/api/dashboard/getAll';
+
+import { Base64Icons } from '../../DashboardSettings/General/utils';
+
+import './DashboardBreadcrumbs.styles.scss';
+
+function DashboardBreadcrumbs(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { selectedDashboard, listSortOrder } = useDashboard();
+
+	const selectedData = selectedDashboard
+		? {
+				...selectedDashboard.data,
+				uuid: selectedDashboard.id,
+		  }
+		: ({} as DashboardData);
+
+	const { title = '', image = Base64Icons[0] } = selectedData || {};
+
+	const goToListPage = useCallback(
+		(e?: React.MouseEvent) => {
+			const urlParams = new URLSearchParams();
+			urlParams.set('columnKey', listSortOrder.columnKey as string);
+			urlParams.set('order', listSortOrder.order as string);
+			urlParams.set('page', listSortOrder.pagination as string);
+			urlParams.set('search', listSortOrder.search as string);
+
+			const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+			safeNavigate(generatedUrl, { event: e });
+		},
+		[listSortOrder, safeNavigate],
+	);
+
+	return (
+		<div className="dashboard-breadcrumbs">
+			<Button
+				type="text"
+				icon={<LayoutGrid size={14} />}
+				className="dashboard-btn"
+				onClick={goToListPage}
+			>
+				Dashboard /
+			</Button>
+			<Button type="text" className="id-btn dashboard-name-btn">
+				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
+				{title}
+			</Button>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.styles.scss

@@ -0,0 +1,15 @@
+.dashboard-header {
+	border-bottom: 1px solid var(--bg-slate-400);
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+	align-items: center;
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
+.lightMode {
+	.dashboard-header {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardBreadcrumbs from './DashboardBreadcrumbs';
+
+import './DashboardHeader.styles.scss';
+
+function DashboardHeader(): JSX.Element {
+	return (
+		<div className="dashboard-header">
+			<DashboardBreadcrumbs />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardHeader);

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -23,6 +23,7 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
+	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -36,6 +37,9 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
+			if (!showLegend) {
+				return null;
+			}
 			return (
 				<Legend
 					config={config}
@@ -44,7 +48,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -60,6 +64,7 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
+				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	HistogramTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { HistogramChartProps } from '../types';
+
+export default function Histogram(props: HistogramChartProps): JSX.Element {
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		isQueriesMerged,
+		...rest
+	} = props;
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: HistogramTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <HistogramTooltip {...tooltipProps} />;
+		},
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+	);
+
+	return (
+		<ChartWrapper
+			showLegend={!isQueriesMerged}
+			{...rest}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,6 +7,7 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
+	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -17,6 +18,7 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
+	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -26,14 +28,20 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {}
+
+export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
+	isQueriesMerged?: boolean;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -0,0 +1,69 @@
+import { renderHook } from '@testing-library/react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
+
+jest.mock('providers/Dashboard/Dashboard');
+
+type MockHTMLElement = {
+	scrollIntoView: jest.Mock;
+	focus: jest.Mock;
+};
+
+function createMockElement(): MockHTMLElement {
+	return {
+		scrollIntoView: jest.fn(),
+		focus: jest.fn(),
+	};
+}
+
+describe('useScrollWidgetIntoView', () => {
+	const mockedUseDashboard = useDashboard as jest.MockedFunction<
+		typeof useDashboard
+	>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'widget-id',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'center',
+		});
+		expect(mockElement.focus).toHaveBeenCalled();
+		expect(setToScrollWidgetId).toHaveBeenCalledWith('');
+	});
+
+	it('does nothing when toScrollWidgetId does not match widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'other-widget',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).not.toHaveBeenCalled();
+		expect(mockElement.focus).not.toHaveBeenCalled();
+		expect(setToScrollWidgetId).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+/**
+ * Scrolls the given widget container into view when the dashboard
+ * requests it via `toScrollWidgetId`.
+ *
+ * Intended for use in panel components that render a single widget.
+ */
+export function useScrollWidgetIntoView<T extends HTMLElement>(
+	widgetId: string,
+	widgetContainerRef: RefObject<T>,
+): void {
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widgetId) {
+			widgetContainerRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			widgetContainerRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widgetId, widgetContainerRef]);
+}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
+	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
+			if (!showLegend) {
+				return {
+					width: containerWidth,
+					height: containerHeight,
+					legendWidth: 0,
+					legendHeight: 0,
+					averageLegendWidth: MAX_LEGEND_WIDTH,
+				};
+			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<div
+						className="chart-layout__legend-wrapper"
+						style={{
+							height: chartDimensions.legendHeight,
+							width: chartDimensions.legendWidth,
+						}}
+					>
+						{legendComponent(chartDimensions.averageLegendWidth)}
+					</div>
+				)}
 			</div>
 			{layoutChildren}
 		</div>

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -27,7 +27,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		onToggleModelHandler,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -36,16 +35,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useRef } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
+import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import Histogram from '../../charts/Histogram/Histogram';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import {
+	prepareHistogramPanelConfig,
+	prepareHistogramPanelData,
+} from './utils';
+
+import '../Panel.styles.scss';
+
+function HistogramPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useScrollWidgetIntoView(widget.id, graphRef);
+
+	const config = useMemo(() => {
+		return prepareHistogramPanelConfig({
+			widget,
+			isDarkMode,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			panelMode,
+		});
+	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareHistogramPanelData({
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			bucketWidth: widget?.bucketWidth,
+			bucketCount: widget?.bucketCount,
+			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
+		});
+	}, [
+		queryResponse?.data?.payload,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode || widget.mergeAllActiveQueries) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+		widget.mergeAllActiveQueries,
+	]);
+
+	return (
+		<div className="panel-container" ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<Histogram
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					isQueriesMerged={widget.mergeAllActiveQueries}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/__tests__/HistogramPanel.test.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable simple-import-sort/imports */
+import type { UseQueryResult } from 'react-query';
+import { render, screen } from 'tests/test-utils';
+
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { Widgets } from 'types/api/dashboard/getAll';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
+
+import HistogramPanel from '../HistogramPanel';
+import { HistogramChartProps } from 'container/DashboardContainer/visualization/charts/types';
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: jest.fn().mockReturnValue({ width: 800, height: 400 }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	__esModule: true,
+	// Provide a no-op provider component so AllTheProviders can render
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<>{children}</>
+	),
+	// And mock the hook used by HistogramPanel
+	useTimezone: jest.fn().mockReturnValue({
+		timezone: { value: 'UTC' },
+	}),
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView',
+	() => ({
+		useScrollWidgetIntoView: jest.fn(),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/Histogram/Histogram',
+	() => ({
+		__esModule: true,
+		default: (props: HistogramChartProps): JSX.Element => (
+			<div data-testid="histogram-chart">
+				<div data-testid="histogram-props">
+					{JSON.stringify({
+						legendPosition: props.legendConfig?.position,
+						isQueriesMerged: props.isQueriesMerged,
+						yAxisUnit: props.yAxisUnit,
+						decimalPrecision: props.decimalPrecision,
+					})}
+				</div>
+				{props.layoutChildren}
+			</div>
+		),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/components/ChartManager/ChartManager',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => (
+			<div data-testid="chart-manager">ChartManager</div>
+		),
+	}),
+);
+
+function createQueryResponse(
+	payloadOverrides: Partial<MetricRangePayloadProps> = {},
+): { data: { payload: MetricRangePayloadProps } } {
+	const basePayload: MetricRangePayloadProps = {
+		data: {
+			result: [
+				{
+					metric: {},
+					queryName: 'A',
+					legend: 'Series A',
+					values: [
+						[1, '10'],
+						[2, '20'],
+					],
+				},
+			],
+			resultType: 'matrix',
+			newResult: {
+				data: {
+					result: [],
+					resultType: 'matrix',
+				},
+			},
+		},
+	};
+
+	return {
+		data: {
+			payload: {
+				...basePayload,
+				...payloadOverrides,
+			},
+		},
+	};
+}
+
+type WidgetLike = {
+	id: string;
+	yAxisUnit: string;
+	decimalPrecision: number;
+	legendPosition: LegendPosition;
+	mergeAllActiveQueries: boolean;
+};
+
+function createWidget(overrides: Partial<WidgetLike> = {}): WidgetLike {
+	return {
+		id: 'widget-id',
+		yAxisUnit: 'ms',
+		decimalPrecision: 2,
+		legendPosition: LegendPosition.BOTTOM,
+		mergeAllActiveQueries: false,
+		...overrides,
+	};
+}
+
+describe('HistogramPanel', () => {
+	it('renders Histogram when container has dimensions', () => {
+		const widget = (createWidget() as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('histogram-chart')).toBeInTheDocument();
+	});
+
+	it('passes legend position and other props to Histogram', () => {
+		const widget = (createWidget({
+			legendPosition: LegendPosition.RIGHT,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		const propsJson = screen.getByTestId('histogram-props').textContent || '{}';
+		const parsed = JSON.parse(propsJson);
+
+		expect(parsed.legendPosition).toBe(LegendPosition.RIGHT);
+		expect(parsed.yAxisUnit).toBe('ms');
+		expect(parsed.decimalPrecision).toBe(2);
+	});
+
+	it('renders ChartManager in full view when queries are not merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: false,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('chart-manager')).toBeInTheDocument();
+	});
+
+	it('does not render ChartManager when queries are merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: true,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByTestId('chart-manager')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -0,0 +1,231 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { AlignedData } from 'uplot';
+import { incrRoundDn, roundDecimals } from 'utils/round';
+
+import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+import {
+	buildHistogramBuckets,
+	mergeAlignedDataTables,
+	prependNullBinToFirstHistogramSeries,
+	replaceUndefinedWithNullInAlignedData,
+} from '../utils/histogram';
+
+export interface PrepareHistogramPanelDataParams {
+	apiResponse: MetricRangePayloadProps;
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const HIST_SORT = (a: number, b: number): number => a - b;
+
+function extractNumericValues(
+	result: MetricRangePayloadProps['data']['result'],
+): number[] {
+	const values: number[] = [];
+	for (const item of result) {
+		for (const [, valueStr] of item.values) {
+			values.push(Number.parseFloat(valueStr) || 0);
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+function buildFrames(
+	result: MetricRangePayloadProps['data']['result'],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = result.map((item) =>
+		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}
+
+export function prepareHistogramPanelData({
+	apiResponse,
+	bucketWidth,
+	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramPanelDataParams): AlignedData {
+	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
+	const result = apiResponse.data.result;
+
+	const seriesValues = extractNumericValues(result);
+	if (seriesValues.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...seriesValues].sort((a, b) => a - b);
+	const min = sorted[0];
+	const max = sorted[sorted.length - 1];
+	const range = max - min;
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(result, mergeAllActiveQueries);
+	const histogramsPerSeries: AlignedData[] = frames
+		.filter((frame) => frame.length > 0)
+		.map((frame) => buildHistogramBuckets(frame, getBucket, HIST_SORT));
+
+	if (histogramsPerSeries.length === 0) {
+		return [[]];
+	}
+
+	const mergedHistogramData = mergeAlignedDataTables(histogramsPerSeries);
+	replaceUndefinedWithNullInAlignedData(mergedHistogramData);
+	prependNullBinToFirstHistogramSeries(mergedHistogramData, bucketSize);
+	return mergedHistogramData;
+}
+
+export function prepareHistogramPanelConfig({
+	widget,
+	apiResponse,
+	panelMode,
+	isDarkMode,
+}: {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	panelMode: PanelMode;
+	isDarkMode: boolean;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		apiResponse,
+		panelMode,
+		panelType: PANEL_TYPES.HISTOGRAM,
+	});
+	builder.setCursor({
+		drag: {
+			x: false,
+			y: false,
+			setScale: true,
+		},
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		auto: true,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		auto: true,
+		min: 0,
+	});
+
+	const currentQuery = widget.query;
+	const mergeAllActiveQueries = widget?.mergeAllActiveQueries ?? false;
+
+	// When merged, data has only one y column; add one series to match. Otherwise add one per result.
+	if (mergeAllActiveQueries) {
+		builder.addSeries({
+			label: '',
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			barWidthFactor: 1,
+			pointSize: 5,
+			lineColor: '#3f5ecc',
+			fillColor: '#4E74F8',
+			isDarkMode,
+		});
+	} else {
+		apiResponse.data.result.forEach((series) => {
+			const baseLabelName = getLabelName(
+				series.metric,
+				series.queryName || '', // query
+				series.legend || '',
+			);
+
+			const label = currentQuery
+				? getLegend(series, currentQuery, baseLabelName)
+				: baseLabelName;
+
+			builder.addSeries({
+				label: label,
+				scaleKey: 'y',
+				drawStyle: DrawStyle.Bar,
+				panelType: PANEL_TYPES.HISTOGRAM,
+				colorMapping: widget.customLegendColors ?? {},
+				spanGaps: false,
+				barWidthFactor: 1,
+				pointSize: 5,
+				isDarkMode,
+			});
+		});
+	}
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -26,7 +26,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 	} = props;
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -35,16 +34,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,10 +85,11 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -127,10 +128,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -149,7 +150,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+			expect(stored).toEqual([{ label: 'CPU', show: false }]);
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -175,10 +176,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			]);
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -201,10 +202,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
 			const expected = [
 				{
 					name: 'widget-1',
@@ -231,14 +232,12 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [true],
-			});
+			expect(getStoredSeriesVisibility('widget-a')).toEqual([
+				{ label: 'A', show: true },
+			]);
+			expect(getStoredSeriesVisibility('widget-b')).toEqual([
+				{ label: 'B', show: true },
+			]);
 		});
 
 		it('calls setItem with storage key and stringified visibility states', () => {

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
+	onClick?: OnClickPluginOpts['onClick'];
+	onDragSelect?: (startTime: number, endTime: number) => void;
+	timezone?: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

frontend/src/container/DashboardContainer/visualization/panels/utils/histogram.ts

@@ -0,0 +1,225 @@
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+/**
+ * Expands contiguous runs of `null` values to the left and right of their
+ * original positions so that visual gaps in the series are continuous.
+ *
+ * This is used when `NULL_EXPAND` mode is selected while joining series.
+ */
+function propagateNullsAcrossNeighbors(
+	seriesValues: Array<number | null>,
+	nullIndices: number[],
+	alignedLength: number,
+): void {
+	for (
+		let i = 0, currentIndex, lastExpandedNullIndex = -1;
+		i < nullIndices.length;
+		i++
+	) {
+		const nullIndex = nullIndices[i];
+
+		if (nullIndex > lastExpandedNullIndex) {
+			// expand left until we hit a non-null value
+			currentIndex = nullIndex - 1;
+			while (currentIndex >= 0 && seriesValues[currentIndex] == null) {
+				seriesValues[currentIndex--] = null;
+			}
+
+			// expand right until we hit a non-null value
+			currentIndex = nullIndex + 1;
+			while (currentIndex < alignedLength && seriesValues[currentIndex] == null) {
+				seriesValues[(lastExpandedNullIndex = currentIndex++)] = null;
+			}
+		}
+	}
+}
+
+/**
+ * Merges multiple uPlot `AlignedData` tables into a single aligned table.
+ *
+ * - Merges and sorts all distinct x-values from each table.
+ * - Re-aligns every series onto the merged x-axis.
+ * - Applies per-series null handling (`NULL_REMOVE`, `NULL_RETAIN`, `NULL_EXPAND`).
+ */
+/* eslint-disable sonarjs/cognitive-complexity */
+export function mergeAlignedDataTables(
+	alignedTables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let mergedXValues: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	mergedXValues = new Set();
+
+	// Collect all unique x-values from every table.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+		const xLength = xValues.length;
+
+		for (let i = 0; i < xLength; i++) {
+			mergedXValues.add(xValues[i]);
+		}
+	}
+
+	// Sorted, merged x-axis used by the final result.
+	const alignedData: (number | null | undefined)[][] = [
+		Array.from(mergedXValues).sort((a, b) => a - b),
+	];
+
+	const alignedLength = alignedData[0].length;
+
+	// Map from x-value to its index in the merged x-axis.
+	const xValueToIndexMap = new Map<number, number>();
+
+	for (let i = 0; i < alignedLength; i++) {
+		xValueToIndexMap.set(alignedData[0][i] as number, i);
+	}
+
+	// Re-align all series from all tables onto the merged x-axis.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+
+		for (let seriesIndex = 1; seriesIndex < table.length; seriesIndex++) {
+			const seriesValues = table[seriesIndex];
+
+			const alignedSeriesValues = Array(alignedLength).fill(undefined);
+
+			const nullHandlingMode = nullModes
+				? nullModes[tableIndex][seriesIndex]
+				: NULL_RETAIN;
+
+			const nullIndices: number[] = [];
+
+			for (let i = 0; i < seriesValues.length; i++) {
+				const valueAtPoint = seriesValues[i];
+				const alignedIndex = xValueToIndexMap.get(xValues[i]);
+
+				if (alignedIndex == null) {
+					continue;
+				}
+
+				if (valueAtPoint === null) {
+					if (nullHandlingMode !== NULL_REMOVE) {
+						alignedSeriesValues[alignedIndex] = valueAtPoint;
+
+						if (nullHandlingMode === NULL_EXPAND) {
+							nullIndices.push(alignedIndex);
+						}
+					}
+				} else {
+					alignedSeriesValues[alignedIndex] = valueAtPoint;
+				}
+			}
+
+			// Optionally expand nulls to visually preserve gaps.
+			propagateNullsAcrossNeighbors(
+				alignedSeriesValues,
+				nullIndices,
+				alignedLength,
+			);
+
+			alignedData.push(alignedSeriesValues);
+		}
+	}
+
+	return alignedData as AlignedData;
+}
+
+/**
+ * Builds histogram buckets from raw values.
+ *
+ * - Each value is mapped into a bucket via `getBucketForValue`.
+ * - Counts how many values fall into each bucket.
+ * - Optionally sorts buckets using the provided comparator.
+ */
+export function buildHistogramBuckets(
+	values: number[],
+	getBucketForValue: (value: number) => number,
+	sortBuckets?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const bucketMap = new Map<number, { value: number; count: number }>();
+
+	for (let i = 0; i < values.length; i++) {
+		let value = values[i];
+
+		if (value != null) {
+			value = getBucketForValue(value);
+		}
+
+		const bucket = bucketMap.get(value);
+
+		if (bucket) {
+			bucket.count++;
+		} else {
+			bucketMap.set(value, { value, count: 1 });
+		}
+	}
+
+	const buckets = [...bucketMap.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sortBuckets && buckets.sort((a, b) => sortBuckets(a.value, b.value));
+
+	const bucketValues = Array(buckets.length);
+	const bucketCounts = Array(buckets.length);
+
+	for (let i = 0; i < buckets.length; i++) {
+		bucketValues[i] = buckets[i].value;
+		bucketCounts[i] = buckets[i].count;
+	}
+
+	return [bucketValues, bucketCounts];
+}
+
+/**
+ * Mutates an `AlignedData` instance, replacing all `undefined` entries
+ * with explicit `null` values so uPlot treats them as gaps.
+ */
+export function replaceUndefinedWithNullInAlignedData(
+	data: AlignedData,
+): AlignedData {
+	const seriesList = data as (number | null | undefined)[][];
+	for (let seriesIndex = 0; seriesIndex < seriesList.length; seriesIndex++) {
+		for (
+			let pointIndex = 0;
+			pointIndex < seriesList[seriesIndex].length;
+			pointIndex++
+		) {
+			if (seriesList[seriesIndex][pointIndex] === undefined) {
+				seriesList[seriesIndex][pointIndex] = null;
+			}
+		}
+	}
+	return data;
+}
+
+/**
+ * Ensures the first histogram series has a leading "empty" bin so that
+ * all series line up visually when rendered as bars.
+ *
+ * - Prepends a new x-value (first x - `bucketSize`) to the first series.
+ * - Prepends `null` to all subsequent series at the same index.
+ */
+export function prependNullBinToFirstHistogramSeries(
+	alignedData: AlignedData,
+	bucketSize: number,
+): void {
+	const seriesList = alignedData as (number | null)[][];
+	if (
+		seriesList.length > 0 &&
+		seriesList[0].length > 0 &&
+		seriesList[0][0] !== null
+	) {
+		seriesList[0].unshift(seriesList[0][0] - bucketSize);
+		for (let seriesIndex = 1; seriesIndex < seriesList.length; seriesIndex++) {
+			seriesList[seriesIndex].unshift(null);
+		}
+	}
+}

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,10 +1,6 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -14,7 +10,7 @@ import {
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): SeriesVisibilityItem[] | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,10 +25,7 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
+		return widgetState.dataIndex;
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

frontend/src/container/ErrorDetails/index.tsx

@@ -16,6 +16,7 @@ import { isUndefined } from 'lodash-es';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import { useTimezone } from 'providers/Timezone';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -111,14 +112,19 @@ 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}`;
+		if (isModifierKeyPressed(event)) {
+			openInNewTab(path);
+		} else {
+			history.push(path);
+		}
 	};
 
 	const logEventCalledRef = useRef(false);

frontend/src/container/FormAlertRules/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -329,13 +329,18 @@ function FormAlertRules({
 		}
 	}, [alertDef, currentQuery?.queryType, queryOptions]);
 
-	const onCancelHandler = useCallback(() => {
-		urlQuery.delete(QueryParams.compositeQuery);
-		urlQuery.delete(QueryParams.panelTypes);
-		urlQuery.delete(QueryParams.ruleId);
-		urlQuery.delete(QueryParams.relativeTime);
-		safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
-	}, [safeNavigate, urlQuery]);
+	const onCancelHandler = useCallback(
+		(e?: React.MouseEvent) => {
+			urlQuery.delete(QueryParams.compositeQuery);
+			urlQuery.delete(QueryParams.panelTypes);
+			urlQuery.delete(QueryParams.ruleId);
+			urlQuery.delete(QueryParams.relativeTime);
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`, {
+				event: e,
+			});
+		},
+		[safeNavigate, urlQuery],
+	);
 
 	// onQueryCategoryChange handles changes to query category
 	// in state as well as sets additional defaults

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import {
 	LoadingOutlined,
@@ -279,9 +285,9 @@ function FullView({
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													if (dashboardEditView) {
-														safeNavigate(dashboardEditView);
+														safeNavigate(dashboardEditView, { event: e });
 													}
 												}}
 											>

frontend/src/container/Home/Home.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover } from 'antd';
@@ -28,6 +28,7 @@ import { UserPreference } from 'types/api/preferences/preference';
 import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { isIngestionActive } from 'utils/app';
+import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import AlertRules from './AlertRules/AlertRules';
@@ -413,12 +414,12 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											className="active-ingestion-card-actions"
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
-												history.push(ROUTES.LOGS_EXPLORER);
+												navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -455,11 +456,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
-												history.push(ROUTES.TRACES_EXPLORER);
+												navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -496,11 +497,11 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											role="button"
 											tabIndex={0}
-											onClick={(): void => {
+											onClick={(e: React.MouseEvent): void => {
 												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
-												history.push(ROUTES.METRICS_EXPLORER);
+												navigateToPage(ROUTES.METRICS_EXPLORER, history.push, e);
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
@@ -550,11 +551,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
-													history.push(ROUTES.LOGS_EXPLORER);
+													navigateToPage(ROUTES.LOGS_EXPLORER, history.push, e);
 												}}
 											>
 												Open Logs Explorer
@@ -564,11 +565,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
-													history.push(ROUTES.TRACES_EXPLORER);
+													navigateToPage(ROUTES.TRACES_EXPLORER, history.push, e);
 												}}
 											>
 												Open Traces Explorer
@@ -578,11 +579,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Wrench size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
-													history.push(ROUTES.METRICS_EXPLORER_EXPLORER);
+													navigateToPage(ROUTES.METRICS_EXPLORER_EXPLORER, history.push, e);
 												}}
 											>
 												Open Metrics Explorer
@@ -619,11 +620,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
-													history.push(ROUTES.ALL_DASHBOARD);
+													navigateToPage(ROUTES.ALL_DASHBOARD, history.push, e);
 												}}
 											>
 												Create dashboard
@@ -661,11 +662,11 @@ export default function Home(): JSX.Element {
 												type="default"
 												className="periscope-btn secondary"
 												icon={<Plus size={14} />}
-												onClick={(): void => {
+												onClick={(e: React.MouseEvent): void => {
 													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
-													history.push(ROUTES.ALERTS_NEW);
+													navigateToPage(ROUTES.ALERTS_NEW, history.push, e);
 												}}
 											>
 												Create an alert

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

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { QueryKey } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -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: ServicesList): Record<string, unknown> => ({
+						onClick: (event: React.MouseEvent): void => onRowClick(record, event),
 					})}
 				/>
 			</div>
@@ -284,11 +284,11 @@ 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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button, Select, Skeleton, Table } from 'antd';
@@ -172,13 +172,13 @@ export default function ServiceTraces({
 						dataSource={top5Services}
 						pagination={false}
 						className="services-table"
-						onRow={(record): { onClick: () => void } => ({
-							onClick: (): void => {
+						onRow={(record: ServicesList): Record<string, unknown> => ({
+							onClick: (event: React.MouseEvent): void => {
 								logEvent('Homepage: Service clicked', {
 									serviceName: record.serviceName,
 								});
 
-								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`);
+								safeNavigate(`${ROUTES.APPLICATION}/${record.serviceName}`, { event });
 							},
 						})}
 					/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Skeleton,
@@ -11,6 +11,7 @@ import {
 import { SorterResult } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { InfraMonitoringEvents } from 'constants/events';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import HostsEmptyOrIncorrectMetrics from './HostsEmptyOrIncorrectMetrics';
 import {
@@ -76,7 +77,16 @@ export default function HostsListTable({
 		[],
 	);
 
-	const handleRowClick = (record: HostRowData): void => {
+	const handleRowClick = (
+		record: HostRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (isModifierKeyPressed(event)) {
+			const params = new URLSearchParams(window.location.search);
+			params.set('hostName', record.hostName);
+			openInNewTab(`${window.location.pathname}?${params.toString()}`);
+			return;
+		}
 		onHostClick(record.hostName);
 		logEvent(InfraMonitoringEvents.ItemClicked, {
 			entity: InfraMonitoringEvents.HostEntity,
@@ -180,8 +190,8 @@ export default function HostsListTable({
 			tableLayout="fixed"
 			rowKey={(record): string => record.hostName}
 			onChange={handleTableChange}
-			onRow={(record): { onClick: () => void; className: string } => ({
-				onClick: (): void => handleRowClick(record),
+			onRow={(record: HostRowData): Record<string, unknown> => ({
+				onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 				className: 'clickable-row',
 			})}
 		/>

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -451,7 +452,19 @@ function K8sClustersList({
 		);
 	}, [selectedClusterName, groupBy.length, clustersData, nestedClustersData]);
 
-	const handleRowClick = (record: K8sClustersRowData): void => {
+	const handleRowClick = (
+		record: K8sClustersRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
+				record.clusterUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedClusterName(record.clusterUID);
@@ -515,8 +528,19 @@ function K8sClustersList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.CLUSTER_NAME,
+										record.clusterUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedClusterName(record.clusterUID);
 							},
 							className: 'expanded-clickable-row',
@@ -707,8 +731,10 @@ function K8sClustersList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -457,7 +458,19 @@ function K8sDaemonSetsList({
 		nestedDaemonSetsData,
 	]);
 
-	const handleRowClick = (record: K8sDaemonSetsRowData): void => {
+	const handleRowClick = (
+		record: K8sDaemonSetsRowData,
+		event?: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
+				record.daemonsetUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedDaemonSetUID(record.daemonsetUID);
@@ -521,8 +534,19 @@ function K8sDaemonSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.DAEMONSET_UID,
+										record.daemonsetUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedDaemonSetUID(record.daemonsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -715,8 +739,10 @@ function K8sDaemonSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -463,7 +464,19 @@ function K8sDeploymentsList({
 		nestedDeploymentsData,
 	]);
 
-	const handleRowClick = (record: K8sDeploymentsRowData): void => {
+	const handleRowClick = (
+		record: K8sDeploymentsRowData,
+		event?: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
+				record.deploymentUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedDeploymentUID(record.deploymentUID);
@@ -527,8 +540,19 @@ function K8sDeploymentsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.DEPLOYMENT_UID,
+										record.deploymentUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedDeploymentUID(record.deploymentUID);
 							},
 							className: 'expanded-clickable-row',
@@ -722,8 +746,10 @@ function K8sDeploymentsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,6 +12,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,6 +43,15 @@ function EntityLogs({
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getEntityEventsOrLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -62,29 +74,40 @@ function EntityLogs({
 		basePayload,
 	});
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const { data, isLoading, isFetching, isError } = useQuery({
@@ -131,6 +154,7 @@ function EntityLogs({
 					<Virtuoso
 						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -154,7 +178,21 @@ function EntityLogs({
 			)}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container">{renderContent}</div>
+				<div className="entity-logs-list-container" data-log-detail-ignore="true">
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -428,7 +429,16 @@ function K8sJobsList({
 		return jobsData.find((job) => job.jobName === selectedJobUID) || null;
 	}, [selectedJobUID, groupBy.length, jobsData, nestedJobsData]);
 
-	const handleRowClick = (record: K8sJobsRowData): void => {
+	const handleRowClick = (
+		record: K8sJobsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedJobUID(record.jobUID);
@@ -492,8 +502,16 @@ function K8sJobsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.JOB_UID, record.jobUID);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedJobUID(record.jobUID);
 							},
 							className: 'expanded-clickable-row',
@@ -684,8 +702,10 @@ function K8sJobsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -459,7 +460,19 @@ function K8sNamespacesList({
 		nestedNamespacesData,
 	]);
 
-	const handleRowClick = (record: K8sNamespacesRowData): void => {
+	const handleRowClick = (
+		record: K8sNamespacesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
+				record.namespaceUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedNamespaceUID(record.namespaceUID);
@@ -523,8 +536,19 @@ function K8sNamespacesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.NAMESPACE_UID,
+										record.namespaceUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedNamespaceUID(record.namespaceUID);
 							},
 							className: 'expanded-clickable-row',
@@ -716,8 +740,10 @@ function K8sNamespacesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -24,6 +24,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -438,7 +439,16 @@ function K8sNodesList({
 		return nodesData.find((node) => node.nodeUID === selectedNodeUID) || null;
 	}, [selectedNodeUID, groupBy.length, nodesData, nestedNodesData]);
 
-	const handleRowClick = (record: K8sNodesRowData): void => {
+	const handleRowClick = (
+		record: K8sNodesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID, record.nodeUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setSelectedNodeUID(record.nodeUID);
@@ -503,8 +513,19 @@ function K8sNodesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.NODE_UID,
+										record.nodeUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedNodeUID(record.nodeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -695,8 +716,10 @@ function K8sNodesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -26,6 +26,7 @@ import { ChevronDown, ChevronRight, CornerDownRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -495,7 +496,16 @@ function K8sPodsList({
 		}
 	}, [selectedRowData, fetchGroupedByRowData]);
 
-	const handleRowClick = (record: K8sPodsRowData): void => {
+	const handleRowClick = (
+		record: K8sPodsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedPodUID(record.podUID);
 			setSearchParams({
@@ -615,8 +625,14 @@ function K8sPodsList({
 							spinning: isFetchingGroupedByRowData || isLoadingGroupedByRowData,
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.POD_UID, record.podUID);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setSelectedPodUID(record.podUID);
 							},
 							className: 'expanded-clickable-row',
@@ -752,8 +768,8 @@ function K8sPodsList({
 				scroll={{ x: true }}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(record: K8sPodsRowData): Record<string, unknown> => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -460,7 +461,19 @@ function K8sStatefulSetsList({
 		nestedStatefulSetsData,
 	]);
 
-	const handleRowClick = (record: K8sStatefulSetsRowData): void => {
+	const handleRowClick = (
+		record: K8sStatefulSetsRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(
+				INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
+				record.statefulsetUID,
+			);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedStatefulSetUID(record.statefulsetUID);
@@ -524,8 +537,19 @@ function K8sStatefulSetsList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.STATEFULSET_UID,
+										record.statefulsetUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedStatefulSetUID(record.statefulsetUID);
 							},
 							className: 'expanded-clickable-row',
@@ -718,8 +742,8 @@ function K8sStatefulSetsList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(record) => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -25,6 +25,7 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
@@ -390,7 +391,16 @@ function K8sVolumesList({
 		);
 	}, [selectedVolumeUID, volumesData, groupBy.length, nestedVolumesData]);
 
-	const handleRowClick = (record: K8sVolumesRowData): void => {
+	const handleRowClick = (
+		record: K8sVolumesRowData,
+		event: React.MouseEvent,
+	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID, record.volumeUID);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		if (groupBy.length === 0) {
 			setSelectedRowData(null);
 			setselectedVolumeUID(record.volumeUID);
@@ -454,8 +464,19 @@ function K8sVolumesList({
 							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 						}}
 						showHeader={false}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
+						onRow={(
+							record,
+						): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+							onClick: (event: React.MouseEvent): void => {
+								if (event && isModifierKeyPressed(event)) {
+									const newParams = new URLSearchParams(searchParams);
+									newParams.set(
+										INFRA_MONITORING_K8S_PARAMS_KEYS.VOLUME_UID,
+										record.volumeUID,
+									);
+									openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+									return;
+								}
 								setselectedVolumeUID(record.volumeUID);
 							},
 							className: 'expanded-clickable-row',
@@ -641,8 +662,10 @@ function K8sVolumesList({
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => handleRowClick(record),
+				onRow={(
+					record,
+				): { onClick: (event: React.MouseEvent) => void; className: string } => ({
+					onClick: (event: React.MouseEvent): void => handleRowClick(record, event),
 					className: 'clickable-row',
 				})}
 				expandable={{

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,6 +7,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { DataSource } from 'types/common/queryBuilder';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
@@ -36,9 +37,13 @@ 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);
+		if (isModifierKeyPressed(e)) {
+			openInNewTab(ROUTES.ALERTS_NEW);
+		} else {
+			history.push(ROUTES.ALERTS_NEW);
+		}
 	}, []);
 
 	return (

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
@@ -100,16 +100,22 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		});
 	}, [notificationsApi, t]);
 
-	const onClickNewAlertHandler = useCallback(() => {
-		logEvent('Alert: New alert button clicked', {
-			number: allAlertRules?.length,
-			layout: 'new',
-		});
-		safeNavigate(ROUTES.ALERT_TYPE_SELECTION);
+	const onClickNewAlertHandler = useCallback(
+		(e: React.MouseEvent): void => {
+			logEvent('Alert: New alert button clicked', {
+				number: allAlertRules?.length,
+				layout: 'new',
+			});
+			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, { event: e });
+		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+		[],
+	);
 
-	const onEditHandler = (record: GettableAlert, openInNewTab: boolean): void => {
+	const onEditHandler = (
+		record: GettableAlert,
+		options?: { event?: React.MouseEvent; newTab?: boolean },
+	): void => {
 		const compositeQuery = sanitizeDefaultAlertQuery(
 			mapQueryDataFromApi(record.condition.compositeQuery),
 			record.alertType as AlertTypes,
@@ -125,11 +131,10 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 
 		setEditLoader(false);
 
-		if (openInNewTab) {
-			window.open(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, '_blank');
-		} else {
-			safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
-		}
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, {
+			event: options?.event,
+			newTab: options?.newTab,
+		});
 	};
 
 	const onCloneHandler = (
@@ -266,7 +271,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
 					e.stopPropagation();
 					e.preventDefault();
-					onEditHandler(record, e.metaKey || e.ctrlKey);
+					onEditHandler(record, { event: e });
 				};
 
 				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
@@ -331,7 +336,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							/>,
 							<ColumnButton
 								key="2"
-								onClick={(): void => onEditHandler(record, false)}
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { event: e })
+								}
 								type="link"
 								loading={editLoader}
 							>
@@ -339,7 +346,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 							</ColumnButton>,
 							<ColumnButton
 								key="3"
-								onClick={(): void => onEditHandler(record, true)}
+								onClick={(): void => onEditHandler(record, { newTab: true })}
 								type="link"
 								loading={editLoader}
 							>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -416,11 +416,7 @@ function DashboardsList(): JSX.Element {
 
 				const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 					event.stopPropagation();
-					if (event.metaKey || event.ctrlKey) {
-						window.open(getLink(), '_blank');
-					} else {
-						safeNavigate(getLink());
-					}
+					safeNavigate(getLink(), { event });
 					logEvent('Dashboard List: Clicked on dashboard', {
 						dashboardId: dashboard.id,
 						dashboardName: dashboard.name,

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -14,8 +13,9 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -38,10 +38,11 @@ function LiveLogsList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	// get only data from the logs object
 	const formattedLogs: ILog[] = useMemo(
@@ -65,42 +66,56 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs: formattedLogs,
+		virtuosoRef: ref,
+	});
+
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					linesPerRow={options.maxLines}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					fontSize={options.fontSize}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						linesPerRow={options.maxLines}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				</div>
 			);
 		},
 		[
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
 			options.maxLines,
+			options.fontSize,
+			activeLog?.id,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleCloseLogDetail,
+			handleChangeSelectedView,
 		],
 	);
 
@@ -156,6 +171,10 @@ function LiveLogsList({
 								activeLogIndex,
 							}}
 							handleChangeSelectedView={handleChangeSelectedView}
+							logs={formattedLogs}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+							activeLog={activeLog}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -173,14 +192,17 @@ function LiveLogsList({
 				</InfinityWrapperStyled>
 			)}
 
-			{activeLog && (
+			{activeLog && selectedTab && (
 				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
+					selectedTab={selectedTab}
 					log={activeLog}
-					onClose={onClearActiveLog}
+					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={formattedLogs}
+					onNavigateLog={handleSetActiveLog}
+					onScrollToLog={handleScrollToLog}
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -395,7 +395,7 @@ export default function TableViewActions(
 								onOpenChange={setIsOpen}
 								arrow={false}
 								content={
-									<div>
+									<div data-log-detail-ignore="true">
 										<Button
 											className="more-filter-actions"
 											type="text"
@@ -481,7 +481,7 @@ export default function TableViewActions(
 							onOpenChange={setIsOpen}
 							arrow={false}
 							content={
-								<div>
+								<div data-log-detail-ignore="true">
 									<Button
 										className="more-filter-actions"
 										type="text"

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -7,6 +7,7 @@ import {
 	useMemo,
 } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -22,22 +23,27 @@ interface TableRowProps {
 	tableColumns: ColumnsType<Record<string, unknown>>;
 	index: number;
 	log: Record<string, unknown>;
-	handleSetActiveContextLog: (log: ILog) => void;
-	onShowLogDetails: (log: ILog) => void;
+	onShowLogDetails?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 }
 
 export default function TableRow({
 	tableColumns,
 	index,
 	log,
-	handleSetActiveContextLog,
 	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
+	isActiveLog,
+	onClearActiveLog,
 }: TableRowProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -52,21 +58,31 @@ export default function TableRow({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			if (!handleSetActiveContextLog || !currentLog) {
+			if (!currentLog) {
 				return;
 			}
 
-			handleSetActiveContextLog(currentLog);
+			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
 		},
-		[currentLog, handleSetActiveContextLog],
+		[currentLog, onShowLogDetails],
 	);
 
 	const handleShowLogDetails = useCallback(() => {
-		if (!onShowLogDetails || !currentLog) {
+		if (!currentLog) {
 			return;
 		}
-		onShowLogDetails(currentLog);
-	}, [currentLog, onShowLogDetails]);
+
+		// If this log is already active, close the detail drawer
+		if (isActiveLog && onClearActiveLog) {
+			onClearActiveLog();
+			return;
+		}
+
+		// Otherwise, open the detail drawer for this log
+		if (onShowLogDetails) {
+			onShowLogDetails(currentLog);
+		}
+	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
 
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -4,7 +4,6 @@ import {
 	TableVirtuoso,
 	TableVirtuosoHandle,
 } from 'react-virtuoso';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -58,26 +57,40 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
-		ref,
-	): JSX.Element | null {
-		const {
-			activeLog: activeContextLog,
-			onSetActiveLog: handleSetActiveContextLog,
-			onClearActiveLog: handleClearActiveContextLog,
-			onAddToQuery: handleAddToQuery,
-		} = useActiveLog();
-		const {
-			activeLog,
+		{
+			isLoading,
+			tableViewProps,
+			infitiyTableProps,
 			onSetActiveLog,
 			onClearActiveLog,
-			onAddToQuery,
-		} = useActiveLog();
+			activeLog,
+		},
+		ref,
+	): JSX.Element | null {
+		const { activeLog: activeContextLog } = useActiveLog();
+
+		const onSetActiveLogExpand = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log);
+			},
+			[onSetActiveLog],
+		);
+
+		const onSetActiveLogContext = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
+			},
+			[onSetActiveLog],
+		);
+
+		const onCloseActiveLog = useCallback(() => {
+			onClearActiveLog?.();
+		}, [onClearActiveLog]);
 
 		const { dataSource, columns } = useTableView({
 			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: handleSetActiveContextLog,
+			onClickExpand: onSetActiveLogExpand,
+			onOpenLogsContext: onSetActiveLogContext,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -98,27 +111,32 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					handleSetActiveContextLog={handleSetActiveContextLog}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
-				handleSetActiveContextLog,
 				tableColumns,
-				tableViewProps.fontSize,
-				tableViewProps.logs,
 				onSetActiveLog,
+				tableViewProps.logs,
+				tableViewProps.fontSize,
+				activeLog?.id,
+				onCloseActiveLog,
 			],
 		);
-
 		const tableHeader = useCallback(
 			() => (
 				<tr>
@@ -179,24 +197,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
 				/>
-
-				{activeContextLog && (
-					<LogDetail
-						log={activeContextLog}
-						onClose={handleClearActiveContextLog}
-						onAddToQuery={handleAddToQuery}
-						selectedTab={VIEW_TYPES.CONTEXT}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
-					log={activeLog}
-					onClose={onClearActiveLog}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
 			</>
 		);
 	},

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,5 +1,7 @@
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { UseTableViewProps } from 'components/Logs/TableView/types';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -8,4 +10,11 @@ export type InfinityTableProps = {
 		onEndReached: (index: number) => void;
 	};
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	logs?: ILog[];
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
+	activeLog?: ILog | null;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -4,7 +4,6 @@ import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
@@ -16,8 +15,9 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import APIError from 'types/api/error';
 // interfaces
@@ -55,10 +55,11 @@ function LogsExplorerList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -82,6 +83,12 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
+
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef: ref,
+	});
+
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && logs.length !== 0) {
 			logEvent('Logs Explorer: Data present', {
@@ -94,40 +101,48 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					activeLog={activeLog}
-					fontSize={options.fontSize}
-					linesPerRow={options.maxLines}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						activeLog={activeLog}
+						fontSize={options.fontSize}
+						linesPerRow={options.maxLines}
+						handleChangeSelectedView={handleChangeSelectedView}
+						onClearActiveLog={handleCloseLogDetail}
+					/>
+				</div>
 			);
 		},
 		[
-			activeLog,
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
+			options.fontSize,
 			options.maxLines,
+			activeLog,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleChangeSelectedView,
+			handleCloseLogDetail,
 		],
 	);
 
@@ -153,6 +168,10 @@ function LogsExplorerList({
 					}}
 					infitiyTableProps={{ onEndReached }}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={logs}
+					onSetActiveLog={handleSetActiveLog}
+					onClearActiveLog={handleCloseLogDetail}
+					activeLog={activeLog}
 				/>
 			);
 		}
@@ -199,6 +218,9 @@ function LogsExplorerList({
 		getItemContent,
 		selectedFields,
 		handleChangeSelectedView,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+		activeLog,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -278,14 +300,19 @@ function LogsExplorerList({
 						{renderContent}
 					</InfinityWrapperStyled>
 
-					<LogDetail
-						selectedTab={VIEW_TYPES.OVERVIEW}
-						log={activeLog}
-						onClose={onClearActiveLog}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onAddToQuery}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					{selectedTab && activeLog && (
+						<LogDetail
+							selectedTab={selectedTab}
+							log={activeLog}
+							onClose={handleCloseLogDetail}
+							onAddToQuery={onAddToQuery}
+							onClickActionItem={onAddToQuery}
+							handleChangeSelectedView={handleChangeSelectedView}
+							logs={logs}
+							onNavigateLog={handleSetActiveLog}
+							onScrollToLog={handleScrollToLog}
+						/>
+					)}
 				</>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -466,7 +466,10 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 
-				<div className="logs-explorer-views-type-content">
+				<div
+					className="logs-explorer-views-type-content"
+					data-log-detail-ignore="true"
+				>
 					{showLiveLogs && (
 						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
 					)}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -16,7 +15,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -83,24 +82,24 @@ function LogsPanelComponent({
 		() => logs.map((log) => FlatLogData(log) as RowData),
 		[logs],
 	);
-
 	const {
 		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
 		onAddToQuery,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const handleRow = useCallback(
 		(record: RowData): HTMLAttributes<RowData> => ({
 			onClick: (): void => {
 				const log = logs.find((item) => item.id === record.id);
 				if (log) {
-					onSetActiveLog(log);
+					handleSetActiveLog(log);
 				}
 			},
 		}),
-		[logs, onSetActiveLog],
+		[handleSetActiveLog, logs],
 	);
 
 	const handleRequestData = (newOffset: number): void => {
@@ -132,7 +131,7 @@ function LogsPanelComponent({
 
 	return (
 		<>
-			<div className="logs-table">
+			<div className="logs-table" data-log-detail-ignore="true">
 				<div className="resize-table">
 					<OverlayScrollbar>
 						<ResizeTable
@@ -166,15 +165,19 @@ function LogsPanelComponent({
 					</div>
 				)}
 			</div>
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-				isListViewPanel
-				listViewPanelSelectedFields={widget?.selectedLogFields}
-			/>
+			{selectedTab && activeLog && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					isListViewPanel
+					listViewPanelSelectedFields={widget?.selectedLogFields}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+				/>
+			)}
 		</>
 	);
 }

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

@@ -31,6 +31,7 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 import { secondsToMilliseconds } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -235,7 +236,7 @@ function Application(): JSX.Element {
 			timestamp: number,
 			apmToTraceQuery: Query,
 			isViewLogsClicked?: boolean,
-		): (() => void) => (): void => {
+		): ((e: React.MouseEvent) => void) => (e: React.MouseEvent): void => {
 			const endTime = secondsToMilliseconds(timestamp);
 			const startTime = secondsToMilliseconds(timestamp - stepInterval);
 
@@ -259,7 +260,11 @@ function Application(): JSX.Element {
 				queryString,
 			);
 
-			history.push(newPath);
+			if (isModifierKeyPressed(e)) {
+				openInNewTab(newPath);
+			} else {
+				history.push(newPath);
+			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[stepInterval],

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { Binoculars, DraftingCompass, ScrollText } from 'lucide-react';
@@ -6,9 +7,9 @@ import './GraphControlsPanel.styles.scss';
 
 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({

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

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -42,7 +42,10 @@ interface OnViewTracePopupClickProps {
 	apmToTraceQuery: Query;
 	isViewLogsClicked?: boolean;
 	stepInterval?: number;
-	safeNavigate: (url: string) => void;
+	safeNavigate: (
+		url: string,
+		options?: { event?: React.MouseEvent | MouseEvent },
+	) => void;
 }
 
 interface OnViewAPIMonitoringPopupClickProps {
@@ -51,8 +54,10 @@ interface OnViewAPIMonitoringPopupClickProps {
 	stepInterval?: number;
 	domainName: string;
 	isError: boolean;
-
-	safeNavigate: (url: string) => void;
+	safeNavigate: (
+		url: string,
+		options?: { event?: React.MouseEvent | MouseEvent },
+	) => void;
 }
 
 export function generateExplorerPath(
@@ -93,8 +98,8 @@ export function onViewTracePopupClick({
 	isViewLogsClicked,
 	stepInterval,
 	safeNavigate,
-}: OnViewTracePopupClickProps): VoidFunction {
-	return (): void => {
+}: OnViewTracePopupClickProps): (e?: React.MouseEvent) => void {
+	return (e?: React.MouseEvent): void => {
 		const endTime = secondsToMilliseconds(timestamp);
 		const startTime = secondsToMilliseconds(timestamp - (stepInterval || 60));
 
@@ -118,7 +123,7 @@ export function onViewTracePopupClick({
 			queryString,
 		);
 
-		safeNavigate(newPath);
+		safeNavigate(newPath, { event: e });
 	};
 }
 
@@ -149,8 +154,8 @@ export function onViewAPIMonitoringPopupClick({
 	isError,
 	stepInterval,
 	safeNavigate,
-}: OnViewAPIMonitoringPopupClickProps): VoidFunction {
-	return (): void => {
+}: OnViewAPIMonitoringPopupClickProps): (e?: React.MouseEvent) => void {
+	return (e?: React.MouseEvent): void => {
 		const endTime = timestamp + (stepInterval || 60);
 		const startTime = timestamp - (stepInterval || 60);
 		const filters = {
@@ -190,7 +195,7 @@ export function onViewAPIMonitoringPopupClick({
 			filters,
 		);
 
-		safeNavigate(newPath);
+		safeNavigate(newPath, { event: e });
 	};
 }
 

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -8,6 +8,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
@@ -25,9 +26,10 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={alert.alert_id}
-						onClick={(): void => {
+						onClick={(e): void => {
 							params.set(QueryParams.ruleId, alert.alert_id);
-							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+							const path = `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
+							navigateToPage(path, history.push, e);
 						}}
 						className="dashboards-popover-content-item"
 					>
@@ -55,11 +57,12 @@ function DashboardsAndAlertsPopover({
 				label: (
 					<Typography.Link
 						key={dashboard.dashboard_id}
-						onClick={(): void => {
+						onClick={(e): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboard_id,
 								}),
+								{ event: e },
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -118,6 +118,7 @@ describe('DashboardsAndAlertsPopover', () => {
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
 			`/dashboard/${mockDashboard1.dashboard_id}`,
+			expect.objectContaining({ event: expect.any(Object) }),
 		);
 	});
 

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Spin,
@@ -107,8 +107,9 @@ function MetricsTable({
 					onChange: onPaginationChange,
 					total: totalCount,
 				}}
-				onRow={(record): { onClick: () => void; className: string } => ({
-					onClick: (): void => openMetricDetails(record.key, 'list'),
+				onRow={(record: MetricsListItemRowData): Record<string, unknown> => ({
+					onClick: (event: React.MouseEvent): void =>
+						openMetricDetails(record.key, 'list', event),
 					className: 'clickable-row',
 				})}
 			/>

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
@@ -14,6 +14,7 @@ import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import InspectModal from '../Inspect';
@@ -209,7 +210,15 @@ function Summary(): JSX.Element {
 	const openMetricDetails = (
 		metricName: string,
 		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
 	): void => {
+		if (event && isModifierKeyPressed(event)) {
+			const newParams = new URLSearchParams(searchParams);
+			newParams.set(IS_METRIC_DETAILS_OPEN_KEY, 'true');
+			newParams.set(SELECTED_METRIC_NAME_KEY, metricName);
+			openInNewTab(`${window.location.pathname}?${newParams.toString()}`);
+			return;
+		}
 		setSelectedMetricName(metricName);
 		setIsMetricDetailsOpen(true);
 		setSearchParams({

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -194,7 +194,11 @@ describe('MetricsTable', () => {
 		);
 
 		fireEvent.click(screen.getByText('Metric 1'));
-		expect(mockOpenMetricDetails).toHaveBeenCalledWith('metric1', 'list');
+		expect(mockOpenMetricDetails).toHaveBeenCalledWith(
+			'metric1',
+			'list',
+			expect.any(Object),
+		);
 	});
 
 	it('calls setOrderBy when column header is clicked', () => {

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -14,7 +14,11 @@ export interface MetricsTableProps {
 	onPaginationChange: (page: number, pageSize: number) => void;
 	setOrderBy: (orderBy: OrderByPayload) => void;
 	totalCount: number;
-	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	openMetricDetails: (
+		metricName: string,
+		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
+	) => void;
 	queryFilters: TagFilter;
 }
 
@@ -28,7 +32,11 @@ export interface MetricsTreemapProps {
 	isLoading: boolean;
 	isError: boolean;
 	viewType: TreemapViewType;
-	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
+	openMetricDetails: (
+		metricName: string,
+		view: 'list' | 'treemap',
+		event?: React.MouseEvent,
+	) => void;
 	setHeatmapView: (value: TreemapViewType) => void;
 }
 

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Badge, Button } from 'antd';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Undo } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { buttonText, RIBBON_STYLES } from './config';
 
@@ -21,23 +22,30 @@ 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(
+		(e?: React.MouseEvent): void => {
+			let targetPath: string;
+			if (location.pathname === ROUTES.LOGS_EXPLORER) {
+				targetPath = ROUTES.OLD_LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACE) {
+				targetPath = ROUTES.TRACES_EXPLORER;
+			} else if (location.pathname === ROUTES.OLD_LOGS_EXPLORER) {
+				targetPath = ROUTES.LOGS_EXPLORER;
+			} else if (location.pathname === ROUTES.TRACES_EXPLORER) {
+				targetPath = ROUTES.TRACE;
+			} else {
+				return;
+			}
+			navigateToPage(targetPath, history.push, e);
+		},
+		[location.pathname],
+	);
 
 	const button = useMemo(
 		() => (
 			<Button
 				icon={<Undo size={16} />}
-				onClick={onClickHandler}
+				onClick={(e): void => onClickHandler(e)}
 				data-testid="newExplorerCTA"
 				type="text"
 				className="periscope-btn link"

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useEffectOnce } from 'react-use';
@@ -17,6 +17,7 @@ import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingIn
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { navigateToPage } from 'utils/navigation';
 
 import ModuleStepsContainer from './common/ModuleStepsContainer/ModuleStepsContainer';
 import { stepsMap } from './constants/stepsConfig';
@@ -252,9 +253,13 @@ export default function Onboarding(): JSX.Element {
 		}
 	};
 
-	const handleNext = (): void => {
+	const handleNext = (e?: React.MouseEvent): void => {
 		if (activeStep <= 3) {
-			history.push(moduleRouteMap[selectedModule.id as ModulesMap]);
+			navigateToPage(
+				moduleRouteMap[selectedModule.id as ModulesMap],
+				history.push,
+				e,
+			);
 		}
 	};
 
@@ -317,9 +322,9 @@ 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);
+							navigateToPage(ROUTES.APPLICATION, history.push, e);
 						}}
 						className="skip-to-console"
 					>
@@ -355,7 +360,11 @@ export default function Onboarding(): JSX.Element {
 						</div>
 					</div>
 					<div className="continue-to-next-step">
-						<Button type="primary" icon={<ArrowRightOutlined />} onClick={handleNext}>
+						<Button
+							type="primary"
+							icon={<ArrowRightOutlined />}
+							onClick={(e): void => handleNext(e)}
+						>
 							{t('get_started')}
 						</Button>
 					</div>
@@ -386,17 +395,16 @@ export default function Onboarding(): JSX.Element {
 			{activeStep > 1 && (
 				<div className="stepsContainer">
 					<ModuleStepsContainer
-						onReselectModule={(): void => {
+						onReselectModule={(e?: React.MouseEvent): void => {
 							setCurrent(current - 1);
 							setActiveStep(activeStep - 1);
 							setSelectedModule(useCases.APM);
 							resetProgress();
 
-							if (isOnboardingV3Enabled) {
-								history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-							} else {
-								history.push(ROUTES.GET_STARTED);
-							}
+							const path = isOnboardingV3Enabled
+								? ROUTES.GET_STARTED_WITH_CLOUD
+								: ROUTES.GET_STARTED;
+							navigateToPage(path, history.push, e);
 						}}
 						selectedModule={selectedModule}
 						selectedModuleSteps={selectedModuleSteps}

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -23,6 +23,7 @@ import {
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import './DataSource.styles.scss';
@@ -141,13 +142,13 @@ export default function DataSource(): JSX.Element {
 		}
 	};
 
-	const goToIntegrationsPage = (): void => {
+	const goToIntegrationsPage = (e?: React.MouseEvent): void => {
 		logEvent('Onboarding V2: Go to integrations', {
 			module: selectedModule?.id,
 			dataSource: selectedDataSource?.name,
 			framework: selectedFramework,
 		});
-		history.push(ROUTES.INTEGRATIONS);
+		navigateToPage(ROUTES.INTEGRATIONS, history.push, e);
 	};
 
 	return (
@@ -249,7 +250,7 @@ export default function DataSource(): JSX.Element {
 								page which allows more sources of sending data
 							</Typography.Text>
 							<Button
-								onClick={goToIntegrationsPage}
+								onClick={(e): void => goToIntegrationsPage(e)}
 								icon={<Blocks size={14} />}
 								className="navigate-integrations-page-btn"
 							>

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/jsx-no-comment-textnodes */
 /* eslint-disable sonarjs/prefer-single-boolean-return */
-import { SetStateAction, useState } from 'react';
+import React, { SetStateAction, useState } from 'react';
 import {
 	ArrowLeftOutlined,
 	ArrowRightOutlined,
@@ -19,6 +19,7 @@ import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUti
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
 import { UserPlus } from 'lucide-react';
+import { navigateToPage } from 'utils/navigation';
 
 import { useOnboardingContext } from '../../context/OnboardingContext';
 import {
@@ -142,7 +143,7 @@ export default function ModuleStepsContainer({
 		return true;
 	};
 
-	const redirectToModules = (): void => {
+	const redirectToModules = (event?: React.MouseEvent): void => {
 		logEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
 			dataSource: selectedDataSource?.id,
@@ -152,26 +153,28 @@ export default function ModuleStepsContainer({
 			serviceName,
 		});
 
+		let targetPath: string;
 		if (selectedModule.id === ModulesMap.APM) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else if (selectedModule.id === ModulesMap.LogsManagement) {
-			history.push(ROUTES.LOGS_EXPLORER);
+			targetPath = ROUTES.LOGS_EXPLORER;
 		} else if (selectedModule.id === ModulesMap.InfrastructureMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else if (selectedModule.id === ModulesMap.AwsMonitoring) {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		} else {
-			history.push(ROUTES.APPLICATION);
+			targetPath = ROUTES.APPLICATION;
 		}
+		navigateToPage(targetPath, history.push, event);
 	};
 
-	const handleNext = (): void => {
+	const handleNext = (event?: React.MouseEvent): void => {
 		const isValid = isValidForm();
 
 		if (isValid) {
 			if (current === lastStepIndex) {
 				resetProgress();
-				redirectToModules();
+				redirectToModules(event);
 				return;
 			}
 
@@ -379,8 +382,8 @@ export default function ModuleStepsContainer({
 		}
 	};
 
-	const handleLogoClick = (): void => {
-		history.push('/home');
+	const handleLogoClick = (e: React.MouseEvent): void => {
+		navigateToPage('/home', history.push, e);
 	};
 
 	return (
@@ -400,7 +403,7 @@ export default function ModuleStepsContainer({
 							style={{ display: 'flex', alignItems: 'center' }}
 							type="default"
 							icon={<LeftCircleOutlined />}
-							onClick={onReselectModule}
+							onClick={(e): void => onReselectModule(e)}
 						>
 							{selectedModule.title}
 						</Button>
@@ -470,7 +473,11 @@ export default function ModuleStepsContainer({
 					>
 						Back
 					</Button>
-					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
+					<Button
+						onClick={(e): void => handleNext(e)}
+						type="primary"
+						icon={<ArrowRightOutlined />}
+					>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
 					<LaunchChatSupport

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -477,47 +477,67 @@
 			}
 		}
 
-		.opentelemetry-radio-container {
+		.observability-tools-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
 			width: 528px;
 
-			.opentelemetry-radio-group {
-				width: 100%;
+			.observability-tool-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
 
-				.opentelemetry-radio-items-wrapper {
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					gap: 12px;
-					width: 100%;
+				label {
+					color: var(--l1-foreground);
+					font-size: 13px;
+					cursor: pointer;
 				}
 
-				.opentelemetry-radio-item {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					height: 32px;
-					width: calc((528px - 12px) / 2);
-					min-width: 258px;
-					flex: 0 0 calc((528px - 12px) / 2);
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
+					}
+				}
+
+				&.observability-tool-others-item {
+					.onboarding-questionaire-other-input {
+						flex: 1;
+					}
+				}
+			}
+		}
+
+		.migration-timeline-radio-container,
+		.opentelemetry-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
+			width: 528px;
+
+			.migration-timeline-radio-item,
+			.opentelemetry-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
+
+				label {
 					color: var(--l1-foreground);
-					font-family: Inter, sans-serif;
 					font-size: 13px;
-					font-weight: 400;
-					line-height: 1;
-					letter-spacing: -0.065px;
-					box-sizing: border-box;
+					cursor: pointer;
+				}
 
-					.ant-radio {
-						.ant-radio-inner {
-							width: 16px;
-							height: 16px;
-							border-color: var(--l3-border);
-						}
-
-						&.ant-radio-checked .ant-radio-inner {
-							border-color: var(--bg-robin-500);
-							background-color: var(--bg-robin-500);
-						}
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
 					}
 				}
 			}
@@ -977,27 +997,6 @@
 				color: var(--bg-slate-300);
 			}
 
-			.opentelemetry-radio-container {
-				.opentelemetry-radio-group {
-					.opentelemetry-radio-items-wrapper {
-						.opentelemetry-radio-item {
-							color: var(--l1-foreground);
-
-							.ant-radio {
-								.ant-radio-inner {
-									border-color: var(--l3-border);
-								}
-
-								&.ant-radio-checked .ant-radio-inner {
-									border-color: var(--bg-robin-500);
-									background-color: var(--bg-robin-500);
-								}
-							}
-						}
-					}
-				}
-			}
-
 			.onboarding-back-button {
 				border-color: var(--text-vanilla-300);
 				color: var(--l3-foreground);

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,34 +1,27 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
 import { Input } from '@signozhq/input';
-import { Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/radio-group';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import editOrg from 'api/organization/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, Loader2 } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
+import { ArrowRight } from 'lucide-react';
 
 import '../OnboardingQuestionaire.styles.scss';
 
-export interface OrgData {
-	id: string;
-	displayName: string;
-}
-
 export interface OrgDetails {
-	organisationName: string;
 	usesObservability: boolean | null;
 	observabilityTool: string | null;
 	otherTool: string | null;
 	usesOtel: boolean | null;
+	migrationTimeline: string | null;
 }
 
 interface OrgQuestionsProps {
-	currentOrgData: OrgData | null;
 	orgDetails: OrgDetails;
 	onNext: (details: OrgDetails) => void;
 }
@@ -45,19 +38,14 @@ const observabilityTools = {
 	Others: 'Others',
 };
 
-function OrgQuestions({
-	currentOrgData,
-	orgDetails,
-	onNext,
-}: OrgQuestionsProps): JSX.Element {
-	const { updateOrg } = useAppContext();
-	const { notifications } = useNotifications();
+const migrationTimelineOptions = {
+	lessThanMonth: 'Less than a month',
+	oneToThreeMonths: '1-3 months',
+	greaterThanThreeMonths: 'Greater than 3 months',
+	justExploring: 'Just exploring',
+};
 
-	const { t } = useTranslation(['organizationsettings', 'common']);
-
-	const [organisationName, setOrganisationName] = useState<string>(
-		orgDetails?.organisationName || '',
-	);
+function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 	const [observabilityTool, setObservabilityTool] = useState<string | null>(
 		orgDetails?.observabilityTool || null,
 	);
@@ -66,92 +54,33 @@ function OrgQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
-	useEffect(() => {
-		setOrganisationName(orgDetails.organisationName);
-	}, [orgDetails.organisationName]);
-
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-
 	const [usesOtel, setUsesOtel] = useState<boolean | null>(orgDetails.usesOtel);
+	const [migrationTimeline, setMigrationTimeline] = useState<string | null>(
+		orgDetails?.migrationTimeline || null,
+	);
 
-	const handleOrgNameUpdate = async (): Promise<void> => {
+	const showMigrationQuestion =
+		observabilityTool !== null && observabilityTool !== 'None';
+
+	const handleNext = (): void => {
 		const usesObservability =
 			!observabilityTool?.includes('None') && observabilityTool !== null;
 
-		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
-		if (
-			!currentOrgData ||
-			!organisationName ||
-			organisationName === '' ||
-			orgDetails.organisationName === organisationName
-		) {
-			logEvent('Org Onboarding: Answered', {
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
+		logEvent('Org Onboarding: Answered', {
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 
-			onNext({
-				organisationName,
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
-
-			return;
-		}
-
-		try {
-			setIsLoading(true);
-			const { statusCode, error } = await editOrg({
-				displayName: organisationName,
-				orgId: currentOrgData.id,
-			});
-			if (statusCode === 204) {
-				updateOrg(currentOrgData?.id, organisationName);
-
-				logEvent('Org Onboarding: Org Name Updated', {
-					organisationName,
-				});
-
-				logEvent('Org Onboarding: Answered', {
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-
-				onNext({
-					organisationName,
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-			} else {
-				logEvent('Org Onboarding: Org Name Update Failed', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
+		onNext({
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 	};
 
 	const isValidUsesObservability = (): boolean => {
@@ -173,22 +102,29 @@ function OrgQuestions({
 
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
+		const isMigrationValid = !showMigrationQuestion || migrationTimeline !== null;
 
-		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
+		if (usesOtel !== null && isValidObservability && isMigrationValid) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [organisationName, usesOtel, observabilityTool, otherTool]);
+	}, [
+		usesOtel,
+		observabilityTool,
+		otherTool,
+		migrationTimeline,
+		showMigrationQuestion,
+	]);
 
-	const createObservabilityToolHandler = (tool: string) => (
-		checked: boolean,
-	): void => {
-		if (checked) {
-			setObservabilityTool(tool);
-		} else if (observabilityTool === tool) {
-			setObservabilityTool(null);
+	const handleObservabilityToolChange = (value: string): void => {
+		setObservabilityTool(value);
+		if (value !== 'Others') {
+			setOtherTool('');
+		}
+		if (value === 'None') {
+			setMigrationTimeline(null);
 		}
 	};
 
@@ -196,10 +132,6 @@ function OrgQuestions({
 		setUsesOtel(value === 'yes');
 	};
 
-	const handleOnNext = (): void => {
-		handleOrgNameUpdate();
-	};
-
 	return (
 		<div className="questions-container">
 			<div className="onboarding-header-section">
@@ -214,40 +146,24 @@ function OrgQuestions({
 
 			<div className="questions-form-container">
 				<div className="questions-form">
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Name of your company
-						</label>
-						<Input
-							type="text"
-							name="organisationName"
-							id="organisationName"
-							placeholder="e.g. Simpsonville"
-							autoComplete="off"
-							value={organisationName}
-							onChange={(e): void => setOrganisationName(e.target.value)}
-						/>
-					</div>
-
 					<div className="form-group">
 						<label className="question" htmlFor="observabilityTool">
 							Which observability tool do you currently use?
 						</label>
-						<div className="observability-tools-checkbox-container">
+						<RadioGroup
+							value={observabilityTool || ''}
+							onValueChange={handleObservabilityToolChange}
+							className="observability-tools-radio-container"
+						>
 							{Object.entries(observabilityTools).map(([tool, label]) => {
 								if (tool === 'Others') {
 									return (
 										<div
 											key={tool}
-											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
+											className="radio-item observability-tool-radio-item observability-tool-others-item"
 										>
-											<Checkbox
-												id={`checkbox-${tool}`}
-												checked={observabilityTool === tool}
-												onCheckedChange={createObservabilityToolHandler(tool)}
-												labelName={observabilityTool === 'Others' ? '' : label}
-											/>
-											{observabilityTool === 'Others' && (
+											<RadioGroupItem value={tool} id={`radio-${tool}`} />
+											{observabilityTool === 'Others' ? (
 												<Input
 													type="text"
 													className="onboarding-questionaire-other-input"
@@ -256,55 +172,60 @@ function OrgQuestions({
 													autoFocus
 													onChange={(e): void => setOtherTool(e.target.value)}
 												/>
+											) : (
+												<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 											)}
 										</div>
 									);
 								}
 								return (
-									<div
-										key={tool}
-										className="checkbox-item observability-tool-checkbox-item"
-									>
-										<Checkbox
-											id={`checkbox-${tool}`}
-											checked={observabilityTool === tool}
-											onCheckedChange={createObservabilityToolHandler(tool)}
-											labelName={label}
-										/>
+									<div key={tool} className="radio-item observability-tool-radio-item">
+										<RadioGroupItem value={tool} id={`radio-${tool}`} />
+										<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 									</div>
 								);
 							})}
-						</div>
+						</RadioGroup>
 					</div>
 
+					{showMigrationQuestion && (
+						<div className="form-group">
+							<div className="question">
+								What is your timeline for migrating to SigNoz?
+							</div>
+							<RadioGroup
+								value={migrationTimeline || ''}
+								onValueChange={setMigrationTimeline}
+								className="migration-timeline-radio-container"
+							>
+								{Object.entries(migrationTimelineOptions).map(([key, label]) => (
+									<div key={key} className="radio-item migration-timeline-radio-item">
+										<RadioGroupItem value={key} id={`radio-migration-${key}`} />
+										<RadioGroupLabel htmlFor={`radio-migration-${key}`}>
+											{label}
+										</RadioGroupLabel>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+
 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</div>
-						<div className="opentelemetry-radio-container">
-							<Radio.Group
-								value={((): string | undefined => {
-									if (usesOtel === true) {
-										return 'yes';
-									}
-									if (usesOtel === false) {
-										return 'no';
-									}
-									return undefined;
-								})()}
-								onChange={(e: RadioChangeEvent): void =>
-									handleOtelChange(e.target.value)
-								}
-								className="opentelemetry-radio-group"
-							>
-								<div className="opentelemetry-radio-items-wrapper">
-									<Radio value="yes" className="opentelemetry-radio-item">
-										Yes
-									</Radio>
-									<Radio value="no" className="opentelemetry-radio-item">
-										No
-									</Radio>
-								</div>
-							</Radio.Group>
-						</div>
+						<RadioGroup
+							value={usesOtel === true ? 'yes' : usesOtel === false ? 'no' : ''}
+							onValueChange={handleOtelChange}
+							className="opentelemetry-radio-container"
+						>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="yes" id="radio-otel-yes" />
+								<RadioGroupLabel htmlFor="radio-otel-yes">Yes</RadioGroupLabel>
+							</div>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="no" id="radio-otel-no" />
+								<RadioGroupLabel htmlFor="radio-otel-no">No</RadioGroupLabel>
+							</div>
+						</RadioGroup>
 					</div>
 				</div>
 
@@ -312,15 +233,9 @@ function OrgQuestions({
 					variant="solid"
 					color="primary"
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleOnNext}
+					onClick={handleNext}
 					disabled={isNextDisabled}
-					suffixIcon={
-						isLoading ? (
-							<Loader2 className="animate-spin" size={12} />
-						) : (
-							<ArrowRight size={12} />
-						)
-					}
+					suffixIcon={<ArrowRight size={12} />}
 				>
 					Next
 				</Button>

frontend/src/container/OnboardingQuestionaire/__tests__/OnboardingQuestionaire.test.tsx

@@ -69,7 +69,7 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			expect(screen.getByText(/welcome to signoz cloud/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/name of your company/i)).toBeInTheDocument();
+
 			expect(
 				screen.getByText(/which observability tool do you currently use/i),
 			).toBeInTheDocument();
@@ -86,15 +86,12 @@ describe('OnboardingQuestionaire Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-
 			const datadogCheckbox = screen.getByLabelText(/datadog/i);
 			await user.click(datadogCheckbox);
 
 			const otelYes = screen.getByRole('radio', { name: /yes/i });
 			await user.click(otelYes);
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = await screen.findByRole('button', { name: /next/i });
 			expect(nextButton).not.toBeDisabled();
@@ -112,15 +109,38 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 
+		it('shows migration timeline options only when specific observability tools are selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			render(<OnboardingQuestionaire />);
+
+			// Initially not visible
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+
+			const datadogCheckbox = screen.getByLabelText(/datadog/i);
+			await user.click(datadogCheckbox);
+
+			expect(
+				await screen.findByText(/What is your timeline for migrating to SigNoz/i),
+			).toBeInTheDocument();
+
+			// Not visible when None is selected
+			const noneCheckbox = screen.getByLabelText(/none\/starting fresh/i);
+			await user.click(noneCheckbox);
+
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+		});
+
 		it('proceeds to step 2 when next is clicked', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = screen.getByRole('button', { name: /next/i });
 			await user.click(nextButton);
@@ -137,11 +157,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -157,11 +176,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await waitFor(() => {
@@ -175,11 +193,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -203,11 +220,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -232,11 +248,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate through steps 1 and 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -267,11 +282,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 3
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -290,40 +304,4 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 	});
-
-	describe('Error Handling', () => {
-		it('handles organization update error gracefully', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'INTERNAL_ERROR',
-								message: 'Failed to update organization',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			// Component should still be functional
-			await waitFor(() => {
-				expect(nextButton).not.toBeDisabled();
-			});
-		});
-	});
 });

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -23,7 +23,7 @@ import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
 } from './OptimiseSignozNeeds/OptimiseSignozNeeds';
-import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
+import OrgQuestions, { OrgDetails } from './OrgQuestions/OrgQuestions';
 
 import './OnboardingQuestionaire.styles.scss';
 
@@ -37,11 +37,11 @@ export const showErrorNotification = (
 };
 
 const INITIAL_ORG_DETAILS: OrgDetails = {
-	organisationName: '',
 	usesObservability: true,
 	observabilityTool: '',
 	otherTool: '',
 	usesOtel: null,
+	migrationTimeline: null,
 };
 
 const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
@@ -79,25 +79,11 @@ function OnboardingQuestionaire(): JSX.Element {
 		InviteTeamMembersProps[] | null
 	>(null);
 
-	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
-
 	const [
 		updatingOrgOnboardingStatus,
 		setUpdatingOrgOnboardingStatus,
 	] = useState<boolean>(false);
 
-	useEffect(() => {
-		if (org) {
-			setCurrentOrgData(org[0]);
-
-			setOrgDetails({
-				...orgDetails,
-				organisationName: org[0].displayName,
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [org]);
-
 	useEffect(() => {
 		logEvent('Org Onboarding: Started', {
 			org_id: org?.[0]?.id,
@@ -175,6 +161,7 @@ function OnboardingQuestionaire(): JSX.Element {
 					? (orgDetails?.otherTool as string)
 					: (orgDetails?.observabilityTool as string),
 			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
+			timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
 			reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
 				'Others',
 			)
@@ -208,7 +195,6 @@ function OnboardingQuestionaire(): JSX.Element {
 			<div className="onboarding-questionaire-content">
 				{currentStep === 1 && (
 					<OrgQuestions
-						currentOrgData={currentOrgData}
 						orgDetails={{
 							...orgDetails,
 							usesOtel: orgDetails.usesOtel ?? null,

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -21,6 +21,7 @@ import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { navigateToPage } from 'utils/navigation';
 
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
 import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
@@ -413,7 +414,10 @@ function OnboardingAddDataSource(): JSX.Element {
 		]);
 	}, [org]);
 
-	const handleUpdateCurrentStep = (step: number): void => {
+	const handleUpdateCurrentStep = (
+		step: number,
+		event?: React.MouseEvent,
+	): void => {
 		setCurrentStep(step);
 
 		if (step === 1) {
@@ -443,43 +447,45 @@ function OnboardingAddDataSource(): JSX.Element {
 				...setupStepItemsBase.slice(2),
 			]);
 		} else if (step === 3) {
+			let targetPath: string;
 			switch (selectedDataSource?.module) {
 				case 'apm':
-					history.push(ROUTES.APPLICATION);
+					targetPath = ROUTES.APPLICATION;
 					break;
 				case 'logs':
-					history.push(ROUTES.LOGS);
+					targetPath = ROUTES.LOGS;
 					break;
 				case 'metrics':
-					history.push(ROUTES.METRICS_EXPLORER);
+					targetPath = ROUTES.METRICS_EXPLORER;
 					break;
 				case 'dashboards':
-					history.push(ROUTES.ALL_DASHBOARD);
+					targetPath = ROUTES.ALL_DASHBOARD;
 					break;
 				case 'infra-monitoring-hosts':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_HOSTS);
+					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_HOSTS;
 					break;
 				case 'infra-monitoring-k8s':
-					history.push(ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES);
+					targetPath = ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES;
 					break;
 				case 'messaging-queues-kafka':
-					history.push(ROUTES.MESSAGING_QUEUES_KAFKA);
+					targetPath = ROUTES.MESSAGING_QUEUES_KAFKA;
 					break;
 				case 'messaging-queues-celery':
-					history.push(ROUTES.MESSAGING_QUEUES_CELERY_TASK);
+					targetPath = ROUTES.MESSAGING_QUEUES_CELERY_TASK;
 					break;
 				case 'integrations':
-					history.push(ROUTES.INTEGRATIONS);
+					targetPath = ROUTES.INTEGRATIONS;
 					break;
 				case 'home':
-					history.push(ROUTES.HOME);
+					targetPath = ROUTES.HOME;
 					break;
 				case 'api-monitoring':
-					history.push(ROUTES.API_MONITORING);
+					targetPath = ROUTES.API_MONITORING;
 					break;
 				default:
-					history.push(ROUTES.APPLICATION);
+					targetPath = ROUTES.APPLICATION;
 			}
+			navigateToPage(targetPath, history.push, event);
 		}
 	};
 
@@ -628,7 +634,7 @@ function OnboardingAddDataSource(): JSX.Element {
 							<X
 								size={14}
 								className="onboarding-header-container-close-icon"
-								onClick={(): void => {
+								onClick={(e): void => {
 									logEvent(
 										`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
 										{
@@ -636,7 +642,7 @@ function OnboardingAddDataSource(): JSX.Element {
 										},
 									);
 
-									history.push(ROUTES.HOME);
+									navigateToPage(ROUTES.HOME, history.push, e);
 								}}
 							/>
 							<Typography.Text>Get Started (2/4)</Typography.Text>
@@ -963,7 +969,7 @@ function OnboardingAddDataSource(): JSX.Element {
 													type="primary"
 													disabled={!selectedDataSource}
 													shape="round"
-													onClick={(): void => {
+													onClick={(e): void => {
 														logEvent(
 															`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
 															{
@@ -977,7 +983,7 @@ function OnboardingAddDataSource(): JSX.Element {
 															selectedEnvironment || selectedFramework || selectedDataSource;
 
 														if (currentEntity?.internalRedirect && currentEntity?.link) {
-															history.push(currentEntity.link);
+															navigateToPage(currentEntity.link, history.push, e);
 														} else {
 															handleUpdateCurrentStep(2);
 														}
@@ -1048,7 +1054,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									<Button
 										type="primary"
 										shape="round"
-										onClick={(): void => {
+										onClick={(e): void => {
 											logEvent(
 												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
 												{
@@ -1060,7 +1066,7 @@ function OnboardingAddDataSource(): JSX.Element {
 											);
 
 											handleFilterByCategory('All');
-											handleUpdateCurrentStep(3);
+											handleUpdateCurrentStep(3, e);
 										}}
 									>
 										Continue

frontend/src/container/PanelWrapper/constants.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import BarPanel from 'container/DashboardContainer/visualization/panels/BarPanel/BarPanel';
+import HistogramPanel from 'container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel';
 
 import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
-import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
 import TablePanelWrapper from './TablePanelWrapper';
-import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
@@ -16,8 +16,8 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
-	[PANEL_TYPES.BAR]: UplotPanelWrapper,
-	[PANEL_TYPES.HISTOGRAM]: HistogramPanelWrapper,
+	[PANEL_TYPES.BAR]: BarPanel,
+	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 };
 
 export const DEFAULT_BUCKET_COUNT = 30;

frontend/src/container/SideNav/SideNav.tsx

@@ -65,6 +65,7 @@ import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 import { checkVersionState } from 'utils/app';
 import { showErrorNotification } from 'utils/error';
+import { isModifierKeyPressed, openInNewTab } from 'utils/navigation';
 
 import { useCmdK } from '../../providers/cmdKProvider';
 import { routeConfig } from './config';
@@ -306,8 +307,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		icon: <Cog size={16} />,
 	};
 
-	const isCtrlMetaKey = (e: MouseEvent): boolean => e.ctrlKey || e.metaKey;
-
 	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const [
@@ -436,10 +435,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
-	const openInNewTab = (path: string): void => {
-		window.open(path, '_blank');
-	};
-
 	const onClickGetStarted = (event: MouseEvent): void => {
 		logEvent('Sidebar: Menu clicked', {
 			menuRoute: '/get-started',
@@ -450,7 +445,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			? ROUTES.GET_STARTED_WITH_CLOUD
 			: ROUTES.GET_STARTED;
 
-		if (isCtrlMetaKey(event)) {
+		if (isModifierKeyPressed(event)) {
 			openInNewTab(onboaringRoute);
 		} else {
 			history.push(onboaringRoute);
@@ -465,7 +460,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			const queryString = getQueryString(availableParams || [], params);
 
 			if (pathname !== key) {
-				if (event && isCtrlMetaKey(event)) {
+				if (event && isModifierKeyPressed(event)) {
 					openInNewTab(`${key}?${queryString.join('&')}`);
 				} else {
 					history.push(`${key}?${queryString.join('&')}`, {
@@ -664,7 +659,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const handleMenuItemClick = (event: MouseEvent, item: SidebarItem): void => {
 		if (item.key === ROUTES.SETTINGS) {
-			if (isCtrlMetaKey(event)) {
+			if (isModifierKeyPressed(event)) {
 				openInNewTab(settingsRoute);
 			} else {
 				history.push(settingsRoute);
@@ -842,6 +837,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleHelpSupportMenuItemClick = (info: SidebarItem): void => {
 		const item = helpSupportDropdownMenuItems.find(
 			(item) => !('type' in item) && item.key === info.key,
@@ -851,6 +847,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			window.open(item.url, '_blank');
 		}
 
+		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
+
 		if (item && !('type' in item)) {
 			logEvent('Help Popover: Item clicked', {
 				menuRoute: item.key,
@@ -859,10 +857,18 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 			switch (item.key) {
 				case ROUTES.SHORTCUTS:
-					history.push(ROUTES.SHORTCUTS);
+					if (event && isModifierKeyPressed(event)) {
+						openInNewTab(ROUTES.SHORTCUTS);
+					} else {
+						history.push(ROUTES.SHORTCUTS);
+					}
 					break;
 				case 'invite-collaborators':
-					history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					if (event && isModifierKeyPressed(event)) {
+						openInNewTab(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					} else {
+						history.push(`${ROUTES.ORG_SETTINGS}#invite-team-members`);
+					}
 					break;
 				case 'chat-support':
 					if (window.pylon) {
@@ -881,6 +887,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const handleSettingsMenuItemClick = (info: SidebarItem): void => {
 		const item = userSettingsDropdownMenuItems.find(
 			(item) => item?.key === info.key,
@@ -898,15 +905,30 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			menuRoute: item?.key,
 			menuLabel,
 		});
+
+		const event = (info as SidebarItem & { domEvent?: MouseEvent }).domEvent;
+
 		switch (info.key) {
 			case 'account':
-				history.push(ROUTES.MY_SETTINGS);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.MY_SETTINGS);
+				} else {
+					history.push(ROUTES.MY_SETTINGS);
+				}
 				break;
 			case 'workspace':
-				history.push(ROUTES.SETTINGS);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.SETTINGS);
+				} else {
+					history.push(ROUTES.SETTINGS);
+				}
 				break;
 			case 'license':
-				history.push(ROUTES.LIST_LICENSES);
+				if (event && isModifierKeyPressed(event)) {
+					openInNewTab(ROUTES.LIST_LICENSES);
+				} else {
+					history.push(ROUTES.LIST_LICENSES);
+				}
 				break;
 			case 'logout':
 				Logout();

frontend/src/hooks/__tests__/useSafeNavigate.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Tests for useSafeNavigate's mock contract.
+ *
+ * The real useSafeNavigate hook is globally replaced by a mock via
+ * jest.config.ts moduleNameMapper, so we cannot test the real
+ * implementation here. Instead we verify:
+ *
+ * 1. The mock accepts the new `event` and `newTab` options without
+ *    type errors — ensuring component tests that pass these options
+ *    won't break.
+ * 2. The shouldOpenNewTab decision logic (extracted inline below)
+ *    matches the real hook's behaviour.
+ */
+
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/navigation';
+
+/**
+ * Mirrors the shouldOpenNewTab logic from the real useSafeNavigate hook.
+ * Kept in sync manually — any drift will be caught by integration tests.
+ */
+interface NavigateOptions {
+	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
+}
+
+const shouldOpenNewTab = (options?: NavigateOptions): boolean =>
+	Boolean(
+		options?.newTab || (options?.event && isModifierKeyPressed(options.event)),
+	);
+
+describe('useSafeNavigate mock contract', () => {
+	it('mock returns a safeNavigate function', () => {
+		const { safeNavigate } = useSafeNavigate();
+		expect(typeof safeNavigate).toBe('function');
+	});
+
+	it('safeNavigate accepts string path with event option', () => {
+		const { safeNavigate } = useSafeNavigate();
+		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
+
+		expect(() => {
+			safeNavigate('/alerts', { event });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith('/alerts', { event });
+	});
+
+	it('safeNavigate accepts string path with newTab option', () => {
+		const { safeNavigate } = useSafeNavigate();
+
+		expect(() => {
+			safeNavigate('/dashboard', { newTab: true });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith('/dashboard', { newTab: true });
+	});
+
+	it('safeNavigate accepts SafeNavigateParams with event option', () => {
+		const { safeNavigate } = useSafeNavigate();
+		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
+
+		expect(() => {
+			safeNavigate({ pathname: '/settings', search: '?tab=general' }, { event });
+		}).not.toThrow();
+
+		expect(safeNavigate).toHaveBeenCalledWith(
+			{ pathname: '/settings', search: '?tab=general' },
+			{ event },
+		);
+	});
+});
+
+describe('shouldOpenNewTab decision logic', () => {
+	it('returns true when newTab is true', () => {
+		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
+	});
+
+	it('returns true when event has metaKey pressed', () => {
+		const event = { metaKey: true, ctrlKey: false } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(true);
+	});
+
+	it('returns true when event has ctrlKey pressed', () => {
+		const event = { metaKey: false, ctrlKey: true } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(true);
+	});
+
+	it('returns false when event has no modifier keys', () => {
+		const event = { metaKey: false, ctrlKey: false } as MouseEvent;
+		expect(shouldOpenNewTab({ event })).toBe(false);
+	});
+
+	it('returns false when no options provided', () => {
+		expect(shouldOpenNewTab()).toBe(false);
+		expect(shouldOpenNewTab(undefined)).toBe(false);
+	});
+
+	it('returns false when options provided without event or newTab', () => {
+		expect(shouldOpenNewTab({})).toBe(false);
+	});
+
+	it('newTab takes precedence even without event', () => {
+		expect(shouldOpenNewTab({ newTab: true })).toBe(true);
+	});
+});

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import type { UseActiveLog } from 'hooks/logs/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { ILog } from 'types/api/logs/log';
+
+type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
+
+type UseLogDetailHandlersParams = {
+	defaultTab?: SelectedTab;
+};
+
+type UseLogDetailHandlersResult = {
+	activeLog: UseActiveLog['activeLog'];
+	onAddToQuery: UseActiveLog['onAddToQuery'];
+	selectedTab: SelectedTab;
+	handleSetActiveLog: (log: ILog, selectedTab?: SelectedTab) => void;
+	handleCloseLogDetail: () => void;
+};
+
+function useLogDetailHandlers({
+	defaultTab = VIEW_TYPES.OVERVIEW,
+}: UseLogDetailHandlersParams = {}): UseLogDetailHandlersResult {
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
+
+	const handleSetActiveLog = useCallback(
+		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
+			if (activeLog?.id === log.id) {
+				onClearActiveLog();
+				setSelectedTab(undefined);
+				return;
+			}
+			onSetActiveLog(log);
+			setSelectedTab(nextTab ?? defaultTab);
+		},
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
+	);
+
+	const handleCloseLogDetail = useCallback((): void => {
+		onClearActiveLog();
+		setSelectedTab(undefined);
+	}, [onClearActiveLog]);
+
+	return {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	};
+}
+
+export default useLogDetailHandlers;

frontend/src/hooks/logs/useScrollToLog.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+type UseScrollToLogParams = {
+	logs: Array<{ id: string }>;
+	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
+};
+
+function useScrollToLog({
+	logs,
+	virtuosoRef,
+}: UseScrollToLogParams): (logId: string) => void {
+	return useCallback(
+		(logId: string): void => {
+			const logIndex = logs.findIndex(({ id }) => id === logId);
+			if (logIndex !== -1 && virtuosoRef.current) {
+				virtuosoRef.current.scrollToIndex({
+					index: logIndex,
+					align: 'center',
+					behavior: 'smooth',
+				});
+			}
+		},
+		[logs, virtuosoRef],
+	);
+}
+
+export default useScrollToLog;

frontend/src/hooks/useSafeNavigate.ts

@@ -1,11 +1,13 @@
-import { useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
+import { isModifierKeyPressed } from 'utils/navigation';
 
 interface NavigateOptions {
 	replace?: boolean;
 	state?: any;
 	newTab?: boolean;
+	event?: MouseEvent | React.MouseEvent;
 }
 
 interface SafeNavigateParams {
@@ -105,6 +107,7 @@ export const useSafeNavigate = (
 	const location = useLocation();
 
 	const safeNavigate = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(to: string | SafeNavigateParams, options?: NavigateOptions) => {
 			const currentUrl = new URL(
 				`${location.pathname}${location.search}`,
@@ -122,8 +125,10 @@ export const useSafeNavigate = (
 				);
 			}
 
-			// If newTab is true, open in new tab and return early
-			if (options?.newTab) {
+			const shouldOpenNewTab =
+				options?.newTab || (options?.event && isModifierKeyPressed(options.event));
+
+			if (shouldOpenNewTab) {
 				const targetPath =
 					typeof to === 'string'
 						? to