chore: move flamegraph after aggregation to reduce diff

It's a new api so doesn't need to be backward compatible

.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

@@ -440,6 +440,17 @@ tracedetail:
     max_depth_to_auto_expand: 5
     # Threshold below which all spans are returned without windowing.
     max_limit_to_select_all_spans: 10000
+  flamegraph:
+    # Maximum number of BFS depth levels included in a windowed response.
+    max_selected_levels: 50
+    # Maximum spans per level before sampling is applied.
+    max_spans_per_level: 100
+    # Number of highest-latency spans always included when sampling a level.
+    sampling_top_latency_count: 5
+    # Number of timestamp buckets used for uniform sampling within a level.
+    sampling_bucket_count: 50
+    # Threshold below which all spans are returned without windowing or sampling.
+    select_all_spans_limit: 100000
 
 ##################### Authz #################################
 authz:

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

@@ -6516,6 +6516,58 @@ components:
       - attribute
       - resource
       type: string
+    SpantypesFlamegraphSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        durationNano:
+          minimum: 0
+          type: integer
+        event:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          nullable: true
+          type: array
+        hasError:
+          type: boolean
+        level:
+          format: int64
+          type: integer
+        name:
+          type: string
+        parentSpanId:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        serviceName:
+          type: string
+        spanId:
+          type: string
+        timestamp:
+          minimum: 0
+          type: integer
+      type: object
+    SpantypesGettableFlamegraphTrace:
+      properties:
+        endTimestampMillis:
+          format: int64
+          type: integer
+        hasMore:
+          type: boolean
+        spans:
+          items:
+            items:
+              $ref: '#/components/schemas/SpantypesFlamegraphSpan'
+            type: array
+          nullable: true
+          type: array
+        startTimestampMillis:
+          format: int64
+          type: integer
+      type: object
     SpantypesGettableSpanMapperGroups:
       properties:
         items:
@@ -6581,6 +6633,15 @@ components:
         traceId:
           type: string
       type: object
+    SpantypesPostableFlamegraph:
+      properties:
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          type: array
+        selectedSpanId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -20027,6 +20088,75 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/traces/{traceID}/flamegraph:
+    post:
+      deprecated: false
+      description: Returns the flamegraph view of spans for a given trace ID.
+      operationId: GetFlamegraph
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableFlamegraph'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableFlamegraphTrace'
+                  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:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get flamegraph view for a trace
+      tags:
+      - tracedetail
   /api/v3/traces/{traceID}/waterfall:
     post:
       deprecated: false

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

@@ -7675,6 +7675,81 @@ export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
 }
+export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesFlamegraphSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes?: SpantypesFlamegraphSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	durationNano?: number;
+	/**
+	 * @type array,null
+	 */
+	event?: SpantypesEventDTO[] | null;
+	/**
+	 * @type boolean
+	 */
+	hasError?: boolean;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parentSpanId?: string;
+	/**
+	 * @type object
+	 */
+	resource?: SpantypesFlamegraphSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	serviceName?: string;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timestamp?: number;
+}
+
+export interface SpantypesGettableFlamegraphTraceDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	endTimestampMillis?: number;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesFlamegraphSpanDTO[][] | null;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	startTimestampMillis?: number;
+}
+
 export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
@@ -7976,6 +8051,17 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
+export interface SpantypesPostableFlamegraphDTO {
+	/**
+	 * @type array
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -10277,6 +10363,17 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetFlamegraphPathParameters = {
+	traceID: string;
+};
+export type GetFlamegraph200 = {
+	data: SpantypesGettableFlamegraphTraceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetWaterfallPathParameters = {
 	traceID: string;
 };

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

@@ -12,6 +12,8 @@ import type {
 } from 'react-query';
 
 import type {
+	GetFlamegraph200,
+	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
@@ -19,6 +21,7 @@ import type {
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableFlamegraphDTO,
 	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
@@ -126,6 +129,105 @@ export const useGetTraceAggregations = <
 > => {
 	return useMutation(getGetTraceAggregationsMutationOptions(options));
 };
+/**
+ * Returns the flamegraph view of spans for a given trace ID.
+ * @summary Get flamegraph view for a trace
+ */
+export const getFlamegraph = (
+	{ traceID }: GetFlamegraphPathParameters,
+	spantypesPostableFlamegraphDTO?: BodyType<SpantypesPostableFlamegraphDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetFlamegraph200>({
+		url: `/api/v3/traces/${traceID}/flamegraph`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableFlamegraphDTO,
+		signal,
+	});
+};
+
+export const getGetFlamegraphMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getFlamegraph'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getFlamegraph(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetFlamegraphMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getFlamegraph>>
+>;
+export type GetFlamegraphMutationBody =
+	| BodyType<SpantypesPostableFlamegraphDTO>
+	| undefined;
+export type GetFlamegraphMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get flamegraph view for a trace
+ */
+export const useGetFlamegraph = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getFlamegraph>>,
+		TError,
+		{
+			pathParams: GetFlamegraphPathParameters;
+			data?: BodyType<SpantypesPostableFlamegraphDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getFlamegraph>>,
+	TError,
+	{
+		pathParams: GetFlamegraphPathParameters;
+		data?: BodyType<SpantypesPostableFlamegraphDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetFlamegraphMutationOptions(options));
+};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

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/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/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/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/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/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/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/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/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/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/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/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([]);
-	});
-});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.payload.test.tsx

@@ -1,169 +0,0 @@
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { rest, server } from 'mocks-server/server';
-
-import CreateEdit from '../CreateEdit/CreateEdit';
-import {
-	AUTH_DOMAINS_UPDATE_ENDPOINT,
-	mockDomainWithRoleMapping,
-	mockGoogleAuthWithWorkspaceGroups,
-	mockUpdateSuccessResponse,
-} from './mocks';
-
-// The real @signozhq/ui/button has internal effects that prevent form.validateFields()
-// from resolving inside act(). Mirror the pattern from SSOEnforcementToggle.test.tsx
-// which mocks @signozhq/ui/switch for the same reason.
-jest.mock('@signozhq/ui/button', () => ({
-	...jest.requireActual('@signozhq/ui/button'),
-	Button: ({
-		children,
-		onClick,
-		loading,
-		disabled,
-		'aria-label': ariaLabel,
-		prefix,
-		suffix,
-	}: {
-		children?: React.ReactNode;
-		onClick?: React.MouseEventHandler<HTMLButtonElement>;
-		loading?: boolean;
-		disabled?: boolean;
-		'aria-label'?: string;
-		prefix?: React.ReactNode;
-		suffix?: React.ReactNode;
-	}) => (
-		<button
-			type="button"
-			onClick={onClick}
-			disabled={disabled || loading}
-			aria-label={ariaLabel}
-		>
-			{prefix}
-			{children}
-			{suffix}
-		</button>
-	),
-}));
-
-describe('CreateEdit — save payload correctness', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('sends groupMappings: {} when all group mappings are deleted', async () => {
-		let capturedPayload: unknown = null;
-
-		server.use(
-			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-			}),
-		);
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockDomainWithRoleMapping}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		// Open the Role Mapping collapse (Ant Design Collapse responds to click events)
-		fireEvent.click(screen.getByText(/role mapping \(advanced\)/i));
-
-		// Wait for the 3 group mapping rows to appear
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(3),
-		);
-
-		// Delete each row; re-query after each removal
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(2),
-		);
-
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(1),
-		);
-
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.queryAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(0),
-		);
-
-		// Submit — MSW intercepts the PUT request
-		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-
-		await waitFor(() => expect(capturedPayload).not.toBeNull());
-
-		expect(capturedPayload).toMatchObject({
-			config: expect.objectContaining({
-				roleMapping: expect.objectContaining({ groupMappings: {} }),
-			}),
-		});
-	});
-
-	it('sends domainToAdminEmail: {} when all domain mappings are deleted', async () => {
-		let capturedPayload: unknown = null;
-
-		server.use(
-			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-			}),
-		);
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockGoogleAuthWithWorkspaceGroups}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		// Open the Google Workspace Groups collapse
-		fireEvent.click(screen.getByText(/google workspace groups/i));
-
-		// Wait for the single domain mapping row
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /remove mapping/i }),
-			).toBeInTheDocument(),
-		);
-
-		// Delete the row
-		fireEvent.click(screen.getByRole('button', { name: /remove mapping/i }));
-		await waitFor(() =>
-			expect(
-				screen.queryAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(0),
-		);
-
-		// Submit
-		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-
-		await waitFor(() => expect(capturedPayload).not.toBeNull());
-
-		expect(capturedPayload).toMatchObject({
-			config: expect.objectContaining({
-				googleAuthConfig: expect.objectContaining({
-					domainToAdminEmail: {},
-				}),
-			}),
-		});
-	});
-});

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -1,6 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import GridTableComponent from 'container/GridTableComponent';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
+import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
 import { PanelWrapperProps } from './panelWrapper.types';
 
