chore: move flamegraph after aggregation to reduce diff

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

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

docs/api/openapi.yml

@@ -6516,6 +6516,58 @@ components:
       - attribute
       - resource
       type: string
+    SpantypesFlamegraphSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          type: object
+        durationNano:
+          minimum: 0
+          type: integer
+        event:
+          items:
+            $ref: '#/components/schemas/SpantypesEvent'
+          nullable: true
+          type: array
+        hasError:
+          type: boolean
+        level:
+          format: int64
+          type: integer
+        name:
+          type: string
+        parentSpanId:
+          type: string
+        resource:
+          additionalProperties:
+            type: string
+          type: object
+        serviceName:
+          type: string
+        spanId:
+          type: string
+        timestamp:
+          minimum: 0
+          type: integer
+      type: object
+    SpantypesGettableFlamegraphTrace:
+      properties:
+        endTimestampMillis:
+          format: int64
+          type: integer
+        hasMore:
+          type: boolean
+        spans:
+          items:
+            items:
+              $ref: '#/components/schemas/SpantypesFlamegraphSpan'
+            type: array
+          nullable: true
+          type: array
+        startTimestampMillis:
+          format: int64
+          type: integer
+      type: object
     SpantypesGettableSpanMapperGroups:
       properties:
         items:
@@ -6525,6 +6577,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 +6624,24 @@ components:
           nullable: true
           type: array
       type: object
+    SpantypesOtelSpanRef:
+      properties:
+        refType:
+          type: string
+        spanId:
+          type: string
+        traceId:
+          type: string
+      type: object
+    SpantypesPostableFlamegraph:
+      properties:
+        selectFields:
+          items:
+            $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          type: array
+        selectedSpanId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -6590,6 +6669,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 +6702,9 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      required:
+      - field
+      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6627,6 +6718,10 @@ components:
             type: integer
           nullable: true
           type: object
+      required:
+      - field
+      - aggregation
+      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -6810,6 +6905,10 @@ components:
           type: string
         parent_span_id:
           type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
         resource:
           additionalProperties:
             type: string
@@ -6835,6 +6934,8 @@ components:
           type: string
         trace_state:
           type: string
+      required:
+      - references
       type: object
     TagtypesPostableTag:
       properties:
@@ -12265,6 +12366,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
@@ -19918,6 +20088,75 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
+  /api/v3/traces/{traceID}/flamegraph:
+    post:
+      deprecated: false
+      description: Returns the flamegraph view of spans for a given trace ID.
+      operationId: GetFlamegraph
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableFlamegraph'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableFlamegraphTrace'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get flamegraph view for a trace
+      tags:
+      - tracedetail
   /api/v3/traces/{traceID}/waterfall:
     post:
       deprecated: false

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

@@ -7675,6 +7675,81 @@ export enum SpantypesFieldContextDTO {
 	attribute = 'attribute',
 	resource = 'resource',
 }
+export type SpantypesFlamegraphSpanDTOAttributes = { [key: string]: unknown };
+
+export type SpantypesFlamegraphSpanDTOResource = { [key: string]: string };
+
+export interface SpantypesFlamegraphSpanDTO {
+	/**
+	 * @type object
+	 */
+	attributes?: SpantypesFlamegraphSpanDTOAttributes;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	durationNano?: number;
+	/**
+	 * @type array,null
+	 */
+	event?: SpantypesEventDTO[] | null;
+	/**
+	 * @type boolean
+	 */
+	hasError?: boolean;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	level?: number;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	parentSpanId?: string;
+	/**
+	 * @type object
+	 */
+	resource?: SpantypesFlamegraphSpanDTOResource;
+	/**
+	 * @type string
+	 */
+	serviceName?: string;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	timestamp?: number;
+}
+
+export interface SpantypesGettableFlamegraphTraceDTO {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	endTimestampMillis?: number;
+	/**
+	 * @type boolean
+	 */
+	hasMore?: boolean;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesFlamegraphSpanDTO[][] | null;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	startTimestampMillis?: number;
+}
+
 export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
