fix: convert key not found to warnings for logs

* feat: add locked dashboard

* feat: update test cases

* chore: add comments

* chore: update comment

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

.devenv/docker/clickhouse/compose.yaml

@@ -1,6 +1,6 @@
 services:
   init-clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:25.12.5
     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.5.6
+    image: clickhouse/clickhouse-server:25.12.5
     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.142.0
+    image: signoz/signoz-otel-collector:v0.144.6
     container_name: telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

.github/workflows/integrationci.yaml

@@ -60,16 +60,17 @@ 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.3
+          - v0.144.6
         postgres-version:
           - 15
     if: |

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

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

frontend/public/locales/en/titles.json

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

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -53,6 +53,7 @@ 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';
@@ -66,7 +67,6 @@ 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,26 +1031,19 @@ function ExplorerOptions({
 					/>
 				</div>
 			</Modal>
-			<Modal
-				footer={null}
-				onOk={onCancel(false)}
-				onCancel={onCancel(false)}
+			<ExportPanelContainer
 				open={isExport}
-				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>
+				onClose={onCancel(false)}
+				query={isOneChartPerQuery ? queryToExport : query}
+				isLoading={isLoading}
+				onExport={(dashboard, isNewDashboard): void => {
+					if (isOneChartPerQuery && queryToExport) {
+						onExport(dashboard, isNewDashboard, queryToExport);
+					} else {
+						onExport(dashboard, isNewDashboard);
+					}
+				}}
+			/>
 		</div>
 	);
 }
@@ -1058,7 +1051,7 @@ function ExplorerOptions({
 export interface ExplorerOptionsProps {
 	isLoading?: boolean;
 	onExport: (
-		dashboard: Dashboard | null,
+		dashboard: ExportDashboard | null,
 		isNewDashboard?: boolean,
 		queryToExport?: Query,
 	) => void;

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

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

frontend/src/container/ExportPanel/ExportDashboardSelect.tsx

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

@@ -0,0 +1,42 @@
+.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,127 +1,159 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
-import { Button } from 'antd';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Typography } from '@signozhq/ui/typography';
-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 { useCreateExportDashboard } from 'hooks/dashboard/useCreateExportDashboard';
 import {
-	DashboardSelect,
-	NewDashboardButton,
-	SelectWrapper,
-	Title,
-	Wrapper,
-} from './styles';
-import { filterOptions, getSelectOptions } from './utils';
+	ExportDashboard,
+	useExportDashboards,
+} from 'hooks/dashboard/useExportDashboards';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+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']);
 
-	const [dashboardId, setDashboardId] = useState<string | null>(null);
+	// 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 {
-		data,
+		dashboards,
 		isLoading: isAllDashboardsLoading,
-		refetch,
-	} = useGetAllDashboard();
+		isFetching: isDashboardsFetching,
+	} = useExportDashboards(searchText);
 
-	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);
-			},
+	const { create: createNewDashboard, isLoading: createDashboardLoading } =
+		useCreateExportDashboard({
+			title: t('new_dashboard_title', { ns: 'dashboard' }),
+			onCreated: (dashboard) => onExport(dashboard, true),
 		});
 
-	const options = useMemo(() => getSelectOptions(data?.data || []), [data]);
-
-	const handleExportClick = useCallback((): void => {
-		const currentSelectedDashboard = data?.data?.find(
-			({ id }) => id === dashboardId,
-		);
-
-		onExport(currentSelectedDashboard || null, false);
-	}, [data, dashboardId, onExport]);
+	// Reset on close so each open starts fresh (the dialog stays mounted).
+	useEffect(() => {
+		if (!open) {
+			setSelectedDashboard(null);
+			setSearchText('');
+		}
+	}, [open]);
 
 	const handleSelect = useCallback(
-		(selectedDashboardId: string): void => {
-			setDashboardId(selectedDashboardId);
+		(dashboardId: string): void => {
+			setSelectedDashboard(
+				dashboards.find(({ id }) => id === dashboardId) ?? null,
+			);
 		},
-		[setDashboardId],
+		[dashboards],
 	);
 
-	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 handleExportClick = useCallback((): void => {
+		onExport(selectedDashboard, false);
+	}, [selectedDashboard, onExport]);
 
-	const isDashboardLoading = isAllDashboardsLoading || createDashboardLoading;
-
-	const isDisabled =
-		isAllDashboardsLoading || !options?.length || !dashboardId || isLoading;
+	const isExportDisabled =
+		isAllDashboardsLoading || !selectedDashboard || isLoading;
 
 	return (
-		<Wrapper direction="vertical">
-			<Title>Export Panel</Title>
+		<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>
 
-			<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>
+				<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>
 	);
 }
 
+ExportPanelContainer.defaultProps = {
+	isLoading: false,
+};
+
 export default ExportPanelContainer;

frontend/src/container/ExportPanel/index.tsx

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

@@ -1,34 +0,0 @@
-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,16 +1,10 @@
 import { SelectProps } from 'antd';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 
