fix: test title to use correct attribute

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -140,7 +140,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
 	// Define allOptionShown earlier in the code
-	const allOptionShown = value === ALL_SELECTED_VALUE;
+	const allOptionShown = useMemo(
+		() => value === ALL_SELECTED_VALUE || value === 'ALL',
+		[value],
+	);
 
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -202,7 +202,7 @@ function AllEndPoints({
 
 	const onRowClick = useCallback(
 		(props: any): void => {
-			setSelectedEndPointName(props[SPAN_ATTRIBUTES.URL_PATH] as string);
+			setSelectedEndPointName(props[SPAN_ATTRIBUTES.HTTP_URL] as string);
 			setSelectedView(VIEWS.ENDPOINT_STATS);
 			const initialItems = [
 				...(filters?.items || []),
@@ -213,7 +213,7 @@ function AllEndPoints({
 				op: 'AND',
 			});
 			setParams({
-				selectedEndPointName: props[SPAN_ATTRIBUTES.URL_PATH] as string,
+				selectedEndPointName: props[SPAN_ATTRIBUTES.HTTP_URL] as string,
 				selectedView: VIEWS.ENDPOINT_STATS,
 				endPointDetailsLocalFilters: {
 					items: initialItems,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx

@@ -33,7 +33,7 @@ import { SPAN_ATTRIBUTES } from './constants';
 
 const httpUrlKey = {
 	dataType: DataTypes.String,
-	key: SPAN_ATTRIBUTES.URL_PATH,
+	key: SPAN_ATTRIBUTES.HTTP_URL,
 	type: 'tag',
 };
 
@@ -93,7 +93,7 @@ function EndPointDetails({
 				return currentFilters; // No change needed, prevents loop
 			}
 
-			// Rebuild filters: Keep non-http.url filters and add/update http.url filter based on prop
+			// Rebuild filters: Keep non-http_url filters and add/update http_url filter based on prop
 			const otherFilters = currentFilters?.items?.filter(
 				(item) => item.key?.key !== httpUrlKey.key,
 			);
@@ -125,7 +125,7 @@ function EndPointDetails({
 		(newFilters: IBuilderQuery['filters']): void => {
 			// 1. Update local filters state immediately
 			setFilters(newFilters);
-			// Filter out http.url filter before saving to params
+			// Filter out http_url filter before saving to params
 			const filteredNewFilters = {
 				op: 'AND',
 				items:
@@ -299,7 +299,6 @@ function EndPointDetails({
 					endPointStatusCodeLatencyBarChartsDataQuery
 				}
 				domainName={domainName}
-				endPointName={endPointName}
 				filters={filters}
 				timeRange={timeRange}
 				onDragSelect={onDragSelect}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -56,15 +56,15 @@ function TopErrors({
 				{
 					items: endPointName
 						? [
-								// Remove any existing http.url filters from initialFilters to avoid duplicates
+								// Remove any existing http_url filters from initialFilters to avoid duplicates
 								...(initialFilters?.items?.filter(
-									(item) => item.key?.key !== SPAN_ATTRIBUTES.URL_PATH,
+									(item) => item.key?.key !== SPAN_ATTRIBUTES.HTTP_URL,
 								) || []),
 								{
 									id: '92b8a1c1',
 									key: {
 										dataType: DataTypes.String,
-										key: SPAN_ATTRIBUTES.URL_PATH,
+										key: SPAN_ATTRIBUTES.HTTP_URL,
 										type: 'tag',
 									},
 									op: '=',

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

@@ -9,6 +9,7 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
+import { SPAN_ATTRIBUTES } from '../constants';
 import DomainMetrics from './DomainMetrics';
 
 // Mock the API call
@@ -126,11 +127,9 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'count()',
 			);
 			// Verify exact domain filter expression structure
+			expect(queryA.filter.expression).toContain("http_host = '0.0.0.0'");
 			expect(queryA.filter.expression).toContain(
-				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
-			);
-			expect(queryA.filter.expression).toContain(
-				'url.full EXISTS OR http.url EXISTS',
+				`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 
 			// Verify Query B - p99 latency
@@ -142,17 +141,13 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'p99(duration_nano)',
 			);
 			// Verify exact domain filter expression structure
-			expect(queryB.filter.expression).toContain(
-				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
-			);
+			expect(queryB.filter.expression).toContain("http_host = '0.0.0.0'");
 
 			// Verify Query C - error count (disabled)
 			const queryC = queryData.find((q: any) => q.queryName === 'C');
 			expect(queryC).toBeDefined();
 			expect(queryC.disabled).toBe(true);
-			expect(queryC.filter.expression).toContain(
-				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
-			);
+			expect(queryC.filter.expression).toContain("http_host = '0.0.0.0'");
 			expect(queryC.aggregations?.[0]).toBeDefined();
 			expect((queryC.aggregations?.[0] as TraceAggregation)?.expression).toBe(
 				'count()',
@@ -169,9 +164,7 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'max(timestamp)',
 			);
 			// Verify exact domain filter expression structure
-			expect(queryD.filter.expression).toContain(
-				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
-			);
+			expect(queryD.filter.expression).toContain("http_host = '0.0.0.0'");
 
 			// Verify Formula F1 - error rate calculation
 			const formulas = payload.query.builder.queryFormulas;

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

@@ -153,7 +153,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryA.filter) {
 					expect(queryA.filter.expression).toContain(
-						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+						`http_host = 'api.example.com'`,
 					);
 					expect(queryA.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -171,7 +171,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryB.filter) {
 					expect(queryB.filter.expression).toContain(
-						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+						`http_host = 'api.example.com'`,
 					);
 					expect(queryB.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -185,7 +185,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				expect(queryC.aggregateOperator).toBe('count');
 				if (queryC.filter) {
 					expect(queryC.filter.expression).toContain(
-						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+						`http_host = 'api.example.com'`,
 					);
 					expect(queryC.filter.expression).toContain("kind_string = 'Client'");
 					expect(queryC.filter.expression).toContain('has_error = true');
@@ -204,7 +204,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryD.filter) {
 					expect(queryD.filter.expression).toContain(
-						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+						`http_host = 'api.example.com'`,
 					);
 					expect(queryD.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -221,7 +221,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				}
 				if (queryE.filter) {
 					expect(queryE.filter.expression).toContain(
-						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+						`http_host = 'api.example.com'`,
 					);
 					expect(queryE.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -291,7 +291,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 					expect(query.filter.expression).toContain('staging');
 					// Also verify domain filter is still present
 					expect(query.filter.expression).toContain(
-						"(net.peer.name = 'api.internal.com' OR server.address = 'api.internal.com')",
+						"http_host = 'api.internal.com'",
 					);
 					// Verify client kind filter is present
 					expect(query.filter.expression).toContain("kind_string = 'Client'");

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

@@ -34,7 +34,6 @@ function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
 	endPointStatusCodeLatencyBarChartsDataQuery,
 	domainName,
-	endPointName,
 	filters,
 	timeRange,
 	onDragSelect,
@@ -48,7 +47,6 @@ function StatusCodeBarCharts({
 		unknown
 	>;
 	domainName: string;
-	endPointName: string;
 	filters: IBuilderQuery['filters'];
 	timeRange: {
 		startTime: number;
@@ -144,11 +142,11 @@ function StatusCodeBarCharts({
 
 	const widget = useMemo<Widgets>(
 		() =>
-			getStatusCodeBarChartWidgetData(domainName, endPointName, {
+			getStatusCodeBarChartWidgetData(domainName, {
 				items: [...(filters?.items || [])],
 				op: filters?.op || 'AND',
 			}),
-		[domainName, endPointName, filters],
+		[domainName, filters],
 	);
 
 	const graphClickHandler = useCallback(
@@ -166,6 +164,7 @@ function StatusCodeBarCharts({
 				xValue,
 				TWO_AND_HALF_MINUTES_IN_MILLISECONDS,
 			);
+
 			handleGraphClick({
 				xValue,
 				yValue,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -12,8 +12,8 @@ export const VIEW_TYPES = {
 
 // Span attribute keys - these are the source of truth for all attribute keys
 export const SPAN_ATTRIBUTES = {
-	URL_PATH: 'http.url',
+	HTTP_URL: 'http_url',
 	RESPONSE_STATUS_CODE: 'response_status_code',
-	SERVER_NAME: 'net.peer.name',
+	SERVER_NAME: 'http_host',
 	SERVER_PORT: 'net.peer.port',
 } as const;

frontend/src/container/ApiMonitoring/__tests__/APIMonitoringUtils.test.tsx

@@ -280,7 +280,7 @@ describe('API Monitoring Utils', () => {
 			const endpointFilter = result?.items?.find(
 				(item) =>
 					item.key &&
-					item.key.key === SPAN_ATTRIBUTES.URL_PATH &&
+					item.key.key === SPAN_ATTRIBUTES.HTTP_URL &&
 					item.value === endPointName,
 			);
 			expect(endpointFilter).toBeDefined();
@@ -344,13 +344,12 @@ describe('API Monitoring Utils', () => {
 	describe('getFormattedEndPointDropDownData', () => {
 		it('should format endpoint dropdown data correctly', () => {
 			// Arrange
-			const URL_PATH_KEY = SPAN_ATTRIBUTES.URL_PATH;
+			const URL_PATH_KEY = SPAN_ATTRIBUTES.HTTP_URL;
 			const mockData = [
 				{
 					data: {
 						// eslint-disable-next-line sonarjs/no-duplicate-string
 						[URL_PATH_KEY]: '/api/users',
-						'url.full': 'http://example.com/api/users',
 						A: 150, // count or other metric
 					},
 				},
@@ -358,7 +357,6 @@ describe('API Monitoring Utils', () => {
 					data: {
 						// eslint-disable-next-line sonarjs/no-duplicate-string
 						[URL_PATH_KEY]: '/api/orders',
-						'url.full': 'http://example.com/api/orders',
 						A: 75,
 					},
 				},
@@ -406,7 +404,7 @@ describe('API Monitoring Utils', () => {
 
 		it('should handle items without URL path', () => {
 			// Arrange
-			const URL_PATH_KEY = SPAN_ATTRIBUTES.URL_PATH;
+			const URL_PATH_KEY = SPAN_ATTRIBUTES.HTTP_URL;
 			type MockDataType = {
 				data: {
 					[key: string]: string | number;
@@ -712,13 +710,11 @@ describe('API Monitoring Utils', () => {
 		it('should generate widget configuration for status code bar chart', () => {
 			// Arrange
 			const domainName = 'test-domain';
-			const endPointName = '/api/test';
 			const filters = { items: [], op: 'AND' };
 
 			// Act
 			const result = getStatusCodeBarChartWidgetData(
 				domainName,
-				endPointName,
 				filters as IBuilderQuery['filters'],
 			);
 
@@ -741,21 +737,11 @@ describe('API Monitoring Utils', () => {
 			if (domainFilter) {
 				expect(domainFilter.value).toBe(domainName);
 			}
-
-			// Should have endpoint filter if provided
-			const endpointFilter = queryData.filters?.items?.find(
-				(item) => item.key && item.key.key === SPAN_ATTRIBUTES.URL_PATH,
-			);
-			expect(endpointFilter).toBeDefined();
-			if (endpointFilter) {
-				expect(endpointFilter.value).toBe(endPointName);
-			}
 		});
 
 		it('should include custom filters in the widget configuration', () => {
 			// Arrange
 			const domainName = 'test-domain';
-			const endPointName = '/api/test';
 			const customFilter = {
 				id: 'custom-filter',
 				key: {
@@ -771,7 +757,6 @@ describe('API Monitoring Utils', () => {
 			// Act
 			const result = getStatusCodeBarChartWidgetData(
 				domainName,
-				endPointName,
 				filters as IBuilderQuery['filters'],
 			);
 

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -25,7 +25,7 @@ jest.mock('container/GridCardLayout/GridCard', () => ({
 				type="button"
 				data-testid="row-click-button"
 				onClick={(): void =>
-					customOnRowClick({ [SPAN_ATTRIBUTES.URL_PATH]: '/api/test' })
+					customOnRowClick({ [SPAN_ATTRIBUTES.HTTP_URL]: '/api/test' })
 				}
 			>
 				Click Row

frontend/src/container/ApiMonitoring/__tests__/AllEndpointsWidgetV5Migration.test.tsx

@@ -6,10 +6,10 @@
  * These tests validate the migration from V4 to V5 format for getAllEndpointsWidgetData:
  * - Filter format change: filters.items[] → filter.expression
  * - Aggregation format: aggregateAttribute → aggregations[] array
- * - Domain filter: (net.peer.name OR server.address)
+ * - Domain filter: http_host = '${domainName}'
  * - Kind filter: kind_string = 'Client'
  * - Four queries: A (count), B (p99 latency), C (max timestamp), D (error count - disabled)
- * - GroupBy: Both http.url AND url.full with type 'attribute'
+ * - GroupBy: http_url with type 'attribute'
  */
 import { getAllEndpointsWidgetData } from 'container/ApiMonitoring/utils';
 import {
@@ -18,6 +18,8 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
+
 describe('AllEndpointsWidget - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const emptyFilters: IBuilderQuery['filters'] = {
@@ -92,28 +94,28 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			const [queryA, queryB, queryC, queryD] = widget.query.builder.queryData;
 
-			const baseExpression = `(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}') AND kind_string = 'Client'`;
+			const baseExpression = `http_host = '${mockDomainName}' AND kind_string = 'Client'`;
 
 			// Queries A, B, C have identical base filter
 			expect(queryA.filter?.expression).toBe(
-				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 			expect(queryB.filter?.expression).toBe(
-				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 			expect(queryC.filter?.expression).toBe(
-				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 
 			// Query D has additional has_error filter
 			expect(queryD.filter?.expression).toBe(
-				`${baseExpression} AND has_error = true AND (http.url EXISTS OR url.full EXISTS)`,
+				`${baseExpression} AND has_error = true AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 		});
 	});
 
 	describe('2. GroupBy Structure', () => {
-		it('default groupBy includes both http.url and url.full with type attribute', () => {
+		it(`default groupBy includes ${SPAN_ATTRIBUTES.HTTP_URL} with type attribute`, () => {
 			const widget = getAllEndpointsWidgetData(
 				emptyGroupBy,
 				mockDomainName,
@@ -124,23 +126,13 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			// All queries should have the same default groupBy
 			queryData.forEach((query) => {
-				expect(query.groupBy).toHaveLength(2);
+				expect(query.groupBy).toHaveLength(1);
 
-				// http.url
 				expect(query.groupBy).toContainEqual({
 					dataType: DataTypes.String,
 					isColumn: false,
 					isJSON: false,
-					key: 'http.url',
-					type: 'attribute',
-				});
-
-				// url.full
-				expect(query.groupBy).toContainEqual({
-					dataType: DataTypes.String,
-					isColumn: false,
-					isJSON: false,
-					key: 'url.full',
+					key: SPAN_ATTRIBUTES.HTTP_URL,
 					type: 'attribute',
 				});
 			});
@@ -170,19 +162,18 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			// All queries should have defaults + custom groupBy
 			queryData.forEach((query) => {
-				expect(query.groupBy).toHaveLength(4); // 2 defaults + 2 custom
+				expect(query.groupBy).toHaveLength(3); // 1 default + 2 custom
 
-				// First two should be defaults (http.url, url.full)
-				expect(query.groupBy[0].key).toBe('http.url');
-				expect(query.groupBy[1].key).toBe('url.full');
+				// First two should be defaults (http_url)
+				expect(query.groupBy[0].key).toBe(SPAN_ATTRIBUTES.HTTP_URL);
 
 				// Last two should be custom (matching subset of properties)
-				expect(query.groupBy[2]).toMatchObject({
+				expect(query.groupBy[1]).toMatchObject({
 					dataType: DataTypes.String,
 					key: 'service.name',
 					type: 'resource',
 				});
-				expect(query.groupBy[3]).toMatchObject({
+				expect(query.groupBy[2]).toMatchObject({
 					dataType: DataTypes.String,
 					key: 'deployment.environment',
 					type: 'resource',

frontend/src/container/ApiMonitoring/__tests__/EndPointDetails.test.tsx

@@ -258,7 +258,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
 						value: '/api/test',
 					}),
 				]),
@@ -278,7 +278,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
 						value: '/api/test',
 					}),
 				]),
@@ -360,7 +360,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
 						value: '/api/test',
 					}),
 				]),
@@ -373,7 +373,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
 						value: '/api/test',
 					}),
 				]),

frontend/src/container/ApiMonitoring/__tests__/EndPointsDropDown.test.tsx

@@ -191,7 +191,7 @@ describe('EndPointsDropDown Component', () => {
 
 	it('formats data using the utility function', () => {
 		const mockRows = [
-			{ data: { [SPAN_ATTRIBUTES.URL_PATH]: '/api/test', A: 10 } },
+			{ data: { [SPAN_ATTRIBUTES.HTTP_URL]: '/api/test', A: 10 } },
 		];
 
 		const dataProps = {

frontend/src/container/ApiMonitoring/__tests__/EndpointDropdownV5Migration.test.tsx

@@ -6,15 +6,18 @@
  * These tests validate the migration from V4 to V5 format for the third payload
  * in getEndPointDetailsQueryPayload (endpoint dropdown data):
  * - Filter format change: filters.items[] → filter.expression
- * - Domain handling: (net.peer.name OR server.address)
+ * - Domain handling: http_host = '${domainName}'
  * - Kind filter: kind_string = 'Client'
- * - Existence check: (http.url EXISTS OR url.full EXISTS)
+ * - Existence check: http_url EXISTS
  * - Aggregation: count() expression
- * - GroupBy: Both http.url AND url.full with type 'attribute'
+ * - GroupBy: http_url with type 'attribute'
  */
 import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
+
 describe('EndpointDropdown - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const mockStartTime = 1000;
@@ -43,9 +46,9 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters');
 
-			// Base filter 1: Domain (net.peer.name OR server.address)
+			// Base filter 1: Domain http_host = '${domainName}'
 			expect(queryA.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Base filter 2: Kind
@@ -53,7 +56,7 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 
 			// Base filter 3: Existence check
 			expect(queryA.filter?.expression).toContain(
-				'(http.url EXISTS OR url.full EXISTS)',
+				`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 			);
 
 			// V5 Aggregation format: aggregations array (not aggregateAttribute)
@@ -64,16 +67,11 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 			});
 			expect(queryA).not.toHaveProperty('aggregateAttribute');
 
-			// GroupBy: Both http.url and url.full
-			expect(queryA.groupBy).toHaveLength(2);
+			// GroupBy: http_url
+			expect(queryA.groupBy).toHaveLength(1);
 			expect(queryA.groupBy).toContainEqual({
-				key: 'http.url',
-				dataType: 'string',
-				type: 'attribute',
-			});
-			expect(queryA.groupBy).toContainEqual({
-				key: 'url.full',
-				dataType: 'string',
+				key: SPAN_ATTRIBUTES.HTTP_URL,
+				dataType: DataTypes.String,
 				type: 'attribute',
 			});
 		});
@@ -120,53 +118,7 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 
 			// Exact filter expression with custom filters merged
 			expect(expression).toBe(
-				"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com') AND kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) service.name = 'user-service' AND deployment.environment = 'production'",
-			);
-		});
-	});
-
-	describe('3. HTTP URL Filter Special Handling', () => {
-		it('converts http.url filter to (http.url OR url.full) expression', () => {
-			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'http-url-filter',
-						key: {
-							key: 'http.url',
-							dataType: 'string' as any,
-							type: 'tag',
-						},
-						op: '=',
-						value: '/api/users',
-					},
-					{
-						id: 'service-filter',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-				],
-				op: 'AND',
-			};
-
-			const payload = getEndPointDetailsQueryPayload(
-				mockDomainName,
-				mockStartTime,
-				mockEndTime,
-				filtersWithHttpUrl,
-			);
-
-			const dropdownQuery = payload[2];
-			const expression =
-				dropdownQuery.query.builder.queryData[0].filter?.expression;
-
-			// CRITICAL: Exact filter expression with http.url converted to OR logic
-			expect(expression).toBe(
-				"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com') AND kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) service.name = 'user-service' AND (http.url = '/api/users' OR url.full = '/api/users')",
+				`${SPAN_ATTRIBUTES.SERVER_NAME} = 'api.example.com' AND kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS service.name = 'user-service' AND deployment.environment = 'production'`,
 			);
 		});
 	});

frontend/src/container/ApiMonitoring/__tests__/MetricOverTimeV5Migration.test.tsx

@@ -33,7 +33,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			expect(queryData).not.toHaveProperty('filters.items');
 		});
 
-		it('uses new domain filter format: (net.peer.name OR server.address)', () => {
+		it('uses new domain filter format: (http_host)', () => {
 			const widget = getRateOverTimeWidgetData(
 				mockDomainName,
 				mockEndpointName,
@@ -44,7 +44,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify EXACT new filter format with OR operator
 			expect(queryData?.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Endpoint name is used in legend, not filter
@@ -90,7 +90,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify domain filter is present
 			expect(queryData?.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Verify custom filters are merged into the expression
@@ -120,7 +120,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			expect(queryData).not.toHaveProperty('filters.items');
 		});
 
-		it('uses new domain filter format: (net.peer.name OR server.address)', () => {
+		it('uses new domain filter format: (http_host)', () => {
 			const widget = getLatencyOverTimeWidgetData(
 				mockDomainName,
 				mockEndpointName,
@@ -132,7 +132,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			// Verify EXACT new filter format with OR operator
 			expect(queryData.filter).toBeDefined();
 			expect(queryData?.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Endpoint name is used in legend, not filter
@@ -166,7 +166,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify domain filter is present
 			expect(queryData?.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}') service.name = 'user-service'`,
+				`http_host = '${mockDomainName}' service.name = 'user-service'`,
 			);
 		});
 	});

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -142,7 +142,6 @@ describe('StatusCodeBarCharts', () => {
 		endTime: 1609545600000,
 	};
 	const mockDomainName = 'test-domain';
-	const mockEndPointName = '/api/test';
 	const onDragSelectMock = jest.fn();
 	const refetchFn = jest.fn();
 
@@ -232,7 +231,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -268,7 +266,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -311,7 +308,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -356,7 +352,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -404,7 +399,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -419,7 +413,6 @@ describe('StatusCodeBarCharts', () => {
 		// but we've confirmed the function is mocked and ready to be tested
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
-			mockEndPointName,
 			expect.objectContaining({
 				items: [],
 				op: 'AND',
@@ -467,7 +460,6 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
-				endPointName={mockEndPointName}
 				filters={mockCustomFilters as IBuilderQuery['filters']}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -477,7 +469,6 @@ describe('StatusCodeBarCharts', () => {
 		// Assert widget creation was called with the correct parameters
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
-			mockEndPointName,
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({ id: 'custom-filter' }),

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarChartsV5Migration.test.tsx

@@ -10,7 +10,7 @@
  *
  * V5 Changes:
  * - Filter format change: filters.items[] → filter.expression
- * - Domain filter: (net.peer.name OR server.address)
+ * - Domain filter: (http_host)
  * - Kind filter: kind_string = 'Client'
  * - stepInterval: 60 → null
  * - Grouped by response_status_code
@@ -47,9 +47,9 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (net.peer.name OR server.address)
+			// Base filter 1: Domain (http_host)
 			expect(queryA.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Base filter 2: Kind
@@ -96,9 +96,9 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (net.peer.name OR server.address)
+			// Base filter 1: Domain (http_host)
 			expect(queryA.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Base filter 2: Kind
@@ -177,7 +177,7 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(callsExpression).toBe(latencyExpression);
 
 			// Verify base filters
-			expect(callsExpression).toContain('net.peer.name');
+			expect(callsExpression).toContain('http_host');
 			expect(callsExpression).toContain("kind_string = 'Client'");
 
 			// Verify custom filters are merged
@@ -187,51 +187,4 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(callsExpression).toContain('production');
 		});
 	});
-
-	describe('4. HTTP URL Filter Handling', () => {
-		it('converts http.url filter to (http.url OR url.full) expression in both charts', () => {
-			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'http-url-filter',
-						key: {
-							key: 'http.url',
-							dataType: 'string' as any,
-							type: 'tag',
-						},
-						op: '=',
-						value: '/api/metrics',
-					},
-				],
-				op: 'AND',
-			};
-
-			const payload = getEndPointDetailsQueryPayload(
-				mockDomainName,
-				mockStartTime,
-				mockEndTime,
-				filtersWithHttpUrl,
-			);
-
-			const callsChartQuery = payload[4];
-			const latencyChartQuery = payload[5];
-
-			const callsExpression =
-				callsChartQuery.query.builder.queryData[0].filter?.expression;
-			const latencyExpression =
-				latencyChartQuery.query.builder.queryData[0].filter?.expression;
-
-			// CRITICAL: http.url converted to OR logic
-			expect(callsExpression).toContain(
-				"(http.url = '/api/metrics' OR url.full = '/api/metrics')",
-			);
-			expect(latencyExpression).toContain(
-				"(http.url = '/api/metrics' OR url.full = '/api/metrics')",
-			);
-
-			// Base filters still present
-			expect(callsExpression).toContain('net.peer.name');
-			expect(callsExpression).toContain("kind_string = 'Client'");
-		});
-	});
 });

frontend/src/container/ApiMonitoring/__tests__/StatusCodeTableV5Migration.test.tsx

@@ -6,8 +6,8 @@
  * These tests validate the migration from V4 to V5 format for the second payload
  * in getEndPointDetailsQueryPayload (status code table data):
  * - Filter format change: filters.items[] → filter.expression
- * - URL handling: Special logic for (http.url OR url.full)
- * - Domain filter: (net.peer.name OR server.address)
+ * - URL handling: Special logic for http_url
+ * - Domain filter: http_host = '${domainName}'
  * - Kind filter: kind_string = 'Client'
  * - Kind filter: response_status_code EXISTS
  * - Three queries: A (count), B (p99 latency), C (rate)
@@ -45,9 +45,9 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (net.peer.name OR server.address)
+			// Base filter 1: Domain (http_host)
 			expect(queryA.filter?.expression).toContain(
-				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
+				`http_host = '${mockDomainName}'`,
 			);
 
 			// Base filter 2: Kind
@@ -149,7 +149,7 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 				statusCodeQuery.query.builder.queryData[0].filter?.expression;
 
 			// Base filters present
-			expect(expression).toContain('net.peer.name');
+			expect(expression).toContain('http_host');
 			expect(expression).toContain("kind_string = 'Client'");
 			expect(expression).toContain('response_status_code EXISTS');
 
@@ -165,62 +165,4 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 			expect(queries[1].filter?.expression).toBe(queries[2].filter?.expression);
 		});
 	});
-
-	describe('4. HTTP URL Filter Handling', () => {
-		it('converts http.url filter to (http.url OR url.full) expression', () => {
-			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
-				items: [
-					{
-						id: 'http-url-filter',
-						key: {
-							key: 'http.url',
-							dataType: 'string' as any,
-							type: 'tag',
-						},
-						op: '=',
-						value: '/api/users',
-					},
-					{
-						id: 'service-filter',
-						key: {
-							key: 'service.name',
-							dataType: 'string' as any,
-							type: 'resource',
-						},
-						op: '=',
-						value: 'user-service',
-					},
-				],
-				op: 'AND',
-			};
-
-			const payload = getEndPointDetailsQueryPayload(
-				mockDomainName,
-				mockStartTime,
-				mockEndTime,
-				filtersWithHttpUrl,
-			);
-
-			const statusCodeQuery = payload[1];
-			const expression =
-				statusCodeQuery.query.builder.queryData[0].filter?.expression;
-
-			// CRITICAL: http.url converted to OR logic
-			expect(expression).toContain(
-				"(http.url = '/api/users' OR url.full = '/api/users')",
-			);
-
-			// Other filters still present
-			expect(expression).toContain('service.name');
-			expect(expression).toContain('user-service');
-
-			// Base filters present
-			expect(expression).toContain('net.peer.name');
-			expect(expression).toContain("kind_string = 'Client'");
-			expect(expression).toContain('response_status_code EXISTS');
-
-			// All ANDed together (at least 2 ANDs: domain+kind, custom filter, url condition)
-			expect(expression?.match(/AND/g)?.length).toBeGreaterThanOrEqual(2);
-		});
-	});
 });

frontend/src/container/ApiMonitoring/__tests__/TopErrors.test.tsx

@@ -4,6 +4,7 @@ import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import TopErrors from '../Explorer/Domains/DomainDetails/TopErrors';
 import { getTopErrorsQueryPayload } from '../utils';
 
@@ -83,7 +84,7 @@ describe('TopErrors', () => {
 									{
 										columns: [
 											{
-												name: 'http.url',
+												name: SPAN_ATTRIBUTES.HTTP_URL,
 												fieldDataType: 'string',
 												fieldContext: 'attribute',
 											},
@@ -123,7 +124,7 @@ describe('TopErrors', () => {
 										table: {
 											rows: [
 												{
-													'http.url': '/api/test',
+													http_url: '/api/test',
 													A: 100,
 												},
 											],
@@ -205,7 +206,7 @@ describe('TopErrors', () => {
 		expect(navigateMock).toHaveBeenCalledWith({
 			filters: expect.arrayContaining([
 				expect.objectContaining({
-					key: expect.objectContaining({ key: 'http.url' }),
+					key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
 					op: '=',
 					value: '/api/test',
 				}),
@@ -215,7 +216,7 @@ describe('TopErrors', () => {
 					value: 'true',
 				}),
 				expect.objectContaining({
-					key: expect.objectContaining({ key: 'net.peer.name' }),
+					key: expect.objectContaining({ key: 'http_host' }),
 					op: '=',
 					value: 'test-domain',
 				}),
@@ -334,7 +335,7 @@ describe('TopErrors', () => {
 
 		// Verify all required filters are present
 		expect(filterExpression).toContain(
-			`kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) AND (net.peer.name = 'test-domain' OR server.address = 'test-domain') AND has_error = true`,
+			`kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS AND ${SPAN_ATTRIBUTES.SERVER_NAME} = 'test-domain' AND has_error = true`,
 		);
 	});
 });

frontend/src/container/ApiMonitoring/utils.tsx

@@ -15,7 +15,6 @@ import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsAppli
 import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/utils';
 import dayjs from 'dayjs';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { cloneDeep } from 'lodash-es';
 import { ArrowUpDown, ChevronDown, ChevronRight, Info } from 'lucide-react';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
@@ -57,12 +56,12 @@ export const getDisplayValue = (value: unknown): string =>
 	isEmptyFilterValue(value) ? '-' : String(value);
 
 export const getDomainNameFilterExpression = (domainName: string): string =>
-	`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`;
+	`http_host = '${domainName}'`;
 
 export const clientKindExpression = `kind_string = 'Client'`;
 
 /**
- * Converts filters to expression, handling http.url specially by creating (http.url OR url.full) condition
+ * Converts filters to expression
  * @param filters Filters to convert
  * @param baseExpression Base expression to combine with filters
  * @returns Filter expression string
@@ -75,34 +74,6 @@ export const convertFiltersWithUrlHandling = (
 		return baseExpression;
 	}
 
-	// Check if filters contain http.url (SPAN_ATTRIBUTES.URL_PATH)
-	const httpUrlFilter = filters.items?.find(
-		(item) => item.key?.key === SPAN_ATTRIBUTES.URL_PATH,
-	);
-
-	// If http.url filter exists, create modified filters with (http.url OR url.full)
-	if (httpUrlFilter && httpUrlFilter.value) {
-		// Remove ALL http.url filters from items (guards against duplicates)
-		const otherFilters = filters.items?.filter(
-			(item) => item.key?.key !== SPAN_ATTRIBUTES.URL_PATH,
-		);
-
-		// Convert to expression first with other filters
-		const {
-			filter: intermediateFilter,
-		} = convertFiltersToExpressionWithExistingQuery(
-			{ ...filters, items: otherFilters || [] },
-			baseExpression,
-		);
-
-		// Add the OR condition for http.url and url.full
-		const urlValue = httpUrlFilter.value;
-		const urlCondition = `(http.url = '${urlValue}' OR url.full = '${urlValue}')`;
-		return intermediateFilter.expression.trim()
-			? `${intermediateFilter.expression} AND ${urlCondition}`
-			: urlCondition;
-	}
-
 	const { filter } = convertFiltersToExpressionWithExistingQuery(
 		filters,
 		baseExpression,
@@ -371,7 +342,7 @@ export const formatDataForTable = (
 	});
 };
 
-const urlExpression = `(url.full EXISTS OR http.url EXISTS)`;
+const urlExpression = `${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`;
 
 export const getDomainMetricsQueryPayload = (
 	domainName: string,
@@ -588,14 +559,7 @@ const defaultGroupBy = [
 		dataType: DataTypes.String,
 		isColumn: false,
 		isJSON: false,
-		key: SPAN_ATTRIBUTES.URL_PATH,
-		type: 'attribute',
-	},
-	{
-		dataType: DataTypes.String,
-		isColumn: false,
-		isJSON: false,
-		key: 'url.full',
+		key: SPAN_ATTRIBUTES.HTTP_URL,
 		type: 'attribute',
 	},
 	// {
@@ -867,8 +831,8 @@ function buildFilterExpression(
 ): string {
 	const baseFilterParts = [
 		`kind_string = 'Client'`,
-		`(http.url EXISTS OR url.full EXISTS)`,
-		`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
+		`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+		`${SPAN_ATTRIBUTES.SERVER_NAME} = '${domainName}'`,
 		`has_error = true`,
 	];
 	if (showStatusCodeErrors) {
@@ -910,12 +874,7 @@ export const getTopErrorsQueryPayload = (
 						filter: { expression: filterExpression },
 						groupBy: [
 							{
-								name: 'http.url',
-								fieldDataType: 'string',
-								fieldContext: 'attribute',
-							},
-							{
-								name: 'url.full',
+								name: SPAN_ATTRIBUTES.HTTP_URL,
 								fieldDataType: 'string',
 								fieldContext: 'attribute',
 							},
@@ -1134,11 +1093,11 @@ export const formatEndPointsDataForTable = (
 	if (!isGroupedByAttribute) {
 		formattedData = data?.map((endpoint) => {
 			const { port } = extractPortAndEndpoint(
-				(endpoint.data[SPAN_ATTRIBUTES.URL_PATH] as string) || '',
+				(endpoint.data[SPAN_ATTRIBUTES.HTTP_URL] as string) || '',
 			);
 			return {
 				key: v4(),
-				endpointName: (endpoint.data[SPAN_ATTRIBUTES.URL_PATH] as string) || '-',
+				endpointName: (endpoint.data[SPAN_ATTRIBUTES.HTTP_URL] as string) || '-',
 				port,
 				callCount:
 					endpoint.data.A === 'n/a' || endpoint.data.A === undefined
@@ -1262,9 +1221,7 @@ export const formatTopErrorsDataForTable = (
 
 		return {
 			key: v4(),
-			endpointName: getDisplayValue(
-				rowObj[SPAN_ATTRIBUTES.URL_PATH] || rowObj['url.full'],
-			),
+			endpointName: getDisplayValue(rowObj[SPAN_ATTRIBUTES.HTTP_URL]),
 			statusCode: getDisplayValue(rowObj[SPAN_ATTRIBUTES.RESPONSE_STATUS_CODE]),
 			statusMessage: getDisplayValue(rowObj.status_message),
 			count: getDisplayValue(rowObj.__result_0),
@@ -1281,10 +1238,10 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'ea16470b',
 			key: {
-				key: 'http.url',
+				key: SPAN_ATTRIBUTES.HTTP_URL,
 				dataType: DataTypes.String,
 				type: 'tag',
-				id: 'http.url--string--tag--false',
+				id: `${SPAN_ATTRIBUTES.HTTP_URL}--string--tag--false`,
 			},
 			op: '=',
 			value: endPointName,
@@ -1302,7 +1259,7 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'e8a043b7',
 			key: {
-				key: 'net.peer.name',
+				key: SPAN_ATTRIBUTES.SERVER_NAME,
 				dataType: DataTypes.String,
 				type: '',
 			},
@@ -1781,7 +1738,7 @@ export const getEndPointDetailsQueryPayload = (
 								filters || { items: [], op: 'AND' },
 								`${getDomainNameFilterExpression(
 									domainName,
-								)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+								)} AND ${clientKindExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
 							),
 						},
 						expression: 'A',
@@ -1793,12 +1750,7 @@ export const getEndPointDetailsQueryPayload = (
 						orderBy: [],
 						groupBy: [
 							{
-								key: SPAN_ATTRIBUTES.URL_PATH,
-								dataType: DataTypes.String,
-								type: 'attribute',
-							},
-							{
-								key: 'url.full',
+								key: SPAN_ATTRIBUTES.HTTP_URL,
 								dataType: DataTypes.String,
 								type: 'attribute',
 							},
@@ -2225,7 +2177,7 @@ export const getEndPointZeroStateQueryPayload = (
 						orderBy: [],
 						groupBy: [
 							{
-								key: SPAN_ATTRIBUTES.URL_PATH,
+								key: SPAN_ATTRIBUTES.HTTP_URL,
 								dataType: DataTypes.String,
 								type: 'tag',
 							},
@@ -2419,8 +2371,7 @@ export const statusCodeWidgetInfo = [
 
 interface EndPointDropDownResponseRow {
 	data: {
-		[SPAN_ATTRIBUTES.URL_PATH]: string;
-		'url.full': string;
+		[SPAN_ATTRIBUTES.HTTP_URL]: string;
 		A: number;
 	};
 }
@@ -2439,8 +2390,8 @@ export const getFormattedEndPointDropDownData = (
 	}
 	return data.map((row) => ({
 		key: v4(),
-		label: row.data[SPAN_ATTRIBUTES.URL_PATH] || row.data['url.full'] || '-',
-		value: row.data[SPAN_ATTRIBUTES.URL_PATH] || row.data['url.full'] || '-',
+		label: row.data[SPAN_ATTRIBUTES.HTTP_URL] || '-',
+		value: row.data[SPAN_ATTRIBUTES.HTTP_URL] || '-',
 	}));
 };
 
@@ -2769,7 +2720,6 @@ export const groupStatusCodes = (
 
 export const getStatusCodeBarChartWidgetData = (
 	domainName: string,
-	endPointName: string,
 	filters: IBuilderQuery['filters'],
 ): Widgets => ({
 	query: {
@@ -2798,20 +2748,6 @@ export const getStatusCodeBarChartWidgetData = (
 								op: '=',
 								value: domainName,
 							},
-							...(endPointName
-								? [
-										{
-											id: '8b1be6f0',
-											key: {
-												dataType: DataTypes.String,
-												key: SPAN_ATTRIBUTES.URL_PATH,
-												type: 'tag',
-											},
-											op: '=',
-											value: endPointName,
-										},
-								  ]
-								: []),
 							...(filters?.items || []),
 						],
 						op: 'AND',
@@ -2933,7 +2869,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+							)} AND ${clientKindExpression} AND http_url EXISTS`,
 						),
 					},
 					functions: [],
@@ -2965,7 +2901,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+							)} AND ${clientKindExpression} AND http_url EXISTS`,
 						),
 					},
 					functions: [],
@@ -2997,7 +2933,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
+							)} AND ${clientKindExpression} AND http_url EXISTS`,
 						),
 					},
 					functions: [],
@@ -3029,7 +2965,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND has_error = true AND (http.url EXISTS OR url.full EXISTS)`,
+							)} AND ${clientKindExpression} AND has_error = true AND http_url EXISTS`,
 						),
 					},
 					functions: [],
@@ -3060,24 +2996,12 @@ export const getAllEndpointsWidgetData = (
 	);
 
 	widget.renderColumnCell = {
-		[SPAN_ATTRIBUTES.URL_PATH]: (
-			url: string | number,
-			record?: RowData,
-		): ReactNode => {
-			// First try to use the url from the column value
-			let urlValue = url;
-
-			// If url is empty/null and we have the record, fallback to url.full
-			if (isEmptyFilterValue(url) && record) {
-				const { 'url.full': urlFull } = record;
-				urlValue = urlFull;
-			}
-
-			if (!urlValue || urlValue === 'n/a') {
+		[SPAN_ATTRIBUTES.HTTP_URL]: (url: string | number): ReactNode => {
+			if (isEmptyFilterValue(url) || !url || url === 'n/a') {
 				return <span>-</span>;
 			}
 
-			const { endpoint } = extractPortAndEndpoint(String(urlValue));
+			const { endpoint } = extractPortAndEndpoint(String(url));
 			return <span>{getDisplayValue(endpoint)}</span>;
 		},
 		A: (numOfCalls: any): ReactNode => (
@@ -3132,8 +3056,8 @@ export const getAllEndpointsWidgetData = (
 	};
 
 	widget.customColTitles = {
-		[SPAN_ATTRIBUTES.URL_PATH]: 'Endpoint',
-		'net.peer.port': 'Port',
+		[SPAN_ATTRIBUTES.HTTP_URL]: 'Endpoint',
+		[SPAN_ATTRIBUTES.SERVER_PORT]: 'Port',
 	};
 
 	widget.title = (
@@ -3158,12 +3082,10 @@ export const getAllEndpointsWidgetData = (
 		</div>
 	);
 
-	widget.hiddenColumns = ['url.full'];
-
 	return widget;
 };
 
-const keysToRemove = ['http.url', 'url.full', 'A', 'B', 'C', 'F1'];
+const keysToRemove = [SPAN_ATTRIBUTES.HTTP_URL, 'A', 'B', 'C', 'F1'];
 
 export const getGroupByFiltersFromGroupByValues = (
 	rowData: any,
@@ -3221,7 +3143,7 @@ export const getRateOverTimeWidgetData = (
 					filter: {
 						expression: convertFiltersWithUrlHandling(
 							filters || { items: [], op: 'AND' },
-							`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
+							`http_host = '${domainName}'`,
 						),
 					},
 					functions: [],
@@ -3272,7 +3194,7 @@ export const getLatencyOverTimeWidgetData = (
 					filter: {
 						expression: convertFiltersWithUrlHandling(
 							filters || { items: [], op: 'AND' },
-							`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
+							`http_host = '${domainName}'`,
 						),
 					},
 					functions: [],

frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx

@@ -1,11 +1,10 @@
-import { memo, useEffect, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { VariableItemProps } from './VariableItem';
-import { customVariableSelectStrategy } from './variableSelectStrategy/customVariableSelectStrategy';
 
 type CustomVariableInputProps = Pick<
 	VariableItemProps,
@@ -30,31 +29,16 @@ function CustomVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
-		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
-		strategy: customVariableSelectStrategy,
 	});
 
-	// Apply default on mount — options are available synchronously for custom variables
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(applyDefaultIfNeeded, []);
-
-	const selectOptions = useMemo(
-		() =>
-			optionsData.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[optionsData],
-	);
-
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={selectOptions}
+			options={optionsData}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -13,6 +13,7 @@ import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import DynamicVariableSelection from './DynamicVariableSelection';
 import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
@@ -152,7 +153,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 			{sortedVariablesArray.map((variable) => {
 				const key = `${variable.name}${variable.id}${variable.order}`;
 
-				return (
+				return variable.type === 'DYNAMIC' ? (
+					<DynamicVariableSelection
+						key={key}
+						existingVariables={dashboardVariables}
+						variableData={variable}
+						onValueUpdate={onValueUpdate}
+					/>
+				) : (
 					<VariableItem
 						key={key}
 						existingVariables={dashboardVariables}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -1,343 +0,0 @@
-import { memo, useCallback, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
-import { isEmpty } from 'lodash-es';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
-
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { getOptionsForDynamicVariable } from './util';
-import { VariableItemProps } from './VariableItem';
-import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
-
-import './DashboardVariableSelection.styles.scss';
-
-type DynamicVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate' | 'existingVariables'
->;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DynamicVariableInput({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableInputProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [relatedValues, setRelatedValues] = useState<string[]>([]);
-	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
-		[],
-	);
-
-	// Track dropdown open state for auto-checking new values
-	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	// Build a memoized list of all currently available option strings (normalized + related)
-	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
-		[optionsData, relatedValues],
-	);
-
-	const {
-		value,
-		tempSelection,
-		setTempSelection,
-		handleClear,
-		enableSelectAll,
-		defaultValue,
-		applyDefaultIfNeeded,
-		onChange,
-		onDropdownVisibleChange,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-		strategy: dynamicVariableSelectStrategy,
-		allAvailableOptionStrings,
-	});
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) {
-			return 'no_variables';
-		}
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// existing query is the query made from the other dynamic variables around this one with there current values
-	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
-
-		const queryParts: string[] = [];
-
-		Object.entries(existingVariables).forEach(([, variable]) => {
-			// Skip the current variable being processed
-			if (variable.id === variableData.id) {
-				return;
-			}
-
-			// Only include dynamic variables that have selected values and are not selected as ALL
-			if (
-				variable.type === 'DYNAMIC' &&
-				variable.dynamicVariablesAttribute &&
-				variable.selectedValue &&
-				!isEmpty(variable.selectedValue) &&
-				(variable.showALLOption ? !variable.allSelected : true)
-			) {
-				const attribute = variable.dynamicVariablesAttribute;
-				const values = Array.isArray(variable.selectedValue)
-					? variable.selectedValue
-					: [variable.selectedValue];
-
-				// Filter out empty values and convert to strings
-				const validValues = values
-					.filter((val) => val !== null && val !== undefined && val !== '')
-					.map((val) => val.toString());
-
-				if (validValues.length > 0) {
-					// Format values for query - wrap strings in quotes, keep numbers as is
-					const formattedValues = validValues.map((val) => {
-						// Check if value is a number
-						const numValue = Number(val);
-						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-							return val; // Keep as number
-						}
-						// Escape single quotes and wrap in quotes
-						return `'${val.replace(/'/g, "\\'")}'`;
-					});
-
-					if (formattedValues.length === 1) {
-						queryParts.push(`${attribute} = ${formattedValues[0]}`);
-					} else {
-						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
-					}
-				}
-			}
-		});
-
-		return queryParts.join(' AND ');
-	}, [
-		existingVariables,
-		variableData.id,
-		variableData.dynamicVariablesAttribute,
-	]);
-
-	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
-	const handleSelectDropdownVisibilityChange = useCallback(
-		(visible: boolean): void => {
-			setIsDropdownOpen(visible);
-
-			onDropdownVisibleChange(visible);
-
-			if (!visible) {
-				setFilteredOptionsData(optionsData);
-				setRelatedValues(originalRelatedValues);
-				setApiSearchText('');
-			}
-		},
-		[onDropdownVisibleChange, optionsData, originalRelatedValues],
-	);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-			debouncedApiSearchText,
-			variableData.dynamicVariablesSource,
-			variableData.dynamicVariablesAttribute,
-		],
-		{
-			enabled:
-				variableData.type === 'DYNAMIC' &&
-				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute,
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-					existingQuery,
-				),
-			onSuccess: (data) => {
-				const newNormalizedValues = data.data?.normalizedValues || [];
-				const newRelatedValues = data.data?.relatedValues || [];
-
-				if (!debouncedApiSearchText) {
-					setOptionsData(newNormalizedValues);
-					setIsComplete(data.data?.complete || false);
-				}
-				setFilteredOptionsData(newNormalizedValues);
-				setRelatedValues(newRelatedValues);
-				setOriginalRelatedValues(newRelatedValues);
-
-				// Only run auto-check logic when necessary to avoid performance issues
-				if (variableData.allSelected && isDropdownOpen) {
-					// Build the latest full list from API (normalized + related)
-					const latestValues = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					// Update temp selection to exactly reflect latest API values when ALL is active
-					const currentStrings = Array.isArray(tempSelection)
-						? tempSelection.map((v) => v.toString())
-						: tempSelection
-						? [tempSelection.toString()]
-						: [];
-					const areSame =
-						currentStrings.length === latestValues.length &&
-						latestValues.every((v) => currentStrings.includes(v));
-					if (!areSame) {
-						setTempSelection(latestValues);
-					}
-				}
-
-				// Apply default if no value is selected (e.g., new variable, first load)
-				if (!debouncedApiSearchText) {
-					const allNewOptions = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-					applyDefaultIfNeeded(allNewOptions);
-				}
-			},
-			onError: (error: any) => {
-				if (error) {
-					let message = SOMETHING_WENT_WRONG;
-					if (error?.message) {
-						message = error?.message;
-					} else {
-						message =
-							'Please make sure configuration is valid and you have required setup and permissions';
-					}
-					setErrorMessage(message);
-
-					// Check if error is retryable (5xx) or not (4xx)
-					const isRetryable = checkIfRetryableError(error);
-					setIsRetryableError(isRetryable);
-				}
-			},
-		},
-	);
-
-	const handleRetry = useCallback((): void => {
-		setErrorMessage(null);
-		setIsRetryableError(true);
-		refetch();
-	}, [refetch]);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					setRelatedValues(originalRelatedValues);
-					return;
-				}
-
-				const lowerText = text.toLowerCase();
-				setFilteredOptionsData(
-					optionsData.filter((option) =>
-						option.toString().toLowerCase().includes(lowerText),
-					),
-				);
-				setRelatedValues(
-					originalRelatedValues.filter((val) =>
-						val.toLowerCase().includes(lowerText),
-					),
-				);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData, originalRelatedValues],
-	);
-
-	const selectOptions = useMemo(
-		() =>
-			getOptionsForDynamicVariable(filteredOptionsData || [], relatedValues || []),
-		[filteredOptionsData, relatedValues],
-	);
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={selectOptions}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleSelectDropdownVisibilityChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-			// dynamic variable specific + API related props
-			loading={isLoading}
-			errorMessage={errorMessage}
-			onRetry={handleRetry}
-			isDynamicVariable
-			showRetryButton={isRetryableError}
-			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-			onSearch={handleSearch}
-		/>
-	);
-}
-
-export default memo(DynamicVariableInput);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -0,0 +1,602 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable no-nested-ternary */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip, Typography } from 'antd';
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useDebounce from 'hooks/useDebounce';
+import { isEmpty, isUndefined } from 'lodash-es';
+import { AppState } from 'store/reducers';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ALL_SELECT_VALUE } from '../utils';
+import { SelectItemStyle } from './styles';
+import {
+	areArraysEqual,
+	getOptionsForDynamicVariable,
+	getSelectValue,
+	uniqueValues,
+} from './util';
+
+import './DashboardVariableSelection.styles.scss';
+
+interface DynamicVariableSelectionProps {
+	variableData: IDashboardVariable;
+	existingVariables: Record<string, IDashboardVariable>;
+	onValueUpdate: (
+		name: string,
+		id: string,
+		arg1: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+	) => void;
+}
+
+function DynamicVariableSelection({
+	variableData,
+	onValueUpdate,
+	existingVariables,
+}: DynamicVariableSelectionProps): JSX.Element {
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
+
+	const [isComplete, setIsComplete] = useState<boolean>(false);
+
+	const [filteredOptionsData, setFilteredOptionsData] = useState<
+		(string | number | boolean)[]
+	>([]);
+
+	const [relatedValues, setRelatedValues] = useState<string[]>([]);
+	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
+		[],
+	);
+
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// Track dropdown open state for auto-checking new values
+	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+	// Create a dependency key from all dynamic variables
+	const dynamicVariablesKey = useMemo(() => {
+		if (!existingVariables) {
+			return 'no_variables';
+		}
+
+		const dynamicVars = Object.values(existingVariables)
+			.filter((v) => v.type === 'DYNAMIC')
+			.map(
+				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
+			)
+			.join('|');
+
+		return dynamicVars || 'no_dynamic_variables';
+	}, [existingVariables]);
+
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// existing query is the query made from the other dynamic variables around this one with there current values
+	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
+	const existingQuery = useMemo(() => {
+		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
+			return '';
+		}
+
+		const queryParts: string[] = [];
+
+		Object.entries(existingVariables).forEach(([, variable]) => {
+			// Skip the current variable being processed
+			if (variable.id === variableData.id) {
+				return;
+			}
+
+			// Only include dynamic variables that have selected values and are not selected as ALL
+			if (
+				variable.type === 'DYNAMIC' &&
+				variable.dynamicVariablesAttribute &&
+				variable.selectedValue &&
+				!isEmpty(variable.selectedValue) &&
+				(variable.showALLOption ? !variable.allSelected : true)
+			) {
+				const attribute = variable.dynamicVariablesAttribute;
+				const values = Array.isArray(variable.selectedValue)
+					? variable.selectedValue
+					: [variable.selectedValue];
+
+				// Filter out empty values and convert to strings
+				const validValues = values
+					.filter((value) => value !== null && value !== undefined && value !== '')
+					.map((value) => value.toString());
+
+				if (validValues.length > 0) {
+					// Format values for query - wrap strings in quotes, keep numbers as is
+					const formattedValues = validValues.map((value) => {
+						// Check if value is a number
+						const numValue = Number(value);
+						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+							return value; // Keep as number
+						}
+						// Escape single quotes and wrap in quotes
+						return `'${value.replace(/'/g, "\\'")}'`;
+					});
+
+					if (formattedValues.length === 1) {
+						queryParts.push(`${attribute} = ${formattedValues[0]}`);
+					} else {
+						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
+					}
+				}
+			}
+		});
+
+		return queryParts.join(' AND ');
+	}, [
+		existingVariables,
+		variableData.id,
+		variableData.dynamicVariablesAttribute,
+	]);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+			debouncedApiSearchText,
+		],
+		{
+			enabled: variableData.type === 'DYNAMIC',
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+					existingQuery,
+				),
+			onSuccess: (data) => {
+				const newNormalizedValues = data.data?.normalizedValues || [];
+				const newRelatedValues = data.data?.relatedValues || [];
+
+				if (!debouncedApiSearchText) {
+					setOptionsData(newNormalizedValues);
+					setIsComplete(data.data?.complete || false);
+				}
+				setFilteredOptionsData(newNormalizedValues);
+				setRelatedValues(newRelatedValues);
+				setOriginalRelatedValues(newRelatedValues);
+
+				// Only run auto-check logic when necessary to avoid performance issues
+				if (variableData.allSelected && isDropdownOpen) {
+					// Build the latest full list from API (normalized + related)
+					const latestValues = [
+						...new Set([
+							...newNormalizedValues.map((v) => v.toString()),
+							...newRelatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					// Update temp selection to exactly reflect latest API values when ALL is active
+					const currentStrings = Array.isArray(tempSelection)
+						? tempSelection.map((v) => v.toString())
+						: tempSelection
+						? [tempSelection.toString()]
+						: [];
+					const areSame =
+						currentStrings.length === latestValues.length &&
+						latestValues.every((v) => currentStrings.includes(v));
+					if (!areSame) {
+						setTempSelection(latestValues);
+					}
+				}
+			},
+			onError: (error: any) => {
+				if (error) {
+					let message = SOMETHING_WENT_WRONG;
+					if (error?.message) {
+						message = error?.message;
+					} else {
+						message =
+							'Please make sure configuration is valid and you have required setup and permissions';
+					}
+					setErrorMessage(message);
+
+					// Check if error is retryable (5xx) or not (4xx)
+					const isRetryable = checkIfRetryableError(error);
+					setIsRetryableError(isRetryable);
+				}
+			},
+		},
+	);
+
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+
+			if (
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
+			) {
+				return;
+			}
+
+			if (variableData.name) {
+				if (
+					value === ALL_SELECT_VALUE ||
+					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+				) {
+					// For ALL selection in dynamic variables, pass null to avoid storing values
+					// The parent component will handle this appropriately
+					onValueUpdate(variableData.name, variableData.id, null, true);
+				} else {
+					// Build union of available options shown in dropdown (normalized + related)
+					const allAvailableOptionStrings = [
+						...new Set([
+							...optionsData.map((v) => v.toString()),
+							...relatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					const haveCustomValuesSelected =
+						Array.isArray(value) &&
+						!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
+
+					onValueUpdate(
+						variableData.name,
+						variableData.id,
+						value,
+						allAvailableOptionStrings.every((v) => value.includes(v.toString())),
+						haveCustomValuesSelected,
+					);
+				}
+			}
+		},
+		[variableData, onValueUpdate, optionsData, relatedValues],
+	);
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesSource &&
+			variableData.dynamicVariablesAttribute
+		) {
+			refetch();
+		}
+	}, [
+		refetch,
+		variableData.dynamicVariablesSource,
+		variableData.dynamicVariablesAttribute,
+		debouncedApiSearchText,
+	]);
+
+	// Build a memoized list of all currently available option strings (normalized + related)
+	const allAvailableOptionStrings = useMemo(
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
+		[optionsData, relatedValues],
+	);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					setRelatedValues(originalRelatedValues);
+					return;
+				}
+
+				const localFilteredOptionsData: (string | number | boolean)[] = [];
+				optionsData.forEach((option) => {
+					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
+						localFilteredOptionsData.push(option);
+					}
+				});
+				setFilteredOptionsData(localFilteredOptionsData);
+				setRelatedValues(
+					originalRelatedValues.filter((value) =>
+						value.toLowerCase().includes(text.toLowerCase()),
+					),
+				);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData, originalRelatedValues],
+	);
+
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(
+		() => getSelectValue(selectedValue, variableData),
+		[selectedValue, variableData],
+	);
+
+	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
+
+	const selectValue =
+		variableData.allSelected && enableSelectAll
+			? ALL_SELECT_VALUE
+			: selectedValueStringified;
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = useCallback(
+		(inputValue: string | string[]): void => {
+			// Store the selection in temporary state while dropdown is open
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+			const sanitizedValue = uniqueValues(value);
+			setTempSelection(sanitizedValue);
+		},
+		[variableData.multiSelect],
+	);
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Update dropdown open state for auto-checking
+		setIsDropdownOpen(visible);
+
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
+				// When ALL is selected, set selection to exactly the latest available values
+				const latestAll = [...allAvailableOptionStrings];
+				setTempSelection(latestAll);
+			} else {
+				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+			}
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Only call handleChange if there's actually a change in the selection
+			const currentValue = variableData.selectedValue;
+
+			// Helper function to check if arrays have the same elements regardless of order
+			const areArraysEqualIgnoreOrder = (a: any[], b: any[]): boolean => {
+				if (a.length !== b.length) {
+					return false;
+				}
+				const sortedA = [...a].sort();
+				const sortedB = [...b].sort();
+				return areArraysEqual(sortedA, sortedB);
+			};
+
+			// If ALL was selected before and remains ALL after, skip updating
+			const wasAllSelected = enableSelectAll && variableData.allSelected;
+			const isAllSelectedAfter =
+				enableSelectAll &&
+				Array.isArray(tempSelection) &&
+				tempSelection.length === allAvailableOptionStrings.length &&
+				allAvailableOptionStrings.every((v) => tempSelection.includes(v));
+
+			if (wasAllSelected && isAllSelectedAfter) {
+				setTempSelection(undefined);
+				return;
+			}
+
+			const hasChanged =
+				tempSelection !== currentValue &&
+				!(
+					Array.isArray(tempSelection) &&
+					Array.isArray(currentValue) &&
+					areArraysEqualIgnoreOrder(tempSelection, currentValue)
+				);
+
+			if (hasChanged) {
+				handleChange(tempSelection);
+			}
+			setTempSelection(undefined);
+		}
+
+		// Always reset filtered data when dropdown closes, regardless of tempSelection state
+		if (!visible) {
+			setFilteredOptionsData(optionsData);
+			setRelatedValues(originalRelatedValues);
+			setApiSearchText('');
+		}
+	};
+
+	useEffect(
+		() => (): void => {
+			// Cleanup on unmount
+			setTempSelection(undefined);
+			setFilteredOptionsData([]);
+			setRelatedValues([]);
+			setApiSearchText('');
+		},
+		[],
+	);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else if (variableData.allSelected) {
+						// If ALL is selected but no stored values, derive from available options
+						// This handles the case where we don't store values in localStorage for ALL
+						value = allAvailableOptionStrings;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		variableData.allSelected,
+		selectedValue,
+		tempSelection,
+		optionsData,
+		allAvailableOptionStrings,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
+
+	return (
+		<div className="variable-item">
+			<Typography.Text className="variable-name" ellipsis>
+				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
+						<InfoCircleOutlined className="info-icon" />
+					</Tooltip>
+				)}
+			</Typography.Text>
+			<div className="variable-value">
+				{variableData.multiSelect ? (
+					<CustomMultiSelect
+						key={variableData.id}
+						options={getOptionsForDynamicVariable(
+							filteredOptionsData || [],
+							relatedValues || [],
+						)}
+						defaultValue={variableData.defaultValue}
+						onChange={handleTempChange}
+						bordered={false}
+						placeholder="Select value"
+						placement="bottomLeft"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						maxTagCount={2}
+						getPopupContainer={popupContainer}
+						value={
+							(tempSelection || selectValue) === ALL_SELECT_VALUE
+								? 'ALL'
+								: tempSelection || selectValue
+						}
+						onDropdownVisibleChange={handleDropdownVisibleChange}
+						errorMessage={errorMessage}
+						// eslint-disable-next-line react/no-unstable-nested-components
+						maxTagPlaceholder={(omittedValues): JSX.Element => {
+							const maxDisplayValues = 10;
+							const valuesToShow = omittedValues.slice(0, maxDisplayValues);
+							const hasMore = omittedValues.length > maxDisplayValues;
+							const tooltipText =
+								valuesToShow.map(({ value }) => value).join(', ') +
+								(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
+
+							return (
+								<Tooltip title={tooltipText}>
+									<span>+ {omittedValues.length} </span>
+								</Tooltip>
+							);
+						}}
+						onClear={(): void => {
+							handleChange([]);
+						}}
+						enableAllSelection={enableSelectAll}
+						maxTagTextLength={30}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							setErrorMessage(null);
+							setIsRetryableError(true);
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+						isDynamicVariable
+						showRetryButton={isRetryableError}
+					/>
+				) : (
+					<CustomSelect
+						key={variableData.id}
+						onChange={handleChange}
+						bordered={false}
+						placeholder="Select value"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						getPopupContainer={popupContainer}
+						options={getOptionsForDynamicVariable(
+							filteredOptionsData || [],
+							relatedValues || [],
+						)}
+						value={selectValue}
+						defaultValue={variableData.defaultValue}
+						errorMessage={errorMessage}
+						onSearch={handleSearch}
+						// eslint-disable-next-line sonarjs/no-identical-functions
+						onRetry={(): void => {
+							setErrorMessage(null);
+							setIsRetryableError(true);
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+						isDynamicVariable
+						showRetryButton={isRetryableError}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DynamicVariableSelection;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -1,11 +1,13 @@
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
 import { isArray, isString } from 'lodash-es';
+import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { AppState } from 'store/reducers';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -13,18 +15,20 @@ import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { areArraysEqual, checkAPIInvocation } from './util';
-import { VariableItemProps } from './VariableItem';
-import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
-type QueryVariableInputProps = Pick<
-	VariableItemProps,
-	| 'variableData'
-	| 'existingVariables'
-	| 'onValueUpdate'
-	| 'variablesToGetUpdated'
-	| 'setVariablesToGetUpdated'
-	| 'dependencyData'
->;
+interface QueryVariableInputProps {
+	variableData: IDashboardVariable;
+	existingVariables: Record<string, IDashboardVariable>;
+	onValueUpdate: (
+		name: string,
+		id: string,
+		value: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+	) => void;
+	variablesToGetUpdated: string[];
+	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
+	dependencyData: IDependencyData | null;
+}
 
 function QueryVariableInput({
 	variableData,
@@ -52,15 +56,13 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
-		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
-		strategy: queryVariableSelectStrategy,
 	});
 
-	const validVariableUpdate = useCallback((): boolean => {
+	const validVariableUpdate = (): boolean => {
 		if (!variableData.name) {
 			return false;
 		}
@@ -68,100 +70,86 @@ function QueryVariableInput({
 			variablesToGetUpdated.length &&
 				variablesToGetUpdated[0] === variableData.name,
 		);
-	}, [variableData.name, variablesToGetUpdated]);
+	};
 
-	const getOptions = useCallback(
-		// eslint-disable-next-line sonarjs/cognitive-complexity
-		(variablesRes: VariableResponseProps | null): void => {
-			try {
-				setErrorMessage(null);
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const getOptions = (variablesRes: VariableResponseProps | null): void => {
+		try {
+			setErrorMessage(null);
 
-				if (
-					variablesRes?.variableValues &&
-					Array.isArray(variablesRes?.variableValues)
-				) {
-					const newOptionsData = sortValues(
-						variablesRes?.variableValues,
-						variableData.sort,
-					);
+			if (
+				variablesRes?.variableValues &&
+				Array.isArray(variablesRes?.variableValues)
+			) {
+				const newOptionsData = sortValues(
+					variablesRes?.variableValues,
+					variableData.sort,
+				);
 
-					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+				const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
 
-					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-						let valueNotInList = false;
+				if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+					let valueNotInList = false;
 
-						if (isArray(variableData.selectedValue)) {
-							variableData.selectedValue.forEach((val) => {
-								if (!newOptionsData.includes(val)) {
-									valueNotInList = true;
-								}
-							});
-						} else if (
-							isString(variableData.selectedValue) &&
-							!newOptionsData.includes(variableData.selectedValue)
-						) {
-							valueNotInList = true;
-						}
+					if (isArray(variableData.selectedValue)) {
+						variableData.selectedValue.forEach((val) => {
+							if (!newOptionsData.includes(val)) {
+								valueNotInList = true;
+							}
+						});
+					} else if (
+						isString(variableData.selectedValue) &&
+						!newOptionsData.includes(variableData.selectedValue)
+					) {
+						valueNotInList = true;
+					}
 
-						// variablesData.allSelected is added for the case where on change of options we need to update the
-						// local storage
+					// variablesData.allSelected is added for the case where on change of options we need to update the
+					// local storage
+					if (
+						variableData.name &&
+						(validVariableUpdate() || valueNotInList || variableData.allSelected)
+					) {
 						if (
-							variableData.name &&
-							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+							variableData.allSelected &&
+							variableData.multiSelect &&
+							variableData.showALLOption
 						) {
-							if (
-								variableData.allSelected &&
-								variableData.multiSelect &&
-								variableData.showALLOption
-							) {
-								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+							onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
 
-								// Update tempSelection to maintain ALL state when dropdown is open
-								if (tempSelection !== undefined) {
-									setTempSelection(newOptionsData.map((option) => option.toString()));
-								}
-							} else {
-								const value = variableData.selectedValue;
-								let allSelected = false;
+							// Update tempSelection to maintain ALL state when dropdown is open
+							if (tempSelection !== undefined) {
+								setTempSelection(newOptionsData.map((option) => option.toString()));
+							}
+						} else {
+							const value = variableData.selectedValue;
+							let allSelected = false;
 
-								if (variableData.multiSelect) {
-									const { selectedValue } = variableData;
-									allSelected =
-										newOptionsData.length > 0 &&
-										Array.isArray(selectedValue) &&
-										newOptionsData.every((option) => selectedValue.includes(option));
-								}
+							if (variableData.multiSelect) {
+								const { selectedValue } = variableData;
+								allSelected =
+									newOptionsData.length > 0 &&
+									Array.isArray(selectedValue) &&
+									newOptionsData.every((option) => selectedValue.includes(option));
+							}
 
-								if (variableData.name && variableData.id) {
-									onValueUpdate(variableData.name, variableData.id, value, allSelected);
-								}
+							if (variableData.name && variableData.id) {
+								onValueUpdate(variableData.name, variableData.id, value, allSelected);
 							}
 						}
-
-						setOptionsData(newOptionsData);
-						// Apply default if no value is selected (e.g., new variable, first load)
-						applyDefaultIfNeeded(newOptionsData);
-					} else {
-						setVariablesToGetUpdated((prev) =>
-							prev.filter((name) => name !== variableData.name),
-						);
 					}
+
+					setOptionsData(newOptionsData);
+				} else {
+					setVariablesToGetUpdated((prev) =>
+						prev.filter((name) => name !== variableData.name),
+					);
 				}
-			} catch (e) {
-				console.error(e);
 			}
-		},
-		[
-			variableData,
-			optionsData,
-			onValueUpdate,
-			tempSelection,
-			setTempSelection,
-			validVariableUpdate,
-			setVariablesToGetUpdated,
-			applyDefaultIfNeeded,
-		],
-	);
+		} catch (e) {
+			console.error(e);
+		}
+	};
 
 	const { isLoading, refetch } = useQuery(
 		[
@@ -174,6 +162,7 @@ function QueryVariableInput({
 		{
 			enabled:
 				variableData &&
+				variableData.type === 'QUERY' &&
 				checkAPIInvocation(
 					variablesToGetUpdated,
 					variableData,
@@ -218,19 +207,10 @@ function QueryVariableInput({
 		refetch();
 	}, [refetch]);
 
-	const selectOptions = useMemo(
-		() =>
-			optionsData.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[optionsData],
-	);
-
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={selectOptions}
+			options={optionsData}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -3,7 +3,6 @@ import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
 import { Popover, Tooltip, Typography } from 'antd';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { OptionData } from 'components/NewSelect/types';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ALL_SELECT_VALUE } from '../utils';
@@ -13,7 +12,7 @@ const errorIconStyle = { margin: '0 0.5rem' };
 
 interface SelectVariableInputProps {
 	variableId: string;
-	options: OptionData[];
+	options: (string | number | boolean)[];
 	value: string | string[] | undefined;
 	enableSelectAll: boolean;
 	isMultiSelect: boolean;
@@ -24,17 +23,13 @@ interface SelectVariableInputProps {
 	loading?: boolean;
 	errorMessage?: string | null;
 	onRetry?: () => void;
-	isDynamicVariable?: boolean;
-	showRetryButton?: boolean;
-	showIncompleteDataMessage?: boolean;
-	onSearch?: (searchTerm: string) => void;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
 
-export const renderMaxTagPlaceholder = (
+function maxTagPlaceholder(
 	omittedValues: { label?: React.ReactNode; value?: string | number }[],
-): JSX.Element => {
+): JSX.Element {
 	const valuesToShow = omittedValues.slice(0, MAX_TAG_DISPLAY_VALUES);
 	const hasMore = omittedValues.length > MAX_TAG_DISPLAY_VALUES;
 	const tooltipText =
@@ -46,7 +41,7 @@ export const renderMaxTagPlaceholder = (
 			<span>+ {omittedValues.length} </span>
 		</Tooltip>
 	);
-};
+}
 
 function SelectVariableInput({
 	variableId,
@@ -61,11 +56,16 @@ function SelectVariableInput({
 	enableSelectAll,
 	isMultiSelect,
 	defaultValue,
-	isDynamicVariable,
-	showRetryButton,
-	showIncompleteDataMessage,
-	onSearch,
 }: SelectVariableInputProps): JSX.Element {
+	const selectOptions = useMemo(
+		() =>
+			options.map((option) => ({
+				label: option.toString(),
+				value: option.toString(),
+			})),
+		[options],
+	);
+
 	const commonProps = useMemo(
 		() => ({
 			// main props
@@ -82,33 +82,23 @@ function SelectVariableInput({
 			showSearch: true,
 			bordered: false,
 
-			// changing props
+			// dynamic props
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
-			options,
+			options: selectOptions,
 			errorMessage,
 			onRetry,
-
-			// dynamic variable only props
-			isDynamicVariable,
-			showRetryButton,
-			showIncompleteDataMessage,
-			onSearch,
 		}),
 		[
 			variableId,
 			defaultValue,
 			onChange,
 			loading,
-			options,
+			selectOptions,
 			value,
 			errorMessage,
 			onRetry,
-			isDynamicVariable,
-			showRetryButton,
-			showIncompleteDataMessage,
-			onSearch,
 		],
 	);
 
@@ -120,11 +110,11 @@ function SelectVariableInput({
 					placement="bottomLeft"
 					maxTagCount={2}
 					onDropdownVisibleChange={onDropdownVisibleChange}
-					maxTagPlaceholder={renderMaxTagPlaceholder}
+					maxTagPlaceholder={maxTagPlaceholder}
 					onClear={onClear}
 					enableAllSelection={enableSelectAll}
 					maxTagTextLength={30}
-					allowClear={value !== ALL_SELECT_VALUE}
+					allowClear={value !== ALL_SELECT_VALUE && value !== 'ALL'}
 				/>
 			) : (
 				<CustomSelect {...commonProps} />

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx

@@ -5,7 +5,6 @@ import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/da
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
-import DynamicVariableInput from './DynamicVariableInput';
 import QueryVariableInput from './QueryVariableInput';
 import TextboxVariableInput from './TextboxVariableInput';
 
@@ -17,9 +16,8 @@ export interface VariableItemProps {
 	onValueUpdate: (
 		name: string,
 		id: string,
-		value: IDashboardVariable['selectedValue'],
+		arg1: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
 	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
@@ -70,13 +68,6 @@ function VariableItem({
 						dependencyData={dependencyData}
 					/>
 				)}
-				{variableType === 'DYNAMIC' && (
-					<DynamicVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-						existingVariables={existingVariables}
-					/>
-				)}
 			</div>
 		</div>
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DynamicVariableSelection.test.tsx

@@ -5,7 +5,7 @@ import * as ReactRedux from 'react-redux';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import DynamicVariableInput from '../DynamicVariableInput';
+import DynamicVariableSelection from '../DynamicVariableSelection';
 
 // Don't mock the components - use real ones
 
@@ -54,7 +54,7 @@ const mockApiResponse = {
 // Mock scrollIntoView since it's not available in JSDOM
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
-describe('DynamicVariableInput Component', () => {
+describe('DynamicVariableSelection Component', () => {
 	const mockOnValueUpdate = jest.fn();
 
 	const mockDynamicVariableData: IDashboardVariable = {
@@ -108,13 +108,18 @@ describe('DynamicVariableInput Component', () => {
 
 	it('renders with single select variable correctly', () => {
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
+		// Verify component renders correctly
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// Verify the selected value is displayed
 		const selectedItem = screen.getByRole('combobox');
 		expect(selectedItem).toBeInTheDocument();
@@ -131,13 +136,18 @@ describe('DynamicVariableInput Component', () => {
 		};
 
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={multiSelectWithAllSelected}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
+		// Verify variable name is rendered
+		expect(
+			screen.getByText(`$${multiSelectWithAllSelected.name}`),
+		).toBeInTheDocument();
+
 		// In ALL selected mode, there should be an "ALL" text element
 		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
@@ -154,13 +164,18 @@ describe('DynamicVariableInput Component', () => {
 		});
 
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
+		// Verify component renders in loading state
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// Open dropdown to see loading text
 		const selectElement = screen.getByRole('combobox');
 		fireEvent.mouseDown(selectElement);
@@ -184,13 +199,18 @@ describe('DynamicVariableInput Component', () => {
 		});
 
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
+		// Verify the component renders
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// For error states, we should check that error handling is in place
 		// Without opening the dropdown as the error message might be handled differently
 		expect(ReactQuery.useQuery).toHaveBeenCalled();
@@ -199,7 +219,7 @@ describe('DynamicVariableInput Component', () => {
 
 	it('makes API call to fetch variable values', () => {
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
@@ -215,8 +235,6 @@ describe('DynamicVariableInput Component', () => {
 				'2023-01-01T00:00:00Z', // minTime from useSelector mock
 				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
 				'',
-				'Traces',
-				'service.name',
 			],
 			expect.objectContaining({
 				enabled: true, // Type is 'DYNAMIC'
@@ -237,13 +255,16 @@ describe('DynamicVariableInput Component', () => {
 		};
 
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={customVariable}
 				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);
 
+		// Verify the component correctly displays the selected value
+		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
+
 		// Find the selection item in the component using data-testid
 		const selectElement = screen.getByTestId('variable-select');
 		expect(selectElement).toBeInTheDocument();

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -63,10 +63,10 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(await screen.findByText('option1')).toBeInTheDocument();
+			expect(screen.getByText('option1')).toBeInTheDocument();
 		});
 
-		test('should auto-select first option when no previous and no default', async () => {
+		test('should show placeholder when no previous and no default', async () => {
 			const variable: IDashboardVariable = {
 				id: TEST_VARIABLE_ID,
 				name: TEST_VARIABLE_NAME,
@@ -85,8 +85,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			// With the new variable select strategy, the first option is auto-selected
-			expect(await screen.findByText('option1')).toBeInTheDocument();
+			expect(screen.getByText('Select value')).toBeInTheDocument();
 		});
 	});
 
@@ -111,7 +110,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(await screen.findByText('ALL')).toBeInTheDocument();
+			expect(screen.getByText('ALL')).toBeInTheDocument();
 		});
 	});
 
@@ -135,7 +134,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});
 
-			expect(await screen.findByText('Select value')).toBeInTheDocument();
+			expect(screen.getByText('Select value')).toBeInTheDocument();
 		});
 	});
 });

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts

@@ -1,14 +1,8 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash-es';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import { ALL_SELECT_VALUE } from '../utils';
 import { areArraysEqual, getSelectValue } from './util';
-import { VariableSelectStrategy } from './variableSelectStrategy/variableSelectStrategyTypes';
-import {
-	areArraysEqualIgnoreOrder,
-	uniqueValues,
-} from './variableSelectStrategy/variableSelectStrategyUtils';
 
 interface UseDashboardVariableSelectHelperParams {
 	variableData: IDashboardVariable;
@@ -18,11 +12,7 @@ interface UseDashboardVariableSelectHelperParams {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
 	) => void;
-	strategy: VariableSelectStrategy;
-	/** Override for all available option strings (default: optionsData.map(String)) */
-	allAvailableOptionStrings?: string[];
 }
 
 interface UseDashboardVariableSelectHelperReturn {
@@ -41,11 +31,6 @@ interface UseDashboardVariableSelectHelperReturn {
 	onChange: (value: string | string[]) => void;
 	onDropdownVisibleChange: (visible: boolean) => void;
 	handleClear: () => void;
-
-	// Default value helpers
-	applyDefaultIfNeeded: (
-		overrideOptions?: (string | number | boolean)[],
-	) => void;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -53,8 +38,6 @@ export function useDashboardVariableSelectHelper({
 	variableData,
 	optionsData,
 	onValueUpdate,
-	strategy,
-	allAvailableOptionStrings,
 }: UseDashboardVariableSelectHelperParams): UseDashboardVariableSelectHelperReturn {
 	const { selectedValue } = variableData;
 
@@ -69,37 +52,11 @@ export function useDashboardVariableSelectHelper({
 
 	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
 
-	const effectiveAllAvailableOptionStrings = useMemo(
-		() => allAvailableOptionStrings ?? optionsData.map((v) => v.toString()),
-		[allAvailableOptionStrings, optionsData],
-	);
-
 	const selectValue =
 		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
+			? 'ALL'
 			: selectedValueStringified;
 
-	const getDefaultValue = useCallback(
-		(overrideOptions?: (string | number | boolean)[]) => {
-			const options = overrideOptions || optionsData;
-			if (variableData.multiSelect) {
-				if (variableData.showALLOption) {
-					return variableData.defaultValue || options.map((o) => o.toString());
-				}
-				return variableData.defaultValue || options?.[0]?.toString();
-			}
-			return variableData.defaultValue || options[0]?.toString();
-		},
-		[
-			variableData.multiSelect,
-			variableData.showALLOption,
-			variableData.defaultValue,
-			optionsData,
-		],
-	);
-
-	const defaultValue = useMemo(() => getDefaultValue(), [getDefaultValue]);
-
 	const handleChange = useCallback(
 		(inputValue: string | string[]): void => {
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
@@ -112,21 +69,29 @@ export function useDashboardVariableSelectHelper({
 			) {
 				return;
 			}
+			if (variableData.name) {
+				// Check if ALL is effectively selected by comparing with available options
+				const isAllSelected =
+					Array.isArray(value) &&
+					value.length > 0 &&
+					optionsData.every((option) => value.includes(option.toString()));
 
-			strategy.handleChange({
-				value,
-				variableData,
-				optionsData,
-				allAvailableOptionStrings: effectiveAllAvailableOptionStrings,
-				onValueUpdate,
-			});
+				if (isAllSelected && variableData.showALLOption) {
+					// For ALL selection, pass optionsData as the value and set allSelected to true
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(variableData.name, variableData.id, value, false);
+				}
+			}
 		},
 		[
-			variableData,
-			optionsData,
-			effectiveAllAvailableOptionStrings,
+			variableData.multiSelect,
+			variableData.selectedValue,
+			variableData.name,
+			variableData.id,
+			variableData.showALLOption,
 			onValueUpdate,
-			strategy,
+			optionsData,
 		],
 	);
 
@@ -134,96 +99,79 @@ export function useDashboardVariableSelectHelper({
 		(inputValue: string | string[]): void => {
 			// Store the selection in temporary state while dropdown is open
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			setTempSelection(uniqueValues(value));
+			setTempSelection(value);
 		},
 		[variableData.multiSelect],
 	);
 
-	// Single select onChange: apply default if value is empty
-	const handleSingleSelectChange = useCallback(
-		(inputValue: string | string[]): void => {
-			if (isEmpty(inputValue)) {
-				if (defaultValue !== undefined) {
-					handleChange(defaultValue as string | string[]);
+	// Apply default value on first render if no selection exists
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
 				}
-				return;
 			}
-			handleChange(inputValue);
-		},
-		[handleChange, defaultValue],
-	);
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		selectedValue,
+		tempSelection,
+		optionsData,
+	]);
+
+	// Apply default values when needed
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
 
 	// Handle dropdown visibility changes
 	const onDropdownVisibleChange = useCallback(
 		(visible: boolean): void => {
 			// Initialize temp selection when opening dropdown
 			if (visible) {
-				if (variableData.allSelected && enableSelectAll) {
-					// When ALL is selected, show all available options as individually checked
-					setTempSelection([...effectiveAllAvailableOptionStrings]);
-				} else {
-					setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-				}
+				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
 			}
 			// Apply changes when closing dropdown
 			else if (!visible && tempSelection !== undefined) {
-				// If ALL was selected before AND all options remain selected, skip updating
-				const wasAllSelected = enableSelectAll && variableData.allSelected;
-				const isAllSelectedAfter =
-					enableSelectAll &&
-					Array.isArray(tempSelection) &&
-					tempSelection.length === effectiveAllAvailableOptionStrings.length &&
-					effectiveAllAvailableOptionStrings.every((v) => tempSelection.includes(v));
-
-				if (wasAllSelected && isAllSelectedAfter) {
-					setTempSelection(undefined);
-					return;
-				}
-
-				// Apply default if closing with empty selection
-				let valueToApply = tempSelection;
-				if (isEmpty(tempSelection) && defaultValue !== undefined) {
-					valueToApply = defaultValue as string | string[];
-				}
-
-				// Order-agnostic change detection
-				const currentValue = variableData.selectedValue;
-				const hasChanged =
-					valueToApply !== currentValue &&
-					!(
-						Array.isArray(valueToApply) &&
-						Array.isArray(currentValue) &&
-						areArraysEqualIgnoreOrder(valueToApply, currentValue)
-					);
-
-				if (hasChanged) {
-					handleChange(valueToApply);
-				}
+				// Call handleChange with the temporarily stored selection
+				handleChange(tempSelection);
 				setTempSelection(undefined);
 			}
 		},
-		[
-			variableData,
-			enableSelectAll,
-			effectiveAllAvailableOptionStrings,
-			tempSelection,
-			handleChange,
-			defaultValue,
-		],
-	);
-
-	// Explicit function for callers to apply default on mount / data load
-	// Pass overrideOptions when freshly-loaded options aren't in state yet (async callers)
-	const applyDefaultIfNeeded = useCallback(
-		(overrideOptions?: (string | number | boolean)[]): void => {
-			if (isEmpty(selectValue)) {
-				const defaultValueFromOptions = getDefaultValue(overrideOptions);
-				if (defaultValueFromOptions !== undefined) {
-					handleChange(defaultValueFromOptions as string | string[]);
-				}
-			}
-		},
-		[selectValue, handleChange, getDefaultValue],
+		[variableData, tempSelection, handleChange],
 	);
 
 	const handleClear = useCallback((): void => {
@@ -234,9 +182,11 @@ export function useDashboardVariableSelectHelper({
 		? tempSelection || selectValue
 		: selectValue;
 
+	const defaultValue = variableData.defaultValue || selectValue;
+
 	const onChange = useMemo(() => {
-		return variableData.multiSelect ? handleTempChange : handleSingleSelectChange;
-	}, [variableData.multiSelect, handleTempChange, handleSingleSelectChange]);
+		return variableData.multiSelect ? handleTempChange : handleChange;
+	}, [variableData.multiSelect, handleTempChange, handleChange]);
 
 	return {
 		tempSelection,
@@ -247,6 +197,5 @@ export function useDashboardVariableSelectHelper({
 		value,
 		defaultValue,
 		onChange,
-		applyDefaultIfNeeded,
 	};
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -363,6 +363,25 @@ export const uniqueOptions = (options: OptionData[]): OptionData[] => {
 	return uniqueOptions;
 };
 
+export const uniqueValues = (values: string[] | string): string[] | string => {
+	if (Array.isArray(values)) {
+		const uniqueValues: string[] = [];
+		const seenValues = new Set<string>();
+
+		values.forEach((value) => {
+			if (seenValues.has(value)) {
+				return;
+			}
+			seenValues.add(value);
+			uniqueValues.push(value);
+		});
+
+		return uniqueValues;
+	}
+
+	return values;
+};
+
 export const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx

@@ -1,4 +0,0 @@
-import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const customVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx

@@ -1,20 +0,0 @@
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const defaultVariableSelectStrategy: VariableSelectStrategy = {
-	handleChange({ value, variableData, optionsData, onValueUpdate }) {
-		if (!variableData.name) {
-			return;
-		}
-
-		const isAllSelected =
-			Array.isArray(value) &&
-			value.length > 0 &&
-			optionsData.every((option) => value.includes(option.toString()));
-
-		if (isAllSelected && variableData.showALLOption) {
-			onValueUpdate(variableData.name, variableData.id, optionsData, true);
-		} else {
-			onValueUpdate(variableData.name, variableData.id, value, false);
-		}
-	},
-};

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx

@@ -1,37 +0,0 @@
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const dynamicVariableSelectStrategy: VariableSelectStrategy = {
-	handleChange({
-		value,
-		variableData,
-		allAvailableOptionStrings,
-		onValueUpdate,
-	}) {
-		if (!variableData.name) {
-			return;
-		}
-
-		if (
-			value === ALL_SELECT_VALUE ||
-			(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-		) {
-			onValueUpdate(variableData.name, variableData.id, null, true);
-		} else {
-			// For ALL selection in dynamic variables, pass null to avoid storing values
-			// The parent component will handle this appropriately
-			const haveCustomValuesSelected =
-				Array.isArray(value) &&
-				!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
-
-			onValueUpdate(
-				variableData.name,
-				variableData.id,
-				value,
-				allAvailableOptionStrings.every((v) => value.includes(v.toString())),
-				haveCustomValuesSelected,
-			);
-		}
-	},
-};

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx

@@ -1,4 +0,0 @@
-import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const queryVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -1,17 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-export interface VariableSelectStrategy {
-	handleChange(params: {
-		value: string | string[];
-		variableData: IDashboardVariable;
-		optionsData: (string | number | boolean)[];
-		allAvailableOptionStrings: string[];
-		onValueUpdate: (
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-		) => void;
-	}): void;
-}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts

@@ -1,32 +0,0 @@
-import { isEqual } from 'lodash-es';
-
-export const areArraysEqualIgnoreOrder = (
-	a: (string | number | boolean)[],
-	b: (string | number | boolean)[],
-): boolean => {
-	if (a.length !== b.length) {
-		return false;
-	}
-	const sortedA = [...a].sort();
-	const sortedB = [...b].sort();
-	return isEqual(sortedA, sortedB);
-};
-
-export const uniqueValues = (values: string[] | string): string[] | string => {
-	if (Array.isArray(values)) {
-		const uniqueValues: string[] = [];
-		const seenValues = new Set<string>();
-
-		values.forEach((value) => {
-			if (seenValues.has(value)) {
-				return;
-			}
-			seenValues.add(value);
-			uniqueValues.push(value);
-		});
-
-		return uniqueValues;
-	}
-
-	return values;
-};

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import * as ReactRedux from 'react-redux';
 import {
 	act,
@@ -15,22 +15,13 @@ import {
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
+import DynamicVariableSelection from '../DashboardVariablesSelection/DynamicVariableSelection';
 
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
 }));
 
-// Mock useQuery from react-query
-jest.mock('react-query', () => {
-	const originalModule = jest.requireActual('react-query');
-	return {
-		...originalModule,
-		useQuery: jest.fn(),
-	};
-});
-
 describe('Dynamic Variable Default Behavior', () => {
 	const mockOnValueUpdate = jest.fn();
 	const mockApiResponse = {
@@ -68,46 +59,6 @@ describe('Dynamic Variable Default Behavior', () => {
 		// Mock getFieldValues API to return our test data
 		(getFieldValues as jest.Mock).mockResolvedValue(mockApiResponse);
 
-		// Mock useQuery implementation to avoid infinite re-renders
-		// and ensure onSuccess is called once
-		(useQuery as jest.Mock).mockImplementation((key, options) => {
-			const { onSuccess, enabled, queryFn } = options || {};
-			const variableName = key[1];
-			const dynamicVarsKey = key[2];
-
-			React.useEffect(() => {
-				if (enabled !== false) {
-					if (onSuccess) {
-						// For 'services' tests:
-						// 1. "Default to ALL" expectations imply empty options -> [] behavior. This happens when selectedValue is undefined (dynamicVarsKey has 'null').
-						// 2. "ALL Option Special Value" needs full options to render the "ALL" item in dropdown. This happens when selectedValue is defined.
-						if (
-							variableName === 'services' &&
-							typeof dynamicVarsKey === 'string' &&
-							dynamicVarsKey.includes('null')
-						) {
-							onSuccess({
-								...mockApiResponse,
-								data: { ...mockApiResponse.data, normalizedValues: [] },
-							});
-						} else {
-							onSuccess(mockApiResponse);
-						}
-					}
-					if (queryFn) {
-						queryFn();
-					}
-				}
-			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
-
-			return {
-				isLoading: false,
-				isError: false,
-				data: mockApiResponse,
-				refetch: jest.fn(),
-			};
-		});
-
 		jest.spyOn(ReactRedux, 'useSelector').mockReturnValue({
 			minTime: '2023-01-01T00:00:00Z',
 			maxTime: '2023-01-02T00:00:00Z',
@@ -133,7 +84,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -169,7 +120,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -213,7 +164,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -221,6 +172,9 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});
 
+			// Component should render without errors
+			expect(screen.getByText('$service')).toBeInTheDocument();
+
 			// Check if the dropdown is present
 			const selectElement = screen.getByRole('combobox');
 			expect(selectElement).toBeInTheDocument();
@@ -278,7 +232,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -313,7 +267,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -339,7 +293,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(screen.queryByText('backend')).not.toBeInTheDocument();
 		});
 
-		it('sahould default to ALL when no default and no previous selection', async () => {
+		it('should default to ALL when no default and no previous selection', async () => {
 			const variableData: IDashboardVariable = {
 				id: 'var21',
 				name: 'services',
@@ -357,7 +311,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -391,7 +345,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(mockOnValueUpdate).toHaveBeenCalledWith(
 				'services',
 				'var21',
-				[],
+				[], // Empty array when allSelected is true
 				true, // allSelected = true
 				false,
 			);
@@ -417,7 +371,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -454,7 +408,7 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -462,6 +416,9 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});
 
+			// Component should render without errors
+			expect(screen.getByText('$services')).toBeInTheDocument();
+
 			// Check if ALL is displayed in the UI (in the main selection area)
 			const allTextElement = screen.getByText('ALL');
 			expect(allTextElement).toBeInTheDocument();

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.userflow.test.tsx

@@ -3,6 +3,7 @@ import { MemoryRouter, Route } from 'react-router-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ROUTES from 'constants/routes';
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
 import { AppProvider } from 'providers/App/App';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import { Span } from 'types/api/trace/getTraceV2';
@@ -108,7 +109,7 @@ const createMockSpan = (): Span => ({
 	statusMessage: '',
 	tagMap: {
 		'http.method': 'GET',
-		'http.url': '/api/users?page=1',
+		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/users?page=1',
 		'http.status_code': '200',
 		'service.name': 'frontend-service',
 		'span.kind': 'server',

frontend/src/container/SpanDetailsDrawer/__tests__/SpanDetailsDrawer.test.tsx

@@ -5,6 +5,7 @@ import getSpanPercentiles from 'api/trace/getSpanPercentiles';
 import getUserPreference from 'api/v1/user/preferences/name/get';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { server } from 'mocks-server/server';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
@@ -878,7 +879,9 @@ describe('SpanDetailsDrawer', () => {
 
 			// Verify only matching attributes are shown (use getAllByText for all since they appear in multiple places)
 			expect(screen.getAllByText('http.method').length).toBeGreaterThan(0);
-			expect(screen.getAllByText('http.url').length).toBeGreaterThan(0);
+			expect(screen.getAllByText(SPAN_ATTRIBUTES.HTTP_URL).length).toBeGreaterThan(
+				0,
+			);
 			expect(screen.getAllByText('http.status_code').length).toBeGreaterThan(0);
 		});
 
@@ -1126,7 +1129,7 @@ describe('SpanDetailsDrawer - Search Visibility User Flows', () => {
 
 		// User sees all attributes initially
 		expect(screen.getByText('http.method')).toBeInTheDocument();
-		expect(screen.getByText('http.url')).toBeInTheDocument();
+		expect(screen.getByText(SPAN_ATTRIBUTES.HTTP_URL)).toBeInTheDocument();
 		expect(screen.getByText('http.status_code')).toBeInTheDocument();
 
 		// User types "method" in search
@@ -1136,7 +1139,7 @@ describe('SpanDetailsDrawer - Search Visibility User Flows', () => {
 		// User sees only matching attributes
 		await waitFor(() => {
 			expect(screen.getByText('http.method')).toBeInTheDocument();
-			expect(screen.queryByText('http.url')).not.toBeInTheDocument();
+			expect(screen.queryByText(SPAN_ATTRIBUTES.HTTP_URL)).not.toBeInTheDocument();
 			expect(screen.queryByText('http.status_code')).not.toBeInTheDocument();
 		});
 	});

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -1,3 +1,4 @@
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
 import { ILog } from 'types/api/logs/log';
 import { Span } from 'types/api/trace/getTraceV2';
 
@@ -22,7 +23,7 @@ export const mockSpan: Span = {
 	event: [],
 	tagMap: {
 		'http.method': 'GET',
-		'http.url': '/api/test',
+		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/test',
 		'http.status_code': '200',
 	},
 	hasError: false,

frontend/src/lib/uPlotV2/components/__tests__/UPlotChart.test.tsx

@@ -1,412 +0,0 @@
-import type { ReactNode } from 'react';
-import { render, screen } from '@testing-library/react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { AlignedData } from 'uplot';
-
-import { PlotContextProvider } from '../../context/PlotContext';
-import UPlotChart from '../UPlotChart';
-
-// ---------------------------------------------------------------------------
-// Mocks
-// ---------------------------------------------------------------------------
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-		updateSeriesVisibilityToLocalStorage: jest.fn(),
-	}),
-);
-
-jest.mock('@sentry/react', () => ({
-	ErrorBoundary: ({ children }: { children: ReactNode }): JSX.Element => (
-		<>{children}</>
-	),
-}));
-
-jest.mock('pages/ErrorBoundaryFallback/ErrorBoundaryFallback', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div>Error Fallback</div>,
-}));
-
-interface MockUPlotInstance {
-	root: HTMLDivElement;
-	setData: jest.Mock;
-	setSize: jest.Mock;
-	destroy: jest.Mock;
-}
-
-let instances: MockUPlotInstance[] = [];
-const mockUPlotConstructor = jest.fn();
-
-jest.mock('uplot', () => {
-	function MockUPlot(
-		opts: Record<string, unknown>,
-		data: unknown,
-		target: HTMLElement,
-	): MockUPlotInstance {
-		mockUPlotConstructor(opts, data, target);
-
-		const rootEl = document.createElement('div');
-		target.appendChild(rootEl);
-
-		const inst: MockUPlotInstance = {
-			root: rootEl,
-			setData: jest.fn(),
-			setSize: jest.fn(),
-			destroy: jest.fn(),
-		};
-		instances.push(inst);
-		return inst;
-	}
-
-	MockUPlot.paths = {
-		spline: jest.fn(() => jest.fn()),
-		bars: jest.fn(() => jest.fn()),
-		linear: jest.fn(() => jest.fn()),
-		stepped: jest.fn(() => jest.fn()),
-	};
-	MockUPlot.tzDate = jest.fn();
-
-	return { __esModule: true, default: MockUPlot };
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const createMockConfig = (): UPlotConfigBuilder => {
-	return ({
-		getConfig: jest.fn().mockReturnValue({
-			series: [{ value: (): string => '' }],
-			axes: [],
-			scales: {},
-			hooks: {},
-			cursor: {},
-		}),
-		getWidgetId: jest.fn().mockReturnValue(undefined),
-		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
-	} as unknown) as UPlotConfigBuilder;
-};
-
-const validData: AlignedData = [
-	[1, 2, 3],
-	[10, 20, 30],
-];
-const emptyData: AlignedData = [[]];
-
-const Wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
-	<PlotContextProvider>{children}</PlotContextProvider>
-);
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('UPlotChart', () => {
-	beforeEach(() => {
-		instances = [];
-		mockUPlotConstructor.mockClear();
-	});
-
-	describe('when data is empty', () => {
-		it('displays "No Data" message instead of the chart container', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(screen.getByText('No Data')).toBeInTheDocument();
-			expect(screen.queryByTestId('uplot-main-div')).not.toBeInTheDocument();
-		});
-
-		it('sizes the empty-state container to the given width and height', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={750}
-					height={350}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const noDataContainer = screen
-				.getByText('No Data')
-				.closest('.uplot-no-data');
-			expect(noDataContainer).toHaveStyle({ width: '750px', height: '350px' });
-		});
-
-		it('does not create a uPlot instance', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('chart container', () => {
-		it('renders children inside the chart wrapper', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-				>
-					<div data-testid="tooltip-plugin">Tooltip</div>
-				</UPlotChart>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(screen.getByTestId('tooltip-plugin')).toBeInTheDocument();
-		});
-	});
-
-	describe('plot creation', () => {
-		it('instantiates uPlot with floored dimensions and the container element', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600.9}
-					height={400.2}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-
-			const [opts, data, target] = mockUPlotConstructor.mock.calls[0];
-			expect(opts.width).toBe(600);
-			expect(opts.height).toBe(400);
-			expect(data).toBe(validData);
-			expect(target).toBe(screen.getByTestId('uplot-main-div'));
-		});
-
-		it('merges config builder output into the uPlot options', () => {
-			const config = createMockConfig();
-			config.getConfig = jest.fn().mockReturnValue({
-				series: [{ value: (): string => '' }],
-				axes: [{ scale: 'y' }],
-				scales: { y: {} },
-				hooks: {},
-				cursor: { show: true },
-			});
-
-			render(
-				<UPlotChart
-					config={(config as unknown) as UPlotConfigBuilder}
-					data={validData}
-					width={500}
-					height={300}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const [opts] = mockUPlotConstructor.mock.calls[0];
-			expect(opts.width).toBe(500);
-			expect(opts.height).toBe(300);
-			expect(opts.axes).toEqual([{ scale: 'y' }]);
-			expect(opts.cursor).toEqual({ show: true });
-		});
-
-		it('skips creation when width or height is 0', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={0}
-					height={0}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('lifecycle callbacks', () => {
-		it('invokes plotRef with the uPlot instance after creation', () => {
-			const plotRef = jest.fn();
-
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(plotRef).toHaveBeenCalledTimes(1);
-			expect(plotRef).toHaveBeenCalledWith(instances[0]);
-		});
-
-		it('destroys the instance and notifies callbacks when data becomes empty', () => {
-			const plotRef = jest.fn();
-			const onDestroy = jest.fn();
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart
-					config={config}
-					data={validData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-					onDestroy={onDestroy}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const firstInstance = instances[0];
-			plotRef.mockClear();
-
-			rerender(
-				<UPlotChart
-					config={config}
-					data={emptyData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-					onDestroy={onDestroy}
-				/>,
-			);
-
-			expect(onDestroy).toHaveBeenCalledWith(firstInstance);
-			expect(firstInstance.destroy).toHaveBeenCalled();
-			expect(plotRef).toHaveBeenCalledWith(null);
-			expect(screen.getByText('No Data')).toBeInTheDocument();
-		});
-
-		it('destroys the previous instance before creating a new one on config change', () => {
-			const onDestroy = jest.fn();
-			const config1 = createMockConfig();
-			const config2 = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart
-					config={config1}
-					data={validData}
-					width={600}
-					height={400}
-					onDestroy={onDestroy}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const firstInstance = instances[0];
-
-			rerender(
-				<UPlotChart
-					config={config2}
-					data={validData}
-					width={600}
-					height={400}
-					onDestroy={onDestroy}
-				/>,
-			);
-
-			expect(onDestroy).toHaveBeenCalledWith(firstInstance);
-			expect(firstInstance.destroy).toHaveBeenCalled();
-			expect(instances).toHaveLength(2);
-		});
-	});
-
-	describe('prop updates', () => {
-		it('calls setData without recreating the plot when only data changes', () => {
-			const config = createMockConfig();
-			const newData: AlignedData = [
-				[4, 5, 6],
-				[40, 50, 60],
-			];
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const inst = instances[0];
-
-			rerender(
-				<UPlotChart config={config} data={newData} width={600} height={400} />,
-			);
-
-			expect(inst.setData).toHaveBeenCalledWith(newData);
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls setSize with floored values when only dimensions change', () => {
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const instance = instances[0];
-
-			rerender(
-				<UPlotChart
-					config={config}
-					data={validData}
-					width={800.7}
-					height={500.3}
-				/>,
-			);
-
-			expect(instance.setSize).toHaveBeenCalledWith({ width: 800, height: 500 });
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-		});
-
-		it('recreates the plot when config changes', () => {
-			const config1 = createMockConfig();
-			const config2 = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config1} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			rerender(
-				<UPlotChart config={config2} data={validData} width={600} height={400} />,
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(2);
-		});
-
-		it('does nothing when all props remain the same', () => {
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const instance = instances[0];
-
-			rerender(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-			expect(instance.setData).not.toHaveBeenCalled();
-			expect(instance.setSize).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -1,477 +0,0 @@
-import React from 'react';
-import { act, screen, waitFor } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
-import { DashboardCursorSync } from '../TooltipPlugin/types';
-
-// ---------------------------------------------------------------------------
-// Mock helpers
-// ---------------------------------------------------------------------------
-
-type HookHandler = (...args: any[]) => void;
-
-interface ConfigMock {
-	scales: Array<{ props: { time?: boolean } }>;
-	setCursor: jest.Mock;
-	addHook: jest.Mock<() => void, [string, HookHandler]> & {
-		removeCallbacks: jest.Mock[];
-	};
-}
-
-function createConfigMock(
-	overrides: Partial<ConfigMock> = {},
-): ConfigMock & { removeCallbacks: jest.Mock[] } {
-	const removeCallbacks: jest.Mock[] = [];
-
-	const addHook = Object.assign(
-		jest.fn((_: string, _handler: HookHandler) => {
-			const remove = jest.fn();
-			removeCallbacks.push(remove);
-			return remove;
-		}),
-		{ removeCallbacks },
-	) as ConfigMock['addHook'];
-
-	return {
-		scales: [{ props: { time: false } }],
-		setCursor: jest.fn(),
-		addHook,
-		...overrides,
-		removeCallbacks,
-	};
-}
-
-function getHandler(config: ConfigMock, hookName: string): HookHandler {
-	const call = config.addHook.mock.calls.find(([name]) => name === hookName);
-	if (!call) {
-		throw new Error(`Hook "${hookName}" was not registered on config`);
-	}
-	return call[1];
-}
-
-function createFakePlot(): {
-	over: HTMLDivElement;
-	setCursor: jest.Mock;
-	cursor: { event: Record<string, unknown> };
-} {
-	return {
-		over: document.createElement('div'),
-		setCursor: jest.fn(),
-		cursor: { event: {} },
-	};
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('TooltipPlugin', () => {
-	beforeEach(() => {
-		jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
-			(callback as FrameRequestCallback)(0);
-			return 0;
-		});
-		jest
-			.spyOn(window, 'cancelAnimationFrame')
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	/**
-	 * Shorthand: render the plugin, initialise a fake plot, and trigger a
-	 * series focus so the tooltip becomes visible. Returns the fake plot
-	 * instance for further interaction (e.g. clicking the overlay).
-	 */
-	function renderAndActivateHover(
-		config: ConfigMock,
-		renderFn: (...args: any[]) => React.ReactNode = (): React.ReactNode =>
-			React.createElement('div', null, 'tooltip-body'),
-		extraProps: Record<string, unknown> = {},
-	): ReturnType<typeof createFakePlot> {
-		render(
-			React.createElement(TooltipPlugin, {
-				config: config as any,
-				render: renderFn,
-				syncMode: DashboardCursorSync.None,
-				...extraProps,
-			}),
-		);
-
-		const fakePlot = createFakePlot();
-		const initHandler = getHandler(config, 'init');
-		const setSeriesHandler = getHandler(config, 'setSeries');
-
-		act(() => {
-			initHandler(fakePlot);
-			setSeriesHandler(fakePlot, 1, { focus: true });
-		});
-
-		return fakePlot;
-	}
-
-	// ---- Initial state --------------------------------------------------------
-
-	describe('before any interaction', () => {
-		it('does not render anything when there is no active hover', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-		});
-
-		it('registers all required uPlot hooks on mount', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			const registered = config.addHook.mock.calls.map(([name]) => name);
-			expect(registered).toContain('ready');
-			expect(registered).toContain('init');
-			expect(registered).toContain('setData');
-			expect(registered).toContain('setSeries');
-			expect(registered).toContain('setLegend');
-			expect(registered).toContain('setCursor');
-		});
-	});
-
-	// ---- Tooltip rendering ------------------------------------------------------
-
-	describe('tooltip rendering', () => {
-		it('renders contents into a portal on document.body when hover is active', () => {
-			const config = createConfigMock();
-			const renderTooltip = jest.fn(() =>
-				React.createElement('div', null, 'tooltip-body'),
-			);
-
-			renderAndActivateHover(config, renderTooltip);
-
-			expect(renderTooltip).toHaveBeenCalled();
-			expect(screen.getByText('tooltip-body')).toBeInTheDocument();
-
-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
-			expect(container).not.toBeNull();
-			expect(container.parentElement).toBe(document.body);
-		});
-	});
-
-	// ---- Pin behaviour ----------------------------------------------------------
-
-	describe('pin behaviour', () => {
-		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
-			const config = createConfigMock();
-
-			const fakePlot = renderAndActivateHover(config, undefined, {
-				canPinTooltip: true,
-			});
-
-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
-			expect(container.classList.contains('pinned')).toBe(false);
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-			});
-
-			return waitFor(() => {
-				const updated = document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement | null;
-				expect(updated).not.toBeNull();
-				expect(updated?.classList.contains('pinned')).toBe(true);
-			});
-		});
-
-		it('dismisses a pinned tooltip via the dismiss callback', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: (args: any) =>
-						React.createElement(
-							'button',
-							{ type: 'button', onClick: args.dismiss },
-							'Dismiss',
-						),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			// Pin the tooltip.
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			const button = await screen.findByRole('button', { name: 'Dismiss' });
-
-			act(() => {
-				button.click();
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('drops a pinned tooltip when the underlying data changes', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			// Pin.
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				(document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement)?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Simulate data update – should dismiss the pinned tooltip.
-			act(() => {
-				getHandler(config, 'setData')(fakePlot);
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('unpins the tooltip on outside mousedown', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'pinned content'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Click outside the tooltip container.
-			act(() => {
-				document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('unpins the tooltip on outside keydown', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'pinned content'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Press a key outside the tooltip.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-				);
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-	});
-
-	// ---- Cursor sync ------------------------------------------------------------
-
-	describe('cursor sync', () => {
-		it('enables uPlot cursor sync for time-based scales when mode is Tooltip', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: true } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.Tooltip,
-					syncKey: 'dashboard-sync',
-				}),
-			);
-
-			expect(config.setCursor).toHaveBeenCalledWith({
-				sync: { key: 'dashboard-sync', scales: ['x', null] },
-			});
-		});
-
-		it('does not enable cursor sync when mode is None', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: true } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			expect(config.setCursor).not.toHaveBeenCalled();
-		});
-
-		it('does not enable cursor sync when scale is not time-based', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: false } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.Tooltip,
-				}),
-			);
-
-			expect(config.setCursor).not.toHaveBeenCalled();
-		});
-	});
-
-	// ---- Cleanup ----------------------------------------------------------------
-
-	describe('cleanup on unmount', () => {
-		it('removes window event listeners and all uPlot hooks', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(window, 'addEventListener');
-			const removeSpy = jest.spyOn(window, 'removeEventListener');
-
-			const { unmount } = render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
-			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
-
-			expect(resizeCall).toBeDefined();
-			expect(scrollCall).toBeDefined();
-
-			const resizeListener = resizeCall?.[1] as EventListener;
-			const scrollListener = scrollCall?.[1] as EventListener;
-			const scrollOptions = scrollCall?.[2];
-
-			unmount();
-
-			config.removeCallbacks.forEach((removeFn) => {
-				expect(removeFn).toHaveBeenCalledTimes(1);
-			});
-
-			expect(removeSpy).toHaveBeenCalledWith('resize', resizeListener);
-			expect(removeSpy).toHaveBeenCalledWith(
-				'scroll',
-				scrollListener,
-				scrollOptions,
-			);
-		});
-	});
-});

frontend/src/mocks-server/__mockdata__/tracedetail.ts

@@ -1,3 +1,5 @@
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
+
 /* eslint-disable sonarjs/no-duplicate-string */
 export const traceDetailResponse = [
 	{
@@ -35,7 +37,7 @@ export const traceDetailResponse = [
 					'component',
 					'host.name',
 					'http.method',
-					'http.url',
+					SPAN_ATTRIBUTES.HTTP_URL,
 					'ip',
 					'http.status_code',
 					'opencensus.exporterversion',
@@ -84,7 +86,7 @@ export const traceDetailResponse = [
 					'signoz.collector.id',
 					'component',
 					'http.method',
-					'http.url',
+					SPAN_ATTRIBUTES.HTTP_URL,
 					'ip',
 				],
 				[
@@ -741,7 +743,7 @@ export const traceDetailResponse = [
 					'component',
 					'http.method',
 					'http.status_code',
-					'http.url',
+					SPAN_ATTRIBUTES.HTTP_URL,
 					'net/http.reused',
 					'net/http.was_idle',
 					'service.name',
@@ -833,7 +835,7 @@ export const traceDetailResponse = [
 					'opencensus.exporterversion',
 					'signoz.collector.id',
 					'host.name',
-					'http.url',
+					SPAN_ATTRIBUTES.HTTP_URL,
 					'net/http.reused',
 					'net/http.was_idle',
 				],
@@ -916,7 +918,7 @@ export const traceDetailResponse = [
 					'net/http.was_idle',
 					'component',
 					'host.name',
-					'http.url',
+					SPAN_ATTRIBUTES.HTTP_URL,
 					'ip',
 					'service.name',
 					'signoz.collector.id',

frontend/src/pages/TracesExplorer/Filter/filterUtils.ts

@@ -2,6 +2,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
+import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -31,7 +32,7 @@ export const AllTraceFilterKeyValue: Record<string, string> = {
 	httpRoute: 'HTTP Route',
 	'http.route': 'HTTP Route',
 	httpUrl: 'HTTP URL',
-	'http.url': 'HTTP URL',
+	[SPAN_ATTRIBUTES.HTTP_URL]: 'HTTP URL',
 	traceID: 'Trace ID',
 	trace_id: 'Trace ID',
 } as const;

pkg/query-service/app/clickhouseReader/reader.go

@@ -830,7 +830,7 @@ func (r *ClickHouseReader) GetUsage(ctx context.Context, queryParams *model.GetU
 
 func (r *ClickHouseReader) GetSpansForTrace(ctx context.Context, traceID string, traceDetailsQuery string) ([]model.SpanItemV2, *model.ApiError) {
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT * from %s.%s WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, traceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {
@@ -6458,7 +6458,7 @@ func (r *ClickHouseReader) SearchTraces(ctx context.Context, params *model.Searc
 	}
 
 	var traceSummary model.TraceSummary
-	summaryQuery := fmt.Sprintf("SELECT * from %s.%s FINAL WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
+	summaryQuery := fmt.Sprintf("SELECT * from %s.%s WHERE trace_id=$1", r.TraceDB, r.traceSummaryTable)
 	err := r.db.QueryRow(ctx, summaryQuery, params.TraceID).Scan(&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans)
 	if err != nil {
 		if err == sql.ErrNoRows {