fix: checkbox issue

* feat: field selector migrated to telemetry field key

* feat: move floating panel to field selector

* feat: sync columns state in logs

* feat: sync columns state in traces

* feat: logs field migration integrate

* feat: traces field migration integrate

* feat: minor refactor

* feat: tests updated

* feat: move to key from name on fields for logs and traces

* feat: update tests

* feat: update tests

.github/CODEOWNERS

@@ -169,3 +169,22 @@ 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

conf/example.yaml

@@ -64,16 +64,16 @@ web:
   settings:
     posthog:
       # Whether to enable PostHog in web.
-      enabled: true
+      enabled: false
     appcues:
       # Whether to enable Appcues in web.
-      enabled: true
+      enabled: false
     sentry:
       # Whether to enable Sentry in web.
-      enabled: true
+      enabled: false
     pylon:
       # Whether to enable Pylon in web.
-      enabled: true
+      enabled: false
 
 ##################### Cache #####################
 cache:

docs/api/openapi.yml

@@ -6525,6 +6525,15 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         aggregations:
@@ -6563,6 +6572,15 @@ components:
           nullable: true
           type: array
       type: object
+    SpantypesOtelSpanRef:
+      properties:
+        refType:
+          type: string
+        spanId:
+          type: string
+        traceId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -6590,6 +6608,15 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesPostableWaterfall:
       properties:
         aggregations:
@@ -6614,6 +6641,9 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      required:
+      - field
+      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6627,6 +6657,10 @@ components:
             type: integer
           nullable: true
           type: object
+      required:
+      - field
+      - aggregation
+      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -6810,6 +6844,10 @@ components:
           type: string
         parent_span_id:
           type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
         resource:
           additionalProperties:
             type: string
@@ -6835,6 +6873,8 @@ components:
           type: string
         trace_state:
           type: string
+      required:
+      - references
       type: object
     TagtypesPostableTag:
       properties:
@@ -12265,6 +12305,75 @@ paths:
       summary: Test notification channel (deprecated)
       tags:
       - channels
+  /api/v1/traces/{traceID}/aggregations:
+    post:
+      deprecated: false
+      description: Computes span aggregations grouped by requested field.
+      operationId: GetTraceAggregations
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableTraceAggregations'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceAggregations'
+                  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 aggregations for a trace
+      tags:
+      - tracedetail
   /api/v1/user:
     get:
       deprecated: false

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

@@ -7753,12 +7753,34 @@ export type SpantypesSpanAggregationResultDTOValue =
 	SpantypesSpanAggregationResultDTOValueAnyOf | null;
 
 export interface SpantypesSpanAggregationResultDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
 	/**
 	 * @type object,null
 	 */
-	value?: SpantypesSpanAggregationResultDTOValue;
+	value: SpantypesSpanAggregationResultDTOValue;
+}
+
+export interface SpantypesGettableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationResultDTO[];
+}
+
+export interface SpantypesOtelSpanRefDTO {
+	/**
+	 * @type string
+	 */
+	refType?: string;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type string
+	 */
+	traceId?: string;
 }
 
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
@@ -7855,6 +7877,10 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	parent_span_id?: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -8000,8 +8026,15 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 }
 
 export interface SpantypesSpanAggregationDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
+}
+
+export interface SpantypesPostableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationDTO[];
 }
 
 export interface SpantypesPostableWaterfallDTO {
@@ -9344,6 +9377,17 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type GetTraceAggregationsPathParameters = {
+	traceID: string;
+};
+export type GetTraceAggregations200 = {
+	data: SpantypesGettableTraceAggregationsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

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

@@ -12,17 +12,120 @@ import type {
 } from 'react-query';
 
 import type {
+	GetTraceAggregations200,
+	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+/**
+ * Computes span aggregations grouped by requested field.
+ * @summary Get aggregations for a trace
+ */
+export const getTraceAggregations = (
+	{ traceID }: GetTraceAggregationsPathParameters,
+	spantypesPostableTraceAggregationsDTO?: BodyType<SpantypesPostableTraceAggregationsDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceAggregations200>({
+		url: `/api/v1/traces/${traceID}/aggregations`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableTraceAggregationsDTO,
+		signal,
+	});
+};
+
+export const getGetTraceAggregationsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getTraceAggregations'];
+	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 getTraceAggregations>>,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getTraceAggregations(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetTraceAggregationsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceAggregations>>
+>;
+export type GetTraceAggregationsMutationBody =
+	| BodyType<SpantypesPostableTraceAggregationsDTO>
+	| undefined;
+export type GetTraceAggregationsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get aggregations for a trace
+ */
+export const useGetTraceAggregations = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetTraceAggregationsMutationOptions(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,7 +120,8 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check'
+				response.config.url !== '/authz/check' &&
+				response.config.url !== '/api/v2/reset_password_tokens/verify'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

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

@@ -1 +0,0 @@
-<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/FieldsSelector/AddedFields.tsx

@@ -27,13 +27,15 @@ 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.name });
+		useSortable({ id: field.key as string });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -53,15 +55,17 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
-				variant="outlined"
-				color="destructive"
-				size="sm"
-				onClick={(): void => onRemove(field)}
-			>
-				Remove
-			</Button>
+			{!isRequired && (
+				<Button
+					className={cx(styles.removeBtn, 'periscope-btn')}
+					variant="outlined"
+					color="destructive"
+					size="sm"
+					onClick={(): void => onRemove(field)}
+				>
+					Remove
+				</Button>
+			)}
 		</div>
 	);
 }
@@ -71,6 +75,7 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -78,14 +83,18 @@ 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.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -99,7 +108,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -125,16 +134,20 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key as string)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
+										isRequired={
+											requiredFields.includes(field.name) ||
+											requiredFields.includes(field.key as string)
+										}
 									/>
 								))}
 							</SortableContext>

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

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

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,6 +5,7 @@ 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';
 
@@ -26,33 +27,36 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-function FieldsSelector({
-	isOpen,
+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({
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
+	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
+}: FieldsSelectorContentProps): JSX.Element {
 	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('');
@@ -72,15 +76,17 @@ function FieldsSelector({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
+			setDraftFields((prev) => {
+				if (maxFields !== undefined && prev.length >= maxFields) {
+					return prev;
+				}
+				if (prev.some((f) => f.key === field.key)) {
+					return prev;
+				}
+				return [...prev, field];
+			});
 		},
-		[draftFields, maxFields],
+		[maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -99,7 +105,7 @@ function FieldsSelector({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
+				draftFields.every((f, i) => f.key === fields[i]?.key)
 			),
 		[draftFields, fields],
 	);
@@ -138,6 +144,7 @@ function FieldsSelector({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
+					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -173,4 +180,27 @@ function FieldsSelector({
 	);
 }
 
+// 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,6 +4,7 @@ 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,
@@ -47,15 +48,22 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
+		// Normalize: synthesize `key` once so downstream reads can trust it.
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.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) {
@@ -64,8 +72,13 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						// eslint-disable-next-line react/no-array-index-key
-						<Skeleton.Input active size="small" key={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>
 					))}
 				</div>
 			</div>
@@ -83,7 +96,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

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

@@ -0,0 +1,113 @@
+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 name is in requiredFields', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['a', '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={['a']}
+			/>,
+		);
+
+		expect(screen.getByText('a')).toBeInTheDocument();
+		expect(screen.getByText('b')).toBeInTheDocument();
+	});
+
+	it('locks all variants of a required name regardless of fieldContext', () => {
+		// Two `body` fields with different contexts — both should lock when
+		// `body` is in requiredFields.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// Both 'body' variants locked → zero Remove buttons.
+		expect(screen.queryAllByRole('button', { name: /remove/i })).toHaveLength(0);
+	});
+
+	it('treats requiredFields as exact-name match (substring does not lock)', () => {
+		const fields = [makeField('body'), makeField('body_extra')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// 'body' locked, 'body_extra' removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+
+	it('also accepts composite IDs in requiredFields (locks a specific variant)', () => {
+		// Two `body` fields with different contexts.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				// Composite ID — locks ONLY the log variant, attribute variant stays
+				// removable.
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// One Remove button: the attribute variant. log variant is locked.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+});

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -4,6 +4,7 @@ import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { AIAssistantEvents } from 'container/AIAssistant/events';
@@ -109,7 +110,7 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title="Noz">
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 						<Button
 							variant="solid"
 							color="secondary"

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

@@ -0,0 +1,106 @@
+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): 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'),
+					field('request.id'),
+					field('timestamp'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		// body/timestamp are NOT pinned to fixed positions — they appear where the
+		// caller placed them in `fields`. body/timestamp use composite IDs
+		// ('log.body', 'log.timestamp') since their fieldContext is fixed; user
+		// fields here have empty `type` so their composite collapses to bare name.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'service.name',
+			'log.body',
+			'request.id',
+			'log.timestamp',
+		]);
+	});
+
+	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'), field('timestamp'), 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,6 +7,7 @@ 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';
@@ -18,13 +19,11 @@ 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();
 
@@ -47,71 +46,71 @@ export function useLogsTableColumns({
 			),
 		};
 
-		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 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 timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					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 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>
+			),
+		});
+
+		const fieldCols = fields
+			.map((f): TableColumnDef<ILog> | null => {
+				if (f.name === 'id') {
+					return null;
 				}
-			: null;
-
-		const bodyCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'body',
-		)
-			? {
-					id: 'body',
-					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
-					canBeHidden: false,
-					width: { default: '100%', min: 300 },
-					cell: ({ value, isActive }): ReactElement => (
-						<TanStackTable.Text
-							dangerouslySetInnerHTML={{
-								__html: getSanitizedLogBody(value as string, {
-									shouldEscapeHtml: true,
-								}),
-							}}
-							data-active={isActive}
-						/>
-					),
+				if (f.name === 'timestamp') {
+					return timestampCol;
 				}
-			: null;
+				if (f.name === 'body') {
+					return bodyCol;
+				}
+				return makeUserFieldCol(f);
+			})
+			.filter((c): c is TableColumnDef<ILog> => c !== null);
 
