refactor: cloudfront integration service

.github/CODEOWNERS

@@ -169,22 +169,3 @@ go.mod @therealpandey
 ## Dashboard V2
 /frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
 /frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
-
-## Infrastructure Monitoring
-/frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
-/frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
-
-## Alerts
-/frontend/src/pages/AlertList/ @SigNoz/pulse-frontend
-/frontend/src/pages/AlertDetails/ @SigNoz/pulse-frontend
-/frontend/src/pages/CreateAlert/ @SigNoz/pulse-frontend
-/frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
-/frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
-/frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
-/frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
-/frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend

.github/workflows/integrationci.yaml

@@ -52,7 +52,6 @@ jobs:
           - rootuser
           - serviceaccount
           - querier_json_body
-          - querier_skip_resource_fingerprint
           - ttl
         sqlstore-provider:
           - postgres

conf/example.yaml

@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-traces:
+tracedetail:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.0
+    image: signoz/signoz:v0.126.1
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.5
+    image: signoz/signoz-otel-collector:v0.144.4
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.0}
+    image: signoz/signoz:${VERSION:-v0.126.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

docs/api/openapi.yml

@@ -8029,6 +8029,80 @@ paths:
       tags:
       - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    get:
+      deprecated: false
+      description: This endpoint gets a service and its configuration for the specified
+        cloud integration account
+      operationId: GetAccountService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesService'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get service for account
+      tags:
+      - cloudintegration
     put:
       deprecated: false
       description: This endpoint updates a service for the specified cloud provider

frontend/__mocks__/useSafeNavigate.ts

@@ -0,0 +1,28 @@
+// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+interface UseSafeNavigateReturn {
+	safeNavigate: jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>;
+}
+
+export const useSafeNavigate = (): UseSafeNavigateReturn => ({
+	safeNavigate: jest.fn(
+		(_to: SafeNavigateToType, _options?: SafeNavigateOptions) => {},
+	) as jest.MockedFunction<
+		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+	>,
+});

frontend/jest.config.ts

@@ -1,8 +1,6 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH =
-	'<rootDir>/src/__tests__/safeNavigateMock.ts';
-const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -24,8 +22,6 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
-		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

frontend/src/__tests__/logEventMock.ts

@@ -1,11 +0,0 @@
-// Shared mock for `api/common/logEvent`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `api/common/logEvent` in test code resolves to this file.
-// Tests can import `logEventMock` to assert analytics calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-export const logEventMock: jest.MockedFunction<
-	(eventName: string, attributes?: Record<string, unknown>) => void
-> = jest.fn();
-
-export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -1,29 +0,0 @@
-// Shared mock for `hooks/useSafeNavigate`.
-// Wired into jest.config.ts moduleNameMapper, so any import of
-// `hooks/useSafeNavigate` in test code resolves to this file.
-// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
-// `clearMocks: true` resets call history between tests.
-
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-	newTab?: boolean;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-export const safeNavigateMock: jest.MockedFunction<
-	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-> = jest.fn();
-
-export const useSafeNavigate = (): {
-	safeNavigate: typeof safeNavigateMock;
-} => ({
-	safeNavigate: safeNavigateMock,
-});

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -31,6 +31,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetAccountService200,
+	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
@@ -631,6 +633,117 @@ export const useUpdateAccount = <
 > => {
 	return useMutation(getUpdateAccountMutationOptions(options));
 };
+/**
+ * This endpoint gets a service and its configuration for the specified cloud integration account
+ * @summary Get service for account
+ */
+export const getAccountService = (
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAccountService200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAccountServiceQueryKey = ({
+	cloudProvider,
+	id,
+	serviceId,
+}: GetAccountServicePathParameters) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+	] as const;
+};
+
+export const getGetAccountServiceQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetAccountServiceQueryKey({ cloudProvider, id, serviceId });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAccountService>>
+	> = ({ signal }) =>
+		getAccountService({ cloudProvider, id, serviceId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(cloudProvider && id && serviceId),
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAccountService>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAccountServiceQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAccountService>>
+>;
+export type GetAccountServiceQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get service for account
+ */
+
+export function useGetAccountService<
+	TData = Awaited<ReturnType<typeof getAccountService>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAccountService>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAccountServiceQueryOptions(
+		{ cloudProvider, id, serviceId },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get service for account
+ */
+export const invalidateGetAccountService = async (
+	queryClient: QueryClient,
+	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAccountServiceQueryKey({ cloudProvider, id, serviceId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates a service for the specified cloud provider
  * @summary Update service

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

@@ -8623,6 +8623,19 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type GetAccountServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
+export type GetAccountService200 = {
+	data: CloudintegrationtypesServiceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;

frontend/src/api/index.ts

@@ -120,8 +120,7 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check' &&
-				response.config.url !== '/api/v2/reset_password_tokens/verify'
+				response.config.url !== '/authz/check'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

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

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/assets/Icons/solid-x-circle.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,7 +359,8 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							size={14}
+							height={12}
+							width={12}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -27,15 +27,13 @@ function SortableField({
 	field,
 	onRemove,
 	allowDrag,
-	isRequired,
 }: {
 	field: TelemetryFieldKey;
 	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
-	isRequired: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.key as string });
+		useSortable({ id: field.name });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -55,17 +53,15 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			{!isRequired && (
-				<Button
-					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="outlined"
-					color="destructive"
-					size="sm"
-					onClick={(): void => onRemove(field)}
-				>
-					Remove
-				</Button>
-			)}
+			<Button
+				className={cx(styles.removeBtn, 'periscope-btn')}
+				variant="outlined"
+				color="destructive"
+				size="sm"
+				onClick={(): void => onRemove(field)}
+			>
+				Remove
+			</Button>
 		</div>
 	);
 }
@@ -75,7 +71,6 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
-	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -83,18 +78,14 @@ function AddedFields({
 	fields,
 	onFieldsChange,
 	maxFields,
-	requiredFields = [],
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
-	// Contract: caller (FieldsSelector) normalizes `fields` so every entry has
-	// `.key` populated. AddedFields reads it directly.
-
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.key === active.id);
-			const newIndex = fields.findIndex((f) => f.key === over.id);
+			const oldIndex = fields.findIndex((f) => f.name === active.id);
+			const newIndex = fields.findIndex((f) => f.name === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -108,7 +99,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.key !== field.key));
+		onFieldsChange(fields.filter((f) => f.name !== field.name));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -134,17 +125,16 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.key as string)}
+								items={fields.map((f) => f.name)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.key}
+										key={field.name}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
-										isRequired={requiredFields.includes(field.key as string)}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -76,8 +76,11 @@
 	min-height: 0;
 	overflow: hidden;
 
+	// Ant Skeleton.Input rendered inside the loading state — override its
+	// hard-coded width.
 	:global(.ant-skeleton-input) {
-		width: 50% !important;
+		width: 300px;
+		margin: 8px 12px;
 	}
 }
 
@@ -92,8 +95,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: 36px;
-	padding: 0 12px;
+	padding: 6px 12px;
 	border-radius: 4px;
 	user-select: none;
 	font-size: 13px;
@@ -130,7 +132,7 @@
 }
 
 .isDragDisabled {
-	cursor: default;
+	padding: 6px 12px;
 }
 
 .otherFieldItem {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,7 +5,6 @@ import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -27,36 +26,33 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
-	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-type FieldsSelectorContentProps = Omit<FieldsSelectorProps, 'isOpen'>;
-
-// Inner component: holds all hooks + UI. Gets mounted/unmounted via the
-// outer gate so opening always seeds a fresh draft from `fields`.
-// Assumes `fields` arrives normalized (key populated) — see outer gate.
-function FieldsSelectorContent({
+function FieldsSelector({
+	isOpen,
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
-	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorContentProps): JSX.Element {
+}: FieldsSelectorProps): JSX.Element | null {
+	if (!isOpen) {
+		return null;
+	}
+
 	const resolvedHeight =
 		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
 	const resolvedPosition = defaultPosition ?? {
 		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
 		y: DEFAULT_PANEL_TOP_INSET,
 	};
-
 	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
 	const [inputValue, setInputValue] = useState('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState('');
@@ -76,17 +72,15 @@ function FieldsSelectorContent({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			setDraftFields((prev) => {
-				if (maxFields !== undefined && prev.length >= maxFields) {
-					return prev;
-				}
-				if (prev.some((f) => f.key === field.key)) {
-					return prev;
-				}
-				return [...prev, field];
-			});
+			if (maxFields !== undefined && draftFields.length >= maxFields) {
+				return;
+			}
+			if (draftFields.some((f) => f.name === field.name)) {
+				return;
+			}
+			setDraftFields((prev) => [...prev, field]);
 		},
-		[maxFields],
+		[draftFields, maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -105,7 +99,7 @@ function FieldsSelectorContent({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.key === fields[i]?.key)
+				draftFields.every((f, i) => f.name === fields[i]?.name)
 			),
 		[draftFields, fields],
 	);
@@ -144,7 +138,6 @@ function FieldsSelectorContent({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
-					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -180,27 +173,4 @@ function FieldsSelectorContent({
 	);
 }
 
-// Outer gate: normalizes `fields` once (populates `key` so downstream code
-// can read it directly) and decides whether the inner component renders.
-// When isOpen flips false→true, the inner remounts → draft state seeds fresh.
-function FieldsSelector({
-	isOpen,
-	fields,
-	...rest
-}: FieldsSelectorProps): JSX.Element | null {
-	const normalizedFields = useMemo<TelemetryFieldKey[]>(
-		() =>
-			fields.map((f) => ({
-				...f,
-				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
-			})),
-		[fields],
-	);
-
-	if (!isOpen) {
-		return null;
-	}
-	return <FieldsSelectorContent {...rest} fields={normalizedFields} />;
-}
-
 export default FieldsSelector;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -4,7 +4,6 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
@@ -48,22 +47,15 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
-			(attr) => ({
+		const addedNames = new Set(addedFields.map((f) => f.name));
+		return suggestions
+			.filter((attr) => !addedNames.has(attr.name))
+			.map((attr) => ({
 				...attr,
-				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
-			}),
-		);
-		const addedIds = new Set(
-			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
-		);
-		return normalizedSuggestions.filter(
-			(attr) => !addedIds.has(attr.key as string),
-		);
+			}));
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -72,13 +64,8 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						<div
-							// eslint-disable-next-line react/no-array-index-key
-							key={i}
-							className={cx(styles.fieldItem, styles.otherFieldItem)}
-						>
-							<Skeleton.Input active size="small" block />
-						</div>
+						// eslint-disable-next-line react/no-array-index-key
+						<Skeleton.Input active size="small" key={i} />
 					))}
 				</div>
 			</div>
@@ -96,7 +83,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.key}
+									key={attr.name}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -1,111 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import AddedFields from '../AddedFields';
-
-// AddedFields assumes the caller has populated `key` (the parent
-// FieldsSelector does this via its normalization useMemo). Tests pre-populate
-// it directly.
-const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-	key: `${fieldContext}.${name}`,
-});
-
-describe('AddedFields — requiredFields', () => {
-	it('renders a Remove button for every field when no requiredFields are passed', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
-		);
-
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
-	});
-
-	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
-			/>,
-		);
-
-		// Only 'b' is removable.
-		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
-		expect(removeButtons).toHaveLength(1);
-	});
-
-	it('still renders the field name for required fields', () => {
-		const fields = [makeField('a'), makeField('b')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
-			/>,
-		);
-
-		expect(screen.getByText('a')).toBeInTheDocument();
-		expect(screen.getByText('b')).toBeInTheDocument();
-	});
-
-	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
-		// Two `body` fields with different contexts. requiredFields holds the
-		// canonical composite key only, so the attribute variant is deletable.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// One Remove button: the attribute variant. log variant is locked.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-
-	it('does not lock anything when a bare name is passed (composite key required)', () => {
-		// Bare `body` no longer matches — matching is composite-key only now.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['body']}
-			/>,
-		);
-
-		// Neither variant locked → both removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
-	});
-
-	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
-		const fields = [makeField('body'), makeField('body_extra')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// 'log.body' locked, 'log.body_extra' removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-});

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -3,12 +3,17 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve()),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -30,6 +35,7 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
+const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
@@ -44,7 +50,6 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -111,7 +116,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -144,7 +149,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -177,7 +182,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -2,11 +2,16 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -45,6 +50,7 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
+const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -114,7 +120,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -127,7 +133,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -144,7 +150,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -5,13 +5,18 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -48,6 +53,7 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
+const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -119,7 +125,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -1,145 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-import { IField } from 'types/api/logs/fields';
-
-import { useLogsTableColumns } from '../useLogsTableColumns';
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
-		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
-	}),
-}));
-
-const field = (name: string, type = ''): IField => ({
-	name,
-	type,
-	dataType: 'string',
-});
-
-describe('useLogsTableColumns — selectColumns-order respected', () => {
-	it('prepends stateIndicator and renders user fields in array order', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('c'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'c',
-			'a',
-			'b',
-		]);
-	});
-
-	it('slots body and timestamp at their position in the fields array', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('service.name'),
-					field('body', 'log'),
-					field('request.id'),
-					field('timestamp', 'log'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'service.name',
-			'log.body',
-			'request.id',
-			'log.timestamp',
-		]);
-	});
-
-	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('body', 'log'), field('body', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.body',
-			'attribute.body',
-		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
-	});
-
-	it('applies the same distinct-column treatment to timestamp variants', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.timestamp',
-			'attribute.timestamp',
-		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
-	});
-
-	it('skips the synthetic "id" field name', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('id'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'a',
-			'b',
-		]);
-	});
-
-	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('body', 'log'),
-					field('timestamp', 'log'),
-					field('user_field'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log.body')?.canBeHidden).toBe(false);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		// User-added fields stay removable. User field has type='' so composite
-		// collapses to bare name.
-		expect(byId.get('user_field')?.enableRemove).toBe(true);
-	});
-
-	it('renders only the stateIndicator when fields is empty', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
-	});
-});

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -7,7 +7,6 @@ import {
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
@@ -19,11 +18,13 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 type UseLogsTableColumnsProps = {
 	fields: IField[];
 	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
 };
 
 export function useLogsTableColumns({
 	fields,
 	fontSize,
+	appendTo = 'center',
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -46,74 +47,74 @@ export function useLogsTableColumns({
 			),
 		};
 
-		const timestampCol: TableColumnDef<ILog> = {
-			id: buildCompositeKey('timestamp', 'log'),
-			header: 'Timestamp',
-			accessorFn: (log): unknown => log.timestamp,
-			canBeHidden: false,
-			enableRemove: false,
-			width: { default: 170, min: 170 },
-			cell: ({ value }): ReactElement => {
-				const ts = value as string | number;
-				const formatted =
-					typeof ts === 'string'
-						? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-						: formatTimezoneAdjustedTimestamp(
-								ts / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-			},
-		};
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
 
-		const bodyCol: TableColumnDef<ILog> = {
-			id: buildCompositeKey('body', 'log'),
-			header: 'Body',
-			accessorFn: (log): string => getBodyDisplayString(log.body),
-			canBeHidden: false,
-			enableRemove: false,
-			width: { default: '100%', min: 300 },
-			cell: ({ value, isActive }): ReactElement => (
-				<TanStackTable.Text
-					dangerouslySetInnerHTML={{
-						__html: getSanitizedLogBody(value as string, {
-							shouldEscapeHtml: true,
-						}),
-					}}
-					data-active={isActive}
-				/>
-			),
-		};
-
-		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
-			id: buildCompositeKey(f.name, f.type),
-			header: f.name,
-			accessorFn: (log): unknown => FlatLogData(log)[f.name],
-			enableRemove: true,
-			width: { min: 192 },
-			cell: ({ value }): ReactElement => (
-				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-			),
-		});
-
-		// Match body/timestamp by composite key, not bare name — else a variant
-		// like `attribute.body` collapses onto `log.body`, duplicating the column.
-		const fieldCols = fields
-			.map((f): TableColumnDef<ILog> | null => {
-				if (f.name === 'id') {
-					return null;
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					canBeHidden: false,
+					enableRemove: false,
+					width: { default: 170, min: 170 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+									);
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
 				}
-				const compositeKey = buildCompositeKey(f.name, f.type);
-				if (compositeKey === timestampCol.id) {
-					return timestampCol;
-				}
-				if (compositeKey === bodyCol.id) {
-					return bodyCol;
-				}
-				return makeUserFieldCol(f);
-			})
-			.filter((c): c is TableColumnDef<ILog> => c !== null);
+			: null;
 
-		return [stateIndicatorCol, ...fieldCols];
-	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => getBodyDisplayString(log.body),
+					canBeHidden: false,
+					enableRemove: false,
+					width: { default: '100%', min: 300 },
+					cell: ({ value, isActive }): ReactElement => (
+						<TanStackTable.Text
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+						/>
+					),
+				}
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -256,34 +256,6 @@
 				}
 			}
 
