Merge branch 'main' into feat/export-table-integration

Same review cleanup as the foundation PR: frozen clock + delegation to getTimestampedFileName instead of a duplicated format regex.

.devenv/docker/clickhouse/compose.yaml

@@ -1,6 +1,6 @@
 services:
   init-clickhouse:
-    image: clickhouse/clickhouse-server:25.12.5
+    image: clickhouse/clickhouse-server:25.5.6
     container_name: init-clickhouse
     command:
       - bash
@@ -18,7 +18,7 @@ services:
     volumes:
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
-    image: clickhouse/clickhouse-server:25.12.5
+    image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
     volumes:
       - ${PWD}/fs/etc/clickhouse-server/config.d/config.xml:/etc/clickhouse-server/config.d/config.xml
@@ -67,7 +67,7 @@ services:
       timeout: 5s
       retries: 3
   telemetrystore-migrator:
-    image: signoz/signoz-otel-collector:v0.144.6
+    image: signoz/signoz-otel-collector:v0.142.0
     container_name: telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

.github/workflows/integrationci.yaml

@@ -60,17 +60,16 @@ jobs:
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl
-          - clickhousecluster
-          - metricreduction
         sqlstore-provider:
           - postgres
           - sqlite
         sqlite-mode:
           - wal
         clickhouse-version:
+          - 25.5.6
           - 25.12.5
         schema-migrator-version:
-          - v0.144.6
+          - v0.144.3
         postgres-version:
           - 15
     if: |

frontend/public/locales/en-GB/titles.json

@@ -63,6 +63,5 @@
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration",
-	"LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping"
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
 }

frontend/public/locales/en/titles.json

