chore: add metric temporality cache

.github/CODEOWNERS

@@ -42,7 +42,3 @@
 /pkg/telemetrymetadata/ @srikanthccv
 /pkg/telemetrymetrics/ @srikanthccv
 /pkg/telemetrytraces/ @srikanthccv
-
-# AuthN / AuthZ Owners 
-
-/pkg/authz/ @vikrantgupta25 @grandwizard28

.github/workflows/build-community.yaml

@@ -62,7 +62,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build

.github/workflows/build-enterprise.yaml

@@ -93,7 +93,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/build-staging.yaml

@@ -92,7 +92,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/goci.yaml

@@ -18,7 +18,7 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_TEST_CONTEXT: ./...
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
   fmt:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -27,7 +27,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
   lint:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -36,7 +36,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
   deps:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -45,7 +45,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.24
+      GO_VERSION: 1.23
   build:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -57,7 +57,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.23"
       - name: qemu-install
         uses: docker/setup-qemu-action@v3
       - name: aarch64-install

.github/workflows/gor-signoz-community.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.23"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -122,7 +122,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.23"
 
       # copy the caches from build
       - name: get-sha

.github/workflows/gor-signoz.yaml

@@ -72,7 +72,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.23"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -135,7 +135,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.24"
+          go-version: "1.23"
 
       # copy the caches from build
       - name: get-sha

.gitignore

@@ -86,8 +86,6 @@ queries.active
 .devenv/**/tmp/**
 .qodo
 
-.dev
-
 ### Python ###
 # Byte-compiled / optimized / DLL files
 __pycache__/

cmd/enterprise/Dockerfile.integration

@@ -2,11 +2,10 @@ FROM node:18-bullseye AS build
 
 WORKDIR /opt/
 COPY ./frontend/ ./
-ENV NODE_OPTIONS=--max-old-space-size=8192
 RUN CI=1 yarn install
 RUN CI=1 yarn build
 
-FROM golang:1.24-bullseye
+FROM golang:1.23-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

ee/query-service/app/api/api.go

@@ -57,7 +57,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
-		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
+		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore, signoz.Cache),
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 	})

ee/query-service/app/api/cloudIntegrations.go

@@ -13,11 +13,11 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/modules/user"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/google/uuid"
 	"github.com/gorilla/mux"
 	"go.uber.org/zap"
 )
@@ -192,14 +192,14 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 		))
 	}
 
-	password := types.MustGenerateFactorPassword(newUser.ID.StringValue())
+	password, err := types.NewFactorPassword(uuid.NewString())
 
-	err = ah.Signoz.Modules.User.CreateUser(ctx, newUser, user.WithFactorPassword(password))
+	integrationUser, err := ah.Signoz.Modules.User.CreateUserWithPassword(ctx, newUser, password)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
-	return newUser, nil
+	return integrationUser, nil
 }
 
 func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (

ee/query-service/model/errors.go

@@ -1,7 +1,7 @@
 package model
 
 import (
-	"errors"
+	"fmt"
 
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 )
@@ -57,7 +57,7 @@ func Unauthorized(err error) *ApiError {
 func BadRequestStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorBadData,
-		Err: errors.New(s),
+		Err: fmt.Errorf(s),
 	}
 }
 
@@ -73,7 +73,7 @@ func InternalError(err error) *ApiError {
 func InternalErrorStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorInternal,
-		Err: errors.New(s),
+		Err: fmt.Errorf(s),
 	}
 }
 

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -1,114 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { ApiBaseInstance } from 'api';
-
-import { getFieldKeys } from '../getFieldKeys';
-
-// Mock the API instance
-jest.mock('api', () => ({
-	ApiBaseInstance: {
-		get: jest.fn(),
-	},
-}));
-
-describe('getFieldKeys API', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const mockSuccessResponse = {
-		data: {
-			status: 'success',
-			data: {
-				keys: {
-					'service.name': [],
-					'http.status_code': [],
-				},
-				complete: true,
-			},
-		},
-	};
-
-	it('should call API with correct parameters when no args provided', async () => {
-		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
-
-		// Call function with no parameters
-		await getFieldKeys();
-
-		// Verify API was called correctly with empty params object
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
-			params: {},
-		});
-	});
-
-	it('should call API with signal parameter when provided', async () => {
-		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
-
-		// Call function with signal parameter
-		await getFieldKeys('traces');
-
-		// Verify API was called with signal parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
-			params: { signal: 'traces' },
-		});
-	});
-
-	it('should call API with name parameter when provided', async () => {
-		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					keys: { service: [] },
-					complete: false,
-				},
-			},
-		});
-
-		// Call function with name parameter
-		await getFieldKeys(undefined, 'service');
-
-		// Verify API was called with name parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
-			params: { name: 'service' },
-		});
-	});
-
-	it('should call API with both signal and name when provided', async () => {
-		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					keys: { service: [] },
-					complete: false,
-				},
-			},
-		});
-
-		// Call function with both parameters
-		await getFieldKeys('logs', 'service');
-
-		// Verify API was called with both parameters
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
-			params: { signal: 'logs', name: 'service' },
-		});
-	});
-
-	it('should return properly formatted response', async () => {
-		// Mock API to return our response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
-
-		// Call the function
-		const result = await getFieldKeys('traces');
-
-		// Verify the returned structure matches our expected format
-		expect(result).toEqual({
-			statusCode: 200,
-			error: null,
-			message: 'success',
-			payload: mockSuccessResponse.data.data,
-		});
-	});
-});

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -1,209 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { ApiBaseInstance } from 'api';
-
-import { getFieldValues } from '../getFieldValues';
-
-// Mock the API instance
-jest.mock('api', () => ({
-	ApiBaseInstance: {
-		get: jest.fn(),
-	},
-}));
-
-describe('getFieldValues API', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should call the API with correct parameters (no options)', async () => {
-		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-					},
-					complete: true,
-				},
-			},
-		});
-
-		// Call function without parameters
-		await getFieldValues();
-
-		// Verify API was called correctly with empty params
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: {},
-		});
-	});
-
-	it('should call the API with signal parameter', async () => {
-		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-					},
-					complete: true,
-				},
-			},
-		});
-
-		// Call function with signal parameter
-		await getFieldValues('traces');
-
-		// Verify API was called with signal parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: { signal: 'traces' },
-		});
-	});
-
-	it('should call the API with name parameter', async () => {
-		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-					},
-					complete: true,
-				},
-			},
-		});
-
-		// Call function with name parameter
-		await getFieldValues(undefined, 'service.name');
-
-		// Verify API was called with name parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: { name: 'service.name' },
-		});
-	});
-
-	it('should call the API with value parameter', async () => {
-		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend'],
-					},
-					complete: false,
-				},
-			},
-		});
-
-		// Call function with value parameter
-		await getFieldValues(undefined, 'service.name', 'front');
-
-		// Verify API was called with value parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: { name: 'service.name', value: 'front' },
-		});
-	});
-
-	it('should call the API with time range parameters', async () => {
-		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-					},
-					complete: true,
-				},
-			},
-		});
-
-		// Call function with time range parameters
-		const startUnixMilli = 1625097600000000; // Note: nanoseconds
-		const endUnixMilli = 1625184000000000;
-		await getFieldValues(
-			'logs',
-			'service.name',
-			undefined,
-			startUnixMilli,
-			endUnixMilli,
-		);
-
-		// Verify API was called with time range parameters (converted to milliseconds)
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: {
-				signal: 'logs',
-				name: 'service.name',
-				startUnixMilli: '1625097600', // Should be converted to seconds (divided by 1000000)
-				endUnixMilli: '1625184000', // Should be converted to seconds (divided by 1000000)
-			},
-		});
-	});
-
-	it('should normalize the response values', async () => {
-		// Mock API response with multiple value types
-		const mockResponse = {
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-						numberValues: [200, 404],
-						boolValues: [true, false],
-					},
-					complete: true,
-				},
-			},
-		};
-
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
-
-		// Call the function
-		const result = await getFieldValues('traces', 'mixed.values');
-
-		// Verify the response has normalized values array
-		expect(result.payload?.normalizedValues).toContain('frontend');
-		expect(result.payload?.normalizedValues).toContain('backend');
-		expect(result.payload?.normalizedValues).toContain('200');
-		expect(result.payload?.normalizedValues).toContain('404');
-		expect(result.payload?.normalizedValues).toContain('true');
-		expect(result.payload?.normalizedValues).toContain('false');
-		expect(result.payload?.normalizedValues?.length).toBe(6);
-	});
-
-	it('should return a properly formatted success response', async () => {
-		// Create mock response
-		const mockApiResponse = {
-			data: {
-				status: 'success',
-				data: {
-					values: {
-						stringValues: ['frontend', 'backend'],
-					},
-					complete: true,
-				},
-			},
-		};
-
-		// Mock API to return our response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
-
-		// Call the function
-		const result = await getFieldValues('traces', 'service.name');
-
-		// Verify the returned structure
-		expect(result).toEqual({
-			statusCode: 200,
-			error: null,
-			message: 'success',
-			payload: expect.objectContaining({
-				values: expect.any(Object),
-				normalizedValues: expect.any(Array),
-				complete: true,
-			}),
-		});
-	});
-});

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,34 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-/**
- * Get field keys for a given signal type
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Optional search text
- */
-export const getFieldKeys = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = encodeURIComponent(signal);
-	}
-
-	if (name) {
-		params.name = encodeURIComponent(name);
-	}
-
-	const response = await ApiBaseInstance.get('/fields/keys', { params });
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,80 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-/**
- * Get field values for a given signal type and field name
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Name of the attribute for which values are being fetched
- * @param value Optional search text
- */
-export const getFieldValues = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-	searchText?: string,
-	startUnixMilli?: number,
-	endUnixMilli?: number,
-	existingQuery?: string,
-): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = encodeURIComponent(signal);
-	}
-
-	if (name) {
-		params.name = encodeURIComponent(name);
-	}
-
-	if (searchText) {
-		params.searchText = encodeURIComponent(searchText);
-	}
-
-	if (startUnixMilli) {
-		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
-	}
-
-	if (endUnixMilli) {
-		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
-	}
-
-	if (existingQuery) {
-		params.existingQuery = existingQuery;
-	}
-
-	const response = await ApiBaseInstance.get('/fields/values', { params });
-
-	// Normalize values from different types (stringValues, boolValues, etc.)
-	if (response.data?.data?.values) {
-		const allValues: string[] = [];
-		Object.entries(response.data.data.values).forEach(
-			([key, valueArray]: [string, any]) => {
-				// Skip RelatedValues as they should be kept separate
-				if (key === 'relatedValues') {
-					return;
-				}
-
-				if (Array.isArray(valueArray)) {
-					allValues.push(...valueArray.map(String));
-				}
-			},
-		);
-
-		// Add a normalized values array to the response
-		response.data.data.normalizedValues = allValues;
-
-		// Add relatedValues to the response as per FieldValueResponse
-		if (response.data.data.values.relatedValues) {
-			response.data.data.relatedValues = response.data.data.values.relatedValues;
-		}
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldValues;

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -24,7 +24,6 @@ import {
 	TelemetryFieldKey,
 	TraceAggregation,
 	VariableItem,
-	VariableType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -407,7 +406,6 @@ export const prepareQueryRangePayloadV5 = ({
 	formatForWeb,
 	originalGraphType,
 	fillGaps,
-	dynamicVariables,
 }: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
@@ -499,12 +497,7 @@ export const prepareQueryRangePayloadV5 = ({
 			fillGaps: fillGaps || false,
 		},
 		variables: Object.entries(variables).reduce((acc, [key, value]) => {
-			acc[key] = {
-				value,
-				type: dynamicVariables
-					?.find((v) => v.name === key)
-					?.type?.toLowerCase() as VariableType,
-			};
+			acc[key] = { value };
 			return acc;
 		}, {} as Record<string, VariableItem>),
 	};

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -20,15 +20,13 @@
 		.ant-card-body {
 			height: calc(100% - 18px);
 
-			.widget-graph-component-container {
-				.widget-graph-container {
-					&.bar-panel-container {
-						height: calc(100% - 110px);
-					}
+			.widget-graph-container {
+				&.bar {
+					height: calc(100% - 110px);
+				}
 
-					&.graph-panel-container {
-						height: calc(100% - 80px);
-					}
+				&.graph {
+					height: calc(100% - 80px);
 				}
 			}
 		}
@@ -84,11 +82,9 @@
 		.ant-card-body {
 			height: calc(100% - 18px);
 
-			.widget-graph-component-container {
-				.widget-graph-container {
-					&.bar-panel-container {
-						height: calc(100% - 110px);
-					}
+			.widget-graph-container {
+				&.bar {
+					height: calc(100% - 110px);
 				}
 			}
 		}

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -174,31 +174,6 @@
 	cursor: pointer;
 }
 
-.time-input-prefix {
-	.live-dot-icon {
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background-color: var(--bg-forest-500);
-		animation: ripple 1s infinite;
-
-		margin-right: 4px;
-		margin-left: 4px;
-	}
-}
-
-@keyframes ripple {
-	0% {
-		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
-	}
-	70% {
-		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
-	}
-	100% {
-		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
-	}
-}
-
 .time-input-suffix-icon-badge {
 	display: flex;
 	align-items: center;

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -59,9 +59,7 @@ interface CustomTimePickerProps {
 	customDateTimeVisible?: boolean;
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
-	showLiveLogs?: boolean;
-	onGoLive?: () => void;
-	onExitLiveLogs?: () => void;
+	handleGoLive?: () => void;
 }
 
 function CustomTimePicker({
@@ -78,9 +76,7 @@ function CustomTimePicker({
 	customDateTimeVisible,
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
-	onGoLive,
-	onExitLiveLogs,
-	showLiveLogs,
+	handleGoLive,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -169,13 +165,9 @@ function CustomTimePicker({
 	};
 
 	useEffect(() => {
-		if (showLiveLogs) {
-			setSelectedTimePlaceholderValue('Live');
-		} else {
-			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-			setSelectedTimePlaceholderValue(value);
-		}
-	}, [selectedTime, selectedValue, showLiveLogs]);
+		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+		setSelectedTimePlaceholderValue(value);
+	}, [selectedTime, selectedValue]);
 
 	const hide = (): void => {
 		setOpen(false);
@@ -346,28 +338,6 @@ function CustomTimePicker({
 		return '';
 	};
 
-	const getInputPrefix = (): JSX.Element => {
-		if (showLiveLogs) {
-			return (
-				<div className="time-input-prefix">
-					<div className="live-dot-icon" />
-				</div>
-			);
-		}
-
-		return (
-			<div className="time-input-prefix">
-				{inputValue && inputStatus === 'success' ? (
-					<CheckCircle size={14} color="#51E7A8" />
-				) : (
-					<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
-						<Clock size={14} className="cursor-pointer" />
-					</Tooltip>
-				)}
-			</div>
-		);
-	};
-
 	return (
 		<div className="custom-time-picker">
 			<Tooltip title={getTooltipTitle()} placement="top">
@@ -387,8 +357,7 @@ function CustomTimePicker({
 								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
-								onGoLive={defaultTo(onGoLive, noop)}
-								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
+								handleGoLive={defaultTo(handleGoLive, noop)}
 								options={items}
 								selectedTime={selectedTime}
 								activeView={activeView}
@@ -423,7 +392,17 @@ function CustomTimePicker({
 						onBlur={handleBlur}
 						onChange={handleInputChange}
 						data-1p-ignore
-						prefix={getInputPrefix()}
+						prefix={
+							<div className="time-input-prefix">
+								{inputValue && inputStatus === 'success' ? (
+									<CheckCircle size={14} color="#51E7A8" />
+								) : (
+									<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+										<Clock size={14} className="cursor-pointer" />
+									</Tooltip>
+								)}
+							</div>
+						}
 						suffix={
 							<div className="time-input-suffix">
 								{!!isTimezoneOverridden && activeTimezoneOffset && (
@@ -460,8 +439,6 @@ CustomTimePicker.defaultProps = {
 	customDateTimeVisible: false,
 	setCustomDTPickerVisible: noop,
 	onCustomDateHandler: noop,
-	onGoLive: noop,
+	handleGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
-	onExitLiveLogs: noop,
-	showLiveLogs: false,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,7 +6,6 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import DatePickerV2 from 'components/DatePickerV2/DatePickerV2';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
@@ -17,14 +16,7 @@ import {
 import dayjs from 'dayjs';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 
@@ -40,13 +32,12 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
-	onGoLive: () => void;
+	handleGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
-	onExitLiveLogs: () => void;
 }
 
 interface RecentlyUsedDateTimeRange {
@@ -65,13 +56,12 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
-	onGoLive,
+	handleGoLive,
 	selectedTime,
 	activeView,
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
-	onExitLiveLogs,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
@@ -79,19 +69,6 @@ function CustomTimePickerPopoverContent({
 		pathname,
 	]);
 
-	const url = new URLSearchParams(window.location.search);
-
-	let panelTypeFromURL = url.get(QueryParams.panelTypes);
-
-	try {
-		panelTypeFromURL = JSON.parse(panelTypeFromURL as string);
-	} catch {
-		// fallback → leave as-is
-	}
-
-	const isLogsListView =
-		panelTypeFromURL !== 'table' && panelTypeFromURL !== 'graph'; // we do not select list view in the url
-
 	const { timezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;
 
@@ -99,12 +76,6 @@ function CustomTimePickerPopoverContent({
 		RecentlyUsedDateTimeRange[]
 	>([]);
 
-	const handleExitLiveLogs = useCallback((): void => {
-		if (isLogsExplorerPage) {
-			onExitLiveLogs();
-		}
-	}, [isLogsExplorerPage, onExitLiveLogs]);
-
 	useEffect(() => {
 		if (!customDateTimeVisible) {
 			const customTimeRanges = getCustomTimeRanges();
@@ -136,7 +107,6 @@ function CustomTimePickerPopoverContent({
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
-							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
 					>
@@ -170,17 +140,12 @@ function CustomTimePickerPopoverContent({
 		);
 	}
 
-	const handleGoLive = (): void => {
-		onGoLive();
-		setIsOpen(false);
-	};
-
 	return (
 		<>
 			<div className="date-time-popover">
 				{!customDateTimeVisible && (
 					<div className="date-time-options">
-						{isLogsExplorerPage && isLogsListView && (
+						{isLogsExplorerPage && (
 							<Button className="data-time-live" type="text" onClick={handleGoLive}>
 								Live
 							</Button>
@@ -190,7 +155,6 @@ function CustomTimePickerPopoverContent({
 								type="text"
 								key={option.label + option.value}
 								onClick={(): void => {
-									handleExitLiveLogs();
 									onSelectHandler(option.label, option.value);
 								}}
 								className={cx(
@@ -205,6 +169,7 @@ function CustomTimePickerPopoverContent({
 						))}
 					</div>
 				)}
+
 				<div
 					className={cx(
 						'relative-date-time',
@@ -234,14 +199,12 @@ function CustomTimePickerPopoverContent({
 											tabIndex={0}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter' || e.key === ' ') {
-													handleExitLiveLogs();
 													onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
 													setIsOpen(false);
 												}
 											}}
 											key={range.value}
 											onClick={(): void => {
-												handleExitLiveLogs();
 												onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
 												setIsOpen(false);
 											}}

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -169,7 +169,6 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
-
 	.ant-drawer-close {
 		padding: 0px;
 	}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -78,7 +78,7 @@ function Metrics({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -23,13 +23,11 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import { Virtuoso } from 'react-virtuoso';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -39,7 +37,7 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
 
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
@@ -64,10 +62,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
-	onDropdownVisibleChange,
-	showIncompleteDataMessage = false,
-	showLabels = false,
-	enableRegexOption = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -84,8 +78,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
-	const justOpenedRef = useRef<boolean>(false);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -132,12 +124,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
-	// Define allOptionShown earlier in the code
-	const allOptionShown = useMemo(
-		() => value === ALL_SELECTED_VALUE || value === 'ALL',
-		[value],
-	);
-
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -146,18 +132,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[], directCaller?: boolean): void => {
+		(newValue: string | string[]): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
-			if (
-				(allOptionShown || isAllSelected) &&
-				!directCaller &&
-				currentNewValue.length === 0
-			) {
-				return;
-			}
-
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -166,7 +144,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__ALL__" is selected (means select all actual values)
+			// Case 2: "__all__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -197,14 +175,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[
-			allOptionShown,
-			isAllSelected,
-			onChange,
-			allAvailableValues,
-			options,
-			enableAllSelection,
-		],
+		[onChange, allAvailableValues, options, enableAllSelection],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -539,46 +510,13 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			const trimmedValue = value.trim();
-			setSearchText(trimmedValue);
+			setSearchText(value.trim());
 			if (!isOpen) {
 				setIsOpen(true);
-				justOpenedRef.current = true;
 			}
-
-			// Reset active index when search changes if dropdown is open
-			if (isOpen && trimmedValue) {
-				setActiveIndex(-1);
-				// see if the trimmed value matched any option and set that active index
-				const matchedOption = filteredOptions.find(
-					(option) =>
-						option.label.toLowerCase() === trimmedValue.toLowerCase() ||
-						option.value?.toLowerCase() === trimmedValue.toLowerCase(),
-				);
-				if (matchedOption) {
-					setActiveIndex(1);
-				} else {
-					// check if the trimmed value is a regex pattern and set that active index
-					const isRegex =
-						trimmedValue.startsWith('.*') && trimmedValue.endsWith('.*');
-					if (isRegex && enableRegexOption) {
-						setActiveIndex(0);
-					} else {
-						setActiveIndex(enableRegexOption ? 1 : 0);
-					}
-				}
-			}
-
-			if (onSearch) onSearch(trimmedValue);
+			if (onSearch) onSearch(value.trim());
 		},
-		[
-			onSearch,
-			isOpen,
-			selectedValues,
-			onChange,
-			filteredOptions,
-			enableRegexOption,
-		],
+		[onSearch, isOpen, selectedValues, onChange],
 	);
 
 	// ===== UI & Rendering Functions =====
@@ -590,34 +528,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a unique key that doesn't rely on array index
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(
+				new RegExp(
+					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
+					'gi',
+				),
+			);
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a unique key that doesn't rely on array index
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				// If regex fails, return the original text without highlighting
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -628,10 +560,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([], true);
+			handleInternalChange([]);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE], true);
+			handleInternalChange([ALL_SELECTED_VALUE]);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -806,26 +738,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
-			// Simple early return if ALL is selected - block all possible keyboard interactions
-			// that could remove the ALL tag, but still allow dropdown navigation and search
-			if (
-				(allOptionShown || isAllSelected) &&
-				(e.key === 'Backspace' || e.key === 'Delete')
-			) {
-				// Only prevent default if the input is empty or cursor is at start position
-				const activeElement = document.activeElement as HTMLInputElement;
-				const isInputActive = activeElement?.tagName === 'INPUT';
-				const isInputEmpty = isInputActive && !activeElement?.value;
-				const isCursorAtStart =
-					isInputActive && activeElement?.selectionStart === 0;
-
-				if (isInputEmpty || isCursorAtStart) {
-					e.preventDefault();
-					e.stopPropagation();
-					return;
-				}
-			}
-
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -840,13 +752,13 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: ALL_SELECTED_VALUE, // Special value for the ALL option
+						value: '__all__', // Special value for the ALL option
 						type: 'defined',
 					});
 				}
 
 				// Add Regex to flat list
-				if (!isEmpty(searchText) && enableRegexOption) {
+				if (!isEmpty(searchText)) {
 					// Only add regex wrapper if it doesn't already look like a regex pattern
 					const isAlreadyRegex =
 						searchText.startsWith('.*') && searchText.endsWith('.*');
@@ -872,17 +784,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
-			// If we just opened the dropdown and have options, set first option as active
-			if (justOpenedRef.current && flatOptions.length > 0) {
-				setActiveIndex(0);
-				justOpenedRef.current = false;
-			}
-
-			// If no option is active but we have options and dropdown is open, activate the first one
-			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
-				setActiveIndex(0);
-			}
-
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1228,7 +1129,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1258,10 +1159,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
-						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
-						if (onDropdownVisibleChange) {
-							onDropdownVisibleChange(false);
-						}
 						break;
 
 					case SPACEKEY:
@@ -1271,7 +1168,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1317,7 +1214,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						justOpenedRef.current = true; // Set flag to initialize active option on next render
+						setActiveIndex(0);
 						setActiveChipIndex(-1);
 						break;
 
@@ -1363,14 +1260,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
-			allOptionShown,
-			isAllSelected,
-			isOpen,
-			activeIndex,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
+			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1386,9 +1278,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			onDropdownVisibleChange,
+			activeIndex,
 			handleSelectAll,
-			enableRegexOption,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1413,14 +1306,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
-
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1439,7 +1324,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		const customOptions: OptionData[] = [];
 
 		// add regex options first since they appear first in the UI
-		if (!isEmpty(searchText) && enableRegexOption) {
+		if (!isEmpty(searchText)) {
 			// Only add regex wrapper if it doesn't already look like a regex pattern
 			const isAlreadyRegex =
 				searchText.startsWith('.*') && searchText.endsWith('.*');
@@ -1462,17 +1347,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			});
 		}
 
-		// Now add all custom options at the beginning, removing duplicates based on value
-		const allOptions = [...customOptions, ...nonSectionOptions];
-		const seenValues = new Set<string>();
-		const enhancedNonSectionOptions = allOptions.filter((option) => {
-			const value = option.value || '';
-			if (seenValues.has(value)) {
-				return false;
-			}
-			seenValues.add(value);
-			return true;
-		});
+		// Now add all custom options at the beginning
+		const enhancedNonSectionOptions = [...customOptions, ...nonSectionOptions];
 
 		const allOptionValues = getAllAvailableValues(processedOptions);
 		const allOptionsSelected =
@@ -1506,7 +1382,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1564,19 +1439,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				{/* Non-section options when not searching */}
 				{enhancedNonSectionOptions.length > 0 && (
 					<div className="no-section-options">
-						<Virtuoso
-							style={{
-								minHeight: Math.min(300, enhancedNonSectionOptions.length * 40),
-								maxHeight: enhancedNonSectionOptions.length * 40,
-							}}
-							data={enhancedNonSectionOptions}
-							itemContent={(index, item): React.ReactNode =>
-								(mapOptions([item]) as unknown) as React.ReactElement
-							}
-							totalCount={enhancedNonSectionOptions.length}
-							itemSize={(): number => 40}
-							overscan={5}
-						/>
+						{mapOptions(enhancedNonSectionOptions)}
 					</div>
 				)}
 
@@ -1589,40 +1452,23 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 									{section.label}
 								</div>
 								<div role="group" aria-label={`${section.label} options`}>
-									<Virtuoso
-										style={{
-											minHeight: Math.min(300, (section.options?.length || 0) * 40),
-											maxHeight: (section.options?.length || 0) * 40,
-										}}
-										data={section.options || []}
-										itemContent={(index, item): React.ReactNode =>
-											(mapOptions([item]) as unknown) as React.ReactElement
-										}
-										totalCount={section.options?.length || 0}
-										itemSize={(): number => 40}
-										overscan={5}
-									/>
+									{section.options && mapOptions(section.options)}
 								</div>
 							</div>
-						) : (
-							<div key={section.label} />
-						),
+						) : null,
 					)}
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<ArrowLeft size={8} className="icons" />
-								<ArrowRight size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<ArrowLeft size={8} className="icons" />
+							<ArrowRight size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1636,33 +1482,21 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							{onRetry && (
-								<div className="navigation-icons">
-									<ReloadOutlined
-										twoToneColor={Color.BG_CHERRY_400}
-										onClick={(e): void => {
-											e.stopPropagation();
-											onRetry();
-										}}
-									/>
-								</div>
-							)}
+							<div className="navigation-icons">
+								<ReloadOutlined
+									twoToneColor={Color.BG_CHERRY_400}
+									onClick={(e): void => {
+										e.stopPropagation();
+										if (onRetry) onRetry();
+									}}
+								/>
+							</div>
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -1679,7 +1513,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1689,32 +1522,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
-		enableRegexOption,
 	]);
 
-	// Custom handler for dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			setIsOpen(visible);
-			if (visible) {
-				justOpenedRef.current = true;
-				setActiveIndex(0);
-				setActiveChipIndex(-1);
-			} else {
-				setSearchText('');
-				setActiveIndex(-1);
-				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
-			}
-			// Pass through to the parent component's handler if provided
-			if (onDropdownVisibleChange) {
-				onDropdownVisibleChange(visible);
-			}
-		},
-		[onDropdownVisibleChange],
-	);
-
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1776,16 +1585,55 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Custom Tag Render (needs significant updates)
 	const tagRender = useCallback(
 		(props: CustomTagProps): React.ReactElement => {
-			const { label: labelProp, value, closable, onClose } = props;
-
-			const label = showLabels
-				? options.find((option) => option.value === value)?.label || labelProp
-				: labelProp;
+			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (allOptionShown) {
-				// Don't render a visible tag - will be shown as placeholder
-				return <div style={{ display: 'none' }} />;
+			if (value === ALL_SELECTED_VALUE && isAllSelected) {
+				const handleAllTagClose = (
+					e: React.MouseEvent | React.KeyboardEvent,
+				): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleInternalChange([]); // Clear selection when ALL tag is closed
+				};
+
+				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
+					if (e.key === 'Enter' || e.key === SPACEKEY) {
+						handleAllTagClose(e);
+					}
+					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
+				};
+
+				return (
+					<div
+						className={cx('ant-select-selection-item', {
+							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
+							'ant-select-selection-item-selected': selectedChips.includes(0),
+						})}
+						style={
+							activeChipIndex === 0 || selectedChips.includes(0)
+								? {
+										borderColor: Color.BG_ROBIN_500,
+										backgroundColor: Color.BG_SLATE_400,
+								  }
+								: undefined
+						}
+					>
+						<span className="ant-select-selection-item-content">ALL</span>
+						{closable && (
+							<span
+								className="ant-select-selection-item-remove"
+								onClick={handleAllTagClose}
+								onKeyDown={handleAllTagKeyDown}
+								role="button"
+								tabIndex={0}
+								aria-label="Remove ALL tag (deselect all)"
+							>
+								×
+							</span>
+						)}
+					</div>
+				);
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1865,69 +1713,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
+		[
+			isAllSelected,
+			handleInternalChange,
+			activeChipIndex,
+			selectedChips,
+			selectedValues,
+			maxTagCount,
+		],
 	);
 
-	// Simple onClear handler to prevent clearing ALL
-	const onClearHandler = useCallback((): void => {
-		// Skip clearing if ALL is selected
-		if (allOptionShown || isAllSelected) {
-			return;
-		}
-
-		// Normal clear behavior
-		handleInternalChange([], true);
-		if (onClear) onClear();
-	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
-
 	// ===== Component Rendering =====
 	return (
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
+		<Select
+			ref={selectRef}
+			className={cx('custom-multiselect', className, {
+				'has-selection': selectedChips.length > 0 && !isAllSelected,
+				'is-all-selected': isAllSelected,
 			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
-				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			placeholder={placeholder}
+			mode="multiple"
+			showSearch
+			filterOption={false}
+			onSearch={handleSearch}
+			value={displayValue}
+			onChange={handleInternalChange}
+			onClear={(): void => handleInternalChange([])}
+			onDropdownVisibleChange={setIsOpen}
+			open={isOpen}
+			defaultActiveFirstOption={defaultActiveFirstOption}
+			popupMatchSelectWidth={dropdownMatchSelectWidth}
+			allowClear={allowClear}
+			getPopupContainer={getPopupContainer ?? popupContainer}
+			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+			dropdownRender={customDropdownRender}
+			menuItemSelectedIcon={null}
+			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+			onKeyDown={handleKeyDown}
+			tagRender={tagRender as any}
+			placement={placement}
+			listHeight={300}
+			searchValue={searchText}
+			maxTagTextLength={maxTagTextLength}
+			maxTagCount={isAllSelected ? 1 : maxTagCount}
+			{...rest}
+		/>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,7 +29,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -58,29 +57,17 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
-	// Flag to track if dropdown just opened
-	const justOpenedRef = useRef<boolean>(false);
-
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -143,33 +130,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a deterministic but unique key
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a deterministic but unique key
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -269,14 +246,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
-			// Reset active option index when search changes
-			if (isOpen) {
-				setActiveOptionIndex(0);
-			}
-
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch, isOpen],
+		[onSearch],
 	);
 
 	/**
@@ -300,23 +272,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
-					let processedOptions = isEmpty(value)
-						? filteredOptions
-						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
-
-					if (!isEmpty(searchText)) {
-						processedOptions = filterOptionsBySearch(processedOptions, searchText);
-					}
-
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
+						isEmpty(value)
+							? filteredOptions
+							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
 					);
 
 					// Add custom option if needed
-					if (
-						!isEmpty(searchText) &&
-						!isLabelPresent(processedOptions, searchText)
-					) {
+					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -337,52 +300,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
-				// If we just opened the dropdown and have options, set first option as active
-				if (justOpenedRef.current && options.length > 0) {
-					setActiveOptionIndex(0);
-					justOpenedRef.current = false;
-				}
-
-				// If no option is active but we have options, activate the first one
-				if (activeOptionIndex === -1 && options.length > 0) {
-					setActiveOptionIndex(0);
-				}
-
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev < options.length - 1 ? prev + 1 : 0,
+						);
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev > 0 ? prev - 1 : options.length - 1,
+						);
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev > 0 ? prev - 1 : options.length - 1,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
 						} else {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev < options.length - 1 ? prev + 1 : 0,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
 						}
 						break;
 
@@ -395,7 +339,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -408,7 +351,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -417,7 +359,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
-						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -428,7 +369,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -439,7 +379,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				justOpenedRef.current = true; // Set flag to initialize active option on next render
+				setActiveOptionIndex(0);
 			}
 		},
 		[
@@ -504,7 +444,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -515,6 +454,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
+
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -532,16 +472,13 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -555,33 +492,21 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							{onRetry && (
-								<div className="navigation-icons">
-									<ReloadOutlined
-										twoToneColor={Color.BG_CHERRY_400}
-										onClick={(e): void => {
-											e.stopPropagation();
-											onRetry();
-										}}
-									/>
-								</div>
-							)}
+							<div className="navigation-icons">
+								<ReloadOutlined
+									twoToneColor={Color.BG_CHERRY_400}
+									onClick={(e): void => {
+										e.stopPropagation();
+										if (onRetry) onRetry();
+									}}
+								/>
+							</div>
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -595,7 +520,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -603,22 +527,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
-		setIsOpen(visible);
-		if (visible) {
-			justOpenedRef.current = true;
-			setActiveOptionIndex(0);
-		} else {
-			setSearchText('');
-			setActiveOptionIndex(-1);
-		}
-	}, []);
-
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -672,7 +582,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
+			onDropdownVisibleChange={setIsOpen}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,50 +35,12 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
-	&.is-all-selected {
-		.ant-select-selection-search-input {
-			caret-color: transparent;
-		}
-
-		.ant-select-selection-placeholder {
-			opacity: 1 !important;
-			color: var(--bg-vanilla-400) !important;
-			font-weight: 500;
-			visibility: visible !important;
-			pointer-events: none;
-			z-index: 2;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85) !important;
-			}
-		}
-
-		&.ant-select-focused .ant-select-selection-placeholder {
-			opacity: 0.45 !important;
-		}
-	}
-
-	.all-selected-text {
-		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		color: var(--bg-vanilla-400);
-		z-index: 1;
-		pointer-events: none;
-
-		.lightMode & {
-			color: rgba(0, 0, 0, 0.85);
-		}
-	}
-
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
 		scrollbar-width: thin;
 		background-color: var(--bg-ink-400);
 		border-color: var(--bg-slate-400);
-		cursor: text;
 
 		&::-webkit-scrollbar {
 			width: 6px;
@@ -94,16 +56,6 @@ $custom-border-color: #2c3044;
 		}
 	}
 
-	// Ensure adequate space for input area
-	.ant-select-selection-search {
-		min-width: 60px !important;
-		flex: 1 1 auto;
-		.ant-select-selection-search-input {
-			min-width: 60px !important;
-			cursor: text;
-		}
-	}
-
 	&.ant-select-focused {
 		.ant-select-selector {
 			border-color: var(--bg-robin-500);
@@ -206,7 +158,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 300px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -324,10 +276,6 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
-	.navigation-text-incomplete {
-		color: var(--bg-amber-600) !important;
-	}
-
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -374,7 +322,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -407,7 +355,6 @@ $custom-border-color: #2c3044;
 	.select-group {
 		margin-bottom: 12px;
 		overflow: hidden;
-		margin-top: 4px;
 
 		.group-label {
 			font-weight: 500;
@@ -690,7 +637,6 @@ $custom-border-color: #2c3044;
 		.ant-select-selector {
 			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
-			cursor: text; // Make entire selector clickable for input focus
 
 			&::-webkit-scrollbar-thumb {
 				background-color: #ccc;
@@ -701,20 +647,6 @@ $custom-border-color: #2c3044;
 			}
 		}
 
-		.ant-select-selection-search {
-			min-width: 60px !important;
-			flex: 1 1 auto;
-
-			.ant-select-selection-search-input {
-				min-width: 60px !important;
-				cursor: text;
-			}
-		}
-
-		.ant-select-selector {
-			cursor: text;
-		}
-
 		.ant-select-selection-placeholder {
 			color: rgba(0, 0, 0, 0.45);
 		}
@@ -724,10 +656,6 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
-			font-size: 12px !important;
-			height: 20px;
-			line-height: 18px;
-
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -908,38 +836,3 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
-
-.custom-multiselect-wrapper {
-	position: relative;
-	width: 100%;
-
-	&.all-selected {
-		.all-text {
-			position: absolute;
-			left: 12px;
-			top: 50%;
-			transform: translateY(-50%);
-			color: var(--bg-vanilla-400);
-			font-weight: 500;
-			z-index: 2;
-			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85);
-			}
-		}
-
-		&:focus-within .all-text {
-			opacity: 0.45;
-		}
-
-		.ant-select-selection-search-input {
-			caret-color: auto;
-		}
-
-		.ant-select-selection-placeholder {
-			display: none;
-		}
-	}
-}

frontend/src/components/NewSelect/types.ts

@@ -24,10 +24,9 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -52,14 +51,10 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	maxTagTextLength?: number;
-	showIncompleteDataMessage?: boolean;
-	showLabels?: boolean;
-	enableRegexOption?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -1,6 +1,4 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { uniqueOptions } from 'container/NewDashboard/DashboardVariablesSelection/util';
-
 import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
@@ -100,10 +98,8 @@ export const prioritizeOrAddOptionForMultiSelect = (
 		label: labels?.[value] ?? value, // Use provided label or default to value
 	}));
 
-	const flatOutSelectedOptions = uniqueOptions([...newOptions, ...foundOptions]);
-
 	// Add found & new options to the top
-	return [...flatOutSelectedOptions, ...filteredOptions];
+	return [...newOptions, ...foundOptions, ...filteredOptions];
 };
 
 /**
@@ -137,15 +133,3 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
-
-/**
- * Utility function to handle dropdown scroll and detect when scrolled to bottom
- * Returns true when scrolled to within 20px of the bottom
- */
-export const handleScrollToBottom = (
-	e: React.UIEvent<HTMLDivElement>,
-): boolean => {
-	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
-	return scrollHeight - scrollTop - clientHeight < 20;
-};

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -32,14 +32,12 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
 import { Info, TriangleAlert } from 'lucide-react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
 	IDetailedError,
 	IQueryContext,
 	IValidationResult,
 } from 'types/antlrQueryTypes';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -163,15 +161,13 @@ function QuerySearch({
 
 	const { handleRunQuery } = useQueryBuilder();
 
-	const { selectedDashboard } = useDashboard();
-
-	const dynamicVariables = useMemo(
-		() =>
-			Object.values(selectedDashboard?.data?.variables || {})?.filter(
-				(variable: IDashboardVariable) => variable.type === 'DYNAMIC',
-			),
-		[selectedDashboard],
-	);
+	// const {
+	// 	data: queryKeySuggestions,
+	// 	refetch: refetchQueryKeySuggestions,
+	// } = useGetQueryKeySuggestions({
+	// 	signal: dataSource,
+	// 	name: searchText || '',
+	// });
 
 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -986,25 +982,6 @@ function QuerySearch({
 				option.label.toLowerCase().includes(searchText),
 			);
 
-			// Add dynamic variables suggestions for the current key
-			const variableName = dynamicVariables?.find(
-				(variable) => variable?.dynamicVariablesAttribute === keyName,
-			)?.name;
-
-			if (variableName) {
-				const variableValue = `$${variableName}`;
-				const variableOption = {
-					label: variableValue,
-					type: 'variable',
-					apply: variableValue,
-				};
-
-				// Add variable suggestion at the beginning if it matches the search text
-				if (variableValue.toLowerCase().includes(searchText.toLowerCase())) {
-					options = [variableOption, ...options];
-				}
-			}
-
 			// Trigger fetch only if needed
 			const shouldFetch =
 				// Fetch only if key is available
@@ -1057,9 +1034,6 @@ function QuerySearch({
 				} else if (option.type === 'array') {
 					// Arrays are already formatted as arrays
 					processedOption.apply = option.label;
-				} else if (option.type === 'variable') {
-					// Variables should be used as-is (they already have the $ prefix)
-					processedOption.apply = option.label;
 				}
 
 				return processedOption;

frontend/src/components/QueryBuilderV2/__tests__/utils.test.ts

@@ -1,19 +1,12 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable import/no-unresolved */
 import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 
 import {
-	convertAggregationToExpression,
 	convertFiltersToExpression,
 	convertFiltersToExpressionWithExistingQuery,
-	removeKeysFromExpression,
 } from '../utils';
 
 describe('convertFiltersToExpression', () => {
@@ -776,420 +769,3 @@ describe('convertFiltersToExpression', () => {
 		expect(result.filter.expression).toBe("service.name = 'old-service'");
 	});
 });
-
-describe('convertAggregationToExpression', () => {
-	const mockAttribute: BaseAutocompleteData = {
-		id: 'test-id',
-		key: 'test_metric',
-		type: 'string',
-		dataType: DataTypes.String,
-	};
-
-	it('should return undefined when no aggregateOperator is provided', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: '',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.METRICS,
-		});
-		expect(result).toBeUndefined();
-	});
-
-	it('should convert metrics aggregation with required temporality field', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'sum',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.METRICS,
-			timeAggregation: 'avg',
-			spaceAggregation: 'max',
-			alias: 'test_alias',
-			reduceTo: 'sum',
-			temporality: 'delta',
-		});
-
-		expect(result).toEqual([
-			{
-				metricName: 'test_metric',
-				timeAggregation: 'avg',
-				spaceAggregation: 'max',
-				reduceTo: 'sum',
-				temporality: 'delta',
-			},
-		]);
-	});
-
-	it('should handle noop operators by converting to count', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'noop',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.METRICS,
-			timeAggregation: 'noop',
-			spaceAggregation: 'noop',
-		});
-
-		expect(result).toEqual([
-			{
-				metricName: 'test_metric',
-				timeAggregation: 'count',
-				spaceAggregation: 'count',
-			},
-		]);
-	});
-
-	it('should handle missing attribute key gracefully', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'sum',
-			aggregateAttribute: { ...mockAttribute, key: '' },
-			dataSource: DataSource.METRICS,
-		});
-
-		expect(result).toEqual([
-			{
-				metricName: '',
-				timeAggregation: 'sum',
-				spaceAggregation: 'sum',
-			},
-		]);
-	});
-
-	it('should convert traces aggregation to expression format', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'count',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.TRACES,
-			alias: 'trace_alias',
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'count(test_metric)',
-				alias: 'trace_alias',
-			},
-		]);
-	});
-
-	it('should convert logs aggregation to expression format', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'avg',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.LOGS,
-			alias: 'log_alias',
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'avg(test_metric)',
-				alias: 'log_alias',
-			},
-		]);
-	});
-
-	it('should handle aggregation without attribute key for traces/logs', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'count',
-			aggregateAttribute: { ...mockAttribute, key: '' },
-			dataSource: DataSource.TRACES,
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'count()',
-			},
-		]);
-	});
-
-	it('should handle missing alias for traces/logs', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'sum',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.LOGS,
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'sum(test_metric)',
-			},
-		]);
-	});
-
-	it('should use aggregateOperator as fallback for time and space aggregation', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'max',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.METRICS,
-		});
-
-		expect(result).toEqual([
-			{
-				metricName: 'test_metric',
-				timeAggregation: 'max',
-				spaceAggregation: 'max',
-			},
-		]);
-	});
-
-	it('should handle undefined aggregateAttribute parameter with metrics', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'sum',
-			aggregateAttribute: mockAttribute,
-			dataSource: DataSource.METRICS,
-		});
-
-		expect(result).toEqual([
-			{
-				metricName: 'test_metric',
-				timeAggregation: 'sum',
-				spaceAggregation: 'sum',
-				reduceTo: undefined,
-				temporality: undefined,
-			},
-		]);
-	});
-
-	it('should handle undefined aggregateAttribute parameter with traces', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'noop',
-			aggregateAttribute: (undefined as unknown) as BaseAutocompleteData,
-			dataSource: DataSource.TRACES,
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'count()',
-			},
-		]);
-	});
-
-	it('should handle undefined aggregateAttribute parameter with logs', () => {
-		const result = convertAggregationToExpression({
-			aggregateOperator: 'noop',
-			aggregateAttribute: (undefined as unknown) as BaseAutocompleteData,
-			dataSource: DataSource.LOGS,
-		});
-
-		expect(result).toEqual([
-			{
-				expression: 'count()',
-			},
-		]);
-	});
-});
-
-describe('removeKeysFromExpression', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('Backward compatibility (removeOnlyVariableExpressions = false)', () => {
-		it('should remove simple key-value pair from expression', () => {
-			const expression = "service.name = 'api-gateway' AND status = 'success'";
-			const result = removeKeysFromExpression(expression, ['service.name']);
-
-			expect(result).toBe("status = 'success'");
-		});
-
-		it('should remove multiple keys from expression', () => {
-			const expression =
-				"service.name = 'api-gateway' AND status = 'success' AND region = 'us-east-1'";
-			const result = removeKeysFromExpression(expression, [
-				'service.name',
-				'status',
-			]);
-
-			expect(result).toBe("region = 'us-east-1'");
-		});
-
-		it('should handle empty expression', () => {
-			const result = removeKeysFromExpression('', ['service.name']);
-			expect(result).toBe('');
-		});
-
-		it('should handle empty keys array', () => {
-			const expression = "service.name = 'api-gateway'";
-			const result = removeKeysFromExpression(expression, []);
-			expect(result).toBe(expression);
-		});
-
-		it('should handle key not found in expression', () => {
-			const expression = "service.name = 'api-gateway'";
-			const result = removeKeysFromExpression(expression, ['nonexistent.key']);
-			expect(result).toBe(expression);
-		});
-
-		// todo: Sagar check this - this is expected or not
-		// it('should remove last occurrence when multiple occurrences exist', () => {
-		// 	// This tests the original behavior - should remove the last occurrence
-		// 	const expression =
-		// 		"deployment.environment = $deployment.environment deployment.environment = 'default'";
-		// 	const result = removeKeysFromExpression(
-		// 		expression,
-		// 		['deployment.environment'],
-		// 		false,
-		// 	);
-
-		// 	// Should remove the literal value (last occurrence), leaving the variable
-		// 	expect(result).toBe('deployment.environment = $deployment.environment');
-		// });
-	});
-
-	describe('Variable expression targeting (removeOnlyVariableExpressions = true)', () => {
-		it('should remove only variable expressions (values starting with $)', () => {
-			const expression =
-				"deployment.environment = $deployment.environment deployment.environment = 'default'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			// Should remove the variable expression, leaving the literal value
-			expect(result).toBe("deployment.environment = 'default'");
-		});
-
-		it('should not remove literal values when targeting variable expressions', () => {
-			const expression = "service.name = 'api-gateway' AND status = 'success'";
-			const result = removeKeysFromExpression(expression, ['service.name'], true);
-
-			// Should not remove anything since no variable expressions exist
-			expect(result).toBe("service.name = 'api-gateway' AND status = 'success'");
-		});
-
-		it('should remove multiple variable expressions', () => {
-			const expression =
-				"deployment.environment = $deployment.environment service.name = $service.name status = 'success'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment', 'service.name'],
-				true,
-			);
-
-			expect(result).toBe("status = 'success'");
-		});
-
-		it('should handle mixed variable and literal expressions correctly', () => {
-			const expression =
-				"deployment.environment = $deployment.environment service.name = 'api-gateway' region = $region";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment', 'region'],
-				true,
-			);
-
-			// Should only remove variable expressions, leaving literal value
-			expect(result).toBe("service.name = 'api-gateway'");
-		});
-
-		it('should handle complex expressions with operators', () => {
-			const expression =
-				"deployment.environment IN [$env1, $env2] AND service.name = 'api-gateway'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result).toBe("service.name = 'api-gateway'");
-		});
-	});
-
-	describe('Edge cases and robustness', () => {
-		it('should handle case insensitive key matching', () => {
-			const expression = 'Service.Name = $Service.Name';
-			const result = removeKeysFromExpression(expression, ['service.name'], true);
-
-			expect(result).toBe('');
-		});
-
-		it('should clean up trailing AND/OR operators', () => {
-			const expression =
-				"deployment.environment = $deployment.environment AND service.name = 'api-gateway'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result).toBe("service.name = 'api-gateway'");
-		});
-
-		it('should clean up leading AND/OR operators', () => {
-			const expression =
-				"service.name = 'api-gateway' AND deployment.environment = $deployment.environment";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result).toBe("service.name = 'api-gateway'");
-		});
-
-		it('should handle expressions with only variable assignments', () => {
-			const expression = 'deployment.environment = $deployment.environment';
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result).toBe('');
-		});
-
-		it('should handle whitespace around operators', () => {
-			const expression =
-				"deployment.environment  =  $deployment.environment  AND  service.name  =  'api-gateway'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result.trim()).toBe("service.name  =  'api-gateway'");
-		});
-	});
-
-	describe('Real-world scenarios', () => {
-		it('should handle multiple variable instances of same key', () => {
-			const expression =
-				"deployment.environment = $env1 deployment.environment = $env2 deployment.environment = 'default'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			// Should remove one occurence as this case in itself is invalid to have multiple variable expressions for the same key
-			expect(result).toBe(
-				"deployment.environment = $env1 deployment.environment = 'default'",
-			);
-		});
-
-		it('should handle OR operators in expressions', () => {
-			const expression =
-				"deployment.environment = $deployment.environment OR service.name = 'api-gateway'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			expect(result).toBe("service.name = 'api-gateway'");
-		});
-
-		it('should maintain expression validity after removal', () => {
-			const expression =
-				"deployment.environment = $deployment.environment AND service.name = 'api-gateway' AND status = 'success'";
-			const result = removeKeysFromExpression(
-				expression,
-				['deployment.environment'],
-				true,
-			);
-
-			// Should maintain valid AND structure
-			expect(result).toBe("service.name = 'api-gateway' AND status = 'success'");
-
-			// Verify the result can be parsed by extractQueryPairs
-			const pairs = extractQueryPairs(result);
-			expect(pairs).toHaveLength(2);
-		});
-	});
-});

