chore: save antd file

* fix(user-info): surfaced errors for reset password and fixed issues

* fix(user-info): removed notification from atnd and used toast and showerrormodal in userinfo

* fix(user-info): refactor and added tests

* fix(user-info): code refactor

docs/api/openapi.yml

@@ -2689,7 +2689,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesClusterRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2759,7 +2758,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDaemonSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2829,7 +2827,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesDeploymentRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2908,7 +2905,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesHostRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -2984,7 +2980,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesJobRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3032,7 +3027,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNamespaceRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3110,7 +3104,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3209,7 +3202,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesPodRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3554,7 +3546,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesStatefulSetRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
@@ -3615,7 +3606,6 @@ components:
         records:
           items:
             $ref: '#/components/schemas/InframonitoringtypesVolumeRecord'
-          nullable: true
           type: array
         requiredMetricsCheck:
           $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'

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

@@ -15,6 +15,8 @@
 
 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Dropdown:
+		'Use @signozhq/ui DropdownMenuSimple (or the composable DropdownMenu primitives) from @signozhq/ui/dropdown-menu instead of antd Dropdown.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 

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

@@ -3488,9 +3488,9 @@ export interface InframonitoringtypesClustersDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesClusterRecordDTO[] | null;
+	records: InframonitoringtypesClusterRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3566,9 +3566,9 @@ export interface InframonitoringtypesDaemonSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDaemonSetRecordDTO[] | null;
+	records: InframonitoringtypesDaemonSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3644,9 +3644,9 @@ export interface InframonitoringtypesDeploymentsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesDeploymentRecordDTO[] | null;
+	records: InframonitoringtypesDeploymentRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3730,9 +3730,9 @@ export interface InframonitoringtypesHostsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesHostRecordDTO[] | null;
+	records: InframonitoringtypesHostRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3816,9 +3816,9 @@ export interface InframonitoringtypesJobsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesJobRecordDTO[] | null;
+	records: InframonitoringtypesJobRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3866,9 +3866,9 @@ export interface InframonitoringtypesNamespacesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNamespaceRecordDTO[] | null;
+	records: InframonitoringtypesNamespaceRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -3933,9 +3933,9 @@ export interface InframonitoringtypesNodesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
+	records: InframonitoringtypesNodeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4017,9 +4017,9 @@ export interface InframonitoringtypesPodsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesPodRecordDTO[] | null;
+	records: InframonitoringtypesPodRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4437,9 +4437,9 @@ export interface InframonitoringtypesStatefulSetsDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesStatefulSetRecordDTO[] | null;
+	records: InframonitoringtypesStatefulSetRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer
@@ -4506,9 +4506,9 @@ export interface InframonitoringtypesVolumesDTO {
 	 */
 	endTimeBeforeRetention: boolean;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	records: InframonitoringtypesVolumeRecordDTO[] | null;
+	records: InframonitoringtypesVolumeRecordDTO[];
 	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
 	/**
 	 * @type integer

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,7 +0,0 @@
-.dropdown-button {
-	color: var(--l1-foreground);
-}
-
-.dropdown-icon {
-	font-size: 1.2rem;
-}

frontend/src/components/DropDown/DropDown.tsx

@@ -1,51 +0,0 @@
-import { useState } from 'react';
-import { Ellipsis } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps } from 'antd';
-
-import './DropDown.styles.scss';
-
-function DropDown({
-	element,
-	onDropDownItemClick,
-}: {
-	element: JSX.Element[];
-	onDropDownItemClick?: MenuProps['onClick'];
-}): JSX.Element {
-	const items: MenuProps['items'] = element.map(
-		(e: JSX.Element, index: number) => ({
-			label: e,
-			key: index,
-		}),
-	);
-
-	const [isDdOpen, setDdOpen] = useState<boolean>(false);
-
-	return (
-		<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>
-		</Dropdown>
-	);
-}
-
-DropDown.defaultProps = {
-	onDropDownItemClick: (): void => {},
-};
-
-export default DropDown;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

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

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -13,7 +13,7 @@ export function NoAuthBanner(): JSX.Element {
 			Impersonation mode: authentication is disabled. Anyone with access to this
 			instance has admin privileges.{' '}
 			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
+				href="https://signoz.io/docs/manage/administrator-guide/configuration/impersonation-mode/"
 				target="_blank"
 				rel="noreferrer"
 			>

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

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { Dropdown } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 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 && (
-								<Dropdown
+								<DropdownMenuSimple
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									placement="bottomRight"
+									align="end"
 								>
 									<Ellipsis size={16} />
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 					</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

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

frontend/src/components/TimePreferenceDropDown/index.tsx

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

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

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

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

@@ -1,4 +1,5 @@
 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';
 
@@ -142,12 +143,13 @@ 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
-		fireEvent.click(
+		await user.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

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

@@ -0,0 +1,147 @@
+import { renderHook } from '@testing-library/react';
+import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { usePanelContextMenu } from '../usePanelContextMenu';
+
+// The hook composes `useCoordinates` (popover state) and `useGraphContextMenu`
+// (menu items). We mock both so the test focuses on the `enableDrillDown` gate
+// rather than the implementation of the menu wiring itself.
+const onClickMock = jest.fn();
+jest.mock('periscope/components/ContextMenu', () => ({
+	useCoordinates: (): unknown => ({
+		coordinates: null,
+		popoverPosition: null,
+		clickedData: null,
+		onClose: jest.fn(),
+		subMenu: null,
+		onClick: onClickMock,
+		setSubMenu: jest.fn(),
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/useGraphContextMenu', () => ({
+	__esModule: true,
+	default: (): { menuItemsConfig: { header: string; items: string } } => ({
+		menuItemsConfig: { header: 'menu-header', items: 'menu-items' },
+	}),
+}));
+
+jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
+	getUplotClickData: jest.fn(() => ({
+		coord: { x: 1, y: 2 },
+		record: { queryName: 'A', filters: [] },
+		label: 'lbl',
+		seriesColor: '#abc',
+	})),
+}));
+
+jest.mock('container/PanelWrapper/utils', () => ({
+	isApmMetric: jest.fn(() => false),
+	getTimeRangeFromStepInterval: jest.fn(() => ({ start: 0, end: 0 })),
+}));
+
+const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
+const mockQueryResponse = {
+	data: undefined,
+	isLoading: false,
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
+
+describe('usePanelContextMenu', () => {
+	beforeEach(() => {
+		onClickMock.mockClear();
+	});
+
+	it('returns empty menuItemsConfig when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+
+	it('returns wired menuItemsConfig when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({
+			header: 'menu-header',
+			items: 'menu-items',
+		});
+	});
+
+	it('clickHandlerWithContextMenu is a no-op when enableDrillDown is false', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: false,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100, // xValue
+			200, // yValue
+			0, // mouseX
+			0, // mouseY
+			{ serviceName: 'svc' }, // metric
+			{ queryName: 'A', inFocusOrNot: true }, // queryData
+			10, // absoluteMouseX
+			20, // absoluteMouseY
+			{}, // axesData
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' }, // focusedSeries
+		);
+
+		expect(onClickMock).not.toHaveBeenCalled();
+	});
+
+	it('clickHandlerWithContextMenu opens popover when enableDrillDown is true', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+				enableDrillDown: true,
+			}),
+		);
+
+		result.current.clickHandlerWithContextMenu(
+			100,
+			200,
+			0,
+			0,
+			{ serviceName: 'svc' },
+			{ queryName: 'A', inFocusOrNot: true },
+			10,
+			20,
+			{},
+			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' },
+		);
+
+		expect(onClickMock).toHaveBeenCalledTimes(1);
+	});
+
+	it('defaults to disabled when enableDrillDown is not provided', () => {
+		const { result } = renderHook(() =>
+			usePanelContextMenu({
+				widget: mockWidget,
+				queryResponse: mockQueryResponse,
+			}),
+		);
+
+		expect(result.current.menuItemsConfig).toStrictEqual({});
+	});
+});

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

@@ -21,11 +21,13 @@ interface UseTimeSeriesContextMenuParams {
 		SuccessResponse<MetricRangePayloadProps, unknown>,
 		Error
 	>;
+	enableDrillDown?: boolean;
 }
 
 export const usePanelContextMenu = ({
 	widget,
 	queryResponse,
+	enableDrillDown = false,
 }: UseTimeSeriesContextMenuParams): {
 	coordinates: { x: number; y: number } | null;
 	popoverPosition: PopoverPosition | null;
@@ -61,6 +63,9 @@ export const usePanelContextMenu = ({
 
 	const clickHandlerWithContextMenu = useCallback(
 		(...args: any[]) => {
+			if (!enableDrillDown) {
+				return;
+			}
 			const [
 				xValue,
 				_yvalue,
@@ -112,14 +117,14 @@ export const usePanelContextMenu = ({
 				});
 			}
 		},
-		[onClick, queryResponse],
+		[enableDrillDown, onClick, queryResponse],
 	);
 
 	return {
 		coordinates,
 		popoverPosition,
 		onClose,
-		menuItemsConfig,
+		menuItemsConfig: enableDrillDown ? menuItemsConfig : {},
 		clickHandlerWithContextMenu,
 	};
 };

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

@@ -31,6 +31,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -61,6 +62,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const config = useMemo(() => {

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

@@ -31,6 +31,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
+		enableDrillDown = false,
 	} = props;
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
@@ -60,6 +61,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
+		enableDrillDown,
 	});
 
 	const chartData = useMemo(() => {

frontend/src/container/Download/Download.tsx

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

frontend/src/container/GeneralSettings/styles.ts

@@ -1,8 +1,4 @@
-import {
-	Col,
-	Dropdown as DropDownComponent,
-	Input as InputComponent,
-} from 'antd';
+import { Col, Input as InputComponent } from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -34,16 +30,6 @@ 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/FullView/index.tsx

@@ -292,6 +292,8 @@ function FullView({
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
+	const showEditBtn = editWidget && dashboardEditView;
+
 	return (
 		<div className="full-view-container">
 			<OverlayScrollbar>
@@ -306,7 +308,7 @@ function FullView({
 												Reset Query
 											</Button>
 										)}
-										{editWidget && (
+										{showEditBtn && (
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}

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

@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -176,6 +177,7 @@ 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>
@@ -208,7 +210,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		fireEvent.mouseEnter(moreOptionsButton);
+		await user.click(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

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

@@ -54,6 +54,17 @@
 	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,6 +467,7 @@ 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}
@@ -483,7 +484,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -494,6 +495,7 @@ 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',
@@ -517,12 +519,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await userEvent.click(createAlertsMenuItem);
+			await user.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

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

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

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

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

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { Button, Flex, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Plus } from '@signozhq/icons';
+import { Ellipsis, Plus } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { ColumnsType } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -15,7 +16,6 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
-import DropDown from 'components/DropDown/DropDown';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -323,55 +323,67 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			width: 10,
-			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
-				<div data-testid="alert-actions">
-					<DropDown
-						onDropDownItemClick={(item): void =>
-							alertActionLogEvent(item.key, record)
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => {
+				const actionItems = [
+					<ToggleAlertState
+						key="1"
+						disabled={record.disabled ?? false}
+						setData={setData}
+						id={id ?? ''}
+					/>,
+					<ColumnButton
+						key="2"
+						onClick={(e: React.MouseEvent): void =>
+							onEditHandler(record, { newTab: isModifierKeyPressed(e) })
 						}
-						element={[
-							<ToggleAlertState
-								key="1"
-								disabled={record.disabled ?? false}
-								setData={setData}
-								id={id ?? ''}
-							/>,
-							<ColumnButton
-								key="2"
-								onClick={(e: React.MouseEvent): void =>
-									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
-								}
+						type="link"
+						loading={editLoader}
+					>
+						Edit
+					</ColumnButton>,
+					<ColumnButton
+						key="3-new-tab"
+						onClick={(): void => onEditHandler(record, { newTab: true })}
+						type="link"
+						loading={editLoader}
+					>
+						Edit in New Tab
+					</ColumnButton>,
+					<ColumnButton
+						key="3-clone"
+						onClick={onCloneHandler(record)}
+						type="link"
+						loading={cloneLoader}
+					>
+						Clone
+					</ColumnButton>,
+					<DeleteAlert
+						key="4"
+						notifications={notificationsApi}
+						setData={setData}
+						id={id ?? ''}
+					/>,
+				];
+				return (
+					<div data-testid="alert-actions">
+						<DropdownMenuSimple
+							menu={{
+								items: actionItems.map((element, index) => ({
+									key: String(index),
+									label: element,
+									onClick: ({ key }): void => alertActionLogEvent(key, record),
+								})),
+							}}
+						>
+							<Button
 								type="link"
-								loading={editLoader}
-							>
-								Edit
-							</ColumnButton>,
-							<ColumnButton
-								key="3"
-								onClick={(): void => onEditHandler(record, { newTab: true })}
-								type="link"
-								loading={editLoader}
-							>
-								Edit in New Tab
-							</ColumnButton>,
-							<ColumnButton
-								key="3"
-								onClick={onCloneHandler(record)}
-								type="link"
-								loading={cloneLoader}
-							>
-								Clone
-							</ColumnButton>,
-							<DeleteAlert
-								key="4"
-								notifications={notificationsApi}
-								setData={setData}
-								id={id ?? ''}
-							/>,
-						]}
-					/>
-				</div>
-			),
+								style={{ color: 'var(--l1-foreground)' }}
+								icon={<Ellipsis size={16} />}
+							/>
+						</DropdownMenuSimple>
+					</div>
+				);
+			},
 		});
 	}
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,12 +12,11 @@ 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,
@@ -553,7 +552,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
+		const menuItems: MenuItem[] = [
 			{
 				label: (
 					<div
@@ -711,11 +710,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="text"
@@ -727,7 +726,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 								<Button
 									type="text"
 									className="learn-more"
@@ -756,11 +755,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="primary"
@@ -773,7 +772,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,7 +2,13 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import { Dropdown, MenuProps } from 'antd';
+import {
+	type BaseMenuItem,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import {
 	negateOperator,
 	OPERATORS,
@@ -135,41 +141,38 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler: MenuProps['onClick'] = (props): void => {
+	const onClickHandler = (key: string): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[props.key];
+		const handler = mapper[key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	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 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 handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -218,15 +221,23 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<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>
+					<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>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,9 +2,8 @@ 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 +94,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuProps['items'] = [
+	const filterMenuItems: MenuItem[] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -171,10 +170,9 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<Dropdown
+					<DropdownMenuSimple
 						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="members-filter-dropdown"
+						className="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -184,7 +182,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</Dropdown>
+					</DropdownMenuSimple>
 
 					<div className="members-settings__search">
 						<Input

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

@@ -1,4 +1,5 @@
 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';
 
@@ -76,14 +77,15 @@ 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');
 
-		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
+		await user.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		fireEvent.click(pendingOption);
+		await user.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

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

@@ -30,7 +30,12 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { GraphTitle, MENU_ITEMS, SERVICE_CHART_ID } from '../constant';
+import {
+	GraphTitle,
+	MENU_ITEMS,
+	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
+} from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import { Button } from './styles';
@@ -206,6 +211,7 @@ function DBCall(): JSX.Element {
 							}}
 							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					</GraphContainer>
 				</Card>
@@ -244,6 +250,7 @@ function DBCall(): JSX.Element {
 							}}
 							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					</GraphContainer>
 				</Card>

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

@@ -32,7 +32,12 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import { GraphTitle, legend, MENU_ITEMS } from '../constant';
+import {
+	GraphTitle,
+	legend,
+	MENU_ITEMS,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
+} from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import GraphControlsPanel from './Overview/GraphControlsPanel/GraphControlsPanel';
@@ -279,6 +284,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -322,6 +328,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -366,6 +373,7 @@ function External(): JSX.Element {
 								}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -409,6 +417,7 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
+								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>

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

@@ -15,6 +15,7 @@ import DisplayThreshold from 'container/GridCardLayout/WidgetHeader/DisplayThres
 import {
 	GraphTitle,
 	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
 } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { apDexMetricsQueryBuilderQueries } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
@@ -105,6 +106,7 @@ function ApDexMetrics({
 			threshold={threshold}
 			isQueryEnabled={isQueryEnabled}
 			version={ENTITY_VERSION_V4}
+			enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 		/>
 	);
 }

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

@@ -8,6 +8,7 @@ import Graph from 'container/GridCardLayout/GridCard';
 import {
 	GraphTitle,
 	SERVICE_CHART_ID,
+	SERVICE_DETAIL_DRILLDOWN_ENABLED,
 } from 'container/MetricsApplication/constant';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { latency } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
@@ -138,6 +139,7 @@ function ServiceOverview({
 							onClickHandler={handleGraphClick('Service')}
 							isQueryEnabled={isQueryEnabled}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					)}
 				</GraphContainer>

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

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import Graph from 'container/GridCardLayout/GridCard';
+import { SERVICE_DETAIL_DRILLDOWN_ENABLED } from 'container/MetricsApplication/constant';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -43,6 +44,7 @@ function TopLevelOperation({
 							onDragSelect={onDragSelect}
 							isQueryEnabled={!topLevelOperationsIsLoading}
 							version={ENTITY_VERSION_V4}
+							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					)}
 				</GraphContainer>

frontend/src/container/MetricsApplication/constant.ts

@@ -25,6 +25,8 @@ export const OPERATION_LEGENDS = ['Operations'];
 
 export const MENU_ITEMS = [MenuItemKeys.View, MenuItemKeys.CreateAlerts];
 
+export const SERVICE_DETAIL_DRILLDOWN_ENABLED = true;
+
 export enum FORMULA {
 	ERROR_PERCENTAGE = 'A*100/B',
 	DATABASE_CALLS_AVG_DURATION = 'A/B',

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

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

frontend/src/container/MySettings/UserInfo/UserInfo.styles.scss

@@ -127,6 +127,12 @@
 				flex-direction: column;
 				gap: 8px;
 				padding-bottom: 16px;
+
+				.password-error-text {
+					font-size: var(--font-size-xs);
+					color: var(--bg-cherry-400);
+					margin-top: 2px;
+				}
 			}
 
 			.ant-color-picker-trigger {

frontend/src/container/MySettings/UserInfo/index.tsx

@@ -1,25 +1,27 @@
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import {
 	updateMyPassword,
 	useUpdateMyUserV2,
 } from 'api/generated/services/users';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui/sonner';
 import { Check, FileTerminal, Mail, User } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
+import { ErrorV2Resp } from 'types/api';
+import { AxiosError } from 'axios';
 
 import '../MySettings.styles.scss';
 import './UserInfo.styles.scss';
 
 function UserInfo(): JSX.Element {
 	const { user, org, updateUser } = useAppContext();
-	const { t } = useTranslation(['routes', 'settings', 'common']);
 
-	const { notifications } = useNotifications();
+	const { showErrorModal } = useErrorModal();
 	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
 
 	const [currentPassword, setCurrentPassword] = useState<string>('');
@@ -47,6 +49,8 @@ function UserInfo(): JSX.Element {
 
 	const hideResetPasswordModal = (): void => {
 		setIsResetPasswordModalOpen(false);
+		setCurrentPassword('');
+		setUpdatePassword('');
 	};
 
 	const onChangePasswordClickHandler = async (): Promise<void> => {
@@ -57,27 +61,29 @@ function UserInfo(): JSX.Element {
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
 			});
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Password updated successfully');
 			hideResetPasswordModal();
 			setIsLoading(false);
 		} catch (error) {
 			setIsLoading(false);
-			notifications.error({
-				message: (error as APIError).error.error.code,
-				description: (error as APIError).error.error.message,
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 	};
 
+	const passwordsMatch =
+		currentPassword.length > 0 &&
+		updatePassword.length > 0 &&
+		currentPassword === updatePassword;
+
 	const isResetPasswordDisabled =
 		isLoading ||
 		currentPassword.length === 0 ||
 		updatePassword.length === 0 ||
-		currentPassword === updatePassword;
+		passwordsMatch;
 
 	const onSaveHandler = async (): Promise<void> => {
 		void logEvent('Account Settings: Name Updated', {
@@ -94,11 +100,7 @@ function UserInfo(): JSX.Element {
 			setIsLoading(true);
 			await updateMyUser({ data: { displayName: changedName } });
 
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+			toast.success('Name updated successfully');
 			updateUser({
 				...user,
 				displayName: changedName,
@@ -106,10 +108,11 @@ function UserInfo(): JSX.Element {
 			setIsLoading(false);
 			hideUpdateNameModal();
 		} catch (error) {
-			notifications.error({
-				message: (error as APIError).getErrorCode(),
-				description: (error as APIError).getErrorMessage(),
-			});
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
 		}
 		setIsLoading(false);
 	};
@@ -166,7 +169,7 @@ function UserInfo(): JSX.Element {
 						type="primary"
 						icon={<Check size={16} />}
 						onClick={onSaveHandler}
-						disabled={isLoading}
+						loading={isLoading}
 						data-testid="update-name-btn"
 					>
 						Update name
@@ -178,7 +181,11 @@ function UserInfo(): JSX.Element {
 					<Input
 						placeholder="e.g. John Doe"
 						value={changedName}
+						disabled={isLoading}
 						onChange={(e): void => setChangedName(e.target.value)}
+						onPressEnter={(): void => {
+							void onSaveHandler();
+						}}
 					/>
 				</div>
 			</Modal>
@@ -188,6 +195,7 @@ function UserInfo(): JSX.Element {
 				title={<span className="title">Reset password</span>}
 				open={isResetPasswordModalOpen}
 				closable
+				destroyOnClose
 				onCancel={hideResetPasswordModal}
 				footer={[
 					<Button
@@ -197,7 +205,8 @@ function UserInfo(): JSX.Element {
 						}`}
 						icon={<Check size={16} />}
 						onClick={onChangePasswordClickHandler}
-						disabled={isLoading || isResetPasswordDisabled}
+						loading={isLoading}
+						disabled={isResetPasswordDisabled}
 						data-testid="reset-password-btn"
 					>
 						Reset password
@@ -218,6 +227,11 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
 					</div>
 
@@ -235,7 +249,18 @@ function UserInfo(): JSX.Element {
 							type="password"
 							autoComplete="off"
 							visibilityToggle={false}
+							status={passwordsMatch ? 'error' : ''}
+							onPressEnter={(): void => {
+								if (!isResetPasswordDisabled) {
+									void onChangePasswordClickHandler();
+								}
+							}}
 						/>
+						{passwordsMatch && (
+							<span className="password-error-text">
+								New password must be different from current password
+							</span>
+						)}
 					</div>
 				</div>
 			</Modal>

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

@@ -8,11 +8,23 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import APIError from 'types/api/error';
+import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
 const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
+const updateMyPasswordFn = jest.fn();
+const showErrorModalFn = jest.fn();
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
 
 jest.mock('react-use', () => ({
 	__esModule: true,
@@ -24,12 +36,21 @@ jest.mock('react-use', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	...jest.requireActual('api/generated/services/users'),
+	updateMyPassword: (...args: unknown[]): Promise<unknown> =>
+		updateMyPasswordFn(...args),
 	useUpdateMyUserV2: jest.fn(() => ({
 		mutateAsync: (...args: unknown[]): Promise<unknown> => editUserFn(...args),
 		isLoading: false,
 	})),
 }));
 
+jest.mock('providers/ErrorModalProvider', () => ({
+	...jest.requireActual('providers/ErrorModalProvider'),
+	useErrorModal: jest.fn(() => ({
+		showErrorModal: showErrorModalFn,
+	})),
+}));
+
 jest.mock('hooks/useDarkMode', () => ({
 	__esModule: true,
 	useIsDarkMode: jest.fn(() => true),
@@ -65,12 +86,12 @@ const NEW_PASSWORD_TEST_ID = 'new-password-textbox';
 const UPDATE_NAME_BUTTON_TEST_ID = 'update-name-btn';
 const RESET_PASSWORD_BUTTON_TEST_ID = 'reset-password-btn';
 const UPDATE_NAME_BUTTON_TEXT = 'Update name';
-const PASSWORD_VALIDATION_MESSAGE_TEST_ID = 'password-validation-message';
 
 describe('MySettings Flows', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		editUserFn.mockResolvedValue({});
+		updateMyPasswordFn.mockResolvedValue({});
 		render(<MySettingsContainer />);
 	});
 
@@ -152,9 +173,7 @@ describe('MySettings Flows', () => {
 			fireEvent.click(modalUpdateNameButton);
 
 			await waitFor(() =>
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'success',
-				}),
+				expect(toast.success).toHaveBeenCalledWith('Name updated successfully'),
 			);
 		});
 	});
@@ -181,22 +200,131 @@ describe('MySettings Flows', () => {
 			expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toBeInTheDocument();
 		});
 
-		it('Should display validation error if password is less than 8 characters', async () => {
+		it('Should show inline error when new password matches current password', async () => {
 			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
 			fireEvent.click(resetPasswordButtons[0]);
 
-			const currentPasswordTextbox = screen.getByTestId(CURRENT_PASSWORD_TEST_ID);
 			act(() => {
-				fireEvent.change(currentPasswordTextbox, { target: { value: '123' } });
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
 			});
 
+			expect(
+				screen.getByText('New password must be different from current password'),
+			).toBeInTheDocument();
+			expect(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID)).toBeDisabled();
+		});
+
+		it('Should hide inline error when passwords are changed to be different', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'samePassword1' },
+				});
+			});
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'differentPassword1' },
+				});
+			});
+
+			expect(
+				screen.queryByText('New password must be different from current password'),
+			).not.toBeInTheDocument();
+		});
+
+		it('Should show error modal when password reset API returns an error', async () => {
+			updateMyPasswordFn.mockRejectedValue(
+				new Error('Current password is incorrect'),
+			);
+
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
 			await waitFor(() => {
-				// Use getByTestId for the validation message (if present in your modal/component)
-				if (screen.queryByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID)) {
-					expect(
-						screen.getByTestId(PASSWORD_VALIDATION_MESSAGE_TEST_ID),
-					).toBeInTheDocument();
-				}
+				expect(showErrorModalFn).toHaveBeenCalledWith(expect.any(APIError));
+			});
+		});
+
+		it('Should show success toast and close modal on successful password reset', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'oldPassword1' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'newPassword1' },
+				});
+			});
+
+			fireEvent.click(screen.getByTestId(RESET_PASSWORD_BUTTON_TEST_ID));
+
+			await waitFor(() => {
+				expect(toast.success).toHaveBeenCalledWith('Password updated successfully');
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('Should clear password fields when modal is cancelled', async () => {
+			const resetPasswordButtons = screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT);
+			fireEvent.click(resetPasswordButtons[0]);
+
+			act(() => {
+				fireEvent.change(screen.getByTestId(CURRENT_PASSWORD_TEST_ID), {
+					target: { value: 'somePassword' },
+				});
+				fireEvent.change(screen.getByTestId(NEW_PASSWORD_TEST_ID), {
+					target: { value: 'otherPassword' },
+				});
+			});
+
+			expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue(
+				'somePassword',
+			);
+
+			// Close the modal
+			const closeButton = document.querySelector(
+				'.reset-password-modal .ant-modal-close',
+			) as HTMLElement;
+			fireEvent.click(closeButton);
+
+			// Reopen the modal
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId(CURRENT_PASSWORD_TEST_ID),
+				).not.toBeInTheDocument();
+			});
+
+			fireEvent.click(screen.getAllByText(RESET_PASSWORD_BUTTON_TEXT)[0]);
+
+			await waitFor(() => {
+				expect(screen.getByTestId(CURRENT_PASSWORD_TEST_ID)).toHaveValue('');
+				expect(screen.getByTestId(NEW_PASSWORD_TEST_ID)).toHaveValue('');
 			});
 		});
 

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

@@ -7,7 +7,12 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Button, Divider, Input, Tooltip } from 'antd';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -159,34 +164,12 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	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 handleOpenChange = (nextOpen: boolean): void => {
+		setOpen(nextOpen);
+		if (nextOpen) {
+			setSearchText('');
+		}
+	};
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -238,13 +221,6 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
-	const toggleDropdown = (): void => {
-		setOpen(!open);
-		if (!open) {
-			setSearchText('');
-		}
-	};
-
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -327,25 +303,38 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<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>
+						<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>
 					</div>
 				</div>
 			)}

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

@@ -146,6 +146,7 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -158,12 +159,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await userEvent.click(addButton);
+		await user.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await userEvent.click(addButton);
+		await user.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 VariablesDropdown from './VariablesDropdown';
+import VariablesPopover from './VariablesPopover';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +71,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesDropdown
+	// Transform variables into the format expected by VariablesPopover
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,7 +224,9 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						<VariablesDropdown
+						{/* TODO: replace with AutoComplete with options for variables and
+						previously used URLs for better UX */}
+						<VariablesPopover
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -252,7 +254,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesDropdown>
+						</VariablesPopover>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -282,7 +284,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesDropdown
+										<VariablesPopover
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -311,7 +313,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesDropdown>
+										</VariablesPopover>
 									</Col>
 									<Col span={2}>
 										<Button

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

