fix(user-info): code refactor

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -52,8 +52,10 @@
 			}
 
 			.progress-container {
-				--progress-height: 8px;
-				--progress-border-radius: 4px;
+				.ant-progress-bg {
+					height: 8px !important;
+					border-radius: 4px;
+				}
 			}
 
 			.ant-table-tbody > tr:hover > td {

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -9,13 +9,13 @@ import {
 	Flex,
 	Input,
 	InputRef,
+	Progress,
 	Space,
 	Spin,
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
 } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
@@ -60,7 +60,6 @@ function ProgressRender(item: string | number): JSX.Element {
 				percent={percent}
 				strokeLinecap="butt"
 				size="small"
-				showInfo
 				strokeColor={((): string => {
 					const cpuPercent = percent;
 					if (cpuPercent >= 90) {

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/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -45,10 +45,6 @@
 	.contributors-row {
 		height: 80px;
 	}
-	.top-contributors-progress {
-		--progress-background: transparent;
-	}
-
 	&__content {
 		.ant-table {
 			&-cell {

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

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Table, TableColumnsType as ColumnsType } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, Table, TableColumnsType as ColumnsType } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -52,8 +51,8 @@ function TopContributorsRows({
 					<Progress
 						percent={(count / totalCurrentTriggers) * 100}
 						showInfo={false}
+						trailColor="rgba(255, 255, 255, 0)"
 						strokeColor={Color.BG_ROBIN_500}
-						className="top-contributors-progress"
 					/>
 				</ConditionalAlertPopover>
 			),

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

@@ -141,9 +141,12 @@
 
 			.progress-container {
 				width: 158px;
+				.ant-progress {
+					margin: 0;
 
-				span {
-					font-weight: 600;
+					.ant-progress-text {
+						font-weight: 600;
+					}
 				}
 			}
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Skeleton, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, Skeleton, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -143,7 +142,6 @@ function DomainMetrics({
 										)}
 										strokeLinecap="butt"
 										size="small"
-										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(formattedDomainMetricsData.errorRate).toFixed(2),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Skeleton, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, Skeleton, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getDisplayValue,
@@ -85,7 +84,6 @@ function EndPointMetrics({
 										percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
 										strokeLinecap="butt"
 										size="small"
-										showInfo
 										strokeColor={((): string => {
 											const errorRatePercent = Number(
 												Number(metricsData?.errorRate ?? 0).toFixed(2),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -262,7 +261,6 @@ export const columnsConfig: ColumnType<APIDomainsRowData>[] = [
 					percent={Number((errorRateValue as number).toFixed(2))}
 					strokeLinecap="butt"
 					size="small"
-					showInfo
 					strokeColor={((): string => {
 						const errorRatePercent = Number((errorRateValue as number).toFixed(2));
 						if (errorRatePercent >= 90) {
@@ -1032,7 +1030,6 @@ export const getEndPointsColumnsConfig = (
 				)}
 				strokeLinecap="butt"
 				size="small"
-				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number((errorRate as number).toFixed(1));
 					if (errorRatePercent >= 90) {
@@ -2521,7 +2518,6 @@ export const dependentServicesColumns: ColumnType<DependentServicesData>[] = [
 					percent={Number((errorPercentage as number).toFixed(2))}
 					strokeLinecap="butt"
 					size="small"
-					showInfo
 					strokeColor={((): string => {
 						const errorPercentagePercent = Number(
 							(errorPercentage as number).toFixed(2),
@@ -3034,7 +3030,6 @@ export const getAllEndpointsWidgetData = (
 				)}
 				strokeLinecap="butt"
 				size="small"
-				showInfo
 				strokeColor={((): string => {
 					const errorRatePercent = Number(
 						(

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

@@ -1,147 +0,0 @@
-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,13 +21,11 @@ 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;
@@ -63,9 +61,6 @@ export const usePanelContextMenu = ({
 
 	const clickHandlerWithContextMenu = useCallback(
 		(...args: any[]) => {
-			if (!enableDrillDown) {
-				return;
-			}
 			const [
 				xValue,
 				_yvalue,
@@ -117,14 +112,14 @@ export const usePanelContextMenu = ({
 				});
 			}
 		},
-		[enableDrillDown, onClick, queryResponse],
+		[onClick, queryResponse],
 	);
 
 	return {
 		coordinates,
 		popoverPosition,
 		onClose,
-		menuItemsConfig: enableDrillDown ? menuItemsConfig : {},
+		menuItemsConfig,
 		clickHandlerWithContextMenu,
 	};
 };

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

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

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

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

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

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

frontend/src/container/Home/StepsProgress/StepsProgress.styles.scss

@@ -39,5 +39,7 @@
 
 	width: 100% !important;
 
-	--progress-width: 100%;
+	.ant-progress-steps-outer {
+		width: 100% !important;
+	}
 }

frontend/src/container/Home/StepsProgress/StepsProgress.tsx

@@ -1,4 +1,4 @@
-import { Progress } from '@signozhq/ui/progress';
+import { Progress } from 'antd';
 
 import { ChecklistItem } from '../HomeChecklist/HomeChecklist';
 

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Tag } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	getHostLists,
@@ -82,7 +81,6 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 				percent={Number(Number(value).toFixed(1))}
 				size="small"
 				strokeColor={getProgressColor(Number(value))}
-				showInfo
 			/>
 		),
 	},
@@ -94,7 +92,6 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 				percent={Number(Number(value).toFixed(1))}
 				size="small"
 				strokeColor={getMemoryProgressColor(Number(value))}
-				showInfo
 			/>
 		),
 	},

frontend/src/container/InfraMonitoringHosts/table.module.scss

@@ -61,8 +61,10 @@
 		width: 100%;
 	}
 
-	--progress-height: 8px;
-	--progress-border-radius: 4px;
+	:global(.ant-progress-bg) {
+		height: 8px !important;
+		border-radius: 4px;
+	}
 }
 
 .progressBar {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -103,8 +103,12 @@
 			.progress-container {
 				width: 158px;
 
-				span {
-					font-weight: 600;
+				.ant-progress {
+					margin: 0;
+
+					.ant-progress-text {
+						font-weight: 600;
+					}
 				}
 			}
 
@@ -288,8 +292,10 @@
 			}
 
 			.progress-container {
-				--progress-height: 8px;
-				--progress-border-radius: 4px;
+				.ant-progress-bg {
+					height: 8px !important;
+					border-radius: 4px;
+				}
 			}
 
 			.ant-table-tbody > tr:hover > td {

frontend/src/container/InfraMonitoringK8s/components/EntityProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Progress } from '@signozhq/ui/progress';
+import { Progress } from 'antd';
 import TanStackTable from 'components/TanStackTableView';
 import {
 	getMemoryProgressColor,

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

@@ -30,12 +30,7 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import {
-	GraphTitle,
-	MENU_ITEMS,
-	SERVICE_CHART_ID,
-	SERVICE_DETAIL_DRILLDOWN_ENABLED,
-} from '../constant';
+import { GraphTitle, MENU_ITEMS, SERVICE_CHART_ID } from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import { Button } from './styles';
@@ -211,7 +206,6 @@ function DBCall(): JSX.Element {
 							}}
 							onDragSelect={onDragSelect}
 							version={ENTITY_VERSION_V4}
-							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					</GraphContainer>
 				</Card>
@@ -250,7 +244,6 @@ 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,12 +32,7 @@ import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../constants/features';
 import { useAppContext } from '../../../providers/App/App';
-import {
-	GraphTitle,
-	legend,
-	MENU_ITEMS,
-	SERVICE_DETAIL_DRILLDOWN_ENABLED,
-} from '../constant';
+import { GraphTitle, legend, MENU_ITEMS } from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import GraphControlsPanel from './Overview/GraphControlsPanel/GraphControlsPanel';
@@ -284,7 +279,6 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
-								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -328,7 +322,6 @@ function External(): JSX.Element {
 								}}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
-								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -373,7 +366,6 @@ function External(): JSX.Element {
 								}
 								onDragSelect={onDragSelect}
 								version={ENTITY_VERSION_V4}
-								enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 							/>
 						</GraphContainer>
 					</Card>
@@ -417,7 +409,6 @@ 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,7 +15,6 @@ 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';
@@ -106,7 +105,6 @@ function ApDexMetrics({
 			threshold={threshold}
 			isQueryEnabled={isQueryEnabled}
 			version={ENTITY_VERSION_V4}
-			enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 		/>
 	);
 }

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

@@ -8,7 +8,6 @@ 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';
@@ -139,7 +138,6 @@ 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,7 +4,6 @@ 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';
@@ -44,7 +43,6 @@ function TopLevelOperation({
 							onDragSelect={onDragSelect}
 							isQueryEnabled={!topLevelOperationsIsLoading}
 							version={ENTITY_VERSION_V4}
-							enableDrillDown={SERVICE_DETAIL_DRILLDOWN_ENABLED}
 						/>
 					)}
 				</GraphContainer>

frontend/src/container/MetricsApplication/constant.ts

@@ -25,8 +25,6 @@ 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/Summary/Summary.styles.scss

@@ -143,8 +143,10 @@
 			}
 
 			.progress-container {
-				--progress-height: 8px;
-				--progress-border-radius: 4px;
+				.ant-progress-bg {
+					height: 8px !important;
+					border-radius: 4px;
+				}
 			}
 
 			.ant-table-tbody > tr:hover > td {

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/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -87,7 +87,12 @@
 
 					.service-progress-indicator {
 						width: fit-content;
-						--progress-width: 30px;
+						margin-inline-end: 0px !important;
+						margin-bottom: 0px !important;
+
+						.ant-progress-inner {
+							width: 30px;
+						}
 					}
 
 					.percent-value {

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Skeleton, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
+import { Progress, Skeleton, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
 import Spinner from 'components/Spinner';

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

@@ -169,10 +169,9 @@ describe('drilldownUtils', () => {
 
 			// Verify transformations were applied
 			if (filterExpression) {
-				// `operation` rewrites to `name` via source-side pass, then `name`
-				// is dropped by the logs target-side pass (logs has no span-name).
+				// Rule 2: operation → name
+				expect(filterExpression).toContain(`name = 'GET'`);
 				expect(filterExpression).not.toContain(`operation = 'GET'`);
-				expect(filterExpression).not.toContain(`name = 'GET'`);
 
 				// Rule 3: span.kind → kind
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
@@ -263,9 +262,8 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// `operation` rewrites to `name` then drops for logs target.
-				expect(filterExpression).not.toContain(`operation = 'POST'`);
-				expect(filterExpression).not.toContain(`name = 'POST'`);
+				// All transformations should be applied
+				expect(filterExpression).toContain(`name = 'POST'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindClient}'`);
 				expect(filterExpression).toContain(`status_code_string = 'Error'`);
 				expect(filterExpression).toContain(`http.status_code = 500`);
@@ -412,9 +410,8 @@ describe('drilldownUtils', () => {
 			const filterExpression = result?.builder.queryData[0]?.filter?.expression;
 
 			if (filterExpression) {
-				// `operation` rewrites to `name` then drops for logs target.
-				expect(filterExpression).not.toContain(`operation = 'GET'`);
-				expect(filterExpression).not.toContain(`name = 'GET'`);
+				// Transformed attributes
+				expect(filterExpression).toContain(`name = 'GET'`);
 				expect(filterExpression).toContain(`${spanKindKey} = '${spanKindServer}'`);
 
 				// Preserved non-metric attributes
@@ -502,189 +499,4 @@ 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,10 +7,8 @@ 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 {
@@ -349,41 +347,27 @@ export const getViewQuery = (
 	newQuery.builder.queryData[0].filter = newFilterExpression;
 
 	try {
-		// 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 || '';
-
+		// ===========================================
+		// TEMP LOGIC - TO BE REMOVED LATER
+		// ===========================================
+		// Apply metric-to-logs/traces transformations
 		const specificQuery = getQueryData(query, queryName);
 		const isMetricQuery = specificQuery?.dataSource === 'metrics';
 		const metricName = (specificQuery?.aggregations?.[0] as MetricAggregation)
 			?.metricName;
 
 		if (isMetricQuery && isApmMetric(metricName || '')) {
-			expression = applyMappingsToExpression(
-				expression,
+			const transformedExpression = replaceKeysAndValuesInExpression(
+				newFilterExpression?.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 sanitising drilldown filter expression:', error);
+		console.error('Error transforming metrics to logs/traces:', error);
 	}
 
 	return newQuery;

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

@@ -1,8 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import {
-	formatValueForExpression,
-	removeKeysFromExpression,
-} from 'components/QueryBuilderV2/utils';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { extractQueryPairs } from 'utils/queryContextUtils';
@@ -11,7 +8,7 @@ import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 
 type KeyValueMapping = {
 	attribute: string;
-	newAttribute: string | null;
+	newAttribute: string;
 	valueMappings: Record<string, string>;
 };
 
@@ -43,33 +40,8 @@ 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.
-// Callers must pre-filter mappings to ensure newAttribute is non-null.
-function modifyKeyVal(
-	pair: IQueryPair,
-	mapping: KeyValueMapping & { newAttribute: string },
-): string {
+function modifyKeyVal(pair: IQueryPair, mapping: KeyValueMapping): string {
 	const newKey = mapping.newAttribute;
 	const op = pair.operator;
 
@@ -135,18 +107,8 @@ export function replaceKeysAndValuesInExpression(
 		return expression;
 	}
 
-	// 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 attributeToMapping = new Map<string, KeyValueMapping>(
+		mappingList.map((m) => [m.attribute.trim().toLowerCase(), m]),
 	);
 
 	const pairs: IQueryPair[] = extractQueryPairs(expression);
@@ -217,26 +179,3 @@ 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;
-}