feat: trace based filters for logs, supporting aggregations as well

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.0
+    image: signoz/signoz:v0.125.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

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.125.0
+    image: signoz/signoz:v0.125.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.0}
+    image: signoz/signoz:${VERSION:-v0.125.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.0}
+    image: signoz/signoz:${VERSION:-v0.125.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -2342,6 +2342,8 @@ components:
           type: boolean
         org_id:
           type: string
+        source:
+          $ref: '#/components/schemas/DashboardtypesSource'
         updatedAt:
           format: date-time
           type: string
@@ -2371,6 +2373,12 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
+    DashboardtypesSource:
+      enum:
+      - user
+      - system
+      - integration
+      type: object
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

dropdown-test.md

@@ -1,101 +0,0 @@
-ere's the full guide. Dev server is at http://localhost:3301. The components are listed by what's easiest to find — top items  
- don't need any setup, bottom items need data (a dashboard with widgets, an alert, a funnel).
-
-1. Sidebar — Help & Settings menus
-
-File: src/container/SideNav/SideNav.tsx  
- Where to look: the left sidebar, scroll to the very bottom. Two icons sit there: a ? icon (Help & Support) and a gear icon  
- (Settings).  
- Click each → a menu pops up to the right.
-Verify: items render with icons, divider lines between groups, click outside closes. Extra test: while the menu is open, cmd-click
-(mac) / ctrl-click (linux) the "Shortcuts" item — should open shortcuts in a new tab, not navigate the current one.  
- URL: any page works, e.g. http://localhost:3301/
-
-2. Alerts list — row "…" action menu
-
-File: src/components/DropDown/DropDown.tsx (the shared wrapper, consumed here)  
- Where to look: the "Action" column at the right of each alert row — a three-dot (…) icon.
-Click it → menu with Enable/Disable, Edit, etc.  
- URL: http://localhost:3301/alerts
-
-3. Alerts list — column-filter button
-
-File: src/components/ResizeTable/DynamicColumnTable.tsx  
- Where to look: the top-right of the alerts table — a sliders/filter icon ("additional filters" button).  
- Click → list of column names with a Switch next to each → toggle to hide/show columns.  
- URL: http://localhost:3301/alerts
-
-4. Alert detail page — action menu in header
-
-File: src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx  
- Where to look: click any alert from the list to open detail page. Top-right of the header: an ellipsis (…) icon next to the  
- enable/disable toggle.  
- Click → Rename / Duplicate / Delete (Delete is red — that's the new danger: true styling).
-URL: alerts list → click any alert.
-
-5. Dashboards list — "New dashboard" split menu
-
-File: src/container/ListOfDashboard/DashboardsList.tsx  
- Where to look: top-right of the dashboards page — a blue "New dashboard" button (or in the empty state, a "New Dashboard" button in
-the center).  
- Click → menu with Create dashboard / Import JSON / View templates.
-URL: http://localhost:3301/dashboard
-
-6. Widget kebab menu (on a dashboard panel)
-
-File: src/container/GridCardLayout/WidgetHeader/index.tsx  
- Where to look: open any dashboard with at least one panel. Hover over a panel — top-right of the panel header shows a
-vertical-ellipsis icon (⋮).  
- Click (note: was hover-trigger before, now click — this is the intentional behavior change) → View / Edit / Clone / Create Alert /
-Download / Delete.  
- URL: http://localhost:3301/dashboard/<dashboardId> — open any dashboard from list.
-
-7. Widget builder — Columns add panel
-
-File: src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx  
- Where to look: from a dashboard, click "+ Add panel" (or edit an existing panel). In the panel builder, in the left "Columns"
-section, there's a plus (+) button next to the column chips.  
- Click → a panel pops up above the button with a Search input + scrollable list of attribute keys to add as columns.  
- URL: http://localhost:3301/dashboard/<dashboardId>/new (a dashboard must already exist)
-
-8. Widget builder — Threshold color picker
-
-File: src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx  
- Where to look: same widget builder, scroll the right-side config panel to "Thresholds" → click "+ Add threshold" → on the new  
- threshold row, click the colored swatch button.  
- Click → Red / Orange / Green / Blue / Custom Color (Custom Color opens a nested color picker on hover).
-
-9. Funnel step — Latency pointer picker
-
-File: src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx  
- Where to look: Traces Funnels page → open or create a funnel → expand a step's config. At the bottom of the step there's "Latency
-pointer" with a dropdown trigger showing the current pointer + a down-chevron.  
- Click → list of pointer options with radio dots (this is the new selection UI — was previously a background highlight).  
- URL: http://localhost:3301/traces-funnels
-
-10. Download button (Excel / CSV)
-
-File: src/container/Download/Download.tsx  
- Where to look (easiest): any APM service detail page → scroll to the Top Operations table → top-right has a "Download" link with a
-cloud icon.  
- Click → Excel / CSV options.
-URL: http://localhost:3301/services/<service-name> — pick any service.  
- Also rendered (same component) on: Logs Explorer toolbar (/logs/logs-explorer) and any explorer page rendering a QueryTable.
-
-11. Explorer card — saved view delete
-
-File: src/components/ExplorerCard/ExplorerCard.tsx  
- Where to look: currently not visible in the UI — the parent component sets showSaveView = false (see ExplorerCard.tsx:165). The
-migration is correct but you won't see it unless that flag is flipped. Skip this one.
-
----
-
-Quick verification priority
-
-If you only have time for a few, hit these — they cover all three migration patterns (Simple, compositional-controlled,
-compositional-with-cmd-click):
-
-1. Sidebar Help menu + cmd-click on "Shortcuts" (covers SideNav compositional + onOpenChange + native MouseEvent handling)
-2. Widget kebab ⋮ on a dashboard panel (covers hover→click behavior change)
-3. Column "+" panel in widget builder (covers controlled-open + custom content compositional API)
-4. Any alert row … on /alerts (covers the shared DropDown wrapper)

ee/modules/dashboard/impldashboard/module.go

@@ -49,6 +49,14 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	storablePublicDashboard, err := module.store.GetPublic(ctx, publicDashboard.DashboardID.StringValue())
 	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 		return err
@@ -129,6 +137,14 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
@@ -138,6 +154,10 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}
 
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
@@ -168,6 +188,14 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err

frontend/plugins/rules/no-antd-components.mjs

@@ -15,6 +15,7 @@
 
 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 
 export default {

frontend/src/AppRoutes/pageComponents.ts

@@ -47,7 +47,6 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
-	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
 			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
@@ -313,13 +312,6 @@ export const PublicDashboardPage = Loadable(
 		),
 );
 
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
 export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),

frontend/src/AppRoutes/routes.ts

