refactor: replace antd Tabs with @signozhq/ui Tabs

Migrates Tabs usage from antd to the @signozhq/ui Tabs component across
dashboard settings, integration details, metrics application, pipelines,
trace detail, and workspace-locked pages. API differences (activeKey →
value, defaultActiveKey → defaultValue, TabsProps['items'] → TabItemProps[])
are updated to match the new component.

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/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/DashboardSettings/index.tsx

@@ -1,4 +1,5 @@
-import { Button, Tabs, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Braces, Globe, Table } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -73,7 +74,7 @@ function DashboardSettings({
 		...(enablePublicDashboard ? [publicDashboardItem] : []),
 	];
 
-	return <Tabs items={items} animated className="settings-tabs" />;
+	return <Tabs items={items} className="settings-tabs" />;
 }
 
 export default DashboardSettings;

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/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx

@@ -1,4 +1,5 @@
-import { Button, Tabs, TabsProps } from 'antd';
+import { Button } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { CableCar, Group } from '@signozhq/icons';
@@ -22,7 +23,7 @@ function IntegrationDetailContent(
 ): JSX.Element {
 	const { activeDetailTab, integrationData, integrationId, setActiveDetailTab } =
 		props;
-	const items: TabsProps['items'] = [
+	const items: TabItemProps[] = [
 		{
 			key: 'overview',
 			label: (
@@ -81,11 +82,7 @@ function IntegrationDetailContent(
 	];
 	return (
 		<div className="integration-detail-container">
-			<Tabs
-				activeKey={activeDetailTab}
-				items={items}
-				onChange={setActiveDetailTab}
-			/>
+			<Tabs value={activeDetailTab} items={items} onChange={setActiveDetailTab} />
 		</div>
 	);
 }

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/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;
-}

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import { Tabs, TabsProps } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import { QueryParams } from 'constants/query';
 import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
@@ -24,7 +24,7 @@ function MetricsApplication(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
 
-	const items: TabsProps['items'] = [
+	const items: TabItemProps[] = [
 		{
 			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
 			key: MetricsApplicationTab.OVER_METRICS,
@@ -53,9 +53,8 @@ function MetricsApplication(): JSX.Element {
 			<ApDexApplication />
 			<Tabs
 				items={items}
-				activeKey={activeKey}
+				value={activeKey}
 				className="service-route-tab"
-				destroyInactiveTabPane
 				onChange={onTabChange}
 			/>
 		</div>

frontend/src/pages/Pipelines/index.tsx

@@ -2,8 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import * as Sentry from '@sentry/react';
-import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import getPipeline from 'api/pipeline/get';
 import Spinner from 'components/Spinner';
 import ChangeHistory from 'container/PipelinePage/Layouts/ChangeHistory';
@@ -46,7 +45,7 @@ function Pipelines(): JSX.Element {
 		refetchInterval: pipelineRefetchInterval,
 	});
 
-	const tabItems: TabsProps['items'] = useMemo(
+	const tabItems: TabItemProps[] = useMemo(
 		() => [
 			{
 				key: 'pipelines',
@@ -83,11 +82,7 @@ function Pipelines(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<Tabs
-				className="pipeline-tabs"
-				defaultActiveKey="pipelines"
-				items={tabItems}
-			/>
+			<Tabs className="pipeline-tabs" defaultValue="pipelines" items={tabItems} />
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -5,7 +5,8 @@ import {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
-import { Button, Tabs } from 'antd';
+import { Button } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import FlamegraphImg from 'assets/TraceDetail/Flamegraph';
 import cx from 'classnames';
 import TraceFlamegraph from 'container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph';
@@ -146,7 +147,7 @@ function TraceDetailsV2(): JSX.Element {
 					notFound={noData}
 				/>
 				{!noData ? (
-					<Tabs items={items} animated className="trace-visualisation-tabs" />
+					<Tabs items={items} className="trace-visualisation-tabs" />
 				) : (
 					<NoData />
 				)}

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import type { TabsProps } from 'antd';
+import type { TabItemProps } from '@signozhq/ui/tabs';
 import {
 	Alert,
 	Button,
@@ -14,8 +14,8 @@ import {
 	Row,
 	Skeleton,
 	Space,
-	Tabs,
 } from 'antd';
+import { Tabs } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -154,7 +154,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 				/>
 			));
 
-	const tabItems: TabsProps['items'] = [
+	const tabItems: TabItemProps[] = [
 		{
 			key: 'whyChooseSignoz',
 			label: t('whyChooseSignoz'),
@@ -398,8 +398,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 							<div className="workspace-locked__tabs">
 								<Tabs
 									items={tabItems}
-									defaultActiveKey="youAreInGoodCompany"
-									onTabClick={handleTabClick}
+									defaultValue="youAreInGoodCompany"
+									onChange={handleTabClick}
 								/>
 							</div>
 						</>