-export const getSelectOptions = (data: Dashboard[]): SelectProps['options'] =>
-	data.map(({ id, data }) => ({
-		label: data.title,
+export const getSelectOptions = (
+	data: ExportDashboard[],
+): SelectProps['options'] =>
+	data.map(({ id, title }) => ({
+		label: 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,13 +1,17 @@
 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';
@@ -122,13 +126,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -141,7 +144,7 @@ function Hosts(): JSX.Element {
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesHostRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listHosts(
@@ -159,11 +162,10 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},

frontend/src/container/InfraMonitoringHostsV2/utils.tsx

@@ -11,8 +11,6 @@ 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';
 
@@ -23,11 +21,7 @@ export function HostnameCell({
 }): React.ReactElement {
 	const isEmpty = !hostName || !hostName.trim();
 	if (!isEmpty) {
-		return (
-			<CellValueTooltip value={hostName}>
-				<TanStackTable.Text>{hostName}</TanStackTable.Text>
-			</CellValueTooltip>
-		);
+		return <CellValueTooltip value={hostName} />;
 	}
 	return (
 		<>

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

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

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

@@ -51,7 +51,7 @@ function ColumnHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

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

@@ -30,7 +30,7 @@ function EntityGroupHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

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

@@ -12,6 +12,8 @@ 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';
@@ -63,6 +65,10 @@ import LoadingContainer from '../LoadingContainer';
 
 import '../EntityDetailsUtils/entityDetails.styles.scss';
 import { parseAsString, useQueryState } from 'nuqs';
+import {
+	EntityCountConfig,
+	EntityCountsSection,
+} from './components/EntityCountsSection/EntityCountsSection';
 
 const TimeRangeOffset = 1000000000;
 
@@ -72,12 +78,31 @@ export interface K8sDetailsMetadataConfig<T> {
 	render?: (value: string | number, entity: T) => React.ReactNode;
 }
 
+export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
+
 export interface K8sDetailsFilters {
 	filter: { expression: string };
 	start: number;
 	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;
@@ -86,15 +111,18 @@ export interface K8sBaseDetailsProps<T> {
 	fetchEntityData: (
 		filters: K8sDetailsFilters,
 		signal?: AbortSignal,
-	) => Promise<{ data: T | null; error?: string | null }>;
+	) => Promise<{ data: T | null; error?: APIError | null }>;
 	// Entity configuration
 	getEntityName: (entity: T) => string;
 	getInitialLogTracesExpression: (entity: T) => string;
 	getInitialEventsExpression: (entity: T) => string;
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		entity: T,
@@ -111,20 +139,7 @@ export interface K8sBaseDetailsProps<T> {
 		showTraces?: boolean;
 		showEvents?: boolean;
 	};
-	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;
-	}>;
+	customTabs?: Array<CustomTab<T>>;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -137,6 +152,8 @@ export default function K8sBaseDetails<T>({
 	getInitialLogTracesExpression,
 	getInitialEventsExpression,
 	metadataConfig,
+	countsConfig,
+	getCountsFilterExpression,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKeyPrefix,
@@ -258,6 +275,33 @@ 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();
@@ -293,7 +337,10 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [getMinMaxTime, selectedTime]);
 
-	const handleTabChange = (value: string): void => {
+	const handleTabChange = (value: string | null): void => {
+		if (!value) {
+			return;
+		}
 		setSelectedView(value);
 		setLogFiltersParam(null);
 		setTracesFiltersParam(null);
@@ -436,12 +483,18 @@ export default function K8sBaseDetails<T>({
 			{isEntityLoading && <LoadingContainer />}
 			{(isEntityError || hasResponseError) && (
 				<div className="entity-error-container">
-					<Typography.Text color="danger">
-						{entityResponse?.error ||
-							(entityError instanceof Error
-								? entityError.message
-								: 'Failed to load entity details')}
-					</Typography.Text>
+					<ErrorContent
+						error={
+							entityResponse?.error ??
+							(entityError instanceof APIError ? entityError : null) ?? {
+								code: 500,
+								message:
+									entityError instanceof Error
+										? entityError.message
+										: 'Failed to load entity details',
+							}
+						}
+					/>
 				</div>
 			)}
 			{entity && !isEntityLoading && !hasResponseError && (
@@ -479,6 +532,19 @@ export default function K8sBaseDetails<T>({
 								})}
 							</div>
 						</div>
+
+						{countsConfig &&
+							countsConfig.length > 0 &&
+							selectedItem &&
+							getCountsFilterExpression && (
+								<EntityCountsSection
+									entity={entity}
+									countsConfig={countsConfig}
+									selectedItem={selectedItem}
+									filterExpression={getCountsFilterExpression(entity)}
+									closeDrawer={handleClose}
+								/>
+							)}
 					</div>
 
 					{!hideDetailViewTabs && (

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

@@ -14,6 +14,7 @@ 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,
@@ -33,13 +34,14 @@ 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?: string | null;
+	error?: APIError | null;
 	totalCount: number;
 	hasFilters: boolean;
 	isLoading: boolean;
@@ -66,7 +68,7 @@ export type K8sBaseListProps<
 		records?: T[];
 		data?: T[];
 		total: number;
-		error?: string | null;
+		error?: APIError | null;
 		rawData?: unknown;
 		endTimeBeforeRetention?: boolean;
 		warning?: Querybuildertypesv5QueryWarnDataDTO | null;
@@ -377,6 +379,8 @@ 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,13 +44,11 @@
 	width: 32px;
 }
 
-.errorIcon {
-	color: var(--danger-background);
-}
-
-.actions {
+.errorContent {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
-	gap: 8px;
-	margin-top: 16px;
+	gap: var(--spacing-3);
+	max-width: 500px;
+	padding: 24px;
 }

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

@@ -1,8 +1,4 @@
-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 ErrorContent from 'components/ErrorModal/components/ErrorContent';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
@@ -13,26 +9,12 @@ 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;
 	}
@@ -40,25 +22,15 @@ export function K8sEmptyState({
 	if (isError || error) {
 		return (
 			<div className={styles.container}>
-				<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 className={styles.errorContent}>
+					<ErrorContent
+						error={
+							error ?? {
+								code: 500,
+								message: 'An error occurred while fetching data.',
+							}
+						}
+					/>
 				</div>
 			</div>
 		);

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

@@ -4,6 +4,7 @@ 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,
@@ -51,7 +52,7 @@ export type K8sExpandedRowProps<T, TItemKey = string> = {
 		records?: T[];
 		data?: T[];
 		total: number;
-		error?: string | null;
+		error?: APIError | null;
 		rawData?: unknown;
 		warning?: Querybuildertypesv5QueryWarnDataDTO | null;
 	}>;

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

@@ -0,0 +1,221 @@
+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,6 +9,8 @@ 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,
@@ -17,6 +19,7 @@ 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';
@@ -630,7 +633,15 @@ describe('K8sBaseList', () => {
 			fetchListDataMock.mockResolvedValue({
 				data: [],
 				total: 0,
-				error: 'Failed to fetch pods',
+				error: new APIError({
+					httpStatusCode: 500,
+					error: {
+						code: '500',
+						message: 'Failed to fetch pods',
+						url: '',
+						errors: [],
+					},
+				}),
 			});
 
 			renderComponent<TestItem>({
@@ -1054,4 +1065,304 @@ 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/EntityCountsSection/EntityCountsSection.module.scss

@@ -0,0 +1,41 @@
+.countsContainer {
+	display: flex;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-8);
+	flex-wrap: wrap;
+}
+
+.countCard {
+	position: relative;
+	flex: 1;
+	min-width: 120px;
+	max-width: 180px;
+	border: 1px solid var(--l3-border);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-6);
+}
+
+.countLabel {
+	color: var(--l2-foreground);
+	letter-spacing: var(--letter-spacing-wide);
+	text-transform: uppercase;
+}
+
+.countValue {
+	color: var(--l1-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-xl);
+}
+
+.navigateButton {
+	position: absolute;
+	top: var(--spacing-4);
+	right: var(--spacing-4);
+
+	--button-padding: var(--spacing-1);
+	--button-height: 24px;
+	--button-width: 24px;
+}

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

@@ -0,0 +1,107 @@
+import { Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { Compass } from '@signozhq/icons';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { Link } from 'react-router-dom';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../../constants';
+import styles from './EntityCountsSection.module.scss';
+
+export interface EntityCountConfig<T> {
+	label: string;
+	getValue: (entity: T) => number;
+	targetCategory: InfraMonitoringEntity;
+}
+
+interface EntityCountsSectionProps<T> {
+	entity: T;
+	countsConfig: EntityCountConfig<T>[];
+	selectedItem: string;
+	filterExpression: string;
+	closeDrawer: () => void;
+}
+
+export function EntityCountsSection<T>({
+	entity,
+	countsConfig,
+	selectedItem,
+	filterExpression,
+	closeDrawer,
+}: EntityCountsSectionProps<T>): JSX.Element {
+	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
+		const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+		const compositeQuery = {
+			...defaultQuery,
+			id: uuid(),
+			builder: {
+				...defaultQuery.builder,
+				queryData: defaultQuery.builder.queryData.map((query) => ({
+					...query,
+					filter: { expression: filterExpression },
+					filters: { items: [], op: 'AND' as const },
+				})),
+			},
+		};
+
+		// TODO(H4ad): After https://github.com/SigNoz/signoz/pull/12038, inherit custom time of drawer to list
+		const urlParams = new URLSearchParams();
+		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+		urlParams.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+	};
+
+	return (
+		<div className={styles.countsContainer}>
+			{countsConfig.map((config) => (
+				<div
+					key={config.label}
+					className={styles.countCard}
+					data-testid={`count-card-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+				>
+					<Typography.Text
+						color="muted"
+						size="small"
+						weight="medium"
+						className={styles.countLabel}
+					>
+						{config.label}
+					</Typography.Text>
+					<Typography.Text className={styles.countValue} size="xl" weight="semibold">
+						{config.getValue(entity) || '-'}
+					</Typography.Text>
+					<Link
+						to={buildNavigationUrl(config.targetCategory)}
+						onClick={closeDrawer}
+						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+					>
+						<Tooltip
+							title={`View ${config.label.toLowerCase()} of '${selectedItem}'`}
+							placement="top"
+						>
+							<Button
+								size="icon"
+								variant="ghost"
+								color="secondary"
+								className={styles.navigateButton}
+								prefix={<Compass size={14} />}
+							/>
+						</Tooltip>
+					</Link>
+				</div>
+			))}
+		</div>
+	);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
+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,11 +1,15 @@
 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';
@@ -14,7 +18,9 @@ import { InfraMonitoringEntity } from '../constants';
 import {
 	clusterWidgetInfo,
 	getClusterMetricsQueryPayload,
+	k8sClusterDetailsCountsConfig,
 	k8sClusterDetailsMetadataConfig,
+	k8sClusterGetCountsFilterExpression,
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemExpression,
 	k8sClusterInitialEventsExpression,
@@ -67,13 +73,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -86,7 +91,7 @@ function K8sClustersList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesClusterRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listClusters(
@@ -104,11 +109,10 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -136,6 +140,8 @@ function K8sClustersList({
 				getInitialLogTracesExpression={k8sClusterInitialLogTracesExpression}
 				getInitialEventsExpression={k8sClusterInitialEventsExpression}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
+				countsConfig={k8sClusterDetailsCountsConfig}
+				getCountsFilterExpression={k8sClusterGetCountsFilterExpression}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}
 				queryKeyPrefix="cluster"

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

@@ -6,9 +6,15 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -23,6 +29,40 @@ export const k8sClusterGetSelectedItemExpression = (
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesClusterRecordDTO>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.clusterName || '' }];
 
+export const k8sClusterDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesClusterRecordDTO>[] =
+	[
+		{
+			label: 'Namespaces',
+			getValue: (p): number => p.counts?.namespaces ?? 0,
+			targetCategory: InfraMonitoringEntity.NAMESPACES,
+		},
+		{
+			label: 'Nodes',
+			getValue: (p): number => p.counts?.nodes ?? 0,
+			targetCategory: InfraMonitoringEntity.NODES,
+		},
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sClusterInitialEventsExpression = (
 	item: InframonitoringtypesClusterRecordDTO,
 ): string =>
@@ -43,38 +83,54 @@ export const k8sClusterGetEntityName = (
 	item: InframonitoringtypesClusterRecordDTO,
 ): string => item.clusterName || '';
 
+export const k8sClusterGetCountsFilterExpression = (
+	item: InframonitoringtypesClusterRecordDTO,
+): string =>
+	`k8s.cluster.name = ${formatValueForExpression(item.clusterName ?? '')}`;
+
 export const clusterWidgetInfo = [
 	{
 		title: 'CPU Usage, allocatable',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#cpu-usage-allocatable',
 	},
 	{
 		title: 'Memory Usage, allocatable',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#memory-usage-allocatable',
 	},
 	{
 		title: 'Ready Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#ready-nodes',
 	},
 	{
 		title: 'NotReady Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#notready-nodes',
 	},
 	{
 		title: 'Deployments available and desired',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#deployments-available-and-desired',
 	},
 	{
 		title: 'Statefulset pods',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#statefulset-pods',
 	},
 	{
 		title: 'Daemonset nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#daemonset-nodes',
 	},
 	{
 		title: 'Jobs',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#jobs',
 	},
 ];
 

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

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

@@ -1,11 +1,16 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 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';
@@ -14,6 +19,7 @@ import { SelectedItemParams } from '../hooks';
 import {
 	daemonSetWidgetInfo,
 	getDaemonSetMetricsQueryPayload,
+	getDaemonSetPodMetricsQueryPayload,
 	k8sDaemonSetDetailsMetadataConfig,
 	k8sDaemonSetGetEntityName,
 	k8sDaemonSetGetSelectedItemExpression,
@@ -25,6 +31,8 @@ import {
 	getK8sDaemonSetRowKey,
 	k8sDaemonSetsColumnsConfig,
 } from './table.config';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
+
 function K8sDaemonSetsList({
 	controlListPrefix,
 }: {
@@ -65,13 +73,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -83,7 +90,7 @@ function K8sDaemonSetsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesDaemonSetRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listDaemonSets(
@@ -100,16 +107,26 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
 		[],
 	);
+	const customTabs = useMemo(
+		() => [
+			createPodMetricsTab<InframonitoringtypesDaemonSetRecordDTO>({
+				getQueryPayload: getDaemonSetPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.DAEMONSETS,
+				queryKey: 'daemonSetPodMetrics',
+			}),
+		],
+		[],
+	);
+
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO, SelectedItemParams>
@@ -133,6 +150,7 @@ function K8sDaemonSetsList({
 				entityWidgetInfo={daemonSetWidgetInfo}
 				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}
 				queryKeyPrefix="daemonset"
+				customTabs={customTabs}
 			/>
 		</>
 	);

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

@@ -7,7 +7,10 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	getPodUtilizationByPodQueryPayloads,
+	INFRA_MONITORING_ATTR_KEYS,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -71,18 +74,25 @@ export const daemonSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/daemonsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#network-errors-count',
 	},
 ];
 
@@ -669,3 +679,29 @@ 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, getPodPhaseStatusItems } from '../commonUtils';
+import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -87,11 +87,7 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const daemonsetName = value as string;
-			return (
-				<CellValueTooltip value={daemonsetName}>
-					<TanStackTable.Text>{daemonsetName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={daemonsetName} />;
 		},
 	},
 	{
@@ -108,42 +104,36 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		enableResize: true,
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return (
-				<CellValueTooltip value={namespaceName}>
-					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={namespaceName} />;
 		},
 	},
 	{
-		id: 'pod_counts_by_phase',
+		id: 'pod_counts_by_status',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#pod-counts-by-phase">
-				Pod Phases
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#pod-counts-by-status">
+				Pod Status
 			</ColumnHeader>
 		),
 		accessorFn: (
 			row,
-		): InframonitoringtypesDaemonSetRecordDTO['podCountsByPhase'] =>
-			row.podCountsByPhase,
+		): InframonitoringtypesDaemonSetRecordDTO['podCountsByStatus'] =>
+			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByPhase = row.podCountsByPhase;
-			if (!podCountsByPhase) {
+			const podCountsByStatus = row.podCountsByStatus;
+			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return (
-				<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
-			);
+			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
 		},
 	},
 	{
-		id: 'node_status',
+		id: 'scheduled_nodes',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#node-status">
-				Node Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#scheduled-nodes">
+				Scheduled Nodes
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.currentNodes,

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

@@ -1,11 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 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';
@@ -15,6 +19,7 @@ import { SelectedItemParams } from '../hooks';
 import {
 	deploymentWidgetInfo,
 	getDeploymentMetricsQueryPayload,
+	getDeploymentPodMetricsQueryPayload,
 	k8sDeploymentDetailsMetadataConfig,
 	k8sDeploymentGetEntityName,
 	k8sDeploymentGetSelectedItemExpression,
@@ -26,6 +31,7 @@ import {
 	getK8sDeploymentRowKey,
 	k8sDeploymentsColumnsConfig,
 } from './table.config';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sDeploymentsList({
 	controlListPrefix,
@@ -68,13 +74,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -87,7 +92,7 @@ function K8sDeploymentsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesDeploymentRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listDeployments(
@@ -105,17 +110,27 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
 		[],
 	);
 
+	const customTabs = useMemo(
+		() => [
+			createPodMetricsTab<InframonitoringtypesDeploymentRecordDTO>({
+				getQueryPayload: getDeploymentPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.DEPLOYMENTS,
+				queryKey: 'deploymentPodMetrics',
+			}),
+		],
+		[],
+	);
+
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO, SelectedItemParams>
@@ -140,6 +155,7 @@ function K8sDeploymentsList({
 				entityWidgetInfo={deploymentWidgetInfo}
 				getEntityQueryPayload={getDeploymentMetricsQueryPayload}
 				queryKeyPrefix="deployment"
+				customTabs={customTabs}
 			/>
 		</>
 	);

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

@@ -7,7 +7,10 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	getPodUtilizationByPodQueryPayloads,
+	INFRA_MONITORING_ATTR_KEYS,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -71,18 +74,25 @@ export const deploymentWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/deployments/#network-io',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#network-error-count',
 	},
 ];
 
@@ -668,3 +678,29 @@ 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, getPodPhaseStatusItems } from '../commonUtils';
+import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -88,11 +88,7 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			visibilityBehavior: 'hidden-on-expand',
 			cell: ({ value }): React.ReactNode => {
 				const deploymentName = value as string;
-				return (
-					<CellValueTooltip value={deploymentName}>
-						<TanStackTable.Text>{deploymentName}</TanStackTable.Text>
-					</CellValueTooltip>
-				);
+				return <CellValueTooltip value={deploymentName} />;
 			},
 		},
 		{
@@ -112,31 +108,29 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			),
 		},
 		{
-			id: 'podCountsByPhase',
+			id: 'podCountsByStatus',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-counts-by-phase">
-					Pod Phases
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-counts-by-status">
+					Pod Status
 				</ColumnHeader>
 			),
-			accessorFn: (row): object | undefined => row.podCountsByPhase,
+			accessorFn: (row): object | undefined => row.podCountsByStatus,
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
 			cell: ({ row }): React.ReactNode => {
-				const podCountsByPhase = row.podCountsByPhase;
-				if (!podCountsByPhase) {
+				const podCountsByStatus = row.podCountsByStatus;
+				if (!podCountsByStatus) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return (
-					<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
-				);
+				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
 			},
 		},
 		{
-			id: 'replica_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#replica-status">
-					Replica Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.availablePods,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartHeader.module.scss

@@ -0,0 +1,32 @@
+.chartHeader {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.infoIcon {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--text-slate-primary);
+	}
+}
+
+.metricsExplorerLink {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	transition: opacity 0.2s;
+
+	&:hover {
+		color: var(--l3-foreground);
+	}
+}
+
+.chartHeaderLabel {
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartHeader.tsx

@@ -0,0 +1,83 @@
+import { Link } from 'react-router-dom';
+import { Compass, Info } from '@signozhq/icons';
+import { Tooltip } from 'antd';
+
+import styles from './ChartHeader.module.scss';
+
+const DOCS_BASE_URL = `${process.env.DOCS_BASE_URL}/docs`;
+
+interface ChartHeaderProps {
+	title: string;
+	docPath?: string;
+	tooltip?: string;
+	metricsExplorerUrl?: string;
+	metricsExplorerTestId?: string;
+}
+
+function ChartHeader({
+	title,
+	docPath,
+	tooltip,
+	metricsExplorerUrl,
+	metricsExplorerTestId = 'open-metrics-explorer',
+}: ChartHeaderProps): JSX.Element {
+	const renderInfoIcon = (): React.ReactNode => {
+		if (docPath) {
+			const tooltipTitle = tooltip || 'Not sure what this represents?';
+			return (
+				<Tooltip
+					arrow
+					title={
+						<>
+							{tooltipTitle}{' '}
+							<a
+								href={`${DOCS_BASE_URL}${docPath}`}
+								target="_blank"
+								rel="noopener"
+								onClick={(e): void => e.stopPropagation()}
+							>
+								Learn more.
+							</a>
+						</>
+					}
+				>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		if (tooltip) {
+			return (
+				<Tooltip title={tooltip}>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<div className={styles.chartHeader} data-testid="chart-header">
+			<span className={styles.chartHeaderLabel}>{title}</span>
+			{renderInfoIcon()}
+			{metricsExplorerUrl && (
+				<Tooltip title="Open in Metrics Explorer">
+					<Link
+						to={metricsExplorerUrl}
+						className={styles.metricsExplorerLink}
+						data-testid={metricsExplorerTestId}
+					>
+						<Compass size={14} />
+					</Link>
+				</Tooltip>
+			)}
+		</div>
+	);
+}
+
+export default ChartHeader;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.module.scss

@@ -14,28 +14,6 @@
 	box-sizing: border-box;
 }
 
-.entityMetricsTitleContainer {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.entityMetricsTitle {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-}
-
-.metricsExplorerLink {
-	display: flex;
-	align-items: center;
-	color: var(--l2-foreground);
-	transition: opacity 0.2s;
-
-	&:hover {
-		color: var(--l3-foreground);
-	}
-}
-
 .metricsHeader {
 	display: flex;
 	justify-content: flex-end;

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

@@ -1,8 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Link } from 'react-router-dom';
-import { Compass } from '@signozhq/icons';
-import { Skeleton, Tooltip } from 'antd';
+import { Skeleton } from 'antd';
 import cx from 'classnames';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
@@ -24,6 +22,7 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 
 import { buildEntityMetricsChartConfig } from './configBuilder';
+import ChartHeader from './ChartHeader';
 
 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
@@ -47,6 +46,7 @@ interface EntityMetricsProps<T> {
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		node: T,
@@ -207,31 +207,24 @@ function EntityMetrics<T>({
 						key={entityWidgetInfo[idx].title}
 						className={styles.entityMetricsCol}
 					>
-						<div className={styles.entityMetricsTitleContainer}>
-							<span className={styles.entityMetricsTitle}>
-								{entityWidgetInfo[idx].title}
-							</span>
-							{queryPayloads[idx] &&
-								queryPayloads[idx].graphType !== PANEL_TYPES.TABLE && (
-									<Tooltip title="Open in Metrics Explorer">
-										<Link
-											to={getMetricsExplorerUrl({
-												query: queryPayloads[idx].query,
-												...(selectedInterval && selectedInterval !== 'custom'
-													? { relativeTime: selectedInterval }
-													: {
-															startTimeMs: timeRange.startTime * 1000,
-															endTimeMs: timeRange.endTime * 1000,
-														}),
-											})}
-											className={styles.metricsExplorerLink}
-											data-testid={`open-metrics-explorer-${idx}`}
-										>
-											<Compass size={14} />
-										</Link>
-									</Tooltip>
-								)}
-						</div>
+						<ChartHeader
+							title={entityWidgetInfo[idx].title}
+							docPath={entityWidgetInfo[idx].docPath}
+							metricsExplorerUrl={
+								queryPayloads[idx] && queryPayloads[idx].graphType !== PANEL_TYPES.TABLE
+									? getMetricsExplorerUrl({
+											query: queryPayloads[idx].query,
+											...(selectedInterval && selectedInterval !== 'custom'
+												? { relativeTime: selectedInterval }
+												: {
+														startTimeMs: timeRange.startTime * 1000,
+														endTimeMs: timeRange.endTime * 1000,
+													}),
+										})
+									: undefined
+							}
+							metricsExplorerTestId={`open-metrics-explorer-${idx}`}
+						/>
 						<div className={styles.entityMetricsCard} ref={graphRef}>
 							{renderCardContent(query, idx)}
 						</div>

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+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,11 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 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';
@@ -14,6 +18,7 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getJobMetricsQueryPayload,
+	getJobPodMetricsQueryPayload,
 	jobWidgetInfo,
 	k8sJobDetailsMetadataConfig,
 	k8sJobGetEntityName,
@@ -26,6 +31,7 @@ import {
 	getK8sJobRowKey,
 	k8sJobsColumnsConfig,
 } from './table.config';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sJobsList({
 	controlListPrefix,
@@ -68,13 +74,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -87,7 +92,7 @@ function K8sJobsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesJobRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listJobs(
@@ -105,17 +110,27 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
 		[],
 	);
 
+	const customTabs = useMemo(
+		() => [
+			createPodMetricsTab<InframonitoringtypesJobRecordDTO>({
+				getQueryPayload: getJobPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.JOBS,
+				queryKey: 'jobPodMetrics',
+			}),
+		],
+		[],
+	);
+
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesJobRecordDTO, SelectedItemParams>
@@ -140,6 +155,7 @@ function K8sJobsList({
 				entityWidgetInfo={jobWidgetInfo}
 				getEntityQueryPayload={getJobMetricsQueryPayload}
 				queryKeyPrefix="job"
+				customTabs={customTabs}
 			/>
 		</>
 	);

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

@@ -7,7 +7,10 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	getPodUtilizationByPodQueryPayloads,
+	INFRA_MONITORING_ATTR_KEYS,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -70,18 +73,22 @@ export const jobWidgetInfo = [
 	{
 		title: 'CPU usage',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#cpu-usage',
 	},
 	{
 		title: 'Memory Usage',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#memory-usage',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-errors-count',
 	},
 ];
 
@@ -425,3 +432,25 @@ 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, getPodPhaseStatusItems } from '../commonUtils';
+import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -81,11 +81,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const jobName = value as string;
-			return (
-				<CellValueTooltip value={jobName}>
-					<TanStackTable.Text>{jobName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={jobName} />;
 		},
 	},
 	{
@@ -102,40 +98,34 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		enableResize: true,
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return (
-				<CellValueTooltip value={namespaceName}>
-					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={namespaceName} />;
 		},
 	},
 	{
-		id: 'pod_counts_by_phase',
+		id: 'pod_counts_by_status',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#pod-counts-by-phase">
-				Pod Phases
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#pod-counts-by-status">
+				Pod Status
 			</ColumnHeader>
 		),
-		accessorFn: (row): InframonitoringtypesJobRecordDTO['podCountsByPhase'] =>
-			row.podCountsByPhase,
+		accessorFn: (row): InframonitoringtypesJobRecordDTO['podCountsByStatus'] =>
+			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
 		enableResize: true,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByPhase = row.podCountsByPhase;
-			if (!podCountsByPhase) {
+			const podCountsByStatus = row.podCountsByStatus;
+			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
-			return (
-				<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
-			);
+			return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
 		},
 	},
 	{
-		id: 'completion_status',
+		id: 'completion',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion-status">
-				Completion Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion">
+				Completions
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.successfulPods,
@@ -155,7 +145,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					{
 						value: row.desiredSuccessfulPods,
 						label: 'Desired',
-						color: Color.BG_ROBIN_500,
+						color: Color.BG_AMBER_500,
 					},
 				]}
 			/>

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

@@ -1,11 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 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';
@@ -14,7 +18,10 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getNamespaceMetricsQueryPayload,
+	getNamespacePodMetricsQueryPayload,
+	k8sNamespaceDetailsCountsConfig,
 	k8sNamespaceDetailsMetadataConfig,
+	k8sNamespaceGetCountsFilterExpression,
 	k8sNamespaceGetEntityName,
 	k8sNamespaceGetSelectedItemExpression,
 	k8sNamespaceInitialEventsExpression,
@@ -26,6 +33,7 @@ import {
 	getK8sNamespaceRowKey,
 	k8sNamespacesColumnsConfig,
 } from './table.config';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sNamespacesList({
 	controlListPrefix,
@@ -68,13 +76,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -87,7 +94,7 @@ function K8sNamespacesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesNamespaceRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listNamespaces(
@@ -105,17 +112,27 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
 		[],
 	);
 
+	const customTabs = useMemo(
+		() => [
+			createPodMetricsTab<InframonitoringtypesNamespaceRecordDTO>({
+				getQueryPayload: getNamespacePodMetricsQueryPayload,
+				category: InfraMonitoringEntity.NAMESPACES,
+				queryKey: 'namespacePodMetrics',
+			}),
+		],
+		[],
+	);
+
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO, SelectedItemParams>
@@ -137,9 +154,12 @@ function K8sNamespacesList({
 				getInitialLogTracesExpression={k8sNamespaceInitialLogTracesExpression}
 				getInitialEventsExpression={k8sNamespaceInitialEventsExpression}
 				metadataConfig={k8sNamespaceDetailsMetadataConfig}
+				countsConfig={k8sNamespaceDetailsCountsConfig}
+				getCountsFilterExpression={k8sNamespaceGetCountsFilterExpression}
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}
 				queryKeyPrefix="namespace"
+				customTabs={customTabs}
 			/>
 		</>
 	);

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

@@ -6,9 +6,17 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
+import {
+	getPodUtilizationByPodQueryPayloads,
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
+import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import {
 	buildEventsExpression,
 	buildExpressionFromSelectedItemParams,
@@ -33,6 +41,30 @@ export const k8sNamespaceDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframo
 		},
 	];
 
+export const k8sNamespaceDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesNamespaceRecordDTO>[] =
+	[
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sNamespaceInitialEventsExpression = (
 	item: InframonitoringtypesNamespaceRecordDTO,
 ): string =>
@@ -55,46 +87,78 @@ export const k8sNamespaceGetEntityName = (
 	item: InframonitoringtypesNamespaceRecordDTO,
 ): string => item.namespaceName || '';
 
+export const k8sNamespaceGetCountsFilterExpression = (
+	item: InframonitoringtypesNamespaceRecordDTO,
+): string => {
+	const clusterName = item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME];
+	const clauses: string[] = [];
+
+	if (clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(clusterName)}`,
+		);
+	}
+	if (item.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(item.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+};
+
 export const namespaceWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#memory-usage-bytes',
 	},
 	{
 		title: 'Pods CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#pods-cpu-top-10',
 	},
 	{
 		title: 'Pods Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#pods-memory-top-10',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-errors',
 	},
 	{
-		title: 'StatefulSets',
+		title: 'StatefulSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#statefulsets',
 	},
 	{
-		title: 'ReplicaSets',
+		title: 'ReplicaSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#replicasets',
 	},
 	{
-		title: 'DaemonSets',
+		title: 'DaemonSets (nodes)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#daemonsets',
 	},
 	{
-		title: 'Deployments',
+		title: 'Deployments (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#deployments',
 	},
 ];
 
@@ -1689,3 +1753,26 @@ 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, getPodPhaseStatusItems } from '../commonUtils';
+import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	GroupedStatusCounts,
@@ -83,11 +83,7 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const namespaceName = value as string;
-			return (
-				<CellValueTooltip value={namespaceName}>
-					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={namespaceName} />;
 		},
 	},
 	{
@@ -106,25 +102,25 @@ export const k8sNamespacesColumnsConfig: NamespaceTableColumnConfig[] = [
 		),
 	},
 	{
-		id: 'podCountsByPhase',
+		id: 'podCountsByStatus',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/namespaces#pod-counts-by-phase">
-				Pod Phases
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/namespaces#pod-counts-by-status">
+				Pod Status
 			</ColumnHeader>
 		),
 		accessorFn: (
 			row,
-		): InframonitoringtypesNamespaceRecordDTO['podCountsByPhase'] =>
-			row.podCountsByPhase,
+		): InframonitoringtypesNamespaceRecordDTO['podCountsByStatus'] =>
+			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByPhase = row.podCountsByPhase;
-			if (!podCountsByPhase) {
+			const podCountsByStatus = row.podCountsByStatus;
+			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
+				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
 			);
 		},
 	},

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

@@ -1,11 +1,15 @@
 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';
@@ -67,13 +71,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -86,7 +89,7 @@ function K8sNodesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesNodeRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listNodes(
@@ -104,11 +107,10 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},

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

@@ -57,42 +57,53 @@ export const nodeWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-bytes',
 	},
 	{
 		title: 'CPU Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-',
 	},
 	{
 		title: 'Memory Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-',
 	},
 	{
 		title: 'Pods by CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-cpu-top-10',
 	},
 	{
 		title: 'Pods by Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-memory-top-10',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-error-count',
 	},
 	{
 		title: 'Network IO rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-io-rate',
 	},
 	{
 		title: 'Filesystem usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-bytes',
 	},
 	{
 		title: 'Filesystem usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-',
 	},
 ];
 

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

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

@@ -1,11 +1,15 @@
 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';
@@ -67,13 +71,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -86,7 +89,7 @@ function K8sPodsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesPodRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listPods(
@@ -104,11 +107,10 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},

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

@@ -67,54 +67,74 @@ export const podWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-usage-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization',
 	},
 	{
 		title: 'Memory by State',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-by-state',
 	},
 	{
 		title: 'Memory Major Page Faults',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-major-page-faults',
 	},
 	{
 		title: 'CPU Usage by Container (cores)',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-usage-by-container-cores',
 	},
 	{
 		title: 'CPU Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Memory Usage by Container (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-usage-by-container-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-errors',
 	},
 	{
 		title: 'File system (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#file-system-bytes',
 	},
 ];
 

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

@@ -1,9 +1,9 @@
 import { Container } from '@signozhq/icons';
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
+import { Badge } 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,7 +11,11 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
-import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
+import {
+	formatBytes,
+	getPodStatusItems,
+	POD_STATUS_COLORS,
+} from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -40,15 +44,6 @@ 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[] = [
@@ -93,34 +88,30 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ value }): React.ReactNode => {
 			const podName = value as string;
-			return (
-				<CellValueTooltip value={podName}>
-					<TanStackTable.Text>{podName}</TanStackTable.Text>
-				</CellValueTooltip>
-			);
+			return <CellValueTooltip value={podName} />;
 		},
 	},
 	{
-		id: 'podPhase',
+		id: 'podStatus',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-phase">
-				Phase
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-status">
+				Status
 			</ColumnHeader>
 		),
-		accessorFn: (row): string => row.podPhase,
-		width: { min: 120 },
+		accessorFn: (row): string => row.podStatus,
+		width: { min: 160 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-expand',
 		cell: ({ row }): React.ReactNode => {
-			if (!row.podPhase) {
+			if (!row.podStatus) {
 				return <></>;
 			}
 
-			const color = POD_PHASE_COLORS[row.podPhase] || POD_PHASE_COLORS.unknown;
+			const color = POD_STATUS_COLORS[row.podStatus] || POD_STATUS_COLORS.unknown;
 			const label =
-				row.podPhase === InframonitoringtypesPodPhaseDTO.no_data
+				row.podStatus === InframonitoringtypesPodStatusDTO.no_data
 					? 'No Data'
-					: row.podPhase.charAt(0).toUpperCase() + row.podPhase.slice(1);
+					: row.podStatus.charAt(0).toUpperCase() + row.podStatus.slice(1);
 			return (
 				<Badge color={color} variant="outline">
 					{label}
@@ -129,30 +120,34 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'podCountsByPhase',
+		id: 'podCountsByStatus',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-phase">
-				Phases
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#pod-status">
+				Status
 			</ColumnHeader>
 		),
-		accessorFn: (row): InframonitoringtypesPodRecordDTO['podCountsByPhase'] =>
-			row.podCountsByPhase,
+		accessorFn: (row): InframonitoringtypesPodRecordDTO['podCountsByStatus'] =>
+			row.podCountsByStatus,
 		width: { min: 250 },
 		enableSort: false,
 		visibilityBehavior: 'hidden-on-collapse',
 		cell: ({ row }): React.ReactNode => {
-			const podCountsByPhase = row.podCountsByPhase;
-			if (!podCountsByPhase) {
+			const podCountsByStatus = row.podCountsByStatus;
+			if (!podCountsByStatus) {
 				return <TanStackTable.Text>-</TanStackTable.Text>;
 			}
 			return (
-				<GroupedStatusCounts items={getPodPhaseStatusItems(row.podCountsByPhase)} />
+				<GroupedStatusCounts items={getPodStatusItems(row.podCountsByStatus)} />
 			);
 		},
 	},
 	{
 		id: 'podAge',
-		header: 'Age',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#age">
+				Age
+			</ColumnHeader>
+		),
 		accessorFn: (row): number => row.podAge,
 		width: { min: 100 },
 		enableSort: false,
@@ -168,6 +163,28 @@ 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 => (
@@ -316,7 +333,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'namespace',
-		header: 'Namespace',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Namespace
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
 		width: { default: 100 },
@@ -328,7 +349,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'node',
-		header: 'Node',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Node
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME] || '',
 		width: { default: 100 },
@@ -340,7 +365,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'cluster',
-		header: 'Cluster',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Cluster
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] || '',
 		width: { default: 100 },

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

@@ -1,11 +1,15 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 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';
@@ -14,6 +18,7 @@ import { InfraMonitoringEntity } from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	getStatefulSetMetricsQueryPayload,
+	getStatefulSetPodMetricsQueryPayload,
 	k8sStatefulSetDetailsMetadataConfig,
 	k8sStatefulSetGetEntityName,
 	k8sStatefulSetGetSelectedItemExpression,
@@ -26,6 +31,7 @@ import {
 	getK8sStatefulSetRowKey,
 	k8sStatefulSetsColumnsConfig,
 } from './table.config';
+import { createPodMetricsTab } from 'container/InfraMonitoringK8sV2/EntityDetailsUtils/createPodMetricsTab';
 
 function K8sStatefulSetsList({
 	controlListPrefix,
@@ -68,13 +74,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -87,7 +92,7 @@ function K8sStatefulSetsList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesStatefulSetRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listStatefulSets(
@@ -105,17 +110,27 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
 		[],
 	);
 
+	const customTabs = useMemo(
+		() => [
+			createPodMetricsTab<InframonitoringtypesStatefulSetRecordDTO>({
+				getQueryPayload: getStatefulSetPodMetricsQueryPayload,
+				category: InfraMonitoringEntity.STATEFULSETS,
+				queryKey: 'statefulSetPodMetrics',
+			}),
+		],
+		[],
+	);
+
 	return (
 		<>
 			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO, SelectedItemParams>
@@ -140,6 +155,7 @@ function K8sStatefulSetsList({
 				entityWidgetInfo={statefulSetWidgetInfo}
 				getEntityQueryPayload={getStatefulSetMetricsQueryPayload}
 				queryKeyPrefix="statefulSet"
+				customTabs={customTabs}
 			/>
 		</>
 	);

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

@@ -7,7 +7,10 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	getPodUtilizationByPodQueryPayloads,
+	INFRA_MONITORING_ATTR_KEYS,
+} from '../constants';
 import { SelectedItemParams } from '../hooks';
 import {
 	buildEventsExpression,
@@ -72,26 +75,37 @@ export const statefulSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'CPU request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-request-limit-utilization-',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Memory request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-request-limit-utilization-',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/statefulsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#network-errors-count',
 	},
 ];
 
@@ -848,3 +862,29 @@ 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, getPodPhaseStatusItems } from '../commonUtils';
+import { formatBytes, getPodStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
 	EntityProgressBar,
@@ -88,11 +88,7 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			visibilityBehavior: 'hidden-on-expand',
 			cell: ({ value }): React.ReactNode => {
 				const statefulsetName = value as string;
-				return (
-					<CellValueTooltip value={statefulsetName}>
-						<TanStackTable.Text>{statefulsetName}</TanStackTable.Text>
-					</CellValueTooltip>
-				);
+				return <CellValueTooltip value={statefulsetName} />;
 			},
 		},
 		{
@@ -109,42 +105,36 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			enableResize: true,
 			cell: ({ value }): React.ReactNode => {
 				const namespaceName = value as string;
-				return (
-					<CellValueTooltip value={namespaceName}>
-						<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
-					</CellValueTooltip>
-				);
+				return <CellValueTooltip value={namespaceName} />;
 			},
 		},
 		{
-			id: 'pod_counts_by_phase',
+			id: 'pod_counts_by_status',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-counts-by-phase">
-					Pod Phases
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-counts-by-status">
+					Pod Status
 				</ColumnHeader>
 			),
 			accessorFn: (
 				row,
-			): InframonitoringtypesStatefulSetRecordDTO['podCountsByPhase'] =>
-				row.podCountsByPhase,
+			): InframonitoringtypesStatefulSetRecordDTO['podCountsByStatus'] =>
+				row.podCountsByStatus,
 			width: { min: 250 },
 			enableSort: false,
 			enableResize: true,
 			cell: ({ row }): React.ReactNode => {
-				const podCountsByPhase = row.podCountsByPhase;
-				if (!podCountsByPhase) {
+				const podCountsByStatus = row.podCountsByStatus;
+				if (!podCountsByStatus) {
 					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
-				return (
-					<GroupedStatusCounts items={getPodPhaseStatusItems(podCountsByPhase)} />
-				);
+				return <GroupedStatusCounts items={getPodStatusItems(podCountsByStatus)} />;
 			},
 		},
 		{
-			id: 'pod_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-status">
-					Pod Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.currentPods,

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

@@ -1,11 +1,15 @@
 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';
@@ -68,13 +72,12 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},
@@ -87,7 +90,7 @@ function K8sVolumesList({
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesVolumeRecordDTO | null;
-			error?: string | null;
+			error?: APIError | null;
 		}> => {
 			try {
 				const response = await listVolumes(
@@ -105,11 +108,10 @@ 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: errMsg,
+					error:
+						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
 				};
 			}
 		},

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

@@ -69,22 +69,27 @@ export const volumeWidgetInfo = [
 	{
 		title: 'Volume available',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available',
 	},
 	{
 		title: 'Volume capacity',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity',
 	},
 	{
 		title: 'Volume inodes used',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used',
 	},
 	{
 		title: 'Volume inodes',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes',
 	},
 	{
 		title: 'Volume inodes free',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free',
 	},
 ];
 

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

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

frontend/src/container/InfraMonitoringK8sV2/commonUtils.tsx

@@ -1,5 +1,9 @@
 import { Color } from '@signozhq/design-tokens';
-import { InframonitoringtypesPodCountsByPhaseDTO } from 'api/generated/services/sigNoz.schemas';
+import { BadgeColor } from '@signozhq/ui/badge';
+import {
+	InframonitoringtypesPodCountsByStatusDTO,
+	InframonitoringtypesPodStatusDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import { StatusCountItem } from './components/GroupedStatusCounts';
 
@@ -64,17 +68,106 @@ export function getStrokeColorForLimitUtilization(value: number): string {
 	return Color.BG_SAKURA_500;
 }
 
-/**
- * Builds StatusCountItem[] for GroupedStatusCounts from pod phase counts.
- */
-export function getPodPhaseStatusItems(
-	counts: InframonitoringtypesPodCountsByPhaseDTO,
+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,
 ): 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,3 +52,7 @@
 .divider {
 	--divider-color: rgba(255, 255, 255, 0.14);
 }
+
+.value {
+	width: fit-content;
+}

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

@@ -1,8 +1,9 @@
-import { useCallback, type ReactNode, type MouseEvent } from 'react';
+import { useCallback, 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';
 
@@ -11,12 +12,10 @@ 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 } =
@@ -94,7 +93,7 @@ export function CellValueTooltip({
 				className: styles.tooltipContentWrapper,
 			}}
 		>
-			{children}
+			<TanStackTable.Text className={styles.value}>{value}</TanStackTable.Text>
 		</TooltipSimple>
 	);
 }

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

@@ -17,9 +17,40 @@
 	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,11 +2,18 @@ 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 {
@@ -14,6 +21,45 @@ 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,
@@ -33,13 +79,15 @@ export function GroupedStatusCounts({
 						className={styles.separator}
 						style={{ backgroundColor: item.color }}
 					/>
-					<TooltipSimple title={`${item.label}: ${item.value}`}>
-						<span>
-							<TanStackTable.Text className={styles.value}>
-								{item.value || '-'}
-							</TanStackTable.Text>
-						</span>
-					</TooltipSimple>
+					<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>
 				</div>
 			))}
 		</div>

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -2,8 +2,12 @@ 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 { DataSource } from 'types/common/queryBuilder';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { v4 } from 'uuid';
 
 // TODO(backend): Find a way to generate this via openapi
 export const INFRA_MONITORING_ATTR_KEYS = {
@@ -130,6 +134,7 @@ export enum VIEWS {
 	CONTAINERS = 'containers',
 	PROCESSES = 'processes',
 	EVENTS = 'events',
+	POD_METRICS = 'pod_metrics',
 }
 
 export const VIEW_TYPES = {
@@ -137,6 +142,7 @@ export const VIEW_TYPES = {
 	LOGS: VIEWS.LOGS,
 	TRACES: VIEWS.TRACES,
 	EVENTS: VIEWS.EVENTS,
+	POD_METRICS: VIEWS.POD_METRICS,
 };
 
 export const K8sCategories = {
@@ -916,3 +922,261 @@ 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,18 +1,34 @@
+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';
 
-function AttributeMappingsTab(): JSX.Element {
-	const store = useAttributeMappingStore();
+interface AttributeMappingsTabProps {
+	editor: AttributeMappingEditor;
+	onEditGroup: (group: DraftGroup) => void;
+	onAddGroup: () => void;
+}
 
+// "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">
-			{store.isError ? (
+			{editor.isError ? (
 				<div className={styles.pageError} role="alert">
 					Failed to load mapping groups. Please try again.
 				</div>
 			) : (
-				<MappingsTable store={store} />
+				<MappingsTable
+					editor={editor}
+					onEditGroup={onEditGroup}
+					onAddGroup={onAddGroup}
+				/>
 			)}
 		</div>
 	);

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

@@ -2,9 +2,19 @@ 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,
@@ -14,7 +24,9 @@ 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(
@@ -39,6 +51,53 @@ 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.
@@ -51,7 +110,7 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('renders no error banner on a successful load', async () => {
 		setupGroups();
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await waitFor(() =>
 			expect(screen.getByTestId('group-name-group-1')).toBeInTheDocument(),
@@ -63,7 +122,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		server.use(
 			rest.get(GROUPS_ENDPOINT, (_req, res, ctx) => res(ctx.status(500))),
 		);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await expect(screen.findByRole('alert')).resolves.toHaveTextContent(
 			'Failed to load mapping groups. Please try again.',
@@ -72,7 +131,7 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('shows the empty state when there are no groups', async () => {
 		setupGroups([]);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await expect(
 			screen.findByTestId('mapper-groups-empty'),
@@ -81,58 +140,96 @@ describe('AttributeMappingsTab (integration)', () => {
 
 	it('renders each group header row with its name, condition count and status', async () => {
 		setupGroups();
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		// Condition filters are no longer shown inline as clauses — the header
-		// 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.
-		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();
+		// 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');
 
-		// 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();
+		// 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();
+
+		// 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();
 	});
 
-	it('renders the group enable state as a read-only switch', async () => {
+	it("stages a toggle of the group's enabled state via the header switch", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
-		// 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();
-		expect(toggle).toBeDisabled();
+
+		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();
 	});
 
 	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(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
-		// The toggle is the antd Collapse header, which owns the expanded state.
+		// The clickable Collapse header owns the expanded state; find it by the
+		// aria-expanded contract rather than any framework-internal class.
 		const header = screen
 			.getByTestId('group-expand-group-1')
-			.closest('.ant-collapse-header') as HTMLElement;
+			.closest('[aria-expanded]') as HTMLElement;
 		expect(header).toHaveAttribute('aria-expanded', 'false');
 
 		await expandGroup(user);
@@ -155,7 +252,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		setupMappers([
 			makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model', enabled: true }),
 		]);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
 		// Mappers are not fetched until the row is expanded.
@@ -172,29 +269,12 @@ 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();
@@ -203,7 +283,7 @@ describe('AttributeMappingsTab (integration)', () => {
 				res(ctx.status(500)),
 			),
 		);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -217,7 +297,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
 		setupMappers([]);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -243,7 +323,7 @@ describe('AttributeMappingsTab (integration)', () => {
 				},
 			}),
 		]);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -255,7 +335,7 @@ describe('AttributeMappingsTab (integration)', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		setupGroups();
 		setupMappers([makeMapper({ id: 'mapper-1', config: { sources: [] } })]);
-		render(<AttributeMappingsTab />);
+		render(<AttributeMappingsTabWithStore />);
 
 		await screen.findByTestId('group-name-group-1');
 		await expandGroup(user);
@@ -264,4 +344,167 @@ 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

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

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

@@ -0,0 +1,61 @@
+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,6 +7,7 @@
 
 .groupName {
 	color: var(--l1-foreground);
+	font-weight: var(--font-weight-semibold);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -17,3 +18,15 @@
 	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,10 +1,14 @@
+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: MappingGroup;
+	group: DraftGroup;
 }
 
 function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
@@ -13,22 +17,33 @@ function GroupHeader({ group }: GroupHeaderProps): JSX.Element {
 	return (
 		<div
 			className={styles.groupHeaderLabel}
-			data-testid={`group-expand-${group.id}`}
+			data-testid={`group-expand-${group.localId}`}
 		>
 			<Typography.Text
 				as="span"
 				className={styles.groupName}
-				testId={`group-name-${group.id}`}
+				testId={`group-name-${group.localId}`}
 			>
 				{group.name}
 			</Typography.Text>
-			<Typography.Text
-				as="span"
-				className={styles.groupCount}
-				testId={`group-condition-count-${group.id}`}
+			<TooltipSimple
+				title={
+					<ConditionsTooltip
+						attributes={group.attributes}
+						resource={group.resource}
+					/>
+				}
+				side="bottom"
+				align="start"
 			>
-				· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
-			</Typography.Text>
+				<span
+					className={styles.conditionCount}
+					data-testid={`group-condition-count-${group.localId}`}
+				>
+					· {conditionCount} {conditionCount === 1 ? 'condition' : 'conditions'}
+					<Info size={12} className={styles.conditionInfoIcon} />
+				</span>
+			</TooltipSimple>
 		</div>
 	);
 }

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

@@ -1,13 +1,22 @@
 import { Switch } from '@signozhq/ui/switch';
 
-import { MappingGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';
 
 interface GroupHeaderActionsProps {
-	group: MappingGroup;
+	group: DraftGroup;
+	onToggle: (localId: string, enabled: boolean) => void;
+	onEdit: (group: DraftGroup) => void;
+	onRemove: (localId: string) => void;
 }
 
-function GroupHeaderActions({ group }: GroupHeaderActionsProps): JSX.Element {
+function GroupHeaderActions({
+	group,
+	onToggle,
+	onEdit,
+	onRemove,
+}: GroupHeaderActionsProps): JSX.Element {
 	return (
 		<div
 			className={styles.actions}
@@ -15,10 +24,10 @@ function GroupHeaderActions({ group }: GroupHeaderActionsProps): JSX.Element {
 		>
 			<Switch
 				value={group.enabled}
-				// 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}`}
+				onChange={(checked): void => onToggle(group.localId, checked)}
+				testId={`group-enabled-${group.localId}`}
 			/>
+			<GroupActionsMenu group={group} onEdit={onEdit} onRemove={onRemove} />
 		</div>
 	);
 }

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

@@ -8,7 +8,26 @@
 	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,14 +1,20 @@
+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 {
-	MappingGroup,
-	Mapping,
+	DraftGroup,
+	DraftMapper,
+	Mapper,
 } from 'container/LLMObservability/AttributeMapping/types';
-import { buildMappingsFromListResponse } from 'container/LLMObservability/AttributeMapping/utils';
+import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
 import { COLUMN_COUNT } from '../constants';
-import MapperRow, { MapperRowSkeleton } from '../MapperRow';
-import MappingsColgroup from '../MappingsColgroup';
+import MapperRow from '../MapperRow/MapperRow';
+import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
+import MappingsColgroup from '../MappingsColgroup/MappingsColgroup';
 import styles from './GroupMappers.module.scss';
 
 const MAPPER_SKELETON_ROWS = 1;
@@ -19,72 +25,135 @@ const STATE_ROW_MOTION = {
 	transition: { duration: 0.18, ease: 'easeOut' },
 } as const;
 
-interface StateRowProps {
-	groupId: string;
-}
-
-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-${groupId}`}
-			>
-				Failed to load mappings. Please try again.
-			</td>
-		</motion.tr>
-	);
-}
-
-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-${groupId}`}
-			>
-				No mappings in this group yet.
-			</td>
-		</motion.tr>
-	);
-}
-
 interface GroupMappersProps {
-	group: MappingGroup;
+	group: DraftGroup;
+	editor: AttributeMappingEditor;
+	onAddMapper: (groupLocalId: string) => void;
+	onEditMapper: (groupLocalId: string, mapper: DraftMapper) => void;
 }
 
-function GroupMappers({ group }: GroupMappersProps): JSX.Element {
-	const {
-		data: mappers = [],
-		isLoading,
-		isError,
-	} = useListSpanMappers<Mapping[]>(
-		{
-			groupId: group.id,
-		},
-		{
-			query: {
-				refetchOnMount: false,
-				select: buildMappingsFromListResponse,
-			},
-		},
+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 } },
 	);
 
-	let rows: JSX.Element[];
-	if (isError) {
-		rows = [<ErrorRow key="error" groupId={group.id} />];
-	} else if (isLoading) {
-		rows = Array.from({ length: MAPPER_SKELETON_ROWS }).map((_, index) => (
+	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}`} />
-		));
-	} else if (mappers.length === 0) {
-		rows = [<EmptyRow key="empty" groupId={group.id} />];
+		),
+	);
+
+	const errorRow = (
+		<motion.tr
+			key="error"
+			className={styles.mapperStateRow}
+			{...STATE_ROW_MOTION}
+		>
+			<td
+				colSpan={COLUMN_COUNT}
+				className={styles.stateCell}
+				data-testid={`mappers-error-${group.localId}`}
+			>
+				<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>
+			</td>
+		</motion.tr>
+	);
+
+	const emptyRow = (
+		<motion.tr
+			key="empty"
+			className={styles.mapperStateRow}
+			{...STATE_ROW_MOTION}
+		>
+			<td
+				colSpan={COLUMN_COUNT}
+				className={styles.stateCell}
+				data-testid={`mappers-empty-${group.localId}`}
+			>
+				<span className={styles.stateContent}>
+					<ArrowLeftRight size={14} />
+					<Typography.Text as="span" size="base" color="muted">
+						No mappings in this group yet.
+					</Typography.Text>
+				</span>
+			</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>
+	);
+
+	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];
 	} else {
-		rows = mappers.map((mapper, index) => (
-			<MapperRow key={mapper.id} mapper={mapper} index={index} />
-		));
+		rows = [...mapperRows, addMapperRow];
 	}
 
 	return (

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

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

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

@@ -8,6 +8,7 @@ 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}>
@@ -15,10 +16,7 @@ function MapperRowSkeleton(): JSX.Element {
 					<Skeleton.Button active size="small" style={{ width: 56 }} />
 				</div>
 			</td>
-			<td className={styles.skeletonCell}>
-				<Skeleton.Button active size="small" style={{ width: 72 }} />
-			</td>
-			<td className={cx(styles.skeletonCell, styles.statusCell)}>
+			<td className={cx(styles.skeletonCell, styles.actionsCell)}>
 				<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,10 +2,6 @@
 	width: 32%;
 }
 
-.colWritesTo {
-	width: 140px;
-}
-
-.colStatus {
-	width: 120px;
+.colActions {
+	width: 176px;
 }

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

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

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

@@ -1,3 +1,16 @@
+.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;
@@ -5,7 +18,7 @@
 }
 
 .headerRow {
-	border-bottom: 1px solid var(--l2-border);
+	border-top: 1px solid var(--l2-border);
 }
 
 .headerCell {
@@ -73,7 +86,12 @@
 	}
 }
 
-.tableEmpty {
+.tableState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-3);
 	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,30 +1,96 @@
-import { useState } from 'react';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
+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 { Collapse, type CollapseProps, Skeleton } from 'antd';
 
-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 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 styles from './MappingsTable.module.scss';
 
 const SKELETON_ROW_COUNT = 3;
 
 interface MappingsTableProps {
-	store: AttributeMappingStore;
+	editor: AttributeMappingEditor;
+	onEditGroup: (group: DraftGroup) => void;
+	onAddGroup: () => void;
 }
 
-function MappingsTable({ store }: MappingsTableProps): JSX.Element {
+function MappingsTable({
+	editor,
+	onEditGroup,
+	onAddGroup,
+}: MappingsTableProps): JSX.Element {
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
+	const drawer = useMapperFormDrawer();
 
-	const isEmpty = !store.isLoading && store.groups.length === 0;
+	const { upsertMapper, removeMapper } = editor;
 
-	const items: CollapseProps['items'] = store.groups.map((group) => ({
-		key: group.id,
+	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,
 		label: <GroupHeader group={group} />,
-		extra: <GroupHeaderActions group={group} />,
-		children: <GroupMappers group={group} />,
+		extra: (
+			<GroupHeaderActions
+				group={group}
+				onToggle={editor.toggleGroup}
+				onEdit={onEditGroup}
+				onRemove={editor.removeGroup}
+			/>
+		),
+		children: (
+			<GroupMappers
+				group={group}
+				editor={editor}
+				onAddMapper={handleAddMapper}
+				onEditMapper={handleEditMapper}
+			/>
+		),
 	}));
 
 	const skeletonBanners = (
@@ -45,48 +111,79 @@ function MappingsTable({ store }: MappingsTableProps): JSX.Element {
 					</div>
 					<div className={styles.skeletonGroupRight}>
 						<Skeleton.Button active size="small" shape="round" />
+						<Skeleton.Avatar active size={16} shape="square" />
 					</div>
 				</div>
 			))}
 		</div>
 	);
 
-	if (isEmpty) {
-		return (
-			<div className={styles.tableEmpty} data-testid="mapper-groups-empty">
-				No mapping groups yet.
-			</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 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>
+			</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>
 			) : (
-				<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 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}
 				/>
 			)}
 		</div>

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

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

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

@@ -1,33 +0,0 @@
-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,6 +1,18 @@
 .llmObservabilityAttributeMapping {
 	display: flex;
 	flex-direction: column;
-	gap: var(--spacing-8);
-	padding: var(--spacing-0);
+	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);
 }

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

@@ -1,17 +1,45 @@
+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';
+import AttributeMappingHeader from './components/AttributeMappingHeader/AttributeMappingHeader';
 import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
+import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
+import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
-
-const noop = (): void => undefined;
+import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
+import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
 
 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 />,
+			label: 'Attribute Mappings',
+			children: (
+				<AttributeMappingsTab
+					editor={editor}
+					onEditGroup={groupDrawer.openForEdit}
+					onAddGroup={groupDrawer.openForAdd}
+				/>
+			),
 		},
 		{
 			key: 'test',
@@ -28,17 +56,39 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			data-testid="llm-observability-attribute-mapping-page"
 		>
 			<AttributeMappingHeader
-				isDirty={false}
-				isSaving={false}
-				onDiscard={noop}
-				onSave={noop}
+				isDirty={editor.isDirty}
+				isSaving={editor.isSaving}
+				onDiscard={discardConfirm.request}
+				onSave={editor.save}
 			/>
 
+			{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 } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } 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,4 +64,44 @@ 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,7 +2,8 @@
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
-	gap: var(--spacing-8);
+	margin-left: var(--spacing-2);
+	margin-top: var(--spacing-4);
 }
 
 .pageHeaderActions {

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

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

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

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