feat(qb): parse search() in the filter grammar (not yet implemented)

.devenv/docker/clickhouse/compose.yaml

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

.github/workflows/integrationci.yaml

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

docs/api/openapi.yml

@@ -7571,7 +7571,6 @@ components:
         groupBy:
           items:
             type: string
-          nullable: true
           type: array
         newGroupEvalDelay:
           type: string
@@ -7643,7 +7642,6 @@ components:
         alertStates:
           items:
             $ref: '#/components/schemas/RuletypesAlertState'
-          nullable: true
           type: array
         enabled:
           type: boolean

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

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

frontend/public/locales/en/titles.json

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

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

@@ -8675,9 +8675,9 @@ export interface RuletypesGettableTestRuleDTO {
 
 export interface RuletypesRenotifyDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	alertStates?: RuletypesAlertStateDTO[] | null;
+	alertStates?: RuletypesAlertStateDTO[];
 	/**
 	 * @type boolean
 	 */
@@ -8690,9 +8690,9 @@ export interface RuletypesRenotifyDTO {
 
 export interface RuletypesNotificationSettingsDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: string[] | null;
+	groupBy?: string[];
 	/**
 	 * @type string
 	 */

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -11,8 +11,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
-import { CheckedState } from '../../types';
-import { SectionType } from './v2/itemRules';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -150,8 +148,6 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
-	previousState,
-	sectionType,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -161,8 +157,6 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
-	previousState?: CheckedState;
-	sectionType?: SectionType;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -222,7 +216,6 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
-
 				switch (runningOperator) {
 					case 'in':
 						if (checked) {
@@ -253,29 +246,9 @@ export function applyCheckboxToggle({
 								});
 							}
 						} else if (!checked) {
-							// Related section: clicking to exclude creates NOT_IN for just this value
-							if (sectionType === SectionType.RELATED) {
-								const newFilter: TagFilterItem = {
-									id: uuid(),
-									op: getNotInOperator(source),
-									key: filter.attributeKey,
-									value,
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-								if (query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
-									);
-								}
-							} else if (isArray(currentFilter.value)) {
-								// if we are removing some value when the running operator is IN we filter.
-								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+							// if we are removing some value when the running operator is IN we filter.
+							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
 									value: currentFilter.value.filter((val) => val !== value),
@@ -302,38 +275,11 @@ export function applyCheckboxToggle({
 						}
 						break;
 					case 'nin':
-					case 'not in': {
-						// NOT IN means "exclude these values"
-						// Check if value is currently in the exclusion list
-						const isValueInFilter = isArray(currentFilter.value)
-							? currentFilter.value.includes(value)
-							: currentFilter.value === value;
-
-						// When clicking unchecked "Other" item, user wants to SELECT it
-						// Replace NOT IN filter with IN [value]
-						if (previousState === 'unchecked' && checked) {
-							const newFilter: TagFilterItem = {
-								id: uuid(),
-								op: getOperatorValue(OPERATORS.IN),
-								key: filter.attributeKey,
-								value,
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-							if (query.filter?.expression) {
-								query.filter.expression = removeKeysFromExpression(
-									query.filter.expression,
-									[filter.attributeKey.key],
-								);
-							}
-						} else if (!checked || !isValueInFilter) {
-							// Add to NOT IN when:
-							// - checked=false (user explicitly unchecked to exclude)
-							// - checked=true but value not in filter (clicking "other" value to exclude)
+					case 'not in':
+						// if the current running operator is NIN then when unchecking the value it gets
+						// added to the clause like key NIN [value1 , currentUnselectedValue]
+						if (!checked) {
+							// in case of array add the currentUnselectedValue to the list.
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -346,6 +292,7 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							} else {
+								// in case of not an array make it one!
 								const newFilter = {
 									...currentFilter,
 									value: [currentFilter.value as string, value],
@@ -357,9 +304,8 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							}
-						} else {
-							// Remove from NOT IN when value IS in filter and checked=true
-							// (user wants to include this value back)
+						} else if (checked) {
+							// opposite of above!
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -400,7 +346,6 @@ export function applyCheckboxToggle({
 							}
 						}
 						break;
-					}
 					case '=':
 						if (checked) {
 							const newFilter = {
@@ -444,11 +389,10 @@ export function applyCheckboxToggle({
 				}
 			}
 		} else {
-			// No filter for this key - all are visually selected.
-			// checked=true → user wants to select (IN), checked=false → exclude (NOT IN)
+			// case  - when there is no filter for the current key that means all are selected right now.
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
-				op: checked ? getOperatorValue(OPERATORS.IN) : getNotInOperator(source),
+				op: getNotInOperator(source),
 				key: filter.attributeKey,
 				value,
 			};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -10,8 +10,6 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
-import { CheckedState } from '../../types';
-import { SectionType } from './v2/itemRules';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -26,8 +24,6 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
 	) => void;
 	onClear: () => void;
 }
@@ -57,8 +53,6 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -70,8 +64,6 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
-				previousState,
-				sectionType,
 			}),
 		);
 	};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -1,103 +0,0 @@
-.checkboxFilter {
-	display: flex;
-	flex-direction: column;
-	padding: var(--spacing-6);
-	gap: var(--spacing-6);
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.search {
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-focus-border-color: var(--l2-border);
-}
-
-.searchSpinner {
-	color: var(--l2-foreground);
-	animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-.values {
-	display: flex;
-	flex-direction: column;
-}
-
-.sectionValues {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.loadingValues {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--spacing-6) 0;
-}
-
-.loadingMore {
-	align-self: center;
-}
-
-.noData {
-	align-self: center;
-}
-
-.showMore {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.showMoreText {
-	color: var(--accent-primary);
-	cursor: pointer;
-}
-
-.goToDocs {
-	display: flex;
-	flex-direction: column;
-	gap: 44px;
-}
-
-.goToDocsContainer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	margin-top: var(--spacing-2);
-}
-
-.goToDocsMessage {
-	color: var(--l2-foreground);
-	font-size: 14px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.goToDocsButton {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	cursor: pointer;
-	margin: 0 0 var(--spacing-2);
-	padding: 0;
-}
-
-.goToDocsButtonText {
-	color: var(--bg-robin-400);
-	font-size: 14px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -1,126 +0,0 @@
-import { render, RenderResult } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	FiltersType,
-	IQuickFiltersConfig,
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from '../../../types';
-import CheckboxFilterV2 from './CheckboxFilterV2';
-
-export const DEFAULT_FILTER: IQuickFiltersConfig = {
-	type: FiltersType.CHECKBOX,
-	title: 'Environment',
-	attributeKey: {
-		key: 'deployment.environment',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	dataSource: DataSource.TRACES,
-	defaultOpen: true,
-};
-
-export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
-	startUnixMilli: 1700000000000,
-	endUnixMilli: 1700003600000,
-	existingQuery: null,
-};
-
-export function mockFieldsValuesAPI(response: {
-	relatedValues?: (string | null)[];
-	stringValues?: (string | null)[];
-	numberValues?: (number | null)[];
-}): void {
-	server.use(
-		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						values: {
-							relatedValues: response.relatedValues ?? [],
-							stringValues: response.stringValues ?? [],
-							numberValues: response.numberValues ?? [],
-						},
-					},
-				}),
-			),
-		),
-	);
-}
-
-export function mockFieldsValuesAPILoading(): void {
-	server.use(
-		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
-			res(ctx.delay(10000)),
-		),
-	);
-}
-
-export function setupServer(): void {
-	beforeAll(() => server.listen({ onUnhandledRequest: 'bypass' }));
-	afterEach(() => server.resetHandlers());
-	afterAll(() => server.close());
-}
-
-export interface FilterItemConfig {
-	op: string;
-	value: string | string[];
-}
-
-export function renderWithFilter(
-	onFilterChange: jest.Mock,
-	filterItem?: FilterItemConfig,
-): RenderResult {
-	const items: TagFilterItem[] = filterItem
-		? [
-				{
-					key: { key: 'deployment.environment' },
-					op: filterItem.op,
-					value: filterItem.value,
-				} as TagFilterItem,
-			]
-		: [];
-
-	return render(
-		<CheckboxFilterV2
-			filter={DEFAULT_FILTER}
-			source={QuickFiltersSource.TRACES_EXPLORER}
-			useFieldApis={{
-				...DEFAULT_USE_FIELD_APIS,
-				existingQuery: 'service.name = "api"',
-			}}
-			onFilterChange={onFilterChange}
-		/>,
-		undefined,
-		{
-			queryBuilderOverrides: {
-				currentQuery: {
-					builder: {
-						queryData: [
-							{
-								filters: { items, op: 'AND' },
-								filter: { expression: 'service.name = "api"' },
-							},
-						],
-					},
-				},
-			} as never,
-		},
-	);
-}
-
-export function getFilterFromCall(
-	onFilterChange: jest.Mock,
-	callIndex = 0,
-): TagFilterItem | undefined {
-	const query = onFilterChange.mock.calls[callIndex]?.[0] as Query | undefined;
-	return query?.builder.queryData[0]?.filters?.items?.find(
-		(item) => item.key?.key === 'deployment.environment',
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -1,241 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { LoaderCircle } from '@signozhq/icons';
-import {
-	IQuickFiltersConfig,
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
-import useActiveQueryIndex from '../useActiveQueryIndex';
-import useCheckboxDisclosure from '../useCheckboxDisclosure';
-import useCheckboxFilterActions from '../useCheckboxFilterActions';
-import useCheckboxFilterState from '../useCheckboxFilterState';
-import { useFieldValues } from './useFieldValues';
-import { useExistingQuery } from './useExistingQuery';
-import { isKeyMatch } from '../utils';
-
-import { CheckboxFilterV2Header } from './CheckboxFilterV2Header';
-import { CheckboxFilterV2Section } from './CheckboxFilterV2Section';
-import { buildSelectedSet, useSectionedValues } from './useSectionedValues';
-import { useStaleRelatedExclusions } from './useStaleRelatedExclusions';
-
-import styles from './CheckboxFilterV2.module.scss';
-
-interface CheckboxFilterV2Props {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	onFilterChange?: (query: Query) => void;
-	useFieldApis: QuickFilterCheckboxUseFieldApis;
-}
-
-export default function CheckboxFilterV2(
-	props: CheckboxFilterV2Props,
-): JSX.Element {
-	const { source, filter, onFilterChange, useFieldApis } = props;
-	const [searchText, setSearchText] = useState<string>('');
-	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
-
-	const { currentQuery } = useQueryBuilder();
-	const activeQueryIndex = useActiveQueryIndex(source);
-
-	const {
-		isOpen,
-		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	} = useCheckboxDisclosure({ filter, activeQueryIndex });
-
-	// Auto-preserve open state when filter is present
-	useEffect(() => {
-		if (isSomeFilterPresentForCurrentAttribute && userToggleState === null) {
-			setUserToggleState(true);
-		}
-	}, [isSomeFilterPresentForCurrentAttribute, userToggleState]);
-
-	const { existingQuery, hasExistingQuery } = useExistingQuery({
-		useFieldApis,
-		activeQueryIndex,
-	});
-
-	const { relatedValues, allValues, isLoading, isFetching } = useFieldValues({
-		filter,
-		searchText,
-		existingQuery,
-		metricNamespace: useFieldApis.metricNamespace,
-		startUnixMilli: useFieldApis.startUnixMilli,
-		endUnixMilli: useFieldApis.endUnixMilli,
-		enabled: isOpen,
-	});
-
-	// Track if initial load completed (don't show skeleton after first load)
-	// Must track if loading ever started, otherwise hasLoadedOnce gets set
-	// immediately on first render when query is disabled (isLoading=false)
-	const hasLoadedOnce = useRef(false);
-	const wasLoading = useRef(false);
-	if (isLoading) {
-		wasLoading.current = true;
-	}
-	if (!isLoading && wasLoading.current && !hasLoadedOnce.current) {
-		hasLoadedOnce.current = true;
-	}
-
-	// Combine for state derivation
-	const attributeValues = useMemo(() => {
-		const combined = [...relatedValues, ...allValues];
-		return [...new Set(combined)];
-	}, [relatedValues, allValues]);
-
-	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
-		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
-
-	const { onChange, onClear } = useCheckboxFilterActions({
-		filter,
-		source,
-		attributeValues,
-		activeQueryIndex,
-		onFilterChange,
-	});
-
-	const setSearchTextDebounced = useDebouncedFn((...args) => {
-		setSearchText(args[0] as string);
-	}, DEBOUNCE_DELAY);
-
-	const currentFilterOp = useMemo(() => {
-		const filterSync = currentQuery?.builder.queryData?.[
-			activeQueryIndex
-		]?.filters?.items.find((item) =>
-			isKeyMatch(item.key?.key, filter.attributeKey.key),
-		);
-		return filterSync?.op;
-	}, [
-		currentQuery?.builder.queryData,
-		activeQueryIndex,
-		filter.attributeKey.key,
-	]);
-
-	const isNotInOperator = NON_SELECTED_OPERATORS.includes(currentFilterOp || '');
-
-	const selectedValues = useMemo(
-		() => [
-			...buildSelectedSet(
-				currentFilterState,
-				isSomeFilterPresentForCurrentAttribute,
-				isNotInOperator,
-			),
-		],
-		[currentFilterState, isSomeFilterPresentForCurrentAttribute, isNotInOperator],
-	);
-
-	const isRefreshing = isFetching && !isLoading && searchText === '';
-	const relatedExclusions = useStaleRelatedExclusions({
-		selectedValues,
-		isFetching,
-		isRefreshing,
-	});
-
-	const { sections, totalCount } = useSectionedValues({
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		visibleItemsCount,
-		relatedExclusions,
-	});
-
-	return (
-		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
-			<CheckboxFilterV2Header
-				title={filter.title}
-				isOpen={isOpen}
-				showClearAll={!!attributeValues.length}
-				onToggleOpen={onToggleOpen}
-				onClear={onClear}
-				isSomeFilterPresentForCurrentAttribute={
-					isSomeFilterPresentForCurrentAttribute
-				}
-			/>
-			{isOpen && isLoading && !hasLoadedOnce.current && (
-				<section>
-					<Skeleton paragraph={{ rows: 4 }} />
-				</section>
-			)}
-			{isOpen && (!isLoading || hasLoadedOnce.current) && (
-				<>
-					<section className={styles.search}>
-						<Input
-							placeholder="Filter values"
-							onChange={(e): void => setSearchTextDebounced(e.target.value)}
-							disabled={isFilterDisabled}
-							data-testid="checkbox-filter-search"
-							suffix={
-								isFetching ? (
-									<LoaderCircle
-										size={14}
-										className={styles.searchSpinner}
-										data-testid="checkbox-filter-search-loading"
-									/>
-								) : null
-							}
-						/>
-					</section>
-
-					{totalCount > 0 && (
-						<section className={styles.values}>
-							{sections.map((section, index) => (
-								<CheckboxFilterV2Section
-									key={section.type}
-									section={section}
-									index={index}
-									isFilterDisabled={isFilterDisabled}
-									filter={filter}
-									isSomeFilterPresentForCurrentAttribute={
-										isSomeFilterPresentForCurrentAttribute
-									}
-									isMultipleValuesTrueForTheKey={isMultipleValuesTrueForTheKey}
-									onChange={onChange}
-								/>
-							))}
-						</section>
-					)}
-
-					{totalCount === 0 && hasLoadedOnce.current && !isFetching && (
-						<section
-							className={styles.noData}
-							data-testid={
-								searchText
-									? 'checkbox-filter-no-search-results'
-									: 'checkbox-filter-empty'
-							}
-						>
-							<Typography.Text>No values found</Typography.Text>
-						</section>
-					)}
-
-					{visibleItemsCount < totalCount &&
-						!(searchText && (isLoading || isFetching)) && (
-							<section className={styles.showMore}>
-								<Typography.Text
-									className={styles.showMoreText}
-									onClick={onShowMore}
-									data-testid="checkbox-filter-show-more"
-								>
-									Show More...
-								</Typography.Text>
-							</section>
-						)}
-				</>
-			)}
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -1,33 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	cursor: pointer;
-}
-
-.leftAction {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-}
-
-.title {
-	color: var(--l2-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	text-transform: capitalize;
-}
-
-.rightAction {
-	display: flex;
-	align-items: center;
-	min-width: 48px;
-}
-
-.clearAll {
-	font-size: 12px;
-	color: var(--accent-primary);
-	cursor: pointer;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,62 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-import styles from './CheckboxFilterV2Header.module.scss';
-
-interface CheckboxFilterHeaderProps {
-	title: string;
-	isOpen: boolean;
-	showClearAll: boolean;
-	onToggleOpen: () => void;
-	onClear: () => void;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-}
-
-export function CheckboxFilterV2Header({
-	title,
-	isOpen,
-	showClearAll,
-	onToggleOpen,
-	onClear,
-	isSomeFilterPresentForCurrentAttribute,
-}: CheckboxFilterHeaderProps): JSX.Element {
-	return (
-		<section
-			role="button"
-			tabIndex={0}
-			className={styles.header}
-			onClick={onToggleOpen}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onToggleOpen();
-				}
-			}}
-			data-testid="checkbox-filter-header"
-			data-state={isOpen ? 'open' : 'closed'}
-		>
-			<section className={styles.leftAction}>
-				{isOpen ? (
-					<ChevronDown size={13} cursor="pointer" />
-				) : (
-					<ChevronRight size={13} cursor="pointer" />
-				)}
-				<Typography.Text className={styles.title}>{title}</Typography.Text>
-			</section>
-			<section className={styles.rightAction}>
-				{isOpen && showClearAll && isSomeFilterPresentForCurrentAttribute && (
-					<Typography.Text
-						className={styles.clearAll}
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							onClear();
-						}}
-						data-testid="checkbox-filter-clear-all"
-					>
-						Clear
-					</Typography.Text>
-				)}
-			</section>
-		</section>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Section.tsx

@@ -1,106 +0,0 @@
-import {
-	IQuickFiltersConfig,
-	CheckedState,
-} from 'components/QuickFilters/types';
-
-import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
-import { SectionDivider } from './SectionDivider';
-import { Section } from './useSectionedValues';
-import { SectionType } from './itemRules';
-
-import styles from './CheckboxFilterV2.module.scss';
-
-interface SectionConfig {
-	label: string;
-	tooltip?: string;
-}
-
-function getSectionConfig(type: SectionType): SectionConfig | null {
-	switch (type) {
-		case SectionType.SELECTED:
-			return { label: 'Selected' };
-		case SectionType.RELATED:
-			return {
-				label: 'Related',
-				tooltip: 'Values that are filtered by your current selection.',
-			};
-		case SectionType.ALL_VALUES:
-			return { label: 'All values' };
-		default:
-			return null;
-	}
-}
-
-interface CheckboxFilterV2SectionProps {
-	section: Section;
-	index: number;
-	isFilterDisabled: boolean;
-	filter: IQuickFiltersConfig;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isMultipleValuesTrueForTheKey: boolean;
-	onChange: (
-		value: string,
-		checked: boolean,
-		isOnly: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
-	) => void;
-}
-
-export function CheckboxFilterV2Section(
-	props: CheckboxFilterV2SectionProps,
-): JSX.Element | null {
-	const {
-		section,
-		index,
-		isFilterDisabled,
-		filter,
-		isSomeFilterPresentForCurrentAttribute,
-		isMultipleValuesTrueForTheKey,
-		onChange,
-	} = props;
-
-	if (section.items.length === 0) {
-		return null;
-	}
-
-	const config = getSectionConfig(section.type);
-
-	// Show divider for all sections except first SELECTED section
-	const showDivider =
-		config !== null && (index > 0 || section.type !== SectionType.SELECTED);
-
-	return (
-		<div data-testid={`section-${section.type}`} className={styles.sectionValues}>
-			{showDivider && config && (
-				<SectionDivider label={config.label} tooltip={config.tooltip} />
-			)}
-			{section.items.map(({ value, badge, checkedState }) => {
-				const isChecked = checkedState === 'checked';
-
-				return (
-					<CheckboxFilterV2ValueRow
-						key={value}
-						value={value}
-						checkedState={checkedState}
-						disabled={isFilterDisabled}
-						title={filter.title}
-						badge={badge}
-						onlyButtonLabel={
-							isSomeFilterPresentForCurrentAttribute
-								? isChecked && !isMultipleValuesTrueForTheKey
-									? 'All'
-									: 'Only'
-								: 'Only'
-						}
-						customRendererForValue={filter.customRendererForValue}
-						onCheckboxChange={(checked, previousState): void =>
-							onChange(value, checked, false, previousState, section.type)
-						}
-						onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
-					/>
-				);
-			})}
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -1,164 +0,0 @@
-.valueRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	min-height: 24px;
-}
-
-.checkbox {
-	display: inline-flex;
-	align-items: center;
-}
-
-.valueButton {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	align-items: center;
-	gap: var(--spacing-2);
-	width: calc(100% - 24px);
-	cursor: pointer;
-}
-
-.content {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.valueLabel {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.actions {
-	display: grid;
-	align-items: center;
-	justify-items: end;
-
-	// Stack badge / only / toggle in a single cell so the crossfade overlaps
-	// instead of laying them side-by-side mid-transition.
-	> * {
-		grid-area: 1 / 1;
-	}
-}
-
-.badge {
-	opacity: 1;
-	transition:
-		opacity 0.16s ease,
-		display 0.16s allow-discrete;
-}
-
-.onlyButton {
-	display: none;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transform: translateX(4px);
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease,
-		display 0.16s allow-discrete;
-	--button-height: 21px;
-	--button-padding: var(--spacing-5);
-
-	&:hover {
-		background-color: unset;
-	}
-}
-
-.toggleButton {
-	display: none;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transform: translateX(4px);
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease,
-		display 0.16s allow-discrete;
-	--button-height: 21px;
-	--button-padding: var(--spacing-5);
-
-	&:hover {
-		background-color: unset;
-	}
-}
-
-.isDisabled {
-	cursor: not-allowed;
-
-	.valueLabel {
-		color: var(--l3-foreground);
-	}
-
-	.onlyButton {
-		cursor: not-allowed;
-		color: var(--l3-foreground);
-	}
-
-	.toggleButton {
-		cursor: not-allowed;
-		color: var(--l3-foreground);
-	}
-}
-
-.valueButton:hover {
-	.onlyButton {
-		display: flex;
-		opacity: 1;
-		transform: translateX(0);
-
-		@starting-style {
-			opacity: 0;
-			transform: translateX(4px);
-		}
-	}
-
-	.badge {
-		display: none;
-		opacity: 0;
-	}
-}
-
-.checkbox:hover ~ .valueButton {
-	.toggleButton {
-		display: flex;
-		opacity: 1;
-		transform: translateX(0);
-
-		@starting-style {
-			opacity: 0;
-			transform: translateX(4px);
-		}
-	}
-
-	.badge {
-		display: none;
-		opacity: 0;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.badge,
-	.onlyButton,
-	.toggleButton {
-		transition: none;
-	}
-}
-
-.indicatorFalse {
-	width: 2px;
-	height: 11px;
-	border-radius: 2px;
-	background: var(--danger-background);
-}
-
-.indicatorTrue {
-	width: 2px;
-	height: 11px;
-	border-radius: 2px;
-	background: var(--bg-forest-500);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx

@@ -1,118 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import { BadgeConfig } from './itemRules';
-import { CheckedState } from '../../../types';
-import styles from './CheckboxFilterV2ValueRow.module.scss';
-
-interface ValueRowProps {
-	value: string;
-	checkedState: CheckedState;
-	disabled: boolean;
-	title: string;
-	onlyButtonLabel: string;
-	customRendererForValue?: (value: string) => JSX.Element;
-	onCheckboxChange: (checked: boolean, previousState: CheckedState) => void;
-	onOnlyOrAllClick: () => void;
-	badge: BadgeConfig | null;
-}
-
-function toCheckboxValue(state: CheckedState): boolean | 'indeterminate' {
-	if (state === 'indeterminate') {
-		return 'indeterminate';
-	}
-	return state === 'checked';
-}
-
-const INDICATOR_CLASS_MAP = {
-	false: styles.indicatorFalse,
-	true: styles.indicatorTrue,
-} as Record<string, string>;
-
-export function CheckboxFilterV2ValueRow({
-	value,
-	checkedState,
-	disabled,
-	title,
-	onlyButtonLabel,
-	customRendererForValue,
-	onCheckboxChange,
-	onOnlyOrAllClick,
-	badge,
-}: ValueRowProps): JSX.Element {
-	const indicatorClass = INDICATOR_CLASS_MAP[value];
-
-	return (
-		<div
-			className={styles.valueRow}
-			data-testid={`checkbox-value-row-${value}`}
-			data-state={checkedState}
-			data-disabled={disabled}
-		>
-			<div className={styles.checkbox}>
-				<Checkbox
-					onChange={(isChecked): void =>
-						onCheckboxChange(isChecked === true, checkedState)
-					}
-					value={toCheckboxValue(checkedState)}
-					disabled={disabled}
-					color="primary"
-					testId={`checkbox-${title}-${value}`}
-				/>
-			</div>
-
-			<div
-				role="button"
-				tabIndex={disabled ? -1 : 0}
-				className={cx(styles.valueButton, disabled && styles.isDisabled)}
-				onClick={(): void => {
-					if (disabled) {
-						return;
-					}
-					onOnlyOrAllClick();
-				}}
-				onKeyDown={(e): void => {
-					if (disabled) {
-						return;
-					}
-					if (e.key === 'Enter' || e.key === ' ') {
-						onOnlyOrAllClick();
-					}
-				}}
-			>
-				<div className={styles.content}>
-					{indicatorClass && <div className={indicatorClass} />}
-					{customRendererForValue ? (
-						customRendererForValue(value)
-					) : (
-						<Typography.Text title={value} className={styles.valueLabel}>
-							{value}
-						</Typography.Text>
-					)}
-				</div>
-
-				<div className={styles.actions}>
-					{badge && (
-						<Badge
-							variant="outline"
-							color={badge.color}
-							className={styles.badge}
-							testId={`badge-${badge.key}`}
-						>
-							{badge.label}
-						</Badge>
-					)}
-					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
-						{onlyButtonLabel}
-					</Button>
-					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
-						Toggle
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/SectionDivider.module.scss

@@ -1,29 +0,0 @@
-.divider {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	padding: var(--spacing-2) 0;
-
-	margin-bottom: calc(-1 * var(--spacing-4));
-}
-
-.line {
-	flex: 1;
-	height: 1px;
-	background: var(--l1-border);
-}
-
-.label {
-	font-size: var(--periscope-font-size-small);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--l3-foreground);
-	white-space: nowrap;
-}
-
-.infoIcon {
-	color: var(--l3-foreground);
-	cursor: help;
-	flex-shrink: 0;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/SectionDivider.tsx

@@ -1,33 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Info } from '@signozhq/icons';
-
-import styles from './SectionDivider.module.scss';
-
-interface SectionDividerProps {
-	label: string;
-	tooltip?: string;
-}
-
-export function SectionDivider({
-	label,
-	tooltip,
-}: SectionDividerProps): JSX.Element {
-	const testId = label.toLowerCase().replace(/\s+/g, '-');
-	return (
-		<div className={styles.divider} data-testid={`section-divider-${testId}`}>
-			<div className={styles.line} />
-			<Typography.Text className={styles.label}>{label}</Typography.Text>
-			{tooltip && (
-				<Tooltip title={tooltip}>
-					<Info
-						size={12}
-						className={styles.infoIcon}
-						data-testid="section-divider-info"
-					/>
-				</Tooltip>
-			)}
-			<div className={styles.line} />
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -1,302 +0,0 @@
-import { screen } from '@testing-library/react';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-const USE_FIELD_APIS_AUTO_DERIVE = {
-	...DEFAULT_USE_FIELD_APIS,
-	existingQuery: undefined,
-};
-
-setupServer();
-
-describe('CheckboxFilterV2 - existingQuery calculation', () => {
-	const captureExistingQuery = (): Promise<string | null> =>
-		new Promise((resolve) => {
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const existingQuery = req.url.searchParams.get('existingQuery');
-					resolve(existingQuery);
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: ['test'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-		});
-
-	describe('useFieldApis.existingQuery takes precedence', () => {
-		it('uses useFieldApis.existingQuery when provided', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'custom.query = "value"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('custom.query = "value"');
-		});
-
-		it('returns undefined when useFieldApis.existingQuery is null', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: null,
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBeNull();
-		});
-	});
-
-	describe('V5 filter.expression preferred over V3 filters.items', () => {
-		it('uses V5 filter.expression when both exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'from-v3-items',
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'v5.expression = "preferred"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('v5.expression = "preferred"');
-		});
-
-		it('uses V5 filter.expression when no V3 items exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'only.v5 = "expression"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('only.v5 = "expression"');
-		});
-	});
-
-	describe('V3 filters.items fallback', () => {
-		it('converts V3 filters.items to expression when no V5 expression exists', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api-service',
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe("service.name = 'api-service'");
-		});
-
-		it('converts multiple V3 filters.items with AND operator', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api',
-												},
-												{
-													key: { key: 'env', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'prod',
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe("service.name = 'api' AND env = 'prod'");
-		});
-
-		it('returns undefined when no filters exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBeNull();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -1,768 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	getFilterFromCall,
-	mockFieldsValuesAPI,
-	renderWithFilter,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - interactions', () => {
-	describe('search functionality', () => {
-		it('filters values based on search text', async () => {
-			const user = userEvent.setup();
-
-			let searchTextReceived = '';
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					searchTextReceived = req.url.searchParams.get('searchText') || '';
-
-					const values =
-						searchTextReceived === ''
-							? ['production', 'staging', 'development']
-							: ['production'];
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: values,
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(searchTextReceived).toBe('prod');
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.queryByTestId('checkbox-value-row-staging'),
-				).not.toBeInTheDocument();
-			});
-		});
-
-		it('filters values via search while preserving existingQuery context', async () => {
-			const user = userEvent.setup();
-
-			let requestCount = 0;
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					requestCount += 1;
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					if (requestCount === 1) {
-						return res(
-							ctx.status(200),
-							ctx.json({
-								status: 'success',
-								data: {
-									values: {
-										relatedValues: ['production'],
-										stringValues: ['staging', 'development'],
-										numberValues: [],
-									},
-								},
-							}),
-						);
-					}
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: searchText === 'prod' ? ['production'] : [],
-									stringValues: searchText === 'prod' ? ['production'] : ['staging'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			// Related values now appear in "Related" section (no badge, uses divider instead)
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(
-					screen.queryByTestId('checkbox-value-row-staging'),
-				).not.toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-production'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows filtered results in all_values section when searching with existingQuery', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: searchText === '' ? ['prod', 'staging'] : ['prod-match'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-prod');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-prod-match'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows empty search results message when no matches found', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: searchText === '' ? ['prod', 'staging'] : [],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-prod');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'xyz-no-match');
-
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-no-search-results'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows both RELATED and ALL_VALUES sections with non-overlapping values', async () => {
-			// This tests the bug fix where different pod names in relatedValues vs stringValues
-			// caused all items to go to ALL_VALUES instead of showing RELATED section
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									// Non-overlapping: different pod instances
-									relatedValues: ['pod-a-instance-1', 'pod-b-instance-1'],
-									stringValues: ['pod-a-instance-2', 'pod-b-instance-2'],
-									numberValues: [],
-								},
-							},
-						}),
-					),
-				),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			// Wait for values to load
-			await screen.findByTestId('checkbox-value-row-pod-a-instance-1');
-
-			// RELATED section should exist with relatedValues
-			expect(screen.getByTestId('section-related')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-a-instance-1'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-b-instance-1'),
-			).toBeInTheDocument();
-
-			// ALL_VALUES section should exist with stringValues
-			expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-a-instance-2'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-b-instance-2'),
-			).toBeInTheDocument();
-		});
-
-		it('shows both sections during search with filtered non-overlapping values', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					// Simulate API filtering - both arrays filtered but remain non-overlapping
-					const relatedValues =
-						searchText === '' ? ['pod-a-v1', 'pod-b-v1', 'pod-c-v1'] : ['pod-a-v1']; // filtered to match 'pod-a'
-					const stringValues =
-						searchText === '' ? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2'] : ['pod-a-v2']; // filtered to match 'pod-a'
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues,
-									stringValues,
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-pod-a-v1');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'pod-a');
-
-			// After search, both sections should still appear with filtered results
-			await waitFor(() => {
-				// RELATED section with filtered relatedValues
-				expect(screen.getByTestId('section-related')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-pod-a-v1'),
-				).toBeInTheDocument();
-
-				// ALL_VALUES section with filtered stringValues
-				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-pod-a-v2'),
-				).toBeInTheDocument();
-
-				// Other values should be filtered out
-				expect(
-					screen.queryByTestId('checkbox-value-row-pod-b-v1'),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('header interactions', () => {
-		it('collapses when header clicked on open filter', async () => {
-			const user = userEvent.setup();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'open');
-
-			await user.click(header);
-
-			expect(header).toHaveAttribute('data-state', 'closed');
-			expect(
-				screen.queryByTestId('checkbox-value-row-production'),
-			).not.toBeInTheDocument();
-		});
-
-		it('expands when header clicked on closed filter', async () => {
-			const user = userEvent.setup();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'closed');
-
-			await user.click(header);
-
-			expect(header).toHaveAttribute('data-state', 'open');
-			await screen.findByTestId('checkbox-value-row-production');
-		});
-	});
-
-	describe('show more functionality', () => {
-		it('shows "Show More..." when more than 10 values', async () => {
-			const values = Array.from(
-				{ length: 15 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-			mockFieldsValuesAPI({ stringValues: values });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-
-			expect(screen.getByTestId('checkbox-filter-show-more')).toBeInTheDocument();
-
-			expect(
-				screen.queryByTestId('checkbox-value-row-value-10'),
-			).not.toBeInTheDocument();
-		});
-
-		it('loads more values when "Show More..." clicked', async () => {
-			const user = userEvent.setup();
-
-			const values = Array.from(
-				{ length: 15 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-			mockFieldsValuesAPI({ stringValues: values });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-
-			await user.click(screen.getByTestId('checkbox-filter-show-more'));
-
-			await screen.findByTestId('checkbox-value-row-value-10');
-			expect(
-				screen.getByTestId('checkbox-value-row-value-14'),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('clear functionality', () => {
-		it('shows clear button when filter is open and has filter applied', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-		});
-
-		it('hides clear button when no filter applied for attribute', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-
-		it('calls onFilterChange when clear clicked', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onFilterChange).toHaveBeenCalled();
-		});
-	});
-
-	describe('value row interactions', () => {
-		it('calls onFilterChange when checkbox value clicked', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-
-			await user.click(within(productionRow).getByText('production'));
-
-			expect(onFilterChange).toHaveBeenCalled();
-		});
-
-		it('creates NOT IN filter when unchecking related item with no existing filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with no filter, related items show as checked
-			// Clicking unchecks them → creates NOT IN filter to exclude
-			renderWithFilter(onFilterChange);
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toBe('valueA');
-		});
-
-		it('converts NOT IN to IN when toggling unchecked (other) item', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Clicking unchecked "Other" item with NOT IN filter should convert to IN [B]
-			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueA'] });
-
-			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'unchecked');
-
-			await user.click(within(rowB).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('in');
-			expect(filter?.value).toBe('valueB');
-		});
-
-		it('accumulates both values in IN when toggling checked (related) then unchecked (other)', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with IN filter for valueA
-			renderWithFilter(onFilterChange, { op: 'in', value: ['valueA'] });
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			const rowB = screen.getByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'unchecked');
-
-			// Toggle B (unchecked -> should add to IN)
-			await user.click(within(rowB).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('in');
-			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
-		});
-
-		it('adds to NOT IN when toggling checked (related) with existing NOT IN filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with NOT IN filter for valueB
-			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueB'] });
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			// Related values show as checked
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			// Toggle A (checked -> should add to NOT IN)
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toStrictEqual(['valueB', 'valueA']);
-		});
-
-		it('creates NOT IN for single value when toggling related item with existing IN filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['relatedValue'],
-				stringValues: ['otherValue'],
-			});
-
-			// Start with IN filter for otherValue (Selected section)
-			// relatedValue is in Related section (checked visually)
-			renderWithFilter(onFilterChange, { op: 'in', value: ['otherValue'] });
-
-			const selectedRow = await screen.findByTestId(
-				'checkbox-value-row-otherValue',
-			);
-			expect(selectedRow).toHaveAttribute('data-state', 'checked');
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-relatedValue');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-
-			// Toggle related item (checked -> should create NOT IN with just this value)
-			await user.click(within(relatedRow).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toBe('relatedValue');
-		});
-	});
-
-	describe('custom renderer', () => {
-		it('uses customRendererForValue when provided', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			const customRenderer = (value: string): JSX.Element => (
-				<span data-testid="custom-rendered">{`ENV: ${value}`}</span>
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={{ ...DEFAULT_FILTER, customRendererForValue: customRenderer }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('custom-rendered');
-			expect(screen.getByText('ENV: production')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -1,499 +0,0 @@
-import { screen, within } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	mockFieldsValuesAPI,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - item rules', () => {
-	describe('no existing query', () => {
-		it('all values show as checked with no badge when no query exists', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(within(productionRow).getByText('production')).toBeInTheDocument();
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(stagingRow).toHaveAttribute('data-state', 'checked');
-
-			// No section dividers when no existing query (all in "selected" section)
-			expect(
-				screen.queryByTestId('section-divider-related'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('section-divider-all-values'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('with existing query (related values)', () => {
-		it('shows related values in "Related" section with checked state', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production'],
-				stringValues: ['staging', 'development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(within(productionRow).getByText('production')).toBeInTheDocument();
-
-			// Related values show as checked in "Related" section
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			// Other values show as unchecked in "All values" section
-			expect(screen.getByTestId('section-divider-all-values')).toBeInTheDocument();
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('shows no badge for values not in relatedValues (unchecked state in All values section)', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production'],
-				stringValues: ['staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const stagingRow = await screen.findByTestId('checkbox-value-row-staging');
-			expect(within(stagingRow).getByText('staging')).toBeInTheDocument();
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('shows related values as checked when hasFilterForThisKey=true and isInRelatedValues=true', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production', 'staging'],
-				stringValues: ['development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			// production is selected - in selected section
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			// staging is related - in related section with checked state
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-		});
-	});
-
-	describe('selected values with IN operator', () => {
-		it('shows checked state with no badge for IN-selected values', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(
-				within(productionRow).queryByTestId(/^badge-/),
-			).not.toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-	});
-
-	describe('selected values with NOT IN operator', () => {
-		it('shows unchecked state with no badge for NOT_IN-selected values', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'unchecked');
-			expect(
-				within(productionRow).queryByTestId(/^badge-/),
-			).not.toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('section ordering', () => {
-		it('orders selected section before related section before other section', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-value'],
-				stringValues: ['other-value', 'selected-value'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-value'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-selected-value');
-
-			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
-			const values = allRows.map((row) =>
-				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
-			);
-
-			expect(values[0]).toBe('selected-value');
-			expect(values[1]).toBe('related-value');
-			expect(values[2]).toBe('other-value');
-		});
-
-		it('sorts alphabetically within same section', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['zebra', 'alpha', 'mike'],
-				stringValues: [],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-alpha');
-
-			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
-			const values = allRows.map((row) =>
-				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
-			);
-
-			expect(values).toStrictEqual(['alpha', 'mike', 'zebra']);
-		});
-	});
-
-	describe('mixed state scenarios', () => {
-		it('handles mixed state: IN-selected + related + other in same list', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-env'],
-				stringValues: ['other-env', 'selected-env'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const selectedRow = await screen.findByTestId(
-				'checkbox-value-row-selected-env',
-			);
-			expect(selectedRow).toHaveAttribute('data-state', 'checked');
-			expect(within(selectedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-
-			// Related values now show as checked
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-
-			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
-			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(otherRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('handles NOT_IN-selected alongside related values', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-env'],
-				stringValues: ['other-env', 'excluded-env'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['excluded-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const excludedRow = await screen.findByTestId(
-				'checkbox-value-row-excluded-env',
-			);
-			expect(excludedRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(excludedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-
-			// Related values show as checked
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -1,207 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	mockFieldsValuesAPI,
-	mockFieldsValuesAPILoading,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - states', () => {
-	describe('loading states', () => {
-		it('shows skeleton while loading initial data', async () => {
-			mockFieldsValuesAPILoading();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			expect(screen.getByTestId('checkbox-filter-v2')).toBeInTheDocument();
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows skeleton when initially closed filter is opened for the first time', async () => {
-			const user = userEvent.setup();
-			mockFieldsValuesAPILoading();
-
-			const closedFilter = { ...DEFAULT_FILTER, defaultOpen: false };
-
-			render(
-				<CheckboxFilterV2
-					filter={closedFilter}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			// Filter starts closed - no skeleton, no content
-			expect(
-				screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('checkbox-filter-empty'),
-			).not.toBeInTheDocument();
-
-			// Click header to open
-			const header = screen.getByTestId('checkbox-filter-header');
-			await user.click(header);
-
-			// Should show skeleton while loading, NOT "No values found"
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-				).toBeInTheDocument();
-			});
-			expect(
-				screen.queryByTestId('checkbox-filter-empty'),
-			).not.toBeInTheDocument();
-		});
-
-		it('shows search spinner when fetching after initial load', async () => {
-			const user = userEvent.setup();
-
-			let requestCount = 0;
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					requestCount += 1;
-					if (requestCount === 1) {
-						return res(
-							ctx.status(200),
-							ctx.json({
-								status: 'success',
-								data: {
-									values: {
-										relatedValues: [],
-										stringValues: ['production', 'staging'],
-										numberValues: [],
-									},
-								},
-							}),
-						);
-					}
-					return res(ctx.delay(10000));
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-search-loading'),
-				).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('empty states', () => {
-		it('shows "No values found" when API returns empty arrays', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: [],
-				stringValues: [],
-				numberValues: [],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const emptySection = await screen.findByTestId('checkbox-filter-empty');
-			expect(emptySection).toBeInTheDocument();
-		});
-	});
-
-	describe('value rendering', () => {
-		it('renders values from API response', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging', 'development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-development'),
-			).toBeInTheDocument();
-		});
-
-		it('renders number values converted to strings', async () => {
-			mockFieldsValuesAPI({
-				numberValues: [200, 404, 500],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const row200 = await screen.findByTestId('checkbox-value-row-200');
-			expect(within(row200).getByText('200')).toBeInTheDocument();
-			expect(
-				within(screen.getByTestId('checkbox-value-row-404')).getByText('404'),
-			).toBeInTheDocument();
-			expect(
-				within(screen.getByTestId('checkbox-value-row-500')).getByText('500'),
-			).toBeInTheDocument();
-		});
-
-		it('filters null/undefined values from response', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['valid', null, '', undefined as unknown as string],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const validRow = await screen.findByTestId('checkbox-value-row-valid');
-			expect(within(validRow).getByText('valid')).toBeInTheDocument();
-			expect(screen.queryAllByTestId(/^checkbox-value-row-/)).toHaveLength(1);
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -1,156 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { CheckboxFilterV2Header } from '../CheckboxFilterV2Header';
-
-describe('CheckboxFilterV2Header', () => {
-	const defaultProps = {
-		title: 'Environment',
-		isOpen: false,
-		showClearAll: true,
-		isSomeFilterPresentForCurrentAttribute: true,
-		onToggleOpen: jest.fn(),
-		onClear: jest.fn(),
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('collapsed state', () => {
-		it('renders title', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
-
-			expect(screen.getByText('Environment')).toBeInTheDocument();
-		});
-
-		it('sets data-state="closed" when collapsed', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'closed');
-		});
-
-		it('does not show clear button when collapsed', () => {
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen={false} showClearAll />,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('expanded state', () => {
-		it('sets data-state="open" when expanded', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'open');
-		});
-
-		it('shows clear button when expanded + showClearAll=true', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll />);
-
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-			expect(screen.getByText('Clear')).toBeInTheDocument();
-		});
-
-		it('hides clear button when showClearAll=false', () => {
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll={false} />,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-
-		it('hides clear button when no filter present for attribute', () => {
-			render(
-				<CheckboxFilterV2Header
-					{...defaultProps}
-					isOpen
-					showClearAll
-					isSomeFilterPresentForCurrentAttribute={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('interactions', () => {
-		it('calls onToggleOpen on header click', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-header'));
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onToggleOpen on Enter key', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			screen.getByTestId('checkbox-filter-header').focus();
-			await user.keyboard('{Enter}');
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onToggleOpen on Space key', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			screen.getByTestId('checkbox-filter-header').focus();
-			await user.keyboard(' ');
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onClear on clear button click', async () => {
-			const user = userEvent.setup();
-			const onClear = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen onClear={onClear} />,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onClear).toHaveBeenCalledTimes(1);
-		});
-
-		it('clear button click does not trigger onToggleOpen', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			const onClear = jest.fn();
-			render(
-				<CheckboxFilterV2Header
-					{...defaultProps}
-					isOpen
-					onToggleOpen={onToggleOpen}
-					onClear={onClear}
-				/>,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onClear).toHaveBeenCalledTimes(1);
-			expect(onToggleOpen).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2ValueRow.test.tsx

@@ -1,297 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { BadgeConfig } from '../itemRules';
-import { CheckedState } from '../../../../types';
-import { CheckboxFilterV2ValueRow } from '../CheckboxFilterV2ValueRow';
-
-describe('CheckboxFilterV2ValueRow', () => {
-	const defaultProps = {
-		value: 'production',
-		checkedState: 'unchecked' as CheckedState,
-		disabled: false,
-		title: 'Environment',
-		onlyButtonLabel: 'Only',
-		onCheckboxChange: jest.fn(),
-		onOnlyOrAllClick: jest.fn(),
-		badge: null as BadgeConfig | null,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('checked states', () => {
-		it('sets data-state="unchecked" for unchecked state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('sets data-state="checked" for checked state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="checked" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'checked');
-		});
-	});
-
-	describe('badge variations', () => {
-		it('renders no badge when badge=null', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} badge={null} />);
-
-			expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('renders "Not in" warning badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-			expect(screen.getByText('Not in')).toBeInTheDocument();
-		});
-
-		it('renders "Related" robin badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'related', label: 'Related', color: 'robin' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
-			expect(screen.getByText('Related')).toBeInTheDocument();
-		});
-
-		it('renders "Other" secondary badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
-			expect(screen.getByText('Other')).toBeInTheDocument();
-		});
-	});
-
-	describe('only/all button label', () => {
-		it('shows "Only" label by default', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="Only" />,
-			);
-
-			expect(screen.getByText('Only')).toBeInTheDocument();
-		});
-
-		it('shows "All" label when appropriate', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="All" />);
-
-			expect(screen.getByText('All')).toBeInTheDocument();
-		});
-	});
-
-	describe('disabled state', () => {
-		it('sets data-disabled=true when disabled', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} disabled />);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-disabled', 'true');
-		});
-
-		it('does not call onOnlyOrAllClick when disabled + clicked', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			await user.click(screen.getByText('production'));
-
-			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
-		});
-
-		it('does not call onOnlyOrAllClick on keydown when disabled', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			screen.getByText('production').focus();
-			await user.keyboard('{Enter}');
-
-			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('special value indicators', () => {
-		it('renders row for "true" value', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="true" />);
-
-			expect(screen.getByTestId('checkbox-value-row-true')).toBeInTheDocument();
-			expect(screen.getByText('true')).toBeInTheDocument();
-		});
-
-		it('renders row for "false" value', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="false" />);
-
-			expect(screen.getByTestId('checkbox-value-row-false')).toBeInTheDocument();
-			expect(screen.getByText('false')).toBeInTheDocument();
-		});
-
-		it('renders row for regular values', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="production" />);
-
-			expect(
-				screen.getByTestId('checkbox-value-row-production'),
-			).toBeInTheDocument();
-			expect(screen.getByText('production')).toBeInTheDocument();
-		});
-	});
-
-	describe('interactions', () => {
-		it('renders checkbox with correct testId', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
-			);
-
-			expect(
-				screen.getByTestId('checkbox-Environment-production'),
-			).toBeInTheDocument();
-		});
-
-		it('calls onOnlyOrAllClick on value text click', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			await user.click(screen.getByText('production'));
-
-			expect(onOnlyOrAllClick).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onOnlyOrAllClick on Enter key', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			const valueButton = screen
-				.getByText('production')
-				.closest('[role="button"]');
-			await user.tab();
-			await user.tab();
-			if (valueButton && document.activeElement === valueButton) {
-				await user.keyboard('{Enter}');
-			}
-
-			expect(onOnlyOrAllClick).toHaveBeenCalled();
-		});
-
-		it('calls onOnlyOrAllClick on Space key', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			const valueButton = screen
-				.getByText('production')
-				.closest('[role="button"]');
-			await user.tab();
-			await user.tab();
-			if (valueButton && document.activeElement === valueButton) {
-				await user.keyboard(' ');
-			}
-
-			expect(onOnlyOrAllClick).toHaveBeenCalled();
-		});
-
-		it('shows Toggle button', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
-
-			expect(screen.getByText('Toggle')).toBeInTheDocument();
-		});
-	});
-
-	describe('custom renderer', () => {
-		it('uses customRendererForValue when provided', () => {
-			const customRenderer = (value: string): JSX.Element => (
-				<span data-testid="custom-render">{`Custom: ${value}`}</span>
-			);
-
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					customRendererForValue={customRenderer}
-				/>,
-			);
-
-			expect(screen.getByTestId('custom-render')).toBeInTheDocument();
-			expect(screen.getByText('Custom: production')).toBeInTheDocument();
-		});
-
-		it('shows default value text when no custom renderer', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
-
-			expect(screen.getByText('production')).toBeInTheDocument();
-		});
-	});
-
-	describe('state combinations', () => {
-		it('checked + not_in badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					checkedState="unchecked"
-					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-		});
-
-		it('disabled + badge still shows badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/itemRules.test.ts

@@ -1,131 +0,0 @@
-import { deriveItemConfig, ItemContext, SectionType } from '../itemRules';
-
-describe('itemRules', () => {
-	describe('deriveItemConfig', () => {
-		it('no query at all → section selected, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + IN operator → section selected, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + NOT IN operator → section selected, no badge, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: false,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('has query, not selected, in related → section related, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.RELATED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('has query, has filter for this key, in related → section related, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.RELATED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('has query, not in related → section all_values, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('has query + filter for key, not selected, not in related → section all_values, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('no query but has filter for key, not selected → fallback to checked (DEFAULT_CONFIG)', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/useSectionedValues.test.ts

@@ -1,382 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { SectionType } from '../itemRules';
-import { useSectionedValues, SectionedItem } from '../useSectionedValues';
-
-function flattenSections(
-	sections: { type: SectionType; items: SectionedItem[] }[],
-): SectionedItem[] {
-	return sections.flatMap((s) => s.items);
-}
-
-describe('useSectionedValues', () => {
-	const baseInput = {
-		relatedValues: ['val1', 'val2'],
-		allValues: ['val1', 'val2', 'val3'],
-		currentFilterState: {},
-		isSomeFilterPresentForCurrentAttribute: false,
-		isNotInOperator: false,
-		hasExistingQuery: false,
-		visibleItemsCount: 10,
-		relatedExclusions: [] as string[],
-	};
-
-	it('no query at all → all items in selected section, no badges', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		expect(result.current.sections).toHaveLength(1);
-		expect(result.current.sections[0].type).toBe(SectionType.SELECTED);
-		expect(result.current.sections[0].items).toHaveLength(3);
-		result.current.sections[0].items.forEach((item) => {
-			expect(item.badge).toBeNull();
-		});
-	});
-
-	it('has query, no filter for key → related and all_values sections', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		const relatedItems = allItems.filter(
-			(item) => item.value === 'val1' || item.value === 'val2',
-		);
-		const otherItems = allItems.filter((item) => item.value === 'val3');
-
-		// Related values should be in related section, checked
-		relatedItems.forEach((item) => {
-			expect(item.section).toBe(SectionType.RELATED);
-			expect(item.checkedState).toBe('checked');
-		});
-
-		// Other values should be in all_values section, unchecked
-		otherItems.forEach((item) => {
-			expect(item.section).toBe(SectionType.ALL_VALUES);
-			expect(item.checkedState).toBe('unchecked');
-		});
-	});
-
-	it('has query + filter for key, selected value → in selected section', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				currentFilterState: { val1: true, val2: false, val3: false },
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		const selectedItem = allItems.find((item) => item.value === 'val1');
-
-		expect(selectedItem?.section).toBe(SectionType.SELECTED);
-		expect(selectedItem?.badge).toBeNull();
-	});
-
-	it('has query + filter for key, NOT IN operator → excluded values in selected section, no badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				isNotInOperator: true,
-				currentFilterState: { val1: false, val2: true, val3: true },
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		// val1 is unchecked + NOT IN = excluded
-		const excludedItem = allItems.find((item) => item.value === 'val1');
-
-		expect(excludedItem?.section).toBe(SectionType.SELECTED);
-		expect(excludedItem?.badge).toBeNull();
-		expect(excludedItem?.checkedState).toBe('unchecked');
-	});
-
-	it('items within same section sorted alphabetically', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				relatedValues: ['zebra', 'apple', 'mango'],
-				allValues: ['zebra', 'apple', 'mango'],
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		// All items have section selected, should be sorted alphabetically
-		const allItems = flattenSections(result.current.sections);
-		const values = allItems.map((item) => item.value);
-		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
-	});
-
-	describe('filtered results from API', () => {
-		it('keeps items in their natural sections with filtered API results', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: true,
-					currentFilterState: { val1: true },
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-			expect(sectionTypes).toContain(SectionType.SELECTED);
-			expect(sectionTypes).toContain(SectionType.RELATED);
-		});
-
-		it('returns empty sections array when no values', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: [],
-					allValues: [],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					currentFilterState: {},
-				}),
-			);
-
-			expect(result.current.sections).toHaveLength(0);
-			expect(result.current.totalCount).toBe(0);
-		});
-
-		it('non-related items go to ALL_VALUES section', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: [],
-					allValues: ['other1', 'other2', 'other3'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-				}),
-			);
-
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(3);
-		});
-
-		it('handles non-overlapping relatedValues and allValues correctly', () => {
-			// This tests the bug where different pod names in relatedValues vs allValues
-			// caused all items to go to ALL_VALUES instead of RELATED
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['pod-a-1', 'pod-b-1', 'pod-c-1'],
-					allValues: ['pod-a-2', 'pod-b-2', 'pod-c-2'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			// RELATED section should exist with relatedValues items
-			expect(sectionTypes).toContain(SectionType.RELATED);
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			expect(relatedSection?.items).toHaveLength(3);
-			expect(relatedSection?.items.map((i) => i.value)).toStrictEqual(
-				expect.arrayContaining(['pod-a-1', 'pod-b-1', 'pod-c-1']),
-			);
-
-			// ALL_VALUES section should exist with allValues items
-			expect(sectionTypes).toContain(SectionType.ALL_VALUES);
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(3);
-			expect(allValuesSection?.items.map((i) => i.value)).toStrictEqual(
-				expect.arrayContaining(['pod-a-2', 'pod-b-2', 'pod-c-2']),
-			);
-		});
-	});
-
-	describe('stale related values during refresh (relatedExclusions)', () => {
-		// Scenario: key A selected (existing query) + key B had value "oldSelected".
-		// User selects a different value on key B -> "oldSelected" is de-selected.
-		// keepPreviousData keeps the stale response where "oldSelected" is still in
-		// relatedValues, so it would wrongly render as "related". It is excluded.
-		it('subtracts only the excluded value from the RELATED section', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					// stale API data kept via keepPreviousData
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const allItems = flattenSections(result.current.sections);
-
-			// oldSelected must NOT render as related (dropped entirely - not in
-			// allValues nor selected)
-			expect(
-				allItems.find((item) => item.value === 'oldSelected'),
-			).toBeUndefined();
-
-			// other related values are kept
-			expect(allItems.find((item) => item.value === 'otherRelated')?.section).toBe(
-				SectionType.RELATED,
-			);
-		});
-
-		it('preserves every related value that is not the excluded (previously selected) one', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					// oldSelected was just de-selected; the rest are genuinely related
-					relatedValues: ['oldSelected', 'relatedA', 'relatedB', 'relatedC'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			const relatedValues = relatedSection?.items.map((i) => i.value) ?? [];
-
-			// all non-excluded related values are kept
-			expect(relatedValues).toStrictEqual(['relatedA', 'relatedB', 'relatedC']);
-			// and they stay checked
-			relatedSection?.items.forEach((item) => {
-				expect(item.checkedState).toBe('checked');
-			});
-			// the excluded value is gone
-			expect(relatedValues).not.toContain('oldSelected');
-		});
-
-		it('keeps the RELATED section when other related values remain', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-			expect(sectionTypes).toContain(SectionType.RELATED);
-			expect(sectionTypes).toContain(SectionType.SELECTED);
-		});
-
-		it('shows the excluded value normally when exclusions are empty', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: [],
-				}),
-			);
-
-			const allItems = flattenSections(result.current.sections);
-			expect(allItems.find((item) => item.value === 'oldSelected')?.section).toBe(
-				SectionType.RELATED,
-			);
-		});
-	});
-
-	describe('section ordering', () => {
-		it('sections appear in order: SELECTED → RELATED → ALL_VALUES', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['related1'],
-					allValues: ['all1'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: true,
-					currentFilterState: { selected1: true },
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			// Verify order
-			const selectedIdx = sectionTypes.indexOf(SectionType.SELECTED);
-			const relatedIdx = sectionTypes.indexOf(SectionType.RELATED);
-			const allValuesIdx = sectionTypes.indexOf(SectionType.ALL_VALUES);
-
-			expect(selectedIdx).toBeLessThan(relatedIdx);
-			expect(relatedIdx).toBeLessThan(allValuesIdx);
-		});
-
-		it('RELATED section appears before ALL_VALUES even with many items', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['r1', 'r2', 'r3', 'r4', 'r5'],
-					allValues: ['a1', 'a2', 'a3', 'a4', 'a5'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					visibleItemsCount: 100,
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			expect(sectionTypes[0]).toBe(SectionType.RELATED);
-			expect(sectionTypes[1]).toBe(SectionType.ALL_VALUES);
-		});
-
-		it('visibleItemsCount limits total items across sections', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['r1', 'r2', 'r3'],
-					allValues: ['a1', 'a2', 'a3'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					visibleItemsCount: 4,
-				}),
-			);
-
-			const totalItems = result.current.sections.reduce(
-				(sum, s) => sum + s.items.length,
-				0,
-			);
-			expect(totalItems).toBe(4);
-
-			// RELATED section should get priority (3 items)
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			expect(relatedSection?.items).toHaveLength(3);
-
-			// ALL_VALUES gets remaining (1 item)
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(1);
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -1,118 +0,0 @@
-import { CheckedState } from '../../../types';
-
-export enum SectionType {
-	SELECTED = 'selected',
-	RELATED = 'related',
-	ALL_VALUES = 'all_values',
-}
-
-export interface BadgeConfig {
-	key: string;
-	label: string;
-	color: 'robin' | 'warning' | 'secondary';
-}
-
-export interface ItemConfig {
-	section: SectionType;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-export interface ItemContext {
-	isSelectedOnFilter: boolean;
-	isInRelatedValues: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	hasFilterForThisKey: boolean;
-}
-
-export interface DerivedItem extends ItemConfig {
-	value: string;
-}
-
-interface ItemRule {
-	condition: (ctx: ItemContext) => boolean;
-	config: ItemConfig;
-}
-
-const ITEM_RULES: ItemRule[] = [
-	// No existing query and no filter → all checked (selected section)
-	{
-		condition: (ctx): boolean =>
-			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Selected with NOT IN operator → unchecked, no badge
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-	// Selected with IN operator → checked
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Related values (from existing query) → checked
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery && ctx.isInRelatedValues,
-		config: {
-			section: SectionType.RELATED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// All values (has existing query but not related) → unchecked
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery,
-		config: {
-			section: SectionType.ALL_VALUES,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-];
-
-// Fallback when no rule matches
-const DEFAULT_CONFIG: ItemConfig = {
-	section: SectionType.SELECTED,
-	badge: null,
-	checkedState: 'checked',
-};
-
-export function deriveItemConfig(ctx: ItemContext): ItemConfig {
-	for (const rule of ITEM_RULES) {
-		if (rule.condition(ctx)) {
-			return rule.config;
-		}
-	}
-	return DEFAULT_CONFIG;
-}
-
-export function deriveItems(
-	values: string[],
-	relatedSet: Set<string>,
-	selectedOnFilterSet: Set<string>,
-	ctx: Omit<ItemContext, 'isSelectedOnFilter' | 'isInRelatedValues'>,
-): DerivedItem[] {
-	return values.map((value) => {
-		const itemCtx: ItemContext = {
-			...ctx,
-			isSelectedOnFilter: selectedOnFilterSet.has(value),
-			isInRelatedValues: relatedSet.has(value),
-		};
-		const config = deriveItemConfig(itemCtx);
-		return { value, ...config };
-	});
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useExistingQuery.tsx

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import { QuickFilterCheckboxUseFieldApis } from 'components/QuickFilters/types';
-
-interface UseExistingQueryParams {
-	useFieldApis: QuickFilterCheckboxUseFieldApis;
-	activeQueryIndex: number;
-}
-
-interface UseExistingQueryResult {
-	existingQuery: string | undefined;
-	hasExistingQuery: boolean;
-}
-
-export function useExistingQuery({
-	useFieldApis,
-	activeQueryIndex,
-}: UseExistingQueryParams): UseExistingQueryResult {
-	const { currentQuery } = useQueryBuilder();
-
-	const existingQuery = useMemo(() => {
-		if (useFieldApis.existingQuery === null) {
-			return undefined;
-		}
-
-		if (useFieldApis.existingQuery) {
-			return useFieldApis.existingQuery;
-		}
-
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
-
-		// Prefer V5 filter.expression
-		if (queryData?.filter?.expression) {
-			return queryData.filter.expression;
-		}
-
-		// Fall back to V3 filters.items
-		if (queryData?.filters?.items?.length) {
-			return convertFiltersToExpression(queryData.filters).expression;
-		}
-
-		return undefined;
-	}, [
-		useFieldApis.existingQuery,
-		currentQuery.builder.queryData,
-		activeQueryIndex,
-	]);
-
-	// Check if ANY filters exist in query (V3 items or V5 expression)
-	// This is separate from existingQuery because existingQuery can be explicitly
-	// disabled (null) while filters still exist in the query for UI purposes
-	const hasExistingQuery = useMemo(() => {
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
-		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
-		const hasV5Expression = !!queryData?.filter?.expression;
-		return hasV3Items || hasV5Expression || !!existingQuery;
-	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
-
-	return { existingQuery, hasExistingQuery };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,97 +0,0 @@
-import { useMemo } from 'react';
-import { useGetFieldsValues } from 'api/generated/services/fields';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { DataSource } from 'types/common/queryBuilder';
-import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
-
-interface UseFieldValuesProps {
-	filter: IQuickFiltersConfig;
-	searchText: string;
-	existingQuery?: string;
-	metricNamespace?: string;
-	startUnixMilli?: number;
-	endUnixMilli?: number;
-	enabled: boolean;
-}
-
-interface UseFieldValuesReturn {
-	relatedValues: string[];
-	allValues: string[];
-	isLoading: boolean;
-	isFetching: boolean;
-}
-
-const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
-	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
-	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
-	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
-};
-
-export function useFieldValues({
-	filter,
-	searchText,
-	existingQuery,
-	metricNamespace,
-	startUnixMilli,
-	endUnixMilli,
-	enabled,
-}: UseFieldValuesProps): UseFieldValuesReturn {
-	const { data, isLoading, isFetching } = useGetFieldsValues(
-		{
-			signal: filter.dataSource
-				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-				: undefined,
-			name: filter.attributeKey.key,
-			searchText,
-			existingQuery,
-			metricNamespace,
-			startUnixMilli,
-			// This field does not affect the backend but I wanted to keep it here
-			// in case we add the support in the future
-			endUnixMilli,
-		},
-		{
-			query: {
-				enabled,
-				cacheTime: FIELD_API_CACHE_TIME,
-				keepPreviousData: true,
-			},
-		},
-	);
-
-	const relatedValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
-		if (!values) {
-			return [];
-		}
-
-		return (
-			values.relatedValues?.filter(
-				(value): value is string =>
-					value !== null && value !== undefined && value !== '',
-			) || []
-		);
-	}, [data]);
-
-	const allValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
-		if (!values) {
-			return [];
-		}
-
-		const stringValues =
-			values.stringValues?.filter(
-				(value): value is string =>
-					value !== null && value !== undefined && value !== '',
-			) || [];
-		const numberValues =
-			values.numberValues
-				?.filter((value): value is number => value !== null && value !== undefined)
-				.map((value) => value.toString()) || [];
-
-		return [...stringValues, ...numberValues];
-	}, [data]);
-
-	return { relatedValues, allValues, isLoading, isFetching };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -1,152 +0,0 @@
-import { useMemo } from 'react';
-
-import { BadgeConfig, deriveItems, SectionType } from './itemRules';
-import { CheckedState } from '../../../types';
-
-interface SectionedValuesInput {
-	relatedValues: string[];
-	allValues: string[];
-	currentFilterState: Record<string, boolean>;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	visibleItemsCount: number;
-	relatedExclusions: string[];
-}
-
-export interface SectionedItem {
-	value: string;
-	section: SectionType;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-export interface Section {
-	type: SectionType;
-	items: SectionedItem[];
-}
-
-interface SectionedValuesOutput {
-	sections: Section[];
-	totalCount: number;
-}
-
-const SECTION_ORDER: SectionType[] = [
-	SectionType.SELECTED,
-	SectionType.RELATED,
-	SectionType.ALL_VALUES,
-];
-
-export function buildSelectedSet(
-	currentFilterState: Record<string, boolean>,
-	isSomeFilterPresentForCurrentAttribute: boolean,
-	isNotInOperator: boolean,
-): Set<string> {
-	const selectedSet = new Set<string>();
-	if (!isSomeFilterPresentForCurrentAttribute) {
-		return selectedSet;
-	}
-
-	for (const [val, isChecked] of Object.entries(currentFilterState)) {
-		// NOT IN: unchecked = explicitly excluded
-		// IN: checked = explicitly selected
-		const shouldAdd = isNotInOperator ? !isChecked : isChecked;
-		if (shouldAdd) {
-			selectedSet.add(val);
-		}
-	}
-	return selectedSet;
-}
-
-export function useSectionedValues({
-	relatedValues,
-	allValues,
-	currentFilterState,
-	isSomeFilterPresentForCurrentAttribute,
-	isNotInOperator,
-	hasExistingQuery,
-	visibleItemsCount,
-	relatedExclusions,
-}: SectionedValuesInput): SectionedValuesOutput {
-	const items = useMemo(() => {
-		const selectedSet = buildSelectedSet(
-			currentFilterState,
-			isSomeFilterPresentForCurrentAttribute,
-			isNotInOperator,
-		);
-
-		const exclusionSet = new Set(relatedExclusions);
-		const effectiveRelatedValues = relatedValues.filter(
-			(value) => !exclusionSet.has(value),
-		);
-
-		// Combine all values - API already filters both arrays by searchText
-		const allUniqueValues = Array.from(
-			new Set([...effectiveRelatedValues, ...allValues]),
-		);
-
-		// Include selected values at top - may not be in API response
-		const finalValues = [
-			...new Set([...Array.from(selectedSet), ...allUniqueValues]),
-		];
-		const relatedSet = new Set(effectiveRelatedValues);
-
-		return deriveItems(finalValues, relatedSet, selectedSet, {
-			isNotInOperator,
-			hasExistingQuery,
-			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
-		});
-	}, [
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		relatedExclusions,
-	]);
-
-	const sections = useMemo(() => {
-		// Group items by section
-		const sectionMap = new Map<SectionType, SectionedItem[]>();
-		for (const sectionType of SECTION_ORDER) {
-			sectionMap.set(sectionType, []);
-		}
-
-		for (const item of items) {
-			sectionMap.get(item.section)?.push(item);
-		}
-
-		// Sort items within each section alphabetically
-		for (const sectionItems of sectionMap.values()) {
-			sectionItems.sort((a, b) => a.value.localeCompare(b.value));
-		}
-
-		// Apply visibleItemsCount across all sections
-		let remaining = visibleItemsCount;
-		const result: Section[] = [];
-
-		for (const sectionType of SECTION_ORDER) {
-			const sectionItems = sectionMap.get(sectionType) || [];
-
-			if (sectionItems.length === 0) {
-				continue;
-			}
-
-			const itemsToTake = Math.min(sectionItems.length, remaining);
-			if (itemsToTake === 0) {
-				break;
-			}
-
-			result.push({
-				type: sectionType,
-				items: sectionItems.slice(0, itemsToTake),
-			});
-			remaining -= itemsToTake;
-		}
-
-		return result;
-	}, [items, visibleItemsCount]);
-
-	return { sections, totalCount: items.length };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useStaleRelatedExclusions.ts

@@ -1,36 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-
-const EMPTY: string[] = [];
-
-interface UseStaleRelatedExclusionsParams {
-	selectedValues: string[];
-	isFetching: boolean;
-	isRefreshing: boolean;
-}
-
-export function useStaleRelatedExclusions({
-	selectedValues,
-	isFetching,
-	isRefreshing,
-}: UseStaleRelatedExclusionsParams): string[] {
-	const selectionAtLastFetchRef = useRef<string[]>(selectedValues);
-
-	useEffect(() => {
-		if (!isFetching) {
-			selectionAtLastFetchRef.current = selectedValues;
-		}
-	}, [isFetching, selectedValues]);
-
-	return useMemo(() => {
-		if (!isRefreshing) {
-			return EMPTY;
-		}
-
-		const current = new Set(selectedValues);
-		const removed = selectionAtLastFetchRef.current.filter(
-			(value) => !current.has(value),
-		);
-
-		return removed.length ? removed : EMPTY;
-	}, [isRefreshing, selectedValues]);
-}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -32,7 +32,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
-import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
 import useFilterConfig from './hooks/useFilterConfig';
@@ -52,7 +51,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
-		useFieldApis,
 	} = props;
 	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -299,45 +297,21 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				{filterConfig.map((filter) => {
 					switch (filter.type) {
 						case FiltersType.CHECKBOX:
-							return useFieldApis ? (
-								<CheckboxV2
-									key={filter.attributeKey.key}
-									source={source}
-									filter={filter}
-									onFilterChange={onFilterChange}
-									useFieldApis={useFieldApis}
-								/>
-							) : (
+							return (
 								<Checkbox
-									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
 							);
 						case FiltersType.DURATION:
-							return (
-								<Duration
-									key={filter.attributeKey.key}
-									filter={filter}
-									onFilterChange={onFilterChange}
-								/>
-							);
+							return <Duration filter={filter} onFilterChange={onFilterChange} />;
 						case FiltersType.SLIDER:
-							return <Slider key={filter.attributeKey.key} />;
+							return <Slider />;
 						// eslint-disable-next-line sonarjs/no-duplicated-branches
 						default:
-							return useFieldApis ? (
-								<CheckboxV2
-									key={filter.attributeKey.key}
-									source={source}
-									filter={filter}
-									onFilterChange={onFilterChange}
-									useFieldApis={useFieldApis}
-								/>
-							) : (
+							return (
 								<Checkbox
-									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
@@ -407,5 +381,4 @@ QuickFilters.defaultProps = {
 	config: [],
 	showFilterCollapse: true,
 	showQueryName: true,
-	useFieldApis: undefined,
 };

frontend/src/components/QuickFilters/types.ts

@@ -26,11 +26,6 @@ export enum SignalType {
 	METER_EXPLORER = 'meter',
 }
 
-/**
- * Missing export from signozhq/ui/checkbox, TODO(H4ad): Add and remove this type definition
- */
-export type CheckedState = 'checked' | 'unchecked' | 'indeterminate';
-
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -51,7 +46,6 @@ export interface IQuickFiltersProps {
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
-	useFieldApis?: QuickFilterCheckboxUseFieldApis;
 }
 
 export enum QuickFiltersSource {
@@ -62,19 +56,3 @@ export enum QuickFiltersSource {
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
 }
-
-/**
- * Opt-in: fetch values from the /v1/fields/values API instead of /v3/autocomplete/attribute_values
- */
-export type QuickFilterCheckboxUseFieldApis = {
-	startUnixMilli: number;
-	endUnixMilli: number;
-	/**
-	 * If you didn't specify a string, we automatically try to extract this from the currentQuery,
-	 * from the filter.expression or filter.items.
-	 *
-	 * Use null to ignore/disable this behavior.
-	 */
-	existingQuery?: string | null;
-	metricNamespace?: string;
-};

frontend/src/constants/query.ts

@@ -57,7 +57,4 @@ export enum QueryParams {
 	isTestAlert = 'isTestAlert',
 	yAxisUnit = 'yAxisUnit',
 	ruleName = 'ruleName',
-	matchType = 'matchType',
-	compareOp = 'compareOp',
-	evaluationWindowPreset = 'evaluationWindowPreset',
 }

frontend/src/constants/queryCacheTime.ts

@@ -1,5 +1,3 @@
 export const DASHBOARD_CACHE_TIME = 30_000;
 // keep it low or zero, otherwise, when enabled auto-refresh, this causes OOM due to accumulated queries in cache
 export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;
-
-export const FIELD_API_CACHE_TIME = 60_000;

frontend/src/container/CreateAlertV2/context/__tests__/CreateAlertProvider.prefill.test.tsx

@@ -1,110 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import { CreateAlertProvider, useCreateAlertState } from '../index';
-
-// The provider only needs a query with a unit + empty builder for these assertions.
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => ({
-		currentQuery: {
-			unit: 'bytes',
-			builder: { queryData: [], queryFormulas: [] },
-		},
-		redirectWithQueryBuilderData: jest.fn(),
-	}),
-}));
-
-const mutation = { mutate: jest.fn(), isLoading: false };
-jest.mock('api/generated/services/rules', () => ({
-	useCreateRule: (): unknown => mutation,
-	useTestRule: (): unknown => mutation,
-	useUpdateRuleByID: (): unknown => mutation,
-}));
-
-function Probe(): JSX.Element {
-	const { thresholdState, evaluationWindow } = useCreateAlertState();
-	return (
-		<div>
-			<span data-testid="match-type">{thresholdState.matchType}</span>
-			<span data-testid="operator">{thresholdState.operator}</span>
-			<span data-testid="threshold-count">{thresholdState.thresholds.length}</span>
-			<span data-testid="threshold-value">
-				{thresholdState.thresholds[0]?.thresholdValue}
-			</span>
-			<span data-testid="window-type">{evaluationWindow.windowType}</span>
-		</div>
-	);
-}
-
-function renderWithSearch(search: string): void {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	render(
-		<MemoryRouter initialEntries={[`/alerts/new${search}`]}>
-			<QueryClientProvider client={queryClient}>
-				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-					<Probe />
-				</CreateAlertProvider>
-			</QueryClientProvider>
-		</MemoryRouter>,
-	);
-}
-
-function serializeThreshold(thresholdValue: number): string {
-	return encodeURIComponent(
-		JSON.stringify([
-			{
-				id: 't1',
-				label: 'critical',
-				thresholdValue,
-				recoveryThresholdValue: null,
-				unit: 'bytes',
-				channels: [],
-				color: '#F1575F',
-			},
-		]),
-	);
-}
-
-describe('CreateAlertProvider — URL-declared prefill (issue #5291)', () => {
-	it('applies matchType, operator, and thresholds without the meter window', () => {
-		// Dashboard-style prefill: no evaluationWindowPreset → default window.
-		renderWithSearch(
-			`?matchType=on_average&compareOp=below&thresholds=${serializeThreshold(90)}`,
-		);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('on_average');
-		expect(screen.getByTestId('operator')).toHaveTextContent('below');
-		expect(screen.getByTestId('threshold-count')).toHaveTextContent('1');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('90');
-		// The meter evaluation-window preset must NOT fire.
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-
-	it('adjusts only the occurrence type when no thresholds are supplied', () => {
-		renderWithSearch(`?matchType=in_total`);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('in_total');
-		// The default single critical threshold and operator are retained.
-		expect(screen.getByTestId('threshold-count')).toHaveTextContent('1');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('0');
-		expect(screen.getByTestId('operator')).toHaveTextContent('above');
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-
-	it('applies the meter evaluation window when the preset is declared', () => {
-		// Ingestion-style prefill: explicit in_total + meter preset.
-		renderWithSearch(
-			`?matchType=in_total&evaluationWindowPreset=meter&thresholds=${serializeThreshold(
-				500,
-			)}`,
-		);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('in_total');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('500');
-		expect(screen.getByTestId('window-type')).toHaveTextContent('cumulative');
-	});
-});

frontend/src/container/CreateAlertV2/context/__tests__/resolveUrlAlertPrefill.test.ts

@@ -1,71 +0,0 @@
-import { AlertThresholdMatchType, AlertThresholdOperator } from '../types';
-import {
-	EvaluationWindowPreset,
-	resolveUrlAlertPrefill,
-} from '../resolveUrlAlertPrefill';
-
-function resolve(search: string): ReturnType<typeof resolveUrlAlertPrefill> {
-	return resolveUrlAlertPrefill(new URLSearchParams(search));
-}
-
-describe('resolveUrlAlertPrefill', () => {
-	it('returns an empty plan when no params are present', () => {
-		expect(resolve('')).toStrictEqual({
-			thresholds: undefined,
-			matchType: undefined,
-			operator: undefined,
-			evaluationWindowPreset: undefined,
-		});
-	});
-
-	it('parses a thresholds array', () => {
-		const thresholds = [{ id: 't1', thresholdValue: 90 }];
-		const { thresholds: parsed } = resolve(
-			`thresholds=${encodeURIComponent(JSON.stringify(thresholds))}`,
-		);
-		expect(parsed).toStrictEqual(thresholds);
-	});
-
-	it('ignores malformed or non-array thresholds without throwing', () => {
-		const consoleError = jest
-			.spyOn(console, 'error')
-			.mockImplementation(() => undefined);
-
-		expect(resolve('thresholds=not-json').thresholds).toBeUndefined();
-		expect(
-			resolve(`thresholds=${encodeURIComponent('{"a":1}')}`).thresholds,
-		).toBeUndefined();
-
-		consoleError.mockRestore();
-	});
-
-	it('normalizes matchType aliases', () => {
-		expect(resolve('matchType=on_average').matchType).toBe(
-			AlertThresholdMatchType.ON_AVERAGE,
-		);
-		expect(resolve('matchType=sum').matchType).toBe(
-			AlertThresholdMatchType.IN_TOTAL,
-		);
-		expect(resolve('matchType=nonsense').matchType).toBeUndefined();
-	});
-
-	it('normalizes operator aliases', () => {
-		expect(resolve('compareOp=above').operator).toBe(
-			AlertThresholdOperator.IS_ABOVE,
-		);
-		expect(resolve('compareOp=%3E').operator).toBe(
-			AlertThresholdOperator.IS_ABOVE,
-		);
-		expect(resolve('compareOp=nonsense').operator).toBeUndefined();
-	});
-
-	it('recognizes the meter evaluation-window preset only', () => {
-		expect(resolve('evaluationWindowPreset=meter').evaluationWindowPreset).toBe(
-			EvaluationWindowPreset.METER,
-		);
-		expect(
-			resolve('evaluationWindowPreset=rolling').evaluationWindowPreset,
-		).toBeUndefined();
-		expect(resolve('').evaluationWindowPreset).toBeUndefined();
-	});
-});

frontend/src/container/CreateAlertV2/context/conditionNormalizers.ts

@@ -1,63 +0,0 @@
-import { AlertThresholdMatchType, AlertThresholdOperator } from './types';
-
-// Mirrors the backend's CompareOperator.Normalize() in
-// pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
-// the dropdown understands. Returns undefined for aliases the UI does not
-// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
-// value on screen instead of silently rewriting it.
-export function normalizeOperator(
-	raw: string | undefined,
-): AlertThresholdOperator | undefined {
-	switch (raw) {
-		case '1':
-		case 'above':
-		case '>':
-			return AlertThresholdOperator.IS_ABOVE;
-		case '2':
-		case 'below':
-		case '<':
-			return AlertThresholdOperator.IS_BELOW;
-		case '3':
-		case 'equal':
-		case 'eq':
-		case '=':
-			return AlertThresholdOperator.IS_EQUAL_TO;
-		case '4':
-		case 'not_equal':
-		case 'not_eq':
-		case '!=':
-			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
-		case '7':
-		case 'outside_bounds':
-			return AlertThresholdOperator.ABOVE_BELOW;
-		default:
-			return undefined;
-	}
-}
-
-// Mirrors the backend's MatchType.Normalize() in pkg/types/ruletypes/match.go.
-export function normalizeMatchType(
-	raw: string | undefined,
-): AlertThresholdMatchType | undefined {
-	switch (raw) {
-		case '1':
-		case 'at_least_once':
-			return AlertThresholdMatchType.AT_LEAST_ONCE;
-		case '2':
-		case 'all_the_times':
-			return AlertThresholdMatchType.ALL_THE_TIME;
-		case '3':
-		case 'on_average':
-		case 'avg':
-			return AlertThresholdMatchType.ON_AVERAGE;
-		case '4':
-		case 'in_total':
-		case 'sum':
-			return AlertThresholdMatchType.IN_TOTAL;
-		case '5':
-		case 'last':
-			return AlertThresholdMatchType.LAST;
-		default:
-			return undefined;
-	}
-}

frontend/src/container/CreateAlertV2/context/index.tsx

@@ -23,13 +23,10 @@ import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/map
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { INITIAL_CREATE_ALERT_STATE } from './constants';
-import {
-	EvaluationWindowPreset,
-	resolveUrlAlertPrefill,
-} from './resolveUrlAlertPrefill';
 import {
 	AdvancedOptionsAction,
 	AlertThresholdAction,
+	AlertThresholdMatchType,
 	CreateAlertAction,
 	CreateAlertSlice,
 	EvaluationWindowAction,
@@ -126,13 +123,9 @@ export function CreateAlertProvider(
 
 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
+	const thresholdsFromURL = queryParams.get(QueryParams.thresholds);
 	const ruleNameFromURL = queryParams.get(QueryParams.ruleName);
 	const yAxisUnitFromURL = queryParams.get(QueryParams.yAxisUnit);
-	// Prefill declared in the URL; applied verbatim, agnostic of the producer.
-	const urlPrefill = useMemo(
-		() => resolveUrlAlertPrefill(new URLSearchParams(location.search)),
-		[location.search],
-	);
 
 	const [alertType, setAlertType] = useState<AlertTypes>(() => {
 		if (isEditMode) {
@@ -175,43 +168,34 @@ export function CreateAlertProvider(
 			},
 		});
 
-		if (urlPrefill.thresholds) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_THRESHOLDS',
-					payload: urlPrefill.thresholds,
-				},
-			});
-		}
+		if (thresholdsFromURL) {
+			try {
+				const thresholds = JSON.parse(thresholdsFromURL);
+				setCreateAlertState({
+					slice: CreateAlertSlice.THRESHOLD,
+					action: {
+						type: 'SET_THRESHOLDS',
+						payload: thresholds,
+					},
+				});
+			} catch (error) {
+				console.error('Error parsing thresholds from URL:', error);
+			}
 
-		if (urlPrefill.matchType) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_MATCH_TYPE',
-					payload: urlPrefill.matchType,
-				},
-			});
-		}
-
-		if (urlPrefill.operator) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_OPERATOR',
-					payload: urlPrefill.operator,
-				},
-			});
-		}
-
-		if (urlPrefill.evaluationWindowPreset === EvaluationWindowPreset.METER) {
 			setCreateAlertState({
 				slice: CreateAlertSlice.EVALUATION_WINDOW,
 				action: {
 					type: 'SET_INITIAL_STATE_FOR_METER',
 				},
 			});
+
+			setCreateAlertState({
+				slice: CreateAlertSlice.THRESHOLD,
+				action: {
+					type: 'SET_MATCH_TYPE',
+					payload: AlertThresholdMatchType.IN_TOTAL,
+				},
+			});
 		}
 
 		if (ruleNameFromURL && !ruleNameAppliedRef.current) {
@@ -235,7 +219,7 @@ export function CreateAlertProvider(
 				},
 			});
 		}
-	}, [alertType, urlPrefill, ruleNameFromURL, yAxisUnitFromURL]);
+	}, [alertType, thresholdsFromURL, ruleNameFromURL, yAxisUnitFromURL]);
 
 	useEffect(() => {
 		if (isEditMode && initialAlertState) {

frontend/src/container/CreateAlertV2/context/resolveUrlAlertPrefill.ts

@@ -1,54 +0,0 @@
-import { QueryParams } from 'constants/query';
-
-import { normalizeMatchType, normalizeOperator } from './conditionNormalizers';
-import {
-	AlertThresholdMatchType,
-	AlertThresholdOperator,
-	Threshold,
-} from './types';
-
-export enum EvaluationWindowPreset {
-	METER = 'meter',
-}
-
-export interface ResolvedAlertPrefill {
-	thresholds?: Threshold[];
-	matchType?: AlertThresholdMatchType;
-	operator?: AlertThresholdOperator;
-	evaluationWindowPreset?: EvaluationWindowPreset;
-}
-
-function parseThresholds(raw: string | null): Threshold[] | undefined {
-	if (!raw) {
-		return undefined;
-	}
-	try {
-		const parsed = JSON.parse(raw);
-		return Array.isArray(parsed) ? (parsed as Threshold[]) : undefined;
-	} catch (error) {
-		console.error('Error parsing thresholds from URL:', error);
-		return undefined;
-	}
-}
-
-function parseEvaluationWindowPreset(
-	raw: string | null,
-): EvaluationWindowPreset | undefined {
-	return raw === EvaluationWindowPreset.METER
-		? EvaluationWindowPreset.METER
-		: undefined;
-}
-
-/** URL → declarative prefill plan; the consumer applies it without knowing the producer. */
-export function resolveUrlAlertPrefill(
-	params: URLSearchParams,
-): ResolvedAlertPrefill {
-	return {
-		thresholds: parseThresholds(params.get(QueryParams.thresholds)),
-		matchType: normalizeMatchType(params.get(QueryParams.matchType) ?? undefined),
-		operator: normalizeOperator(params.get(QueryParams.compareOp) ?? undefined),
-		evaluationWindowPreset: parseEvaluationWindowPreset(
-			params.get(QueryParams.evaluationWindowPreset),
-		),
-	};
-}

frontend/src/container/CreateAlertV2/utils.tsx

@@ -238,12 +238,67 @@ export function getAdvancedOptionsStateFromAlertDef(
 	};
 }
 
-// Condition-alias normalizers live in a leaf module (they depend only on the
-// enums) so `context/index` can consume them without an index↔utils cycle.
-export {
-	normalizeOperator,
-	normalizeMatchType,
-} from './context/conditionNormalizers';
+// Mirrors the backend's CompareOperator.Normalize() in
+// pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
+// the dropdown understands. Returns undefined for aliases the UI does not
+// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
+// value on screen instead of silently rewriting it.
+export function normalizeOperator(
+	raw: string | undefined,
+): AlertThresholdOperator | undefined {
+	switch (raw) {
+		case '1':
+		case 'above':
+		case '>':
+			return AlertThresholdOperator.IS_ABOVE;
+		case '2':
+		case 'below':
+		case '<':
+			return AlertThresholdOperator.IS_BELOW;
+		case '3':
+		case 'equal':
+		case 'eq':
+		case '=':
+			return AlertThresholdOperator.IS_EQUAL_TO;
+		case '4':
+		case 'not_equal':
+		case 'not_eq':
+		case '!=':
+			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
+		case '7':
+		case 'outside_bounds':
+			return AlertThresholdOperator.ABOVE_BELOW;
+		default:
+			return undefined;
+	}
+}
+
+// Mirrors the backend's MatchType.Normalize() in pkg/types/ruletypes/match.go.
+export function normalizeMatchType(
+	raw: string | undefined,
+): AlertThresholdMatchType | undefined {
+	switch (raw) {
+		case '1':
+		case 'at_least_once':
+			return AlertThresholdMatchType.AT_LEAST_ONCE;
+		case '2':
+		case 'all_the_times':
+			return AlertThresholdMatchType.ALL_THE_TIME;
+		case '3':
+		case 'on_average':
+		case 'avg':
+			return AlertThresholdMatchType.ON_AVERAGE;
+		case '4':
+		case 'in_total':
+		case 'sum':
+			return AlertThresholdMatchType.IN_TOTAL;
+		case '5':
+		case 'last':
+			return AlertThresholdMatchType.LAST;
+		default:
+			return undefined;
+	}
+}
 
 export function getThresholdStateFromAlertDef(
 	alertDef: PostableAlertRuleV2,

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

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

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

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

frontend/src/container/ExportPanel/ExportDashboardSelect.tsx

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

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

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

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

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

frontend/src/container/ExportPanel/index.tsx

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

frontend/src/container/ExportPanel/styles.ts

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

frontend/src/container/ExportPanel/utils.ts

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

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -1,17 +1,13 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -23,10 +19,7 @@ import K8sBaseDetails, {
 import { K8sBaseList } from 'container/InfraMonitoringK8sV2/Base/K8sBaseList';
 import StatusFilter from 'container/InfraMonitoringHostsV2/StatusFilter';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8sV2/Base/types';
-import {
-	InfraMonitoringEntity,
-	METRIC_NAMESPACE_BY_ENTITY,
-} from 'container/InfraMonitoringK8sV2/constants';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
@@ -50,7 +43,6 @@ import { getHostsQuickFiltersConfig } from './utils';
 
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
-import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -59,17 +51,6 @@ function Hosts(): JSX.Element {
 	const { redirectWithQueryBuilderData } = useQueryBuilder();
 	const isInitialized = useRef(false);
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
 	useEffect(() => {
 		if (isInitialized.current) {
 			return;
@@ -141,12 +122,13 @@ function Hosts(): JSX.Element {
 					endTimeBeforeRetention: data.endTimeBeforeRetention,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch hosts';
 				return {
 					type: 'list' as const,
 					records: [] as InframonitoringtypesHostRecordDTO[],
 					total: 0,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -159,7 +141,7 @@ function Hosts(): JSX.Element {
 			signal?: AbortSignal,
 		): Promise<{
 			data: InframonitoringtypesHostRecordDTO | null;
-			error?: APIError | null;
+			error?: string | null;
 		}> => {
 			try {
 				const response = await listHosts(
@@ -177,10 +159,11 @@ function Hosts(): JSX.Element {
 					data: response.data.records.length > 0 ? response.data.records[0] : null,
 				};
 			} catch (error) {
+				const errMsg =
+					error instanceof Error ? error.message : 'Failed to fetch host';
 				return {
 					data: null,
-					error:
-						convertToApiError(error as AxiosError<RenderErrorResponseDTO>) ?? null,
+					error: errMsg,
 				};
 			}
 		},
@@ -225,12 +208,6 @@ function Hosts(): JSX.Element {
 								source={QuickFiltersSource.INFRA_MONITORING}
 								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								useFieldApis={{
-									metricNamespace:
-										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
-									startUnixMilli,
-									endUnixMilli,
-								}}
 							/>
 						</div>
 					)}

frontend/src/container/InfraMonitoringHostsV2/utils.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -3,10 +3,7 @@ import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import {
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -39,9 +36,7 @@ import {
 	GetPodsQuickFiltersConfig,
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
-	InfraMonitoringEntity,
 	K8sCategories,
-	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
 import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
 import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
@@ -61,7 +56,6 @@ import K8sVolumesList from './Volumes/K8sVolumesList';
 import styles from './InfraMonitoringK8s.module.scss';
 import { InfraMonitoringEvents } from 'constants/events';
 import logEvent from 'api/common/logEvent';
-import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -75,31 +69,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isInitialized = useRef(false);
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
-	const getUseFieldApis = useCallback(
-		(entity: InfraMonitoringEntity): QuickFilterCheckboxUseFieldApis => ({
-			metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
-			startUnixMilli,
-			endUnixMilli,
-		}),
-		[startUnixMilli, endUnixMilli],
-	);
-
-	const selectedCategoryUseFieldApis = useMemo(
-		() => getUseFieldApis(selectedCategory as InfraMonitoringEntity),
-		[getUseFieldApis, selectedCategory],
-	);
-
 	useEffect(() => {
 		if (isInitialized.current) {
 			return;
@@ -300,7 +269,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 										source={QuickFiltersSource.INFRA_MONITORING}
 										config={selectedCategoryConfig}
 										handleFilterVisibilityChange={handleFilterVisibilityChange}
-										useFieldApis={selectedCategoryUseFieldApis}
 									/>
 								)}
 							</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringK8sV2/commonUtils.tsx

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringK8sV2/constants.ts

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