@@ -5,7 +5,6 @@ import {
 	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -213,13 +212,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
-	{
-		path: ROUTES.ALERT_TYPE_SELECTION,
-		exact: true,
-		component: AlertTypeSelectionPage,
-		isPrivate: true,
-		key: 'ALERT_TYPE_SELECTION',
-	},
 	{
 		path: ROUTES.ALERTS_NEW,
 		exact: true,
@@ -533,18 +525,6 @@ export const LIST_LICENSES: AppRoutes = {
 	key: 'LIST_LICENSES',
 };
 
-export const oldRoutes = [
-	'/pipelines',
-	'/logs-explorer',
-	'/logs-explorer/live',
-	'/logs-save-views',
-	'/traces-save-views',
-	'/settings/access-tokens',
-	'/settings/api-keys',
-	'/messaging-queues',
-	'/alerts/edit',
-];
-
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
@@ -555,7 +535,9 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',
 	'/alerts/edit': '/alerts/overview',
+	'/alerts/type-selection': '/alerts/new',
 };
+export const oldRoutes = Object.keys(oldNewRoutesMapping);
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 	ROUTES.WORKSPACE_LOCKED,

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

@@ -2999,6 +2999,11 @@ export interface CoretypesPatchableObjectsDTO {
 	deletions: CoretypesObjectGroupDTO[] | null;
 }
 
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -3022,6 +3027,7 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
+	source?: DashboardtypesSourceDTO;
 	/**
 	 * @type string
 	 * @format date-time

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -0,0 +1,17 @@
+.breadcrumb {
+	padding-left: 16px;
+
+	ol {
+		align-items: center;
+	}
+
+	:global(.ant-breadcrumb-separator) {
+		color: var(--muted-foreground);
+	}
+}
+
+.divider {
+	border-color: var(--l1-border);
+	margin: 16px 0;
+	margin-top: 10px;
+}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -0,0 +1,32 @@
+import { Breadcrumb, Divider } from 'antd';
+
+import styles from './AlertBreadcrumb.module.scss';
+import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';
+
+export interface AlertBreadcrumbProps {
+	items: BreadcrumbItemConfig[];
+	className?: string;
+	showDivider?: boolean;
+}
+
+function AlertBreadcrumb({
+	items,
+	className,
+	showDivider = true,
+}: AlertBreadcrumbProps): JSX.Element {
+	const breadcrumbItems = items.map((item) => ({
+		title: <BreadcrumbItem {...item} />,
+	}));
+
+	return (
+		<>
+			<Breadcrumb
+				className={`${styles.breadcrumb} ${className || ''}`}
+				items={breadcrumbItems}
+			/>
+			{showDivider && <Divider className={styles.divider} />}
+		</>
+	);
+}
+
+export default AlertBreadcrumb;

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -0,0 +1,9 @@
+.item {
+	--button-padding: 0;
+	--button-font-size: var(--periscope-font-size-base);
+}
+
+.itemLast {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@signozhq/ui/button';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/app';
+
+import styles from './BreadcrumbItem.module.scss';
+
+export type BreadcrumbItemConfig =
+	| {
+			title: string | null;
+			route?: string;
+	  }
+	| {
+			title: string | null;
+			isLast?: true;
+	  };
+
+function BreadcrumbItem({
+	title,
+	...props
+}: BreadcrumbItemConfig): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
+	if ('isLast' in props) {
+		return <div className={styles.itemLast}>{title}</div>;
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			color="secondary"
+			className={styles.item}
+			onClick={(e: React.MouseEvent): void => {
+				if (!('route' in props) || !props.route) {
+					return;
+				}
+
+				safeNavigate(props.route, { newTab: isModifierKeyPressed(e) });
+			}}
+		>
+			{title}
+		</Button>
+	);
+}
+
+export default BreadcrumbItem;

frontend/src/components/AlertBreadcrumb/index.tsx

@@ -0,0 +1,6 @@
+export { default } from './AlertBreadcrumb';
+export {
+	default as BreadcrumbItem,
+	type BreadcrumbItemConfig,
+} from './BreadcrumbItem';
+export type { AlertBreadcrumbProps } from './AlertBreadcrumb';

frontend/src/components/DropDown/DropDown.tsx

@@ -1,30 +1,46 @@
+import { useState } from 'react';
 import { Ellipsis } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
 
-type DropDownItemClick = (info: { key: string; keyPath: string[] }) => void;
-
 function DropDown({
 	element,
 	onDropDownItemClick,
 }: {
 	element: JSX.Element[];
-	onDropDownItemClick?: DropDownItemClick;
+	onDropDownItemClick?: MenuProps['onClick'];
 }): JSX.Element {
-	const items: MenuItem[] = element.map((e, index) => ({
-		key: String(index),
-		label: e,
-		onClick: onDropDownItemClick,
-	}));
+	const items: MenuProps['items'] = element.map(
+		(e: JSX.Element, index: number) => ({
+			label: e,
+			key: index,
+		}),
+	);
+
+	const [isDdOpen, setDdOpen] = useState<boolean>(false);
 
 	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<Button type="link" className="dropdown-button">
+		<Dropdown
+			menu={{
+				items,
+				onMouseEnter: (): void => setDdOpen(true),
+				onMouseLeave: (): void => setDdOpen(false),
+				onClick: (item): void => onDropDownItemClick?.(item),
+			}}
+			open={isDdOpen}
+		>
+			<Button
+				type="link"
+				className={`dropdown-button`}
+				onClick={(e): void => {
+					e.preventDefault();
+					setDdOpen(true);
+				}}
+			>
 				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,15 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -233,13 +241,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
-										<Button
-											type="text"
-											size="small"
-											icon={<Ellipsis size="md" />}
-										/>
-									</DropdownMenuSimple>
+									<Dropdown trigger={['click']} menu={moreOptionMenu}>
+										<Ellipsis size="md" />
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>

frontend/src/components/LogDetail/index.tsx

@@ -50,6 +50,7 @@ import {
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
+import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -217,20 +218,17 @@ function LogDetailInner({
 
 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return log?.body || '';
+			return (log?.body as string) ?? '';
 		}
-
-		try {
-			const json = JSON.parse(log?.body || '');
-
-			if (typeof json?.message === 'string' && json.message !== '') {
-				return json.message;
-			}
-
-			return log?.body || '';
-		} catch {
-			return log?.body || '';
+		// Feature enabled: body is always a map; message is always a string
+		const bodyObj = log?.body as ILogBody;
+		if (!bodyObj) {
+			return '';
 		}
+		if (bodyObj.message) {
+			return bodyObj.message;
+		}
+		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(

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

@@ -9,7 +9,10 @@ import { Color } from '@signozhq/design-tokens';
 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 {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -99,7 +102,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${data.body}`);
+			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
 		} else {
 			parts.push(attributesText);
 		}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -2,7 +2,10 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -87,7 +90,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => log.body,
+					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<DropdownMenuSimple
+								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									align="end"
+									placement="bottomRight"
 								>
 									<Ellipsis size={16} />
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 					</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,13 +4,13 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Flex, Switch } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -85,9 +85,8 @@ function DynamicColumnTable({
 			);
 		};
 
-	const items: MenuItem[] =
+	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
-			key: String(index),
 			label: (
 				<div className="dynamicColumnsTable-items">
 					<div>{column.title?.toString()}</div>
@@ -97,6 +96,8 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
+			key: index,
+			type: 'checkbox',
 		})) || [];
 
 	// Get current page from URL or default to 1
@@ -125,14 +126,18 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<DropdownMenuSimple menu={{ items }}>
+					<Dropdown
+						getPopupContainer={popupContainer}
+						menu={{ items }}
+						trigger={['click']}
+					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</DropdownMenuSimple>
+					</Dropdown>
 				)}
 			</Flex>
 

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -626,6 +626,10 @@ function TanStackTableInner<TData>(
 										onChange={(value): void => {
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
+											if (page !== 1) {
+												setPage(1);
+												pagination.onPageChange?.(1);
+											}
 										}}
 										items={paginationPageSizeItems}
 									/>

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -401,6 +401,62 @@ describe('TanStackTableView Integration', () => {
 				expect(onLimitChange).toHaveBeenCalledWith(20);
 			});
 		});
+
+		it('resets page to 1 when limit changes', async () => {
+			const user = userEvent.setup();
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const onPageChange = jest.fn();
+
+			renderTanStackTable({
+				props: {
+					pagination: { total: 100, defaultPage: 1, defaultLimit: 10, onPageChange },
+					enableQueryParams: true,
+				},
+				onUrlUpdate,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByRole('navigation')).toBeInTheDocument();
+			});
+
+			// Navigate to page 2
+			const nav = screen.getByRole('navigation');
+			const page2 = Array.from(nav.querySelectorAll('button')).find(
+				(btn) => btn.textContent?.trim() === '2',
+			);
+			if (!page2) {
+				throw new Error('Page 2 button not found in pagination');
+			}
+			await user.click(page2);
+
+			await waitFor(() => {
+				const lastPage = onUrlUpdate.mock.calls
+					.map((call) => call[0].searchParams.get('page'))
+					.filter(Boolean)
+					.pop();
+				expect(lastPage).toBe('2');
+			});
+
+			// Change page size
+			const comboboxTrigger = document.querySelector(
+				'button[aria-haspopup="dialog"]',
+			) as HTMLElement;
+			await user.click(comboboxTrigger);
+
+			const option20 = await screen.findByRole('option', { name: '20' });
+			await user.click(option20);
+
+			// Verify page reset to 1 (nuqs removes default values from URL)
+			await waitFor(() => {
+				const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+				const lastPage = lastCall[0].searchParams.get('page');
+				expect(lastPage === '1' || lastPage === null).toBe(true);
+				expect(lastCall[0].searchParams.get('limit')).toBe('20');
+			});
+
+			// Verify onPageChange callback was called with 1
+			expect(onPageChange).toHaveBeenCalledWith(1);
+		});
 	});
 
 	describe('sorting', () => {

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Button } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -28,17 +27,20 @@ function TimePreference({
 
 	const menu = useMemo(
 		() => ({
-			items: menuItems.map((item) => ({
-				...item,
-				onClick: timeMenuItemOnChangeHandler,
-			})),
+			items: menuItems,
+			onClick: timeMenuItemOnChangeHandler,
 		}),
 		[timeMenuItemOnChangeHandler],
 	);
 
 	return (
-		<DropdownMenuSimple menu={menu} className="time-selection-menu">
-			<Button className="time-selection-target">
+		<Dropdown
+			menu={menu}
+			rootClassName="time-selection-menu"
+			className="time-selection-target"
+			trigger={['click']}
+		>
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -47,7 +49,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/constants/routes.ts

@@ -29,7 +29,6 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
-	ALERT_TYPE_SELECTION: '/alerts/type-selection',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/edit/:channelId',

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -1,12 +1,23 @@
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
-import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import CreateAlertPage from 'pages/CreateAlert';
 import { act, fireEvent, render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({
@@ -54,20 +65,13 @@ describe('Alert rule documentation redirection', () => {
 		window.open = mockWindowOpen;
 	});
 
-	jest.mock('react-router-dom', () => ({
-		...jest.requireActual('react-router-dom'),
-		useLocation: (): { pathname: string } => ({
-			pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERT_TYPE_SELECTION}`,
-		}),
-	}));
-
 	beforeEach(() => {
 		act(() => {
 			renderResult = render(
-				<AlertTypeSelectionPage />,
+				<CreateAlertPage />,
 				{},
 				{
-					initialRoute: ROUTES.ALERT_TYPE_SELECTION,
+					initialRoute: ROUTES.ALERTS_NEW,
 				},
 			);
 		});

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -15,6 +15,18 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: 'ruleType=anomaly_rule',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -0,0 +1,75 @@
+.create-alert-tabs {
+	&__extra {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}
+
+.create-alert-wrapper {
+	margin-top: 10px;
+
+	.divider {
+		border-color: var(--l1-border);
+		margin: 16px 0;
+	}
+
+	.breadcrumb-divider {
+		margin-top: 10px;
+	}
+}
+
+.create-alert__breadcrumb {
+	padding-left: 16px;
+
+	ol {
+		align-items: center;
+	}
+
+	.breadcrumb-item {
+		color: var(--l2-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: 0.25px;
+		padding: 0;
+	}
+
+	.ant-breadcrumb-separator,
+	.breadcrumb-item--last {
+		color: var(--muted-foreground);
+		font-family: 'Geist Mono';
+	}
+}
+
+.alerts-container {
+	.top-level-tab.periscope-tab {
+		padding: 2px 0;
+	}
+
+	.ant-tabs {
+		&-nav {
+			padding: 0 8px;
+			margin-bottom: 0 !important;
+
+			&::before {
+				border-bottom: 1px solid var(--l1-border) !important;
+			}
+		}
+
+		&-tab {
+			&[data-node-key='TriggeredAlerts'] {
+				margin-left: 16px;
+			}
+
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
+			[aria-selected='false'] {
+				.periscope-tab {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+}

frontend/src/container/CreateAlertRule/SelectAlertType/__tests__/SelectAlertType.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
+import * as appHooks from 'providers/App/App';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import SelectAlertType from '..';
+
+const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
+
+describe('SelectAlertType', () => {
+	const mockOnSelect = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		useAppContextSpy.mockReturnValue(getAppContextMockState());
+	});
+
+	it('should render all alert type options when anomaly detection is enabled', () => {
+		useAppContextSpy.mockReturnValue({
+			...getAppContextMockState({}),
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
+		});
+
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+
+		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
+	});
+
+	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+
+		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
+		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
+		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
+	});
+
+	it('should call onSelect with metrics based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('metric_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.METRICS_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with anomaly based alert type', () => {
+		useAppContextSpy.mockReturnValue({
+			...getAppContextMockState({}),
+			featureFlags: [
+				{
+					name: FeatureKeys.ANOMALY_DETECTION,
+					active: true,
+					usage: 0,
+					usage_limit: -1,
+					route: '',
+				},
+			],
+		});
+
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('anomaly_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.ANOMALY_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with log based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('log_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(AlertTypes.LOGS_BASED_ALERT, false);
+	});
+
+	it('should call onSelect with traces based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('traces_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.TRACES_BASED_ALERT,
+			false,
+		);
+	});
+
+	it('should call onSelect with exceptions based alert type', () => {
+		render(<SelectAlertType onSelect={mockOnSelect} />);
+		fireEvent.click(screen.getByText('exceptions_based_alert'));
+
+		expect(mockOnSelect).toHaveBeenCalledWith(
+			AlertTypes.EXCEPTIONS_BASED_ALERT,
+			false,
+		);
+	});
+});

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

@@ -1,13 +1,37 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
+import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as useCompositeQueryParamHooks from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import * as navigateHooks from 'hooks/useSafeNavigate';
 import * as useUrlQueryHooks from 'hooks/useUrlQuery';
+import * as appHooks from 'providers/App/App';
+import { render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { DataSource } from 'types/common/queryBuilder';
 
 import CreateAlertRule from '../index';
 
+jest.mock('react-router-dom-v5-compat', () => ({
+	...jest.requireActual('react-router-dom-v5-compat'),
+	useNavigationType: jest.fn(() => 'PUSH'),
+	useLocation: jest.fn(() => ({
+		pathname: '/alerts/new',
+		search: '',
+		hash: '',
+		state: null,
+	})),
+	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: function MockDateTimeSelector(): JSX.Element {
+		return <div data-testid="datetime-selector">Mock DateTime Selector</div>;
+	},
+}));
+
 jest.mock('container/FormAlertRules', () => ({
 	__esModule: true,
 	default: function MockFormAlertRules({
@@ -48,10 +72,14 @@ const useCompositeQueryParamSpy = jest.spyOn(
 	'useGetCompositeQueryParam',
 );
 const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
+const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
+const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
 
 const mockSetUrlQuery = jest.fn();
 const mockToString = jest.fn();
 const mockGetUrlQuery = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockDeleteUrlQuery = jest.fn();
 
 const FORM_ALERT_RULES_TEXT = 'Form Alert Rules';
 const CREATE_ALERT_V2_TEXT = 'Create Alert V2';
@@ -63,8 +91,13 @@ describe('CreateAlertRule', () => {
 			set: mockSetUrlQuery,
 			toString: mockToString,
 			get: mockGetUrlQuery,
+			delete: mockDeleteUrlQuery,
 		} as Partial<URLSearchParams> as URLSearchParams);
 		useCompositeQueryParamSpy.mockReturnValue(initialQueriesMap.metrics);
+		useSafeNavigateSpy.mockReturnValue({
+			safeNavigate: mockSafeNavigate,
+		});
+		useAppContextSpy.mockReturnValue(getAppContextMockState());
 	});
 
 	it('should render classic flow when showClassicCreateAlertsPage is true', () => {
@@ -72,18 +105,53 @@ describe('CreateAlertRule', () => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
 				return 'true';
 			}
+			if (key === QueryParams.alertType) {
+				return AlertTypes.METRICS_BASED_ALERT;
+			}
 			return null;
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
 	});
 
-	it('should render new flow by default', () => {
-		mockGetUrlQuery.mockReturnValue(null);
+	it('should render new flow when alertType is provided', () => {
+		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.alertType) {
+				return AlertTypes.METRICS_BASED_ALERT;
+			}
+			return null;
+		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
 	});
 
+	it('should render type selection when no alertType in URL and no compositeQuery', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue(null);
+		render(<CreateAlertRule />);
+		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
+		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
+	});
+
+	it('should skip type selection and render alert form when compositeQuery is present', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue({
+			...initialQueriesMap.metrics,
+			builder: {
+				...initialQueriesMap.metrics.builder,
+				queryData: [
+					{
+						...initialQueriesMap.metrics.builder.queryData[0],
+						dataSource: DataSource.METRICS,
+					},
+				],
+			},
+		});
+		render(<CreateAlertRule />);
+		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
+	});
+
 	it('should render classic flow when ruleType is anomaly_rule even if showClassicCreateAlertsPage is not true', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
@@ -111,8 +179,13 @@ describe('CreateAlertRule', () => {
 		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should use alertType from compositeQuery dataSource when alertType is not in URL', () => {
-		mockGetUrlQuery.mockReturnValue(null);
+	it('should use alertType from URL over compositeQuery dataSource', () => {
+		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.alertType) {
+				return AlertTypes.LOGS_BASED_ALERT;
+			}
+			return null;
+		});
 		useCompositeQueryParamSpy.mockReturnValue({
 			...initialQueriesMap.metrics,
 			builder: {
@@ -127,14 +200,123 @@ describe('CreateAlertRule', () => {
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.TRACES_BASED_ALERT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should default to METRICS_BASED_ALERT when no alertType and no compositeQuery', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue(null);
-		render(<CreateAlertRule />);
-		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
+	describe('handleSelectType navigation', () => {
+		beforeEach(() => {
+			mockGetUrlQuery.mockReturnValue(null);
+			useCompositeQueryParamSpy.mockReturnValue(null);
+		});
+
+		it('should navigate with threshold alert params for metrics alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('metric_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for logs alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('log_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.LOGS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for traces alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('traces_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.TRACES_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with threshold alert params for exceptions alert', () => {
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('exceptions_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.EXCEPTIONS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate with anomaly detection params for anomaly alert', () => {
+			useAppContextSpy.mockReturnValue({
+				...getAppContextMockState({}),
+				featureFlags: [
+					{
+						name: FeatureKeys.ANOMALY_DETECTION,
+						active: true,
+						usage: 0,
+						usage_limit: -1,
+						route: '',
+					},
+				],
+			});
+
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('anomaly_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'anomaly_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
+
+		it('should navigate even when showClassicCreateAlertsPage flag is present', () => {
+			mockGetUrlQuery.mockImplementation((key: string) => {
+				if (key === QueryParams.showClassicCreateAlertsPage) {
+					return 'true';
+				}
+				return null;
+			});
+
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('metric_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
 	});
 });

frontend/src/container/CreateAlertRule/defaults.ts

@@ -208,3 +208,11 @@ export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
 	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,
 	[AlertTypes.EXCEPTIONS_BASED_ALERT]: exceptionAlertDefaults,
 };
+
+export const ALERT_TYPE_BREADCRUMB_TITLE: Record<AlertTypes, string> = {
+	[AlertTypes.ANOMALY_BASED_ALERT]: 'Anomaly-Based Alert',
+	[AlertTypes.METRICS_BASED_ALERT]: 'Metric-Based Alert',
+	[AlertTypes.LOGS_BASED_ALERT]: 'Log-Based Alert',
+	[AlertTypes.TRACES_BASED_ALERT]: 'Traces-Based Alert',
+	[AlertTypes.EXCEPTIONS_BASED_ALERT]: 'Exceptions-Based Alert',
+};

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,21 +1,34 @@
-import { useMemo } from 'react';
-import { Form } from 'antd';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Form, Tabs, TabsProps } from 'antd';
+import logEvent from 'api/common/logEvent';
+import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
+import AlertBreadcrumb from 'components/AlertBreadcrumb';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
 import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
+import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { AlertListTabs } from 'pages/AlertList/types';
+import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 
 import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
-import { ALERTS_VALUES_MAP } from './defaults';
+import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
+import SelectAlertType from './SelectAlertType';
+
+import './CreateAlertRule.styles.scss';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	const ruleTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const alertTypeFromURL = queryParams.get(QueryParams.alertType);
@@ -23,6 +36,15 @@ function CreateRules(): JSX.Element {
 	const showClassicCreateAlertsPageFlag =
 		queryParams.get(QueryParams.showClassicCreateAlertsPage) === 'true';
 
+	const isTypeSelectionMode =
+		!alertTypeFromURL && !ruleTypeFromURL && !compositeQuery;
+
+	useEffect(() => {
+		if (isTypeSelectionMode) {
+			logEvent('Alert: New alert data source selection page visited', {});
+		}
+	}, [isTypeSelectionMode]);
+
 	const alertType = useMemo(() => {
 		if (ruleTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
 			return AlertTypes.ANOMALY_BASED_ALERT;
@@ -45,22 +67,142 @@ function CreateRules(): JSX.Element {
 		[alertType, version],
 	);
 
-	// Load old alerts flow always for anomaly based alerts and when showClassicCreateAlertsPage is true
-	if (
-		showClassicCreateAlertsPageFlag ||
-		alertType === AlertTypes.ANOMALY_BASED_ALERT
-	) {
-		return (
-			<FormAlertRules
-				alertType={alertType}
-				formInstance={formInstance}
-				initialValue={initialAlertValue}
-				ruleId=""
-			/>
-		);
-	}
+	const handleTabChange = useCallback(
+		(tab: string): void => {
+			queryParams.set('tab', tab);
+			queryParams.delete('subTab');
+			queryParams.delete('search');
+			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${queryParams.toString()}`);
+		},
+		[safeNavigate, queryParams],
+	);
 
-	return <CreateAlertV2 alertType={alertType} />;
+	const handleSelectType = useCallback(
+		(type: AlertTypes, newTab?: boolean): void => {
+			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
+				queryParams.set(
+					QueryParams.ruleType,
+					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+				);
+				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
+			} else {
+				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
+				queryParams.set(QueryParams.alertType, type);
+			}
+
+			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
+		},
+		[queryParams, safeNavigate],
+	);
+
+	const alertContent = useMemo(() => {
+		if (isTypeSelectionMode) {
+			return <SelectAlertType onSelect={handleSelectType} />;
+		}
+
+		if (
+			showClassicCreateAlertsPageFlag ||
+			alertType === AlertTypes.ANOMALY_BASED_ALERT
+		) {
+			return (
+				<FormAlertRules
+					alertType={alertType}
+					formInstance={formInstance}
+					initialValue={initialAlertValue}
+					ruleId=""
+				/>
+			);
+		}
+		return <CreateAlertV2 alertType={alertType} />;
+	}, [
+		isTypeSelectionMode,
+		handleSelectType,
+		showClassicCreateAlertsPageFlag,
+		alertType,
+		formInstance,
+		initialAlertValue,
+	]);
+
+	const items: TabsProps['items'] = [
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<GalleryVerticalEnd size={14} />
+					Triggered Alerts
+				</div>
+			),
+			key: AlertListTabs.TRIGGERED_ALERTS,
+			children: null,
+		},
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<Pyramid size={14} />
+					Alert Rules
+				</div>
+			),
+			key: AlertListTabs.ALERT_RULES,
+			children: (
+				<div className="create-alert-wrapper">
+					<AlertBreadcrumb
+						className="create-alert__breadcrumb"
+						items={
+							isTypeSelectionMode
+								? [
+										{
+											title: 'Alert Rules',
+											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
+										},
+										{ title: 'Select Alert Type', isLast: true },
+									]
+								: [
+										{
+											title: 'Alert Rules',
+											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
+										},
+										{ title: 'Select Alert Type', route: ROUTES.ALERTS_NEW },
+										{
+											title: ALERT_TYPE_BREADCRUMB_TITLE[alertType],
+											isLast: true,
+										},
+									]
+						}
+					/>
+					{alertContent}
+				</div>
+			),
+		},
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<ConfigureIcon width={14} height={14} />
+					Configuration
+				</div>
+			),
+			key: AlertListTabs.CONFIGURATION,
+			children: null,
+		},
+	];
+
+	return (
+		<Tabs
+			destroyInactiveTabPane
+			items={items}
+			activeKey={AlertListTabs.ALERT_RULES}
+			onChange={handleTabChange}
+			className="alerts-container create-alert-tabs"
+			tabBarExtraContent={
+				<div className="create-alert-tabs__extra">
+					<DateTimeSelector showAutoRefresh />
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare
+						enableFeedback
+					/>
+				</div>
+			}
+		/>
+	);
 }
 
 export default CreateRules;

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -9,6 +9,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RotateCcw } from '@signozhq/icons';
+import { useAlertRuleOptional } from 'providers/Alert';
 import { Labels } from 'types/api/alerts/def';
 
 import { useCreateAlertState } from '../context';
@@ -18,6 +19,7 @@ import './styles.scss';
 
 function CreateAlertHeader(): JSX.Element {
 	const { alertState, setAlertState, isEditMode } = useCreateAlertState();
+	const alertRuleContext = useAlertRuleOptional();
 
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
@@ -74,9 +76,13 @@ function CreateAlertHeader(): JSX.Element {
 				<Input
 					type="text"
 					value={alertState.name}
-					onChange={(e): void =>
-						setAlertState({ type: 'SET_ALERT_NAME', payload: e.target.value })
-					}
+					onChange={(e): void => {
+						const newName = e.target.value;
+						setAlertState({ type: 'SET_ALERT_NAME', payload: newName });
+						if (isEditMode && alertRuleContext?.setAlertRuleName) {
+							alertRuleContext.setAlertRuleName(newName);
+						}
+					}}
 					className="alert-header__input title"
 					placeholder="Enter alert rule name"
 					data-testid="alert-name-input"

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

@@ -20,6 +20,11 @@ import {
 } from './utils';
 
 import './styles.scss';
+import {
+	invalidateGetRuleByID,
+	invalidateListRules,
+} from 'api/generated/services/rules';
+import { useQueryClient } from 'react-query';
 
 function Footer(): JSX.Element {
 	const {
@@ -115,6 +120,7 @@ function Footer(): JSX.Element {
 		testAlertRule,
 	]);
 
+	const queryClient = useQueryClient();
 	const handleSaveAlert = useCallback((): void => {
 		const payload = buildCreateThresholdAlertRulePayload({
 			alertType,
@@ -133,6 +139,9 @@ function Footer(): JSX.Element {
 				},
 				{
 					onSuccess: () => {
+						void invalidateGetRuleByID(queryClient, { id: ruleId });
+						void invalidateListRules(queryClient);
+
 						toast.success('Alert rule updated successfully');
 						safeNavigate('/alerts');
 					},

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

@@ -7,6 +7,7 @@ import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationS
 
 import * as createAlertState from '../../context';
 import Footer from '../Footer';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 // Mock the hooks used by Footer component
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -64,6 +65,12 @@ const mockAlertContextState = createMockAlertContextState({
 	},
 });
 
+const WrappedFooter = (): JSX.Element => (
+	<MockQueryClientProvider>
+		<Footer />
+	</MockQueryClientProvider>
+);
+
 jest
 	.spyOn(createAlertState, 'useCreateAlertState')
 	.mockReturnValue(mockAlertContextState);
@@ -97,20 +104,20 @@ describe('Footer', () => {
 	});
 
 	it('should render the component with 3 buttons', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		expect(screen.getByText(SAVE_ALERT_RULE_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(TEST_NOTIFICATION_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(DISCARD_TEXT)).toBeInTheDocument();
 	});
 
 	it('discard action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(DISCARD_TEXT));
 		expect(mockDiscardAlertRule).toHaveBeenCalled();
 	});
 
 	it('save alert rule action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockCreateAlertRule).toHaveBeenCalled();
 	});
@@ -120,13 +127,13 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isEditMode: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockUpdateAlertRule).toHaveBeenCalled();
 	});
 
 	it('test notification action works correctly', () => {
-		render(<Footer />);
+		render(<WrappedFooter />);
 		fireEvent.click(screen.getByText(TEST_NOTIFICATION_TEXT));
 		expect(mockTestAlertRule).toHaveBeenCalled();
 	});
@@ -136,7 +143,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -152,7 +159,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -169,7 +176,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -189,7 +196,7 @@ describe('Footer', () => {
 				name: '',
 			},
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -217,7 +224,7 @@ describe('Footer', () => {
 			},
 		});
 
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -245,7 +252,7 @@ describe('Footer', () => {
 			},
 		});
 
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -261,7 +268,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When testing alert rule, the play icon is replaced with a loader icon
 		expect(
@@ -276,7 +283,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When updating alert rule, the check icon is replaced with a loader icon
 		expect(
@@ -291,7 +298,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<Footer />);
+		render(<WrappedFooter />);
 
 		// When creating alert rule, the check icon is replaced with a loader icon
 		expect(

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,13 +11,8 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -205,15 +200,10 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild disabled={isFetchingHosts}>
-								<Button variant="link" color="none">
-									<Link2 size={12} />
-									<span>{stripProtocol(activeHost?.url ?? '')}</span>
-									<ChevronDown size={12} />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start">
+						<Dropdown
+							trigger={['click']}
+							disabled={isFetchingHosts}
+							dropdownRender={(): JSX.Element => (
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -246,8 +236,14 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							</DropdownMenuContent>
-						</DropdownMenu>
+							)}
+						>
+							<Button variant="link" color="none">
+								<Link2 size={12} />
+								<span>{stripProtocol(activeHost?.url ?? '')}</span>
+								<ChevronDown size={12} />
+							</Button>
+						</Dropdown>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}

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

@@ -1,5 +1,4 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
@@ -143,13 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

frontend/src/container/Download/Download.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex } from 'antd';
+import { Button, Dropdown, MenuProps, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -68,7 +67,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};
 
 	return (
-		<DropdownMenuSimple menu={menu}>
+		<Dropdown menu={menu} trigger={['click']}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -80,7 +79,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/FormAlertRules/index.tsx

@@ -38,6 +38,7 @@ import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/map
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty, isEqual } from 'lodash-es';
 import Tabs2 from 'periscope/components/Tabs2';
+import { useAlertRuleOptional } from 'providers/Alert';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -92,7 +93,6 @@ const ALERT_SETUP_GUIDE_URLS: Record<AlertTypes, string> = {
 		'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 };
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function FormAlertRules({
 	alertType,
 	formInstance,
@@ -160,6 +160,32 @@ function FormAlertRules({
 	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
 	const [yAxisUnit, setYAxisUnit] = useState<string>(currentQuery.unit || '');
 
+	const alertRuleContext = useAlertRuleOptional();
+	const providerAlertName = alertRuleContext?.alertRuleName;
+	useEffect(() => {
+		if (providerAlertName) {
+			setAlertDef((prev) => {
+				if (prev.alert === providerAlertName) {
+					return prev;
+				}
+				return { ...prev, alert: providerAlertName };
+			});
+			formInstance.setFieldsValue({ alert: providerAlertName });
+		}
+	}, [providerAlertName, formInstance]);
+
+	// Wrap setAlertDef to sync alert name to provider when user types
+	const handleSetAlertDef = useCallback(
+		(newDef: AlertDef) => {
+			setAlertDef(newDef);
+			// Sync alert name change to provider for header display
+			if (newDef.alert !== alertDef.alert && alertRuleContext?.setAlertRuleName) {
+				alertRuleContext.setAlertRuleName(newDef.alert);
+			}
+		},
+		[alertDef.alert, alertRuleContext],
+	);
+
 	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);
 
 	const [detectionMethod, setDetectionMethod] = useState<string | null>(null);
@@ -680,7 +706,7 @@ function FormAlertRules({
 	const renderBasicInfo = (): JSX.Element => (
 		<BasicInfo
 			alertDef={alertDef}
-			setAlertDef={setAlertDef}
+			setAlertDef={handleSetAlertDef}
 			isNewRule={isNewRule}
 		/>
 	);

frontend/src/container/GeneralSettings/styles.ts

@@ -1,4 +1,8 @@
-import { Col, Input as InputComponent } from 'antd';
+import {
+	Col,
+	Dropdown as DropDownComponent,
+	Input as InputComponent,
+} from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -30,6 +34,16 @@ export const ButtonContainer = styled.div`
 	}
 `;
 
+export const Dropdown = styled(DropDownComponent)`
+	&&& {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 150px;
+		min-width: 150px;
+	}
+`;
+
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -177,7 +176,6 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 
 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -210,7 +208,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		await user.click(moreOptionsButton);
+		fireEvent.mouseEnter(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -54,17 +54,6 @@
 	visibility: visible;
 }
 
-// currently the width of the dropdown menu is set to 100% of the parent container,
-// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
-// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
-// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
-
-[data-radix-popper-content-wrapper]
-	[data-slot='dropdown-menu-content'].widget-header-dropdown
-	[data-slot='dropdown-menu-item'] {
-	width: unset !important;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -467,7 +467,6 @@ describe('WidgetHeader', () => {
 
 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -484,7 +483,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -495,7 +494,6 @@ describe('WidgetHeader', () => {
 		});
 
 		it('Create Alerts menu item is enabled and clickable', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -519,12 +517,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await user.click(createAlertsMenuItem);
+			await userEvent.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -15,8 +15,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -129,7 +128,7 @@ function WidgetHeader({
 		],
 	);
 
-	const onMenuItemSelectHandler = useCallback(
+	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -189,8 +188,18 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
-				rightIcon: <SquareArrowOutUpRight size="lg" />,
+				label: (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'baseline',
+							justifyContent: 'space-between',
+						}}
+					>
+						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
+						<SquareArrowOutUpRight size={10} />
+					</span>
+				),
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -212,10 +221,8 @@ function WidgetHeader({
 
 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList.map((item) => ({
-				...item,
-				onClick: onMenuItemSelectHandler,
-			})),
+			items: updatedMenuList,
+			onClick: onMenuItemSelectHandler,
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -314,7 +321,7 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<DropdownMenuSimple menu={menu} side="bottom" align="end">
+							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -322,7 +329,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</DropdownMenuSimple>
+							</Dropdown>
 						)}
 					</div>
 				</>

frontend/src/container/GridCardLayout/WidgetHeader/types.ts

@@ -6,7 +6,6 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
-	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,9 +1,9 @@
-import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 
-export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
+export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -111,7 +111,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				number: allAlertRules?.length,
 				layout: 'new',
 			});
-			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, {
+			safeNavigate(ROUTES.ALERTS_NEW, {
 				newTab: isModifierKeyPressed(e),
 			});
 		},

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,12 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import {
 	Button,
+	Dropdown,
 	Flex,
 	Input,
+	MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -552,7 +553,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuItem[] = [
+		const menuItems: MenuProps['items'] = [
 			{
 				label: (
 					<div
@@ -710,11 +711,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="text"
@@ -726,7 +727,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 								<Button
 									type="text"
 									className="learn-more"
@@ -755,11 +756,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="primary"
@@ -772,7 +773,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,13 +2,7 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import {
-	type BaseMenuItem,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Dropdown, MenuProps } from 'antd';
 import {
 	negateOperator,
 	OPERATORS,
@@ -141,38 +135,41 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler = (key: string): void => {
+	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[key];
+		const handler = mapper[props.key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	const menuItems: BaseMenuItem[] = [
-		{
-			key: DROPDOWN_KEY.FILTER_IN,
-			label: `Filter for ${value}`,
-		},
-		{
-			key: DROPDOWN_KEY.FILTER_OUT,
-			label: `Filter out ${value}`,
-		},
-		...(isGroupBySupported
-			? [
-					{
-						key: DROPDOWN_KEY.GROUP_BY,
-						label: `Group by ${nodeKey}`,
-					},
-				]
-			: []),
-	];
+	const menu: MenuProps = {
+		items: [
+			{
+				key: DROPDOWN_KEY.FILTER_IN,
+				label: `Filter for ${value}`,
+			},
+			{
+				key: DROPDOWN_KEY.FILTER_OUT,
+				label: `Filter out ${value}`,
+			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
+		],
+		onClick: onClickHandler,
+	};
 
 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -221,23 +218,15 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<div data-log-detail-ignore="true">
-								{menuItems.map((item) => (
-									<DropdownMenuItem
-										key={item.key}
-										onSelect={(): void => onClickHandler(item.key as string)}
-									>
-										{item.label}
-									</DropdownMenuItem>
-								))}
-							</div>
-						</DropdownMenuContent>
-					</DropdownMenu>
+					<Dropdown
+						menu={menu}
+						trigger={['click']}
+						dropdownRender={(originNode): React.ReactNode => (
+							<div data-log-detail-ignore="true">{originNode}</div>
+						)}
+					>
+						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+					</Dropdown>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/LogDetailedView/FieldRenderer.styles.scss

@@ -22,3 +22,9 @@
 		gap: 8px;
 	}
 }
+
+// FieldRenderer is used inside log/trace/metric detail drawers (z-index 1000).
+// The design-system tooltip defaults to z-index 50 and would render behind them.
+.field-renderer-tooltip-content {
+	--tooltip-z-index: 1000;
+}

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -1,4 +1,5 @@
-import { Divider, Tooltip } from 'antd';
+import { Divider } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
 import { TagContainer, TagLabel, TagValue } from './FieldRenderer.styles';
@@ -7,6 +8,10 @@ import { getFieldAttributes } from './utils';
 
 import './FieldRenderer.styles.scss';
 
+const TOOLTIP_CONTENT_PROPS = {
+	className: 'field-renderer-tooltip-content',
+};
+
 function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 	const { dataType, newField, logType } = getFieldAttributes(field);
 
@@ -14,11 +19,16 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
 		<span className="field-renderer-container">
 			{dataType && newField && logType ? (
 				<>
-					<Tooltip placement="left" title={newField} mouseLeaveDelay={0}>
+					<TooltipSimple
+						title={newField}
+						side="left"
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+						arrow
+					>
 						<Typography.Text truncate={1} className="label">
 							{newField}{' '}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 
 					<div className="tags">
 						<TagContainer>

frontend/src/container/LogDetailedView/Overview.tsx

@@ -14,7 +14,7 @@ import { ILog } from 'types/api/logs/log';
 
 import { ActionItemProps } from './ActionItem';
 import TableView from './TableView';
-import { removeEscapeCharacters } from './utils';
+import { getBodyDisplayString, removeEscapeCharacters } from './utils';
 
 import './Overview.styles.scss';
 
@@ -112,7 +112,7 @@ function Overview({
 						children: (
 							<div className="logs-body-content">
 								<MEditor
-									value={removeEscapeCharacters(logData.body)}
+									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
 									language="json"
 									options={options}
 									onChange={(): void => {}}

frontend/src/container/LogDetailedView/TableView.tsx

@@ -106,10 +106,20 @@ function TableView({
 		isListViewPanel,
 	]);
 
-	const flattenLogData: Record<string, string> | null = useMemo(
-		() => (logData ? flattenObject(logData) : null),
-		[logData],
-	);
+	// When USE_JSON_BODY is enabled, body arrives as a pre-parsed object. Serialize it
+	// back to a string so flattenObject keeps `body` as a single table row instead of
+	// recursively expanding it into dotted sub-keys (body.message, body.foo.bar, …),
+	// which would break the tree view in BodyContent that relies on record.field === 'body'.
+	const flattenLogData: Record<string, string> | null = useMemo(() => {
+		if (!logData) {
+			return null;
+		}
+		const normalizedLog =
+			typeof logData.body === 'object' && logData.body !== null
+				? { ...logData, body: JSON.stringify(logData.body) }
+				: logData;
+		return flattenObject(normalizedLog);
+	}, [logData]);
 
 	const handleClick = (
 		operator: string,

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -10,7 +10,7 @@ const MAX_BODY_BYTES = 100 * 1024; // 100 KB
 
 // Hook for async JSON processing
 const useAsyncJSONProcessing = (
-	value: string,
+	value: string | Record<string, unknown>,
 	shouldProcess: boolean,
 	handleChangeSelectedView?: ChangeViewFunctionType,
 ): {
@@ -40,11 +40,17 @@ const useAsyncJSONProcessing = (
 			return (): void => {};
 		}
 
-		// Avoid processing if the json is too large
-		const byteSize = new Blob([value]).size;
-		if (byteSize > MAX_BODY_BYTES) {
-			return (): void => {};
-		}
+		// When value is already a parsed object skip the size check and JSON parsing
+		const parseBody = (): Record<string, unknown> | null => {
+			if (typeof value === 'object' && value !== null) {
+				return value as Record<string, unknown>;
+			}
+			const byteSize = new Blob([value as string]).size;
+			if (byteSize > MAX_BODY_BYTES) {
+				return null;
+			}
+			return recursiveParseJSON(value as string);
+		};
 
 		processingRef.current = true;
 		setJsonState({ isLoading: true, treeData: null, error: null });
@@ -53,8 +59,8 @@ const useAsyncJSONProcessing = (
 		const processAsync = (): void => {
 			setTimeout(() => {
 				try {
-					const parsedBody = recursiveParseJSON(value);
-					if (!isEmpty(parsedBody)) {
+					const parsedBody = parseBody();
+					if (parsedBody && !isEmpty(parsedBody)) {
 						const treeData = jsonToDataNodes(parsedBody, {
 							isBodyJsonQueryEnabled,
 							handleChangeSelectedView,
@@ -82,8 +88,8 @@ const useAsyncJSONProcessing = (
 					// eslint-disable-next-line sonarjs/no-identical-functions
 					(): void => {
 						try {
-							const parsedBody = recursiveParseJSON(value);
-							if (!isEmpty(parsedBody)) {
+							const parsedBody = parseBody();
+							if (parsedBody && !isEmpty(parsedBody)) {
 								const treeData = jsonToDataNodes(parsedBody, {
 									isBodyJsonQueryEnabled,
 									handleChangeSelectedView,

frontend/src/container/LogDetailedView/utils.tsx

@@ -4,7 +4,11 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
-import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
+import {
+	ILog,
+	ILogAggregateAttributesResources,
+	ILogBody,
+} from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
@@ -433,3 +437,8 @@ export const getSanitizedLogBody = (
 		return '{}';
 	}
 };
+
+// Returns a plain string for display contexts (Monaco editor, table cells, raw log row).
+export function getBodyDisplayString(body: string | ILogBody): string {
+	return typeof body === 'string' ? body : JSON.stringify(body as ILogBody);
+}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
@@ -95,7 +96,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -171,9 +172,10 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<DropdownMenuSimple
+					<Dropdown
 						menu={{ items: filterMenuItems }}
-						className="members-filter-dropdown"
+						trigger={['click']}
+						overlayClassName="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -183,7 +185,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</DropdownMenuSimple>
+					</Dropdown>
 
 					<div className="members-settings__search">
 						<Input

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
@@ -77,15 +76,14 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

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

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
@@ -127,11 +126,12 @@ function DashboardsAndAlertsPopover({
 	return (
 		<div className="dashboards-and-alerts-popover-container">
 			{dashboardsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: dashboardsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
@@ -142,14 +142,15 @@ function DashboardsAndAlertsPopover({
 							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 			{alertsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: alertsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
@@ -160,7 +161,7 @@ function DashboardsAndAlertsPopover({
 							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 		</div>
 	);

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

@@ -1,8 +1,11 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button, Spin, Tooltip } from 'antd';
+import { Button, Spin } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { useGetMetricHighlights } from 'api/generated/services/metrics';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { Info } from '@signozhq/icons';
+import { useTimezone } from 'providers/Timezone';
 
 import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import { HighlightsProps } from './types';
@@ -11,6 +14,10 @@ import {
 	formatTimestampToReadableDate,
 } from './utils';
 
+const TOOLTIP_CONTENT_PROPS = {
+	className: 'metric-highlights-tooltip-content',
+};
+
 function Highlights({ metricName }: HighlightsProps): JSX.Element {
 	const {
 		data: metricHighlightsData,
@@ -39,6 +46,13 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 	const lastReceivedText = formatTimestampToReadableDate(
 		metricHighlights?.lastReceived,
 	);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const lastReceivedTooltipText = metricHighlights?.lastReceived
+		? `Last received on ${formatTimezoneAdjustedTimestamp(
+				metricHighlights.lastReceived,
+				DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+			)}`
+		: 'No data received yet';
 
 	if (isErrorMetricHighlights) {
 		return (
@@ -90,27 +104,42 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 							className="metric-details-grid-value"
 							data-testid="metric-highlights-data-points"
 						>
-							<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-								{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-							</Tooltip>
+							<TooltipSimple
+								title={metricHighlights?.dataPoints?.toLocaleString()}
+								tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+								arrow
+							>
+								<span>
+									{formatNumberIntoHumanReadableFormat(
+										metricHighlights?.dataPoints ?? 0,
+									)}
+								</span>
+							</TooltipSimple>
 						</Typography.Text>
 						<Typography.Text
 							className="metric-details-grid-value"
 							data-testid="metric-highlights-time-series-total"
 						>
-							<Tooltip
-								title="Active time series are those that have received data points in the last 1
-							hour."
-								placement="top"
+							<TooltipSimple
+								title="Active time series are those that have received data points in the last 1 hour."
+								side="top"
+								tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+								arrow
 							>
 								<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-							</Tooltip>
+							</TooltipSimple>
 						</Typography.Text>
 						<Typography.Text
 							className="metric-details-grid-value"
 							data-testid="metric-highlights-last-received"
 						>
-							<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
+							<TooltipSimple
+								title={lastReceivedTooltipText}
+								tooltipContentProps={TOOLTIP_CONTENT_PROPS}
+								arrow
+							>
+								<span>{lastReceivedText}</span>
+							</TooltipSimple>
 						</Typography.Text>
 					</>
 				)}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -510,6 +510,12 @@
 	color: var(--bg-robin-400) !important;
 }
 
+// The MetricDetails Drawer sits at z-index 1000; the design-system tooltip
+// defaults to z-index 50 and would otherwise render behind the drawer.
+.metric-highlights-tooltip-content {
+	--tooltip-z-index: 1000;
+}
+
 @keyframes fade-in-out {
 	0% {
 		opacity: 0;

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

@@ -1,10 +1,22 @@
 import { render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import TimezoneProvider from 'providers/Timezone';
 
 import Highlights from '../Highlights';
 import { formatTimestampToReadableDate } from '../utils';
 import { getMockMetricHighlightsData, MOCK_METRIC_NAME } from './testUtlls';
 
+function renderHighlights(metricName: string): ReturnType<typeof render> {
+	return render(
+		<TimezoneProvider>
+			<TooltipProvider>
+				<Highlights metricName={metricName} />
+			</TooltipProvider>
+		</TimezoneProvider>,
+	);
+}
+
 const useGetMetricHighlightsMock = jest.spyOn(
 	metricsExplorerHooks,
 	'useGetMetricHighlights',
@@ -16,7 +28,7 @@ describe('Highlights', () => {
 	});
 
 	it('should render all highlights data correctly', () => {
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+		renderHighlights(MOCK_METRIC_NAME);
 
 		const dataPoints = screen.getByTestId('metric-highlights-data-points');
 		const timeSeriesTotal = screen.getByTestId(
@@ -41,7 +53,7 @@ describe('Highlights', () => {
 			),
 		);
 
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+		renderHighlights(MOCK_METRIC_NAME);
 
 		expect(
 			screen.getByTestId('metric-highlights-error-state'),
@@ -58,7 +70,7 @@ describe('Highlights', () => {
 			),
 		);
 
-		render(<Highlights metricName={MOCK_METRIC_NAME} />);
+		renderHighlights(MOCK_METRIC_NAME);
 
 		expect(screen.getByText('SAMPLES')).toBeInTheDocument();
 		expect(screen.getByText('TIME SERIES')).toBeInTheDocument();

frontend/src/container/NewExplorerCTA/NewExplorerCTA.styles.scss

@@ -1,17 +1,5 @@
-.new-explorer-cta {
-	display: flex;
+.new-explorer-cta-with-badge {
+	display: inline-flex;
 	align-items: center;
-	color: var(--muted-foreground);
-
-	/* Bifrost (Ancient)/Content/sm */
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px; /* 142.857% */
-	letter-spacing: -0.07px;
-
-	.ant-btn-icon {
-		margin-inline-end: 0px;
-	}
+	gap: 6px;
 }