@@ -1,26 +0,0 @@
-.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

@@ -1,93 +0,0 @@
-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

@@ -0,0 +1,74 @@
+.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

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

frontend/src/container/QueryTable/Drilldown/__tests__/drilldownUtils.test.tsx

@@ -169,9 +169,10 @@ describe('drilldownUtils', () => {
 
 			// Verify transformations were applied
 			if (filterExpression) {
-				// Rule 2: operation → name
-				expect(filterExpression).toContain(`name = 'GET'`);
+				// `operation` rewrites to `name` via source-side pass, then `name`
+				// is dropped by the logs target-side pass (logs has no span-name).
 				expect(filterExpression).not.toContain(`operation = 'GET'`);
+				expect(filterExpression).not.toContain(`name = 'GET'`);
 
 				// Rule 3: span.kind → kind
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
@@ -262,8 +263,9 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// All transformations should be applied
-				expect(filterExpression).toContain(`name = 'POST'`);
+				// `operation` rewrites to `name` then drops for logs target.
+				expect(filterExpression).not.toContain(`operation = 'POST'`);
+				expect(filterExpression).not.toContain(`name = 'POST'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindClient}'`);
 				expect(filterExpression).toContain(`status_code_string = 'Error'`);
 				expect(filterExpression).toContain(`http.status_code = 500`);
@@ -410,8 +412,9 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// Transformed attributes
-				expect(filterExpression).toContain(`name = 'GET'`);
+				// `operation` rewrites to `name` then drops for logs target.
+				expect(filterExpression).not.toContain(`operation = 'GET'`);
+				expect(filterExpression).not.toContain(`name = 'GET'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
 
 				// Preserved non-metric attributes
@@ -499,4 +502,189 @@ describe('drilldownUtils', () => {
 			});
 		});
 	});
+
+	describe('getViewQuery target-aware sanitisation (serviceName / name)', () => {
+		const makeQuery = (
+			expression: string,
+			dataSource: 'traces' | 'logs' | 'metrics' = 'traces',
+		): Query => ({
+			id: 'src-query',
+			queryType: 'builder' as any,
+			builder: {
+				queryData: [
+					{
+						queryName: 'src',
+						dataSource: dataSource as any,
+						aggregations: [{ metricName: 'non_apm_metric' }] as any,
+						groupBy: [],
+						expression: '',
+						disabled: false,
+						functions: [],
+						legend: '',
+						having: [],
+						limit: null,
+						stepInterval: undefined,
+						orderBy: [],
+						filter: { expression },
+					},
+				],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+			promql: [],
+			clickhouse_sql: [],
+		});
+
+		it('rewrites serviceName -> service.name when drilling to logs', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('rewrites serviceName -> service.name when drilling to traces', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('drops `name` clause when drilling to logs', () => {
+			const result = getViewQuery(
+				makeQuery(`name = 'GET /api'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).not.toContain(`name = 'GET /api'`);
+		});
+
+		it('keeps `name` clause when drilling to traces', () => {
+			const result = getViewQuery(
+				makeQuery(`name = 'GET /api'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`name = 'GET /api'`);
+		});
+
+		it('combined: drilling to logs rewrites serviceName and drops name', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_logs',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).not.toContain('serviceName');
+			expect(expr).not.toContain(`name = 'GET /api'`);
+		});
+
+		it('combined: drilling to traces rewrites serviceName and keeps name', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_traces',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`service.name = 'svc'`);
+			expect(expr).toContain(`name = 'GET /api'`);
+			expect(expr).not.toContain('serviceName');
+		});
+
+		it('metric-APM source -> traces target preserves existing operation -> name rewrite', () => {
+			const metricsQuery: Query = {
+				id: 'apm-metrics',
+				queryType: 'builder' as any,
+				builder: {
+					queryData: [
+						{
+							queryName: 'm',
+							dataSource: 'metrics' as any,
+							aggregations: [{ metricName: 'signoz_calls_total' }] as any,
+							groupBy: [],
+							expression: '',
+							disabled: false,
+							functions: [],
+							legend: '',
+							having: [],
+							limit: null,
+							stepInterval: undefined,
+							orderBy: [],
+							filter: { expression: `operation = 'GET'` },
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+			};
+			const result = getViewQuery(metricsQuery, [], 'view_traces', 'm');
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain(`name = 'GET'`);
+			expect(expr).not.toContain(`operation = 'GET'`);
+		});
+
+		it('metric-APM source -> logs target: operation rewrites to name, then dropped', () => {
+			const metricsQuery: Query = {
+				id: 'apm-metrics',
+				queryType: 'builder' as any,
+				builder: {
+					queryData: [
+						{
+							queryName: 'm',
+							dataSource: 'metrics' as any,
+							aggregations: [{ metricName: 'signoz_calls_total' }] as any,
+							groupBy: [],
+							expression: '',
+							disabled: false,
+							functions: [],
+							legend: '',
+							having: [],
+							limit: null,
+							stepInterval: undefined,
+							orderBy: [],
+							filter: { expression: `operation = 'GET'` },
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				promql: [],
+				clickhouse_sql: [],
+			};
+			const result = getViewQuery(metricsQuery, [], 'view_logs', 'm');
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).not.toContain(`operation = 'GET'`);
+			expect(expr).not.toContain(`name = 'GET'`);
+		});
+
+		it('drilling to metrics does not apply target-side sanitisation', () => {
+			const result = getViewQuery(
+				makeQuery(`serviceName = 'svc' AND name = 'GET /api'`),
+				[],
+				'view_metrics',
+				'src',
+			);
+			const expr = result?.builder.queryData[0]?.filter?.expression || '';
+			expect(expr).toContain('serviceName');
+			expect(expr).toContain(`name = 'GET /api'`);
+		});
+	});
 });

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -7,8 +7,10 @@ import {
 import ROUTES from 'constants/routes';
 import { isApmMetric } from 'container/PanelWrapper/utils';
 import {
+	applyMappingsToExpression,
+	DRILLDOWN_TO_LOGS_MAPPINGS,
+	DRILLDOWN_TO_TRACES_MAPPINGS,
 	METRIC_TO_LOGS_TRACES_MAPPINGS,
-	replaceKeysAndValuesInExpression,
 } from 'container/QueryTable/Drilldown/metricsCorrelationUtils';
 import cloneDeep from 'lodash-es/cloneDeep';
 import {
@@ -347,27 +349,41 @@ export const getViewQuery = (
 	newQuery.builder.queryData[0].filter = newFilterExpression;
 
 	try {
-		// ===========================================
-		// TEMP LOGIC - TO BE REMOVED LATER
-		// ===========================================
-		// Apply metric-to-logs/traces transformations
+		// Drill-down filter sanitisation. Two stages:
+		//   1. Source-side: rewrite metric-APM-specific keys (operation, span.kind,
+		//      status.code) so they map onto trace/log columns.
+		//   2. Target-side: normalise legacy keys to OTel-canonical (`serviceName`
+		//      -> `service.name`) and drop keys with no equivalent in the target
+		//      datasource (e.g. `name` for logs).
+		let expression = newFilterExpression?.expression || '';
+
 		const specificQuery = getQueryData(query, queryName);
 		const isMetricQuery = specificQuery?.dataSource === 'metrics';
 		const metricName = (specificQuery?.aggregations?.[0] as MetricAggregation)
 			?.metricName;
 
 		if (isMetricQuery && isApmMetric(metricName || '')) {
-			const transformedExpression = replaceKeysAndValuesInExpression(
-				newFilterExpression?.expression || '',
+			expression = applyMappingsToExpression(
+				expression,
 				METRIC_TO_LOGS_TRACES_MAPPINGS,
 			);
-			newQuery.builder.queryData[0].filter = {
-				expression: transformedExpression || '',
-			};
 		}
-		// ===========================================
+
+		if (key === 'view_logs') {
+			expression = applyMappingsToExpression(
+				expression,
+				DRILLDOWN_TO_LOGS_MAPPINGS,
+			);
+		} else if (key === 'view_traces') {
+			expression = applyMappingsToExpression(
+				expression,
+				DRILLDOWN_TO_TRACES_MAPPINGS,
+			);
+		}
+
+		newQuery.builder.queryData[0].filter = { expression };
 	} catch (error) {
-		console.error('Error transforming metrics to logs/traces:', error);
+		console.error('Error sanitising drilldown filter expression:', error);
 	}
 
 	return newQuery;

frontend/src/container/QueryTable/Drilldown/metricsCorrelationUtils.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	formatValueForExpression,
+	removeKeysFromExpression,
+} from 'components/QueryBuilderV2/utils';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { extractQueryPairs } from 'utils/queryContextUtils';
@@ -8,7 +11,7 @@ import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 
 type KeyValueMapping = {
 	attribute: string;
-	newAttribute: string;
+	newAttribute: string | null;
 	valueMappings: Record<string, string>;
 };
 
@@ -40,8 +43,33 @@ export const METRIC_TO_LOGS_TRACES_MAPPINGS: KeyValueMapping[] = [
 	},
 ];
 
+export const DRILLDOWN_TO_LOGS_MAPPINGS: KeyValueMapping[] = [
+	{
+		attribute: 'serviceName',
+		newAttribute: 'service.name',
+		valueMappings: {},
+	},
+	{
+		attribute: 'name',
+		newAttribute: null,
+		valueMappings: {},
+	},
+];
+
+export const DRILLDOWN_TO_TRACES_MAPPINGS: KeyValueMapping[] = [
+	{
+		attribute: 'serviceName',
+		newAttribute: 'service.name',
+		valueMappings: {},
+	},
+];
+
 // Logic for rewriting key/values in an expression using provided mappings.
-function modifyKeyVal(pair: IQueryPair, mapping: KeyValueMapping): string {
+// Callers must pre-filter mappings to ensure newAttribute is non-null.
+function modifyKeyVal(
+	pair: IQueryPair,
+	mapping: KeyValueMapping & { newAttribute: string },
+): string {
 	const newKey = mapping.newAttribute;
 	const op = pair.operator;
 
@@ -107,8 +135,18 @@ export function replaceKeysAndValuesInExpression(
 		return expression;
 	}
 
-	const attributeToMapping = new Map<string, KeyValueMapping>(
-		mappingList.map((m) => [m.attribute.trim().toLowerCase(), m]),
+	// Only rewrite mappings (newAttribute non-null) are processed here.
+	// Drops are handled separately by applyMappingsToExpression via removeKeysFromExpression.
+	const attributeToMapping = new Map<
+		string,
+		KeyValueMapping & { newAttribute: string }
+	>(
+		mappingList
+			.filter(
+				(m): m is KeyValueMapping & { newAttribute: string } =>
+					m.newAttribute !== null,
+			)
+			.map((m) => [m.attribute.trim().toLowerCase(), m]),
 	);
 
 	const pairs: IQueryPair[] = extractQueryPairs(expression);
@@ -179,3 +217,26 @@ export function replaceKeysAndValuesInExpression(
 
 	return resultParts.join('');
 }
+
+// Apply a list of mappings to a filter expression. Rewrites are applied first
+// (newAttribute is a string), then drops (newAttribute is null) via the
+// ANTLR-parser-based removeKeysFromExpression which handles AND/OR/NOT/paren
+// elision correctly.
+export function applyMappingsToExpression(
+	expression: string,
+	mappings: KeyValueMapping[],
+): string {
+	if (!expression || !mappings || mappings.length === 0) {
+		return expression;
+	}
+
+	const dropKeys = mappings
+		.filter((m) => m.newAttribute === null)
+		.map((m) => m.attribute);
+
+	let result = replaceKeysAndValuesInExpression(expression, mappings);
+	if (dropKeys.length > 0) {
+		result = removeKeysFromExpression(result, dropKeys);
+	}
+	return result;
+}

frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx

@@ -1,9 +1,8 @@
 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';
@@ -134,7 +133,7 @@ function ServiceAccountsSettings(): JSX.Element {
 
 	const totalCount = allAccounts.length;
 
-	const filterMenuItems: MenuProps['items'] = [
+	const filterMenuItems: MenuItem[] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -231,10 +230,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			) : (
 				<div className="sa-settings__list-section">
 					<div className="sa-settings__controls">
-						<Dropdown
+						<DropdownMenuSimple
 							menu={{ items: filterMenuItems }}
-							trigger={['click']}
-							overlayClassName="sa-settings-filter-dropdown"
+							className="sa-settings-filter-dropdown"
 						>
 							<Button
 								variant="solid"
@@ -247,7 +245,7 @@ function ServiceAccountsSettings(): JSX.Element {
 									className="sa-settings-filter-trigger__chevron"
 								/>
 							</Button>
-						</Dropdown>
+						</DropdownMenuSimple>
 
 						<div className="sa-settings__search">
 							<Input

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

@@ -1,4 +1,5 @@
 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';
@@ -129,6 +130,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -137,10 +139,10 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
+		await user.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		fireEvent.click(activeOption);
+		await user.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):hover,
+	&:not(.pinned).is-hovered,
 	&.dropdown-open {
 		flex: 0 0 240px;
 		max-width: 240px;

frontend/src/container/SideNav/SideNav.tsx

@@ -1,5 +1,6 @@
 import {
 	MouseEvent,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -25,7 +26,14 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Dropdown, MenuProps, Modal, Tooltip } from 'antd';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
+import { Button, 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';
@@ -162,7 +170,9 @@ 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[]>([]);
@@ -175,9 +185,27 @@ 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;
@@ -959,9 +987,11 @@ 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}
@@ -1182,46 +1212,95 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							{isAIAssistantEnabled && renderNavItems([aiAssistantMenuItem], false)}
 
 							<div className="nav-dropdown-item">
-								<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>
+								<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>
 
-											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
+												<div className="nav-item-label">{helpSupportMenuItem.label}</div>
+											</div>
 										</div>
-									</div>
-								</Dropdown>
+									</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>
 
 							<div className="nav-dropdown-item">
-								<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>
+								<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>
 
-											<div className="nav-item-label">{userSettingsMenuItem.label}</div>
+												<div className="nav-item-label">{userSettingsMenuItem.label}</div>
+											</div>
 										</div>
-									</div>
-								</Dropdown>
+									</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>
 						</div>
 					</div>

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

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

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Divider, Dropdown, MenuProps, Switch, Tooltip } from 'antd';
+import { Button, Divider, Switch, Tooltip } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Copy, Ellipsis, PenLine, Trash2 } from '@signozhq/icons';
 import {
@@ -11,7 +12,6 @@ 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,6 @@ 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,
@@ -67,9 +57,7 @@ function AlertActionButtons({
 
 	const isV2Alert = alertDetails.schemaVersion === NEW_ALERT_SCHEMA_VERSION;
 
-	const finalMenuItemStyle = isV2Alert ? menuItemStyleV2 : menuItemStyle;
-
-	const menuItems: MenuProps['items'] = [
+	const menuItems: MenuItem[] = [
 		...(!isV2Alert
 			? [
 					{
@@ -77,7 +65,6 @@ function AlertActionButtons({
 						label: 'Rename',
 						icon: <PenLine size={16} color={Color.BG_VANILLA_400} />,
 						onClick: handleRename,
-						style: finalMenuItemStyle,
 					},
 				]
 			: []),
@@ -86,17 +73,13 @@ 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,
-			style: {
-				...finalMenuItemStyle,
-				color: Color.BG_CHERRY_400,
-			},
+			danger: true,
 		},
 	];
 
@@ -143,16 +126,21 @@ function AlertActionButtons({
 
 				<Divider type="vertical" />
 
-				<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>
+				<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>
 			</div>
 
 			<RenameModal

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss

@@ -119,6 +119,12 @@
 	flex-shrink: 0;
 }
 
+.statusMessageBadge {
+	width: 100%;
+	min-width: 0;
+	box-sizing: border-box;
+}
+
 .traceId {
 	color: var(--accent-primary);
 	overflow: hidden;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Badge } from '@signozhq/ui/badge';
+import ExpandableValue from 'periscope/components/ExpandableValue';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import styles from './SpanDetailsPanel.module.scss';
@@ -48,7 +49,15 @@ export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
 		label: 'STATUS MESSAGE',
 		render: (span): ReactNode | null =>
 			span.status_message ? (
-				<Badge color="vanilla">{span.status_message}</Badge>
+				<ExpandableValue value={span.status_message} title="Status message">
+					<Badge
+						color="vanilla"
+						textEllipsis="end"
+						className={styles.statusMessageBadge}
+					>
+						{span.status_message}
+					</Badge>
+				</ExpandableValue>
 			) : null,
 	},
 ];

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.module.scss

@@ -0,0 +1,3 @@
+.traceOptionsDropdown {
+	z-index: 1100;
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceOptionsMenu.tsx

@@ -6,6 +6,8 @@ import { Ellipsis } from '@signozhq/icons';
 
 import { useTraceStore } from '../stores/traceStore';
 
+import styles from './TraceOptionsMenu.module.scss';
+
 interface TraceOptionsMenuProps {
 	showTraceDetails: boolean;
 	onToggleTraceDetails: () => void;
@@ -82,7 +84,11 @@ function TraceOptionsMenu({
 	]);
 
 	return (
-		<Dropdown menu={{ items: menuItems }} align="start">
+		<Dropdown
+			menu={{ items: menuItems }}
+			align="start"
+			className={styles.traceOptionsDropdown}
+		>
 			<Button
 				variant="ghost"
 				size="icon"

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

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

frontend/src/periscope/components/ExpandableValue/ExpandableValue.module.scss

@@ -0,0 +1,49 @@
+.trigger {
+	display: block;
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
+
+	[data-truncated='true'] {
+		pointer-events: none;
+	}
+}
+
+.tooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-width: 480px;
+	padding: 8px;
+}
+
+.preview {
+	margin: 0;
+	max-height: 220px;
+	overflow: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+	font-family: var(--font-family-mono, monospace);
+	font-size: 12px;
+	line-height: 1.4;
+}
+
+.expandButton {
+	align-self: flex-end;
+}
+
+.dialog {
+	max-width: 80vw;
+	width: 80vw;
+}
+
+.fullValue {
+	margin: 0;
+	max-height: 70vh;
+	overflow: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+	font-family: var(--font-family-mono, monospace);
+	font-size: 13px;
+	line-height: 1.5;
+}

frontend/src/periscope/components/ExpandableValue/ExpandableValue.tsx

@@ -0,0 +1,78 @@
+import { ReactNode, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import {
+	TooltipContent,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { Fullscreen } from '@signozhq/icons';
+
+import styles from './ExpandableValue.module.scss';
+
+const DEFAULT_THRESHOLD = 100;
+const DEFAULT_DIALOG_TITLE = 'Value';
+
+const DEFAULT_Z_INDEX = 1100;
+
+interface ExpandableValueProps {
+	value: string;
+	title?: string;
+	threshold?: number;
+	zIndex?: number;
+	children: ReactNode;
+}
+
+function ExpandableValue({
+	value,
+	title = DEFAULT_DIALOG_TITLE,
+	threshold = DEFAULT_THRESHOLD,
+	zIndex = DEFAULT_Z_INDEX,
+	children,
+}: ExpandableValueProps): JSX.Element {
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+	if (value.length <= threshold) {
+		return <>{children}</>;
+	}
+
+	return (
+		<TooltipProvider>
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<span className={styles.trigger}>{children}</span>
+				</TooltipTrigger>
+				<TooltipContent
+					className={styles.tooltipContent}
+					side="top"
+					style={{ zIndex }}
+				>
+					<pre className={styles.preview}>{value}</pre>
+					<Button
+						variant="outlined"
+						color="secondary"
+						size="sm"
+						prefix={<Fullscreen size={14} />}
+						onClick={(): void => setIsDialogOpen(true)}
+						className={styles.expandButton}
+					>
+						Expand
+					</Button>
+				</TooltipContent>
+			</TooltipRoot>
+
+			<DialogWrapper
+				title={title}
+				open={isDialogOpen}
+				onOpenChange={setIsDialogOpen}
+				className={styles.dialog}
+				style={{ zIndex }}
+			>
+				<pre className={styles.fullValue}>{value}</pre>
+			</DialogWrapper>
+		</TooltipProvider>
+	);
+}
+
+export default ExpandableValue;

frontend/src/periscope/components/ExpandableValue/index.ts

@@ -0,0 +1 @@
+export { default } from './ExpandableValue';

pkg/modules/inframonitoring/implinframonitoring/clusters.go

@@ -26,7 +26,7 @@ func buildClusterRecords(
 	records := make([]inframonitoringtypes.ClusterRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		clusterName := labels[clusterNameAttrKey]
+		clusterName := labels[inframonitoringtypes.ClusterNameAttrKey]
 
 		record := inframonitoringtypes.ClusterRecord{ // initialize with default values
 			ClusterName:              clusterName,
@@ -87,6 +87,9 @@ func (m *module) getTopClusterGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.ClusterNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.ClusterNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToClustersQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/clusters_constants.go

@@ -7,14 +7,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-// TODO(nikhilmantri0902): change to k8s.cluster.uid after showing the missing
-// data banner. Carried forward from v1 (see k8sClusterUIDAttrKey in
-// pkg/query-service/app/inframetrics/clusters.go).
-const clusterNameAttrKey = "k8s.cluster.name"
-
 var clusterNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          clusterNameAttrKey,
+		Name:          inframonitoringtypes.ClusterNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/daemonsets.go

@@ -25,7 +25,7 @@ func buildDaemonSetRecords(
 	records := make([]inframonitoringtypes.DaemonSetRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		daemonSetName := labels[daemonSetNameAttrKey]
+		daemonSetName := labels[inframonitoringtypes.DaemonSetNameAttrKey]
 
 		record := inframonitoringtypes.DaemonSetRecord{ // initialize with default values
 			DaemonSetName:          daemonSetName,
@@ -95,6 +95,9 @@ func (m *module) getTopDaemonSetGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.DaemonSetNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.DaemonSetNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToDaemonSetsQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/daemonsets_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	daemonSetNameAttrKey     = "k8s.daemonset.name"
-	daemonSetsBaseFilterExpr = "k8s.daemonset.name != ''"
-)
+const daemonSetsBaseFilterExpr = "k8s.daemonset.name != ''"
 
 var daemonSetNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          daemonSetNameAttrKey,
+		Name:          inframonitoringtypes.DaemonSetNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/deployments.go

@@ -25,7 +25,7 @@ func buildDeploymentRecords(
 	records := make([]inframonitoringtypes.DeploymentRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		deploymentName := labels[deploymentNameAttrKey]
+		deploymentName := labels[inframonitoringtypes.DeploymentNameAttrKey]
 
 		record := inframonitoringtypes.DeploymentRecord{ // initialize with default values
 			DeploymentName:          deploymentName,
@@ -95,6 +95,9 @@ func (m *module) getTopDeploymentGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.DeploymentNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.DeploymentNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToDeploymentsQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/deployments_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	deploymentNameAttrKey     = "k8s.deployment.name"
-	deploymentsBaseFilterExpr = "k8s.deployment.name != ''"
-)
+const deploymentsBaseFilterExpr = "k8s.deployment.name != ''"
 
 var deploymentNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          deploymentNameAttrKey,
+		Name:          inframonitoringtypes.DeploymentNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/hosts.go

@@ -38,7 +38,7 @@ func (m *module) getPerGroupHostStatusCounts(
 		uint64(req.Start), uint64(req.End), nil,
 	)
 
-	hostNameExpr := fmt.Sprintf("JSONExtractString(labels, '%s')", hostNameAttrKey)
+	hostNameExpr := fmt.Sprintf("JSONExtractString(labels, '%s')", inframonitoringtypes.HostNameAttrKey)
 
 	sb := sqlbuilder.NewSelectBuilder()
 	selectCols := make([]string, 0, len(req.GroupBy)+2)
@@ -48,7 +48,7 @@ func (m *module) getPerGroupHostStatusCounts(
 		)
 	}
 
-	activeHostsSQ := m.getActiveHostsQuery(metricNames, hostNameAttrKey, sinceUnixMilli)
+	activeHostsSQ := m.getActiveHostsQuery(metricNames, inframonitoringtypes.HostNameAttrKey, sinceUnixMilli)
 	selectCols = append(selectCols,
 		fmt.Sprintf("uniqExactIf(%s, %s GLOBAL IN (%s)) AS active_host_count", hostNameExpr, hostNameExpr, sb.Var(activeHostsSQ)),
 		fmt.Sprintf("uniqExactIf(%s, %s != '') AS total_host_count", hostNameExpr, hostNameExpr),
@@ -142,7 +142,7 @@ func buildHostRecords(
 	records := make([]inframonitoringtypes.HostRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		hostName := labels[hostNameAttrKey]
+		hostName := labels[inframonitoringtypes.HostNameAttrKey]
 
 		activeStatus := inframonitoringtypes.HostStatusNone
 		activeHostCount := 0
@@ -216,6 +216,9 @@ func (m *module) getTopHostGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.HostNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.HostNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToHostsQueryNames[orderByKey]
 	// The last entry is the formula/query whose value we sort by.
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
@@ -281,7 +284,7 @@ func (m *module) applyHostsActiveStatusFilter(req *inframonitoringtypes.Postable
 	if req.Filter.FilterByStatus == inframonitoringtypes.HostStatusInactive {
 		op = "NOT IN"
 	}
-	statusClause := fmt.Sprintf("%s %s (%s)", hostNameAttrKey, op, strings.Join(activeHosts, ", "))
+	statusClause := fmt.Sprintf("%s %s (%s)", inframonitoringtypes.HostNameAttrKey, op, strings.Join(activeHosts, ", "))
 	req.Filter.Expression = mergeFilterExpressions(req.Filter.Expression, statusClause)
 	return false
 }

pkg/modules/inframonitoring/implinframonitoring/hosts_constants.go

@@ -7,14 +7,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	hostNameAttrKey = "host.name"
-)
-
 // Helper group-by key used across all queries.
 var hostNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          hostNameAttrKey,
+		Name:          inframonitoringtypes.HostNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/jobs.go

@@ -25,7 +25,7 @@ func buildJobRecords(
 	records := make([]inframonitoringtypes.JobRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		jobName := labels[jobNameAttrKey]
+		jobName := labels[inframonitoringtypes.JobNameAttrKey]
 
 		record := inframonitoringtypes.JobRecord{ // initialize with default values
 			JobName:               jobName,
@@ -103,6 +103,9 @@ func (m *module) getTopJobGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.JobNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.JobNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToJobsQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/jobs_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	jobNameAttrKey     = "k8s.job.name"
-	jobsBaseFilterExpr = "k8s.job.name != ''"
-)
+const jobsBaseFilterExpr = "k8s.job.name != ''"
 
 var jobNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          jobNameAttrKey,
+		Name:          inframonitoringtypes.JobNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/module.go

@@ -100,7 +100,7 @@ func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframon
 	// Determine active hosts: those with metrics reported in the last 10 minutes.
 	// Compute the cutoff once so every downstream query/subquery agrees on what "active" means.
 	sinceUnixMilli := time.Now().Add(-10 * time.Minute).UTC().UnixMilli()
-	activeHostsMap, err := m.getActiveHosts(ctx, hostsTableMetricNamesList, hostNameAttrKey, sinceUnixMilli)
+	activeHostsMap, err := m.getActiveHosts(ctx, hostsTableMetricNamesList, inframonitoringtypes.HostNameAttrKey, sinceUnixMilli)
 	if err != nil {
 		return nil, err
 	}
@@ -146,7 +146,7 @@ func (m *module) ListHosts(ctx context.Context, orgID valuer.UUID, req *inframon
 	// When host.name is not in groupBy, we need to run an additional query to get the counts per group for the current page,
 	// using the same filter expression as the main query (including user filters + page groups IN clause).
 	hostCounts := make(map[string]groupHostStatusCounts)
-	isHostNameInGroupBy := isKeyInGroupByAttrs(req.GroupBy, hostNameAttrKey)
+	isHostNameInGroupBy := isKeyInGroupByAttrs(req.GroupBy, inframonitoringtypes.HostNameAttrKey)
 	if !isHostNameInGroupBy {
 		hostCounts, err = m.getPerGroupHostStatusCounts(ctx, req, hostsTableMetricNamesList, pageGroups, sinceUnixMilli)
 		if err != nil {
@@ -324,7 +324,7 @@ func (m *module) ListNodes(ctx context.Context, orgID valuer.UUID, req *inframon
 		return nil, err
 	}
 
-	isNodeNameInGroupBy := isKeyInGroupByAttrs(req.GroupBy, nodeNameAttrKey)
+	isNodeNameInGroupBy := isKeyInGroupByAttrs(req.GroupBy, inframonitoringtypes.NodeNameAttrKey)
 	resp.Records = buildNodeRecords(isNodeNameInGroupBy, queryResp, pageGroups, req.GroupBy, metadataMap, nodeConditionCounts, podPhaseCounts)
 	resp.Warning = queryResp.Warning
 

pkg/modules/inframonitoring/implinframonitoring/namespaces.go

@@ -24,7 +24,7 @@ func buildNamespaceRecords(
 	records := make([]inframonitoringtypes.NamespaceRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		namespaceName := labels[namespaceNameAttrKey]
+		namespaceName := labels[inframonitoringtypes.NamespaceNameAttrKey]
 
 		record := inframonitoringtypes.NamespaceRecord{ // initialize with default values
 			NamespaceName:   namespaceName,
@@ -70,6 +70,9 @@ func (m *module) getTopNamespaceGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.NamespaceNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.NamespaceNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToNamespacesQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/namespaces_constants.go

@@ -7,13 +7,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	namespaceNameAttrKey = "k8s.namespace.name"
-)
-
 var namespaceNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          namespaceNameAttrKey,
+		Name:          inframonitoringtypes.NamespaceNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/nodes.go

@@ -33,7 +33,7 @@ func buildNodeRecords(
 	records := make([]inframonitoringtypes.NodeRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		nodeName := labels[nodeNameAttrKey]
+		nodeName := labels[inframonitoringtypes.NodeNameAttrKey]
 
 		record := inframonitoringtypes.NodeRecord{ // initialize with default values
 			NodeName:              nodeName,
@@ -105,6 +105,9 @@ func (m *module) getTopNodeGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.NodeNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.NodeNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToNodesQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 
@@ -201,7 +204,7 @@ func (m *module) getPerGroupNodeConditionCounts(
 	timeSeriesFPs := sqlbuilder.NewSelectBuilder()
 	timeSeriesFPsSelectCols := []string{
 		"fingerprint",
-		fmt.Sprintf("JSONExtractString(labels, %s) AS node_name", timeSeriesFPs.Var(nodeNameAttrKey)),
+		fmt.Sprintf("JSONExtractString(labels, %s) AS node_name", timeSeriesFPs.Var(inframonitoringtypes.NodeNameAttrKey)),
 	}
 	for _, key := range groupBy {
 		timeSeriesFPsSelectCols = append(timeSeriesFPsSelectCols,

pkg/modules/inframonitoring/implinframonitoring/nodes_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	nodeNameAttrKey         = "k8s.node.name"
-	nodeConditionMetricName = "k8s.node.condition_ready"
-)
+const nodeConditionMetricName = "k8s.node.condition_ready"
 
 var nodeNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          nodeNameAttrKey,
+		Name:          inframonitoringtypes.NodeNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/pods.go

@@ -124,6 +124,9 @@ func (m *module) getTopPodGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.PodNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.PodNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToPodsQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/statefulsets.go

@@ -25,7 +25,7 @@ func buildStatefulSetRecords(
 	records := make([]inframonitoringtypes.StatefulSetRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		statefulSetName := labels[statefulSetNameAttrKey]
+		statefulSetName := labels[inframonitoringtypes.StatefulSetNameAttrKey]
 
 		record := inframonitoringtypes.StatefulSetRecord{ // initialize with default values
 			StatefulSetName:          statefulSetName,
@@ -95,6 +95,9 @@ func (m *module) getTopStatefulSetGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.StatefulSetNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.StatefulSetNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToStatefulSetsQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/statefulsets_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	statefulSetNameAttrKey     = "k8s.statefulset.name"
-	statefulSetsBaseFilterExpr = "k8s.statefulset.name != ''"
-)
+const statefulSetsBaseFilterExpr = "k8s.statefulset.name != ''"
 
 var statefulSetNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          statefulSetNameAttrKey,
+		Name:          inframonitoringtypes.StatefulSetNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/modules/inframonitoring/implinframonitoring/volumes.go

@@ -23,7 +23,7 @@ func buildVolumeRecords(
 	records := make([]inframonitoringtypes.VolumeRecord, 0, len(pageGroups))
 	for _, labels := range pageGroups {
 		compositeKey := compositeKeyFromLabels(labels, groupBy)
-		pvcName := labels[persistentVolumeClaimNameAttrKey]
+		pvcName := labels[inframonitoringtypes.PersistentVolumeClaimNameAttrKey]
 
 		record := inframonitoringtypes.VolumeRecord{ // initialize with default values
 			PersistentVolumeClaimName: pvcName,
@@ -75,6 +75,9 @@ func (m *module) getTopVolumeGroups(
 	metadataMap map[string]map[string]string,
 ) ([]map[string]string, error) {
 	orderByKey := req.OrderBy.Key.Name
+	if orderByKey == inframonitoringtypes.PersistentVolumeClaimNameAttrKey {
+		return inframonitoringtypes.PaginateMetadataByName(metadataMap, req.GroupBy, req.OrderBy.Direction, req.Offset, req.Limit, inframonitoringtypes.PersistentVolumeClaimNameAttrKey), nil
+	}
 	queryNamesForOrderBy := orderByToVolumesQueryNames[orderByKey]
 	rankingQueryName := queryNamesForOrderBy[len(queryNamesForOrderBy)-1]
 

pkg/modules/inframonitoring/implinframonitoring/volumes_constants.go

@@ -7,14 +7,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-	persistentVolumeClaimNameAttrKey = "k8s.persistentvolumeclaim.name"
-	volumesBaseFilterExpr            = "k8s.persistentvolumeclaim.name != ''"
-)
+const volumesBaseFilterExpr = "k8s.persistentvolumeclaim.name != ''"
 
 var pvcNameGroupByKey = qbtypes.GroupByKey{
 	TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-		Name:          persistentVolumeClaimNameAttrKey,
+		Name:          inframonitoringtypes.PersistentVolumeClaimNameAttrKey,
 		FieldContext:  telemetrytypes.FieldContextResource,
 		FieldDataType: telemetrytypes.FieldDataTypeString,
 	},

pkg/types/inframonitoringtypes/clusters.go

@@ -10,7 +10,7 @@ import (
 
 type Clusters struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []ClusterRecord        `json:"records" required:"true"`
+	Records                []ClusterRecord        `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
@@ -19,8 +19,8 @@ type Clusters struct {
 
 type ClusterRecord struct {
 	// TODO(nikhilmantri0902): once the underlying attr key is migrated to
-	// k8s.cluster.uid (see clusterNameAttrKey TODO in implinframonitoring),
-	// surface ClusterUID alongside (or replace) ClusterName.
+	// k8s.cluster.uid (see ClusterNameAttrKey), surface ClusterUID alongside
+	// (or replace) ClusterName.
 	ClusterName              string                `json:"clusterName" required:"true"`
 	ClusterCPU               float64               `json:"clusterCPU" required:"true"`
 	ClusterCPUAllocatable    float64               `json:"clusterCPUAllocatable" required:"true"`
@@ -88,6 +88,9 @@ func (req *PostableClusters) Validate() error {
 		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
 		}
+		if req.OrderBy.Key.Name == ClusterNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", ClusterNameAttrKey)
+		}
 	}
 
 	return nil

pkg/types/inframonitoringtypes/clusters_constants.go

@@ -1,5 +1,7 @@
 package inframonitoringtypes
 
+const ClusterNameAttrKey = "k8s.cluster.name"
+
 const (
 	ClustersOrderByCPU               = "cpu"
 	ClustersOrderByCPUAllocatable    = "cpu_allocatable"
@@ -12,4 +14,5 @@ var ClustersValidOrderByKeys = []string{
 	ClustersOrderByCPUAllocatable,
 	ClustersOrderByMemory,
 	ClustersOrderByMemoryAllocatable,
+	ClusterNameAttrKey,
 }

pkg/types/inframonitoringtypes/clusters_test.go

@@ -275,6 +275,57 @@ func TestPostableClusters_Validate(t *testing.T) {
 			},
 			wantErr: true,
 		},
+		{
+			name: "orderBy name asc with empty groupBy is valid",
+			req: &PostableClusters{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: ClusterNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name desc with empty groupBy is valid",
+			req: &PostableClusters{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: ClusterNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionDesc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name with non-empty groupBy is rejected",
+			req: &PostableClusters{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				GroupBy: []qbtypes.GroupByKey{
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "k8s.cluster.name"}},
+				},
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: ClusterNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: true,
+		},
 	}
 
 	for _, tt := range tests {

pkg/types/inframonitoringtypes/daemonsets.go

@@ -10,7 +10,7 @@ import (
 
 type DaemonSets struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []DaemonSetRecord      `json:"records" required:"true"`
+	Records                []DaemonSetRecord      `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
@@ -88,6 +88,9 @@ func (req *PostableDaemonSets) Validate() error {
 		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
 		}
+		if req.OrderBy.Key.Name == DaemonSetNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", DaemonSetNameAttrKey)
+		}
 	}
 
 	return nil

pkg/types/inframonitoringtypes/daemonsets_constants.go

@@ -1,12 +1,14 @@
 package inframonitoringtypes
 
+const DaemonSetNameAttrKey = "k8s.daemonset.name"
+
 const (
-	DaemonSetsOrderByCPU            = "cpu"
-	DaemonSetsOrderByCPURequest     = "cpu_request"
-	DaemonSetsOrderByCPULimit       = "cpu_limit"
-	DaemonSetsOrderByMemory         = "memory"
-	DaemonSetsOrderByMemoryRequest  = "memory_request"
-	DaemonSetsOrderByMemoryLimit    = "memory_limit"
+	DaemonSetsOrderByCPU           = "cpu"
+	DaemonSetsOrderByCPURequest    = "cpu_request"
+	DaemonSetsOrderByCPULimit      = "cpu_limit"
+	DaemonSetsOrderByMemory        = "memory"
+	DaemonSetsOrderByMemoryRequest = "memory_request"
+	DaemonSetsOrderByMemoryLimit   = "memory_limit"
 	DaemonSetsOrderByDesiredNodes  = "desired_nodes"
 	DaemonSetsOrderByCurrentNodes  = "current_nodes"
 )
@@ -20,4 +22,5 @@ var DaemonSetsValidOrderByKeys = []string{
 	DaemonSetsOrderByMemoryLimit,
 	DaemonSetsOrderByDesiredNodes,
 	DaemonSetsOrderByCurrentNodes,
+	DaemonSetNameAttrKey,
 }

pkg/types/inframonitoringtypes/daemonsets_test.go

@@ -257,6 +257,63 @@ func TestPostableDaemonSets_Validate(t *testing.T) {
 			},
 			wantErr: true,
 		},
+		{
+			name: "orderBy name asc with empty groupBy is valid",
+			req: &PostableDaemonSets{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: DaemonSetNameAttrKey,
+						},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name desc with empty groupBy is valid",
+			req: &PostableDaemonSets{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: DaemonSetNameAttrKey,
+						},
+					},
+					Direction: qbtypes.OrderDirectionDesc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name with non-empty groupBy is rejected",
+			req: &PostableDaemonSets{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				GroupBy: []qbtypes.GroupByKey{
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "k8s.namespace.name"}},
+				},
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: DaemonSetNameAttrKey,
+						},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: true,
+		},
 	}
 
 	for _, tt := range tests {

pkg/types/inframonitoringtypes/deployments.go

@@ -10,7 +10,7 @@ import (
 
 type Deployments struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []DeploymentRecord     `json:"records" required:"true"`
+	Records                []DeploymentRecord     `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
@@ -88,6 +88,9 @@ func (req *PostableDeployments) Validate() error {
 		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
 		}
+		if req.OrderBy.Key.Name == DeploymentNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", DeploymentNameAttrKey)
+		}
 	}
 
 	return nil

pkg/types/inframonitoringtypes/deployments_constants.go

@@ -1,5 +1,7 @@
 package inframonitoringtypes
 
+const DeploymentNameAttrKey = "k8s.deployment.name"
+
 const (
 	DeploymentsOrderByCPU           = "cpu"
 	DeploymentsOrderByCPURequest    = "cpu_request"
@@ -20,4 +22,5 @@ var DeploymentsValidOrderByKeys = []string{
 	DeploymentsOrderByMemoryLimit,
 	DeploymentsOrderByDesiredPods,
 	DeploymentsOrderByAvailablePods,
+	DeploymentNameAttrKey,
 }

pkg/types/inframonitoringtypes/deployments_test.go

@@ -257,6 +257,57 @@ func TestPostableDeployments_Validate(t *testing.T) {
 			},
 			wantErr: true,
 		},
+		{
+			name: "orderBy name asc with empty groupBy is valid",
+			req: &PostableDeployments{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: DeploymentNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name desc with empty groupBy is valid",
+			req: &PostableDeployments{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: DeploymentNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionDesc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name with non-empty groupBy is rejected",
+			req: &PostableDeployments{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				GroupBy: []qbtypes.GroupByKey{
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "k8s.namespace.name"}},
+				},
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: DeploymentNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: true,
+		},
 	}
 
 	for _, tt := range tests {

pkg/types/inframonitoringtypes/hosts.go

@@ -10,7 +10,7 @@ import (
 
 type Hosts struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []HostRecord           `json:"records" required:"true"`
+	Records                []HostRecord           `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
@@ -100,6 +100,9 @@ func (req *PostableHosts) Validate() error {
 		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
 		}
+		if req.OrderBy.Key.Name == HostNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", HostNameAttrKey)
+		}
 	}
 
 	return nil

pkg/types/inframonitoringtypes/hosts_constants.go

@@ -20,6 +20,8 @@ func (HostStatus) Enum() []any {
 	}
 }
 
+const HostNameAttrKey = "host.name"
+
 const (
 	HostsOrderByCPU       = "cpu"
 	HostsOrderByMemory    = "memory"
@@ -34,4 +36,5 @@ var HostsValidOrderByKeys = []string{
 	HostsOrderByWait,
 	HostsOrderByDiskUsage,
 	HostsOrderByLoad15,
+	HostNameAttrKey,
 }

pkg/types/inframonitoringtypes/hosts_test.go

@@ -228,6 +228,57 @@ func TestHostsListRequest_Validate(t *testing.T) {
 			},
 			wantErr: true,
 		},
+		{
+			name: "orderBy name asc with empty groupBy is valid",
+			req: &PostableHosts{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: HostNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name desc with empty groupBy is valid",
+			req: &PostableHosts{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: HostNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionDesc,
+				},
+			},
+			wantErr: false,
+		},
+		{
+			name: "orderBy name with non-empty groupBy is rejected",
+			req: &PostableHosts{
+				Start:  1000,
+				End:    2000,
+				Limit:  100,
+				Offset: 0,
+				GroupBy: []qbtypes.GroupByKey{
+					{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "os.type"}},
+				},
+				OrderBy: &qbtypes.OrderBy{
+					Key: qbtypes.OrderByKey{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: HostNameAttrKey},
+					},
+					Direction: qbtypes.OrderDirectionAsc,
+				},
+			},
+			wantErr: true,
+		},
 	}
 
 	for _, tt := range tests {

pkg/types/inframonitoringtypes/jobs.go

@@ -10,7 +10,7 @@ import (
 
 type Jobs struct {
 	Type                   ResponseType           `json:"type" required:"true"`
-	Records                []JobRecord            `json:"records" required:"true"`
+	Records                []JobRecord            `json:"records" required:"true" nullable:"false"`
 	Total                  int                    `json:"total" required:"true"`
 	RequiredMetricsCheck   RequiredMetricsCheck   `json:"requiredMetricsCheck" required:"true"`
 	EndTimeBeforeRetention bool                   `json:"endTimeBeforeRetention" required:"true"`
@@ -90,6 +90,9 @@ func (req *PostableJobs) Validate() error {
 		if req.OrderBy.Direction != qbtypes.OrderDirectionAsc && req.OrderBy.Direction != qbtypes.OrderDirectionDesc {
 			return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid order by direction: %s", req.OrderBy.Direction)
 		}
+		if req.OrderBy.Key.Name == JobNameAttrKey && len(req.GroupBy) > 0 {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "order by '%s' is only allowed when groupBy is empty", JobNameAttrKey)
+		}
 	}
 
 	return nil

pkg/types/inframonitoringtypes/jobs_constants.go

@@ -1,5 +1,7 @@
 package inframonitoringtypes
 
+const JobNameAttrKey = "k8s.job.name"
+
 const (
 	JobsOrderByCPU                   = "cpu"
 	JobsOrderByCPURequest            = "cpu_request"
@@ -24,4 +26,5 @@ var JobsValidOrderByKeys = []string{
 	JobsOrderByActivePods,
 	JobsOrderByFailedPods,
 	JobsOrderBySuccessfulPods,
+	JobNameAttrKey,
 }