Merge branch 'main' into e2e/dashboard-create-flow

docs/api/openapi.yml

@@ -6525,15 +6525,6 @@ components:
       required:
       - items
       type: object
-    SpantypesGettableTraceAggregations:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
-          type: array
-      required:
-      - aggregations
-      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         aggregations:
@@ -6599,15 +6590,6 @@ components:
       - name
       - condition
       type: object
-    SpantypesPostableTraceAggregations:
-      properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregation'
-          type: array
-      required:
-      - aggregations
-      type: object
     SpantypesPostableWaterfall:
       properties:
         aggregations:
@@ -6632,9 +6614,6 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-      required:
-      - field
-      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6648,10 +6627,6 @@ components:
             type: integer
           nullable: true
           type: object
-      required:
-      - field
-      - aggregation
-      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -12290,75 +12265,6 @@ paths:
       summary: Test notification channel (deprecated)
       tags:
       - channels
-  /api/v1/traces/{traceID}/aggregations:
-    post:
-      deprecated: false
-      description: Computes span aggregations grouped by requested field.
-      operationId: GetTraceAggregations
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SpantypesPostableTraceAggregations'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableTraceAggregations'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get aggregations for a trace
-      tags:
-      - tracedetail
   /api/v1/user:
     get:
       deprecated: false

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