@@ -88,6 +88,5 @@
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration",
-	"LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping"
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
 }

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -1,4 +1,4 @@
-.timeseries-export-popover {
+.export-menu-popover {
 	width: 240px;
 	padding: 0 12px 12px 12px;
 

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -4,42 +4,43 @@ import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import { useClientExport } from 'hooks/useExportData/useClientExport';
+import {
+	ClientExportData,
+	useClientExport,
+} from 'hooks/useExportData/useClientExport';
 import { ExportFormat } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import './TimeseriesExportMenu.styles.scss';
+import './ExportMenu.styles.scss';
 
-interface TimeseriesExportMenuProps {
+interface ExportMenuProps {
 	dataSource: DataSource;
-	queryResponse: QueryRangeResponseV5;
+	// The queryRange response object the view holds — the hook picks the
+	// serializer (timeseries / table) from what it carries.
+	data: ClientExportData;
 	query?: Query;
 	yAxisUnit?: string;
-	legendMap?: Record<string, string>;
 	fileName?: string;
 }
 
-// Download menu for in-memory timeseries data (client-side serialization).
+// Download menu for in-memory query results (client-side serialization).
 // The raw/list backend export keeps its own menu in DownloadOptionsMenu.
-export default function TimeseriesExportMenu({
+export default function ExportMenu({
 	dataSource,
-	queryResponse,
+	data,
 	query,
 	yAxisUnit,
-	legendMap,
 	fileName,
-}: TimeseriesExportMenuProps): JSX.Element {
+}: ExportMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const { isExporting, handleExport: handleClientExport } = useClientExport({
-		response: queryResponse,
+		data,
 		query,
 		yAxisUnit,
-		legendMap,
 		fileName,
 	});
 
@@ -57,7 +58,7 @@ export default function TimeseriesExportMenu({
 						color="secondary"
 						size="icon"
 						aria-label="Download"
-						data-testid={`timeseries-export-${dataSource}`}
+						data-testid={`export-menu-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
@@ -65,7 +66,7 @@ export default function TimeseriesExportMenu({
 					</Button>
 				</PopoverTrigger>
 			</TooltipSimple>
-			<PopoverContent align="end" className="timeseries-export-popover">
+			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
 					<RadioGroup value={exportFormat} onChange={setExportFormat}>

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

@@ -1,8 +1,8 @@
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { fireEvent, render, screen } from 'tests/test-utils';
-import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import TimeseriesExportMenu from '../TimeseriesExportMenu';
+import ExportMenu from '../ExportMenu';
 
 const mockHandleExport = jest.fn();
 let mockIsExporting = false;
@@ -14,25 +14,26 @@ jest.mock('hooks/useExportData/useClientExport', () => ({
 	}),
 }));
 
-const response = {
-	type: 'time_series',
-	data: { results: [] },
-	meta: {},
-} as unknown as QueryRangeResponseV5;
+const data = {
+	statusCode: 200,
+	error: null,
+	message: '',
+	payload: { data: { result: [], resultType: 'time_series' } },
+} as unknown as MetricQueryRangeSuccessResponse;
 
-const TEST_ID = `timeseries-export-${DataSource.LOGS}`;
+const TEST_ID = `export-menu-${DataSource.LOGS}`;
 
 function renderMenu(): void {
 	render(
-		<TimeseriesExportMenu
+		<ExportMenu
 			dataSource={DataSource.LOGS}
-			queryResponse={response}
+			data={data}
 			fileName="logs-timeseries"
 		/>,
 	);
 }
 
-describe('TimeseriesExportMenu', () => {
+describe('ExportMenu', () => {
 	beforeEach(() => {
 		mockHandleExport.mockReset();
 		mockIsExporting = false;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -53,7 +53,6 @@ import {
 	defaultTraceSelectedColumns,
 } from 'container/OptionsMenu/constants';
 import { OptionsQuery } from 'container/OptionsMenu/types';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
@@ -67,6 +66,7 @@ import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMapp
 import { cloneDeep, isEqual, omit } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { FormattingOptions } from 'providers/preferences/types';
+import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -1031,19 +1031,26 @@ function ExplorerOptions({
 					/>
 				</div>
 			</Modal>
-			<ExportPanelContainer
+			<Modal
+				footer={null}
+				onOk={onCancel(false)}
+				onCancel={onCancel(false)}
 				open={isExport}
-				onClose={onCancel(false)}
-				query={isOneChartPerQuery ? queryToExport : query}
-				isLoading={isLoading}
-				onExport={(dashboard, isNewDashboard): void => {
-					if (isOneChartPerQuery && queryToExport) {
-						onExport(dashboard, isNewDashboard, queryToExport);
-					} else {
-						onExport(dashboard, isNewDashboard);
-					}
-				}}
-			/>
+				centered
+				destroyOnClose
+			>
+				<ExportPanelContainer
+					query={isOneChartPerQuery ? queryToExport : query}
+					isLoading={isLoading}
+					onExport={(dashboard, isNewDashboard): void => {
+						if (isOneChartPerQuery && queryToExport) {
+							onExport(dashboard, isNewDashboard, queryToExport);
+						} else {
+							onExport(dashboard, isNewDashboard);
+						}
+					}}
+				/>
+			</Modal>
 		</div>
 	);
 }
@@ -1051,7 +1058,7 @@ function ExplorerOptions({
 export interface ExplorerOptionsProps {
 	isLoading?: boolean;
 	onExport: (
-		dashboard: ExportDashboard | null,
+		dashboard: Dashboard | null,
 		isNewDashboard?: boolean,
 		queryToExport?: Query,
 	) => void;

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -1,7 +1,6 @@
 import { useHistory } from 'react-router-dom';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableData';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -81,7 +80,7 @@ const renderExplorerOptionWrapper = (
 		isLoading: false,
 		onExport: jest.fn() as jest.MockedFunction<
 			(
-				dashboard: ExportDashboard | null,
+				dashboard: Dashboard | null,
 				isNewDashboard?: boolean,
 				queryToExport?: Query,
 			) => void
@@ -151,7 +150,7 @@ describe('ExplorerOptionWrapper', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const testOnExport = jest.fn() as jest.MockedFunction<
 				(
-					dashboard: ExportDashboard | null,
+					dashboard: Dashboard | null,
 					isNewDashboard?: boolean,
 					queryToExport?: Query,
 				) => void
@@ -180,16 +179,15 @@ describe('ExplorerOptionWrapper', () => {
 				expect(screen.getByRole('dialog')).toBeInTheDocument();
 			});
 
-			// Click the "New dashboard" button
-			const newDashboardButton = screen.getByTestId('export-panel-new-dashboard');
+			// Click the "New Dashboard" button
+			const newDashboardButton = screen.getByRole('button', {
+				name: /new dashboard/i,
+			});
 			await user.click(newDashboardButton);
 
 			// Wait for the API call to complete and onExport to be called
 			await waitFor(() => {
-				expect(testOnExport).toHaveBeenCalledWith(
-					{ id: NEW_DASHBOARD_ID, title: TEST_DASHBOARD_TITLE },
-					true,
-				);
+				expect(testOnExport).toHaveBeenCalledWith(mockNewDashboard, true);
 			});
 		});
 
@@ -197,7 +195,7 @@ describe('ExplorerOptionWrapper', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const testOnExport = jest.fn() as jest.MockedFunction<
 				(
-					dashboard: ExportDashboard | null,
+					dashboard: Dashboard | null,
 					isNewDashboard?: boolean,
 					queryToExport?: Query,
 				) => void
@@ -231,12 +229,13 @@ describe('ExplorerOptionWrapper', () => {
 				expect(screen.getByRole('dialog')).toBeInTheDocument();
 			});
 
-			// Wait for the dashboard select dropdown to render inside the dialog
-			const modal = screen.getByRole('dialog');
+			// Wait for dashboards to load and then click on the dashboard select dropdown
 			await waitFor(() => {
-				expect(modal.querySelector('[role="combobox"]')).toBeTruthy();
+				expect(screen.getByText('Select Dashboard')).toBeInTheDocument();
 			});
 
+			// Get the modal and find the dashboard select dropdown within it
+			const modal = screen.getByRole('dialog');
 			const dashboardSelect = modal.querySelector(
 				'[role="combobox"]',
 			) as HTMLElement;
@@ -252,21 +251,19 @@ describe('ExplorerOptionWrapper', () => {
 			const dashboardOption = screen.getByText(mockDashboard1.data.title);
 			await user.click(dashboardOption);
 
-			// Wait for the selection to be made and the export button to be enabled
+			// Wait for the selection to be made and the Export button to be enabled
 			await waitFor(() => {
-				expect(screen.getByTestId('export-panel-export')).not.toBeDisabled();
+				const exportButton = screen.getByRole('button', { name: /export/i });
+				expect(exportButton).not.toBeDisabled();
 			});
 
-			// Click the export button
-			const exportButton = screen.getByTestId('export-panel-export');
+			// Click the Export button
+			const exportButton = screen.getByRole('button', { name: /export/i });
 			await user.click(exportButton);
 
 			// Wait for onExport to be called with the selected dashboard
 			await waitFor(() => {
-				expect(testOnExport).toHaveBeenCalledWith(
-					{ id: 'dashboard-1', title: 'Dashboard 1' },
-					false,
-				);
+				expect(testOnExport).toHaveBeenCalledWith(mockDashboard1, false);
 			});
 		});
 
@@ -287,7 +284,7 @@ describe('ExplorerOptionWrapper', () => {
 
 			// Create a real handleExport function similar to LogsExplorerViews
 			// This should NOT call useUpdateDashboard (as per PR #8029)
-			const handleExport = (dashboard: ExportDashboard | null): void => {
+			const handleExport = (dashboard: Dashboard | null): void => {
 				if (!dashboard) {
 					return;
 				}
@@ -329,12 +326,13 @@ describe('ExplorerOptionWrapper', () => {
 				expect(screen.getByRole('dialog')).toBeInTheDocument();
 			});
 
-			// Wait for the dashboard select dropdown to render inside the dialog
-			const modal = screen.getByRole('dialog');
+			// Wait for dashboards to load and then click on the dashboard select dropdown
 			await waitFor(() => {
-				expect(modal.querySelector('[role="combobox"]')).toBeTruthy();
+				expect(screen.getByText('Select Dashboard')).toBeInTheDocument();
 			});
 
+			// Get the modal and find the dashboard select dropdown within it
+			const modal = screen.getByRole('dialog');
 			const dashboardSelect = modal.querySelector(
 				'[role="combobox"]',
 			) as HTMLElement;
@@ -350,13 +348,14 @@ describe('ExplorerOptionWrapper', () => {
 			const dashboardOption = screen.getByText(mockDashboard.data.title);
 			await user.click(dashboardOption);
 
-			// Wait for the selection to be made and the export button to be enabled
+			// Wait for the selection to be made and the Export button to be enabled
 			await waitFor(() => {
-				expect(screen.getByTestId('export-panel-export')).not.toBeDisabled();
+				const exportButton = screen.getByRole('button', { name: /export/i });
+				expect(exportButton).not.toBeDisabled();
 			});
 
-			// Click the export button
-			const exportButton = screen.getByTestId('export-panel-export');
+			// Click the Export button
+			const exportButton = screen.getByRole('button', { name: /export/i });
 			await user.click(exportButton);
 
 			// Wait for the handleExport function to be called and navigation to occur
@@ -376,7 +375,7 @@ describe('ExplorerOptionWrapper', () => {
 		it('should not show export buttons when component is disabled', () => {
 			const testOnExport = jest.fn() as jest.MockedFunction<
 				(
-					dashboard: ExportDashboard | null,
+					dashboard: Dashboard | null,
 					isNewDashboard?: boolean,
 					queryToExport?: Query,
 				) => void

frontend/src/container/ExportPanel/ExportDashboardSelect.tsx

@@ -1,74 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line signoz/no-antd-components
-import { Select, SelectProps } from 'antd';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
-
-import { getSelectOptions } from './utils';
-import styles from './ExportPanel.module.scss';
-
-interface ExportDashboardSelectProps {
-	dashboards: ExportDashboard[];
-	value: string | null;
-	/** The picked dashboard, pinned as an option so its label survives a later search. */
-	selectedDashboard: ExportDashboard | null;
-	loading?: boolean;
-	disabled?: boolean;
-	onChange: (dashboardId: string) => void;
-	onSearch: (search: string) => void;
-}
-
-/**
- * Dashboard picker for the "Add to dashboard" dialog. Server-side search (`filterOption`
- * off, typing via `onSearch`); the selected dashboard is pinned as an option so its label
- * survives a narrowing search, and `getPopupContainer` keeps the overlay from clipping the
- * dropdown.
- */
-function ExportDashboardSelect({
-	dashboards,
-	value,
-	selectedDashboard,
-	loading,
-	disabled,
-	onChange,
-	onSearch,
-}: ExportDashboardSelectProps): JSX.Element {
-	const options = useMemo<SelectProps['options']>(() => {
-		const base = getSelectOptions(dashboards) ?? [];
-		if (
-			selectedDashboard &&
-			!base.some((option) => option.value === selectedDashboard.id)
-		) {
-			return [
-				{ label: selectedDashboard.title, value: selectedDashboard.id },
-				...base,
-			];
-		}
-		return base;
-	}, [dashboards, selectedDashboard]);
-
-	return (
-		<Select
-			className={styles.dashboardSelect}
-			placeholder="Select a dashboard"
-			showSearch
-			filterOption={false}
-			loading={loading}
-			disabled={disabled}
-			value={value}
-			onChange={onChange}
-			onSearch={onSearch}
-			data-testid="export-dashboard-select"
-			options={options}
-			getPopupContainer={(trigger): HTMLElement =>
-				trigger.parentElement ?? document.body
-			}
-		/>
-	);
-}
-
-ExportDashboardSelect.defaultProps = {
-	loading: false,
-	disabled: false,
-};
-
-export default ExportDashboardSelect;

frontend/src/container/ExportPanel/ExportPanel.module.scss

@@ -1,42 +0,0 @@
-.body {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-}
-
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-}
-
-.label {
-	font-size: 12px;
-	color: var(--l2-foreground);
-}
-
-.dashboardSelect {
-	width: 100%;
-}
-
-.newDashboard {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding-top: 16px;
-	border-top: 1px solid var(--l2-border);
-}
-
-.hint {
-	font-size: 13px;
-	color: var(--l2-foreground);
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 8px;
-	width: 100%;
-}

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

@@ -1,159 +1,127 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DialogWrapper } from '@signozhq/ui/dialog';
+import { useMutation } from 'react-query';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { useCreateExportDashboard } from 'hooks/dashboard/useCreateExportDashboard';
+import createDashboard from 'api/v1/dashboards/create';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { ExportPanelProps } from '.';
 import {
-	ExportDashboard,
-	useExportDashboards,
-} from 'hooks/dashboard/useExportDashboards';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+	DashboardSelect,
+	NewDashboardButton,
+	SelectWrapper,
+	Title,
+	Wrapper,
+} from './styles';
+import { filterOptions, getSelectOptions } from './utils';
 
-import ExportDashboardSelect from './ExportDashboardSelect';
-import styles from './ExportPanel.module.scss';
-
-export interface ExportPanelProps {
-	isLoading?: boolean;
-	onExport: (
-		dashboard: ExportDashboard | null,
-		isNewDashboard?: boolean,
-	) => void;
-	query: Query | null;
-	/** Controlled open state of the dialog. */
-	open: boolean;
-	/** Called when the dialog requests to close (Cancel / overlay / Esc). */
-	onClose: () => void;
-}
-
-/**
- * "Add to dashboard" dialog: export the panel into an existing dashboard or a newly
- * created one. Navigation is the caller's job via `onExport` (flag-aware V1/V2 editor).
- */
 function ExportPanelContainer({
 	isLoading,
 	onExport,
-	open,
-	onClose,
 }: ExportPanelProps): JSX.Element {
 	const { t } = useTranslation(['dashboard']);
 
-	// Track the object, not just the id, so export survives a search that narrows it out.
-	const [selectedDashboard, setSelectedDashboard] =
-		useState<ExportDashboard | null>(null);
-	const [searchText, setSearchText] = useState('');
+	const [dashboardId, setDashboardId] = useState<string | null>(null);
 
 	const {
-		dashboards,
+		data,
 		isLoading: isAllDashboardsLoading,
-		isFetching: isDashboardsFetching,
-	} = useExportDashboards(searchText);
+		refetch,
+	} = useGetAllDashboard();
 
-	const { create: createNewDashboard, isLoading: createDashboardLoading } =
-		useCreateExportDashboard({
-			title: t('new_dashboard_title', { ns: 'dashboard' }),
-			onCreated: (dashboard) => onExport(dashboard, true),
+	const { showErrorModal } = useErrorModal();
+
+	const { mutate: createNewDashboard, isLoading: createDashboardLoading } =
+		useMutation(createDashboard, {
+			onSuccess: (data) => {
+				if (data.data) {
+					onExport(data?.data, true);
+				}
+				refetch();
+			},
+			onError: (error) => {
+				showErrorModal(error as APIError);
+			},
 		});
 
-	// Reset on close so each open starts fresh (the dialog stays mounted).
-	useEffect(() => {
-		if (!open) {
-			setSelectedDashboard(null);
-			setSearchText('');
-		}
-	}, [open]);
-
-	const handleSelect = useCallback(
-		(dashboardId: string): void => {
-			setSelectedDashboard(
-				dashboards.find(({ id }) => id === dashboardId) ?? null,
-			);
-		},
-		[dashboards],
-	);
+	const options = useMemo(() => getSelectOptions(data?.data || []), [data]);
 
 	const handleExportClick = useCallback((): void => {
-		onExport(selectedDashboard, false);
-	}, [selectedDashboard, onExport]);
+		const currentSelectedDashboard = data?.data?.find(
+			({ id }) => id === dashboardId,
+		);
 
-	const isExportDisabled =
-		isAllDashboardsLoading || !selectedDashboard || isLoading;
+		onExport(currentSelectedDashboard || null, false);
+	}, [data, dashboardId, onExport]);
+
+	const handleSelect = useCallback(
+		(selectedDashboardId: string): void => {
+			setDashboardId(selectedDashboardId);
+		},
+		[setDashboardId],
+	);
+
+	const handleNewDashboard = useCallback(async () => {
+		try {
+			await createNewDashboard({
+				title: t('new_dashboard_title', {
+					ns: 'dashboard',
+				}),
+				uploadedGrafana: false,
+				version: ENTITY_VERSION_V5,
+			});
+		} catch (error) {
+			showErrorModal(error as APIError);
+		}
+	}, [createNewDashboard, t, showErrorModal]);
+
+	const isDashboardLoading = isAllDashboardsLoading || createDashboardLoading;
+
+	const isDisabled =
+		isAllDashboardsLoading || !options?.length || !dashboardId || isLoading;
 
 	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title="Add to dashboard"
-			testId="export-panel-dialog"
-			footer={
-				<div className={styles.footer}>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						onClick={onClose}
-						testId="export-panel-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						color="primary"
-						size="md"
-						loading={isLoading}
-						disabled={isExportDisabled}
-						onClick={handleExportClick}
-						testId="export-panel-export"
-					>
-						Add to dashboard
-					</Button>
-				</div>
-			}
-		>
-			<div className={styles.body}>
-				<div className={styles.field}>
-					<Typography.Text className={styles.label}>
-						Select a dashboard
-					</Typography.Text>
-					<ExportDashboardSelect
-						dashboards={dashboards}
-						value={selectedDashboard?.id ?? null}
-						selectedDashboard={selectedDashboard}
-						loading={isDashboardsFetching}
-						disabled={isAllDashboardsLoading || createDashboardLoading}
-						onChange={handleSelect}
-						onSearch={setSearchText}
-					/>
-				</div>
+		<Wrapper direction="vertical">
+			<Title>Export Panel</Title>
 
-				<div className={styles.newDashboard}>
-					<Typography.Text className={styles.hint}>
-						Or create a new dashboard with this panel
-					</Typography.Text>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="md"
-						prefix={<Plus size={14} />}
-						loading={createDashboardLoading}
-						disabled={createDashboardLoading}
-						onClick={createNewDashboard}
-						testId="export-panel-new-dashboard"
-					>
-						New dashboard
-					</Button>
-				</div>
-			</div>
-		</DialogWrapper>
+			<SelectWrapper direction="horizontal">
+				<DashboardSelect
+					placeholder="Select Dashboard"
+					options={options}
+					showSearch
+					loading={isDashboardLoading}
+					disabled={isDashboardLoading}
+					value={dashboardId}
+					onSelect={handleSelect}
+					filterOption={filterOptions}
+				/>
+				<Button
+					type="primary"
+					loading={isLoading}
+					disabled={isDisabled}
+					onClick={handleExportClick}
+				>
+					Export
+				</Button>
+			</SelectWrapper>
+
+			<Typography>
+				Or create dashboard with this panel -
+				<NewDashboardButton
+					disabled={createDashboardLoading}
+					loading={createDashboardLoading}
+					type="link"
+					onClick={handleNewDashboard}
+				>
+					New Dashboard
+				</NewDashboardButton>
+			</Typography>
+		</Wrapper>
 	);
 }
 
-ExportPanelContainer.defaultProps = {
-	isLoading: false,
-};
-
 export default ExportPanelContainer;

frontend/src/container/ExportPanel/index.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useState } from 'react';
+import { Modal } from 'antd';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import ExportPanelContainer from './ExportPanelContainer';
+
+function ExportPanel({
+	isLoading,
+	onExport,
+	query,
+}: ExportPanelProps): JSX.Element {
+	const [isExport, setIsExport] = useState<boolean>(false);
+
+	const onModalToggle = useCallback((value: boolean) => {
+		setIsExport(value);
+	}, []);
+
+	const onCancel = (value: boolean) => (): void => {
+		onModalToggle(value);
+	};
+
+	return (
+		<Modal
+			footer={null}
+			onOk={onCancel(false)}
+			onCancel={onCancel(false)}
+			open={isExport}
+			centered
+			destroyOnClose
+		>
+			<ExportPanelContainer
+				query={query}
+				isLoading={isLoading}
+				onExport={onExport}
+			/>
+		</Modal>
+	);
+}
+
+export interface ExportPanelProps {
+	isLoading?: boolean;
+	onExport: (dashboard: Dashboard | null, isNewDashboard?: boolean) => void;
+	query: Query | null;
+}
+
+ExportPanel.defaultProps = { isLoading: false };
+
+export default ExportPanel;

frontend/src/container/ExportPanel/styles.ts

@@ -0,0 +1,34 @@
+import { FunctionComponent } from 'react';
+import { Button, Select, SelectProps, Space } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+export const DashboardSelect: FunctionComponent<SelectProps> = styled(
+	Select,
+)<SelectProps>`
+	width: 100%;
+`;
+
+export const SelectWrapper = styled(Space)`
+	width: 100%;
+	margin-bottom: 1rem;
+
+	.ant-space-item:first-child {
+		width: 100%;
+		max-width: 20rem;
+	}
+`;
+
+export const Wrapper = styled(Space)`
+	width: 100%;
+`;
+
+export const NewDashboardButton = styled(Button)`
+	&&& {
+		padding: 0 0.125rem;
+	}
+`;
+
+export const Title = styled(Typography.Text)`
+	font-size: 1rem;
+`;

frontend/src/container/ExportPanel/utils.ts

@@ -1,10 +1,16 @@
 import { SelectProps } from 'antd';
-import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
+import { Dashboard } from 'types/api/dashboard/getAll';
 
-export const getSelectOptions = (
-	data: ExportDashboard[],
-): SelectProps['options'] =>
-	data.map(({ id, title }) => ({
-		label: title,
+export const getSelectOptions = (data: Dashboard[]): SelectProps['options'] =>
+	data.map(({ id, data }) => ({
+		label: data.title,
 		value: id,
 	}));
+
+export const filterOptions: SelectProps['filterOption'] = (
+	input,
+	options,
+): boolean =>
+	(options?.label?.toString() ?? '')
+		?.toLowerCase()
+		.includes(input.toLowerCase());

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -1,17 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { listHosts } from 'api/generated/services/inframonitoring';
 import {
 	InframonitoringtypesHostRecordDTO,
 	InframonitoringtypesHostStatusDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
-	RenderErrorResponseDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
-import APIError from 'types/api/error';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
@@ -126,12 +122,13 @@ function Hosts(): JSX.Element {
 					endTimeBeforeRetention: data.endTimeBeforeRetention,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch hosts';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesHostRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -144,7 +141,7 @@ function Hosts(): JSX.Element {
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesHostRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listHosts(
@@ -162,10 +159,11 @@ function Hosts(): JSX.Element {
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch host';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringHostsV2/utils.tsx

@@ -11,6 +11,8 @@ import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/const
 import { CellValueTooltip } from 'container/InfraMonitoringK8sV2/components';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
+import TanStackTable from 'components/TanStackTableView';
+
 const HOSTNAME_DOCS_URL =
 	'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#host-name-is-blankempty';
 
@@ -21,7 +23,11 @@ export function HostnameCell({
 }): React.ReactElement {
 	const isEmpty = !hostName || !hostName.trim();
 	if (!isEmpty) {
-		return <CellValueTooltip value={hostName} />;
+		return (
+			<CellValueTooltip value={hostName}>
+				<TanStackTable.Text>{hostName}</TanStackTable.Text>
+			</CellValueTooltip>
+		);
 	}
 	return (
 		<>

frontend/src/container/InfraMonitoringK8sV2/Base/ColumnHeader.module.scss

@@ -11,6 +11,6 @@
 }
 
 .columnHeaderLabel {
-	text-align: left;
+	text-align: center;
 	padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) 0px;
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -12,8 +12,6 @@ import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import APIError from 'types/api/error';
 import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
@@ -86,23 +84,6 @@ export interface K8sDetailsFilters {
 	end: number;
 }
 
-export interface CustomTabRenderProps<T> {
-	entity: T;
-	timeRange: { startTime: number; endTime: number };
-	selectedInterval: Time;
-	handleTimeChange: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-export interface CustomTab<T> {
-	key: string;
-	label: string;
-	icon: React.ReactNode;
-	render: (props: CustomTabRenderProps<T>) => React.ReactNode;
-}
-
 export interface K8sBaseDetailsProps<T> {
 	category: InfraMonitoringEntity;
 	eventCategory: string;
@@ -111,7 +92,7 @@ export interface K8sBaseDetailsProps<T> {
 	fetchEntityData: (
 		filters: K8sDetailsFilters,
 		signal?: AbortSignal,
-	) => Promise<{ data: T | null; error?: APIError | null }>;
+	) => Promise<{ data: T | null; error?: string | null }>;
 	// Entity configuration
 	getEntityName: (entity: T) => string;
 	getInitialLogTracesExpression: (entity: T) => string;
@@ -139,7 +120,20 @@ export interface K8sBaseDetailsProps<T> {
 		showTraces?: boolean;
 		showEvents?: boolean;
 	};
-	customTabs?: Array<CustomTab<T>>;
+	customTabs?: Array<{
+		key: string;
+		label: string;
+		icon: React.ReactNode;
+		render: (props: {
+			entity: T;
+			timeRange: { startTime: number; endTime: number };
+			selectedInterval: Time;
+			handleTimeChange: (
+				interval: Time | CustomTimeType,
+				dateTimeRange?: [number, number],
+			) => void;
+		}) => React.ReactNode;
+	}>;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -275,33 +269,6 @@ export default function K8sBaseDetails<T>({
 	const [selectedView, setSelectedView] = useInfraMonitoringView();
 	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
 
-	const validTabs = useMemo(() => {
-		const tabs: string[] = [];
-		if (tabVisibility.showMetrics) {
-			tabs.push(VIEW_TYPES.METRICS);
-		}
-		if (tabVisibility.showLogs) {
-			tabs.push(VIEW_TYPES.LOGS);
-		}
-		if (tabVisibility.showTraces) {
-			tabs.push(VIEW_TYPES.TRACES);
-		}
-		if (tabVisibility.showEvents) {
-			tabs.push(VIEW_TYPES.EVENTS);
-		}
-		if (customTabs) {
-			tabs.push(...customTabs.map((t) => t.key));
-		}
-		return tabs;
-	}, [tabVisibility, customTabs]);
-
-	useEffect(() => {
-		if (!hideDetailViewTabs && !validTabs.includes(selectedView)) {
-			const firstValid = validTabs[0] || VIEW_TYPES.METRICS;
-			void setSelectedView(firstValid);
-		}
-	}, [hideDetailViewTabs, selectedView, validTabs, setSelectedView]);
-
 	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
 	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
 	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
@@ -337,10 +304,7 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [getMinMaxTime, selectedTime]);
 
-	const handleTabChange = (value: string | null): void => {
-		if (!value) {
-			return;
-		}
+	const handleTabChange = (value: string): void => {
 		setSelectedView(value);
 		setLogFiltersParam(null);
 		setTracesFiltersParam(null);
@@ -483,18 +447,12 @@ export default function K8sBaseDetails<T>({
 			{isEntityLoading && <LoadingContainer />}
 			{(isEntityError || hasResponseError) && (
 				<div className="entity-error-container">
-					<ErrorContent
-						error={
-							entityResponse?.error ??
-							(entityError instanceof APIError ? entityError : null) ?? {
-								code: 500,
-								message:
-									entityError instanceof Error
-										? entityError.message
-										: 'Failed to load entity details',
-							}
-						}
-					/>
+					<Typography.Text color="danger">
+						{entityResponse?.error ||
+							(entityError instanceof Error
+								? entityError.message
+								: 'Failed to load entity details')}
+					</Typography.Text>
 				</div>
 			)}
 			{entity && !isEntityLoading && !hasResponseError && (

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -14,7 +14,6 @@ import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Querybuildertypesv5QueryWarnDataDTO } from 'api/generated/services/sigNoz.schemas';
 import { openInNewTab } from 'utils/navigation';
-import APIError from 'types/api/error';
 
 import {
 	INFRA_MONITORING_K8S_PARAMS_KEYS,
@@ -34,14 +33,13 @@ import K8sHeader from './K8sHeader';
 import { K8sPaginationWarning } from './K8sPaginationWarning';
 import { K8sBaseFilters } from './types';
 import { getGroupedByMeta } from './utils';
-import { K8sInstrumentationChecksCallout } from './components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout';
 
 import styles from './K8sBaseList.module.scss';
 import cx from 'classnames';
 
 export type K8sBaseListEmptyStateContext = {
 	isError: boolean;
-	error?: APIError | null;
+	error?: string | null;
 	totalCount: number;
 	hasFilters: boolean;
 	isLoading: boolean;
@@ -68,7 +66,7 @@ export type K8sBaseListProps<
 		records?: T[];
 		data?: T[];
 		total: number;
-		error?: APIError | null;
+		error?: string | null;
 		rawData?: unknown;
 		endTimeBeforeRetention?: boolean;
 		warning?: Querybuildertypesv5QueryWarnDataDTO | null;
@@ -379,8 +377,6 @@ export function K8sBaseList<
 				cancelQuery={cancelQuery}
 			/>
 			<div ref={containerRef} className={styles.tableContainer}>
-				<K8sInstrumentationChecksCallout entity={entity} />
-
 				{isError && (
 					<Typography>
 						{data?.error?.toString() || 'Something went wrong'}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sEmptyState.module.scss

@@ -44,11 +44,13 @@
 	width: 32px;
 }
 
-.errorContent {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--spacing-3);
-	max-width: 500px;
-	padding: 24px;
+.errorIcon {
+	color: var(--danger-background);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 16px;
 }

frontend/src/container/InfraMonitoringK8sV2/Base/K8sEmptyState.tsx

@@ -1,4 +1,8 @@
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { useCallback } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import history from 'lib/history';
+import { LifeBuoy, TriangleAlert } from '@signozhq/icons';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
@@ -9,12 +13,26 @@ import styles from './K8sEmptyState.module.scss';
 
 type K8sEmptyStateProps = Partial<K8sBaseListEmptyStateContext>;
 
+const handleContactSupport = (isCloudUser: boolean): void => {
+	if (isCloudUser) {
+		history.push('/support');
+	} else {
+		window.open('https://signoz.io/slack', '_blank');
+	}
+};
+
 export function K8sEmptyState({
 	isError,
 	error,
 	isLoading,
 	endTimeBeforeRetention,
 }: K8sEmptyStateProps): JSX.Element | null {
+	const { isCloudUser } = useGetTenantLicense();
+
+	const handleSupport = useCallback(() => {
+		handleContactSupport(isCloudUser);
+	}, [isCloudUser]);
+
 	if (isLoading) {
 		return null;
 	}
@@ -22,15 +40,25 @@ export function K8sEmptyState({
 	if (isError || error) {
 		return (
 			<div className={styles.container}>
-				<div className={styles.errorContent}>
-					<ErrorContent
-						error={
-							error ?? {
-								code: 500,
-								message: 'An error occurred while fetching data.',
-							}
-						}
-					/>
+				<div className={styles.content}>
+					<TriangleAlert size={32} className={styles.errorIcon} />
+					<span className={styles.message}>
+						{error || 'An error occurred while fetching data.'}
+					</span>
+					<p>
+						Our team is getting on top to resolve this. Please reach out to support if
+						the issue persists.
+					</p>
+					<div className={styles.actions}>
+						<Button
+							onClick={handleSupport}
+							variant="solid"
+							color="secondary"
+							prefix={<LifeBuoy size={14} />}
+						>
+							Contact Support
+						</Button>
+					</div>
 				</div>
 			</div>
 		);

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -4,7 +4,6 @@ import { useLocation } from 'react-router-dom';
 import { Querybuildertypesv5QueryWarnDataDTO } from 'api/generated/services/sigNoz.schemas';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import APIError from 'types/api/error';
 import TanStackTable, {
 	SortState,
 	TableColumnDef,
@@ -52,7 +51,7 @@ export type K8sExpandedRowProps<T, TItemKey = string> = {
 		records?: T[];
 		data?: T[];
 		total: number;
-		error?: APIError | null;
+		error?: string | null;
 		rawData?: unknown;
 		warning?: Querybuildertypesv5QueryWarnDataDTO | null;
 	}>;

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseDetails.tabValidation.test.tsx

@@ -1,221 +0,0 @@
-import { Box } from '@signozhq/icons';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { act, render, waitFor } from 'tests/test-utils';
-
-import {
-	InfraMonitoringEntity,
-	INFRA_MONITORING_K8S_PARAMS_KEYS,
-	VIEW_TYPES,
-} from '../../constants';
-import K8sBaseDetails from '../K8sBaseDetails';
-
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="mock-datetime" />,
-}));
-
-type TestEntity = {
-	name: string;
-	namespace: string;
-	cluster: string;
-};
-
-const mockEntity: TestEntity = {
-	name: 'test-pod',
-	namespace: 'default',
-	cluster: 'test-cluster',
-};
-
-function createBaseProps() {
-	return {
-		category: InfraMonitoringEntity.PODS,
-		eventCategory: 'Pod',
-		getSelectedItemExpression: (): string => 'k8s.pod.name = "test-pod"',
-		fetchEntityData: jest
-			.fn()
-			.mockResolvedValue({ data: mockEntity, error: null }),
-		getEntityName: (e: TestEntity): string => e.name,
-		getInitialLogTracesExpression: (): string => 'k8s.pod.name = "test-pod"',
-		getInitialEventsExpression: (): string => 'k8s.pod.name = "test-pod"',
-		metadataConfig: [
-			{ label: 'Name', getValue: (e: TestEntity): string => e.name },
-		],
-		entityWidgetInfo: [{ title: 'CPU', yAxisUnit: 'percent' }],
-		getEntityQueryPayload: jest.fn().mockReturnValue([]),
-		queryKeyPrefix: 'testPod',
-	};
-}
-
-interface RenderOptions {
-	view?: string;
-	tabsConfig?: {
-		showMetrics?: boolean;
-		showLogs?: boolean;
-		showTraces?: boolean;
-		showEvents?: boolean;
-	};
-	customTabs?: Array<{
-		key: string;
-		label: string;
-		icon: React.ReactNode;
-		render: () => React.ReactNode;
-	}>;
-}
-
-function renderK8sBaseDetails({
-	view = VIEW_TYPES.METRICS,
-	tabsConfig,
-	customTabs,
-}: RenderOptions = {}) {
-	const searchParams: Record<string, string> = {
-		[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: 'test-pod',
-		[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
-	};
-
-	return render(
-		<NuqsTestingAdapter searchParams={searchParams}>
-			<K8sBaseDetails<TestEntity>
-				{...createBaseProps()}
-				tabsConfig={tabsConfig}
-				customTabs={customTabs}
-			/>
-		</NuqsTestingAdapter>,
-	);
-}
-
-function getSelectedTabText(): string | null {
-	const selectedTab = document.querySelector('[aria-checked="true"]');
-	return selectedTab?.textContent ?? null;
-}
-
-describe('K8sBaseDetails - Tab Validation', () => {
-	it('should reset view to METRICS when selected view is invalid', async () => {
-		act(() => {
-			renderK8sBaseDetails({ view: 'invalid-tab' });
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Metrics');
-		});
-	});
-
-	it('should reset to first available tab when METRICS is disabled and view is invalid', async () => {
-		act(() => {
-			renderK8sBaseDetails({
-				view: 'invalid-tab',
-				tabsConfig: { showMetrics: false },
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Logs');
-		});
-	});
-
-	it('should reset to custom tab when all standard tabs disabled and custom tab exists', async () => {
-		const customTabKey = 'pod-metrics';
-
-		act(() => {
-			renderK8sBaseDetails({
-				view: 'invalid-tab',
-				tabsConfig: {
-					showMetrics: false,
-					showLogs: false,
-					showTraces: false,
-					showEvents: false,
-				},
-				customTabs: [
-					{
-						key: customTabKey,
-						label: 'Pod Metrics',
-						icon: <Box size={14} />,
-						render: (): React.ReactNode => <div>Custom Tab</div>,
-					},
-				],
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Pod Metrics');
-		});
-	});
-
-	it('should NOT reset view when selected view is valid', async () => {
-		act(() => {
-			renderK8sBaseDetails({ view: VIEW_TYPES.LOGS });
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Logs');
-		});
-	});
-
-	it('should NOT reset view when custom tab is selected and exists', async () => {
-		const customTabKey = 'pod-metrics';
-
-		act(() => {
-			renderK8sBaseDetails({
-				view: customTabKey,
-				customTabs: [
-					{
-						key: customTabKey,
-						label: 'Pod Metrics',
-						icon: <Box size={14} />,
-						render: (): React.ReactNode => <div>Custom Tab</div>,
-					},
-				],
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Pod Metrics');
-		});
-	});
-
-	it('should keep the selected tab when the active tab is clicked again (untoggle guard)', async () => {
-		const user = userEvent.setup();
-
-		act(() => {
-			renderK8sBaseDetails({ view: VIEW_TYPES.LOGS });
-		});
-
-		await waitFor(() => {
-			expect(screen.getAllByText('test-pod').length).toBeGreaterThan(0);
-		});
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Logs');
-		});
-
-		const selectedTab = document.querySelector('[aria-checked="true"]');
-		expect(selectedTab).not.toBeNull();
-
-		await user.click(selectedTab as Element);
-
-		await waitFor(() => {
-			expect(getSelectedTabText()).toContain('Logs');
-		});
-	});
-});

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -9,8 +9,6 @@ import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { InfraMonitoringEvents } from 'constants/events';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
 import {
 	NuqsTestingAdapter,
 	OnUrlUpdateFunction,
@@ -19,7 +17,6 @@ import {
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
-import APIError from 'types/api/error';
 import { openInNewTab } from 'utils/navigation';
 
 import { TableColumnDef } from 'components/TanStackTableView';
@@ -633,15 +630,7 @@ describe('K8sBaseList', () => {
 			fetchListDataMock.mockResolvedValue({
 				data: [],
 				total: 0,
-				error: new APIError({
-					httpStatusCode: 500,
-					error: {
-						code: '500',
-						message: 'Failed to fetch pods',
-						url: '',
-						errors: [],
-					},
-				}),
+				error: 'Failed to fetch pods',
 			});
 
 			renderComponent<TestItem>({
@@ -1065,304 +1054,4 @@ describe('K8sBaseList', () => {
 			expect(url).not.toContain('selectedItemNamespaceName');
 		});
 	});
-
-	describe('instrumentation checks callout', () => {
-		const fetchListDataMock = jest.fn<
-			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
-			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
-		>();
-
-		beforeEach(() => {
-			fetchListDataMock.mockClear();
-			fetchListDataMock.mockResolvedValue({
-				data: [{ id: 'item-1' }],
-				total: 1,
-				error: null,
-			});
-		});
-
-		it('should not render callout when ready is true', async () => {
-			server.use(
-				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
-					res(
-						ctx.json({
-							status: 'success',
-							data: {
-								ready: true,
-								type: 'pods',
-								presentDefaultEnabledMetrics: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										metrics: ['k8s.pod.cpu.usage'],
-									},
-								],
-							},
-						}),
-					),
-				),
-			);
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('item-1');
-
-			expect(screen.queryByText('Instrumentation checks')).not.toBeInTheDocument();
-		});
-
-		it('should not render callout when no entries exist', async () => {
-			server.use(
-				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
-					res(
-						ctx.json({
-							status: 'success',
-							data: {
-								ready: false,
-								type: 'pods',
-								presentDefaultEnabledMetrics: null,
-								presentOptionalMetrics: null,
-								presentRequiredAttributes: null,
-								missingDefaultEnabledMetrics: null,
-								missingOptionalMetrics: null,
-								missingRequiredAttributes: null,
-							},
-						}),
-					),
-				),
-			);
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('item-1');
-
-			expect(screen.queryByText('Instrumentation checks')).not.toBeInTheDocument();
-		});
-
-		it('should render callout with present entries', async () => {
-			server.use(
-				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
-					res(
-						ctx.json({
-							status: 'success',
-							data: {
-								ready: false,
-								type: 'pods',
-								presentDefaultEnabledMetrics: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										metrics: ['k8s.pod.cpu.usage', 'k8s.pod.memory.usage'],
-									},
-								],
-								presentOptionalMetrics: null,
-								presentRequiredAttributes: null,
-								missingDefaultEnabledMetrics: null,
-								missingOptionalMetrics: null,
-								missingRequiredAttributes: null,
-							},
-						}),
-					),
-				),
-			);
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('Instrumentation checks');
-
-			await expect(
-				screen.findByText('Default enabled metrics'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('k8s.pod.cpu.usage, k8s.pod.memory.usage'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('otel-collector'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('should render callout with missing entries', async () => {
-			server.use(
-				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
-					res(
-						ctx.json({
-							status: 'success',
-							data: {
-								ready: false,
-								type: 'pods',
-								presentDefaultEnabledMetrics: null,
-								presentOptionalMetrics: null,
-								presentRequiredAttributes: null,
-								missingDefaultEnabledMetrics: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										metrics: ['k8s.pod.cpu.limit'],
-										documentationLink: 'https://example.com/docs',
-									},
-								],
-								missingOptionalMetrics: null,
-								missingRequiredAttributes: null,
-							},
-						}),
-					),
-				),
-			);
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('Instrumentation checks');
-
-			await expect(
-				screen.findByText('Missing default metrics'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('k8s.pod.cpu.limit'),
-			).resolves.toBeInTheDocument();
-			await expect(screen.findByText('Learn here')).resolves.toBeInTheDocument();
-		});
-
-		it('should trigger recheck on button click', async () => {
-			let recheckCallCount = 0;
-			server.use(
-				rest.get(
-					'http://localhost/api/v2/infra_monitoring/checks',
-					(_, res, ctx) => {
-						recheckCallCount++;
-						return res(
-							ctx.json({
-								status: 'success',
-								data: {
-									ready: false,
-									type: 'pods',
-									presentDefaultEnabledMetrics: [
-										{
-											associatedComponent: { name: 'otel-collector' },
-											metrics: ['k8s.pod.cpu.usage'],
-										},
-									],
-								},
-							}),
-						);
-					},
-				),
-			);
-
-			const user = userEvent.setup();
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('Instrumentation checks');
-
-			const initialCallCount = recheckCallCount;
-
-			const recheckBtn = screen.getByTestId('instrumentation-checks-recheck-btn');
-			await user.click(recheckBtn);
-
-			await waitFor(() => {
-				expect(recheckCallCount).toBeGreaterThan(initialCallCount);
-			});
-		});
-
-		it('should render both present and missing entries', async () => {
-			server.use(
-				rest.get('http://localhost/api/v2/infra_monitoring/checks', (_, res, ctx) =>
-					res(
-						ctx.json({
-							status: 'success',
-							data: {
-								ready: false,
-								type: 'pods',
-								presentDefaultEnabledMetrics: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										metrics: ['k8s.pod.cpu.usage'],
-									},
-								],
-								presentOptionalMetrics: null,
-								presentRequiredAttributes: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										attributes: ['k8s.namespace.name'],
-									},
-								],
-								missingDefaultEnabledMetrics: [
-									{
-										associatedComponent: { name: 'otel-collector' },
-										metrics: ['k8s.pod.memory.limit'],
-									},
-								],
-								missingOptionalMetrics: null,
-								missingRequiredAttributes: null,
-							},
-						}),
-					),
-				),
-			);
-
-			renderComponent<TestItem>({
-				entity: InfraMonitoringEntity.PODS,
-				eventCategory: InfraMonitoringEvents.Pod,
-				fetchListData: fetchListDataMock,
-				tableColumns: createTestColumns(),
-				getRowKey: (row): string => row.id,
-				getItemKey: (row): string => row.id,
-			});
-
-			await screen.findByText('Instrumentation checks');
-
-			// Present entries
-			await expect(
-				screen.findByText('Default enabled metrics'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('k8s.pod.cpu.usage'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('Required attributes'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('k8s.namespace.name'),
-			).resolves.toBeInTheDocument();
-
-			// Missing entries
-			await expect(
-				screen.findByText('Missing default metrics'),
-			).resolves.toBeInTheDocument();
-			await expect(
-				screen.findByText('k8s.pod.memory.limit'),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout.module.scss

@@ -1,24 +0,0 @@
-.checkContainer {
-	padding: 0px var(--spacing-4) var(--spacing-4) var(--spacing-4);
-
-	position: relative;
-}
-
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	width: 100%;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.entriesList {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/K8sInstrumentationChecksCallout.tsx

@@ -1,162 +0,0 @@
-import { MouseEvent, useCallback, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { RefreshCw } from '@signozhq/icons';
-import setLocalStorage from 'api/browser/localstorage/set';
-import {
-	invalidateGetChecks,
-	useGetChecks,
-} from 'api/generated/services/inframonitoring';
-import { InframonitoringtypesCheckTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEntity } from '../../../constants';
-
-import styles from './K8sInstrumentationChecksCallout.module.scss';
-import { MissingEntryRow } from './MissingEntryRow';
-import { PresentEntryRow } from './PresentEntryRow';
-import {
-	ENTITY_TO_CHECK_TYPE,
-	getStorageKey,
-	hasAnyEntries,
-	hasMissingEntries,
-	readExpandedState,
-} from './utils';
-
-export interface InstrumentationChecksCalloutProps {
-	entity: InfraMonitoringEntity;
-}
-
-export function K8sInstrumentationChecksCallout({
-	entity,
-}: InstrumentationChecksCalloutProps): JSX.Element | null {
-	const checkType = ENTITY_TO_CHECK_TYPE[entity];
-	const queryClient = useQueryClient();
-
-	const [isExpanded, setIsExpanded] = useState(() => readExpandedState(entity));
-
-	const { data, isLoading, isFetching } = useGetChecks(
-		{ type: checkType as InframonitoringtypesCheckTypeDTO },
-		{ query: { enabled: !!checkType } },
-	);
-
-	const handleRecheck = useCallback(
-		(e: MouseEvent): void => {
-			e.preventDefault();
-			e.stopPropagation();
-
-			if (checkType) {
-				void invalidateGetChecks(queryClient, { type: checkType });
-			}
-		},
-		[queryClient, checkType],
-	);
-
-	const handleExpandToggle = useCallback((): void => {
-		setIsExpanded((prev) => {
-			const next = !prev;
-			setLocalStorage(getStorageKey(entity), String(next));
-			return next;
-		});
-	}, [entity]);
-
-	const checksData = data?.data;
-
-	const hasMissingItems = useMemo(
-		() => (checksData ? hasMissingEntries(checksData) : false),
-		[checksData],
-	);
-
-	if (!checkType || isLoading) {
-		return null;
-	}
-
-	if (!checksData || checksData.ready) {
-		return null;
-	}
-
-	if (!hasAnyEntries(checksData)) {
-		return null;
-	}
-
-	return (
-		<div className={styles.checkContainer}>
-			<Callout
-				type={hasMissingItems ? 'warning' : 'info'}
-				showIcon
-				size="medium"
-				title={
-					<div className={styles.header}>
-						Instrumentation checks
-						<Button
-							variant="outlined"
-							color="warning"
-							size="sm"
-							onClick={handleRecheck}
-							loading={isFetching}
-							prefix={<RefreshCw size={12} />}
-							data-testid="instrumentation-checks-recheck-btn"
-						>
-							Recheck
-						</Button>
-					</div>
-				}
-				action="expandable"
-				defaultExpanded={isExpanded}
-				onClick={handleExpandToggle}
-			>
-				<div className={styles.container} onClick={(e) => e.stopPropagation()}>
-					<div className={styles.entriesList}>
-						{checksData.presentDefaultEnabledMetrics?.map((entry) => (
-							<PresentEntryRow
-								key={`present-default-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Default enabled metrics"
-								itemType="metrics"
-							/>
-						))}
-						{checksData.presentOptionalMetrics?.map((entry) => (
-							<PresentEntryRow
-								key={`present-optional-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Optional metrics"
-								itemType="metrics"
-							/>
-						))}
-						{checksData.presentRequiredAttributes?.map((entry) => (
-							<PresentEntryRow
-								key={`present-attrs-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Required attributes"
-								itemType="attributes"
-							/>
-						))}
-						{checksData.missingDefaultEnabledMetrics?.map((entry) => (
-							<MissingEntryRow
-								key={`missing-default-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Missing default metrics"
-								itemType="metrics"
-							/>
-						))}
-						{checksData.missingOptionalMetrics?.map((entry) => (
-							<MissingEntryRow
-								key={`missing-optional-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Missing optional metrics"
-								itemType="metrics"
-							/>
-						))}
-						{checksData.missingRequiredAttributes?.map((entry) => (
-							<MissingEntryRow
-								key={`missing-attrs-${entry.associatedComponent.name}`}
-								entry={entry}
-								typeLabel="Missing required attributes"
-								itemType="attributes"
-							/>
-						))}
-					</div>
-				</div>
-			</Callout>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/MissingEntryRow.module.scss

@@ -1,27 +0,0 @@
-.entryRow {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-wrap: wrap;
-	color: var(--l1-foreground);
-}
-
-.missingIcon {
-	color: var(--warning-background);
-	flex-shrink: 0;
-}
-
-.learnMoreLink {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	margin-left: 4px;
-
-	svg {
-		margin-left: 4px;
-	}
-}
-
-.divider {
-	--divider-color: var(--callout-warning-border);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/MissingEntryRow.tsx

@@ -1,66 +0,0 @@
-import styles from './MissingEntryRow.module.scss';
-import { ExternalLink, TriangleAlert } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import { Divider } from '@signozhq/ui/divider';
-import type {
-	InframonitoringtypesMissingAttributesComponentEntryDTO,
-	InframonitoringtypesMissingMetricsComponentEntryDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-type MissingEntryRowProps =
-	| {
-			entry: InframonitoringtypesMissingMetricsComponentEntryDTO;
-			typeLabel: string;
-			itemType: 'metrics';
-	  }
-	| {
-			entry: InframonitoringtypesMissingAttributesComponentEntryDTO;
-			typeLabel: string;
-			itemType: 'attributes';
-	  };
-
-export function MissingEntryRow({
-	entry,
-	typeLabel,
-	itemType,
-}: MissingEntryRowProps): JSX.Element {
-	const items = itemType === 'metrics' ? entry.metrics : entry.attributes;
-
-	return (
-		<div className={styles.entryRow}>
-			<TriangleAlert size={14} className={styles.missingIcon} />
-			<Typography.Text size="base" weight="medium">
-				{typeLabel}
-			</Typography.Text>
-			<Typography.Text size="base" color="muted">
-				-
-			</Typography.Text>
-			<Typography.Text
-				size="base"
-				weight="semibold"
-				className={styles.entryRowMetric}
-			>
-				{items?.join(', ')}
-			</Typography.Text>
-			<Typography.Text size="base" color="muted">
-				-
-			</Typography.Text>
-			<Typography.Text size="base" italic color="muted">
-				{entry.associatedComponent.name}
-			</Typography.Text>
-			{entry.documentationLink && (
-				<Typography.Link
-					href={entry.documentationLink}
-					target="_blank"
-					rel="noopener noreferrer"
-					size="base"
-					className={styles.learnMoreLink}
-				>
-					Learn here
-					<ExternalLink size={12} />
-				</Typography.Link>
-			)}
-			<Divider className={styles.divider} />
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/PresentEntryRow.module.scss

@@ -1,16 +0,0 @@
-.entryRow {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-wrap: wrap;
-	color: var(--l1-foreground);
-}
-
-.presentIcon {
-	color: var(--success-background);
-	flex-shrink: 0;
-}
-
-.divider {
-	--divider-color: var(--callout-warning-border);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/PresentEntryRow.tsx

@@ -1,54 +0,0 @@
-import styles from './PresentEntryRow.module.scss';
-import { CircleCheck } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import { Divider } from '@signozhq/ui/divider';
-import type {
-	InframonitoringtypesAttributesComponentEntryDTO,
-	InframonitoringtypesMetricsComponentEntryDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-type PresentEntryRowProps =
-	| {
-			entry: InframonitoringtypesMetricsComponentEntryDTO;
-			typeLabel: string;
-			itemType: 'metrics';
-	  }
-	| {
-			entry: InframonitoringtypesAttributesComponentEntryDTO;
-			typeLabel: string;
-			itemType: 'attributes';
-	  };
-
-export function PresentEntryRow({
-	entry,
-	typeLabel,
-	itemType,
-}: PresentEntryRowProps): JSX.Element {
-	const items = itemType === 'metrics' ? entry.metrics : entry.attributes;
-
-	return (
-		<div className={styles.entryRow}>
-			<CircleCheck size={14} className={styles.presentIcon} />
-			<Typography.Text size="base" weight="medium">
-				{typeLabel}
-			</Typography.Text>
-			<Typography.Text size="base" color="muted">
-				-
-			</Typography.Text>
-			<Typography.Text
-				size="base"
-				weight="semibold"
-				className={styles.entryRowMetric}
-			>
-				{items?.join(', ')}
-			</Typography.Text>
-			<Typography.Text size="base" color="muted">
-				-
-			</Typography.Text>
-			<Typography.Text size="base" italic color="muted">
-				{entry.associatedComponent.name}
-			</Typography.Text>
-			<Divider className={styles.divider} />
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringK8sV2/Base/components/K8sInstrumentationChecksCallout/utils.tsx

@@ -1,60 +0,0 @@
-import getLocalStorage from 'api/browser/localstorage/get';
-import {
-	InframonitoringtypesChecksDTO,
-	InframonitoringtypesCheckTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { InfraMonitoringEntity } from '../../../constants';
-
-export const ENTITY_TO_CHECK_TYPE: Record<
-	InfraMonitoringEntity,
-	InframonitoringtypesCheckTypeDTO
-> = {
-	[InfraMonitoringEntity.HOSTS]: InframonitoringtypesCheckTypeDTO.hosts,
-	[InfraMonitoringEntity.PODS]: InframonitoringtypesCheckTypeDTO.pods,
-	[InfraMonitoringEntity.NODES]: InframonitoringtypesCheckTypeDTO.nodes,
-	[InfraMonitoringEntity.NAMESPACES]:
-		InframonitoringtypesCheckTypeDTO.namespaces,
-	[InfraMonitoringEntity.CLUSTERS]: InframonitoringtypesCheckTypeDTO.clusters,
-	[InfraMonitoringEntity.DEPLOYMENTS]:
-		InframonitoringtypesCheckTypeDTO.deployments,
-	[InfraMonitoringEntity.STATEFULSETS]:
-		InframonitoringtypesCheckTypeDTO.statefulsets,
-	[InfraMonitoringEntity.DAEMONSETS]:
-		InframonitoringtypesCheckTypeDTO.daemonsets,
-	[InfraMonitoringEntity.JOBS]: InframonitoringtypesCheckTypeDTO.jobs,
-	[InfraMonitoringEntity.VOLUMES]: InframonitoringtypesCheckTypeDTO.volumes,
-	[InfraMonitoringEntity.CONTAINERS]:
-		InframonitoringtypesCheckTypeDTO.kube_containers,
-};
-
-export function hasMissingEntries(
-	data: InframonitoringtypesChecksDTO,
-): boolean {
-	return (
-		(data.missingDefaultEnabledMetrics?.length ?? 0) > 0 ||
-		(data.missingOptionalMetrics?.length ?? 0) > 0 ||
-		(data.missingRequiredAttributes?.length ?? 0) > 0
-	);
-}
-
-export function hasAnyEntries(data: InframonitoringtypesChecksDTO): boolean {
-	return (
-		(data.presentDefaultEnabledMetrics?.length ?? 0) > 0 ||
-		(data.presentOptionalMetrics?.length ?? 0) > 0 ||
-		(data.presentRequiredAttributes?.length ?? 0) > 0 ||
-		(data.missingDefaultEnabledMetrics?.length ?? 0) > 0 ||
-		(data.missingOptionalMetrics?.length ?? 0) > 0 ||
-		(data.missingRequiredAttributes?.length ?? 0) > 0
-	);
-}
-
-const STORAGE_PREFIX = '@signozhq/k8s-instrumentation-checks-expanded';
-
-export function getStorageKey(entity: InfraMonitoringEntity): string {
-	return `${STORAGE_PREFIX}-${entity}`;
-}
-
-export function readExpandedState(entity: InfraMonitoringEntity): boolean {
-	const stored = getLocalStorage(getStorageKey(entity));
-	return stored === null ? true : stored === 'true';
-}

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

@@ -1,15 +1,11 @@
 import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { listClusters } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesClusterRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -73,12 +69,13 @@ function K8sClustersList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch clusters';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesClusterRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -91,7 +88,7 @@ function K8sClustersList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesClusterRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listClusters(
@@ -109,10 +106,11 @@ function K8sClustersList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch cluster';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/Clusters/table.config.tsx

@@ -8,7 +8,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	GroupedStatusCounts,
@@ -77,7 +77,11 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const clusterName = value as string;
-			return <CellValueTooltip value={clusterName} />;
+			return (
+				<CellValueTooltip value={clusterName}>
+					<TanStackTable.Text>{clusterName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -117,25 +121,23 @@ export const k8sClustersColumnsConfig: ClusterTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'podCountsByStatus',
+		id: 'podCountsByPhase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#pod-counts-by-status">
-				Pod Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/clusters#pod-counts-by-phase">
+				Pod Phases
 			</ColumnHeader>
 		),
-		accessorFn: (
-			row,
-		): InframonitoringtypesClusterRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		accessorFn: (row): InframonitoringtypesClusterRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
 			);
 		},
 	},

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

@@ -1,16 +1,11 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCallback } from 'react';
 import { listDaemonSets } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesDaemonSetRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
-
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
@@ -19,7 +14,6 @@ import { SelectedItemParams } from '../hooks';
 import {
 	daemonSetWidgetInfo,
 	getDaemonSetMetricsQueryPayload,
-	getDaemonSetPodMetricsQueryPayload,
 	k8sDaemonSetDetailsMetadataConfig,
 	k8sDaemonSetGetEntityName,
 	k8sDaemonSetGetSelectedItemExpression,
@@ -31,8 +25,6 @@ import {
 	getK8sDaemonSetRowKey,
 	k8sDaemonSetsColumnsConfig,
 } from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
-
 function K8sDaemonSetsList({
 	controlListPrefix,
 }: {
@@ -73,12 +65,13 @@ function K8sDaemonSetsList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch daemonsets';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesDaemonSetRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -90,7 +83,7 @@ function K8sDaemonSetsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesDaemonSetRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listDaemonSets(
@@ -107,26 +100,16 @@ function K8sDaemonSetsList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch daemonset';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
 		[],
 	);
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesDaemonSetRecordDTO>({
-				getQueryPayload: getDaemonSetPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.DAEMONSETS,
-				queryKey: 'daemonSetPodMetrics',
-			}),
-		],
-		[],
-	);
-
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO, SelectedItemParams>
@@ -150,7 +133,6 @@ function K8sDaemonSetsList({
 				entityWidgetInfo={daemonSetWidgetInfo}
 				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}
 				queryKeyPrefix="daemonset"
-				customTabs={customTabs}
 			/>
 		</>
 	);

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -7,10 +7,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import {
-	getPodUtilizationByPodQueryPayloads,
-	INFRA_MONITORING_ATTR_KEYS,
-} from '../constants';
+import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -679,29 +676,3 @@ export const getDaemonSetMetricsQueryPayload = (
 		},
 	];
 };
-
-export const getDaemonSetPodMetricsQueryPayload = (
-	daemonSet: InframonitoringtypesDaemonSetRecordDTO,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sDaemonSetNameKey = dotMetricsEnabled
-		? 'k8s.daemonset.name'
-		: 'k8s_daemonset_name';
-
-	return getPodUtilizationByPodQueryPayloads(
-		{
-			workloadNameKey: k8sDaemonSetNameKey,
-			workloadNameValue:
-				daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '',
-			clusterName:
-				daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
-			namespaceName:
-				daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-		},
-		start,
-		end,
-		dotMetricsEnabled,
-	);
-};

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/table.config.tsx

@@ -7,7 +7,7 @@ import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -87,7 +87,11 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const daemonsetName = value as string;
-			return <CellValueTooltip value={daemonsetName} />;
+			return (
+				<CellValueTooltip value={daemonsetName}>
+					<TanStackTable.Text>{daemonsetName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -104,29 +108,35 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableResize: true,
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
+			return (
+				<CellValueTooltip value={namespaceName}>
+					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
-		id: 'pod_counts_by_status',
+		id: 'pod_counts_by_phase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#pod-counts-by-status">
-				Pod Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#pod-counts-by-phase">
+				Pod Phases
 			</ColumnHeader>
 		),
 		accessorFn: (
 			row,
-		): InframonitoringtypesDaemonSetRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		): InframonitoringtypesDaemonSetRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+			return (
+				<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
+			);
 		},
 	},
 	{

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

@@ -1,15 +1,11 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCallback } from 'react';
 import { listDeployments } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesDeploymentRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -19,7 +15,6 @@ import { SelectedItemParams } from '../hooks';
 import {
 	deploymentWidgetInfo,
 	getDeploymentMetricsQueryPayload,
-	getDeploymentPodMetricsQueryPayload,
 	k8sDeploymentDetailsMetadataConfig,
 	k8sDeploymentGetEntityName,
 	k8sDeploymentGetSelectedItemExpression,
@@ -31,7 +26,6 @@ import {
 	getK8sDeploymentRowKey,
 	k8sDeploymentsColumnsConfig,
 } from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sDeploymentsList({
 	controlListPrefix,
@@ -74,12 +68,13 @@ function K8sDeploymentsList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch deployments';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesDeploymentRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -92,7 +87,7 @@ function K8sDeploymentsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesDeploymentRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listDeployments(
@@ -110,27 +105,17 @@ function K8sDeploymentsList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch deployment';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
 		[],
 	);
 
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesDeploymentRecordDTO>({
-				getQueryPayload: getDeploymentPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.DEPLOYMENTS,
-				queryKey: 'deploymentPodMetrics',
-			}),
-		],
-		[],
-	);
-
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO, SelectedItemParams>
@@ -155,7 +140,6 @@ function K8sDeploymentsList({
 				entityWidgetInfo={deploymentWidgetInfo}
 				getEntityQueryPayload={getDeploymentMetricsQueryPayload}
 				queryKeyPrefix="deployment"
-				customTabs={customTabs}
 			/>
 		</>
 	);

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -7,10 +7,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import {
-	getPodUtilizationByPodQueryPayloads,
-	INFRA_MONITORING_ATTR_KEYS,
-} from '../constants';
+import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -678,29 +675,3 @@ export const getDeploymentMetricsQueryPayload = (
 		},
 	];
 };
-
-export const getDeploymentPodMetricsQueryPayload = (
-	deployment: InframonitoringtypesDeploymentRecordDTO,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sDeploymentNameKey = dotMetricsEnabled
-		? 'k8s.deployment.name'
-		: 'k8s_deployment_name';
-
-	return getPodUtilizationByPodQueryPayloads(
-		{
-			workloadNameKey: k8sDeploymentNameKey,
-			workloadNameValue:
-				deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
-			clusterName:
-				deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
-			namespaceName:
-				deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-		},
-		start,
-		end,
-		dotMetricsEnabled,
-	);
-};

frontend/src/container/InfraMonitoringK8sV2/Deployments/table.config.tsx

@@ -7,7 +7,7 @@ import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -88,7 +88,11 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			visibilityBehavior: 'hidden-on-expand',
 			cell: ({ value }): React.ReactNode => {
 				const deploymentName = value as string;
-				return <CellValueTooltip value={deploymentName} />;
+				return (
+					<CellValueTooltip value={deploymentName}>
+						<TanStackTable.Text>{deploymentName}</TanStackTable.Text>
+					</CellValueTooltip>
+				);
 			},
 		},
 		{
@@ -108,22 +112,24 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			),
 		},
 		{
-			id: 'podCountsByStatus',
+			id: 'podCountsByPhase',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-counts-by-status">
-					Pod Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-counts-by-phase">
+					Pod Phases
 				</ColumnHeader>
 			),
-			accessorFn: (row): object | undefined => row.podCountsByStatus,
+			accessorFn: (row): object | undefined => row.podCountsByPhase,
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
 			cell: ({ row }): React.ReactNode => {
-				const podCountsByStatus = row.podCountsByStatus;
-				if (!podCountsByStatus) {
+				const podCountsByPhase = row.podCountsByPhase;
+				if (!podCountsByPhase) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+				return (
+					<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
+				);
 			},
 		},
 		{

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/__tests__/EntityTraces.table.test.tsx

@@ -87,7 +87,7 @@ describe('EntityTraces - Table Rendering', () => {
 		expect(badge).toHaveAttribute('data-variant', 'outline');
 	});
 
-	it('should render - when http method is empty', async () => {
+	it('should render N/A when http method is empty', async () => {
 		mockQueryRangeV5WithTracesResponse({
 			customTraces: [{ httpMethod: '', responseStatusCode: '200' }],
 		});
@@ -96,7 +96,7 @@ describe('EntityTraces - Table Rendering', () => {
 			renderEntityTraces();
 		});
 
-		await expect(screen.findByText('-')).resolves.toBeInTheDocument();
+		await expect(screen.findByText('N/A')).resolves.toBeInTheDocument();
 		expect(screen.queryByTestId('httpMethod')).not.toBeInTheDocument();
 	});
 

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/traceListColumns.module.scss

@@ -4,8 +4,4 @@
 
 .cellText {
 	color: var(--l2-foreground);
-
-	&[data-novalue='true'] {
-		opacity: 0.6;
-	}
 }

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -89,12 +89,8 @@ export const getTraceListColumns = (
 				if (value === '') {
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>
-							<Typography
-								data-testid={key}
-								className={styles.cellText}
-								data-novalue="true"
-							>
-								-
+							<Typography data-testid={key} className={styles.cellText}>
+								N/A
 							</Typography>
 						</BlockLink>
 					);
@@ -106,9 +102,7 @@ export const getTraceListColumns = (
 					if (!httpMethod) {
 						return (
 							<BlockLink to={getTraceLink(itemData)} openInNewTab>
-								<Typography className={styles.cellText} data-novalue="true">
-									-
-								</Typography>
+								<Typography className={styles.cellText}>N/A</Typography>
 							</BlockLink>
 						);
 					}
@@ -135,11 +129,8 @@ export const getTraceListColumns = (
 					if (!isValidCode) {
 						return (
 							<BlockLink to={getTraceLink(itemData)} openInNewTab>
-								<Typography
-									className={styles.cellText}
-									data-novalue={numericCode === 0 || !statusCode}
-								>
-									{numericCode === 0 || !statusCode ? '-' : statusCode}
+								<Typography className={styles.cellText}>
+									{numericCode === 0 || !statusCode ? 'N/A' : statusCode}
 								</Typography>
 							</BlockLink>
 						);

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab.tsx

@@ -1,47 +0,0 @@
-import { Container } from '@signozhq/icons';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-
-import { CustomTab } from '../Base/K8sBaseDetails';
-import {
-	InfraMonitoringEntity,
-	podUtilizationByPodWidgetInfo,
-	VIEW_TYPES,
-} from '../constants';
-
-import EntityMetrics from './EntityMetrics';
-
-interface CreatePodMetricsTabParams<T> {
-	getQueryPayload: (
-		entity: T,
-		start: number,
-		end: number,
-		dotMetricsEnabled: boolean,
-	) => GetQueryResultsProps[];
-	category: InfraMonitoringEntity;
-	queryKey: string;
-}
-
-export function createPodMetricsTab<T>({
-	getQueryPayload,
-	category,
-	queryKey,
-}: CreatePodMetricsTabParams<T>): CustomTab<T> {
-	return {
-		key: VIEW_TYPES.POD_METRICS,
-		label: 'Pod Metrics',
-		icon: <Container size={14} />,
-		render: ({ entity, timeRange, selectedInterval, handleTimeChange }) => (
-			<EntityMetrics
-				entity={entity}
-				selectedInterval={selectedInterval}
-				timeRange={timeRange}
-				handleTimeChange={handleTimeChange}
-				isModalTimeSelection
-				entityWidgetInfo={podUtilizationByPodWidgetInfo}
-				getEntityQueryPayload={getQueryPayload}
-				category={category}
-				queryKey={queryKey}
-			/>
-		),
-	};
-}

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

@@ -1,15 +1,11 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCallback } from 'react';
 import { listJobs } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesJobRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -18,7 +14,6 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getJobMetricsQueryPayload,
-	getJobPodMetricsQueryPayload,
 	jobWidgetInfo,
 	k8sJobDetailsMetadataConfig,
 	k8sJobGetEntityName,
@@ -31,7 +26,6 @@ import {
 	getK8sJobRowKey,
 	k8sJobsColumnsConfig,
 } from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sJobsList({
 	controlListPrefix,
@@ -74,12 +68,13 @@ function K8sJobsList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch jobs';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesJobRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -92,7 +87,7 @@ function K8sJobsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesJobRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listJobs(
@@ -110,27 +105,17 @@ function K8sJobsList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch job';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
 		[],
 	);
 
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesJobRecordDTO>({
-				getQueryPayload: getJobPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.JOBS,
-				queryKey: 'jobPodMetrics',
-			}),
-		],
-		[],
-	);
-
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesJobRecordDTO, SelectedItemParams>
@@ -155,7 +140,6 @@ function K8sJobsList({
 				entityWidgetInfo={jobWidgetInfo}
 				getEntityQueryPayload={getJobMetricsQueryPayload}
 				queryKeyPrefix="job"
-				customTabs={customTabs}
 			/>
 		</>
 	);

frontend/src/container/InfraMonitoringK8sV2/Jobs/constants.ts

@@ -7,10 +7,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import {
-	getPodUtilizationByPodQueryPayloads,
-	INFRA_MONITORING_ATTR_KEYS,
-} from '../constants';
+import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -432,25 +429,3 @@ export const getJobMetricsQueryPayload = (
 		},
 	];
 };
-
-export const getJobPodMetricsQueryPayload = (
-	job: InframonitoringtypesJobRecordDTO,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sJobNameKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
-
-	return getPodUtilizationByPodQueryPayloads(
-		{
-			workloadNameKey: k8sJobNameKey,
-			workloadNameValue: job.jobName ?? '',
-			clusterName: job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
-			namespaceName:
-				job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-		},
-		start,
-		end,
-		dotMetricsEnabled,
-	);
-};

frontend/src/container/InfraMonitoringK8sV2/Jobs/table.config.tsx

@@ -7,7 +7,7 @@ import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -81,7 +81,11 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const jobName = value as string;
-			return <CellValueTooltip value={jobName} />;
+			return (
+				<CellValueTooltip value={jobName}>
+					<TanStackTable.Text>{jobName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -98,27 +102,33 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		enableResize: true,
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
+			return (
+				<CellValueTooltip value={namespaceName}>
+					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
-		id: 'pod_counts_by_status',
+		id: 'pod_counts_by_phase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#pod-counts-by-status">
-				Pod Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#pod-counts-by-phase">
+				Pod Phases
 			</ColumnHeader>
 		),
-		accessorFn: (row): InframonitoringtypesJobRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		accessorFn: (row): InframonitoringtypesJobRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+			return (
+				<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
+			);
 		},
 	},
 	{

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

@@ -1,15 +1,11 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCallback } from 'react';
 import { listNamespaces } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesNamespaceRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -18,7 +14,6 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getNamespaceMetricsQueryPayload,
-	getNamespacePodMetricsQueryPayload,
 	k8sNamespaceDetailsCountsConfig,
 	k8sNamespaceDetailsMetadataConfig,
 	k8sNamespaceGetCountsFilterExpression,
@@ -33,7 +28,6 @@ import {
 	getK8sNamespaceRowKey,
 	k8sNamespacesColumnsConfig,
 } from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sNamespacesList({
 	controlListPrefix,
@@ -76,12 +70,13 @@ function K8sNamespacesList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch namespaces';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesNamespaceRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -94,7 +89,7 @@ function K8sNamespacesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesNamespaceRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listNamespaces(
@@ -112,27 +107,17 @@ function K8sNamespacesList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch namespace';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
 		[],
 	);
 
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesNamespaceRecordDTO>({
-				getQueryPayload: getNamespacePodMetricsQueryPayload,
-				category: InfraMonitoringEntity.NAMESPACES,
-				queryKey: 'namespacePodMetrics',
-			}),
-		],
-		[],
-	);
-
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO, SelectedItemParams>
@@ -159,7 +144,6 @@ function K8sNamespacesList({
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}
 				queryKeyPrefix="namespace"
-				customTabs={customTabs}
 			/>
 		</>
 	);

frontend/src/container/InfraMonitoringK8sV2/Namespaces/constants.ts

@@ -11,7 +11,6 @@ import {
 	K8sDetailsMetadataConfig,
 } from '../Base/K8sBaseDetails';
 import {
-	getPodUtilizationByPodQueryPayloads,
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
@@ -1753,26 +1752,3 @@ export const getNamespaceMetricsQueryPayload = (
 		},
 	];
 };
-
-export const getNamespacePodMetricsQueryPayload = (
-	namespace: InframonitoringtypesNamespaceRecordDTO,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sNamespaceNameKey = dotMetricsEnabled
-		? 'k8s.namespace.name'
-		: 'k8s_namespace_name';
-
-	return getPodUtilizationByPodQueryPayloads(
-		{
-			workloadNameKey: k8sNamespaceNameKey,
-			workloadNameValue: namespace.namespaceName ?? '',
-			clusterName:
-				namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
-		},
-		start,
-		end,
-		dotMetricsEnabled,
-	);
-};

frontend/src/container/InfraMonitoringK8sV2/Namespaces/table.config.tsx

@@ -6,7 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	GroupedStatusCounts,
@@ -83,7 +83,11 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
+			return (
+				<CellValueTooltip value={namespaceName}>
+					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -102,25 +106,25 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		),
 	},
 	{
-		id: 'podCountsByStatus',
+		id: 'podCountsByPhase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/namespaces#pod-counts-by-status">
-				Pod Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/namespaces#pod-counts-by-phase">
+				Pod Phases
 			</ColumnHeader>
 		),
 		accessorFn: (
 			row,
-		): InframonitoringtypesNamespaceRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		): InframonitoringtypesNamespaceRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
 			);
 		},
 	},

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

@@ -1,15 +1,11 @@
 import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { listNodes } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesNodeRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -71,12 +67,13 @@ function K8sNodesList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch nodes';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesNodeRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -89,7 +86,7 @@ function K8sNodesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesNodeRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listNodes(
@@ -107,10 +104,11 @@ function K8sNodesList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch node';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/Nodes/table.config.tsx

@@ -7,7 +7,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import {
 	CellValueTooltip,
@@ -85,7 +85,11 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const nodeName = value as string;
-			return <CellValueTooltip value={nodeName} />;
+			return (
+				<CellValueTooltip value={nodeName}>
+					<TanStackTable.Text>{nodeName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -128,23 +132,23 @@ export const k8sNodesColumnsConfig: NodeTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'podCountsByStatus',
+		id: 'podCountsByPhase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#pod-counts-by-status">
-				Pod Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/nodes#pod-counts-by-phase">
+				Pod Phases
 			</ColumnHeader>
 		),
-		accessorFn: (row): InframonitoringtypesNodeRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		accessorFn: (row): InframonitoringtypesNodeRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
 			);
 		},
 	},

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

@@ -1,15 +1,11 @@
 import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { listPods } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesPodRecordDTO,
 	InframonitoringtypesResponseTypeDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -71,12 +67,13 @@ function K8sPodsList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch pods';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesPodRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -89,7 +86,7 @@ function K8sPodsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesPodRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listPods(
@@ -107,10 +104,11 @@ function K8sPodsList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch pod';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/Pods/table.config.tsx

@@ -1,9 +1,9 @@
 import { Container } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, BadgeColor } from '@signozhq/ui/badge';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import {
+	InframonitoringtypesPodPhaseDTO,
 	InframonitoringtypesPodRecordDTO,
-	InframonitoringtypesPodStatusDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
@@ -11,11 +11,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
-import {
-	formatBytes,
-	getPodStatusItems,
-	POD_STATUS_COLORS,
-} from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -44,6 +40,15 @@ export function getK8sPodItemKey(
 	return pod.podUID;
 }
 
+const POD_PHASE_COLORS: Record<string, BadgeColor> = {
+	running: 'forest',
+	pending: 'amber',
+	succeeded: 'robin',
+	failed: 'cherry',
+	unknown: 'vanilla',
+	no_data: 'vanilla',
+};
+
 export type PodTableColumnConfig =
 	TableColumnDef<InframonitoringtypesPodRecordDTO>;
 export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
@@ -88,30 +93,34 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const podName = value as string;
-			return <CellValueTooltip value={podName} />;
+			return (
+				<CellValueTooltip value={podName}>
+					<TanStackTable.Text>{podName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
-		id: 'podStatus',
+		id: 'podPhase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-status">
-				Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-phase">
+				Phase
 			</ColumnHeader>
 		),
-		accessorFn: (row): string => row.podStatus,
-		width: { min: 160 },
+		accessorFn: (row): string => row.podPhase,
+		width: { min: 120 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ row }): React.ReactNode => {
-			if (!row.podStatus) {
+			if (!row.podPhase) {
 				return <></>;
 			}
 
-			const color = POD_STATUS_COLORS[row.podStatus] || POD_STATUS_COLORS.unknown;
+			const color = POD_PHASE_COLORS[row.podPhase] || POD_PHASE_COLORS.unknown;
 			const label =
-				row.podStatus === InframonitoringtypesPodStatusDTO.no_data
+				row.podPhase === InframonitoringtypesPodPhaseDTO.no_data
 					? 'No Data'
-					: row.podStatus.charAt(0).toUpperCase() + row.podStatus.slice(1);
+					: row.podPhase.charAt(0).toUpperCase() + row.podPhase.slice(1);
 			return (
 				<Badge color={color} variant="outline">
 					{label}
@@ -120,24 +129,24 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'podCountsByStatus',
+		id: 'podCountsByPhase',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-status">
-				Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-phase">
+				Phases
 			</ColumnHeader>
 		),
-		accessorFn: (row): InframonitoringtypesPodRecordDTO['podCountsByStatus'] =>
-			row.podCountsByStatus,
+		accessorFn: (row): InframonitoringtypesPodRecordDTO['podCountsByPhase'] =>
+			row.podCountsByPhase,
 		width: { min: 250 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-collapse',
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByStatus = row.podCountsByStatus;
-			if (!podCountsByStatus) {
+			const podCountsByPhase = row.podCountsByPhase;
+			if (!podCountsByPhase) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
+				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
 			);
 		},
 	},
@@ -163,28 +172,6 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 			return <TanStackTable.Text>{formatAge(age)}</TanStackTable.Text>;
 		},
 	},
-	{
-		id: 'podRestarts',
-		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#restarts">
-				Restarts
-			</ColumnHeader>
-		),
-		accessorFn: (row): number => row.podRestarts,
-		width: { min: 100 },
-		enableSort: true,
-		cell: ({ value }): React.ReactNode => {
-			const restarts = value as number;
-			if (restarts === -1) {
-				return (
-					<TooltipSimple title="No data">
-						<Typography.Text>-</Typography.Text>
-					</TooltipSimple>
-				);
-			}
-			return <TanStackTable.Text>{restarts}</TanStackTable.Text>;
-		},
-	},
 	{
 		id: 'cpu_request',
 		header: (): React.ReactNode => (

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

@@ -1,15 +1,11 @@
-import { useCallback, useMemo } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useCallback } from 'react';
 import { listStatefulSets } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesResponseTypeDTO,
 	InframonitoringtypesStatefulSetRecordDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -18,7 +14,6 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getStatefulSetMetricsQueryPayload,
-	getStatefulSetPodMetricsQueryPayload,
 	k8sStatefulSetDetailsMetadataConfig,
 	k8sStatefulSetGetEntityName,
 	k8sStatefulSetGetSelectedItemExpression,
@@ -31,7 +26,6 @@ import {
 	getK8sStatefulSetRowKey,
 	k8sStatefulSetsColumnsConfig,
 } from './table.config';
-import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sStatefulSetsList({
 	controlListPrefix,
@@ -74,12 +68,13 @@ function K8sStatefulSetsList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch statefulsets';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesStatefulSetRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -92,7 +87,7 @@ function K8sStatefulSetsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesStatefulSetRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listStatefulSets(
@@ -110,27 +105,17 @@ function K8sStatefulSetsList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch statefulset';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
 		[],
 	);
 
-	const customTabs = useMemo(
-		() => [
-			createPodMetricsTab<InframonitoringtypesStatefulSetRecordDTO>({
-				getQueryPayload: getStatefulSetPodMetricsQueryPayload,
-				category: InfraMonitoringEntity.STATEFULSETS,
-				queryKey: 'statefulSetPodMetrics',
-			}),
-		],
-		[],
-	);
-
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO, SelectedItemParams>
@@ -155,7 +140,6 @@ function K8sStatefulSetsList({
 				entityWidgetInfo={statefulSetWidgetInfo}
 				getEntityQueryPayload={getStatefulSetMetricsQueryPayload}
 				queryKeyPrefix="statefulSet"
-				customTabs={customTabs}
 			/>
 		</>
 	);

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/constants.ts

@@ -7,10 +7,7 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import {
-	getPodUtilizationByPodQueryPayloads,
-	INFRA_MONITORING_ATTR_KEYS,
-} from '../constants';
+import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -862,29 +859,3 @@ export const getStatefulSetMetricsQueryPayload = (
 		},
 	];
 };
-
-export const getStatefulSetPodMetricsQueryPayload = (
-	statefulSet: InframonitoringtypesStatefulSetRecordDTO,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] => {
-	const k8sStatefulSetNameKey = dotMetricsEnabled
-		? INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
-		: 'k8s_statefulset_name';
-
-	return getPodUtilizationByPodQueryPayloads(
-		{
-			workloadNameKey: k8sStatefulSetNameKey,
-			workloadNameValue:
-				statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
-			clusterName:
-				statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
-			namespaceName:
-				statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-		},
-		start,
-		end,
-		dotMetricsEnabled,
-	);
-};

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/table.config.tsx

@@ -7,7 +7,7 @@ import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
 import { SelectedItemParams } from '../hooks';
-import { formatBytes, getPodStatusItems } from '../commonUtils';
+import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -88,7 +88,11 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			visibilityBehavior: 'hidden-on-expand',
 			cell: ({ value }): React.ReactNode => {
 				const statefulsetName = value as string;
-				return <CellValueTooltip value={statefulsetName} />;
+				return (
+					<CellValueTooltip value={statefulsetName}>
+						<TanStackTable.Text>{statefulsetName}</TanStackTable.Text>
+					</CellValueTooltip>
+				);
 			},
 		},
 		{
@@ -105,29 +109,35 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableResize: true,
 			cell: ({ value }): React.ReactNode => {
 				const namespaceName = value as string;
-				return <CellValueTooltip value={namespaceName} />;
+				return (
+					<CellValueTooltip value={namespaceName}>
+						<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+					</CellValueTooltip>
+				);
 			},
 		},
 		{
-			id: 'pod_counts_by_status',
+			id: 'pod_counts_by_phase',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-counts-by-status">
-					Pod Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-counts-by-phase">
+					Pod Phases
 				</ColumnHeader>
 			),
 			accessorFn: (
 				row,
-			): InframonitoringtypesStatefulSetRecordDTO['podCountsByStatus'] =>
-				row.podCountsByStatus,
+			): InframonitoringtypesStatefulSetRecordDTO['podCountsByPhase'] =>
+				row.podCountsByPhase,
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
 			cell: ({ row }): React.ReactNode => {
-				const podCountsByStatus = row.podCountsByStatus;
-				if (!podCountsByStatus) {
+				const podCountsByPhase = row.podCountsByPhase;
+				if (!podCountsByPhase) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
+				return (
+					<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
+				);
 			},
 		},
 		{

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

@@ -1,15 +1,11 @@
 import { useCallback } from 'react';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { listVolumes } from 'api/generated/services/inframonitoring';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
 import {
 	InframonitoringtypesResponseTypeDTO,
 	InframonitoringtypesVolumeRecordDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { InfraMonitoringEvents } from 'constants/events';
-import APIError from 'types/api/error';
 
 import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
@@ -72,12 +68,13 @@ function K8sVolumesList({
 					warning: data.warning,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch volumes';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesVolumeRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -90,7 +87,7 @@ function K8sVolumesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesVolumeRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listVolumes(
@@ -108,10 +105,11 @@ function K8sVolumesList({
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch volume';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringK8sV2/Volumes/table.config.tsx

@@ -81,7 +81,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const pvcName = value as string;
-			return <CellValueTooltip value={pvcName} />;
+			return (
+				<CellValueTooltip value={pvcName}>
+					<TanStackTable.Text>{pvcName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{
@@ -97,7 +101,11 @@ export const k8sVolumesColumnsConfig: VolumeTableColumnConfig[] = [
 		enableSort: false,
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return <CellValueTooltip value={namespaceName} />;
+			return (
+				<CellValueTooltip value={namespaceName}>
+					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+				</CellValueTooltip>
+			);
 		},
 	},
 	{

frontend/src/container/InfraMonitoringK8sV2/commonUtils.tsx

@@ -1,9 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
-import { BadgeColor } from '@signozhq/ui/badge';
-import {
-	InframonitoringtypesPodCountsByStatusDTO,
-	InframonitoringtypesPodStatusDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { InframonitoringtypesPodCountsByPhaseDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { StatusCountItem } from './components/GroupedStatusCounts';
 
@@ -68,106 +64,17 @@ export function getStrokeColorForLimitUtilization(value: number): string {
 	return Color.BG_SAKURA_500;
 }
 
-export const POD_STATUS_COLORS: Record<
-	InframonitoringtypesPodStatusDTO,
-	BadgeColor
-> = {
-	[InframonitoringtypesPodStatusDTO.running]: 'forest',
-	[InframonitoringtypesPodStatusDTO.completed]: 'robin',
-	[InframonitoringtypesPodStatusDTO.pending]: 'amber',
-	[InframonitoringtypesPodStatusDTO.unknown]: 'vanilla',
-	[InframonitoringtypesPodStatusDTO.no_data]: 'vanilla',
-	[InframonitoringtypesPodStatusDTO.failed]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.crashloopbackoff]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.imagepullbackoff]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.errimagepull]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.createcontainerconfigerror]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.containercreating]: 'amber',
-	[InframonitoringtypesPodStatusDTO.oomkilled]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.error]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.containercannotrun]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.evicted]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.nodeaffinity]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.nodelost]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.shutdown]: 'cherry',
-	[InframonitoringtypesPodStatusDTO.unexpectedadmissionerror]: 'cherry',
-};
-
-type PodStatusCategory =
-	| 'running'
-	| 'completed'
-	| 'pending'
-	| 'unknown'
-	| 'error';
-
-const POD_STATUS_CATEGORY_MAP: Record<
-	keyof InframonitoringtypesPodCountsByStatusDTO,
-	PodStatusCategory
-> = {
-	running: 'running',
-	completed: 'completed',
-	pending: 'pending',
-	unknown: 'unknown',
-	failed: 'error',
-	crashLoopBackOff: 'error',
-	imagePullBackOff: 'error',
-	errImagePull: 'error',
-	createContainerConfigError: 'error',
-	containerCreating: 'error',
-	oomKilled: 'error',
-	error: 'error',
-	containerCannotRun: 'error',
-	evicted: 'error',
-	nodeAffinity: 'error',
-	nodeLost: 'error',
-	shutdown: 'error',
-	unexpectedAdmissionError: 'error',
-};
-
-type ErrorStatusKey = {
-	[K in keyof InframonitoringtypesPodCountsByStatusDTO]: (typeof POD_STATUS_CATEGORY_MAP)[K] extends 'error'
-		? K
-		: never;
-}[keyof InframonitoringtypesPodCountsByStatusDTO];
-
-const ERROR_STATUS_LABELS: Record<ErrorStatusKey, string> = {
-	failed: 'Failed',
-	crashLoopBackOff: 'CrashLoopBackOff',
-	imagePullBackOff: 'ImagePullBackOff',
-	errImagePull: 'ErrImagePull',
-	createContainerConfigError: 'CreateContainerConfigError',
-	containerCreating: 'ContainerCreating',
-	oomKilled: 'OOMKilled',
-	error: 'Error',
-	containerCannotRun: 'ContainerCannotRun',
-	evicted: 'Evicted',
-	nodeAffinity: 'NodeAffinity',
-	nodeLost: 'NodeLost',
-	shutdown: 'Shutdown',
-	unexpectedAdmissionError: 'UnexpectedAdmissionError',
-};
-
-export function getPodStatusItems(
-	counts: InframonitoringtypesPodCountsByStatusDTO,
+/**
+ * Builds StatusCountItem[] for GroupedStatusCounts from pod phase counts.
+ */
+export function getPodPhaseStatusItems(
+	counts: InframonitoringtypesPodCountsByPhaseDTO,
 ): StatusCountItem[] {
-	const errorKeys = Object.keys(ERROR_STATUS_LABELS) as ErrorStatusKey[];
-
-	const errorTotal = errorKeys.reduce((sum, key) => sum + counts[key], 0);
-	const errorBreakdown = errorKeys.map((key) => ({
-		label: ERROR_STATUS_LABELS[key],
-		value: counts[key],
-	}));
-
 	return [
 		{ value: counts.running, label: 'Running', color: Color.BG_FOREST_500 },
-		{ value: counts.completed, label: 'Completed', color: Color.BG_ROBIN_500 },
 		{ value: counts.pending, label: 'Pending', color: Color.BG_AMBER_500 },
+		{ value: counts.succeeded, label: 'Succeeded', color: Color.BG_ROBIN_500 },
+		{ value: counts.failed, label: 'Failed', color: Color.BG_CHERRY_500 },
 		{ value: counts.unknown, label: 'Unknown', color: Color.BG_SLATE_400 },
-		{
-			value: errorTotal,
-			label: 'Error Status',
-			color: Color.BG_CHERRY_500,
-			breakdown: errorBreakdown,
-		},
 	];
 }

frontend/src/container/InfraMonitoringK8sV2/components/CellValueTooltip/CellValueTooltip.module.scss

@@ -52,7 +52,3 @@
 .divider {
 	--divider-color: rgba(255, 255, 255, 0.14);
 }
-
-.value {
-	width: fit-content;
-}

frontend/src/container/InfraMonitoringK8sV2/components/CellValueTooltip/CellValueTooltip.tsx

@@ -1,9 +1,8 @@
-import { useCallback, type MouseEvent } from 'react';
+import { useCallback, type ReactNode, type MouseEvent } from 'react';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { toast } from '@signozhq/ui/sonner';
 import { Copy, Minus, Plus } from '@signozhq/icons';
 import { useCopyToClipboard } from 'react-use';
-import TanStackTable from 'components/TanStackTableView';
 
 import { useInfraMonitoringCellActionsStore } from './useInfraMonitoringCellActionsStore';
 
@@ -12,10 +11,12 @@ import { Divider } from '@signozhq/ui/divider';
 
 export interface CellValueTooltipProps {
 	value: string;
+	children: ReactNode;
 }
 
 export function CellValueTooltip({
 	value,
+	children,
 }: CellValueTooltipProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const { lineClamp, increaseLineClamp, decreaseLineClamp } =
@@ -93,7 +94,7 @@ export function CellValueTooltip({
 				className: styles.tooltipContentWrapper,
 			}}
 		>
-			<TanStackTable.Text className={styles.value}>{value}</TanStackTable.Text>
+			{children}
 		</TooltipSimple>
 	);
 }