-			.edit-columns-container {
-				padding: 12px;
-
-				.edit-columns-btn {
-					display: flex;
-					width: 100%;
-					height: 20px;
-					padding: 4px 0px;
-					justify-content: space-between;
-					align-items: center;
-					border: none !important;
-
-					.edit-columns-text {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 13px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.14px;
-					}
-				}
-
-				.edit-columns-btn:hover {
-					background-color: unset !important;
-				}
-			}
-
 			.add-new-column-container {
 				display: flex;
 				flex-direction: column;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,9 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
 	ChevronLeft,
@@ -11,6 +14,7 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
+	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -19,21 +23,14 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
-	onOpenColumns?: () => void;
-}
-
-interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
-	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-	onOpenColumns,
-	closePopover,
-}: OptionsMenuContentProps): JSX.Element {
-	const { maxLines, format, fontSize } = config;
+}: LogsFormatOptionsMenuProps): JSX.Element {
+	const { maxLines, format, addColumn, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -43,6 +40,13 @@ function OptionsMenu({
 	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
 		useState<boolean>(false);
 
+	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
+		useState(false);
+
+	const [selectedValue, setSelectedValue] = useState<string | null>(null);
+	const listRef = useRef<HTMLDivElement>(null);
+	const initialMouseEnterRef = useRef<boolean>(false);
+
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) {
@@ -57,6 +61,7 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
+		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -71,6 +76,20 @@ function OptionsMenu({
 		}
 	};
 
+	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// @ts-expect-error
+		const value = event?.target?.value || '';
+
+		if (addColumn && addColumn?.onSearch) {
+			addColumn?.onSearch(value);
+		}
+	}, 300);
+
+	const handleToggleAddNewColumn = (): void => {
+		addColumn?.onSearch?.('');
+		setShowAddNewColumnContainer(!showAddNewColumnContainer);
+	};
+
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -81,11 +100,6 @@ function OptionsMenu({
 		}
 	};
 
-	const handleEditColumns = (): void => {
-		onOpenColumns?.();
-		closePopover();
-	};
-
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -98,10 +112,110 @@ function OptionsMenu({
 		}
 	}, [fontSizeValue]);
 
+	function handleColumnSelection(
+		currentIndex: number,
+		optionsData: DefaultOptionType[],
+	): void {
+		const currentItem = optionsData[currentIndex];
+		const itemLength = optionsData.length;
+		if (addColumn && addColumn?.onSelect) {
+			addColumn?.onSelect(selectedValue, {
+				label: currentItem.label,
+				disabled: false,
+			});
+
+			// if the last element is selected then select the previous one
+			if (currentIndex === itemLength - 1) {
+				// there should be more than 1 element in the list
+				if (currentIndex - 1 >= 0) {
+					const prevValue = optionsData[currentIndex - 1]?.value || null;
+					setSelectedValue(prevValue as string | null);
+				} else {
+					// if there is only one element then just select and do nothing
+					setSelectedValue(null);
+				}
+			} else {
+				// selecting any random element from the list except the last one
+				const nextIndex = currentIndex + 1;
+
+				const nextValue = optionsData[nextIndex]?.value || null;
+
+				setSelectedValue(nextValue as string | null);
+			}
+		}
+	}
+
+	const handleKeyDown = (e: KeyboardEvent): void => {
+		if (!selectedValue) {
+			return;
+		}
+
+		const optionsData = addColumn?.options || [];
+
+		const currentIndex = optionsData.findIndex(
+			(item) => item?.value === selectedValue,
+		);
+
+		const itemLength = optionsData.length;
+
+		switch (e.key) {
+			case 'ArrowUp': {
+				const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
+
+				setSelectedValue(newValue as string | null);
+				e.preventDefault();
+				break;
+			}
+			case 'ArrowDown': {
+				const newValue =
+					optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
+
+				setSelectedValue(newValue as string | null);
+				e.preventDefault();
+				break;
+			}
+			case 'Enter':
+				e.preventDefault();
+				handleColumnSelection(currentIndex, optionsData);
+				break;
+			default:
+				break;
+		}
+	};
+
+	useEffect(() => {
+		// Scroll the selected item into view
+		const listNode = listRef.current;
+		if (listNode && selectedValue) {
+			const optionsData = addColumn?.options || [];
+			const currentIndex = optionsData.findIndex(
+				(item) => item?.value === selectedValue,
+			);
+			const itemNode = listNode.children[currentIndex] as HTMLElement;
+			if (itemNode) {
+				itemNode.scrollIntoView({
+					behavior: 'smooth',
+					block: 'nearest',
+				});
+			}
+		}
+	}, [selectedValue]);
+
+	useEffect(() => {
+		window.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			window.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [selectedValue]);
+
 	return (
 		<div
-			className="nested-menu-container"
+			className={cx(
+				'nested-menu-container',
+				showAddNewColumnContainer ? 'active' : '',
+			)}
 			onClick={(event): void => {
+				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -155,7 +269,71 @@ function OptionsMenu({
 						</Button>
 					</div>
 				</div>
-			) : (
+			) : null}
+
+			{showAddNewColumnContainer && (
+				<div className="add-new-column-container">
+					<div className="add-new-column-header">
+						<div className="title">
+							<div className="periscope-btn ghost" onClick={handleToggleAddNewColumn}>
+								<ChevronLeft
+									size={14}
+									className="back-icon"
+									onClick={handleToggleAddNewColumn}
+								/>
+							</div>
+							Add New Column
+						</div>
+
+						<Input
+							tabIndex={0}
+							type="text"
+							autoFocus
+							onFocus={addColumn?.onFocus}
+							onChange={handleSearchValueChange}
+							placeholder="Search..."
+						/>
+					</div>
+
+					<div className="add-new-column-content">
+						{addColumn?.isFetching && (
+							<div className="loading-container"> Loading ... </div>
+						)}
+
+						<div className="column-format-new-options" ref={listRef}>
+							{addColumn?.options?.map(({ label, value }, index) => (
+								<div
+									className={cx('column-name', value === selectedValue && 'selected')}
+									key={value}
+									onMouseEnter={(): void => {
+										if (!initialMouseEnterRef.current) {
+											setSelectedValue(value as string | null);
+										}
+
+										initialMouseEnterRef.current = true;
+									}}
+									onMouseMove={(): void => {
+										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
+										setSelectedValue(value as string | null);
+									}}
+									onClick={(eve): void => {
+										eve.stopPropagation();
+										handleColumnSelection(index, addColumn?.options || []);
+									}}
+								>
+									<div className="name">
+										<Tooltip placement="left" title={label}>
+											{label}
+										</Tooltip>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</div>
+			)}
+
+			{!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
 				<div>
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
@@ -195,52 +373,72 @@ function OptionsMenu({
 
 					{selectedItem && (
 						<>
-							<div className="horizontal-line" />
-							<div className="max-lines-per-row">
-								<div className="title"> max lines per row </div>
-								<div className="raw-format max-lines-per-row-input">
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={decrementMaxLinesPerRow}
-									>
-										{' '}
-										<Minus size={12} />{' '}
-									</button>
-									<InputNumber
-										min={1}
-										max={10}
-										value={maxLinesPerRow}
-										onChange={handleLinesPerRowChange}
-									/>
-									<button
-										type="button"
-										className="periscope-btn"
-										onClick={incrementMaxLinesPerRow}
-									>
-										{' '}
-										<Plus size={12} />{' '}
-									</button>
+							<>
+								<div className="horizontal-line" />
+								<div className="max-lines-per-row">
+									<div className="title"> max lines per row </div>
+									<div className="raw-format max-lines-per-row-input">
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={decrementMaxLinesPerRow}
+										>
+											{' '}
+											<Minus size={12} />{' '}
+										</button>
+										<InputNumber
+											min={1}
+											max={10}
+											value={maxLinesPerRow}
+											onChange={handleLinesPerRowChange}
+										/>
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={incrementMaxLinesPerRow}
+										>
+											{' '}
+											<Plus size={12} />{' '}
+										</button>
+									</div>
 								</div>
-							</div>
-						</>
-					)}
+							</>
 
-					{selectedItem === 'table' && onOpenColumns && (
-						<>
-							<div className="horizontal-line" />
-							<div className="edit-columns-container">
-								<Button
-									className="edit-columns-btn"
-									type="text"
-									onClick={handleEditColumns}
-									data-testid="periscope-btn-edit-columns"
-								>
-									<Typography.Text className="edit-columns-text">
-										Edit columns
-									</Typography.Text>
-									<ChevronRight size={14} className="icon" />
-								</Button>
+							<div className="selected-item-content-container active">
+								{!showAddNewColumnContainer && <div className="horizontal-line" />}
+
+								<div className="item-content">
+									{!showAddNewColumnContainer && (
+										<div className="title">
+											columns
+											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
+										</div>
+									)}
+
+									<div className="column-format">
+										{addColumn?.value?.map(({ name }) => (
+											<div className="column-name" key={name}>
+												<div className="name">
+													<Tooltip placement="left" title={name}>
+														{name}
+													</Tooltip>
+												</div>
+												{addColumn?.value?.length > 1 && (
+													<X
+														className="delete-btn"
+														size={14}
+														onClick={(): void => addColumn.onRemove(name)}
+													/>
+												)}
+											</div>
+										))}
+										{addColumn && addColumn?.value?.length === 0 && (
+											<div className="column-name no-columns-selected">
+												No columns selected
+											</div>
+										)}
+									</div>
+								</div>
 							</div>
 						</>
 					)}
@@ -254,7 +452,6 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -264,8 +461,6 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
-					onOpenColumns={onOpenColumns}
-					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

frontend/src/components/LogsFormatOptionsMenu/__tests__/LogsFormatOptionsMenu.test.tsx

@@ -155,66 +155,4 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
 		});
 	});
-
-	function renderWithOnOpen(
-		onOpenColumns?: jest.Mock,
-		selectedOptionFormat: 'table' | 'raw' | 'list' = 'table',
-	): { getByTestId: ReturnType<typeof render>['getByTestId'] } {
-		const items = [
-			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
-			{ key: 'list', label: 'Default' },
-			{ key: 'table', label: 'Column', data: { title: 'columns' } },
-		];
-
-		const { getByTestId } = render(
-			<LogsFormatOptionsMenu
-				items={items}
-				selectedOptionFormat={selectedOptionFormat}
-				config={{
-					format: { value: selectedOptionFormat, onChange: jest.fn() },
-					maxLines: { value: 1, onChange: jest.fn() },
-					fontSize: { value: FontSize.SMALL, onChange: jest.fn() },
-				}}
-				onOpenColumns={onOpenColumns}
-			/>,
-		);
-		fireEvent.click(getByTestId('periscope-btn-format-options'));
-		return { getByTestId };
-	}
-
-	it('renders "Edit columns" row when format=table and onOpenColumns provided', () => {
-		const onOpenColumns = jest.fn();
-		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
-
-		expect(getByTestId('periscope-btn-edit-columns')).toBeInTheDocument();
-	});
-
-	it('does not render "Edit columns" row when onOpenColumns is not provided', () => {
-		renderWithOnOpen(undefined, 'table');
-
-		expect(
-			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
-		).toBeNull();
-	});
-
-	it('does not render "Edit columns" row when format is not table', () => {
-		renderWithOnOpen(jest.fn(), 'raw');
-
-		expect(
-			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
-		).toBeNull();
-	});
-
-	it('fires onOpenColumns and closes the popover when "Edit columns" is clicked', async () => {
-		const onOpenColumns = jest.fn();
-		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
-
-		fireEvent.click(getByTestId('periscope-btn-edit-columns'));
-
-		expect(onOpenColumns).toHaveBeenCalledTimes(1);
-		await waitFor(() => {
-			// Popover content unmounts on close.
-			expect(document.querySelector('.menu-container')).toBeNull();
-		});
-	});
 });

frontend/src/components/NewSelect/styles.scss

@@ -109,16 +109,6 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
-	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: var(--l2-foreground);
-		font-size: 12px;
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -402,9 +392,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
-	// so only the list scrolls (avoids a second scrollbar on this container).
-	max-height: 410px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -495,12 +483,8 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
-			> label {
-				flex: 1 1 auto;
-				min-width: 0;
+			> span:not(.ant-checkbox) {
+				width: 100%;
 			}
 
 			.all-option-text {
@@ -517,12 +501,7 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
 					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -535,30 +514,26 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			// Size the buttons to the row's resting content height (20px) and fully
-			// override antd's default 32px Button box, so revealing them on hover
-			// never changes the row height.
-			.only-btn,
+			.only-btn {
+				display: none;
+			}
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				padding: 0 6px;
-				font-size: 12px;
-				line-height: 1;
-				border: none;
-				box-shadow: none;
+			}
 
-				&:hover {
-					background-color: unset;
-				}
+			.only-btn:hover {
+				background-color: unset;
+			}
+			.toggle-btn:hover {
+				background-color: unset;
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -573,6 +548,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/QueryBuilderV2/utils.ts

@@ -721,53 +721,6 @@ export const removeKeysFromExpression = (
 	return result?.text ?? '';
 };
 
-const escapeRegExp = (value: string): string =>
-	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-export const createVariablePlaceholderRegExp = (
-	variableName: string,
-): RegExp => {
-	const escapedName = escapeRegExp(variableName);
-	// (?![\w.]) prevents $env from matching inside $environment or $env.attr
-	return new RegExp(
-		`(\\$${escapedName}(?![\\w.])|\\{\\{\\s*\\.?${escapedName}\\s*\\}\\}|\\[\\[\\s*${escapedName}\\s*\\]\\])`,
-		'g',
-	);
-};
-
-const matchesVariablePlaceholder = (
-	text: string,
-	variableName: string,
-): boolean => createVariablePlaceholderRegExp(variableName).test(text);
-
-export const removeVariableFromExpression = (
-	expression: string | undefined,
-	variableName: string,
-): string => {
-	if (!expression) {
-		return '';
-	}
-
-	const queryPairs = extractQueryPairs(expression);
-
-	const keysToRemove = queryPairs
-		.filter((pair) => {
-			const singleValue = pair.value?.toString() ?? '';
-			const listValues = (pair.valueList ?? []).join(' ');
-			return (
-				matchesVariablePlaceholder(singleValue, variableName) ||
-				matchesVariablePlaceholder(listValues, variableName)
-			);
-		})
-		.map((pair) => pair.key);
-
-	if (keysToRemove.length === 0) {
-		return expression;
-	}
-
-	return removeKeysFromExpression(expression, keysToRemove, `$${variableName}`);
-};
-
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -72,7 +72,6 @@ function TanStackTableInner<TData>(
 		data,
 		columns,
 		columnStorageKey,
-		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -176,7 +175,6 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
-		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -208,7 +206,6 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
-		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -24,8 +24,6 @@ jest.mock('../TanStackTable.module.scss', () => ({
 }));
 
 beforeAll(() => {
-	// jsdom doesn't include ResizeObserver — must direct-assign rather than
-	// spyOn (spyOn requires the property to already exist).
 	window.ResizeObserver = jest.fn().mockImplementation(() => ({
 		disconnect: jest.fn(),
 		observe: jest.fn(),
@@ -869,110 +867,4 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 		});
 	});
-
-	describe('hasSingleColumn — gates the Remove popover per-column', () => {
-		const hasSingleColumnFlagPresent = (): boolean =>
-			Boolean(document.querySelector('th[data-single-column="true"]'));
-
-		it('is true when only one non-pinned column exists', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'name',
-							header: 'Name',
-							accessorKey: 'name',
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			expect(hasSingleColumnFlagPresent()).toBe(true);
-		});
-
-		it('is false when multiple non-pinned columns exist (all removable)', async () => {
-			renderTanStackTable({});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// 3 default columns (id/name/value), none pinned, none non-removable
-			// → table is not single-column.
-			expect(hasSingleColumnFlagPresent()).toBe(false);
-		});
-
-		it('is false when removable + non-removable mix exists (the body/timestamp case)', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'name',
-							header: 'Timestamp',
-							accessorKey: 'name',
-							enableRemove: false,
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'value',
-							header: 'Body',
-							accessorKey: 'value',
-							enableRemove: false,
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'id',
-							header: 'User',
-							accessorKey: 'id',
-							enableRemove: true,
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			expect(hasSingleColumnFlagPresent()).toBe(false);
-		});
-
-		it('does not count pinned columns toward the total', async () => {
-			renderTanStackTable({
-				props: {
-					data: [{ id: '1', name: 'Item 1', value: 100 }],
-					columns: [
-						{
-							id: 'stateIndicator',
-							header: '',
-							pin: 'left',
-							accessorKey: 'id',
-							cell: ({ value }): string => String(value),
-						},
-						{
-							id: 'name',
-							header: 'Name',
-							accessorKey: 'name',
-							cell: ({ value }): string => String(value),
-						},
-					],
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText('Item 1')).toBeInTheDocument();
-			});
-
-			// 1 pinned + 1 non-pinned → only the non-pinned counts → single-column.
-			expect(hasSingleColumnFlagPresent()).toBe(true);
-		});
-	});
 });

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -168,53 +168,6 @@ describe('useColumnState', () => {
 				'a',
 			]);
 		});
-
-		it('ignores stored columnOrder when respectColumnOrder=false', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({
-					storageKey: TEST_KEY,
-					columns,
-					respectColumnOrder: false,
-				}),
-			);
-
-			// Falls through to natural columns-array order; stored order is ignored.
-			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
-				'a',
-				'b',
-				'c',
-			]);
-		});
-
-		it('honors stored columnOrder when respectColumnOrder=true (default)', () => {
-			const columns = [col('a'), col('b'), col('c')];
-
-			act(() => {
-				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
-				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
-			});
-
-			const { result } = renderHook(() =>
-				useColumnState({
-					storageKey: TEST_KEY,
-					columns,
-					respectColumnOrder: true,
-				}),
-			);
-
-			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
-				'c',
-				'a',
-				'b',
-			]);
-		});
 	});
 
 	describe('actions', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -152,8 +152,6 @@ export type TanStackTableProps<TData> = {
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
 	columnStorageKey?: string;
-	/** When false, the table renders columns in their natural array order and the persisted columnOrder slot is ignored on read and skipped on write. Use when an external source (e.g. preferences.selectColumns) is the canonical order. Default true. */
-	respectColumnOrder?: boolean;
 	columnSizing?: ColumnSizingState;
 	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
 	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;

frontend/src/components/TanStackTableView/useColumnHandlers.ts

@@ -7,8 +7,6 @@ import { TableColumnDef } from './types';
 export interface UseColumnHandlersOptions<TData> {
 	/** Storage key for persisting column state (enables store mode) */
 	columnStorageKey?: string;
-	/** When false, drag-reorder skips the persisted columnOrder write — order flows back via onColumnOrderChange only. */
-	respectColumnOrder?: boolean;
 	effectiveSizing: ColumnSizingState;
 	storeSetSizing: (sizing: ColumnSizingState) => void;
 	storeSetOrder: (columns: TableColumnDef<TData>[]) => void;
@@ -30,7 +28,6 @@ export interface UseColumnHandlersResult<TData> {
  */
 export function useColumnHandlers<TData>({
 	columnStorageKey,
-	respectColumnOrder = true,
 	effectiveSizing,
 	storeSetSizing,
 	storeSetOrder,
@@ -53,12 +50,12 @@ export function useColumnHandlers<TData>({
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey && respectColumnOrder) {
+			if (columnStorageKey) {
 				storeSetOrder(cols);
 			}
 			onColumnOrderChange?.(cols);
 		},
-		[columnStorageKey, respectColumnOrder, storeSetOrder, onColumnOrderChange],
+		[columnStorageKey, storeSetOrder, onColumnOrderChange],
 	);
 
 	const handleRemoveColumn = useCallback(

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -20,7 +20,6 @@ type UseColumnStateOptions<TData> = {
 	storageKey?: string;
 	columns: TableColumnDef<TData>[];
 	isGrouped?: boolean;
-	respectColumnOrder?: boolean;
 };
 
 type UseColumnStateResult<TData> = {
@@ -41,7 +40,6 @@ export function useColumnState<TData>({
 	storageKey,
 	columns,
 	isGrouped = false,
-	respectColumnOrder = true,
 }: UseColumnStateOptions<TData>): UseColumnStateResult<TData> {
 	useEffect(() => {
 		if (storageKey) {
@@ -132,7 +130,7 @@ export function useColumnState<TData>({
 	}, [hiddenColumnIds, columns, isGrouped]);
 
 	const sortedColumns = useMemo((): TableColumnDef<TData>[] => {
-		if (!respectColumnOrder || columnOrder.length === 0) {
+		if (columnOrder.length === 0) {
 			return columns;
 		}
 
@@ -146,7 +144,7 @@ export function useColumnState<TData>({
 		});
 
 		return [...pinned, ...sortedRest];
-	}, [columns, columnOrder, respectColumnOrder]);
+	}, [columns, columnOrder]);
 
 	const hideColumn = useCallback(
 		(columnId: string) => {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,6 +139,7 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
+jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

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

@@ -67,8 +67,8 @@
 	gap: 4px;
 
 	&--success {
-		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
-		color: var(--text-forest-400);
+		background: color-mix(in srgb, var(--success-background) 10%, transparent);
+		color: var(--success-foreground);
 	}
 
 	&--error {

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
+import logEvent from 'api/common/logEvent';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,6 +24,8 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
+jest.mock('api/common/logEvent', () => jest.fn());
+
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -137,7 +139,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEventMock('Global Shortcut: Sidebar Toggle', {
+				logEvent('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -153,13 +155,10 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Global Shortcut: Sidebar Toggle',
-				{
-					previousState: false,
-					newState: true,
-				},
-			);
+			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
+				previousState: false,
+				newState: true,
+			});
 		});
 
 		it('should update user preference in context', async () => {

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -196,11 +196,7 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = (
-				<Tooltip title={alertValidationMessage}>
-					<span>{button}</span>
-				</Tooltip>
-			);
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
 		}
 		return button;
 	}, [
@@ -228,11 +224,7 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = (
-				<Tooltip title={alertValidationMessage}>
-					<span>{button}</span>
-				</Tooltip>
-			);
+			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
 		}
 		return button;
 	}, [

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -153,7 +153,6 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
-				display: block;
 			}
 		}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -47,10 +47,18 @@
 		}
 
 		.ant-tabs-tab-active {
-			.overview-btn,
-			.variables-btn,
+			.overview-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
+			.variables-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
 			.public-dashboard-btn {
-				color: var(--primary-background);
+				border-radius: 2px 0px 0px 2px;
 				background: var(--l1-border);
 			}
 		}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -127,15 +127,6 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
-
-					.sidenav-beta-tag {
-						margin-left: 4px;
-					}
-
-					div {
-						display: flex;
-						align-items: center;
-					}
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -186,7 +177,6 @@
 
 		.multiple-values-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {
@@ -203,7 +193,6 @@
 
 		.all-option-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -518,6 +518,7 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+											marginTop: 1,
 										}}
 									/>
 								}
@@ -613,6 +614,7 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+													marginTop: 1,
 												}}
 											/>
 										}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -1,328 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
-
-// ---------------------------------------------------------------------------
-// Shared fixture helpers
-// ---------------------------------------------------------------------------
-
-const EMPTY_BUILDER = {
-	queryData: [] as any,
-	queryFormulas: [],
-	queryTraceOperator: [],
-};
-
-const BASE_WIDGET = {
-	opacity: '1',
-	nullZeroValues: 'null',
-	timePreferance: 'GLOBAL_TIME' as const,
-	softMin: null,
-	softMax: null,
-	selectedLogFields: null,
-	selectedTracesFields: null,
-};
-
-const DEFAULT_QUERY_DATA = {
-	queryName: 'q1',
-	// In QB v5, expression holds the query label (A/B/C), not a filter expression
-	expression: 'A',
-	dataSource: DataSource.METRICS,
-	functions: [],
-	groupBy: [],
-	filters: { items: [] as any[], op: 'AND' as const },
-	legend: '',
-	disabled: false,
-	having: [],
-	limit: null,
-	stepInterval: null,
-	orderBy: [],
-	selectColumns: [],
-	source: '' as const,
-};
-
-/**
- * Build a dashboard with a single builder widget.
- * Only supply the fields your test actually cares about.
- */
-const buildBuilderDashboard = (
-	filterExpression: string,
-	queryDataOverrides: Record<string, any> = {},
-): Dashboard => ({
-	id: 'dash1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'Widget 1',
-				description: '',
-				query: {
-					id: 'query1',
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					clickhouse_sql: [],
-					builder: {
-						queryData: [
-							{
-								...DEFAULT_QUERY_DATA,
-								...queryDataOverrides,
-								filter: { expression: filterExpression },
-							},
-						],
-						queryFormulas: [],
-						queryTraceOperator: [],
-					},
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildClickhouseDashboard = (query: string): Dashboard => ({
-	id: 'dash-ch',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'CH',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'w1',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: '',
-				description: '',
-				query: {
-					id: 'q1',
-					queryType: EQueryType.CLICKHOUSE,
-					promql: [],
-					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-const buildPromqlDashboard = (query: string): Dashboard => ({
-	id: 'dash-prom',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'PromQL Dashboard',
-		widgets: [
-			{
-				...BASE_WIDGET,
-				id: 'widget-prom',
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				title: 'PromQL Widget',
-				description: '',
-				query: {
-					id: 'query-prom',
-					queryType: EQueryType.PROM,
-					promql: [{ name: 'A', query, legend: '', disabled: false }],
-					clickhouse_sql: [],
-					builder: EMPTY_BUILDER,
-					unit: '',
-				},
-			},
-		],
-		variables: {},
-	},
-});
-
-/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
-const chQuery = (sql: string, varName: string): string => {
-	const result = removeVariableReferencesFromDashboard(
-		buildClickhouseDashboard(sql),
-		varName,
-	);
-	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
-};
-
-/** Extract the first builder queryData from a cleaned dashboard. */
-const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
-	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('removeVariableReferencesFromDashboard', () => {
-	describe('builder filter expression cleanup', () => {
-		it('removes a variable clause from filter.expression', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-
-		it('leaves no dangling AND/OR after removing a variable clause', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const { expression } = firstBuilderQueryData(result).filter;
-
-			expect(expression).toBe("env = 'prod'");
-			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
-			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
-		});
-
-		it('does not remove $environment clause when deleting $env', () => {
-			const dashboard = buildBuilderDashboard(
-				'env = $env AND deployment.environment = $environment',
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				'deployment.environment = $environment',
-			);
-		});
-
-		it('leaves literal filter expressions untouched when removing a variable', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway' AND env = 'prod'",
-			);
-		});
-
-		it('removes only the variable clause, preserving a literal clause on the same key', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND service.name = 'api-gateway'",
-			);
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe(
-				"service.name = 'api-gateway'",
-			);
-		});
-
-		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
-			const dashboard = buildBuilderDashboard("env = 'prod'");
-
-			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
-
-			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
-		});
-	});
-
-	describe('PromQL query cleanup', () => {
-		it('removes variable placeholder from a promql query', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
-				'service',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe(
-				'sum(rate(http_requests_total{}[5m]))',
-			);
-		});
-
-		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
-			const result = removeVariableReferencesFromDashboard(
-				buildPromqlDashboard('up{env="$env", job="api"}'),
-				'env',
-			);
-
-			const widget = result!.data.widgets![0] as any;
-			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
-		});
-	});
-
-	describe('ClickHouse SQL query cleanup', () => {
-		it('removes a quoted variable clause and its WHERE keyword', () => {
-			expect(
-				chQuery(
-					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
-					'service',
-				),
-			).toBe('SELECT count() FROM signoz_logs');
-		});
-
-		it('removes a middle clause: AND env={{.env}} AND', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
-		});
-
-		it('removes the first clause: env={{.env}} AND rest', () => {
-			expect(
-				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
-			).toBe('SELECT count() FROM t WHERE b=2');
-		});
-
-		it('removes the last clause: rest AND env=$env', () => {
-			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
-				'SELECT count() FROM t WHERE a=1',
-			);
-		});
-
-		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
-			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
-				'SELECT count() FROM t',
-			);
-		});
-
-		it('falls back to token-only strip for a bare variable in SELECT', () => {
-			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
-				'SELECT FROM table',
-			);
-		});
-	});
-
-	describe('edge cases', () => {
-		it('is idempotent — calling twice produces the same result', () => {
-			const dashboard = buildBuilderDashboard(
-				"service.name IN $service AND env = 'prod'",
-			);
-
-			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
-			const twice = removeVariableReferencesFromDashboard(once, 'service');
-
-			expect(twice).toStrictEqual(once);
-		});
-
-		it('handles a dashboard with no widgets without throwing', () => {
-			const dashboard: Dashboard = {
-				id: 'dash-empty',
-				createdAt: '',
-				updatedAt: '',
-				createdBy: '',
-				updatedBy: '',
-				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
-			};
-
-			expect(() =>
-				removeVariableReferencesFromDashboard(dashboard, 'service'),
-			).not.toThrow();
-		});
-	});
-});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx

