Merge branch 'feat/interactive-dashbaord-v2' of github.com:SigNoz/signoz into feat/cross-filtering-test

* fix: fixed table panels not sorting, due to mismatch in id for aggregations

* fix: added test cases for the sort and util for qbv5 aggregation

.github/CODEOWNERS

@@ -42,3 +42,7 @@
 /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.23
+      GO_VERSION: 1.24
       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.23
+      GO_VERSION: 1.24
       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.23
+      GO_VERSION: 1.24
       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.23
+      GO_VERSION: 1.24
   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.23
+      GO_VERSION: 1.24
   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.23
+      GO_VERSION: 1.24
   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.23
+      GO_VERSION: 1.24
   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.23"
+          go-version: "1.24"
       - 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.23"
+          go-version: "1.24"
       - 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.23"
+          go-version: "1.24"
 
       # 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.23"
+          go-version: "1.24"
       - 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.23"
+          go-version: "1.24"
 
       # copy the caches from build
       - name: get-sha

.gitignore

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

cmd/enterprise/Dockerfile.integration

@@ -2,10 +2,11 @@ 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.23-bullseye
+FROM golang:1.24-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

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, err := types.NewFactorPassword(uuid.NewString())
+	password := types.MustGenerateFactorPassword(newUser.ID.StringValue())
 