frontend/src/components/QueryBuilderV2/utils.ts

@@ -22,7 +22,7 @@ import {
 	TraceAggregation,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
-import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { unquote } from 'utils/stringUtils';
 import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
@@ -38,13 +38,6 @@ const isArrayOperator = (operator: string): boolean => {
 	return arrayOperators.includes(operator);
 };
 
-const isVariable = (value: string | string[] | number | boolean): boolean => {
-	if (Array.isArray(value)) {
-		return value.some((v) => typeof v === 'string' && v.trim().startsWith('$'));
-	}
-	return typeof value === 'string' && value.trim().startsWith('$');
-};
-
 /**
  * Format a value for the expression string
  * @param value - The value to format
@@ -55,10 +48,6 @@ const formatValueForExpression = (
 	value: string[] | string | number | boolean,
 	operator?: string,
 ): string => {
-	if (isVariable(value)) {
-		return String(value);
-	}
-
 	// For IN operators, ensure value is always an array
 	if (isArrayOperator(operator || '')) {
 		const arrayValue = Array.isArray(value) ? value : [value];
@@ -477,13 +466,11 @@ export const convertFiltersToExpressionWithExistingQuery = (
  *
  * @param expression - The full query string.
  * @param keysToRemove - An array of keys (case-insensitive) that should be removed from the expression.
- * @param removeOnlyVariableExpressions - When true, only removes key-value pairs where the value is a variable (starts with $). When false, uses the original behavior.
  * @returns A new expression string with the specified keys and their associated clauses removed.
  */
 export const removeKeysFromExpression = (
 	expression: string,
 	keysToRemove: string[],
-	removeOnlyVariableExpressions = false,
 ): string => {
 	if (!keysToRemove || keysToRemove.length === 0) {
 		return expression;
@@ -499,20 +486,9 @@ export const removeKeysFromExpression = (
 			let queryPairsMap: Map<string, IQueryPair>;
 
 			if (existingQueryPairs.length > 0) {
-				// Filter query pairs based on the removeOnlyVariableExpressions flag
-				const filteredQueryPairs = removeOnlyVariableExpressions
-					? existingQueryPairs.filter((pair) => {
-							const pairKey = pair.key?.trim().toLowerCase();
-							const matchesKey = pairKey === `${key}`.trim().toLowerCase();
-							if (!matchesKey) return false;
-							const value = pair.value?.toString().trim();
-							return value && value.includes('$');
-					  })
-					: existingQueryPairs;
-
 				// Build a map for quick lookup of query pairs by their lowercase trimmed keys
 				queryPairsMap = new Map(
-					filteredQueryPairs.map((pair) => {
+					existingQueryPairs.map((pair) => {
 						const key = pair.key.trim().toLowerCase();
 						return [key, pair];
 					}),
@@ -548,12 +524,6 @@ export const removeKeysFromExpression = (
 				}
 			}
 		});
-
-		// Clean up any remaining trailing AND/OR operators and extra whitespace
-		updatedExpression = updatedExpression
-			.replace(/\s+(AND|OR)\s*$/i, '') // Remove trailing AND/OR
-			.replace(/^(AND|OR)\s+/i, '') // Remove leading AND/OR
-			.trim();
 	}
 
 	return updatedExpression;
@@ -610,25 +580,14 @@ export const convertHavingToExpression = (
  * @returns New aggregation format based on data source
  *
  */
-export const convertAggregationToExpression = ({
-	aggregateOperator,
-	aggregateAttribute,
-	dataSource,
-	timeAggregation,
-	spaceAggregation,
-	alias,
-	reduceTo,
-	temporality,
-}: {
-	aggregateOperator: string;
-	aggregateAttribute: BaseAutocompleteData;
-	dataSource: DataSource;
-	timeAggregation?: string;
-	spaceAggregation?: string;
-	alias?: string;
-	reduceTo?: ReduceOperators;
-	temporality?: string;
-}): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
+export const convertAggregationToExpression = (
+	aggregateOperator: string,
+	aggregateAttribute: BaseAutocompleteData,
+	dataSource: DataSource,
+	timeAggregation?: string,
+	spaceAggregation?: string,
+	alias?: string,
+): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
 	// Skip if no operator or attribute key
 	if (!aggregateOperator) {
 		return undefined;
@@ -646,9 +605,7 @@ export const convertAggregationToExpression = ({
 	if (dataSource === DataSource.METRICS) {
 		return [
 			{
-				metricName: aggregateAttribute?.key || '',
-				reduceTo,
-				temporality,
+				metricName: aggregateAttribute.key,
 				timeAggregation: (normalizedTimeAggregation || normalizedOperator) as any,
 				spaceAggregation: (normalizedSpaceAggregation || normalizedOperator) as any,
 			} as MetricAggregation,
@@ -656,9 +613,7 @@ export const convertAggregationToExpression = ({
 	}
 
 	// For traces and logs, use expression format
-	const expression = aggregateAttribute?.key
-		? `${normalizedOperator}(${aggregateAttribute?.key})`
-		: `${normalizedOperator}()`;
+	const expression = `${normalizedOperator}(${aggregateAttribute.key})`;
 
 	if (dataSource === DataSource.TRACES) {
 		return [

frontend/src/constants/localStorage.ts

@@ -32,7 +32,6 @@ export enum LOCALSTORAGE {
 	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
-	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 }

frontend/src/constants/query.ts

@@ -46,7 +46,6 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
-	summaryFilters = 'summaryFilters',
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',

frontend/src/constants/userPreferences.ts

@@ -2,5 +2,4 @@ export const USER_PREFERENCES = {
 	SIDENAV_PINNED: 'sidenav_pinned',
 	NAV_SHORTCUTS: 'nav_shortcuts',
 	LAST_SEEN_CHANGELOG_VERSION: 'last_seen_changelog_version',
-	SPAN_DETAILS_PINNED_ATTRIBUTES: 'span_details_pinned_attributes',
 };

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -48,10 +48,10 @@
 			line-height: 36px;
 		}
 	}
-	&__alert-history-graph {
+	&__graph {
 		margin-top: 80px;
 
-		.alert-history-graph {
+		.graph {
 			width: 100%;
 			height: 72px;
 		}

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -135,8 +135,8 @@ function StatsCard({
 				/>
 			</div>
 
-			<div className="stats-card__alert-history-graph">
-				<div className="alert-history-graph">
+			<div className="stats-card__graph">
+				<div className="graph">
 					{!isEmpty && timeSeries.length > 1 && (
 						<StatsGraph timeSeries={timeSeries} changeDirection={changeDirection} />
 					)}

frontend/src/container/GridCardLayout/GridCard/FullView/WidgetFullView.styles.scss

@@ -4,9 +4,7 @@
 	overflow-y: hidden;
 
 	.full-view-header-container {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
+		height: 40px;
 	}
 
 	.graph-container {
@@ -30,7 +28,7 @@
 		height: calc(100% - 40px);
 	}
 
-	.full-view-graph-container {
+	.list-graph-container {
 		height: calc(100% - 40px);
 		overflow-y: auto;
 	}

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import './WidgetFullView.styles.scss';
 
 import {
@@ -9,31 +8,24 @@ import {
 import { Button, Input, Spin } from 'antd';
 import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import useDrilldown from 'container/GridCardLayout/GridCard/FullView/useDrilldown';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import {
 	timeItems,
 	timePreferance,
 } from 'container/NewWidget/RightContainer/timeItems';
 import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
-import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useChartMutable } from 'hooks/useChartMutable';
-import useComponentPermission from 'hooks/useComponentPermission';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
-import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -60,7 +52,6 @@ function FullView({
 	onClickHandler,
 	customOnDragSelect,
 	setCurrentGraphRef,
-	enableDrillDown = false,
 }: FullViewProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const { selectedTime: globalSelectedTime } = useSelector<
@@ -72,16 +63,12 @@ function FullView({
 	const location = useLocation();
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
-	const { handleRunQuery } = useQueryBuilder();
 
 	useEffect(() => {
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
 	const { selectedDashboard, isDashboardLocked } = useDashboard();
-	const { user } = useAppContext();
-
-	const [editWidget] = useComponentPermission(['edit_widget'], user.role);
 
 	const getSelectedTime = useCallback(
 		() =>
@@ -127,13 +114,6 @@ function FullView({
 		};
 	});
 
-	const { dashboardEditView, handleResetQuery, showResetQuery } = useDrilldown({
-		enableDrillDown,
-		widget,
-		setRequestData,
-		selectedDashboard,
-	});
-
 	useEffect(() => {
 		setRequestData((prev) => ({
 			...prev,
@@ -224,117 +204,71 @@ function FullView({
 
 	return (
 		<div className="full-view-container">
-			<OverlayScrollbar>
-				<>
-					<div className="full-view-header-container">
-						{fullViewOptions && (
-							<TimeContainer $panelType={widget.panelTypes}>
-								{enableDrillDown && (
-									<div className="drildown-options-container">
-										{showResetQuery && (
-											<Button type="link" onClick={handleResetQuery}>
-												Reset Query
-											</Button>
-										)}
-										{editWidget && (
-											<Button
-												className="switch-edit-btn"
-												disabled={response.isFetching || response.isLoading}
-												onClick={(): void => {
-													if (dashboardEditView) {
-														safeNavigate(dashboardEditView);
-													}
-												}}
-											>
-												Switch to Edit Mode
-											</Button>
-										)}
-									</div>
-								)}
-								<div className="time-container">
-									{response.isFetching && (
-										<Spin spinning indicator={<LoadingOutlined spin />} />
-									)}
-									<TimePreference
-										selectedTime={selectedTime}
-										setSelectedTime={setSelectedTime}
-									/>
-									<Button
-										style={{
-											marginLeft: '4px',
-										}}
-										onClick={(): void => {
-											response.refetch();
-										}}
-										type="primary"
-										icon={<SyncOutlined />}
-									/>
-								</div>
-							</TimeContainer>
+			<div className="full-view-header-container">
+				{fullViewOptions && (
+					<TimeContainer $panelType={widget.panelTypes}>
+						{response.isFetching && (
+							<Spin spinning indicator={<LoadingOutlined spin />} />
 						)}
-						{enableDrillDown && (
-							<>
-								<QueryBuilderV2
-									panelType={widget.panelTypes}
-									version={selectedDashboard?.data?.version || 'v3'}
-									isListViewPanel={widget.panelTypes === PANEL_TYPES.LIST}
-									// filterConfigs={filterConfigs}
-									// queryComponents={queryComponents}
-								/>
-								<RightToolbarActions
-									onStageRunQuery={(): void => {
-										handleRunQuery();
-									}}
-								/>
-							</>
-						)}
-					</div>
-
-					<div
-						className={cx('graph-container', {
-							disabled: isDashboardLocked,
-							'height-widget':
-								widget?.mergeAllActiveQueries || widget?.stackedBarChart,
-							'full-view-graph-container': isListView,
-						})}
-						ref={fullViewRef}
-					>
-						<GraphContainer
+						<TimePreference
+							selectedTime={selectedTime}
+							setSelectedTime={setSelectedTime}
+						/>
+						<Button
 							style={{
-								height: isListView ? '100%' : '90%',
+								marginLeft: '4px',
 							}}
-							isGraphLegendToggleAvailable={canModifyChart}
-						>
-							{isTablePanel && (
-								<Input
-									addonBefore={<SearchOutlined size={14} />}
-									className="global-search"
-									placeholder="Search..."
-									allowClear
-									key={widget.id}
-									onChange={(e): void => {
-										setSearchTerm(e.target.value || '');
-									}}
-								/>
-							)}
-							<PanelWrapper
-								queryResponse={response}
-								widget={widget}
-								setRequestData={setRequestData}
-								isFullViewMode
-								onToggleModelHandler={onToggleModelHandler}
-								setGraphVisibility={setGraphsVisibilityStates}
-								graphVisibility={graphsVisibilityStates}
-								onDragSelect={customOnDragSelect ?? onDragSelect}
-								tableProcessedDataRef={tableProcessedDataRef}
-								searchTerm={searchTerm}
-								onClickHandler={onClickHandler}
-								enableDrillDown={enableDrillDown}
-							/>
-						</GraphContainer>
-					</div>
-				</>
-			</OverlayScrollbar>
+							onClick={(): void => {
+								response.refetch();
+							}}
+							type="primary"
+							icon={<SyncOutlined />}
+						/>
+					</TimeContainer>
+				)}
+			</div>
+
+			<div
+				className={cx('graph-container', {
+					disabled: isDashboardLocked,
+					'height-widget': widget?.mergeAllActiveQueries || widget?.stackedBarChart,
+					'list-graph-container': isListView,
+				})}
+				ref={fullViewRef}
+			>
+				<GraphContainer
+					style={{
+						height: isListView ? '100%' : '90%',
+					}}
+					isGraphLegendToggleAvailable={canModifyChart}
+				>
+					{isTablePanel && (
+						<Input
+							addonBefore={<SearchOutlined size={14} />}
+							className="global-search"
+							placeholder="Search..."
+							allowClear
+							key={widget.id}
+							onChange={(e): void => {
+								setSearchTerm(e.target.value || '');
+							}}
+						/>
+					)}
+					<PanelWrapper
+						queryResponse={response}
+						widget={widget}
+						setRequestData={setRequestData}
+						isFullViewMode
+						onToggleModelHandler={onToggleModelHandler}
+						setGraphVisibility={setGraphsVisibilityStates}
+						graphVisibility={graphsVisibilityStates}
+						onDragSelect={customOnDragSelect ?? onDragSelect}
+						tableProcessedDataRef={tableProcessedDataRef}
+						searchTerm={searchTerm}
+						onClickHandler={onClickHandler}
+					/>
+				</GraphContainer>
+			</div>
 		</div>
 	);
 }

frontend/src/container/GridCardLayout/GridCard/FullView/styles.ts

@@ -18,7 +18,6 @@ export const NotFoundContainer = styled.div`
 export const TimeContainer = styled.div<Props>`
 	display: flex;
 	justify-content: flex-end;
-	gap: 16px;
 	align-items: center;
 	${({ $panelType }): FlattenSimpleInterpolation =>
 		$panelType === PANEL_TYPES.TABLE
@@ -26,10 +25,6 @@ export const TimeContainer = styled.div<Props>`
 					margin-bottom: 1rem;
 			  `
 			: css``}
-
-	.time-container {
-		display: flex;
-	}
 `;
 
 export const GraphContainer = styled.div<GraphContainerProps>`

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -59,7 +59,6 @@ export interface FullViewProps {
 	isDependedDataLoaded?: boolean;
 	onToggleModelHandler?: GraphManagerProps['onToggleModelHandler'];
 	setCurrentGraphRef: Dispatch<SetStateAction<RefObject<HTMLDivElement> | null>>;
-	enableDrillDown?: boolean;
 }
 
 export interface GraphManagerProps extends UplotProps {

frontend/src/container/GridCardLayout/GridCard/FullView/useDrilldown.tsx

@@ -1,84 +0,0 @@
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
-
-export interface DrilldownQueryProps {
-	widget: Widgets;
-	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
-	enableDrillDown: boolean;
-	selectedDashboard: Dashboard | undefined;
-}
-
-export interface UseDrilldownReturn {
-	dashboardEditView: string;
-	handleResetQuery: () => void;
-	showResetQuery: boolean;
-}
-
-const useDrilldown = ({
-	enableDrillDown,
-	widget,
-	setRequestData,
-	selectedDashboard,
-}: DrilldownQueryProps): UseDrilldownReturn => {
-	const isMounted = useRef(false);
-	const { redirectWithQueryBuilderData, currentQuery } = useQueryBuilder();
-	const compositeQuery = useGetCompositeQueryParam();
-
-	useEffect(() => {
-		if (enableDrillDown && !!compositeQuery) {
-			setRequestData((prev) => ({
-				...prev,
-				query: compositeQuery,
-			}));
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [currentQuery, compositeQuery]);
-
-	// update composite query with widget query if composite query is not present in url.
-	// Composite query should be in the url if switch to edit mode is clicked or drilldown happens from dashboard.
-	useEffect(() => {
-		if (enableDrillDown && !isMounted.current) {
-			redirectWithQueryBuilderData(compositeQuery || widget.query);
-		}
-		isMounted.current = true;
-	}, [widget, enableDrillDown, compositeQuery, redirectWithQueryBuilderData]);
-
-	const dashboardEditView = selectedDashboard?.id
-		? generateExportToDashboardLink({
-				query: currentQuery,
-				panelType: widget.panelTypes,
-				dashboardId: selectedDashboard?.id || '',
-				widgetId: widget.id,
-		  })
-		: '';
-
-	const showResetQuery = useMemo(
-		() =>
-			JSON.stringify(widget.query?.builder) !==
-			JSON.stringify(compositeQuery?.builder),
-		[widget.query, compositeQuery],
-	);
-
-	const handleResetQuery = useCallback((): void => {
-		redirectWithQueryBuilderData(widget.query);
-	}, [redirectWithQueryBuilderData, widget.query]);
-
-	return {
-		dashboardEditView,
-		handleResetQuery,
-		showResetQuery,
-	};
-};
-
-export default useDrilldown;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -62,7 +62,6 @@ function WidgetGraphComponent({
 	customErrorMessage,
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
-	enableDrillDown,
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
@@ -237,7 +236,6 @@ function WidgetGraphComponent({
 	const onToggleModelHandler = (): void => {
 		const existingSearchParams = new URLSearchParams(search);
 		existingSearchParams.delete(QueryParams.expandedWidgetId);
-		existingSearchParams.delete(QueryParams.compositeQuery);
 		const updatedQueryParams = Object.fromEntries(existingSearchParams.entries());
 		if (queryResponse.data?.payload) {
 			const {
@@ -327,7 +325,6 @@ function WidgetGraphComponent({
 				setHovered(false);
 			}}
 			id={widget.id}
-			className="widget-graph-component-container"
 		>
 			<Modal
 				destroyOnClose
@@ -367,7 +364,6 @@ function WidgetGraphComponent({
 					onClickHandler={onClickHandler ?? graphClickHandler}
 					customOnDragSelect={customOnDragSelect}
 					setCurrentGraphRef={setCurrentGraphRef}
-					enableDrillDown={enableDrillDown}
 				/>
 			</Modal>
 
@@ -400,10 +396,7 @@ function WidgetGraphComponent({
 			)}
 			{(queryResponse.isSuccess || widget.panelTypes === PANEL_TYPES.LIST) && (
 				<div
-					className={cx(
-						'widget-graph-container',
-						`${widget.panelTypes}-panel-container`,
-					)}
+					className={cx('widget-graph-container', widget.panelTypes)}
 					ref={graphRef}
 				>
 					<PanelWrapper
@@ -421,7 +414,6 @@ function WidgetGraphComponent({
 						onOpenTraceBtnClick={onOpenTraceBtnClick}
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
-						enableDrillDown={enableDrillDown}
 					/>
 				</div>
 			)}
@@ -434,7 +426,6 @@ WidgetGraphComponent.defaultProps = {
 	setLayout: undefined,
 	onClickHandler: undefined,
 	customTimeRangeWindowForCoRelation: undefined,
-	enableDrillDown: false,
 };
 
 export default WidgetGraphComponent;

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -13,6 +13,7 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -52,8 +53,6 @@ function GridCardGraph({
 	customTimeRange,
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
-	enableDrillDown,
-	widgetsHavingDynamicVariables,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -63,13 +62,14 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
-		setDashboardQueryRangeCalled,
 		variablesToGetUpdated,
+		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -120,7 +120,11 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const queryEnabledCondition =
+		isVisible &&
+		!isEmptyWidget &&
+		isQueryEnabled &&
+		isEmpty(variablesToGetUpdated);
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -159,24 +163,22 @@ function GridCardGraph({
 		};
 	});
 
-	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
-	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
-	// useEffect(() => {
-	// 	if (variablesToGetUpdated.length > 0) {
-	// 		queryClient.cancelQueries([
-	// 			maxTime,
-	// 			minTime,
-	// 			globalSelectedInterval,
-	// 			variables,
-	// 			widget?.query,
-	// 			widget?.panelTypes,
-	// 			widget.timePreferance,
-	// 			widget.fillSpans,
-	// 			requestData,
-	// 		]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, [variablesToGetUpdated]);
+	useEffect(() => {
+		if (variablesToGetUpdated.length > 0) {
+			queryClient.cancelQueries([
+				maxTime,
+				minTime,
+				globalSelectedInterval,
+				variables,
+				widget?.query,
+				widget?.panelTypes,
+				widget.timePreferance,
+				widget.fillSpans,
+				requestData,
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -197,27 +199,6 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
-	// Bring back dependency on variable chaining for panels to refetch,
-	// but only for non-dynamic variables. We derive a stable token from
-	// the head of the variablesToGetUpdated queue when it's non-dynamic.
-	const nonDynamicVariableChainToken = useMemo(() => {
-		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
-			return undefined;
-		}
-		if (!variables) {
-			return undefined;
-		}
-		const headName = variablesToGetUpdated[0];
-		const variableObj = Object.values(variables).find(
-			(variable) => variable?.name === headName,
-		);
-		if (variableObj && variableObj.type !== 'DYNAMIC') {
-			return headName;
-		}
-		return undefined;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated, variables]);
-
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -237,29 +218,15 @@ function GridCardGraph({
 				maxTime,
 				minTime,
 				globalSelectedInterval,
+				variables,
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (
-								variable.type !== 'DYNAMIC' ||
-								(widgetsHavingDynamicVariables?.[variable.id] &&
-									widgetsHavingDynamicVariables?.[variable.id].includes(widget.id))
-							) {
-								return { ...acc, [id]: variable.selectedValue };
-							}
-							return acc;
-					  }, {})
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
-				// Include non-dynamic variable chaining token to drive refetches
-				// only when a non-dynamic variable is at the head of the queue
-				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -272,7 +239,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
+			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -350,7 +317,6 @@ function GridCardGraph({
 					customErrorMessage={isInternalServerError ? customErrorMessage : undefined}
 					customOnRowClick={customOnRowClick}
 					customTimeRangeWindowForCoRelation={customTimeRangeWindowForCoRelation}
-					enableDrillDown={enableDrillDown}
 				/>
 			)}
 		</div>
@@ -366,7 +332,6 @@ GridCardGraph.defaultProps = {
 	version: 'v3',
 	analyticsEvent: undefined,
 	customTimeRangeWindowForCoRelation: undefined,
-	enableDrillDown: false,
 };
 
 export default memo(GridCardGraph);

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -41,7 +41,6 @@ export interface WidgetGraphComponentProps {
 	customErrorMessage?: string;
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
-	enableDrillDown?: boolean;
 }
 
 export interface GridCardGraphProps {
@@ -70,8 +69,6 @@ export interface GridCardGraphProps {
 	};
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
-	enableDrillDown?: boolean;
-	widgetsHavingDynamicVariables?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -41,11 +41,9 @@
 			}
 		}
 
-		.widget-graph-component-container {
-			.widget-graph-container {
-				&.graph-panel-container {
-					height: 100%;
-				}
+		.widget-graph-container {
+			&.graph {
+				height: 100%;
 			}
 		}
 	}
@@ -91,13 +89,11 @@
 	}
 }
 
-.widget-graph-component-container {
-	.widget-graph-container {
-		height: 100%;
+.widget-graph-container {
+	height: 100%;
 
-		&.graph-panel-container {
-			height: calc(100% - 30px);
-		}
+	&.graph {
+		height: calc(100% - 30px);
 	}
 }
 

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -12,7 +12,6 @@ import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/NewDashboard/DashboardDescription/utils';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -36,7 +35,7 @@ import { ItemCallback, Layout } from 'react-grid-layout';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
-import { IDashboardVariable, Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
@@ -54,12 +53,11 @@ import { WidgetRowHeader } from './WidgetRow';
 
 interface GraphLayoutProps {
 	handle: FullScreenHandle;
-	enableDrillDown?: boolean;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function GraphLayout(props: GraphLayoutProps): JSX.Element {
-	const { handle, enableDrillDown = false } = props;
+	const { handle } = props;
 	const { safeNavigate } = useSafeNavigate();
 	const {
 		selectedDashboard,
@@ -99,22 +97,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
-	const widgetsHavingDynamicVariables = useMemo(() => {
-		const dynamicVariables = Object.values(
-			selectedDashboard?.data?.variables || {},
-		)?.filter((variable: IDashboardVariable) => variable.type === 'DYNAMIC');
-
-		const widgets =
-			selectedDashboard?.data?.widgets?.filter(
-				(widget) => widget.panelTypes !== PANEL_GROUP_TYPES.ROW,
-			) || [];
-
-		return createDynamicVariableToWidgetsMap(
-			dynamicVariables,
-			widgets as Widgets[],
-		);
-	}, [selectedDashboard]);
-
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
@@ -602,8 +584,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									version={ENTITY_VERSION_V5}
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
-									enableDrillDown={enableDrillDown}
-									widgetsHavingDynamicVariables={widgetsHavingDynamicVariables}
 								/>
 							</Card>
 						</CardContainer>
@@ -690,7 +670,3 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 }
 
 export default GraphLayout;
-
-GraphLayout.defaultProps = {
-	enableDrillDown: false,
-};

frontend/src/container/GridCardLayout/index.tsx

@@ -4,17 +4,10 @@ import GraphLayoutContainer from './GridCardLayout';
 
 interface GridGraphProps {
 	handle: FullScreenHandle;
-	enableDrillDown?: boolean;
 }
 function GridGraph(props: GridGraphProps): JSX.Element {
-	const { handle, enableDrillDown = false } = props;
-	return (
-		<GraphLayoutContainer handle={handle} enableDrillDown={enableDrillDown} />
-	);
+	const { handle } = props;
+	return <GraphLayoutContainer handle={handle} />;
 }
 
 export default GridGraph;
-
-GridGraph.defaultProps = {
-	enableDrillDown: false,
-};

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -4,12 +4,10 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
@@ -36,16 +34,6 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 
 	const queryRangeMutation = useMutation(getSubstituteVars);
 
-	const { selectedDashboard } = useDashboard();
-
-	const dynamicVariables = useMemo(
-		() =>
-			Object.values(selectedDashboard?.data?.variables || {})?.filter(
-				(variable: IDashboardVariable) => variable.type === 'DYNAMIC',
-			),
-		[selectedDashboard],
-	);
-
 	const getUpdatedQuery = useCallback(
 		async ({
 			widgetConfig,
@@ -59,7 +47,6 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 				globalSelectedInterval,
 				variables: getDashboardVariables(selectedDashboard?.data?.variables),
 				originalGraphType: widgetConfig.panelTypes,
-				dynamicVariables,
 			});
 
 			// Execute query and process results
@@ -68,7 +55,7 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			// Map query data from API response
 			return mapQueryDataFromApi(queryResult.data.compositeQuery);
 		},
-		[dynamicVariables, globalSelectedInterval, queryRangeMutation],
+		[globalSelectedInterval, queryRangeMutation],
 	);
 
 	return {

frontend/src/container/GridTableComponent/__tests__/response.ts

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 export const tableDataMultipleQueriesSuccessResponse = {
 	columns: [
 		{
@@ -211,278 +210,3 @@ export const expectedOutputWithLegends = {
 		},
 	],
 };
-
-// QB v5 Aggregations Mock Data
-export const tableDataQBv5MultiAggregations = {
-	columns: [
-		{
-			name: 'service.name',
-			queryName: 'A',
-			isValueColumn: false,
-			id: 'service.name',
-		},
-		{
-			name: 'host.name',
-			queryName: 'A',
-			isValueColumn: false,
-			id: 'host.name',
-		},
-		{
-			name: 'count()',
-			queryName: 'A',
-			isValueColumn: true,
-			id: 'A.count()',
-		},
-		{
-			name: 'count_distinct(app.ads.count)',
-			queryName: 'A',
-			isValueColumn: true,
-			id: 'A.count_distinct(app.ads.count)',
-		},
-		{
-			name: 'count()',
-			queryName: 'B',
-			isValueColumn: true,
-			id: 'B.count()',
-		},
-		{
-			name: 'count_distinct(app.ads.count)',
-			queryName: 'B',
-			isValueColumn: true,
-			id: 'B.count_distinct(app.ads.count)',
-		},
-		{
-			name: 'count()',
-			queryName: 'C',
-			isValueColumn: true,
-			id: 'C.count()',
-		},
-		{
-			name: 'count_distinct(app.ads.count)',
-			queryName: 'C',
-			isValueColumn: true,
-			id: 'C.count_distinct(app.ads.count)',
-		},
-	],
-	rows: [
-		{
-			data: {
-				'service.name': 'frontend-proxy',
-				'host.name': 'test-host.name',
-				'A.count()': 144679,
-				'A.count_distinct(app.ads.count)': 0,
-				'B.count()': 144679,
-				'B.count_distinct(app.ads.count)': 0,
-				'C.count()': 144679,
-				'C.count_distinct(app.ads.count)': 0,
-			},
-		},
-		{
-			data: {
-				'service.name': 'frontend',
-				'host.name': 'test-host.name',
-				'A.count()': 142311,
-				'A.count_distinct(app.ads.count)': 0,
-				'B.count()': 142311,
-				'B.count_distinct(app.ads.count)': 0,
-				'C.count()': 142311,
-				'C.count_distinct(app.ads.count)': 0,
-			},
-		},
-	],
-};
-
-export const widgetQueryQBv5MultiAggregations = {
-	clickhouse_sql: [
-		{
-			name: 'A',
-			legend: 'p99',
-			disabled: false,
-			query: '',
-		},
-		{
-			name: 'B',
-			legend: '',
-			disabled: false,
-			query: '',
-		},
-		{
-			name: 'C',
-			legend: 'max',
-			disabled: false,
-			query: '',
-		},
-	],
-	promql: [
-		{
-			name: 'A',
-			query: '',
-			legend: 'p99',
-			disabled: false,
-		},
-		{
-			name: 'B',
-			query: '',
-			legend: '',
-			disabled: false,
-		},
-		{
-			name: 'C',
-			query: '',
-			legend: 'max',
-			disabled: false,
-		},
-	],
-	builder: {
-		queryData: [
-			{
-				dataSource: 'metrics',
-				queryName: 'A',
-				aggregateOperator: 'count',
-				aggregateAttribute: {
-					dataType: 'float64',
-					id: 'signoz_latency--float64--ExponentialHistogram--true',
-					key: 'signoz_latency',
-					type: 'ExponentialHistogram',
-				},
-				timeAggregation: '',
-				spaceAggregation: 'p90',
-				functions: [],
-				filters: {
-					items: [],
-					op: 'AND',
-				},
-				expression: 'A',
-				disabled: false,
-				stepInterval: 60,
-				having: [],
-				limit: null,
-				orderBy: [],
-				groupBy: [
-					{
-						dataType: 'string',
-						key: 'service.name',
-						type: 'tag',
-						id: 'service.name--string--tag--false',
-					},
-					{
-						dataType: 'string',
-						key: 'host.name',
-						type: 'tag',
-						id: 'host.name--string--tag--false',
-					},
-				],
-				legend: 'p99',
-				reduceTo: 'avg',
-			},
-			{
-				dataSource: 'metrics',
-				queryName: 'B',
-				aggregateOperator: 'rate',
-				aggregateAttribute: {
-					dataType: 'float64',
-					id: 'system_disk_operations--float64--Sum--true',
-					key: 'system_disk_operations',
-					type: 'Sum',
-				},
-				timeAggregation: 'rate',
-				spaceAggregation: 'sum',
-				functions: [],
-				filters: {
-					items: [],
-					op: 'AND',
-				},
-				expression: 'B',
-				disabled: false,
-				stepInterval: 60,
-				having: [],
-				limit: null,
-				orderBy: [],
-				groupBy: [
-					{
-						dataType: 'string',
-						key: 'service.name',
-						type: 'tag',
-						id: 'service.name--string--tag--false',
-					},
-					{
-						dataType: 'string',
-						key: 'host.name',
-						type: 'tag',
-						id: 'host.name--string--tag--false',
-					},
-				],
-				legend: '',
-				reduceTo: 'avg',
-			},
-			{
-				dataSource: 'metrics',
-				queryName: 'C',
-				aggregateOperator: 'count',
-				aggregateAttribute: {
-					dataType: 'float64',
-					id: 'signoz_latency--float64--ExponentialHistogram--true',
-					key: 'signoz_latency',
-					type: 'ExponentialHistogram',
-				},
-				timeAggregation: '',
-				spaceAggregation: 'p90',
-				functions: [],
-				filters: {
-					items: [],
-					op: 'AND',
-				},
-				expression: 'C',
-				disabled: false,
-				stepInterval: 60,
-				having: [],
-				limit: null,
-				orderBy: [],
-				groupBy: [
-					{
-						dataType: 'string',
-						key: 'service.name',
-						type: 'tag',
-						id: 'service.name--string--tag--false',
-					},
-					{
-						dataType: 'string',
-						key: 'host.name',
-						type: 'tag',
-						id: 'host.name--string--tag--false',
-					},
-				],
-				legend: 'max',
-				reduceTo: 'avg',
-			},
-		],
-		queryFormulas: [],
-	},
-	id: 'qb-v5-multi-aggregations-test',
-	queryType: 'builder',
-};
-
-export const expectedOutputQBv5MultiAggregations = {
-	dataSource: [
-		{
-			'service.name': 'frontend-proxy',
-			'host.name': 'test-host.name',
-			'A.count()': 144679,
-			'A.count_distinct(app.ads.count)': 0,
-			'B.count()': 144679,
-			'B.count_distinct(app.ads.count)': 0,
-			'C.count()': 144679,
-			'C.count_distinct(app.ads.count)': 0,
-		},
-		{
-			'service.name': 'frontend',
-			'host.name': 'test-host.name',
-			'A.count()': 142311,
-			'A.count_distinct(app.ads.count)': 0,
-			'B.count()': 142311,
-			'B.count_distinct(app.ads.count)': 0,
-			'C.count()': 142311,
-			'C.count_distinct(app.ads.count)': 0,
-		},
-	],
-};

frontend/src/container/GridTableComponent/__tests__/utils.test.tsx

@@ -6,11 +6,8 @@ import {
 	sortFunction,
 } from '../utils';
 import {
-	expectedOutputQBv5MultiAggregations,
 	expectedOutputWithLegends,
 	tableDataMultipleQueriesSuccessResponse,
-	tableDataQBv5MultiAggregations,
-	widgetQueryQBv5MultiAggregations,
 	widgetQueryWithLegend,
 } from './response';
 
@@ -70,7 +67,6 @@ describe('Table Panel utils', () => {
 			isValueColumn: true,
 			name: 'A',
 			queryName: 'A',
-			id: 'A',
 		};
 		// A has value and value is considered bigger than n/a hence 1
 		expect(sortFunction(rowA, rowB, item)).toBe(1);
@@ -132,96 +128,3 @@ describe('Table Panel utils', () => {
 		expect(sortFunction(rowA, rowB, item)).toBe(0);
 	});
 });
-
-describe('Table Panel utils with QB v5 aggregations', () => {
-	it('createColumnsAndDataSource function - QB v5 multi-aggregations', () => {
-		const data = tableDataQBv5MultiAggregations;
-		const query = widgetQueryQBv5MultiAggregations as Query;
-
-		const { columns, dataSource } = createColumnsAndDataSource(data, query);
-
-		// Verify column structure for multi-aggregations
-		expect(columns).toHaveLength(8);
-		expect(columns[0].title).toBe('service.name');
-		expect(columns[1].title).toBe('host.name');
-		// All columns with queryName 'A' get the legend 'p99'
-		expect(columns[2].title).toBe('p99'); // A.count() uses legend from query A
-		expect(columns[3].title).toBe('p99'); // A.count_distinct() uses legend from query A
-		expect(columns[4].title).toBe('count()'); // B.count() uses column name (no legend)
-		expect(columns[5].title).toBe('count_distinct(app.ads.count)'); // B.count_distinct() uses column name
-		expect(columns[6].title).toBe('max'); // C.count() uses legend from query C
-		expect(columns[7].title).toBe('max'); // C.count_distinct() uses legend from query C
-
-		// Verify dataIndex mapping
-		expect((columns[0] as any).dataIndex).toBe('service.name');
-		expect((columns[2] as any).dataIndex).toBe('A.count()');
-		expect((columns[3] as any).dataIndex).toBe('A.count_distinct(app.ads.count)');
-
-		// Verify dataSource structure
-		expect(dataSource).toStrictEqual(
-			expectedOutputQBv5MultiAggregations.dataSource,
-		);
-	});
-
-	it('getQueryLegend function - QB v5 multi-query support', () => {
-		const query = widgetQueryQBv5MultiAggregations as Query;
-
-		expect(getQueryLegend(query, 'A')).toBe('p99');
-		expect(getQueryLegend(query, 'B')).toBeUndefined();
-		expect(getQueryLegend(query, 'C')).toBe('max');
-		expect(getQueryLegend(query, 'D')).toBeUndefined();
-	});
-
-	it('sorter function - QB v5 multi-aggregation columns', () => {
-		const item = {
-			isValueColumn: true,
-			name: 'count()',
-			queryName: 'A',
-			id: 'A.count()',
-		};
-
-		// Test numeric sorting
-		expect(
-			sortFunction(
-				{ 'A.count()': 100, key: '1', timestamp: 1000 },
-				{ 'A.count()': 200, key: '2', timestamp: 1000 },
-				item,
-			),
-		).toBe(-100);
-
-		// Test n/a handling
-		expect(
-			sortFunction(
-				{ 'A.count()': 'n/a', key: '1', timestamp: 1000 },
-				{ 'A.count()': 100, key: '2', timestamp: 1000 },
-				item,
-			),
-		).toBe(-1);
-
-		expect(
-			sortFunction(
-				{ 'A.count()': 100, key: '1', timestamp: 1000 },
-				{ 'A.count()': 'n/a', key: '2', timestamp: 1000 },
-				item,
-			),
-		).toBe(1);
-
-		// Test string sorting
-		expect(
-			sortFunction(
-				{ 'A.count()': 'read', key: '1', timestamp: 1000 },
-				{ 'A.count()': 'write', key: '2', timestamp: 1000 },
-				item,
-			),
-		).toBe(-1);
-
-		// Test equal values
-		expect(
-			sortFunction(
-				{ 'A.count()': 'n/a', key: '1', timestamp: 1000 },
-				{ 'A.count()': 'n/a', key: '2', timestamp: 1000 },
-				item,
-			),
-		).toBe(0);
-	});
-});

frontend/src/container/GridTableComponent/index.tsx

@@ -46,8 +46,6 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
-	panelType,
-	queryRange,
 	...props
 }: GridTableComponentProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
@@ -268,8 +266,6 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
-				panelType={panelType}
-				queryRange={queryRange}
 				onRow={
 					openTracesButton || customOnRowClick
 						? (record): React.HTMLAttributes<HTMLElement> => ({

frontend/src/container/GridTableComponent/types.ts

@@ -1,5 +1,4 @@
 import { TableProps } from 'antd';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { LogsExplorerTableProps } from 'container/LogsExplorerTable/LogsExplorerTable.interfaces';
 import {
 	ThresholdOperators,
@@ -7,10 +6,7 @@ import {
 } from 'container/NewWidget/RightContainer/Threshold/types';
 import { QueryTableProps } from 'container/QueryTable/QueryTable.intefaces';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-import { ColumnUnit, ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { ColumnUnit } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export type GridTableComponentProps = {
@@ -26,13 +22,6 @@ export type GridTableComponentProps = {
 	widgetId?: string;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
-	enableDrillDown?: boolean;
-	contextLinks?: ContextLinksData;
-	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
 } & Pick<LogsExplorerTableProps, 'data'> &
 	Omit<TableProps<RowData>, 'columns' | 'dataSource'>;
 

frontend/src/container/GridTableComponent/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { ColumnType } from 'antd/es/table';
+import { ColumnsType, ColumnType } from 'antd/es/table';
 import { convertUnit } from 'container/NewWidget/RightContainer/dataFormatCategories';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { QUERY_TABLE_CONFIG } from 'container/QueryTable/config';
@@ -9,12 +9,6 @@ import { isEmpty, isNaN } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 
-// Custom column type that extends ColumnType to include isValueColumn
-export interface CustomDataColumnType<T> extends ColumnType<T> {
-	isValueColumn?: boolean;
-	queryName?: string;
-}
-
 // Helper function to evaluate the condition based on the operator
 function evaluateCondition(
 	operator: string | undefined,
@@ -156,14 +150,11 @@ export function sortFunction(
 		name: string;
 		queryName: string;
 		isValueColumn: boolean;
-		id: string;
 	},
 ): number {
-	const colId = item.id;
-	const colName = item.name;
 	// assumption :- number values is bigger than 'n/a'
-	const valueA = Number(a[`${colId}_without_unit`] ?? a[colId] ?? a[colName]);
-	const valueB = Number(b[`${colId}_without_unit`] ?? b[colId] ?? b[colName]);
+	const valueA = Number(a[`${item.name}_without_unit`] ?? a[item.name]);
+	const valueB = Number(b[`${item.name}_without_unit`] ?? b[item.name]);
 
 	// if both the values are numbers then return the difference here
 	if (!isNaN(valueA) && !isNaN(valueB)) {
@@ -181,18 +172,17 @@ export function sortFunction(
 	}
 
 	// if both of them are strings do the localecompare
-	return ((a[colId] as string) || (a[colName] as string) || '').localeCompare(
-		(b[colId] as string) || (b[colName] as string) || '',
+	return ((a[item.name] as string) || '').localeCompare(
+		(b[item.name] as string) || '',
 	);
 }
-
 export function createColumnsAndDataSource(
 	data: TableData,
 	currentQuery: Query,
 	renderColumnCell?: QueryTableProps['renderColumnCell'],
-): { columns: CustomDataColumnType<RowData>[]; dataSource: RowData[] } {
-	const columns: CustomDataColumnType<RowData>[] =
-		data.columns?.reduce<CustomDataColumnType<RowData>[]>((acc, item) => {
+): { columns: ColumnsType<RowData>; dataSource: RowData[] } {
+	const columns: ColumnsType<RowData> =
+		data.columns?.reduce<ColumnsType<RowData>>((acc, item) => {
 			// is the column is the value column then we need to check for the available legend
 			const legend = item.isValueColumn
 				? getQueryLegend(currentQuery, item.queryName)
@@ -203,14 +193,12 @@ export function createColumnsAndDataSource(
 					(query) => query.queryName === item.queryName,
 				)?.aggregations?.length || 0;
 
-			const column: CustomDataColumnType<RowData> = {
+			const column: ColumnType<RowData> = {
 				dataIndex: item.id || item.name,
 				// if no legend present then rely on the column name value
 				title: !isNewAggregation && !isEmpty(legend) ? legend : item.name,
 				width: QUERY_TABLE_CONFIG.width,
-				isValueColumn: item.isValueColumn,
-				queryName: item.queryName,
-				render: renderColumnCell && renderColumnCell[item.id],
+				render: renderColumnCell && renderColumnCell[item.name],
 				sorter: (a: RowData, b: RowData): number => sortFunction(a, b, item),
 			};
 

frontend/src/container/GridValueComponent/index.tsx

@@ -2,11 +2,8 @@ import { Typography } from 'antd';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { generateGridTitle } from 'container/GridPanelSwitch/utils';
-import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
-import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';
 import { memo, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { EQueryType } from 'types/common/dashboard';
 
 import { TitleContainer, ValueContainer } from './styles';
 import { GridValueComponentProps } from './types';
@@ -16,10 +13,6 @@ function GridValueComponent({
 	title,
 	yAxisUnit,
 	thresholds,
-	widget,
-	queryResponse,
-	contextLinks,
-	enableDrillDown = false,
 }: GridValueComponentProps): JSX.Element {
 	const value = ((data[1] || [])[0] || 0) as number;
 
@@ -28,35 +21,6 @@ function GridValueComponent({
 
 	const isDashboardPage = location.pathname.split('/').length === 3;
 
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		onClick,
-		subMenu,
-		setSubMenu,
-		clickedData,
-	} = useCoordinates();
-
-	const { menuItemsConfig } = useGraphContextMenu({
-		widgetId: widget?.id || '',
-		query: widget?.query || {
-			queryType: EQueryType.QUERY_BUILDER,
-			promql: [],
-			builder: { queryFormulas: [], queryData: [] },
-			clickhouse_sql: [],
-			id: '',
-		},
-		graphData: clickedData,
-		onClose,
-		coordinates,
-		subMenu,
-		setSubMenu,
-		contextLinks: contextLinks || { linksData: [] },
-		panelType: widget?.panelTypes,
-		queryRange: queryResponse,
-	});
-
 	if (data.length === 0) {
 		return (
 			<ValueContainer>
@@ -70,22 +34,7 @@ function GridValueComponent({
 			<TitleContainer isDashboardPage={isDashboardPage}>
 				<Typography>{gridTitle}</Typography>
 			</TitleContainer>
-			<ValueContainer
-				onClick={(e): void => {
-					const queryName = (queryResponse?.data?.params as any)?.compositeQuery
-						?.queries[0]?.spec?.name;
-
-					if (!enableDrillDown || !queryName) return;
-
-					// when multiple queries are present, we need to get the query name from the queryResponse
-					// since value panel shows result for the first query
-					const clickedData = {
-						queryName,
-						filters: [],
-					};
-					onClick({ x: e.clientX, y: e.clientY }, clickedData);
-				}}
-			>
+			<ValueContainer>
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
@@ -96,13 +45,6 @@ function GridValueComponent({
 					}
 				/>
 			</ValueContainer>
-			<ContextMenu
-				coordinates={coordinates}
-				popoverPosition={popoverPosition}
-				title={menuItemsConfig.header as string}
-				items={menuItemsConfig.items}
-				onClose={onClose}
-			/>
 		</>
 	);
 }

frontend/src/container/GridValueComponent/styles.ts

@@ -10,7 +10,6 @@ export const ValueContainer = styled.div`
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
-	user-select: none;
 `;
 
 export const TitleContainer = styled.div<Props>`

frontend/src/container/GridValueComponent/types.ts

@@ -1,8 +1,4 @@
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -11,12 +7,4 @@ export type GridValueComponentProps = {
 	title?: React.ReactNode;
 	yAxisUnit?: string;
 	thresholds?: ThresholdProps[];
-	// Context menu related props
-	widget?: Widgets;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
-	contextLinks?: ContextLinksData;
-	enableDrillDown?: boolean;
 };

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

@@ -105,7 +105,7 @@ function EntityMetrics<T>({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -50,10 +50,8 @@ jest.mock('container/InfraMonitoringK8s/commonUtils', () => ({
 }));
 
 const mockUseQueries = jest.fn();
-const mockUseQuery = jest.fn();
 jest.mock('react-query', () => ({
 	useQueries: (queryConfigs: any[]): any[] => mockUseQueries(queryConfigs),
-	useQuery: (config: any): any => mockUseQuery(config),
 }));
 
 jest.mock('hooks/useDarkMode', () => ({
@@ -304,20 +302,6 @@ describe('EntityMetrics', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockUseQueries.mockReturnValue(mockQueries);
-		mockUseQuery.mockReturnValue({
-			data: {
-				data: {
-					data: {
-						variables: {},
-						title: 'Test Dashboard',
-					},
-					id: 'test-dashboard-id',
-				},
-			},
-			isLoading: false,
-			isError: false,
-			refetch: jest.fn(),
-		});
 	});
 
 	it('should render metrics with data', () => {

frontend/src/container/LiveLogs/ListViewPanel/index.tsx

@@ -13,7 +13,7 @@ import { useCallback } from 'react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { SpinnerWrapper } from './styles';
+import { SpinnerWrapper, Wrapper } from './styles';
 
 function ListViewPanel(): JSX.Element {
 	const { config } = useOptionsMenu({
@@ -42,7 +42,7 @@ function ListViewPanel(): JSX.Element {
 	}, [config]);
 
 	return (
-		<div className="live-logs-settings-panel">
+		<Wrapper>
 			<Select
 				getPopupContainer={popupContainer}
 				style={defaultSelectStyle}
@@ -68,7 +68,7 @@ function ListViewPanel(): JSX.Element {
 					<Spinner style={{ height: 'auto' }} />
 				</SpinnerWrapper>
 			)}
-		</div>
+		</Wrapper>
 	);
 }
 

frontend/src/container/LiveLogs/LiveLogsContainer/LiveLogsContainer.styles.scss

@@ -1,26 +0,0 @@
-.live-logs-chart-container {
-	height: 200px;
-	min-height: 200px;
-	border-left: none;
-	border-right: none;
-}
-
-.live-logs-settings-panel {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px;
-	border-bottom: 1px solid var(--bg-ink-300);
-
-	.live-logs-frequency-chart-view-controller {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-}
-
-.lightMode {
-	.live-logs-settings-panel {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -1,89 +1,46 @@
-import './LiveLogsContainer.styles.scss';
-
-import { Button, Switch, Typography } from 'antd';
-import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
+import { Col } from 'antd';
+import Spinner from 'components/Spinner';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
-import { LOCALSTORAGE } from 'constants/localStorage';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { themeColors } from 'constants/theme';
 import GoToTop from 'container/GoToTop';
-import { useOptionsMenu } from 'container/OptionsMenu';
+import FiltersInput from 'container/LiveLogs/FiltersInput';
+import LiveLogsTopNav from 'container/LiveLogsTopNav';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useClickOutside from 'hooks/useClickOutside';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useEventSourceEvent } from 'hooks/useEventSourceEvent';
-import { Sliders } from 'lucide-react';
+import { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload';
 import { useEventSource } from 'providers/EventSource';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-import { validateQuery } from 'utils/queryValidationUtils';
+import { AppState } from 'store/reducers';
+import { ILog } from 'types/api/logs/log';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { idObject } from '../constants';
+import ListViewPanel from '../ListViewPanel';
 import LiveLogsList from '../LiveLogsList';
-import { ILiveLogsLog } from '../LiveLogsList/types';
-import LiveLogsListChart from '../LiveLogsListChart';
 import { QueryHistoryState } from '../types';
+import { prepareQueryByFilter } from '../utils';
+import { ContentWrapper, LiveLogsChart, Wrapper } from './styles';
 
 function LiveLogsContainer(): JSX.Element {
 	const location = useLocation();
-	const [logs, setLogs] = useState<ILiveLogsLog[]>([]);
-	const { currentQuery, stagedQuery } = useQueryBuilder();
-	const [showLiveLogsFrequencyChart, setShowLiveLogsFrequencyChart] = useState(
-		true,
-	);
+	const [logs, setLogs] = useState<ILog[]>([]);
 
-	const listQuery = useMemo(() => {
-		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
-
-		return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
-	}, [stagedQuery]);
+	const { stagedQuery } = useQueryBuilder();
 
 	const queryLocationState = location.state as QueryHistoryState;
 
-	const batchedEventsRef = useRef<ILiveLogsLog[]>([]);
+	const batchedEventsRef = useRef<ILog[]>([]);
 
-	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
-	const menuRef = useRef<HTMLDivElement>(null);
-
-	const prevFilterExpressionRef = useRef<string | null>(null);
-
-	const { options, config } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
-		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
-	});
-
-	const formatItems = [
-		{
-			key: 'raw',
-			label: 'Raw',
-			data: {
-				title: 'max lines per row',
-			},
-		},
-		{
-			key: 'list',
-			label: 'Default',
-		},
-		{
-			key: 'table',
-			label: 'Column',
-			data: {
-				title: 'columns',
-			},
-		},
-	];
-
-	const handleToggleShowFormatOptions = (): void =>
-		setShowFormatMenuItems(!showFormatMenuItems);
-
-	useClickOutside({
-		ref: menuRef,
-		onClickOutside: () => {
-			if (showFormatMenuItems) {
-				setShowFormatMenuItems(false);
-			}
-		},
-	});
+	const { selectedTime: globalSelectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const {
 		handleStartOpenConnection,
@@ -96,7 +53,7 @@ function LiveLogsContainer(): JSX.Element {
 
 	const compositeQuery = useGetCompositeQueryParam();
 
-	const updateLogs = useCallback((newLogs: ILiveLogsLog[]) => {
+	const updateLogs = useCallback((newLogs: ILog[]) => {
 		setLogs((prevState) =>
 			[...newLogs, ...prevState].slice(0, MAX_LOGS_LIST_SIZE),
 		);
@@ -110,7 +67,7 @@ function LiveLogsContainer(): JSX.Element {
 	}, 500);
 
 	const batchLiveLog = useCallback(
-		(log: ILiveLogsLog): void => {
+		(log: ILog): void => {
 			batchedEventsRef.current.push(log);
 
 			debouncedUpdateLogs();
@@ -120,7 +77,7 @@ function LiveLogsContainer(): JSX.Element {
 
 	const handleGetLiveLogs = useCallback(
 		(event: MessageEvent<string>) => {
-			const data: ILiveLogsLog = JSON.parse(event?.data);
+			const data: ILog = JSON.parse(event.data);
 
 			batchLiveLog(data);
 		},
@@ -134,65 +91,72 @@ function LiveLogsContainer(): JSX.Element {
 	useEventSourceEvent('message', handleGetLiveLogs);
 	useEventSourceEvent('error', handleError);
 
-	const openConnection = useCallback(
-		(filterExpression?: string | null) => {
-			handleStartOpenConnection(filterExpression || '');
+	const getPreparedQuery = useCallback(
+		(query: Query): Query => {
+			const firstLogId: string | null = logs.length ? logs[0].id : null;
+
+			const preparedQuery: Query = prepareQueryByFilter(
+				query,
+				idObject,
+				firstLogId,
+			);
+
+			return preparedQuery;
 		},
-		[handleStartOpenConnection],
+		[logs],
+	);
+
+	const openConnection = useCallback(
+		(query: Query) => {
+			const { queryPayload } = prepareQueryRangePayload({
+				query,
+				graphType: PANEL_TYPES.LIST,
+				selectedTime: 'GLOBAL_TIME',
+				globalSelectedInterval: globalSelectedTime,
+			});
+
+			const encodedQueryPayload = encodeURIComponent(JSON.stringify(queryPayload));
+			const queryString = `q=${encodedQueryPayload}`;
+
+			handleStartOpenConnection({ queryString });
+		},
+		[globalSelectedTime, handleStartOpenConnection],
 	);
 
 	const handleStartNewConnection = useCallback(
-		(filterExpression?: string | null) => {
+		(query: Query) => {
 			handleCloseConnection();
 
-			openConnection(filterExpression);
+			const preparedQuery = getPreparedQuery(query);
+
+			openConnection(preparedQuery);
 		},
-		[handleCloseConnection, openConnection],
+		[getPreparedQuery, handleCloseConnection, openConnection],
 	);
 
 	useEffect(() => {
-		const currentFilterExpression =
-			currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
+		if (!compositeQuery) return;
 
-		// Check if filterExpression has actually changed
 		if (
-			!prevFilterExpressionRef.current ||
-			prevFilterExpressionRef.current !== currentFilterExpression
+			(initialLoading && !isConnectionLoading) ||
+			compositeQuery.id !== stagedQuery?.id
 		) {
-			const validationResult = validateQuery(currentFilterExpression || '');
-
-			if (validationResult.isValid) {
-				setLogs([]);
-				batchedEventsRef.current = [];
-				handleStartNewConnection(currentFilterExpression);
-			}
-
-			prevFilterExpressionRef.current = currentFilterExpression || null;
+			handleStartNewConnection(compositeQuery);
 		}
-	}, [currentQuery, handleStartNewConnection]);
-
-	useEffect(() => {
-		if (initialLoading && !isConnectionLoading) {
-			const currentFilterExpression =
-				currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
-
-			const validationResult = validateQuery(currentFilterExpression || '');
-
-			if (validationResult.isValid) {
-				handleStartNewConnection(currentFilterExpression);
-				prevFilterExpressionRef.current = currentFilterExpression || null;
-			} else {
-				handleStartNewConnection(null);
-			}
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [initialLoading, isConnectionLoading, handleStartNewConnection]);
+	}, [
+		compositeQuery,
+		initialLoading,
+		stagedQuery,
+		isConnectionLoading,
+		openConnection,
+		handleStartNewConnection,
+	]);
 
 	useEffect((): (() => void) | undefined => {
-		if (isConnectionError && reconnectDueToError) {
+		if (isConnectionError && reconnectDueToError && compositeQuery) {
 			// Small delay to prevent immediate reconnection attempts
 			const reconnectTimer = setTimeout(() => {
-				handleStartNewConnection();
+				handleStartNewConnection(compositeQuery);
 			}, 1000);
 
 			return (): void => clearTimeout(reconnectTimer);
@@ -205,70 +169,50 @@ function LiveLogsContainer(): JSX.Element {
 		handleStartNewConnection,
 	]);
 
-	// clean up the connection when the component unmounts
-	useEffect(
-		() => (): void => {
-			handleCloseConnection();
-		},
-		[handleCloseConnection],
-	);
+	useEffect(() => {
+		const prefetchedList = queryLocationState?.listQueryPayload[0]?.list;
 
-	const handleToggleFrequencyChart = useCallback(() => {
-		setShowLiveLogsFrequencyChart(!showLiveLogsFrequencyChart);
-	}, [showLiveLogsFrequencyChart]);
+		if (prefetchedList) {
+			const prefetchedLogs: ILog[] = prefetchedList
+				.map((item) => ({
+					...item.data,
+					timestamp: item.timestamp,
+				}))
+				.reverse();
+
+			updateLogs(prefetchedLogs);
+		}
+	}, [queryLocationState, updateLogs]);
 
 	return (
-		<div className="live-logs-container">
-			<div className="live-logs-content">
-				<div className="live-logs-settings-panel">
-					<div className="live-logs-frequency-chart-view-controller">
-						<Typography>Frequency chart</Typography>
-						<Switch
-							size="small"
-							checked={showLiveLogsFrequencyChart}
-							defaultChecked
-							onChange={handleToggleFrequencyChart}
-						/>
-					</div>
-
-					<div className="format-options-container" ref={menuRef}>
-						<Button
-							className="periscope-btn ghost"
-							onClick={handleToggleShowFormatOptions}
-							icon={<Sliders size={14} />}
-						/>
-
-						{showFormatMenuItems && (
-							<LogsFormatOptionsMenu
-								title="FORMAT"
-								items={formatItems}
-								selectedOptionFormat={options.format}
-								config={config}
+		<Wrapper>
+			<LiveLogsTopNav />
+			<ContentWrapper gutter={[0, 20]} style={{ color: themeColors.lightWhite }}>
+				<Col span={24}>
+					<FiltersInput />
+				</Col>
+				{initialLoading && logs.length === 0 ? (
+					<Col span={24}>
+						<Spinner style={{ height: 'auto' }} tip="Fetching Logs" />
+					</Col>
+				) : (
+					<>
+						<Col span={24}>
+							<LiveLogsChart
+								initialData={queryLocationState?.graphQueryPayload || null}
 							/>
-						)}
-					</div>
-				</div>
-
-				{showLiveLogsFrequencyChart && (
-					<div className="live-logs-chart-container">
-						<LiveLogsListChart
-							initialData={queryLocationState?.graphQueryPayload || null}
-							className="live-logs-chart"
-							isShowingLiveLogs
-						/>
-					</div>
+						</Col>
+						<Col span={24}>
+							<ListViewPanel />
+						</Col>
+						<Col span={24}>
+							<LiveLogsList logs={logs} />
+						</Col>
+					</>
 				)}
-
-				<div className="live-logs-list-container">
-					<LiveLogsList
-						logs={logs}
-						isLoading={initialLoading && logs.length === 0}
-					/>
-				</div>
-			</div>
-
-			<GoToTop />
-		</div>
+				<GoToTop />
+			</ContentWrapper>
+		</Wrapper>
 	);
 }
 

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -1,55 +0,0 @@
-.live-logs-container {
-	.live-logs-content {
-		.live-logs-chart-container {
-			padding: 0px 8px;
-
-			.logs-frequency-chart {
-				.ant-card-body {
-					height: 140px;
-					min-height: 140px;
-					padding: 0 16px 22px 16px;
-					font-family: 'Geist Mono';
-				}
-
-				margin-bottom: 0px;
-			}
-		}
-	}
-}
-
-.live-logs-list {
-	.live-logs-list-loading {
-		padding: 16px;
-		text-align: center;
-		color: var(--text-vanilla-100);
-	}
-
-	.live-logs-list-loading {
-		height: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-
-		.loading-live-logs-content {
-			display: flex;
-			align-items: flex-start;
-			flex-direction: column;
-
-			.loading-gif {
-				height: 72px;
-				margin-left: -24px;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.live-logs-list-loading {
-		.loading-live-logs-content {
-			.ant-typography {
-				color: var(--text-ink-500);
-			}
-		}
-	}
-}

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -1,23 +1,24 @@
-import './LiveLogsList.styles.scss';
-
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import Spinner from 'components/Spinner';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
+import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useEventSource } from 'providers/EventSource';
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -25,9 +26,11 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import { LiveLogsListProps } from './types';
 
-function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
+function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
 
+	const { t } = useTranslation(['logs']);
+
 	const { isConnectionLoading } = useEventSource();
 
 	const { activeLogId } = useCopyLogLink();
@@ -40,12 +43,6 @@ function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 		onSetActiveLog,
 	} = useActiveLog();
 
-	// get only data from the logs object
-	const formattedLogs: ILog[] = useMemo(
-		() => logs.map((log) => log?.data).flat(),
-		[logs],
-	);
-
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
@@ -53,8 +50,8 @@ function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 	});
 
 	const activeLogIndex = useMemo(
-		() => formattedLogs.findIndex(({ id }) => id === activeLogId),
-		[formattedLogs, activeLogId],
+		() => logs.findIndex(({ id }) => id === activeLogId),
+		[logs, activeLogId],
 	);
 
 	const selectedFields = convertKeysToColumnFields([
@@ -108,39 +105,30 @@ function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 		});
 	}, [activeLogId, activeLogIndex]);
 
-	const isLoadingList = isConnectionLoading && formattedLogs.length === 0;
+	const isLoadingList = isConnectionLoading && logs.length === 0;
 
-	const renderLoading = useCallback(
-		() => (
-			<div className="live-logs-list-loading">
-				<div className="loading-live-logs-content">
-					<img
-						className="loading-gif"
-						src="/Icons/loading-plane.gif"
-						alt="wait-icon"
-					/>
-
-					<Typography>Fetching live logs...</Typography>
-				</div>
-			</div>
-		),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
+	if (isLoadingList) {
+		return <Spinner style={{ height: 'auto' }} tip="Fetching Logs" />;
+	}
 
 	return (
-		<div className="live-logs-list">
-			{(formattedLogs.length === 0 || isLoading || isLoadingList) &&
-				renderLoading()}
+		<>
+			{options.format !== OptionFormatTypes.TABLE && (
+				<Heading>
+					<Typography.Text>Event</Typography.Text>
+				</Heading>
+			)}
 
-			{formattedLogs.length !== 0 && (
+			{logs.length === 0 && <Typography>{t('fetching_log_lines')}</Typography>}
+
+			{logs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
 						<InfinityTableView
 							ref={ref}
 							isLoading={false}
 							tableViewProps={{
-								logs: formattedLogs,
+								logs,
 								fields: selectedFields,
 								linesPerRow: options.maxLines,
 								fontSize: options.fontSize,
@@ -154,8 +142,8 @@ function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 								<Virtuoso
 									ref={ref}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
-									data={formattedLogs}
-									totalCount={formattedLogs.length}
+									data={logs}
+									totalCount={logs.length}
 									itemContent={getItemContent}
 								/>
 							</OverlayScrollbar>
@@ -163,18 +151,15 @@ function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 					)}
 				</InfinityWrapperStyled>
 			)}
-
-			{activeLog && (
-				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
-					log={activeLog}
-					onClose={onClearActiveLog}
-					onAddToQuery={onAddToQuery}
-					onGroupByAttribute={onGroupByAttribute}
-					onClickActionItem={onAddToQuery}
-				/>
-			)}
-		</div>
+			<LogDetail
+				selectedTab={VIEW_TYPES.OVERVIEW}
+				log={activeLog}
+				onClose={onClearActiveLog}
+				onAddToQuery={onAddToQuery}
+				onGroupByAttribute={onGroupByAttribute}
+				onClickActionItem={onAddToQuery}
+			/>
+		</>
 	);
 }
 

frontend/src/container/LiveLogs/LiveLogsList/types.ts

@@ -1,11 +1,5 @@
 import { ILog } from 'types/api/logs/log';
 
-export interface ILiveLogsLog {
-	data: ILog[];
-	timestamp: number;
-}
-
 export type LiveLogsListProps = {
-	logs: ILiveLogsLog[];
-	isLoading: boolean;
+	logs: ILog[];
 };

frontend/src/container/LiveLogs/LiveLogsListChart/index.tsx

@@ -9,33 +9,24 @@ import { useMemo } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-import { validateQuery } from 'utils/queryValidationUtils';
 
 import { LiveLogsListChartProps } from './types';
 
 function LiveLogsListChart({
 	className,
 	initialData,
-	isShowingLiveLogs = false,
 }: LiveLogsListChartProps): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 	const { isConnectionOpen } = useEventSource();
 
 	const listChartQuery: Query | null = useMemo(() => {
-		if (!currentQuery) return null;
-
-		const currentFilterExpression =
-			currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
-
-		const validationResult = validateQuery(currentFilterExpression || '');
-
-		if (!validationResult.isValid) return null;
+		if (!stagedQuery) return null;
 
 		return {
-			...currentQuery,
+			...stagedQuery,
 			builder: {
-				...currentQuery.builder,
-				queryData: currentQuery.builder.queryData.map((item) => ({
+				...stagedQuery.builder,
+				queryData: stagedQuery.builder.queryData.map((item) => ({
 					...item,
 					disabled: false,
 					aggregateOperator: LogsAggregatorOperator.COUNT,
@@ -48,7 +39,7 @@ function LiveLogsListChart({
 				})),
 			},
 		};
-	}, [currentQuery]);
+	}, [stagedQuery]);
 
 	const { data, isFetching } = useGetExplorerQueryRange(
 		listChartQuery,
@@ -71,15 +62,12 @@ function LiveLogsListChart({
 	}, [data, initialData]);
 
 	return (
-		<div className="live-logs-chart-container">
-			<LogsExplorerChart
-				isLoading={initialData ? false : isFetching}
-				data={chartData}
-				isLabelEnabled={false}
-				className={className}
-				isLogsExplorerViews={isShowingLiveLogs}
-			/>
-		</div>
+		<LogsExplorerChart
+			isLoading={initialData ? false : isFetching}
+			data={chartData}
+			isLabelEnabled={false}
+			className={className}
+		/>
 	);
 }
 

frontend/src/container/LiveLogs/LiveLogsListChart/types.ts

@@ -3,5 +3,4 @@ import { QueryData } from 'types/api/widgets/getQuery';
 export type LiveLogsListChartProps = {
 	className?: string;
 	initialData: QueryData[] | null;
-	isShowingLiveLogs: boolean;
 };

frontend/src/container/LiveLogs/LiveLogsPauseResume/LiveLogsPauseResume.tsx

@@ -1,90 +0,0 @@
-import { PauseCircleFilled, PlayCircleFilled } from '@ant-design/icons';
-import { Button } from 'antd';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useEventSource } from 'providers/EventSource';
-import { useCallback, useEffect } from 'react';
-import { validateQuery } from 'utils/queryValidationUtils';
-
-function LiveLogsPauseResume(): JSX.Element {
-	const {
-		isConnectionOpen,
-		isConnectionLoading,
-		initialLoading,
-		handleCloseConnection,
-		handleStartOpenConnection,
-		handleSetInitialLoading,
-	} = useEventSource();
-
-	const { currentQuery } = useQueryBuilder();
-
-	const isPlaying = isConnectionOpen || isConnectionLoading || initialLoading;
-
-	const openConnection = useCallback(
-		(filterExpression?: string | null) => {
-			handleStartOpenConnection(filterExpression || '');
-		},
-		[handleStartOpenConnection],
-	);
-
-	const handleStartNewConnection = useCallback(
-		(filterExpression?: string | null) => {
-			handleCloseConnection();
-
-			openConnection(filterExpression);
-		},
-		[handleCloseConnection, openConnection],
-	);
-
-	const onLiveButtonClick = useCallback(() => {
-		if (initialLoading) {
-			handleSetInitialLoading(false);
-		}
-
-		if ((!isConnectionOpen && isConnectionLoading) || isConnectionOpen) {
-			handleCloseConnection();
-		} else {
-			const currentFilterExpression =
-				currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
-
-			const validationResult = validateQuery(currentFilterExpression || '');
-
-			if (validationResult.isValid) {
-				handleStartNewConnection(currentFilterExpression);
-			} else {
-				handleStartNewConnection(null);
-			}
-		}
-	}, [
-		initialLoading,
-		isConnectionOpen,
-		isConnectionLoading,
-		currentQuery,
-		handleSetInitialLoading,
-		handleCloseConnection,
-		handleStartNewConnection,
-	]);
-
-	// clean up the connection when the component unmounts
-	useEffect(
-		() => (): void => {
-			handleCloseConnection();
-		},
-		[handleCloseConnection],
-	);
-
-	return (
-		<div className="live-logs-pause-resume">
-			<Button
-				icon={isPlaying ? <PauseCircleFilled /> : <PlayCircleFilled />}
-				danger={isPlaying}
-				onClick={onLiveButtonClick}
-				type="primary"
-				className={`periscope-btn ${isPlaying ? 'warning' : 'success'}`}
-			>
-				{isPlaying ? 'Pause' : 'Resume'}
-			</Button>
-		</div>
-	);
-}
-
-export default LiveLogsPauseResume;

frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts

@@ -6,5 +6,4 @@ export type LogsExplorerChartProps = {
 	isLogsExplorerViews?: boolean;
 	isLabelEnabled?: boolean;
 	className?: string;
-	isShowingLiveLogs?: boolean;
 };

frontend/src/container/LogsExplorerChart/index.tsx

@@ -25,7 +25,6 @@ function LogsExplorerChart({
 	isLabelEnabled = true,
 	className,
 	isLogsExplorerViews = false,
-	isShowingLiveLogs = false,
 }: LogsExplorerChartProps): JSX.Element {
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -56,11 +55,6 @@ function LogsExplorerChart({
 
 	const onDragSelect = useCallback(
 		(start: number, end: number): void => {
-			// Do not allow dragging on live logs chart
-			if (isShowingLiveLogs) {
-				return;
-			}
-
 			const startTimestamp = Math.trunc(start);
 			const endTimestamp = Math.trunc(end);
 
@@ -81,7 +75,7 @@ function LogsExplorerChart({
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 			safeNavigate(generatedUrl);
 		},
-		[dispatch, location.pathname, safeNavigate, urlQuery, isShowingLiveLogs],
+		[dispatch, location.pathname, safeNavigate, urlQuery],
 	);
 
 	const graphData = useMemo(

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -17,7 +17,7 @@ import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { isEmpty, isEqual } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { ILog } from 'types/api/logs/log';
 
 interface ColumnViewProps {
@@ -51,8 +51,6 @@ function ColumnView({
 		onGroupByAttribute: handleGroupByAttribute,
 	} = useActiveLog();
 
-	const [showActiveLog, setShowActiveLog] = useState<boolean>(false);
-
 	const { queryData: activeLogId } = useUrlQueryData<string | null>(
 		QueryParams.activeLogId,
 		null,
@@ -74,10 +72,9 @@ function ColumnView({
 
 			if (log) {
 				handleSetActiveLog(log);
-				setShowActiveLog(true);
 			}
 		}
-	}, []);
+	}, [activeLogId, logs, handleSetActiveLog]);
 
 	const tableViewProps = {
 		logs,
@@ -91,6 +88,7 @@ function ColumnView({
 	const { dataSource, columns } = useTableView({
 		...tableViewProps,
 		onClickExpand: handleSetActiveLog,
+		onOpenLogsContext: handleClearActiveLog,
 	});
 
 	const { draggedColumns, onColumnOrderChange } = useDragColumns<
@@ -224,22 +222,9 @@ function ColumnView({
 	const handleRowClick = (row: Row<Record<string, unknown>>): void => {
 		const currentLog = logs.find(({ id }) => id === row.original.id);
 
-		setShowActiveLog(true);
 		handleSetActiveLog(currentLog as ILog);
 	};
 
-	const removeQueryParam = (key: string): void => {
-		const url = new URL(window.location.href);
-		url.searchParams.delete(key);
-		window.history.replaceState({}, '', url);
-	};
-
-	const handleLogDetailClose = (): void => {
-		removeQueryParam(QueryParams.activeLogId);
-		handleClearActiveLog();
-		setShowActiveLog(false);
-	};
-
 	return (
 		<div
 			className={`logs-list-table-view-container ${
@@ -261,11 +246,11 @@ function ColumnView({
 				scrollToIndexRef={scrollToIndexRef}
 			/>
 
-			{showActiveLog && activeLog && (
+			{activeLog && (
 				<LogDetail
 					selectedTab={VIEW_TYPES.OVERVIEW}
 					log={activeLog}
-					onClose={handleLogDetailClose}
+					onClose={handleClearActiveLog}
 					onAddToQuery={handleAddToQuery}
 					onClickActionItem={handleAddToQuery}
 					onGroupByAttribute={handleGroupByAttribute}

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

@@ -141,7 +141,6 @@ describe('LogsExplorerList - empty states', () => {
 						listQueryKeyRef={{ current: {} }}
 						chartQueryKeyRef={{ current: {} }}
 						setWarning={(): void => {}}
-						showLiveLogs={false}
 					/>
 				</PreferenceContextProvider>
 			</QueryBuilderContext.Provider>,
@@ -206,7 +205,6 @@ describe('LogsExplorerList - empty states', () => {
 						listQueryKeyRef={{ current: {} }}
 						chartQueryKeyRef={{ current: {} }}
 						setWarning={(): void => {}}
-						showLiveLogs={false}
 					/>
 				</PreferenceContextProvider>
 			</QueryBuilderContext.Provider>,

frontend/src/container/LogsExplorerList/index.tsx

@@ -50,6 +50,7 @@ function LogsExplorerList({
 	isFilterApplied,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
+
 	const { activeLogId } = useCopyLogLink();
 
 	const {

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,174 +0,0 @@
-import { Button, Switch, Typography } from 'antd';
-import { WsDataEvent } from 'api/common/getQueryStats';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
-import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import Download from 'container/DownloadV2/DownloadV2';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import useClickOutside from 'hooks/useClickOutside';
-import { ArrowUp10, Minus, Sliders } from 'lucide-react';
-import { useRef, useState } from 'react';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
-
-import QueryStatus from './QueryStatus';
-
-function LogsActionsContainer({
-	listQuery,
-	queryStats,
-	selectedPanelType,
-	showFrequencyChart,
-	handleToggleFrequencyChart,
-	orderBy,
-	setOrderBy,
-	flattenLogData,
-	isFetching,
-	isLoading,
-	isError,
-	isSuccess,
-}: {
-	listQuery: any;
-	selectedPanelType: PANEL_TYPES;
-	showFrequencyChart: boolean;
-	handleToggleFrequencyChart: () => void;
-	orderBy: string;
-	setOrderBy: (value: string) => void;
-	flattenLogData: any;
-	isFetching: boolean;
-	isLoading: boolean;
-	isError: boolean;
-	isSuccess: boolean;
-	queryStats: WsDataEvent | undefined;
-}): JSX.Element {
-	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
-	const menuRef = useRef<HTMLDivElement>(null);
-
-	const { options, config } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
-		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
-	});
-
-	const formatItems = [
-		{
-			key: 'raw',
-			label: 'Raw',
-			data: {
-				title: 'max lines per row',
-			},
-		},
-		{
-			key: 'list',
-			label: 'Default',
-		},
-		{
-			key: 'table',
-			label: 'Column',
-			data: {
-				title: 'columns',
-			},
-		},
-	];
-
-	const handleToggleShowFormatOptions = (): void =>
-		setShowFormatMenuItems(!showFormatMenuItems);
-
-	useClickOutside({
-		ref: menuRef,
-		onClickOutside: () => {
-			if (showFormatMenuItems) {
-				setShowFormatMenuItems(false);
-			}
-		},
-	});
-
-	return (
-		<div className="logs-actions-container">
-			<div className="tab-options">
-				<div className="tab-options-left">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<div className="frequency-chart-view-controller">
-							<Typography>Frequency chart</Typography>
-							<Switch
-								size="small"
-								checked={showFrequencyChart}
-								defaultChecked
-								onChange={handleToggleFrequencyChart}
-							/>
-						</div>
-					)}
-				</div>
-
-				<div className="tab-options-right">
-					{selectedPanelType === PANEL_TYPES.LIST && (
-						<>
-							<div className="order-by-container">
-								<div className="order-by-label">
-									Order by <Minus size={14} /> <ArrowUp10 size={14} />
-								</div>
-
-								<ListViewOrderBy
-									value={orderBy}
-									onChange={(value): void => setOrderBy(value)}
-									dataSource={DataSource.LOGS}
-								/>
-							</div>
-							<Download
-								data={flattenLogData}
-								isLoading={isFetching}
-								fileName="log_data"
-							/>
-							<div className="format-options-container" ref={menuRef}>
-								<Button
-									className="periscope-btn ghost"
-									onClick={handleToggleShowFormatOptions}
-									icon={<Sliders size={14} />}
-									data-testid="periscope-btn"
-								/>
-
-								{showFormatMenuItems && (
-									<LogsFormatOptionsMenu
-										title="FORMAT"
-										items={formatItems}
-										selectedOptionFormat={options.format}
-										config={config}
-									/>
-								)}
-							</div>
-						</>
-					)}
-
-					{(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
-						selectedPanelType === PANEL_TYPES.TABLE) && (
-						<div className="query-stats">
-							<QueryStatus
-								loading={isLoading || isFetching}
-								error={isError}
-								success={isSuccess}
-							/>
-
-							{queryStats?.read_rows && (
-								<Typography.Text className="rows">
-									{getYAxisFormattedValue(queryStats.read_rows?.toString(), 'short')}{' '}
-									rows
-								</Typography.Text>
-							)}
-
-							{queryStats?.elapsed_ms && (
-								<>
-									<div className="divider" />
-									<Typography.Text className="time">
-										{getYAxisFormattedValue(queryStats?.elapsed_ms?.toString(), 'ms')}
-									</Typography.Text>
-								</>
-							)}
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default LogsActionsContainer;

frontend/src/container/LogsExplorerViews/index.tsx

@@ -1,10 +1,14 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import './LogsExplorerViews.styles.scss';
 
+import { Button, Switch, Typography } from 'antd';
 import getFromLocalstorage from 'api/browser/localstorage/get';
 import setToLocalstorage from 'api/browser/localstorage/set';
 import { getQueryStats, WsDataEvent } from 'api/common/getQueryStats';
 import logEvent from 'api/common/logEvent';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
+import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -18,18 +22,20 @@ import {
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
+import Download from 'container/DownloadV2/DownloadV2';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import GoToTop from 'container/GoToTop';
-import {} from 'container/LiveLogs/constants';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
 import LogsExplorerTable from 'container/LogsExplorerTable';
+import { useOptionsMenu } from 'container/OptionsMenu';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import dayjs from 'dayjs';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useClickOutside from 'hooks/useClickOutside';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
@@ -43,7 +49,7 @@ import {
 	omit,
 	set,
 } from 'lodash-es';
-import LiveLogs from 'pages/LiveLogs';
+import { ArrowUp10, Minus, Sliders } from 'lucide-react';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import {
@@ -71,12 +77,16 @@ import {
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
+import {
+	DataSource,
+	LogsAggregatorOperator,
+	StringOperators,
+} from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
 import { v4 } from 'uuid';
 
-import LogsActionsContainer from './LogsActionsContainer';
+import QueryStatus from './QueryStatus';
 
 function LogsExplorerViewsContainer({
 	selectedView,
@@ -84,7 +94,6 @@ function LogsExplorerViewsContainer({
 	listQueryKeyRef,
 	chartQueryKeyRef,
 	setWarning,
-	showLiveLogs,
 }: {
 	selectedView: ExplorerViews;
 	setIsLoadingQueries: React.Dispatch<React.SetStateAction<boolean>>;
@@ -93,7 +102,6 @@ function LogsExplorerViewsContainer({
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	chartQueryKeyRef: MutableRefObject<any>;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
-	showLiveLogs: boolean;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const dispatch = useDispatch();
@@ -141,6 +149,7 @@ function LogsExplorerViewsContainer({
 	const [page, setPage] = useState<number>(1);
 	const [logs, setLogs] = useState<ILog[]>([]);
 	const [requestData, setRequestData] = useState<Query | null>(null);
+	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
 	const [queryId, setQueryId] = useState<string>(v4());
 	const [queryStats, setQueryStats] = useState<WsDataEvent>();
 	const [listChartQuery, setListChartQuery] = useState<Query | null>(null);
@@ -153,6 +162,12 @@ function LogsExplorerViewsContainer({
 		return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
 	}, [stagedQuery]);
 
+	const { options, config } = useOptionsMenu({
+		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: DataSource.LOGS,
+		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
+	});
+
 	const isMultipleQueries = useMemo(
 		() =>
 			currentQuery?.builder?.queryData?.length > 1 ||
@@ -588,6 +603,41 @@ function LogsExplorerViewsContainer({
 		return isGroupByExist ? data.payload.data.result : firstPayloadQueryArray;
 	}, [stagedQuery, panelType, data, listChartData, listQuery]);
 
+	const formatItems = [
+		{
+			key: 'raw',
+			label: 'Raw',
+			data: {
+				title: 'max lines per row',
+			},
+		},
+		{
+			key: 'list',
+			label: 'Default',
+		},
+		{
+			key: 'table',
+			label: 'Column',
+			data: {
+				title: 'columns',
+			},
+		},
+	];
+
+	const handleToggleShowFormatOptions = (): void =>
+		setShowFormatMenuItems(!showFormatMenuItems);
+
+	const menuRef = useRef<HTMLDivElement>(null);
+
+	useClickOutside({
+		ref: menuRef,
+		onClickOutside: () => {
+			if (showFormatMenuItems) {
+				setShowFormatMenuItems(false);
+			}
+		},
+	});
+
 	useEffect(() => {
 		if (
 			isLoading ||
@@ -645,40 +695,104 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				{!showLiveLogs && (
-					<LogsActionsContainer
-						listQuery={listQuery}
-						queryStats={queryStats}
-						selectedPanelType={selectedPanelType}
-						showFrequencyChart={showFrequencyChart}
-						handleToggleFrequencyChart={handleToggleFrequencyChart}
-						orderBy={orderBy}
-						setOrderBy={setOrderBy}
-						flattenLogData={flattenLogData}
-						isFetching={isFetching}
-						isLoading={isLoading}
-						isError={isError}
-						isSuccess={isSuccess}
-					/>
+				<div className="logs-actions-container">
+					<div className="tab-options">
+						<div className="tab-options-left">
+							{selectedPanelType === PANEL_TYPES.LIST && (
+								<div className="frequency-chart-view-controller">
+									<Typography>Frequency chart</Typography>
+									<Switch
+										size="small"
+										checked={showFrequencyChart}
+										defaultChecked
+										onChange={handleToggleFrequencyChart}
+									/>
+								</div>
+							)}
+						</div>
+
+						<div className="tab-options-right">
+							{selectedPanelType === PANEL_TYPES.LIST && (
+								<>
+									<div className="order-by-container">
+										<div className="order-by-label">
+											Order by <Minus size={14} /> <ArrowUp10 size={14} />
+										</div>
+
+										<ListViewOrderBy
+											value={orderBy}
+											onChange={(value): void => setOrderBy(value)}
+											dataSource={DataSource.LOGS}
+										/>
+									</div>
+									<Download
+										data={flattenLogData}
+										isLoading={isFetching}
+										fileName="log_data"
+									/>
+									<div className="format-options-container" ref={menuRef}>
+										<Button
+											className="periscope-btn ghost"
+											onClick={handleToggleShowFormatOptions}
+											icon={<Sliders size={14} />}
+											data-testid="periscope-btn"
+										/>
+
+										{showFormatMenuItems && (
+											<LogsFormatOptionsMenu
+												title="FORMAT"
+												items={formatItems}
+												selectedOptionFormat={options.format}
+												config={config}
+											/>
+										)}
+									</div>
+								</>
+							)}
+
+							{(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
+								selectedPanelType === PANEL_TYPES.TABLE) && (
+								<div className="query-stats">
+									<QueryStatus
+										loading={isLoading || isFetching}
+										error={isError}
+										success={isSuccess}
+									/>
+
+									{queryStats?.read_rows && (
+										<Typography.Text className="rows">
+											{getYAxisFormattedValue(queryStats.read_rows?.toString(), 'short')}{' '}
+											rows
+										</Typography.Text>
+									)}
+
+									{queryStats?.elapsed_ms && (
+										<>
+											<div className="divider" />
+											<Typography.Text className="time">
+												{getYAxisFormattedValue(queryStats?.elapsed_ms?.toString(), 'ms')}
+											</Typography.Text>
+										</>
+									)}
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+
+				{selectedPanelType === PANEL_TYPES.LIST && showFrequencyChart && (
+					<div className="logs-frequency-chart-container">
+						<LogsExplorerChart
+							className="logs-frequency-chart"
+							isLoading={isFetchingListChartData || isLoadingListChartData}
+							data={chartData}
+							isLogsExplorerViews={panelType === PANEL_TYPES.LIST}
+						/>
+					</div>
 				)}
 
-				{selectedPanelType === PANEL_TYPES.LIST &&
-					showFrequencyChart &&
-					!showLiveLogs && (
-						<div className="logs-frequency-chart-container">
-							<LogsExplorerChart
-								className="logs-frequency-chart"
-								isLoading={isFetchingListChartData || isLoadingListChartData}
-								data={chartData}
-								isLogsExplorerViews={panelType === PANEL_TYPES.LIST}
-							/>
-						</div>
-					)}
-
 				<div className="logs-explorer-views-type-content">
-					{showLiveLogs && <LiveLogs />}
-
-					{selectedPanelType === PANEL_TYPES.LIST && !showLiveLogs && (
+					{selectedPanelType === PANEL_TYPES.LIST && (
 						<LogsExplorerList
 							isLoading={isLoading}
 							isFetching={isFetching}
@@ -691,8 +805,7 @@ function LogsExplorerViewsContainer({
 							isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 						/>
 					)}
-
-					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
+					{selectedPanelType === PANEL_TYPES.TIME_SERIES && (
 						<TimeSeriesView
 							isLoading={isLoading || isFetching}
 							data={data}
@@ -704,7 +817,7 @@ function LogsExplorerViewsContainer({
 						/>
 					)}
 
-					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
+					{selectedPanelType === PANEL_TYPES.TABLE && (
 						<LogsExplorerTable
 							data={
 								(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -174,7 +174,6 @@ const renderer = (): RenderResult =>
 					listQueryKeyRef={{ current: {} }}
 					chartQueryKeyRef={{ current: {} }}
 					setWarning={(): void => {}}
-					showLiveLogs={false}
 				/>
 			</PreferenceContextProvider>
 		</VirtuosoMockContext.Provider>,
@@ -236,7 +235,6 @@ describe('LogsExplorerViews -', () => {
 						listQueryKeyRef={{ current: {} }}
 						chartQueryKeyRef={{ current: {} }}
 						setWarning={(): void => {}}
-						showLiveLogs={false}
 					/>
 				</PreferenceContextProvider>
 			</QueryBuilderContext.Provider>,

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -1,19 +1,22 @@
 import './BreakDown.styles.scss';
 
 import { Alert, Typography } from 'antd';
+// import useFilterConfig from 'components/QuickFilters/hooks/useFilterConfig';
+// import { SignalType } from 'components/QuickFilters/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card, CardContainer } from 'container/GridCardLayout/styles';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+// import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
+// import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
 import {
@@ -106,11 +109,65 @@ function Section(section: MetricSection): JSX.Element {
 	);
 }
 
+// function FilterDropdown({ attrKey }: { attrKey: string }): JSX.Element {
+// 	const {
+// 		data: keyValueSuggestions,
+// 		isLoading: isLoadingKeyValueSuggestions,
+// 	} = useGetQueryKeyValueSuggestions({
+// 		key: attrKey,
+// 		signal: DataSource.METRICS,
+// 		signalSource: 'meter',
+// 		options: {
+// 			keepPreviousData: true,
+// 		},
+// 	});
+
+// 	const responseData = keyValueSuggestions?.data as any;
+// 	const values = responseData?.data?.values || {};
+// 	const stringValues = values.stringValues || [];
+// 	const numberValues = values.numberValues || [];
+
+// 	const stringOptions = stringValues.filter(
+// 		(value: string | null | undefined): value is string =>
+// 			value !== null && value !== undefined && value !== '',
+// 	);
+
+// 	const numberOptions = numberValues
+// 		.filter(
+// 			(value: number | null | undefined): value is number =>
+// 				value !== null && value !== undefined,
+// 		)
+// 		.map((value: number) => value.toString());
+
+// 	const vals = [...stringOptions, ...numberOptions];
+
+// 	return (
+// 		<div className="filter-dropdown">
+// 			<Typography.Text>{attrKey}</Typography.Text>
+// 			<Select
+// 				loading={isLoadingKeyValueSuggestions}
+// 				options={vals?.map((suggestion: any) => ({
+// 					label: suggestion,
+// 					value: suggestion,
+// 				}))}
+// 				placeholder={`Select ${attrKey}`}
+// 			/>
+// 		</div>
+// 	);
+// }
+
 function BreakDown(): JSX.Element {
-	const { isCloudUser } = useGetTenantLicense();
+	// const { customFilters } = useFilterConfig({
+	// 	signal: SignalType.METER_EXPLORER,
+	// 	config: [],
+	// });
+
 	return (
 		<div className="meter-explorer-breakdown">
 			<section className="meter-explorer-date-time">
+				{/* {customFilters.map((filter) => (
+					<FilterDropdown key={filter.key} attrKey={filter.key} />
+				))} */}
 				<DateTimeSelectionV2 showAutoRefresh={false} />
 			</section>
 			<section className="meter-explorer-graphs">
@@ -121,13 +178,11 @@ function BreakDown(): JSX.Element {
 						message="Billing is calculated in UTC. To match your meter data with billing, select full-day ranges in UTC time (00:00 – 23:59 UTC). 
 						For example, if you’re in IST, for the billing of Jan 1, select your time range as Jan 1, 5:30 AM – Jan 2, 5:29 AM IST."
 					/>
-					{isCloudUser && (
-						<Alert
-							type="warning"
-							showIcon
-							message="Meter module data is accurate only from 22nd August 2025, 00:00 UTC onwards. Data before this time was collected during the beta phase and may be inaccurate."
-						/>
-					)}
+					<Alert
+						type="warning"
+						showIcon
+						message="Meter module data is accurate only from 22nd August 2025, 00:00 UTC onwards. Data before this time was collected during the beta phase and may be inaccurate."
+					/>
 				</section>
 				<section className="total">
 					<Section

frontend/src/container/NewDashboard/DashboardSettings/DashboardSettings.styles.scss

@@ -4,12 +4,6 @@
 	font-style: italic;
 }
 
-.apply-to-all-variable-name {
-	font-weight: 700;
-	color: var(--bg-robin-400);
-	font-style: italic;
-}
-
 .dashboard-variable-settings-table {
 	.variable-name-drag {
 		display: flex;
@@ -76,17 +70,6 @@
 				gap: 3px;
 				color: red;
 			}
-
-			.apply-to-all-button {
-				width: min-content;
-				height: 22px;
-				border-radius: 2px;
-				display: flex;
-				padding: 0px 6px;
-				align-items: center;
-				gap: 3px;
-				background: var(--bg-slate-400);
-			}
 		}
 	}
 
@@ -129,10 +112,6 @@
 				.edit-variable-button {
 					background: var(--bg-vanilla-300);
 				}
-
-				.apply-to-all-button {
-					background: var(--bg-vanilla-300);
-				}
 			}
 		}
 

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -1,47 +0,0 @@
-.dynamic-variable-container {
-	margin: 24px 0;
-
-	.dynamic-variable-config-container {
-		display: grid;
-		grid-template-columns: 1fr 32px 200px;
-		gap: 32px;
-		align-items: center;
-		width: 100%;
-
-		.ant-select {
-			.ant-select-selector {
-				border-radius: 4px;
-				border: 1px solid var(--bg-slate-400);
-			}
-		}
-
-		.ant-input {
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400);
-			max-width: 300px;
-		}
-
-		.dynamic-variable-from-text {
-			font-family: 'Space Mono';
-			font-size: 13px;
-			font-weight: 500;
-			white-space: nowrap;
-		}
-	}
-}
-
-.lightMode {
-	.dynamic-variable-container {
-		.dynamic-variable-config-container {
-			.ant-select {
-				.ant-select-selector {
-					border: 1px solid var(--bg-vanilla-300);
-				}
-			}
-
-			.ant-input {
-				border: 1px solid var(--bg-vanilla-300);
-			}
-		}
-	}
-}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -1,196 +0,0 @@
-import './DynamicVariable.styles.scss';
-
-import { Select, Typography } from 'antd';
-import CustomSelect from 'components/NewSelect/CustomSelect';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-import useDebounce from 'hooks/useDebounce';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
-
-enum AttributeSource {
-	ALL_SOURCES = 'All Sources',
-	LOGS = 'Logs',
-	METRICS = 'Metrics',
-	TRACES = 'Traces',
-}
-
-function DynamicVariable({
-	setDynamicVariablesSelectedValue,
-	dynamicVariablesSelectedValue,
-	errorAttributeKeyMessage,
-}: {
-	setDynamicVariablesSelectedValue: Dispatch<
-		SetStateAction<
-			| {
-					name: string;
-					value: string;
-			  }
-			| undefined
-		>
-	>;
-	dynamicVariablesSelectedValue:
-		| {
-				name: string;
-				value: string;
-		  }
-		| undefined;
-	errorAttributeKeyMessage?: string;
-}): JSX.Element {
-	const sources = [
-		AttributeSource.ALL_SOURCES,
-		AttributeSource.LOGS,
-		AttributeSource.TRACES,
-		AttributeSource.METRICS,
-	];
-
-	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
-	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
-	const [selectedAttribute, setSelectedAttribute] = useState<string>();
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-	const [errorMessage, setErrorMessage] = useState<string>();
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const [filteredAttributes, setFilteredAttributes] = useState<
-		Record<string, FieldKey[]>
-	>({});
-
-	useEffect(() => {
-		if (dynamicVariablesSelectedValue?.name) {
-			setSelectedAttribute(dynamicVariablesSelectedValue.name);
-		}
-
-		if (dynamicVariablesSelectedValue?.value) {
-			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const { data, error, isLoading, refetch } = useGetFieldKeys({
-		signal:
-			attributeSource === AttributeSource.ALL_SOURCES
-				? undefined
-				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
-		name: debouncedApiSearchText,
-	});
-
-	const isComplete = useMemo(() => data?.payload?.complete === true, [data]);
-
-	useEffect(() => {
-		if (data) {
-			const newAttributes = data.payload?.keys ?? {};
-			setAttributes(newAttributes);
-			setFilteredAttributes(newAttributes);
-		}
-	}, [data]);
-
-	// refetch when attributeSource changes
-	useEffect(() => {
-		if (attributeSource) {
-			refetch();
-		}
-	}, [attributeSource, refetch, debouncedApiSearchText]);
-
-	// Handle search based on whether we have complete data or not
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				// If complete is true, do client-side filtering
-				if (!text) {
-					setFilteredAttributes(attributes);
-					return;
-				}
-
-				const filtered: Record<string, FieldKey[]> = {};
-				Object.keys(attributes).forEach((key) => {
-					if (key.toLowerCase().includes(text.toLowerCase())) {
-						filtered[key] = attributes[key];
-					}
-				});
-				setFilteredAttributes(filtered);
-			} else {
-				// If complete is false, debounce the API call
-				setApiSearchText(text);
-			}
-		},
-		[attributes, isComplete],
-	);
-
-	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
-	useEffect(() => {
-		if (selectedAttribute || attributeSource) {
-			setDynamicVariablesSelectedValue({
-				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
-				value:
-					attributeSource ||
-					dynamicVariablesSelectedValue?.value ||
-					AttributeSource.ALL_SOURCES,
-			});
-		}
-	}, [
-		selectedAttribute,
-		attributeSource,
-		setDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const errorText = (error as any)?.message || errorMessage;
-	return (
-		<div className="dynamic-variable-container">
-			<div className="dynamic-variable-config-container">
-				<CustomSelect
-					placeholder="Select an Attribute"
-					options={Object.keys(filteredAttributes).map((key) => ({
-						label: key,
-						value: key,
-					}))}
-					loading={isLoading}
-					status={errorText ? 'error' : undefined}
-					onChange={(value): void => {
-						setSelectedAttribute(value);
-					}}
-					showSearch
-					errorMessage={errorText as any}
-					value={selectedAttribute || dynamicVariablesSelectedValue?.name}
-					onSearch={handleSearch}
-					onRetry={(): void => {
-						// reset error message
-						setErrorMessage(undefined);
-						refetch();
-					}}
-				/>
-				<Typography className="dynamic-variable-from-text">from</Typography>
-				<Select
-					placeholder="Source"
-					defaultValue={AttributeSource.ALL_SOURCES}
-					options={sources.map((source) => ({ label: source, value: source }))}
-					onChange={(value): void => setAttributeSource(value as AttributeSource)}
-					value={attributeSource || dynamicVariablesSelectedValue?.value}
-				/>
-			</div>
-			{errorAttributeKeyMessage && (
-				<div>
-					<Typography.Text type="warning">
-						{errorAttributeKeyMessage}
-					</Typography.Text>
-				</div>
-			)}
-		</div>
-	);
-}
-
-DynamicVariable.defaultProps = {
-	errorAttributeKeyMessage: '',
-};
-
-export default DynamicVariable;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -1,377 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-
-import DynamicVariable from '../DynamicVariable';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Mock dependencies
-jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
-	useGetFieldKeys: jest.fn(),
-}));
-
-jest.mock('hooks/useDebounce', () => ({
-	__esModule: true,
-	default: (value: any): any => value, // Return the same value without debouncing for testing
-}));
-
-describe('DynamicVariable Component', () => {
-	const mockSetDynamicVariablesSelectedValue = jest.fn();
-	const ATTRIBUTE_PLACEHOLDER = 'Select an Attribute';
-	const LOADING_TEXT = 'We are updating the values...';
-	const DEFAULT_PROPS = {
-		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue: undefined,
-		errorAttributeKeyMessage: '',
-	};
-
-	const mockFieldKeysResponse = {
-		payload: {
-			keys: {
-				'service.name': [],
-				'http.status_code': [],
-				duration: [],
-			},
-			complete: true,
-		},
-		statusCode: 200,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Default mock implementation
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-	});
-
-	// Helper function to get the attribute select element
-	const getAttributeSelect = (): HTMLElement =>
-		screen.getAllByRole('combobox')[0];
-
-	// Helper function to get the source select element
-	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
-
-	it('renders with default state', () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Check for main components
-		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
-		expect(screen.getByText('All Sources')).toBeInTheDocument();
-		expect(screen.getByText('from')).toBeInTheDocument();
-	});
-
-	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
-		const selectedValue = {
-			name: 'service.name',
-			value: 'Logs',
-		};
-
-		render(
-			<DynamicVariable
-				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
-				dynamicVariablesSelectedValue={selectedValue}
-			/>,
-		);
-
-		// Verify values are set
-		expect(screen.getByText('service.name')).toBeInTheDocument();
-		expect(screen.getByText('Logs')).toBeInTheDocument();
-	});
-
-	it('shows loading state when fetching data', () => {
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: null,
-			isLoading: true,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show loading state
-		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
-	});
-
-	it('shows error message when API fails', () => {
-		const errorMessage = 'Failed to fetch field keys';
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: errorMessage },
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show error message
-		expect(screen.getByText(errorMessage)).toBeInTheDocument();
-	});
-
-	it('updates filteredAttributes when data is loaded', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear in the dropdown
-		await waitFor(() => {
-			// Looking for option-content elements inside the CustomSelect dropdown
-			const options = document.querySelectorAll('.option-content');
-			expect(options.length).toBeGreaterThan(0);
-
-			// Check if all expected options are present
-			let foundServiceName = false;
-			let foundHttpStatusCode = false;
-			let foundDuration = false;
-
-			options.forEach((option) => {
-				const text = option.textContent?.trim();
-				if (text === 'service.name') foundServiceName = true;
-				if (text === 'http.status_code') foundHttpStatusCode = true;
-				if (text === 'duration') foundDuration = true;
-			});
-
-			expect(foundServiceName).toBe(true);
-			expect(foundHttpStatusCode).toBe(true);
-			expect(foundDuration).toBe(true);
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear, then click on service.name
-		await waitFor(() => {
-			// Need to find the option-item containing service.name
-			const serviceNameOption = screen.getByText('service.name');
-			expect(serviceNameOption).not.toBeNull();
-			expect(serviceNameOption?.textContent).toBe('service.name');
-
-			// Click on the option-item that contains service.name
-			const optionElement = serviceNameOption?.closest('.option-item');
-			if (optionElement) {
-				fireEvent.click(optionElement);
-			}
-		});
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
-			name: 'service.name',
-			value: 'All Sources',
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Get the Select component
-		const select = screen
-			.getByText('All Sources')
-			.closest('div[class*="ant-select"]');
-		expect(select).toBeInTheDocument();
-
-		// Directly call the onChange handler by simulating the Select's onChange
-		// Find the props.onChange of the Select component and call it directly
-		fireEvent.mouseDown(select as HTMLElement);
-
-		// Use a more specific selector to find the "Logs" option
-		const optionsContainer = document.querySelector(
-			'.rc-virtual-list-holder-inner',
-		);
-		expect(optionsContainer).not.toBeNull();
-
-		// Find the option with Logs text content
-		const logsOption = Array.from(
-			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
-		)
-			.find((element) => element.textContent === 'Logs')
-			?.closest('.ant-select-item-option');
-
-		expect(logsOption).not.toBeNull();
-
-		// Click on it
-		if (logsOption) {
-			fireEvent.click(logsOption);
-		}
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
-			expect.objectContaining({
-				value: 'Logs',
-			}),
-		);
-	});
-
-	it('filters attributes locally when complete is true', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Mock the filter function behavior
-		const attributeKeys = Object.keys(mockFieldKeysResponse.payload.keys);
-
-		// Only "http.status_code" should match the filter
-		const expectedFilteredKeys = attributeKeys.filter((key) =>
-			key.includes('http'),
-		);
-
-		// Verify our expected filtering logic
-		expect(expectedFilteredKeys).toContain('http.status_code');
-		expect(expectedFilteredKeys).not.toContain('service.name');
-		expect(expectedFilteredKeys).not.toContain('duration');
-
-		// Now verify the component's filtering ability by inputting the search text
-		const inputElement = screen
-			.getAllByRole('combobox')[0]
-			.querySelector('input');
-		if (inputElement) {
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-		}
-	});
-
-	it('triggers API call when complete is false and search text changes', async () => {
-		const mockRefetch = jest.fn();
-
-		// Set up the mock to indicate that data is not complete
-		// and needs to be fetched from the server
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: {
-				payload: {
-					keys: {
-						'http.status_code': [],
-					},
-					complete: false, // This indicates server-side filtering is needed
-				},
-			},
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		// Render with Logs as the initial source
-		render(
-			<DynamicVariable
-				{...DEFAULT_PROPS}
-				dynamicVariablesSelectedValue={{
-					name: '',
-					value: 'Logs',
-				}}
-			/>,
-		);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Now test the search functionality
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find the input element and simulate typing
-		const inputElement = document.querySelector(
-			'.ant-select-selection-search-input',
-		);
-
-		if (inputElement) {
-			// Simulate typing in the search input
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-
-			// Verify that the input has the correct value
-			expect((inputElement as HTMLInputElement).value).toBe('http');
-
-			// Wait for the effect to run and verify refetch was called
-			await waitFor(
-				() => {
-					expect(mockRefetch).toHaveBeenCalled();
-				},
-				{ timeout: 3000 },
-			); // Increase timeout to give more time for the effect to run
-		}
-	});
-
-	it('triggers refetch when attributeSource changes', async () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Find and click on the source select to open dropdown
-		const sourceSelectElement = getSourceSelect();
-		fireEvent.mouseDown(sourceSelectElement);
-
-		// Find and click on the "Metrics" option
-		const metricsOption = screen.getByText('Metrics');
-		fireEvent.click(metricsOption);
-
-		// Wait for the effect to run
-		await waitFor(() => {
-			// Verify that refetch was called after source selection
-			expect(mockRefetch).toHaveBeenCalled();
-		});
-	});
-
-	it('shows retry button when error occurs', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: 'Failed to fetch field keys' },
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find and click reload icon (retry button)
-		const reloadIcon = screen.getByLabelText('reload');
-		fireEvent.click(reloadIcon);
-
-		// Should trigger refetch
-		expect(mockRefetch).toHaveBeenCalled();
-	});
-});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.styles.scss

@@ -99,8 +99,8 @@
 			}
 
 			.variable-type-btn-group {
-				display: grid;
-				grid-template-columns: max-content max-content max-content max-content;
+				display: flex;
+				width: 342px;
 				height: 32px;
 				flex-shrink: 0;
 				border-radius: 2px;
@@ -113,14 +113,12 @@
 					height: 32px;
 					flex-shrink: 0;
 					border-radius: 2px 0px 0px 2px;
-					width: 100%;
 				}
 
 				.variable-type-btn {
 					display: flex;
 					align-items: center;
 					justify-content: center;
-					gap: 8px;
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -201,37 +199,6 @@
 			}
 		}
 
-		.default-value-section {
-			display: grid;
-			grid-template-columns: max-content 1fr;
-
-			.default-value-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-		}
-
-		.dynamic-variable-section {
-			justify-content: space-between;
-			margin-bottom: 0;
-
-			.typography-variables {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				width: 339px;
-			}
-		}
-
 		.variable-textbox-section {
 			justify-content: space-between;
 			margin-bottom: 0;
@@ -479,18 +446,6 @@
 				}
 			}
 
-			.default-value-section {
-				.default-value-description {
-					color: var(--bg-ink-400);
-				}
-			}
-
-			.dynamic-variable-section {
-				.typography-variables {
-					color: var(--bg-ink-400);
-				}
-			}
-
 			.variable-textbox-section {
 				.typography-variables {
 					color: var(--bg-ink-400);

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable sonarjs/no-identical-functions */
-/* eslint-disable sonarjs/no-duplicate-string */
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import {
 	IDashboardVariable,
@@ -27,7 +26,6 @@ jest.mock('uuid', () => ({
 const onCancel = jest.fn();
 const onSave = jest.fn();
 const validateName = jest.fn(() => true);
-const validateAttributeKey = jest.fn(() => true);
 
 // Mode constant
 const VARIABLE_MODE = 'ADD';
@@ -37,8 +35,6 @@ const TEXT = {
 	INCLUDE_ALL_VALUES: 'Include an option for ALL values',
 	ENABLE_MULTI_VALUES: 'Enable multiple values to be checked',
 	VARIABLE_EXISTS: 'Variable name already exists',
-	VARIABLE_WHITESPACE: 'Variable name cannot contain whitespaces',
-	ATTRIBUTE_KEY_EXISTS: 'A variable with this attribute key already exists',
 	SORT_VALUES: 'Sort Values',
 	DEFAULT_VALUE: 'Default Value',
 	ALL_VARIABLES: 'All variables',
@@ -47,7 +43,6 @@ const TEXT = {
 	QUERY: 'Query',
 	TEXTBOX: 'Textbox',
 	CUSTOM: 'Custom',
-	DYNAMIC: 'Dynamic',
 };
 
 // Common test constants
@@ -80,6 +75,23 @@ const TEST_VAR_DESCRIPTIONS = {
 const SAVE_BUTTON_TEXT = 'Save Variable';
 const UNIQUE_NAME_PLACEHOLDER = 'Unique name of the variable';
 
+// Create QueryClient for wrapping the component
+const createTestQueryClient = (): QueryClient =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+// Wrapper component with QueryClientProvider
+const wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => (
+	<QueryClientProvider client={createTestQueryClient()}>
+		{children}
+	</QueryClientProvider>
+);
+
 // Basic variable data for testing
 const basicVariableData: IDashboardVariable = {
 	id: TEST_VAR_IDS.VAR1,
@@ -96,7 +108,6 @@ const renderVariableItem = (
 	variableData: IDashboardVariable = basicVariableData,
 	existingVariables: Record<string, IDashboardVariable> = {},
 	validateNameFn = validateName,
-	validateAttributeKeyFn = validateAttributeKey,
 ): void => {
 	render(
 		<VariableItem
@@ -105,9 +116,9 @@ const renderVariableItem = (
 			onCancel={onCancel}
 			onSave={onSave}
 			validateName={validateNameFn}
-			validateAttributeKey={validateAttributeKeyFn}
 			mode={VARIABLE_MODE}
 		/>,
+		{ wrapper } as any,
 	);
 };
 
@@ -192,184 +203,6 @@ describe('VariableItem Component', () => {
 			// Error should not be visible
 			expect(screen.queryByText(TEXT.VARIABLE_EXISTS)).not.toBeInTheDocument();
 		});
-
-		test('shows error when variable name contains whitespace', () => {
-			renderVariableItem({ ...basicVariableData, name: '' });
-
-			// Enter a name with whitespace
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'variable name' } });
-
-			// Error message should be displayed
-			expect(screen.getByText(TEXT.VARIABLE_WHITESPACE)).toBeInTheDocument();
-
-			// Save button should be disabled
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).toBeDisabled();
-		});
-
-		test('allows variable name without whitespace', () => {
-			renderVariableItem({ ...basicVariableData, name: '' });
-
-			// Enter a valid name without whitespace
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'variable.name' } });
-
-			// Error should not be visible
-			expect(screen.queryByText(TEXT.VARIABLE_WHITESPACE)).not.toBeInTheDocument();
-		});
-
-		test('validates whitespace in auto-generated name for dynamic variables', () => {
-			// Create a dynamic variable with empty name
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: '',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service name', // Contains whitespace
-				dynamicVariablesSource: 'All Sources',
-			};
-
-			renderVariableItem(dynamicVariable);
-
-			// Error message should be displayed for auto-generated name
-			expect(screen.getByText(TEXT.VARIABLE_WHITESPACE)).toBeInTheDocument();
-		});
-	});
-
-	describe('Dynamic Variable Attribute Key Validation', () => {
-		test('shows error when attribute key already exists', async () => {
-			// Mock validateAttributeKey to return false (attribute key exists)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(false);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All Sources',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Switch to Dynamic type to trigger the validation
-			const dynamicButton = findButtonByText(TEXT.DYNAMIC);
-			if (dynamicButton) {
-				fireEvent.click(dynamicButton);
-			}
-
-			// Error message should be displayed
-			await waitFor(() => {
-				expect(screen.getByText(TEXT.ATTRIBUTE_KEY_EXISTS)).toBeInTheDocument();
-			});
-
-			// Save button should be disabled
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).toBeDisabled();
-		});
-
-		test('allows saving when attribute key is unique', async () => {
-			// Mock validateAttributeKey to return true (attribute key is unique)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(true);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All Sources',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Switch to Dynamic type
-			const dynamicButton = findButtonByText(TEXT.DYNAMIC);
-			if (dynamicButton) {
-				fireEvent.click(dynamicButton);
-			}
-
-			// Error should not be visible
-			await waitFor(() => {
-				expect(
-					screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-				).not.toBeInTheDocument();
-			});
-
-			// Save button should not be disabled due to attribute key error
-			const saveButton = screen.getByRole('button', { name: /save variable/i });
-			expect(saveButton).not.toBeDisabled();
-		});
-
-		test('allows same attribute key for current variable being edited', async () => {
-			// Mock validateAttributeKey to return true for same variable
-			const mockValidateAttributeKey = jest.fn().mockImplementation(
-				(attributeKey, currentVariableId) =>
-					// Allow if it's the same variable ID
-					currentVariableId === TEST_VAR_IDS.VAR1,
-			);
-
-			// Create a dynamic variable
-			const dynamicVariable: IDashboardVariable = {
-				...basicVariableData,
-				id: TEST_VAR_IDS.VAR1,
-				name: 'test-variable',
-				type: 'DYNAMIC',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'All Sources',
-			};
-
-			renderVariableItem(
-				dynamicVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// Error should not be visible
-			await waitFor(() => {
-				expect(
-					screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-				).not.toBeInTheDocument();
-			});
-		});
-
-		test('does not validate attribute key for non-dynamic variables', async () => {
-			// Mock validateAttributeKey to return false (would show error for dynamic)
-			const mockValidateAttributeKey = jest.fn().mockReturnValue(false);
-
-			// Create a non-dynamic variable
-			const queryVariable: IDashboardVariable = {
-				...basicVariableData,
-				name: 'test-variable',
-				type: 'QUERY',
-			};
-
-			renderVariableItem(
-				queryVariable,
-				{},
-				validateName,
-				mockValidateAttributeKey,
-			);
-
-			// No error should be displayed for query variables
-			expect(
-				screen.queryByText(TEXT.ATTRIBUTE_KEY_EXISTS),
-			).not.toBeInTheDocument();
-
-			// validateAttributeKey should not be called for non-dynamic variables
-			expect(mockValidateAttributeKey).not.toHaveBeenCalled();
-		});
 	});
 
 	describe('Variable Type Switching', () => {
@@ -491,7 +324,6 @@ describe('VariableItem Component', () => {
 					multiSelect: false,
 					showALLOption: false,
 				}),
-				expect.anything(), // widgetIds prop
 			);
 		});
 	});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -6,39 +6,26 @@ import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
-import { CustomSelect } from 'components/NewSelect';
-import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	createDynamicVariableToWidgetsMap,
-	getWidgetsHavingDynamicVariableAttribute,
-} from 'hooks/dashboard/utils';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { isEmpty, map } from 'lodash-es';
+import { map } from 'lodash-es';
 import {
 	ArrowLeft,
 	Check,
 	ClipboardType,
 	DatabaseZap,
 	LayoutList,
-	Pyramid,
 	X,
 } from 'lucide-react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
 import {
 	IDashboardVariable,
 	TSortVariableValuesType,
 	TVariableQueryType,
 	VariableSortTypeArr,
-	Widgets,
 } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
 import {
@@ -47,9 +34,7 @@ import {
 } from '../../../DashboardVariablesSelection/util';
 import { variablePropsToPayloadVariables } from '../../../utils';
 import { TVariableMode } from '../types';
-import DynamicVariable from './DynamicVariable/DynamicVariable';
 import { LabelContainer, VariableItemRow } from './styles';
-import { WidgetSelector } from './WidgetSelector';
 
 const { Option } = Select;
 
@@ -57,16 +42,8 @@ interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
 	onCancel: () => void;
-	onSave: (
-		mode: TVariableMode,
-		variableData: IDashboardVariable,
-		widgetIds?: string[],
-	) => void;
+	onSave: (mode: TVariableMode, variableData: IDashboardVariable) => void;
 	validateName: (arg0: string) => boolean;
-	validateAttributeKey: (
-		attributeKey: string,
-		currentVariableId?: string,
-	) => boolean;
 	mode: TVariableMode;
 }
 function VariableItem({
@@ -75,21 +52,16 @@ function VariableItem({
 	onCancel,
 	onSave,
 	validateName,
-	validateAttributeKey,
 	mode,
 }: VariableItemProps): JSX.Element {
 	const [variableName, setVariableName] = useState<string>(
 		variableData.name || '',
 	);
-	const [
-		hasUserManuallyChangedName,
-		setHasUserManuallyChangedName,
-	] = useState<boolean>(false);
 	const [variableDescription, setVariableDescription] = useState<string>(
 		variableData.description || '',
 	);
 	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'DYNAMIC',
+		variableData.type || 'QUERY',
 	);
 	const [variableQueryValue, setVariableQueryValue] = useState<string>(
 		variableData.queryValue || '',
@@ -113,162 +85,11 @@ function VariableItem({
 		variableData.showALLOption || false,
 	);
 	const [previewValues, setPreviewValues] = useState<string[]>([]);
-	const [variableDefaultValue, setVariableDefaultValue] = useState<string>(
-		(variableData.defaultValue as string) || '',
-	);
-
-	const [
-		dynamicVariablesSelectedValue,
-		setDynamicVariablesSelectedValue,
-	] = useState<{ name: string; value: string }>();
 
 	// Error messages
 	const [errorName, setErrorName] = useState<boolean>(false);
-	const [errorNameMessage, setErrorNameMessage] = useState<string>('');
-	const [errorAttributeKey, setErrorAttributeKey] = useState<boolean>(false);
-	const [
-		errorAttributeKeyMessage,
-		setErrorAttributeKeyMessage,
-	] = useState<string>('');
 	const [errorPreview, setErrorPreview] = useState<string | null>(null);
 
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesAttribute &&
-			variableData.dynamicVariablesSource
-		) {
-			setDynamicVariablesSelectedValue({
-				name: variableData.dynamicVariablesAttribute,
-				value: variableData.dynamicVariablesSource,
-			});
-		}
-	}, [
-		variableData.dynamicVariablesAttribute,
-		variableData.dynamicVariablesSource,
-	]);
-
-	// Validate attribute key uniqueness for dynamic variables
-	useEffect(() => {
-		if (queryType === 'DYNAMIC' && dynamicVariablesSelectedValue?.name) {
-			if (
-				!validateAttributeKey(dynamicVariablesSelectedValue.name, variableData.id)
-			) {
-				setErrorAttributeKey(true);
-				setErrorAttributeKeyMessage(
-					'A variable with this attribute key already exists',
-				);
-			} else {
-				setErrorAttributeKey(false);
-				setErrorAttributeKeyMessage('');
-			}
-		} else {
-			setErrorAttributeKey(false);
-			setErrorAttributeKeyMessage('');
-		}
-	}, [
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		validateAttributeKey,
-		variableData.id,
-	]);
-
-	// Auto-set variable name to selected attribute name in creation mode when user hasn't manually changed it
-	useEffect(() => {
-		if (
-			mode === 'ADD' && // Only in creation mode
-			queryType === 'DYNAMIC' && // Only for dynamic variables
-			dynamicVariablesSelectedValue?.name && // Attribute is selected
-			!hasUserManuallyChangedName // User hasn't manually changed the name
-		) {
-			const newName = dynamicVariablesSelectedValue.name;
-			setVariableName(newName);
-
-			// Trigger validation for the auto-set name
-			if (/\s/.test(newName)) {
-				setErrorName(true);
-				setErrorNameMessage('Variable name cannot contain whitespaces');
-			} else if (!validateName(newName)) {
-				setErrorName(true);
-				setErrorNameMessage('Variable name already exists');
-			} else {
-				setErrorName(false);
-				setErrorNameMessage('');
-			}
-		}
-	}, [
-		mode,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		hasUserManuallyChangedName,
-		validateName,
-	]);
-
-	const REQUIRED_NAME_MESSAGE = 'Variable name is required';
-
-	// Initialize error state for empty name
-	useEffect(() => {
-		if (!variableName.trim()) {
-			setErrorName(true);
-		}
-	}, [variableName]);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { data: fieldValues } = useGetFieldValues({
-		signal:
-			dynamicVariablesSelectedValue?.value === 'All Sources'
-				? undefined
-				: (dynamicVariablesSelectedValue?.value?.toLowerCase() as
-						| 'traces'
-						| 'logs'
-						| 'metrics'),
-		name: dynamicVariablesSelectedValue?.name || '',
-		enabled:
-			!!dynamicVariablesSelectedValue?.name &&
-			!!dynamicVariablesSelectedValue?.value,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-	});
-
-	const [selectedWidgets, setSelectedWidgets] = useState<string[]>([]);
-
-	const { selectedDashboard } = useDashboard();
-
-	useEffect(() => {
-		const dynamicVariables = Object.values(
-			selectedDashboard?.data?.variables || {},
-		)?.filter((variable: IDashboardVariable) => variable.type === 'DYNAMIC');
-
-		const widgets =
-			selectedDashboard?.data?.widgets?.filter(
-				(widget) => widget.panelTypes !== PANEL_GROUP_TYPES.ROW,
-			) || [];
-		const widgetsHavingDynamicVariables = createDynamicVariableToWidgetsMap(
-			dynamicVariables,
-			widgets as Widgets[],
-		);
-
-		if (variableData?.id && variableData.id in widgetsHavingDynamicVariables) {
-			setSelectedWidgets(widgetsHavingDynamicVariables[variableData.id] || []);
-		} else if (dynamicVariablesSelectedValue?.name) {
-			const widgets = getWidgetsHavingDynamicVariableAttribute(
-				dynamicVariablesSelectedValue?.name,
-				(selectedDashboard?.data?.widgets?.filter(
-					(widget) => widget.panelTypes !== PANEL_GROUP_TYPES.ROW,
-				) || []) as Widgets[],
-				variableData.name,
-			);
-			setSelectedWidgets(widgets || []);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		selectedDashboard,
-		variableData.id,
-		variableData.name,
-	]);
-
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -289,64 +110,6 @@ function VariableItem({
 		variableSortType,
 	]);
 
-	useEffect(() => {
-		if (
-			queryType === 'DYNAMIC' &&
-			fieldValues &&
-			dynamicVariablesSelectedValue?.name &&
-			dynamicVariablesSelectedValue?.value
-		) {
-			setPreviewValues(
-				sortValues(
-					fieldValues.payload?.normalizedValues || [],
-					variableSortType,
-				) as never,
-			);
-		}
-	}, [
-		fieldValues,
-		variableSortType,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const variableValue = useMemo(() => {
-		if (variableMultiSelect) {
-			let value = variableData.selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableDefaultValue) {
-						value = variableDefaultValue;
-					} else {
-						value = previewValues;
-					}
-				} else if (variableDefaultValue) {
-					value = variableDefaultValue;
-				} else {
-					value = previewValues?.[0];
-				}
-			}
-
-			return value;
-		}
-
-		if (isEmpty(variableData.selectedValue)) {
-			if (variableDefaultValue) {
-				return variableDefaultValue;
-			}
-			return previewValues?.[0]?.toString();
-		}
-
-		return variableData.selectedValue || variableDefaultValue;
-	}, [
-		variableMultiSelect,
-		variableData.selectedValue,
-		variableData.showALLOption,
-		variableDefaultValue,
-		previewValues,
-	]);
-
 	const handleSave = (): void => {
 		// Check for cyclic dependencies
 		const newVariable = {
@@ -357,24 +120,15 @@ function VariableItem({
 			customValue: variableCustomValue,
 			textboxValue: variableTextboxValue,
 			multiSelect: variableMultiSelect,
-			showALLOption: queryType === 'DYNAMIC' ? true : variableShowALLOption,
+			showALLOption: variableShowALLOption,
 			sort: variableSortType,
 			...(queryType === 'TEXTBOX' && {
 				selectedValue: (variableData.selectedValue ||
 					variableTextboxValue) as never,
 			}),
-			...(queryType !== 'TEXTBOX' && {
-				defaultValue: variableDefaultValue as never,
-			}),
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
-			...(queryType === 'DYNAMIC' && {
-				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
-				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
-			}),
-			selectedValue: variableValue,
-			allSelected: variableData.allSelected,
 		};
 
 		const allVariables = [...Object.values(existingVariables), newVariable];
@@ -391,7 +145,7 @@ function VariableItem({
 			return;
 		}
 
-		onSave(mode, newVariable, selectedWidgets);
+		onSave(mode, newVariable);
 	};
 
 	// Fetches the preview values for the SQL variable query
@@ -469,34 +223,17 @@ function VariableItem({
 								placeholder="Unique name of the variable"
 								value={variableName}
 								className="name-input"
-								onChange={({ target: { value } }): void => {
-									setVariableName(value);
-									setHasUserManuallyChangedName(true); // Mark that user has manually changed the name
-
-									// Check for empty name
-									if (!value.trim()) {
-										setErrorName(true);
-										setErrorNameMessage(REQUIRED_NAME_MESSAGE);
-									}
-									// Check for whitespace in name
-									else if (/\s/.test(value)) {
-										setErrorName(true);
-										setErrorNameMessage('Variable name cannot contain whitespaces');
-									}
-									// Check for duplicate name
-									else if (!validateName(value) && value !== variableData.name) {
-										setErrorName(true);
-										setErrorNameMessage('Variable name already exists');
-									}
-									// No errors
-									else {
-										setErrorName(false);
-										setErrorNameMessage('');
-									}
+								onChange={(e): void => {
+									setVariableName(e.target.value);
+									setErrorName(
+										!validateName(e.target.value) && e.target.value !== variableData.name,
+									);
 								}}
 							/>
 							<div>
-								<Typography.Text type="warning">{errorNameMessage}</Typography.Text>
+								<Typography.Text type="warning">
+									{errorName ? 'Variable name already exists' : ''}
+								</Typography.Text>
 							</div>
 						</div>
 					</VariableItemRow>
@@ -521,25 +258,18 @@ function VariableItem({
 						<div className="variable-type-btn-group">
 							<Button
 								type="text"
-								icon={<Pyramid size={14} />}
+								icon={<DatabaseZap size={14} />}
 								className={cx(
 									// eslint-disable-next-line sonarjs/no-duplicate-string
 									'variable-type-btn',
-									queryType === 'DYNAMIC' ? 'selected' : '',
+									queryType === 'QUERY' ? 'selected' : '',
 								)}
 								onClick={(): void => {
-									setQueryType('DYNAMIC');
+									setQueryType('QUERY');
 									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
 								}}
 							>
-								Dynamic
-								<Tag bordered={false} className="sidenav-beta-tag" color="geekblue">
-									Beta
-								</Tag>
+								Query
 							</Button>
 							<Button
 								type="text"
@@ -551,10 +281,6 @@ function VariableItem({
 								onClick={(): void => {
 									setQueryType('TEXTBOX');
 									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
 								}}
 							>
 								Textbox
@@ -569,47 +295,12 @@ function VariableItem({
 								onClick={(): void => {
 									setQueryType('CUSTOM');
 									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
 								}}
 							>
 								Custom
 							</Button>
-							<Button
-								type="text"
-								icon={<DatabaseZap size={14} />}
-								className={cx(
-									// eslint-disable-next-line sonarjs/no-duplicate-string
-									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('QUERY');
-									setPreviewValues([]);
-									// Reset manual change flag if no name is entered
-									if (!variableName.trim()) {
-										setHasUserManuallyChangedName(false);
-									}
-								}}
-							>
-								Query
-								<Tag bordered={false} className="sidenav-beta-tag" color="warning">
-									Not Recommended
-								</Tag>
-							</Button>
 						</div>
 					</VariableItemRow>
-					{queryType === 'DYNAMIC' && (
-						<div className="variable-dynamic-section">
-							<DynamicVariable
-								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
-								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
-								errorAttributeKeyMessage={errorAttributeKeyMessage}
-							/>
-						</div>
-					)}
 					{queryType === 'QUERY' && (
 						<div className="query-container">
 							<LabelContainer>
@@ -697,9 +388,7 @@ function VariableItem({
 							/>
 						</VariableItemRow>
 					)}
-					{(queryType === 'QUERY' ||
-						queryType === 'CUSTOM' ||
-						queryType === 'DYNAMIC') && (
+					{(queryType === 'QUERY' || queryType === 'CUSTOM') && (
 						<>
 							<VariableItemRow className="variables-preview-section">
 								<LabelContainer style={{ width: '100%' }}>
@@ -755,7 +444,7 @@ function VariableItem({
 									}}
 								/>
 							</VariableItemRow>
-							{variableMultiSelect && queryType !== 'DYNAMIC' && (
+							{variableMultiSelect && (
 								<VariableItemRow className="all-option-section">
 									<LabelContainer>
 										<Typography className="typography-variables">
@@ -768,40 +457,8 @@ function VariableItem({
 									/>
 								</VariableItemRow>
 							)}
-							<VariableItemRow className="default-value-section">
-								<LabelContainer>
-									<Typography className="typography-variables">Default Value</Typography>
-									<Typography className="default-value-description">
-										{queryType === 'QUERY'
-											? 'Click Test Run Query to see the values or add custom value'
-											: 'Select a value from the preview values or add custom value'}
-									</Typography>
-								</LabelContainer>
-								<CustomSelect
-									placeholder="Select a default value"
-									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value)}
-									options={previewValues.map((value) => ({
-										label: value,
-										value,
-									}))}
-								/>
-							</VariableItemRow>
 						</>
 					)}
-					{queryType === 'DYNAMIC' && (
-						<VariableItemRow className="dynamic-variable-section">
-							<LabelContainer>
-								<Typography className="typography-variables">
-									Select Panels to apply this variable
-								</Typography>
-							</LabelContainer>
-							<WidgetSelector
-								selectedWidgets={selectedWidgets}
-								setSelectedWidgets={setSelectedWidgets}
-							/>
-						</VariableItemRow>
-					)}
 				</div>
 			</div>
 			<div className="variable-item-footer">
@@ -817,7 +474,7 @@ function VariableItem({
 					<Button
 						type="primary"
 						onClick={handleSave}
-						disabled={errorName || errorAttributeKey}
+						disabled={errorName}
 						icon={<Check size={14} />}
 						className="footer-btn-save"
 					>

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/WidgetSelector.tsx

@@ -1,63 +0,0 @@
-import { CustomMultiSelect } from 'components/NewSelect';
-import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
-import { generateGridTitle } from 'container/GridPanelSwitch/utils';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import React from 'react';
-
-export function WidgetSelector({
-	selectedWidgets,
-	setSelectedWidgets,
-}: {
-	selectedWidgets: string[];
-	setSelectedWidgets: (widgets: string[]) => void;
-}): JSX.Element {
-	const { selectedDashboard } = useDashboard();
-
-	// Get layout IDs for cross-referencing
-	const layoutIds = new Set(
-		(selectedDashboard?.data?.layout || []).map((item) => item.i),
-	);
-
-	// Filter and deduplicate widgets by ID, keeping only those with layout entries
-	// and excluding row widgets since they are not panels that can have variables
-	const widgets = Object.values(
-		(selectedDashboard?.data?.widgets || []).reduce(
-			(acc: Record<string, any>, widget: any) => {
-				if (
-					widget.id &&
-					layoutIds.has(widget.id) &&
-					widget.panelTypes !== PANEL_GROUP_TYPES.ROW
-				) {
-					acc[widget.id] = widget;
-				}
-				return acc;
-			},
-			{},
-		),
-	);
-
-	// Filter selectedWidgets to only include widgets that are present in the current layout
-	const validSelectedWidgets = selectedWidgets.filter((widgetId) =>
-		layoutIds.has(widgetId),
-	);
-
-	// Update selectedWidgets if any invalid widgets were removed
-	React.useEffect(() => {
-		if (validSelectedWidgets.length !== selectedWidgets.length) {
-			setSelectedWidgets(validSelectedWidgets);
-		}
-	}, [validSelectedWidgets, selectedWidgets.length, setSelectedWidgets]);
-
-	return (
-		<CustomMultiSelect
-			placeholder="Select Panels"
-			options={widgets.map((widget: any) => ({
-				label: generateGridTitle(widget.title),
-				value: widget.id,
-			}))}
-			value={validSelectedWidgets}
-			onChange={(value): void => setSelectedWidgets(value as string[])}
-			showLabels
-		/>
-	);
-}

frontend/src/container/NewDashboard/DashboardSettings/Variables/addTagFiltersToDashboard.tsx

@@ -1,200 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import {
-	convertFiltersToExpressionWithExistingQuery,
-	removeKeysFromExpression,
-} from 'components/QueryBuilderV2/utils';
-import { cloneDeep, isArray, isEmpty } from 'lodash-es';
-import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import {
-	IBuilderQuery,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-/**
- * Updates the query filters in a builder query by appending new tag filters
- */
-const updateQueryFilters = (
-	queryData: IBuilderQuery,
-	filter: TagFilterItem,
-): IBuilderQuery => {
-	const existingFilters = queryData.filters?.items || [];
-
-	// addition | update
-	const currentFilterKey = filter.key?.key;
-	const valueToAdd = filter.value.toString();
-	const newItems: TagFilterItem[] = [];
-
-	existingFilters.forEach((existingFilter) => {
-		const newFilter = cloneDeep(existingFilter);
-		if (
-			newFilter.key?.key === currentFilterKey &&
-			!(isArray(newFilter.value) && newFilter.value.includes(valueToAdd)) &&
-			newFilter.value !== valueToAdd
-		) {
-			if (isEmpty(newFilter.value)) {
-				newFilter.value = valueToAdd;
-				newFilter.op = 'IN';
-			} else {
-				newFilter.value = (isArray(newFilter.value)
-					? [...newFilter.value, valueToAdd]
-					: [newFilter.value, valueToAdd]) as string[] | string;
-
-				newFilter.op = 'IN';
-			}
-		}
-
-		newItems.push(newFilter);
-	});
-
-	// if yet the filter key doesn't get added then add it
-	if (!newItems.find((item) => item.key?.key === currentFilterKey)) {
-		newItems.push(filter);
-	}
-
-	const newFilterToUpdate = {
-		...queryData.filters,
-		items: newItems,
-		op: queryData.filters?.op || 'AND',
-	};
-
-	return {
-		...queryData,
-		...convertFiltersToExpressionWithExistingQuery(
-			newFilterToUpdate,
-			queryData.filter?.expression,
-		),
-	};
-};
-
-/**
- * Updates a single widget by adding filters to its query
- */
-const updateSingleWidget = (
-	widget: Widgets,
-	filter: TagFilterItem,
-): Widgets => {
-	if (!widget.query?.builder?.queryData || isEmpty(filter)) {
-		return widget;
-	}
-
-	return {
-		...widget,
-		query: {
-			...widget.query,
-			builder: {
-				...widget.query.builder,
-				queryData: widget.query.builder.queryData.map((queryData) =>
-					updateQueryFilters(queryData, filter),
-				),
-			},
-		},
-	};
-};
-
-const removeIfPresent = (
-	queryData: IBuilderQuery,
-	filter: TagFilterItem,
-): IBuilderQuery => {
-	const existingFilters = queryData.filters?.items || [];
-
-	// addition | update
-	const currentFilterKey = filter.key?.key;
-	const valueToAdd = filter.value.toString();
-	const newItems: TagFilterItem[] = [];
-
-	existingFilters.forEach((existingFilter) => {
-		const newFilter = cloneDeep(existingFilter);
-		if (newFilter.key?.key === currentFilterKey) {
-			if (isArray(newFilter.value) && newFilter.value.includes(valueToAdd)) {
-				newFilter.value = newFilter.value.filter((value) => value !== valueToAdd);
-			} else if (newFilter.value === valueToAdd) {
-				return;
-			}
-		}
-
-		newItems.push(newFilter);
-	});
-
-	return {
-		...queryData,
-		filters: {
-			...queryData.filters,
-			items: newItems,
-			op: queryData.filters?.op || 'AND',
-		},
-		filter: {
-			...queryData.filter,
-			expression: removeKeysFromExpression(
-				queryData.filter?.expression ?? '',
-				filter.key?.key ? [filter.key.key] : [],
-				true,
-			),
-		},
-	};
-};
-
-const updateAfterRemoval = (
-	widget: Widgets,
-	filter: TagFilterItem,
-): Widgets => {
-	if (!widget.query?.builder?.queryData || isEmpty(filter)) {
-		return widget;
-	}
-
-	// remove the filters where the current filter is available as value as this widget is not selected anymore, hence removal
-	return {
-		...widget,
-		query: {
-			...widget.query,
-			builder: {
-				...widget.query.builder,
-				queryData: widget.query.builder.queryData.map((queryData) =>
-					removeIfPresent(queryData, filter),
-				),
-			},
-		},
-	};
-};
-
-/**
- * A function that takes a dashboard configuration and a list of tag filters
- * and returns an updated dashboard with the filters appended to widget queries.
- *
- * @param dashboard The dashboard configuration
- * @param filters Array of tag filters to apply to widgets
- * @param widgetIds Optional array of widget IDs to filter which widgets get updated
- * @returns Updated dashboard configuration with filters applied
- */
-export const addTagFiltersToDashboard = (
-	dashboard: Dashboard | undefined,
-	filter: TagFilterItem,
-	widgetIds?: string[],
-	applyToAll?: boolean,
-): Dashboard | undefined => {
-	if (!dashboard || isEmpty(filter)) {
-		return dashboard;
-	}
-
-	// Create a deep copy to avoid mutating the original dashboard
-	const updatedDashboard = cloneDeep(dashboard);
-
-	// Process each widget to add filters
-	if (updatedDashboard.data.widgets) {
-		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
-			(widget) => {
-				// Only apply to widgets with 'query' property
-				if ('query' in widget) {
-					// If widgetIds is provided, only update widgets with matching IDs
-					if (!applyToAll && widgetIds && !widgetIds.includes(widget.id)) {
-						// removal if needed
-						return updateAfterRemoval(widget as Widgets, filter);
-					}
-					return updateSingleWidget(widget as Widgets, filter);
-				}
-				return widget;
-			},
-		);
-	}
-
-	return updatedDashboard;
-};

frontend/src/container/NewDashboard/DashboardSettings/Variables/index.tsx

@@ -15,12 +15,11 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button, Modal, Row, Space, Table, Typography } from 'antd';
 import { RowProps } from 'antd/lib';
 import { convertVariablesToDbFormat } from 'container/NewDashboard/DashboardVariablesSelection/util';
-import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 
@@ -53,10 +52,8 @@ function TableRow({ children, ...props }: RowProps): JSX.Element {
 		// eslint-disable-next-line react/jsx-props-no-spreading
 		<tr {...props} ref={setNodeRef} style={style} {...attributes}>
 			{React.Children.map(children, (child) => {
-				const childElement = child as React.ReactElement;
-				if (childElement.key === 'name') {
-					return React.cloneElement(childElement, {
-						key: 'name-with-drag',
+				if ((child as React.ReactElement).key === 'name') {
+					return React.cloneElement(child as React.ReactElement, {
 						children: (
 							<div className="variable-name-drag">
 								<HolderOutlined
@@ -71,7 +68,7 @@ function TableRow({ children, ...props }: RowProps): JSX.Element {
 					});
 				}
 
-				return childElement;
+				return child;
 			})}
 		</tr>
 	);
@@ -84,8 +81,6 @@ function VariablesSetting({
 }): JSX.Element {
 	const variableToDelete = useRef<IDashboardVariable | null>(null);
 	const [deleteVariableModal, setDeleteVariableModal] = useState(false);
-	const variableToApplyToAll = useRef<IDashboardVariable | null>(null);
-	const [applyToAllModal, setApplyToAllModal] = useState(false);
 
 	const { t } = useTranslation(['dashboard']);
 
@@ -93,9 +88,7 @@ function VariablesSetting({
 
 	const { notifications } = useNotifications();
 
-	const variables = useMemo(() => selectedDashboard?.data?.variables || {}, [
-		selectedDashboard?.data?.variables,
-	]);
+	const { variables = {} } = selectedDashboard?.data || {};
 
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
@@ -134,8 +127,6 @@ function VariablesSetting({
 
 	const updateMutation = useUpdateDashboard();
 
-	const addDynamicVariableToPanels = useAddDynamicVariableToPanels();
-
 	useEffect(() => {
 		const tableRowData = [];
 		const variableOrderArr = [];
@@ -173,31 +164,17 @@ function VariablesSetting({
 
 	const updateVariables = (
 		updatedVariablesData: Dashboard['data']['variables'],
-		currentRequestedId?: string,
-		widgetIds?: string[],
-		applyToAll?: boolean,
 	): void => {
 		if (!selectedDashboard) {
 			return;
 		}
 
-		const newDashboard =
-			(currentRequestedId &&
-				updatedVariablesData[currentRequestedId || '']?.type === 'DYNAMIC' &&
-				addDynamicVariableToPanels(
-					selectedDashboard,
-					updatedVariablesData[currentRequestedId || ''],
-					widgetIds,
-					applyToAll,
-				)) ||
-			selectedDashboard;
-
 		updateMutation.mutateAsync(
 			{
 				id: selectedDashboard.id,
 
 				data: {
-					...newDashboard.data,
+					...selectedDashboard.data,
 					variables: updatedVariablesData,
 				},
 			},
@@ -225,8 +202,6 @@ function VariablesSetting({
 	const onVariableSaveHandler = (
 		mode: TVariableMode,
 		variableData: IDashboardVariable,
-		widgetIds?: string[],
-		applyToAll?: boolean,
 	): void => {
 		const updatedVariableData = {
 			...variableData,
@@ -250,7 +225,7 @@ function VariablesSetting({
 		const variables = convertVariablesToDbFormat(newVariablesArr);
 
 		setVariablesTableData(newVariablesArr);
-		updateVariables(variables, variableData?.id, widgetIds, applyToAll);
+		updateVariables(variables);
 		onDoneVariableViewMode();
 	};
 
@@ -276,46 +251,9 @@ function VariablesSetting({
 		setDeleteVariableModal(false);
 	};
 
-	const onApplyToAllHandler = (variable: IDashboardVariable): void => {
-		variableToApplyToAll.current = variable;
-		setApplyToAllModal(true);
-	};
-
-	const handleApplyToAllConfirm = (): void => {
-		if (variableToApplyToAll.current) {
-			onVariableSaveHandler(
-				variableViewMode || 'EDIT',
-				variableToApplyToAll.current,
-				[],
-				true,
-			);
-		}
-		variableToApplyToAll.current = null;
-		setApplyToAllModal(false);
-	};
-
-	const handleApplyToAllCancel = (): void => {
-		variableToApplyToAll.current = null;
-		setApplyToAllModal(false);
-	};
-
 	const validateVariableName = (name: string): boolean =>
 		!existingVariableNamesMap[name];
 
-	const validateAttributeKey = (
-		attributeKey: string,
-		currentVariableId?: string,
-	): boolean => {
-		// Check if any other dynamic variable already uses this attribute key
-		const isDuplicateAttributeKey = Object.values(variables).some(
-			(variable: IDashboardVariable) =>
-				variable.type === 'DYNAMIC' &&
-				variable.dynamicVariablesAttribute === attributeKey &&
-				variable.id !== currentVariableId, // Exclude current variable being edited
-		);
-		return !isDuplicateAttributeKey;
-	};
-
 	const columns = [
 		{
 			title: 'Variable',
@@ -333,16 +271,6 @@ function VariablesSetting({
 						{variable.description}
 					</Typography.Text>
 					<Space className="actions-btns">
-						{variable.type === 'DYNAMIC' && (
-							<Button
-								type="text"
-								onClick={(): void => onApplyToAllHandler(variable)}
-								className="apply-to-all-button"
-								loading={updateMutation.isLoading}
-							>
-								<Typography.Text>Apply to all</Typography.Text>
-							</Button>
-						)}
 						<Button
 							type="text"
 							onClick={(): void => onVariableViewModeEnter('EDIT', variable)}
@@ -421,7 +349,6 @@ function VariablesSetting({
 					onSave={onVariableSaveHandler}
 					onCancel={onDoneVariableViewMode}
 					validateName={validateVariableName}
-					validateAttributeKey={validateAttributeKey}
 					mode={variableViewMode}
 				/>
 			) : (
@@ -488,24 +415,6 @@ function VariablesSetting({
 					?
 				</Typography.Text>
 			</Modal>
-			<Modal
-				title="Apply variable to all panels"
-				centered
-				open={applyToAllModal}
-				onOk={handleApplyToAllConfirm}
-				onCancel={handleApplyToAllCancel}
-				okText="Apply to all"
-				cancelText="Cancel"
-			>
-				<Typography.Text>
-					Are you sure you want to apply variable{' '}
-					<span className="apply-to-all-variable-name">
-						{variableToApplyToAll?.current?.name}
-					</span>{' '}
-					to all panels? This action may affect panels where this variable is not
-					applicable.
-				</Typography.Text>
-			</Modal>
 		</>
 	);
 }

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

@@ -1,6 +1,6 @@
 import './DashboardVariableSelection.styles.scss';
 
-import { Row } from 'antd';
+import { Alert, Row } from 'antd';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
@@ -9,7 +9,6 @@ import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import DynamicVariableSelection from './DynamicVariableSelection';
 import {
 	buildDependencies,
 	buildDependencyGraph,
@@ -100,23 +99,16 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[JSON.stringify(dependencyData?.order), minTime, maxTime],
 	);
 
-	// Performance optimization: For dynamic variables with allSelected=true, we don't store
-	// individual values in localStorage since we can always derive them from available options.
-	// This makes localStorage much lighter and more efficient.
 	const onValueUpdate = (
 		name: string,
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
+		// isMountedCall?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
-			// For dynamic variables, only store in localStorage when NOT allSelected
-			// This makes localStorage much lighter by avoiding storing all individual values
-			const variable = variables?.[id] || variables?.[name];
-			const isDynamic = variable?.type === 'DYNAMIC';
-			updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);
+			updateLocalStorageDashboardVariables(name, value, allSelected);
 
 			if (selectedDashboard) {
 				setSelectedDashboard((prev) => {
@@ -129,7 +121,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[id],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						if (oldVariables?.[name]) {
@@ -137,7 +128,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[name],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						return {
@@ -180,22 +170,22 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	return (
-		<Row style={{ display: 'flex', gap: '12px' }}>
-			{orderBasedSortedVariables &&
-				Array.isArray(orderBasedSortedVariables) &&
-				orderBasedSortedVariables.length > 0 &&
-				orderBasedSortedVariables.map((variable) =>
-					variable.type === 'DYNAMIC' ? (
-						<DynamicVariableSelection
-							key={`${variable.name}${variable.id}${variable.order}`}
-							existingVariables={variables}
-							variableData={{
-								name: variable.name,
-								...variable,
-							}}
-							onValueUpdate={onValueUpdate}
-						/>
-					) : (
+		<>
+			{dependencyData?.hasCycle && (
+				<Alert
+					message={`Circular dependency detected: ${dependencyData?.cycleNodes?.join(
+						' → ',
+					)}`}
+					type="error"
+					showIcon
+					className="cycle-error-alert"
+				/>
+			)}
+			<Row style={{ display: 'flex', gap: '12px' }}>
+				{orderBasedSortedVariables &&
+					Array.isArray(orderBasedSortedVariables) &&
+					orderBasedSortedVariables.length > 0 &&
+					orderBasedSortedVariables.map((variable) => (
 						<VariableItem
 							key={`${variable.name}${variable.id}}${variable.order}`}
 							existingVariables={variables}
@@ -208,9 +198,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 							setVariablesToGetUpdated={setVariablesToGetUpdated}
 							dependencyData={dependencyData}
 						/>
-					),
-				)}
-		</Row>
+					))}
+			</Row>
+		</>
 	);
 }
 

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

@@ -1,585 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-nested-ternary */
-import './DashboardVariableSelection.styles.scss';
-
-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 { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-import {
-	areArraysEqual,
-	getOptionsForDynamicVariable,
-	uniqueValues,
-} from './util';
-import { getSelectValue } from './VariableItem';
-
-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 [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 sources'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-					existingQuery,
-				),
-			onSuccess: (data) => {
-				const newNormalizedValues = data.payload?.normalizedValues || [];
-				const newRelatedValues = data.payload?.relatedValues || [];
-
-				if (!debouncedApiSearchText) {
-					setOptionsData(newNormalizedValues);
-					setIsComplete(data.payload?.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);
-				}
-			},
-		},
-	);
-
-	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);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				) : (
-					<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}
-						onRetry={(): void => {
-							setErrorMessage(null);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DynamicVariableSelection;

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -167,7 +167,7 @@ describe('VariableItem', () => {
 			</MockQueryClientProvider>,
 		);
 
-		expect(screen.getByText('ALL')).toBeInTheDocument();
+		expect(screen.getByTitle('ALL')).toBeInTheDocument();
 	});
 
 	test('calls useEffect when the component mounts', () => {

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

@@ -8,14 +8,23 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import { Input, Popover, Tooltip, Typography } from 'antd';
+import {
+	Checkbox,
+	Input,
+	Popover,
+	Select,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { debounce, isArray, isEmpty, isString } from 'lodash-es';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isString } from 'lodash-es';
+import map from 'lodash-es/map';
+import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -24,10 +33,17 @@ import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
+import { variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
 import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';
 
+const ALL_SELECT_VALUE = '__ALL__';
+
+enum ToggleTagValue {
+	Only = 'Only',
+	All = 'All',
+}
+
 interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
@@ -42,7 +58,7 @@ interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
-export const getSelectValue = (
+const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
 ): string | string[] | undefined => {
@@ -67,9 +83,6 @@ function VariableItem({
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
 	);
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -126,7 +139,6 @@ function VariableItem({
 								valueNotInList = true;
 							}
 						}
-
 						// variablesData.allSelected is added for the case where on change of options we need to update the
 						// local storage
 						if (
@@ -134,32 +146,28 @@ function VariableItem({
 							variableData.name &&
 							(validVariableUpdate() || valueNotInList || variableData.allSelected)
 						) {
-							if (
-								variableData.allSelected &&
-								variableData.multiSelect &&
-								variableData.showALLOption
-							) {
-								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;
-
+							let value = variableData.selectedValue;
+							let allSelected = false;
+							// The default value for multi-select is ALL and first value for
+							// single select
+							if (valueNotInList) {
 								if (variableData.multiSelect) {
-									const { selectedValue } = variableData;
-									allSelected =
-										newOptionsData.length > 0 &&
-										Array.isArray(selectedValue) &&
-										newOptionsData.every((option) => selectedValue.includes(option));
+									value = newOptionsData;
+									allSelected = true;
+								} else {
+									[value] = newOptionsData;
 								}
+							} else if (variableData.multiSelect) {
+								const { selectedValue } = variableData;
+								allSelected =
+									newOptionsData.length > 0 &&
+									Array.isArray(selectedValue) &&
+									selectedValue.length === newOptionsData.length &&
+									newOptionsData.every((option) => selectedValue.includes(option));
+							}
 
-								if (variableData && variableData?.name && variableData?.id) {
-									onValueUpdate(variableData.name, variableData.id, value, allSelected);
-								}
+							if (variableData && variableData?.name && variableData?.id) {
+								onValueUpdate(variableData.name, variableData.id, value, allSelected);
 							}
 						}
 
@@ -183,7 +191,7 @@ function VariableItem({
 		}
 	};
 
-	const { isLoading, refetch } = useQuery(
+	const { isLoading } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
 			variableData.name || '',
@@ -234,62 +242,26 @@ function VariableItem({
 		},
 	);
 
-	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) {
-				// 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()));
-
-				if (isAllSelected && variableData.showALLOption) {
-					// For ALL selection, pass null to avoid storing values
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
-		},
-		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			onValueUpdate,
-			optionsData,
-			variableData.showALLOption,
-		],
-	);
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = (inputValue: string | string[]): void => {
-		// Store the selection in temporary state while dropdown is open
+	const handleChange = (inputValue: string | string[]): void => {
 		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-		setTempSelection(value);
-	};
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		if (
+			value === variableData.selectedValue ||
+			(Array.isArray(value) &&
+				Array.isArray(variableData.selectedValue) &&
+				areArraysEqual(value, variableData.selectedValue))
+		) {
+			return;
 		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Call handleChange with the temporarily stored selection
-			handleChange(tempSelection);
-			setTempSelection(undefined);
+		if (variableData.name) {
+			if (
+				value === ALL_SELECT_VALUE ||
+				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+			) {
+				onValueUpdate(variableData.name, variableData.id, optionsData, true);
+			} else {
+				onValueUpdate(variableData.name, variableData.id, value, false);
+			}
 		}
 	};
 
@@ -309,58 +281,10 @@ function VariableItem({
 			? 'ALL'
 			: selectedValueStringified;
 
-	// Apply default value on first render if no selection exists
-	// 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 {
-						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,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
+	const mode: 'multiple' | undefined =
+		variableData.multiSelect && !variableData.allSelected
+			? 'multiple'
+			: undefined;
 
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
@@ -370,6 +294,113 @@ function VariableItem({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [variableData.type, variableData.customValue]);
 
+	const checkAll = (e: MouseEvent): void => {
+		e.stopPropagation();
+		e.preventDefault();
+		const isChecked =
+			variableData.allSelected || selectValue?.includes(ALL_SELECT_VALUE);
+
+		if (isChecked) {
+			handleChange([]);
+		} else {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const handleOptionSelect = (
+		e: CheckboxChangeEvent,
+		option: string | number | boolean,
+	): void => {
+		const newSelectedValue = Array.isArray(selectedValue)
+			? ((selectedValue.filter(
+					(val) => val.toString() !== option.toString(),
+			  ) as unknown) as string[])
+			: [];
+
+		if (
+			!e.target.checked &&
+			Array.isArray(selectedValueStringified) &&
+			selectedValueStringified.includes(option.toString())
+		) {
+			if (newSelectedValue.length === 1) {
+				handleChange(newSelectedValue[0].toString());
+				return;
+			}
+			handleChange(newSelectedValue);
+		} else if (!e.target.checked && selectedValue === option.toString()) {
+			handleChange(ALL_SELECT_VALUE);
+		} else if (newSelectedValue.length === optionsData.length - 1) {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const [optionState, setOptionState] = useState({
+		tag: '',
+		visible: false,
+	});
+
+	function currentToggleTagValue({
+		option,
+	}: {
+		option: string;
+	}): ToggleTagValue {
+		if (
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) &&
+				selectValue?.includes(option.toString()) &&
+				selectValue.length === 1)
+		) {
+			return ToggleTagValue.All;
+		}
+		return ToggleTagValue.Only;
+	}
+
+	function handleToggle(e: ChangeEvent, option: string): void {
+		e.stopPropagation();
+		const mode = currentToggleTagValue({ option: option as string });
+		const isChecked =
+			variableData.allSelected ||
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) && selectValue?.includes(option.toString()));
+
+		if (isChecked) {
+			if (mode === ToggleTagValue.Only && variableData.multiSelect) {
+				handleChange([option.toString()]);
+			} else if (!variableData.multiSelect) {
+				handleChange(option.toString());
+			} else {
+				handleChange(ALL_SELECT_VALUE);
+			}
+		} else {
+			handleChange(option.toString());
+		}
+	}
+
+	function retProps(
+		option: string,
+	): {
+		onMouseOver: () => void;
+		onMouseOut: () => void;
+	} {
+		return {
+			onMouseOver: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: true,
+				}),
+			onMouseOut: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: false,
+				}),
+		};
+	}
+
+	const ensureValidOption = (option: string): boolean =>
+		!(
+			currentToggleTagValue({ option }) === ToggleTagValue.All && !enableSelectAll
+		);
+
 	return (
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
@@ -397,90 +428,105 @@ function VariableItem({
 						}}
 					/>
 				) : (
-					optionsData &&
-					(variableData.multiSelect ? (
-						<CustomMultiSelect
+					!errorMessage &&
+					optionsData && (
+						<Select
 							key={
 								selectValue && Array.isArray(selectValue)
 									? selectValue.join(' ')
 									: selectValue || variableData.id
 							}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							defaultValue={variableData.defaultValue || selectValue}
-							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}
-							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}
-							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
-							onRetry={(): void => {
-								setErrorMessage(null);
-								refetch();
-							}}
-						/>
-					) : (
-						<CustomSelect
-							key={
-								selectValue && Array.isArray(selectValue)
-									? selectValue.join(' ')
-									: selectValue || variableData.id
-							}
-							defaultValue={variableData.defaultValue || selectValue}
+							defaultValue={selectValue}
 							onChange={handleChange}
 							bordered={false}
 							placeholder="Select value"
+							placement="bottomLeft"
+							mode={mode}
 							style={SelectItemStyle}
 							loading={isLoading}
 							showSearch
 							data-testid="variable-select"
 							className="variable-select"
 							popupClassName="dropdown-styles"
+							maxTagCount={4}
 							getPopupContainer={popupContainer}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							value={selectValue}
-							errorMessage={errorMessage}
-							onRetry={(): void => {
-								setErrorMessage(null);
-								refetch();
-							}}
-						/>
-					))
+							// eslint-disable-next-line react/no-unstable-nested-components
+							tagRender={(props): JSX.Element => (
+								<Tag closable onClose={props.onClose}>
+									{props.value}
+								</Tag>
+							)}
+							// eslint-disable-next-line react/no-unstable-nested-components
+							maxTagPlaceholder={(omittedValues): JSX.Element => (
+								<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
+									<span>+ {omittedValues.length} </span>
+								</Tooltip>
+							)}
+							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
+						>
+							{enableSelectAll && (
+								<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
+									<div className="all-label" onClick={(e): void => checkAll(e as any)}>
+										<Checkbox checked={variableData.allSelected} />
+										ALL
+									</div>
+								</Select.Option>
+							)}
+							{map(optionsData, (option) => (
+								<Select.Option
+									data-testid={`option-${option}`}
+									key={option.toString()}
+									value={option}
+								>
+									<div
+										className={variableData.multiSelect ? 'dropdown-checkbox-label' : ''}
+									>
+										{variableData.multiSelect && (
+											<Checkbox
+												onChange={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													handleOptionSelect(e, option);
+												}}
+												checked={
+													variableData.allSelected ||
+													option.toString() === selectValue ||
+													(Array.isArray(selectValue) &&
+														selectValue?.includes(option.toString()))
+												}
+											/>
+										)}
+										<div
+											className="dropdown-value"
+											{...retProps(option as string)}
+											onClick={(e): void => handleToggle(e as any, option as string)}
+										>
+											<Typography.Text
+												ellipsis={{
+													tooltip: {
+														placement: variableData.multiSelect ? 'top' : 'right',
+														autoAdjustOverflow: true,
+													},
+												}}
+												className="option-text"
+											>
+												{option.toString()}
+											</Typography.Text>
+
+											{variableData.multiSelect &&
+												optionState.tag === option.toString() &&
+												optionState.visible &&
+												ensureValidOption(option as string) && (
+													<Typography.Text className="toggle-tag-label">
+														{currentToggleTagValue({ option: option as string })}
+													</Typography.Text>
+												)}
+										</div>
+									</div>
+								</Select.Option>
+							))}
+						</Select>
+					)
 				)}
 				{variableData.type !== 'TEXTBOX' && errorMessage && (
 					<span style={{ margin: '0 0.5rem' }}>

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

@@ -1,274 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as ReactQuery from 'react-query';
-import * as ReactRedux from 'react-redux';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import DynamicVariableSelection from '../DynamicVariableSelection';
-
-// Don't mock the components - use real ones
-
-// Mock for useQuery
-const mockQueryResult = {
-	data: undefined,
-	error: null,
-	isError: false,
-	isIdle: false,
-	isLoading: false,
-	isPreviousData: false,
-	isSuccess: true,
-	status: 'success',
-	isFetched: true,
-	isFetchingNextPage: false,
-	isFetchingPreviousPage: false,
-	isPlaceholderData: false,
-	isPaused: false,
-	isRefetchError: false,
-	isRefetching: false,
-	isStale: false,
-	isLoadingError: false,
-	isFetching: false,
-	isFetchedAfterMount: true,
-	dataUpdatedAt: 0,
-	errorUpdatedAt: 0,
-	failureCount: 0,
-	refetch: jest.fn(),
-	remove: jest.fn(),
-	fetchNextPage: jest.fn(),
-	fetchPreviousPage: jest.fn(),
-	hasNextPage: false,
-	hasPreviousPage: false,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-} as any;
-
-// Sample data for testing
-const mockApiResponse = {
-	payload: {
-		normalizedValues: ['frontend', 'backend', 'database'],
-		complete: true,
-	},
-	statusCode: 200,
-};
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-describe('DynamicVariableSelection Component', () => {
-	const mockOnValueUpdate = jest.fn();
-
-	const mockDynamicVariableData: IDashboardVariable = {
-		id: 'var1',
-		name: 'service',
-		type: 'DYNAMIC',
-		dynamicVariablesAttribute: 'service.name',
-		dynamicVariablesSource: 'Traces',
-		selectedValue: 'frontend',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		description: '',
-		sort: 'DISABLED',
-	};
-
-	const mockMultiSelectDynamicVariableData: IDashboardVariable = {
-		...mockDynamicVariableData,
-		id: 'var2',
-		name: 'services',
-		multiSelect: true,
-		selectedValue: ['frontend', 'backend'],
-		showALLOption: true,
-	};
-
-	const mockExistingVariables: Record<string, IDashboardVariable> = {
-		var1: mockDynamicVariableData,
-		var2: mockMultiSelectDynamicVariableData,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockOnValueUpdate.mockClear();
-
-		// Mock useSelector
-		const useSelectorSpy = jest.spyOn(ReactRedux, 'useSelector');
-		useSelectorSpy.mockReturnValue({
-			minTime: '2023-01-01T00:00:00Z',
-			maxTime: '2023-01-02T00:00:00Z',
-		});
-
-		// Mock useQuery with success state
-		const useQuerySpy = jest.spyOn(ReactQuery, 'useQuery');
-		useQuerySpy.mockReturnValue({
-			...mockQueryResult,
-			data: mockApiResponse,
-			isLoading: false,
-			error: null,
-		});
-	});
-
-	it('renders with single select variable correctly', () => {
-		render(
-			<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();
-
-		// CustomSelect doesn't use the 'mode' attribute for single select
-		expect(selectedItem).not.toHaveAttribute('mode');
-	});
-
-	it('renders with multi select variable correctly', () => {
-		// First set up allSelected to true to properly test the ALL display
-		const multiSelectWithAllSelected = {
-			...mockMultiSelectDynamicVariableData,
-			allSelected: true,
-		};
-
-		render(
-			<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();
-	});
-
-	it('shows loading state correctly', () => {
-		// Mock loading state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: true,
-			isFetching: true,
-			isSuccess: false,
-			status: 'loading',
-		});
-
-		render(
-			<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);
-
-		// The loading text should appear in the dropdown
-		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
-	});
-
-	it('handles error state correctly', () => {
-		const errorMessage = 'Failed to fetch data';
-
-		// Mock error state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: false,
-			isSuccess: false,
-			isError: true,
-			status: 'error',
-			error: { message: errorMessage },
-		});
-
-		render(
-			<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();
-		// We don't need to check refetch as it might be called during component initialization
-	});
-
-	it('makes API call to fetch variable values', () => {
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the useQuery hook was called with expected parameters
-		expect(ReactQuery.useQuery).toHaveBeenCalledWith(
-			[
-				'DASHBOARD_BY_ID',
-				mockDynamicVariableData.name,
-				'service:"frontend"|services:["frontend","backend"]', // The actual dynamicVariablesKey
-				'2023-01-01T00:00:00Z', // minTime from useSelector mock
-				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
-			],
-			expect.objectContaining({
-				enabled: true, // Type is 'DYNAMIC'
-				queryFn: expect.any(Function),
-				onSuccess: expect.any(Function),
-				onError: expect.any(Function),
-			}),
-		);
-	});
-
-	it('has the correct selected value', () => {
-		// Use a different variable configuration to test different behavior
-		const customVariable = {
-			...mockDynamicVariableData,
-			id: 'custom1',
-			name: 'customService',
-			selectedValue: 'backend',
-		};
-
-		render(
-			<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();
-
-		// Check that the selected value is displayed in the select element
-		expect(selectElement).toHaveTextContent('backend');
-	});
-});

frontend/src/container/NewDashboard/DashboardVariablesSelection/useDashboardVariableUpdate.ts

@@ -1,241 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
-import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback } from 'react';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
-import { v4 as uuidv4 } from 'uuid';
-
-import { convertVariablesToDbFormat } from './util';
-
-// Note: This logic completely mimics the logic in DashboardVariableSelection.tsx
-// but is separated to avoid unnecessary logic addition.
-interface UseDashboardVariableUpdateReturn {
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-	createVariable: (
-		name: string,
-		value: IDashboardVariable['selectedValue'],
-		type?: IDashboardVariable['type'],
-		description?: string,
-		source?: 'logs' | 'traces' | 'metrics' | 'all sources',
-		widgetId?: string,
-	) => void;
-	updateVariables: (
-		updatedVariablesData: Dashboard['data']['variables'],
-		currentRequestedId?: string,
-		widgetIds?: string[],
-		applyToAll?: boolean,
-	) => void;
-}
-
-export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn => {
-	const {
-		selectedDashboard,
-		setSelectedDashboard,
-		updateLocalStorageDashboardVariables,
-	} = useDashboard();
-
-	const addDynamicVariableToPanels = useAddDynamicVariableToPanels();
-	const updateMutation = useUpdateDashboard();
-
-	const onValueUpdate = useCallback(
-		(
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-		): void => {
-			if (id) {
-				// Performance optimization: For dynamic variables with allSelected=true, we don't store
-				// individual values in localStorage since we can always derive them from available options.
-				// This makes localStorage much lighter and more efficient.
-				// currently all the variables are dynamic
-				const isDynamic = true;
-				updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);
-
-				if (selectedDashboard) {
-					setSelectedDashboard((prev) => {
-						if (prev) {
-							const oldVariables = prev?.data.variables;
-							// this is added to handle case where we have two different
-							// schemas for variable response
-							if (oldVariables?.[id]) {
-								oldVariables[id] = {
-									...oldVariables[id],
-									selectedValue: value,
-									allSelected,
-									haveCustomValuesSelected,
-								};
-							}
-							if (oldVariables?.[name]) {
-								oldVariables[name] = {
-									...oldVariables[name],
-									selectedValue: value,
-									allSelected,
-									haveCustomValuesSelected,
-								};
-							}
-							return {
-								...prev,
-								data: {
-									...prev?.data,
-									variables: {
-										...oldVariables,
-									},
-								},
-							};
-						}
-						return prev;
-					});
-				}
-			}
-		},
-		[
-			selectedDashboard,
-			setSelectedDashboard,
-			updateLocalStorageDashboardVariables,
-		],
-	);
-
-	const updateVariables = useCallback(
-		(
-			updatedVariablesData: Dashboard['data']['variables'],
-			currentRequestedId?: string,
-			widgetIds?: string[],
-			applyToAll?: boolean,
-		): void => {
-			if (!selectedDashboard) {
-				return;
-			}
-
-			const newDashboard =
-				(currentRequestedId &&
-					addDynamicVariableToPanels(
-						selectedDashboard,
-						updatedVariablesData[currentRequestedId || ''],
-						widgetIds,
-						applyToAll,
-					)) ||
-				selectedDashboard;
-
-			updateMutation.mutateAsync(
-				{
-					id: selectedDashboard.id,
-
-					data: {
-						...newDashboard.data,
-						variables: updatedVariablesData,
-					},
-				},
-				{
-					onSuccess: (updatedDashboard) => {
-						if (updatedDashboard.data) {
-							setSelectedDashboard(updatedDashboard.data);
-							// notifications.success({
-							// 	message: t('variable_updated_successfully'),
-							// });
-						}
-					},
-				},
-			);
-		},
-		[
-			selectedDashboard,
-			addDynamicVariableToPanels,
-			updateMutation,
-			setSelectedDashboard,
-		],
-	);
-
-	const createVariable = useCallback(
-		(
-			name: string,
-			value: IDashboardVariable['selectedValue'],
-			type: IDashboardVariable['type'] = 'DYNAMIC',
-			description = '',
-			source: 'logs' | 'traces' | 'metrics' | 'all sources' = 'all sources',
-			// widgetId?: string,
-		): void => {
-			if (!selectedDashboard) {
-				console.warn('No dashboard selected for variable creation');
-				return;
-			}
-
-			console.log('createVariable', { name, value, type, description, source });
-
-			// Get current dashboard variables
-			const currentVariables = selectedDashboard.data.variables || {};
-
-			// Create tableRowData like Dashboard Settings does
-			const tableRowData = [];
-			const variableOrderArr = [];
-			// eslint-disable-next-line no-restricted-syntax
-			for (const [key, value] of Object.entries(currentVariables)) {
-				const { order, id } = value;
-
-				tableRowData.push({
-					key,
-					name: key,
-					...currentVariables[key],
-					id,
-				});
-
-				if (order) {
-					variableOrderArr.push(order);
-				}
-			}
-
-			// Sort by order
-			tableRowData.sort((a, b) => a.order - b.order);
-			variableOrderArr.sort((a, b) => a - b);
-
-			// Create new variable
-			const nextOrder =
-				variableOrderArr.length > 0 ? Math.max(...variableOrderArr) + 1 : 0;
-			const newVariable: any = {
-				id: uuidv4(),
-				name,
-				type: 'DYNAMIC' as const,
-				description,
-				order: nextOrder,
-				selectedValue: value,
-				allSelected: false,
-				haveCustomValuesSelected: false,
-				sort: 'ASC' as const,
-				multiSelect: true,
-				showALLOption: true,
-				dynamicVariablesAttribute: name,
-				dynamicVariablesSource: source,
-				dynamicVariablesWidgetIds: [],
-				queryValue: '',
-			};
-
-			// Add to tableRowData
-			tableRowData.push({
-				key: newVariable.id,
-				...newVariable,
-				id: newVariable.id,
-			});
-
-			// Convert to dashboard format and update
-			const updatedVariables = convertVariablesToDbFormat(tableRowData);
-			updateVariables(updatedVariables, newVariable.id, [], false);
-		},
-		[selectedDashboard, updateVariables],
-	);
-
-	return {
-		onValueUpdate,
-		createVariable,
-		updateVariables,
-	};
-};
-
-export default useDashboardVariableUpdate;

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

@@ -1,4 +1,3 @@
-import { OptionData } from 'components/NewSelect/types';
 import { isEmpty, isNull } from 'lodash-es';
 import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 
@@ -295,74 +294,3 @@ export const checkAPIInvocation = (
 		variablesToGetUpdated[0] === variableData.name
 	);
 };
-
-export const getOptionsForDynamicVariable = (
-	normalizedValues: (string | number | boolean)[],
-	relatedValues: string[],
-): OptionData[] => {
-	const options: OptionData[] = [];
-
-	if (relatedValues.length > 0) {
-		// Add Related Values group
-		options.push({
-			label: 'Related Values',
-			value: 'relatedValues',
-			options: relatedValues.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		});
-
-		// Add All Values group (complete union - shows everything)
-		options.push({
-			label: 'All Values',
-			value: 'allValues',
-			options: normalizedValues.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		});
-
-		return options;
-	}
-
-	return normalizedValues.map((option) => ({
-		label: option.toString(),
-		value: option.toString(),
-	}));
-};
-
-export const uniqueOptions = (options: OptionData[]): OptionData[] => {
-	const uniqueOptions: OptionData[] = [];
-	const seenValues = new Set<string>();
-
-	options.forEach((option) => {
-		const value = option.value || '';
-		if (seenValues.has(value)) {
-			return;
-		}
-		seenValues.add(value);
-		uniqueOptions.push(option);
-	});
-
-	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;
-};

frontend/src/container/NewDashboard/GridGraphs/index.tsx

@@ -1,5 +1,4 @@
 import GridGraphLayout from 'container/GridCardLayout';
-import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
 import { FullScreenHandle } from 'react-full-screen';
 
 import { GridComponentSliderContainer } from './styles';
@@ -12,7 +11,7 @@ function GridGraphs(props: GridGraphsProps): JSX.Element {
 	const { handle } = props;
 	return (
 		<GridComponentSliderContainer>
-			<GridGraphLayout handle={handle} enableDrillDown={isDrilldownEnabled()} />
+			<GridGraphLayout handle={handle} />
 		</GridComponentSliderContainer>
 	);
 }

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

@@ -1,475 +0,0 @@
-/* eslint-disable sonarjs/no-identical-functions */
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable react/jsx-props-no-spreading */
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	waitFor,
-} from '@testing-library/react';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import * as ReactRedux from 'react-redux';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import DynamicVariableSelection from '../DashboardVariablesSelection/DynamicVariableSelection';
-
-// Mock the getFieldValues API
-jest.mock('api/dynamicVariables/getFieldValues', () => ({
-	getFieldValues: jest.fn(),
-}));
-
-describe('Dynamic Variable Default Behavior', () => {
-	const mockOnValueUpdate = jest.fn();
-	const mockApiResponse = {
-		statusCode: 200,
-		error: null,
-		message: 'success',
-		payload: {
-			values: {
-				stringValues: ['frontend', 'backend', 'database', 'cache'],
-			},
-			normalizedValues: ['frontend', 'backend', 'database', 'cache'],
-			complete: true,
-		},
-	};
-
-	let queryClient: QueryClient;
-
-	const renderWithQueryClient = (component: React.ReactElement): RenderResult =>
-		render(
-			<QueryClientProvider client={queryClient}>{component}</QueryClientProvider>,
-		);
-
-	beforeEach(() => {
-		// Mock scrollIntoView for JSDOM environment
-		window.HTMLElement.prototype.scrollIntoView = jest.fn();
-		jest.clearAllMocks();
-
-		// Create a new QueryClient for each test
-		queryClient = new QueryClient({
-			defaultOptions: {
-				queries: {
-					retry: false,
-				},
-			},
-		});
-
-		// Mock getFieldValues API to return our test data
-		(getFieldValues as jest.Mock).mockResolvedValue(mockApiResponse);
-
-		jest.spyOn(ReactRedux, 'useSelector').mockReturnValue({
-			minTime: '2023-01-01T00:00:00Z',
-			maxTime: '2023-01-02T00:00:00Z',
-		});
-	});
-
-	describe('Single Select Default Values', () => {
-		it('should use default value when no previous selection exists', () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'service',
-				type: 'DYNAMIC',
-				multiSelect: false,
-				defaultValue: 'backend' as any,
-				selectedValue: undefined,
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				showALLOption: false,
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Should call onValueUpdate with default value
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'service',
-				'var1',
-				'backend',
-				true,
-				false,
-			);
-		});
-
-		it('should preserve previous selection over default value', () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'service',
-				type: 'DYNAMIC',
-				multiSelect: false,
-				defaultValue: 'backend' as any,
-				selectedValue: 'frontend',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				showALLOption: false,
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Should NOT call onValueUpdate since previous selection exists
-			expect(mockOnValueUpdate).not.toHaveBeenCalledWith();
-
-			// Check if the previous selection 'frontend' is displayed in the UI
-			// For single select, the value should be visible in the select component
-			const selectElement = screen.getByRole('combobox');
-			expect(selectElement).toBeInTheDocument();
-
-			// Open dropdown to check if 'frontend' is selected
-			fireEvent.mouseDown(selectElement);
-
-			// Check if 'frontend' option is present and selected in dropdown
-			const frontendOption = screen.getByRole('option', { name: 'frontend' });
-			expect(frontendOption).toHaveClass('selected');
-
-			// Verify that 'backend' (default value) is NOT present in the dropdown
-			// since previous selection 'frontend' takes priority
-			expect(screen.queryByText('backend')).not.toBeInTheDocument();
-		});
-
-		it('should use first value when no default and no previous selection', async () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'service',
-				type: 'DYNAMIC',
-				multiSelect: false,
-				defaultValue: undefined,
-				selectedValue: undefined,
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				showALLOption: false,
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Component should render without errors
-			expect(screen.getByText('$service')).toBeInTheDocument();
-
-			// Check if the dropdown is present
-			const selectElement = screen.getByRole('combobox');
-			expect(selectElement).toBeInTheDocument();
-
-			// Wait for API call to complete and data to be loaded
-			await waitFor(() => {
-				expect(getFieldValues).toHaveBeenCalledWith(
-					'traces',
-					'service.name',
-					'',
-					'2023-01-01T00:00:00Z',
-					'2023-01-02T00:00:00Z',
-				);
-			});
-
-			// Open dropdown to check available options
-			fireEvent.mouseDown(selectElement);
-
-			// Wait for dropdown to populate with API data
-			await waitFor(() => {
-				expect(
-					screen.getByRole('option', { name: 'frontend' }),
-				).toBeInTheDocument();
-			});
-
-			expect(screen.getByRole('option', { name: 'backend' })).toBeInTheDocument();
-			expect(screen.getByRole('option', { name: 'database' })).toBeInTheDocument();
-			expect(screen.getByRole('option', { name: 'cache' })).toBeInTheDocument();
-
-			// Check if the first value 'frontend' is selected (active)
-			const frontendOption = screen.getByRole('option', { name: 'frontend' });
-			expect(frontendOption).toHaveClass('active');
-		});
-	});
-
-	describe('Multi Select Default Values - ALL Enabled', () => {
-		it('should use default value when no previous selection exists', () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'services',
-				type: 'DYNAMIC',
-				multiSelect: true,
-				showALLOption: true,
-				defaultValue: ['backend', 'database'] as any,
-				selectedValue: undefined,
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'services',
-				'var1',
-				['backend', 'database'],
-				true,
-				true,
-			);
-		});
-
-		it('should preserve previous selection over default', async () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'services',
-				type: 'DYNAMIC',
-				multiSelect: true,
-				showALLOption: true,
-				defaultValue: ['backend'] as any,
-				selectedValue: ['frontend', 'cache'],
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Should NOT call onValueUpdate since previous selection exists
-			expect(mockOnValueUpdate).not.toHaveBeenCalledWith();
-
-			// The component shows "ALL" because the previous selection ['frontend', 'cache']
-			// is treated as all available values (the component considers this equivalent to all selected)
-			expect(screen.getByText('ALL')).toBeInTheDocument();
-
-			// Verify that the ALL selection wrapper is present
-			const allSelectedWrapper = screen
-				.getByText('ALL')
-				.closest('.custom-multiselect-wrapper');
-			expect(allSelectedWrapper).toHaveClass('all-selected');
-
-			// Verify that individual values are not displayed when ALL is shown
-			expect(screen.queryByText('frontend')).not.toBeInTheDocument();
-			expect(screen.queryByText('cache')).not.toBeInTheDocument();
-			expect(screen.queryByText('backend')).not.toBeInTheDocument();
-
-			// Open the dropdown to see which specific options are selected in the dropdown
-			const selectElement = screen.getByRole('combobox');
-			fireEvent.mouseDown(selectElement);
-
-			// Wait for API data to be loaded and dropdown to populate
-			await waitFor(
-				() => {
-					// Check if any options are visible in dropdown - there might be checkboxes or selectable items
-					const dropdownElements = screen.queryAllByRole('option');
-
-					// If options are available, verify the selection states
-					if (dropdownElements.length > 0) {
-						// Frontend and cache should be selected (checked) in dropdown
-						// Backend (default) should NOT be selected since previous selection takes priority
-						const frontendOption = screen.queryByRole('option', { name: 'frontend' });
-						const cacheOption = screen.queryByRole('option', { name: 'cache' });
-						const backendOption = screen.queryByRole('option', { name: 'backend' });
-
-						if (frontendOption) expect(frontendOption).toHaveClass('selected');
-						if (cacheOption) expect(cacheOption).toHaveClass('selected');
-						if (backendOption) expect(backendOption).not.toHaveClass('selected');
-					}
-				},
-				{ timeout: 1000 },
-			);
-		});
-
-		it('should default to ALL when no default and no previous selection', () => {
-			const variableData: IDashboardVariable = {
-				id: 'var21',
-				name: 'services',
-				type: 'DYNAMIC',
-				multiSelect: true,
-				showALLOption: true,
-				defaultValue: undefined,
-				selectedValue: undefined,
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Open dropdown to check if ALL option is selected
-			const selectElement = screen.getByRole('combobox');
-			fireEvent.mouseDown(selectElement);
-
-			// Check if ALL option is present in dropdown
-			const allOption = screen.getByText('ALL');
-			expect(allOption).toBeInTheDocument();
-
-			// Verify that the ALL option is available for selection
-			const allOptionContainer = allOption.closest(
-				'.option-item, .ant-select-item-option',
-			);
-			expect(allOptionContainer).toBeInTheDocument();
-
-			// Check if the checkbox exists (it should be unchecked initially)
-			const checkbox = allOptionContainer?.querySelector(
-				'input[type="checkbox"]',
-			) as HTMLInputElement;
-			expect(checkbox).toBeInTheDocument();
-
-			// Should call onValueUpdate with all values (ALL selection)
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'services',
-				'var21',
-				[], // Empty array when allSelected is true
-				true, // allSelected = true
-				false,
-			);
-		});
-	});
-
-	describe('Multi Select Default Values - ALL Disabled', () => {
-		it('should use default value over first value when provided', () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'services',
-				type: 'DYNAMIC',
-				multiSelect: true,
-				showALLOption: false,
-				defaultValue: ['database', 'cache'] as any,
-				selectedValue: undefined,
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-				allSelected: false,
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// Should call onValueUpdate with default values
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'services',
-				'var1',
-				['database', 'cache'],
-				true,
-				true,
-			);
-		});
-	});
-
-	describe('ALL Option Special Value', () => {
-		it('should display ALL correctly when all values are selected', async () => {
-			const variableData: IDashboardVariable = {
-				id: 'var1',
-				name: 'services',
-				type: 'DYNAMIC',
-				multiSelect: true,
-				showALLOption: true,
-				allSelected: true,
-				selectedValue: ['frontend', 'backend', 'database', 'cache'],
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesSource: 'Traces',
-				description: '',
-				sort: 'DISABLED',
-			};
-
-			renderWithQueryClient(
-				<DynamicVariableSelection
-					variableData={variableData}
-					existingVariables={{ var1: variableData }}
-					onValueUpdate={mockOnValueUpdate}
-				/>,
-			);
-
-			// 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();
-
-			// Verify that the ALL selection wrapper is present and has correct class
-			const allSelectedWrapper = allTextElement.closest(
-				'.custom-multiselect-wrapper',
-			);
-			expect(allSelectedWrapper).toHaveClass('all-selected');
-
-			// Open dropdown to check if ALL option is selected/active
-			const selectElement = screen.getByRole('combobox');
-			fireEvent.mouseDown(selectElement);
-
-			// Wait for API data to be loaded and dropdown to populate
-			await waitFor(() => {
-				expect(getFieldValues).toHaveBeenCalledWith(
-					'traces',
-					'service.name',
-					'',
-					'2023-01-01T00:00:00Z',
-					'2023-01-02T00:00:00Z',
-				);
-			});
-
-			// Check if ALL option is present in dropdown and selected
-			// Use getAllByText to get all ALL elements and find the one in dropdown
-			const allElements = screen.getAllByText('ALL');
-			expect(allElements.length).toBeGreaterThan(1); // Should have ALL in UI and dropdown
-
-			// Find the ALL option in the dropdown (should have the 'all-option' class)
-			const dropdownAllOption = screen.getByRole('option', { name: 'ALL' });
-			expect(dropdownAllOption).toBeInTheDocument();
-			expect(dropdownAllOption).toHaveClass('all-option');
-			expect(dropdownAllOption).toHaveClass('selected');
-
-			// Check if the checkbox for ALL option is checked
-			const checkbox = dropdownAllOption.querySelector(
-				'input[type="checkbox"]',
-			) as HTMLInputElement;
-			expect(checkbox).toBeInTheDocument();
-			expect(checkbox.checked).toBe(true);
-		});
-	});
-});

frontend/src/container/NewDashboard/__test__/IntegrationTests.test.tsx

@@ -1,155 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-
-// Import dependency building functions
-import {
-	buildDependencies,
-	buildDependencyGraph,
-} from '../DashboardVariablesSelection/util';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-function createMockStore(globalTime?: any): any {
-	return configureStore([])(() => ({
-		globalTime: globalTime || {
-			minTime: '2023-01-01T00:00:00Z',
-			maxTime: '2023-01-02T00:00:00Z',
-		},
-	}));
-}
-
-// Mock the dashboard provider
-const mockDashboard = {
-	data: {
-		variables: {
-			env: {
-				id: 'env',
-				name: 'env',
-				type: 'DYNAMIC',
-				selectedValue: 'production',
-				order: 1,
-				dynamicVariablesAttribute: 'environment',
-				dynamicVariablesSource: 'Traces',
-			},
-			service: {
-				id: 'service',
-				name: 'service',
-				type: 'QUERY',
-				queryValue: 'SELECT DISTINCT service_name WHERE env = $env',
-				selectedValue: 'api-service',
-				order: 2,
-			},
-		},
-	},
-};
-
-// Mock the dashboard provider with stable functions to prevent infinite loops
-const mockSetSelectedDashboard = jest.fn();
-const mockUpdateLocalStorageDashboardVariables = jest.fn();
-const mockSetVariablesToGetUpdated = jest.fn();
-
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): any => ({
-		selectedDashboard: mockDashboard,
-		setSelectedDashboard: mockSetSelectedDashboard,
-		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
-		variablesToGetUpdated: ['env'], // Stable initial value
-		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
-	}),
-}));
-
-interface TestWrapperProps {
-	store: any;
-	children: React.ReactNode;
-}
-
-function TestWrapper({ store, children }: TestWrapperProps): JSX.Element {
-	return (
-		<Provider store={store || createMockStore()}>
-			<QueryClientProvider client={new QueryClient()}>
-				{children}
-			</QueryClientProvider>
-		</Provider>
-	);
-}
-TestWrapper.displayName = 'TestWrapper';
-
-describe('Dynamic Variables Integration Tests', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('Variable Dependencies and Updates', () => {
-		it('should build dependency graph correctly for variables', async () => {
-			// Convert mock dashboard variables to array format expected by the functions
-			const { variables } = mockDashboard.data as any;
-			const variablesArray = Object.values(variables) as any[];
-
-			// Test the actual dependency building logic
-			const dependencies = buildDependencies(variablesArray);
-			const dependencyData = buildDependencyGraph(dependencies);
-
-			// Verify the dependency graph structure
-			expect(dependencies).toBeDefined();
-			expect(dependencyData).toBeDefined();
-			expect(dependencyData.order).toBeDefined();
-			expect(dependencyData.graph).toBeDefined();
-			expect(dependencyData.hasCycle).toBeDefined();
-
-			// Verify that service depends on env (based on queryValue containing $env)
-			// The dependencies object shows which variables depend on each variable
-			// So dependencies.env should contain 'service' because service references $env
-			expect(dependencies.env).toContain('service');
-
-			// Verify the topological order (env should come before service)
-			expect(dependencyData.order).toContain('env');
-			expect(dependencyData.order).toContain('service');
-			expect(dependencyData.order.indexOf('env')).toBeLessThan(
-				dependencyData.order.indexOf('service'),
-			);
-
-			// Verify no cycles in this simple case
-			expect(dependencyData.hasCycle).toBe(false);
-		});
-
-		it('should handle circular dependency detection', () => {
-			// Create variables with circular dependency
-			const circularVariables = [
-				{
-					id: 'var1',
-					name: 'var1',
-					type: 'QUERY',
-					queryValue: 'SELECT * WHERE field = $var2',
-					order: 1,
-				},
-				{
-					id: 'var2',
-					name: 'var2',
-					type: 'QUERY',
-					queryValue: 'SELECT * WHERE field = $var1',
-					order: 2,
-				},
-			];
-
-			// Test the actual circular dependency detection logic
-			const dependencies = buildDependencies(circularVariables as any);
-			const dependencyData = buildDependencyGraph(dependencies);
-
-			// Verify that circular dependency is detected
-			expect(dependencyData.hasCycle).toBe(true);
-			expect(dependencyData.cycleNodes).toBeDefined();
-			expect(dependencyData.cycleNodes).toContain('var1');
-			expect(dependencyData.cycleNodes).toContain('var2');
-
-			// Verify the dependency structure
-			expect(dependencies.var1).toContain('var2');
-			expect(dependencies.var2).toContain('var1');
-
-			// Verify that topological order is incomplete due to cycle
-			expect(dependencyData.order.length).toBeLessThan(2);
-		});
-	});
-});

frontend/src/container/NewDashboard/__test__/PanelManagement.test.tsx

@@ -1,528 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable react/jsx-props-no-spreading */
-import { fireEvent, render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
-import {
-	Dashboard,
-	IDashboardVariable,
-	Widgets,
-} from 'types/api/dashboard/getAll';
-
-import { useAddDynamicVariableToPanels } from '../../../hooks/dashboard/useAddDynamicVariableToPanels';
-import { WidgetSelector } from '../DashboardSettings/Variables/VariableItem/WidgetSelector';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Constants to avoid duplication
-const CPU_USAGE_TEXT = 'CPU Usage';
-const MEMORY_USAGE_TEXT = 'Memory Usage';
-const ROW_WIDGET_TEXT = 'Row Widget';
-
-// Helper function to create variable config
-const createVariableConfig = (
-	name: string,
-	attribute: string,
-): IDashboardVariable => ({
-	id: `var_${name}`,
-	name,
-	type: 'DYNAMIC',
-	description: '',
-	sort: 'DISABLED',
-	multiSelect: false,
-	showALLOption: false,
-	dynamicVariablesAttribute: attribute,
-});
-
-const mockDashboard = {
-	data: {
-		widgets: [
-			{
-				id: 'widget1',
-				title: CPU_USAGE_TEXT,
-				panelTypes: 'GRAPH',
-			},
-			{
-				id: 'widget2',
-				title: MEMORY_USAGE_TEXT,
-				panelTypes: 'TABLE',
-			},
-			{
-				id: 'widget3',
-				title: ROW_WIDGET_TEXT,
-				panelTypes: 'ROW', // Should be filtered out
-			},
-		],
-		layout: [{ i: 'widget1' }, { i: 'widget2' }, { i: 'widget3' }],
-	},
-};
-// Mock dependencies
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): any => ({
-		selectedDashboard: mockDashboard,
-	}),
-}));
-
-jest.mock('constants/queryBuilder', () => ({
-	PANEL_GROUP_TYPES: {
-		ROW: 'ROW',
-	},
-	PANEL_TYPES: {
-		TIME_SERIES: 'graph',
-		VALUE: 'value',
-		TABLE: 'table',
-		LIST: 'list',
-		TRACE: 'trace',
-		BAR: 'bar',
-		PIE: 'pie',
-		HISTOGRAM: 'histogram',
-		EMPTY_WIDGET: 'EMPTY_WIDGET',
-	},
-	initialQueriesMap: {
-		metrics: {
-			builder: {
-				queryData: [{}],
-			},
-		},
-		logs: {
-			builder: {
-				queryData: [{}],
-			},
-		},
-		traces: {
-			builder: {
-				queryData: [{}],
-			},
-		},
-	},
-}));
-
-jest.mock('container/GridPanelSwitch/utils', () => ({
-	generateGridTitle: (title: string): string => title || 'Untitled Panel',
-}));
-
-describe('Panel Management Tests', () => {
-	describe('WidgetSelector Component', () => {
-		const mockSetSelectedWidgets = jest.fn();
-
-		beforeEach(() => {
-			jest.clearAllMocks();
-		});
-
-		it('should display panel titles using generateGridTitle', () => {
-			render(
-				<WidgetSelector
-					selectedWidgets={[]}
-					setSelectedWidgets={mockSetSelectedWidgets}
-				/>,
-			);
-
-			// Open the dropdown to see options
-			const selectElement = screen.getByRole('combobox');
-			fireEvent.mouseDown(selectElement);
-
-			// Should show panel titles (excluding ROW widgets) in dropdown
-			expect(screen.getByText(CPU_USAGE_TEXT)).toBeInTheDocument();
-			expect(screen.getByText(MEMORY_USAGE_TEXT)).toBeInTheDocument();
-			expect(screen.queryByText(ROW_WIDGET_TEXT)).not.toBeInTheDocument();
-		});
-
-		it('should filter out row widgets and widgets without layout', () => {
-			const modifiedDashboard = {
-				...mockDashboard,
-				data: {
-					...mockDashboard.data,
-					widgets: [
-						...mockDashboard.data.widgets,
-						{
-							id: 'widget4',
-							title: 'Orphaned Widget',
-							panelTypes: 'GRAPH',
-						}, // No layout entry
-					],
-				},
-			};
-
-			// Temporarily mock the dashboard
-			jest.doMock('providers/Dashboard/Dashboard', () => ({
-				useDashboard: (): any => ({
-					selectedDashboard: modifiedDashboard,
-				}),
-			}));
-
-			render(
-				<WidgetSelector
-					selectedWidgets={[]}
-					setSelectedWidgets={mockSetSelectedWidgets}
-				/>,
-			);
-
-			// Should not show orphaned widget
-			expect(screen.queryByText('Orphaned Widget')).not.toBeInTheDocument();
-		});
-
-		it('should show selected widgets correctly', () => {
-			render(
-				<WidgetSelector
-					selectedWidgets={['widget1', 'widget2']}
-					setSelectedWidgets={mockSetSelectedWidgets}
-				/>,
-			);
-
-			// Component should show ALL text when all widgets are selected
-			expect(screen.getByText('ALL')).toBeInTheDocument();
-
-			// Check if the dropdown shows selected state correctly
-			const selectElement = screen.getByRole('combobox');
-			fireEvent.mouseDown(selectElement);
-
-			// Should show the selected panels in the dropdown
-			expect(screen.getByText('CPU Usage')).toBeInTheDocument();
-			expect(screen.getByText('Memory Usage')).toBeInTheDocument();
-
-			// Check if the specific options (CPU Usage, Memory Usage) are properly selected/checked
-			const cpuOption = screen.getByText('CPU Usage');
-			const memoryOption = screen.getByText('Memory Usage');
-
-			// Find the specific checkboxes for CPU Usage and Memory Usage
-			// Navigate from the text to find the associated checkbox
-			const cpuContainer = cpuOption.closest(
-				'.ant-select-item-option, .option-item',
-			);
-			const memoryContainer = memoryOption.closest(
-				'.ant-select-item-option, .option-item',
-			);
-
-			const cpuCheckbox = cpuContainer?.querySelector(
-				'input[type="checkbox"]',
-			) as HTMLInputElement;
-			const memoryCheckbox = memoryContainer?.querySelector(
-				'input[type="checkbox"]',
-			) as HTMLInputElement;
-
-			// Verify that the specific checkboxes for our selected widgets are checked
-			expect(cpuCheckbox).toBeInTheDocument();
-			expect(memoryCheckbox).toBeInTheDocument();
-			expect(cpuCheckbox.checked).toBe(true);
-			expect(memoryCheckbox.checked).toBe(true);
-
-			// Also verify the checkbox wrappers have the checked class
-			const cpuCheckboxWrapper = cpuCheckbox?.closest('.ant-checkbox');
-			const memoryCheckboxWrapper = memoryCheckbox?.closest('.ant-checkbox');
-
-			expect(cpuCheckboxWrapper).toHaveClass('ant-checkbox-checked');
-			expect(memoryCheckboxWrapper).toHaveClass('ant-checkbox-checked');
-
-			// Additional verification: ensure these are the correct options by checking their labels
-			expect(cpuOption).toBeInTheDocument();
-			expect(memoryOption).toBeInTheDocument();
-		});
-	});
-
-	describe('useAddDynamicVariableToPanels Hook', () => {
-		it('should add tag filters to specific selected panels', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const dashboard: Dashboard = {
-				data: {
-					widgets: [
-						{
-							id: 'widget1',
-							query: {
-								builder: {
-									queryData: [
-										{
-											filter: { expression: '' },
-											filters: { items: [] },
-										},
-									],
-								},
-							},
-						},
-					],
-				},
-			} as any;
-
-			const variableConfig = createVariableConfig('service', 'service.name');
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				dashboard,
-				variableConfig,
-				[],
-				false,
-			);
-
-			// Verify tag filter was added to the specific widget using new filter expression format
-			const widget = updatedDashboard?.data?.widgets?.[0] as any;
-			const queryData = widget?.query?.builder?.queryData?.[0];
-
-			// Check that filter expression contains the variable reference
-			expect(queryData.filter.expression).toContain('service.name in $service');
-
-			// Check that filters array also contains the filter item
-			const filters = queryData.filters.items;
-			expect(filters).toContainEqual({
-				id: expect.any(String),
-				key: {
-					id: expect.any(String),
-					key: 'service.name',
-					dataType: 'string',
-					isColumn: false,
-					isJSON: false,
-					type: '',
-				},
-				op: 'IN',
-				value: '$service',
-			});
-		});
-
-		it('should apply to all panels when applyToAll is true', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const dashboard: Dashboard = {
-				data: {
-					widgets: [
-						{
-							id: 'widget1',
-							query: {
-								builder: {
-									queryData: [
-										{
-											filter: { expression: '' },
-											filters: { items: [] },
-										},
-									],
-								},
-							},
-						},
-						{
-							id: 'widget2',
-							query: {
-								builder: {
-									queryData: [
-										{
-											filter: { expression: '' },
-											filters: { items: [] },
-										},
-									],
-								},
-							},
-						},
-					],
-				},
-			} as any;
-
-			const variableConfig = createVariableConfig('service', 'service.name');
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				dashboard,
-				variableConfig,
-				[],
-				true, // Apply to all
-			);
-
-			// Both widgets should have the filter expression
-			const widget1QueryData = (updatedDashboard?.data?.widgets?.[0] as Widgets)
-				?.query?.builder?.queryData?.[0];
-			const widget2QueryData = (updatedDashboard?.data?.widgets?.[1] as Widgets)
-				?.query?.builder?.queryData?.[0];
-
-			// Check filter expressions
-			expect(widget1QueryData?.filter?.expression).toContain(
-				'service.name in $service',
-			);
-			expect(widget2QueryData?.filter?.expression).toContain(
-				'service.name in $service',
-			);
-
-			// Check filters arrays
-			const widget1Filters = widget1QueryData?.filters?.items;
-			const widget2Filters = widget2QueryData?.filters?.items;
-
-			expect(widget1Filters).toContainEqual({
-				id: expect.any(String),
-				key: {
-					id: expect.any(String),
-					key: 'service.name',
-					dataType: 'string',
-					isColumn: false,
-					isJSON: false,
-					type: '',
-				},
-				op: 'IN',
-				value: '$service',
-			});
-			expect(widget2Filters).toContainEqual({
-				id: expect.any(String),
-				key: {
-					id: expect.any(String),
-					key: 'service.name',
-					dataType: 'string',
-					isColumn: false,
-					isJSON: false,
-					type: '',
-				},
-				op: 'IN',
-				value: '$service',
-			});
-		});
-
-		it('should validate tag filter format with variable name', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const dashboard: Dashboard = {
-				data: {
-					widgets: [
-						{
-							id: 'widget1',
-							query: {
-								builder: {
-									queryData: [
-										{
-											filters: { items: [] },
-											filter: { expression: '' },
-										},
-									],
-								},
-							},
-						},
-					],
-				},
-			} as any;
-
-			const variableConfig = {
-				name: 'custom_service_var',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesWidgetIds: ['widget1'],
-			};
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				dashboard,
-				variableConfig as any,
-				[],
-				false,
-			);
-
-			const filters = (updatedDashboard?.data?.widgets?.[0] as Widgets)?.query
-				?.builder?.queryData?.[0]?.filters?.items;
-
-			const filterExpression = (updatedDashboard?.data?.widgets?.[0] as Widgets)
-				?.query?.builder?.queryData?.[0]?.filter?.expression;
-
-			expect(filterExpression).toContain('service.name in $custom_service_var');
-			expect(filters).toContainEqual(
-				expect.objectContaining({
-					value: '$custom_service_var', // Should use exact variable name
-				}),
-			);
-		});
-
-		it('should handle empty widget selection gracefully', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const dashboard: Dashboard = {
-				data: { widgets: [] },
-			} as any;
-
-			const variableConfig = {
-				name: 'service',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesWidgetIds: [], // Empty selection
-			};
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				dashboard,
-				variableConfig as any,
-				[],
-				false,
-			);
-
-			// Should return dashboard unchanged
-			expect(updatedDashboard).toEqual(dashboard);
-		});
-
-		it('should handle undefined dashboard gracefully', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const variableConfig = {
-				name: 'service',
-				dynamicVariablesAttribute: 'service.name',
-				dynamicVariablesWidgetIds: ['widget1'],
-			};
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				undefined,
-				variableConfig as any,
-				[],
-				false,
-			);
-
-			// Should return undefined
-			expect(updatedDashboard).toBeUndefined();
-		});
-
-		it('should preserve existing filters when adding new variable filter', () => {
-			const { result } = renderHook(() => useAddDynamicVariableToPanels());
-			const addDynamicVariableToPanels = result.current;
-
-			const dashboard: Dashboard = {
-				data: {
-					widgets: [
-						{
-							id: 'widget1',
-							query: {
-								builder: {
-									queryData: [
-										{
-											filter: {
-												expression: "service.name IN ['adservice']",
-											},
-										},
-									],
-								},
-							},
-						},
-					],
-				},
-			} as any;
-
-			const variableConfig = {
-				name: 'host.name',
-				dynamicVariablesAttribute: 'host.name',
-				dynamicVariablesWidgetIds: ['widget1'],
-				description: '',
-				type: 'DYNAMIC',
-				queryValue: '',
-				customValue: '',
-				textboxValue: '',
-				multiSelect: false,
-				showALLOption: false,
-				sort: 'DISABLED',
-				defaultValue: '3',
-				modificationUUID: 'bd3a85ab-1393-4783-971e-c252adfd4920',
-				id: '6b6f526a-6404-46fc-8d87-dc53e7ba8e1f',
-				order: 0,
-				dynamicVariablesSource: 'Traces',
-			};
-
-			const updatedDashboard = addDynamicVariableToPanels(
-				dashboard,
-				variableConfig as any,
-				[],
-				false,
-			);
-
-			const filterExpression = (updatedDashboard?.data?.widgets?.[0] as Widgets)
-				?.query?.builder?.queryData?.[0]?.filter?.expression;
-
-			expect(filterExpression).toContain(
-				"service.name IN ['adservice'] host.name in $host.name",
-			);
-		});
-	});
-});

frontend/src/container/NewDashboard/__test__/VariableItem.test.tsx

@@ -1,242 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import VariableItem from '../DashboardSettings/Variables/VariableItem/VariableItem';
-
-// Mock dependencies
-jest.mock('api/dashboard/variables/dashboardVariablesQuery');
-jest.mock('hooks/dynamicVariables/useGetFieldValues', () => ({
-	useGetFieldValues: (): any => ({
-		data: {
-			payload: {
-				normalizedValues: ['frontend', 'backend', 'database'],
-			},
-		},
-		isLoading: false,
-		error: null,
-	}),
-}));
-jest.mock('components/Editor', () => {
-	function MockEditor({
-		value,
-		onChange,
-	}: {
-		value: string;
-		onChange: (value: string) => void;
-	}): JSX.Element {
-		return (
-			<textarea
-				data-testid="sql-editor"
-				value={value}
-				onChange={(e): void => onChange(e.target.value)}
-			/>
-		);
-	}
-	MockEditor.displayName = 'MockEditor';
-	return MockEditor;
-});
-
-const mockStore = configureStore([])(() => ({
-	globalTime: {
-		minTime: '2023-01-01T00:00:00Z',
-		maxTime: '2023-01-02T00:00:00Z',
-	},
-}));
-
-const queryClient = new QueryClient({
-	defaultOptions: { queries: { retry: false } },
-});
-
-function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
-	return (
-		<Provider store={mockStore}>
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		</Provider>
-	);
-}
-TestWrapper.displayName = 'TestWrapper';
-
-describe('VariableItem Component - Creation Flow', () => {
-	const mockOnSave = jest.fn();
-	const mockOnCancel = jest.fn();
-	const mockValidateName = jest.fn();
-	const mockValidateAttributeKey = jest.fn();
-	// Constants to avoid string duplication
-	const VARIABLE_NAME_PLACEHOLDER = 'Unique name of the variable';
-	const VARIABLE_DESCRIPTION_PLACEHOLDER =
-		'Enter a description for the variable';
-	const SAVE_BUTTON_TEXT = 'Save Variable';
-	const DISCARD_BUTTON_TEXT = 'Discard';
-
-	const defaultProps = {
-		variableData: {} as IDashboardVariable,
-		existingVariables: {},
-		onCancel: mockOnCancel,
-		onSave: mockOnSave,
-		validateName: mockValidateName,
-		mode: 'ADD' as const,
-		validateAttributeKey: mockValidateAttributeKey,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockValidateName.mockReturnValue(true);
-	});
-
-	describe('Dynamic Variable Creation', () => {
-		it('should switch between variable types correctly', () => {
-			render(
-				<TestWrapper>
-					<VariableItem {...defaultProps} />
-				</TestWrapper>,
-			);
-
-			// Test switching to different variable types
-			const textboxButton = screen.getByText('Textbox');
-			fireEvent.click(textboxButton);
-			// Check if the button has the selected class or is in selected state
-			expect(textboxButton.closest('button')).toHaveClass('selected');
-
-			const customButton = screen.getByText('Custom');
-			fireEvent.click(customButton);
-			expect(customButton.closest('button')).toHaveClass('selected');
-
-			const queryButton = screen.getByText('Query');
-			fireEvent.click(queryButton);
-			expect(queryButton.closest('button')).toHaveClass('selected');
-
-			// Verify SQL editor appears for QUERY type
-			expect(screen.getByTestId('sql-editor')).toBeInTheDocument();
-		});
-
-		it('should validate variable name and show errors', () => {
-			mockValidateName.mockReturnValue(false);
-
-			render(
-				<TestWrapper>
-					<VariableItem {...defaultProps} />
-				</TestWrapper>,
-			);
-
-			const nameInput = screen.getByPlaceholderText(VARIABLE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'duplicate_name' } });
-
-			// Should show error message
-			expect(screen.getByText('Variable name already exists')).toBeInTheDocument();
-
-			// Save button should be disabled
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			expect(saveButton.closest('button')).toBeDisabled();
-		});
-
-		it('should detect and prevent cyclic dependencies', async () => {
-			const existingVariables = {
-				var1: {
-					id: 'var1',
-					name: 'var1',
-					queryValue: 'SELECT * WHERE field = $var2',
-					type: 'QUERY',
-					description: '',
-					sort: 'DISABLED',
-					multiSelect: false,
-					showALLOption: false,
-				} as IDashboardVariable,
-				var2: {
-					id: 'var2',
-					name: 'var2',
-					queryValue: 'SELECT * WHERE field = $var1',
-					type: 'QUERY',
-					description: '',
-					sort: 'DISABLED',
-					multiSelect: false,
-					showALLOption: false,
-				} as IDashboardVariable,
-			};
-
-			render(
-				<TestWrapper>
-					<VariableItem {...defaultProps} existingVariables={existingVariables} />
-				</TestWrapper>,
-			);
-
-			// Fill in name and create a variable that would create cycle
-			const nameInput = screen.getByPlaceholderText(VARIABLE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'var3' } });
-
-			// Switch to QUERY type
-			const queryButton = screen.getByText('Query');
-			fireEvent.click(queryButton);
-
-			// Add query that creates dependency
-			const sqlEditor = screen.getByTestId('sql-editor');
-			fireEvent.change(sqlEditor, {
-				target: { value: 'SELECT * WHERE field = $var1' },
-			});
-
-			// Try to save
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			fireEvent.click(saveButton);
-
-			// Should show cycle detection error
-			await waitFor(() => {
-				expect(
-					screen.getByText(/Circular dependency detected/),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('should handle cancel button functionality', () => {
-			render(
-				<TestWrapper>
-					<VariableItem {...defaultProps} />
-				</TestWrapper>,
-			);
-
-			// Fill in some data
-			const nameInput = screen.getByPlaceholderText(VARIABLE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'test_variable' } });
-
-			// Click cancel
-			const cancelButton = screen.getByText(DISCARD_BUTTON_TEXT);
-			fireEvent.click(cancelButton);
-
-			// Should call onCancel
-			expect(mockOnCancel).toHaveBeenCalledWith(expect.any(Object));
-		});
-
-		it('should persist form fields when switching between variable types', () => {
-			render(
-				<TestWrapper>
-					<VariableItem {...defaultProps} />
-				</TestWrapper>,
-			);
-
-			// Fill in name and description
-			const nameInput = screen.getByPlaceholderText(VARIABLE_NAME_PLACEHOLDER);
-			const descriptionInput = screen.getByPlaceholderText(
-				VARIABLE_DESCRIPTION_PLACEHOLDER,
-			);
-
-			fireEvent.change(nameInput, { target: { value: 'persistent_var' } });
-			fireEvent.change(descriptionInput, {
-				target: { value: 'Persistent description' },
-			});
-
-			// Switch to TEXTBOX type
-			const textboxButton = screen.getByText('Textbox');
-			fireEvent.click(textboxButton);
-
-			// Switch back to DYNAMIC
-			const dynamicButton = screen.getByText('Dynamic');
-			fireEvent.click(dynamicButton);
-
-			// Name and description should be preserved
-			expect(nameInput).toHaveValue('persistent_var');
-			expect(descriptionInput).toHaveValue('Persistent description');
-		});
-	});
-});

frontend/src/container/NewDashboard/utils.ts

@@ -14,5 +14,3 @@ export function variablePropsToPayloadVariables(
 
 	return payloadVariables;
 }
-
-export const ALL_SELECT_VALUE = '__ALL__';

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx

@@ -16,7 +16,6 @@ function WidgetGraphContainer({
 	setRequestData,
 	selectedWidget,
 	isLoadingPanelData,
-	enableDrillDown = false,
 }: WidgetGraphContainerProps): JSX.Element {
 	if (queryResponse.data && selectedGraph === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
@@ -87,7 +86,6 @@ function WidgetGraphContainer({
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
 			selectedGraph={selectedGraph}
-			enableDrillDown={enableDrillDown}
 		/>
 	);
 }