-		return [
-			stateIndicatorCol,
-			...(timestampCol ? [timestampCol] : []),
-			...(appendTo === 'center' ? fieldColumns : []),
-			...(bodyCol ? [bodyCol] : []),
-			...(appendTo === 'end' ? fieldColumns : []),
-		];
-	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+		return [stateIndicatorCol, ...fieldCols];
+	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
 }

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

@@ -256,6 +256,34 @@
 				}
 			}
 
+			.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,12 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { useCallback, useEffect, useState } from 'react';
 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,
@@ -14,7 +11,6 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
-	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -23,14 +19,21 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
+	onOpenColumns?: () => void;
+}
+
+interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
+	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-}: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn, fontSize } = config;
+	onOpenColumns,
+	closePopover,
+}: OptionsMenuContentProps): JSX.Element {
+	const { maxLines, format, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -40,13 +43,6 @@ 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) {
@@ -61,7 +57,6 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
-		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -76,20 +71,6 @@ 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 &&
@@ -100,6 +81,11 @@ function OptionsMenu({
 		}
 	};
 
+	const handleEditColumns = (): void => {
+		onOpenColumns?.();
+		closePopover();
+	};
+
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -112,110 +98,10 @@ 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={cx(
-				'nested-menu-container',
-				showAddNewColumnContainer ? 'active' : '',
-			)}
+			className="nested-menu-container"
 			onClick={(event): void => {
-				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -269,71 +155,7 @@ 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>
@@ -373,72 +195,52 @@ 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>
+							<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 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>
+					{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>
 						</>
 					)}
@@ -452,6 +254,7 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
+	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -461,6 +264,8 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
+					onOpenColumns={onOpenColumns}
+					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

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

@@ -62,6 +62,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 						onSearch: jest.fn(),
 						onSelect: jest.fn(),
 						onRemove: jest.fn(),
+						onReorder: jest.fn(),
 					},
 				}}
 			/>,
@@ -154,4 +155,66 @@ 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