frontend/src/container/NewExplorerCTA/config.ts

@@ -1,9 +1,5 @@
 import ROUTES from 'constants/routes';
 
-export const RIBBON_STYLES = {
-	top: '-0.75rem',
-};
-
 export const buttonText: Record<string, string> = {
 	[ROUTES.LOGS_EXPLORER]: 'Old Explorer',
 	[ROUTES.TRACE]: 'New Explorer',

frontend/src/container/NewExplorerCTA/index.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Badge, Button } from 'antd';
+import { Button } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Undo } from '@signozhq/icons';
 import { isModifierKeyPressed } from 'utils/app';
 
-import { buttonText, RIBBON_STYLES } from './config';
+import { buttonText } from './config';
 
 import './NewExplorerCTA.styles.scss';
 
@@ -70,9 +71,12 @@ function NewExplorerCTA(): JSX.Element | null {
 	}
 
 	return (
-		<Badge.Ribbon style={RIBBON_STYLES} text="New">
+		<span className="new-explorer-cta-with-badge">
 			{button}
-		</Badge.Ribbon>
+			<Badge color="robin" variant="default">
+				New
+			</Badge>
+		</span>
 	);
 }
 

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,12 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Input, Tooltip } from 'antd';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -164,12 +159,34 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	const handleOpenChange = (nextOpen: boolean): void => {
-		setOpen(nextOpen);
-		if (nextOpen) {
-			setSearchText('');
-		}
-	};
+	const items: MenuProps['items'] = [
+		{
+			key: 'search',
+			label: (
+				<Input
+					type="text"
+					placeholder="Search"
+					className="explorer-columns-search"
+					value={searchText}
+					onChange={handleSearchChange}
+					prefix={<Search size={16} style={{ padding: '6px' }} />}
+				/>
+			),
+		},
+		{
+			key: 'columns',
+			label: (
+				<ExplorerAttributeColumns
+					isLoading={isLoading}
+					data={data}
+					searchText={searchText}
+					isAttributeKeySelected={isAttributeKeySelected}
+					handleCheckboxChange={handleCheckboxChange}
+					dataSource={initialDataSource}
+				/>
+			),
+		},
+	];
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -221,6 +238,13 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
+	const toggleDropdown = (): void => {
+		setOpen(!open);
+		if (!open) {
+			setSearchText('');
+		}
+	};
+
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -303,38 +327,25 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<DropdownMenu open={open} onOpenChange={handleOpenChange}>
-							<DropdownMenuTrigger asChild>
-								<Button
-									className="action-btn"
-									data-testid="add-columns-button"
-									icon={
-										<CirclePlus
-											size={16}
-											color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
-										/>
-									}
-								/>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent side="top" className="explorer-columns-dropdown">
-								<Input
-									type="text"
-									placeholder="Search"
-									className="explorer-columns-search"
-									value={searchText}
-									onChange={handleSearchChange}
-									prefix={<Search size={16} style={{ padding: '6px' }} />}
-								/>
-								<ExplorerAttributeColumns
-									isLoading={isLoading}
-									data={data}
-									searchText={searchText}
-									isAttributeKeySelected={isAttributeKeySelected}
-									handleCheckboxChange={handleCheckboxChange}
-									dataSource={initialDataSource}
-								/>
-							</DropdownMenuContent>
-						</DropdownMenu>
+						<Dropdown
+							menu={{ items }}
+							arrow
+							placement="top"
+							open={open}
+							overlayClassName="explorer-columns-dropdown"
+						>
+							<Button
+								className="action-btn"
+								data-testid="add-columns-button"
+								icon={
+									<CirclePlus
+										size={16}
+										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+									/>
+								}
+								onClick={toggleDropdown}
+							/>
+						</Dropdown>
 					</div>
 				</div>
 			)}