@@ -7753,19 +7753,12 @@ export type SpantypesSpanAggregationResultDTOValue =
 	SpantypesSpanAggregationResultDTOValueAnyOf | null;
 
 export interface SpantypesSpanAggregationResultDTO {
-	aggregation: SpantypesSpanAggregationTypeDTO;
-	field: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
 	/**
 	 * @type object,null
 	 */
-	value: SpantypesSpanAggregationResultDTOValue;
-}
-
-export interface SpantypesGettableTraceAggregationsDTO {
-	/**
-	 * @type array
-	 */
-	aggregations: SpantypesSpanAggregationResultDTO[];
+	value?: SpantypesSpanAggregationResultDTOValue;
 }
 
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
@@ -8007,15 +8000,8 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 }
 
 export interface SpantypesSpanAggregationDTO {
-	aggregation: SpantypesSpanAggregationTypeDTO;
-	field: TelemetrytypesTelemetryFieldKeyDTO;
-}
-
-export interface SpantypesPostableTraceAggregationsDTO {
-	/**
-	 * @type array
-	 */
-	aggregations: SpantypesSpanAggregationDTO[];
+	aggregation?: SpantypesSpanAggregationTypeDTO;
+	field?: TelemetrytypesTelemetryFieldKeyDTO;
 }
 
 export interface SpantypesPostableWaterfallDTO {
@@ -9358,17 +9344,6 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
-export type GetTraceAggregationsPathParameters = {
-	traceID: string;
-};
-export type GetTraceAggregations200 = {
-	data: SpantypesGettableTraceAggregationsDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

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

@@ -12,120 +12,17 @@ import type {
 } from 'react-query';
 
 import type {
-	GetTraceAggregations200,
-	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
-	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-/**
- * Computes span aggregations grouped by requested field.
- * @summary Get aggregations for a trace
- */
-export const getTraceAggregations = (
-	{ traceID }: GetTraceAggregationsPathParameters,
-	spantypesPostableTraceAggregationsDTO?: BodyType<SpantypesPostableTraceAggregationsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetTraceAggregations200>({
-		url: `/api/v1/traces/${traceID}/aggregations`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableTraceAggregationsDTO,
-		signal,
-	});
-};
-
-export const getGetTraceAggregationsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		TError,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getTraceAggregations>>,
-	TError,
-	{
-		pathParams: GetTraceAggregationsPathParameters;
-		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getTraceAggregations'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getTraceAggregations(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetTraceAggregationsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getTraceAggregations>>
->;
-export type GetTraceAggregationsMutationBody =
-	| BodyType<SpantypesPostableTraceAggregationsDTO>
-	| undefined;
-export type GetTraceAggregationsMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get aggregations for a trace
- */
-export const useGetTraceAggregations = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getTraceAggregations>>,
-		TError,
-		{
-			pathParams: GetTraceAggregationsPathParameters;
-			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getTraceAggregations>>,
-	TError,
-	{
-		pathParams: GetTraceAggregationsPathParameters;
-		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getGetTraceAggregationsMutationOptions(options));
-};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

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

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

@@ -69,8 +69,6 @@ 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;
@@ -94,7 +92,6 @@ 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,7 +62,6 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 						onSearch: jest.fn(),
 						onSelect: jest.fn(),
 						onRemove: jest.fn(),
-						onReorder: jest.fn(),
 					},
 				}}
 			/>,

frontend/src/components/NewSelect/styles.scss

@@ -483,12 +483,8 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
-			> label {
-				flex: 1 1 auto;
-				min-width: 0;
+			> span:not(.ant-checkbox) {
+				width: 100%;
 			}
 
 			.all-option-text {
@@ -505,12 +501,7 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
 					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -523,30 +514,26 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			// Size the buttons to the row's resting content height (20px) and fully
-			// override antd's default 32px Button box, so revealing them on hover
-			// never changes the row height.
-			.only-btn,
+			.only-btn {
+				display: none;
+			}
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				padding: 0 6px;
-				font-size: 12px;
-				line-height: 1;
-				border: none;
-				box-shadow: none;
+			}
 
-				&:hover {
-					background-color: unset;
-				}
+			.only-btn:hover {
+				background-color: unset;
+			}
+			.toggle-btn:hover {
+				background-color: unset;
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -561,6 +548,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -322,7 +322,9 @@ function TanStackTableInner<TData>(
 	});
 
 	const hasSingleColumn = useMemo(
-		() => effectiveColumns.filter((c) => !c.pin).length <= 1,
+		() =>
+			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
+			1,
 		[effectiveColumns],
 	);
 

frontend/src/constants/localStorage.ts

@@ -42,5 +42,4 @@ 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/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -42,7 +42,7 @@
 		flex-direction: column;
 		gap: 4px;
 		.count-label {
-			color: var(--l1-foreground) !important;
+			color: var(--l1-foreground);
 			font-family: 'Geist Mono';
 			font-size: 24px;
 			line-height: 36px;

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

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

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

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

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

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

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

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

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

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

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -121,6 +121,11 @@ function Hosts(): JSX.Element {
 		[dotMetricsEnabled],
 	);
 
+	const primaryFilterKeys = useMemo(
+		() => [dotMetricsEnabled ? 'host.name' : 'host_name'],
+		[dotMetricsEnabled],
+	);
+
 	const controlListPrefix = !showFilters ? (
 		<div className={styles.quickFiltersToggleContainer}>
 			<Button
@@ -183,6 +188,7 @@ 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,6 +101,10 @@ 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,6 +15,7 @@ import {
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemFilters,
 	k8sClusterInitialEventsFilter,
+	k8sClusterInitialFilters,
 	k8sClusterInitialLogTracesFilter,
 } from './constants';
 import {
@@ -105,6 +106,7 @@ function K8sClustersList({
 				getEntityName={k8sClusterGetEntityName}
 				getInitialLogTracesFilters={k8sClusterInitialLogTracesFilter}
 				getInitialEventsFilters={k8sClusterInitialEventsFilter}
+				primaryFilterKeys={k8sClusterInitialFilters}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -46,6 +46,11 @@ 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,6 +16,7 @@ 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';
@@ -23,11 +24,13 @@ 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';
@@ -51,6 +54,9 @@ 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,
@@ -66,7 +72,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -77,7 +83,16 @@ function LiveLogsList({
 		[formattedLogs, activeLogId],
 	);
 
-	const selectedFields = convertKeysToColumnFields(options.selectColumns);
+	const selectedFields = convertKeysToColumnFields([
+		...defaultLogsSelectedColumns,
+		...options.selectColumns,
+	]);
+
+	const syncedSelectedColumns = useMemo(
+		() =>
+			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
+		[options.selectColumns, hiddenColumnIds],
+	);
 
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
@@ -85,6 +100,30 @@ 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 => {
@@ -198,7 +237,7 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							onColumnRemove={config?.addColumn?.onRemove}
+							onColumnRemove={handleColumnRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}
 							data={formattedLogs}

frontend/src/container/LogsExplorerList/index.tsx

@@ -18,19 +18,21 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
 import type { TanStackTableHandle } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
+import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
 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';
@@ -67,6 +69,10 @@ 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,
@@ -75,7 +81,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options, config } = useOptionsMenu({
+	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -91,15 +97,28 @@ function LogsExplorerList({
 	);
 
 	const selectedFields = useMemo(
-		() => convertKeysToColumnFields(options.selectColumns),
-		[options.selectColumns],
+		() =>
+			convertKeysToColumnFields([
+				...defaultLogsSelectedColumns,
+				...options.selectColumns,
+			]),
+		[options],
 	);
 
-	const handleColumnOrderChange = useCallback(
-		(cols: TableColumnDef<ILog>[]): void => {
-			config?.addColumn?.onReorder(cols.map((c) => c.id));
+	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);
 		},
-		[config],
+		[options.selectColumns, logsPreferences],
 	);
 
 	const logsColumns = useLogsTableColumns({
@@ -142,6 +161,20 @@ 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') {
@@ -204,8 +237,7 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-					onColumnRemove={config?.addColumn?.onRemove}
-					onColumnOrderChange={handleColumnOrderChange}
+					onColumnRemove={handleColumnRemove}
 					plainTextCellLineClamp={options.maxLines}
 					cellTypographySize={options.fontSize}
 					data={logs}

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

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

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -187,6 +187,30 @@ 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,
@@ -273,9 +297,24 @@ 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, updateColumns],
+		[
+			searchedAttributeKeys,
+			selectedColumnKeys,
+			preferences,
+			handleRedirectWithOptionsData,
+			updateColumns,
+		],
 	);
 
 	const handleRemoveSelectedColumn = useCallback(
@@ -288,12 +327,27 @@ const useOptionsMenu = ({
 				notifications.error({
 					message: 'There must be at least one selected column',
 				});
-				return;
+			} 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);
 			}
-
-			updateColumns(newSelectedColumns || []);
 		},
-		[dataSource, notifications, preferences, updateColumns],
+		[
+			dataSource,
+			notifications,
+			preferences,
+			handleRedirectWithOptionsData,
+			updateColumns,
+		],
 	);
 
 	const handleFormatChange = useCallback(
@@ -360,18 +414,6 @@ 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);
 	};
@@ -394,7 +436,6 @@ const useOptionsMenu = ({
 				onSelect: handleSelectColumns,
 				onRemove: handleRemoveSelectedColumn,
 				onSearch: handleSearchAttribute,
-				onReorder: reorderSelectColumns,
 			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
@@ -416,7 +457,6 @@ const useOptionsMenu = ({
 			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
-			reorderSelectColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

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

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

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

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

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.styles.scss

@@ -9,19 +9,6 @@
 		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: flex;
+		display: inline-block;
 		border-radius: 3px;
 		padding: 0.1rem 0.2rem;
 		font-weight: 300;

frontend/src/container/RoutingPolicies/styles.scss

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

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

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

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

@@ -30,7 +30,10 @@ 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';
@@ -82,6 +85,10 @@ function ListView({
 		},
 	});
 
+	const { draggedColumns, onDragColumns } = useDragColumns<RowData>(
+		LOCALSTORAGE.TRACES_LIST_COLUMNS,
+	);
+
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -93,19 +100,6 @@ 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,
@@ -115,7 +109,7 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			selectColumnsSignature,
+			options?.selectColumns,
 			orderBy,
 		],
 		[
@@ -123,7 +117,7 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			selectColumnsSignature,
+			options?.selectColumns,
 			maxTime,
 			minTime,
 			orderBy,
@@ -188,14 +182,13 @@ function ListView({
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const columns = useMemo(
-		() =>
-			getListColumns(
-				options?.selectColumns || [],
-				formatTimezoneAdjustedTimestamp,
-			),
-		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
-	);
+	const columns = useMemo(() => {
+		const updatedColumns = getListColumns(
+			options?.selectColumns || [],
+			formatTimezoneAdjustedTimestamp,
+		);
+		return getDraggedColumns(updatedColumns, draggedColumns);
+	}, [options?.selectColumns, formatTimezoneAdjustedTimestamp, draggedColumns]);
 
 	const transformedQueryTableData = useMemo(
 		() => transformDataWithDate(queryTableData) || [],
@@ -203,16 +196,9 @@ function ListView({
 	);
 
 	const handleDragColumn = useCallback(
-		(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],
+		(fromIndex: number, toIndex: number) =>
+			onDragColumns(columns, fromIndex, toIndex),
+		[columns, onDragColumns],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {

frontend/src/hooks/useIsDashboardV2.ts

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

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

frontend/src/pages/DashboardPageV2/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,154 +0,0 @@
-{
-    "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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/pages/DashboardsListPageV2/utils.ts

@@ -1,52 +0,0 @@
-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,6 +3,7 @@ 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';
@@ -14,6 +15,12 @@ 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';
@@ -24,9 +31,11 @@ import {
 	useHandleExplorerTabChange,
 } from 'hooks/useHandleExplorerTabChange';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { defaultTo, isEmpty, isNull } from 'lodash-es';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { defaultTo, isEmpty, isEqual, 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 {
@@ -53,6 +62,8 @@ 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(
@@ -171,6 +182,116 @@ 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/MetricsExplorer/MetricsExplorerPage.styles.scss

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

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

@@ -108,9 +108,7 @@ describe('PreferencesProvider integration', () => {
 				},
 			);
 
-			// 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);
+			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(1);
 		});
 
 		it('direct mode updateColumns persists to localStorage', async () => {
@@ -128,11 +126,8 @@ 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[1] as TelemetryFieldKey, // body
-				defaultLogsSelectedColumns[0] as TelemetryFieldKey, // timestamp
+				defaultLogsSelectedColumns[0] as TelemetryFieldKey,
 			]);
 		});
 
@@ -188,9 +183,7 @@ describe('PreferencesProvider integration', () => {
 				value: originalLocation,
 			});
 
-			// 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);
+			expect(Number(screen.getByTestId('logs-columns-len').textContent)).toBe(1);
 		});
 
 		it('updateFormatting persists to localStorage in direct mode', async () => {

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

@@ -1,10 +1,7 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { LogViewMode } from 'container/LogsTable';
-import {
-	defaultLogsSelectedColumns,
-	defaultOptionsQuery,
-} from 'container/OptionsMenu/constants';
+import { defaultOptionsQuery } from 'container/OptionsMenu/constants';
 import { FontSize } from 'container/OptionsMenu/types';
 import {
 	FormattingOptions,
@@ -88,21 +85,18 @@ 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: guardedColumns,
+			selectColumns: newColumns,
 		});
 
-		// Should update localStorage with the guarded shape
+		// Should update localStorage
 		const storedData = JSON.parse(
 			mockLocalStorage[LOCALSTORAGE.LOGS_LIST_OPTIONS],
 		);
-		expect(storedData.selectColumns).toStrictEqual(guardedColumns);
+		expect(storedData.selectColumns).toStrictEqual(newColumns);
 		expect(storedData.maxLines).toBe(1); // Should preserve other fields
 
 		// Should not update saved view preferences

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

@@ -1,5 +1,4 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { DataSource } from 'types/common/queryBuilder';
 
 import logsLoaderConfig from '../configs/logsLoaderConfig';
@@ -61,9 +60,9 @@ describe('usePreferenceLoader', () => {
 			expect(result.current.loading).toBe(false);
 		});
 
-		// Loader wraps with ensureLogsRequiredColumns — body+timestamp always prepended
+		// Should have loaded from local storage (highest priority)
 		expect(result.current.preferences).toStrictEqual({
-			columns: [...defaultLogsSelectedColumns, { name: 'local-column' }],
+			columns: [{ 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,10 +3,7 @@ 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,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
+import { defaultOptionsQuery } from 'container/OptionsMenu/constants';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
 
 import { FormattingOptions, PreferenceMode, Preferences } from '../types';
@@ -21,12 +18,11 @@ 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: guardedColumns,
+						columns: newColumns,
 						formatting: {
 							maxLines: 1,
 							format: 'table',
@@ -38,7 +34,7 @@ const getLogsUpdaterConfig = (
 
 				return {
 					...prev,
-					columns: guardedColumns,
+					columns: newColumns,
 				};
 			});
 		}
@@ -48,14 +44,14 @@ const getLogsUpdaterConfig = (
 			redirectWithOptionsData({
 				...defaultOptionsQuery,
 				...preferences?.formatting,
-				selectColumns: guardedColumns,
+				selectColumns: newColumns,
 			});
 
 			// Also update local storage
 			const local = JSON.parse(
 				getLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS) || '{}',
 			);
-			local.selectColumns = guardedColumns;
+			local.selectColumns = newColumns;
 			setLocalStorageKey(LOCALSTORAGE.LOGS_LIST_OPTIONS, JSON.stringify(local));
 		}
 	},

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

@@ -1,6 +1,5 @@
 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';
 
@@ -52,11 +51,7 @@ function logsPreferencesLoader(): {
 	columns: TelemetryFieldKey[];
 	formatting: FormattingOptions;
 } {
-	const result = preferencesLoader<{
-		columns: TelemetryFieldKey[];
-		formatting: FormattingOptions;
-	}>(logsLoaderConfig);
-	return { ...result, columns: ensureLogsRequiredColumns(result.columns) };
+	return preferencesLoader(logsLoaderConfig);
 }
 
 function tracesPreferencesLoader(): {

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

@@ -1,10 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import {
-	defaultLogsSelectedColumns,
-	ensureLogsRequiredColumns,
-} from 'container/OptionsMenu/constants';
+import { defaultLogsSelectedColumns } 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';
@@ -57,10 +54,9 @@ export function usePreferenceSync({
 		let columns: TelemetryFieldKey[] = [];
 		let formatting: FormattingOptions | undefined;
 		if (dataSource === DataSource.LOGS) {
-			columns = ensureLogsRequiredColumns(
+			columns =
 				updateExtraDataSelectColumns(parsedExtraData?.selectColumns) ||
-					defaultLogsSelectedColumns,
-			);
+				defaultLogsSelectedColumns;
 			formatting = {
 				maxLines: parsedExtraData?.maxLines ?? 1,
 				format: parsedExtraData?.format ?? 'table',

frontend/tsconfig.json

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

pkg/apiserver/signozapiserver/tracedetail.go

@@ -48,24 +48,5 @@ 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
-	}
-
 	return nil
 }

pkg/modules/tracedetail/impltracedetail/handler.go

@@ -59,24 +59,3 @@ 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)
-}

pkg/modules/tracedetail/impltracedetail/module.go

@@ -105,49 +105,6 @@ func (m *module) getFullWaterfall(ctx context.Context, traceID string, summary *
 	return spantypes.NewGettableWaterfallTrace(waterfallTrace, selectedSpans, nil, true, nil), nil
 }
 
-func (m *module) GetTraceAggregations(ctx context.Context, traceID string, req *spantypes.PostableTraceAggregations) (*spantypes.GettableTraceAggregations, error) {
-	summary, err := m.store.GetTraceSummary(ctx, traceID)
-	if err != nil {
-		return nil, err
-	}
-
-	traceDurationNs := uint64(summary.End.UnixNano()) - uint64(summary.Start.UnixNano())
-
-	results := make([]spantypes.SpanAggregationResult, 0, len(req.Aggregations))
-	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
-}
-
 // getWindowedWaterfall builds the waterfall tree with minimal data and then returns only a window of full spans.
 func (m *module) getWindowedWaterfall(ctx context.Context, traceID, selectedSpanID string, uncollapsedSpans []string, start, end time.Time) (*spantypes.GettableWaterfallTrace, error) {
 	// Step 1: minimal fetch → build full tree → select visible window

pkg/modules/tracedetail/impltracedetail/store.go

@@ -11,30 +11,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/spantypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
 const colServiceName = `resource_string_service$$$$name` // $ gets escaped so $$$$ converts to $$.
 
-func buildFieldExpr(fieldKey telemetrytypes.TelemetryFieldKey) (string, error) {
-	switch fieldKey.FieldContext {
-	case telemetrytypes.FieldContextResource:
-		// String cast required — Variant/Dynamic is rejected by GROUP BY.
-		return fmt.Sprintf("resource.`%s`::String", fieldKey.Name), nil
-	}
-	return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported field context: %v", fieldKey.FieldContext)
-}
-
-type spanCountRow struct {
-	FieldValue string `ch:"field_value"`
-	Count      uint64 `ch:"count"`
-}
-
-type spanDurationRow struct {
-	FieldValue string `ch:"field_value"`
-	TotalNs    uint64 `ch:"total_ns"`
-}
-
 type traceStore struct {
 	telemetryStore telemetrystore.TelemetryStore
 }
@@ -153,85 +133,3 @@ func (s *traceStore) GetTraceSpansByIDs(ctx context.Context, traceID string, sta
 	}
 	return spans, nil
 }
-
-func (s *traceStore) GetSpanCountByField(ctx context.Context, traceID string, summary *spantypes.TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error) {
-	fieldExpr, err := buildFieldExpr(fieldKey)
-	if err != nil {
-		return nil, err
-	}
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select(fieldExpr+" AS field_value", "count(DISTINCT span_id) AS count")
-	sb.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
-	sb.Where(
-		sb.E("trace_id", traceID),
-		sb.GE("ts_bucket_start", summary.Start.Unix()-1800),
-		sb.LE("ts_bucket_start", summary.End.Unix()),
-		"notEmpty("+fieldExpr+")",
-	)
-	sb.GroupBy("field_value")
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-
-	var rows []spanCountRow
-	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &rows, query, args...); err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying span count by field")
-	}
-	result := make(map[string]uint64, len(rows))
-	for _, r := range rows {
-		result[r.FieldValue] = r.Count
-	}
-	return result, nil
-}
-
-func (s *traceStore) GetSpanDurationByField(ctx context.Context, traceID string, summary *spantypes.TraceSummary, fieldKey telemetrytypes.TelemetryFieldKey) (map[string]uint64, error) {
-	fieldExpr, err := buildFieldExpr(fieldKey)
-	if err != nil {
-		return nil, err
-	}
-
-	// CTE 1: all span with start and end timestamps.
-	allSpansSB := sqlbuilder.NewSelectBuilder()
-	allSpansSB.Select(
-		"DISTINCT ON (span_id) "+fieldExpr+" AS field_value",
-		"toUnixTimestamp64Nano(timestamp) AS start_ns",
-		"start_ns + duration_nano AS end_ns",
-	)
-	allSpansSB.From(fmt.Sprintf("%s.%s", spantypes.TraceDB, spantypes.TraceTable))
-	allSpansSB.Where(
-		allSpansSB.E("trace_id", traceID),
-		allSpansSB.GE("ts_bucket_start", summary.Start.Unix()-1800),
-		allSpansSB.LE("ts_bucket_start", summary.End.Unix()),
-		"notEmpty(field_value)",
-	)
-	allSpansSB.OrderByAsc("timestamp")
-	allSpansSB.OrderByAsc("name")
-
-	// CTE 2: find max end time of all preceding spans.
-	effectiveStartSB := sqlbuilder.NewSelectBuilder()
-	effectiveStartSB.Select(
-		"field_value", "end_ns",
-		"greatest(start_ns, ifNull(max(end_ns) OVER (PARTITION BY field_value ORDER BY start_ns ROWS BETWEEN UNBOUNDED PRECEDING AND 1 PRECEDING), toUInt64(0))) AS effective_start_ns",
-	)
-	effectiveStartSB.From("all_spans")
-
-	// Final SELECT: each span contributes only the tail past its effective start.
-	sb := sqlbuilder.With(
-		sqlbuilder.CTEQuery("all_spans").As(allSpansSB),
-		sqlbuilder.CTEQuery("effective_start").As(effectiveStartSB),
-	).Select(
-		"field_value",
-		"sum(toUInt64(greatest(end_ns - effective_start_ns, 0))) AS total_ns",
-	)
-	sb.From("effective_start")
-	sb.GroupBy("field_value")
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var rows []spanDurationRow
-	if err := s.telemetryStore.ClickhouseDB().Select(ctx, &rows, query, args...); err != nil {
-		return nil, errors.WrapInternalf(err, errors.CodeInternal, "error querying span duration by field")
-	}
-	result := make(map[string]uint64, len(rows))
-	for _, r := range rows {
-		result[r.FieldValue] = r.TotalNs
-	}
-	return result, nil
-}

pkg/modules/tracedetail/impltracedetail/store_test.go

@@ -1,118 +0,0 @@
-package impltracedetail_test
-
-import (
-	"context"
-	"regexp"
-	"testing"
-	"time"
-
-	"github.com/DATA-DOG/go-sqlmock"
-	cmock "github.com/SigNoz/clickhouse-go-mock"
-	"github.com/SigNoz/signoz/pkg/modules/tracedetail/impltracedetail"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
-	"github.com/SigNoz/signoz/pkg/types/spantypes"
-	"github.com/SigNoz/signoz/pkg/types/spantypes/spantypestest"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/stretchr/testify/assert"
-)
-
-var (
-	testTraceID = "trace-abc123"
-	testStart   = time.Unix(1000, 0).UTC()
-	testEnd     = time.Unix(2000, 0).UTC()
-	testSummary = &spantypes.TraceSummary{
-		TraceID:  testTraceID,
-		Start:    testStart,
-		End:      testEnd,
-		NumSpans: 10,
-	}
-	svcNameField = telemetrytypes.TelemetryFieldKey{
-		Name:         "service.name",
-		FieldContext: telemetrytypes.FieldContextResource,
-	}
-	unsupportedField = telemetrytypes.TelemetryFieldKey{
-		Name:         "http.method",
-		FieldContext: telemetrytypes.FieldContextSpan,
-	}
-)
-
-func newTestStore(matcher sqlmock.QueryMatcher) *spantypestest.TraceStoreTest {
-	ts := telemetrystoretest.New(telemetrystore.Config{}, matcher)
-	return spantypestest.New(impltracedetail.NewTraceStore(ts), ts.Mock())
-}
-
-func TestGetTraceSummary(t *testing.T) {
-	expectedSQL := "SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM signoz_traces.distributed_trace_summary WHERE trace_id = ? GROUP BY trace_id"
-
-	t.Run("ValidTraceID_GeneratesExpectedSQL", func(t *testing.T) {
-		s := newTestStore(sqlmock.QueryMatcherRegexp)
-		s.Mock().ExpectQueryRow(regexp.QuoteMeta(expectedSQL)).
-			WillReturnRow(cmock.NewRow(nil, nil))
-		_, _ = s.Store().GetTraceSummary(context.Background(), testTraceID)
-		assert.NoError(t, s.Mock().ExpectationsWereMet())
-	})
-}
-
-func TestGetMinimalSpans(t *testing.T) {
-	expectedSQL := "SELECT DISTINCT ON (span_id) span_id, parent_span_id, timestamp, duration_nano, has_error, resource_string_service$$name FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp ASC, name ASC"
-
-	t.Run("ValidRange_GeneratesExpectedSQL", func(t *testing.T) {
-		s := newTestStore(sqlmock.QueryMatcherRegexp)
-		s.Mock().ExpectSelect(regexp.QuoteMeta(expectedSQL)).
-			WillReturnRows(cmock.NewRows(nil, nil))
-		_, _ = s.Store().GetMinimalSpans(context.Background(), testTraceID, testStart, testEnd)
-		assert.NoError(t, s.Mock().ExpectationsWereMet())
-	})
-}
-
-func TestGetSpanCountByField(t *testing.T) {
-	expectedSQL := "SELECT resource.`service.name`::String AS field_value, count(DISTINCT span_id) AS count FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND notEmpty(resource.`service.name`::String) GROUP BY field_value"
-
-	tests := []struct {
-		name      string
-		field     telemetrytypes.TelemetryFieldKey
-		wantQuery bool
-	}{
-		{name: "ResourceField_GeneratesExpectedSQL", field: svcNameField, wantQuery: true},
-		{name: "NonResourceField_NoSQLGenerated", field: unsupportedField},
-	}
-
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			s := newTestStore(sqlmock.QueryMatcherRegexp)
-			if tc.wantQuery {
-				s.Mock().ExpectSelect(regexp.QuoteMeta(expectedSQL)).
-					WillReturnRows(cmock.NewRows(nil, nil))
-			}
-			_, _ = s.Store().GetSpanCountByField(context.Background(), testTraceID, testSummary, tc.field)
-			assert.NoError(t, s.Mock().ExpectationsWereMet())
-		})
-	}
-}
-
-func TestGetSpanDurationByField(t *testing.T) {
-
-	expectedSQL := "WITH all_spans AS (SELECT DISTINCT ON (span_id) resource.`service.name`::String AS field_value, toUnixTimestamp64Nano(timestamp) AS start_ns, start_ns + duration_nano AS end_ns FROM signoz_traces.distributed_signoz_index_v3 WHERE trace_id = ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND notEmpty(field_value) ORDER BY timestamp ASC, name ASC), effective_start AS (SELECT field_value, end_ns, greatest(start_ns, ifNull(max(end_ns) OVER (PARTITION BY field_value ORDER BY start_ns ROWS BETWEEN UNBOUNDED PRECEDING AND 1 PRECEDING), toUInt64(0))) AS effective_start_ns FROM all_spans) SELECT field_value, sum(toUInt64(greatest(end_ns - effective_start_ns, 0))) AS total_ns FROM effective_start GROUP BY field_value"
-
-	tests := []struct {
-		name      string
-		field     telemetrytypes.TelemetryFieldKey
-		wantQuery bool
-	}{
-		{name: "ResourceField_GeneratesExpectedSQL", field: svcNameField, wantQuery: true},
-		{name: "NonResourceField_NoSQLGenerated", field: unsupportedField},
-	}
-
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			s := newTestStore(sqlmock.QueryMatcherRegexp)
-			if tc.wantQuery {
-				s.Mock().ExpectSelect(regexp.QuoteMeta(expectedSQL)).
-					WillReturnRows(cmock.NewRows(nil, nil))
-			}
-			_, _ = s.Store().GetSpanDurationByField(context.Background(), testTraceID, testSummary, tc.field)
-			assert.NoError(t, s.Mock().ExpectationsWereMet())
-		})
-	}
-}

pkg/modules/tracedetail/tracedetail.go

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