@@ -7753,12 +7828,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 +7952,10 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	parent_span_id?: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -7950,6 +8051,17 @@ export interface SpantypesGettableWaterfallTraceDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
+export interface SpantypesPostableFlamegraphDTO {
+	/**
+	 * @type array
+	 */
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	/**
+	 * @type string
+	 */
+	selectedSpanId?: string;
+}
+
 export enum SpantypesSpanMapperOperationDTO {
 	move = 'move',
 	copy = 'copy',
@@ -8000,8 +8112,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 +9463,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
@@ -10233,6 +10363,17 @@ export type GetHosts200 = {
 	status: string;
 };
 
+export type GetFlamegraphPathParameters = {
+	traceID: string;
+};
+export type GetFlamegraph200 = {
+	data: SpantypesGettableFlamegraphTraceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetWaterfallPathParameters = {
 	traceID: string;
 };

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

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

frontend/src/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/useLogsTableColumns.tsx

@@ -69,6 +69,8 @@ export function useLogsTableColumns({
 					id: 'timestamp',
 					header: 'Timestamp',
 					accessorFn: (log): unknown => log.timestamp,
+					canBeHidden: false,
+					enableRemove: false,
 					width: { default: 170, min: 170 },
 					cell: ({ value }): ReactElement => {
 						const ts = value as string | number;
@@ -92,6 +94,7 @@ export function useLogsTableColumns({
 					header: 'Body',
 					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
+					enableRemove: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (
 						<TanStackTable.Text

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(),
 					},
 				}}
 			/>,

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

@@ -322,9 +322,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/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/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/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,16 +77,7 @@ 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,
@@ -100,30 +85,6 @@ function LiveLogsList({
 		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 +198,7 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							onColumnRemove={handleColumnRemove}
+							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,28 +91,15 @@ 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({
@@ -161,20 +142,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 +204,8 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-					onColumnRemove={handleColumnRemove}
+					onColumnRemove={config?.addColumn?.onRemove}
+					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}
 					cellTypographySize={options.fontSize}
 					data={logs}

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/constants.ts

@@ -35,6 +35,32 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
+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,6 @@ export type OptionsMenuConfig = {
 		isFetching: boolean;
 		value: TelemetryFieldKey[];
 		onRemove: (key: string) => void;
+		onReorder: (orderedIds: string[]) => void;
 	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -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,24 +273,9 @@ 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(
@@ -327,27 +288,12 @@ const useOptionsMenu = ({
 				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,18 @@ const useOptionsMenu = ({
 		setSearchText(value);
 	}, []);
 
+	const reorderSelectColumns = useCallback(
+		(orderedIds: string[]): void => {
+			const current = preferences?.columns ?? [];
+			const byName = new Map(current.map((f) => [f.name, f]));
+			const reordered = orderedIds
+				.map((id) => byName.get(id))
+				.filter((f): f is TelemetryFieldKey => f !== undefined);
+			updateColumns(reordered);
+		},
+		[preferences, updateColumns],
+	);
+
 	const handleFocus = (): void => {
 		setIsFocused(true);
 	};
@@ -436,6 +394,7 @@ const useOptionsMenu = ({
 				onSelect: handleSelectColumns,
 				onRemove: handleRemoveSelectedColumn,
 				onSearch: handleSearchAttribute,
+				onReorder: reorderSelectColumns,
 			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
@@ -457,6 +416,7 @@ const useOptionsMenu = ({
 			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
+			reorderSelectColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

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/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/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,16 @@ 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);
+			const orderedIds = reordered
+				.map((c) => String(('dataIndex' in c && c.dataIndex) || c.key || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
+		},
+		[columns, config],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {

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;

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

@@ -0,0 +1,3 @@
+import DashboardsList from './DashboardsList';
+
+export default DashboardsList;

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

@@ -0,0 +1,73 @@
+.contentContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.contentHeader {
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.jsonError {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.errorText {
+	color: var(--warning-background);
+}
+
+.actions {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+:global(.importJsonModalWrapper) {
+	:global(.ant-modal-content) {
+		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: 0;
+	}
+
+	:global(.margin) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.view-lines) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0;
+		padding: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}

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

@@ -0,0 +1,223 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
+import { red } from '@ant-design/colors';
+import MEditor, { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Flex, Modal, Upload, UploadProps } from 'antd';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	CircleAlert,
+	ExternalLink,
+	Github,
+	MonitorDot,
+	MoveRight,
+	Sparkles,
+} from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { createDashboardV2 } from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import sampleDashboard from './sampleDashboard.json';
+
+import styles from './ImportJSONModal.module.scss';
+import { normalizeToPostable } from './ImportJSONModalUtils';
+
+interface Props {
+	open: boolean;
+	onClose: () => void;
+}
+
+function ImportJSONModal({ open, onClose }: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation(['dashboard', 'common']);
+	const [isUploadError, setIsUploadError] = useState(false);
+	const [isCreateError, setIsCreateError] = useState(false);
+	const [isCreating, setIsCreating] = useState(false);
+	const [editorValue, setEditorValue] = useState('');
+
+	const { showErrorModal } = useErrorModal();
+	const isDarkMode = useIsDarkMode();
+
+	const handleUpload: UploadProps['onChange'] = (info) => {
+		const lastFile = info.fileList[info.fileList.length - 1];
+		if (!lastFile?.originFileObj) {
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = (event): void => {
+			try {
+				const target = event.target?.result;
+				if (!target) {
+					return;
+				}
+				const parsed = JSON.parse(target.toString());
+				setEditorValue(JSON.stringify(parsed, null, 2));
+				setIsUploadError(false);
+			} catch {
+				setIsUploadError(true);
+			}
+		};
+		reader.readAsText(lastFile.originFileObj);
+	};
+
+	const handleImport = async (): Promise<void> => {
+		try {
+			setIsCreating(true);
+			logEvent('Dashboard List V2: Import and next clicked', {});
+			const parsed = JSON.parse(editorValue) as Record<string, unknown>;
+			const payload = normalizeToPostable(parsed);
+			const response = await createDashboardV2(payload);
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
+			);
+			logEvent('Dashboard List V2: New dashboard imported successfully', {
+				dashboardId: response.data?.id,
+			});
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsCreateError(true);
+			toast.error(
+				error instanceof Error ? error.message : t('error_loading_json'),
+			);
+		} finally {
+			setIsCreating(false);
+		}
+	};
+
+	const handleClose = (): void => {
+		setIsUploadError(false);
+		setIsCreateError(false);
+		onClose();
+	};
+
+	const setEditorTheme = (monaco: Monaco): void => {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: { 'editor.background': Color.BG_INK_300 },
+		});
+	};
+
+	const renderError = (msg: string): JSX.Element => (
+		<div className={styles.jsonError}>
+			<CircleAlert size="md" color={red[7]} />
+			<Typography className={styles.errorText}>{msg}</Typography>
+		</div>
+	);
+
+	return (
+		<Modal
+			wrapClassName="importJsonModalWrapper"
+			open={open}
+			centered
+			closable
+			keyboard
+			maskClosable
+			onCancel={handleClose}
+			destroyOnClose
+			width="60vw"
+			footer={
+				<div className={styles.footer}>
+					{isCreateError && renderError(t('error_loading_json'))}
+					{isUploadError && renderError(t('error_upload_json'))}
+
+					<div className={styles.actions}>
+						<Flex gap="small">
+							<Upload
+								accept=".json"
+								showUploadList={false}
+								multiple={false}
+								onChange={handleUpload}
+								beforeUpload={(): boolean => false}
+								action="none"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<MonitorDot size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List V2: Upload JSON file clicked', {});
+									}}
+								>
+									{t('upload_json_file')}
+								</Button>
+							</Upload>
+							<Button
+								type="default"
+								className="periscope-btn"
+								icon={<Sparkles size={14} />}
+								onClick={(): void => {
+									setEditorValue(JSON.stringify(sampleDashboard, null, 2));
+									setIsUploadError(false);
+									logEvent('Dashboard List V2: Load sample clicked', {});
+								}}
+							>
+								Load sample
+							</Button>
+							<a
+								href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<Github size={14} />}
+								>
+									{t('view_template')}&nbsp;
+									<ExternalLink size={14} />
+								</Button>
+							</a>
+						</Flex>
+
+						<Button
+							onClick={handleImport}
+							loading={isCreating}
+							className="periscope-btn primary"
+							type="primary"
+						>
+							{t('import_and_next')} &nbsp; <MoveRight size={14} />
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className={styles.contentContainer}>
+				<div className={styles.contentHeader}>
+					<Typography.Text>{t('import_json')}</Typography.Text>
+				</div>
+				<MEditor
+					language="json"
+					height="40vh"
+					onChange={(newValue): void => setEditorValue(newValue || '')}
+					value={editorValue}
+					options={{
+						scrollbar: { alwaysConsumeMouseWheel: false },
+						minimap: { enabled: false },
+						fontSize: 14,
+						fontFamily: 'Space Mono',
+					}}
+					theme={isDarkMode ? 'my-theme' : 'light'}
+					onMount={(_, monaco): void => {
+						document.fonts.ready.then(() => {
+							monaco.editor.remeasureFonts();
+						});
+					}}
+					beforeMount={setEditorTheme}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default ImportJSONModal;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModalUtils.ts

@@ -0,0 +1,50 @@
+import {
+	DashboardtypesDashboardSpecDTO,
+	DashboardtypesPostableDashboardV2DTO,
+	TagtypesPostableTagDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Accept either a complete PostableDashboardV2 (flat shape with `spec` and
+// top-level `name` / `image` / `tags` / `schemaVersion`) or a bare spec — wrap
+// the latter with defaults so users can paste either shape that exists in the
+// wild (e.g. testdata/perses.json is a bare spec). The legacy nested
+// `{ metadata: { ... }, spec }` shape is also accepted and flattened.
+//
+// The backend requires `name` (immutable identifier); if the payload doesn't
+// carry one, fall back to `generateName: true` so the server assigns one.
+export function normalizeToPostable(
+	parsed: Record<string, unknown>,
+): DashboardtypesPostableDashboardV2DTO {
+	const hasSpec = 'spec' in parsed;
+	const legacyMeta = parsed.metadata as
+		| {
+				schemaVersion?: string;
+				name?: string;
+				image?: string;
+				tags?: TagtypesPostableTagDTO[] | null;
+		  }
+		| undefined;
+
+	const resolvedName = (parsed.name as string | undefined) ?? legacyMeta?.name;
+
+	if (hasSpec) {
+		return {
+			schemaVersion:
+				(parsed.schemaVersion as string) || legacyMeta?.schemaVersion || 'v6',
+			...(resolvedName ? { name: resolvedName } : { generateName: true }),
+			image: (parsed.image as string) ?? legacyMeta?.image,
+			tags:
+				(parsed.tags as TagtypesPostableTagDTO[] | null) ??
+				legacyMeta?.tags ??
+				null,
+			spec: parsed.spec as DashboardtypesDashboardSpecDTO,
+		};
+	}
+
+	return {
+		schemaVersion: 'v6',
+		generateName: true,
+		tags: null,
+		spec: parsed as unknown as DashboardtypesDashboardSpecDTO,
+	};
+}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/sampleDashboard.json

@@ -0,0 +1,154 @@
+{
+    "display": {
+        "name": "NV dashboard with sections",
+        "description": ""
+    },
+    "datasources": {
+        "SigNozDatasource": {
+            "default": true,
+            "plugin": {
+                "kind": "signoz/Datasource",
+                "spec": {}
+            }
+        }
+    },
+    "panels": {
+        "b424e23b": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/NumberPanel",
+                    "spec": {
+                        "formatting": {
+                            "unit": "s",
+                            "decimalPrecision": "2"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "container.cpu.time",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        },
+        "251df4d5": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/TimeSeriesPanel",
+                    "spec": {
+                        "visualization": {
+                            "fillSpans": false
+                        },
+                        "formatting": {
+                            "unit": "recommendations",
+                            "decimalPrecision": "2"
+                        },
+                        "chartAppearance": {
+                            "lineInterpolation": "spline",
+                            "showPoints": false,
+                            "lineStyle": "solid",
+                            "fillMode": "none",
+                            "spanGaps": {"fillOnlyBelow": true}
+                        },
+                        "legend": {
+                            "position": "bottom"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "app_recommendations_counter",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "layouts": [
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Bravo"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/b424e23b"
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Alpha"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/251df4d5"
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,182 @@
+.wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 16px;
+	height: 44px;
+	flex-shrink: 0;
+	border-radius: 6px 6px 0px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.label {
+	color: var(--l2-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;
+}
+
+.rightActions {
+	display: flex;
+	gap: 4px;
+	color: white;
+}
+
+// Shared trigger button for the sort + configure-group icons in the right
+// actions cluster. Provides a square hover/active background so users know
+// which icon they're targeting.
+.iconTrigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active,
+	&[aria-expanded='true'] {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}
+
+.sortContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 140px;
+}
+
+.sortHeading {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	font-style: normal;
+	font-weight: var(--font-weight-semibold);
+	line-height: 18px;
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
+	padding: 12px 18px 6px 14px;
+}
+
+.sortDivider {
+	width: 100%;
+	height: 1px;
+	background: var(--l1-border);
+	margin: 4px 0;
+}
+
+.sortButton {
+	text-align: start;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	padding: 12px 18px 12px 14px;
+	height: auto;
+}
+
+.configureContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 4px;
+}
+
+.configureItem {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 8px 12px;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	text-align: left;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 18%, transparent);
+	}
+}
+
+.configureIcon {
+	display: inline-flex;
+	width: 16px;
+	height: 16px;
+	flex: 0 0 16px;
+	align-items: center;
+	justify-content: center;
+}
+
+:global(.sortDashboardsPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		padding: 0px;
+		align-items: center;
+		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);
+		gap: 16px;
+	}
+}
+
+:global(.configureGroupPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		align-items: center;
+		border-radius: 4px;
+		padding: 0px;
+		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);
+		gap: 16px;
+	}
+}

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

@@ -0,0 +1,145 @@
+import { Button, Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	ArrowDownWideNarrow,
+	Check,
+	Ellipsis,
+	HdmiPort,
+} from '@signozhq/icons';
+
+import type {
+	SortColumn,
+	SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+
+import styles from './ListHeader.module.scss';
+
+interface Props {
+	sortColumn: SortColumn;
+	onSortChange: (column: SortColumn) => void;
+	sortOrder: SortOrder;
+	onOrderChange: (order: SortOrder) => void;
+	onConfigureMetadata: () => void;
+}
+
+function ListHeader({
+	sortColumn,
+	onSortChange,
+	sortOrder,
+	onOrderChange,
+	onConfigureMetadata,
+}: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Typography.Text className={styles.label}>All Dashboards</Typography.Text>
+			<section className={styles.rightActions}>
+				<Tooltip title="Sort">
+					<Popover
+						trigger="click"
+						content={
+							<div className={styles.sortContent}>
+								<Typography.Text className={styles.sortHeading}>
+									Sort By
+								</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('name')}
+									data-testid="sort-by-name"
+								>
+									Name
+									{sortColumn === 'name' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('created_at')}
+									data-testid="sort-by-last-created"
+								>
+									Last created
+									{sortColumn === 'created_at' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('updated_at')}
+									data-testid="sort-by-last-updated"
+								>
+									Last updated
+									{sortColumn === 'updated_at' && <Check size={14} />}
+								</Button>
+								<div className={styles.sortDivider} />
+								<Typography.Text className={styles.sortHeading}>Order</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('asc')}
+									data-testid="sort-order-asc"
+								>
+									Ascending
+									{sortOrder === 'asc' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('desc')}
+									data-testid="sort-order-desc"
+								>
+									Descending
+									{sortOrder === 'desc' && <Check size={14} />}
+								</Button>
+							</div>
+						}
+						rootClassName="sortDashboardsPopover"
+						placement="bottomRight"
+						arrow={false}
+					>
+						<button
+							type="button"
+							className={styles.iconTrigger}
+							data-testid="sort-by"
+							aria-label="Sort"
+						>
+							<ArrowDownWideNarrow size={14} />
+						</button>
+					</Popover>
+				</Tooltip>
+				<Popover
+					trigger="click"
+					content={
+						<div className={styles.configureContent}>
+							<button
+								type="button"
+								className={styles.configureItem}
+								onClick={(e): void => {
+									e.preventDefault();
+									e.stopPropagation();
+									onConfigureMetadata();
+								}}
+								data-testid="configure-metadata-trigger"
+							>
+								<span className={styles.configureIcon}>
+									<HdmiPort size={14} />
+								</span>
+								<span>Configure metadata</span>
+							</button>
+						</div>
+					}
+					rootClassName="configureGroupPopover"
+					placement="bottomRight"
+					arrow={false}
+				>
+					<button
+						type="button"
+						className={styles.iconTrigger}
+						aria-label="More options"
+					>
+						<Ellipsis size={14} />
+					</button>
+				</Popover>
+			</section>
+		</div>
+	);
+}
+
+export default ListHeader;

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

@@ -0,0 +1,24 @@
+.submit {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}

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

@@ -0,0 +1,49 @@
+import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Color } from '@signozhq/design-tokens';
+import { CornerDownLeft, Search } from '@signozhq/icons';
+
+import styles from './SearchBar.module.scss';
+
+interface Props {
+	value: string;
+	onChange: (value: string) => void;
+	onSubmit: () => void;
+}
+
+function SearchBar({ value, onChange, onSubmit }: Props): JSX.Element {
+	return (
+		<Input
+			placeholder="Search with DSL (e.g. name CONTAINS 'foo')"
+			prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+			suffix={
+				<button
+					type="button"
+					className={styles.submit}
+					aria-label="Run search"
+					data-testid="dashboards-list-search-submit"
+					onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
+						// Prevent the input's blur from firing first and double-submitting.
+						e.preventDefault();
+					}}
+					onClick={onSubmit}
+				>
+					<CornerDownLeft size={12} color={Color.BG_VANILLA_400} />
+				</button>
+			}
+			value={value}
+			testId="dashboards-list-search"
+			onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+				onChange(e.target.value)
+			}
+			onBlur={onSubmit}
+			onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {
+				if (e.key === 'Enter') {
+					onSubmit();
+				}
+			}}
+		/>
+	);
+}
+
+export default SearchBar;

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.module.scss

@@ -0,0 +1,40 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+}
+
+.image {
+	width: 32px;
+	height: 32px;
+}
+
+.copy {
+	margin-top: 4px;
+}
+
+.noDashboard {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.info {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actions {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 24px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+
+import dashboardsUrl from '@/assets/Icons/dashboards.svg';
+
+import styles from './EmptyState.module.scss';
+import { openInNewTab } from 'utils/navigation';
+
+interface Props {
+	createDropdown?: ReactNode;
+}
+
+const LEARN_MORE_HREF =
+	'https://signoz.io/docs/userguide/manage-dashboards?utm_source=product&utm_medium=dashboard-list-empty-state';
+
+function EmptyState({ createDropdown }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={dashboardsUrl} alt="dashboards" className={styles.image} />
+			<section className={styles.copy}>
+				<Typography.Text className={styles.noDashboard}>
+					No dashboards yet.{' '}
+				</Typography.Text>
+				<Typography.Text className={styles.info}>
+					Create a dashboard to start visualizing your data
+				</Typography.Text>
+			</section>
+
+			{createDropdown ? (
+				<section className={styles.actions}>
+					{createDropdown}
+					<Button
+						variant="link"
+						color="primary"
+						className={styles.learnMore}
+						testId="learn-more"
+						onClick={(): void => {
+							logEvent('Dashboard List: Learn more clicked', {});
+							openInNewTab(LEARN_MORE_HREF);
+						}}
+					>
+						Learn more
+					</Button>
+					<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+				</section>
+			) : null}
+		</div>
+	);
+}
+
+export default EmptyState;

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.module.scss

@@ -0,0 +1,36 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+	gap: 4px;
+}
+
+.img {
+	max-width: 100%;
+}
+
+.errorText {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.errorDetail {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actionButtons {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 20px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight, RotateCw } from '@signozhq/icons';
+import { handleContactSupport } from 'container/Integrations/utils';
+
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+
+import { formatQueryErrorMessage } from '../../../utils';
+import styles from './ErrorState.module.scss';
+
+interface Props {
+	isCloudUser: boolean;
+	onRetry: () => void;
+	httpStatus?: number;
+	errorMessage?: string;
+}
+
+const GENERIC_MESSAGE =
+	'Something went wrong :/ Please retry or contact support.';
+const INVALID_QUERY_FALLBACK = 'Please review the syntax and try again.';
+
+function ErrorState({
+	isCloudUser,
+	onRetry,
+	httpStatus,
+	errorMessage,
+}: Props): JSX.Element {
+	// 4xx responses are client errors — the same request will keep failing.
+	// Surface the BE-provided detail (e.g. DSL parse errors) and skip Retry.
+	const isClientError =
+		httpStatus !== undefined && httpStatus >= 400 && httpStatus < 500;
+
+	const cleanedDetail = formatQueryErrorMessage(errorMessage);
+
+	return (
+		<div className={styles.wrapper}>
+			<img src={awwSnapUrl} alt="something went wrong" className={styles.img} />
+
+			{isClientError ? (
+				<>
+					<Typography.Text className={styles.errorText}>
+						Invalid query
+					</Typography.Text>
+					<Typography.Text className={styles.errorDetail}>
+						{cleanedDetail || INVALID_QUERY_FALLBACK}
+					</Typography.Text>
+				</>
+			) : (
+				<Typography.Text className={styles.errorText}>
+					{GENERIC_MESSAGE}
+				</Typography.Text>
+			)}
+
+			<section className={styles.actionButtons}>
+				{!isClientError && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<RotateCw size={16} />}
+						onClick={onRetry}
+						testId="dashboards-list-retry"
+					>
+						Retry
+					</Button>
+				)}
+				<Button
+					variant="link"
+					color="primary"
+					className={styles.learnMore}
+					onClick={(): void => handleContactSupport(isCloudUser)}
+					testId="dashboards-list-contact-support"
+				>
+					Contact Support
+				</Button>
+				<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+			</section>
+		</div>
+	);
+}
+
+export default ErrorState;

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin-top: 16px;
+}
+
+.skeleton {
+	height: 125px;
+	width: 100%;
+}

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from 'antd';
+
+import styles from './LoadingState.module.scss';
+
+function LoadingState(): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+		</div>
+	);
+}
+
+export default LoadingState;

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 190px;
+	gap: 8px;
+}

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
+import styles from './NoResultsState.module.scss';
+
+interface Props {
+	searchString: string;
+}
+
+function NoResultsState({ searchString }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={emptyStateUrl} alt="img" height={32} width={32} />
+			<Typography.Text>
+				No dashboards found for {searchString}. Create a new dashboard?
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default NoResultsState;

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

@@ -0,0 +1,34 @@
+// Shared building blocks for the dashboards-list view states.
+// Composed via CSS-modules `composes:` from each state's own SCSS.
+
+.cardWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 320px;
+	margin-top: 16px;
+	justify-content: center;
+	align-items: flex-start;
+	border-radius: 6px;
+	border: 1px dashed var(--l1-border);
+}
+
+.bodyText {
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.learnMoreLink {
+	composes: bodyText;
+	color: var(--bg-robin-400);
+	font-weight: var(--font-weight-medium);
+	padding: 0px;
+}
+
+.learnMoreArrow {
+	margin-left: -20px;
+	color: var(--bg-robin-400);
+	cursor: pointer;
+}

frontend/src/pages/DashboardsListPageV2/hooks/useDashboardsListQueryParams.ts

@@ -0,0 +1,36 @@
+import {
+	parseAsInteger,
+	parseAsString,
+	parseAsStringLiteral,
+	useQueryState,
+	type Options,
+	type UseQueryStateReturn,
+} from 'nuqs';
+
+export const SORT_COLUMNS = ['updated_at', 'created_at', 'name'] as const;
+export type SortColumn = (typeof SORT_COLUMNS)[number];
+
+export const SORT_ORDERS = ['asc', 'desc'] as const;
+export type SortOrder = (typeof SORT_ORDERS)[number];
+
+const opts: Options = { history: 'push' };
+
+export const useSortColumn = (): UseQueryStateReturn<SortColumn, SortColumn> =>
+	useQueryState(
+		'sort',
+		parseAsStringLiteral(SORT_COLUMNS)
+			.withDefault('updated_at')
+			.withOptions(opts),
+	);
+
+export const useSortOrder = (): UseQueryStateReturn<SortOrder, SortOrder> =>
+	useQueryState(
+		'order',
+		parseAsStringLiteral(SORT_ORDERS).withDefault('desc').withOptions(opts),
+	);
+
+export const usePage = (): UseQueryStateReturn<number, number> =>
+	useQueryState('page', parseAsInteger.withDefault(1).withOptions(opts));
+
+export const useSearch = (): UseQueryStateReturn<string, string> =>
+	useQueryState('search', parseAsString.withDefault('').withOptions(opts));

frontend/src/pages/DashboardsListPageV2/index.tsx

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

frontend/src/pages/DashboardsListPageV2/utils.ts

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import { isEmpty } from 'lodash-es';
+import type { DashboardtypesGettableDashboardWithPinDTO } from 'api/generated/services/sigNoz.schemas';
+
+export type DashboardListItem = DashboardtypesGettableDashboardWithPinDTO;
+
+export const tagsToStrings = (
+	tags: { key: string; value: string }[] | null | undefined,
+): string[] =>
+	(tags ?? []).map((tag) =>
+		tag.key === tag.value ? tag.key : `${tag.key}:${tag.value}`,
+	);
+
+export const lastUpdatedLabel = (time: string | undefined): string => {
+	if (!time || isEmpty(time)) {
+		return 'No updates yet!';
+	}
+	const diff = dayjs();
+	const ref = dayjs(time);
+	const months = diff.diff(ref, 'months');
+	if (months > 0) {
+		return `Last Updated ${months} months ago`;
+	}
+	const days = diff.diff(ref, 'days');
+	if (days > 0) {
+		return `Last Updated ${days} days ago`;
+	}
+	const hours = diff.diff(ref, 'hours');
+	if (hours > 0) {
+		return `Last Updated ${hours} hrs ago`;
+	}
+	const minutes = diff.diff(ref, 'minutes');
+	if (minutes > 0) {
+		return `Last Updated ${minutes} mins ago`;
+	}
+	const seconds = diff.diff(ref, 'seconds');
+	return `Last Updated ${seconds} sec ago`;
+};
+
+// Normalize BE query-parse error messages for display:
+//   - Drop the "invalid filter query:" prefix (the UI already says "Invalid query").
+//   - Backticks → double quotes for the format hint that follows the em-dash.
+//   - Trim surrounding whitespace.
+export const formatQueryErrorMessage = (raw: string | undefined): string => {
+	if (!raw) {
+		return '';
+	}
+	return raw
+		.replace(/^invalid filter query:\s*/i, '')
+		.replace(/`([^`]+)`/g, '"$1"')
+		.trim();
+};

frontend/src/pages/LogsExplorer/index.tsx

@@ -3,7 +3,6 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import { TelemetryFieldKey } from 'api/v5/v5';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
@@ -15,12 +14,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViewsContainer from 'container/LogsExplorerViews';
-import {
-	defaultLogsSelectedColumns,
-	defaultOptionsQuery,
-	URL_OPTIONS,
-} from 'container/OptionsMenu/constants';
-import { OptionsQuery } from 'container/OptionsMenu/types';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
@@ -31,11 +24,9 @@ import {
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import useUrlQueryData from 'hooks/useUrlQueryData';
-import { defaultTo, isEmpty, isEqual, isNull } from 'lodash-es';
+import { defaultTo, isEmpty, isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { EventSourceProvider } from 'providers/EventSource';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import {
@@ -62,8 +53,6 @@ function LogsExplorer(): JSX.Element {
 	const [selectedView, setSelectedView] = useState<ExplorerViews>(
 		() => panelTypeToExplorerView[panelTypesFromUrl],
 	);
-	const { logs } = usePreferenceContext();
-	const { preferences } = logs;
 
 	const [showFilters, setShowFilters] = useState<boolean>(() => {
 		const localStorageValue = getLocalStorageKey(
@@ -182,116 +171,6 @@ function LogsExplorer(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};
 
-	const { redirectWithQuery: redirectWithOptionsData } =
-		useUrlQueryData<OptionsQuery>(URL_OPTIONS, defaultOptionsQuery);
-
-	// Get and parse stored columns from localStorage
-	const logListOptionsFromLocalStorage = useMemo(() => {
-		const data = getLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS);
-
-		if (!data) {
-			return null;
-		}
-
-		try {
-			return JSON.parse(data);
-		} catch {
-			return null;
-		}
-	}, []);
-
-	// Check if the columns have the required columns (timestamp, body)
-	const hasRequiredColumns = useCallback(
-		(columns?: TelemetryFieldKey[] | null): boolean => {
-			if (!columns?.length) {
-				return false;
-			}
-
-			const hasTimestamp = columns.some((col) => col.name === 'timestamp');
-			const hasBody = columns.some((col) => col.name === 'body');
-
-			return hasTimestamp && hasBody;
-		},
-		[],
-	);
-
-	// Merge the columns with the required columns (timestamp, body) if missing
-	const mergeWithRequiredColumns = useCallback(
-		(columns: TelemetryFieldKey[]): TelemetryFieldKey[] => [
-			// Add required columns (timestamp, body) if missing
-			...(!hasRequiredColumns(columns) ? defaultLogsSelectedColumns : []),
-			...columns,
-		],
-		[hasRequiredColumns],
-	);
-
-	// Migrate the options query to the new format
-	const migrateOptionsQuery = useCallback(
-		(query: OptionsQuery): OptionsQuery => {
-			// Skip if already migrated
-			if (query.version) {
-				return query;
-			}
-
-			if (logListOptionsFromLocalStorage?.version) {
-				return logListOptionsFromLocalStorage;
-			}
-
-			// Case 1: we have localStorage columns
-			if (logListOptionsFromLocalStorage?.selectColumns?.length > 0) {
-				return {
-					...query,
-					version: 1,
-					selectColumns: mergeWithRequiredColumns(
-						logListOptionsFromLocalStorage.selectColumns,
-					),
-				};
-			}
-
-			// Case 2: No query columns in localStorage in but query has columns
-			if (query.selectColumns.length > 0) {
-				return {
-					...query,
-					version: 1,
-					selectColumns: mergeWithRequiredColumns(query.selectColumns),
-				};
-			}
-
-			// Case 3: No columns anywhere, use defaults
-			return {
-				...query,
-				version: 1,
-				selectColumns: defaultLogsSelectedColumns,
-			};
-		},
-		[mergeWithRequiredColumns, logListOptionsFromLocalStorage],
-	);
-
-	useEffect(() => {
-		if (!preferences) {
-			return;
-		}
-		const migratedQuery = migrateOptionsQuery({
-			selectColumns: preferences.columns || defaultLogsSelectedColumns,
-			maxLines: preferences.formatting?.maxLines || defaultOptionsQuery.maxLines,
-			format: preferences.formatting?.format || defaultOptionsQuery.format,
-			fontSize: preferences.formatting?.fontSize || defaultOptionsQuery.fontSize,
-			version: preferences.formatting?.version,
-		});
-		// Only redirect if the query was actually modified
-		if (
-			!isEqual(migratedQuery, {
-				selectColumns: preferences?.columns,
-				maxLines: preferences?.formatting?.maxLines,
-				format: preferences?.formatting?.format,
-				fontSize: preferences?.formatting?.fontSize,
-				version: preferences?.formatting?.version,
-			})
-		) {
-			redirectWithOptionsData(migratedQuery);
-		}
-	}, [migrateOptionsQuery, preferences, redirectWithOptionsData]);
-
 	const toolbarViews = useMemo(
 		() => ({
 			list: {

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -22,6 +22,7 @@ import styles from './AnalyticsPanel.module.scss';
 interface AnalyticsPanelProps {
 	isOpen: boolean;
 	onClose: () => void;
+	onTabChange: (tab: string) => void;
 }
 
 const PANEL_WIDTH = 350;
@@ -32,6 +33,7 @@ const PANEL_MARGIN_BOTTOM = 50;
 function AnalyticsPanel({
 	isOpen,
 	onClose,
+	onTabChange,
 }: AnalyticsPanelProps): JSX.Element | null {
 	const aggregations = useTraceStore((s) => s.aggregations);
 	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
@@ -118,7 +120,7 @@ function AnalyticsPanel({
 			/>
 
 			<div className={styles.body}>
-				<TabsRoot defaultValue="exec-time">
+				<TabsRoot defaultValue="exec-time" onValueChange={onTabChange}>
 					<TabsList variant="secondary">
 						<TabsTrigger value="exec-time" variant="secondary">
 							% exec time

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -31,7 +31,12 @@ import Events from 'container/SpanDetailsDrawer/Events/Events';
 import SpanLogs from 'container/SpanDetailsDrawer/SpanLogs/SpanLogs';
 import { useSpanContextLogs } from 'container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs';
 import dayjs from 'dayjs';
+import {
+	TraceDetailEventKeys,
+	TraceDetailEvents,
+} from 'pages/TraceDetailsV3/events';
 import { useMigratePinnedAttributes } from 'pages/TraceDetailsV3/hooks/useMigratePinnedAttributes';
+import { useTraceDetailLogEvent } from 'pages/TraceDetailsV3/hooks/useTraceDetailLogEvent';
 import {
 	getSpanAttribute,
 	getSpanDisplayData,
@@ -86,6 +91,16 @@ function SpanDetailsContent({
 }): JSX.Element {
 	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
 	const spanAttributeActions = useSpanAttributeActions();
+	const logTraceEvent = useTraceDetailLogEvent('v3', selectedSpan.trace_id);
+	const handleTabChange = useCallback(
+		(tab: string): void => {
+			logTraceEvent(TraceDetailEvents.SpanPanelTabChanged, {
+				[TraceDetailEventKeys.Tab]: tab,
+				[TraceDetailEventKeys.SpanId]: selectedSpan.span_id,
+			});
+		},
+		[logTraceEvent, selectedSpan.span_id],
+	);
 	const percentile = useSpanPercentile(selectedSpan);
 	const linkedSpans = useLinkedSpans((selectedSpan as any).references);
 
@@ -376,7 +391,7 @@ function SpanDetailsContent({
 
 			<div className={styles.tabsSection}>
 				{/* Step 9: ContentTabs */}
-				<TabsRoot defaultValue="overview">
+				<TabsRoot defaultValue="overview" onValueChange={handleTabChange}>
 					<TabsList variant="secondary">
 						<TabsTrigger value="overview" variant="secondary">
 							<Bookmark size={14} /> Overview

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -29,6 +29,8 @@ import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { TraceDetailEventKeys, TraceDetailEvents } from '../events';
+import { useTraceDetailLogEvent } from '../hooks/useTraceDetailLogEvent';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
@@ -90,11 +92,35 @@ function TraceDetailsHeader({
 	const previewFields = useTraceStore((s) => s.previewFields);
 	const setPreviewFields = useTraceStore((s) => s.setPreviewFields);
 
+	const logTraceEvent = useTraceDetailLogEvent('v3', traceID || '');
+	const pageLoadedAtRef = useRef(Date.now());
+
 	const handleSwitchToOldView = useCallback((): void => {
+		logTraceEvent(TraceDetailEvents.ViewSwitched, {
+			[TraceDetailEventKeys.From]: 'v3',
+			[TraceDetailEventKeys.To]: 'v2',
+			[TraceDetailEventKeys.DwellMs]: Date.now() - pageLoadedAtRef.current,
+		});
 		setLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW, 'true');
 		const oldUrl = `/trace-old/${traceID}${window.location.search}`;
 		history.replace(oldUrl);
-	}, [traceID]);
+	}, [traceID, logTraceEvent]);
+
+	const handleToggleAnalytics = useCallback((): void => {
+		logTraceEvent(TraceDetailEvents.AnalyticsPanelToggled, {
+			[TraceDetailEventKeys.Open]: !isAnalyticsOpen,
+		});
+		setIsAnalyticsOpen((prev) => !prev);
+	}, [logTraceEvent, isAnalyticsOpen]);
+
+	const handleAnalyticsTabChange = useCallback(
+		(tab: string): void => {
+			logTraceEvent(TraceDetailEvents.AnalyticsTabChanged, {
+				[TraceDetailEventKeys.Tab]: tab,
+			});
+		},
+		[logTraceEvent],
+	);
 
 	const handlePreviousBtnClick = useCallback((): void => {
 		if (hasInAppHistory()) {
@@ -167,7 +193,7 @@ function TraceDetailsHeader({
 												size="icon"
 												color="secondary"
 												aria-label="Analytics"
-												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
+												onClick={handleToggleAnalytics}
 											>
 												<ChartPie size={14} />
 											</Button>
@@ -245,6 +271,7 @@ function TraceDetailsHeader({
 			<AnalyticsPanel
 				isOpen={isAnalyticsOpen}
 				onClose={(): void => setIsAnalyticsOpen(false)}
+				onTabChange={handleAnalyticsTabChange}
 			/>
 		</div>
 	);

frontend/src/pages/TraceDetailsV3/events.ts

@@ -0,0 +1,38 @@
+export enum TraceDetailEvents {
+	DataLoaded = 'Trace Detail: Data loaded',
+	ViewSwitched = 'Trace Detail: View switched',
+	FlameGraphToggled = 'Trace Detail: Flame graph toggled',
+	WaterfallToggled = 'Trace Detail: Waterfall toggled',
+	AnalyticsPanelToggled = 'Trace Detail: Analytics panel toggled',
+	AnalyticsTabChanged = 'Trace Detail: Analytics tab changed',
+	SpanPanelTabChanged = 'Trace Detail: Span panel tab changed',
+}
+
+export enum TraceDetailEventKeys {
+	// Injected on every event by useTraceDetailLogEvent
+	View = 'view',
+	TraceId = 'traceId',
+	// Data loaded — trace shape
+	TotalSpansCount = 'totalSpansCount',
+	NumServices = 'numServices',
+	TraceDurationMs = 'traceDurationMs',
+	HadErrors = 'hadErrors',
+	FlamegraphSampled = 'flamegraphSampled',
+	// Data loaded — persisted settings
+	SpanPanelVariant = 'spanPanelVariant',
+	ColorByField = 'colorByField',
+	PreviewFieldsCount = 'previewFieldsCount',
+	EntryPreferOldView = 'entryPreferOldView',
+	// View switched
+	From = 'from',
+	To = 'to',
+	DwellMs = 'dwellMs',
+	// Toggles / tabs
+	Expanded = 'expanded',
+	Open = 'open',
+	Tab = 'tab',
+	// Span panel tab changed
+	SpanId = 'spanId',
+}
+
+export type TraceDetailView = 'v2' | 'v3';

frontend/src/pages/TraceDetailsV3/hooks/__tests__/useTraceDetailLogEvent.test.tsx

@@ -0,0 +1,88 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { TraceDetailEvents } from '../../events';
+import { useTraceDetailLogEvent } from '../useTraceDetailLogEvent';
+
+const logEventMock = jest.fn();
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): void => logEventMock(...args),
+}));
+
+describe('useTraceDetailLogEvent', () => {
+	beforeEach(() => {
+		logEventMock.mockClear();
+	});
+
+	it('injects view and traceId on every event', () => {
+		const { result } = renderHook(() =>
+			useTraceDetailLogEvent('v3', 'trace-123'),
+		);
+
+		act(() => {
+			result.current(TraceDetailEvents.DataLoaded, { totalSpansCount: 42 });
+		});
+
+		expect(logEventMock).toHaveBeenCalledTimes(1);
+		expect(logEventMock).toHaveBeenCalledWith(TraceDetailEvents.DataLoaded, {
+			view: 'v3',
+			traceId: 'trace-123',
+			totalSpansCount: 42,
+		});
+	});
+
+	it('injects view and traceId even when no attributes are passed', () => {
+		const { result } = renderHook(() =>
+			useTraceDetailLogEvent('v2', 'trace-456'),
+		);
+
+		act(() => {
+			result.current(TraceDetailEvents.ViewSwitched);
+		});
+
+		expect(logEventMock).toHaveBeenCalledWith(TraceDetailEvents.ViewSwitched, {
+			view: 'v2',
+			traceId: 'trace-456',
+		});
+	});
+
+	it('keeps a stable callback identity and emits the latest traceId', () => {
+		const { result, rerender } = renderHook(
+			({ traceId }) => useTraceDetailLogEvent('v3', traceId),
+			{ initialProps: { traceId: 'trace-1' } },
+		);
+
+		const firstIdentity = result.current;
+		rerender({ traceId: 'trace-2' });
+
+		expect(result.current).toBe(firstIdentity);
+
+		act(() => {
+			result.current(TraceDetailEvents.SpanPanelTabChanged, { spanId: 's1' });
+		});
+		expect(logEventMock).toHaveBeenCalledWith(
+			TraceDetailEvents.SpanPanelTabChanged,
+			{
+				view: 'v3',
+				traceId: 'trace-2',
+				spanId: 's1',
+			},
+		);
+	});
+
+	it('never throws if logEvent throws (analytics must not break the UI)', () => {
+		logEventMock.mockImplementationOnce(() => {
+			throw new Error('network down');
+		});
+		const { result } = renderHook(() =>
+			useTraceDetailLogEvent('v3', 'trace-123'),
+		);
+
+		expect(() => {
+			act(() => {
+				result.current(TraceDetailEvents.DataLoaded);
+			});
+		}).not.toThrow();
+	});
+});

frontend/src/pages/TraceDetailsV3/hooks/useTraceDetailLogEvent.ts

@@ -0,0 +1,39 @@
+import { useCallback, useRef } from 'react';
+import logEvent from 'api/common/logEvent';
+
+import {
+	TraceDetailEventKeys,
+	TraceDetailEvents,
+	TraceDetailView,
+} from '../events';
+
+export type TraceDetailLogEvent = (
+	event: TraceDetailEvents,
+	attributes?: Record<string, unknown>,
+) => void;
+
+export function useTraceDetailLogEvent(
+	view: TraceDetailView,
+	traceId: string,
+): TraceDetailLogEvent {
+	const contextRef = useRef({ view, traceId });
+	contextRef.current = { view, traceId };
+
+	return useCallback(
+		(
+			event: TraceDetailEvents,
+			attributes: Record<string, unknown> = {},
+		): void => {
+			try {
+				void logEvent(event, {
+					[TraceDetailEventKeys.View]: contextRef.current.view,
+					[TraceDetailEventKeys.TraceId]: contextRef.current.traceId,
+					...attributes,
+				});
+			} catch {
+				// No-op. Logging must never throw into the UI.
+			}
+		},
+		[],
+	);
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -20,7 +20,10 @@ import {
 } from 'types/api/trace/getTraceV3';
 
 import { COLOR_BY_FIELDS } from './constants';
+import { TraceDetailEventKeys, TraceDetailEvents } from './events';
+import { useTraceDetailLogEvent } from './hooks/useTraceDetailLogEvent';
 import TraceStoreSync from './stores/TraceStoreSync';
+import { useTraceStore } from './stores/traceStore';
 import { AGGREGATIONS } from './utils/aggregations';
 import { SpanDetailVariant } from './SpanDetailsPanel/constants';
 import SpanDetailsPanel from './SpanDetailsPanel/SpanDetailsPanel';
@@ -56,6 +59,14 @@ function TraceDetailsV3(): JSX.Element {
 	const selectedSpanId = urlQuery.get('spanId') || undefined;
 	const { safeNavigate } = useSafeNavigate();
 
+	const logTraceEvent = useTraceDetailLogEvent('v3', traceId || '');
+	// Tracks which traceId the load event already fired for, so navigating
+	// between traces (the route component stays mounted) re-fires it once each.
+	const dataLoadedFiredForRef = useRef('');
+	const colorByField = useTraceStore((s) => s.colorByField);
+	const previewFieldsCount = useTraceStore((s) => s.previewFields.length);
+	const userPrefsReady = useTraceStore((s) => s.userPreferences !== null);
+
 	const handleSpanDetailsClose = useCallback((): void => {
 		urlQuery.delete('spanId');
 		safeNavigate({ search: urlQuery.toString() });
@@ -154,6 +165,46 @@ function TraceDetailsV3(): JSX.Element {
 		allSpansRef.current = allSpans;
 	}, [allSpans]);
 
+	useEffect(() => {
+		if (
+			!traceId ||
+			dataLoadedFiredForRef.current === traceId ||
+			!userPrefsReady
+		) {
+			return;
+		}
+		const payload = traceData?.payload;
+		if (!payload?.spans?.length) {
+			return;
+		}
+		dataLoadedFiredForRef.current = traceId;
+		const numServices = new Set(payload.spans.map((s) => s['service.name'])).size;
+		logTraceEvent(TraceDetailEvents.DataLoaded, {
+			[TraceDetailEventKeys.TotalSpansCount]: totalSpansCount,
+			[TraceDetailEventKeys.NumServices]: numServices,
+			[TraceDetailEventKeys.TraceDurationMs]:
+				payload.endTimestampMillis - payload.startTimestampMillis,
+			[TraceDetailEventKeys.HadErrors]: (payload.totalErrorSpansCount || 0) > 0,
+			[TraceDetailEventKeys.FlamegraphSampled]:
+				totalSpansCount > FLAMEGRAPH_SPAN_LIMIT,
+			[TraceDetailEventKeys.SpanPanelVariant]:
+				getLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_SPAN_DETAILS_POSITION) ||
+				SpanDetailVariant.DOCKED_RIGHT,
+			[TraceDetailEventKeys.ColorByField]: colorByField.name,
+			[TraceDetailEventKeys.PreviewFieldsCount]: previewFieldsCount,
+			[TraceDetailEventKeys.EntryPreferOldView]:
+				getLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW) === 'true',
+		});
+	}, [
+		traceId,
+		userPrefsReady,
+		traceData,
+		totalSpansCount,
+		colorByField,
+		previewFieldsCount,
+		logTraceEvent,
+	]);
+
 	// Frontend mode: expand all parents by default when full data arrives
 	useEffect(() => {
 		if (isFullDataLoaded && allSpans.length > 0) {
@@ -233,6 +284,12 @@ function TraceDetailsV3(): JSX.Element {
 	const [activeKeys, setActiveKeys] = useState<string[]>(['flame', 'waterfall']);
 
 	const handleCollapseChange = (key: string): void => {
+		logTraceEvent(
+			key === 'flame'
+				? TraceDetailEvents.FlameGraphToggled
+				: TraceDetailEvents.WaterfallToggled,
+			{ [TraceDetailEventKeys.Expanded]: !activeKeys.includes(key) },
+		);
 		setActiveKeys((prev) =>
 			prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key],
 		);

frontend/src/periscope/components/DataViewer/DataViewer.tsx

@@ -4,6 +4,7 @@ import { ChevronDown, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
+import logEvent from 'api/common/logEvent';
 import { JsonView } from 'periscope/components/JsonView';
 import { PrettyView } from 'periscope/components/PrettyView';
 import { PrettyViewProps } from 'periscope/components/PrettyView';
@@ -12,6 +13,8 @@ import './DataViewer.styles.scss';
 
 type ViewMode = 'pretty' | 'json';
 
+const VIEW_MODE_CHANGED_EVENT = 'Data Viewer: View mode changed';
+
 const VIEW_MODE_OPTIONS: { label: string; value: ViewMode }[] = [
 	{ label: 'Pretty', value: 'pretty' },
 	{ label: 'JSON', value: 'json' },
@@ -34,6 +37,20 @@ function DataViewer({
 
 	const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
+	const handleViewModeChange = (value: string): void => {
+		const next = value as ViewMode;
+		setViewMode(next);
+		try {
+			logEvent(VIEW_MODE_CHANGED_EVENT, {
+				viewMode: next,
+				path: window.location.pathname,
+				drawerKey,
+			});
+		} catch {
+			// No op
+		}
+	};
+
 	const handleCopy = (): void => {
 		const text = JSON.stringify(data, null, 2);
 		setCopy(text);
@@ -56,7 +73,7 @@ function DataViewer({
 							{
 								type: 'radio-group',
 								value: viewMode,
-								onChange: (value): void => setViewMode(value as ViewMode),
+								onChange: handleViewModeChange,
 								children: VIEW_MODE_OPTIONS.map((opt) => ({
 									type: 'radio',
 									key: opt.value,

frontend/src/providers/preferences/__tests__/PreferencesProvider.integration.test.tsx

@@ -108,7 +108,9 @@ describe('PreferencesProvider integration', () => {
 				},
 			);
 
-			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(1);
+			// Loader's ensureLogsRequiredColumns prepends timestamp + body, so the
+			// 1 column in localStorage becomes 3 in preferences.
+			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(3);
 		});
 
 		it('direct mode updateColumns persists to localStorage', async () => {
@@ -126,8 +128,11 @@ describe('PreferencesProvider integration', () => {
 			const stored = getLocalStorageJSON<LogsLocalOptions>(
 				LOCALSTORAGE.LOGS_LIST_OPTIONS,
 			);
+			// Writer's ensureLogsRequiredColumns prepends `body` when only
+			// `timestamp` was passed in (defaults.slice(0,1) is just timestamp).
 			expect(stored?.selectColumns).toStrictEqual([
-				defaultLogsSelectedColumns[0] as TelemetryFieldKey,
+				defaultLogsSelectedColumns[1] as TelemetryFieldKey, // body
+				defaultLogsSelectedColumns[0] as TelemetryFieldKey, // timestamp
 			]);
 		});
 
@@ -183,7 +188,9 @@ describe('PreferencesProvider integration', () => {
 				value: originalLocation,
 			});
 
-			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(1);
+			// Loader's ensureLogsRequiredColumns prepends timestamp + body, so the
+			// URL's 1 column becomes 3 in preferences.
+			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(3);
 		});
 
 		it('updateFormatting persists to localStorage in direct mode', async () => {

frontend/src/providers/preferences/__tests__/logsUpdaterConfig.test.ts

@@ -1,7 +1,10 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { LogViewMode } from 'container/LogsTable';
-import { defaultOptionsQuery } from 'container/OptionsMenu/constants';
+import {
+	defaultLogsSelectedColumns,
+	defaultOptionsQuery,
+} from 'container/OptionsMenu/constants';
 import { FontSize } from 'container/OptionsMenu/types';
 import {
 	FormattingOptions,
@@ -85,18 +88,21 @@ describe('logsUpdaterConfig', () => {
 
 		logsUpdater.updateColumns(newColumns, PreferenceMode.DIRECT);
 
+		// Writer guards body+timestamp via ensureLogsRequiredColumns invariant
+		const guardedColumns = [...defaultLogsSelectedColumns, ...newColumns];
+
 		// Should update URL
 		expect(redirectWithOptionsData).toHaveBeenCalledWith({
 			...defaultOptionsQuery,
 			...mockPreferences.formatting,
-			selectColumns: newColumns,
+			selectColumns: guardedColumns,
 		});
 
-		// Should update localStorage
+		// Should update localStorage with the guarded shape
 		const storedData = JSON.parse(
 			mockLocalStorage[LOCALSTORAGE.LOGS_LIST_OPTIONS],
 		);
-		expect(storedData.selectColumns).toStrictEqual(newColumns);
+		expect(storedData.selectColumns).toStrictEqual(guardedColumns);
 		expect(storedData.maxLines).toBe(1); // Should preserve other fields
 
 		// Should not update saved view preferences

frontend/src/providers/preferences/__tests__/usePreferenceLoader.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { DataSource } from 'types/common/queryBuilder';
 
 import logsLoaderConfig from '../configs/logsLoaderConfig';
@@ -60,9 +61,9 @@ describe('usePreferenceLoader', () => {
 			expect(result.current.loading).toBe(false);
 		});
 
-		// Should have loaded from local storage (highest priority)
+		// Loader wraps with ensureLogsRequiredColumns — body+timestamp always prepended
 		expect(result.current.preferences).toStrictEqual({
-			columns: [{ name: 'local-column' }],
+			columns: [...defaultLogsSelectedColumns, { name: 'local-column' }],
 			formatting: { maxLines: 5, format: 'table', fontSize: 'medium', version: 1 },
 		});
 		expect(result.current.error).toBeNull();

frontend/src/providers/preferences/configs/logsUpdaterConfig.ts

@@ -3,7 +3,10 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { defaultOptionsQuery } from 'container/OptionsMenu/constants';
+import {
+	defaultOptionsQuery,
+	ensureLogsRequiredColumns,
+} from 'container/OptionsMenu/constants';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
 
 import { FormattingOptions, PreferenceMode, Preferences } from '../types';
@@ -18,11 +21,12 @@ const getLogsUpdaterConfig = (
 	updateFormatting: (newFormatting: FormattingOptions, mode: string) => void;
 } => ({
 	updateColumns: (newColumns: TelemetryFieldKey[], mode: string): void => {
+		const guardedColumns = ensureLogsRequiredColumns(newColumns);
 		if (mode === PreferenceMode.SAVED_VIEW) {
 			setSavedViewPreferences((prev) => {
 				if (!prev) {
 					return {
-						columns: newColumns,
+						columns: guardedColumns,
 						formatting: {
 							maxLines: 1,
 							format: 'table',
@@ -34,7 +38,7 @@ const getLogsUpdaterConfig = (
 
 				return {
 					...prev,
-					columns: newColumns,
+					columns: guardedColumns,
 				};
 			});
 		}
@@ -44,14 +48,14 @@ const getLogsUpdaterConfig = (
 			redirectWithOptionsData({
 				...defaultOptionsQuery,
 				...preferences?.formatting,
-				selectColumns: newColumns,
+				selectColumns: guardedColumns,
 			});
 
 			// Also update local storage
 			const local = JSON.parse(
 				getLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
 			);
-			local.selectColumns = newColumns;
+			local.selectColumns = guardedColumns;
 			setLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS, JSON.stringify(local));
 		}
 	},

frontend/src/providers/preferences/loader/usePreferenceLoader.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { TelemetryFieldKey } from 'api/v5/v5';
+import { ensureLogsRequiredColumns } from 'container/OptionsMenu/constants';
 import { has } from 'lodash-es';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -51,7 +52,11 @@ function logsPreferencesLoader(): {
 	columns: TelemetryFieldKey[];
 	formatting: FormattingOptions;
 } {
-	return preferencesLoader(logsLoaderConfig);
+	const result = preferencesLoader<{
+		columns: TelemetryFieldKey[];
+		formatting: FormattingOptions;
+	}>(logsLoaderConfig);
+	return { ...result, columns: ensureLogsRequiredColumns(result.columns) };
 }
 
 function tracesPreferencesLoader(): {

frontend/src/providers/preferences/sync/usePreferenceSync.ts

@@ -1,7 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
+import {
+	defaultLogsSelectedColumns,
+	ensureLogsRequiredColumns,
+} from 'container/OptionsMenu/constants';
 import { defaultSelectedColumns as defaultTracesSelectedColumns } from 'container/TracesExplorer/ListView/configs';
 import { useGetAllViews } from 'hooks/saveViews/useGetAllViews';
 import { DataSource } from 'types/common/queryBuilder';
@@ -54,9 +57,10 @@ export function usePreferenceSync({
 		let columns: TelemetryFieldKey[] = [];
 		let formatting: FormattingOptions | undefined;
 		if (dataSource === DataSource.LOGS) {
-			columns =
+			columns = ensureLogsRequiredColumns(
 				updateExtraDataSelectColumns(parsedExtraData?.selectColumns) ||
-				defaultLogsSelectedColumns;
+					defaultLogsSelectedColumns,
+			);
 			formatting = {
 				maxLines: parsedExtraData?.maxLines ?? 1,
 				format: parsedExtraData?.format ?? 'table',

frontend/tsconfig.json

@@ -48,7 +48,9 @@
 		"node_modules",
 		"src/parser/*.ts",
 		"src/parser/TraceOperatorParser/*.ts",
-		"orval.config.ts"
+		"orval.config.ts",
+		"src/pages/DashboardsListPageV2/**/*",
+		"src/pages/DashboardPageV2/**/*"
 	],
 	"include": [
 		"./src",

pkg/apiserver/signozapiserver/tracedetail.go

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

pkg/modules/tracedetail/config.go

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

pkg/modules/tracedetail/impltracedetail/handler.go

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

pkg/modules/tracedetail/impltracedetail/module.go

@@ -46,6 +46,75 @@ func (m *module) GetWaterfall(ctx context.Context, traceID string, req *spantype
 	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, uncollapsedSpans, selectedAllSpans, aggregationResults), nil
 }
 
+// GetWaterfallV4 is the OOM-safe V4 waterfall.
+// For large traces (NumSpans > effectiveLimit) it uses a two-step fetch:
+// minimal fields for all spans to build the tree, then full fields for the
+// visible window only. Aggregations are not returned.
+func (m *module) GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string, selectAllLimit uint) (*spantypes.GettableWaterfallTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	effectiveLimit := min(selectAllLimit, m.config.Waterfall.MaxLimitToSelectAllSpans)
+	if summary.NumSpans > uint64(effectiveLimit) {
+		return m.getWindowedWaterfall(ctx, traceID, selectedSpanID, uncollapsedSpans, summary.Start, summary.End)
+	}
+	return m.getFullWaterfall(ctx, traceID, summary)
+}
+
+func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	traceDurationNs := uint64(summary.End.UnixNano()) - uint64(summary.Start.UnixNano())
+
+	results := make([]spantypes.SpanAggregationResult, 0, len(req.Aggregations))
+	for _, agg := range req.Aggregations {
+		result := spantypes.SpanAggregationResult{Field: agg.Field, Aggregation: agg.Aggregation}
+		switch agg.Aggregation {
+		case spantypes.SpanAggregationSpanCount:
+			result.Value, err = m.store.GetSpanCountByField(ctx, traceID, summary, agg.Field)
+			if err != nil {
+				return nil, err
+			}
+		case spantypes.SpanAggregationDuration:
+			durationNs, err2 := m.store.GetSpanDurationByField(ctx, traceID, summary, agg.Field)
+			if err2 != nil {
+				return nil, err2
+			}
+			result.Value = make(map[string]uint64, len(durationNs))
+			for k, ns := range durationNs {
+				result.Value[k] = ns / 1_000_000
+			}
+		case spantypes.SpanAggregationExecutionTimePercentage:
+			durationNs, err2 := m.store.GetSpanDurationByField(ctx, traceID, summary, agg.Field)
+			if err2 != nil {
+				return nil, err2
+			}
+			result.Value = make(map[string]uint64, len(durationNs))
+			if traceDurationNs > 0 {
+				for k, ns := range durationNs {
+					result.Value[k] = ns * 100 / traceDurationNs
+				}
+			}
+		}
+		results = append(results, result)
+	}
+	return &spantypes.GettableTraceAggregations{Aggregations: results}, nil
+}
+
+func (m *module) GetFlamegraph(ctx context.Context, traceID string, req *spantypes.PostableFlamegraph) (*spantypes.GettableFlamegraphTrace, error) {
+	summary, err := m.store.GetTraceSummary(ctx, traceID)
+	if err != nil {
+		return nil, err
+	}
+	if summary.NumSpans <= uint64(m.config.Flamegraph.SelectAllSpansLimit) {
+		return m.getFullFlamegraph(ctx, traceID, summary)
+	}
+	return m.getWindowedFlamegraph(ctx, traceID, req.SelectedSpanID, summary)
+}
+
 // getTraceData fetches all spans for a trace and builds the WaterfallTrace.
 func (m *module) getTraceData(ctx context.Context, traceID string) (*spantypes.WaterfallTrace, error) {
 	summary, err := m.store.GetTraceSummary(ctx, traceID)
@@ -69,22 +138,6 @@ func (m *module) getTraceData(ctx context.Context, traceID string) (*spantypes.W
 	return spantypes.NewWaterfallTraceFromSpans(nodes), nil
 }
 
-// GetWaterfallV4 is the OOM-safe V4 waterfall.
-// For large traces (NumSpans > effectiveLimit) it uses a two-step fetch:
-// minimal fields for all spans to build the tree, then full fields for the
-// visible window only. Aggregations are not returned.
-func (m *module) GetWaterfallV4(ctx context.Context, traceID string, selectedSpanID string, uncollapsedSpans []string, selectAllLimit uint) (*spantypes.GettableWaterfallTrace, error) {
-	summary, err := m.store.GetTraceSummary(ctx, traceID)
-	if err != nil {
-		return nil, err
-	}
-	effectiveLimit := min(selectAllLimit, m.config.Waterfall.MaxLimitToSelectAllSpans)
-	if summary.NumSpans > uint64(effectiveLimit) {
-		return m.getWindowedWaterfall(ctx, traceID, selectedSpanID, uncollapsedSpans, summary.Start, summary.End)
-	}
-	return m.getFullWaterfall(ctx, traceID, summary)
-}
-
 func (m *module) getFullWaterfall(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableWaterfallTrace, error) {
 	spanItems, err := m.store.GetTraceSpans(ctx, traceID, summary)
 	if err != nil {
@@ -145,3 +198,50 @@ func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpan
 		waterfallTrace, selectedSpans, uncollapsedSpans, false, nil,
 	), nil
 }
+
+func (m *module) getFullFlamegraph(ctx context.Context, traceID string, summary *spantypes.TraceSummary) (*spantypes.GettableFlamegraphTrace, error) {
+	fullSpans, err := m.store.GetTraceSpans(ctx, traceID, summary)
+	if err != nil {
+		return nil, err
+	}
+	if len(fullSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromStorable(fullSpans)
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.GetAllLevels(),
+		summary.Start.UnixMilli(), summary.End.UnixMilli(), false,
+	), nil
+}
+
+// getWindowedFlamegraph returns a window of a max levels and max sampled spans per level around the selected span.
+func (m *module) getWindowedFlamegraph(ctx context.Context, traceID, selectedSpanID string, summary *spantypes.TraceSummary) (*spantypes.GettableFlamegraphTrace, error) {
+	minimalSpans, err := m.store.GetMinimalSpans(ctx, traceID, summary.Start, summary.End)
+	if err != nil {
+		return nil, err
+	}
+	if len(minimalSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	flamegraphTrace := spantypes.NewFlamegraphTraceFromMinimal(minimalSpans)
+	minimalSpans = nil //nolint:ineffassign,wastedassign // release backing array before further db calls
+
+	cfg := m.config.Flamegraph
+	selectedSpans := flamegraphTrace.GetSelectedLevels(selectedSpanID,
+		cfg.MaxSelectedLevels, cfg.MaxSpansPerLevel, cfg.SamplingTopLatencySpansCount, cfg.SamplingBucketCount)
+	if len(selectedSpans) == 0 {
+		return nil, spantypes.ErrTraceNotFound
+	}
+
+	fullSpans, err := m.store.GetTraceSpansByIDs(ctx, traceID, summary.Start, summary.End,
+		spantypes.FlamegraphWindowSpanIDs(selectedSpans))
+	if err != nil {
+		return nil, err
+	}
+
+	return spantypes.NewGettableFlamegraphTrace(
+		flamegraphTrace.EnrichSelectedSpans(selectedSpans, fullSpans),
+		summary.Start.UnixMilli(), summary.End.UnixMilli(), true,
+	), nil
+}