frontend/src/container/NewWidget/LeftContainer/__test__/ExplorerColumnsRenderer.test.tsx

@@ -146,7 +146,6 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -159,12 +158,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await user.click(addButton);
+		await userEvent.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await user.click(addButton);
+		await userEvent.click(addButton);
 		await waitFor(() => {
 			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 		});

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -13,7 +13,7 @@ import { Plus, Trash2 } from '@signozhq/icons';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
 import { getBaseUrl } from 'utils/basePath';
 
-import VariablesPopover from './VariablesPopover';
+import VariablesDropdown from './VariablesDropdown';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +71,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesPopover
+	// Transform variables into the format expected by VariablesDropdown
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,9 +224,7 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						{/* TODO: replace with AutoComplete with options for variables and
-						previously used URLs for better UX */}
-						<VariablesPopover
+						<VariablesDropdown
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -254,7 +252,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesPopover>
+						</VariablesDropdown>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -284,7 +282,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesPopover
+										<VariablesDropdown
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -313,7 +311,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesPopover>
+										</VariablesDropdown>
 									</Col>
 									<Col span={2}>
 										<Button

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.styles.scss

@@ -0,0 +1,26 @@
+.variables-dropdown-container {
+	.url-input-trigger {
+		width: 100%;
+
+		.url-input-field {
+			width: 100%;
+		}
+	}
+
+	// Override Ant Design dropdown styles
+	.ant-dropdown-menu {
+		max-height: 300px;
+		overflow-y: auto;
+		padding: 8px 0;
+	}
+}
+
+.variable-row {
+	display: flex;
+	justify-content: space-between;
+
+	.variable-source {
+		color: #666;
+		font-size: 12px;
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.tsx

@@ -0,0 +1,93 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import './VariablesDropdown.styles.scss';
+
+interface VariablesDropdownProps {
+	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+	variables: VariableItem[];
+	children: (props: {
+		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+		isOpen: boolean;
+		setIsOpen: (open: boolean) => void;
+		cursorPosition: number | null;
+		setCursorPosition: (position: number | null) => void;
+	}) => ReactNode;
+}
+
+interface VariableItem {
+	name: string;
+	source: string;
+}
+
+function VariablesDropdown({
+	onVariableSelect,
+	variables,
+	children,
+}: VariablesDropdownProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	// Click outside handler
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent): void {
+			if (
+				wrapperRef.current &&
+				!wrapperRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		}
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+		}
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen]);
+
+	const dropdownItems = useMemo(
+		() =>
+			variables.map((v) => ({
+				key: v.name,
+				label: (
+					<div className="variable-row">
+						<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
+						<Typography.Text className="variable-source">{v.source}</Typography.Text>
+					</div>
+				),
+			})),
+		[variables],
+	);
+
+	return (
+		<div className="variables-dropdown-container" ref={wrapperRef}>
+			<Dropdown
+				menu={{
+					items: dropdownItems,
+					onClick: ({ key }): void => {
+						const variableName = key as string;
+						onVariableSelect(`{{${variableName}}}`, cursorPosition || undefined);
+						setIsOpen(false);
+					},
+				}}
+				open={isOpen}
+				placement="bottomLeft"
+				trigger={['click']}
+				getPopupContainer={(): HTMLElement => wrapperRef.current || document.body}
+			>
+				{children({
+					onVariableSelect,
+					isOpen,
+					setIsOpen,
+					cursorPosition,
+					setCursorPosition,
+				})}
+			</Dropdown>
+		</div>
+	);
+}
+
+export default VariablesDropdown;

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.styles.scss