@@ -1,8 +1,6 @@
 import {
 	convertFiltersToExpressionWithExistingQuery,
-	createVariablePlaceholderRegExp,
 	removeKeysFromExpression,
-	removeVariableFromExpression,
 } from 'components/QueryBuilderV2/utils';
 import { cloneDeep, isArray, isEmpty } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -159,139 +157,6 @@ const updateAfterRemoval = (
 	};
 };
 
-const removeVariablePlaceholders = (
-	text: string | undefined,
-	variableName: string,
-): string => {
-	if (!text) {
-		return '';
-	}
-
-	const tokenPattern = createVariablePlaceholderRegExp(variableName);
-
-	// Step 1: attempt clause-aware removal for SQL WHERE patterns.
-	// Strips the entire `key op $var` unit plus its adjacent AND/OR so we
-	// never leave a dangling `key = ` in unquoted ClickHouse SQL clauses.
-	// Handles three shapes:
-	//   (a) preceding conjunction:  AND key = $var
-	//   (b) following conjunction:  key = $var AND
-	//   (c) standalone clause:      key = $var  (end of expression)
-	const escapedToken = tokenPattern.source;
-	const clausePattern = new RegExp(
-		// (a) conjunction before the clause
-		`\\s*\\b(?:AND|OR)\\b\\s+[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?` +
-			// (b)+(c) clause first, optional conjunction after
-			`|[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?(?:\\s*\\b(?:AND|OR)\\b)?`,
-		'gi',
-	);
-
-	const withClauseRemoval = text.replace(clausePattern, '');
-	if (withClauseRemoval !== text) {
-		return withClauseRemoval
-			.replace(/\s{2,}/g, ' ')
-			.replace(/\bWHERE\s*$/i, '')
-			.trim();
-	}
-
-	// Step 2: fallback — bare variable usage outside a key-op-value pattern
-	// (e.g. SELECT $metric, LIMIT $n). Token-only removal is correct here.
-	return text
-		.replace(tokenPattern, '')
-		.replace(/\s{2,}/g, ' ')
-		.trim();
-};
-
-const removeVariableReferencesFromQueryData = (
-	queryData: IBuilderQuery,
-	variableName: string,
-): IBuilderQuery => {
-	const updatedFilter = queryData.filter?.expression
-		? {
-				...queryData.filter,
-				expression: removeVariableFromExpression(
-					queryData.filter.expression,
-					variableName,
-				),
-			}
-		: queryData.filter;
-
-	return { ...queryData, filter: updatedFilter };
-};
-
-const removeVariableReferencesFromWidget = (
-	widget: Widgets,
-	variableName: string,
-): Widgets => {
-	let updatedWidget = { ...widget };
-
-	if (updatedWidget.query?.builder?.queryData) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				builder: {
-					...updatedWidget.query.builder,
-					queryData: updatedWidget.query.builder.queryData.map((queryData) =>
-						removeVariableReferencesFromQueryData(queryData, variableName),
-					),
-				},
-			},
-		};
-	}
-
-	if (updatedWidget.query?.promql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				promql: updatedWidget.query.promql.map((promqlQuery) => ({
-					...promqlQuery,
-					query: removeVariablePlaceholders(promqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	if (updatedWidget.query?.clickhouse_sql) {
-		updatedWidget = {
-			...updatedWidget,
-			query: {
-				...updatedWidget.query,
-				clickhouse_sql: updatedWidget.query.clickhouse_sql.map((sqlQuery) => ({
-					...sqlQuery,
-					query: removeVariablePlaceholders(sqlQuery.query, variableName),
-				})),
-			},
-		};
-	}
-
-	return updatedWidget;
-};
-
-export const removeVariableReferencesFromDashboard = (
-	dashboard: Dashboard | undefined,
-	variableName: string,
-): Dashboard | undefined => {
-	if (!dashboard || !variableName) {
-		return dashboard;
-	}
-
-	const updatedDashboard = cloneDeep(dashboard);
-
-	if (updatedDashboard.data.widgets) {
-		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
-			(widget) => {
-				if ('query' in widget) {
-					return removeVariableReferencesFromWidget(widget as Widgets, variableName);
-				}
-				return widget;
-			},
-		);
-	}
-
-	return updatedDashboard;
-};
-
 /**
  * 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.

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -18,11 +18,10 @@ import { convertVariablesToDbFormat } from 'container/DashboardContainer/Dashboa
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { toast } from '@signozhq/ui/sonner';
+import { useNotifications } from 'hooks/useNotifications';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -93,6 +92,8 @@ function VariablesSettings({
 	const { dashboardData, setDashboardData } = useDashboardStore();
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { notifications } = useNotifications();
+
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
 	const [existingVariableNamesMap, setExistingVariableNamesMap] = useState<
@@ -200,7 +201,9 @@ function VariablesSettings({
 				onSuccess: (updatedDashboard) => {
 					if (updatedDashboard.data) {
 						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
+						notifications.success({
+							message: t('variable_updated_successfully'),
+						});
 					}
 				},
 			},
@@ -253,11 +256,6 @@ function VariablesSettings({
 	};
 
 	const handleDeleteConfirm = (): void => {
-		if (!dashboardData || !variableToDelete.current) {
-			setDeleteVariableModal(false);
-			return;
-		}
-
 		const newVariablesArr = variablesTableData.filter(
 			(variable: IDashboardVariable) =>
 				variable.id !== variableToDelete?.current?.id,
@@ -265,31 +263,7 @@ function VariablesSettings({
 
 		const updatedVariables = convertVariablesToDbFormat(newVariablesArr);
 
-		const cleanedDashboard =
-			removeVariableReferencesFromDashboard(
-				dashboardData,
-				variableToDelete.current.name || '',
-			) || dashboardData;
-
-		updateMutation.mutateAsync(
-			{
-				id: dashboardData.id,
-
-				data: {
-					...cleanedDashboard.data,
-					variables: updatedVariables,
-				},
-			},
-			{
-				onSuccess: (updatedDashboard) => {
-					if (updatedDashboard.data) {
-						setDashboardData(updatedDashboard.data);
-						toast.success(t('variable_updated_successfully'));
-					}
-				},
-			},
-		);
-
+		updateVariables(updatedVariables);
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -502,7 +476,6 @@ function VariablesSettings({
 				open={deleteVariableModal}
 				onOk={handleDeleteConfirm}
 				onCancel={handleDeleteCancel}
-				okButtonProps={{ loading: updateMutation.isLoading }}
 			>
 				<Typography.Text>
 					Are you sure you want to delete variable{' '}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,7 +1,8 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -46,7 +47,10 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+} as unknown as UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps, unknown>,
+	Error
+>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -10,13 +10,17 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	enableDrillDown?: boolean;
 }
 

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,10 +1,16 @@
-import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
+const mockLogEvent = jest.fn();
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -78,7 +84,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -19,7 +19,6 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
-			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {

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

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -66,6 +67,20 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
+	const queryRangeCalledRef = useRef(false);
+
+	useEffect(() => {
+		const timeoutId = setTimeout(() => {
+			if (!queryRangeCalledRef.current) {
+				Sentry.captureEvent({
+					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
+					level: 'warning',
+				});
+			}
+		}, 120000);
+		return (): void => clearTimeout(timeoutId);
+	}, [widget?.id]);
+
 	const {
 		minTime,
 		maxTime,
@@ -256,12 +271,14 @@ function GridCardGraph({
 						});
 					}
 				}
+				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
+				queryRangeCalledRef.current = true;
 			},
 		},
 	);

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

@@ -5,11 +5,9 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -23,7 +21,10 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridValueComponent/types.ts

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

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -9,8 +9,9 @@ import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
 	getListServicesMetadataQueryKey,
-	invalidateGetService,
+	invalidateGetAccountService,
 	invalidateListServicesMetadata,
+	useGetAccountService,
 	useGetService,
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
@@ -118,30 +119,50 @@ function ServiceDetails({
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
 	const isReadOnly = !cloudAccountId;
-	const serviceQueryParams = cloudAccountId
-		? { cloud_integration_id: cloudAccountId }
-		: undefined;
 
 	const {
-		queryKey: _queryKey,
-		data: serviceDetailsData,
-		isLoading: isServiceDetailsLoading,
+		queryKey: _accountServiceQueryKey,
+		data: accountServiceData,
+		isLoading: isAccountServiceLoading,
+	} = useGetAccountService(
+		{
+			cloudProvider: type,
+			id: cloudAccountId || '',
+			serviceId: serviceId || '',
+		},
+		{
+			query: {
+				enabled: !!serviceId && !!cloudAccountId,
+				select: (response): ServiceDetailsData => response.data,
+			},
+		},
+	);
+
+	const {
+		queryKey: _readOnlyServiceQueryKey,
+		data: readOnlyServiceData,
+		isLoading: isReadOnlyServiceLoading,
 	} = useGetService(
 		{
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		{
-			...serviceQueryParams,
-		},
+		undefined,
 		{
 			query: {
-				enabled: !!serviceId,
+				enabled: !!serviceId && !cloudAccountId,
 				select: (response): ServiceDetailsData => response.data,
 			},
 		},
 	);
 
+	const serviceDetailsData = cloudAccountId
+		? accountServiceData
+		: readOnlyServiceData;
+	const isServiceDetailsLoading = cloudAccountId
+		? isAccountServiceLoading
+		: isReadOnlyServiceLoading;
+
 	const integrationConfig =
 		type === IntegrationType.AWS_SERVICES
 			? serviceDetailsData?.cloudIntegrationService?.config?.aws
@@ -272,16 +293,11 @@ function ServiceDetails({
 								},
 							);
 
-							invalidateGetService(
-								queryClient,
-								{
-									cloudProvider: type,
-									serviceId,
-								},
-								{
-									cloud_integration_id: cloudAccountId,
-								},
-							);
+							invalidateGetAccountService(queryClient, {
+								cloudProvider: type,
+								id: cloudAccountId,
+								serviceId,
+							});
 
 							invalidateListServicesMetadata(
 								queryClient,

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -89,7 +89,7 @@ export function AlertsEmptyState({
 									onClick={onClickNewAlertHandler}
 									disabled={!addNewAlert}
 									loading={loading}
-									testId="add-alert"
+									data-testid="add-alert"
 								>
 									<span className={styles.buttonContent}>
 										<Plus size="md" />
@@ -97,12 +97,7 @@ export function AlertsEmptyState({
 									</span>
 								</Button>
 								{onRefresh && (
-									<Button
-										onClick={onRefresh}
-										prefix={<RefreshCw />}
-										color="secondary"
-										testId="list-alerts-empty-refresh-button"
-									>
+									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
 										Refresh
 									</Button>
 								)}

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.actions.test.tsx

@@ -1,215 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { logEventMock } from '__tests__/logEventMock';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { findAlertRow, renderListAlertRules } from './_helpers';
-
-async function openActionsMenu(row: HTMLElement): Promise<void> {
-	const trigger = row.querySelector(
-		'[data-testid="alert-actions"]',
-	) as HTMLElement | null;
-	expect(trigger).not.toBeNull();
-	const user = userEvent.setup({ delay: null });
-	await user.click(trigger as HTMLElement);
-	// Radix renders the menu items in a portal once the trigger is activated.
-	await screen.findByRole('menu');
-}
-
-async function clickMenuItem(label: string): Promise<void> {
-	const user = userEvent.setup({ delay: null });
-	const item = await screen.findByRole('menuitem', { name: label });
-	await user.click(item);
-}
-
-describe('ListAlertRules — actions menu', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders Enable/Disable/Edit/Edit in New Tab/Clone/Delete items after opening the menu', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-
-		expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-
-		await openActionsMenu(row);
-
-		const items = screen.getAllByRole('menuitem');
-		const labels = items.map((it) => it.textContent);
-		expect(labels).toStrictEqual(
-			expect.arrayContaining([
-				'Edit',
-				'Edit in New Tab',
-				'Clone',
-				'Delete',
-				'Disable',
-			]),
-		);
-	});
-
-	it('disabled rule (rule-4) shows "Enable" instead of "Disable"', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('Disabled Alert');
-		await openActionsMenu(row);
-
-		const items = screen.getAllByRole('menuitem');
-		const labels = items.map((it) => it.textContent);
-		expect(labels).toContain('Enable');
-		expect(labels).not.toContain('Disable');
-	});
-
-	it('toggle action: clicking Disable sends PATCH with disabled:true', async () => {
-		let capturedBody: unknown = null;
-		let capturedPath: string | null = null;
-		server.use(
-			rest.patch('http://localhost/api/v2/rules/:id', async (req, res, ctx) => {
-				capturedBody = await req.json();
-				capturedPath = req.params.id as string;
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Disable');
-
-		await waitFor(() => {
-			expect(capturedBody).toStrictEqual(
-				expect.objectContaining({ disabled: true }),
-			);
-		});
-		expect(capturedPath).toBe('rule-1');
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('edit action: clicking Edit navigates via safeNavigate and logs event', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Edit');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock.mock.calls[0][0]).toContain('ruleId=rule-1');
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Edit', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('edit in new tab action: clicking opens with newTab:true', async () => {
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Edit in New Tab');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		const [url, options] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('ruleId=rule-1');
-		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
-	});
-
-	it('clone action: sends POST with " - Copy" suffix and opens the cloned rule returned by the API', async () => {
-		let capturedPostBody: unknown = null;
-		server.use(
-			rest.post('http://localhost/api/v2/rules', async (req, res, ctx) => {
-				capturedPostBody = await req.json();
-				return res(
-					ctx.status(201),
-					ctx.json({
-						data: {
-							...(capturedPostBody as Record<string, unknown>),
-							id: 'cloned-from-server',
-						},
-						status: 'success',
-					}),
-				);
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Clone');
-
-		await waitFor(() => {
-			expect(capturedPostBody).toStrictEqual(
-				expect.objectContaining({ alert: 'High CPU Alert - Copy' }),
-			);
-		});
-
-		// The id from the server response round-trips into the navigate URL — this
-		// protects against a regression where the code hardcodes the id.
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock.mock.calls[0][0]).toContain(
-			'ruleId=cloned-from-server',
-		);
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Clone', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('delete action: sends DELETE for the rule id', async () => {
-		let deletedId: string | null = null;
-		server.use(
-			rest.delete('http://localhost/api/v2/rules/:id', (req, res, ctx) => {
-				deletedId = req.params.id as string;
-				return res(ctx.status(200), ctx.json({ status: 'success' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Delete');
-
-		await waitFor(() => {
-			expect(deletedId).toBe('rule-1');
-		});
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Delete', ruleId: 'rule-1' }),
-		);
-	});
-
-	it('error path: PATCH is still attempted when server returns 500', async () => {
-		let patchAttempted = false;
-		server.use(
-			rest.patch('http://localhost/api/v2/rules/:id', (_, res, ctx) => {
-				patchAttempted = true;
-				return res(ctx.status(500), ctx.json({ status: 'error' }));
-			}),
-		);
-
-		renderListAlertRules();
-		const row = await findAlertRow('High CPU Alert');
-		await openActionsMenu(row);
-		await clickMenuItem('Disable');
-
-		await waitFor(() => {
-			expect(patchAttempted).toBe(true);
-		});
-
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable', ruleId: 'rule-1' }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.columns.test.tsx

@@ -1,79 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-const COLUMN_STORAGE_KEY = '@signoz/table-columns/alert-rules-columns';
-
-describe('ListAlertRules — columns selector', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-		localStorage.clear();
-	});
-
-	afterEach(() => {
-		localStorage.clear();
-	});
-
-	it('opens columns popover and lists toggleable columns', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByTestId('alert-columns-button'));
-
-		// Popover should reveal "Toggle Columns" heading + per-column labels.
-		await screen.findByText('Toggle Columns');
-		expect(screen.getByText('Created At')).toBeInTheDocument();
-		expect(screen.getByText('Created By')).toBeInTheDocument();
-		expect(screen.getByText('Updated At')).toBeInTheDocument();
-		expect(screen.getByText('Updated By')).toBeInTheDocument();
-	});
-
-	it('default-hidden columns (Created At/By, Updated At/By) are not in the table header', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const headers = document.querySelectorAll('th');
-		const headerTexts = Array.from(headers).map((h) => h.textContent || '');
-		expect(headerTexts.some((t) => t.includes('Created At'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Created By'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Updated At'))).toBe(false);
-		expect(headerTexts.some((t) => t.includes('Updated By'))).toBe(false);
-	});
-
-	it('toggling Created At on writes to localStorage and adds the header', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const headersBefore = Array.from(document.querySelectorAll('th')).map(
-			(h) => h.textContent ?? '',
-		);
-		expect(headersBefore.some((t) => t.includes('Created At'))).toBe(false);
-
-		await user.click(screen.getByTestId('alert-columns-button'));
-		await screen.findByText('Toggle Columns');
-
-		const checkbox = document.getElementById('col-createdAt');
-		expect(checkbox).not.toBeNull();
-		await user.click(checkbox as HTMLElement);
-
-		await waitFor(() => {
-			const stored = window.localStorage.getItem(COLUMN_STORAGE_KEY);
-			expect(stored).not.toBeNull();
-			const parsed = JSON.parse(stored as string);
-			expect(parsed.hiddenColumnIds).not.toContain('createdAt');
-		});
-
-		await waitFor(() => {
-			const headersAfter = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headersAfter.some((t) => t.includes('Created At'))).toBe(true);
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.empty.test.tsx

@@ -1,91 +0,0 @@
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { alertRulesFixture } from 'mocks-server/__mockdata__/alert_rules';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — empty states', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders AlertsEmptyState when API returns no rules', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ data: [], status: 'success' })),
-			),
-		);
-
-		renderListAlertRules();
-
-		await screen.findByText('No Alert rules yet.');
-		expect(
-			screen.getByText('Create an Alert Rule to get started'),
-		).toBeInTheDocument();
-
-		// New Alert Rule button is visible and triggers safeNavigate to ALERTS_NEW.
-		await user.click(screen.getByTestId('add-alert'));
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: false }),
-		);
-	});
-
-	it('renders ErrorEmptyState when API returns 500; refresh triggers a refetch', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		let callCount = 0;
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) => {
-				callCount += 1;
-				if (callCount === 1) {
-					return res(ctx.status(500), ctx.json({ status: 'error' }));
-				}
-				return res(
-					ctx.status(200),
-					ctx.json({ data: alertRulesFixture, status: 'success' }),
-				);
-			}),
-		);
-
-		renderListAlertRules();
-
-		await screen.findByTestId('error-empty-state');
-
-		await user.click(screen.getByTestId('error-refresh-button'));
-
-		const rule = await screen.findByText('High CPU Alert');
-		expect(rule).toBeInTheDocument();
-	});
-
-	it('renders NoResultsEmptyState when search yields no match; Clear Search resets', async () => {
-		const user = userEvent.setup({ delay: null });
-
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		const searchInput = screen.getByTestId('list-alerts-search-input');
-		await user.clear(searchInput);
-		await user.type(searchInput, 'totally-not-found');
-
-		await screen.findByTestId('no-results-empty-state');
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'No matching alert rules',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'No alert rules match your search. Try adjusting your search criteria.',
-		);
-
-		await user.click(screen.getByTestId('no-results-clear-button'));
-
-		const rule = await screen.findByText('High CPU Alert');
-		expect(rule).toBeInTheDocument();
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.list.test.tsx

@@ -1,123 +0,0 @@
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — list rendering', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('renders alert rules from API', async () => {
-		renderListAlertRules();
-
-		await expect(
-			screen.findByTestId('alert-row-rule-1-name'),
-		).resolves.toHaveTextContent('High CPU Alert');
-		expect(screen.getByTestId('alert-row-rule-2-name')).toHaveTextContent(
-			'Memory Pending Alert',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-name')).toHaveTextContent(
-			'Healthy Alert',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-name')).toHaveTextContent(
-			'Disabled Alert',
-		);
-	});
-
-	it('renders state badges via STATE_CONFIG mapping', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveTextContent(
-			'Firing',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveTextContent(
-			'Pending',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveTextContent('OK');
-		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveTextContent(
-			'Disabled',
-		);
-		expect(screen.getByTestId('alert-row-rule-5-state')).toHaveTextContent('OK');
-	});
-
-	it('renders state badges with semantic colors', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-state')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-state')).toHaveAttribute(
-			'data-color',
-			'cherry',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-state')).toHaveAttribute(
-			'data-color',
-			'amber',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-state')).toHaveAttribute(
-			'data-color',
-			'forest',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-state')).toHaveAttribute(
-			'data-color',
-			'vanilla',
-		);
-	});
-
-	it('renders severity badges for rules with severity', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-severity')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveTextContent(
-			'critical',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveTextContent(
-			'warning',
-		);
-		expect(screen.getByTestId('alert-row-rule-3-severity')).toHaveTextContent(
-			'info',
-		);
-		expect(screen.getByTestId('alert-row-rule-4-severity')).toHaveTextContent(
-			'critical',
-		);
-		expect(screen.getByTestId('alert-row-rule-5-severity')).toHaveTextContent(
-			'-',
-		);
-		expect(screen.getByTestId('alert-row-rule-1-severity')).toHaveAttribute(
-			'data-color',
-			'cherry',
-		);
-		expect(screen.getByTestId('alert-row-rule-2-severity')).toHaveAttribute(
-			'data-color',
-			'amber',
-		);
-	});
-
-	it('renders header controls (search, columns, new alert)', async () => {
-		renderListAlertRules();
-
-		await waitFor(() =>
-			expect(screen.getByTestId('alert-row-rule-1-name')).toBeInTheDocument(),
-		);
-
-		expect(screen.getByTestId('list-alerts-search-input')).toBeInTheDocument();
-		expect(
-			screen.getByPlaceholderText('Search by Alert Name, Severity and Labels'),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('alert-columns-button')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.newAlert.test.tsx

@@ -1,65 +0,0 @@
-import { logEventMock } from '__tests__/logEventMock';
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — new alert button', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('plain click navigates to ALERTS_NEW with newTab:false', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: false }),
-		);
-	});
-
-	it('logs Alert: New alert button clicked', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-
-		await waitFor(() => {
-			expect(logEventMock).toHaveBeenCalledWith(
-				'Alert: New alert button clicked',
-				expect.objectContaining({ layout: 'new' }),
-			);
-		});
-	});
-
-	it('ctrl+click on New Alert opens in a new tab (newTab:true)', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.keyboard('{Control>}');
-		await user.click(screen.getByRole('button', { name: /new alert/i }));
-		await user.keyboard('{/Control}');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.ALERTS_NEW,
-			expect.objectContaining({ newTab: true }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.pagination.test.tsx

@@ -1,64 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { alertRulesPaginationFixture } from 'mocks-server/__mockdata__/alert_rules';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { screen, waitFor } from 'tests/test-utils';
-import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — pagination', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-		server.use(
-			rest.get('http://localhost/api/v2/rules', (_, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.json({ data: alertRulesPaginationFixture, status: 'success' }),
-				),
-			),
-		);
-	});
-
-	it('shows first 10 rows on page 1 (default limit)', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		for (let i = 0; i < 10; i += 1) {
-			expect(screen.getByText(`Pag Rule ${i}`)).toBeInTheDocument();
-		}
-		expect(screen.queryByText('Pag Rule 10')).not.toBeInTheDocument();
-		expect(screen.queryByText('Pag Rule 14')).not.toBeInTheDocument();
-	});
-
-	it('shows total count when showTotalCount is enabled', async () => {
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		const totalCount = await screen.findByTestId('pagination-total-count');
-		expect(totalCount.textContent).toContain('Showing');
-		expect(totalCount.textContent).toContain('of 15');
-	});
-
-	it('navigates to page 2 and shows remaining rows', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('Pag Rule 0');
-
-		const nextBtn = screen.getByLabelText('Go to next page');
-		await user.click(nextBtn);
-
-		await waitFor(() => {
-			expect(screen.getByText('Pag Rule 10')).toBeInTheDocument();
-			expect(screen.getByText('Pag Rule 14')).toBeInTheDocument();
-			expect(screen.queryByText('Pag Rule 0')).not.toBeInTheDocument();
-		});
-
-		await waitFor(() => {
-			expect(getCurrentNuqsQueryString()).toContain('page=2');
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.permissions.test.tsx

@@ -1,71 +0,0 @@
-import { screen, waitFor } from 'tests/test-utils';
-import { USER_ROLES } from 'types/roles';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — permissions', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('VIEWER role hides "New Alert" button and "Actions" column', async () => {
-		renderListAlertRules({ role: USER_ROLES.VIEWER });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.queryByTestId('list-alerts-new-alert-button'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /new alert/i }),
-		).not.toBeInTheDocument();
-
-		const headers = Array.from(document.querySelectorAll('th')).map(
-			(h) => h.textContent ?? '',
-		);
-		expect(headers.some((t) => t.includes('Actions'))).toBe(false);
-		expect(screen.queryByTestId('alert-actions')).not.toBeInTheDocument();
-	});
-
-	it('ADMIN role shows "New Alert" button and "Actions" column', async () => {
-		renderListAlertRules({ role: USER_ROLES.ADMIN });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-
-		await waitFor(() => {
-			const headers = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
-		});
-		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
-	});
-
-	it('EDITOR role behaves like ADMIN (New Alert + Actions visible)', async () => {
-		renderListAlertRules({ role: USER_ROLES.EDITOR });
-
-		await screen.findByText('High CPU Alert');
-
-		expect(
-			screen.getByTestId('list-alerts-new-alert-button'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: /new alert/i }),
-		).toBeInTheDocument();
-
-		await waitFor(() => {
-			const headers = Array.from(document.querySelectorAll('th')).map(
-				(h) => h.textContent ?? '',
-			);
-			expect(headers.some((t) => t.includes('Actions'))).toBe(true);
-		});
-		expect(screen.getAllByTestId('alert-actions').length).toBeGreaterThan(0);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.rowClick.test.tsx

@@ -1,52 +0,0 @@
-import { safeNavigateMock } from '__tests__/safeNavigateMock';
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-
-import { renderListAlertRules } from './_helpers';
-
-describe('ListAlertRules — row click navigation', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('clicking a row calls safeNavigate to alerts/overview with composite query + ruleId', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		const ruleCell = await screen.findByText('High CPU Alert');
-
-		const td = ruleCell.closest('td');
-		expect(td).not.toBeNull();
-		await user.click(td as HTMLElement);
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-
-		const [url] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('/alerts/overview?');
-		expect(url).toContain('ruleId=rule-1');
-		expect(url).toContain('panelTypes=graph');
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('ctrl+click on a row navigates with newTab option', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		const ruleCell = await screen.findByText('High CPU Alert');
-
-		const td = ruleCell.closest('td');
-		await user.keyboard('{Control>}');
-		await user.click(td as HTMLElement);
-		await user.keyboard('{/Control}');
-
-		await waitFor(() => {
-			expect(safeNavigateMock).toHaveBeenCalled();
-		});
-
-		const [url, options] = safeNavigateMock.mock.calls[0];
-		expect(url).toContain('ruleId=rule-1');
-		expect(options).toStrictEqual(expect.objectContaining({ newTab: true }));
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.search.test.tsx

@@ -1,99 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { screen, waitFor } from 'tests/test-utils';
-import { getCurrentNuqsQueryString } from 'tests/nuqs-helpers';
-
-import { renderListAlertRules } from './_helpers';
-
-function getSearchInput(): HTMLInputElement {
-	return screen.getByTestId('list-alerts-search-input') as HTMLInputElement;
-}
-
-describe('ListAlertRules — search', () => {
-	beforeEach(() => {
-		jest.setSystemTime(new Date('2023-10-20T12:00:00Z'));
-	});
-
-	it('filters rows by alert name with debounce', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
-
-		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
-		});
-	});
-
-	it('filters rows by label values (severity)', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'warning');
-
-		await waitFor(() => {
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.queryByText('High CPU Alert')).not.toBeInTheDocument();
-		});
-	});
-
-	it('restores all rows when search is cleared', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'CPU');
-
-		await waitFor(() => {
-			expect(screen.queryByText('Memory Pending Alert')).not.toBeInTheDocument();
-		});
-
-		await user.clear(getSearchInput());
-
-		await waitFor(() => {
-			expect(screen.getByText('High CPU Alert')).toBeInTheDocument();
-			expect(screen.getByText('Memory Pending Alert')).toBeInTheDocument();
-			expect(screen.getByText('Healthy Alert')).toBeInTheDocument();
-		});
-	});
-
-	it('shows no-results state when no match', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules();
-
-		await screen.findByText('High CPU Alert');
-
-		await user.clear(getSearchInput());
-		await user.type(getSearchInput(), 'zzzzzz-no-match');
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
-			expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-				'No matching alert rules',
-			);
-		});
-	});
-
-	it('resets page to 1 when search debounce fires', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderListAlertRules({ initialRoute: '/?page=2' });
-
-		// Page 2 of the 4-rule fixture has no rows; we only need the search input
-		// to be mounted, which happens before data is fetched.
-		const input = await screen.findByTestId('list-alerts-search-input');
-		await user.clear(input);
-		await user.type(input, 'CPU');
-
-		await waitFor(() => {
-			expect(getCurrentNuqsQueryString()).not.toContain('page=2');
-		});
-	});
-});

frontend/src/container/ListAlertRules/__tests__/ListAlertRules.utils.test.ts

@@ -1,232 +0,0 @@
-import { logEventMock } from '__tests__/logEventMock';
-import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertRule } from '../types';
-import {
-	ALERT_ACTIONS,
-	alertActionLogEvent,
-	filterRulesByFilters,
-	getAlertSortValue,
-	sortRules,
-} from '../utils';
-
-const baseRule = {
-	id: 'r1',
-	alert: 'Rule 1',
-	alertType: 'METRIC_BASED_ALERT',
-	state: 'inactive',
-	labels: { severity: 'info' },
-	condition: {},
-	createdAt: '2023-10-15T10:00:00Z',
-	updatedAt: '2023-10-19T10:00:00Z',
-} as unknown as AlertRule;
-
-const makeRule = (overrides: Partial<AlertRule>): AlertRule => ({
-	...baseRule,
-	...overrides,
-});
-
-describe('getAlertSortValue', () => {
-	it('returns state for "state"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: RuletypesAlertStateDTO.firing }),
-				'state',
-			),
-		).toBe('firing');
-	});
-
-	it('returns alert name for "name"', () => {
-		expect(getAlertSortValue(makeRule({ alert: 'My Rule' }), 'name')).toBe(
-			'My Rule',
-		);
-	});
-
-	it('returns severity label for "severity"', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ labels: { severity: 'critical' } }),
-				'severity',
-			),
-		).toBe('critical');
-	});
-
-	it('returns createdAt as ms', () => {
-		const rule = makeRule({ createdAt: '2023-10-15T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'createdAt');
-		expect(result).toBe(new Date('2023-10-15T10:00:00Z').getTime());
-	});
-
-	it('returns updatedAt as ms', () => {
-		const rule = makeRule({ updatedAt: '2023-10-19T10:00:00Z' });
-		const result = getAlertSortValue(rule, 'updatedAt');
-		expect(result).toBe(new Date('2023-10-19T10:00:00Z').getTime());
-	});
-
-	it('returns 0 when createdAt missing', () => {
-		expect(
-			getAlertSortValue(makeRule({ createdAt: undefined }), 'createdAt'),
-		).toBe(0);
-	});
-
-	it('returns empty for unknown column', () => {
-		expect(getAlertSortValue(baseRule, 'xxx')).toBe('');
-	});
-
-	it('returns empty for missing fields', () => {
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'state',
-			),
-		).toBe('');
-		expect(
-			getAlertSortValue(
-				makeRule({ state: undefined, labels: undefined }),
-				'severity',
-			),
-		).toBe('');
-	});
-});
-
-describe('sortRules', () => {
-	const r1 = makeRule({ id: '1', alert: 'A' });
-	const r2 = makeRule({ id: '2', alert: 'B' });
-	const r3 = makeRule({ id: '3', alert: 'C' });
-
-	it('sorts ascending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortRules([r3, r1, r2], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['A', 'B', 'C']);
-	});
-
-	it('sorts descending by name', () => {
-		const order: SortState = { columnName: 'name', order: 'desc' };
-		const result = sortRules([r1, r2, r3], order);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'B', 'A']);
-	});
-
-	it('returns unsorted when orderBy is null', () => {
-		const result = sortRules([r3, r1, r2], null);
-		expect(result.map((r) => r.alert)).toStrictEqual(['C', 'A', 'B']);
-	});
-});
-
-describe('filterRulesByFilters', () => {
-	const r1 = makeRule({
-		id: '1',
-		alert: 'R1',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'critical' },
-	});
-	const r2 = makeRule({
-		id: '2',
-		alert: 'R2',
-		state: RuletypesAlertStateDTO.inactive,
-		labels: { severity: 'warning' },
-	});
-	const r3 = makeRule({
-		id: '3',
-		alert: 'R3',
-		state: RuletypesAlertStateDTO.firing,
-		labels: { severity: 'warning' },
-	});
-	const rules = [r1, r2, r3];
-
-	it('returns input when filters empty', () => {
-		expect(filterRulesByFilters(rules, [])).toStrictEqual(rules);
-	});
-
-	it('filters by state', () => {
-		const result = filterRulesByFilters(rules, ['state:firing']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
-	});
-
-	it('filters by severity', () => {
-		const result = filterRulesByFilters(rules, ['severity:warning']);
-		expect(result.map((r) => r.id)).toStrictEqual(['2', '3']);
-	});
-
-	it('combines state AND severity', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'severity:warning',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['3']);
-	});
-
-	it('OR within same key (state)', () => {
-		const result = filterRulesByFilters(rules, [
-			'state:firing',
-			'state:inactive',
-		]);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '2', '3']);
-	});
-
-	it('matches values case-insensitively', () => {
-		const result = filterRulesByFilters(rules, ['state:FIRING']);
-		expect(result.map((r) => r.id)).toStrictEqual(['1', '3']);
-	});
-
-	it('ignores prefixes with wrong case (state: is required lowercase)', () => {
-		const result = filterRulesByFilters(rules, ['STATE:FIRING']);
-		expect(result).toStrictEqual(rules);
-	});
-
-	it('returns empty when no rule matches', () => {
-		expect(filterRulesByFilters(rules, ['state:nonexistent'])).toStrictEqual([]);
-	});
-
-	it('ignores unknown prefix', () => {
-		expect(filterRulesByFilters(rules, ['foo:bar'])).toStrictEqual(rules);
-	});
-});
-
-describe('alertActionLogEvent', () => {
-	it('logs with mapped action label', () => {
-		const rule = makeRule({
-			id: 'rule-1',
-			alert: 'My Rule',
-			alertType: 'METRIC_BASED_ALERT' as AlertRule['alertType'],
-		});
-		alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
-		expect(logEventMock).toHaveBeenCalledWith('Alert: Action', {
-			ruleId: 'rule-1',
-			dataSource: expect.any(String),
-			name: 'My Rule',
-			action: 'Edit',
-		});
-	});
-
-	it('falls back to raw action when unmapped', () => {
-		alertActionLogEvent('custom', baseRule);
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'custom' }),
-		);
-	});
-
-	it('maps TOGGLE action', () => {
-		alertActionLogEvent(ALERT_ACTIONS.TOGGLE, baseRule);
-		expect(logEventMock).toHaveBeenCalledWith(
-			'Alert: Action',
-			expect.objectContaining({ action: 'Enable/Disable' }),
-		);
-	});
-
-	it('maps DELETE and CLONE', () => {
-		alertActionLogEvent(ALERT_ACTIONS.DELETE, baseRule);
-		alertActionLogEvent(ALERT_ACTIONS.CLONE, baseRule);
-		expect(logEventMock).toHaveBeenNthCalledWith(
-			1,
-			'Alert: Action',
-			expect.objectContaining({ action: 'Delete' }),
-		);
-		expect(logEventMock).toHaveBeenNthCalledWith(
-			2,
-			'Alert: Action',
-			expect.objectContaining({ action: 'Clone' }),
-		);
-	});
-});

frontend/src/container/ListAlertRules/__tests__/_helpers.tsx

@@ -1,65 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, RenderResult, screen } from '@testing-library/react';
-import ListAlertRules from 'container/ListAlertRules';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { AppContext } from 'providers/App/App';
-import TimezoneProvider from 'providers/Timezone';
-import { onNuqsUrlUpdate, resetNuqsState } from 'tests/nuqs-helpers';
-import { getAppContextMock } from 'tests/test-utils';
-
-interface RenderOptions {
-	role?: string;
-	initialRoute?: string;
-}
-
-export function renderListAlertRules(
-	options: RenderOptions = {},
-): RenderResult {
-	const { role = 'ADMIN', initialRoute = '/' } = options;
-
-	const initialSearch = initialRoute.includes('?')
-		? initialRoute.slice(initialRoute.indexOf('?'))
-		: '';
-	resetNuqsState(initialSearch);
-
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: false },
-			mutations: { retry: false },
-		},
-	});
-
-	return render(
-		<MemoryRouter initialEntries={[initialRoute]}>
-			<NuqsTestingAdapter
-				searchParams={initialSearch}
-				onUrlUpdate={onNuqsUrlUpdate}
-				rateLimitFactor={0}
-				hasMemory
-			>
-				<QueryClientProvider client={queryClient}>
-					<AppContext.Provider value={getAppContextMock(role)}>
-						<TimezoneProvider>
-							<VirtuosoMockContext.Provider
-								value={{ viewportHeight: 800, itemHeight: 46 }}
-							>
-								<ListAlertRules />
-							</VirtuosoMockContext.Provider>
-						</TimezoneProvider>
-					</AppContext.Provider>
-				</QueryClientProvider>
-			</NuqsTestingAdapter>
-		</MemoryRouter>,
-	);
-}
-
-export async function findAlertRow(alertName: string): Promise<HTMLElement> {
-	const cell = await screen.findByText(alertName, {}, { timeout: 5000 });
-	const row = cell.closest('tr');
-	if (!row) {
-		throw new Error(`Row not found for alert "${alertName}"`);
-	}
-	return row as HTMLElement;
-}

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -47,7 +47,6 @@ function ColumnSelector<TData>({
 					size="sm"
 					color="secondary"
 					prefix={<Columns3 size={14} />}
-					data-testid="alert-columns-button"
 				>
 					Columns
 				</Button>

frontend/src/container/ListAlertRules/index.tsx

@@ -136,7 +136,6 @@ function ListAlertRules(): JSX.Element {
 								prefix={<Plus size={14} />}
 								onClick={handleNewAlert}
 								color="primary"
-								testId="list-alerts-new-alert-button"
 							>
 								New Alert
 							</Button>
@@ -158,7 +157,6 @@ function ListAlertRules(): JSX.Element {
 						value={searchText}
 						onChange={handleSearchChange}
 						suffix={<Search size={14} className={styles.searchIcon} />}
-						testId="list-alerts-search-input"
 					/>
 				</div>
 			)}

frontend/src/container/ListAlertRules/table.config.tsx

@@ -26,18 +26,14 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => {
+			cell: ({ value }): JSX.Element => {
 				const state = String(value ?? '').toLowerCase();
 				const config = STATE_CONFIG[state] ?? {
 					color: 'secondary' as BadgeColor,
 					label: 'Unknown',
 				};
 				return (
-					<Badge
-						color={config.color}
-						variant="outline"
-						testId={`alert-row-${row.id ?? ''}-state`}
-					>
+					<Badge color={config.color} variant="outline">
 						{config.label}
 					</Badge>
 				);
@@ -51,11 +47,8 @@ export function getAlertRuleColumns(
 			enableSort: true,
 			enableRemove: false,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => (
-				<TanStackTable.Text
-					title={value}
-					data-testid={`alert-row-${row.id ?? ''}-name`}
-				>
+			cell: ({ value }): JSX.Element => (
+				<TanStackTable.Text title={value}>
 					{String(value ?? '-')}
 				</TanStackTable.Text>
 			),
@@ -67,20 +60,15 @@ export function getAlertRuleColumns(
 			width: { fixed: '120px' },
 			enableSort: true,
 			enableMove: false,
-			cell: ({ row, value }): JSX.Element => {
+			cell: ({ value }): JSX.Element => {
 				const severity = String(value ?? '').toLowerCase();
 				if (!severity) {
-					return (
-						<TanStackTable.Text data-testid={`alert-row-${row.id ?? ''}-severity`}>
-							-
-						</TanStackTable.Text>
-					);
+					return <TanStackTable.Text>-</TanStackTable.Text>;
 				}
 				return (
 					<Badge
 						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
 						variant="outline"
-						testId={`alert-row-${row.id ?? ''}-severity`}
 					>
 						{severity}
 					</Badge>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -232,7 +232,7 @@ function DashboardsList(): JSX.Element {
 		isLocked: !!e.locked || false,
 		lastUpdatedBy: e.updatedBy,
 		image: e.data.image || Base64Icons[0],
-		variables: e.data.variables ?? {},
+		variables: e.data.variables,
 		widgets: e.data.widgets,
 		layout: e.data.layout,
 		panelMap: e.data.panelMap,

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

@@ -2,14 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -58,8 +56,6 @@ function LiveLogsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
 	const formatItems = [
 		{
 			key: 'raw',
@@ -242,7 +238,6 @@ function LiveLogsContainer({
 						items={formatItems}
 						selectedOptionFormat={options.format}
 						config={config}
-						onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 					/>
 				</div>
 
@@ -266,17 +261,6 @@ function LiveLogsContainer({
 			</div>
 
 			<GoToTop />
-			{config.fieldsSelector && (
-				<FieldsSelector
-					isOpen={isFieldsSelectorOpen}
-					title="Edit columns"
-					fields={config.fieldsSelector.value}
-					onFieldsChange={config.fieldsSelector.onFieldsChange}
-					onClose={(): void => setIsFieldsSelectorOpen(false)}
-					signal={DataSource.LOGS}
-					requiredFields={LOGS_REQUIRED_COLUMNS}
-				/>
-			)}
 		</div>
 	);
 }

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

@@ -82,6 +82,7 @@ function LiveLogsList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
+		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -197,7 +198,6 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							respectColumnOrder={false}
 							onColumnRemove={config?.addColumn?.onRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}

frontend/src/container/LogsExplorerList/index.tsx

@@ -105,6 +105,7 @@ function LogsExplorerList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
+		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -203,7 +204,6 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-					respectColumnOrder={false}
 					onColumnRemove={config?.addColumn?.onRemove}
 					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,17 +1,16 @@
-import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
-import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
+import QueryStatus from './QueryStatus';
+
 function LogsActionsContainer({
 	listQuery,
 	selectedPanelType,
@@ -19,6 +18,10 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
+	isFetching,
+	isLoading,
+	isError,
+	isSuccess,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -26,6 +29,10 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart: () => void;
 	orderBy: string;
 	setOrderBy: (value: string) => void;
+	isFetching: boolean;
+	isLoading: boolean;
+	isError: boolean;
+	isSuccess: boolean;
 }): JSX.Element {
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -33,8 +40,6 @@ function LogsActionsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
 	const formatItems = [
 		{
 			key: 'raw',
@@ -97,24 +102,23 @@ function LogsActionsContainer({
 									items={formatItems}
 									selectedOptionFormat={options.format}
 									config={config}
-									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 								/>
 							</div>
 						</>
 					)}
+
+					{(selectedPanelType === PANEL_TYPES.TIME_SERIES ||
+						selectedPanelType === PANEL_TYPES.TABLE) && (
+						<div className="query-stats">
+							<QueryStatus
+								loading={isLoading || isFetching}
+								error={isError}
+								success={isSuccess}
+							/>
+						</div>
+					)}
 				</div>
 			</div>
-			{config.fieldsSelector && (
-				<FieldsSelector
-					isOpen={isFieldsSelectorOpen}
-					title="Edit columns"
-					fields={config.fieldsSelector.value}
-					onFieldsChange={config.fieldsSelector.onFieldsChange}
-					onClose={(): void => setIsFieldsSelectorOpen(false)}
-					signal={DataSource.LOGS}
-					requiredFields={LOGS_REQUIRED_COLUMNS}
-				/>
-			)}
 		</div>
 	);
 }

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -155,6 +155,40 @@
 				}
 			}
 
+			.query-stats {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+
+				align-self: flex-end;
+
+				.rows {
+					color: var(--l2-foreground);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.36px;
+				}
+
+				.divider {
+					width: 1px;
+					height: 14px;
+					background: var(--l3-background);
+				}
+
+				.time {
+					color: var(--l2-foreground);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.36px;
+				}
+			}
+
 			.ant-btn {
 				border: none;
 			}

frontend/src/container/LogsExplorerViews/QueryStatus.styles.scss

@@ -0,0 +1,4 @@
+.query-status {
+	display: flex;
+	align-items: center;
+}

frontend/src/container/LogsExplorerViews/QueryStatus.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { LoaderCircle, CircleCheck } from '@signozhq/icons';
+import { Spin } from 'antd';
+
+import solidXCircleUrl from '@/assets/Icons/solid-x-circle.svg';
+
+import './QueryStatus.styles.scss';
+
+interface IQueryStatusProps {
+	loading: boolean;
+	error: boolean;
+	success: boolean;
+}
+
+export default function QueryStatus(
+	props: IQueryStatusProps,
+): React.ReactElement {
+	const { loading, error, success } = props;
+
+	const content = useMemo((): React.ReactElement => {
+		if (loading) {
+			return (
+				<Spin
+					spinning
+					size="small"
+					indicator={<LoaderCircle className="animate-spin" size="md" />}
+				/>
+			);
+		}
+		if (error) {
+			return (
+				<img
+					src={solidXCircleUrl}
+					alt="header"
+					className="error"
+					style={{ height: '14px', width: '14px' }}
+				/>
+			);
+		}
+		if (success) {
+			return (
+				<CircleCheck className="success" size={14} fill={Color.BG_ROBIN_500} />
+			);
+		}
+		return <div />;
+	}, [error, loading, success]);
+	return <div className="query-status">{content}</div>;
+}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -160,7 +160,7 @@ function LogsExplorerViewsContainer({
 		'custom',
 	);
 
-	const { data, isLoading, isFetching, isError, error } =
+	const { data, isLoading, isFetching, isError, isSuccess, error } =
 		useGetExplorerQueryRange(
 			requestData,
 			selectedPanelType,
@@ -437,6 +437,10 @@ function LogsExplorerViewsContainer({
 						handleToggleFrequencyChart={handleToggleFrequencyChart}
 						orderBy={orderBy}
 						setOrderBy={setOrderBy}
+						isFetching={isFetching}
+						isLoading={isLoading}
+						isError={isError}
+						isSuccess={isSuccess}
 					/>
 				)}
 

frontend/src/container/MCPServerSettings/MCPServerSettings.test.tsx

@@ -1,8 +1,8 @@
-import { logEventMock } from '__tests__/logEventMock';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import MCPServerSettings from './MCPServerSettings';
 
+const mockLogEvent = jest.fn();
 const mockCopyToClipboard = jest.fn();
 const mockHistoryPush = jest.fn();
 const mockUseGetGlobalConfig = jest.fn();
@@ -11,6 +11,11 @@ const mockUseGetTenantLicense = jest.fn();
 const mockToastSuccess = jest.fn();
 const mockToastWarning = jest.fn();
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
 jest.mock('api/generated/services/global', () => ({
 	useGetGlobalConfig: (...args: unknown[]): unknown =>
 		mockUseGetGlobalConfig(...args),
@@ -143,7 +148,7 @@ describe('MCPServerSettings', () => {
 
 		render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
 
-		expect(logEventMock).toHaveBeenCalledWith('MCP Settings: Page viewed', {
+		expect(mockLogEvent).toHaveBeenCalledWith('MCP Settings: Page viewed', {
 			role: 'ADMIN',
 		});
 	});

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -59,7 +59,7 @@ function AllAttributes({
 	);
 
 	const attributes = useMemo(
-		() => attributesData?.data?.attributes ?? [],
+		() => attributesData?.data.attributes ?? [],
 		[attributesData],
 	);
 

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -56,7 +56,7 @@ function MetricDetails({
 	);
 
 	const metadata = useMemo(() => {
-		if (!metricMetadataResponse?.data) {
+		if (!metricMetadataResponse) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

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

@@ -1,6 +1,5 @@
 import userEvent from '@testing-library/user-event';
 import MySettingsContainer from 'container/MySettings';
-import { logEventMock } from '__tests__/logEventMock';
 import {
 	act,
 	fireEvent,
@@ -13,6 +12,7 @@ import APIError from 'types/api/error';
 import { toast } from '@signozhq/ui/sonner';
 
 const toggleThemeFunction = jest.fn();
+const logEventFunction = jest.fn();
 const copyToClipboardFn = jest.fn();
 const editUserFn = jest.fn();
 const updateMyPasswordFn = jest.fn();
@@ -62,6 +62,11 @@ jest.mock('hooks/useDarkMode', () => ({
 	})),
 }));
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn((eventName, data) => logEventFunction(eventName, data)),
+}));
+
 const errorNotification = jest.fn();
 const successNotification = jest.fn();
 jest.mock('hooks/useNotifications', () => ({
@@ -130,7 +135,7 @@ describe('MySettings Flows', () => {
 
 			await waitFor(() => {
 				expect(toggleThemeFunction).toHaveBeenCalled();
-				expect(logEventMock).toHaveBeenCalledWith(
+				expect(logEventFunction).toHaveBeenCalledWith(
 					'Account Settings: Theme Changed',
 					{
 						theme: 'light',

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

@@ -28,8 +28,9 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import { UpdateTimeInterval } from 'store/actions';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 function WidgetGraph({
@@ -201,7 +202,10 @@ function WidgetGraph({
 
 interface WidgetGraphProps {
 	selectedWidget: Widgets;
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	enableDrillDown?: boolean;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/util.ts

@@ -1,12 +1,11 @@
-import { QueryRangeRequestV5 } from 'api/v5/v5';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Column, QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function populateMultipleResults(
-	responseData: SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5>,
-): SuccessResponse<MetricRangePayloadProps, QueryRangeRequestV5> {
+	responseData: SuccessResponse<MetricRangePayloadProps, unknown>,
+): SuccessResponse<MetricRangePayloadProps, unknown> {
 	const queryResults = responseData?.payload?.data?.newResult?.data?.result;
 	const allFormattedResults: QueryData[] = [];
 
@@ -67,19 +66,17 @@ export function populateMultipleResults(
 	}
 
 	// Create a copy instead of mutating the original
-	const updatedResponseData: SuccessResponse<
-		MetricRangePayloadProps,
-		QueryRangeRequestV5
-	> = {
-		...responseData,
-		payload: {
-			...responseData.payload,
-			data: {
-				...responseData.payload.data,
-				result: allFormattedResults,
+	const updatedResponseData: SuccessResponse<MetricRangePayloadProps, unknown> =
+		{
+			...responseData,
+			payload: {
+				...responseData.payload,
+				data: {
+					...responseData.payload.data,
+					result: allFormattedResults,
+				},
 			},
-		},
-	};
+		};
 
 	return updatedResponseData;
 }

frontend/src/container/NewWidget/index.tsx

@@ -52,6 +52,7 @@ import {
 	getSelectedWidgetIndex,
 } from 'providers/Dashboard/util';
 import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
 	ContextLinksData,
@@ -60,7 +61,7 @@ import {
 } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { IField } from 'types/api/logs/fields';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -397,7 +398,7 @@ function NewWidget({
 
 	// State to hold query response for sharing between left and right containers
 	const [queryResponse, setQueryResponse] = useState<
-		UseQueryResult<MetricQueryRangeSuccessResponse, Error>
+		UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
 	>(null as any);
 
 	// request data should be handled by the parent and the child components should consume the same

frontend/src/container/NewWidget/types.ts

@@ -2,8 +2,9 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { SuccessResponse, Warning } from 'types/api';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { timePreferance } from './RightContainer/timeItems';
 
@@ -28,7 +29,9 @@ export interface WidgetGraphProps {
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	isLoadingPanelData: boolean;
 	setQueryResponse?: Dispatch<
-		SetStateAction<UseQueryResult<MetricQueryRangeSuccessResponse, Error>>
+		SetStateAction<
+			UseQueryResult<SuccessResponse<MetricRangePayloadProps, unknown>, Error>
+		>
 	>;
 	enableDrillDown?: boolean;
 	dashboardData: Dashboard | undefined;
@@ -36,7 +39,12 @@ export interface WidgetGraphProps {
 }
 
 export type WidgetGraphContainerProps = {
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown> & {
+			warning?: Warning;
+		},
+		Error
+	>;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	selectedGraph: PANEL_TYPES;
 	selectedWidget: Widgets;

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/__tests__/InviteTeamMembers.test.tsx

@@ -9,6 +9,11 @@ import {
 
 import InviteTeamMembers from '../InviteTeamMembers';
 
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
 	(args: { message: string }) => void
 >;

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

@@ -4,6 +4,11 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import OnboardingQuestionaire from '../index';
 
 // Mock dependencies
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
 jest.mock('lib/history', () => ({
 	__esModule: true,
 	default: {

frontend/src/container/OptionsMenu/__test__/ensureLogsRequiredColumns.test.ts

@@ -67,23 +67,13 @@ describe('ensureLogsRequiredColumns', () => {
 		]);
 	});
 
-	it('collapses composite-key duplicates in the input', () => {
-		// Two identical `body` entries → deduped to one, then timestamp prepended.
+	it('does not duplicate if a required column appears twice in the input', () => {
+		// Tolerant of malformed input — invariant only adds *missing* required
+		// columns; it does not deduplicate existing entries (that's a separate
+		// concern, not its job).
 		const input = [BODY, BODY, ATTR_A];
 		const result = ensureLogsRequiredColumns(input);
-		expect(result).toStrictEqual([TIMESTAMP, BODY, ATTR_A]);
-		expect(result.filter((c) => c.name === 'body')).toHaveLength(1);
-	});
-
-	it('keeps same-name fields with different contexts as distinct columns', () => {
-		// Different composite keys → both legitimate, neither deduped.
-		const ATTR_BODY: TelemetryFieldKey = {
-			name: 'body',
-			signal: 'logs',
-			fieldContext: 'attribute',
-			fieldDataType: 'string',
-		};
-		const input = [TIMESTAMP, BODY, ATTR_BODY];
-		expect(ensureLogsRequiredColumns(input)).toStrictEqual(input);
+		expect(result.filter((c) => c.name === 'timestamp')).toHaveLength(1);
+		expect(result[0]).toStrictEqual(TIMESTAMP);
 	});
 });

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -232,159 +232,4 @@ describe('useOptionsMenu', () => {
 		expect(optionNames).toContain('level');
 		expect(optionNames).toContain('timestamp');
 	});
-
-	describe('reorderSelectColumns / handleRemoveSelectedColumn — composite ID lookup', () => {
-		const baseFormatting = {
-			format: 'table',
-			maxLines: 1,
-			fontSize: 'small',
-		};
-
-		// Two entries share the same `name` but differ in `fieldContext` — the
-		// exact case composite IDs are meant to disambiguate.
-		const seedColumns = [
-			{
-				name: 'body',
-				fieldContext: 'log',
-				fieldDataType: 'string',
-				signal: 'logs',
-			},
-			{
-				name: 'service.name',
-				fieldContext: 'resource',
-				fieldDataType: 'string',
-				signal: 'logs',
-			},
-			{
-				name: 'service.name',
-				fieldContext: 'attribute',
-				fieldDataType: 'string',
-				signal: 'logs',
-			},
-			{
-				name: 'timestamp',
-				fieldContext: 'log',
-				fieldDataType: '',
-				signal: 'logs',
-			},
-		];
-
-		beforeEach(() => {
-			(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-				data: { data: { data: { keys: {} } } },
-				isFetching: false,
-			});
-			(usePreferenceContext as jest.Mock).mockReturnValue({
-				traces: {
-					preferences: { columns: [], formatting: baseFormatting },
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-				logs: {
-					preferences: { columns: seedColumns, formatting: baseFormatting },
-					updateColumns: mockUpdateColumns,
-					updateFormatting: mockUpdateFormatting,
-				},
-			});
-		});
-
-		it('reorders by composite IDs — preserves both same-name variants distinctly', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
-			);
-
-			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
-			result.current.config.addColumn?.onReorder([
-				'attribute.service.name',
-				'log.body',
-				'resource.service.name',
-				'log.timestamp',
-			]);
-
-			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
-			const reordered = mockUpdateColumns.mock.calls[0][0];
-			expect(
-				reordered.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
-				),
-			).toStrictEqual([
-				'attribute.service.name',
-				'log.body',
-				'resource.service.name',
-				'log.timestamp',
-			]);
-		});
-
-		it('reorder ignores ids that are not columns (e.g. state-indicator) and skips unknown ids', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
-			);
-
-			result.current.config.addColumn?.onReorder([
-				'state-indicator',
-				'log.timestamp',
-				'unknown.composite',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
-			]);
-
-			const reordered = mockUpdateColumns.mock.calls[0][0];
-			// state-indicator + unknown.composite filtered; rest preserved in given order.
-			expect(
-				reordered.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
-				),
-			).toStrictEqual([
-				'log.timestamp',
-				'log.body',
-				'resource.service.name',
-				'attribute.service.name',
-			]);
-		});
-
-		it('removes only the variant whose composite ID matches', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
-			);
-
-			// Removing 'resource.service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource.service.name');
-
-			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
-			const remaining = mockUpdateColumns.mock.calls[0][0];
-			expect(
-				remaining.map(
-					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}.${c.name}`,
-				),
-			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
-		});
-
-		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {
-			const { result } = renderHook(() =>
-				useOptionsMenu({
-					dataSource: DataSource.LOGS,
-					aggregateOperator: 'count',
-				}),
-			);
-
-			result.current.config.addColumn?.onRemove('unknown.composite');
-
-			const remaining = mockUpdateColumns.mock.calls[0][0];
-			// No entries match → full list preserved.
-			expect(remaining).toHaveLength(seedColumns.length);
-		});
-	});
 });

frontend/src/container/OptionsMenu/constants.ts

@@ -2,7 +2,6 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { FontSize, OptionsQuery } from './types';
-import { buildCompositeKey } from './utils';
 
 export const URL_OPTIONS = 'options';
 
@@ -36,48 +35,22 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
-// Names that must always be present in logs selectColumns (writer invariant).
-const LOGS_REQUIRED_COLUMN_NAMES = defaultLogsSelectedColumns.map(
-	(c) => c.name,
-);
+const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
 
-// Composite keys (not bare names) so the picker locks ONLY the canonical
-// `log.body`/`log.timestamp` — a same-name variant like `attribute.body` stays
-// removable.
-export const LOGS_REQUIRED_COLUMNS = defaultLogsSelectedColumns.map((c) =>
-	buildCompositeKey(c.name, c.fieldContext),
-);
-
-// Drop composite-key duplicates (never legitimate — they only come from
-// corrupted state). Returns the same array reference when nothing to dedupe.
-export function dedupeColumnsByCompositeKey(
-	columns: TelemetryFieldKey[],
-): TelemetryFieldKey[] {
-	const seen = new Set<string>();
-	let hasDuplicate = false;
-	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext);
-		if (seen.has(key)) {
-			hasDuplicate = true;
-			return false;
-		}
-		seen.add(key);
-		return true;
-	});
-	return hasDuplicate ? deduped : columns;
-}
-
-// Logs selectColumns invariant: no composite-key duplicates, and body +
-// timestamp always present. Applied at loader + writer boundaries.
+/**
+ * Always-on invariant: every logs selectColumns array must contain `body` and
+ * `timestamp`. Applied at both loader and writer boundaries so the picker, the
+ * table, and persisted state can never diverge into a "missing required
+ * column" state.
+ */
 export function ensureLogsRequiredColumns(
 	columns: TelemetryFieldKey[],
 ): TelemetryFieldKey[] {
-	const deduped = dedupeColumnsByCompositeKey(columns);
-	const missing = LOGS_REQUIRED_COLUMN_NAMES.filter(
-		(name) => !deduped.some((c) => c.name === name),
+	const missing = LOGS_REQUIRED_COLUMNS.filter(
+		(name) => !columns.some((c) => c.name === name),
 	);
 	if (missing.length === 0) {
-		return deduped;
+		return columns;
 	}
 	const defaultsByName = new Map(
 		defaultLogsSelectedColumns.map((c) => [c.name, c]),
@@ -85,7 +58,7 @@ export function ensureLogsRequiredColumns(
 	const prepended = missing
 		.map((name) => defaultsByName.get(name))
 		.filter((c): c is TelemetryFieldKey => c !== undefined);
-	return [...prepended, ...deduped];
+	return [...prepended, ...columns];
 }
 
 export const defaultTraceSelectedColumns: TelemetryFieldKey[] = [

frontend/src/container/OptionsMenu/types.ts

@@ -42,8 +42,4 @@ export type OptionsMenuConfig = {
 		onRemove: (key: string) => void;
 		onReorder: (orderedIds: string[]) => void;
 	};
-	fieldsSelector?: {
-		value: TelemetryFieldKey[];
-		onFieldsChange: (next: TelemetryFieldKey[]) => void;
-	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -36,7 +36,7 @@ import {
 	OptionsMenuConfig,
 	OptionsQuery,
 } from './types';
-import { buildCompositeKey, getOptionsFromKeys } from './utils';
+import { getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
@@ -281,7 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
+				({ name }) => name !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -363,11 +363,9 @@ const useOptionsMenu = ({
 	const reorderSelectColumns = useCallback(
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
-			const byCompositeKey = new Map(
-				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
-			);
+			const byName = new Map(current.map((f) => [f.name, f]));
 			const reordered = orderedIds
-				.map((id) => byCompositeKey.get(id))
+				.map((id) => byName.get(id))
 				.filter((f): f is TelemetryFieldKey => f !== undefined);
 			updateColumns(reordered);
 		},
@@ -398,10 +396,6 @@ const useOptionsMenu = ({
 				onSearch: handleSearchAttribute,
 				onReorder: reorderSelectColumns,
 			},
-			fieldsSelector: {
-				value: preferences?.columns ?? [],
-				onFieldsChange: updateColumns,
-			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
 				onChange: handleFormatChange,
@@ -423,7 +417,6 @@ const useOptionsMenu = ({
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
 			reorderSelectColumns,
-			updateColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

frontend/src/container/OptionsMenu/utils.ts

@@ -14,9 +14,3 @@ export const getOptionsFromKeys = (
 		({ value }) => !selectedKeys.find((key) => key === value),
 	);
 };
-
-// Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
-// Falls back to bare name when context is missing.
-export const buildCompositeKey = (name: string, context?: string): string =>
-	context ? `${context}.${name}` : name;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -103,7 +103,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			domainToAdminEmail: domainToAdminEmail ?? {},
+			...(domainToAdminEmail && { domainToAdminEmail }),
 		};
 	}, [form]);
 
@@ -129,7 +129,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			groupMappings: groupMappings ?? {},
+			...(groupMappings && { groupMappings }),
 		};
 	}, [form]);
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.utils.test.ts

@@ -1,144 +0,0 @@
-import { AuthtypesAuthNProviderDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	convertDomainMappingsToList,
-	convertDomainMappingsToRecord,
-	convertGroupMappingsToList,
-	convertGroupMappingsToRecord,
-	prepareInitialValues,
-} from './CreateEdit.utils';
-
-describe('convertGroupMappingsToRecord', () => {
-	it('returns undefined for an empty list', () => {
-		expect(convertGroupMappingsToRecord([])).toBeUndefined();
-	});
-
-	it('returns undefined when input is undefined', () => {
-		expect(convertGroupMappingsToRecord(undefined)).toBeUndefined();
-	});
-
-	it('converts entries to a Record', () => {
-		expect(
-			convertGroupMappingsToRecord([
-				{ groupName: 'admins', role: 'ADMIN' },
-				{ groupName: 'viewers', role: 'VIEWER' },
-			]),
-		).toStrictEqual({ admins: 'ADMIN', viewers: 'VIEWER' });
-	});
-
-	it('skips entries with missing groupName or role', () => {
-		expect(
-			convertGroupMappingsToRecord([
-				{ groupName: 'admins', role: 'ADMIN' },
-				{ groupName: '', role: 'VIEWER' },
-				{ role: 'EDITOR' },
-			]),
-		).toStrictEqual({ admins: 'ADMIN' });
-	});
-});
-
-describe('convertDomainMappingsToRecord', () => {
-	it('returns undefined for an empty list', () => {
-		expect(convertDomainMappingsToRecord([])).toBeUndefined();
-	});
-
-	it('returns undefined when input is undefined', () => {
-		expect(convertDomainMappingsToRecord(undefined)).toBeUndefined();
-	});
-
-	it('converts entries to a Record', () => {
-		expect(
-			convertDomainMappingsToRecord([
-				{ domain: 'example.com', adminEmail: 'admin@example.com' },
-				{ domain: 'corp.io', adminEmail: 'it@corp.io' },
-			]),
-		).toStrictEqual({
-			'example.com': 'admin@example.com',
-			'corp.io': 'it@corp.io',
-		});
-	});
-});
-
-describe('round-trip fidelity', () => {
-	it('Record → list → Record preserves group mappings', () => {
-		const original = { admins: 'ADMIN', devs: 'EDITOR', viewers: 'VIEWER' };
-		expect(
-			convertGroupMappingsToRecord(convertGroupMappingsToList(original)),
-		).toStrictEqual(original);
-	});
-
-	it('Record → list → Record preserves domain mappings', () => {
-		const original = {
-			'example.com': 'admin@example.com',
-			'corp.io': 'it@corp.io',
-		};
-		expect(
-			convertDomainMappingsToRecord(convertDomainMappingsToList(original)),
-		).toStrictEqual(original);
-	});
-});
-
-describe('prepareInitialValues', () => {
-	it('returns empty defaults when no record is provided', () => {
-		expect(prepareInitialValues(undefined)).toStrictEqual({
-			name: '',
-			ssoEnabled: false,
-			ssoType: '',
-		});
-	});
-
-	it('hydrates groupMappings Record into groupMappingsList for the form', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.saml,
-				roleMapping: {
-					defaultRole: 'VIEWER',
-					useRoleAttribute: false,
-					groupMappings: { admins: 'ADMIN', viewers: 'VIEWER' },
-				},
-			},
-		});
-
-		expect(result.roleMapping?.groupMappingsList).toStrictEqual([
-			{ groupName: 'admins', role: 'ADMIN' },
-			{ groupName: 'viewers', role: 'VIEWER' },
-		]);
-	});
-
-	it('hydrates domainToAdminEmail Record into domainToAdminEmailList for the form', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.google_auth,
-				googleAuthConfig: {
-					clientId: 'id',
-					clientSecret: 'secret',
-					domainToAdminEmail: { 'example.com': 'admin@example.com' },
-				},
-			},
-		});
-
-		expect(result.googleAuthConfig?.domainToAdminEmailList).toStrictEqual([
-			{ domain: 'example.com', adminEmail: 'admin@example.com' },
-		]);
-	});
-
-	it('sets groupMappingsList to empty array when roleMapping has no groupMappings', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.oidc,
-				roleMapping: { defaultRole: 'VIEWER', useRoleAttribute: true },
-			},
-		});
-
-		expect(result.roleMapping?.groupMappingsList).toStrictEqual([]);
-	});
-});