frontend/src/container/InfraMonitoringK8sV2/components/GroupedStatusCounts.module.scss

@@ -17,40 +17,9 @@
 	flex-shrink: 0;
 }
 
-.valueWrapper {
-	min-width: 4ch;
-}
-
-.valueWrapperTooltip {
-	display: block;
-	width: fit-content;
-}
-
 .value {
 	font-variant-numeric: tabular-nums;
+	min-width: 4ch;
 	text-align: left;
 	cursor: default;
-	min-width: min-content;
-}
-
-.tooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	min-width: 120px;
-}
-
-.tooltipHeader {
-	font-weight: 600;
-	margin-bottom: 2px;
-}
-
-.tooltipRow {
-	display: flex;
-	justify-content: space-between;
-	gap: 12px;
-}
-
-.tooltipValue {
-	font-variant-numeric: tabular-nums;
 }

frontend/src/container/InfraMonitoringK8sV2/components/GroupedStatusCounts.tsx

@@ -2,18 +2,11 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 import styles from './GroupedStatusCounts.module.scss';
 import TanStackTable from 'components/TanStackTableView';
-import { Typography } from '@signozhq/ui/typography';
-
-export interface StatusBreakdownItem {
-	label: string;
-	value: number;
-}
 
 export interface StatusCountItem {
 	value: number;
 	label: string;
 	color: string;
-	breakdown?: StatusBreakdownItem[];
 }
 
 interface GroupedStatusCountsProps {
@@ -21,45 +14,6 @@ interface GroupedStatusCountsProps {
 	showZeroValues?: boolean;
 }
 
-function buildTooltipContent(item: StatusCountItem): React.ReactNode {
-	if (!item.breakdown || item.breakdown.length === 0) {
-		return (
-			<Typography.Text>
-				{item.label}: {item.value}
-			</Typography.Text>
-		);
-	}
-
-	const nonZeroBreakdown = item.breakdown.filter((b) => b.value > 0);
-	if (nonZeroBreakdown.length === 0) {
-		return (
-			<div className={styles.tooltipContent}>
-				<Typography.Text className={styles.tooltipHeader}>
-					{item.label}
-				</Typography.Text>
-
-				<Typography.Text>No errors</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.tooltipContent}>
-			<Typography.Text className={styles.tooltipHeader}>
-				{item.label}
-			</Typography.Text>
-			{nonZeroBreakdown.map((b) => (
-				<div key={b.label} className={styles.tooltipRow}>
-					<Typography.Text>{b.label}</Typography.Text>
-					<Typography.Text className={styles.tooltipValue}>
-						{b.value}
-					</Typography.Text>
-				</div>
-			))}
-		</div>
-	);
-}
-
 export function GroupedStatusCounts({
 	items,
 	showZeroValues = true,
@@ -79,15 +33,13 @@ export function GroupedStatusCounts({
 						className={styles.separator}
 						style={{ backgroundColor: item.color }}
 					/>
-					<div className={styles.valueWrapper}>
-						<TooltipSimple title={buildTooltipContent(item)} arrow align="start">
-							<span className={styles.valueWrapperTooltip}>
-								<TanStackTable.Text className={styles.value}>
-									{item.value || '-'}
-								</TanStackTable.Text>
-							</span>
-						</TooltipSimple>
-					</div>
+					<TooltipSimple title={`${item.label}: ${item.value}`}>
+						<span>
+							<TanStackTable.Text className={styles.value}>
+								{item.value || '-'}
+							</TanStackTable.Text>
+						</span>
+					</TooltipSimple>
 				</div>
 			))}
 		</div>

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -2,12 +2,8 @@ import {
 	FiltersType,
 	IQuickFiltersConfig,
 } from 'components/QuickFilters/types';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
-import { v4 } from 'uuid';
+import { DataSource } from 'types/common/queryBuilder';
 
 // TODO(backend): Find a way to generate this via openapi
 export const INFRA_MONITORING_ATTR_KEYS = {
@@ -134,7 +130,6 @@ export enum VIEWS {
 	CONTAINERS = 'containers',
 	PROCESSES = 'processes',
 	EVENTS = 'events',
-	POD_METRICS = 'pod_metrics',
 }
 
 export const VIEW_TYPES = {
@@ -142,7 +137,6 @@ export const VIEW_TYPES = {
 	LOGS: VIEWS.LOGS,
 	TRACES: VIEWS.TRACES,
 	EVENTS: VIEWS.EVENTS,
-	POD_METRICS: VIEWS.POD_METRICS,
 };
 
 export const K8sCategories = {
@@ -922,261 +916,3 @@ export const METRIC_NAMESPACE_BY_ENTITY: Record<InfraMonitoringEntity, string> =
 		[InfraMonitoringEntity.JOBS]: 'k8s.',
 		[InfraMonitoringEntity.VOLUMES]: 'k8s.volume.',
 	};
-
-export interface WorkloadFilterContext {
-	workloadNameKey: string;
-	workloadNameValue: string;
-	clusterName: string;
-	namespaceName?: string;
-}
-
-export const podUtilizationByPodWidgetInfo = [
-	{
-		title: 'CPU Limit Utilization By Pod Name',
-		yAxisUnit: 'percentunit',
-	},
-	{
-		title: 'CPU Request Utilization By Pod Name',
-		yAxisUnit: 'percentunit',
-	},
-	{
-		title: 'Memory Limit Utilization By Pod Name',
-		yAxisUnit: 'percentunit',
-	},
-	{
-		title: 'Memory Request Utilization By Pod Name',
-		yAxisUnit: 'percentunit',
-	},
-	{
-		title: 'FileSystem Usage Percentage By Pod Name',
-		yAxisUnit: 'percentunit',
-	},
-];
-
-export function getPodUtilizationByPodQueryPayloads(
-	context: WorkloadFilterContext,
-	start: number,
-	end: number,
-	dotMetricsEnabled: boolean,
-): GetQueryResultsProps[] {
-	const getKey = (dotKey: string, underscoreKey: string): string =>
-		dotMetricsEnabled ? dotKey : underscoreKey;
-
-	const k8sPodCpuLimitUtilKey = getKey(
-		'k8s.pod.cpu_limit_utilization',
-		'k8s_pod_cpu_limit_utilization',
-	);
-	const k8sPodCpuRequestUtilKey = getKey(
-		'k8s.pod.cpu_request_utilization',
-		'k8s_pod_cpu_request_utilization',
-	);
-	const k8sPodMemLimitUtilKey = getKey(
-		'k8s.pod.memory_limit_utilization',
-		'k8s_pod_memory_limit_utilization',
-	);
-	const k8sPodMemRequestUtilKey = getKey(
-		'k8s.pod.memory_request_utilization',
-		'k8s_pod_memory_request_utilization',
-	);
-	const k8sPodFsUsageKey = getKey(
-		'k8s.pod.filesystem.usage',
-		'k8s_pod_filesystem_usage',
-	);
-	const k8sPodFsCapacityKey = getKey(
-		'k8s.pod.filesystem.capacity',
-		'k8s_pod_filesystem_capacity',
-	);
-	const k8sPodNameKey = getKey('k8s.pod.name', 'k8s_pod_name');
-	const k8sClusterNameKey = getKey('k8s.cluster.name', 'k8s_cluster_name');
-	const k8sNamespaceNameKey = getKey('k8s.namespace.name', 'k8s_namespace_name');
-
-	const baseFilters = [
-		{
-			id: 'workload',
-			key: {
-				dataType: DataTypes.String,
-				id: `${context.workloadNameKey}--string--tag--false`,
-				key: context.workloadNameKey,
-				type: 'tag',
-			},
-			op: '=',
-			value: context.workloadNameValue,
-		},
-		{
-			id: 'cluster',
-			key: {
-				dataType: DataTypes.String,
-				id: `${k8sClusterNameKey}--string--tag--false`,
-				key: k8sClusterNameKey,
-				type: 'tag',
-			},
-			op: '=',
-			value: context.clusterName,
-		},
-		...(context.namespaceName
-			? [
-					{
-						id: 'namespace',
-						key: {
-							dataType: DataTypes.String,
-							id: `${k8sNamespaceNameKey}--string--tag--false`,
-							key: k8sNamespaceNameKey,
-							type: 'tag',
-						},
-						op: '=',
-						value: context.namespaceName,
-					},
-				]
-			: []),
-	];
-
-	const podNameGroupBy = [
-		{
-			dataType: DataTypes.String,
-			id: `${k8sPodNameKey}--string--tag--false`,
-			key: k8sPodNameKey,
-			type: 'tag',
-		},
-	];
-
-	const buildSingleMetricQuery = (
-		metricKey: string,
-		metricId: string,
-	): GetQueryResultsProps => ({
-		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
-		query: {
-			builder: {
-				queryData: [
-					{
-						aggregateAttribute: {
-							dataType: DataTypes.Float64,
-							id: metricId,
-							key: metricKey,
-							type: 'Gauge',
-						},
-						aggregateOperator: 'avg',
-						dataSource: DataSource.METRICS,
-						disabled: false,
-						expression: 'A',
-						filters: {
-							items: [...baseFilters],
-							op: 'AND',
-						},
-						functions: [],
-						groupBy: podNameGroupBy,
-						having: [],
-						legend: `{{${k8sPodNameKey}}}`,
-						limit: null,
-						orderBy: [],
-						queryName: 'A',
-						reduceTo: ReduceOperators.AVG,
-						spaceAggregation: 'sum',
-						stepInterval: 60,
-						timeAggregation: 'avg',
-					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-			id: v4(),
-			promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-			queryType: EQueryType.QUERY_BUILDER,
-		},
-		variables: {},
-		formatForWeb: false,
-		start,
-		end,
-	});
-
-	const filesystemUsagePercentQuery: GetQueryResultsProps = {
-		selectedTime: 'GLOBAL_TIME',
-		graphType: PANEL_TYPES.TIME_SERIES,
-		query: {
-			builder: {
-				queryData: [
-					{
-						aggregateAttribute: {
-							dataType: DataTypes.Float64,
-							id: 'fs_usage',
-							key: k8sPodFsUsageKey,
-							type: 'Gauge',
-						},
-						aggregateOperator: 'avg',
-						dataSource: DataSource.METRICS,
-						disabled: true,
-						expression: 'A',
-						filters: {
-							items: [...baseFilters],
-							op: 'AND',
-						},
-						functions: [],
-						groupBy: podNameGroupBy,
-						having: [],
-						legend: `{{${k8sPodNameKey}}}`,
-						limit: null,
-						orderBy: [],
-						queryName: 'A',
-						reduceTo: ReduceOperators.AVG,
-						spaceAggregation: 'sum',
-						stepInterval: 60,
-						timeAggregation: 'avg',
-					},
-					{
-						aggregateAttribute: {
-							dataType: DataTypes.Float64,
-							id: 'fs_capacity',
-							key: k8sPodFsCapacityKey,
-							type: 'Gauge',
-						},
-						aggregateOperator: 'avg',
-						dataSource: DataSource.METRICS,
-						disabled: true,
-						expression: 'B',
-						filters: {
-							items: [...baseFilters],
-							op: 'AND',
-						},
-						functions: [],
-						groupBy: podNameGroupBy,
-						having: [],
-						legend: `{{${k8sPodNameKey}}}`,
-						limit: null,
-						orderBy: [],
-						queryName: 'B',
-						reduceTo: ReduceOperators.AVG,
-						spaceAggregation: 'sum',
-						stepInterval: 60,
-						timeAggregation: 'avg',
-					},
-				],
-				queryFormulas: [
-					{
-						disabled: false,
-						expression: 'A/B',
-						legend: `{{${k8sPodNameKey}}}`,
-						queryName: 'F1',
-					},
-				],
-				queryTraceOperator: [],
-			},
-			clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-			id: v4(),
-			promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
-			queryType: EQueryType.QUERY_BUILDER,
-		},
-		variables: {},
-		formatForWeb: false,
-		start,
-		end,
-	};
-
-	return [
-		buildSingleMetricQuery(k8sPodCpuLimitUtilKey, 'cpu_limit_util'),
-		buildSingleMetricQuery(k8sPodCpuRequestUtilKey, 'cpu_request_util'),
-		buildSingleMetricQuery(k8sPodMemLimitUtilKey, 'mem_limit_util'),
-		buildSingleMetricQuery(k8sPodMemRequestUtilKey, 'mem_request_util'),
-		filesystemUsagePercentQuery,
-	];
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/AttributeMappingsTab.tsx

@@ -1,34 +1,18 @@
-import { DraftGroup } from '../types';
-import { AttributeMappingEditor } from '../hooks/useAttributeMappingEditor';
 import styles from './AttributeMappingsTab.module.scss';
 import MappingsTable from './components/MappingsTable/MappingsTable';
+import { useAttributeMappingStore } from './hooks/useAttributeMappingStore';
 
-interface AttributeMappingsTabProps {
-	editor: AttributeMappingEditor;
-	onEditGroup: (group: DraftGroup) => void;
-	onAddGroup: () => void;
-}
+function AttributeMappingsTab(): JSX.Element {
+	const store = useAttributeMappingStore();
 
-// "Attribute mappings" tab: the mapping-groups listing and its error state.
-// The editor is owned by the container (the header's save/discard share it),
-// so it's passed in rather than created here.
-function AttributeMappingsTab({
-	editor,
-	onEditGroup,
-	onAddGroup,
-}: AttributeMappingsTabProps): JSX.Element {
 	return (
 		<div data-testid="attribute-mappings-tab">
-			{editor.isError ? (
+			{store.isError ? (
 				<div className={styles.pageError} role="alert">
 					Failed to load mapping groups. Please try again.
 				</div>
 			) : (
-				<MappingsTable
-					editor={editor}
-					onEditGroup={onEditGroup}
-					onAddGroup={onAddGroup}
-				/>
+				<MappingsTable store={store} />
 			)}
 		</div>
 	);

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -2,19 +2,9 @@ import {
 	SpantypesFieldContextDTO as FieldContext,
 	SpantypesSpanMapperOperationDTO as MapperOperation,
 } from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
 import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-		warning: jest.fn(),
-	},
-}));
-
 import {
 	GROUPS_ENDPOINT,
 	makeGroupsResponse,
@@ -24,9 +14,7 @@ import {
 	mockGroups,
 	mockMappers,
 } from 'container/LLMObservability/AttributeMapping/__tests__/fixtures';
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
 import AttributeMappingsTab from '../AttributeMappingsTab';
-import { useAttributeMappingEditor } from '../../hooks/useAttributeMappingEditor';
 
 function setupGroups(groups = mockGroups): void {
 	server.use(
@@ -51,53 +39,6 @@ async function expandGroup(
 	await user.click(screen.getByTestId(`group-expand-${groupId}`));
 }
 
-async function openGroupActionsMenu(
-	user: ReturnType<typeof userEvent.setup>,
-	groupId: string,
-): Promise<void> {
-	await user.click(screen.getByTestId(`group-actions-${groupId}`));
-}
-
-interface AttributeMappingsTabWithStoreProps {
-	onEditGroup?: (group: DraftGroup) => void;
-	onAddGroup?: () => void;
-}
-function AttributeMappingsTabWithStore({
-	onEditGroup,
-	onAddGroup,
-}: AttributeMappingsTabWithStoreProps): JSX.Element {
-	const editor = useAttributeMappingEditor();
-	return (
-		<AttributeMappingsTab
-			editor={editor}
-			onEditGroup={onEditGroup ?? jest.fn()}
-			onAddGroup={onAddGroup ?? jest.fn()}
-		/>
-	);
-}
-
-function SaveableHarness(): JSX.Element {
-	const editor = useAttributeMappingEditor();
-	return (
-		<>
-			<button
-				type="button"
-				data-testid="save-button"
-				onClick={(): void => {
-					void editor.save();
-				}}
-			>
-				Save
-			</button>
-			<AttributeMappingsTab
-				editor={editor}
-				onEditGroup={jest.fn()}
-				onAddGroup={jest.fn()}
-			/>
-		</>
-	);
-}
-
 describe('AttributeMappingsTab (integration)', () => {
 	beforeEach(() => {
 		// Reset URL state between tests — jsdom shares window.location across a file.
@@ -110,7 +51,7 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('renders no error banner on a successful load', async () => {
 		setupGroups();
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await waitFor(() =>
 			expect(screen.getByTestId('group-name-group-1')).toBeInTheDocument(),
@@ -122,7 +63,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		server.use(
 			rest.get(GROUPS_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
 		);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await expect(screen.findByRole('alert')).resolves.toHaveTextContent(
 			'Failed to load mapping groups. Please try again.',
@@ -131,7 +72,7 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('shows the empty state when there are no groups', async () => {
 		setupGroups([]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await expect(
 			screen.findByTestId('mapper-groups-empty'),
@@ -140,96 +81,58 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('renders each group header row with its name, condition count and status', async () => {
 		setupGroups();
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		// Condition filters are no longer shown inline as clauses — the header
-		// carries a count instead (the keys surface in the group drawer).
-		// Every field carries a group-scoped testId, so assert on them directly.
-		await screen.findByTestId('group-name-group-1');
-
+		// carries a count instead (the keys surface in the group drawer, later PR).
+		// Group headers are antd Collapse panels, so rows scope to the panel item.
 		// group-1: enabled, with attribute + resource condition keys.
-		expect(screen.getByTestId('group-name-group-1')).toHaveTextContent('demo');
-		expect(screen.getByTestId('group-condition-count-group-1')).toHaveTextContent(
-			'2 conditions',
-		);
-		expect(screen.getByTestId('group-enabled-group-1')).toBeChecked();
+		const enabledRow = (await screen.findByTestId('group-name-group-1')).closest(
+			'.ant-collapse-item',
+		) as HTMLElement;
+		expect(
+			within(enabledRow).getByTestId('group-name-group-1'),
+		).toHaveTextContent('demo');
+		expect(
+			within(enabledRow).getByTestId('group-condition-count-group-1'),
+		).toHaveTextContent('2 conditions');
+		expect(within(enabledRow).getByTestId('group-enabled-group-1')).toBeChecked();
 
-		// group-2: disabled.
-		expect(screen.getByTestId('group-name-group-2')).toHaveTextContent('Tool');
-		expect(screen.getByTestId('group-condition-count-group-2')).toHaveTextContent(
-			'0 conditions',
-		);
-		expect(screen.getByTestId('group-enabled-group-2')).not.toBeChecked();
+		// group-2: disabled, with no condition keys.
+		const disabledRow = screen
+			.getByTestId('group-name-group-2')
+			.closest('.ant-collapse-item') as HTMLElement;
+		expect(within(disabledRow).getByText('Tool')).toBeInTheDocument();
+		expect(
+			within(disabledRow).getByTestId('group-condition-count-group-2'),
+		).toHaveTextContent('0 conditions');
+		expect(
+			within(disabledRow).getByTestId('group-enabled-group-2'),
+		).not.toBeChecked();
 	});
 
-	it("stages a toggle of the group's enabled state via the header switch", async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
+	it('renders the group enable state as a read-only switch', async () => {
 		setupGroups();
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
+		// The status switch reflects enabled state but is non-interactive in this
+		// read-only listing — editing lands in a later PR.
 		const toggle = await screen.findByTestId('group-enabled-group-1');
 		expect(toggle).toBeChecked();
-
-		await user.click(toggle);
-		expect(screen.getByTestId('group-enabled-group-1')).not.toBeChecked();
-	});
-
-	it('invokes onAddGroup from the toolbar button', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onAddGroup = jest.fn();
-		setupGroups();
-		render(<AttributeMappingsTabWithStore onAddGroup={onAddGroup} />);
-
-		await screen.findByTestId('group-name-group-1');
-		await user.click(screen.getByTestId('add-group-row'));
-
-		expect(onAddGroup).toHaveBeenCalledTimes(1);
-	});
-
-	it('invokes onEditGroup with the group when Edit is chosen from the actions menu', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onEditGroup = jest.fn();
-		setupGroups();
-		render(<AttributeMappingsTabWithStore onEditGroup={onEditGroup} />);
-
-		await screen.findByTestId('group-name-group-1');
-		await openGroupActionsMenu(user, 'group-1');
-		await user.click(await screen.findByRole('menuitem', { name: 'Edit' }));
-
-		expect(onEditGroup).toHaveBeenCalledTimes(1);
-		expect(onEditGroup.mock.calls[0][0]).toMatchObject({
-			localId: 'group-1',
-			name: 'demo',
-		});
-	});
-
-	it('stages a group removal when Delete is chosen from the actions menu', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-		render(<AttributeMappingsTabWithStore />);
-
-		await screen.findByTestId('group-name-group-1');
-		await openGroupActionsMenu(user, 'group-1');
-		await user.click(await screen.findByRole('menuitem', { name: 'Delete' }));
-
-		await waitFor(() =>
-			expect(screen.queryByTestId('group-name-group-1')).not.toBeInTheDocument(),
-		);
-		expect(screen.getByTestId('group-name-group-2')).toBeInTheDocument();
+		expect(toggle).toBeDisabled();
 	});
 
 	it("reveals a group's mappers on expand and hides them on collapse", async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
 		setupMappers([makeMapper({ id: 'mapper-1' })]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
-		// The clickable Collapse header owns the expanded state; find it by the
-		// aria-expanded contract rather than any framework-internal class.
+		// The toggle is the antd Collapse header, which owns the expanded state.
 		const header = screen
 			.getByTestId('group-expand-group-1')
-			.closest('[aria-expanded]') as HTMLElement;
+			.closest('.ant-collapse-header') as HTMLElement;
 		expect(header).toHaveAttribute('aria-expanded', 'false');
 
 		await expandGroup(user);
@@ -252,7 +155,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		setupMappers([
 			makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model', enabled: true }),
 		]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
 		// Mappers are not fetched until the row is expanded.
@@ -269,12 +172,29 @@ describe('AttributeMappingsTab (integration)', () => {
 		const sources = within(mapperRow).getByTestId('mapper-sources-mapper-1');
 		expect(sources).toHaveTextContent('genai.model');
 		expect(sources).toHaveTextContent('llm.model');
+		// Writes-to field context + enabled status (an inline Switch, not text).
 		expect(within(mapperRow).getByText('attribute')).toBeInTheDocument();
 		expect(
 			within(mapperRow).getByTestId('mapper-enabled-mapper-1'),
 		).toBeChecked();
 	});
 
+	it("renders a mapper's enable state as a read-only switch", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		setupGroups();
+		setupMappers([makeMapper({ id: 'mapper-1', enabled: true })]);
+		render(<AttributeMappingsTab />);
+
+		await screen.findByTestId('group-name-group-1');
+		await expandGroup(user);
+
+		// Like the group switch, a mapper's status switch reflects state without
+		// accepting flips in this read-only listing.
+		const toggle = await screen.findByTestId('mapper-enabled-mapper-1');
+		expect(toggle).toBeChecked();
+		expect(toggle).toBeDisabled();
+	});
+
 	it('shows the mappers error state when the mappers request fails', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
@@ -283,7 +203,7 @@ describe('AttributeMappingsTab (integration)', () => {
 				res(ctx.status(500)),
 			),
 		);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -297,7 +217,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
 		setupMappers([]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -323,7 +243,7 @@ describe('AttributeMappingsTab (integration)', () => {
 				},
 			}),
 		]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -335,7 +255,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
 		setupMappers([makeMapper({ id: 'mapper-1', config: { sources: [] } })]);
-		render(<AttributeMappingsTabWithStore />);
+		render(<AttributeMappingsTab />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -344,167 +264,4 @@ describe('AttributeMappingsTab (integration)', () => {
 			expect(screen.getByTestId('mapper-sources-mapper-1')).toHaveTextContent('—'),
 		);
 	});
-
-	it("re-fetches an open group's mappers on save instead of showing stale rows", async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		setupGroups();
-
-		let mappers = mockMappers;
-		server.use(
-			rest.get(mappersEndpoint('group-1'), (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(makeMappersResponse(mappers))),
-			),
-		);
-		render(<SaveableHarness />);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('group-name-group-1')).toBeInTheDocument(),
-		);
-
-		await user.click(screen.getByTestId('group-expand-group-1'));
-		await expect(
-			screen.findByTestId('mapper-target-mapper-1'),
-		).resolves.toBeInTheDocument();
-
-		mappers = [makeMapper({ id: 'mapper-2', name: 'gen_ai.response.model' })];
-
-		await user.click(screen.getByTestId('save-button'));
-
-		await expect(
-			screen.findByTestId('mapper-target-mapper-2'),
-		).resolves.toHaveTextContent('gen_ai.response.model');
-		expect(
-			screen.queryByTestId('mapper-target-mapper-1'),
-		).not.toBeInTheDocument();
-	});
-
-	it('warns and keeps the working copy when the post-save refresh fails', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		(toast.success as jest.Mock).mockClear();
-		(toast.warning as jest.Mock).mockClear();
-
-		let failRefresh = false;
-		server.use(
-			rest.get(GROUPS_ENDPOINT, (_req, res, ctx) =>
-				failRefresh
-					? res(ctx.status(500), ctx.json({ status: 'error' }))
-					: res(ctx.status(200), ctx.json(makeGroupsResponse(mockGroups))),
-			),
-			rest.patch(`${GROUPS_ENDPOINT}/:groupId`, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'ok' })),
-			),
-		);
-		render(<SaveableHarness />);
-
-		const toggle = await screen.findByTestId('group-enabled-group-1');
-		expect(toggle).toBeChecked();
-
-		await user.click(toggle);
-		expect(screen.getByTestId('group-enabled-group-1')).not.toBeChecked();
-
-		failRefresh = true;
-		await user.click(screen.getByTestId('save-button'));
-
-		await waitFor(() => expect(toast.warning).toHaveBeenCalled());
-		expect(toast.success).not.toHaveBeenCalled();
-	});
-
-	describe('mapper drawer', () => {
-		async function openGroupWithMapper(
-			user: ReturnType<typeof userEvent.setup>,
-		): Promise<void> {
-			setupGroups();
-			setupMappers([makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model' })]);
-			render(<AttributeMappingsTabWithStore />);
-
-			await screen.findByTestId('group-name-group-1');
-			await expandGroup(user);
-			await screen.findByTestId('mapper-target-mapper-1');
-		}
-
-		it('opens the add-mapping drawer from a group\'s "Add mapping" button', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			await openGroupWithMapper(user);
-
-			expect(screen.queryByTestId('mapper-form-drawer')).not.toBeInTheDocument();
-			await user.click(screen.getByTestId('add-mapper-group-1'));
-
-			await expect(
-				screen.findByTestId('mapper-form-drawer'),
-			).resolves.toBeInTheDocument();
-			expect(screen.getByText('New custom mapping')).toBeInTheDocument();
-		});
-
-		it('opens the edit drawer prefilled and locks the target attribute', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			await openGroupWithMapper(user);
-
-			await user.click(screen.getByRole('button', { name: 'Mapping actions' }));
-			await user.click(await screen.findByRole('menuitem', { name: 'Edit' }));
-
-			await expect(
-				screen.findByTestId('mapper-form-drawer'),
-			).resolves.toBeInTheDocument();
-			expect(screen.getByText('Edit mapping')).toBeInTheDocument();
-			const target = screen.getByTestId('mapper-form-target');
-			expect(target).toHaveValue('gen_ai.request.model');
-			expect(target).toBeDisabled();
-		});
-
-		it("toggles a mapper's enabled state through the store", async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			await openGroupWithMapper(user);
-
-			const toggle = screen.getByTestId('mapper-enabled-mapper-1');
-			expect(toggle).toBeChecked();
-
-			await user.click(toggle);
-
-			await waitFor(() =>
-				expect(screen.getByTestId('mapper-enabled-mapper-1')).not.toBeChecked(),
-			);
-		});
-
-		it('removes a mapper via the row action menu', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			await openGroupWithMapper(user);
-
-			await user.click(screen.getByRole('button', { name: 'Mapping actions' }));
-			await user.click(await screen.findByRole('menuitem', { name: 'Delete' }));
-
-			await waitFor(() =>
-				expect(
-					screen.queryByTestId('mapper-target-mapper-1'),
-				).not.toBeInTheDocument(),
-			);
-			expect(screen.getByTestId('mappers-empty-group-1')).toBeInTheDocument();
-		});
-
-		it('creates a new mapping through the drawer and appends it to the group', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			await openGroupWithMapper(user);
-
-			await user.click(screen.getByTestId('add-mapper-group-1'));
-			await screen.findByTestId('mapper-form-drawer');
-
-			expect(screen.getByTestId('mapper-form-save')).toBeDisabled();
-
-			await user.type(
-				screen.getByTestId('mapper-form-target'),
-				'gen_ai.response.model',
-			);
-			await user.type(screen.getByTestId('mapper-form-source-0'), 'raw.model');
-
-			const create = screen.getByTestId('mapper-form-save');
-			await waitFor(() => expect(create).toBeEnabled());
-			await user.click(create);
-
-			await waitFor(() =>
-				expect(screen.queryByTestId('mapper-form-drawer')).not.toBeInTheDocument(),
-			);
-			await expect(
-				screen.findByText('gen_ai.response.model'),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupActionsMenu/GroupActionsMenu.tsx

@@ -1,53 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, Pencil, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
-
-interface GroupActionsMenuProps {
-	group: DraftGroup;
-	onEdit: (group: DraftGroup) => void;
-	onRemove: (localId: string) => void;
-}
-
-function GroupActionsMenu({
-	group,
-	onEdit,
-	onRemove,
-}: GroupActionsMenuProps): JSX.Element {
-	const menuItems = useMemo<MenuItem[]>(
-		() => [
-			{
-				key: 'edit',
-				label: 'Edit',
-				icon: <Pencil size={14} />,
-				onClick: (): void => onEdit(group),
-			},
-			{
-				key: 'delete',
-				label: 'Delete',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				onClick: (): void => onRemove(group.localId),
-			},
-		],
-		[onEdit, onRemove, group],
-	);
-
-	return (
-		<DropdownMenuSimple menu={{ items: menuItems }} align="end">
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="icon"
-				aria-label="Group actions"
-				data-testid={`group-actions-${group.localId}`}
-			>
-				<EllipsisVertical size={16} />
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default GroupActionsMenu;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/ConditionsTooltip.module.scss

@@ -1,32 +0,0 @@
-.conditionsTooltip {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-	max-width: 320px;
-	text-align: left;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-}
-
-.keyList {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--spacing-1);
-}
-
-.key {
-	max-width: 100%;
-	padding: 0 var(--spacing-1);
-	border-radius: var(--radius-1);
-	background: var(--bg-ink-300);
-	color: var(--l1-foreground);
-	font-family: var(--font-family-mono);
-	font-size: var(--font-size-xs);
-	white-space: normal;
-	overflow-wrap: anywhere;
-	word-break: break-word;
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/ConditionsTooltip.tsx

@@ -1,61 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from './ConditionsTooltip.module.scss';
-
-interface ConditionsTooltipProps {
-	attributes: string[];
-	resource: string[];
-}
-
-function ConditionsTooltip({
-	attributes,
-	resource,
-}: ConditionsTooltipProps): JSX.Element {
-	const hasConditions = attributes.length > 0 || resource.length > 0;
-
-	if (!hasConditions) {
-		return (
-			<Typography.Text as="span" size="small" color="muted">
-				No conditions set up
-			</Typography.Text>
-		);
-	}
-
-	return (
-		<div
-			className={styles.conditionsTooltip}
-			data-testid="group-conditions-tooltip"
-		>
-			{attributes.length > 0 && (
-				<div className={styles.section}>
-					<Typography.Text as="span" size="small" color="muted">
-						Runs when a span attribute key contains
-					</Typography.Text>
-					<div className={styles.keyList}>
-						{attributes.map((key) => (
-							<code key={key} className={styles.key}>
-								{key}
-							</code>
-						))}
-					</div>
-				</div>
-			)}
-			{resource.length > 0 && (
-				<div className={styles.section}>
-					<Typography.Text as="span" size="sm" color="muted">
-						{attributes.length > 0 ? 'or when' : 'Runs when'} a resource key contains
-					</Typography.Text>
-					<div className={styles.keyList}>
-						{resource.map((key) => (
-							<code key={key} className={styles.key}>
-								{key}
-							</code>
-						))}
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ConditionsTooltip;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.module.scss

@@ -7,7 +7,6 @@
 
 .groupName {
 	color: var(--l1-foreground);
-	font-weight: var(--font-weight-semibold);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -18,15 +17,3 @@
 	font-size: var(--font-size-xs);
 	white-space: nowrap;
 }
-
-.conditionCount {
-	composes: groupCount;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	cursor: help;
-}
-
-.conditionInfoIcon {
-	color: var(--l3-foreground);
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeader/GroupHeader.tsx

@@ -1,14 +1,10 @@
-import { Info } from '@signozhq/icons';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
 
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
-
-import ConditionsTooltip from './ConditionsTooltip';
 import styles from './GroupHeader.module.scss';
 
 interface GroupHeaderProps {
-	group: DraftGroup;
+	group: MappingGroup;
 }
 
 function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
@@ -17,33 +13,22 @@ function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
 	return (
 		<div
 			className={styles.groupHeaderLabel}
-			data-testid={`group-expand-${group.localId}`}
+			data-testid={`group-expand-${group.id}`}
 		>
 			<Typography.Text
 				as="span"
 				className={styles.groupName}
-				testId={`group-name-${group.localId}`}
+				testId={`group-name-${group.id}`}
 			>
 				{group.name}
 			</Typography.Text>
-			<TooltipSimple
-				title={
-					<ConditionsTooltip
-						attributes={group.attributes}
-						resource={group.resource}
-					/>
-				}
-				side="bottom"
-				align="start"
+			<Typography.Text
+				as="span"
+				className={styles.groupCount}
+				testId={`group-condition-count-${group.id}`}
 			>
-				<span
-					className={styles.conditionCount}
-					data-testid={`group-condition-count-${group.localId}`}
-				>
-					· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
-					<Info size={12} className={styles.conditionInfoIcon} />
-				</span>
-			</TooltipSimple>
+				· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
+			</Typography.Text>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,22 +1,13 @@
 import { Switch } from '@signozhq/ui/switch';
 
-import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
-import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
 import styles from './GroupHeaderActions.module.scss';
 
 interface GroupHeaderActionsProps {
-	group: DraftGroup;
-	onToggle: (localId: string, enabled: boolean) => void;
-	onEdit: (group: DraftGroup) => void;
-	onRemove: (localId: string) => void;
+	group: MappingGroup;
 }
 
-function GroupHeaderActions({
-	group,
-	onToggle,
-	onEdit,
-	onRemove,
-}: GroupHeaderActionsProps): JSX.Element {
+function GroupHeaderActions({ group }: GroupHeaderActionsProps): JSX.Element {
 	return (
 		<div
 			className={styles.actions}
@@ -24,10 +15,10 @@ function GroupHeaderActions({
 		>
 			<Switch
 				value={group.enabled}
-				onChange={(checked): void => onToggle(group.localId, checked)}
-				testId={`group-enabled-${group.localId}`}
+				// We don't yet support toggling a group's enabled state in this read-only PR, so disable the switch. A later PR will add the toggle handler and its drawer.
+				disabled
+				testId={`group-enabled-${group.id}`}
 			/>
-			<GroupActionsMenu group={group} onEdit={onEdit} onRemove={onRemove} />
 		</div>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.module.scss

@@ -8,26 +8,7 @@
 	color: var(--l3-foreground);
 }
 
-.stateContent {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-
-	svg {
-		flex-shrink: 0;
-	}
-}
-
-.addMapperRow .stateCell {
-	padding-top: var(--spacing-2);
-	padding-bottom: var(--spacing-2);
-}
-
 .stateCell {
 	padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-12);
 	font-size: var(--periscope-font-size-base);
 }
-
-.addMapperCell {
-	padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-6);
-}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -1,20 +1,14 @@
-import { useEffect } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { ArrowLeftRight, Plus, TriangleAlert } from '@signozhq/icons';
 import { useListSpanMappers } from 'api/generated/services/spanmapper';
 import { motion } from 'motion/react';
 
 import {
-	DraftGroup,
-	DraftMapper,
-	Mapper,
+	MappingGroup,
+	Mapping,
 } from 'container/LLMObservability/AttributeMapping/types';
-import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { buildMappingsFromListResponse } from 'container/LLMObservability/AttributeMapping/utils';
 import { COLUMN_COUNT } from '../constants';
-import MapperRow from '../MapperRow/MapperRow';
-import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
-import MappingsColgroup from '../MappingsColgroup/MappingsColgroup';
+import MapperRow, { MapperRowSkeleton } from '../MapperRow';
+import MappingsColgroup from '../MappingsColgroup';
 import styles from './GroupMappers.module.scss';
 
 const MAPPER_SKELETON_ROWS = 1;
@@ -25,135 +19,72 @@ const STATE_ROW_MOTION = {
 	transition: { duration: 0.18, ease: 'easeOut' },
 } as const;
 
-interface GroupMappersProps {
-	group: DraftGroup;
-	editor: AttributeMappingEditor;
-	onAddMapper: (groupLocalId: string) => void;
-	onEditMapper: (groupLocalId: string, mapper: DraftMapper) => void;
+interface StateRowProps {
+	groupId: string;
 }
 
-function GroupMappers({
-	group,
-	editor,
-	onAddMapper,
-	onEditMapper,
-}: GroupMappersProps): JSX.Element {
-	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
-
-	const hasServerId = group.serverId !== null;
-	const { data, isLoading, isError } = useListSpanMappers(
-		{ groupId: group.serverId ?? '' },
-		// refetchOnMount: false — the Collapse destroys inactive panels, so a
-		// group's mappers would otherwise refetch on every expand. Cached data is
-		// reused instead; the save flow evicts these caches so post-edit expands
-		// still fetch fresh.
-		{ query: { enabled: hasServerId, refetchOnMount: false } },
-	);
-
-	useEffect(() => {
-		const items = data?.data?.items;
-		if (group.serverId && items) {
-			hydrateGroupMappers(group.serverId, items as unknown as Mapper[]);
-		}
-	}, [group.serverId, data, hydrateGroupMappers]);
-
-	const isLoadingMappers = hasServerId && isLoading;
-	const isErrorMappers = hasServerId && isError;
-	const mapperCount = group.mappers.length;
-
-	const skeletonRows = Array.from({ length: MAPPER_SKELETON_ROWS }).map(
-		(_, index) => (
-			// eslint-disable-next-line react/no-array-index-key
-			<MapperRowSkeleton key={`mapper-skeleton-${index}`} />
-		),
-	);
-
-	const errorRow = (
-		<motion.tr
-			key="error"
-			className={styles.mapperStateRow}
-			{...STATE_ROW_MOTION}
-		>
+function ErrorRow({ groupId }: StateRowProps): JSX.Element {
+	return (
+		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
 			<td
 				colSpan={COLUMN_COUNT}
 				className={styles.stateCell}
-				data-testid={`mappers-error-${group.localId}`}
+				data-testid={`mappers-error-${groupId}`}
 			>
-				<span className={styles.stateContent}>
-					<TriangleAlert size={14} color="var(--danger-background)" />
-					<Typography.Text as="span" size="base">
-						Failed to load mappings. Please try again.
-					</Typography.Text>
-				</span>
+				Failed to load mappings. Please try again.
 			</td>
 		</motion.tr>
 	);
+}
 
-	const emptyRow = (
-		<motion.tr
-			key="empty"
-			className={styles.mapperStateRow}
-			{...STATE_ROW_MOTION}
-		>
+function EmptyRow({ groupId }: StateRowProps): JSX.Element {
+	return (
+		<motion.tr className={styles.mapperStateRow} {...STATE_ROW_MOTION}>
 			<td
 				colSpan={COLUMN_COUNT}
 				className={styles.stateCell}
-				data-testid={`mappers-empty-${group.localId}`}
+				data-testid={`mappers-empty-${groupId}`}
 			>
-				<span className={styles.stateContent}>
-					<ArrowLeftRight size={14} />
-					<Typography.Text as="span" size="base" color="muted">
-						No mappings in this group yet.
-					</Typography.Text>
-				</span>
+				No mappings in this group yet.
 			</td>
 		</motion.tr>
 	);
+}
 
-	const addMapperRow = (
-		<motion.tr
-			key="add-mapper"
-			className={styles.addMapperRow}
-			{...STATE_ROW_MOTION}
-		>
-			<td colSpan={COLUMN_COUNT} className={styles.addMapperCell}>
-				<Button
-					variant="link"
-					color="primary"
-					size="sm"
-					prefix={<Plus size={14} />}
-					onClick={(): void => onAddMapper(group.localId)}
-					testId={`add-mapper-${group.localId}`}
-				>
-					Add mapping
-				</Button>
-			</td>
-		</motion.tr>
+interface GroupMappersProps {
+	group: MappingGroup;
+}
+
+function GroupMappers({ group }: GroupMappersProps): JSX.Element {
+	const {
+		data: mappers = [],
+		isLoading,
+		isError,
+	} = useListSpanMappers<Mapping[]>(
+		{
+			groupId: group.id,
+		},
+		{
+			query: {
+				refetchOnMount: false,
+				select: buildMappingsFromListResponse,
+			},
+		},
 	);
 
-	const mapperRows = group.mappers.map((mapper, index) => (
-		<MapperRow
-			key={mapper.localId}
-			mapper={mapper}
-			index={index}
-			onEdit={(next): void => onEditMapper(group.localId, next)}
-			onRemove={(localId): void => removeMapper(group.localId, localId)}
-			onToggle={(localId, enabled): void =>
-				toggleMapper(group.localId, localId, enabled)
-			}
-		/>
-	));
-
-	// The add-mapping row trails every non-error state (including loading/empty).
 	let rows: JSX.Element[];
-	if (isErrorMappers) {
-		rows = [errorRow];
-	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows, addMapperRow];
-	} else if (mapperCount === 0) {
-		rows = [emptyRow, addMapperRow];
+	if (isError) {
+		rows = [<ErrorRow key="error" groupId={group.id} />];
+	} else if (isLoading) {
+		rows = Array.from({ length: MAPPER_SKELETON_ROWS }).map((_, index) => (
+			<MapperRowSkeleton key={`mapper-skeleton-${index}`} />
+		));
+	} else if (mappers.length === 0) {
+		rows = [<EmptyRow key="empty" groupId={group.id} />];
 	} else {
-		rows = [...mapperRows, addMapperRow];
+		rows = mappers.map((mapper, index) => (
+			<MapperRow key={mapper.id} mapper={mapper} index={index} />
+		));
 	}
 
 	return (

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperActionsMenu/MapperActionsMenu.tsx

@@ -1,53 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, Pencil, Trash2 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
-
-interface MapperActionsMenuProps {
-	mapper: DraftMapper;
-	onEdit: (mapper: DraftMapper) => void;
-	onRemove: (localId: string) => void;
-}
-
-function MapperActionsMenu({
-	mapper,
-	onEdit,
-	onRemove,
-}: MapperActionsMenuProps): JSX.Element {
-	const menuItems = useMemo<MenuItem[]>(
-		() => [
-			{
-				key: 'edit',
-				label: 'Edit',
-				icon: <Pencil size={14} />,
-				onClick: (): void => onEdit(mapper),
-			},
-			{
-				key: 'delete',
-				label: 'Delete',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				onClick: (): void => onRemove(mapper.localId),
-			},
-		],
-		[onEdit, onRemove, mapper],
-	);
-
-	return (
-		<DropdownMenuSimple menu={{ items: menuItems }} align="end">
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="icon"
-				aria-label="Mapping actions"
-				testId={`mapper-actions-${mapper.localId}`}
-			>
-				<EllipsisVertical size={16} />
-			</Button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default MapperActionsMenu;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.module.scss

@@ -11,22 +11,11 @@
 	font-size: var(--periscope-font-size-base);
 }
 
+// Indent the first cell so mapper rows read as nested under their group.
 .targetCell {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	min-width: 0;
 	padding-left: var(--spacing-12);
 }
 
-.targetName {
-	min-width: 0;
-}
-
-.targetContextBadge {
-	flex-shrink: 0;
-}
-
 // Shorter vertical padding so the loading state reads as a compact placeholder.
 .skeletonCell {
 	composes: cell;
@@ -40,7 +29,7 @@
 	}
 }
 
-.actionsCell {
+.statusCell {
 	text-align: right;
 }
 
@@ -58,10 +47,6 @@
 	gap: var(--spacing-3);
 }
 
-.sourceChip {
-	font-family: var(--font-mono, monospace);
-}
-
 .sourceChipText {
 	display: block;
 	max-width: 220px;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -5,8 +5,7 @@ import { SpantypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas'
 import cx from 'classnames';
 import { motion } from 'motion/react';
 
-import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
-import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
+import { Mapping } from 'container/LLMObservability/AttributeMapping/types';
 import styles from './MapperRow.module.scss';
 
 const MAX_VISIBLE_SOURCES = 3;
@@ -16,20 +15,11 @@ const MAX_STAGGERED_ROWS = 6;
 const STAGGER_STEP = 0.03;
 
 interface MapperRowProps {
-	mapper: DraftMapper;
+	mapper: Mapping;
 	index: number;
-	onEdit: (mapper: DraftMapper) => void;
-	onRemove: (localId: string) => void;
-	onToggle: (localId: string, enabled: boolean) => void;
 }
 
-function MapperRow({
-	mapper,
-	index,
-	onEdit,
-	onRemove,
-	onToggle,
-}: MapperRowProps): JSX.Element {
+function MapperRow({ mapper, index }: MapperRowProps): JSX.Element {
 	const sources = mapper.sources ?? [];
 	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
 	const remainingSources = sources.length - visibleSources.length;
@@ -37,7 +27,7 @@ function MapperRow({
 	return (
 		<motion.tr
 			className={styles.mapperRow}
-			data-testid={`mapper-row-${mapper.localId}`}
+			data-testid={`mapper-row-${mapper.id}`}
 			initial={{ opacity: 0, y: -4 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{
@@ -47,38 +37,22 @@ function MapperRow({
 		>
 			<td className={cx(styles.cell, styles.targetCell)}>
 				<Typography.Text
-					weight="semibold"
 					truncate={1}
 					title={mapper.name}
-					className={styles.targetName}
-					data-testid={`mapper-target-${mapper.localId}`}
+					data-testid={`mapper-target-${mapper.id}`}
 				>
 					{mapper.name}
 				</Typography.Text>
-				<Badge
-					color={
-						mapper.fieldContext === SpantypesFieldContextDTO.resource
-							? 'amber'
-							: 'robin'
-					}
-					variant="outline"
-					className={styles.targetContextBadge}
-				>
-					{mapper.fieldContext}
-				</Badge>
 			</td>
 			<td className={styles.cell}>
 				{sources.length === 0 ? (
-					<span
-						className={styles.muted}
-						data-testid={`mapper-sources-${mapper.localId}`}
-					>
+					<span className={styles.muted} data-testid={`mapper-sources-${mapper.id}`}>
 						—
 					</span>
 				) : (
 					<div
 						className={styles.sources}
-						data-testid={`mapper-sources-${mapper.localId}`}
+						data-testid={`mapper-sources-${mapper.id}`}
 					>
 						{visibleSources.map((source) => (
 							<Badge
@@ -100,14 +74,25 @@ function MapperRow({
 					</div>
 				)}
 			</td>
-			<td className={cx(styles.cell, styles.actionsCell)}>
+			<td className={styles.cell}>
+				<Badge
+					color={
+						mapper.fieldContext === SpantypesFieldContextDTO.resource
+							? 'amber'
+							: 'robin'
+					}
+					variant="outline"
+				>
+					{mapper.fieldContext}
+				</Badge>
+			</td>
+			<td className={cx(styles.cell, styles.statusCell)}>
 				<div className={styles.rowActions}>
 					<Switch
 						value={mapper.enabled}
-						onChange={(checked): void => onToggle(mapper.localId, checked)}
-						testId={`mapper-enabled-${mapper.localId}`}
+						disabled
+						testId={`mapper-enabled-${mapper.id}`}
 					/>
-					<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
 				</div>
 			</td>
 		</motion.tr>

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRowSkeleton.tsx

@@ -8,7 +8,6 @@ function MapperRowSkeleton(): JSX.Element {
 		<tr className={styles.mapperRow}>
 			<td className={cx(styles.skeletonCell, styles.targetCell)}>
 				<Skeleton.Input active size="small" style={{ width: '55%' }} />
-				<Skeleton.Button active size="small" style={{ width: 72 }} />
 			</td>
 			<td className={styles.skeletonCell}>
 				<div className={styles.sources}>
@@ -16,7 +15,10 @@ function MapperRowSkeleton(): JSX.Element {
 					<Skeleton.Button active size="small" style={{ width: 56 }} />
 				</div>
 			</td>
-			<td className={cx(styles.skeletonCell, styles.actionsCell)}>
+			<td className={styles.skeletonCell}>
+				<Skeleton.Button active size="small" style={{ width: 72 }} />
+			</td>
+			<td className={cx(styles.skeletonCell, styles.statusCell)}>
 				<div className={styles.rowActions}>
 					<Skeleton.Button active size="small" shape="round" />
 				</div>

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.module.scss

@@ -2,6 +2,10 @@
 	width: 32%;
 }
 
-.colActions {
-	width: 176px;
+.colWritesTo {
+	width: 140px;
+}
+
+.colStatus {
+	width: 120px;
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsColgroup/MappingsColgroup.tsx

@@ -5,7 +5,8 @@ function MappingsColgroup(): JSX.Element {
 		<colgroup>
 			<col className={styles.colTarget} />
 			<col />
-			<col className={styles.colActions} />
+			<col className={styles.colWritesTo} />
+			<col className={styles.colStatus} />
 		</colgroup>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.module.scss

@@ -1,16 +1,3 @@
-.tableWrapper {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.toolbar {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	padding: var(--spacing-4);
-}
-
 .table {
 	width: 100%;
 	border-collapse: collapse;
@@ -18,7 +5,7 @@
 }
 
 .headerRow {
-	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
 }
 
 .headerCell {
@@ -86,12 +73,7 @@
 	}
 }
 
-.tableState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--spacing-3);
+.tableEmpty {
 	padding: var(--spacing-12) var(--spacing-6);
 	text-align: center;
 	color: var(--l3-foreground);

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -1,96 +1,30 @@
-import { useCallback, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight, Layers, Plus } from '@signozhq/icons';
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { Collapse, type CollapseProps, Skeleton } from 'antd';
 
-import MapperFormDrawer from 'container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer';
-import { useMapperFormDrawer } from 'container/LLMObservability/AttributeMapping/components/MapperFormDrawer/hooks/useMapperFormDrawer';
-import {
-	DraftGroup,
-	DraftMapper,
-} from 'container/LLMObservability/AttributeMapping/types';
-import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
-import GroupHeader from './GroupHeader/GroupHeader';
-import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
-import GroupMappers from './GroupMappers/GroupMappers';
-import MappingsColgroup from './MappingsColgroup/MappingsColgroup';
+import { AttributeMappingStore } from 'container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore';
+import GroupHeader from './GroupHeader';
+import GroupHeaderActions from './GroupHeaderActions';
+import GroupMappers from './GroupMappers';
+import MappingsColgroup from './MappingsColgroup';
 import styles from './MappingsTable.module.scss';
 
 const SKELETON_ROW_COUNT = 3;
 
 interface MappingsTableProps {
-	editor: AttributeMappingEditor;
-	onEditGroup: (group: DraftGroup) => void;
-	onAddGroup: () => void;
+	store: AttributeMappingStore;
 }
 
-function MappingsTable({
-	editor,
-	onEditGroup,
-	onAddGroup,
-}: MappingsTableProps): JSX.Element {
+function MappingsTable({ store }: MappingsTableProps): JSX.Element {
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
-	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
-	const drawer = useMapperFormDrawer();
 
-	const { upsertMapper, removeMapper } = editor;
+	const isEmpty = !store.isLoading && store.groups.length === 0;
 
-	const handleAddMapper = useCallback(
-		(groupLocalId: string): void => {
-			setTargetGroupId(groupLocalId);
-			// Keep the group open so the staged row is visible after save.
-			setExpandedGroups((prev) =>
-				prev.includes(groupLocalId) ? prev : [...prev, groupLocalId],
-			);
-			drawer.openForAdd();
-		},
-		[drawer],
-	);
-
-	const handleEditMapper = useCallback(
-		(groupLocalId: string, mapper: DraftMapper): void => {
-			setTargetGroupId(groupLocalId);
-			drawer.openForEdit(mapper);
-		},
-		[drawer],
-	);
-
-	const handleSaveMapper = useCallback((): void => {
-		if (targetGroupId) {
-			upsertMapper(targetGroupId, drawer.draft);
-		}
-		drawer.close();
-	}, [targetGroupId, upsertMapper, drawer]);
-
-	const handleDeleteMapper = useCallback((): void => {
-		if (targetGroupId && drawer.draft.id) {
-			removeMapper(targetGroupId, drawer.draft.id);
-		}
-		drawer.close();
-	}, [targetGroupId, removeMapper, drawer]);
-
-	const isEmpty = !editor.isLoading && editor.groups.length === 0;
-
-	const items: CollapseProps['items'] = editor.groups.map((group) => ({
-		key: group.localId,
+	const items: CollapseProps['items'] = store.groups.map((group) => ({
+		key: group.id,
 		label: <GroupHeader group={group} />,
-		extra: (
-			<GroupHeaderActions
-				group={group}
-				onToggle={editor.toggleGroup}
-				onEdit={onEditGroup}
-				onRemove={editor.removeGroup}
-			/>
-		),
-		children: (
-			<GroupMappers
-				group={group}
-				editor={editor}
-				onAddMapper={handleAddMapper}
-				onEditMapper={handleEditMapper}
-			/>
-		),
+		extra: <GroupHeaderActions group={group} />,
+		children: <GroupMappers group={group} />,
 	}));
 
 	const skeletonBanners = (
@@ -111,79 +45,48 @@ function MappingsTable({
 					</div>
 					<div className={styles.skeletonGroupRight}>
 						<Skeleton.Button active size="small" shape="round" />
-						<Skeleton.Avatar active size={16} shape="square" />
 					</div>
 				</div>
 			))}
 		</div>
 	);
 
-	return (
-		<div className={styles.tableWrapper}>
-			<div className={styles.toolbar}>
-				<Button
-					variant="link"
-					color="primary"
-					prefix={<Plus size={14} />}
-					onClick={onAddGroup}
-					testId="add-group-row"
-					disabled={editor.isLoading}
-				>
-					Add a new group
-				</Button>
+	if (isEmpty) {
+		return (
+			<div className={styles.tableEmpty} data-testid="mapper-groups-empty">
+				No mapping groups yet.
 			</div>
+		);
+	}
 
-			{isEmpty ? (
-				<div className={styles.tableState} data-testid="mapper-groups-empty">
-					<Layers size={24} />
-					<Typography.Text as="span" size="base" color="muted">
-						No mapping groups yet.
-					</Typography.Text>
-				</div>
+	return (
+		<div data-testid="mappings-table">
+			<table className={styles.table}>
+				<MappingsColgroup />
+				<thead>
+					<tr className={styles.headerRow}>
+						<th className={styles.headerCell}>Target</th>
+						<th className={styles.headerCell}>Sources</th>
+						<th className={styles.headerCell}>Writes to</th>
+						<th className={styles.headerCell}>Status</th>
+					</tr>
+				</thead>
+			</table>
+			{store.isLoading ? (
+				skeletonBanners
 			) : (
-				<div data-testid="mappings-table">
-					<table className={styles.table}>
-						<MappingsColgroup />
-						<thead>
-							<tr className={styles.headerRow}>
-								<th className={styles.headerCell}>Target</th>
-								<th className={styles.headerCell}>Sources</th>
-								<th className={styles.headerCell}>Actions</th>
-							</tr>
-						</thead>
-					</table>
-					{editor.isLoading ? (
-						skeletonBanners
-					) : (
-						<Collapse
-							className={styles.groupsCollapse}
-							activeKey={expandedGroups}
-							onChange={(keys): void =>
-								setExpandedGroups(Array.isArray(keys) ? keys : [keys])
-							}
-							bordered={false}
-							destroyInactivePanel
-							expandIcon={({ isActive }): JSX.Element =>
-								isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-							}
-							items={items}
-						/>
-					)}
-				</div>
-			)}
-
-			{drawer.isOpen && (
-				<MapperFormDrawer
-					isOpen={drawer.isOpen}
-					mode={drawer.mode}
-					draft={drawer.draft}
-					setDraft={drawer.setDraft}
-					onClose={drawer.close}
-					onSave={handleSaveMapper}
-					onDelete={handleDeleteMapper}
-					isSaving={false}
-					isDeleting={false}
-					saveError={null}
+				<Collapse
+					className={styles.groupsCollapse}
+					activeKey={expandedGroups}
+					onChange={(keys): void =>
+						setExpandedGroups(Array.isArray(keys) ? keys : [keys])
+					}
+					bordered={false}
+					destroyInactivePanel
+					expandIcon={({ isActive }): JSX.Element =>
+						isActive ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+					}
+					items={items}
 				/>
 			)}
 		</div>

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/constants.ts

@@ -1 +1 @@
-export const COLUMN_COUNT = 3;
+export const COLUMN_COUNT = 4;

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/hooks/useAttributeMappingStore.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import { SpantypesSpanMapperGroupDTO } from 'api/generated/services/sigNoz.schemas';
+import { useListSpanMapperGroups } from 'api/generated/services/spanmapper';
+
+import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { buildMappingGroup } from 'container/LLMObservability/AttributeMapping/utils';
+
+export interface AttributeMappingStore {
+	groups: MappingGroup[];
+	isLoading: boolean;
+	isError: boolean;
+}
+
+// Read-only store for the listing view: loads the server groups only. Each
+// group's mappers are fetched lazily when its panel is expanded (see
+// GroupMappers), so page load is a single request instead of an N+1 fan-out
+// across every group. Editing (enabled toggles, save/discard) and its drawers
+// land in a later PR — this PR only lists.
+export function useAttributeMappingStore(): AttributeMappingStore {
+	const groupsQuery = useListSpanMapperGroups();
+
+	const groups = useMemo<MappingGroup[]>(() => {
+		const serverGroups: SpantypesSpanMapperGroupDTO[] =
+			groupsQuery.data?.data?.items ?? [];
+		return serverGroups.map((group) => buildMappingGroup(group));
+	}, [groupsQuery.data]);
+
+	return {
+		groups,
+		isLoading: groupsQuery.isLoading,
+		isError: groupsQuery.isError,
+	};
+}

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.module.scss

@@ -1,18 +1,6 @@
 .llmObservabilityAttributeMapping {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-4);
-	padding: var(--spacing-2) var(--spacing-2);
-
-	--tab-content-padding: 0;
-	--tab-text-color: var(--l1-foreground);
-	--tab-active-text-color: var(--l1-foreground);
-}
-
-.pageError {
-	padding: var(--padding-3) var(--padding-4);
-	border-radius: var(--radius-2);
-	background: var(--callout-error-background);
-	color: var(--callout-error-title);
-	font-size: var(--periscope-font-size-base);
+	gap: var(--spacing-8);
+	padding: var(--spacing-0);
 }

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -1,45 +1,17 @@
-import { useCallback } from 'react';
-import { Divider } from '@signozhq/ui/divider';
 import { Tabs } from '@signozhq/ui/tabs';
-import { useConfirmableAction } from 'hooks/useConfirmableAction';
 
-import AttributeMappingHeader from './components/AttributeMappingHeader/AttributeMappingHeader';
+import AttributeMappingHeader from './components/AttributeMappingHeader';
 import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
-import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
-import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
-import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
-import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
+
+const noop = (): void => undefined;
 
 function LLMObservabilityAttributeMapping(): JSX.Element {
-	const editor = useAttributeMappingEditor();
-	const groupDrawer = useGroupFormDrawer();
-
-	const { discard } = editor;
-	// Discarding wipes the whole working copy, so gate it behind a confirm
-	// prompt rather than firing straight from the button.
-	const discardConfirm = useConfirmableAction(
-		useCallback(async (): Promise<void> => {
-			discard();
-		}, [discard]),
-	);
-
-	const handleGroupSave = useCallback((): void => {
-		editor.upsertGroup(groupDrawer.draft);
-		groupDrawer.close();
-	}, [editor, groupDrawer]);
-
 	const tabItems = [
 		{
 			key: 'attribute-mappings',
-			label: 'Attribute Mappings',
-			children: (
-				<AttributeMappingsTab
-					editor={editor}
-					onEditGroup={groupDrawer.openForEdit}
-					onAddGroup={groupDrawer.openForAdd}
-				/>
-			),
+			label: 'Attribute mappings',
+			children: <AttributeMappingsTab />,
 		},
 		{
 			key: 'test',
@@ -56,39 +28,17 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			data-testid="llm-observability-attribute-mapping-page"
 		>
 			<AttributeMappingHeader
-				isDirty={editor.isDirty}
-				isSaving={editor.isSaving}
-				onDiscard={discardConfirm.request}
-				onSave={editor.save}
+				isDirty={false}
+				isSaving={false}
+				onDiscard={noop}
+				onSave={noop}
 			/>
 
-			{editor.saveError && (
-				<div className={styles.pageError} role="alert">
-					{editor.saveError}
-				</div>
-			)}
-			<Divider />
-
 			<Tabs
 				testId="attribute-mapping-tabs"
 				defaultValue="attribute-mappings"
 				items={tabItems}
 			/>
-			{groupDrawer.isOpen && (
-				<GroupFormDrawer
-					isOpen={groupDrawer.isOpen}
-					mode={groupDrawer.mode}
-					draft={groupDrawer.draft}
-					setDraft={groupDrawer.setDraft}
-					onClose={groupDrawer.close}
-					onSave={handleGroupSave}
-				/>
-			)}
-			<DiscardChangesDialog
-				open={discardConfirm.open}
-				onConfirm={discardConfirm.confirm}
-				onCancel={discardConfirm.cancel}
-			/>
 		</div>
 	);
 }

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -1,5 +1,5 @@
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';
 
 import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
 import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';
@@ -34,7 +34,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 		render(<LLMObservabilityAttributeMapping />);
 
 		expect(
-			screen.getByRole('tab', { name: 'Attribute Mappings' }),
+			screen.getByRole('tab', { name: 'Attribute mappings' }),
 		).toBeInTheDocument();
 		expect(screen.getByRole('tab', { name: 'Test' })).toBeInTheDocument();
 	});
@@ -43,7 +43,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 		render(<LLMObservabilityAttributeMapping />);
 
 		const attributeMappingsTab = screen.getByRole('tab', {
-			name: 'Attribute Mappings',
+			name: 'Attribute mappings',
 		});
 		expect(attributeMappingsTab).toHaveAttribute('data-state', 'active');
 		await expect(
@@ -64,44 +64,4 @@ describe('LLMObservabilityAttributeMapping', () => {
 		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('unsaved-changes')).not.toBeInTheDocument();
 	});
-
-	it('prompts before discarding, then reverts staged changes on confirm', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservabilityAttributeMapping />);
-
-		const toggle = await screen.findByTestId('group-enabled-group-1');
-		expect(toggle).toBeChecked();
-		await user.click(toggle);
-		expect(screen.getByTestId('group-enabled-group-1')).not.toBeChecked();
-
-		await user.click(screen.getByTestId('discard-changes-btn'));
-		const confirmBtn = await screen.findByTestId('discard-changes-confirm-btn');
-		expect(screen.getByTestId('group-enabled-group-1')).not.toBeChecked();
-
-		await user.click(confirmBtn);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('group-enabled-group-1')).toBeChecked(),
-		);
-		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
-	});
-
-	it('keeps staged changes when the discard prompt is dismissed', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<LLMObservabilityAttributeMapping />);
-
-		const toggle = await screen.findByTestId('group-enabled-group-1');
-		await user.click(toggle);
-
-		await user.click(screen.getByTestId('discard-changes-btn'));
-		await user.click(await screen.findByTestId('discard-changes-cancel-btn'));
-
-		await waitFor(() =>
-			expect(
-				screen.queryByTestId('discard-changes-confirm-btn'),
-			).not.toBeInTheDocument(),
-		);
-		expect(screen.getByTestId('group-enabled-group-1')).not.toBeChecked();
-		expect(screen.getByTestId('discard-changes-btn')).toBeInTheDocument();
-	});
 });

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.module.scss

@@ -2,8 +2,7 @@
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
-	margin-left: var(--spacing-2);
-	margin-top: var(--spacing-4);
+	gap: var(--spacing-8);
 }
 
 .pageHeaderActions {

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/index.ts

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

frontend/src/container/LLMObservability/AttributeMapping/components/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -1,56 +0,0 @@
-import { AlertDialog } from '@signozhq/ui/alert-dialog';
-import { Button } from '@signozhq/ui/button';
-import { Trash2, X } from '@signozhq/icons';
-
-interface DiscardChangesDialogProps {
-	open: boolean;
-	onConfirm: () => void;
-	onCancel: () => void;
-}
-
-function DiscardChangesDialog({
-	open,
-	onConfirm,
-	onCancel,
-}: DiscardChangesDialogProps): JSX.Element {
-	return (
-		<AlertDialog
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onCancel();
-				}
-			}}
-			width="narrow"
-			title="Discard unsaved changes?"
-			titleIcon={<Trash2 size={16} />}
-			footer={
-				<>
-					<Button
-						variant="solid"
-						color="secondary"
-						onClick={onCancel}
-						prefix={<X size={12} />}
-						testId="discard-changes-cancel-btn"
-					>
-						Keep editing
-					</Button>
-					<Button
-						variant="solid"
-						color="destructive"
-						onClick={onConfirm}
-						prefix={<Trash2 size={12} />}
-						testId="discard-changes-confirm-btn"
-					>
-						Discard changes
-					</Button>
-				</>
-			}
-		>
-			This reverts every unsaved group and mapping change back to the last saved
-			state. This action cannot be undone.
-		</AlertDialog>
-	);
-}
-
-export default DiscardChangesDialog;

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/GroupFormDrawer.module.scss

@@ -1,39 +0,0 @@
-.groupForm {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-10);
-	padding: var(--spacing-2) 0;
-}
-
-.groupFormField {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.groupFormFieldRow {
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.groupFormLabel {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
-}
-
-.groupFormHint {
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-}
-
-.groupFormFooter {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	width: 100%;
-	gap: var(--spacing-4);
-}

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/GroupFormDrawer.tsx

@@ -1,117 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Input } from '@signozhq/ui/input';
-import { Switch } from '@signozhq/ui/switch';
-
-import ConditionKeyList from './components/ConditionKeyList/ConditionKeyList';
-import styles from './GroupFormDrawer.module.scss';
-import { FieldContext, GroupDraft, MapperDraftMode } from '../../types';
-import { isGroupDraftValid } from '../../utils';
-
-interface GroupFormDrawerProps {
-	isOpen: boolean;
-	mode: MapperDraftMode;
-	draft: GroupDraft;
-	setDraft: (next: GroupDraft) => void;
-	onClose: () => void;
-	onSave: () => void;
-}
-
-function GroupFormDrawer({
-	isOpen,
-	mode,
-	draft,
-	setDraft,
-	onClose,
-	onSave,
-}: GroupFormDrawerProps): JSX.Element {
-	const isEdit = mode === 'edit';
-	const isValid = isGroupDraftValid(draft);
-
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			title={isEdit ? 'Edit group' : 'New group'}
-			subTitle="A group gates which spans its mappings run on"
-			width="wide"
-			testId="group-form-drawer"
-			footer={
-				<div className={styles.groupFormFooter}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						onClick={onClose}
-						testId="group-form-cancel"
-					>
-						Cancel
-					</Button>
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={onSave}
-						disabled={!isValid}
-						testId="group-form-save"
-					>
-						{isEdit ? 'Save group' : 'Create group'}
-					</Button>
-				</div>
-			}
-		>
-			<div className={styles.groupForm}>
-				<div className={styles.groupFormField}>
-					<span className={styles.groupFormLabel}>Group Name</span>
-					<Input
-						placeholder="e.g. OpenAI gateway"
-						value={draft.name}
-						onChange={(event): void =>
-							setDraft({ ...draft, name: event.target.value })
-						}
-						testId="group-form-name"
-					/>
-				</div>
-
-				<div className={`${styles.groupFormField} ${styles.groupFormFieldRow}`}>
-					<span className={styles.groupFormLabel}>Enabled</span>
-					<Switch
-						value={draft.enabled}
-						onChange={(checked): void => setDraft({ ...draft, enabled: checked })}
-						testId="group-form-enabled"
-					/>
-				</div>
-
-				<ConditionKeyList
-					label="Condition · span attribute keys"
-					labelHint="·Runs when a span attribute key contains any of these"
-					keys={draft.attributes}
-					placeholder="e.g. gen_ai."
-					addLabel="Add attribute key"
-					testIdPrefix="group-form-attribute"
-					fieldContext={FieldContext.attribute}
-					onChange={(attributes): void => setDraft({ ...draft, attributes })}
-				/>
-
-				<ConditionKeyList
-					label="Condition · resource keys"
-					labelHint="·Or when a resource key contains any of these"
-					keys={draft.resource}
-					placeholder="e.g. service.name"
-					addLabel="Add resource key"
-					testIdPrefix="group-form-resource"
-					fieldContext={FieldContext.resource}
-					onChange={(resource): void => setDraft({ ...draft, resource })}
-				/>
-
-				<span className={styles.groupFormHint}>
-					Leave both empty to run this group on every span.
-				</span>
-			</div>
-		</DrawerWrapper>
-	);
-}
-
-export default GroupFormDrawer;

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.module.scss

@@ -1,35 +0,0 @@
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.label {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
-}
-
-.labelHint {
-	font-weight: var(--font-weight-normal);
-	text-transform: none;
-	letter-spacing: normal;
-}
-
-.keys {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.keyRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-}
-
-.keyInput {
-	flex: 1;
-}

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/components/ConditionKeyList/ConditionKeyList.tsx

@@ -1,89 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { Plus, X } from '@signozhq/icons';
-
-import { FieldContextValue } from 'container/LLMObservability/AttributeMapping/types';
-import KeySearchInput from '../../../KeySearchInput/KeySearchInput';
-import styles from './ConditionKeyList.module.scss';
-
-interface ConditionKeyListProps {
-	label: string;
-	labelHint?: string;
-	keys: string[];
-	placeholder: string;
-	addLabel: string;
-	testIdPrefix: string;
-	fieldContext: FieldContextValue;
-	onChange: (keys: string[]) => void;
-}
-
-function ConditionKeyList({
-	label,
-	labelHint,
-	keys,
-	placeholder,
-	addLabel,
-	testIdPrefix,
-	fieldContext,
-	onChange,
-}: ConditionKeyListProps): JSX.Element {
-	const updateKey = (index: number, value: string): void => {
-		onChange(keys.map((key, i) => (i === index ? value : key)));
-	};
-
-	const addKey = (): void => {
-		onChange([...keys, '']);
-	};
-
-	const removeKey = (index: number): void => {
-		onChange(keys.filter((_, i) => i !== index));
-	};
-
-	return (
-		<div className={styles.field}>
-			<span className={styles.label}>
-				{label}
-				{labelHint && <span className={styles.labelHint}> {labelHint}</span>}
-			</span>
-
-			{keys.length > 0 && (
-				<div className={styles.keys}>
-					{keys.map((key, index) => (
-						// eslint-disable-next-line react/no-array-index-key
-						<div className={styles.keyRow} key={index}>
-							<KeySearchInput
-								className={styles.keyInput}
-								placeholder={placeholder}
-								value={key}
-								fieldContext={fieldContext}
-								onChange={(next): void => updateKey(index, next)}
-								testId={`${testIdPrefix}-${index}`}
-							/>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								aria-label="Remove key"
-								onClick={(): void => removeKey(index)}
-								testId={`${testIdPrefix}-remove-${index}`}
-							>
-								<X size={14} />
-							</Button>
-						</div>
-					))}
-				</div>
-			)}
-
-			<Button
-				variant="dashed"
-				color="secondary"
-				prefix={<Plus size={14} />}
-				onClick={addKey}
-				testId={`${testIdPrefix}-add`}
-			>
-				{addLabel}
-			</Button>
-		</div>
-	);
-}
-
-export default ConditionKeyList;

frontend/src/container/LLMObservability/AttributeMapping/components/GroupFormDrawer/hooks/useGroupFormDrawer.ts

@@ -1,38 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { DraftGroup, GroupDraft, MapperDraftMode } from '../../../types';
-import { EMPTY_GROUP_DRAFT, groupDraftFromNode } from '../../../utils';
-
-interface UseGroupFormDrawer {
-	isOpen: boolean;
-	mode: MapperDraftMode;
-	draft: GroupDraft;
-	setDraft: (next: GroupDraft) => void;
-	openForAdd: () => void;
-	openForEdit: (group: DraftGroup) => void;
-	close: () => void;
-}
-
-export function useGroupFormDrawer(): UseGroupFormDrawer {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [mode, setMode] = useState<MapperDraftMode>('add');
-	const [draft, setDraft] = useState<GroupDraft>(EMPTY_GROUP_DRAFT);
-
-	const openForAdd = useCallback((): void => {
-		setMode('add');
-		setDraft(EMPTY_GROUP_DRAFT);
-		setIsOpen(true);
-	}, []);
-
-	const openForEdit = useCallback((group: DraftGroup): void => {
-		setMode('edit');
-		setDraft(groupDraftFromNode(group));
-		setIsOpen(true);
-	}, []);
-
-	const close = useCallback((): void => {
-		setIsOpen(false);
-	}, []);
-
-	return { isOpen, mode, draft, setDraft, openForAdd, openForEdit, close };
-}

frontend/src/container/LLMObservability/AttributeMapping/components/KeySearchInput/KeySearchInput.module.scss

@@ -1,49 +0,0 @@
-.keySearch {
-	position: relative;
-	flex: 1;
-	min-width: 0;
-}
-
-.keySearchDropdown {
-	position: absolute;
-	top: calc(100% + var(--spacing-2));
-	left: 0;
-	z-index: 20;
-	width: 100%;
-	max-height: 240px;
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding: var(--spacing-2);
-	border: 1px solid var(--l2-border);
-	border-radius: 6px;
-	background: var(--l2-background);
-	box-shadow: 0 8px 24px
-		color-mix(in srgb, var(--bg-base-black) 40%, transparent);
-}
-
-.keySearchDropdownEmpty {
-	padding: var(--spacing-4) var(--spacing-5);
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-}
-
-.keySearchOption {
-	display: block;
-	width: 100%;
-	max-width: 100%;
-	padding: var(--spacing-3) var(--spacing-5);
-	border: none;
-	border-radius: 3px;
-	background: transparent;
-	color: var(--l1-foreground);
-	font-size: var(--font-size-xs);
-	text-align: left;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	cursor: pointer;
-
-	&:hover {
-		background: var(--l2-background-hover);
-	}
-}

frontend/src/container/LLMObservability/AttributeMapping/components/KeySearchInput/KeySearchInput.tsx

@@ -1,121 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-import Spinner from 'components/Spinner';
-import useDebounce from 'hooks/useDebounce';
-
-import {
-	FieldContext,
-	FieldContextValue,
-} from 'container/LLMObservability/AttributeMapping/types';
-import styles from './KeySearchInput.module.scss';
-
-const SUGGESTION_LIMIT = 50;
-const DEBOUNCE_MS = 300;
-
-interface KeySearchInputProps {
-	value: string;
-	fieldContext: FieldContextValue;
-	placeholder?: string;
-	className?: string;
-	disabled?: boolean;
-	testId?: string;
-	onChange: (value: string) => void;
-}
-
-// Maps the mapper's attribute/resource context to the fields-endpoint context.
-function toFieldsContext(
-	context: FieldContextValue,
-): TelemetrytypesFieldContextDTO {
-	return context === FieldContext.resource
-		? TelemetrytypesFieldContextDTO.resource
-		: TelemetrytypesFieldContextDTO.attribute;
-}
-
-// Free-text input with span/resource key suggestions from /api/v1/fields/keys
-// (signal=traces). Typing keeps the custom value; suggestions are assistive.
-function KeySearchInput({
-	value,
-	fieldContext,
-	placeholder,
-	className,
-	disabled,
-	testId,
-	onChange,
-}: KeySearchInputProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const debouncedSearch = useDebounce(value, DEBOUNCE_MS);
-
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			signal: TelemetrytypesSignalDTO.traces,
-			fieldContext: toFieldsContext(fieldContext),
-			searchText: debouncedSearch,
-			limit: SUGGESTION_LIMIT,
-		},
-		{ query: { enabled: isOpen && !disabled, keepPreviousData: true } },
-	);
-
-	const suggestions = useMemo(() => {
-		const keys = data?.data?.keys ?? {};
-		return Object.keys(keys)
-			.filter((key) => key !== value)
-			.slice(0, SUGGESTION_LIMIT);
-	}, [data, value]);
-
-	return (
-		<div className={cx(styles.keySearch, className)}>
-			<Input
-				placeholder={placeholder}
-				value={value}
-				disabled={disabled}
-				autoComplete="off"
-				onChange={(event): void => {
-					onChange(event.target.value);
-					setIsOpen(true);
-				}}
-				onFocus={(): void => setIsOpen(true)}
-				onBlur={(): void => setIsOpen(false)}
-				testId={testId}
-			/>
-			{isOpen && suggestions.length > 0 && (
-				<div
-					className={styles.keySearchDropdown}
-					data-testid={`${testId}-dropdown`}
-				>
-					{suggestions.map((name) => (
-						<button
-							type="button"
-							key={name}
-							className={styles.keySearchOption}
-							title={name}
-							// onMouseDown (not onClick) so selection runs before the input blur.
-							onMouseDown={(event): void => {
-								event.preventDefault();
-								onChange(name);
-								setIsOpen(false);
-							}}
-							data-testid={`${testId}-option-${name}`}
-						>
-							{name}
-						</button>
-					))}
-				</div>
-			)}
-			{isOpen && isFetching && suggestions.length === 0 && (
-				<div
-					className={cx(styles.keySearchDropdown, styles.keySearchDropdownEmpty)}
-				>
-					<Spinner size="small" height="auto" />
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default KeySearchInput;

frontend/src/container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer.module.scss

@@ -1,63 +0,0 @@
-.form {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-10);
-	padding: var(--spacing-2) 0;
-}
-
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.label {
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--l3-foreground);
-}
-
-.labelHint {
-	font-weight: var(--font-weight-normal);
-	text-transform: none;
-	letter-spacing: normal;
-}
-
-.hint {
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-}
-
-.fieldContext {
-	width: 200px;
-}
-
-.sources {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.error {
-	padding: var(--spacing-5) var(--spacing-6);
-	border-radius: var(--radius-2);
-	background: var(--callout-error-background);
-	color: var(--callout-error-title);
-	font-size: var(--periscope-font-size-base);
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	gap: var(--spacing-4);
-}
-
-.footerActions {
-	display: flex;
-	gap: var(--spacing-4);
-	margin-left: auto;
-}

frontend/src/container/LLMObservability/AttributeMapping/components/MapperFormDrawer/MapperFormDrawer.tsx

@@ -1,252 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { SelectSimple } from '@signozhq/ui/select';
-import {
-	closestCenter,
-	DndContext,
-	DragEndEvent,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import {
-	arrayMove,
-	SortableContext,
-	verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { Plus, Trash2 } from '@signozhq/icons';
-import { v4 as uuid } from 'uuid';
-
-import KeySearchInput from '../KeySearchInput/KeySearchInput';
-import styles from './MapperFormDrawer.module.scss';
-import SourceAttributeRow from './components/SourceAttributeRow/SourceAttributeRow';
-import {
-	FieldContext,
-	FieldContextValue,
-	MapperDraft,
-	MapperDraftMode,
-	SourceConfig,
-} from '../../types';
-import { createEmptySource, isMapperDraftValid } from '../../utils';
-
-const FIELD_CONTEXT_OPTIONS = [
-	{ value: FieldContext.attribute, label: 'Span attribute' },
-	{ value: FieldContext.resource, label: 'Resource' },
-];
-
-interface MapperFormDrawerProps {
-	isOpen: boolean;
-	mode: MapperDraftMode;
-	draft: MapperDraft;
-	setDraft: (next: MapperDraft) => void;
-	onClose: () => void;
-	onSave: () => void;
-	onDelete: () => void;
-	isSaving: boolean;
-	isDeleting: boolean;
-	saveError: string | null;
-}
-
-function MapperFormDrawer({
-	isOpen,
-	mode,
-	draft,
-	setDraft,
-	onClose,
-	onSave,
-	onDelete,
-	isSaving,
-	isDeleting,
-	saveError,
-}: MapperFormDrawerProps): JSX.Element {
-	const isEdit = mode === 'edit';
-	const isValid = isMapperDraftValid(draft);
-
-	const [rowIds, setRowIds] = useState<string[]>(() =>
-		draft.sources.map(() => uuid()),
-	);
-	const sourceIds = draft.sources.map(
-		(_, index) => rowIds[index] ?? `pending-${index}`,
-	);
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-	);
-
-	const updateSource = (index: number, patch: Partial<SourceConfig>): void => {
-		const sources = draft.sources.map((source, i) =>
-			i === index ? { ...source, ...patch } : source,
-		);
-		setDraft({ ...draft, sources });
-	};
-
-	const addSource = (): void => {
-		setDraft({ ...draft, sources: [...draft.sources, createEmptySource()] });
-		setRowIds((prev) => [...prev, uuid()]);
-	};
-
-	const removeSource = (index: number): void => {
-		const sources = draft.sources.filter((_, i) => i !== index);
-		if (sources.length === 0) {
-			setDraft({ ...draft, sources: [createEmptySource()] });
-			setRowIds([uuid()]);
-			return;
-		}
-		setDraft({ ...draft, sources });
-		setRowIds((prev) => prev.filter((_, i) => i !== index));
-	};
-
-	const handleDragEnd = (event: DragEndEvent): void => {
-		const { active, over } = event;
-		if (!over || active.id === over.id) {
-			return;
-		}
-		const from = sourceIds.indexOf(String(active.id));
-		const to = sourceIds.indexOf(String(over.id));
-		if (from === -1 || to === -1) {
-			return;
-		}
-		setDraft({ ...draft, sources: arrayMove(draft.sources, from, to) });
-		setRowIds((prev) => arrayMove(prev, from, to));
-	};
-
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			title={isEdit ? 'Edit mapping' : 'New custom mapping'}
-			subTitle="Map source attributes onto a canonical target attribute"
-			width="wide"
-			testId="mapper-form-drawer"
-			footer={
-				<div className={styles.footer}>
-					{isEdit && (
-						<Button
-							variant="ghost"
-							color="destructive"
-							prefix={<Trash2 size={14} />}
-							onClick={onDelete}
-							disabled={isDeleting}
-							testId="mapper-form-delete"
-						>
-							{isDeleting ? 'Deleting…' : 'Delete'}
-						</Button>
-					)}
-					<div className={styles.footerActions}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							onClick={onClose}
-							testId="mapper-form-cancel"
-						>
-							Cancel
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={onSave}
-							disabled={!isValid || isSaving}
-							testId="mapper-form-save"
-						>
-							{/* eslint-disable-next-line no-nested-ternary */}
-							{isSaving ? 'Saving…' : isEdit ? 'Save mapping' : 'Create mapping'}
-						</Button>
-					</div>
-				</div>
-			}
-		>
-			<div className={styles.form}>
-				<div className={styles.field}>
-					<span className={styles.label}>Target attribute</span>
-					<KeySearchInput
-						placeholder="e.g. gen_ai.content.prompt"
-						value={draft.name}
-						fieldContext={draft.fieldContext}
-						disabled={isEdit}
-						onChange={(name): void => setDraft({ ...draft, name })}
-						testId="mapper-form-target"
-					/>
-					{isEdit && (
-						<span className={styles.hint}>
-							The target attribute can&apos;t be changed after creation.
-						</span>
-					)}
-				</div>
-
-				<div className={styles.field}>
-					<span className={styles.label}>Write target to</span>
-					<SelectSimple
-						className={styles.fieldContext}
-						items={FIELD_CONTEXT_OPTIONS}
-						value={draft.fieldContext}
-						withPortal={false}
-						onChange={(next): void =>
-							setDraft({ ...draft, fieldContext: next as FieldContextValue })
-						}
-						testId="mapper-form-field-context"
-					/>
-					<span className={styles.hint}>
-						Where the standardized attribute is written.
-					</span>
-				</div>
-
-				<div className={styles.field}>
-					<span className={styles.label}>
-						Source attributes
-						<span className={styles.labelHint}>
-							{' '}
-							· priority: top → bottom · drag to reorder
-						</span>
-					</span>
-
-					<DndContext
-						sensors={sensors}
-						collisionDetection={closestCenter}
-						modifiers={[restrictToVerticalAxis]}
-						onDragEnd={handleDragEnd}
-					>
-						<SortableContext items={sourceIds} strategy={verticalListSortingStrategy}>
-							<div className={styles.sources}>
-								{draft.sources.map((source, index) => (
-									<SourceAttributeRow
-										key={sourceIds[index]}
-										id={sourceIds[index]}
-										index={index}
-										value={source}
-										canRemove={draft.sources.length > 1}
-										onChange={updateSource}
-										onRemove={removeSource}
-									/>
-								))}
-							</div>
-						</SortableContext>
-					</DndContext>
-
-					<Button
-						variant="dashed"
-						color="secondary"
-						prefix={<Plus size={14} />}
-						onClick={addSource}
-						testId="mapper-form-add-source"
-					>
-						Add another source
-					</Button>
-				</div>
-
-				{saveError && (
-					<div className={styles.error} role="alert">
-						{saveError}
-					</div>
-				)}
-			</div>
-		</DrawerWrapper>
-	);
-}
-
-export default MapperFormDrawer;