@@ -19,7 +20,7 @@ function TablePanelWrapper({
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
 	const { thresholds } = widget;
 
-	const queryRangeRequest = queryResponse.data?.params;
+	const queryRangeRequest = queryResponse.data?.params as QueryRangeRequestV5;
 
 	return (
 		<GridTableComponent

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -72,20 +72,8 @@
 	.alert-rule-scope {
 		margin-bottom: 12px;
 
-		// `.createForm label` styles field labels (font-weight 500, 14px,
-		// 6px bottom padding). Those bleed into the @signozhq/ui RadioGroup
-		// option labels, making them bold and vertically misaligned with the
-		// radio control. Reset them back to plain option-text styling.
-		label {
-			padding: 0;
-			font-weight: 400;
-			line-height: normal;
-		}
-
-		// Loosen the design-system default (grid gap 0.5rem) between options.
-		.silence-alerts-radio-group {
-			margin-top: 8px;
-			gap: 12px;
+		.ant-radio-wrapper {
+			color: var(--l1-foreground);
 		}
 	}
 
@@ -156,7 +144,10 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-			margin-top: 12px;
+
+			.ant-btn {
+				margin-top: 8px;
+			}
 		}
 
 		.schedule-created-at {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -54,7 +54,8 @@ import {
 } from './PlannedDowntimeutils';
 
 import './PlannedDowntime.styles.scss';
-import { RadioGroupItem, RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroupItem } from '@signozhq/ui/radio-group';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 
 dayjs.locale('en');
 dayjs.extend(utc);
@@ -470,7 +471,7 @@ export function PlannedDowntimeForm(
 						initialValue="specific"
 						className="alert-rule-scope"
 					>
-						<RadioGroup className="silence-alerts-radio-group">
+						<RadioGroup>
 							<RadioGroupItem value="all">All alert rules</RadioGroupItem>
 							<RadioGroupItem value="specific">Specific alert rules</RadioGroupItem>
 						</RadioGroup>

frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx

@@ -2,8 +2,9 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import useDashboardVarConfig from 'container/QueryTable/Drilldown/useDashboardVarConfig';
+import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -43,7 +44,10 @@ const useAggregateDrilldown = ({
 	aggregateData: AggregateData | null;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryRange?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 }): {
 	aggregateDrilldownConfig: {
 		header?: string | React.ReactNode;

frontend/src/container/QueryTable/Drilldown/useGraphContextMenu.tsx

@@ -2,8 +2,9 @@ import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { SuccessResponse } from 'types/api';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { isValidQueryName } from './drilldownUtils';
@@ -19,7 +20,10 @@ interface UseGraphContextMenuProps {
 	setSubMenu: (subMenu: string) => void;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;
-	queryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryRange?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 }
 
 export function useGraphContextMenu({

frontend/src/container/ResetPassword/ResetPassword.styles.scss

@@ -21,10 +21,6 @@
 			justify-content: center;
 			margin-bottom: 8px;
 			color: var(--semantic-primary-foreground);
-
-			&--error {
-				color: var(--destructive);
-			}
 		}
 
 		.reset-password-header-title {

frontend/src/container/ResetPassword/TokenError.tsx

@@ -1,67 +0,0 @@
-import { CircleAlert } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-import AuthError from 'components/AuthError/AuthError';
-import AuthPageContainer from 'components/AuthPageContainer';
-import APIError from 'types/api/error';
-
-import './ResetPassword.styles.scss';
-
-interface TokenErrorContent {
-	title: string;
-	subtitle: string;
-}
-
-function getErrorContent(error?: APIError): TokenErrorContent {
-	const code = error?.getErrorCode();
-
-	if (code === 'reset_password_token_expired') {
-		return {
-			title: 'Reset Password token is expired',
-			subtitle:
-				'Password reset links are single-use and expire after a set period. Please request a new password reset link.',
-		};
-	}
-
-	if (code === 'reset_password_token_not_found') {
-		return {
-			title: 'Invalid Reset Link',
-			subtitle:
-				'This reset password link is invalid or has already been used. Please request a new password reset link.',
-		};
-	}
-
-	return {
-		title: 'Reset Link Unavailable',
-		subtitle:
-			'We could not validate your reset password link. Please request a new one.',
-	};
-}
-
-interface TokenErrorProps {
-	error?: APIError;
-}
-
-function TokenError({ error }: TokenErrorProps): JSX.Element {
-	const { title, subtitle } = getErrorContent(error);
-
-	return (
-		<AuthPageContainer>
-			<div className="reset-password-card reset-password-card--centered">
-				<div className="reset-password-header">
-					<div className="reset-password-header-icon reset-password-header-icon--error">
-						<CircleAlert size={32} />
-					</div>
-					<Typography.Title level={4} className="reset-password-header-title">
-						{title}
-					</Typography.Title>
-					<Typography.Text className="reset-password-header-subtitle">
-						{subtitle}
-					</Typography.Text>
-				</div>
-				{error && <AuthError error={error} />}
-			</div>
-		</AuthPageContainer>
-	);
-}
-
-export default TokenError;

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

@@ -1,3 +1,4 @@
+import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { rest, server } from 'mocks-server/server';
@@ -16,6 +17,10 @@ jest.mock('lib/history', () => ({
 	},
 }));
 
+jest.mock('api/utils', () => ({
+	Logout: jest.fn(),
+}));
+
 const mockSuccessNotification = jest.fn();
 const mockErrorNotification = jest.fn();
 
@@ -65,6 +70,17 @@ describe('ResetPassword Component', () => {
 			).toBeInTheDocument();
 			expect(screen.getByText(/signoz 1\.0\.0/i)).toBeInTheDocument();
 		});
+
+		it('redirects to login when token is missing', () => {
+			window.history.pushState({}, '', '/password-reset');
+
+			render(<ResetPassword version="1.0.0" />, undefined, {
+				initialRoute: '/password-reset',
+			});
+
+			expect(Logout).toHaveBeenCalled();
+			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
+		});
 	});
 
 	describe('Form Validation', () => {

frontend/src/container/ResetPassword/index.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { Form, Input as AntdInput } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Logout } from 'api/utils';
 import resetPasswordApi from 'api/v1/factor_password/resetPassword';
 import AuthError from 'components/AuthError/AuthError';
 import AuthPageContainer from 'components/AuthPageContainer';
@@ -37,6 +38,13 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const { notifications } = useNotifications();
 
 	const [form] = Form.useForm<FormValues>();
+	useEffect(() => {
+		if (!token) {
+			Logout();
+			history.push(ROUTES.LOGIN);
+		}
+	}, [token]);
+
 	const handleFormSubmit: () => Promise<void> = async () => {
 		try {
 			setLoading(true);

frontend/src/container/RoutingPolicies/styles.scss

@@ -35,7 +35,10 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-			margin-top: 12px;
+
+			.ant-btn {
+				margin-top: 8px;
+			}
 		}
 
 		.routing-policies-table {

frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss

@@ -8,7 +8,7 @@
 			139deg,
 			color-mix(in srgb, var(--card) 80%, transparent) 0%,
 			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		) !important;
+		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0;
@@ -34,9 +34,9 @@
 }
 
 .refresh-interval-text {
-	padding: 12px 14px 8px 14px !important;
+	padding: 12px 14px 8px 14px;
 	color: var(--muted-foreground);
-	font-size: 13px;
+	font-size: 11px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: 18px; /* 163.636% */

frontend/src/container/TracesExplorer/Controls/Controls.module.scss

@@ -1,14 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-}
-
-.optionsTrigger {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	cursor: pointer;
-}

frontend/src/container/TracesExplorer/Controls/index.tsx

@@ -1,13 +1,11 @@
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Settings } from '@signozhq/icons';
-import FieldsSelector from 'components/FieldsSelector';
+import { memo } from 'react';
+import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import Controls, { ControlsProps } from 'container/Controls';
+import OptionsMenu from 'container/OptionsMenu';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
-import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './Controls.module.scss';
+import { Container } from './styles';
 
 function TraceExplorerControls({
 	isLoading,
@@ -16,9 +14,6 @@ function TraceExplorerControls({
 	config,
 	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
-	const { t } = useTranslation(['trace']);
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
 	const {
 		pagination,
 		handleCountItemsPerPageChange,
@@ -27,25 +22,12 @@ function TraceExplorerControls({
 	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
-		<div className={styles.container}>
-			{config?.fieldsSelector && (
-				<>
-					<div
-						className={styles.optionsTrigger}
-						onClick={(): void => setIsFieldsSelectorOpen(true)}
-					>
-						{t('options_menu.options')}
-						<Settings size="md" />
-					</div>
-					<FieldsSelector
-						isOpen={isFieldsSelectorOpen}
-						title="Edit columns"
-						fields={config.fieldsSelector.value}
-						onFieldsChange={config.fieldsSelector.onFieldsChange}
-						onClose={(): void => setIsFieldsSelectorOpen(false)}
-						signal={DataSource.TRACES}
-					/>
-				</>
+		<Container>
+			{config && (
+				<OptionsMenu
+					selectedOptionFormat={OptionFormatTypes.LIST} // Defaulting it to List view as options are shown only in the List view tab
+					config={{ addColumn: config?.addColumn }}
+				/>
 			)}
 
 			<Controls
@@ -59,7 +41,7 @@ function TraceExplorerControls({
 				handleNavigatePrevious={handleNavigatePrevious}
 				showSizeChanger={showSizeChanger}
 			/>
-		</div>
+		</Container>
 	);
 }
 

frontend/src/container/TracesExplorer/Controls/styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.3rem;
+	margin: 8px 0;
+`;

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -207,9 +207,8 @@ function ListView({
 			const reordered = [...columns];
 			const [moved] = reordered.splice(fromIndex, 1);
 			reordered.splice(toIndex, 0, moved);
-			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
 			const orderedIds = reordered
-				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
+				.map((c) => String(('dataIndex' in c && c.dataIndex) || c.key || ''))
 				.filter(Boolean);
 			config?.addColumn?.onReorder(orderedIds);
 		},

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -5,7 +5,6 @@ import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
@@ -84,11 +83,12 @@ export const getListColumns = (
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map((props) => {
 			const name = props?.name || (props as any)?.key;
+			const fieldDataType = props?.fieldDataType || (props as any)?.dataType;
 			const fieldContext = props?.fieldContext || (props as any)?.type;
 			return {
 				title: name,
 				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
+				key: `${name}-${fieldDataType}-${fieldContext}`,
 				width: 145,
 				render: (value, item): JSX.Element => {
 					if (value === '') {

frontend/src/hooks/queryBuilder/useGetExplorerQueryRange.ts

@@ -7,7 +7,8 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { AppState } from 'store/reducers';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { SuccessResponse, Warning } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -18,13 +19,16 @@ export const useGetExplorerQueryRange = (
 	requestData: Query | null,
 	panelType: PANEL_TYPES | null,
 	version: string,
-	options?: UseQueryOptions<MetricQueryRangeSuccessResponse, Error>,
+	options?: UseQueryOptions<SuccessResponse<MetricRangePayloadProps>, Error>,
 	params?: Record<string, unknown>,
 	isDependentOnQB = true,
 	keyRef?: MutableRefObject<any>,
 	headers?: Record<string, string>,
 	selectedTimeInterval?: GetQueryResultsProps['globalSelectedInterval'],
-): UseQueryResult<MetricQueryRangeSuccessResponse, Error> => {
+): UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
+	Error
+> => {
 	const { isEnabledQuery } = useQueryBuilder();
 	const {
 		selectedTime: globalSelectedInterval,

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -9,7 +9,7 @@
 	}
 
 	.ant-tabs-nav {
-		padding-left: 16px;
+		padding: 0 8px;
 		margin-bottom: 0px;
 
 		&::before {

frontend/src/pages/ResetPassword/__tests__/ResetPasswordPage.test.tsx

@@ -1,155 +0,0 @@
-import { Logout } from 'api/utils';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { createErrorResponse, rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import ResetPassword from '../index';
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: { search: '' },
-	},
-}));
-
-jest.mock('api/utils', () => ({
-	Logout: jest.fn().mockResolvedValue(undefined),
-}));
-
-const VERIFY_TOKEN_ENDPOINT = '*/api/v2/reset_password_tokens/verify';
-const VERSION_ENDPOINT = '*/version';
-
-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
-
-const successVerifyResponse = {
-	data: { id: 'token-id', token: 'valid-token' },
-};
-
-const successVersionResponse = {
-	version: '0.0.1',
-	ee: 'Y',
-	setupCompleted: true,
-};
-
-describe('ResetPassword Page', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		server.use(
-			rest.get(VERSION_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(successVersionResponse)),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Token validation on page load', () => {
-		it('shows spinner then form when token is valid', async () => {
-			server.use(
-				rest.post(VERIFY_TOKEN_ENDPOINT, (_, res, ctx) =>
-					res(ctx.delay(50), ctx.status(200), ctx.json(successVerifyResponse)),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=valid-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=valid-token',
-			});
-
-			// Loading state: spinner visible, form and error absent
-			expect(screen.getByRole('img', { name: /loading/i })).toBeInTheDocument();
-			expect(screen.queryByTestId('password')).not.toBeInTheDocument();
-			expect(
-				screen.queryByText(/reset password token is expired/i),
-			).not.toBeInTheDocument();
-
-			// After verification resolves: form is shown
-			await waitFor(() => {
-				expect(screen.getByTestId('password')).toBeInTheDocument();
-			});
-			expect(screen.getByTestId('confirmPassword')).toBeInTheDocument();
-		});
-
-		it('shows "Invalid Reset Link" when token is not found (404)', async () => {
-			server.use(
-				rest.post(
-					VERIFY_TOKEN_ENDPOINT,
-					createErrorResponse(
-						404,
-						'reset_password_token_not_found',
-						'reset password token does not exist',
-					),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=invalid-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=invalid-token',
-			});
-
-			await waitFor(() => {
-				expect(screen.getByText(/invalid reset link/i)).toBeInTheDocument();
-			});
-
-			expect(
-				screen.getByText(/invalid or has already been used/i),
-			).toBeInTheDocument();
-			expect(
-				screen.getByText(/reset password token does not exist/i),
-			).toBeInTheDocument();
-		});
-
-		it('shows "token is expired" when token is expired (401) without redirecting to login', async () => {
-			server.use(
-				rest.post(
-					VERIFY_TOKEN_ENDPOINT,
-					createErrorResponse(
-						401,
-						'reset_password_token_expired',
-						'reset password token has expired',
-					),
-				),
-			);
-
-			window.history.pushState({}, '', '/password-reset?token=expired-token');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset?token=expired-token',
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.getByText(/reset password token is expired/i),
-				).toBeInTheDocument();
-			});
-
-			expect(
-				screen.getByText(/single-use and expire after a set period/i),
-			).toBeInTheDocument();
-			expect(
-				screen.getByText(/reset password token has expired/i),
-			).toBeInTheDocument();
-			// 401 from this endpoint must NOT trigger logout/redirect
-			expect(mockHistoryPush).not.toHaveBeenCalledWith(ROUTES.LOGIN);
-			expect(Logout).not.toHaveBeenCalled();
-		});
-
-		it('redirects to login when no token is in the URL', async () => {
-			window.history.pushState({}, '', '/password-reset');
-			render(<ResetPassword />, undefined, {
-				initialRoute: '/password-reset',
-			});
-
-			await waitFor(() => {
-				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-			});
-
-			expect(Logout).toHaveBeenCalled();
-		});
-	});
-});

frontend/src/pages/ResetPassword/index.tsx

@@ -1,17 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useQuery } from 'react-query';
-import { useLocation } from 'react-use';
-import { AxiosError } from 'axios';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import getUserVersion from 'api/v1/version/get';
-import { verifyResetPasswordToken } from 'api/generated/services/users';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
 import ResetPasswordContainer from 'container/ResetPassword';
-import TokenError from 'container/ResetPassword/TokenError';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
@@ -19,65 +10,24 @@ import APIError from 'types/api/error';
 function ResetPassword(): JSX.Element {
 	const { user, isLoggedIn } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const { search } = useLocation();
-	const params = new URLSearchParams(search || '');
-	const token = params.get('token') || '';
 
-	useEffect(() => {
-		if (!token) {
-			void Logout();
-			history.push(ROUTES.LOGIN);
-		}
-	}, [token]);
-
-	const {
-		data: versionData,
-		isLoading: isVersionLoading,
-		error: versionError,
-	} = useQuery({
+	const { data, isLoading, error } = useQuery({
 		queryFn: getUserVersion,
 		queryKey: ['getUserVersion', user?.accessJwt],
 		enabled: !isLoggedIn,
 	});
 
-	const {
-		isLoading: isVerifying,
-		isError: isTokenError,
-		error: tokenError,
-	} = useQuery<
-		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
-		AxiosError<RenderErrorResponseDTO>
-	>({
-		queryFn: () => verifyResetPasswordToken({ token }),
-		queryKey: ['verifyResetPasswordToken', token],
-		enabled: !!token,
-		retry: false,
-	});
-
-	const tokenApiError = useMemo(
-		() => convertToApiError(tokenError),
-		[tokenError],
-	);
-
 	useEffect(() => {
-		if (versionError) {
-			showErrorModal(versionError as APIError);
+		if (error) {
+			showErrorModal(error as APIError);
 		}
-	}, [versionError, showErrorModal]);
+	}, [error, showErrorModal]);
 
-	if (!token) {
+	if (isLoading) {
 		return <Spinner tip="Loading..." />;
 	}
 
-	if (isVersionLoading || isVerifying) {
-		return <Spinner tip="Validating your reset password token..." />;
-	}
-
-	if (isTokenError) {
-		return <TokenError error={tokenApiError} />;
-	}
-
-	return <ResetPasswordContainer version={versionData?.data.version || ''} />;
+	return <ResetPasswordContainer version={data?.data.version || ''} />;
 }
 
 export default ResetPassword;

frontend/src/types/api/metrics/getQueryRange.ts

@@ -8,7 +8,7 @@ import {
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
-import { ExecStats, QueryRangeRequestV5 } from '../v5/queryRange';
+import { ExecStats } from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -39,16 +39,11 @@ export interface MetricRangePayloadProps {
 	meta?: ExecStats;
 }
 
-/** Query range success response. `params` is the request that produced the
- *  payload; `warning` and `meta` are lifted from the payload to the top level
- *  by `getQueryResults.ts` for consumer convenience. */
-export interface MetricQueryRangeSuccessResponse extends SuccessResponse<
+/** Query range success response including optional warning and meta */
+export type MetricQueryRangeSuccessResponse = SuccessResponse<
 	MetricRangePayloadProps,
-	QueryRangeRequestV5
-> {
-	warning?: Warning;
-	meta?: ExecStats;
-}
+	unknown
+> & { warning?: Warning; meta?: ExecStats };
 
 export interface MetricRangePayloadV3 {
 	data: {

frontend/src/utils/__tests__/queryContextUtils.test.ts

@@ -3,7 +3,6 @@ import {
 	extractQueryPairs,
 	getCurrentQueryPair,
 	getCurrentValueIndexAtCursor,
-	getQueryContextAtCursor,
 } from '../queryContextUtils';
 
 describe('extractQueryPairs', () => {
@@ -609,42 +608,3 @@ describe('getCurrentQueryPair', () => {
 		expect(result).toStrictEqual(queryPairs[0]);
 	});
 });
-
-describe('getQueryContextAtCursor - trailing dot in key/value', () => {
-	// A token ending with "." (e.g. "service.") is lexed as FREETEXT rather than
-	// KEY, which previously collapsed the context to "nothing" and made the
-	// suggestion dropdown render empty (appearing closed). These cases lock in
-	// that a partial key/value still resolves to the correct context.
-	it('keeps key context while typing a key that ends with a dot', () => {
-		['service.', 'k8s.', 'attribute.', 'k8s.pod.'].forEach((q) => {
-			const ctx = getQueryContextAtCursor(q, q.length);
-			expect(ctx.isInKey).toBe(true);
-			expect(ctx.isInValue).toBe(false);
-			expect(ctx.isInOperator).toBe(false);
-			expect(ctx.keyToken).toBe(q);
-		});
-	});
-
-	it('treats a new key after a conjunction as key context', () => {
-		const q = 'a = b AND k8s.';
-		const ctx = getQueryContextAtCursor(q, q.length);
-		expect(ctx.isInKey).toBe(true);
-		expect(ctx.isInValue).toBe(false);
-	});
-
-	it('keeps value context while typing a value that ends with a dot', () => {
-		const q = 'service.name = foo.';
-		const ctx = getQueryContextAtCursor(q, q.length);
-		expect(ctx.isInValue).toBe(true);
-		expect(ctx.isInKey).toBe(false);
-		expect(ctx.keyToken).toBe('service.name');
-		expect(ctx.operatorToken).toBe('=');
-	});
-
-	it('still resolves a complete dotted key to key context', () => {
-		const q = 'k8s.namespace';
-		const ctx = getQueryContextAtCursor(q, q.length);
-		expect(ctx.isInKey).toBe(true);
-		expect(ctx.keyToken).toBe('k8s.namespace');
-	});
-});

frontend/src/utils/getTimeRange.ts

@@ -1,7 +1,8 @@
 import { UseQueryResult } from 'react-query';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import store from 'store';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
 
 export const getTimeRangeFromQueryRangeRequest = (
@@ -27,9 +28,13 @@ export const getTimeRangeFromQueryRangeRequest = (
 };
 
 export const getTimeRange = (
-	widgetQueryRange?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>,
+	widgetQueryRange?: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>,
 ): Record<string, number> => {
-	const widgetParams = widgetQueryRange?.data?.params;
+	const widgetParams =
+		(widgetQueryRange?.data?.params as QueryRangeRequestV5) || null;
 
 	return getTimeRangeFromQueryRangeRequest(widgetParams);
 };

frontend/src/utils/queryContextUtils.ts

@@ -766,58 +766,6 @@ export function getQueryContextAtCursor(
 			}
 		}
 
-		// A token that ends with a '.' (e.g. "service." or "k8s.pod.") is lexed as
-		// FREETEXT, not KEY, because the KEY rule requires a character after the dot.
-		// While the user is mid-typing such a key/value the token stays FREETEXT, which
-		// is otherwise unclassified and would collapse the context to "nothing" — making
-		// the suggestion dropdown render empty (and appear closed). Classify the partial
-		// token by the slot it occupies so suggestions keep flowing until the next
-		// character turns it back into a valid KEY token.
-		const partialToken = exactToken ?? lastTokenBeforeCursor;
-		if (
-			partialToken &&
-			partialToken.channel === 0 &&
-			partialToken.type === FilterQueryLexer.FREETEXT
-		) {
-			// Closest meaningful token before the partial one determines the slot:
-			// right after an operator we are typing a value, otherwise a key.
-			const prevMeaningful =
-				allTokens
-					.filter(
-						(t) =>
-							t.channel === 0 &&
-							t.type !== FilterQueryLexer.EOF &&
-							t.stop < partialToken.start,
-					)
-					.pop() || null;
-
-			const prevContext = prevMeaningful
-				? determineTokenContext(prevMeaningful, input)
-				: null;
-			const isValuePosition = !!prevContext?.isInOperator;
-
-			return {
-				tokenType: partialToken.type,
-				text: partialToken.text,
-				start: partialToken.start,
-				stop: partialToken.stop,
-				currentToken: partialToken.text,
-				isInKey: !isValuePosition,
-				isInNegation: false,
-				isInOperator: false,
-				isInValue: isValuePosition,
-				isInFunction: false,
-				isInConjunction: false,
-				isInParenthesis: false,
-				isInBracketList: false,
-				keyToken: isValuePosition ? currentPair?.key || '' : partialToken.text,
-				operatorToken: isValuePosition ? currentPair?.operator || '' : undefined,
-				valueToken: isValuePosition ? partialToken.text : undefined,
-				queryPairs,
-				currentPair,
-			};
-		}
-
 		// If we don't have tokens yet, return default context
 		if (!previousToken && !nextToken && !exactToken && !lastTokenBeforeCursor) {
 			return {

pkg/apiserver/signozapiserver/tracedetail.go

@@ -67,5 +67,24 @@ func (provider *provider) addTraceDetailRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v3/traces/{traceID}/flamegraph", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.traceDetailHandler.GetFlamegraph),
+		handler.OpenAPIDef{
+			ID:                  "GetFlamegraph",
+			Tags:                []string{"tracedetail"},
+			Summary:             "Get flamegraph view for a trace",
+			Description:         "Returns the flamegraph view of spans for a given trace ID.",
+			Request:             new(spantypes.PostableFlamegraph),
+			RequestContentType:  "application/json",
+			Response:            new(spantypes.GettableFlamegraphTrace),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
 	return nil
 }

pkg/modules/tracedetail/config.go

@@ -6,7 +6,16 @@ import (
 )
 
 type Config struct {
-	Waterfall WaterfallConfig `mapstructure:"waterfall"`
+	Waterfall  WaterfallConfig  `mapstructure:"waterfall"`
+	Flamegraph FlamegraphConfig `mapstructure:"flamegraph"`
+}
+
+type FlamegraphConfig struct {
+	MaxSelectedLevels            int  `mapstructure:"max_selected_levels"`
+	MaxSpansPerLevel             int  `mapstructure:"max_spans_per_level"`
+	SamplingTopLatencySpansCount int  `mapstructure:"sampling_top_latency_count"`
+	SamplingBucketCount          int  `mapstructure:"sampling_bucket_count"`
+	SelectAllSpansLimit          uint `mapstructure:"select_all_spans_limit"`
 }
 
 type WaterfallConfig struct {
@@ -29,6 +38,13 @@ func newConfig() factory.Config {
 			MaxDepthToAutoExpand:     5,
 			MaxLimitToSelectAllSpans: 10_000,
 		},
+		Flamegraph: FlamegraphConfig{
+			MaxSelectedLevels:            50,
+			MaxSpansPerLevel:             100,
+			SamplingTopLatencySpansCount: 5,
+			SamplingBucketCount:          50,
+			SelectAllSpansLimit:          100_000,
+		},
 	}
 }
 
@@ -45,5 +61,25 @@ func (c Config) Validate() error {
 		return errors.NewInvalidInputf(errors.CodeInvalidInput,
 			"tracedetail.waterfall.max_limit_to_select_all_spans must be positive")
 	}
+	if c.Flamegraph.MaxSelectedLevels <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.level_limit must be positive, got %d", c.Flamegraph.MaxSelectedLevels)
+	}
+	if c.Flamegraph.MaxSpansPerLevel <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.spans_per_level must be positive, got %d", c.Flamegraph.MaxSpansPerLevel)
+	}
+	if c.Flamegraph.SamplingTopLatencySpansCount < 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.top_latency_count cannot be negative, got %d", c.Flamegraph.SamplingTopLatencySpansCount)
+	}
+	if c.Flamegraph.SamplingBucketCount <= 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.bucket_count must be positive, got %d", c.Flamegraph.SamplingBucketCount)
+	}
+	if c.Flamegraph.SelectAllSpansLimit == 0 {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput,
+			"tracedetail.flamegraph.max_limit_to_select_all_spans must be positive")
+	}
 	return nil
 }

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -80,3 +80,18 @@ func (h *handler) GetTraceAggregations(rw http.ResponseWriter, r *http.Request)
 
 	render.Success(rw, http.StatusOK, result)
 }
+
+func (h *handler) GetFlamegraph(rw http.ResponseWriter, r *http.Request) {
+	req := new(spantypes.PostableFlamegraph)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+	result, err := h.module.GetFlamegraph(r.Context(), mux.Vars(r)["traceID"], req)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, result)
+}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -46,29 +46,6 @@ func (m *module) GetWaterfall(ctx context.Context, traceID string, req *spantype
 	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, uncollapsedSpans, selectedAllSpans, aggregationResults), nil
 }
 
-// getTraceData fetches all spans for a trace and builds the WaterfallTrace.
-func (m *module) getTraceData(ctx context.Context, traceID string) (*spantypes.WaterfallTrace, error) {
-	summary, err := m.store.GetTraceSummary(ctx, traceID)
-	if err != nil {
-		return nil, err
-	}
-
-	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
-	if err != nil {
-		return nil, err
-	}
-
-	if len(spanItems) == 0 {
-		return nil, spantypes.ErrTraceNotFound
-	}
-
-	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
-	for i := range spanItems {
-		nodes[i] = spanItems[i].ToWaterfallSpan(traceID)
-	}
-	return spantypes.NewWaterfallTraceFromSpans(nodes), nil
-}
-
 // GetWaterfallV4 is the OOM-safe V4 waterfall.
 // For large traces (NumSpans > effectiveLimit) it uses a two-step fetch:
 // minimal fields for all spans to build the tree, then full fields for the
@@ -85,32 +62,11 @@ func (m *module) GetWaterfallV4(ctx context.Context, traceID string, selectedSpa
 	return m.getFullWaterfall(ctx, traceID, summary)
 }
 
-func (m *module) getFullWaterfall(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableWaterfallTrace, error) {
-	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
-	if err != nil {
-		return nil, err
-	}
-
-	if len(spanItems) == 0 {
-		return nil, spantypes.ErrTraceNotFound
-	}
-
-	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
-	for i := range spanItems {
-		nodes[i] = spanItems[i].ToWaterfallSpan(traceID)
-	}
-	waterfallTrace := spantypes.NewWaterfallTraceFromSpans(nodes)
-	selectedSpans := waterfallTrace.GetAllSpans()
-
-	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, nil, true, nil), nil
-}
-
 func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error) {
 	summary, err := m.store.GetTraceSummary(ctx, traceID)
 	if err != nil {
 		return nil, err
 	}
-
 	traceDurationNs := uint64(summary.End.UnixNano()) - uint64(summary.Start.UnixNano())
 
 	results := make([]spantypes.SpanAggregationResult, 0, len(req.Aggregations))
@@ -148,6 +104,60 @@ func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *
 	return &spantypes.GettableTraceAggregations{Aggregations: results}, nil
 }
 
+func (m *module) GetFlamegraph(ctx context.Context, traceID string, req *spantypes.PostableFlamegraph) (*spantypes.GettableFlamegraphTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	if summary.NumSpans <= uint64(m.config.Flamegraph.SelectAllSpansLimit) {
+		return m.getFullFlamegraph(ctx, traceID, summary)
+	}
+	return m.getWindowedFlamegraph(ctx, traceID, req.SelectedSpanID, summary)
+}
+
+// getTraceData fetches all spans for a trace and builds the WaterfallTrace.
+func (m *module) getTraceData(ctx context.Context, traceID string) (*spantypes.WaterfallTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+
+	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+
+	if len(spanItems) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
+	for i := range spanItems {
+		nodes[i] = spanItems[i].ToWaterfallSpan(traceID)
+	}
+	return spantypes.NewWaterfallTraceFromSpans(nodes), nil
+}
+
+func (m *module) getFullWaterfall(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableWaterfallTrace, error) {
+	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+
+	if len(spanItems) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	nodes := make([]*spantypes.WaterfallSpan, len(spanItems))
+	for i := range spanItems {
+		nodes[i] = spanItems[i].ToWaterfallSpan(traceID)
+	}
+	waterfallTrace := spantypes.NewWaterfallTraceFromSpans(nodes)
+	selectedSpans := waterfallTrace.GetAllSpans()
+
+	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, nil, true, nil), nil
+}
+
 // getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
 func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
 	// Step 1: minimal fetch → build full tree → select visible window
@@ -188,3 +198,50 @@ func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpan
 		waterfallTrace, selectedSpans, uncollapsedSpans, false, nil,
 	), nil
 }
+
+func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableFlamegraphTrace, error) {
+	fullSpans, err := m.store.GetTraceSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+	if len(fullSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans)
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.GetAllLevels(),
+		summary.Start.UnixMilli(), summary.End.UnixMilli(), false,
+	), nil
+}
+
+// getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
+func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpanID string, summary *spantypes.TraceSummary) (*spantypes.GettableFlamegraphTrace, error) {
+	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, summary.Start, summary.End)
+	if err != nil {
+		return nil, err
+	}
+	if len(minimalSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromMinimal(minimalSpans)
+	minimalSpans = nil //nolint:ineffassign,wastedassign // release backing array before further db calls
+
+	cfg := m.config.Flamegraph
+	selectedSpans := flamegraphTrace.GetSelectedLevels(selectedSpanID,
+		cfg.MaxSelectedLevels, cfg.MaxSpansPerLevel, cfg.SamplingTopLatencySpansCount, cfg.SamplingBucketCount)
+	if len(selectedSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	fullSpans, err := m.store.GetTraceSpansByIDs(ctx, traceID, summary.Start, summary.End,
+		spantypes.FlamegraphWindowSpanIDs(selectedSpans))
+	if err != nil {
+		return nil, err
+	}
+
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans),
+		summary.Start.UnixMilli(), summary.End.UnixMilli(), true,
+	), nil
+}

pkg/modules/tracedetail/tracedetail.go

@@ -12,6 +12,7 @@ type Handler interface {
 	GetWaterfall(http.ResponseWriter, *http.Request)
 	GetWaterfallV4(http.ResponseWriter, *http.Request)
 	GetTraceAggregations(http.ResponseWriter, *http.Request)
+	GetFlamegraph(http.ResponseWriter, *http.Request)
 }
 
 // Module defines the business logic for trace detail operations.
@@ -19,4 +20,5 @@ type Module interface {
 	GetWaterfall(ctx context.Context, traceID string, req *spantypes.PostableWaterfall) (*spantypes.GettableWaterfallTrace, error)
 	GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string, selectAllLimit uint) (*spantypes.GettableWaterfallTrace, error)
 	GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error)
+	GetFlamegraph(ctx context.Context, traceID string, req *spantypes.PostableFlamegraph) (*spantypes.GettableFlamegraphTrace, error)
 }

pkg/querier/config.go

@@ -7,12 +7,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 )
 
-type SkipResourceFingerprint struct {
-	Enabled bool `yaml:"enabled" mapstructure:"enabled"`
-	// If count of fingerprint is above threshold, skip the fingerprint subquery and filter on main table instead.
-	Threshold uint64 `yaml:"threshold" mapstructure:"threshold"`
-}
-
 // Config represents the configuration for the querier.
 type Config struct {
 	// CacheTTL is the TTL for cached query results
@@ -21,8 +15,6 @@ type Config struct {
 	FluxInterval time.Duration `yaml:"flux_interval" mapstructure:"flux_interval"`
 	// MaxConcurrentQueries is the maximum number of concurrent queries for missing ranges
 	MaxConcurrentQueries int `yaml:"max_concurrent_queries" mapstructure:"max_concurrent_queries"`
-	// SkipResourceFingerprint configures when the resource fingerprint subquery is skipped in favor of main-table filtering.
-	SkipResourceFingerprint SkipResourceFingerprint `yaml:"skip_resource_fingerprint" mapstructure:"skip_resource_fingerprint"`
 }
 
 // NewConfigFactory creates a new config factory for querier.
@@ -36,10 +28,6 @@ func newConfig() factory.Config {
 		CacheTTL:             168 * time.Hour,
 		FluxInterval:         5 * time.Minute,
 		MaxConcurrentQueries: 4,
-		SkipResourceFingerprint: SkipResourceFingerprint{
-			Enabled:   false,
-			Threshold: 100000,
-		},
 	}
 }
 
@@ -54,9 +42,6 @@ func (c Config) Validate() error {
 	if c.MaxConcurrentQueries <= 0 {
 		return errors.NewInvalidInputf(errors.CodeInvalidInput, "max_concurrent_queries must be positive, got %v", c.MaxConcurrentQueries)
 	}
-	if c.SkipResourceFingerprint.Enabled && c.SkipResourceFingerprint.Threshold <= 0 {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "skip_resource_fingerprint.threshold must be > 0 when enabled")
-	}
 	return nil
 }
 

pkg/querier/signozquerier/provider.go

@@ -88,8 +88,6 @@ func newProvider(
 		traceAggExprRewriter,
 		telemetryStore,
 		flagger,
-		cfg.SkipResourceFingerprint.Enabled,
-		cfg.SkipResourceFingerprint.Threshold,
 	)
 
 	// Create trace operator statement builder
@@ -123,9 +121,6 @@ func newProvider(
 		telemetrylogs.DefaultFullTextColumn,
 		telemetrylogs.GetBodyJSONKey,
 		flagger,
-		telemetryStore,
-		cfg.SkipResourceFingerprint.Enabled,
-		cfg.SkipResourceFingerprint.Threshold,
 	)
 
 	// Create audit statement builder

pkg/query-service/rules/setups_test.go

@@ -89,9 +89,6 @@ func prepareQuerierForLogs(t *testing.T, telemetryStore telemetrystore.Telemetry
 		telemetrylogs.DefaultFullTextColumn,
 		telemetrylogs.GetBodyJSONKey,
 		fl,
-		nil,
-		false,
-		100000,
 	)
 
 	return querier.New(
@@ -137,8 +134,6 @@ func prepareQuerierForTraces(t *testing.T, telemetryStore telemetrystore.Telemet
 		traceAggExprRewriter,
 		telemetryStore,
 		fl,
-		false,
-		100000,
 	)
 
 	return querier.New(

pkg/telemetrylogs/condition_builder.go

@@ -186,7 +186,7 @@ func (c *conditionBuilder) conditionFor(
 		column := columns[0]
 		if len(key.Evolutions) > 0 {
 			// we will use the corresponding column and its evolution entry for the query
-			newColumns, _, err := qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
+			newColumns, _, err := selectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
 			if err != nil {
 				return "", err
 			}

pkg/telemetrylogs/field_mapper.go

@@ -3,7 +3,11 @@ package telemetrylogs
 import (
 	"context"
 	"fmt"
+	"slices"
+	"sort"
+	"strconv"
 	"strings"
+	"time"
 
 	schema "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz-otel-collector/utils"
@@ -133,6 +137,113 @@ func (m *fieldMapper) getColumn(ctx context.Context, key *telemetrytypes.Telemet
 	return nil, qbtypes.ErrColumnNotFound
 }
 
+// selectEvolutionsForColumns selects the appropriate evolution entries for each column based on the time range.
+// Logic:
+//   - Finds the latest base evolution (<= tsStartTime) across ALL columns
+//   - Rejects all evolutions before this latest base evolution
+//   - For duplicate evolutions it considers the oldest one (first in ReleaseTime)
+//   - For each column, includes its evolution if it's >= latest base evolution and <= tsEndTime
+//   - Results are sorted by ReleaseTime descending (newest first)
+func selectEvolutionsForColumns(columns []*schema.Column, evolutions []*telemetrytypes.EvolutionEntry, tsStart, tsEnd uint64) ([]*schema.Column, []*telemetrytypes.EvolutionEntry, error) {
+
+	sortedEvolutions := make([]*telemetrytypes.EvolutionEntry, len(evolutions))
+	copy(sortedEvolutions, evolutions)
+
+	// sort the evolutions by ReleaseTime ascending
+	sort.Slice(sortedEvolutions, func(i, j int) bool {
+		return sortedEvolutions[i].ReleaseTime.Before(sortedEvolutions[j].ReleaseTime)
+	})
+
+	tsStartTime := time.Unix(0, int64(tsStart))
+	tsEndTime := time.Unix(0, int64(tsEnd))
+
+	// Build evolution map: column name -> evolution
+	evolutionMap := make(map[string]*telemetrytypes.EvolutionEntry)
+	for _, evolution := range sortedEvolutions {
+		if _, exists := evolutionMap[evolution.ColumnName+":"+evolution.FieldName+":"+strconv.Itoa(int(evolution.Version))]; exists {
+			// since if there is duplicate we would just use the oldest one.
+			continue
+		}
+		evolutionMap[evolution.ColumnName+":"+evolution.FieldName+":"+strconv.Itoa(int(evolution.Version))] = evolution
+	}
+
+	// Find the latest base evolution (<= tsStartTime) across ALL columns
+	// Evolutions are sorted, so we can break early
+	var latestBaseEvolutionAcrossAll *telemetrytypes.EvolutionEntry
+	for _, evolution := range sortedEvolutions {
+		if evolution.ReleaseTime.After(tsStartTime) {
+			break
+		}
+		latestBaseEvolutionAcrossAll = evolution
+	}
+
+	// We shouldn't reach this, it basically means there is something wrong with the evolutions data
+	if latestBaseEvolutionAcrossAll == nil {
+		return nil, nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "no base evolution found for columns %v", columns)
+	}
+
+	columnLookUpMap := make(map[string]*schema.Column)
+	for _, column := range columns {
+		columnLookUpMap[column.Name] = column
+	}
+
+	// Collect column-evolution pairs
+	type colEvoPair struct {
+		column    *schema.Column
+		evolution *telemetrytypes.EvolutionEntry
+	}
+	pairs := []colEvoPair{}
+
+	for _, evolution := range evolutionMap {
+		// Reject evolutions before the latest base evolution
+		if evolution.ReleaseTime.Before(latestBaseEvolutionAcrossAll.ReleaseTime) {
+			continue
+		}
+		// skip evolutions after tsEndTime
+		if evolution.ReleaseTime.After(tsEndTime) || evolution.ReleaseTime.Equal(tsEndTime) {
+			continue
+		}
+
+		if _, exists := columnLookUpMap[evolution.ColumnName]; !exists {
+			return nil, nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "evolution column %s not found in columns %v", evolution.ColumnName, columns)
+		}
+
+		pairs = append(pairs, colEvoPair{columnLookUpMap[evolution.ColumnName], evolution})
+	}
+
+	// If no pairs found, fall back to latestBaseEvolutionAcrossAll for matching columns
+	if len(pairs) == 0 {
+		for _, column := range columns {
+			// Use latestBaseEvolutionAcrossAll if this column name matches its column name
+			if column.Name == latestBaseEvolutionAcrossAll.ColumnName {
+				pairs = append(pairs, colEvoPair{column, latestBaseEvolutionAcrossAll})
+			}
+		}
+	}
+
+	// Sort by ReleaseTime descending (newest first)
+	slices.SortFunc(pairs, func(a, b colEvoPair) int {
+		// Sort by ReleaseTime descending (newest first)
+		if a.evolution.ReleaseTime.After(b.evolution.ReleaseTime) {
+			return -1
+		}
+		if a.evolution.ReleaseTime.Before(b.evolution.ReleaseTime) {
+			return 1
+		}
+		return 0
+	})
+
+	// Extract results
+	newColumns := make([]*schema.Column, len(pairs))
+	evolutionsEntries := make([]*telemetrytypes.EvolutionEntry, len(pairs))
+	for i, pair := range pairs {
+		newColumns[i] = pair.column
+		evolutionsEntries[i] = pair.evolution
+	}
+
+	return newColumns, evolutionsEntries, nil
+}
+
 func (m *fieldMapper) FieldFor(ctx context.Context, tsStart, tsEnd uint64, key *telemetrytypes.TelemetryFieldKey) (string, error) {
 	columns, err := m.getColumn(ctx, key)
 	if err != nil {
@@ -143,7 +254,7 @@ func (m *fieldMapper) FieldFor(ctx context.Context, tsStart, tsEnd uint64, key *
 	var evolutionsEntries []*telemetrytypes.EvolutionEntry
 	if len(key.Evolutions) > 0 {
 		// we will use the corresponding column and its evolution entry for the query
-		newColumns, evolutionsEntries, err = qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, tsStart, tsEnd)
+		newColumns, evolutionsEntries, err = selectEvolutionsForColumns(columns, key.Evolutions, tsStart, tsEnd)
 		if err != nil {
 			return "", err
 		}

pkg/telemetrylogs/field_mapper_test.go

@@ -536,6 +536,390 @@ func TestFieldForWithEvolutions(t *testing.T) {
 	}
 }
 
+func TestSelectEvolutionsForColumns(t *testing.T) {
+	testCases := []struct {
+		name            string
+		columns         []*schema.Column
+		evolutions      []*telemetrytypes.EvolutionEntry
+		tsStart         uint64
+		tsEnd           uint64
+		expectedColumns []string // column names
+		expectedEvols   []string // evolution column names
+		expectedError   bool
+		errorStr        string
+	}{
+		{
+			name: "New evolutions at tsStartTime - should include latest evolution",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resource"},
+			expectedEvols:   []string{"resource"},
+		},
+		{
+			name: "New evolutions after tsStartTime but less than tsEndTime - should include both",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 2, 3, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resource", "resources_string"}, // sorted by ReleaseTime desc
+			expectedEvols:   []string{"resource", "resources_string"},
+		},
+		{
+			name: "Columns without matching evolutions - should exclude them",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],          // no evolution for this
+				logsV2Columns["attributes_string"], // no evolution for this
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resources_string"},
+			expectedEvols:   []string{"resources_string"},
+		},
+		{
+			name: "New evolutions at tsEndTime - should not include new evolution",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resources_string"},
+			expectedEvols:   []string{"resources_string"},
+		},
+		{
+			name: "New evolutions after tsEndTime - should exclude new",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resources_string"},
+			expectedEvols:   []string{"resources_string"},
+		},
+		{
+			name:    "Empty columns array",
+			columns: []*schema.Column{},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{},
+			expectedEvols:   []string{},
+			expectedError:   true,
+			errorStr:        "column resources_string not found",
+		},
+		{
+			name: "Duplicate evolutions - should use first encountered (oldest if sorted)",
+			columns: []*schema.Column{
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 1, 20, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resource"},
+			expectedEvols:   []string{"resource"}, // should use first one (older)
+		},
+		{
+			name: "Genuine Duplicate evolutions with new version- should consider both",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      0,
+					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      1,
+					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					Version:      2,
+					ReleaseTime:  time.Date(2024, 1, 20, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 1, 16, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resources_string", "resource"},
+			expectedEvols:   []string{"resources_string", "resource"}, // should use first one (older)
+		},
+		{
+			name: "Evolution exactly at tsEndTime",
+			columns: []*schema.Column{
+				logsV2Columns["resources_string"],
+				logsV2Columns["resource"],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resources_string",
+					ColumnType:   "Map(LowCardinality(String), String)",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   "resource",
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextResource,
+					FieldName:    "__all__",
+					ReleaseTime:  time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC), // exactly at tsEnd
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{"resources_string"}, // resource excluded because After(tsEnd) is true
+			expectedEvols:   []string{"resources_string"},
+		},
+		{
+			name: "Single evolution after tsStartTime - JSON body",
+			columns: []*schema.Column{
+				logsV2Columns[LogsV2BodyV2Column],
+				logsV2Columns[LogsV2BodyPromotedColumn],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   LogsV2BodyV2Column,
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextBody,
+					FieldName:    "__all__",
+					ReleaseTime:  time.Unix(0, 0),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   LogsV2BodyPromotedColumn,
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextBody,
+					FieldName:    "user.name",
+					ReleaseTime:  time.Date(2024, 2, 2, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{LogsV2BodyPromotedColumn, LogsV2BodyV2Column}, // sorted by ReleaseTime desc (newest first)
+			expectedEvols:   []string{LogsV2BodyPromotedColumn, LogsV2BodyV2Column},
+		},
+		{
+			name: "No evolution after tsStartTime - JSON body",
+			columns: []*schema.Column{
+				logsV2Columns[LogsV2BodyV2Column],
+				logsV2Columns[LogsV2BodyPromotedColumn],
+			},
+			evolutions: []*telemetrytypes.EvolutionEntry{
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   LogsV2BodyV2Column,
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextBody,
+					FieldName:    "__all__",
+					ReleaseTime:  time.Unix(0, 0),
+				},
+				{
+					Signal:       telemetrytypes.SignalLogs,
+					ColumnName:   LogsV2BodyPromotedColumn,
+					ColumnType:   "JSON()",
+					FieldContext: telemetrytypes.FieldContextBody,
+					FieldName:    "user.name",
+					ReleaseTime:  time.Date(2024, 2, 2, 0, 0, 0, 0, time.UTC),
+				},
+			},
+			tsStart:         uint64(time.Date(2024, 2, 3, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedColumns: []string{LogsV2BodyPromotedColumn},
+			expectedEvols:   []string{LogsV2BodyPromotedColumn},
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			resultColumns, resultEvols, err := selectEvolutionsForColumns(tc.columns, tc.evolutions, tc.tsStart, tc.tsEnd)
+
+			if tc.expectedError {
+				assert.Contains(t, err.Error(), tc.errorStr)
+			} else {
+				require.NoError(t, err)
+				assert.Equal(t, len(tc.expectedColumns), len(resultColumns), "column count mismatch")
+				assert.Equal(t, len(tc.expectedEvols), len(resultEvols), "evolution count mismatch")
+
+				resultColumnNames := make([]string, len(resultColumns))
+				for i, col := range resultColumns {
+					resultColumnNames[i] = col.Name
+				}
+				resultEvolNames := make([]string, len(resultEvols))
+				for i, evol := range resultEvols {
+					resultEvolNames[i] = evol.ColumnName
+				}
+
+				for i := range tc.expectedColumns {
+					assert.Equal(t, resultColumnNames[i], tc.expectedColumns[i], "expected column missing: "+tc.expectedColumns[i])
+				}
+				for i := range tc.expectedEvols {
+					assert.Equal(t, resultEvolNames[i], tc.expectedEvols[i], "expected evolution missing: "+tc.expectedEvols[i])
+				}
+				// Verify sorting: should be descending by ReleaseTime
+				for i := 0; i < len(resultEvols)-1; i++ {
+					assert.True(t, !resultEvols[i].ReleaseTime.Before(resultEvols[i+1].ReleaseTime),
+						"evolutions should be sorted descending by ReleaseTime")
+				}
+			}
+		})
+	}
+}
+
 func TestFieldForWithMaterialized(t *testing.T) {
 	ctx := context.Background()