-	integrationUser, err := ah.Signoz.Modules.User.CreateUserWithPassword(ctx, newUser, password)
+	err = ah.Signoz.Modules.User.CreateUser(ctx, newUser, user.WithFactorPassword(password))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
-	return integrationUser, nil
+	return newUser, nil
 }
 
 func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (

ee/query-service/model/errors.go

@@ -1,7 +1,7 @@
 package model
 
 import (
-	"fmt"
+	"errors"
 
 	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: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }
 
@@ -73,7 +73,7 @@ func InternalError(err error) *ApiError {
 func InternalErrorStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorInternal,
-		Err: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }
 

frontend/package.json

@@ -49,7 +49,8 @@
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
-		"@signozhq/table": "0.3.4",
+		"@signozhq/table": "0.3.7",
+		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/codemirror-theme-copilot": "4.23.11",

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

@@ -0,0 +1,114 @@
+/* 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

@@ -0,0 +1,209 @@
+/* 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

@@ -0,0 +1,34 @@
+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 = signal;
+	}
+
+	if (name) {
+		params.name = 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

@@ -0,0 +1,63 @@
+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,
+	value?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	if (value) {
+		params.value = value;
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	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.values(response.data.data.values).forEach((valueArray: any) => {
+			if (Array.isArray(valueArray)) {
+				allValues.push(...valueArray.map(String));
+			}
+		});
+
+		// Add a normalized values array to the response
+		response.data.data.normalizedValues = allValues;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldValues;

frontend/src/api/settings/getRetentionV2.ts

@@ -0,0 +1,25 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps } from 'types/api/settings/getRetention';
+
+// Only works for logs
+const getRetentionV2 = async (): Promise<
+	SuccessResponseV2<PayloadProps<'logs'>>
+> => {
+	try {
+		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
+			`/settings/ttl`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getRetentionV2;

frontend/src/api/settings/setRetention.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/settings/setRetention';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, Props } from 'types/api/settings/setRetention';
 
 const setRetention = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadPropsV2>> => {
 	try {
-		const response = await axios.post<PayloadProps>(
+		const response = await axios.post<PayloadPropsV2>(
 			`/settings/ttl?duration=${props.totalDuration}&type=${props.type}${
 				props.coldStorage
 					? `&coldStorage=${props.coldStorage}&toColdDuration=${props.toColdDuration}`
@@ -17,13 +17,11 @@ const setRetention = async (
 		);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/settings/setRetentionV2.ts

@@ -0,0 +1,32 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, PropsV2 } from 'types/api/settings/setRetention';
+
+const setRetentionV2 = async ({
+	type,
+	defaultTTLDays,
+	coldStorageVolume,
+	coldStorageDuration,
+	ttlConditions,
+}: PropsV2): Promise<SuccessResponseV2<PayloadPropsV2>> => {
+	try {
+		const response = await ApiV2Instance.post<PayloadPropsV2>(`/settings/ttl`, {
+			type,
+			defaultTTLDays,
+			coldStorageVolume,
+			coldStorageDuration,
+			ttlConditions,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default setRetentionV2;

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

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

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

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

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

@@ -174,6 +174,31 @@
 	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,7 +59,9 @@ interface CustomTimePickerProps {
 	customDateTimeVisible?: boolean;
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
-	handleGoLive?: () => void;
+	showLiveLogs?: boolean;
+	onGoLive?: () => void;
+	onExitLiveLogs?: () => void;
 }
 
 function CustomTimePicker({
@@ -76,7 +78,9 @@ function CustomTimePicker({
 	customDateTimeVisible,
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
-	handleGoLive,
+	onGoLive,
+	onExitLiveLogs,
+	showLiveLogs,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -165,9 +169,13 @@ function CustomTimePicker({
 	};
 
 	useEffect(() => {
-		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-		setSelectedTimePlaceholderValue(value);
-	}, [selectedTime, selectedValue]);
+		if (showLiveLogs) {
+			setSelectedTimePlaceholderValue('Live');
+		} else {
+			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+			setSelectedTimePlaceholderValue(value);
+		}
+	}, [selectedTime, selectedValue, showLiveLogs]);
 
 	const hide = (): void => {
 		setOpen(false);
@@ -338,6 +346,28 @@ 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">
@@ -357,7 +387,8 @@ function CustomTimePicker({
 								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
-								handleGoLive={defaultTo(handleGoLive, noop)}
+								onGoLive={defaultTo(onGoLive, noop)}
+								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
 								options={items}
 								selectedTime={selectedTime}
 								activeView={activeView}
@@ -392,17 +423,7 @@ function CustomTimePicker({
 						onBlur={handleBlur}
 						onChange={handleInputChange}
 						data-1p-ignore
-						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>
-						}
+						prefix={getInputPrefix()}
 						suffix={
 							<div className="time-input-suffix">
 								{!!isTimezoneOverridden && activeTimezoneOffset && (
@@ -439,6 +460,8 @@ CustomTimePicker.defaultProps = {
 	customDateTimeVisible: false,
 	setCustomDTPickerVisible: noop,
 	onCustomDateHandler: noop,
-	handleGoLive: noop,
+	onGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
+	onExitLiveLogs: noop,
+	showLiveLogs: false,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -6,6 +6,7 @@ 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 {
@@ -16,7 +17,14 @@ import {
 import dayjs from 'dayjs';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 
@@ -32,12 +40,13 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
-	handleGoLive: () => void;
+	onGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
+	onExitLiveLogs: () => void;
 }
 
 interface RecentlyUsedDateTimeRange {
@@ -56,12 +65,13 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
-	handleGoLive,
+	onGoLive,
 	selectedTime,
 	activeView,
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
+	onExitLiveLogs,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
@@ -69,6 +79,19 @@ 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;
 
@@ -76,6 +99,12 @@ function CustomTimePickerPopoverContent({
 		RecentlyUsedDateTimeRange[]
 	>([]);
 
+	const handleExitLiveLogs = useCallback((): void => {
+		if (isLogsExplorerPage) {
+			onExitLiveLogs();
+		}
+	}, [isLogsExplorerPage, onExitLiveLogs]);
+
 	useEffect(() => {
 		if (!customDateTimeVisible) {
 			const customTimeRanges = getCustomTimeRanges();
@@ -107,6 +136,7 @@ function CustomTimePickerPopoverContent({
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
+							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
 					>
@@ -140,12 +170,17 @@ function CustomTimePickerPopoverContent({
 		);
 	}
 
+	const handleGoLive = (): void => {
+		onGoLive();
+		setIsOpen(false);
+	};
+
 	return (
 		<>
 			<div className="date-time-popover">
 				{!customDateTimeVisible && (
 					<div className="date-time-options">
-						{isLogsExplorerPage && (
+						{isLogsExplorerPage && isLogsListView && (
 							<Button className="data-time-live" type="text" onClick={handleGoLive}>
 								Live
 							</Button>
@@ -155,6 +190,7 @@ function CustomTimePickerPopoverContent({
 								type="text"
 								key={option.label + option.value}
 								onClick={(): void => {
+									handleExitLiveLogs();
 									onSelectHandler(option.label, option.value);
 								}}
 								className={cx(
@@ -169,7 +205,6 @@ function CustomTimePickerPopoverContent({
 						))}
 					</div>
 				)}
-
 				<div
 					className={cx(
 						'relative-date-time',
@@ -199,12 +234,14 @@ 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,6 +169,7 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
+
 	.ant-drawer-close {
 		padding: 0px;
 	}

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

@@ -13,6 +13,7 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -71,6 +72,8 @@ function Metrics({
 		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
 	);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
 			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
@@ -78,7 +81,8 @@ function Metrics({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4, dynamicVariables, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -28,6 +28,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -37,7 +38,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...',
@@ -62,6 +63,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
+	onDropdownVisibleChange,
+	showIncompleteDataMessage = false,
+	showLabels = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -78,6 +82,8 @@ 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(
@@ -124,6 +130,12 @@ 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),
@@ -132,10 +144,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[]): void => {
+		(newValue: string | string[], directCaller?: boolean): 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)
@@ -144,7 +164,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 },
@@ -175,7 +195,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[onChange, allAvailableValues, options, enableAllSelection],
+		[
+			allOptionShown,
+			isAllSelected,
+			onChange,
+			allAvailableValues,
+			options,
+			enableAllSelection,
+		],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -510,11 +537,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			setSearchText(value.trim());
+			const trimmedValue = value.trim();
+			setSearchText(trimmedValue);
 			if (!isOpen) {
 				setIsOpen(true);
+				justOpenedRef.current = true;
 			}
-			if (onSearch) onSearch(value.trim());
+
+			// Reset active index when search changes if dropdown is open
+			if (isOpen && trimmedValue) {
+				setActiveIndex(0);
+			}
+
+			if (onSearch) onSearch(trimmedValue);
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -528,28 +563,34 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			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}`;
+			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}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							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;
+			}
 		},
 		[highlightSearch],
 	);
@@ -560,10 +601,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([]);
+			handleInternalChange([], true);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE]);
+			handleInternalChange([ALL_SELECTED_VALUE], true);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -738,6 +779,26 @@ 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 [];
@@ -752,7 +813,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: '__all__', // Special value for the ALL option
+						value: ALL_SELECTED_VALUE, // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -784,6 +845,17 @@ 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';
@@ -1129,7 +1201,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__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1159,6 +1231,10 @@ 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:
@@ -1168,7 +1244,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1214,7 +1290,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						setActiveIndex(0);
+						justOpenedRef.current = true; // Set flag to initialize active option on next render
 						setActiveChipIndex(-1);
 						break;
 
@@ -1260,9 +1336,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
+			allOptionShown,
+			isAllSelected,
+			isOpen,
+			activeIndex,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
-			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1278,10 +1359,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			activeIndex,
+			onDropdownVisibleChange,
 			handleSelectAll,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1306,6 +1385,14 @@ 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
@@ -1382,6 +1469,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1460,15 +1548,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!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 &&
+						!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 && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1494,9 +1585,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</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>}
 				</div>
 			</div>
 		);
@@ -1513,6 +1614,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1522,8 +1624,31 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);
 
+	// 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
@@ -1585,55 +1710,16 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Custom Tag Render (needs significant updates)
 	const tagRender = useCallback(
 		(props: CustomTagProps): React.ReactElement => {
-			const { label, value, closable, onClose } = props;
+			const { label: labelProp, value, closable, onClose } = props;
+
+			const label = showLabels
+				? options.find((option) => option.value === value)?.label || labelProp
+				: labelProp;
 
 			// If the display value is the special ALL value, render the ALL tag
-			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 (allOptionShown) {
+				// Don't render a visible tag - will be shown as placeholder
+				return <div style={{ display: 'none' }} />;
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1713,52 +1799,69 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		[
-			isAllSelected,
-			handleInternalChange,
-			activeChipIndex,
-			selectedChips,
-			selectedValues,
-			maxTagCount,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[isAllSelected, 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 (
-		<Select
-			ref={selectRef}
-			className={cx('custom-multiselect', className, {
-				'has-selection': selectedChips.length > 0 && !isAllSelected,
-				'is-all-selected': isAllSelected,
+		<div
+			className={cx('custom-multiselect-wrapper', {
+				'all-selected': allOptionShown || isAllSelected,
 			})}
-			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}
-		/>
+		>
+			{(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>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,6 +29,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -57,17 +58,29 @@ 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 =====
 
@@ -130,23 +143,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			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}`;
+			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}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							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;
+			}
 		},
 		[highlightSearch],
 	);
@@ -246,9 +269,14 @@ 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],
+		[onSearch, isOpen],
 	);
 
 	/**
@@ -272,14 +300,23 @@ 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(
-						isEmpty(value)
-							? filteredOptions
-							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
+						processedOptions,
 					);
 
 					// Add custom option if needed
-					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
+					if (
+						!isEmpty(searchText) &&
+						!isLabelPresent(processedOptions, searchText)
+					) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -300,33 +337,52 @@ 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();
-						setActiveOptionIndex((prev) =>
-							prev < options.length - 1 ? prev + 1 : 0,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
+						}
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev > 0 ? prev - 1 : options.length - 1,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
+						}
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev > 0 ? prev - 1 : options.length - 1,
+								);
+							}
 						} else {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev < options.length - 1 ? prev + 1 : 0,
+								);
+							}
 						}
 						break;
 
@@ -339,6 +395,7 @@ 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
@@ -351,6 +408,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -359,6 +417,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
+						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -369,6 +428,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -379,7 +439,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				setActiveOptionIndex(0);
+				justOpenedRef.current = true; // Set flag to initialize active option on next render
 			}
 		},
 		[
@@ -444,6 +504,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -454,7 +515,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
-
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -472,13 +532,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!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 &&
+						!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 && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -504,9 +567,19 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</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>}
 				</div>
 			</div>
 		);
@@ -520,6 +593,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -527,8 +601,22 @@ 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
@@ -582,7 +670,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={setIsOpen}
+			onDropdownVisibleChange={handleDropdownVisibleChange}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,6 +35,43 @@ $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;
@@ -158,7 +195,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 300px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -276,6 +313,10 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
+	.navigation-text-incomplete {
+		color: var(--bg-amber-600) !important;
+	}
+
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -322,7 +363,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -656,6 +697,10 @@ $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);
 			}
@@ -836,3 +881,38 @@ $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,9 +24,10 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -51,10 +52,13 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	maxTagTextLength?: number;
+	showIncompleteDataMessage?: boolean;
+	showLabels?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -133,3 +133,15 @@ 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/__tests__/utils.test.ts

@@ -1,10 +1,16 @@
 /* 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,
 } from '../utils';
@@ -769,3 +775,200 @@ 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()',
+			},
+		]);
+	});
+});

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 } from 'types/common/queryBuilder';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { unquote } from 'utils/stringUtils';
 import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
@@ -38,6 +38,13 @@ 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
@@ -48,6 +55,10 @@ 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];
@@ -580,14 +591,25 @@ export const convertHavingToExpression = (
  * @returns New aggregation format based on data source
  *
  */
-export const convertAggregationToExpression = (
-	aggregateOperator: string,
-	aggregateAttribute: BaseAutocompleteData,
-	dataSource: DataSource,
-	timeAggregation?: string,
-	spaceAggregation?: string,
-	alias?: string,
-): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
+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 => {
 	// Skip if no operator or attribute key
 	if (!aggregateOperator) {
 		return undefined;
@@ -605,7 +627,9 @@ export const convertAggregationToExpression = (
 	if (dataSource === DataSource.METRICS) {
 		return [
 			{
-				metricName: aggregateAttribute.key,
+				metricName: aggregateAttribute?.key || '',
+				reduceTo,
+				temporality,
 				timeAggregation: (normalizedTimeAggregation || normalizedOperator) as any,
 				spaceAggregation: (normalizedSpaceAggregation || normalizedOperator) as any,
 			} as MetricAggregation,
@@ -613,7 +637,9 @@ export const convertAggregationToExpression = (
 	}
 
 	// For traces and logs, use expression format
-	const expression = `${normalizedOperator}(${aggregateAttribute.key})`;
+	const expression = aggregateAttribute?.key
+		? `${normalizedOperator}(${aggregateAttribute?.key})`
+		: `${normalizedOperator}()`;
 
 	if (dataSource === DataSource.TRACES) {
 		return [

frontend/src/constants/localStorage.ts

@@ -32,6 +32,7 @@ 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,6 +46,7 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	summaryFilters = 'summaryFilters',
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',

frontend/src/constants/userPreferences.ts

@@ -2,4 +2,5 @@ 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;
 		}
 	}
-	&__graph {
+	&__alert-history-graph {
 		margin-top: 80px;
 
-		.graph {
+		.alert-history-graph {
 			width: 100%;
 			height: 72px;
 		}

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

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

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -2,22 +2,30 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Card, Col, Divider, Modal, Row, Spin, Typography } from 'antd';
 import setRetentionApi from 'api/settings/setRetention';
+import setRetentionApiV2 from 'api/settings/setRetentionV2';
 import TextToolTip from 'components/TextToolTip';
 import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import { StatusCodes } from 'http-status-codes';
 import find from 'lodash-es/find';
 import { useAppContext } from 'providers/App/App';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useInterval } from 'react-use';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	ErrorResponse,
+	ErrorResponseV2,
+	SuccessResponse,
+	SuccessResponseV2,
+} from 'types/api';
 import {
 	IDiskType,
 	PayloadProps as GetDisksPayload,
 } from 'types/api/disks/getDisks';
+import APIError from 'types/api/error';
 import { TTTLType } from 'types/api/settings/common';
 import {
 	PayloadPropsLogs as GetRetentionPeriodLogsPayload,
@@ -127,7 +135,7 @@ function GeneralSettings({
 
 	useEffect(() => {
 		if (logsCurrentTTLValues) {
-			setLogsTotalRetentionPeriod(logsCurrentTTLValues.logs_ttl_duration_hrs);
+			setLogsTotalRetentionPeriod(logsCurrentTTLValues.default_ttl_days * 24);
 			setLogsS3RetentionPeriod(
 				logsCurrentTTLValues.logs_move_ttl_duration_hrs
 					? logsCurrentTTLValues.logs_move_ttl_duration_hrs
@@ -336,20 +344,40 @@ function GeneralSettings({
 		}
 		try {
 			onPostApiLoadingHandler(type);
-			const setTTLResponse = await setRetentionApi({
-				type,
-				totalDuration: `${apiCallTotalRetention || -1}h`,
-				coldStorage: s3Enabled ? 's3' : null,
-				toColdDuration: `${apiCallS3Retention || -1}h`,
-			});
 			let hasSetTTLFailed = false;
-			if (setTTLResponse.statusCode === 409) {
+
+			try {
+				if (type === 'logs') {
+					await setRetentionApiV2({
+						type,
+						defaultTTLDays: apiCallTotalRetention ? apiCallTotalRetention / 24 : -1, // convert Hours to days
+						coldStorageVolume: '',
+						coldStorageDuration: 0,
+						ttlConditions: [],
+					});
+				} else {
+					await setRetentionApi({
+						type,
+						totalDuration: `${apiCallTotalRetention || -1}h`,
+						coldStorage: s3Enabled ? 's3' : null,
+						toColdDuration: `${apiCallS3Retention || -1}h`,
+					});
+				}
+			} catch (error) {
 				hasSetTTLFailed = true;
-				notifications.error({
-					message: 'Error',
-					description: t('retention_request_race_condition'),
-					placement: 'topRight',
-				});
+				if ((error as APIError).getHttpStatusCode() === StatusCodes.CONFLICT) {
+					notifications.error({
+						message: 'Error',
+						description: t('retention_request_race_condition'),
+						placement: 'topRight',
+					});
+				} else {
+					notifications.error({
+						message: 'Error',
+						description: (error as APIError).getErrorMessage(),
+						placement: 'topRight',
+					});
+				}
 			}
 
 			if (type === 'metrics') {
@@ -376,11 +404,14 @@ function GeneralSettings({
 				logsTtlValuesRefetch();
 				if (!hasSetTTLFailed)
 					// Updates the currentTTL Values in order to avoid pushing the same values.
-					setLogsCurrentTTLValues({
+					setLogsCurrentTTLValues((prev) => ({
+						...prev,
 						logs_ttl_duration_hrs: logsTotalRetentionPeriod || -1,
 						logs_move_ttl_duration_hrs: logsS3RetentionPeriod || -1,
-						status: '',
-					});
+						default_ttl_days: logsTotalRetentionPeriod
+							? logsTotalRetentionPeriod / 24 // convert Hours to days
+							: -1,
+					}));
 			}
 		} catch (error) {
 			notifications.error({
@@ -399,6 +430,7 @@ function GeneralSettings({
 	const renderConfig = [
 		{
 			name: 'Metrics',
+			type: 'metrics',
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -440,6 +472,7 @@ function GeneralSettings({
 		},
 		{
 			name: 'Traces',
+			type: 'traces',
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -479,6 +512,7 @@ function GeneralSettings({
 		},
 		{
 			name: 'Logs',
+			type: 'logs',
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -537,6 +571,7 @@ function GeneralSettings({
 							/>
 							{category.retentionFields.map((retentionField) => (
 								<Retention
+									type={category.type as TTTLType}
 									key={retentionField.name}
 									text={retentionField.name}
 									retentionValue={retentionField.value}
@@ -625,7 +660,7 @@ interface GeneralSettingsProps {
 		ErrorResponse | SuccessResponse<GetRetentionPeriodTracesPayload>
 	>['refetch'];
 	logsTtlValuesRefetch: UseQueryResult<
-		ErrorResponse | SuccessResponse<GetRetentionPeriodLogsPayload>
+		ErrorResponseV2 | SuccessResponseV2<GetRetentionPeriodLogsPayload>
 	>['refetch'];
 }
 

frontend/src/container/GeneralSettings/Retention.tsx

@@ -9,6 +9,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { TTTLType } from 'types/api/settings/common';
 
 import {
 	Input,
@@ -20,11 +21,13 @@ import {
 	convertHoursValueToRelevantUnit,
 	SettingPeriod,
 	TimeUnits,
+	TimeUnitsValues,
 } from './utils';
 
 const { Option } = Select;
 
 function Retention({
+	type,
 	retentionValue,
 	setRetentionValue,
 	text,
@@ -50,7 +53,9 @@ function Retention({
 		if (!interacted.current) setSelectTimeUnit(initialTimeUnitValue);
 	}, [initialTimeUnitValue]);
 
-	const menuItems = TimeUnits.map((option) => (
+	const menuItems = TimeUnits.filter((option) =>
+		type === 'logs' ? option.value !== TimeUnitsValues.hr : true,
+	).map((option) => (
 		<Option key={option.value} value={option.value}>
 			{option.key}
 		</Option>
@@ -124,6 +129,7 @@ function Retention({
 }
 
 interface RetentionProps {
+	type: TTTLType;
 	retentionValue: number | null;
 	text: string;
 	setRetentionValue: Dispatch<SetStateAction<number | null>>;

frontend/src/container/GeneralSettings/index.tsx

@@ -1,11 +1,13 @@
 import { Typography } from 'antd';
 import getDisks from 'api/disks/getDisks';
 import getRetentionPeriodApi from 'api/settings/getRetention';
+import getRetentionPeriodApiV2 from 'api/settings/getRetentionV2';
 import Spinner from 'components/Spinner';
 import { useAppContext } from 'providers/App/App';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
+import APIError from 'types/api/error';
 import { TTTLType } from 'types/api/settings/common';
 import { PayloadProps as GetRetentionPeriodAPIPayloadProps } from 'types/api/settings/getRetention';
 
@@ -15,6 +17,10 @@ type TRetentionAPIReturn<T extends TTTLType> = Promise<
 	SuccessResponse<GetRetentionPeriodAPIPayloadProps<T>> | ErrorResponse
 >;
 
+type TRetentionAPIReturnV2<T extends TTTLType> = Promise<
+	SuccessResponseV2<GetRetentionPeriodAPIPayloadProps<T>>
+>;
+
 function GeneralSettings(): JSX.Element {
 	const { t } = useTranslation('common');
 	const { user } = useAppContext();
@@ -36,7 +42,7 @@ function GeneralSettings(): JSX.Element {
 			queryKey: ['getRetentionPeriodApiTraces', user?.accessJwt],
 		},
 		{
-			queryFn: (): TRetentionAPIReturn<'logs'> => getRetentionPeriodApi('logs'),
+			queryFn: (): TRetentionAPIReturnV2<'logs'> => getRetentionPeriodApiV2(), // Only works for logs
 			queryKey: ['getRetentionPeriodApiLogs', user?.accessJwt],
 		},
 		{
@@ -70,7 +76,7 @@ function GeneralSettings(): JSX.Element {
 	if (getRetentionPeriodLogsApiResponse.isError || getDisksResponse.isError) {
 		return (
 			<Typography>
-				{getRetentionPeriodLogsApiResponse.data?.error ||
+				{(getRetentionPeriodLogsApiResponse.error as APIError).getErrorMessage() ||
 					getDisksResponse.data?.error ||
 					t('something_went_wrong')}
 			</Typography>
@@ -86,7 +92,7 @@ function GeneralSettings(): JSX.Element {
 		getRetentionPeriodTracesApiResponse.isLoading ||
 		!getRetentionPeriodTracesApiResponse.data?.payload ||
 		getRetentionPeriodLogsApiResponse.isLoading ||
-		!getRetentionPeriodLogsApiResponse.data?.payload
+		!getRetentionPeriodLogsApiResponse.data?.data
 	) {
 		return <Spinner tip="Loading.." height="70vh" />;
 	}
@@ -99,7 +105,7 @@ function GeneralSettings(): JSX.Element {
 				metricsTtlValuesRefetch: getRetentionPeriodMetricsApiResponse.refetch,
 				tracesTtlValuesPayload: getRetentionPeriodTracesApiResponse.data?.payload,
 				tracesTtlValuesRefetch: getRetentionPeriodTracesApiResponse.refetch,
-				logsTtlValuesPayload: getRetentionPeriodLogsApiResponse.data?.payload,
+				logsTtlValuesPayload: getRetentionPeriodLogsApiResponse.data?.data,
 				logsTtlValuesRefetch: getRetentionPeriodLogsApiResponse.refetch,
 			}}
 		/>

frontend/src/container/GeneralSettings/utils.ts

@@ -5,19 +5,26 @@ export interface ITimeUnit {
 	key: string;
 	multiplier: number;
 }
+
+export enum TimeUnitsValues {
+	hr = 'hr',
+	day = 'day',
+	month = 'month',
+}
+
 export const TimeUnits: ITimeUnit[] = [
 	{
-		value: 'hr',
+		value: TimeUnitsValues.hr,
 		key: 'Hours',
 		multiplier: 1,
 	},
 	{
-		value: 'day',
+		value: TimeUnitsValues.day,
 		key: 'Days',
 		multiplier: 1 / 24,
 	},
 	{
-		value: 'month',
+		value: TimeUnitsValues.month,
 		key: 'Months',
 		multiplier: 1 / (24 * 30),
 	},

frontend/src/container/GridCardLayout/GridCard/FullView/PanelTypeSelector.scss

@@ -0,0 +1,34 @@
+.panel-type-selector {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin-left: 16px;
+	min-width: 140px;
+
+	.typography {
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-slate-600);
+		line-height: 16px;
+		white-space: nowrap;
+	}
+
+	.panel-type-select {
+		.select-option {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.icon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.display {
+				font-size: 14px;
+				line-height: 20px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,79 @@
+import './PanelTypeSelector.scss';
+
+import { Select, Typography } from 'antd';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
+import { handleQueryChange } from 'container/NewWidget/utils';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useCallback } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+const { Option } = Select;
+
+interface PanelTypeSelectorProps {
+	selectedPanelType: PANEL_TYPES;
+	disabled?: boolean;
+	query: Query;
+	widgetId: string;
+}
+
+function PanelTypeSelector({
+	selectedPanelType,
+	disabled = false,
+	query,
+	widgetId,
+}: PanelTypeSelectorProps): JSX.Element {
+	const { redirectWithQueryBuilderData } = useQueryBuilder();
+
+	const handleChange = useCallback(
+		(newPanelType: PANEL_TYPES): void => {
+			// Transform the query for the new panel type using handleQueryChange
+			const transformedQuery = handleQueryChange(
+				newPanelType as any,
+				query,
+				selectedPanelType,
+			);
+
+			// Use redirectWithQueryBuilderData to update URL with transformed query and new panel type
+			redirectWithQueryBuilderData(
+				transformedQuery,
+				{
+					[QueryParams.expandedWidgetId]: widgetId,
+					[QueryParams.graphType]: newPanelType,
+				},
+				undefined,
+				true,
+			);
+		},
+		[redirectWithQueryBuilderData, query, selectedPanelType, widgetId],
+	);
+
+	return (
+		<div className="panel-type-selector">
+			<Select
+				onChange={handleChange}
+				value={selectedPanelType}
+				style={{ width: '100%' }}
+				className="panel-type-select"
+				data-testid="panel-change-select"
+				disabled={disabled}
+			>
+				{GraphTypes.map((item) => (
+					<Option key={item.name} value={item.name}>
+						<div className="select-option">
+							<div className="icon">{item.icon}</div>
+							<Typography.Text className="display">{item.display}</Typography.Text>
+						</div>
+					</Option>
+				))}
+			</Select>
+		</div>
+	);
+}
+
+PanelTypeSelector.defaultProps = {
+	disabled: false,
+};
+
+export default PanelTypeSelector;

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import './WidgetFullView.styles.scss';
 
 import {
@@ -8,26 +9,33 @@ 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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
@@ -38,6 +46,7 @@ import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 
 import { getLocalStorageGraphVisibilityState } from '../utils';
 import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
+import PanelTypeSelector from './PanelTypeSelector';
 import { GraphContainer, TimeContainer } from './styles';
 import { FullViewProps } from './types';
 
@@ -52,6 +61,7 @@ function FullView({
 	onClickHandler,
 	customOnDragSelect,
 	setCurrentGraphRef,
+	enableDrillDown = false,
 }: FullViewProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const { selectedTime: globalSelectedTime } = useSelector<
@@ -63,12 +73,16 @@ 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(
 		() =>
@@ -85,17 +99,26 @@ function FullView({
 
 	const updatedQuery = widget?.query;
 
+	// Panel type derived from URL with fallback to widget setting
+	const selectedPanelType = useMemo(() => {
+		const urlPanelType = urlQuery.get(QueryParams.graphType) as PANEL_TYPES;
+		if (urlPanelType && Object.values(PANEL_TYPES).includes(urlPanelType)) {
+			return urlPanelType;
+		}
+		return widget?.panelTypes || PANEL_TYPES.TIME_SERIES;
+	}, [urlQuery, widget?.panelTypes]);
+
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
+		if (selectedPanelType !== PANEL_TYPES.LIST) {
 			return {
 				selectedTime: selectedTime.enum,
-				graphType: getGraphType(widget.panelTypes),
+				graphType: getGraphType(selectedPanelType),
 				query: updatedQuery,
 				globalSelectedInterval: globalSelectedTime,
 				variables: getDashboardVariables(selectedDashboard?.data.variables),
 				fillGaps: widget.fillSpans,
-				formatForWeb: widget.panelTypes === PANEL_TYPES.TABLE,
-				originalGraphType: widget?.panelTypes,
+				formatForWeb: selectedPanelType === PANEL_TYPES.TABLE,
+				originalGraphType: selectedPanelType,
 			};
 		}
 		updatedQuery.builder.queryData[0].pageSize = 10;
@@ -114,6 +137,19 @@ function FullView({
 		};
 	});
 
+	const {
+		drilldownQuery,
+		dashboardEditView,
+		handleResetQuery,
+		showResetQuery,
+	} = useDrilldown({
+		enableDrillDown,
+		widget,
+		setRequestData,
+		selectedDashboard,
+		selectedPanelType,
+	});
+
 	useEffect(() => {
 		setRequestData((prev) => ({
 			...prev,
@@ -121,12 +157,33 @@ function FullView({
 		}));
 	}, [selectedTime]);
 
+	// Update requestData when panel type changes
+	useEffect(() => {
+		setRequestData((prev) => {
+			if (selectedPanelType !== PANEL_TYPES.LIST) {
+				return {
+					...prev,
+					graphType: getGraphType(selectedPanelType),
+					formatForWeb: selectedPanelType === PANEL_TYPES.TABLE,
+					originalGraphType: selectedPanelType,
+				};
+			}
+			// For LIST panels, ensure proper configuration
+			return {
+				...prev,
+				graphType: PANEL_TYPES.LIST,
+				formatForWeb: false,
+				originalGraphType: selectedPanelType,
+			};
+		});
+	}, [selectedPanelType]);
+
 	const response = useGetQueryRange(
 		requestData,
 		// selectedDashboard?.data?.version || version || DEFAULT_ENTITY_VERSION,
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [widget?.query, widget?.panelTypes, requestData, version],
+			queryKey: [widget?.query, selectedPanelType, requestData, version],
 			enabled: !isDependedDataLoaded,
 			keepPreviousData: true,
 		},
@@ -169,18 +226,18 @@ function FullView({
 	}, [originalName, response.data?.payload.data.result]);
 
 	const canModifyChart = useChartMutable({
-		panelType: widget.panelTypes,
+		panelType: selectedPanelType,
 		panelTypeAndGraphManagerVisibility: PANEL_TYPES_VS_FULL_VIEW_TABLE,
 	});
 
-	if (response.data && widget.panelTypes === PANEL_TYPES.BAR) {
+	if (response.data && selectedPanelType === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
 			response.data?.payload.data.result,
 		);
 		response.data.payload.data.result = sortedSeriesData;
 	}
 
-	if (response.data && widget.panelTypes === PANEL_TYPES.PIE) {
+	if (response.data && selectedPanelType === PANEL_TYPES.PIE) {
 		const transformedData = populateMultipleResults(response?.data);
 		// eslint-disable-next-line no-param-reassign
 		response.data = transformedData;
@@ -192,83 +249,136 @@ function FullView({
 		});
 	}, [graphsVisibilityStates]);
 
-	const isListView = widget.panelTypes === PANEL_TYPES.LIST;
+	const isListView = selectedPanelType === PANEL_TYPES.LIST;
 
-	const isTablePanel = widget.panelTypes === PANEL_TYPES.TABLE;
+	const isTablePanel = selectedPanelType === PANEL_TYPES.TABLE;
 
 	const [searchTerm, setSearchTerm] = useState<string>('');
 
-	if (response.isLoading && widget.panelTypes !== PANEL_TYPES.LIST) {
+	if (response.isLoading && selectedPanelType !== PANEL_TYPES.LIST) {
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
 	return (
 		<div className="full-view-container">
-			<div className="full-view-header-container">
-				{fullViewOptions && (
-					<TimeContainer $panelType={widget.panelTypes}>
-						{response.isFetching && (
-							<Spin spinning indicator={<LoadingOutlined spin />} />
+			<OverlayScrollbar>
+				<>
+					<div className="full-view-header-container">
+						{fullViewOptions && (
+							<TimeContainer $panelType={selectedPanelType}>
+								{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>
+										)}
+										<PanelTypeSelector
+											selectedPanelType={selectedPanelType}
+											disabled={response.isFetching || response.isLoading}
+											query={drilldownQuery}
+											widgetId={widget?.id || ''}
+										/>
+									</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>
 						)}
-						<TimePreference
-							selectedTime={selectedTime}
-							setSelectedTime={setSelectedTime}
-						/>
-						<Button
-							style={{
-								marginLeft: '4px',
-							}}
-							onClick={(): void => {
-								response.refetch();
-							}}
-							type="primary"
-							icon={<SyncOutlined />}
-						/>
-					</TimeContainer>
-				)}
-			</div>
+						{enableDrillDown && (
+							<>
+								<QueryBuilderV2
+									panelType={selectedPanelType}
+									version={selectedDashboard?.data?.version || 'v3'}
+									isListViewPanel={selectedPanelType === 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,
-					'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 || '');
+					<div
+						className={cx('graph-container', {
+							disabled: isDashboardLocked,
+							'height-widget':
+								widget?.mergeAllActiveQueries || widget?.stackedBarChart,
+							'full-view-graph-container': isListView,
+						})}
+						ref={fullViewRef}
+					>
+						<GraphContainer
+							style={{
+								height: isListView ? '100%' : '90%',
 							}}
-						/>
-					)}
-					<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>
+							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}
+								selectedGraph={selectedPanelType}
+							/>
+						</GraphContainer>
+					</div>
+				</>
+			</OverlayScrollbar>
 		</div>
 	);
 }

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

@@ -18,6 +18,7 @@ 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
@@ -25,6 +26,14 @@ export const TimeContainer = styled.div<Props>`
 					margin-bottom: 1rem;
 			  `
 			: css``}
+
+	.time-container {
+		display: flex;
+	}
+	.drildown-options-container {
+		display: flex;
+		align-items: center;
+	}
 `;
 
 export const GraphContainer = styled.div<GraphContainerProps>`

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

@@ -59,6 +59,7 @@ 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

@@ -0,0 +1,99 @@
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+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 { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
+
+export interface DrilldownQueryProps {
+	widget: Widgets;
+	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	enableDrillDown: boolean;
+	selectedDashboard: Dashboard | undefined;
+	selectedPanelType: PANEL_TYPES;
+}
+
+export interface UseDrilldownReturn {
+	drilldownQuery: Query;
+	dashboardEditView: string;
+	handleResetQuery: () => void;
+	showResetQuery: boolean;
+}
+
+const useDrilldown = ({
+	enableDrillDown,
+	widget,
+	setRequestData,
+	selectedDashboard,
+	selectedPanelType,
+}: 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: selectedPanelType,
+				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,
+			{
+				[QueryParams.expandedWidgetId]: widget.id,
+				[QueryParams.graphType]: widget.panelTypes,
+			},
+			undefined,
+			true,
+		);
+	}, [redirectWithQueryBuilderData, widget.query, widget.id, widget.panelTypes]);
+
+	return {
+		drilldownQuery: compositeQuery || widget.query,
+		dashboardEditView,
+		handleResetQuery,
+		showResetQuery,
+	};
+};
+
+export default useDrilldown;

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

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

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

@@ -4,6 +4,8 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
+import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
@@ -13,7 +15,6 @@ 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';
@@ -53,6 +54,7 @@ function GridCardGraph({
 	customTimeRange,
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
+	enableDrillDown,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -62,14 +64,18 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
-		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
+
+	const { dynamicVariables } = useGetDynamicVariables();
+	const dynamicVariableToWidgetsMap = useMemo(
+		() => createDynamicVariableToWidgetsMap(dynamicVariables, [widget]),
+		[dynamicVariables, widget],
+	);
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -120,11 +126,7 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition =
-		isVisible &&
-		!isEmptyWidget &&
-		isQueryEnabled &&
-		isEmpty(variablesToGetUpdated);
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -163,22 +165,24 @@ function GridCardGraph({
 		};
 	});
 
-	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]);
+	// 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 (!isEqual(updatedQuery, requestData.query)) {
@@ -218,12 +222,23 @@ 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' ||
+								(dynamicVariableToWidgetsMap?.[id] &&
+									dynamicVariableToWidgetsMap?.[id].includes(widget.id))
+							) {
+								return { ...acc, [id]: variable.selectedValue };
+							}
+							return acc;
+					  }, {})
+					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
@@ -317,6 +332,7 @@ function GridCardGraph({
 					customErrorMessage={isInternalServerError ? customErrorMessage : undefined}
 					customOnRowClick={customOnRowClick}
 					customTimeRangeWindowForCoRelation={customTimeRangeWindowForCoRelation}
+					enableDrillDown={enableDrillDown}
 				/>
 			)}
 		</div>
@@ -332,6 +348,7 @@ GridCardGraph.defaultProps = {
 	version: 'v3',
 	analyticsEvent: undefined,
 	customTimeRangeWindowForCoRelation: undefined,
+	enableDrillDown: false,
 };
 
 export default memo(GridCardGraph);

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

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

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

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

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -53,11 +53,12 @@ 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 } = props;
+	const { handle, enableDrillDown = false } = props;
 	const { safeNavigate } = useSafeNavigate();
 	const {
 		selectedDashboard,
@@ -584,6 +585,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									version={ENTITY_VERSION_V5}
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
+									enableDrillDown={enableDrillDown}
 								/>
 							</Card>
 						</CardContainer>
@@ -670,3 +672,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 }
 
 export default GraphLayout;
+
+GraphLayout.defaultProps = {
+	enableDrillDown: false,
+};

frontend/src/container/GridCardLayout/index.tsx

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

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -2,6 +2,7 @@ import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { useCallback } from 'react';
@@ -34,6 +35,8 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 
 	const queryRangeMutation = useMutation(getSubstituteVars);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+
 	const getUpdatedQuery = useCallback(
 		async ({
 			widgetConfig,
@@ -47,6 +50,7 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 				globalSelectedInterval,
 				variables: getDashboardVariables(selectedDashboard?.data?.variables),
 				originalGraphType: widgetConfig.panelTypes,
+				dynamicVariables,
 			});
 
 			// Execute query and process results
@@ -55,7 +59,7 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			// Map query data from API response
 			return mapQueryDataFromApi(queryResult.data.compositeQuery);
 		},
-		[globalSelectedInterval, queryRangeMutation],
+		[dynamicVariables, globalSelectedInterval, queryRangeMutation],
 	);
 
 	return {

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 export const tableDataMultipleQueriesSuccessResponse = {
 	columns: [
 		{
@@ -210,3 +211,278 @@ 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,8 +6,11 @@ import {
 	sortFunction,
 } from '../utils';
 import {
+	expectedOutputQBv5MultiAggregations,
 	expectedOutputWithLegends,
 	tableDataMultipleQueriesSuccessResponse,
+	tableDataQBv5MultiAggregations,
+	widgetQueryQBv5MultiAggregations,
 	widgetQueryWithLegend,
 } from './response';
 
@@ -67,6 +70,7 @@ 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);
@@ -128,3 +132,96 @@ 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,6 +46,8 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
+	panelType,
+	queryRangeRequest,
 	...props
 }: GridTableComponentProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
@@ -266,6 +268,8 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
+				panelType={panelType}
+				queryRangeRequest={queryRangeRequest}
 				onRow={
 					openTracesButton || customOnRowClick
 						? (record): React.HTMLAttributes<HTMLElement> => ({

frontend/src/container/GridTableComponent/types.ts

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

frontend/src/container/GridTableComponent/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { ColumnsType, ColumnType } from 'antd/es/table';
+import { 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,6 +9,12 @@ 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,
@@ -150,11 +156,14 @@ 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[`${item.name}_without_unit`] ?? a[item.name]);
-	const valueB = Number(b[`${item.name}_without_unit`] ?? b[item.name]);
+	const valueA = Number(a[`${colId}_without_unit`] ?? a[colId] ?? a[colName]);
+	const valueB = Number(b[`${colId}_without_unit`] ?? b[colId] ?? b[colName]);
 
 	// if both the values are numbers then return the difference here
 	if (!isNaN(valueA) && !isNaN(valueB)) {
@@ -172,17 +181,18 @@ export function sortFunction(
 	}
 
 	// if both of them are strings do the localecompare
-	return ((a[item.name] as string) || '').localeCompare(
-		(b[item.name] as string) || '',
+	return ((a[colId] as string) || (a[colName] as string) || '').localeCompare(
+		(b[colId] as string) || (b[colName] as string) || '',
 	);
 }
+
 export function createColumnsAndDataSource(
 	data: TableData,
 	currentQuery: Query,
 	renderColumnCell?: QueryTableProps['renderColumnCell'],
-): { columns: ColumnsType<RowData>; dataSource: RowData[] } {
-	const columns: ColumnsType<RowData> =
-		data.columns?.reduce<ColumnsType<RowData>>((acc, item) => {
+): { columns: CustomDataColumnType<RowData>[]; dataSource: RowData[] } {
+	const columns: CustomDataColumnType<RowData>[] =
+		data.columns?.reduce<CustomDataColumnType<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)
@@ -193,12 +203,14 @@ export function createColumnsAndDataSource(
 					(query) => query.queryName === item.queryName,
 				)?.aggregations?.length || 0;
 
-			const column: ColumnType<RowData> = {
+			const column: CustomDataColumnType<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,
-				render: renderColumnCell && renderColumnCell[item.name],
+				isValueColumn: item.isValueColumn,
+				queryName: item.queryName,
+				render: renderColumnCell && renderColumnCell[item.id],
 				sorter: (a: RowData, b: RowData): number => sortFunction(a, b, item),
 			};
 

frontend/src/container/GridValueComponent/index.tsx

@@ -2,8 +2,11 @@ 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';
@@ -13,6 +16,10 @@ function GridValueComponent({
 	title,
 	yAxisUnit,
 	thresholds,
+	widget,
+	queryResponse,
+	contextLinks,
+	enableDrillDown = false,
 }: GridValueComponentProps): JSX.Element {
 	const value = ((data[1] || [])[0] || 0) as number;
 
@@ -21,6 +28,35 @@ 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>
@@ -29,12 +65,30 @@ function GridValueComponent({
 		);
 	}
 
+	const isQueryTypeBuilder = widget?.query?.queryType === 'builder';
+
 	return (
 		<>
 			<TitleContainer isDashboardPage={isDashboardPage}>
 				<Typography>{gridTitle}</Typography>
 			</TitleContainer>
-			<ValueContainer>
+			<ValueContainer
+				showClickable={enableDrillDown && isQueryTypeBuilder}
+				onClick={(e): void => {
+					const queryName = (queryResponse?.data?.params as any)?.compositeQuery
+						?.queries[0]?.spec?.name;
+
+					if (!enableDrillDown || !queryName || !isQueryTypeBuilder) 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);
+				}}
+			>
 				<ValueGraph
 					thresholds={thresholds || []}
 					rawValue={value}
@@ -45,6 +99,13 @@ function GridValueComponent({
 					}
 				/>
 			</ValueContainer>
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				title={menuItemsConfig.header as string}
+				items={menuItemsConfig.items}
+				onClose={onClose}
+			/>
 		</>
 	);
 }

frontend/src/container/GridValueComponent/styles.ts

@@ -4,12 +4,19 @@ interface Props {
 	isDashboardPage: boolean;
 }
 
-export const ValueContainer = styled.div`
+interface ValueContainerProps {
+	showClickable?: boolean;
+}
+
+export const ValueContainer = styled.div<ValueContainerProps>`
 	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
+	user-select: none;
+	cursor: ${({ showClickable = false }): string =>
+		showClickable ? 'pointer' : 'default'};
 `;
 
 export const TitleContainer = styled.div<Props>`

frontend/src/container/GridValueComponent/types.ts

@@ -1,4 +1,8 @@
 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 = {
@@ -7,4 +11,12 @@ 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

@@ -15,6 +15,7 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -98,6 +99,8 @@ function EntityMetrics<T>({
 		],
 	);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
 			queryKey: [queryKey, payload, ENTITY_VERSION_V4, category],
@@ -105,7 +108,8 @@ function EntityMetrics<T>({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4, dynamicVariables, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),

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

@@ -1,374 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { render, screen } from '@testing-library/react';
-import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
-import { Time } from 'container/TopNav/DateTimeSelectionV2/config';
-import * as appContextHooks from 'providers/App/App';
-import { LicenseEvent } from 'types/api/licensesV3/getActive';
-
-import EntityMetrics from '../EntityMetrics';
-
-jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
-	getUPlotChartOptions: jest.fn().mockReturnValue({}),
-}));
-
-jest.mock('lib/uPlotLib/utils/getUplotChartData', () => ({
-	getUPlotChartData: jest.fn().mockReturnValue([]),
-}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="date-time-selection">Date Time</div>
-	),
-}));
-
-jest.mock('components/Uplot', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="uplot-chart">Uplot Chart</div>,
-}));
-
-jest.mock('container/InfraMonitoringK8s/commonUtils', () => ({
-	__esModule: true,
-	getMetricsTableData: jest.fn().mockReturnValue([
-		{
-			rows: [
-				{ data: { timestamp: '2024-01-15T10:00:00Z', value: '42.5' } },
-				{ data: { timestamp: '2024-01-15T10:01:00Z', value: '43.2' } },
-			],
-			columns: [
-				{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-				{ key: 'value', label: 'Value', isValueColumn: true },
-			],
-		},
-	]),
-	MetricsTable: jest
-		.fn()
-		.mockImplementation(
-			(): JSX.Element => <div data-testid="metrics-table">Metrics Table</div>,
-		),
-}));
-
-const mockUseQueries = jest.fn();
-jest.mock('react-query', () => ({
-	useQueries: (queryConfigs: any[]): any[] => mockUseQueries(queryConfigs),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: (): boolean => false,
-}));
-
-jest.mock('hooks/useDimensions', () => ({
-	useResizeObserver: (): { width: number; height: number } => ({
-		width: 800,
-		height: 600,
-	}),
-}));
-
-jest.mock('hooks/useMultiIntersectionObserver', () => ({
-	useMultiIntersectionObserver: (count: number): any => ({
-		visibilities: new Array(count).fill(true),
-		setElement: jest.fn(),
-	}),
-}));
-
-jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
-	user: {
-		role: 'admin',
-	},
-	activeLicenseV3: {
-		event_queue: {
-			created_at: '0',
-			event: LicenseEvent.NO_EVENT,
-			scheduled_at: '0',
-			status: '',
-			updated_at: '0',
-		},
-		license: {
-			license_key: 'test-license-key',
-			license_type: 'trial',
-			org_id: 'test-org-id',
-			plan_id: 'test-plan-id',
-			plan_name: 'test-plan-name',
-			plan_type: 'trial',
-			plan_version: 'test-plan-version',
-		},
-	},
-	featureFlags: [
-		{
-			name: 'DOT_METRICS_ENABLED',
-			active: false,
-		},
-	],
-} as any);
-
-const mockEntity = {
-	id: 'test-entity-1',
-	name: 'test-entity',
-	type: 'pod',
-};
-
-const mockEntityWidgetInfo = [
-	{
-		title: 'CPU Usage',
-		yAxisUnit: 'percentage',
-	},
-	{
-		title: 'Memory Usage',
-		yAxisUnit: 'bytes',
-	},
-];
-
-const mockGetEntityQueryPayload = jest.fn().mockReturnValue([
-	{
-		query: 'cpu_usage',
-		start: 1705315200,
-		end: 1705318800,
-	},
-	{
-		query: 'memory_usage',
-		start: 1705315200,
-		end: 1705318800,
-	},
-]);
-
-const mockTimeRange = {
-	startTime: 1705315200,
-	endTime: 1705318800,
-};
-
-const mockHandleTimeChange = jest.fn();
-
-const mockQueries = [
-	{
-		data: {
-			payload: {
-				data: {
-					result: [
-						{
-							table: {
-								rows: [
-									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '42.5' } },
-									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '43.2' } },
-								],
-								columns: [
-									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-									{ key: 'value', label: 'Value', isValueColumn: true },
-								],
-							},
-						},
-					],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'time_series',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-	{
-		data: {
-			payload: {
-				data: {
-					result: [
-						{
-							table: {
-								rows: [
-									{ data: { timestamp: '2024-01-15T10:00:00Z', value: '1024' } },
-									{ data: { timestamp: '2024-01-15T10:01:00Z', value: '1028' } },
-								],
-								columns: [
-									{ key: 'timestamp', label: 'Timestamp', isValueColumn: false },
-									{ key: 'value', label: 'Value', isValueColumn: true },
-								],
-							},
-						},
-					],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'table',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-];
-
-const mockLoadingQueries = [
-	{
-		data: undefined,
-		isLoading: true,
-		isError: false,
-		error: null,
-	},
-	{
-		data: undefined,
-		isLoading: true,
-		isError: false,
-		error: null,
-	},
-];
-
-const mockErrorQueries = [
-	{
-		data: undefined,
-		isLoading: false,
-		isError: true,
-		error: new Error('API Error'),
-	},
-	{
-		data: undefined,
-		isLoading: false,
-		isError: true,
-		error: new Error('Network Error'),
-	},
-];
-
-const mockEmptyQueries = [
-	{
-		data: {
-			payload: {
-				data: {
-					result: [],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'time_series',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-	{
-		data: {
-			payload: {
-				data: {
-					result: [],
-				},
-			},
-			params: {
-				compositeQuery: {
-					panelType: 'table',
-				},
-			},
-		},
-		isLoading: false,
-		isError: false,
-		error: null,
-	},
-];
-
-const renderEntityMetrics = (overrides = {}): any => {
-	const defaultProps = {
-		timeRange: mockTimeRange,
-		isModalTimeSelection: false,
-		handleTimeChange: mockHandleTimeChange,
-		selectedInterval: '5m' as Time,
-		entity: mockEntity,
-		entityWidgetInfo: mockEntityWidgetInfo,
-		getEntityQueryPayload: mockGetEntityQueryPayload,
-		queryKey: 'test-query-key',
-		category: K8sCategory.PODS,
-		...overrides,
-	};
-
-	return render(
-		<EntityMetrics
-			timeRange={defaultProps.timeRange}
-			isModalTimeSelection={defaultProps.isModalTimeSelection}
-			handleTimeChange={defaultProps.handleTimeChange}
-			selectedInterval={defaultProps.selectedInterval}
-			entity={defaultProps.entity}
-			entityWidgetInfo={defaultProps.entityWidgetInfo}
-			getEntityQueryPayload={defaultProps.getEntityQueryPayload}
-			queryKey={defaultProps.queryKey}
-			category={defaultProps.category}
-		/>,
-	);
-};
-
-describe('EntityMetrics', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseQueries.mockReturnValue(mockQueries);
-	});
-
-	it('should render metrics with data', () => {
-		renderEntityMetrics();
-		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
-		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
-		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('renders loading state when fetching metrics', () => {
-		mockUseQueries.mockReturnValue(mockLoadingQueries);
-		renderEntityMetrics();
-		expect(screen.getAllByText('CPU Usage')).toHaveLength(1);
-		expect(screen.getAllByText('Memory Usage')).toHaveLength(1);
-	});
-
-	it('renders error state when query fails', () => {
-		mockUseQueries.mockReturnValue(mockErrorQueries);
-		renderEntityMetrics();
-		expect(screen.getByText('API Error')).toBeInTheDocument();
-		expect(screen.getByText('Network Error')).toBeInTheDocument();
-	});
-
-	it('renders empty state when no metrics data', () => {
-		mockUseQueries.mockReturnValue(mockEmptyQueries);
-		renderEntityMetrics();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('calls handleTimeChange when datetime selection changes', () => {
-		renderEntityMetrics();
-		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
-	});
-
-	it('renders multiple metric widgets', () => {
-		renderEntityMetrics();
-		expect(screen.getByText('CPU Usage')).toBeInTheDocument();
-		expect(screen.getByText('Memory Usage')).toBeInTheDocument();
-	});
-
-	it('handles different panel types correctly', () => {
-		renderEntityMetrics();
-		expect(screen.getByTestId('uplot-chart')).toBeInTheDocument();
-		expect(screen.getByTestId('metrics-table')).toBeInTheDocument();
-	});
-
-	it('applies intersection observer for visibility', () => {
-		renderEntityMetrics();
-		expect(mockUseQueries).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				expect.objectContaining({
-					enabled: true,
-				}),
-			]),
-		);
-	});
-
-	it('generates correct query payloads', () => {
-		renderEntityMetrics();
-		expect(mockGetEntityQueryPayload).toHaveBeenCalledWith(
-			mockEntity,
-			mockTimeRange.startTime,
-			mockTimeRange.endTime,
-			false,
-		);
-	});
-});

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -774,6 +774,13 @@ function MultiIngestionSettings(): JSX.Element {
 						),
 						children: (
 							<div className="ingestion-key-info-container">
+								<Row>
+									<Col span={6}> ID </Col>
+									<Col span={12}>
+										<Typography.Text>{APIKey.id}</Typography.Text>
+									</Col>
+								</Row>
+
 								<Row>
 									<Col span={6}> Created on </Col>
 									<Col span={12}>

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, Wrapper } from './styles';
+import { SpinnerWrapper } from './styles';
 
 function ListViewPanel(): JSX.Element {
 	const { config } = useOptionsMenu({
@@ -42,7 +42,7 @@ function ListViewPanel(): JSX.Element {
 	}, [config]);
 
 	return (
-		<Wrapper>
+		<div className="live-logs-settings-panel">
 			<Select
 				getPopupContainer={popupContainer}
 				style={defaultSelectStyle}
@@ -68,7 +68,7 @@ function ListViewPanel(): JSX.Element {
 					<Spinner style={{ height: 'auto' }} />
 				</SpinnerWrapper>
 			)}
-		</Wrapper>
+		</div>
 	);
 }
 

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

@@ -0,0 +1,26 @@
+.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,46 +1,89 @@
-import { Col } from 'antd';
-import Spinner from 'components/Spinner';
+import './LiveLogsContainer.styles.scss';
+
+import { Button, Switch, Typography } from 'antd';
+import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { themeColors } from 'constants/theme';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import GoToTop from 'container/GoToTop';
-import FiltersInput from 'container/LiveLogs/FiltersInput';
-import LiveLogsTopNav from 'container/LiveLogsTopNav';
+import { useOptionsMenu } from 'container/OptionsMenu';
 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 { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload';
+import { Sliders } from 'lucide-react';
 import { useEventSource } from 'providers/EventSource';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-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 { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { validateQuery } from 'utils/queryValidationUtils';
 
-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<ILog[]>([]);
+	const [logs, setLogs] = useState<ILiveLogsLog[]>([]);
+	const { currentQuery, stagedQuery } = useQueryBuilder();
+	const [showLiveLogsFrequencyChart, setShowLiveLogsFrequencyChart] = useState(
+		true,
+	);
 
-	const { stagedQuery } = useQueryBuilder();
+	const listQuery = useMemo(() => {
+		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
+
+		return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
+	}, [stagedQuery]);
 
 	const queryLocationState = location.state as QueryHistoryState;
 
-	const batchedEventsRef = useRef<ILog[]>([]);
+	const batchedEventsRef = useRef<ILiveLogsLog[]>([]);
 
-	const { selectedTime: globalSelectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	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 {
 		handleStartOpenConnection,
@@ -53,7 +96,7 @@ function LiveLogsContainer(): JSX.Element {
 
 	const compositeQuery = useGetCompositeQueryParam();
 
-	const updateLogs = useCallback((newLogs: ILog[]) => {
+	const updateLogs = useCallback((newLogs: ILiveLogsLog[]) => {
 		setLogs((prevState) =>
 			[...newLogs, ...prevState].slice(0, MAX_LOGS_LIST_SIZE),
 		);
@@ -67,7 +110,7 @@ function LiveLogsContainer(): JSX.Element {
 	}, 500);
 
 	const batchLiveLog = useCallback(
-		(log: ILog): void => {
+		(log: ILiveLogsLog): void => {
 			batchedEventsRef.current.push(log);
 
 			debouncedUpdateLogs();
@@ -77,7 +120,7 @@ function LiveLogsContainer(): JSX.Element {
 
 	const handleGetLiveLogs = useCallback(
 		(event: MessageEvent<string>) => {
-			const data: ILog = JSON.parse(event.data);
+			const data: ILiveLogsLog = JSON.parse(event?.data);
 
 			batchLiveLog(data);
 		},
@@ -91,72 +134,65 @@ function LiveLogsContainer(): JSX.Element {
 	useEventSourceEvent('message', handleGetLiveLogs);
 	useEventSourceEvent('error', handleError);
 
-	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;
-		},
-		[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 });
+		(filterExpression?: string | null) => {
+			handleStartOpenConnection(filterExpression || '');
 		},
-		[globalSelectedTime, handleStartOpenConnection],
+		[handleStartOpenConnection],
 	);
 
 	const handleStartNewConnection = useCallback(
-		(query: Query) => {
+		(filterExpression?: string | null) => {
 			handleCloseConnection();
 
-			const preparedQuery = getPreparedQuery(query);
-
-			openConnection(preparedQuery);
+			openConnection(filterExpression);
 		},
-		[getPreparedQuery, handleCloseConnection, openConnection],
+		[handleCloseConnection, openConnection],
 	);
 
 	useEffect(() => {
-		if (!compositeQuery) return;
+		const currentFilterExpression =
+			currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
 
+		// Check if filterExpression has actually changed
 		if (
-			(initialLoading && !isConnectionLoading) ||
-			compositeQuery.id !== stagedQuery?.id
+			!prevFilterExpressionRef.current ||
+			prevFilterExpressionRef.current !== currentFilterExpression
 		) {
-			handleStartNewConnection(compositeQuery);
+			const validationResult = validateQuery(currentFilterExpression || '');
+
+			if (validationResult.isValid) {
+				setLogs([]);
+				batchedEventsRef.current = [];
+				handleStartNewConnection(currentFilterExpression);
+			}
+
+			prevFilterExpressionRef.current = currentFilterExpression || null;
 		}
-	}, [
-		compositeQuery,
-		initialLoading,
-		stagedQuery,
-		isConnectionLoading,
-		openConnection,
-		handleStartNewConnection,
-	]);
+	}, [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]);
 
 	useEffect((): (() => void) | undefined => {
-		if (isConnectionError && reconnectDueToError && compositeQuery) {
+		if (isConnectionError && reconnectDueToError) {
 			// Small delay to prevent immediate reconnection attempts
 			const reconnectTimer = setTimeout(() => {
-				handleStartNewConnection(compositeQuery);
+				handleStartNewConnection();
 			}, 1000);
 
 			return (): void => clearTimeout(reconnectTimer);
@@ -169,50 +205,70 @@ function LiveLogsContainer(): JSX.Element {
 		handleStartNewConnection,
 	]);
 
-	useEffect(() => {
-		const prefetchedList = queryLocationState?.listQueryPayload[0]?.list;
+	// clean up the connection when the component unmounts
+	useEffect(
+		() => (): void => {
+			handleCloseConnection();
+		},
+		[handleCloseConnection],
+	);
 
-		if (prefetchedList) {
-			const prefetchedLogs: ILog[] = prefetchedList
-				.map((item) => ({
-					...item.data,
-					timestamp: item.timestamp,
-				}))
-				.reverse();
-
-			updateLogs(prefetchedLogs);
-		}
-	}, [queryLocationState, updateLogs]);
+	const handleToggleFrequencyChart = useCallback(() => {
+		setShowLiveLogsFrequencyChart(!showLiveLogsFrequencyChart);
+	}, [showLiveLogsFrequencyChart]);
 
 	return (
-		<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 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}
 							/>
-						</Col>
-						<Col span={24}>
-							<ListViewPanel />
-						</Col>
-						<Col span={24}>
-							<LiveLogsList logs={logs} />
-						</Col>
-					</>
+						)}
+					</div>
+				</div>
+
+				{showLiveLogsFrequencyChart && (
+					<div className="live-logs-chart-container">
+						<LiveLogsListChart
+							initialData={queryLocationState?.graphQueryPayload || null}
+							className="live-logs-chart"
+							isShowingLiveLogs
+						/>
+					</div>
 				)}
-				<GoToTop />
-			</ContentWrapper>
-		</Wrapper>
+
+				<div className="live-logs-list-container">
+					<LiveLogsList
+						logs={logs}
+						isLoading={initialLoading && logs.length === 0}
+					/>
+				</div>
+			</div>
+
+			<GoToTop />
+		</div>
 	);
 }
 

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

@@ -0,0 +1,55 @@
+.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,24 +1,23 @@
+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';
@@ -26,11 +25,9 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import { LiveLogsListProps } from './types';
 
-function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
+function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
 
-	const { t } = useTranslation(['logs']);
-
 	const { isConnectionLoading } = useEventSource();
 
 	const { activeLogId } = useCopyLogLink();
@@ -43,6 +40,12 @@ function LiveLogsList({ logs }: 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,
@@ -50,8 +53,8 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 	});
 
 	const activeLogIndex = useMemo(
-		() => logs.findIndex(({ id }) => id === activeLogId),
-		[logs, activeLogId],
+		() => formattedLogs.findIndex(({ id }) => id === activeLogId),
+		[formattedLogs, activeLogId],
 	);
 
 	const selectedFields = convertKeysToColumnFields([
@@ -105,30 +108,39 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 		});
 	}, [activeLogId, activeLogIndex]);
 
-	const isLoadingList = isConnectionLoading && logs.length === 0;
+	const isLoadingList = isConnectionLoading && formattedLogs.length === 0;
 
-	if (isLoadingList) {
-		return <Spinner style={{ height: 'auto' }} tip="Fetching Logs" />;
-	}
+	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
+		[],
+	);
 
 	return (
-		<>
-			{options.format !== OptionFormatTypes.TABLE && (
-				<Heading>
-					<Typography.Text>Event</Typography.Text>
-				</Heading>
-			)}
+		<div className="live-logs-list">
+			{(formattedLogs.length === 0 || isLoading || isLoadingList) &&
+				renderLoading()}
 
-			{logs.length === 0 && <Typography>{t('fetching_log_lines')}</Typography>}
-
-			{logs.length !== 0 && (
+			{formattedLogs.length !== 0 && (
 				<InfinityWrapperStyled>
 					{options.format === OptionFormatTypes.TABLE ? (
 						<InfinityTableView
 							ref={ref}
 							isLoading={false}
 							tableViewProps={{
-								logs,
+								logs: formattedLogs,
 								fields: selectedFields,
 								linesPerRow: options.maxLines,
 								fontSize: options.fontSize,
@@ -142,8 +154,8 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 								<Virtuoso
 									ref={ref}
 									initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
-									data={logs}
-									totalCount={logs.length}
+									data={formattedLogs}
+									totalCount={formattedLogs.length}
 									itemContent={getItemContent}
 								/>
 							</OverlayScrollbar>
@@ -151,15 +163,18 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 					)}
 				</InfinityWrapperStyled>
 			)}
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onGroupByAttribute={onGroupByAttribute}
-				onClickActionItem={onAddToQuery}
-			/>
-		</>
+
+			{activeLog && (
+				<LogDetail
+					selectedTab={VIEW_TYPES.OVERVIEW}
+					log={activeLog}
+					onClose={onClearActiveLog}
+					onAddToQuery={onAddToQuery}
+					onGroupByAttribute={onGroupByAttribute}
+					onClickActionItem={onAddToQuery}
+				/>
+			)}
+		</div>
 	);
 }
 

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

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

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

@@ -9,24 +9,33 @@ 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 { stagedQuery } = useQueryBuilder();
+	const { currentQuery } = useQueryBuilder();
 	const { isConnectionOpen } = useEventSource();
 
 	const listChartQuery: Query | null = useMemo(() => {
-		if (!stagedQuery) return null;
+		if (!currentQuery) return null;
+
+		const currentFilterExpression =
+			currentQuery?.builder.queryData[0]?.filter?.expression?.trim() || '';
+
+		const validationResult = validateQuery(currentFilterExpression || '');
+
+		if (!validationResult.isValid) return null;
 
 		return {
-			...stagedQuery,
+			...currentQuery,
 			builder: {
-				...stagedQuery.builder,
-				queryData: stagedQuery.builder.queryData.map((item) => ({
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item) => ({
 					...item,
 					disabled: false,
 					aggregateOperator: LogsAggregatorOperator.COUNT,
@@ -39,7 +48,7 @@ function LiveLogsListChart({
 				})),
 			},
 		};
-	}, [stagedQuery]);
+	}, [currentQuery]);
 
 	const { data, isFetching } = useGetExplorerQueryRange(
 		listChartQuery,
@@ -62,12 +71,15 @@ function LiveLogsListChart({
 	}, [data, initialData]);
 
 	return (
-		<LogsExplorerChart
-			isLoading={initialData ? false : isFetching}
-			data={chartData}
-			isLabelEnabled={false}
-			className={className}
-		/>
+		<div className="live-logs-chart-container">
+			<LogsExplorerChart
+				isLoading={initialData ? false : isFetching}
+				data={chartData}
+				isLabelEnabled={false}
+				className={className}
+				isLogsExplorerViews={isShowingLiveLogs}
+			/>
+		</div>
 	);
 }
 

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

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

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

@@ -0,0 +1,90 @@
+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,4 +6,5 @@ export type LogsExplorerChartProps = {
 	isLogsExplorerViews?: boolean;
 	isLabelEnabled?: boolean;
 	className?: string;
+	isShowingLiveLogs?: boolean;
 };

frontend/src/container/LogsExplorerChart/index.tsx

@@ -25,6 +25,7 @@ function LogsExplorerChart({
 	isLabelEnabled = true,
 	className,
 	isLogsExplorerViews = false,
+	isShowingLiveLogs = false,
 }: LogsExplorerChartProps): JSX.Element {
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -55,6 +56,11 @@ 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);
 
@@ -75,7 +81,7 @@ function LogsExplorerChart({
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 			safeNavigate(generatedUrl);
 		},
-		[dispatch, location.pathname, safeNavigate, urlQuery],
+		[dispatch, location.pathname, safeNavigate, urlQuery, isShowingLiveLogs],
 	);
 
 	const graphData = useMemo(

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { ColumnDef, DataTable, Row } from '@signozhq/table';
 import LogDetail from 'components/LogDetail';
@@ -5,15 +6,18 @@ import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorTypeForTable } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { FontSize } from 'container/OptionsMenu/types';
+import dayjs from 'dayjs';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { isEmpty, isEqual } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useTimezone } from 'providers/Timezone';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ILog } from 'types/api/logs/log';
 
 interface ColumnViewProps {
@@ -47,6 +51,8 @@ function ColumnView({
 		onGroupByAttribute: handleGroupByAttribute,
 	} = useActiveLog();
 
+	const [showActiveLog, setShowActiveLog] = useState<boolean>(false);
+
 	const { queryData: activeLogId } = useUrlQueryData<string | null>(
 		QueryParams.activeLogId,
 		null,
@@ -60,15 +66,18 @@ function ColumnView({
 		| undefined
 	>();
 
+	const { timezone } = useTimezone();
+
 	useEffect(() => {
 		if (activeLogId) {
 			const log = logs.find(({ id }) => id === activeLogId);
 
 			if (log) {
 				handleSetActiveLog(log);
+				setShowActiveLog(true);
 			}
 		}
-	}, [activeLogId, logs, handleSetActiveLog]);
+	}, []);
 
 	const tableViewProps = {
 		logs,
@@ -82,7 +91,6 @@ function ColumnView({
 	const { dataSource, columns } = useTableView({
 		...tableViewProps,
 		onClickExpand: handleSetActiveLog,
-		onOpenLogsContext: handleClearActiveLog,
 	});
 
 	const { draggedColumns, onColumnOrderChange } = useDragColumns<
@@ -134,7 +142,7 @@ function ColumnView({
 		enableInfiniteScroll: true,
 		enableScrollRestoration: false,
 		fixedHeight: isFrequencyChartVisible ? 560 : 760,
-		enableDynamicRowHeight: false,
+		enableDynamicRowHeight: true,
 	};
 
 	const selectedColumns = useMemo(
@@ -148,8 +156,10 @@ function ColumnView({
 				// eslint-disable-next-line sonarjs/no-duplicate-string
 				size: field.key === 'state-indicator' ? 4 : 180,
 				minSize: field.key === 'state-indicator' ? 4 : 120,
-				maxSize: field.key === 'state-indicator' ? 4 : 1080,
-				pin: field.key === 'state-indicator' ? 'left' : 'none',
+				maxSize: field.key === 'state-indicator' ? 4 : Number.MAX_SAFE_INTEGER,
+				disableReorder: field.key === 'state-indicator',
+				disableDropBefore: field.key === 'state-indicator',
+				disableResizing: field.key === 'state-indicator',
 				// eslint-disable-next-line react/no-unstable-nested-components
 				cell: ({
 					row,
@@ -165,13 +175,28 @@ function ColumnView({
 						return <LogStateIndicator type={type} fontSize={fontSize} />;
 					}
 
+					const isTimestamp = field.key === 'timestamp';
+					const cellContent = getValue();
+
+					if (isTimestamp) {
+						const formattedTimestamp = dayjs(cellContent as string).tz(
+							timezone.value,
+						);
+
+						return (
+							<div className="table-cell-content">
+								{formattedTimestamp.format(DATE_TIME_FORMATS.ISO_DATETIME_MS)}
+							</div>
+						);
+					}
+
 					return (
 						<div
 							className={`table-cell-content ${
 								row.original.id === activeLog?.id ? 'active-log' : ''
 							}`}
 						>
-							{getValue()}
+							{cellContent}
 						</div>
 					);
 				},
@@ -199,9 +224,22 @@ 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 ${
@@ -223,11 +261,11 @@ function ColumnView({
 				scrollToIndexRef={scrollToIndexRef}
 			/>
 
-			{activeLog && (
+			{showActiveLog && activeLog && (
 				<LogDetail
 					selectedTab={VIEW_TYPES.OVERVIEW}
 					log={activeLog}
-					onClose={handleClearActiveLog}
+					onClose={handleLogDetailClose}
 					onAddToQuery={handleAddToQuery}
 					onClickActionItem={handleAddToQuery}
 					onGroupByAttribute={handleGroupByAttribute}

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -24,9 +24,11 @@
 						color: white !important;
 
 						.cursor-col-resize {
-							width: 2px !important;
+							width: 3px !important;
 							cursor: col-resize !important;
 							opacity: 0.5 !important;
+							background-color: var(--bg-ink-500) !important;
+							border: 1px solid var(--bg-ink-500) !important;
 
 							&:hover {
 								opacity: 1 !important;

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

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

frontend/src/container/LogsExplorerList/index.tsx

@@ -27,7 +27,7 @@ import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import NoLogs from '../NoLogs/NoLogs';
-import ColumnView from './ColumnView/ColumnView';
+import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
 import {
@@ -48,10 +48,8 @@ function LogsExplorerList({
 	isError,
 	error,
 	isFilterApplied,
-	isFrequencyChartVisible,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
-
 	const { activeLogId } = useCopyLogLink();
 
 	const {
@@ -130,6 +128,75 @@ function LogsExplorerList({
 		],
 	);
 
+	const renderContent = useMemo(() => {
+		const components = isLoading
+			? {
+					Footer,
+			  }
+			: {};
+
+		if (options.format === 'table') {
+			return (
+				<InfinityTableView
+					ref={ref}
+					isLoading={isLoading}
+					tableViewProps={{
+						logs,
+						fields: selectedFields,
+						linesPerRow: options.maxLines,
+						fontSize: options.fontSize,
+						appendTo: 'end',
+						activeLogIndex,
+					}}
+					infitiyTableProps={{ onEndReached }}
+				/>
+			);
+		}
+
+		function getMarginTop(): string {
+			switch (options.fontSize) {
+				case FontSize.SMALL:
+					return '10px';
+				case FontSize.MEDIUM:
+					return '12px';
+				case FontSize.LARGE:
+					return '15px';
+				default:
+					return '15px';
+			}
+		}
+
+		return (
+			<Card
+				style={{ width: '100%', marginTop: getMarginTop() }}
+				bodyStyle={CARD_BODY_STYLE}
+			>
+				<OverlayScrollbar isVirtuoso>
+					<Virtuoso
+						key={activeLogIndex || 'logs-virtuoso'}
+						ref={ref}
+						initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
+						data={logs}
+						endReached={onEndReached}
+						totalCount={logs.length}
+						itemContent={getItemContent}
+						components={components}
+					/>
+				</OverlayScrollbar>
+			</Card>
+		);
+	}, [
+		isLoading,
+		options.format,
+		options.maxLines,
+		options.fontSize,
+		activeLogIndex,
+		logs,
+		onEndReached,
+		getItemContent,
+		selectedFields,
+	]);
+
 	const isTraceToLogsNavigation = useMemo(() => {
 		if (!currentStagedQueryData) return false;
 		return isTraceToLogsQuery(currentStagedQueryData);
@@ -169,83 +236,6 @@ function LogsExplorerList({
 		return getEmptyLogsListConfig(handleClearFilters);
 	}, [isTraceToLogsNavigation, handleClearFilters]);
 
-	const handleLoadMore = useCallback(() => {
-		if (isLoading || isFetching) return;
-
-		onEndReached(logs.length);
-	}, [isLoading, isFetching, onEndReached, logs.length]);
-
-	const renderContent = useMemo(() => {
-		const components = isLoading
-			? {
-					Footer,
-			  }
-			: {};
-
-		if (options.format === 'table') {
-			return (
-				<ColumnView
-					logs={logs}
-					onLoadMore={handleLoadMore}
-					selectedFields={selectedFields}
-					isLoading={isLoading}
-					isFetching={isFetching}
-					options={{
-						maxLinesPerRow: options.maxLines,
-						fontSize: options.fontSize,
-					}}
-					isFrequencyChartVisible={isFrequencyChartVisible}
-				/>
-			);
-		}
-
-		function getMarginTop(): string {
-			switch (options.fontSize) {
-				case FontSize.SMALL:
-					return '10px';
-				case FontSize.MEDIUM:
-					return '12px';
-				case FontSize.LARGE:
-					return '15px';
-				default:
-					return '15px';
-			}
-		}
-
-		return (
-			<InfinityWrapperStyled data-testid="logs-list-virtuoso">
-				<Card
-					style={{ width: '100%', marginTop: getMarginTop() }}
-					bodyStyle={CARD_BODY_STYLE}
-				>
-					<OverlayScrollbar isVirtuoso>
-						<Virtuoso
-							key={activeLogIndex || 'logs-virtuoso'}
-							ref={ref}
-							initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
-							data={logs}
-							endReached={onEndReached}
-							totalCount={logs.length}
-							itemContent={getItemContent}
-							components={components}
-						/>
-					</OverlayScrollbar>
-				</Card>
-			</InfinityWrapperStyled>
-		);
-	}, [
-		isLoading,
-		activeLogIndex,
-		handleLoadMore,
-		isFetching,
-		logs,
-		onEndReached,
-		getItemContent,
-		selectedFields,
-		isFrequencyChartVisible,
-		options,
-	]);
-
 	return (
 		<div className="logs-list-view-container">
 			{(isLoading || (isFetching && logs.length === 0)) && <LogsLoading />}
@@ -274,7 +264,9 @@ function LogsExplorerList({
 
 			{!isLoading && !isError && logs.length > 0 && (
 				<>
-					{renderContent}
+					<InfinityWrapperStyled data-testid="logs-list-virtuoso">
+						{renderContent}
+					</InfinityWrapperStyled>
 
 					<LogDetail
 						selectedTab={VIEW_TYPES.OVERVIEW}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -0,0 +1,174 @@
+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,14 +1,10 @@
 /* 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';
@@ -22,20 +18,18 @@ 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';
@@ -49,7 +43,7 @@ import {
 	omit,
 	set,
 } from 'lodash-es';
-import { ArrowUp10, Minus, Sliders } from 'lucide-react';
+import LiveLogs from 'pages/LiveLogs';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import {
@@ -77,16 +71,12 @@ import {
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
-import {
-	DataSource,
-	LogsAggregatorOperator,
-	StringOperators,
-} from 'types/common/queryBuilder';
+import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
 import { v4 } from 'uuid';
 
-import QueryStatus from './QueryStatus';
+import LogsActionsContainer from './LogsActionsContainer';
 
 function LogsExplorerViewsContainer({
 	selectedView,
@@ -94,6 +84,7 @@ function LogsExplorerViewsContainer({
 	listQueryKeyRef,
 	chartQueryKeyRef,
 	setWarning,
+	showLiveLogs,
 }: {
 	selectedView: ExplorerViews;
 	setIsLoadingQueries: React.Dispatch<React.SetStateAction<boolean>>;
@@ -102,6 +93,7 @@ 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();
@@ -149,7 +141,6 @@ 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);
@@ -162,12 +153,6 @@ 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 ||
@@ -603,41 +588,6 @@ 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 ||
@@ -695,104 +645,40 @@ function LogsExplorerViewsContainer({
 	return (
 		<div className="logs-explorer-views-container">
 			<div className="logs-explorer-views-types">
-				<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>
+				{!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}
+					/>
 				)}
 
+				{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">
-					{selectedPanelType === PANEL_TYPES.LIST && (
+					{showLiveLogs && <LiveLogs />}
+
+					{selectedPanelType === PANEL_TYPES.LIST && !showLiveLogs && (
 						<LogsExplorerList
 							isLoading={isLoading}
 							isFetching={isFetching}
@@ -805,7 +691,8 @@ function LogsExplorerViewsContainer({
 							isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 						/>
 					)}
-					{selectedPanelType === PANEL_TYPES.TIME_SERIES && (
+
+					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<TimeSeriesView
 							isLoading={isLoading || isFetching}
 							data={data}
@@ -817,7 +704,7 @@ function LogsExplorerViewsContainer({
 						/>
 					)}
 
-					{selectedPanelType === PANEL_TYPES.TABLE && (
+					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<LogsExplorerTable
 							data={
 								(data?.payload?.data?.newResult?.data?.result ||

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

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

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

@@ -1,22 +1,19 @@
 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 {
@@ -109,65 +106,11 @@ 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 { customFilters } = useFilterConfig({
-	// 	signal: SignalType.METER_EXPLORER,
-	// 	config: [],
-	// });
-
+	const { isCloudUser } = useGetTenantLicense();
 	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">
@@ -178,11 +121,13 @@ 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."
 					/>
-					<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."
-					/>
+					{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."
+						/>
+					)}
 				</section>
 				<section className="total">
 					<Section

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

@@ -70,6 +70,17 @@
 				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);
+			}
 		}
 	}
 
@@ -112,6 +123,10 @@
 				.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

@@ -0,0 +1,42 @@
+.dynamic-variable-container {
+	display: grid;
+	grid-template-columns: 1fr 32px 200px;
+	gap: 32px;
+	align-items: center;
+	width: 100%;
+	margin: 24px 0;
+
+	.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 {
+		.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

@@ -0,0 +1,179 @@
+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,
+}: {
+	setDynamicVariablesSelectedValue: Dispatch<
+		SetStateAction<
+			| {
+					name: string;
+					value: string;
+			  }
+			| undefined
+		>
+	>;
+	dynamicVariablesSelectedValue:
+		| {
+				name: string;
+				value: string;
+		  }
+		| undefined;
+}): 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 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 errorMessage = (error as any)?.message;
+	return (
+		<div className="dynamic-variable-container">
+			<CustomSelect
+				placeholder="Select an Attribute"
+				options={Object.keys(filteredAttributes).map((key) => ({
+					label: key,
+					value: key,
+				}))}
+				loading={isLoading}
+				status={errorMessage ? 'error' : undefined}
+				onChange={(value): void => {
+					setSelectedAttribute(value);
+				}}
+				showSearch
+				errorMessage={errorMessage as any}
+				value={selectedAttribute || dynamicVariablesSelectedValue?.name}
+				onSearch={handleSearch}
+				onRetry={(): void => {
+					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>
+	);
+}
+
+export default DynamicVariable;

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

@@ -0,0 +1,376 @@
+/* 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,
+	};
+
+	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

@@ -100,7 +100,6 @@
 
 			.variable-type-btn-group {
 				display: flex;
-				width: 342px;
 				height: 32px;
 				flex-shrink: 0;
 				border-radius: 2px;
@@ -199,6 +198,37 @@
 			}
 		}
 
+		.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;
@@ -446,6 +476,18 @@
 				}
 			}
 
+			.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,474 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import {
-	IDashboardVariable,
-	TSortVariableValuesType,
-	VariableSortTypeArr,
-} from 'types/api/dashboard/getAll';
-
-import VariableItem from './VariableItem';
-
-// Mock modules
-jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
-	__esModule: true,
-	default: jest.fn().mockResolvedValue({
-		payload: {
-			variableValues: ['value1', 'value2', 'value3'],
-		},
-	}),
-}));
-
-jest.mock('uuid', () => ({
-	v4: jest.fn().mockReturnValue('test-uuid'),
-}));
-
-// Mock functions
-const onCancel = jest.fn();
-const onSave = jest.fn();
-const validateName = jest.fn(() => true);
-
-// Mode constant
-const VARIABLE_MODE = 'ADD';
-
-// Common text constants
-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',
-	SORT_VALUES: 'Sort Values',
-	DEFAULT_VALUE: 'Default Value',
-	ALL_VARIABLES: 'All variables',
-	DISCARD: 'Discard',
-	OPTIONS: 'Options',
-	QUERY: 'Query',
-	TEXTBOX: 'Textbox',
-	CUSTOM: 'Custom',
-};
-
-// Common test constants
-const VARIABLE_DEFAULTS = {
-	sort: VariableSortTypeArr[0] as TSortVariableValuesType,
-	multiSelect: false,
-	showALLOption: false,
-};
-
-// Common variable properties
-const TEST_VAR_NAMES = {
-	VAR1: 'variable1',
-	VAR2: 'variable2',
-	VAR3: 'variable3',
-};
-
-const TEST_VAR_IDS = {
-	VAR1: 'var1',
-	VAR2: 'var2',
-	VAR3: 'var3',
-};
-
-const TEST_VAR_DESCRIPTIONS = {
-	VAR1: 'Variable 1',
-	VAR2: 'Variable 2',
-	VAR3: 'Variable 3',
-};
-
-// Common UI elements
-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,
-	name: TEST_VAR_NAMES.VAR1,
-	description: 'Test Variable 1',
-	type: 'QUERY',
-	queryValue: 'SELECT * FROM test',
-	...VARIABLE_DEFAULTS,
-	order: 0,
-};
-
-// Helper function to render VariableItem with common props
-const renderVariableItem = (
-	variableData: IDashboardVariable = basicVariableData,
-	existingVariables: Record<string, IDashboardVariable> = {},
-	validateNameFn = validateName,
-): void => {
-	render(
-		<VariableItem
-			variableData={variableData}
-			existingVariables={existingVariables}
-			onCancel={onCancel}
-			onSave={onSave}
-			validateName={validateNameFn}
-			mode={VARIABLE_MODE}
-		/>,
-		{ wrapper } as any,
-	);
-};
-
-// Helper function to find button by text within its span
-const findButtonByText = (text: string): HTMLElement | null => {
-	const buttons = screen.getAllByRole('button');
-	return buttons.find((button) => button.textContent?.includes(text)) || null;
-};
-
-describe('VariableItem Component', () => {
-	// Test SQL query patterns
-	const SQL_PATTERN_DOT = 'SELECT * FROM test WHERE env = {{.variable2}}';
-	const SQL_PATTERN_DOLLAR = 'SELECT * FROM test WHERE env = $variable2';
-	const SQL_PATTERN_BRACKET = 'SELECT * FROM test WHERE service = [[variable3]]';
-	const SQL_PATTERN_BRACES = 'SELECT * FROM test WHERE app = {{variable1}}';
-	const SQL_PATTERN_NO_VARS = 'SELECT * FROM test WHERE env = "prod"';
-	const SQL_PATTERN_DOT_VAR1 =
-		'SELECT * FROM test WHERE service = {{.variable1}}';
-
-	// Error message text constant
-	const CIRCULAR_DEPENDENCY_ERROR = /Cannot save: Circular dependency detected/;
-
-	// Test functions and utilities
-	const createVariable = (
-		id: string,
-		name: string,
-		description: string,
-		queryValue: string,
-		order: number,
-	): IDashboardVariable => ({
-		id,
-		name,
-		description,
-		type: 'QUERY',
-		queryValue,
-		...VARIABLE_DEFAULTS,
-		order,
-	});
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	test('renders without crashing', () => {
-		renderVariableItem();
-
-		expect(screen.getByText(TEXT.ALL_VARIABLES)).toBeInTheDocument();
-		expect(screen.getByText('Name')).toBeInTheDocument();
-		expect(screen.getByText('Description')).toBeInTheDocument();
-		expect(screen.getByText('Variable Type')).toBeInTheDocument();
-	});
-
-	describe('Variable Name Validation', () => {
-		test('shows error when variable name already exists', () => {
-			// Set validateName to return false (name exists)
-			const mockValidateName = jest.fn().mockReturnValue(false);
-
-			renderVariableItem({ ...basicVariableData, name: '' }, {}, mockValidateName);
-
-			// Enter a name that already exists
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: 'existingVariable' } });
-
-			// Error message should be displayed
-			expect(screen.getByText(TEXT.VARIABLE_EXISTS)).toBeInTheDocument();
-
-			// We won't check for button disabled state as it might be inconsistent in tests
-		});
-
-		test('allows save when current variable name is used', () => {
-			// Mock validate to return false for all other names but true for own name
-			const mockValidateName = jest
-				.fn()
-				.mockImplementation((name) => name === TEST_VAR_NAMES.VAR1);
-
-			renderVariableItem(basicVariableData, {}, mockValidateName);
-
-			// Enter the current variable name
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			fireEvent.change(nameInput, { target: { value: TEST_VAR_NAMES.VAR1 } });
-
-			// Error should not be visible
-			expect(screen.queryByText(TEXT.VARIABLE_EXISTS)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('Variable Type Switching', () => {
-		test('switches to CUSTOM variable type correctly', () => {
-			renderVariableItem();
-
-			// Find the Query button
-			const queryButton = findButtonByText(TEXT.QUERY);
-			expect(queryButton).toBeInTheDocument();
-			expect(queryButton).toHaveClass('selected');
-
-			// Find and click Custom button
-			const customButton = findButtonByText(TEXT.CUSTOM);
-			expect(customButton).toBeInTheDocument();
-
-			if (customButton) {
-				fireEvent.click(customButton);
-			}
-
-			// Custom button should now be selected
-			expect(customButton).toHaveClass('selected');
-			expect(queryButton).not.toHaveClass('selected');
-
-			// Custom options input should appear
-			expect(screen.getByText(TEXT.OPTIONS)).toBeInTheDocument();
-		});
-
-		test('switches to TEXTBOX variable type correctly', () => {
-			renderVariableItem();
-
-			// Find and click Textbox button
-			const textboxButton = findButtonByText(TEXT.TEXTBOX);
-			expect(textboxButton).toBeInTheDocument();
-
-			if (textboxButton) {
-				fireEvent.click(textboxButton);
-			}
-
-			// Textbox button should now be selected
-			expect(textboxButton).toHaveClass('selected');
-
-			// Default Value input should appear
-			expect(screen.getByText(TEXT.DEFAULT_VALUE)).toBeInTheDocument();
-			expect(
-				screen.getByPlaceholderText('Enter a default value (if any)...'),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('MultiSelect and ALL Option', () => {
-		test('enables ALL option only when multiSelect is enabled', async () => {
-			renderVariableItem();
-
-			// Initially, ALL option should not be visible
-			expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-
-			// Enable multiple values
-			const multipleValuesSwitch = screen
-				.getByText(TEXT.ENABLE_MULTI_VALUES)
-				.closest('.multiple-values-section')
-				?.querySelector('button');
-
-			expect(multipleValuesSwitch).toBeInTheDocument();
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// Now ALL option should be visible
-			await waitFor(() => {
-				expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
-			});
-
-			// Disable multiple values
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// ALL option should be hidden again
-			await waitFor(() => {
-				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-			});
-		});
-
-		test('disables ALL option when multiSelect is disabled', async () => {
-			// Create variable with multiSelect and showALLOption both enabled
-			const variable: IDashboardVariable = {
-				...basicVariableData,
-				multiSelect: true,
-				showALLOption: true,
-			};
-
-			renderVariableItem(variable);
-
-			// ALL option should be visible initially
-			expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
-
-			// Disable multiple values
-			const multipleValuesSwitch = screen
-				.getByText(TEXT.ENABLE_MULTI_VALUES)
-				.closest('.multiple-values-section')
-				?.querySelector('button');
-
-			if (multipleValuesSwitch) {
-				fireEvent.click(multipleValuesSwitch);
-			}
-
-			// ALL option should be hidden
-			await waitFor(() => {
-				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
-			});
-
-			// Check that when saving, showALLOption is set to false
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			fireEvent.click(saveButton);
-
-			expect(onSave).toHaveBeenCalledWith(
-				expect.anything(),
-				expect.objectContaining({
-					multiSelect: false,
-					showALLOption: false,
-				}),
-			);
-		});
-	});
-
-	describe('Cancel and Navigation', () => {
-		test('calls onCancel when clicking All Variables button', () => {
-			renderVariableItem();
-
-			// Click All variables button
-			const allVariablesButton = screen.getByText(TEXT.ALL_VARIABLES);
-			fireEvent.click(allVariablesButton);
-
-			expect(onCancel).toHaveBeenCalledTimes(1);
-		});
-
-		test('calls onCancel when clicking Discard button', () => {
-			renderVariableItem();
-
-			// Click Discard button
-			const discardButton = screen.getByText(TEXT.DISCARD);
-			fireEvent.click(discardButton);
-
-			expect(onCancel).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('Cyclic Dependency Detection', () => {
-		// Common function to render the component with variables and click save
-		const renderAndSave = async (
-			variableData: IDashboardVariable,
-			existingVariables: Record<string, IDashboardVariable>,
-		): Promise<void> => {
-			renderVariableItem(variableData, existingVariables);
-
-			// Fill in the variable name if it's not already populated
-			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
-			if (nameInput.getAttribute('value') === '') {
-				fireEvent.change(nameInput, { target: { value: variableData.name || '' } });
-			}
-
-			// Click save button to trigger the dependency check
-			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
-			fireEvent.click(saveButton);
-		};
-
-		// Common expectations for finding circular dependency error
-		const expectCircularDependencyError = async (): Promise<void> => {
-			await waitFor(() => {
-				expect(screen.getByText(CIRCULAR_DEPENDENCY_ERROR)).toBeInTheDocument();
-				expect(onSave).not.toHaveBeenCalled();
-			});
-		};
-
-		// Test for cyclic dependency detection
-		test('detects circular dependency and shows error message', async () => {
-			// Create variables with circular dependency
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_DOT,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_DOT_VAR1,
-				1,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-			await expectCircularDependencyError();
-		});
-
-		// Test for saving with no circular dependency
-		test('allows saving when no circular dependency exists', async () => {
-			// Create variables without circular dependency
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_NO_VARS,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_DOT_VAR1,
-				1,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-
-			// Verify the onSave function was called
-			await waitFor(() => {
-				expect(onSave).toHaveBeenCalled();
-			});
-		});
-
-		// Test with multiple variable formats in query
-		test('detects circular dependency with different variable formats', async () => {
-			// Create variables with circular dependency using different formats
-			const variable1 = createVariable(
-				TEST_VAR_IDS.VAR1,
-				TEST_VAR_NAMES.VAR1,
-				TEST_VAR_DESCRIPTIONS.VAR1,
-				SQL_PATTERN_DOLLAR,
-				0,
-			);
-
-			const variable2 = createVariable(
-				TEST_VAR_IDS.VAR2,
-				TEST_VAR_NAMES.VAR2,
-				TEST_VAR_DESCRIPTIONS.VAR2,
-				SQL_PATTERN_BRACKET,
-				1,
-			);
-
-			const variable3 = createVariable(
-				TEST_VAR_IDS.VAR3,
-				TEST_VAR_NAMES.VAR3,
-				TEST_VAR_DESCRIPTIONS.VAR3,
-				SQL_PATTERN_BRACES,
-				2,
-			);
-
-			const existingVariables = {
-				[TEST_VAR_IDS.VAR2]: variable2,
-				[TEST_VAR_IDS.VAR3]: variable3,
-			};
-
-			await renderAndSave(variable1, existingVariables);
-			await expectCircularDependencyError();
-		});
-	});
-});

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

@@ -6,7 +6,9 @@ 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 { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { map } from 'lodash-es';
@@ -16,16 +18,20 @@ import {
 	ClipboardType,
 	DatabaseZap,
 	LayoutList,
+	Pyramid,
 	X,
 } from 'lucide-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,
 } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
 import {
@@ -34,7 +40,9 @@ 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;
 
@@ -61,7 +69,7 @@ function VariableItem({
 		variableData.description || '',
 	);
 	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'QUERY',
+		variableData.type || 'DYNAMIC',
 	);
 	const [variableQueryValue, setVariableQueryValue] = useState<string>(
 		variableData.queryValue || '',
@@ -85,11 +93,61 @@ 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 }>();
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesAttribute &&
+			variableData.dynamicVariablesSource
+		) {
+			setDynamicVariablesSelectedValue({
+				name: variableData.dynamicVariablesAttribute,
+				value: variableData.dynamicVariablesSource,
+			});
+		}
+	}, [
+		variableData.dynamicVariablesAttribute,
+		variableData.dynamicVariablesSource,
+	]);
 	// Error messages
 	const [errorName, setErrorName] = useState<boolean>(false);
 	const [errorPreview, setErrorPreview] = useState<string | null>(null);
 
+	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[]>([]);
+
+	useEffect(() => {
+		if (queryType === 'DYNAMIC') {
+			setSelectedWidgets(variableData?.dynamicVariablesWidgetIds || []);
+		}
+	}, [queryType, variableData?.dynamicVariablesWidgetIds]);
+
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -110,6 +168,29 @@ 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,
+		dynamicVariablesSelectedValue,
+	]);
+
 	const handleSave = (): void => {
 		// Check for cyclic dependencies
 		const newVariable = {
@@ -126,9 +207,20 @@ function VariableItem({
 				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,
+			}),
+			...(queryType === 'DYNAMIC' && {
+				dynamicVariablesWidgetIds:
+					selectedWidgets?.length > 0 ? selectedWidgets : [],
+			}),
 		};
 
 		const allVariables = [...Object.values(existingVariables), newVariable];
@@ -258,18 +350,18 @@ function VariableItem({
 						<div className="variable-type-btn-group">
 							<Button
 								type="text"
-								icon={<DatabaseZap size={14} />}
+								icon={<Pyramid size={14} />}
 								className={cx(
 									// eslint-disable-next-line sonarjs/no-duplicate-string
 									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
+									queryType === 'DYNAMIC' ? 'selected' : '',
 								)}
 								onClick={(): void => {
-									setQueryType('QUERY');
+									setQueryType('DYNAMIC');
 									setPreviewValues([]);
 								}}
 							>
-								Query
+								Dynamic
 							</Button>
 							<Button
 								type="text"
@@ -299,8 +391,31 @@ function VariableItem({
 							>
 								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([]);
+								}}
+							>
+								Query
+							</Button>
 						</div>
 					</VariableItemRow>
+					{queryType === 'DYNAMIC' && (
+						<div className="variable-dynamic-section">
+							<DynamicVariable
+								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
+								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
+							/>
+						</div>
+					)}
 					{queryType === 'QUERY' && (
 						<div className="query-container">
 							<LabelContainer>
@@ -388,7 +503,9 @@ function VariableItem({
 							/>
 						</VariableItemRow>
 					)}
-					{(queryType === 'QUERY' || queryType === 'CUSTOM') && (
+					{(queryType === 'QUERY' ||
+						queryType === 'CUSTOM' ||
+						queryType === 'DYNAMIC') && (
 						<>
 							<VariableItemRow className="variables-preview-section">
 								<LabelContainer style={{ width: '100%' }}>
@@ -457,8 +574,40 @@ 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">

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

@@ -0,0 +1,50 @@
+import { CustomMultiSelect } from 'components/NewSelect';
+import { PANEL_GROUP_TYPES } from 'constants/queryBuilder';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+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) => {
+				if (
+					widget.id &&
+					layoutIds.has(widget.id) &&
+					widget.panelTypes !== PANEL_GROUP_TYPES.ROW
+				) {
+					acc[widget.id] = widget;
+				}
+				return acc;
+			},
+			{},
+		),
+	);
+
+	return (
+		<CustomMultiSelect
+			placeholder="Select Panels"
+			options={widgets.map((widget) => ({
+				label: generateGridTitle(widget.title),
+				value: widget.id,
+			}))}
+			value={selectedWidgets}
+			onChange={(value): void => setSelectedWidgets(value as string[])}
+			showLabels
+		/>
+	);
+}

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

@@ -0,0 +1,199 @@
+/* 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), // todo - Sagar: check for multiple query or not
+				),
+			},
+		},
+	};
+};
+
+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] : [],
+			),
+		},
+	};
+};
+
+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), // todo - Sagar: check for multiple query or not
+				),
+			},
+		},
+	};
+};
+
+/**
+ * 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,13 +15,20 @@ 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 { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	Dashboard,
+	IDashboardVariable,
+	Widgets,
+} from 'types/api/dashboard/getAll';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -88,7 +95,7 @@ function VariablesSetting({
 
 	const { notifications } = useNotifications();
 
-	const { variables = {} } = selectedDashboard?.data || {};
+	const { variables = {}, widgets = [] } = selectedDashboard?.data || {};
 
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
@@ -162,19 +169,61 @@ function VariablesSetting({
 		setExistingVariableNamesMap(variableNamesMap);
 	}, [variables]);
 
+	const addDynamicVariableToPanels = useAddDynamicVariableToPanels();
+
+	const { dynamicVariables } = useGetDynamicVariables();
+
+	const dynamicVariableToWidgetsMap = useMemo(
+		() =>
+			createDynamicVariableToWidgetsMap(
+				dynamicVariables,
+				(widgets as Widgets[]) || [],
+			),
+		[dynamicVariables, widgets],
+	);
+
+	// initialize and adjust dynamicVariablesWidgetIds values for all variables
+	useEffect(() => {
+		const newVariablesArr = Object.values(variables).map(
+			(variable: IDashboardVariable) => {
+				if (variable.type === 'DYNAMIC') {
+					return {
+						...variable,
+						dynamicVariablesWidgetIds: dynamicVariableToWidgetsMap[variable.id] || [],
+					};
+				}
+
+				return variable;
+			},
+		);
+
+		setVariablesTableData(newVariablesArr);
+	}, [variables, dynamicVariableToWidgetsMap]);
+
 	const updateVariables = (
 		updatedVariablesData: Dashboard['data']['variables'],
+		currentRequestedId?: string,
+		applyToAll?: boolean,
 	): void => {
 		if (!selectedDashboard) {
 			return;
 		}
 
+		const newDashboard =
+			(currentRequestedId &&
+				addDynamicVariableToPanels(
+					selectedDashboard,
+					updatedVariablesData[currentRequestedId || ''],
+					applyToAll,
+				)) ||
+			selectedDashboard;
+
 		updateMutation.mutateAsync(
 			{
 				id: selectedDashboard.id,
 
 				data: {
-					...selectedDashboard.data,
+					...newDashboard.data,
 					variables: updatedVariablesData,
 				},
 			},
@@ -202,6 +251,7 @@ function VariablesSetting({
 	const onVariableSaveHandler = (
 		mode: TVariableMode,
 		variableData: IDashboardVariable,
+		applyToAll?: boolean,
 	): void => {
 		const updatedVariableData = {
 			...variableData,
@@ -225,7 +275,7 @@ function VariablesSetting({
 		const variables = convertVariablesToDbFormat(newVariablesArr);
 
 		setVariablesTableData(newVariablesArr);
-		updateVariables(variables);
+		updateVariables(variables, variableData?.id, applyToAll);
 		onDoneVariableViewMode();
 	};
 
@@ -271,6 +321,18 @@ function VariablesSetting({
 						{variable.description}
 					</Typography.Text>
 					<Space className="actions-btns">
+						{variable.type === 'DYNAMIC' && (
+							<Button
+								type="text"
+								onClick={(): void =>
+									onVariableSaveHandler(variableViewMode || 'EDIT', variable, true)
+								}
+								className="apply-to-all-button"
+								loading={updateMutation.isLoading}
+							>
+								<Typography.Text>Apply to all</Typography.Text>
+							</Button>
+						)}
 						<Button
 							type="text"
 							onClick={(): void => onVariableViewModeEnter('EDIT', variable)}

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

@@ -1,6 +1,6 @@
 import './DashboardVariableSelection.styles.scss';
 
-import { Alert, Row } from 'antd';
+import { Row } from 'antd';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
@@ -9,6 +9,7 @@ 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,
@@ -104,7 +105,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		// isMountedCall?: boolean,
+		haveCustomValuesSelected?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
@@ -121,6 +122,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[id],
 								selectedValue: value,
 								allSelected,
+								haveCustomValuesSelected,
 							};
 						}
 						if (oldVariables?.[name]) {
@@ -128,6 +130,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[name],
 								selectedValue: value,
 								allSelected,
+								haveCustomValuesSelected,
 							};
 						}
 						return {
@@ -170,22 +173,22 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	return (
-		<>
-			{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) => (
+		<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}
+						/>
+					) : (
 						<VariableItem
 							key={`${variable.name}${variable.id}}${variable.order}`}
 							existingVariables={variables}
@@ -198,9 +201,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 							setVariablesToGetUpdated={setVariablesToGetUpdated}
 							dependencyData={dependencyData}
 						/>
-					))}
-			</Row>
-		</>
+					),
+				)}
+		</Row>
 	);
 }
 

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

@@ -0,0 +1,391 @@
+/* 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 } 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 [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// 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,
+	);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+		],
+		{
+			enabled: variableData.type === 'DYNAMIC',
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all sources'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+				),
+			onSuccess: (data) => {
+				setOptionsData(data.payload?.normalizedValues || []);
+				setIsComplete(data.payload?.complete || false);
+				setFilteredOptionsData(data.payload?.normalizedValues || []);
+			},
+			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))
+				) {
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(
+						variableData.name,
+						variableData.id,
+						value,
+						optionsData.every((v) => value.includes(v.toString())),
+						Array.isArray(value) &&
+							!value.every((v) => optionsData.includes(v.toString())),
+					);
+				}
+			}
+		},
+		[variableData, onValueUpdate, optionsData],
+	);
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesSource &&
+			variableData.dynamicVariablesAttribute
+		) {
+			refetch();
+		}
+	}, [
+		refetch,
+		variableData.dynamicVariablesSource,
+		variableData.dynamicVariablesAttribute,
+		debouncedApiSearchText,
+	]);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					return;
+				}
+
+				const localFilteredOptionsData: (string | number | boolean)[] = [];
+				optionsData.forEach((option) => {
+					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
+						localFilteredOptionsData.push(option);
+					}
+				});
+				setFilteredOptionsData(localFilteredOptionsData);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData],
+	);
+
+	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 = (inputValue: string | string[]): void => {
+		// Store the selection in temporary state while dropdown is open
+		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) {
+			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
+				// set all options from the optionsData and the selectedValue, make sure to remove duplicates
+				const allOptions = [
+					...new Set([
+						...optionsData.map((option) => option.toString()),
+						...(variableData.selectedValue
+							? Array.isArray(variableData.selectedValue)
+								? variableData.selectedValue.map((v) => v.toString())
+								: [variableData.selectedValue.toString()]
+							: []),
+					]),
+				];
+				setTempSelection(allOptions);
+			} else {
+				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+			}
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
+		}
+	};
+
+	// 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,
+	]);
+
+	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={
+							selectValue && Array.isArray(selectValue)
+								? selectValue.join(' ')
+								: selectValue || variableData.id
+						}
+						options={filteredOptionsData.map((option) => ({
+							label: option.toString(),
+							value: option.toString(),
+						}))}
+						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 => (
+							<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
+								<span>+ {omittedValues.length} </span>
+							</Tooltip>
+						)}
+						onClear={(): void => {
+							handleChange([]);
+						}}
+						enableAllSelection={enableSelectAll}
+						maxTagTextLength={30}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+					/>
+				) : (
+					<CustomSelect
+						key={
+							selectValue && Array.isArray(selectValue)
+								? selectValue.join(' ')
+								: selectValue || 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={filteredOptionsData.map((option) => ({
+							label: option.toString(),
+							value: option.toString(),
+						}))}
+						value={selectValue}
+						defaultValue={variableData.defaultValue}
+						errorMessage={errorMessage}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DynamicVariableSelection;

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

@@ -1,194 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import React, { useEffect } from 'react';
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import VariableItem from './VariableItem';
-
-const mockVariableData: IDashboardVariable = {
-	id: 'test_variable',
-	description: 'Test Variable',
-	type: 'TEXTBOX',
-	textboxValue: 'defaultValue',
-	sort: 'DISABLED',
-	multiSelect: false,
-	showALLOption: false,
-	name: 'testVariable',
-};
-
-// New mock data for a custom variable
-const mockCustomVariableData: IDashboardVariable = {
-	...mockVariableData,
-	name: 'customVariable',
-	type: 'CUSTOM',
-	customValue: 'option1,option2,option3',
-};
-
-const mockOnValueUpdate = jest.fn();
-
-describe('VariableItem', () => {
-	let useEffectSpy: jest.SpyInstance;
-
-	beforeEach(() => {
-		useEffectSpy = jest.spyOn(React, 'useEffect');
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-		useEffectSpy.mockRestore();
-	});
-
-	test('renders component with default props', () => {
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={mockVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-
-		expect(screen.getByText('$testVariable')).toBeInTheDocument();
-	});
-
-	test('renders Input when the variable type is TEXTBOX', () => {
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={mockVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-		expect(screen.getByPlaceholderText('Enter value')).toBeInTheDocument();
-	});
-
-	test('calls onChange event handler when Input value changes', async () => {
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={mockVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-
-		act(() => {
-			const inputElement = screen.getByPlaceholderText('Enter value');
-			fireEvent.change(inputElement, { target: { value: 'newValue' } });
-		});
-
-		await waitFor(() => {
-			// expect(mockOnValueUpdate).toHaveBeenCalledTimes(1);
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				'testVariable',
-				'test_variable',
-				'newValue',
-				false,
-			);
-		});
-	});
-
-	test('renders a Select element when variable type is CUSTOM', () => {
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={mockCustomVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-
-		expect(screen.getByText('$customVariable')).toBeInTheDocument();
-		expect(screen.getByTestId('variable-select')).toBeInTheDocument();
-	});
-
-	test('renders a Select element with all selected', async () => {
-		const customVariableData = {
-			...mockCustomVariableData,
-			allSelected: true,
-			showALLOption: true,
-			multiSelect: true,
-		};
-
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={customVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-
-		expect(screen.getByTitle('ALL')).toBeInTheDocument();
-	});
-
-	test('calls useEffect when the component mounts', () => {
-		render(
-			<MockQueryClientProvider>
-				<VariableItem
-					variableData={mockCustomVariableData}
-					existingVariables={{}}
-					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
-				/>
-			</MockQueryClientProvider>,
-		);
-
-		expect(useEffect).toHaveBeenCalled();
-	});
-});

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

@@ -8,23 +8,14 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import {
-	Checkbox,
-	Input,
-	Popover,
-	Select,
-	Tag,
-	Tooltip,
-	Typography,
-} from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Input, Popover, Tooltip, Typography } from 'antd';
 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, isString } from 'lodash-es';
-import map from 'lodash-es/map';
-import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isEmpty, isString } from 'lodash-es';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -33,17 +24,10 @@ import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { variablePropsToPayloadVariables } from '../utils';
+import { ALL_SELECT_VALUE, 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>;
@@ -58,7 +42,7 @@ interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
-const getSelectValue = (
+export const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
 ): string | string[] | undefined => {
@@ -83,6 +67,9 @@ 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,
@@ -146,18 +133,21 @@ function VariableItem({
 							variableData.name &&
 							(validVariableUpdate() || valueNotInList || variableData.allSelected)
 						) {
-							let value = variableData.selectedValue;
+							const 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) {
-									value = newOptionsData;
-									allSelected = true;
-								} else {
-									[value] = newOptionsData;
-								}
-							} else if (variableData.multiSelect) {
+							// console.log(valueNotInList);
+							// if (valueNotInList) {
+							// 	if (variableData.multiSelect) {
+							// 		value = newOptionsData;
+							// 		allSelected = true;
+							// 	} else {
+							// 		[value] = newOptionsData;
+							// 	}
+							// } else
+
+							if (variableData.multiSelect) {
 								const { selectedValue } = variableData;
 								allSelected =
 									newOptionsData.length > 0 &&
@@ -242,26 +232,57 @@ function VariableItem({
 		},
 	);
 
-	const handleChange = (inputValue: string | string[]): void => {
-		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+	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))
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
 			) {
-				onValueUpdate(variableData.name, variableData.id, optionsData, true);
-			} else {
-				onValueUpdate(variableData.name, variableData.id, value, false);
+				return;
 			}
+			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);
+				}
+			}
+		},
+		[
+			variableData.multiSelect,
+			variableData.selectedValue,
+			variableData.name,
+			variableData.id,
+			onValueUpdate,
+			optionsData,
+		],
+	);
+
+	// 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 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));
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
 		}
 	};
 
@@ -281,10 +302,58 @@ function VariableItem({
 			? 'ALL'
 			: selectedValueStringified;
 
-	const mode: 'multiple' | undefined =
-		variableData.multiSelect && !variableData.allSelected
-			? 'multiple'
-			: undefined;
+	// 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,
+	]);
 
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
@@ -294,113 +363,6 @@ 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>
@@ -428,105 +390,73 @@ function VariableItem({
 						}}
 					/>
 				) : (
-					!errorMessage &&
-					optionsData && (
-						<Select
+					optionsData &&
+					(variableData.multiSelect ? (
+						<CustomMultiSelect
 							key={
 								selectValue && Array.isArray(selectValue)
 									? selectValue.join(' ')
 									: selectValue || variableData.id
 							}
-							defaultValue={selectValue}
-							onChange={handleChange}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleTempChange}
 							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}
+							maxTagCount={2}
 							getPopupContainer={popupContainer}
-							// eslint-disable-next-line react/no-unstable-nested-components
-							tagRender={(props): JSX.Element => (
-								<Tag closable onClose={props.onClose}>
-									{props.value}
-								</Tag>
-							)}
+							value={tempSelection || selectValue}
+							onDropdownVisibleChange={handleDropdownVisibleChange}
+							errorMessage={errorMessage}
 							// 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>
 							)}
+							onClear={(): void => {
+								handleChange([]);
+							}}
+							enableAllSelection={enableSelectAll}
+							maxTagTextLength={30}
 							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>
-					)
+						/>
+					) : (
+						<CustomSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							defaultValue={variableData.defaultValue || selectValue}
+							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={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							value={selectValue}
+							errorMessage={errorMessage}
+						/>
+					))
 				)}
 				{variableData.type !== 'TEXTBOX' && errorMessage && (
 					<span style={{ margin: '0 0.5rem' }}>