@@ -483,8 +483,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			> span:not(.ant-checkbox) {
-				width: 100%;
+			> label {
+				flex: 1;
+				min-width: 0;
 			}
 
 			.all-option-text {

frontend/src/components/Noz/Noz.constants.ts

@@ -0,0 +1,2 @@
+/** Shared hover copy for every Noz entry point (header, floating trigger, sidebar). */
+export const NOZ_TOOLTIP_TITLE = 'Noz, your AI teammate';

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -72,6 +72,7 @@ function TanStackTableInner<TData>(
 		data,
 		columns,
 		columnStorageKey,
+		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -175,6 +176,7 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
+		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -206,6 +208,7 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
+		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,
@@ -322,9 +325,7 @@ function TanStackTableInner<TData>(
 	});
 
 	const hasSingleColumn = useMemo(
-		() =>
-			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
-			1,
+		() => effectiveColumns.filter((c) => !c.pin).length <= 1,
 		[effectiveColumns],
 	);
 

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

@@ -24,6 +24,8 @@ 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(),
@@ -867,4 +869,110 @@ 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,6 +168,53 @@ 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,6 +152,8 @@ 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,6 +7,8 @@ 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;
@@ -28,6 +30,7 @@ export interface UseColumnHandlersResult<TData> {
  */
 export function useColumnHandlers<TData>({
 	columnStorageKey,
+	respectColumnOrder = true,
 	effectiveSizing,
 	storeSetSizing,
 	storeSetOrder,
@@ -50,12 +53,12 @@ export function useColumnHandlers<TData>({
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey) {
+			if (columnStorageKey && respectColumnOrder) {
 				storeSetOrder(cols);
 			}
 			onColumnOrderChange?.(cols);
 		},
-		[columnStorageKey, storeSetOrder, onColumnOrderChange],
+		[columnStorageKey, respectColumnOrder, storeSetOrder, onColumnOrderChange],
 	);
 
 	const handleRemoveColumn = useCallback(

frontend/src/components/TanStackTableView/useColumnState.ts

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

frontend/src/components/ValueGraph/index.tsx

@@ -93,7 +93,6 @@ function ValueGraph({
 		<div
 			ref={containerRef}
 			className="value-graph-container"
-			data-testid="value-graph-container"
 			style={{
 				backgroundColor:
 					threshold.thresholdFormat === 'Background'

frontend/src/constants/localStorage.ts

@@ -42,4 +42,5 @@ export enum LOCALSTORAGE {
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
+	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 }

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -5,6 +5,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 
 import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
@@ -42,16 +43,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<TooltipSimple title="Noz">
+		<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 			<Button
 				variant="solid"
 				color="primary"
 				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
 				aria-label="Open Noz"
-			>
-				<Noz size={24} />
-			</Button>
+				prefix={<Noz size={24} />}
+			/>
 		</TooltipSimple>
 	);
 }

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

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

frontend/src/container/GridTableComponent/index.tsx

@@ -159,8 +159,6 @@ function GridTableComponent({
 				if (threshold && idx !== -1) {
 					return (
 						<div
-							data-testid="threshold-styled-cell"
-							data-threshold-format={threshold.thresholdFormat}
 							style={
 								threshold.thresholdFormat === 'Background'
 									? { backgroundColor: threshold.thresholdColor }

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -121,11 +121,6 @@ function Hosts(): JSX.Element {
 		[dotMetricsEnabled],
 	);
 
-	const primaryFilterKeys = useMemo(
-		() => [dotMetricsEnabled ? 'host.name' : 'host_name'],
-		[dotMetricsEnabled],
-	);
-
 	const controlListPrefix = !showFilters ? (
 		<div className={styles.quickFiltersToggleContainer}>
 			<Button
@@ -188,7 +183,6 @@ function Hosts(): JSX.Element {
 				getEntityName={hostGetEntityName}
 				getInitialLogTracesFilters={getInitialLogTracesFilters}
 				getInitialEventsFilters={hostInitialEventsFilter}
-				primaryFilterKeys={primaryFilterKeys}
 				metadataConfig={hostDetailsMetadataConfig}
 				entityWidgetInfo={hostWidgetInfo}
 				getEntityQueryPayload={getHostMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -101,10 +101,6 @@ export interface K8sBaseDetailsProps<T> {
 	getEntityName: (entity: T) => string;
 	getInitialLogTracesFilters: (entity: T) => TagFilterItem[];
 	getInitialEventsFilters: (entity: T) => TagFilterItem[];
-	/**
-	 * @deprecated It's not needed anymore, remove in the next PR
-	 */
-	primaryFilterKeys: string[];
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
 	entityWidgetInfo: {
 		title: string;

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemFilters,
 	k8sClusterInitialEventsFilter,
-	k8sClusterInitialFilters,
 	k8sClusterInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sClustersList({
 				getEntityName={k8sClusterGetEntityName}
 				getInitialLogTracesFilters={k8sClusterInitialLogTracesFilter}
 				getInitialEventsFilters={k8sClusterInitialEventsFilter}
-				primaryFilterKeys={k8sClusterInitialFilters}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -33,8 +33,6 @@ export const k8sClusterGetSelectedItemFilters = (
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sClusterData>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.meta.k8s_cluster_name }];
 
-export const k8sClusterInitialFilters = [QUERY_KEYS.K8S_CLUSTER_NAME];
-
 export const k8sClusterInitialEventsFilter = (
 	item: K8sClusterData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDaemonSetGetEntityName,
 	k8sDaemonSetGetSelectedItemFilters,
 	k8sDaemonSetInitialEventsFilter,
-	k8sDaemonSetInitialFilters,
 	k8sDaemonSetInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDaemonSetsList({
 				getEntityName={k8sDaemonSetGetEntityName}
 				getInitialLogTracesFilters={k8sDaemonSetInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDaemonSetInitialEventsFilter}
-				primaryFilterKeys={k8sDaemonSetInitialFilters}
 				metadataConfig={k8sDaemonSetDetailsMetadataConfig}
 				entityWidgetInfo={daemonSetWidgetInfo}
 				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/DaemonSets/constants.ts

@@ -46,11 +46,6 @@ export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDaem
 		},
 	];
 
-export const k8sDaemonSetInitialFilters = [
-	QUERY_KEYS.K8S_DAEMON_SET_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDaemonSetInitialEventsFilter = (
 	item: K8sDaemonSetsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDeploymentGetEntityName,
 	k8sDeploymentGetSelectedItemFilters,
 	k8sDeploymentInitialEventsFilter,
-	k8sDeploymentInitialFilters,
 	k8sDeploymentInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDeploymentsList({
 				getEntityName={k8sDeploymentGetEntityName}
 				getInitialLogTracesFilters={k8sDeploymentInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDeploymentInitialEventsFilter}
-				primaryFilterKeys={k8sDeploymentInitialFilters}
 				metadataConfig={k8sDeploymentDetailsMetadataConfig}
 				entityWidgetInfo={deploymentWidgetInfo}
 				getEntityQueryPayload={getDeploymentMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Deployments/constants.ts

@@ -46,11 +46,6 @@ export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDep
 		},
 	];
 
-export const k8sDeploymentInitialFilters = [
-	QUERY_KEYS.K8S_DEPLOYMENT_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDeploymentInitialEventsFilter = (
 	item: K8sDeploymentsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sJobGetEntityName,
 	k8sJobGetSelectedItemFilters,
 	k8sJobInitialEventsFilter,
-	k8sJobInitialFilters,
 	k8sJobInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sJobsList({
 				getEntityName={k8sJobGetEntityName}
 				getInitialLogTracesFilters={k8sJobInitialLogTracesFilter}
 				getInitialEventsFilters={k8sJobInitialEventsFilter}
-				primaryFilterKeys={k8sJobInitialFilters}
 				metadataConfig={k8sJobDetailsMetadataConfig}
 				entityWidgetInfo={jobWidgetInfo}
 				getEntityQueryPayload={getJobMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Jobs/constants.ts

@@ -46,11 +46,6 @@ export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sJobsData>[
 		},
 	];
 
-export const k8sJobInitialFilters = [
-	QUERY_KEYS.K8S_JOB_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sJobInitialEventsFilter = (
 	item: K8sJobsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sNamespaceGetEntityName,
 	k8sNamespaceGetSelectedItemFilters,
 	k8sNamespaceInitialEventsFilter,
-	k8sNamespaceInitialFilters,
 	k8sNamespaceInitialLogTracesFilter,
 	namespaceWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sNamespacesList({
 				getEntityName={k8sNamespaceGetEntityName}
 				getInitialLogTracesFilters={k8sNamespaceInitialLogTracesFilter}
 				getInitialEventsFilters={k8sNamespaceInitialEventsFilter}
-				primaryFilterKeys={k8sNamespaceInitialFilters}
 				metadataConfig={k8sNamespaceDetailsMetadataConfig}
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sNodeGetEntityName,
 	k8sNodeGetSelectedItemFilters,
 	k8sNodeInitialEventsFilter,
-	k8sNodeInitialFilters,
 	k8sNodeInitialLogTracesFilter,
 	nodeWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sNodesList({
 				getEntityName={k8sNodeGetEntityName}
 				getInitialLogTracesFilters={k8sNodeInitialLogTracesFilter}
 				getInitialEventsFilters={k8sNodeInitialEventsFilter}
-				primaryFilterKeys={k8sNodeInitialFilters}
 				metadataConfig={k8sNodeDetailsMetadataConfig}
 				entityWidgetInfo={nodeWidgetInfo}
 				getEntityQueryPayload={getNodeMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -14,7 +14,6 @@ import {
 	k8sPodGetEntityName,
 	k8sPodGetSelectedItemFilters,
 	k8sPodInitialEventsFilter,
-	k8sPodInitialFilters,
 	k8sPodInitialLogTracesFilter,
 	podWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sPodsList({
 				getEntityName={k8sPodGetEntityName}
 				getInitialLogTracesFilters={k8sPodInitialLogTracesFilter}
 				getInitialEventsFilters={k8sPodInitialEventsFilter}
-				primaryFilterKeys={k8sPodInitialFilters}
 				metadataConfig={k8sPodDetailsMetadataConfig}
 				entityWidgetInfo={podWidgetInfo}
 				getEntityQueryPayload={getPodMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Pods/constants.ts

@@ -42,12 +42,6 @@ export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sPodsData>[
 		{ label: 'Node', getValue: (p): string => p.meta.k8s_node_name },
 	];
 
-export const k8sPodInitialFilters = [
-	QUERY_KEYS.K8S_POD_NAME,
-	QUERY_KEYS.K8S_CLUSTER_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sPodInitialEventsFilter = (
 	pod: K8sPodsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sStatefulSetGetEntityName,
 	k8sStatefulSetGetSelectedItemFilters,
 	k8sStatefulSetInitialEventsFilter,
-	k8sStatefulSetInitialFilters,
 	k8sStatefulSetInitialLogTracesFilter,
 	statefulSetWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sStatefulSetsList({
 				getEntityName={k8sStatefulSetGetEntityName}
 				getInitialLogTracesFilters={k8sStatefulSetInitialLogTracesFilter}
 				getInitialEventsFilters={k8sStatefulSetInitialEventsFilter}
-				primaryFilterKeys={k8sStatefulSetInitialFilters}
 				metadataConfig={k8sStatefulSetDetailsMetadataConfig}
 				entityWidgetInfo={statefulSetWidgetInfo}
 				getEntityQueryPayload={getStatefulSetMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/StatefulSets/constants.ts

@@ -42,11 +42,6 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sSt
 		},
 	];
 
-export const k8sStatefulSetInitialFilters = [
-	QUERY_KEYS.K8S_STATEFUL_SET_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sStatefulSetInitialEventsFilter = (
 	item: K8sStatefulSetsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sVolumeGetEntityName,
 	k8sVolumeGetSelectedItemFilters,
 	k8sVolumeInitialEventsFilter,
-	k8sVolumeInitialFilters,
 	k8sVolumeInitialLogTracesFilter,
 	volumeWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sVolumesList({
 				getEntityName={k8sVolumeGetEntityName}
 				getInitialLogTracesFilters={k8sVolumeInitialLogTracesFilter}
 				getInitialEventsFilters={k8sVolumeInitialEventsFilter}
-				primaryFilterKeys={k8sVolumeInitialFilters}
 				metadataConfig={k8sVolumeDetailsMetadataConfig}
 				entityWidgetInfo={volumeWidgetInfo}
 				getEntityQueryPayload={getVolumeMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Volumes/constants.ts

@@ -46,11 +46,6 @@ export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sVolumes
 		},
 	];
 
-export const k8sVolumeInitialFilters = [
-	QUERY_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sVolumeInitialEventsFilter = (
 	item: K8sVolumesData,
 ): ReturnType<typeof createFilterItem>[] => [

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

@@ -2,12 +2,14 @@ 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';
@@ -56,6 +58,8 @@ function LiveLogsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -238,6 +242,7 @@ function LiveLogsContainer({
 						items={formatItems}
 						selectedOptionFormat={options.format}
 						config={config}
+						onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 					/>
 				</div>
 
@@ -261,6 +266,17 @@ 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

@@ -16,7 +16,6 @@ import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColum
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import type { TanStackTableHandle } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
-import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
@@ -24,13 +23,11 @@ import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -54,9 +51,6 @@ function LiveLogsList({
 	const { isConnectionLoading } = useEventSource();
 
 	const { activeLogId } = useCopyLogLink();
-	const { logs: logsPreferences } = usePreferenceContext();
-	const hiddenColumnIds = useHiddenColumnIds(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-	const hasReconciledHiddenColumnsRef = useRef(false);
 
 	const {
 		activeLog,
@@ -72,7 +66,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -83,47 +77,13 @@ function LiveLogsList({
 		[formattedLogs, activeLogId],
 	);
 
-	const selectedFields = convertKeysToColumnFields([
-		...defaultLogsSelectedColumns,
-		...options.selectColumns,
-	]);
-
-	const syncedSelectedColumns = useMemo(
-		() =>
-			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
-		[options.selectColumns, hiddenColumnIds],
-	);
+	const selectedFields = convertKeysToColumnFields(options.selectColumns);
 
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
-	useEffect(() => {
-		if (hasReconciledHiddenColumnsRef.current) {
-			return;
-		}
-
-		hasReconciledHiddenColumnsRef.current = true;
-
-		if (syncedSelectedColumns.length === options.selectColumns.length) {
-			return;
-		}
-
-		logsPreferences.updateColumns(syncedSelectedColumns);
-	}, [logsPreferences, options.selectColumns.length, syncedSelectedColumns]);
-
-	const handleColumnRemove = useCallback(
-		(columnId: string) => {
-			const updatedColumns = options.selectColumns.filter(
-				({ name }) => name !== columnId,
-			);
-			logsPreferences.updateColumns(updatedColumns);
-		},
-		[options.selectColumns, logsPreferences],
-	);
-
 	const makeOnLogCopy = useCallback(
 		(log: ILog) =>
 			(event: MouseEvent<HTMLElement>): void => {
@@ -237,7 +197,8 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							onColumnRemove={handleColumnRemove}
+							respectColumnOrder={false}
+							onColumnRemove={config?.addColumn?.onRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}
 							data={formattedLogs}

frontend/src/container/LogsExplorerList/index.tsx

@@ -18,21 +18,19 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
 import type { TanStackTableHandle } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
-import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 import APIError from 'types/api/error';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -69,10 +67,6 @@ function LogsExplorerList({
 	const [, setCopy] = useCopyToClipboard();
 	const isDarkMode = useIsDarkMode();
 	const { activeLogId } = useCopyLogLink();
-	const { logs: logsPreferences } = usePreferenceContext();
-	const hiddenColumnIds = useHiddenColumnIds(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-	const hasReconciledHiddenColumnsRef = useRef(false);
-
 	const {
 		activeLog,
 		onAddToQuery,
@@ -81,7 +75,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -97,34 +91,20 @@ function LogsExplorerList({
 	);
 
 	const selectedFields = useMemo(
-		() =>
-			convertKeysToColumnFields([
-				...defaultLogsSelectedColumns,
-				...options.selectColumns,
-			]),
-		[options],
+		() => convertKeysToColumnFields(options.selectColumns),
+		[options.selectColumns],
 	);
 
-	const syncedSelectedColumns = useMemo(
-		() =>
-			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
-		[options.selectColumns, hiddenColumnIds],
-	);
-
-	const handleColumnRemove = useCallback(
-		(columnId: string) => {
-			const updatedColumns = options.selectColumns.filter(
-				({ name }) => name !== columnId,
-			);
-			logsPreferences.updateColumns(updatedColumns);
+	const handleColumnOrderChange = useCallback(
+		(cols: TableColumnDef<ILog>[]): void => {
+			config?.addColumn?.onReorder(cols.map((c) => c.id));
 		},
-		[options.selectColumns, logsPreferences],
+		[config],
 	);
 
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -161,20 +141,6 @@ function LogsExplorerList({
 		}
 	}, [isLoading, isFetching, isError, logs.length]);
 
-	useEffect(() => {
-		if (hasReconciledHiddenColumnsRef.current) {
-			return;
-		}
-
-		hasReconciledHiddenColumnsRef.current = true;
-
-		if (syncedSelectedColumns.length === options.selectColumns.length) {
-			return;
-		}
-
-		logsPreferences.updateColumns(syncedSelectedColumns);
-	}, [logsPreferences, options.selectColumns.length, syncedSelectedColumns]);
-
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
@@ -237,7 +203,9 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-					onColumnRemove={handleColumnRemove}
+					respectColumnOrder={false}
+					onColumnRemove={config?.addColumn?.onRemove}
+					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}
 					cellTypographySize={options.fontSize}
 					data={logs}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,16 +1,17 @@
+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,
@@ -18,10 +19,6 @@ function LogsActionsContainer({
 	handleToggleFrequencyChart,
 	orderBy,
 	setOrderBy,
-	isFetching,
-	isLoading,
-	isError,
-	isSuccess,
 }: {
 	listQuery: any;
 	selectedPanelType: PANEL_TYPES;
@@ -29,10 +26,6 @@ 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,
@@ -40,6 +33,8 @@ function LogsActionsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -102,23 +97,24 @@ 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,40 +155,6 @@
 				}
 			}
 
-			.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

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

frontend/src/container/LogsExplorerViews/QueryStatus.tsx

@@ -1,49 +0,0 @@
-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, isSuccess, error } =
+	const { data, isLoading, isFetching, isError, error } =
 		useGetExplorerQueryRange(
 			requestData,
 			selectedPanelType,
@@ -437,10 +437,6 @@ 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) {
+		if (!metricMetadataResponse?.data) {
 			return null;
 		}
 		const { type, description, unit, temporality, isMonotonic } =

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx

@@ -80,23 +80,18 @@ export function ColumnUnitSelector(
 				{aggregationQueries.map(({ value, label }) => {
 					const baseQueryName = value.split('.')[0];
 					return (
-						<div
+						<YAxisUnitSelectorV2
+							value={columnUnits[value] || ''}
+							onSelect={(unitValue: string): void =>
+								handleColumnUnitSelect(value, unitValue)
+							}
+							fieldLabel={label}
 							key={value}
-							className="column-unit-row"
-							data-testid={`column-unit-row-${baseQueryName}`}
-						>
-							<YAxisUnitSelectorV2
-								value={columnUnits[value] || ''}
-								onSelect={(unitValue: string): void =>
-									handleColumnUnitSelect(value, unitValue)
-								}
-								fieldLabel={label}
-								data-testid={props['data-testid']}
-								selectedQueryName={baseQueryName}
-								// Update the column unit value automatically only in create mode
-								shouldUpdateYAxisUnit={isNewDashboard}
-							/>
-						</div>
+							data-testid={props['data-testid']}
+							selectedQueryName={baseQueryName}
+							// Update the column unit value automatically only in create mode
+							shouldUpdateYAxisUnit={isNewDashboard}
+						/>
 					);
 				})}
 			</div>

frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx

@@ -78,10 +78,7 @@ export default function VisualizationSettingsSection({
 				>
 					{graphTypes.map((item) => (
 						<Option key={item.name} value={item.name}>
-							<div
-								className="select-option"
-								data-testid={`panel-type-option-${item.name}`}
-							>
+							<div className="select-option">
 								<div className="icon">{item.icon}</div>
 								<Typography.Text className="display">{item.display}</Typography.Text>
 							</div>

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -231,14 +231,12 @@ function Threshold({
 							type="text"
 							icon={<Pencil size={14} />}
 							className="edit-btn"
-							data-testid="threshold-edit-btn"
 							onClick={editHandler}
 						/>
 						<Button
 							type="text"
 							icon={<Trash2 size={14} />}
 							className="delete-btn"
-							data-testid="threshold-delete-btn"
 							onClick={deleteHandler}
 						/>
 					</div>

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

@@ -0,0 +1,79 @@
+import { TelemetryFieldKey } from 'api/v5/v5';
+
+import {
+	defaultLogsSelectedColumns,
+	ensureLogsRequiredColumns,
+} from '../constants';
+
+const TIMESTAMP = defaultLogsSelectedColumns.find(
+	(c) => c.name === 'timestamp',
+);
+const BODY = defaultLogsSelectedColumns.find((c) => c.name === 'body');
+
+if (!TIMESTAMP || !BODY) {
+	throw new Error('defaults missing timestamp/body — test fixture invalid');
+}
+
+const ATTR_A: TelemetryFieldKey = {
+	name: 'service.name',
+	signal: 'logs',
+	fieldContext: 'resource',
+	fieldDataType: 'string',
+};
+const ATTR_B: TelemetryFieldKey = {
+	name: 'severity_text',
+	signal: 'logs',
+	fieldContext: 'log',
+	fieldDataType: 'string',
+};
+
+describe('ensureLogsRequiredColumns', () => {
+	it('prepends both timestamp + body to an empty list', () => {
+		expect(ensureLogsRequiredColumns([])).toStrictEqual([TIMESTAMP, BODY]);
+	});
+
+	it('prepends only `body` when `timestamp` is already present', () => {
+		expect(ensureLogsRequiredColumns([TIMESTAMP, ATTR_A])).toStrictEqual([
+			BODY,
+			TIMESTAMP,
+			ATTR_A,
+		]);
+	});
+
+	it('prepends only `timestamp` when `body` is already present', () => {
+		expect(ensureLogsRequiredColumns([BODY, ATTR_A])).toStrictEqual([
+			TIMESTAMP,
+			BODY,
+			ATTR_A,
+		]);
+	});
+
+	it('returns the same array when both are present (no duplicates, original order preserved)', () => {
+		const input = [TIMESTAMP, BODY, ATTR_A, ATTR_B];
+		expect(ensureLogsRequiredColumns(input)).toBe(input);
+	});
+
+	it('preserves a non-default order when both are present', () => {
+		const input = [ATTR_A, BODY, ATTR_B, TIMESTAMP];
+		expect(ensureLogsRequiredColumns(input)).toStrictEqual(input);
+	});
+
+	it('prepends both when neither is present in a list of user attributes', () => {
+		expect(ensureLogsRequiredColumns([ATTR_A, ATTR_B])).toStrictEqual([
+			TIMESTAMP,
+			BODY,
+			ATTR_A,
+			ATTR_B,
+		]);
+	});
+
+	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.filter((c) => c.name === 'timestamp')).toHaveLength(1);
+		expect(result[0]).toStrictEqual(TIMESTAMP);
+	});
+});

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

@@ -232,4 +232,159 @@ 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

@@ -35,6 +35,32 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
+export const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
+
+/**
+ * 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 missing = LOGS_REQUIRED_COLUMNS.filter(
+		(name) => !columns.some((c) => c.name === name),
+	);
+	if (missing.length === 0) {
+		return columns;
+	}
+	const defaultsByName = new Map(
+		defaultLogsSelectedColumns.map((c) => [c.name, c]),
+	);
+	const prepended = missing
+		.map((name) => defaultsByName.get(name))
+		.filter((c): c is TelemetryFieldKey => c !== undefined);
+	return [...prepended, ...columns];
+}
+
 export const defaultTraceSelectedColumns: TelemetryFieldKey[] = [
 	{
 		name: 'service.name',

frontend/src/container/OptionsMenu/types.ts

@@ -40,5 +40,10 @@ export type OptionsMenuConfig = {
 		isFetching: boolean;
 		value: TelemetryFieldKey[];
 		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 { getOptionsFromKeys } from './utils';
+import { buildCompositeKey, getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
@@ -187,30 +187,6 @@ const useOptionsMenu = ({
 			searchedAttributesDataV5?.data.data.keys || {},
 		).flat();
 		if (searchedAttributesDataList.length) {
-			if (dataSource === DataSource.LOGS) {
-				const logsSelectedColumns: TelemetryFieldKey[] =
-					defaultLogsSelectedColumns.map((e) => ({
-						...e,
-						name: e.name,
-						signal: e.signal as SignalType,
-						fieldContext: e.fieldContext as FieldContext,
-						fieldDataType: e.fieldDataType as FieldDataType,
-					}));
-				return [
-					...logsSelectedColumns,
-					...searchedAttributesDataList
-						.filter((attribute) => attribute.name !== 'body')
-						// eslint-disable-next-line sonarjs/no-identical-functions
-						.map((e) => ({
-							...e,
-							name: e.name,
-							signal: e.signal as SignalType,
-							fieldContext: e.fieldContext as FieldContext,
-							fieldDataType: e.fieldDataType as FieldDataType,
-						})),
-				];
-			}
-			// eslint-disable-next-line sonarjs/no-identical-functions
 			return searchedAttributesDataList.map((e) => ({
 				...e,
 				name: e.name,
@@ -297,57 +273,27 @@ const useOptionsMenu = ({
 				return [...acc, column];
 			}, [] as TelemetryFieldKey[]);
 
-			const optionsData: OptionsQuery = {
-				...defaultOptionsQuery,
-				selectColumns: newSelectedColumns,
-				format: preferences?.formatting?.format || defaultOptionsQuery.format,
-				maxLines: preferences?.formatting?.maxLines || defaultOptionsQuery.maxLines,
-				fontSize: preferences?.formatting?.fontSize || defaultOptionsQuery.fontSize,
-			};
-
 			updateColumns(newSelectedColumns);
-			handleRedirectWithOptionsData(optionsData);
 		},
-		[
-			searchedAttributeKeys,
-			selectedColumnKeys,
-			preferences,
-			handleRedirectWithOptionsData,
-			updateColumns,
-		],
+		[searchedAttributeKeys, selectedColumnKeys, preferences, updateColumns],
 	);
 
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				({ name }) => name !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
 				notifications.error({
 					message: 'There must be at least one selected column',
 				});
-			} else {
-				const optionsData: OptionsQuery = {
-					...defaultOptionsQuery,
-					selectColumns: newSelectedColumns || [],
-					format: preferences?.formatting?.format || defaultOptionsQuery.format,
-					maxLines:
-						preferences?.formatting?.maxLines || defaultOptionsQuery.maxLines,
-					fontSize:
-						preferences?.formatting?.fontSize || defaultOptionsQuery.fontSize,
-				};
-				updateColumns(newSelectedColumns || []);
-				handleRedirectWithOptionsData(optionsData);
+				return;
 			}
+
+			updateColumns(newSelectedColumns || []);
 		},
-		[
-			dataSource,
-			notifications,
-			preferences,
-			handleRedirectWithOptionsData,
-			updateColumns,
-		],
+		[dataSource, notifications, preferences, updateColumns],
 	);
 
 	const handleFormatChange = useCallback(
@@ -414,6 +360,20 @@ const useOptionsMenu = ({
 		setSearchText(value);
 	}, []);
 
+	const reorderSelectColumns = useCallback(
+		(orderedIds: string[]): void => {
+			const current = preferences?.columns ?? [];
+			const byCompositeKey = new Map(
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
+			);
+			const reordered = orderedIds
+				.map((id) => byCompositeKey.get(id))
+				.filter((f): f is TelemetryFieldKey => f !== undefined);
+			updateColumns(reordered);
+		},
+		[preferences, updateColumns],
+	);
+
 	const handleFocus = (): void => {
 		setIsFocused(true);
 	};
@@ -436,6 +396,11 @@ const useOptionsMenu = ({
 				onSelect: handleSelectColumns,
 				onRemove: handleRemoveSelectedColumn,
 				onSearch: handleSearchAttribute,
+				onReorder: reorderSelectColumns,
+			},
+			fieldsSelector: {
+				value: preferences?.columns ?? [],
+				onFieldsChange: updateColumns,
 			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
@@ -457,6 +422,8 @@ const useOptionsMenu = ({
 			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
+			reorderSelectColumns,
+			updateColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

frontend/src/container/OptionsMenu/utils.ts

@@ -14,3 +14,9 @@ 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/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.styles.scss

@@ -9,6 +9,19 @@
 		width: 0.2rem;
 		height: 0.2rem;
 	}
+
+	.option-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	.option-meta-data-container {
+		display: flex;
+		gap: 8px;
+		flex-shrink: 0;
+	}
 }
 
 .option-renderer-tooltip {

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -24,7 +24,7 @@ export const StyledCheckOutlined = styled(Check)`
 
 export const TagContainer = styled(Badge)`
 	&&& {
-		display: inline-block;
+		display: flex;
 		border-radius: 3px;
 		padding: 0.1rem 0.2rem;
 		font-weight: 300;

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

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

@@ -0,0 +1,67 @@
+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,4 +1,3 @@
-import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { rest, server } from 'mocks-server/server';
@@ -17,10 +16,6 @@ jest.mock('lib/history', () => ({
 	},
 }));
 
-jest.mock('api/utils', () => ({
-	Logout: jest.fn(),
-}));
-
 const mockSuccessNotification = jest.fn();
 const mockErrorNotification = jest.fn();
 
@@ -70,17 +65,6 @@ 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,11 +1,10 @@
-import { useEffect, useState } from 'react';
+import { 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';
@@ -38,13 +37,6 @@ 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/SideNav/NavItem/NavItem.tsx

@@ -5,7 +5,6 @@ import { Pin, PinOff } from '@signozhq/icons';
 
 import { SidebarItem } from '../sideNav.types';
 
-import './NavItem.styles.scss';
 import './NavItem.styles.scss';
 
 export default function NavItem({
@@ -27,7 +26,7 @@ export default function NavItem({
 	showIcon?: boolean;
 	dataTestId?: string;
 }): JSX.Element {
-	const { label, icon, isBeta, isNew, isEarlyAccess } = item;
+	const { label, icon, isBeta, isNew, isEarlyAccess, tooltip } = item;
 
 	const handleTogglePinClick = (
 		event: React.MouseEvent<SVGSVGElement, MouseEvent>,
@@ -36,7 +35,7 @@ export default function NavItem({
 		onTogglePin?.(item);
 	};
 
-	return (
+	const navItem = (
 		<div
 			className={cx(
 				'nav-item',
@@ -107,6 +106,15 @@ export default function NavItem({
 			</div>
 		</div>
 	);
+
+	// Only non-pinnable items set `tooltip`; it would nest with the pin tooltip.
+	return tooltip ? (
+		<Tooltip title={tooltip} placement="right">
+			{navItem}
+		</Tooltip>
+	) : (
+		navItem
+	);
 }
 
 NavItem.defaultProps = {

frontend/src/container/SideNav/menuItems.tsx

@@ -45,6 +45,7 @@ import {
 } from './sideNav.types';
 import { Style } from '@signozhq/design-tokens';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -97,6 +98,7 @@ export const aiAssistantMenuItem = {
 	icon: <Noz size={16} />,
 	itemKey: 'ai-assistant',
 	isEarlyAccess: true,
+	tooltip: NOZ_TOOLTIP_TITLE,
 };
 
 export const shortcutMenuItem = {

frontend/src/container/SideNav/sideNav.types.ts

@@ -15,6 +15,8 @@ export interface SidebarItem {
 	isBeta?: boolean;
 	isNew?: boolean;
 	isEarlyAccess?: boolean;
+	/** Hover copy for the whole item row (e.g. Noz's early-access tagline). */
+	tooltip?: ReactNode;
 	isPinned?: boolean;
 	children?: SidebarItem[];
 	isExternal?: boolean;

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

@@ -0,0 +1,14 @@
+.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,11 +1,13 @@
-import { memo } from 'react';
-import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings } from '@signozhq/icons';
+import FieldsSelector from 'components/FieldsSelector';
 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 { Container } from './styles';
+import styles from './Controls.module.scss';
 
 function TraceExplorerControls({
 	isLoading,
@@ -14,6 +16,9 @@ function TraceExplorerControls({
 	config,
 	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
+	const { t } = useTranslation(['trace']);
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const {
 		pagination,
 		handleCountItemsPerPageChange,
@@ -22,12 +27,25 @@ function TraceExplorerControls({
 	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
-		<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 }}
-				/>
+		<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}
+					/>
+				</>
 			)}
 
 			<Controls
@@ -41,7 +59,7 @@ function TraceExplorerControls({
 				handleNavigatePrevious={handleNavigatePrevious}
 				showSizeChanger={showSizeChanger}
 			/>
-		</Container>
+		</div>
 	);
 }
 

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

@@ -1,9 +0,0 @@
-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

@@ -30,10 +30,7 @@ import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
-import useDragColumns from 'hooks/useDragColumns';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
@@ -85,10 +82,6 @@ function ListView({
 		},
 	});
 
-	const { draggedColumns, onDragColumns } = useDragColumns<RowData>(
-		LOCALSTORAGE.TRACES_LIST_COLUMNS,
-	);
-
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -100,6 +93,19 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
+	// TEMP — remove after traces moves to TanStack table.
+	// - Drag updates selectColumns; raw queryKey would churn on reorder.
+	// - Trace API fetches only listed columns → add/remove must refetch.
+	// - Sorted-name signature: stable on reorder, changes on add/remove.
+	const selectColumnsSignature = useMemo(
+		() =>
+			(options?.selectColumns ?? [])
+				.map((c) => c.name)
+				.sort()
+				.join(','),
+		[options?.selectColumns],
+	);
+
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -109,7 +115,7 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			options?.selectColumns,
+			selectColumnsSignature,
 			orderBy,
 		],
 		[
@@ -117,7 +123,7 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			options?.selectColumns,
+			selectColumnsSignature,
 			maxTime,
 			minTime,
 			orderBy,
@@ -182,13 +188,14 @@ function ListView({
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const columns = useMemo(() => {
-		const updatedColumns = getListColumns(
-			options?.selectColumns || [],
-			formatTimezoneAdjustedTimestamp,
-		);
-		return getDraggedColumns(updatedColumns, draggedColumns);
-	}, [options?.selectColumns, formatTimezoneAdjustedTimestamp, draggedColumns]);
+	const columns = useMemo(
+		() =>
+			getListColumns(
+				options?.selectColumns || [],
+				formatTimezoneAdjustedTimestamp,
+			),
+		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
+	);
 
 	const transformedQueryTableData = useMemo(
 		() => transformDataWithDate(queryTableData) || [],
@@ -196,9 +203,17 @@ function ListView({
 	);
 
 	const handleDragColumn = useCallback(
-		(fromIndex: number, toIndex: number) =>
-			onDragColumns(columns, fromIndex, toIndex),
-		[columns, onDragColumns],
+		(fromIndex: number, toIndex: number): void => {
+			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) || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
+		},
+		[columns, config],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {

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

@@ -5,6 +5,7 @@ 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';
@@ -83,12 +84,11 @@ 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: `${name}-${fieldDataType}-${fieldContext}`,
+				key: buildCompositeKey(name, fieldContext),
 				width: 145,
 				render: (value, item): JSX.Element => {
 					if (value === '') {

frontend/src/hooks/useIsDashboardV2.ts

@@ -0,0 +1,10 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+export function useIsDashboardV2(): boolean {
+	const { featureFlags } = useAppContext();
+	return Boolean(
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_DASHBOARD_V2)
+			?.active,
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -0,0 +1,5 @@
+function DashboardPageV2(): JSX.Element {
+	return <>DashboardPageV2</>;
+}
+
+export default DashboardPageV2;

frontend/src/pages/DashboardPageV2/index.tsx

@@ -1,8 +1,3 @@
-function DashboardPageV2(): JSX.Element {
-	return (
-		<div>
-			<h1>Dashboard Page V2</h1>
-		</div>
-	);
-}
+import DashboardPageV2 from './DashboardPageV2';
+
 export default DashboardPageV2;

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.module.scss

@@ -0,0 +1,35 @@
+.page {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 8px;
+	gap: 8px;
+	height: 48px;
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	color: var(--l2-foreground);
+}
+
+.text {
+	color: var(--muted-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { AnnouncementBanner } from '@signozhq/ui/announcement-banner';
+import { Typography } from '@signozhq/ui/typography';
+import { LayoutGrid } from '@signozhq/icons';
+
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import DashboardsList from './components/DashboardsList';
+
+import styles from './DashboardsListPageV2.module.scss';
+
+function DashboardsListPageV2(): JSX.Element {
+	const [showBanner, setShowBanner] = useState(true);
+
+	return (
+		<div className={styles.page}>
+			{showBanner && (
+				<AnnouncementBanner
+					type="warning"
+					onClose={(): void => setShowBanner(false)}
+				>
+					You&apos;re on the V2 dashboards page. If you landed here unintentionally,
+					please reach out to Ashwin.
+				</AnnouncementBanner>
+			)}
+			<div className={styles.header}>
+				<div className={styles.headerLeft}>
+					<LayoutGrid size={14} className={styles.icon} />
+					<Typography.Text className={styles.text}>Dashboards</Typography.Text>
+				</div>
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare
+					enableFeedback
+				/>
+			</div>
+			<DashboardsList />
+		</div>
+	);
+}
+
+export default DashboardsListPageV2;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.module.scss

@@ -0,0 +1,28 @@
+.content {
+	display: flex;
+	flex-direction: column;
+}
+
+// Make signoz ghost-Button rows fill the popover and left-align their label.
+.menuItem {
+	width: 100%;
+	justify-content: flex-start;
+}
+
+:global(.dashboardActionsPopover) {
+	:global(.ant-popover-inner) {
+		width: 200px;
+		height: auto;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.tsx

@@ -0,0 +1,103 @@
+import { Popover } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import {
+	Expand,
+	EllipsisVertical,
+	Link2,
+	SquareArrowOutUpRight,
+} from '@signozhq/icons';
+import { useCopyToClipboard } from 'react-use';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
+
+import DeleteActionItem from './DeleteActionItem';
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	link: string;
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+	onView: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+function ActionsPopover({
+	link,
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+	onView,
+}: Props): JSX.Element {
+	const [, setCopy] = useCopyToClipboard();
+
+	return (
+		<Popover
+			content={
+				<div className={styles.content}>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Expand size={14} />}
+						onClick={onView}
+						testId="dashboard-action-view"
+					>
+						View
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<SquareArrowOutUpRight size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							openInNewTab(link);
+						}}
+						testId="dashboard-action-open-new-tab"
+					>
+						Open in New Tab
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Link2 size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							setCopy(getAbsoluteUrl(link));
+						}}
+						testId="dashboard-action-copy-link"
+					>
+						Copy Link
+					</Button>
+					<DeleteActionItem
+						dashboardId={dashboardId}
+						dashboardName={dashboardName}
+						createdBy={createdBy}
+						isLocked={isLocked}
+					/>
+				</div>
+			}
+			placement="bottomRight"
+			arrow={false}
+			rootClassName="dashboardActionsPopover"
+			trigger="click"
+		>
+			<Button
+				size="icon"
+				variant="ghost"
+				color="secondary"
+				testId="dashboard-action-icon"
+				onClick={(e): void => {
+					e.stopPropagation();
+					e.preventDefault();
+				}}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</Popover>
+	);
+}
+
+export default ActionsPopover;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from 'react-query';
+import { Modal, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { CircleAlert, Trash2 } from '@signozhq/icons';
+import { toast } from '@signozhq/ui/sonner';
+import { Divider } from '@signozhq/ui/divider';
+import { Typography } from '@signozhq/ui/typography';
+import deleteDashboard from 'api/v1/dashboards/id/delete';
+import { invalidateListDashboardsV2 } from 'api/generated/services/dashboard';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
+
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+}
+
+function DeleteActionItem({
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+}: Props): JSX.Element {
+	const { t } = useTranslation(['dashboard']);
+	const { user } = useAppContext();
+	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+
+	const isAuthor = user?.email === createdBy;
+	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
+
+	const { mutate: runDelete } = useMutation({
+		mutationFn: () => deleteDashboard({ id: dashboardId }),
+		onSuccess: async () => {
+			toast.success(
+				t('dashboard:delete_dashboard_success', { name: dashboardName }),
+			);
+			await invalidateListDashboardsV2(queryClient);
+		},
+		onError: (error: APIError) => {
+			showErrorModal(error);
+		},
+	});
+
+	const openConfirm = useCallback((): void => {
+		const { destroy } = modal.confirm({
+			title: (
+				<Typography.Title level={5}>
+					Are you sure you want to delete the
+					<span style={{ color: 'var(--danger-background)', fontWeight: 500 }}>
+						{' '}
+						{dashboardName}{' '}
+					</span>
+					dashboard?
+				</Typography.Title>
+			),
+			icon: (
+				<CircleAlert
+					style={{ color: 'var(--danger-background)', marginInlineEnd: '12px' }}
+					size="3xl"
+				/>
+			),
+			okText: 'Delete',
+			okButtonProps: {
+				danger: true,
+				onClick: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+					runDelete(undefined, { onSettled: () => destroy() });
+				},
+			},
+			centered: true,
+		});
+	}, [modal, dashboardName, runDelete]);
+
+	const tooltip = ((): string => {
+		if (!isLocked) {
+			return '';
+		}
+		if (user.role === USER_ROLES.ADMIN || isAuthor) {
+			return t('dashboard:locked_dashboard_delete_tooltip_admin_author');
+		}
+		return t('dashboard:locked_dashboard_delete_tooltip_editor');
+	})();
+
+	return (
+		<>
+			<Divider />
+			<Tooltip placement="left" title={tooltip}>
+				<Button
+					variant="ghost"
+					color="destructive"
+					className={styles.menuItem}
+					prefix={<Trash2 size={14} />}
+					disabled={isDisabled}
+					onClick={(e): void => {
+						e.preventDefault();
+						e.stopPropagation();
+						if (!isDisabled) {
+							openConfirm();
+						}
+					}}
+					testId="dashboard-action-delete"
+				>
+					Delete Dashboard
+				</Button>
+			</Tooltip>
+			{contextHolder}
+		</>
+	);
+}
+
+export default DeleteActionItem;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.module.scss

@@ -0,0 +1,164 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.preview {
+	display: flex;
+	padding: 12px 14.634px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 7.317px;
+	border-radius: 4px;
+	border: 0.915px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.previewHeader {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.previewIcon {
+	height: 14px;
+	width: 14px;
+}
+
+.previewTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 18.293px;
+	letter-spacing: -0.064px;
+}
+
+.previewDetails {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+}
+
+.previewRow {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.formattedTime {
+	display: inline-flex;
+	gap: 8px;
+	align-items: center;
+	color: var(--l2-foreground);
+}
+
+.formattedTimeText {
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+	color: var(--l2-foreground);
+}
+
+.user {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.userTag {
+	width: 12px;
+	height: 12px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+	border-radius: 12.805px;
+	background-color: var(--l1-background);
+}
+
+.userLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+}
+
+.action {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0px 0px 0px 14.634px;
+}
+
+.actionLeft {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.connectionLine {
+	border-top: 1px dashed var(--l1-border);
+	min-width: 20px;
+	flex-grow: 1;
+	margin: 0px 8px;
+}
+
+.actionRight {
+	display: flex;
+	align-items: center;
+}
+
+.saveChanges {
+	display: flex;
+	width: 100%;
+	height: 32px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l1-border);
+}
+
+:global(.configureMetadataModalRoot) {
+	:global(.ant-modal-content) {
+		width: 500px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--card);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+	}
+
+	:global(.ant-modal-header) {
+		background: var(--card);
+		padding: 16px;
+		border-bottom: 1px solid var(--l1-border);
+		margin-bottom: 0px;
+	}
+
+	:global(.ant-modal-body) {
+		padding: 14px 16px;
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0px;
+		padding: 4px 16px 16px 16px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Switch } from '@signozhq/ui/switch';
+import { CalendarClock, Check, Clock4 } from '@signozhq/icons';
+import { get } from 'lodash-es';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { useTimezone } from 'providers/Timezone';
+
+import { lastUpdatedLabel, type DashboardListItem } from '../../utils';
+import {
+	DynamicColumns,
+	useDashboardsListVisibleColumnsStore,
+	type DashboardDynamicColumns,
+} from './useDynamicColumns';
+
+import styles from './ConfigureMetadataModal.module.scss';
+
+interface Props {
+	open: boolean;
+	previewDashboard: DashboardListItem | undefined;
+	onClose: () => void;
+}
+
+function ConfigureMetadataModal({
+	open,
+	previewDashboard,
+	onClose,
+}: Props): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const storedColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+	const setStoredColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.setVisibleColumns,
+	);
+	const [draftColumns, setDraftColumns] =
+		useState<DashboardDynamicColumns>(storedColumns);
+
+	useEffect(() => {
+		if (open) {
+			setDraftColumns(storedColumns);
+		}
+	}, [open, storedColumns]);
+
+	const handleSave = (): void => {
+		setStoredColumns(draftColumns);
+		onClose();
+	};
+
+	const previewImage = previewDashboard?.image || Base64Icons[0];
+	const previewName = previewDashboard?.spec?.display?.name;
+	const previewCreatedBy = previewDashboard?.createdBy;
+	const previewUpdatedBy = previewDashboard?.updatedBy;
+	const previewUpdatedAt = previewDashboard?.updatedAt;
+
+	const formattedCreatedAt = previewDashboard
+		? formatTimezoneAdjustedTimestamp(
+				get(previewDashboard, 'createdAt', '') as string,
+				DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+			)
+		: '';
+
+	return (
+		<Modal
+			open={open}
+			onCancel={onClose}
+			title="Configure Metadata"
+			footer={
+				<Button
+					type="text"
+					icon={<Check size={14} />}
+					className={styles.saveChanges}
+					onClick={handleSave}
+				>
+					Save Changes
+				</Button>
+			}
+			rootClassName="configureMetadataModalRoot"
+		>
+			<div className={styles.content}>
+				<div className={styles.preview}>
+					<section className={styles.previewHeader}>
+						<img
+							src={previewImage}
+							alt="dashboard-image"
+							className={styles.previewIcon}
+						/>
+						<Typography.Text className={styles.previewTitle}>
+							{previewName}
+						</Typography.Text>
+					</section>
+					<section className={styles.previewDetails}>
+						<section className={styles.previewRow}>
+							{draftColumns.createdAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{formattedCreatedAt}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.createdBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewCreatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewCreatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+						<section className={styles.previewRow}>
+							{draftColumns.updatedAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{lastUpdatedLabel(previewUpdatedAt)}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.updatedBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewUpdatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewUpdatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+					</section>
+				</div>
+
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedAt}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedBy}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+export default ConfigureMetadataModal;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/useDynamicColumns.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+export interface DashboardDynamicColumns {
+	createdAt: boolean;
+	createdBy: boolean;
+	updatedAt: boolean;
+	updatedBy: boolean;
+}
+
+export enum DynamicColumns {
+	CREATED_AT = 'createdAt',
+	CREATED_BY = 'createdBy',
+	UPDATED_AT = 'updatedAt',
+	UPDATED_BY = 'updatedBy',
+}
+
+const DEFAULT_COLUMNS: DashboardDynamicColumns = {
+	createdAt: true,
+	createdBy: true,
+	updatedAt: false,
+	updatedBy: false,
+};
+
+interface DashboardsListVisibleColumnsState {
+	visibleColumns: DashboardDynamicColumns;
+	setVisibleColumns: (next: DashboardDynamicColumns) => void;
+}
+
+export const useDashboardsListVisibleColumnsStore =
+	create<DashboardsListVisibleColumnsState>()(
+		persist(
+			(set) => ({
+				visibleColumns: DEFAULT_COLUMNS,
+				setVisibleColumns: (next): void => {
+					set({ visibleColumns: next });
+				},
+			}),
+			{
+				name: LOCALSTORAGE.DASHBOARDS_LIST_VISIBLE_COLUMNS,
+				merge: (persisted, current) => ({
+					...current,
+					visibleColumns: {
+						...DEFAULT_COLUMNS,
+						...((persisted as Partial<DashboardsListVisibleColumnsState>)
+							?.visibleColumns ?? {}),
+					},
+				}),
+			},
+		),
+	);

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.module.scss

@@ -0,0 +1,34 @@
+.menuItem {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.templatesItem {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+}
+
+.primaryButton {
+	padding: 6px 12px;
+}
+
+.textButton {
+	display: flex;
+	width: 153px;
+	align-items: center;
+	height: 32px;
+	padding: 6px 12px;
+	justify-content: center;
+	gap: 6px;
+	border-radius: 2px;
+	background: var(--primary-background);
+	color: var(--l1-foreground);
+}
+
+:global(.createDashboardMenuOverlay) {
+	width: 200px;
+}

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Dropdown to @signozhq/ui/dropdown-menu
+import { Button, Dropdown, MenuProps } from 'antd';
+import cx from 'classnames';
+import logEvent from 'api/common/logEvent';
+import {
+	ExternalLink,
+	Github,
+	LayoutGrid,
+	Plus,
+	Radius,
+} from '@signozhq/icons';
+
+import styles from './CreateDashboardDropdown.module.scss';
+
+interface Props {
+	canCreate: boolean;
+	onCreate: () => void;
+	onImportJSON: () => void;
+	variant?: 'primary' | 'text';
+}
+
+const TEMPLATES_HREF =
+	'https://signoz.io/docs/dashboards/dashboard-templates/overview/';
+
+function CreateDashboardDropdown({
+	canCreate,
+	onCreate,
+	onImportJSON,
+	variant = 'primary',
+}: Props): JSX.Element {
+	const items: MenuProps['items'] = useMemo(() => {
+		const menuItems: MenuProps['items'] = [
+			{
+				key: 'import-json',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="import-json-menu-cta"
+						onClick={onImportJSON}
+					>
+						<Radius size={14} /> Import JSON
+					</div>
+				),
+			},
+			{
+				key: 'view-templates',
+				label: (
+					<a
+						href={TEMPLATES_HREF}
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="view-templates-menu-cta"
+					>
+						<div className={styles.templatesItem}>
+							<div className={styles.menuItem}>
+								<Github size={14} /> View templates
+							</div>
+							<ExternalLink size={14} />
+						</div>
+					</a>
+				),
+			},
+		];
+
+		if (canCreate) {
+			menuItems.unshift({
+				key: 'create-dashboard',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="create-dashboard-menu-cta"
+						onClick={onCreate}
+					>
+						<LayoutGrid size={14} /> Create dashboard
+					</div>
+				),
+			});
+		}
+
+		return menuItems;
+	}, [canCreate, onCreate, onImportJSON]);
+
+	return (
+		<Dropdown
+			overlayClassName="createDashboardMenuOverlay"
+			menu={{ items }}
+			placement="bottomRight"
+			trigger={['click']}
+		>
+			{variant === 'primary' ? (
+				<Button
+					type="primary"
+					className={cx('periscope-btn primary', styles.primaryButton)}
+					icon={<Plus size={14} />}
+					data-testid="new-dashboard-cta"
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New dashboard
+				</Button>
+			) : (
+				<Button
+					type="text"
+					className={styles.textButton}
+					icon={<Plus size={14} />}
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New Dashboard
+				</Button>
+			)}
+		</Dropdown>
+	);
+}
+
+export default CreateDashboardDropdown;

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.module.scss

@@ -0,0 +1,152 @@
+.row {
+	padding: 12px 16px 16px 16px;
+	border: 1px solid var(--l1-border);
+	border-top: none;
+	background: var(--l2-background);
+	cursor: pointer;
+}
+
+.titleWithAction {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	min-height: 24px;
+}
+
+.titleBlock {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	line-height: 20px;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.titleLink {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	display: inline-block;
+	line-height: 20px;
+	height: 14px;
+	width: 14px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.tagsWithActions {
+	display: flex;
+	align-items: center;
+	flex: 0 1 auto;
+	min-width: 0;
+	justify-content: flex-end;
+}
+
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	justify-content: flex-end;
+}
+
+.tag {
+	display: flex;
+	padding: 4px 8px;
+	justify-content: center;
+	align-items: center;
+	gap: 4px;
+	height: 28px;
+	border-radius: 20px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	color: var(--bg-sienna-400);
+	text-align: center;
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	margin-inline-end: 0px;
+}
+
+.details {
+	margin-top: 12px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12px 24px;
+}
+
+.createdAt {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.createdBy {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.avatar {
+	width: 14px;
+	height: 14px;
+	border-radius: 50px;
+	background: var(--l1-border);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.avatarText {
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+}
+
+.byLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.updatedBy {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+:global(.titleTooltipOverlay) {
+	:global(.ant-tooltip-content) :global(.ant-tooltip-inner) {
+		max-height: 400px;
+		overflow: auto;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.tsx

@@ -0,0 +1,154 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Badge } from '@signozhq/ui/badge';
+import { CalendarClock } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { generatePath } from 'react-router-dom';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useTimezone } from 'providers/Timezone';
+import { isModifierKeyPressed } from 'utils/app';
+
+import type { DashboardListItem } from '../../utils';
+import { lastUpdatedLabel, tagsToStrings } from '../../utils';
+import ActionsPopover from '../ActionsPopover/ActionsPopover';
+
+import styles from './DashboardRow.module.scss';
+
+interface Props {
+	dashboard: DashboardListItem;
+	index: number;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+}
+
+function DashboardRow({
+	dashboard,
+	index,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+}: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const id = dashboard.id;
+	const name = dashboard.spec?.display?.name ?? '';
+	const image = dashboard.image || Base64Icons[0];
+	const createdBy = dashboard.createdBy ?? '';
+	const updatedBy = dashboard.updatedBy ?? '';
+	const createdAt = dashboard.createdAt ?? '';
+	const updatedAt = dashboard.updatedAt ?? '';
+	const isLocked = !!dashboard.locked;
+	const tags = tagsToStrings(dashboard.tags);
+
+	const link = generatePath(ROUTES.DASHBOARD, { dashboardId: id });
+	const formattedCreatedAt = formatTimezoneAdjustedTimestamp(
+		createdAt,
+		DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+	);
+
+	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
+		event.stopPropagation();
+		safeNavigate(link, { newTab: isModifierKeyPressed(event) });
+		logEvent('Dashboard List: Clicked on dashboard', {
+			dashboardId: id,
+			dashboardName: name,
+		});
+	};
+
+	return (
+		<div className={styles.row} onClick={onClickHandler}>
+			<div className={styles.titleWithAction}>
+				<div className={styles.titleBlock}>
+					<Tooltip
+						title={name.length > 50 ? name : ''}
+						placement="left"
+						overlayClassName="titleTooltipOverlay"
+					>
+						<div className={styles.titleLink} onClick={onClickHandler}>
+							<img src={image} alt="dashboard-image" className={styles.icon} />
+							<Typography.Text
+								data-testid={`dashboard-title-${index}`}
+								className={styles.title}
+							>
+								{name}
+							</Typography.Text>
+						</div>
+					</Tooltip>
+				</div>
+
+				<div className={styles.tagsWithActions}>
+					{tags.length > 0 && (
+						<div className={styles.tags}>
+							{tags.slice(0, 3).map((tag) => (
+								<Badge className={styles.tag} key={tag}>
+									{tag}
+								</Badge>
+							))}
+							{tags.length > 3 && (
+								<Badge className={styles.tag} key={tags[3]}>
+									+ <span> {tags.length - 3} </span>
+								</Badge>
+							)}
+						</div>
+					)}
+				</div>
+
+				{canAct && (
+					<ActionsPopover
+						link={link}
+						dashboardId={id}
+						dashboardName={name}
+						createdBy={createdBy}
+						isLocked={isLocked}
+						onView={onClickHandler}
+					/>
+				)}
+			</div>
+			<div className={styles.details}>
+				<div className={styles.createdAt}>
+					<CalendarClock size={14} />
+					<Typography.Text>{formattedCreatedAt}</Typography.Text>
+				</div>
+
+				{createdBy && (
+					<div className={styles.createdBy}>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{createdBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{createdBy}</Typography.Text>
+					</div>
+				)}
+
+				{showUpdatedAt && (
+					<div className={styles.createdAt}>
+						<CalendarClock size={14} />
+						<Typography.Text>{lastUpdatedLabel(updatedAt)}</Typography.Text>
+					</div>
+				)}
+
+				{updatedBy && showUpdatedBy && (
+					<div className={styles.updatedBy}>
+						<Typography.Text className={styles.byLabel}>
+							Last Updated By -
+						</Typography.Text>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{updatedBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{updatedBy}</Typography.Text>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DashboardRow;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.module.scss

@@ -0,0 +1,96 @@
+.container {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.viewContent {
+	width: calc(100% - 30px);
+	max-width: 836px;
+
+	:global(.ant-table-wrapper) :global(.ant-table-cell) {
+		padding: 0 !important;
+		border: none !important;
+		background: var(--l1-background) !important;
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row)
+		:global(.ant-table-cell)
+		> div {
+		// Row content is the only child of the td; it carries the borders.
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row:last-child)
+		:global(.ant-table-cell)
+		> div {
+		border-radius: 0 0 6px 6px;
+	}
+
+	:global(.ant-pagination-item) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.ant-pagination-item) > a {
+		color: var(--l2-foreground);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: 20px;
+	}
+
+	:global(.ant-pagination-item-active) {
+		background-color: var(--primary-background);
+	}
+
+	:global(.ant-pagination-item-active) > a {
+		color: var(--foreground) !important;
+		font-weight: var(--font-weight-medium);
+	}
+}
+
+.titleContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-lg);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 28px;
+	letter-spacing: -0.09px;
+}
+
+.subtitle {
+	color: var(--l2-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.integrationsContainer {
+	margin: 16px 0;
+}
+
+.integrationsContent {
+	max-width: 100%;
+	width: 100%;
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 16px 0;
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import logEvent from 'api/common/logEvent';
+import {
+	createDashboardV2,
+	useListDashboardsV2,
+} from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { toast } from '@signozhq/ui/sonner';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import {
+	usePage,
+	useSearch,
+	useSortColumn,
+	useSortOrder,
+	type SortColumn,
+	type SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+import type { DashboardListItem } from '../../utils';
+import ConfigureMetadataModal from '../ConfigureMetadataModal/ConfigureMetadataModal';
+import { useDashboardsListVisibleColumnsStore } from '../ConfigureMetadataModal/useDynamicColumns';
+import CreateDashboardDropdown from '../CreateDashboardDropdown/CreateDashboardDropdown';
+import ImportJSONModal from '../ImportJSONModal/ImportJSONModal';
+import ListHeader from '../ListHeader/ListHeader';
+import EmptyState from '../states/EmptyState/EmptyState';
+import ErrorState from '../states/ErrorState/ErrorState';
+import LoadingState from '../states/LoadingState/LoadingState';
+import NoResultsState from '../states/NoResultsState/NoResultsState';
+import SearchBar from '../SearchBar/SearchBar';
+import DashboardsListContent from './DashboardsListContent';
+
+import styles from './DashboardsList.module.scss';
+
+const PAGE_SIZE = 20;
+
+function DashboardsList(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation('dashboard');
+	const { showErrorModal } = useErrorModal();
+	const { isCloudUser } = useGetTenantLicense();
+
+	const { user } = useAppContext();
+	const [action, canCreateNewDashboard] = useComponentPermission(
+		['action', 'create_new_dashboards'],
+		user.role,
+	);
+
+	const [searchString, setSearchString] = useSearch();
+	const [sortColumn, setSortColumn] = useSortColumn();
+	const [sortOrder, setSortOrder] = useSortOrder();
+	const [page, setPage] = usePage();
+
+	const [searchInput, setSearchInput] = useState(searchString);
+
+	// Keep the local input in sync with external searchString changes
+	// (browser back/forward, deep link). User typing only mutates
+	// searchInput, so this won't fight with in-flight edits.
+	useEffect(() => {
+		setSearchInput(searchString);
+	}, [searchString]);
+
+	const handleSubmitSearch = useCallback((): void => {
+		const next = searchInput.trim();
+		if (next === searchString) {
+			return;
+		}
+		void setSearchString(next);
+		void setPage(1);
+	}, [searchInput, searchString, setSearchString, setPage]);
+
+	const listParams = useMemo(
+		() => ({
+			query: searchString.trim() || undefined,
+			sort: sortColumn,
+			order: sortOrder,
+			limit: PAGE_SIZE,
+			offset: (page - 1) * PAGE_SIZE,
+		}),
+		[searchString, sortColumn, sortOrder, page],
+	);
+
+	const {
+		data: response,
+		isLoading,
+		isFetching,
+		error,
+		refetch,
+	} = useListDashboardsV2(listParams, { query: { keepPreviousData: true } });
+
+	const apiError = useMemo(
+		() => (error ? toAPIError(error) : undefined),
+		[error],
+	);
+	const errorHttpStatus = apiError?.getHttpStatusCode();
+	const errorMessage = apiError?.getErrorMessage();
+
+	const dashboards = useMemo<DashboardListItem[]>(
+		() => response?.data?.dashboards ?? [],
+		[response],
+	);
+	const total = response?.data?.total ?? 0;
+
+	const [isImportOpen, setIsImportOpen] = useState(false);
+	const [isConfigureOpen, setIsConfigureOpen] = useState(false);
+	const visibleColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+
+	const [creating, setCreating] = useState(false);
+
+	const handleCreateNew = useCallback(async (): Promise<void> => {
+		try {
+			logEvent('Dashboard List: Create dashboard clicked', {});
+			setCreating(true);
+			const created = await createDashboardV2({
+				schemaVersion: 'v6',
+				// Backend requires `name` (immutable, server-side identifier);
+				// asking it to generate one keeps the UI's "new dashboard" flow.
+				generateName: true,
+				tags: null,
+				spec: {
+					display: { name: t('new_dashboard_title', { ns: 'dashboard' }) },
+				},
+			});
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: created.data.id }),
+			);
+		} catch (e) {
+			showErrorModal(e as APIError);
+			toast.error((e as AxiosError).toString() || 'Failed to create dashboard');
+		} finally {
+			setCreating(false);
+		}
+	}, [safeNavigate, showErrorModal, t]);
+
+	const handleImportToggle = useCallback((): void => {
+		logEvent('Dashboard List V2: Import JSON clicked', {});
+		setIsImportOpen((s) => !s);
+	}, []);
+
+	const onSortChange = useCallback(
+		(column: SortColumn): void => {
+			void setSortColumn(column);
+			void setPage(1);
+		},
+		[setSortColumn, setPage],
+	);
+
+	const onOrderChange = useCallback(
+		(order: SortOrder): void => {
+			void setSortOrder(order);
+			void setPage(1);
+		},
+		[setSortOrder, setPage],
+	);
+
+	const visitLoggedRef = useRef(false);
+	useEffect(() => {
+		if (!visitLoggedRef.current && !isLoading && response !== undefined) {
+			logEvent('Dashboard List V2: Page visited', { number: dashboards.length });
+			visitLoggedRef.current = true;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoading]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.viewContent}>
+				<div className={styles.titleContainer}>
+					<Typography.Title className={styles.title}>Dashboards</Typography.Title>
+					<Typography.Text className={styles.subtitle}>
+						Create and manage dashboards for your workspace.
+					</Typography.Text>
+					{isCloudUser && (
+						<div className={styles.integrationsContainer}>
+							<div className={styles.integrationsContent}>
+								<RequestDashboardBtn />
+							</div>
+						</div>
+					)}
+				</div>
+
+				{isLoading ? (
+					<LoadingState />
+				) : !error && dashboards.length === 0 && !searchString && page === 1 ? (
+					<EmptyState
+						createDropdown={
+							canCreateNewDashboard ? (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+									variant="text"
+								/>
+							) : null
+						}
+					/>
+				) : (
+					<>
+						<div className={styles.toolbar}>
+							<SearchBar
+								value={searchInput}
+								onChange={setSearchInput}
+								onSubmit={handleSubmitSearch}
+							/>
+							{canCreateNewDashboard && (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+								/>
+							)}
+						</div>
+
+						{error ? (
+							<ErrorState
+								isCloudUser={!!isCloudUser}
+								onRetry={(): void => {
+									refetch();
+								}}
+								httpStatus={errorHttpStatus}
+								errorMessage={errorMessage}
+							/>
+						) : dashboards.length === 0 ? (
+							<NoResultsState searchString={searchInput} />
+						) : (
+							<>
+								<ListHeader
+									sortColumn={sortColumn}
+									onSortChange={onSortChange}
+									sortOrder={sortOrder}
+									onOrderChange={onOrderChange}
+									onConfigureMetadata={(): void => setIsConfigureOpen(true)}
+								/>
+								<DashboardsListContent
+									dashboards={dashboards}
+									page={page}
+									pageSize={PAGE_SIZE}
+									total={total}
+									onPageChange={setPage}
+									canAct={!!action}
+									showUpdatedAt={visibleColumns.updatedAt}
+									showUpdatedBy={visibleColumns.updatedBy}
+									loading={creating || isFetching}
+								/>
+							</>
+						)}
+					</>
+				)}
+
+				<ImportJSONModal
+					open={isImportOpen}
+					onClose={(): void => setIsImportOpen(false)}
+				/>
+
+				<ConfigureMetadataModal
+					open={isConfigureOpen}
+					previewDashboard={dashboards[0]}
+					onClose={(): void => setIsConfigureOpen(false)}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsListContent.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Table } from 'antd';
+import type { TableProps } from 'antd/lib';
+
+import type { DashboardListItem } from '../../utils';
+import DashboardRow from '../DashboardRow/DashboardRow';
+
+interface Props {
+	dashboards: DashboardListItem[];
+	page: number;
+	pageSize: number;
+	total: number;
+	onPageChange: (page: number) => void;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+	loading: boolean;
+}
+
+function DashboardsListContent({
+	dashboards,
+	page,
+	pageSize,
+	total,
+	onPageChange,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+	loading,
+}: Props): JSX.Element {
+	const columns: TableProps<DashboardListItem>['columns'] = useMemo(
+		() => [
+			{
+				title: 'Dashboards',
+				key: 'dashboard',
+				render: (_, dashboard, index): JSX.Element => (
+					<DashboardRow
+						dashboard={dashboard}
+						index={index}
+						canAct={canAct}
+						showUpdatedAt={showUpdatedAt}
+						showUpdatedBy={showUpdatedBy}
+					/>
+				),
+			},
+		],
+		[canAct, showUpdatedAt, showUpdatedBy],
+	);
+
+	const paginationConfig = total > pageSize && {
+		pageSize,
+		showSizeChanger: false,
+		onChange: onPageChange,
+		current: page,
+		total,
+		hideOnSinglePage: true,
+	};
+
+	return (
+		<Table
+			columns={columns}
+			dataSource={dashboards.map((d) => ({ ...d, key: d.id }))}
+			showSorterTooltip
+			loading={loading}
+			showHeader={false}
+			pagination={paginationConfig}
+		/>
+	);
+}
+
+export default DashboardsListContent;