@@ -1,74 +0,0 @@
-.variables-popover-container {
-	.url-input-trigger {
-		width: 100%;
-
-		.url-input-field {
-			width: 100%;
-		}
-	}
-
-	.variables-popover-anchor-wrap {
-		width: 100%;
-	}
-}
-
-.variables-popover-content {
-	// antd Modal uses z-index ~1000; popover must sit above it.
-	z-index: 1100;
-	padding: 4px 0;
-	max-height: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-width: var(--radix-popover-trigger-width);
-}
-
-.variables-popover-empty {
-	padding: 8px 12px;
-	color: var(--l3-foreground, #999);
-	font-size: 12px;
-	font-style: italic;
-}
-
-.variables-popover-item {
-	all: unset;
-	display: block;
-	box-sizing: border-box;
-	width: 100%;
-	padding: 8px 12px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 1.4;
-	overflow: hidden;
-
-	&:hover,
-	&:focus {
-		background-color: var(--l1-background-hover);
-	}
-}
-
-.variable-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 0;
-
-	.variable-name,
-	.variable-source {
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.variable-name {
-		flex: 1 1 auto;
-	}
-
-	.variable-source {
-		color: #666;
-		font-size: 12px;
-		flex: 0 1 auto;
-	}
-}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.tsx

@@ -1,111 +0,0 @@
-// Uses Popover (not DropdownMenu like the rest of the antd-dropdown migration):
-// DropdownMenuTrigger preventDefaults pointerdown, breaking input focus and
-// dismissing on every keystroke. PopoverAnchor is a passive positioning element.
-import { ReactNode, useRef, useState } from 'react';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import './VariablesPopover.styles.scss';
-
-interface VariablesPopoverProps {
-	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-	variables: VariableItem[];
-	children: (props: {
-		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-		isOpen: boolean;
-		setIsOpen: (open: boolean) => void;
-		cursorPosition: number | null;
-		setCursorPosition: (position: number | null) => void;
-	}) => ReactNode;
-}
-
-interface VariableItem {
-	name: string;
-	source: string;
-}
-
-function VariablesPopover({
-	onVariableSelect,
-	variables,
-	children,
-}: VariablesPopoverProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const anchorRef = useRef<HTMLDivElement>(null);
-
-	const handleOpenChange = (open: boolean): void => {
-		// Accept "close" events from the popover (outside-click, Esc) but ignore
-		// opens — opening is driven by the input's onFocus in the consumer.
-		if (!open) {
-			setIsOpen(false);
-		}
-	};
-
-	return (
-		<div className="variables-popover-container">
-			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
-				<PopoverAnchor asChild>
-					<div className="variables-popover-anchor-wrap" ref={anchorRef}>
-						{children({
-							onVariableSelect,
-							isOpen,
-							setIsOpen,
-							cursorPosition,
-							setCursorPosition,
-						})}
-					</div>
-				</PopoverAnchor>
-				<PopoverContent
-					align="start"
-					sideOffset={4}
-					className="variables-popover-content"
-					onOpenAutoFocus={(e): void => e.preventDefault()}
-					onCloseAutoFocus={(e): void => e.preventDefault()}
-					onInteractOutside={(e): void => {
-						// Keep the popover open while interacting with the anchor (the input),
-						// otherwise typing/clicking the input would close it immediately.
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-					onFocusOutside={(e): void => {
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-				>
-					{variables.length === 0 ? (
-						<div className="variables-popover-empty">No variables available</div>
-					) : (
-						variables.map((v) => (
-							<button
-								key={v.name}
-								type="button"
-								className="variables-popover-item"
-								onMouseDown={(e): void => {
-									// Prevent the input from losing focus when clicking an item.
-									e.preventDefault();
-								}}
-								onClick={(): void => {
-									onVariableSelect(`{{${v.name}}}`, cursorPosition || undefined);
-									setIsOpen(false);
-								}}
-							>
-								<div className="variable-row">
-									<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
-									<Typography.Text className="variable-source">
-										{v.source}
-									</Typography.Text>
-								</div>
-							</button>
-						))
-					)}
-				</PopoverContent>
-			</Popover>
-		</div>
-	);
-}
-
-export default VariablesPopover;

frontend/src/container/NewWidget/RightContainer/ContextLinks/utils.tsx

@@ -204,7 +204,7 @@ const processContextLinks = (
 };
 
 /**
- * Transforms context variables into the format expected by VariablesPopover
+ * Transforms context variables into the format expected by VariablesDropdown
  * @param variables - Array of context variables from useContextVariables
  * @returns Array of transformed variables with proper source descriptions
  */

frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, ColorPicker, Space } from 'antd';
+import { Button, ColorPicker, Dropdown, MenuProps, Space } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import useDebounce from 'hooks/useDebounce';
 
@@ -27,7 +26,7 @@ function ColorSelector({
 		setColorFromPicker(hex);
 	};
 
-	const items: MenuItem[] = [
+	const items: MenuProps['items'] = [
 		{
 			key: 'Red',
 			label: <CustomColor color="Red" />,
@@ -63,7 +62,7 @@ function ColorSelector({
 	];
 
 	return (
-		<DropdownMenuSimple menu={{ items }}>
+		<Dropdown menu={{ items }} trigger={['click']}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
 				className="color-selector-button"
@@ -73,7 +72,7 @@ function ColorSelector({
 					<ChevronDown size="md" />
 				</Space>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx

@@ -2,6 +2,7 @@ import { Expand } from '@signozhq/icons';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getBodyDisplayString } from 'container/LogDetailedView/utils';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useTimezone } from 'providers/Timezone';
 import { ILog } from 'types/api/logs/log';
@@ -26,7 +27,9 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 							DATE_TIME_FORMATS.UTC_MONTH_SHORT,
 						)}
 					</div>
-					<div className="logs-preview-list-item-body">{log.body}</div>
+					<div className="logs-preview-list-item-body">
+						{getBodyDisplayString(log.body)}
+					</div>
 					<div
 						className="logs-preview-list-item-expand"
 						onClick={makeLogDetailsHandler(log)}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
@@ -133,7 +134,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const totalCount = allAccounts.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -230,9 +231,10 @@ function ServiceAccountsSettings(): JSX.Element {
 			) : (
 				<div className="sa-settings__list-section">
 					<div className="sa-settings__controls">
-						<DropdownMenuSimple
+						<Dropdown
 							menu={{ items: filterMenuItems }}
-							className="sa-settings-filter-dropdown"
+							trigger={['click']}
+							overlayClassName="sa-settings-filter-dropdown"
 						>
 							<Button
 								variant="solid"
@@ -245,7 +247,7 @@ function ServiceAccountsSettings(): JSX.Element {
 									className="sa-settings-filter-trigger__chevron"
 								/>
 							</Button>
-						</DropdownMenuSimple>
+						</Dropdown>
 
 						<div className="sa-settings__search">
 							<Input

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -130,7 +129,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -139,10 +137,10 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
+		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
+		fireEvent.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();

frontend/src/container/SideNav/SideNav.styles.scss

@@ -662,7 +662,7 @@
 		}
 	}
 
-	&:not(.pinned).is-hovered,
+	&:not(.pinned):hover,
 	&.dropdown-open {
 		flex: 0 0 240px;
 		max-width: 240px;

frontend/src/container/SideNav/SideNav.tsx

@@ -1,6 +1,5 @@
 import {
 	MouseEvent,
-	ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -26,14 +25,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
-import { Button, MenuProps, Modal, Tooltip } from 'antd';
+import { Button, Dropdown, MenuProps, Modal, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { Logout } from 'api/utils';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -170,9 +162,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const [hasScroll, setHasScroll] = useState(false);
 	const navTopSectionRef = useRef<HTMLDivElement>(null);
-	const sidenavRef = useRef<HTMLDivElement>(null);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-	const isDropdownOpenRef = useRef(false);
 
 	const [isHovered, setIsHovered] = useState(false);
 	const [pinnedMenuItems, setPinnedMenuItems] = useState<SidebarItem[]>([]);
@@ -185,27 +175,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	}, []);
 
 	const handleMouseLeave = useCallback(() => {
-		// When the dropdown is open its content renders in a portal outside
-		// the sidenav, which causes the browser to fire mouseleave on the
-		// sidenav. Keep the sidenav expanded in that case.
-		if (isDropdownOpenRef.current) {
-			return;
-		}
 		setIsHovered(false);
 	}, []);
 
-	const handleDropdownOpenChange = useCallback((open: boolean): void => {
-		isDropdownOpenRef.current = open;
-		setIsDropdownOpen(open);
-		if (!open) {
-			// Re-sync hover state on close: the cursor may have moved to the
-			// portal content (outside .sideNav), so mouseleave never fired.
-			requestAnimationFrame(() => {
-				setIsHovered(sidenavRef.current?.matches(':hover') ?? false);
-			});
-		}
-	}, []);
-
 	const checkScroll = useCallback((): void => {
 		if (navTopSectionRef.current) {
 			const { scrollHeight, clientHeight, scrollTop } = navTopSectionRef.current;
@@ -987,11 +959,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	return (
 		<div className={cx('sidenav-container', isPinned && 'pinned')}>
 			<div
-				ref={sidenavRef}
 				className={cx(
 					'sideNav',
 					isPinned && 'pinned',
-					isHovered && 'is-hovered',
 					isDropdownOpen && 'dropdown-open',
 				)}
 				onMouseEnter={handleMouseEnter}
@@ -1212,95 +1182,46 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							{isAIAssistantEnabled && renderNavItems([aiAssistantMenuItem], false)}
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className="nav-item">
-											<div className="nav-item-data" data-testid="help-support-nav-item">
-												<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: helpSupportDropdownMenuItems,
+										onClick: handleHelpSupportMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay help-support-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className="nav-item">
+										<div className="nav-item-data" data-testid="help-support-nav-item">
+											<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
 
-												<div className="nav-item-label">{helpSupportMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay help-support-dropdown"
-									>
-										{helpSupportDropdownMenuItems.map((item, idx) => {
-											if ('type' in item) {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`help-sep-${idx}`} />;
-											}
-											return (
-												<DropdownMenuItem
-													key={String(item.key)}
-													leftIcon={item.icon}
-													onClick={(e): void =>
-														handleHelpSupportMenuItemClick({
-															...item,
-															key: String(item.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{item.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 
 							<div className="nav-dropdown-item">
-								<DropdownMenu onOpenChange={handleDropdownOpenChange}>
-									<DropdownMenuTrigger asChild>
-										<div className={cx('nav-item', isSettingsPage && 'active')}>
-											<div className="nav-item-active-marker" />
-											<div className="nav-item-data" data-testid="settings-nav-item">
-												<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
+								<Dropdown
+									menu={{
+										items: userSettingsDropdownMenuItems,
+										onClick: handleSettingsMenuItemClick,
+									}}
+									placement="topLeft"
+									overlayClassName="nav-dropdown-overlay settings-dropdown"
+									trigger={['click']}
+									onOpenChange={(open): void => setIsDropdownOpen(open)}
+								>
+									<div className={cx('nav-item', isSettingsPage && 'active')}>
+										<div className="nav-item-active-marker" />
+										<div className="nav-item-data" data-testid="settings-nav-item">
+											<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
 
-												<div className="nav-item-label">{userSettingsMenuItem.label}</div>
-											</div>
+											<div className="nav-item-label">{userSettingsMenuItem.label}</div>
 										</div>
-									</DropdownMenuTrigger>
-									<DropdownMenuContent
-										side="top"
-										align="start"
-										className="nav-dropdown-overlay settings-dropdown"
-									>
-										{(userSettingsDropdownMenuItems ?? []).map((item, idx) => {
-											if (!item) {
-												return null;
-											}
-											if ('type' in item && item.type === 'divider') {
-												// eslint-disable-next-line react/no-array-index-key
-												return <DropdownMenuSeparator key={`settings-sep-${idx}`} />;
-											}
-											const settingsItem = item as {
-												key?: string | number;
-												label?: ReactNode;
-												icon?: ReactNode;
-												disabled?: boolean;
-											};
-											return (
-												<DropdownMenuItem
-													key={String(settingsItem.key)}
-													leftIcon={settingsItem.icon}
-													disabled={settingsItem.disabled}
-													onClick={(e): void =>
-														handleSettingsMenuItemClick({
-															key: String(settingsItem.key),
-															domEvent: e.nativeEvent,
-														} as unknown as SidebarItem)
-													}
-												>
-													{settingsItem.label}
-												</DropdownMenuItem>
-											);
-										})}
-									</DropdownMenuContent>
-								</DropdownMenu>
+									</div>
+								</Dropdown>
 							</div>
 						</div>
 					</div>

frontend/src/container/TopNav/index.tsx

@@ -33,14 +33,12 @@ function TopNav(): JSX.Element | null {
 		[location.pathname],
 	);
 
-	const isNewAlertsLandingPage = useMemo(
-		() =>
-			matchPath(location.pathname, { path: ROUTES.ALERTS_NEW, exact: true }) &&
-			!location.search,
-		[location.pathname, location.search],
+	const isAlertCreationPage = useMemo(
+		() => matchPath(location.pathname, { path: ROUTES.ALERTS_NEW, exact: true }),
+		[location.pathname],
 	);
 
-	if (isSignUpPage || isDisabled || isRouteToSkip || isNewAlertsLandingPage) {
+	if (isSignUpPage || isDisabled || isRouteToSkip || isAlertCreationPage) {
 		return null;
 	}
 

frontend/src/pages/AlertDetails/AlertDetails.styles.scss

@@ -41,7 +41,6 @@
 }
 
 .alert-details {
-	margin-top: 10px;
 	.divider {
 		border-color: var(--l1-border);
 		margin: 16px 0;

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Breadcrumb, Button, Divider } from 'antd';
+import { Divider } from 'antd';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
+import AlertBreadcrumb from 'components/AlertBreadcrumb';
 import { Filters } from 'components/AlertDetailsFilters/Filters';
 import RouteTab from 'components/RouteTab';
 import Spinner from 'components/Spinner';
@@ -10,13 +11,12 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { CreateAlertProvider } from 'container/CreateAlertV2/context';
 import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlertV2/utils';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
+import { useAlertRule } from 'providers/Alert';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { fromRuleDTOToPostableRuleV2 } from 'types/api/alerts/convert';
-import { isModifierKeyPressed } from 'utils/app';
 
 import AlertHeader from './AlertHeader/AlertHeader';
 import AlertNotFound from './AlertNotFound';
@@ -24,42 +24,11 @@ import { useGetAlertRuleDetails, useRouteTabUtils } from './hooks';
 
 import './AlertDetails.styles.scss';
 
-function BreadCrumbItem({
-	title,
-	isLast,
-	route,
-}: {
-	title: string | null;
-	isLast?: boolean;
-	route?: string;
-}): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	if (isLast) {
-		return <div className="breadcrumb-item breadcrumb-item--last">{title}</div>;
-	}
-	const handleNavigate = (e: React.MouseEvent): void => {
-		if (!route) {
-			return;
-		}
-		safeNavigate(ROUTES.LIST_ALL_ALERT, { newTab: isModifierKeyPressed(e) });
-	};
-
-	return (
-		<Button type="text" className="breadcrumb-item" onClick={handleNavigate}>
-			{title}
-		</Button>
-	);
-}
-
-BreadCrumbItem.defaultProps = {
-	isLast: false,
-	route: '',
-};
-
 function AlertDetails(): JSX.Element {
 	const { pathname } = useLocation();
 	const { routes } = useRouteTabUtils();
 	const params = useUrlQuery();
+	const { alertRuleName } = useAlertRule();
 
 	const { isLoading, isError, ruleId, isValidRuleId, alertDetailsResponse } =
 		useGetAlertRuleDetails();
@@ -69,7 +38,7 @@ function AlertDetails(): JSX.Element {
 	}, [params]);
 
 	const getDocumentTitle = useMemo(() => {
-		const alertTitle = alertDetailsResponse?.data?.alert;
+		const alertTitle = alertRuleName ?? alertDetailsResponse?.data?.alert;
 		if (alertTitle) {
 			return alertTitle;
 		}
@@ -80,7 +49,7 @@ function AlertDetails(): JSX.Element {
 			return document.title;
 		}
 		return 'Alert Not Found';
-	}, [alertDetailsResponse?.data?.alert, isTestAlert, isLoading]);
+	}, [alertRuleName, alertDetailsResponse?.data?.alert, isTestAlert, isLoading]);
 
 	useEffect(() => {
 		document.title = getDocumentTitle;
@@ -126,20 +95,13 @@ function AlertDetails(): JSX.Element {
 			<div
 				className={classNames('alert-details', { 'alert-details-v2': isV2Alert })}
 			>
-				<Breadcrumb
+				<AlertBreadcrumb
 					className="alert-details__breadcrumb"
 					items={[
-						{
-							title: (
-								<BreadCrumbItem title="Alert Rules" route={ROUTES.LIST_ALL_ALERT} />
-							),
-						},
-						{
-							title: <BreadCrumbItem title={ruleId} isLast />,
-						},
+						{ title: 'Alert Rules', route: ROUTES.LIST_ALL_ALERT },
+						{ title: ruleId, isLast: true },
 					]}
 				/>
-				<Divider className="divider breadcrumb-divider" />
 
 				{alertRuleDetails && <AlertHeader alertDetails={alertRuleDetails} />}
 				<Divider className="divider" />

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.styles.scss

@@ -8,10 +8,8 @@
 		border-color: var(--l1-border);
 		margin: 0;
 	}
-	.dropdown-trigger-wrapper {
-		display: flex;
-		justify-content: center;
-		align-items: center;
+	.dropdown-icon {
+		margin-right: 4px;
 	}
 }
 .dropdown-menu {

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Switch, Tooltip } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Divider, Dropdown, MenuProps, Switch, Tooltip } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
@@ -12,6 +11,7 @@ import {
 } from 'pages/AlertDetails/hooks';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useAlertRule } from 'providers/Alert';
+import { CSSProperties } from 'styled-components';
 import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 import { AlertDef } from 'types/api/alerts/def';
 
@@ -20,16 +20,25 @@ import RenameModal from './RenameModal';
 
 import './ActionButtons.styles.scss';
 
+const menuItemStyle: CSSProperties = {
+	fontSize: '14px',
+	letterSpacing: '0.14px',
+};
+
+const menuItemStyleV2: CSSProperties = {
+	fontSize: '13px',
+	letterSpacing: '0.13px',
+};
+
 function AlertActionButtons({
 	ruleId,
 	alertDetails,
-	setUpdatedName,
 }: {
 	ruleId: string;
 	alertDetails: AlertHeaderProps['alertDetails'];
-	setUpdatedName: (name: string) => void;
 }): JSX.Element {
-	const { alertRuleState, setAlertRuleState } = useAlertRule();
+	const { alertRuleState, setAlertRuleState, alertRuleName, setAlertRuleName } =
+		useAlertRule();
 	const [intermediateName, setIntermediateName] = useState<string>(
 		alertDetails.alert,
 	);
@@ -43,7 +52,7 @@ function AlertActionButtons({
 	const { handleAlertDelete } = useAlertRuleDelete({ ruleId });
 	const { handleAlertUpdate, isLoading } = useAlertRuleUpdate({
 		alertDetails: alertDetails as unknown as AlertDef,
-		setUpdatedName,
+		setAlertRuleName,
 		intermediateName,
 	});
 
@@ -58,7 +67,9 @@ function AlertActionButtons({
 
 	const isV2Alert = alertDetails.schemaVersion === NEW_ALERT_SCHEMA_VERSION;
 
-	const menuItems: MenuItem[] = [
+	const finalMenuItemStyle = isV2Alert ? menuItemStyleV2 : menuItemStyle;
+
+	const menuItems: MenuProps['items'] = [
 		...(!isV2Alert
 			? [
 					{
@@ -66,6 +77,7 @@ function AlertActionButtons({
 						label: 'Rename',
 						icon: <PenLine size={16} color={Color.BG_VANILLA_400} />,
 						onClick: handleRename,
+						style: finalMenuItemStyle,
 					},
 				]
 			: []),
@@ -74,13 +86,17 @@ function AlertActionButtons({
 			label: 'Duplicate',
 			icon: <Copy size={16} color={Color.BG_VANILLA_400} />,
 			onClick: handleAlertDuplicate,
+			style: finalMenuItemStyle,
 		},
 		{
 			key: 'delete-rule',
 			label: 'Delete',
 			icon: <Trash2 size={16} color={Color.BG_CHERRY_400} />,
 			onClick: handleAlertDelete,
-			danger: true,
+			style: {
+				...finalMenuItemStyle,
+				color: Color.BG_CHERRY_400,
+			},
 		},
 	];
 
@@ -96,6 +112,12 @@ function AlertActionButtons({
 		}
 	}, [setAlertRuleState, alertRuleState, alertDetails.state]);
 
+	useEffect(() => {
+		if (alertRuleName !== undefined) {
+			setIntermediateName(alertRuleName);
+		}
+	}, [alertRuleName]);
+
 	// on unmount remove the alert state
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(() => (): void => setAlertRuleState(undefined), []);
@@ -121,21 +143,16 @@ function AlertActionButtons({
 
 				<Divider type="vertical" />
 
-				<DropdownMenuSimple menu={{ items: menuItems }}>
-					<span className="dropdown-trigger-wrapper">
-						<Tooltip title="More options">
-							<Button
-								type="text"
-								icon={
-									<Ellipsis
-										size={16}
-										color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
-									/>
-								}
-							/>
-						</Tooltip>
-					</span>
-				</DropdownMenuSimple>
+				<Dropdown trigger={['click']} menu={{ items: menuItems }}>
+					<Tooltip title="More options">
+						<Ellipsis
+							size={16}
+							color={isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400}
+							cursor="pointer"
+							className="dropdown-icon"
+						/>
+					</Tooltip>
+				</Dropdown>
 			</div>
 
 			<RenameModal

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
 import CreateAlertV2Header from 'container/CreateAlertV2/CreateAlertHeader';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
@@ -20,8 +20,17 @@ export type AlertHeaderProps = {
 };
 function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 	const { state, alert: alertName, labels } = alertDetails;
-	const { alertRuleState } = useAlertRule();
-	const [updatedName, setUpdatedName] = useState(alertName);
+	const { alertRuleState, alertRuleName, setAlertRuleName } = useAlertRule();
+
+	useEffect(() => {
+		if (alertRuleName === undefined && alertName) {
+			setAlertRuleName(alertName);
+		}
+	}, [alertRuleName, alertName, setAlertRuleName]);
+
+	useEffect(() => (): void => setAlertRuleName(undefined), [setAlertRuleName]);
+
+	const displayName = alertRuleName ?? alertName;
 
 	const labelsWithoutSeverity = useMemo(() => {
 		if (labels) {
@@ -40,7 +49,7 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				<div className="alert-title-wrapper">
 					<AlertState state={alertRuleState ?? state ?? ''} />
 					<div className="alert-title">
-						<LineClampedText text={updatedName || alertName} />
+						<LineClampedText text={displayName || ''} />
 					</div>
 				</div>
 			</div>
@@ -64,7 +73,6 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 				<AlertActionButtons
 					alertDetails={alertDetails}
 					ruleId={alertDetails?.id || ''}
-					setUpdatedName={setUpdatedName}
 				/>
 			</div>
 		</div>

frontend/src/pages/AlertDetails/hooks.tsx

@@ -12,7 +12,9 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	createRule,
 	deleteRuleByID,
+	getGetRuleByIDQueryKey,
 	invalidateGetRuleByID,
+	invalidateListRules,
 	updateRuleByID,
 	useGetRuleByID,
 	useListRules,
@@ -490,11 +492,11 @@ export const useAlertRuleDuplicate = ({
 };
 export const useAlertRuleUpdate = ({
 	alertDetails,
-	setUpdatedName,
+	setAlertRuleName,
 	intermediateName,
 }: {
 	alertDetails: AlertDef;
-	setUpdatedName: (name: string) => void;
+	setAlertRuleName: (name: string | undefined) => void;
 	intermediateName: string;
 }): {
 	handleAlertUpdate: () => void;
@@ -502,17 +504,29 @@ export const useAlertRuleUpdate = ({
 } => {
 	const { notifications } = useNotifications();
 	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
 
 	const { mutate: updateAlertRule, isLoading } = useMutation(
 		[REACT_QUERY_KEY.UPDATE_ALERT_RULE, alertDetails.id],
 		(args: { data: AlertDef; id: string }) =>
 			updateRuleByID({ id: args.id }, toPostableRuleDTOFromAlertDef(args.data)),
 		{
-			onMutate: () => setUpdatedName(intermediateName),
-			onSuccess: () =>
-				notifications.success({ message: 'Alert renamed successfully' }),
+			onMutate: () => setAlertRuleName(intermediateName),
+			onSuccess: () => {
+				const ruleId = alertDetails.id || '';
+				const ruleQueryKey = getGetRuleByIDQueryKey({ id: ruleId });
+				const existingRule = queryClient.getQueryData<GetRuleByID200>(ruleQueryKey);
+				if (existingRule) {
+					queryClient.setQueryData<GetRuleByID200>(ruleQueryKey, {
+						...existingRule,
+						data: { ...existingRule.data, alert: intermediateName },
+					});
+				}
+				void invalidateListRules(queryClient);
+				notifications.success({ message: 'Alert renamed successfully' });
+			},
 			onError: (error) => {
-				setUpdatedName(alertDetails.alert);
+				setAlertRuleName(alertDetails.alert);
 				showErrorModal(
 					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
 				);
@@ -551,7 +565,6 @@ export const useAlertRuleDelete = ({
 
 				history.push(ROUTES.LIST_ALL_ALERT);
 			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
 			onError: (error) =>
 				showErrorModal(
 					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -1,15 +1,44 @@
 .alerts-container {
-	.ant-tabs-nav {
-		padding: 0 8px;
+	.top-level-tab.periscope-tab {
+		padding: 2px 0;
+	}
+
+	.ant-tabs {
+		&-nav {
+			padding: 0 8px;
+			margin-bottom: 0 !important;
+
+			&::before {
+				border-bottom: 1px solid var(--l1-border) !important;
+			}
+		}
+
+		&-tab {
+			&[data-node-key='TriggeredAlerts'] {
+				margin-left: 16px;
+			}
+
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
+			[aria-selected='false'] {
+				.periscope-tab {
+					color: var(--l2-foreground);
+				}
+			}
+		}
 	}
 
 	.configuration-tabs {
-		margin-top: -16px;
-
 		.ant-tabs-nav {
 			.ant-tabs-nav-wrap {
 				padding: 0 8px;
 			}
 		}
 	}
+
+	.alert-rules-container {
+		margin-top: 10px;
+	}
 }

frontend/src/pages/AlertTypeSelection/AlertTypeSelection.tsx

@@ -1,56 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { Row } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import SelectAlertType from 'container/CreateAlertRule/SelectAlertType';
-import { AlertDetectionTypes } from 'container/FormAlertRules';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-function AlertTypeSelectionPage(): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const queryParams = useUrlQuery();
-
-	useEffect(() => {
-		logEvent('Alert: New alert data source selection page visited', {});
-	}, []);
-
-	const handleSelectType = useCallback(
-		(type: AlertTypes, newTab?: boolean): void => {
-			// For anamoly based alert, we need to set the ruleType to anomaly_rule
-			// and alertType to metrics_based_alert
-			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-				queryParams.set(
-					QueryParams.ruleType,
-					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-				);
-				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
-				// For other alerts, we need to set the ruleType to threshold_rule
-				// and alertType to the selected type
-			} else {
-				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
-				queryParams.set(QueryParams.alertType, type);
-			}
-
-			const showClassicCreateAlertsPageFlag = queryParams.get(
-				QueryParams.showClassicCreateAlertsPage,
-			);
-			if (showClassicCreateAlertsPageFlag === 'true') {
-				queryParams.set(QueryParams.showClassicCreateAlertsPage, 'true');
-			}
-
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
-		},
-		[queryParams, safeNavigate],
-	);
-
-	return (
-		<Row wrap={false}>
-			<SelectAlertType onSelect={handleSelectType} />
-		</Row>
-	);
-}
-
-export default AlertTypeSelectionPage;

frontend/src/pages/AlertTypeSelection/__tests__/AlertTypeSelection.test.tsx

@@ -1,189 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { QueryParams } from 'constants/query';
-import { AlertDetectionTypes } from 'container/FormAlertRules';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
-import * as navigateHooks from 'hooks/useSafeNavigate';
-import * as useUrlQueryHooks from 'hooks/useUrlQuery';
-import * as appHooks from 'providers/App/App';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import AlertTypeSelection from '../AlertTypeSelection';
-
-const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
-const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
-
-const mockSetUrlQuery = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockToString = jest.fn();
-const mockGetUrlQuery = jest.fn();
-
-describe('AlertTypeSelection', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
-		useUrlQuerySpy.mockReturnValue({
-			set: mockSetUrlQuery,
-			toString: mockToString,
-			get: mockGetUrlQuery,
-		} as Partial<URLSearchParams> as URLSearchParams);
-		useSafeNavigateSpy.mockReturnValue({
-			safeNavigate: mockSafeNavigate,
-		});
-	});
-
-	it('should render all alert type options when anomaly detection is enabled', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<AlertTypeSelection />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
-	});
-
-	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
-		render(<AlertTypeSelection />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
-	});
-
-	it('should navigate to metrics based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to anomaly based alert with correct params', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to log based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('log_based_alert'));
-
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.LOGS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to traces based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('traces_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.TRACES_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to exceptions based alert with correct params', () => {
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('exceptions_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(2);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.EXCEPTIONS_BASED_ALERT,
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-
-	it('should navigate to classic create alerts page with correct params if showClassicCreateAlertsPage is true', () => {
-		useUrlQuerySpy.mockReturnValue({
-			set: mockSetUrlQuery,
-			toString: mockToString,
-			get: mockGetUrlQuery.mockImplementation((key: string) => {
-				if (key === QueryParams.showClassicCreateAlertsPage) {
-					return 'true';
-				}
-				return null;
-			}),
-		} as Partial<URLSearchParams> as URLSearchParams);
-
-		render(<AlertTypeSelection />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-		expect(mockSetUrlQuery).toHaveBeenCalledTimes(3);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.ruleType,
-			AlertDetectionTypes.THRESHOLD_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.alertType,
-			AlertTypes.METRICS_BASED_ALERT,
-		);
-		expect(mockSetUrlQuery).toHaveBeenCalledWith(
-			QueryParams.showClassicCreateAlertsPage,
-			'true',
-		);
-		expect(mockSafeNavigate).toHaveBeenCalled();
-	});
-});

frontend/src/pages/AlertTypeSelection/index.tsx

@@ -1,3 +0,0 @@
-import AlertTypeSelectionPage from './AlertTypeSelection';
-
-export default AlertTypeSelectionPage;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -526,7 +526,7 @@ function SpanDetailsPanel({
 
 	const PANEL_WIDTH = 500;
 	const PANEL_MARGIN_RIGHT = 20;
-	const PANEL_MARGIN_TOP = 25;
+	const PANEL_MARGIN_TOP = 50;
 	const PANEL_MARGIN_BOTTOM = 25;
 
 	const content = (

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -580,10 +580,9 @@ function Success(props: ISuccessProps): JSX.Element {
 					}
 					return next;
 				});
+				return;
 			}
-			// Backend mode: trigger API call (current behavior)
-			// keeping this for both mode to support scroll to view to function well.
-			// interestedspan would not make api call in frontend mode so it is safe to use for both mode.
+			// Backend mode: trigger refetch via interestedSpanId
 			setInterestedSpanId({
 				spanId,
 				isUncollapsed: !collapse,
@@ -782,19 +781,26 @@ function Success(props: ISuccessProps): JSX.Element {
 		[],
 	);
 
+	// Backend mode: scroll + select to the interestedSpanId target. `spans` in
+	// deps so we retry once a refetch lands (chevron / pagination / deep-link).
 	useEffect(() => {
-		if (interestedSpanId.spanId !== '') {
-			const idx = spans.findIndex(
-				(span) => span.span_id === interestedSpanId.spanId,
-			);
-			if (idx !== -1) {
-				scrollSpanIntoView(spans[idx], spans);
-				setSelectedSpan(spans[idx]);
-			}
-		} else {
-			setSelectedSpan((prev) => prev ?? spans[0]);
+		if (isFullDataLoaded || interestedSpanId.spanId === '') {
+			return;
 		}
-	}, [interestedSpanId, setSelectedSpan, spans, scrollSpanIntoView]);
+		const idx = spans.findIndex(
+			(span) => span.span_id === interestedSpanId.spanId,
+		);
+		if (idx !== -1) {
+			scrollSpanIntoView(spans[idx], spans);
+			setSelectedSpan(spans[idx]);
+		}
+	}, [
+		interestedSpanId,
+		setSelectedSpan,
+		spans,
+		scrollSpanIntoView,
+		isFullDataLoaded,
+	]);
 
 	// Covers URL-driven navigation to an already-loaded span (flamegraph /
 	// filter / browser back) that the interestedSpanId-keyed effect doesn't see.

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -199,10 +199,12 @@ const mockSpans = [
 	createMockSpan('span-3', 1),
 ];
 
-// Shared TestComponent for all tests
+// Shared TestComponent for all tests. Default selectedSpan to the root mirrors
+// what TraceDetailsV3's deep-link one-shot effect does when there's no spanId
+// in the URL — Success no longer owns that default itself.
 function TestComponent(): JSX.Element {
 	const [selectedSpan, setSelectedSpan] = React.useState<SpanV3 | undefined>(
-		undefined,
+		mockSpans[0],
 	);
 
 	return (

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -75,6 +75,7 @@ function TraceDetailsV3(): JSX.Element {
 	});
 
 	const allSpansRef = useRef<SpanV3[]>([]);
+	const deepLinkResolvedRef = useRef(false);
 
 	// Refetch only when the URL target isn't already loaded. Keeps row clicks
 	// and other in-window URL navigation from triggering a backend window slide.
@@ -175,12 +176,36 @@ function TraceDetailsV3(): JSX.Element {
 		}
 	}, [traceData, isFullDataLoaded]);
 
-	// Frontend mode: auto-expand ancestors of the selected span so it becomes visible
+	// Tracks whether we've already done the initial URL→selectedSpan handoff
+	//Lets `interestedSpanId` stay purely as the refetch trigger in frontend mode.
 	useEffect(() => {
-		if (!isFullDataLoaded || !interestedSpanId.spanId || allSpans.length === 0) {
+		if (deepLinkResolvedRef.current) {
 			return;
 		}
-		const ancestors = getAncestorSpanIds(allSpans, interestedSpanId.spanId);
+		if (allSpans.length === 0) {
+			return;
+		}
+		if (selectedSpanId) {
+			const span = allSpans.find((s) => s.span_id === selectedSpanId);
+			if (!span) {
+				// Span not in the current window — wait for more data (backend
+				// pagination) before marking resolved.
+				return;
+			}
+			setSelectedSpan(span);
+		} else {
+			setSelectedSpan((prev) => prev ?? allSpans[0]);
+		}
+		deepLinkResolvedRef.current = true;
+	}, [selectedSpanId, allSpans]);
+
+	// Frontend mode: auto-expand ancestors of the URL-targeted span so it's
+	// visible. Keyed on URL `spanId`(selectedSpanId).
+	useEffect(() => {
+		if (!isFullDataLoaded || !selectedSpanId || allSpans.length === 0) {
+			return;
+		}
+		const ancestors = getAncestorSpanIds(allSpans, selectedSpanId);
 		if (ancestors.size === 0) {
 			return;
 		}
@@ -203,7 +228,7 @@ function TraceDetailsV3(): JSX.Element {
 			}
 			return next;
 		});
-	}, [isFullDataLoaded, interestedSpanId.spanId, allSpans]);
+	}, [isFullDataLoaded, selectedSpanId, allSpans]);
 
 	const [activeKeys, setActiveKeys] = useState<string[]>(['flame', 'waterfall']);
 
@@ -217,7 +242,7 @@ function TraceDetailsV3(): JSX.Element {
 		() =>
 			(getLocalStorageKey(
 				LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION,
-			) as SpanDetailVariant) || SpanDetailVariant.DOCKED,
+			) as SpanDetailVariant) || SpanDetailVariant.DIALOG,
 	);
 
 	const handleVariantChange = useCallback(

frontend/src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx

@@ -1,6 +1,14 @@
 import { useMemo, useState } from 'react';
-import { Button, Divider, Form, Space, Switch, Tooltip } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Divider,
+	Dropdown,
+	Form,
+	MenuProps,
+	Space,
+	Switch,
+	Tooltip,
+} from 'antd';
 import cx from 'classnames';
 import { FilterSelect } from 'components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions';
 import { QueryParams } from 'constants/query';
@@ -36,22 +44,16 @@ function FunnelStep({
 	const [isAddDetailsModalOpen, setIsAddDetailsModalOpen] =
 		useState<boolean>(false);
 
-	const latencyPointerItems: MenuItem[] = [
-		{
-			type: 'radio-group',
-			value: stepData.latency_pointer,
-			onChange: (value): void =>
-				onStepChange(index, {
-					latency_pointer: value as FunnelStepData['latency_pointer'],
-				}),
-			children: LatencyPointers.map((option) => ({
-				type: 'radio',
-				key: option.value,
-				label: option.key,
-				value: option.value,
-			})),
-		},
-	];
+	const latencyPointerItems: MenuProps['items'] = LatencyPointers.map(
+		(option) => ({
+			key: option.value,
+			label: option.key,
+			style:
+				option.value === stepData.latency_pointer
+					? { backgroundColor: 'var(--bg-slate-100)' }
+					: {},
+		}),
+	);
 
 	const updatedCurrentQuery = useMemo(
 		() => ({
@@ -210,18 +212,17 @@ function FunnelStep({
 					</div>
 					<div className="latency-pointer">
 						<div className="latency-pointer__label">Latency pointer</div>
-						{hasEditPermission ? (
-							<DropdownMenuSimple menu={{ items: latencyPointerItems }}>
-								<Space>
-									{
-										LatencyPointers.find(
-											(option) => option.value === stepData.latency_pointer,
-										)?.key
-									}
-									<ChevronDown size={14} color="var(--bg-vanilla-400)" />
-								</Space>
-							</DropdownMenuSimple>
-						) : (
+						<Dropdown
+							menu={{
+								items: latencyPointerItems,
+								onClick: ({ key }): void =>
+									onStepChange(index, {
+										latency_pointer: key as FunnelStepData['latency_pointer'],
+									}),
+							}}
+							trigger={['click']}
+							disabled={!hasEditPermission}
+						>
 							<Space>
 								{
 									LatencyPointers.find(
@@ -230,7 +231,7 @@ function FunnelStep({
 								}
 								<ChevronDown size={14} color="var(--bg-vanilla-400)" />
 							</Space>
-						)}
+						</Dropdown>
 					</div>
 				</div>
 			</Form>

frontend/src/providers/Alert.tsx

@@ -9,6 +9,8 @@ import React, {
 interface AlertRuleContextType {
 	alertRuleState: string | undefined;
 	setAlertRuleState: React.Dispatch<React.SetStateAction<string | undefined>>;
+	alertRuleName: string | undefined;
+	setAlertRuleName: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
 const AlertRuleContext = createContext<AlertRuleContextType | undefined>(
@@ -23,13 +25,18 @@ function AlertRuleProvider({
 	const [alertRuleState, setAlertRuleState] = useState<string | undefined>(
 		undefined,
 	);
+	const [alertRuleName, setAlertRuleName] = useState<string | undefined>(
+		undefined,
+	);
 
 	const value = React.useMemo(
 		() => ({
 			alertRuleState,
 			setAlertRuleState,
+			alertRuleName,
+			setAlertRuleName,
 		}),
-		[alertRuleState],
+		[alertRuleState, alertRuleName],
 	);
 
 	return (
@@ -47,4 +54,7 @@ export const useAlertRule = (): AlertRuleContextType => {
 	return context;
 };
 
+export const useAlertRuleOptional = (): AlertRuleContextType | undefined =>
+	useContext(AlertRuleContext);
+
 export default AlertRuleProvider;

frontend/src/types/api/logs/log.ts

@@ -1,3 +1,8 @@
+export interface ILogBody {
+	message?: string | null;
+	[key: string]: unknown;
+}
+
 export interface ILog {
 	date: string;
 	timestamp: number | string;
@@ -8,7 +13,7 @@ export interface ILog {
 	traceFlags: number;
 	severityText: string;
 	severityNumber: number;
-	body: string;
+	body: string | ILogBody;
 	resources_string: Record<string, never>;
 	scope_string: Record<string, never>;
 	attributesString: Record<string, never>;

frontend/src/utils/permission/index.ts

@@ -132,7 +132,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	METER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	METER_EXPLORER_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	PUBLIC_DASHBOARD: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ALERT_TYPE_SELECTION: ['ADMIN', 'EDITOR'],
 	AI_ASSISTANT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'],

go.mod

@@ -11,6 +11,7 @@ require (
 	github.com/SigNoz/signoz-otel-collector v0.144.3
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
+	github.com/bytedance/sonic v1.14.1
 	github.com/cespare/xxhash/v2 v2.3.0
 	github.com/coreos/go-oidc/v3 v3.17.0
 	github.com/dgraph-io/ristretto/v2 v2.3.0
@@ -112,7 +113,6 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/sts v1.41.9 // indirect
 	github.com/aws/smithy-go v1.24.2 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect
-	github.com/bytedance/sonic v1.14.1 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/emersion/go-sasl v0.0.0-20241020182733-b788ff22d5a6 // indirect