feat: adding gcp gke service

* fix(querier): restrict user-authored clickhouse sql to read-only selects

Validate every user-authored ClickHouse statement before it runs: exactly one
statement, SELECT only, no table functions and no readonly override. Validation
runs on the rendered statement, since substituted variable values are user input
too.

Apply it to both entry points that reach the telemetry store with user SQL, the
clickhouse_sql query type in query_range and the dashboard variables query, and
replace the substring blacklist in the latter, which ran before substitution.

Also run these statements with readonly = 2 as a backstop. The connection is
shared with write paths, so it is opt-in per query and writers never set it.

* fix(querier): address review on clickhouse sql validation

Rename the validator to ValidateReadOnlySelect and collapse the multi-line error
constructions onto single lines.

Carry the parse failure in the message rather than as a wrapped cause. Neither
renderer surfaces the cause: render.Error reads only the message off the base
error, and RespondError reads Error(), which returns the cause alone and drops
the message. Both now show the same text with a 400.

Add unit tests covering statement kinds, table functions nested in joins, CTEs,
subqueries and unions, and readonly overrides.

* fix(querier): reject internal databases in user-authored clickhouse sql

Reading system or information_schema exposes grants, users and server metadata,
and ClickHouse read-only mode does not prevent it, so reject any table reference
into them.

Update the dashboard variables test for the new rejection message and cover both
a statement smuggled through a variable value and a system table read.

* fix(querier): reject unterminated block comments before parsing

The parser loops forever on an unterminated block comment, so validating a query
containing one would spin a request goroutine at full CPU instead of rejecting
it. Detect it up front, skipping comment markers that sit inside string literals.

Cover the parser panicking on a settings clause with no value in its own test,
which asserts the input still panics the parser so the case cannot quietly stop
exercising the recover.

* fix(querier): drop the block comment guard now the parser handles it

The parser no longer loops on an unterminated block comment, so the hand-rolled
scan that worked around it is redundant, and it was the riskier of the two: it
duplicated the lexer's handling of string literals and could have rejected a
legitimate query. Leave the parser as the single source of truth.

The panic case likewise no longer panics, so its test can no longer cover the
recover and is removed. The recover stays as insurance, since this reaches
user-authored SQL and the parser has regressed this way before.

Cover INTERSECT and EXCEPT, which the parser only started accepting in this
version and which reach a second query through the same rules.

* fix(querier): log clickhouse sql validation failures instead of rejecting

The parser's grammar has gaps against SQL that ClickHouse accepts, so rejecting
whatever it cannot read would break working dashboards and alerts. Sampling a
week of production clickhouse_sql found roughly one query in eighteen tripping
one of three gaps, none of them reading anything a telemetry query should not.

Log the failure with the rendered query instead, so the gaps can be told apart
from statements that genuinely break the rules before anything is enforced.

Wrap the parse error rather than formatting it in, so a caller can recover the
parser's *ParseError and read the position off it. The tests use that to pin the
construct each gap stops at, alongside the rewrite that the parser does accept.

* chore(querier): tighten the clickhouse sql validation comments

Condense the comments to single lines, move the recover note inside the defer it
explains, separate the visitor cases, and shorten the log message. Report how
many statements were found when rejecting a multi-statement query.

* fix(querier): log invalid clickhouse sql on the dashboard variables path too

The two callers disagreed: query_range logged and carried on, while dashboard
variables rejected. Given the parser trips on roughly one real query in eighteen,
that path could refuse a legitimate variable query, and being a rejection it left
nothing behind to show it had happened.

Both now go through LogIfStatementIsNotValid. prepareQuery is back to rendering
and nothing else, so the cases that expected it to police the statement move to
where the rules actually live.

* fix(querier): drop the read-only clickhouse session

Setting readonly on the session was defence in depth for a validator that now
only logs, so it guarded nothing while adding a context key and a settings branch
to a connection that is shared with every write path.

Restore the dashboard variables handler to what it was and call the validation
alongside, rather than reworking the rendering to accommodate it.

* chore(querybuilder): drop the redundant suffix from the failing case names

The test they sit in is already named _Fail.

cmd/metastore.go

@@ -8,6 +8,8 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/instrumentation"
+	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/pkg/modules/tag/impltag"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlmigration"
 	"github.com/SigNoz/signoz/pkg/sqlmigrator"
@@ -145,7 +147,7 @@ func newSyncMigrator(ctx context.Context, config signoz.Config, sqlstoreProvider
 		return nil, err
 	}
 
-	sqlmigrations, err := sqlmigration.New(ctx, providerSettings, config.SQLMigration, signoz.NewSQLMigrationProviderFactories(sqlstore, sqlschema, telemetrystore, providerSettings))
+	sqlmigrations, err := sqlmigration.New(ctx, providerSettings, config.SQLMigration, signoz.NewSQLMigrationProviderFactories(sqlstore, sqlschema, telemetrystore, providerSettings, impldashboard.NewStore(sqlstore), impltag.NewModule(impltag.NewStore(sqlstore))))
 	if err != nil {
 		return nil, err
 	}

docs/api/openapi.yml

@@ -1496,6 +1496,7 @@ components:
       - redis
       - cloudsql_postgres
       - memorystore_redis
+      - computeengine
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -7238,6 +7239,10 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
+        relatedLogsLink:
+          type: string
+        relatedTracesLink:
+          type: string
         ruleId:
           type: string
         ruleName:
@@ -9930,14 +9935,9 @@ paths:
     get:
       deprecated: false
       description: This endpoint lists the services metadata for the specified cloud
-        provider
+        provider, without any account context.
       operationId: ListServicesMetadata
       parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
       - in: path
         name: cloud_provider
         required: true
@@ -9987,14 +9987,10 @@ paths:
   /api/v1/cloud_integrations/{cloud_provider}/services/{service_id}:
     get:
       deprecated: false
-      description: This endpoint gets a service for the specified cloud provider
+      description: This endpoint gets a service definition for the specified cloud
+        provider, without any account context.
       operationId: GetService
       parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
       - in: path
         name: cloud_provider
         required: true

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -551,12 +551,12 @@ func (module *module) provisionDashboards(ctx context.Context, orgID valuer.UUID
 			continue
 		}
 
-		createdDashboard, err := module.dashboardModule.Create(ctx, orgID, createdBy, creator, dashboardtypes.SourceIntegration, dashboardtypes.PostableDashboard(dashboard.Definition))
+		createdDashboard, err := module.dashboardModule.CreateV2(ctx, orgID, createdBy, creator, dashboardtypes.SourceIntegration, dashboard.Definition)
 		if err != nil {
 			return err
 		}
 
-		integrationDashboard := cloudintegrationtypes.NewStorableIntegrationDashboard(createdDashboard.ID, cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
+		integrationDashboard := cloudintegrationtypes.NewStorableIntegrationDashboard(createdDashboard.ID.StringValue(), cloudintegrationtypes.IntegrationDashboardProviderCloudIntegration, slug)
 		if err := module.store.CreateIntegrationDashboard(ctx, integrationDashboard); err != nil {
 			return err
 		}

ee/query-service/app/api/featureFlags.go

@@ -89,15 +89,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	useDashboardV2 := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureUseDashboardV2, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureUseDashboardV2.String()),
-		Active:     useDashboardV2,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
 	featureSet = append(featureSet, &licensetypes.Feature{
 		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,6 +2,29 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
+// The wire shape these handlers can actually rely on. The generated
+// RenderErrorResponseDTO marks code/message/url/errors as required, but the
+// server omits any of them even on valid errors (e.g. a 400 with just a
+// message), so a present `error` object is all the guard can guarantee.
+type ErrorEnvelope = {
+	error: {
+		code?: string;
+		message?: string;
+		url?: string;
+		errors?: { message?: string }[];
+	};
+};
+
+function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorEnvelope).error === 'object' &&
+		(data as ErrorEnvelope).error !== null
+	);
+}
+
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -10,15 +33,29 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy. Verify the shape before reading
+		// it; otherwise synthesize a consistent error from the status.
+		const data: unknown = response.data;
+		if (isErrorEnvelope(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: {
+					code: code ?? '',
+					message: message ?? '',
+					url: url ?? '',
+					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
+				},
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url ?? '',
-				errors: (response.data.error.errors ?? []).map((e) => ({
-					message: e.message ?? '',
-				})),
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}
@@ -62,9 +99,7 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code:
-				errorData?.code ||
-				String(response?.status || error.code || 'unknown_error'),
+			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,19 +2,38 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
+function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
+	return (
+		typeof data === 'object' &&
+		data !== null &&
+		'error' in data &&
+		typeof (data as ErrorV2Resp).error?.code === 'string'
+	);
+}
+
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
+		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
+		// with an HTML/empty body during a deploy), so verify the shape first.
+		const data: unknown = response.data;
+		if (isErrorV2Resp(data)) {
+			const { code, message, url, errors } = data.error;
+			throw new APIError({
+				httpStatusCode: response.status || 500,
+				error: { code, message, url, errors },
+			});
+		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: response.data.error.code,
-				message: response.data.error.message,
-				url: response.data.error.url,
-				errors: response.data.error.errors,
+				code: 'UPSTREAM_UNAVAILABLE',
+				message: error.message || 'Something went wrong',
+				url: '',
+				errors: [],
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -0,0 +1,126 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
+	return partial as AxiosError<ErrorV2Resp>;
+}
+
+// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
+// unconditional.
+function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
+	try {
+		ErrorResponseHandlerV2(error);
+	} catch (thrown) {
+		return thrown as APIError;
+	}
+	throw new Error('expected ErrorResponseHandlerV2 to throw');
+}
+
+type ExpectedError = {
+	httpStatusCode: number;
+	code: string;
+	message: string;
+	errors: { message: string }[];
+};
+
+// One row per response shape the handler must normalize. New shapes (with
+// different bodies) can be added here without a new test block.
+const cases: {
+	name: string;
+	error: AxiosError<ErrorV2Resp>;
+	expected: ExpectedError;
+}[] = [
+	{
+		name: 'well-formed V2 error envelope',
+		error: asAxiosError({
+			message: 'Request failed with status code 400',
+			response: {
+				status: 400,
+				data: {
+					error: {
+						code: 'bad_request',
+						message: 'Invalid dashboard payload',
+						url: 'https://signoz.io/docs',
+						errors: [{ message: 'name is required' }, { message: 'name too long' }],
+					},
+				},
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 400,
+			code: 'bad_request',
+			message: 'Invalid dashboard payload',
+			errors: [{ message: 'name is required' }, { message: 'name too long' }],
+		},
+	},
+	{
+		// Regression: during a deployment the gateway returns a 5xx with a
+		// non-envelope body. Reading response.data.error.code used to throw a
+		// TypeError from inside the handler itself. See engineering-pod#5760.
+		name: '5xx with a non-envelope HTML body',
+		error: asAxiosError({
+			message: 'Request failed with status code 503',
+			response: {
+				status: 503,
+				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 503,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 503',
+			errors: [],
+		},
+	},
+	{
+		name: '5xx with an empty body',
+		error: asAxiosError({
+			message: 'Request failed with status code 502',
+			response: {
+				status: 502,
+				data: undefined,
+			} as AxiosError['response'],
+		}),
+		expected: {
+			httpStatusCode: 502,
+			code: 'UPSTREAM_UNAVAILABLE',
+			message: 'Request failed with status code 502',
+			errors: [],
+		},
+	},
+	{
+		name: 'no response received (network error)',
+		error: asAxiosError({
+			message: 'Network Error',
+			code: 'ERR_NETWORK',
+			name: 'AxiosError',
+			request: {},
+		}),
+		expected: {
+			httpStatusCode: 500,
+			code: 'ERR_NETWORK',
+			message: 'Network Error',
+			errors: [],
+		},
+	},
+];
+
+describe('ErrorResponseHandlerV2', () => {
+	it.each(cases)(
+		'normalizes $name into a consistent APIError',
+		({ error, expected }) => {
+			const apiError = runHandler(error);
+
+			expect(apiError).toBeInstanceOf(APIError);
+			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
+			expect(apiError.getErrorCode()).toBe(expected.code);
+			expect(apiError.getErrorMessage()).toBe(expected.message);
+			// The sub-error messages feed several parts of the UI, so assert them.
+			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
+				expected.errors,
+			);
+		},
+	);
+});

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

@@ -36,14 +36,12 @@ import type {
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
-	GetServiceParams,
 	GetServicePathParameters,
 	ListAccountServicesMetadata200,
 	ListAccountServicesMetadataPathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
-	ListServicesMetadataParams,
 	ListServicesMetadataPathParameters,
 	RenderErrorResponseDTO,
 	UpdateAccountPathParameters,
@@ -1162,30 +1160,24 @@ export const invalidateGetConnectionCredentials = async (
 };
 
 /**
- * This endpoint lists the services metadata for the specified cloud provider
+ * This endpoint lists the services metadata for the specified cloud provider, without any account context.
  * @summary List services metadata
  */
 export const listServicesMetadata = (
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<ListServicesMetadata200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };
 
-export const getListServicesMetadataQueryKey = (
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/services`,
-		...(params ? [params] : []),
-	] as const;
+export const getListServicesMetadataQueryKey = ({
+	cloudProvider,
+}: ListServicesMetadataPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/services`] as const;
 };
 
 export const getListServicesMetadataQueryOptions = <
@@ -1193,7 +1185,6 @@ export const getListServicesMetadataQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1205,12 +1196,11 @@ export const getListServicesMetadataQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ??
-		getListServicesMetadataQueryKey({ cloudProvider }, params);
+		queryOptions?.queryKey ?? getListServicesMetadataQueryKey({ cloudProvider });
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof listServicesMetadata>>
-	> = ({ signal }) => listServicesMetadata({ cloudProvider }, params, signal);
+	> = ({ signal }) => listServicesMetadata({ cloudProvider }, signal);
 
 	return {
 		queryKey,
@@ -1238,7 +1228,6 @@ export function useListServicesMetadata<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1249,7 +1238,6 @@ export function useListServicesMetadata<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getListServicesMetadataQueryOptions(
 		{ cloudProvider },
-		params,
 		options,
 	);
 
@@ -1266,11 +1254,10 @@ export function useListServicesMetadata<
 export const invalidateListServicesMetadata = async (
 	queryClient: QueryClient,
 	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }, params) },
+		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }) },
 		options,
 	);
 
@@ -1278,29 +1265,26 @@ export const invalidateListServicesMetadata = async (
 };
 
 /**
- * This endpoint gets a service for the specified cloud provider
+ * This endpoint gets a service definition for the specified cloud provider, without any account context.
  * @summary Get service
  */
 export const getService = (
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetService200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };
 
-export const getGetServiceQueryKey = (
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-) => {
+export const getGetServiceQueryKey = ({
+	cloudProvider,
+	serviceId,
+}: GetServicePathParameters) => {
 	return [
 		`/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		...(params ? [params] : []),
 	] as const;
 };
 
@@ -1309,7 +1293,6 @@ export const getGetServiceQueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1321,12 +1304,11 @@ export const getGetServiceQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ??
-		getGetServiceQueryKey({ cloudProvider, serviceId }, params);
+		queryOptions?.queryKey ?? getGetServiceQueryKey({ cloudProvider, serviceId });
 
 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getService>>> = ({
 		signal,
-	}) => getService({ cloudProvider, serviceId }, params, signal);
+	}) => getService({ cloudProvider, serviceId }, signal);
 
 	return {
 		queryKey,
@@ -1352,7 +1334,6 @@ export function useGetService<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getService>>,
@@ -1363,7 +1344,6 @@ export function useGetService<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetServiceQueryOptions(
 		{ cloudProvider, serviceId },
-		params,
 		options,
 	);
 
@@ -1380,11 +1360,10 @@ export function useGetService<
 export const invalidateGetService = async (
 	queryClient: QueryClient,
 	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }, params) },
+		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }) },
 		options,
 	);
 

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

@@ -2815,6 +2815,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
+	computeengine = 'computeengine',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -8320,6 +8321,14 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
+	/**
+	 * @type string
+	 */
+	relatedLogsLink?: string;
+	/**
+	 * @type string
+	 */
+	relatedTracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -10196,14 +10205,6 @@ export type GetConnectionCredentials200 = {
 export type ListServicesMetadataPathParameters = {
 	cloudProvider: string;
 };
-export type ListServicesMetadataParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type ListServicesMetadata200 = {
 	data: CloudintegrationtypesGettableServicesMetadataDTO;
 	/**
@@ -10216,14 +10217,6 @@ export type GetServicePathParameters = {
 	cloudProvider: string;
 	serviceId: string;
 };
-export type GetServiceParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type GetService200 = {
 	data: CloudintegrationtypesServiceDTO;
 	/**

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

@@ -380,4 +380,88 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		});
 	});
+
+	describe('raw logs body: extract lone `message` field', () => {
+		function makeRawResult(
+			rows: Array<{ timestamp: string; data: Record<string, any> }>,
+			type: 'raw' | 'trace' = 'raw',
+		): ReturnType<typeof convertV5ResponseToLegacy> {
+			const v5Data = {
+				type,
+				data: { results: [{ queryName: 'A', rows }] },
+				meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			} as unknown as QueryRangeResponseV5;
+
+			const params = makeBaseParams(type as RequestType, [
+				{
+					type: 'builder_query',
+					spec: {
+						name: 'A',
+						signal: type === 'trace' ? 'traces' : 'logs',
+						stepInterval: 60,
+						disabled: false,
+						aggregations: [],
+					},
+				},
+			]);
+
+			const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+				makeBaseSuccess({ data: v5Data }, params);
+
+			return convertV5ResponseToLegacy(input, { A: 'A' }, false);
+		}
+
+		it('unwraps body when it is an object with only a message field', () => {
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body: { message: 'hello' } } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe('hello');
+		});
+
+		it('leaves body unchanged when the object has keys besides message', () => {
+			const body = { message: 'hello', level: 'INFO' };
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toStrictEqual(
+				body,
+			);
+		});
+
+		it('leaves a string body unchanged (use_json_body off)', () => {
+			const result = makeRawResult([
+				{
+					timestamp: '2026-07-21T00:00:00Z',
+					data: { body: '{"message":"hello"}' },
+				},
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe(
+				'{"message":"hello"}',
+			);
+		});
+
+		it('stringifies the nested object when message is an object', () => {
+			const nested = { a: 1, b: 2 };
+			const result = makeRawResult([
+				{ timestamp: '2026-07-21T00:00:00Z', data: { body: { message: nested } } },
+			]);
+
+			expect(result.payload.data.result[0].list?.[0]?.data?.body).toBe(
+				JSON.stringify(nested),
+			);
+		});
+
+		it('does not add a body key to rows without a body (traces)', () => {
+			const result = makeRawResult(
+				[{ timestamp: '2026-07-21T00:00:00Z', data: { name: 'span-1' } }],
+				'trace',
+			);
+
+			const data = (result.payload.data.result[0].list?.[0] as any)?.data ?? {};
+			expect('body' in data).toBe(false);
+		});
+	});
 });

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

@@ -273,6 +273,19 @@ function convertScalarWithFormatForWeb(
 	});
 }
 
+function extractOnlyMessageBody(body: unknown): unknown {
+	const isJsonBody = body && typeof body === 'object' && !Array.isArray(body);
+	if (isJsonBody) {
+		const keys = Object.keys(body);
+		const hasOnlyMessageKey = keys.length === 1 && keys[0] === 'message';
+		if (hasOnlyMessageKey) {
+			const { message } = body as { message: unknown };
+			return typeof message === 'string' ? message : JSON.stringify(message);
+		}
+	}
+	return body;
+}
+
 /**
  * Converts V5 RawData to legacy format
  */
@@ -285,14 +298,22 @@ function convertRawData(
 		queryName: rawData.queryName,
 		legend: legendMap[rawData.queryName] || rawData.queryName,
 		series: null,
-		list: rawData.rows?.map((row) => ({
-			timestamp: row.timestamp,
-			data: {
+		list: rawData.rows?.map((row) => {
+			const data = {
 				// Map raw data to ILog structure - spread row.data first to include all properties
 				...row.data,
 				date: row.timestamp,
-			} as any,
-		})),
+			} as any;
+
+			if ('body' in row.data) {
+				data.body = extractOnlyMessageBody(row.data.body);
+			}
+
+			return {
+				timestamp: row.timestamp,
+				data,
+			};
+		}),
 		nextCursor: rawData.nextCursor,
 	};
 }

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -18,7 +18,10 @@ import {
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
+import {
+	convertBuilderQueriesToV5,
+	prepareQueryRangePayloadV5,
+} from './prepareQueryRangePayloadV5';
 
 jest.mock('lib/getStartEndRangeTime', () => ({
 	__esModule: true,
@@ -899,3 +902,36 @@ describe('prepareQueryRangePayloadV5', () => {
 		expect(logSpec.filter).toStrictEqual({ expression: '' });
 	});
 });
+
+describe('convertBuilderQueriesToV5 having normalization', () => {
+	const buildSpec = (having: unknown): MetricBuilderQuery => {
+		const [envelope] = convertBuilderQueriesToV5(
+			{
+				A: {
+					dataSource: DataSource.METRICS,
+					queryName: 'A',
+					aggregations: [{ metricName: 'm', spaceAggregation: 'p99' }],
+					having,
+				} as unknown as IBuilderQuery,
+			},
+			'time_series',
+			PANEL_TYPES.TIME_SERIES,
+		);
+		return envelope.spec as MetricBuilderQuery;
+	};
+
+	it.each([
+		['a legacy V4 array', []],
+		['a blank empty-object having', { expression: '' }],
+		['a whitespace-only having', { expression: '   ' }],
+		['a nullish having', undefined],
+	])('drops %s (serializes to undefined)', (_label, having) => {
+		expect(buildSpec(having).having).toBeUndefined();
+	});
+
+	it('preserves a real having expression', () => {
+		expect(buildSpec({ expression: 'count() > 5' }).having).toStrictEqual({
+			expression: 'count() > 5',
+		});
+	});
+});

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

@@ -134,6 +134,21 @@ function getFilter(queryData: IBuilderQuery): Filter {
 	};
 }
 
+/**
+ * Normalizes a builder query's `having` to the V5 shape, treating "no having filter" as absent.
+ * V4 stored it as an array; V5 expects `{ expression }`. An array (legacy), a nullish value, or a
+ * blank expression — the query builder seeds `{ expression: '' }` for an empty having — all mean
+ * "no having" and must serialize to `undefined`. Emitting an empty `{ expression: '' }` sends a
+ * no-op filter and, because a saved panel never carries one, reads an untouched panel as dirty.
+ */
+function normalizeHaving(having: unknown): Having | undefined {
+	if (having == null || Array.isArray(having)) {
+		return undefined;
+	}
+	const { expression } = having as Having;
+	return expression?.trim() ? (having as Having) : undefined;
+}
+
 function createBaseSpec(
 	queryData: IBuilderQuery,
 	requestType: RequestType,
@@ -181,12 +196,7 @@ function createBaseSpec(
 					)
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
-		// V4 uses having as array, V5 uses having as object with expression field
-		// If having is an array (V4 format), treat it as undefined for V5
-		having:
-			isEmpty(queryData.having) || Array.isArray(queryData.having)
-				? undefined
-				: (queryData?.having as Having),
+		having: normalizeHaving(queryData.having),
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {
@@ -414,10 +424,7 @@ function createTraceOperatorBaseSpec(
 					)
 				: undefined,
 		legend: isEmpty(legend) ? undefined : legend,
-		// V4 uses having as array, V5 uses having as object with expression field
-		// If having is an array (V4 format), treat it as undefined for V5
-		having:
-			isEmpty(having) || Array.isArray(having) ? undefined : (having as Having),
+		having: normalizeHaving(having),
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
 			: nonEmptySelectColumns?.map(

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -213,7 +213,9 @@ describe.each([
 			const callArgs = mockDownloadExportData.mock.calls[0][0];
 			const query = callArgs.body.compositeQuery.queries[0];
 			expect(query.spec.groupBy).toBeUndefined();
-			expect(query.spec.having).toStrictEqual({ expression: '' });
+			// An empty having ({ expression: '' }) is a no-op filter and serializes to
+			// undefined — same as the cleared groupBy above.
+			expect(query.spec.having).toBeUndefined();
 		});
 	});
 

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -8,7 +8,6 @@ import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
-	FieldDataType,
 	SignalType,
 	TelemetryFieldKey,
 } from 'types/api/v5/queryRange';
@@ -55,7 +54,7 @@ function OtherFields({
 				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType as FieldDataType,
+				fieldDataType: attr.fieldDataType,
 			}),
 		);
 		const addedIds = new Set(

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -20,6 +20,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -33,6 +34,7 @@ import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	ALL_SELECTED_VALUE,
 	filterOptionsBySearch,
+	findOptionLabelText,
 	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
@@ -1937,7 +1939,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					}
 				};
 
-				return (
+				const tag = (
 					<div
 						className={cx('ant-select-selection-item', {
 							'ant-select-selection-item-active': isActive,
@@ -1967,13 +1969,32 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						)}
 					</div>
 				);
+
+				// `label` arrives already cut to maxTagTextLength, so the reveal reads the
+				// option's own text (falling back to the raw value for freeform tags).
+				return (
+					<TooltipSimple
+						side="top"
+						delayDuration={300}
+						title={findOptionLabelText(options, value)}
+					>
+						{tag}
+					</TooltipSimple>
+				);
 			}
 
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
+		[
+			isAllSelected,
+			activeChipIndex,
+			selectedChips,
+			selectedValues,
+			maxTagCount,
+			options,
+		],
 	);
 
 	// Simple onClear handler to prevent clearing ALL
@@ -1992,51 +2013,58 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Component Rendering =====
 	return (
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
-			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
+		// Self-provided so the per-tag tooltips work wherever this select is rendered,
+		// without every consumer having to sit under an app-level provider.
+		<TooltipProvider>
+			<div
+				className={cx('custom-multiselect-wrapper', {
+					'all-selected': allOptionShown || isAllSelected,
 				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			>
+				{(allOptionShown || isAllSelected) && !searchText && (
+					<div className="all-text">ALL</div>
+				)}
+				<Select
+					ref={selectRef}
+					className={cx('custom-multiselect', className, {
+						'has-selection': selectedChips.length > 0 && !isAllSelected,
+						'is-all-selected': isAllSelected,
+					})}
+					placeholder={placeholder}
+					mode="multiple"
+					showSearch
+					filterOption={false}
+					onSearch={handleSearch}
+					value={displayValue}
+					onChange={(newValue): void => {
+						handleInternalChange(newValue, false);
+					}}
+					onClear={onClearHandler}
+					onDropdownVisibleChange={handleDropdownVisibleChange}
+					open={isOpen}
+					defaultActiveFirstOption={defaultActiveFirstOption}
+					popupMatchSelectWidth={dropdownMatchSelectWidth}
+					allowClear={allowClear}
+					getPopupContainer={getPopupContainer ?? popupContainer}
+					suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+					dropdownRender={customDropdownRender}
+					menuItemSelectedIcon={null}
+					popupClassName={cx(
+						'custom-multiselect-dropdown-container',
+						popupClassName,
+					)}
+					notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+					onKeyDown={handleKeyDown}
+					tagRender={tagRender as any}
+					placement={placement}
+					listHeight={300}
+					searchValue={searchText}
+					maxTagTextLength={maxTagTextLength}
+					maxTagCount={isAllSelected ? undefined : maxTagCount}
+					{...rest}
+				/>
+			</div>
+		</TooltipProvider>
 	);
 };
 

frontend/src/components/NewSelect/__test__/CustomMultiSelect.tagTooltip.test.tsx

@@ -0,0 +1,66 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+
+import CustomMultiSelect from '../CustomMultiSelect';
+
+const OPTIONS = [
+	{ label: 'checkout-service-prod', value: 'checkout-service-prod' },
+	{ label: 'payments-service-prod', value: 'payments-service-prod' },
+	{ label: 'cart-service-prod', value: 'cart-service-prod' },
+];
+
+const SELECTED = ['checkout-service-prod', 'payments-service-prod'];
+
+function renderSelect(): void {
+	render(
+		<TooltipProvider>
+			<CustomMultiSelect
+				options={OPTIONS}
+				value={SELECTED}
+				maxTagCount={1}
+				maxTagTextLength={10}
+				maxTagPlaceholder={(omitted): string => `+${omitted.length}`}
+			/>
+		</TooltipProvider>,
+	);
+}
+
+/** Hovers an element and lets the tooltip's open delay elapse. */
+async function hover(element: HTMLElement): Promise<void> {
+	const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+	await user.hover(element);
+	act(() => {
+		jest.advanceTimersByTime(500);
+	});
+}
+
+describe('CustomMultiSelect tag tooltip', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it("reveals a tag's untruncated value on hover", async () => {
+		renderSelect();
+
+		await hover(screen.getByText('checkout-s...'));
+
+		expect(screen.getByRole('tooltip')).toHaveTextContent(
+			'checkout-service-prod',
+		);
+	});
+
+	// The `+N` placeholder stays the caller's to render — several callers already wrap
+	// it in a tooltip of their own, and a second one would stack on top.
+	it('leaves the +N overflow placeholder untouched', async () => {
+		renderSelect();
+
+		await hover(screen.getByText('+1'));
+
+		expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/NewSelect/utils.ts

@@ -109,6 +109,21 @@ export const prioritizeOrAddOptionForMultiSelect = (
 	return [...flatOutSelectedOptions, ...filteredOptions];
 };
 
+export const findOptionLabelText = (
+	options: OptionData[],
+	value: string,
+): string => {
+	const match = options
+		.flatMap((option) =>
+			'options' in option && Array.isArray(option.options)
+				? option.options
+				: [option],
+		)
+		.find((option) => option.value === value);
+
+	return typeof match?.label === 'string' ? match.label : value;
+};
+
 /**
  * Filters options based on search text
  */

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -25,12 +25,12 @@ import CodeMirror, {
 } from '@uiw/react-codemirror';
 import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Info, TriangleAlert } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { FieldDataType } from 'types/api/v5/queryRange';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
@@ -323,16 +323,16 @@ function QueryAggregationSelect({
 				TracesAggregatorOperator.RATE,
 			];
 
-			const fieldDataType =
+			const fieldDataType: FieldDataType | undefined =
 				functionContextForFetch &&
 				operatorsWithoutDataType.includes(functionContextForFetch)
 					? undefined
-					: QUERY_BUILDER_KEY_TYPES.NUMBER;
+					: 'number';
 
 			return getKeySuggestions({
 				signal: queryData.dataSource,
 				searchText: '',
-				fieldDataType: fieldDataType as QUERY_BUILDER_KEY_TYPES,
+				fieldDataType,
 			});
 		},
 		{

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -92,52 +92,76 @@
 						color: var(--l3-foreground);
 					}
 
-					.only-btn {
-						cursor: not-allowed;
-						color: var(--l3-foreground);
-					}
-
+					.only-btn,
 					.toggle-btn {
 						cursor: not-allowed;
 						color: var(--l3-foreground);
 					}
 				}
 
-				.only-btn {
-					display: none;
+				// Stack "Only"/"All" and "Toggle" in a single cell so revealing
+				// one swaps in place instead of shifting the row layout.
+				.value-actions {
+					display: grid;
+					align-items: center;
+					justify-items: end;
+
+					> * {
+						grid-area: 1 / 1;
+					}
 				}
+
+				.only-btn,
 				.toggle-btn {
 					display: none;
-				}
-
-				.toggle-btn:hover {
-					background-color: unset;
-				}
-
-				.only-btn:hover {
-					background-color: unset;
-				}
-			}
-
-			.checkbox-value-section:hover {
-				.toggle-btn {
-					display: none;
-				}
-				.only-btn {
-					display: flex;
 					align-items: center;
 					justify-content: center;
 					height: 21px;
+					opacity: 0;
+					transform: translateX(4px);
+					// `display` is animated as a discrete property so the button
+					// stays mounted through its fade-out on exit.
+					transition:
+						opacity 0.16s ease,
+						transform 0.16s ease,
+						display 0.16s allow-discrete;
+
+					&:hover {
+						background-color: unset;
+					}
+				}
+			}
+
+			// Hovering the label/value area reveals the "Only"/"All" action.
+			.checkbox-value-section:hover .only-btn {
+				display: flex;
+				opacity: 1;
+				transform: translateX(0);
+
+				// Entry animation start state (fires on the display switch).
+				@starting-style {
+					opacity: 0;
+					transform: translateX(4px);
+				}
+			}
+
+			// Hovering the checkbox reveals the "Toggle" action.
+			.check-box:hover ~ .checkbox-value-section .toggle-btn {
+				display: flex;
+				opacity: 1;
+				transform: translateX(0);
+
+				@starting-style {
+					opacity: 0;
+					transform: translateX(4px);
 				}
 			}
 		}
 
-		.value:hover {
+		@media (prefers-reduced-motion: reduce) {
+			.only-btn,
 			.toggle-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 21px;
+				transition: none;
 			}
 		}
 	}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -53,12 +53,14 @@ function CheckboxValueRow({
 						</Typography.Text>
 					</TooltipSimple>
 				)}
-				<Button type="text" className="only-btn">
-					{onlyButtonLabel}
-				</Button>
-				<Button type="text" className="toggle-btn">
-					Toggle
-				</Button>
+				<div className="value-actions">
+					<Button type="text" className="only-btn">
+						{onlyButtonLabel}
+					</Button>
+					<Button type="text" className="toggle-btn">
+						Toggle
+					</Button>
+				</div>
 			</div>
 		</div>
 	);

frontend/src/components/TooltipScrollArea/TooltipScrollArea.module.scss

@@ -0,0 +1,20 @@
+@use '../../styles/scrollbar' as *;
+
+// Padding for the tooltip body that hosts a scroll area: the right side is given
+// up so the scrollbar can sit flush against the tooltip's edge instead of floating
+// inset from it. `.scrollArea` puts that spacing back between the text and the bar.
+.tooltipContent {
+	--tooltip-padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-4);
+}
+
+// How tall a hover reveal grows before its content starts scrolling.
+.scrollArea {
+	max-height: 480px;
+	overflow-y: auto;
+	// Keep the page behind the tooltip still once the list hits its end.
+	overscroll-behavior: contain;
+	// Gap between the content and the scrollbar (or the tooltip edge when short).
+	padding-right: var(--spacing-4);
+
+	@include custom-scrollbar;
+}

frontend/src/components/TooltipScrollArea/TooltipScrollArea.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+import styles from './TooltipScrollArea.module.scss';
+
+interface TooltipScrollAreaProps {
+	children: ReactNode;
+}
+
+/**
+ * Pass as the hosting tooltip's content class (`tooltipContentProps`) so its
+ * padding makes room for the scroll area's own edge handling.
+ */
+export const TOOLTIP_SCROLL_CONTENT_CLASS = styles.tooltipContent;
+
+/**
+ * Scroll container for hover reveals that list an unbounded number of items (tag
+ * chips, variable values): caps the tooltip's height and scrolls past it. Plain CSS
+ * overflow with a pinned-visible thin scrollbar — a tooltip is transient, so an
+ * auto-hiding scrollbar would leave no hint that there is more below.
+ */
+function TooltipScrollArea({ children }: TooltipScrollAreaProps): JSX.Element {
+	return <div className={styles.scrollArea}>{children}</div>;
+}
+
+export default TooltipScrollArea;

frontend/src/constants/features.ts

@@ -10,7 +10,6 @@ export enum FeatureKeys {
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
-	USE_DASHBOARD_V2 = 'use_dashboard_v2',
 	USE_INFRA_MONITORING_V2 = 'use_infra_monitoring_v2',
 	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',

frontend/src/container/AIAssistant/__tests__/getAutoContexts.test.ts

@@ -167,6 +167,56 @@ describe('getAutoContexts', () => {
 		]);
 	});
 
+	it('returns panel edit context on the V2 panel editor', () => {
+		const dashboardId = 'dash-123';
+		const panelId = 'panel-abc';
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			dashboardId,
+		).replace(':panelId', panelId);
+
+		const contexts = getAutoContexts(pathname, '');
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'dashboard',
+				resourceId: dashboardId,
+				metadata: {
+					page: 'panel_edit',
+					widgetId: panelId,
+				},
+			},
+		]);
+	});
+
+	it('returns new panel context on the unsaved new-panel editor', () => {
+		const dashboardId = 'dash-123';
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			dashboardId,
+		).replace(':panelId', 'new');
+		const startTime = '1700000000000';
+		const endTime = '1700003600000';
+
+		const contexts = getAutoContexts(
+			pathname,
+			`?panelKind=TimeSeries&${QueryParams.startTime}=${startTime}&${QueryParams.endTime}=${endTime}`,
+		);
+
+		expect(contexts).toStrictEqual([
+			{
+				source: 'auto',
+				type: 'dashboard',
+				resourceId: dashboardId,
+				metadata: {
+					page: 'panel_create',
+					timeRange: { start: Number(startTime), end: Number(endTime) },
+				},
+			},
+		]);
+	});
+
 	it('returns empty array on alert overview without ruleId', () => {
 		const contexts = getAutoContexts(ROUTES.ALERT_OVERVIEW, '');
 

frontend/src/container/AIAssistant/__tests__/resolvePageType.test.ts

@@ -17,6 +17,28 @@ describe('resolvePageType', () => {
 		expect(resolvePageType(pathname, '')).toBe(PageTypeDTO.dashboard_detail);
 	});
 
+	it('returns panel_edit on the V2 panel editor', () => {
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			'dash-123',
+		).replace(':panelId', 'panel-abc');
+
+		expect(resolvePageType(pathname, '')).toBe(PageTypeDTO.panel_edit);
+	});
+
+	// `panel_create` has no PageTypeDTO counterpart yet, so it reports
+	// `panel_edit` rather than degrading to `other`.
+	it('returns panel_edit on the unsaved new-panel editor', () => {
+		const pathname = ROUTES.DASHBOARD_PANEL_EDITOR.replace(
+			':dashboardId',
+			'dash-123',
+		).replace(':panelId', 'new');
+
+		expect(resolvePageType(pathname, '?panelKind=TimeSeries')).toBe(
+			PageTypeDTO.panel_edit,
+		);
+	});
+
 	it('returns alerts_triggered on alert history without ruleId', () => {
 		expect(resolvePageType(ROUTES.ALERT_HISTORY, '')).toBe(
 			PageTypeDTO.alerts_triggered,

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -16,17 +16,22 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import getSessionStorage from 'api/browser/sessionstorage/get';
 import setSessionStorage from 'api/browser/sessionstorage/set';
+import {
+	getListDashboardsForUserV2QueryKey,
+	useListDashboardsForUserV2,
+} from 'api/generated/services/dashboard';
 import {
 	getListRulesQueryKey,
 	useListRules,
 } from 'api/generated/services/rules';
-import type { ListRules200 } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesListedDashboardForUserV2DTO,
+	ListDashboardsForUserV2200,
+	ListDashboardsForUserV2Params,
+	ListRules200,
+} from 'api/generated/services/sigNoz.schemas';
 import logEvent from 'api/common/logEvent';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import { useQueryService } from 'hooks/useQueryService';
-import type { SuccessResponseV2 } from 'types/api';
-import type { Dashboard } from 'types/api/dashboard/getAll';
 // eslint-disable-next-line
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -100,6 +105,8 @@ function autoContextLabel(ctx: MessageContext): string {
 			return 'Current dashboard';
 		case 'panel_edit':
 			return 'Editing panel';
+		case 'panel_create':
+			return 'New panel';
 		case 'panel_fullscreen':
 			return 'Panel (fullscreen)';
 		case 'dashboard_list':
@@ -164,6 +171,18 @@ const TEXTAREA_MAX_HEIGHT_PX = 200;
 const HOME_SERVICES_INTERVAL = 30 * 60 * 1000;
 /** sessionStorage key for the "voice input failed this tab" flag. */
 const VOICE_UNAVAILABLE_KEY = 'ai-assistant-voice-unavailable';
+/**
+ * The picker filters client-side, so it pulls one large page instead of
+ * paginating. Shared with `getQueryData` below — the params are part of the
+ * generated query key, so both sides must use the same object.
+ */
+const DASHBOARD_LIST_PARAMS: ListDashboardsForUserV2Params = { limit: 1000 };
+
+function dashboardTitle(
+	dashboard: DashboardtypesListedDashboardForUserV2DTO,
+): string {
+	return dashboard.spec.display?.name || dashboard.name || 'Untitled';
+}
 
 interface SelectedContextItem {
 	category: ContextCategory;
@@ -716,9 +735,11 @@ export default function ChatInput({
 		data: dashboardsResponse,
 		isLoading: isDashboardsLoading,
 		isError: isDashboardsError,
-	} = useGetAllDashboard({
-		enabled: isContextPickerOpen && activeContextCategory === 'Dashboards',
-		staleTime: Infinity,
+	} = useListDashboardsForUserV2(DASHBOARD_LIST_PARAMS, {
+		query: {
+			enabled: isContextPickerOpen && activeContextCategory === 'Dashboards',
+			staleTime: Infinity,
+		},
 	});
 
 	const {
@@ -765,12 +786,12 @@ export default function ChatInput({
 				return ctx.resourceId;
 			}
 			if (ctx.type === 'dashboard' && ctx.resourceId) {
-				const cached = queryClient.getQueryData<SuccessResponseV2<Dashboard[]>>(
-					REACT_QUERY_KEY.GET_ALL_DASHBOARDS,
+				const cached = queryClient.getQueryData<ListDashboardsForUserV2200>(
+					getListDashboardsForUserV2QueryKey(DASHBOARD_LIST_PARAMS),
 				);
-				const dash = cached?.data?.find((d) => d.id === ctx.resourceId);
-				if (dash?.data.title) {
-					return dash.data.title;
+				const dash = cached?.data?.dashboards?.find((d) => d.id === ctx.resourceId);
+				if (dash) {
+					return dashboardTitle(dash);
 				}
 			}
 			if (ctx.type === 'alert' && ctx.resourceId) {
@@ -800,9 +821,9 @@ export default function ChatInput({
 	const contextEntitiesByCategory: Record<ContextCategory, ContextEntityItem[]> =
 		{
 			Dashboards:
-				dashboardsResponse?.data?.map((dashboard) => ({
+				dashboardsResponse?.data?.dashboards?.map((dashboard) => ({
 					id: dashboard.id,
-					value: dashboard.data.title ?? 'Untitled',
+					value: dashboardTitle(dashboard),
 				})) ?? [],
 			Alerts:
 				alertsResponse?.data

frontend/src/container/AIAssistant/components/ChatInput/__tests__/ChatInput.prefill.test.tsx

@@ -2,12 +2,13 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 // The prefill flow only depends on the context-picker data hooks resolving to
 // empty lists (so the empty state renders) — mock them to skip real fetches.
-jest.mock('hooks/dashboard/useGetAllDashboard', () => ({
-	useGetAllDashboard: (): unknown => ({
-		data: [],
+jest.mock('api/generated/services/dashboard', () => ({
+	useListDashboardsForUserV2: (): unknown => ({
+		data: undefined,
 		isLoading: false,
 		isError: false,
 	}),
+	getListDashboardsForUserV2QueryKey: (): string[] => ['dashboards'],
 }));
 
 jest.mock('api/generated/services/rules', () => ({

frontend/src/container/AIAssistant/getAutoContexts.ts

@@ -2,6 +2,7 @@ import type { MessageContext } from 'api/ai-assistant/chat';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { AlertListTabs } from 'pages/AlertList/types';
+import { NEW_PANEL_ID } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import { matchPath } from 'react-router-dom';
 
 /**
@@ -30,22 +31,23 @@ export function getAutoContexts(
 
 	// ── Dashboards ────────────────────────────────────────────────────────────
 
-	// Widget edit (panel_edit) — `/dashboard/:dashboardId/:widgetId`.
-	const widgetMatch = matchPath<{ dashboardId: string; widgetId: string }>(
+	// Panel editor (V2). `panel/new` has no widget id yet and the schema requires
+	// a non-empty `panel_edit.widgetId`, so it reports `panel_create` instead.
+	const panelEditorMatch = matchPath<{ dashboardId: string; panelId: string }>(
 		pathname,
-		{ path: ROUTES.DASHBOARD_WIDGET, exact: true },
+		{ path: ROUTES.DASHBOARD_PANEL_EDITOR, exact: true },
 	);
-	if (widgetMatch) {
+	if (panelEditorMatch) {
+		const { dashboardId, panelId } = panelEditorMatch.params;
+		const isNewPanel = panelId === NEW_PANEL_ID;
 		return [
 			{
 				source: 'auto',
 				type: 'dashboard',
-				resourceId: widgetMatch.params.dashboardId,
-				metadata: {
-					page: 'panel_edit',
-					widgetId: widgetMatch.params.widgetId,
-					...sharedMetadata,
-				},
+				resourceId: dashboardId,
+				metadata: isNewPanel
+					? { page: 'panel_create', ...sharedMetadata }
+					: { page: 'panel_edit', widgetId: panelId, ...sharedMetadata },
 			},
 		];
 	}

frontend/src/container/AIAssistant/resolvePageType.ts

@@ -9,6 +9,8 @@ const PAGE_METADATA_TO_DTO: Record<string, PageTypeDTO> = {
 	dashboard_detail: PageTypeDTO.dashboard_detail,
 	dashboard_list: PageTypeDTO.dashboard_list,
 	panel_edit: PageTypeDTO.panel_edit,
+	// There is no panel_create, so sending panel_edit temporarily
+	panel_create: PageTypeDTO.panel_edit,
 	panel_fullscreen: PageTypeDTO.panel_fullscreen,
 	logs_explorer: PageTypeDTO.logs_explorer,
 	trace_detail: PageTypeDTO.trace_detail,

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss

@@ -56,14 +56,19 @@
 	margin-top: 4px;
 }
 
-// Wraps the shared chart Legend. Its width/height are set inline from the
-// computed chart dimensions, so the VirtuosoGrid inside gets the same bounded
-// box (right column / bottom rows) the uPlot charts use.
+// width/height are set inline from the computed chart dimensions; border-box
+// keeps the padding inside that height and overflow:hidden clips the
+// virtualized grid to the rectangle.
 .pieChartLegend {
 	flex: 0 0 auto;
+	box-sizing: border-box;
 	min-height: 0;
 	min-width: 0;
+	overflow: hidden;
 	padding-left: 12px;
 	padding-bottom: 12px;
+}
+
+.pieChartLegendRight {
 	padding-top: 8px;
 }

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.tsx

@@ -3,6 +3,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Group } from '@visx/group';
 import { Pie as VisxPie } from '@visx/shape';
 import { defaultStyles, useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { useResizeObserver } from 'hooks/useDimensions';
 import Legend from 'lib/uPlotV2/components/Legend/Legend';
@@ -210,7 +211,9 @@ export default function Pie({
 				)}
 			</div>
 			<div
-				className={styles.pieChartLegend}
+				className={cx(styles.pieChartLegend, {
+					[styles.pieChartLegendRight]: isRightLegend,
+				})}
 				style={{
 					width: legendWidth,
 					height: legendHeight,

frontend/src/container/ExplorerOptions/__tests__/ExplorerOptionWrapper.test.tsx

@@ -4,8 +4,13 @@ import { MOCK_QUERY } from 'container/QueryTable/Drilldown/__tests__/mockTableDa
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import {
+	defaultFeatureFlags,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
@@ -41,12 +46,16 @@ const mockUseHistory = jest.mocked(useHistory);
 // Mock data
 const TEST_QUERY_ID = 'test-query-id';
 const TEST_DASHBOARD_ID = 'test-dashboard-id';
-const TEST_DASHBOARD_TITLE = 'Test Dashboard';
-const TEST_DASHBOARD_DESCRIPTION = 'Test Description';
-const TEST_TIMESTAMP = '2023-01-01T00:00:00Z';
 const TEST_DASHBOARD_TITLE_2 = 'Test Dashboard for Export';
 const NEW_DASHBOARD_ID = 'new-dashboard-id';
-const DASHBOARDS_API_ENDPOINT = '*/api/v1/dashboards';
+
+// The export dialog talks to the generated Perses-spec dashboard endpoints.
+const V2_LIST_ENDPOINT = '*/api/v2/users/me/dashboards';
+const V2_CREATE_ENDPOINT = '*/api/v2/dashboards';
+
+// "Create new dashboard" names the dashboard from the `new_dashboard_title` i18n
+// key; the test-utils react-i18next mock returns the key verbatim.
+const NEW_DASHBOARD_TITLE = 'new_dashboard_title';
 
 // Use the existing mock query from the codebase
 const mockQuery: Query = {
@@ -54,23 +63,44 @@ const mockQuery: Query = {
 	id: TEST_QUERY_ID, // Override with our test ID
 } as Query;
 
-const createMockDashboard = (id: string = TEST_DASHBOARD_ID): Dashboard => ({
-	id,
-	data: {
-		title: TEST_DASHBOARD_TITLE,
-		description: TEST_DASHBOARD_DESCRIPTION,
-		tags: [],
-		layout: [],
-		variables: {},
-	},
-	createdAt: TEST_TIMESTAMP,
-	updatedAt: TEST_TIMESTAMP,
-	createdBy: 'test-user',
-	updatedBy: 'test-user',
-});
-
 const ADD_TO_DASHBOARD_BUTTON_NAME = /add to dashboard/i;
 
+interface PickerDashboard {
+	id: string;
+	title: string;
+}
+
+/** Register the "list dashboards" endpoint the picker reads. */
+function mockDashboardList(dashboards: PickerDashboard[]): void {
+	server.use(
+		rest.get(V2_LIST_ENDPOINT, (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						dashboards: dashboards.map(({ id, title }) => ({
+							id,
+							name: title,
+							spec: { display: { name: title } },
+						})),
+						reservedKeywords: [],
+					},
+				}),
+			),
+		),
+	);
+}
+
+/** Register the "create dashboard" endpoint the "New dashboard" button hits. */
+function mockCreateDashboard(id: string): void {
+	server.use(
+		rest.post(V2_CREATE_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(201), ctx.json({ status: 'success', data: { id } })),
+		),
+	);
+}
+
 // Helper function to render component with props
 const renderExplorerOptionWrapper = (
 	overrides = {},
@@ -104,6 +134,8 @@ const renderExplorerOptionWrapper = (
 			splitedQueries={props.splitedQueries}
 			signalSource={props.signalSource}
 		/>,
+		undefined,
+		{ appContextOverrides: { featureFlags: defaultFeatureFlags } },
 	);
 };
 
@@ -157,17 +189,9 @@ describe('ExplorerOptionWrapper', () => {
 				) => void
 			>;
 
-			// Mock the dashboard creation API
-			const mockNewDashboard = createMockDashboard(NEW_DASHBOARD_ID);
-			server.use(
-				rest.post(DASHBOARDS_API_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockNewDashboard })),
-				),
-			);
+			mockCreateDashboard(NEW_DASHBOARD_ID);
 
-			renderExplorerOptionWrapper({
-				onExport: testOnExport,
-			});
+			renderExplorerOptionWrapper({ onExport: testOnExport });
 
 			// Find and click the "Add to Dashboard" button
 			const addToDashboardButton = screen.getByRole('button', {
@@ -187,7 +211,7 @@ describe('ExplorerOptionWrapper', () => {
 			// Wait for the API call to complete and onExport to be called
 			await waitFor(() => {
 				expect(testOnExport).toHaveBeenCalledWith(
-					{ id: NEW_DASHBOARD_ID, title: TEST_DASHBOARD_TITLE },
+					{ id: NEW_DASHBOARD_ID, title: NEW_DASHBOARD_TITLE },
 					true,
 				);
 			});
@@ -204,21 +228,13 @@ describe('ExplorerOptionWrapper', () => {
 			>;
 
 			// Mock existing dashboards with unique titles
-			const mockDashboard1 = createMockDashboard('dashboard-1');
-			mockDashboard1.data.title = 'Dashboard 1';
-			const mockDashboard2 = createMockDashboard('dashboard-2');
-			mockDashboard2.data.title = 'Dashboard 2';
-			const mockDashboards = [mockDashboard1, mockDashboard2];
+			const dashboards: PickerDashboard[] = [
+				{ id: 'dashboard-1', title: 'Dashboard 1' },
+				{ id: 'dashboard-2', title: 'Dashboard 2' },
+			];
+			mockDashboardList(dashboards);
 
-			server.use(
-				rest.get(DASHBOARDS_API_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockDashboards })),
-				),
-			);
-
-			renderExplorerOptionWrapper({
-				onExport: testOnExport,
-			});
+			renderExplorerOptionWrapper({ onExport: testOnExport });
 
 			// Find and click the "Add to Dashboard" button
 			const addToDashboardButton = screen.getByRole('button', {
@@ -231,10 +247,15 @@ describe('ExplorerOptionWrapper', () => {
 				expect(screen.getByRole('dialog')).toBeInTheDocument();
 			});
 
-			// Wait for the dashboard select dropdown to render inside the dialog
+			// Wait for the dashboard select to render AND finish loading. antd
+			// disables the Select while the list request is in flight, and a click
+			// on a disabled combobox is a no-op — so sync on the ready (enabled)
+			// state before clicking.
 			const modal = screen.getByRole('dialog');
 			await waitFor(() => {
-				expect(modal.querySelector('[role="combobox"]')).toBeTruthy();
+				const combobox = modal.querySelector('[role="combobox"]');
+				expect(combobox).toBeTruthy();
+				expect(combobox).not.toBeDisabled();
 			});
 
 			const dashboardSelect = modal.querySelector(
@@ -245,11 +266,11 @@ describe('ExplorerOptionWrapper', () => {
 
 			// Wait for the dropdown options to appear and select the first dashboard
 			await waitFor(() => {
-				expect(screen.getByText(mockDashboard1.data.title)).toBeInTheDocument();
+				expect(screen.getByText(dashboards[0].title)).toBeInTheDocument();
 			});
 
 			// Click on the first dashboard option
-			const dashboardOption = screen.getByText(mockDashboard1.data.title);
+			const dashboardOption = screen.getByText(dashboards[0].title);
 			await user.click(dashboardOption);
 
 			// Wait for the selection to be made and the export button to be enabled
@@ -264,7 +285,7 @@ describe('ExplorerOptionWrapper', () => {
 			// Wait for onExport to be called with the selected dashboard
 			await waitFor(() => {
 				expect(testOnExport).toHaveBeenCalledWith(
-					{ id: 'dashboard-1', title: 'Dashboard 1' },
+					{ id: dashboards[0].id, title: dashboards[0].title },
 					false,
 				);
 			});
@@ -305,18 +326,12 @@ describe('ExplorerOptionWrapper', () => {
 			};
 
 			// Mock existing dashboards
-			const mockDashboard = createMockDashboard('test-dashboard-id');
-			mockDashboard.data.title = TEST_DASHBOARD_TITLE_2;
+			const dashboards: PickerDashboard[] = [
+				{ id: TEST_DASHBOARD_ID, title: TEST_DASHBOARD_TITLE_2 },
+			];
+			mockDashboardList(dashboards);
 
-			server.use(
-				rest.get(DASHBOARDS_API_ENDPOINT, (_req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: [mockDashboard] })),
-				),
-			);
-
-			renderExplorerOptionWrapper({
-				onExport: handleExport,
-			});
+			renderExplorerOptionWrapper({ onExport: handleExport });
 
 			// Find and click the "Add to Dashboard" button
 			const addToDashboardButton = screen.getByRole('button', {
@@ -329,10 +344,12 @@ describe('ExplorerOptionWrapper', () => {
 				expect(screen.getByRole('dialog')).toBeInTheDocument();
 			});
 
-			// Wait for the dashboard select dropdown to render inside the dialog
+			// Wait for the dashboard select to render AND finish loading (see note above).
 			const modal = screen.getByRole('dialog');
 			await waitFor(() => {
-				expect(modal.querySelector('[role="combobox"]')).toBeTruthy();
+				const combobox = modal.querySelector('[role="combobox"]');
+				expect(combobox).toBeTruthy();
+				expect(combobox).not.toBeDisabled();
 			});
 
 			const dashboardSelect = modal.querySelector(
@@ -343,11 +360,11 @@ describe('ExplorerOptionWrapper', () => {
 
 			// Wait for the dropdown options to appear and select the dashboard
 			await waitFor(() => {
-				expect(screen.getByText(mockDashboard.data.title)).toBeInTheDocument();
+				expect(screen.getByText(dashboards[0].title)).toBeInTheDocument();
 			});
 
 			// Click on the dashboard option
-			const dashboardOption = screen.getByText(mockDashboard.data.title);
+			const dashboardOption = screen.getByText(dashboards[0].title);
 			await user.click(dashboardOption);
 
 			// Wait for the selection to be made and the export button to be enabled
@@ -363,7 +380,7 @@ describe('ExplorerOptionWrapper', () => {
 			await waitFor(() => {
 				expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
 				expect(mockSafeNavigate).toHaveBeenCalledWith(
-					`/dashboard/test-dashboard-id/new?graphType=${panelTypeParam}&widgetId=${widgetId}&compositeQuery=${encodeURIComponent(
+					`/dashboard/${TEST_DASHBOARD_ID}/new?graphType=${panelTypeParam}&widgetId=${widgetId}&compositeQuery=${encodeURIComponent(
 						JSON.stringify(query),
 					)}`,
 				);
@@ -372,23 +389,23 @@ describe('ExplorerOptionWrapper', () => {
 			// Assert that useUpdateDashboard was NOT called (as per PR #8029)
 			expect(mockMutate).not.toHaveBeenCalled();
 		});
+	});
 
-		it('should not show export buttons when component is disabled', () => {
-			const testOnExport = jest.fn() as jest.MockedFunction<
-				(
-					dashboard: ExportDashboard | null,
-					isNewDashboard?: boolean,
-					queryToExport?: Query,
-				) => void
-			>;
+	it('should not show export buttons when component is disabled', () => {
+		const testOnExport = jest.fn() as jest.MockedFunction<
+			(
+				dashboard: ExportDashboard | null,
+				isNewDashboard?: boolean,
+				queryToExport?: Query,
+			) => void
+		>;
 
-			renderExplorerOptionWrapper({ disabled: true, onExport: testOnExport });
+		renderExplorerOptionWrapper({ disabled: true, onExport: testOnExport });
 
-			// The "Add to Dashboard" button should be disabled
-			const addToDashboardButton = screen.getByRole('button', {
-				name: ADD_TO_DASHBOARD_BUTTON_NAME,
-			});
-			expect(addToDashboardButton).toBeDisabled();
+		// The "Add to Dashboard" button should be disabled
+		const addToDashboardButton = screen.getByRole('button', {
+			name: ADD_TO_DASHBOARD_BUTTON_NAME,
 		});
+		expect(addToDashboardButton).toBeDisabled();
 	});
 });

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -9,8 +9,6 @@ import {
 	DashboardtypesListSortDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight, ArrowUpRight, Plus } from '@signozhq/icons';
 import Card from 'periscope/components/Card/Card';
@@ -22,7 +20,7 @@ import dialsUrl from '@/assets/Icons/dials.svg';
 
 import { getItemIcon } from '../constants';
 
-// The five most-recent dashboards, normalised across the v1 and v2 list APIs.
+// The five most-recent dashboards from the V2 list API.
 interface RecentDashboard {
 	id: string;
 	title: string;
@@ -38,52 +36,27 @@ export default function Dashboards({
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const { user } = useAppContext();
-	const isDashboardV2 = useIsDashboardV2();
-
-	// Fetch the recent dashboards from whichever API the `use_dashboard_v2` flag
-	// selects; the inactive one stays disabled so it never fires.
-	const {
-		data: v1List,
-		isLoading: v1Loading,
-		isError: v1Error,
-	} = useGetAllDashboard({ enabled: !isDashboardV2 });
 
 	const {
-		data: v2List,
-		isLoading: v2Loading,
-		isError: v2Error,
-	} = useListDashboardsForUserV2(
-		{
-			sort: DashboardtypesListSortDTO.updated_at,
-			order: DashboardtypesListOrderDTO.desc,
-			limit: 5,
-			offset: 0,
-		},
-		{ query: { enabled: isDashboardV2 } },
-	);
+		data: dashboardsList,
+		isLoading: isDashboardListLoading,
+		isError: isDashboardListError,
+	} = useListDashboardsForUserV2({
+		sort: DashboardtypesListSortDTO.updated_at,
+		order: DashboardtypesListOrderDTO.desc,
+		limit: 5,
+		offset: 0,
+	});
 
-	const isDashboardListLoading = isDashboardV2 ? v2Loading : v1Loading;
-	const isDashboardListError = isDashboardV2 ? v2Error : v1Error;
-
-	const sortedDashboards = useMemo<RecentDashboard[]>(() => {
-		if (isDashboardV2) {
-			return (v2List?.data?.dashboards ?? []).map((d) => ({
+	const sortedDashboards = useMemo<RecentDashboard[]>(
+		() =>
+			(dashboardsList?.data?.dashboards ?? []).map((d) => ({
 				id: d.id,
 				title: d.spec?.display?.name ?? d.name,
 				tags: (d.tags ?? []).map((t) => (t.value ? `${t.key}:${t.value}` : t.key)),
-			}));
-		}
-		return [...(v1List?.data ?? [])]
-			.sort(
-				(a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
-			)
-			.slice(0, 5)
-			.map((d) => ({
-				id: d.id,
-				title: d.data.title,
-				tags: d.data.tags ?? [],
-			}));
-	}, [isDashboardV2, v1List, v2List]);
+			})),
+		[dashboardsList],
+	);
 
 	useEffect(() => {
 		if (sortedDashboards.length > 0 && !loadingUserPreferences) {

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

@@ -147,7 +147,6 @@ function ServiceDetails({
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
 		{
 			query: {
 				enabled: !!serviceId && !cloudAccountId,

frontend/src/container/Integrations/CloudIntegration/ServicesList.tsx

@@ -39,9 +39,12 @@ function ServicesList({
 	const {
 		data: providerServicesMetadata,
 		isLoading: isProviderServicesLoading,
-	} = useListServicesMetadata({ cloudProvider: type }, undefined, {
-		query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
-	});
+	} = useListServicesMetadata(
+		{ cloudProvider: type },
+		{
+			query: { enabled: !isAccountsLoading && !hasConnectedAccounts },
+		},
+	);
 
 	const servicesMetadata = hasConnectedAccounts
 		? accountServicesMetadata

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

@@ -6,7 +6,7 @@ import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
-	useGetMetricDashboards,
+	useGetMetricDashboardsV2,
 } from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -38,7 +38,7 @@ function DashboardsAndAlertsPopover({
 		data: dashboardsData,
 		isLoading: isLoadingDashboards,
 		isError: isErrorDashboards,
-	} = useGetMetricDashboards(
+	} = useGetMetricDashboardsV2(
 		{
 			metricName,
 		},
@@ -55,7 +55,8 @@ function DashboardsAndAlertsPopover({
 
 	const dashboards = useMemo(() => {
 		const currentDashboards = dashboardsData?.data.dashboards ?? [];
-		// Remove duplicate dashboards
+		// The API returns one entry per referencing panel, so a dashboard repeats
+		// once per panel that uses the metric.
 		return currentDashboards.filter(
 			(dashboard, index, self) =>
 				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -23,7 +23,7 @@ const useGetMetricAlertsMock = jest.spyOn(
 );
 const useGetMetricDashboardsMock = jest.spyOn(
 	metricsExplorerHooks,
-	'useGetMetricDashboards',
+	'useGetMetricDashboardsV2',
 );
 
 describe('DashboardsAndAlertsPopover', () => {
@@ -153,11 +153,15 @@ describe('DashboardsAndAlertsPopover', () => {
 		);
 	});
 
-	it('renders unique dashboards even when there are duplicates', async () => {
+	it('collapses multiple panels of the same dashboard into one entry', async () => {
 		useGetMetricDashboardsMock.mockReturnValue(
 			getMockDashboardsData({
 				data: {
-					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2, MOCK_DASHBOARD_1],
+					dashboards: [
+						MOCK_DASHBOARD_1,
+						MOCK_DASHBOARD_2,
+						{ ...MOCK_DASHBOARD_1, panelId: '3', panelName: 'Panel 3' },
+					],
 				},
 			}),
 		);

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/testUtlls.ts

@@ -2,7 +2,7 @@ import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import {
 	GetMetricAlerts200,
 	GetMetricAttributes200,
-	GetMetricDashboards200,
+	GetMetricDashboardsV2200,
 	GetMetricHighlights200,
 	GetMetricMetadata200,
 	MetrictypesTemporalityDTO,
@@ -40,14 +40,14 @@ export function getMockMetricHighlightsData(
 export const MOCK_DASHBOARD_1 = {
 	dashboardName: 'Dashboard 1',
 	dashboardId: '1',
-	widgetId: '1',
-	widgetName: 'Widget 1',
+	panelId: '1',
+	panelName: 'Panel 1',
 };
 export const MOCK_DASHBOARD_2 = {
 	dashboardName: 'Dashboard 2',
 	dashboardId: '2',
-	widgetId: '2',
-	widgetName: 'Widget 2',
+	panelId: '2',
+	panelName: 'Panel 2',
 };
 export const MOCK_ALERT_1 = {
 	alertName: 'Alert 1',
@@ -59,7 +59,7 @@ export const MOCK_ALERT_2 = {
 };
 
 export function getMockDashboardsData(
-	overrides?: Partial<GetMetricDashboards200>,
+	overrides?: Partial<GetMetricDashboardsV2200>,
 	{
 		isLoading = false,
 		isError = false,
@@ -67,7 +67,7 @@ export function getMockDashboardsData(
 		isLoading?: boolean;
 		isError?: boolean;
 	} = {},
-): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards> {
+): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboardsV2> {
 	return {
 		data: {
 			data: {
@@ -79,7 +79,7 @@ export function getMockDashboardsData(
 
 		isLoading,
 		isError,
-	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards>;
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboardsV2>;
 }
 
 export function getMockAlertsData(

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -113,7 +113,7 @@ const useOptionsMenu = ({
 					(suggestion) => ({
 						name: suggestion.name,
 						signal: suggestion.signal as SignalType,
-						fieldDataType: suggestion.fieldDataType as FieldDataType,
+						fieldDataType: suggestion.fieldDataType,
 						fieldContext: suggestion.fieldContext as FieldContext,
 					}),
 				);
@@ -192,7 +192,7 @@ const useOptionsMenu = ({
 				name: e.name,
 				signal: e.signal as SignalType,
 				fieldContext: e.fieldContext as FieldContext,
-				fieldDataType: e.fieldDataType as FieldDataType,
+				fieldDataType: e.fieldDataType,
 			}));
 		}
 		if (dataSource === DataSource.TRACES) {

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

@@ -4,11 +4,11 @@ import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import useDebounce from 'hooks/useDebounce';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { MetricAggregation } from 'types/api/v5/queryRange';
+import { fieldDataTypeToDataType } from 'utils/fieldDataType';
 
 import { BreakoutOptionsProps } from './contextConfig';
 import { BreakoutAttributeType } from './types';
@@ -80,7 +80,7 @@ function BreakoutOptions({
 			keyArray.forEach((keyData) => {
 				transformedOptions.push({
 					key: keyData.name,
-					dataType: keyData.fieldDataType as QUERY_BUILDER_KEY_TYPES,
+					dataType: fieldDataTypeToDataType(keyData.fieldDataType),
 					type: '',
 				});
 			});

frontend/src/container/QueryTable/Drilldown/__tests__/Breakout.test.tsx

@@ -238,6 +238,10 @@ describe('TableDrilldown Breakout Functionality', () => {
 		expect(aggregateQueryData.groupBy).toHaveLength(1);
 		expect(aggregateQueryData.groupBy[0].key).toBe('deployment.environment');
 
+		// The picked field's type travels with it — dropping it leaves the breakout query
+		// untyped, so a drilldown on its result can't tell a number from a string.
+		expect(aggregateQueryData.groupBy[0].dataType).toBe('string');
+
 		// Verify that orderBy has been cleared (as per getBreakoutQuery logic)
 		expect(aggregateQueryData.orderBy).toStrictEqual([]);
 

frontend/src/container/QueryTable/Drilldown/__tests__/contextConfig.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ClickedData } from 'periscope/components/ContextMenu';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getGroupContextMenuConfig } from '../contextConfig';
+
+const GROUP_KEY = 'http.status_code';
+
+const makeQuery = (dataType: string): Query =>
+	({
+		builder: {
+			queryData: [
+				{
+					queryName: 'A',
+					groupBy: [{ key: GROUP_KEY, dataType, type: 'attribute' }],
+				},
+			],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		promql: [],
+		clickhouse_sql: [],
+	}) as unknown as Query;
+
+const clickedData: ClickedData = {
+	column: { dataIndex: GROUP_KEY },
+	record: { key: GROUP_KEY, timestamp: 0 },
+};
+
+const renderGroupMenu = (query: Query): void => {
+	const { items } = getGroupContextMenuConfig({
+		query,
+		clickedData,
+		panelType: PANEL_TYPES.TABLE,
+		onColumnClick: jest.fn(),
+	});
+	render(<div>{items}</div>);
+};
+
+describe('getGroupContextMenuConfig', () => {
+	// A `number` group-by used to throw: it isn't a key of QUERY_BUILDER_OPERATORS_BY_TYPES.
+	it('renders comparison operators for a `number` group-by column', () => {
+		renderGroupMenu(makeQuery('number'));
+
+		expect(screen.getByText(`Filter by ${GROUP_KEY}`)).toBeInTheDocument();
+		expect(screen.getByText('Is this')).toBeInTheDocument();
+		expect(screen.getByText('Is greater than or equal to')).toBeInTheDocument();
+		expect(screen.getByText('Is less than')).toBeInTheDocument();
+	});
+
+	it('renders only equality operators for a string group-by column', () => {
+		renderGroupMenu(makeQuery(DataTypes.String));
+
+		expect(screen.getByText('Is this')).toBeInTheDocument();
+		expect(screen.getByText('Is not this')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Is greater than or equal to'),
+		).not.toBeInTheDocument();
+	});
+
+	it('falls back to equality operators when the column has no known data type', () => {
+		renderGroupMenu(makeQuery(''));
+
+		expect(screen.getByText('Is this')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Is greater than or equal to'),
+		).not.toBeInTheDocument();
+	});
+
+	it('returns no items for a non-table panel', () => {
+		const config = getGroupContextMenuConfig({
+			query: makeQuery('number'),
+			clickedData,
+			panelType: PANEL_TYPES.TIME_SERIES,
+			onColumnClick: jest.fn(),
+		});
+
+		expect(config.items).toBeUndefined();
+	});
+});

frontend/src/container/QueryTable/Drilldown/__tests__/drilldownUtils.test.tsx

@@ -1,8 +1,11 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
+	getOperatorsByDataType,
 	getQueryData,
 	getViewQuery,
+	isNumberDataType,
 	isValidQueryName,
 } from '../drilldownUtils';
 import { METRIC_TO_LOGS_TRACES_MAPPINGS } from '../metricsCorrelationUtils';
@@ -687,4 +690,41 @@ describe('drilldownUtils', () => {
 			expect(expr).toContain(`name = 'GET /api'`);
 		});
 	});
+
+	describe('getOperatorsByDataType', () => {
+		it('gives numeric operators for the V5 `number` data type', () => {
+			const operators = getOperatorsByDataType('number');
+			expect(operators).toContain('>=');
+			expect(operators).toContain('<');
+			expect(operators).not.toContain('LIKE');
+		});
+
+		it('gives numeric operators for the V3 int64 / float64 data types', () => {
+			expect(getOperatorsByDataType(DataTypes.Int64)).toContain('>=');
+			expect(getOperatorsByDataType(DataTypes.Float64)).toContain('>=');
+		});
+
+		it('falls back to the string operators for unmapped, empty and missing types', () => {
+			const stringOperators = getOperatorsByDataType(DataTypes.String);
+			expect(getOperatorsByDataType('[]string')).toStrictEqual(stringOperators);
+			expect(getOperatorsByDataType('')).toStrictEqual(stringOperators);
+			expect(getOperatorsByDataType(undefined)).toStrictEqual(stringOperators);
+		});
+	});
+
+	describe('isNumberDataType', () => {
+		it.each([DataTypes.Int64, DataTypes.Float64, 'number' as DataTypes])(
+			'treats %s as numeric',
+			(dataType) => {
+				expect(isNumberDataType(dataType)).toBe(true);
+			},
+		);
+
+		it.each([DataTypes.String, DataTypes.bool, DataTypes.EMPTY, undefined])(
+			'does not treat %s as numeric',
+			(dataType) => {
+				expect(isNumberDataType(dataType)).toBe(false);
+			},
+		);
+	});
 });

frontend/src/container/QueryTable/Drilldown/__tests__/numericGroupByDrilldown.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen } from '@testing-library/react';
+import {
+	DashboardtypesQueryDTO,
+	Querybuildertypesv5BuilderQuerySpecDTO,
+	Querybuildertypesv5CompositeQueryDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	fromPerses,
+	toPerses,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import { ClickedData } from 'periscope/components/ContextMenu';
+
+import { getGroupContextMenuConfig } from '../contextConfig';
+import {
+	addFilterToQuery,
+	getBaseMeta,
+	isNumberDataType,
+} from '../drilldownUtils';
+
+const GROUP_KEY = 'panja.pinger.status_code';
+
+/**
+ * A saved V2 table panel grouped by a numeric attribute. The backend rewrites `float64` to
+ * `number` when it stores the panel, so `number` is what a reload actually carries.
+ */
+const savedPanelQueries = [
+	{
+		kind: 'signoz/scalar',
+		spec: {
+			plugin: {
+				kind: 'signoz/CompositeQuery',
+				spec: {
+					queries: [
+						{
+							type: 'builder_query',
+							spec: {
+								name: 'A',
+								signal: 'metrics',
+								aggregations: [{ metricName: 'probe_checks', spaceAggregation: 'sum' }],
+								groupBy: [
+									{
+										name: GROUP_KEY,
+										fieldDataType: 'number',
+										fieldContext: 'attribute',
+									},
+								],
+								filter: { expression: '' },
+								disabled: false,
+							},
+						},
+					],
+				},
+			},
+		},
+	},
+] as unknown as DashboardtypesQueryDTO[];
+
+describe('drilldown on a numeric group-by column (V2 table panel)', () => {
+	const v1Query = fromPerses(savedPanelQueries, PANEL_TYPES.TABLE);
+	const groupByDataType = getBaseMeta(v1Query, GROUP_KEY)?.dataType;
+
+	it('sees the `number` type the panel was stored with', () => {
+		expect(groupByDataType).toBe('number');
+	});
+
+	it('offers the numeric operators instead of throwing', () => {
+		const clickedData: ClickedData = {
+			column: { dataIndex: GROUP_KEY },
+			record: { key: GROUP_KEY, timestamp: 0 },
+		};
+		const { items } = getGroupContextMenuConfig({
+			query: v1Query,
+			clickedData,
+			panelType: PANEL_TYPES.TABLE,
+			onColumnClick: jest.fn(),
+		});
+		render(<div>{items}</div>);
+
+		expect(screen.getByText(`Filter by ${GROUP_KEY}`)).toBeInTheDocument();
+		expect(screen.getByText('Is this')).toBeInTheDocument();
+		expect(screen.getByText('Is greater than or equal to')).toBeInTheDocument();
+	});
+
+	it('filters on an unquoted number', () => {
+		// What the filter hooks branch on before coercing the clicked value.
+		expect(isNumberDataType(groupByDataType)).toBe(true);
+
+		const refined = addFilterToQuery(v1Query, [
+			{ filterKey: GROUP_KEY, filterValue: 200, operator: '=' },
+		]);
+		expect(refined.builder.queryData[0].filter?.expression).toBe(
+			`${GROUP_KEY} = 200`,
+		);
+	});
+
+	it('leaves the stored query shape untouched on the way back out', () => {
+		const [envelope] = toPerses(v1Query, PANEL_TYPES.TABLE);
+		const composite = envelope.spec.plugin
+			.spec as Querybuildertypesv5CompositeQueryDTO;
+		const [query] = composite.queries ?? [];
+		// The generated envelope union doesn't discriminate `spec` by `type`.
+		const spec = query?.spec as Querybuildertypesv5BuilderQuerySpecDTO;
+
+		expect(spec.groupBy?.[0]).toMatchObject({
+			name: GROUP_KEY,
+			fieldDataType: 'number',
+			fieldContext: 'attribute',
+		});
+	});
+});

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

@@ -1,12 +1,9 @@
 import { ReactNode } from 'react';
-import {
-	PANEL_TYPES,
-	QUERY_BUILDER_OPERATORS_BY_TYPES,
-} from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import ContextMenu, { ClickedData } from 'periscope/components/ContextMenu';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 
-import { getBaseMeta } from './drilldownUtils';
+import { getBaseMeta, getOperatorsByDataType } from './drilldownUtils';
 import { SUPPORTED_OPERATORS } from './menuOptions';
 import { BreakoutAttributeType } from './types';
 
@@ -49,15 +46,9 @@ export function getGroupContextMenuConfig({
 }: Omit<ContextMenuConfigParams, 'configType'>): GroupContextMenuConfig {
 	const filterKey = clickedData?.column?.dataIndex;
 
-	const filterDataType =
-		getBaseMeta(query, filterKey as string)?.dataType || 'string';
+	const filterDataType = getBaseMeta(query, filterKey as string)?.dataType;
 
-	const operators =
-		QUERY_BUILDER_OPERATORS_BY_TYPES[
-			filterDataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-		];
-
-	const filterOperators = operators.filter(
+	const filterOperators = getOperatorsByDataType(filterDataType).filter(
 		(operator) => SUPPORTED_OPERATORS[operator],
 	);
 

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

@@ -3,6 +3,7 @@ import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBui
 import {
 	initialQueryBuilderFormValuesMap,
 	OPERATORS,
+	QUERY_BUILDER_OPERATORS_BY_TYPES,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { isApmMetric } from 'container/PanelWrapper/utils';
@@ -54,13 +55,44 @@ export const getRoute = (key: string): string => {
 	}
 };
 
+/**
+ * A group-by's `dataType` comes from the field metadata, which reports a numeric as `number`
+ * (V5, what a saved V2 panel carries) or as `int64` / `float64` (V3) — all three are numeric.
+ */
+const NUMERIC_DATA_TYPES: string[] = [
+	DataTypes.Int64,
+	DataTypes.Float64,
+	'number',
+];
+
 export const isNumberDataType = (dataType: DataTypes | undefined): boolean => {
 	if (!dataType) {
 		return false;
 	}
-	return dataType === DataTypes.Int64 || dataType === DataTypes.Float64;
+	return NUMERIC_DATA_TYPES.includes(dataType);
 };
 
+/**
+ * `QUERY_BUILDER_OPERATORS_BY_TYPES` is keyed by the V3 data types, so the `number` a saved V2
+ * panel carries misses it — and a raw lookup returns `undefined`, which throws on the caller's
+ * `.filter`. Resolve through this table and fall back to the string set.
+ */
+const OPERATOR_DATA_TYPES: Record<
+	string,
+	keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
+> = {
+	[DataTypes.String]: 'string',
+	[DataTypes.Int64]: 'int64',
+	[DataTypes.Float64]: 'float64',
+	[DataTypes.bool]: 'bool',
+	number: 'float64',
+};
+
+export const getOperatorsByDataType = (dataType?: string): string[] =>
+	QUERY_BUILDER_OPERATORS_BY_TYPES[
+		OPERATOR_DATA_TYPES[dataType ?? ''] ?? 'string'
+	];
+
 export interface FilterData {
 	filterKey: string;
 	filterValue: string | number;

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

@@ -1,6 +1,5 @@
 import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { addFilterToSelectedQuery, FilterData } from './drilldownUtils';
@@ -89,7 +88,11 @@ export const getBreakoutQuery = (
 		.filter((item: IBuilderQuery) => item.queryName === aggregateData.queryName)
 		.map((item: IBuilderQuery) => ({
 			...item,
-			groupBy: [{ key: groupBy.key, type: groupBy.type } as BaseAutocompleteData],
+			// The picked field's type travels with it: dropped, the breakout query goes out
+			// untyped and a drilldown on its result can't tell a number from a string.
+			groupBy: [
+				{ key: groupBy.key, dataType: groupBy.dataType, type: groupBy.type },
+			],
 			orderBy: [],
 			legend: item.legend && groupBy.key ? `{{${groupBy.key}}}` : '',
 		}));

frontend/src/container/QueryTable/Drilldown/types.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
-import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export type ContextMenuItem = ReactNode;
@@ -31,7 +33,8 @@ export interface AggregateContextMenuConfig {
 
 export interface BreakoutAttributeType {
 	key: string;
-	dataType: QUERY_BUILDER_KEY_TYPES;
+	/** The picked field's type, in the vocabulary the group-by it becomes is read with. */
+	dataType: DataTypes;
 	type: string;
 }
 

frontend/src/hooks/dashboard/__test__/useCreateExportDashboard.test.tsx

@@ -2,15 +2,9 @@ import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { createDashboardV2 } from 'api/generated/services/dashboard';
-import createDashboardV1 from 'api/v1/dashboards/create';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import { Dashboard } from 'types/api/dashboard/getAll';
 
 import { useCreateExportDashboard } from '../useCreateExportDashboard';
 
-jest.mock('hooks/useIsDashboardV2');
-jest.mock('api/v1/dashboards/create');
 jest.mock('api/generated/services/dashboard', () => ({
 	createDashboardV2: jest.fn(),
 }));
@@ -20,10 +14,6 @@ jest.mock('providers/ErrorModalProvider', () => ({
 	}),
 }));
 
-const mockUseIsDashboardV2 = useIsDashboardV2 as jest.MockedFunction<
-	typeof useIsDashboardV2
->;
-const mockCreateV1 = createDashboardV1 as jest.Mock;
 const mockCreateV2 = createDashboardV2 as jest.Mock;
 
 function wrapper({ children }: { children: ReactNode }): JSX.Element {
@@ -40,35 +30,7 @@ beforeEach(() => {
 });
 
 describe('useCreateExportDashboard', () => {
-	it('creates via the V1 endpoint and returns the created dashboard when the flag is off', async () => {
-		mockUseIsDashboardV2.mockReturnValue(false);
-		const v1Dashboard = {
-			id: 'v1-new',
-			data: { title: TITLE },
-		} as unknown as Dashboard;
-		mockCreateV1.mockResolvedValue({ httpStatusCode: 200, data: v1Dashboard });
-		const onCreated = jest.fn();
-
-		const { result } = renderHook(
-			() => useCreateExportDashboard({ title: TITLE, onCreated }),
-			{ wrapper },
-		);
-
-		act(() => result.current.create());
-
-		await waitFor(() =>
-			expect(onCreated).toHaveBeenCalledWith({ id: 'v1-new', title: TITLE }),
-		);
-		expect(mockCreateV1).toHaveBeenCalledWith({
-			title: TITLE,
-			uploadedGrafana: false,
-			version: ENTITY_VERSION_V5,
-		});
-		expect(mockCreateV2).not.toHaveBeenCalled();
-	});
-
-	it('creates via the V2 Perses endpoint and normalizes the response when the flag is on', async () => {
-		mockUseIsDashboardV2.mockReturnValue(true);
+	it('creates via the V2 Perses endpoint and normalizes the response', async () => {
 		mockCreateV2.mockResolvedValue({ data: { id: 'v2-new' } });
 		const onCreated = jest.fn();
 
@@ -88,6 +50,5 @@ describe('useCreateExportDashboard', () => {
 				spec: expect.objectContaining({ display: { name: TITLE } }),
 			}),
 		);
-		expect(mockCreateV1).not.toHaveBeenCalled();
 	});
 });

frontend/src/hooks/dashboard/__test__/useExportDashboards.test.ts

@@ -1,44 +1,18 @@
 import { renderHook } from '@testing-library/react';
 import { useListDashboardsForUserV2 } from 'api/generated/services/dashboard';
-import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import { Dashboard } from 'types/api/dashboard/getAll';
 
 import { useExportDashboards } from '../useExportDashboards';
 
-jest.mock('hooks/useIsDashboardV2');
-jest.mock('hooks/dashboard/useGetAllDashboard');
 jest.mock('api/generated/services/dashboard', () => ({
 	useListDashboardsForUserV2: jest.fn(),
 }));
 
-const mockUseIsDashboardV2 = useIsDashboardV2 as jest.MockedFunction<
-	typeof useIsDashboardV2
->;
-const mockUseGetAllDashboard = useGetAllDashboard as jest.Mock;
 const mockUseListV2 = useListDashboardsForUserV2 as jest.Mock;
 
-const v1Refetch = jest.fn();
 const v2Refetch = jest.fn();
 
-const v1Dashboard = {
-	id: 'v1-1',
-	data: { title: 'V1 Dashboard' },
-} as unknown as Dashboard;
-
-const v1Other = {
-	id: 'v1-2',
-	data: { title: 'Other board' },
-} as unknown as Dashboard;
-
 beforeEach(() => {
 	jest.clearAllMocks();
-	mockUseGetAllDashboard.mockReturnValue({
-		data: { data: [v1Dashboard, v1Other] },
-		isLoading: false,
-		isFetching: false,
-		refetch: v1Refetch,
-	});
 	mockUseListV2.mockReturnValue({
 		data: {
 			data: {
@@ -58,54 +32,21 @@ beforeEach(() => {
 });
 
 describe('useExportDashboards', () => {
-	it('returns the V1 list and disables the V2 query when the flag is off', () => {
-		mockUseIsDashboardV2.mockReturnValue(false);
-
-		const { result } = renderHook(() => useExportDashboards());
-
-		expect(result.current.dashboards).toStrictEqual([
-			{ id: 'v1-1', title: 'V1 Dashboard' },
-			{ id: 'v1-2', title: 'Other board' },
-		]);
-		expect(mockUseGetAllDashboard).toHaveBeenCalledWith({ enabled: true });
-		expect(mockUseListV2).toHaveBeenCalledWith(
-			expect.anything(),
-			expect.objectContaining({
-				query: { enabled: false, keepPreviousData: true },
-			}),
-		);
-	});
-
-	it('filters the V1 list in memory by title (case-insensitive)', () => {
-		mockUseIsDashboardV2.mockReturnValue(false);
-
-		const { result } = renderHook(() => useExportDashboards('v1 dash'));
-
-		expect(result.current.dashboards).toStrictEqual([
-			{ id: 'v1-1', title: 'V1 Dashboard' },
-		]);
-	});
-
-	it('returns the V2 list normalized to the export shape when the flag is on', () => {
-		mockUseIsDashboardV2.mockReturnValue(true);
-
+	it('returns the V2 list normalized to the export shape', () => {
 		const { result } = renderHook(() => useExportDashboards());
 
 		expect(result.current.dashboards).toStrictEqual([
 			{ id: 'v2-1', title: 'V2 Dashboard' },
 		]);
-		expect(mockUseGetAllDashboard).toHaveBeenCalledWith({ enabled: false });
 		expect(mockUseListV2).toHaveBeenCalledWith(
 			expect.objectContaining({ query: undefined }),
 			expect.objectContaining({
-				query: { enabled: true, keepPreviousData: true },
+				query: { keepPreviousData: true },
 			}),
 		);
 	});
 
 	it('passes the search term as a name-contains filter clause to the V2 query param', () => {
-		mockUseIsDashboardV2.mockReturnValue(true);
-
 		renderHook(() => useExportDashboards('payments'));
 
 		expect(mockUseListV2).toHaveBeenCalledWith(
@@ -114,12 +55,10 @@ describe('useExportDashboards', () => {
 		);
 	});
 
-	it('refetches the active source', () => {
-		mockUseIsDashboardV2.mockReturnValue(true);
+	it('refetches the V2 source', () => {
 		const { result } = renderHook(() => useExportDashboards());
 
 		result.current.refetch();
 		expect(v2Refetch).toHaveBeenCalledTimes(1);
-		expect(v1Refetch).not.toHaveBeenCalled();
 	});
 });

frontend/src/hooks/dashboard/__test__/useGetExportToDashboardLink.test.ts

@@ -1,15 +1,9 @@
 import { renderHook } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { useGetExportToDashboardLink } from '../useGetExportToDashboardLink';
 
-jest.mock('hooks/useIsDashboardV2');
-const mockUseIsDashboardV2 = useIsDashboardV2 as jest.MockedFunction<
-	typeof useIsDashboardV2
->;
-
 const query = { id: 'q1', queryType: 'builder' } as unknown as Query;
 const params = {
 	dashboardId: 'dash-1',
@@ -19,21 +13,7 @@ const params = {
 };
 
 describe('useGetExportToDashboardLink', () => {
-	it('builds a V1 new-widget link when the dashboard-v2 flag is off', () => {
-		mockUseIsDashboardV2.mockReturnValue(false);
-
-		const { result } = renderHook(() => useGetExportToDashboardLink());
-		const link = result.current(params);
-
-		expect(link?.startsWith('/dashboard/dash-1/new?')).toBe(true);
-		expect(link).toContain('graphType=');
-		expect(link).toContain('widgetId=w1');
-		expect(link).toContain('compositeQuery=');
-	});
-
-	it('builds a V2 panel/new link (ignoring widgetId) when the flag is on', () => {
-		mockUseIsDashboardV2.mockReturnValue(true);
-
+	it('builds a V2 panel/new link (ignoring widgetId)', () => {
 		const { result } = renderHook(() => useGetExportToDashboardLink());
 		const link = result.current(params);
 

frontend/src/hooks/dashboard/useCreateExportDashboard.ts

@@ -1,9 +1,6 @@
 import { useCallback } from 'react';
 import { useMutation } from 'react-query';
 import { createDashboardV2 } from 'api/generated/services/dashboard';
-import createDashboardV1 from 'api/v1/dashboards/create';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
@@ -20,14 +17,13 @@ interface UseCreateExportDashboardResult {
 }
 
 /**
- * Flag-aware "create a new dashboard to export into". V2 uses the Perses-spec
- * `createDashboardV2`; V1 uses the legacy create. Both normalize to an `ExportDashboard`.
+ * "Create a new dashboard to export into". Uses the Perses-spec `createDashboardV2`
+ * and normalizes to an `ExportDashboard`.
  */
 export function useCreateExportDashboard({
 	title,
 	onCreated,
 }: UseCreateExportDashboardParams): UseCreateExportDashboardResult {
-	const isDashboardV2 = useIsDashboardV2();
 	const { showErrorModal } = useErrorModal();
 
 	const onError = useCallback(
@@ -35,16 +31,7 @@ export function useCreateExportDashboard({
 		[showErrorModal],
 	);
 
-	const v1 = useMutation(createDashboardV1, {
-		onSuccess: (data) => {
-			if (data.data) {
-				onCreated({ id: data.data.id, title: data.data.data.title ?? '' });
-			}
-		},
-		onError,
-	});
-
-	const v2 = useMutation(
+	const createDashboardMutation = useMutation(
 		() =>
 			createDashboardV2({
 				schemaVersion: 'v6',
@@ -66,15 +53,11 @@ export function useCreateExportDashboard({
 	);
 
 	const create = useCallback((): void => {
-		if (isDashboardV2) {
-			v2.mutate();
-		} else {
-			v1.mutate({ title, uploadedGrafana: false, version: ENTITY_VERSION_V5 });
-		}
-	}, [isDashboardV2, v1, v2, title]);
+		createDashboardMutation.mutate();
+	}, [createDashboardMutation]);
 
 	return {
 		create,
-		isLoading: isDashboardV2 ? v2.isLoading : v1.isLoading,
+		isLoading: createDashboardMutation.isLoading,
 	};
 }

frontend/src/hooks/dashboard/useExportDashboards.ts

@@ -1,15 +1,12 @@
 import { useCallback, useMemo } from 'react';
 import { useListDashboardsForUserV2 } from 'api/generated/services/dashboard';
 import { DashboardtypesListedDashboardForUserV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useDebounce from 'hooks/useDebounce';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import { Dashboard } from 'types/api/dashboard/getAll';
 
 const V2_LIST_LIMIT = 1000;
 const SEARCH_DEBOUNCE_MS = 300;
 
-/** Neutral id+title the picker uses in place of the V1/V2 dashboard entity. */
+/** Neutral id+title the picker uses in place of the dashboard entity. */
 export interface ExportDashboard {
 	id: string;
 	title: string;
@@ -24,29 +21,12 @@ export interface UseExportDashboardsResult {
 	refetch: () => void;
 }
 
-function fromV2(
+function toExportDashboard(
 	item: DashboardtypesListedDashboardForUserV2DTO,
 ): ExportDashboard {
 	return { id: item.id, title: item.spec.display?.name || item.name };
 }
 
-function fromV1(dashboard: Dashboard): ExportDashboard {
-	return { id: dashboard.id, title: dashboard.data.title ?? '' };
-}
-
-function filterByTitle(
-	dashboards: ExportDashboard[],
-	search: string,
-): ExportDashboard[] {
-	const term = search.trim().toLowerCase();
-	if (!term) {
-		return dashboards;
-	}
-	return dashboards.filter((dashboard) =>
-		dashboard.title.toLowerCase().includes(term),
-	);
-}
-
 // The V2 list `query` is a filter DSL (`key OP value`), not free text — wrap a typed term
 // as a name-contains clause (single quotes escaped).
 function toNameQuery(search: string): string | undefined {
@@ -54,37 +34,28 @@ function toNameQuery(search: string): string | undefined {
 	return term ? `name CONTAINS '${term.replace(/'/g, "\\'")}'` : undefined;
 }
 
-/** Flag-aware picker source: V2 searches server-side (debounced), V1 filters in memory. */
+/** Picker source: searches the V2 dashboard list server-side (debounced). */
 export function useExportDashboards(search = ''): UseExportDashboardsResult {
-	const isDashboardV2 = useIsDashboardV2();
 	const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_MS);
 
-	const v1 = useGetAllDashboard({ enabled: !isDashboardV2 });
-	const v2 = useListDashboardsForUserV2(
+	const listQuery = useListDashboardsForUserV2(
 		{ limit: V2_LIST_LIMIT, query: toNameQuery(debouncedSearch) },
-		{ query: { enabled: isDashboardV2, keepPreviousData: true } },
+		{ query: { keepPreviousData: true } },
 	);
 
 	const dashboards = useMemo<ExportDashboard[]>(
-		() =>
-			isDashboardV2
-				? (v2.data?.data?.dashboards ?? []).map(fromV2)
-				: filterByTitle((v1.data?.data ?? []).map(fromV1), search),
-		[isDashboardV2, v1.data, v2.data, search],
+		() => (listQuery.data?.data?.dashboards ?? []).map(toExportDashboard),
+		[listQuery.data],
 	);
 
 	const refetch = useCallback((): void => {
-		if (isDashboardV2) {
-			void v2.refetch();
-		} else {
-			void v1.refetch();
-		}
-	}, [isDashboardV2, v1, v2]);
+		void listQuery.refetch();
+	}, [listQuery]);
 
 	return {
 		dashboards,
-		isLoading: isDashboardV2 ? v2.isLoading : v1.isLoading,
-		isFetching: isDashboardV2 ? v2.isFetching : v1.isFetching,
+		isLoading: listQuery.isLoading,
+		isFetching: listQuery.isFetching,
 		refetch,
 	};
 }

frontend/src/hooks/dashboard/useGetExportToDashboardLink.ts

@@ -1,9 +1,7 @@
 import { useCallback } from 'react';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import { buildExportPanelLink } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/newPanelRoute';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToDashboardLink';
 
 interface ExportToDashboardLinkParams {
 	dashboardId: string;
@@ -13,25 +11,15 @@ interface ExportToDashboardLinkParams {
 }
 
 /**
- * Flag-aware "Add to Dashboard" link builder for the explorers. V2 targets the panel
- * editor; V1 uses the legacy new-widget link. `null` (V2 only) when the panel type has no
- * V2 kind, so callers skip navigation.
+ * "Add to Dashboard" link builder for the explorers. Targets the V2 panel editor;
+ * `null` when the panel type has no V2 kind, so callers skip navigation.
  */
 export function useGetExportToDashboardLink(): (
 	params: ExportToDashboardLinkParams,
 ) => string | null {
-	const isDashboardV2 = useIsDashboardV2();
-
 	return useCallback(
-		({ dashboardId, panelType, query, widgetId }: ExportToDashboardLinkParams) =>
-			isDashboardV2
-				? buildExportPanelLink({ dashboardId, panelType, query })
-				: generateExportToDashboardLink({
-						query,
-						panelType,
-						dashboardId,
-						widgetId,
-					}),
-		[isDashboardV2],
+		({ dashboardId, panelType, query }: ExportToDashboardLinkParams) =>
+			buildExportPanelLink({ dashboardId, panelType, query }),
+		[],
 	);
 }

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/lib/query/__tests__/createTableColumnsFromQuery.test.ts

@@ -0,0 +1,94 @@
+import {
+	compareTableColumnValues,
+	RowData,
+} from '../createTableColumnsFromQuery';
+
+// Builds a minimal RowData row. Values are intentionally loosely typed because
+// real query responses can put objects/arrays into cells despite RowData's
+// declared `string | number` index signature (that mismatch is the bug under test).
+const row = (value: unknown, dataIndex = 'col'): RowData =>
+	({
+		timestamp: 0,
+		key: 'k',
+		[dataIndex]: value,
+	}) as unknown as RowData;
+
+describe('compareTableColumnValues', () => {
+	it('sorts numerically when both cells are numbers', () => {
+		expect(compareTableColumnValues(row(1), row(2), 'col')).toBeLessThan(0);
+		expect(compareTableColumnValues(row(2), row(1), 'col')).toBeGreaterThan(0);
+		expect(compareTableColumnValues(row(5), row(5), 'col')).toBe(0);
+	});
+
+	it('sorts numeric-looking strings numerically, not lexically', () => {
+		// "10" vs "9": numeric branch => 10 - 9 > 0. A string compare would be < 0.
+		expect(compareTableColumnValues(row('10'), row('9'), 'col')).toBeGreaterThan(
+			0,
+		);
+	});
+
+	it('prefers the `<dataIndex>_without_unit` value for numeric comparison', () => {
+		const a = row('2 ms');
+		const b = row('10 ms');
+		a.col_without_unit = 2;
+		b.col_without_unit = 10;
+		expect(compareTableColumnValues(a, b, 'col')).toBeLessThan(0);
+	});
+
+	it('falls back to locale string compare for non-numeric strings', () => {
+		expect(compareTableColumnValues(row('abc'), row('abd'), 'col')).toBe(
+			'abc'.localeCompare('abd'),
+		);
+	});
+
+	it('treats null/undefined cells as empty string (no "null"/"undefined")', () => {
+		// Empty string sorts before a real word, and two empties are equal.
+		expect(compareTableColumnValues(row(null), row('a'), 'col')).toBeLessThan(0);
+		expect(compareTableColumnValues(row(undefined), row(undefined), 'col')).toBe(
+			0,
+		);
+		// If null coerced to the literal "null", this would sort after "a".
+		expect(
+			compareTableColumnValues(row(null), row('a'), 'col'),
+		).not.toBeGreaterThan(0);
+	});
+
+	it('does not throw when a cell value is an object', () => {
+		const a = row({ foo: 'bar' });
+		const b = row({ foo: 'baz' });
+		expect(() => compareTableColumnValues(a, b, 'col')).not.toThrow();
+		expect(typeof compareTableColumnValues(a, b, 'col')).toBe('number');
+	});
+
+	it('does not throw when a cell value is an array', () => {
+		const a = row([1, 2]);
+		const b = row([3, 4]);
+		expect(() => compareTableColumnValues(a, b, 'col')).not.toThrow();
+		// String([1,2]) === "1,2" < String([3,4]) === "3,4"
+		expect(compareTableColumnValues(a, b, 'col')).toBeLessThan(0);
+	});
+
+	it('does not throw when one cell is numeric and the other is an object', () => {
+		const a = row(42);
+		const b = row({ foo: 'bar' });
+		expect(() => compareTableColumnValues(a, b, 'col')).not.toThrow();
+		expect(typeof compareTableColumnValues(a, b, 'col')).toBe('number');
+	});
+
+	it('does not throw for a number cell compared against an "N/A" cell', () => {
+		// http.status_code column: [null, "200", ...] -> ["N/A", 200, ...]
+		const numberCell = row(200); // numeric string "200" becomes the number 200
+		const naCell = row('N/A'); // null becomes the string "N/A"
+
+		// Both orderings — antd's sorter compares pairs in both directions.
+		expect(() =>
+			compareTableColumnValues(numberCell, naCell, 'col'),
+		).not.toThrow();
+		expect(() =>
+			compareTableColumnValues(naCell, numberCell, 'col'),
+		).not.toThrow();
+		expect(typeof compareTableColumnValues(numberCell, naCell, 'col')).toBe(
+			'number',
+		);
+	});
+});

frontend/src/lib/query/createTableColumnsFromQuery.ts

@@ -637,6 +637,21 @@ const generateData = (
 	return data;
 };
 
+export const compareTableColumnValues = (
+	a: RowData,
+	b: RowData,
+	dataIndex: string,
+): number => {
+	const valueA = Number(a[`${dataIndex}_without_unit`] ?? a[dataIndex]);
+	const valueB = Number(b[`${dataIndex}_without_unit`] ?? b[dataIndex]);
+
+	if (!isNaN(valueA) && !isNaN(valueB)) {
+		return valueA - valueB;
+	}
+
+	return String(a[dataIndex] ?? '').localeCompare(String(b[dataIndex] ?? ''));
+};
+
 const generateTableColumns = (
 	dynamicColumns: DynamicColumns,
 	renderColumnCell?: QueryTableProps['renderColumnCell'],
@@ -650,18 +665,8 @@ const generateTableColumns = (
 			title: item.title,
 			width: QUERY_TABLE_CONFIG.width,
 			render: renderColumnCell && renderColumnCell[dataIndex],
-			sorter: (a: RowData, b: RowData): number => {
-				const valueA = Number(a[`${dataIndex}_without_unit`] ?? a[dataIndex]);
-				const valueB = Number(b[`${dataIndex}_without_unit`] ?? b[dataIndex]);
-
-				if (!isNaN(valueA) && !isNaN(valueB)) {
-					return valueA - valueB;
-				}
-
-				return ((a[dataIndex] as string) || '').localeCompare(
-					(b[dataIndex] as string) || '',
-				);
-			},
+			sorter: (a: RowData, b: RowData): number =>
+				compareTableColumnValues(a, b, dataIndex),
 		};
 
 		return [...acc, column];

frontend/src/pages/DashboardPage/index.tsx

@@ -1,15 +1,7 @@
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
 import DashboardPageV2 from 'pages/DashboardPageV2';
 
-import DashboardPage from './DashboardPage';
-
-// Serves the V2 dashboard detail page when the `use_dashboard_v2` flag is active;
-// otherwise the existing V1 page. Lets V2 dark-ship behind the flag without
-// changing route definitions.
 function DashboardPageEntry(): JSX.Element {
-	const isDashboardV2 = useIsDashboardV2();
-
-	return isDashboardV2 ? <DashboardPageV2 /> : <DashboardPage />;
+	return <DashboardPageV2 />;
 }
 
 export default DashboardPageEntry;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.module.scss

@@ -11,3 +11,9 @@
 	border: 1px solid var(--l3-border) !important;
 	box-shadow: none !important;
 }
+
+/* Highlights the dashboard name inside the delete-confirm title. */
+.deleteName {
+	color: var(--danger-background);
+	font-weight: var(--font-weight-medium);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/DashboardActions.tsx

@@ -27,16 +27,13 @@ import logEvent from 'api/common/logEvent';
 import { cloneDashboardV2 } from 'api/generated/services/dashboard';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import ROUTES from 'constants/routes';
-import { useDeleteDashboard } from 'hooks/dashboard/useDeleteDashboard';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import history from 'lib/history';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
 
-import ConfirmDeleteDialog from '../../components/ConfirmDeleteDialog/ConfirmDeleteDialog';
 import DisabledControlTooltip from '../../components/DisabledControlTooltip/DisabledControlTooltip';
 import DisabledMenuItemLabel from '../../components/DisabledMenuItemLabel/DisabledMenuItemLabel';
 import DashboardSettings from '../../DashboardSettings';
@@ -45,6 +42,7 @@ import SectionTitleModal from '../../PanelsAndSectionsLayout/Section/SectionTitl
 import JsonEditorDrawer from '../JsonEditorDrawer/JsonEditorDrawer';
 import SettingsDrawer from '../SettingsDrawer';
 import styles from './DashboardActions.module.scss';
+import { useDeleteDashboardAction } from './useDeleteDashboardAction';
 import { DASHBOARD_LOCKED_REASON } from '../../hooks/useDashboardEditGuard';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
@@ -84,8 +82,12 @@ function DashboardActions({
 	const [isCloning, setIsCloning] = useState<boolean>(false);
 	const [isNewSectionOpen, setIsNewSectionOpen] = useState<boolean>(false);
 
-	const [isDeleteOpen, setIsDeleteOpen] = useState<boolean>(false);
-	const deleteDashboardMutation = useDeleteDashboard(dashboard.id);
+	const { contextHolder: deleteConfirmHolder, confirmDeleteDashboard } =
+		useDeleteDashboardAction({
+			dashboardId: dashboard.id,
+			dashboardName: title,
+			panelCount: Object.keys(dashboard.spec.panels).length,
+		});
 
 	// Open the settings drawer when something in the tree requests it (e.g. the
 	// variables bar's "Add variable" button).
@@ -132,19 +134,6 @@ function DashboardActions({
 		}
 	}, [dashboard.id, title, safeNavigate, showErrorModal]);
 
-	const handleConfirmDelete = useCallback((): void => {
-		deleteDashboardMutation.mutate(undefined, {
-			onSuccess: () => {
-				void logEvent(DashboardDetailEvents.Deleted, {
-					dashboardId: dashboard.id,
-					panelCount: Object.keys(dashboard.spec.panels).length,
-				});
-				setIsDeleteOpen(false);
-				history.replace(ROUTES.ALL_DASHBOARD);
-			},
-		});
-	}, [deleteDashboardMutation, dashboard.id, dashboard.spec.panels]);
-
 	const handleOpenSettings = useCallback((): void => {
 		void logEvent(DashboardDetailEvents.SettingsOpened, {
 			dashboardId: dashboard.id,
@@ -248,7 +237,7 @@ function DashboardActions({
 					icon: <Trash2 size={14} />,
 					danger: true,
 					disabled: isLocked,
-					onClick: (): void => setIsDeleteOpen(true),
+					onClick: confirmDeleteDashboard,
 				},
 			);
 		}
@@ -266,6 +255,7 @@ function DashboardActions({
 		handleClone,
 		onLockToggle,
 		handleEnterFullScreen,
+		confirmDeleteDashboard,
 	]);
 
 	return (
@@ -348,14 +338,7 @@ function DashboardActions({
 				isOpen={isJsonEditorOpen}
 				onClose={(): void => setIsJsonEditorOpen(false)}
 			/>
-			<ConfirmDeleteDialog
-				open={isDeleteOpen}
-				title={`Delete dashboard"?`}
-				description={`Are you sure you want to delete this dashboard - "${title}"? This action cannot be undone.`}
-				isLoading={deleteDashboardMutation.isLoading}
-				onConfirm={handleConfirmDelete}
-				onClose={(): void => setIsDeleteOpen(false)}
-			/>
+			{deleteConfirmHolder}
 			<SectionTitleModal
 				open={isNewSectionOpen}
 				heading="New section"

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardActions/useDeleteDashboardAction.tsx

@@ -0,0 +1,89 @@
+import { type ReactNode, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import {
+	invalidateListDashboardsForUserV2,
+	useDeleteDashboardV2,
+} from 'api/generated/services/dashboard';
+import { useDeleteConfirm } from 'components/DeleteConfirmModal/useDeleteConfirm';
+import ROUTES from 'constants/routes';
+import { useDashboardPreferencesStore } from 'hooks/dashboard/useDashboardPreference';
+import history from 'lib/history';
+import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import styles from './DashboardActions.module.scss';
+
+interface UseDeleteDashboardActionArgs {
+	dashboardId: string;
+	dashboardName: string;
+	panelCount: number;
+}
+
+interface UseDeleteDashboardAction {
+	/** Must be rendered in the calling component for the modal to appear. */
+	contextHolder: ReactNode;
+	confirmDeleteDashboard: () => void;
+}
+
+/**
+ * Deletes the open dashboard through the v2 endpoint behind the shared
+ * destructive confirmation, then drops its local preferences, refreshes the
+ * dashboard list cache and sends the user back to the list.
+ */
+export function useDeleteDashboardAction({
+	dashboardId,
+	dashboardName,
+	panelCount,
+}: UseDeleteDashboardActionArgs): UseDeleteDashboardAction {
+	const queryClient = useQueryClient();
+	const { showErrorModal } = useErrorModal();
+	const { contextHolder, confirmDelete } = useDeleteConfirm();
+	const removePreferences = useDashboardPreferencesStore(
+		(state) => state.removePreferences,
+	);
+
+	const { mutate: deleteDashboard } = useDeleteDashboardV2({
+		mutation: {
+			onSuccess: async (): Promise<void> => {
+				void logEvent(DashboardDetailEvents.Deleted, { dashboardId, panelCount });
+				removePreferences(dashboardId);
+				await invalidateListDashboardsForUserV2(queryClient);
+				toast.success('Dashboard deleted successfully');
+				history.replace(ROUTES.ALL_DASHBOARD);
+			},
+			onError: (error: unknown): void => {
+				showErrorModal(error as APIError);
+			},
+		},
+	});
+
+	const confirmDeleteDashboard = useCallback((): void => {
+		confirmDelete({
+			title: (
+				<Typography.Title level={5}>
+					Are you sure you want to delete the
+					<Typography.Text className={styles.deleteName}>
+						{' '}
+						{dashboardName}{' '}
+					</Typography.Text>
+					dashboard?
+				</Typography.Title>
+			),
+			content: 'This action cannot be undone.',
+			// Keeps the Delete button loading until the mutation settles, then closes.
+			onConfirm: () =>
+				new Promise<void>((resolve) => {
+					deleteDashboard(
+						{ pathParams: { id: dashboardId } },
+						{ onSettled: () => resolve() },
+					);
+				}),
+		});
+	}, [confirmDelete, dashboardName, deleteDashboard, dashboardId]);
+
+	return { contextHolder, confirmDeleteDashboard };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.module.scss

@@ -113,3 +113,15 @@
 	align-items: center;
 	gap: 4px;
 }
+
+// Hidden tags revealed on hovering the `+N` badge: the same chips as inline, one per
+// line (easier to scan than a wrapped cloud) and width-capped so a long tag wraps
+// instead of stretching the tooltip off-screen.
+.overflowTags {
+	display: flex;
+	max-width: 360px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 4px;
+	overflow-wrap: anywhere;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -20,6 +20,9 @@ import { linkifyText } from 'utils/linkifyText';
 import { openInNewTab } from 'utils/navigation';
 
 import styles from './DashboardInfo.module.scss';
+import { TOOLTIP_SCROLL_CONTENT_CLASS } from 'components/TooltipScrollArea/TooltipScrollArea';
+
+import TagsOverflowTooltip from './TagsOverflowTooltip';
 import { DASHBOARD_NAME_MAX_LENGTH } from '../../constants';
 import { useDashboardStore } from '../../store/useDashboardStore';
 
@@ -231,7 +234,10 @@ function DashboardInfo({
 							<TagBadge key={tag}>{tag}</TagBadge>
 						))}
 						{remainingTags.length > 0 && (
-							<TooltipSimple title={remainingTags.join(', ')}>
+							<TooltipSimple
+								title={<TagsOverflowTooltip tags={remainingTags} />}
+								tooltipContentProps={{ className: TOOLTIP_SCROLL_CONTENT_CLASS }}
+							>
 								<span data-testid="dashboard-tags-overflow">
 									<TagBadge>+{remainingTags.length}</TagBadge>
 								</span>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/TagsOverflowTooltip.tsx

@@ -0,0 +1,23 @@
+import TagBadge from 'components/TagBadge/TagBadge';
+import TooltipScrollArea from 'components/TooltipScrollArea/TooltipScrollArea';
+
+import styles from './DashboardInfo.module.scss';
+
+interface TagsOverflowTooltipProps {
+	/** The tags the cluster isn't showing inline. */
+	tags: string[];
+}
+
+function TagsOverflowTooltip({ tags }: TagsOverflowTooltipProps): JSX.Element {
+	return (
+		<TooltipScrollArea>
+			<div className={styles.overflowTags} data-testid="dashboard-tags-tooltip">
+				{tags.map((tag) => (
+					<TagBadge key={tag}>{tag}</TagBadge>
+				))}
+			</div>
+		</TooltipScrollArea>
+	);
+}
+
+export default TagsOverflowTooltip;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/__tests__/TagsOverflowTooltip.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+
+import TagsOverflowTooltip from '../TagsOverflowTooltip';
+
+describe('TagsOverflowTooltip', () => {
+	it('renders every hidden tag as its own chip', () => {
+		render(
+			<TagsOverflowTooltip tags={['production', 'team-checkout', 'tier-1']} />,
+		);
+
+		const chips = screen
+			.getByTestId('dashboard-tags-tooltip')
+			.querySelectorAll('[data-slot="badge"]');
+
+		expect(Array.from(chips).map((chip) => chip.textContent)).toStrictEqual([
+			'production',
+			'team-checkout',
+			'tier-1',
+		]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.module.scss

@@ -2,7 +2,7 @@
    from the collapsible config sections above by the same hairline divider. */
 .divider {
 	height: 1px;
-	background: var(--l2-border);
+	background: var(--l1-border);
 	margin: 18px 0;
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigActions/ConfigActions.tsx

@@ -1,4 +1,4 @@
-import { Bell } from '@signozhq/icons';
+import { Flame } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { useCreateAlertFromPanel } from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel';
@@ -38,7 +38,7 @@ function ConfigActions({
 				<div className={styles.list}>
 					<ConfigActionRow
 						testId="panel-editor-v2-create-alert"
-						icon={<Bell size={14} />}
+						icon={<Flame size={14} />}
 						label="Create alert"
 						onClick={(): void => createAlert(panel, panelId)}
 					/>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.module.scss

@@ -1,3 +1,5 @@
+@use '../../../../../styles/scrollbar' as *;
+
 .config {
 	display: flex;
 	flex-direction: column;
@@ -6,33 +8,24 @@
 	background-color: var(--l1-background);
 	overflow-y: auto;
 	overflow-x: hidden;
+	padding-bottom: 44px;
 
-	//TODO: replace this with custom-scrollbar mixin
-	// Thin, unobtrusive scrollbar (replaces the chunky native bar).
-	$thumb: color-mix(in srgb, var(--bg-vanilla-100) 16%, transparent);
-
-	scrollbar-width: thin;
-	scrollbar-color: $thumb transparent;
-
-	&::-webkit-scrollbar {
-		width: 8px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: $thumb;
-		border-radius: 999px;
-		border: 2px solid transparent;
-		background-clip: padding-box;
-	}
+	@include custom-scrollbar;
 }
 
 .heading {
-	margin-bottom: 18px;
-	padding: 16px 16px 0 16px;
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.marker {
+	display: inline-block;
+	width: 8px;
+	height: 4px;
+	border-radius: 20px;
+	background-color: var(--primary);
 }
 
 .title {
@@ -49,11 +42,10 @@
 
 .eyebrow {
 	display: block;
-	margin: 0 2px 10px;
 	font-size: 11px;
 	font-weight: 600;
+	padding: 16px;
 	letter-spacing: 0.06em;
-	text-transform: uppercase;
 	color: var(--l1-foreground);
 }
 
@@ -61,7 +53,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	padding: 0 16px;
+	padding: 16px;
 }
 
 .field {
@@ -71,20 +63,19 @@
 }
 
 .divider {
+	// flex-shrink:0 keeps the 1px line from collapsing to 0 once the pane
+	// content overflows and the flex column starts shrinking its children.
+	flex-shrink: 0;
 	height: 1px;
-	background: var(--l2-border);
-	margin: 18px 0;
-}
-
-.sectionsContainer {
-	padding: 0 16px;
+	background: var(--l1-border);
 }
 
 .sections {
 	display: flex;
 	flex-direction: column;
 
-	& > * + * {
-		border-top: 1px solid var(--l2-border);
+	& > * {
+		padding: 0 16px;
+		border-top: 1px solid var(--l1-border);
 	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -77,8 +77,10 @@ function ConfigPane({
 	return (
 		<div className={styles.config}>
 			<header className={styles.heading}>
-				<Typography.Text>Panel settings</Typography.Text>
+				<span className={styles.marker} />
+				<Typography.Text>Panel Details</Typography.Text>
 			</header>
+			<div className={styles.divider} />
 
 			<div className={styles.group}>
 				<div className={styles.field}>
@@ -108,7 +110,7 @@ function ConfigPane({
 				<>
 					<div className={styles.divider} />
 					<div className={styles.sectionsContainer}>
-						<span className={styles.eyebrow}>Display</span>
+						<span className={styles.eyebrow}>DISPLAY OPTIONS</span>
 						<div className={styles.sections}>
 							{sections.map((config) => (
 								<SectionSlot

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionHeaderQuickAdd.tsx

@@ -0,0 +1,39 @@
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+
+interface SectionHeaderQuickAddConfig {
+	label: string;
+	testId: string;
+}
+
+interface SectionHeaderQuickAddProps {
+	action: SectionHeaderQuickAddConfig;
+	/** Expands the section and runs the editor's registered add handler. */
+	onClick: () => void;
+}
+
+/** Quick-add control rendered in a configuration section's header, beside the chevron. */
+function SectionHeaderQuickAdd({
+	action,
+	onClick,
+}: SectionHeaderQuickAddProps): JSX.Element {
+	return (
+		<TooltipSimple title="Quick Add" side="top" arrow>
+			<Button
+				type="button"
+				variant="ghost"
+				color="secondary"
+				size="icon"
+				aria-label={action.label}
+				// Not `testId`: TooltipTrigger's Slot merge overwrites it with undefined.
+				data-testid={action.testId}
+				onClick={onClick}
+			>
+				<Plus size={15} />
+			</Button>
+		</TooltipSimple>
+	);
+}
+
+export default SectionHeaderQuickAdd;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode, useCallback, useRef, useState } from 'react';
 import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	type PanelFormattingSlice,
@@ -9,19 +10,41 @@ import {
 import type { SectionEditorContext } from '../sectionContext';
 import { resolveSectionEditor } from '../sectionRegistry';
 import SettingsSection from '../SettingsSection/SettingsSection';
+import SectionHeaderQuickAdd from './SectionHeaderQuickAdd';
 
-// `yAxisUnit` is derived from the spec below, not forwarded, so it's omitted.
 type SectionSlotProps = {
 	config: SectionConfig;
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-} & Omit<SectionEditorContext, 'yAxisUnit'>;
+} & Omit<SectionEditorContext, 'yAxisUnit' | 'registerHeaderAction'>;
+
+// Per-section header content; `trigger` expands the section and runs the editor's handler.
+const SECTION_HEADER_SLOT: Partial<
+	Record<SectionKind, (trigger: () => void) => ReactNode>
+> = {
+	[SectionKind.Thresholds]: (trigger): ReactNode => (
+		<SectionHeaderQuickAdd
+			action={{
+				label: 'Add Threshold',
+				testId: 'panel-editor-v2-add-threshold-header',
+			}}
+			onClick={trigger}
+		/>
+	),
+	[SectionKind.ContextLinks]: (trigger): ReactNode => (
+		<SectionHeaderQuickAdd
+			action={{
+				label: 'Add Context Link',
+				testId: 'panel-editor-v2-add-link-header',
+			}}
+			onClick={trigger}
+		/>
+	),
+};
 
 /**
  * Renders one configuration section: its collapsible wrapper plus the registered editor
- * for `config.kind`, wired through the registry's spec lens. Renders nothing when the
- * kind has no editor yet (sections roll out incrementally), so a kind can declare a
- * section before its editor exists.
+ * for `config.kind`. Renders nothing when the kind has no editor yet.
  */
 function SectionSlot({
 	config,
@@ -36,13 +59,43 @@ function SectionSlot({
 	stepInterval,
 	metricUnit,
 }: SectionSlotProps): JSX.Element | null {
-	// A kind can hide a section based on current spec state (e.g. Histogram legend once
-	// queries are merged) — skip it before resolving the editor.
+	const editor = resolveSectionEditor(config.kind);
+	// Controlled so the header slot can expand on click; list sections open when populated.
+	const [open, setOpen] = useState(() => {
+		if (config.kind === SectionKind.Visualization) {
+			return true;
+		}
+		const value = editor?.get(spec);
+		return Array.isArray(value) && value.length > 0;
+	});
+	// The editor mounts only while open, so a collapsed-click defers the handler until it registers.
+	const actionHandlerRef = useRef<(() => void) | null>(null);
+	const pendingActionRef = useRef(false);
+
+	const registerHeaderAction = useCallback(
+		(handler: (() => void) | null): void => {
+			actionHandlerRef.current = handler;
+			if (handler && pendingActionRef.current) {
+				pendingActionRef.current = false;
+				handler();
+			}
+		},
+		[],
+	);
+
+	const triggerHeaderAction = useCallback((): void => {
+		setOpen(true);
+		if (actionHandlerRef.current) {
+			actionHandlerRef.current();
+		} else {
+			pendingActionRef.current = true;
+		}
+	}, []);
+
 	if (config.isHidden?.(spec)) {
 		return null;
 	}
 
-	const editor = resolveSectionEditor(config.kind);
 	if (!editor) {
 		return null;
 	}
@@ -51,17 +104,19 @@ function SectionSlot({
 	const { Component, get, update } = editor;
 	// Atomic sections carry no `controls`; controlled ones do.
 	const controls = 'controls' in config ? config.controls : undefined;
-	// The panel's formatting unit, forwarded to editors that scope to it (thresholds
-	// restrict their unit picker to this unit's category, as in V1).
+	// Forwarded to editors that scope to the panel's unit (e.g. the thresholds unit picker).
 	const yAxisUnit = (spec.plugin.spec as { formatting?: PanelFormattingSlice })
 		.formatting?.unit;
 
+	const headerSlot = SECTION_HEADER_SLOT[config.kind]?.(triggerHeaderAction);
+
 	return (
 		<SettingsSection
 			title={title}
 			icon={<Icon size={15} />}
-			// Open Visualization by default so the type switcher is visible.
-			defaultOpen={config.kind === SectionKind.Visualization}
+			open={open}
+			onOpenChange={setOpen}
+			headerSlot={headerSlot}
 		>
 			<Component
 				value={get(spec)}
@@ -76,6 +131,7 @@ function SectionSlot({
 				queryType={queryType}
 				stepInterval={stepInterval}
 				metricUnit={metricUnit}
+				registerHeaderAction={registerHeaderAction}
 			/>
 		</SettingsSection>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/__tests__/SectionSlot.test.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	type SectionConfig,
+	SectionKind,
+	ThresholdVariant,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import SectionSlot from '../SectionSlot';
+
+const THRESHOLDS_CONFIG: SectionConfig = {
+	kind: SectionKind.Thresholds,
+	controls: { variant: ThresholdVariant.LABEL },
+};
+
+function makeSpec(thresholds: unknown[] = []): DashboardtypesPanelSpecDTO {
+	return {
+		display: { name: 'CPU' },
+		plugin: { kind: 'signoz/TimeSeriesPanel', spec: { thresholds } },
+		queries: [],
+	} as unknown as DashboardtypesPanelSpecDTO;
+}
+
+// Stateful harness so onChange feeds back into the spec (as ConfigPane owns it).
+function Harness({ initial = [] }: { initial?: unknown[] } = {}): JSX.Element {
+	const [spec, setSpec] = useState<DashboardtypesPanelSpecDTO>(
+		makeSpec(initial),
+	);
+	return (
+		<SectionSlot config={THRESHOLDS_CONFIG} spec={spec} onChangeSpec={setSpec} />
+	);
+}
+
+describe('SectionSlot header action', () => {
+	it('shows the header "+" while the section is collapsed', () => {
+		render(<Harness />);
+
+		// Collapsed: body (inline add) hidden, but the header quick-add is available.
+		expect(
+			screen.queryByTestId('panel-editor-v2-add-threshold'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-add-threshold-header'),
+		).toBeInTheDocument();
+	});
+
+	it('starts expanded when the section already has items', () => {
+		render(
+			<Harness initial={[{ value: 80, color: '#F5B225', label: 'High' }]} />,
+		);
+
+		// Body is shown on mount (no header click needed) because content exists.
+		expect(
+			screen.getByTestId('panel-editor-v2-add-threshold'),
+		).toBeInTheDocument();
+		expect(screen.getByText('High')).toBeInTheDocument();
+	});
+
+	it('expands the section and adds a threshold when the header "+" is clicked', async () => {
+		const user = userEvent.setup();
+		render(<Harness />);
+
+		await user.click(screen.getByTestId('panel-editor-v2-add-threshold-header'));
+
+		// Expanded, with a fresh row opened in edit mode.
+		expect(
+			screen.getByTestId('panel-editor-v2-add-threshold'),
+		).toBeInTheDocument();
+		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SettingsSection/SettingsSection.module.scss

@@ -1,10 +1,19 @@
 .header {
 	display: flex;
 	align-items: center;
-	gap: 11px;
+	gap: 6px;
 	width: 100%;
 	height: 44px;
-	padding: 0 4px;
+}
+
+// Disclosure control (icon tile + title); fills the row so the action slot and chevron sit right.
+.toggle {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	gap: 11px;
+	min-width: 0;
+	padding: 0 !important;
 	border: none;
 	background: transparent;
 	cursor: pointer;
@@ -37,8 +46,6 @@
 }
 
 .chevron {
-	flex: none;
-	color: var(--l2-border);
 	transition: transform 0.15s ease;
 
 	&.open {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SettingsSection/SettingsSection.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
@@ -9,45 +10,74 @@ interface SettingsSectionProps {
 	title: string;
 	icon?: ReactNode;
 	defaultOpen?: boolean;
+	/** Controlled open state; when set, the section defers to `onOpenChange`. */
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	/** Rendered between the title and the chevron. */
+	headerSlot?: ReactNode;
 	children: ReactNode;
 }
 
 /**
- * Collapsible container for one configuration section in the V2 panel editor's
- * ConfigPane. Header shows an icon tile (accented when expanded), the title, and a
- * rotating chevron; sections are separated by hairline dividers (no surrounding boxes),
- * matching the Configure-panel design.
+ * Collapsible container for one configuration section in the V2 panel editor's ConfigPane.
  */
 function SettingsSection({
 	title,
 	icon,
 	defaultOpen = false,
+	open,
+	onOpenChange,
+	headerSlot,
 	children,
 }: SettingsSectionProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const isControlled = open !== undefined;
+	const isOpen = isControlled ? open : internalOpen;
+
+	const toggle = (): void => {
+		const next = !isOpen;
+		if (!isControlled) {
+			setInternalOpen(next);
+		}
+		onOpenChange?.(next);
+	};
 
 	const serializedTitle = title.toLowerCase().replace(/\s+/g, '-');
 
 	return (
 		<section className={styles.section}>
-			<button
-				type="button"
-				className={styles.header}
-				aria-expanded={isOpen}
-				data-testid={`config-section-${serializedTitle}`}
-				onClick={(): void => setIsOpen((prev) => !prev)}
-			>
-				{icon && (
-					<span className={cx(styles.iconTile, { [styles.iconTileOpen]: isOpen })}>
-						{icon}
-					</span>
-				)}
-				<Typography.Text className={styles.title}>{title}</Typography.Text>
-				<ChevronDown
-					size={15}
-					className={cx(styles.chevron, { [styles.open]: isOpen })}
+			<div className={styles.header}>
+				<button
+					type="button"
+					className={styles.toggle}
+					aria-expanded={isOpen}
+					data-testid={`config-section-${serializedTitle}`}
+					onClick={toggle}
+				>
+					{icon && (
+						<span className={cx(styles.iconTile, { [styles.iconTileOpen]: isOpen })}>
+							{icon}
+						</span>
+					)}
+					<Typography.Text className={styles.title}>{title}</Typography.Text>
+				</button>
+				{headerSlot}
+				<Button
+					type="button"
+					variant="ghost"
+					color="secondary"
+					size="icon"
+					prefix={
+						<ChevronDown
+							size={15}
+							className={cx(styles.chevron, { [styles.open]: isOpen })}
+						/>
+					}
+					aria-label={isOpen ? `Collapse ${title}` : `Expand ${title}`}
+					tabIndex={-1}
+					onClick={toggle}
 				/>
-			</button>
+			</div>
 			{isOpen && <div className={styles.body}>{children}</div>}
 		</section>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SettingsSection/__tests__/SettingsSection.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import SettingsSection from '../SettingsSection';
+
+describe('SettingsSection', () => {
+	it('renders an arbitrary headerSlot node beside the header', () => {
+		render(
+			<SettingsSection
+				title="Thresholds"
+				headerSlot={
+					<button type="button" aria-label="custom action" data-testid="my-action" />
+				}
+			>
+				<div>body</div>
+			</SettingsSection>,
+		);
+
+		expect(screen.getByTestId('my-action')).toBeInTheDocument();
+	});
+
+	it('is collapsed by default: hides the body until the header is clicked', async () => {
+		const user = userEvent.setup();
+		render(
+			<SettingsSection title="Thresholds">
+				<div data-testid="body">body</div>
+			</SettingsSection>,
+		);
+
+		expect(screen.queryByTestId('body')).not.toBeInTheDocument();
+
+		await user.click(screen.getByTestId('config-section-thresholds'));
+		expect(screen.getByTestId('body')).toBeInTheDocument();
+	});
+
+	it('defers to onOpenChange when open is controlled', async () => {
+		const user = userEvent.setup();
+		const onOpenChange = jest.fn();
+		const { rerender } = render(
+			<SettingsSection title="Thresholds" open={false} onOpenChange={onOpenChange}>
+				<div data-testid="body">body</div>
+			</SettingsSection>,
+		);
+
+		expect(screen.queryByTestId('body')).not.toBeInTheDocument();
+		await user.click(screen.getByTestId('config-section-thresholds'));
+		expect(onOpenChange).toHaveBeenCalledWith(true);
+
+		rerender(
+			<SettingsSection title="Thresholds" open onOpenChange={onOpenChange}>
+				<div data-testid="body">body</div>
+			</SettingsSection>,
+		);
+		expect(screen.getByTestId('body')).toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/__tests__/ConfigPane.test.tsx

@@ -1,20 +1,13 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { render, screen, userEvent } from 'tests/test-utils';
 import { EQueryType } from 'types/common/dashboard';
 
 import ConfigPane from '../ConfigPane';
 
-// The Actions group's hook navigates/logs; stub it so ConfigPane renders without a router.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useCreateAlertFromPanel',
-	() => ({
-		useCreateAlertFromPanel: (): jest.Mock => jest.fn(),
-	}),
-);
-
 function spec(unit?: string): DashboardtypesPanelSpecDTO {
 	return {
 		display: { name: 'CPU', description: 'usage' },
@@ -40,7 +33,23 @@ function renderConfigPane(
 		panelId: 'panel-1',
 		...overrides,
 	};
-	render(<ConfigPane {...props} />);
+
+	// Stateful so typed edits feed back into the spec, as the panel editor owns it.
+	function Harness(): JSX.Element {
+		const [currentSpec, setCurrentSpec] = useState(props.spec);
+		return (
+			<ConfigPane
+				{...props}
+				spec={currentSpec}
+				onChangeSpec={(next): void => {
+					props.onChangeSpec(next);
+					setCurrentSpec(next);
+				}}
+			/>
+		);
+	}
+
+	render(<Harness />);
 	return props;
 }
 
@@ -54,14 +63,15 @@ describe('ConfigPane', () => {
 		);
 	});
 
-	it('reports title edits through onChangeSpec (into spec.display)', () => {
+	it('reports title edits through onChangeSpec (into spec.display)', async () => {
+		const user = userEvent.setup();
 		const { onChangeSpec } = renderConfigPane();
 
-		fireEvent.change(screen.getByTestId('panel-editor-v2-title'), {
-			target: { value: 'Memory' },
-		});
+		const title = screen.getByTestId('panel-editor-v2-title');
+		await user.clear(title);
+		await user.type(title, 'Memory');
 
-		expect(onChangeSpec).toHaveBeenCalledWith(
+		expect(onChangeSpec).toHaveBeenLastCalledWith(
 			expect.objectContaining({
 				display: { name: 'Memory', description: 'usage' },
 			}),

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect.module.scss

@@ -1,6 +1,10 @@
 // Fill the section field so the select lines up with the other full-width controls.
 .select {
 	width: 100%;
+
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
+	}
 }
 
 .item {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSwitch/ConfigSwitch.module.scss

@@ -5,7 +5,7 @@
 	gap: 12px;
 	padding: 12px 14px;
 	border: 1px solid var(--l2-border);
-	border-radius: 6px;
+	border-radius: 2px;
 	background: var(--l2-background-60);
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColors.module.scss

@@ -1,3 +1,5 @@
+@use '../../../../../../../styles/scrollbar' as *;
+
 .container {
 	display: flex;
 	flex-direction: column;
@@ -5,6 +7,7 @@
 }
 
 .list {
+	@include custom-scrollbar;
 	width: 100%;
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -21,4 +21,6 @@ export interface SectionEditorContext {
 	stepInterval?: number;
 	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
 	metricUnit?: string;
+	/** An editor registers the handler its header action (e.g. a quick-add "+") triggers; `null` to clear. */
+	registerHeaderAction?: (handler: (() => void) | null) => void;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/ContextLinksSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import type { DashboardtypesLinkDTO } from 'api/generated/services/sigNoz.schemas';
@@ -7,6 +7,7 @@ import type {
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
+import type { SectionEditorContext } from '../../sectionContext';
 import ContextLinkDialog from './ContextLinkDialog';
 import ContextLinkListItem from './ContextLinkListItem';
 import { useContextLinkVariables } from './useContextLinkVariables';
@@ -21,7 +22,9 @@ import styles from './ContextLinksSection.module.scss';
 function ContextLinksSection({
 	value,
 	onChange,
-}: SectionEditorProps<SectionKind.ContextLinks>): JSX.Element {
+	registerHeaderAction,
+}: SectionEditorProps<SectionKind.ContextLinks> &
+	Pick<SectionEditorContext, 'registerHeaderAction'>): JSX.Element {
 	const links = value ?? [];
 	const variables = useContextLinkVariables();
 
@@ -31,6 +34,16 @@ function ContextLinksSection({
 		index: null,
 	});
 
+	const openAddDialog = useCallback(
+		(): void => setDialog({ open: true, index: null }),
+		[],
+	);
+
+	useEffect(() => {
+		registerHeaderAction?.(openAddDialog);
+		return (): void => registerHeaderAction?.(null);
+	}, [registerHeaderAction, openAddDialog]);
+
 	const removeAt = (index: number): void =>
 		onChange(links.filter((_, i) => i !== index));
 
@@ -66,7 +79,7 @@ function ContextLinksSection({
 				color="secondary"
 				prefix={<Plus size={14} />}
 				data-testid="panel-editor-v2-add-link"
-				onClick={(): void => setDialog({ open: true, index: null })}
+				onClick={openAddDialog}
 			>
 				Add Context Link
 			</Button>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/FormattingSection.module.scss

@@ -8,6 +8,9 @@
 	:global(.ant-select) {
 		width: 100%;
 	}
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
+	}
 }
 
 // Stacked per-column unit pickers; each column keeps the standard field layout.

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.module.scss

@@ -96,6 +96,9 @@
 	:global(.ant-select) {
 		width: 100%;
 	}
+	:global(.ant-select-selector) {
+		border-color: var(--l2-border) !important;
+	}
 }
 
 .invalidUnit {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -63,7 +63,10 @@ type ThresholdsSectionProps = {
 	/** `variant` picks the row editor + element shape; defaults to `label`. */
 	controls?: { variant?: ThresholdVariant };
 	onChange: (next: AnyThreshold[]) => void;
-} & Pick<SectionEditorContext, 'yAxisUnit' | 'tableColumns'>;
+} & Pick<
+	SectionEditorContext,
+	'yAxisUnit' | 'tableColumns' | 'registerHeaderAction'
+>;
 
 /**
  * Edits the `thresholds` slice for every panel kind. All variants share the same
@@ -77,6 +80,7 @@ function ThresholdsSection({
 	onChange,
 	yAxisUnit,
 	tableColumns = [],
+	registerHeaderAction,
 }: ThresholdsSectionProps): JSX.Element {
 	const variant = controls?.variant ?? ThresholdVariant.LABEL;
 	const thresholds = value ?? [];
@@ -93,12 +97,17 @@ function ThresholdsSection({
 			onChange(thresholds.map((t, i) => (i === index ? next : t)));
 		};
 
-	const addThreshold = (): void => {
-		const nextIndex = thresholds.length;
-		onChange([...thresholds, defaultThreshold(variant, tableColumns)]);
-		setEditingIndex(nextIndex);
-		setUnsavedIndex(nextIndex);
-	};
+	const addThreshold = useCallback((): void => {
+		const current = value ?? [];
+		onChange([...current, defaultThreshold(variant, tableColumns)]);
+		setEditingIndex(current.length);
+		setUnsavedIndex(current.length);
+	}, [value, onChange, variant, tableColumns]);
+
+	useEffect(() => {
+		registerHeaderAction?.(addThreshold);
+		return (): void => registerHeaderAction?.(null);
+	}, [registerHeaderAction, addThreshold]);
 
 	const beginEdit = (index: number): void => {
 		editSnapshot.current = thresholds[index] ?? null;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/Header/Header.tsx

@@ -1,10 +1,12 @@
 import { useCallback } from 'react';
 import { SolidAlertTriangle, X } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { useConfirmableAction } from 'hooks/useConfirmableAction';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
 
@@ -12,6 +14,7 @@ import DisabledControlTooltip from '../../components/DisabledControlTooltip/Disa
 import styles from './Header.module.scss';
 
 interface HeaderProps {
+	/** Unsaved edits exist — shows the "Unsaved Changes" badge and gates the discard confirmation on close (not the Save button). */
 	isDirty: boolean;
 	isSaving: boolean;
 	showSwitchToView?: boolean;
@@ -65,8 +68,18 @@ function Header({
 				/>
 				<Divider type="vertical" />
 				<Typography.Text>Configure panel</Typography.Text>
+				{isDirty && (
+					<Badge color="warning" data-testid="panel-editor-v2-unsaved-badge">
+						Unsaved Changes
+					</Badge>
+				)}
 			</div>
 			<div className={styles.actions}>
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare={false}
+					enableFeedback={false}
+				/>
 				{showSwitchToView && (
 					<Button
 						variant="outlined"
@@ -82,7 +95,7 @@ function Header({
 						variant="solid"
 						color="primary"
 						data-testid="panel-editor-v2-save"
-						disabled={readOnly || !isDirty || isSaving}
+						disabled={readOnly || isSaving}
 						loading={!readOnly && isSaving}
 						onClick={readOnly ? undefined : onSave}
 					>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/Header/__tests__/Header.test.tsx

@@ -0,0 +1,103 @@
+import type { ComponentProps } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+
+import Header from '../Header';
+
+jest.mock('hooks/useIsAIAssistantEnabled', () => ({
+	useIsAIAssistantEnabled: jest.fn(),
+}));
+
+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: (): unknown => ({
+		isCloudUser: true,
+		isEnterpriseSelfHostedUser: false,
+	}),
+}));
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockUseIsAIAssistantEnabled = useIsAIAssistantEnabled as jest.Mock;
+
+function renderHeader(
+	props: Partial<ComponentProps<typeof Header>> = {},
+): void {
+	// AppLayout supplies the TooltipProvider in the app; the header is rendered bare here.
+	render(
+		<MemoryRouter>
+			<TooltipProvider>
+				<Header
+					isDirty={false}
+					isSaving={false}
+					onSave={jest.fn()}
+					onClose={jest.fn()}
+					{...props}
+				/>
+			</TooltipProvider>
+		</MemoryRouter>,
+	);
+}
+
+describe('PanelEditor Header', () => {
+	afterEach(() => {
+		mockUseIsAIAssistantEnabled.mockReset();
+	});
+
+	// The editor is a full page, so the side nav's Noz entry point is gone while it is
+	// open — the header has to offer it instead.
+	it('offers Noz alongside the editor actions', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(true);
+
+		renderHeader();
+
+		expect(screen.getByRole('button', { name: 'Open Noz' })).toBeInTheDocument();
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeInTheDocument();
+		expect(screen.getByTestId('panel-editor-v2-close')).toBeInTheDocument();
+	});
+
+	it('omits Noz when the AI assistant is disabled', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader();
+
+		expect(
+			screen.queryByRole('button', { name: 'Open Noz' }),
+		).not.toBeInTheDocument();
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeInTheDocument();
+	});
+
+	it('keeps Save enabled even when there are no unsaved edits', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: false });
+
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeEnabled();
+	});
+
+	it('disables Save only while read-only or saving', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: true, readOnly: true, readOnlyReason: 'Locked' });
+
+		expect(screen.getByTestId('panel-editor-v2-save')).toBeDisabled();
+	});
+
+	it('shows the Unsaved Changes badge only when there are unsaved edits', () => {
+		mockUseIsAIAssistantEnabled.mockReturnValue(false);
+
+		renderHeader({ isDirty: false });
+		expect(
+			screen.queryByTestId('panel-editor-v2-unsaved-badge'),
+		).not.toBeInTheDocument();
+
+		renderHeader({ isDirty: true });
+		expect(
+			screen.getByTestId('panel-editor-v2-unsaved-badge'),
+		).toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/PanelEditorContainer.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
@@ -100,6 +101,12 @@ jest.mock('@signozhq/ui/resizable', () => ({
 jest.mock('@signozhq/ui/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
+const mockShowErrorModal = jest.fn();
+jest.mock('providers/ErrorModalProvider', () => ({
+	useErrorModal: (): { showErrorModal: jest.Mock } => ({
+		showErrorModal: mockShowErrorModal,
+	}),
+}));
 
 // Children mocked to capture props (and expose a Save trigger / footer slot).
 const mockHeaderProps = jest.fn();
@@ -174,11 +181,13 @@ const baseProps = {
 function setup(
 	panel: DashboardtypesPanelDTO,
 	overrides?: Partial<React.ComponentProps<typeof PanelEditorContainer>>,
-	draftOverrides?: { isSpecDirty?: boolean },
+	draftOverrides?: { isSpecDirty?: boolean; draft?: DashboardtypesPanelDTO },
 ): void {
+	// The live draft can diverge from the seed `panel`; default to the seed.
+	const draftPanel = draftOverrides?.draft ?? panel;
 	mockUseDraft.mockReturnValue({
-		draft: panel,
-		spec: panel.spec,
+		draft: draftPanel,
+		spec: draftPanel.spec,
 		setSpec: mockSetSpec,
 		isSpecDirty: draftOverrides?.isSpecDirty ?? false,
 	});
@@ -259,19 +268,36 @@ describe('PanelEditorContainer composition', () => {
 		);
 	});
 
-	it('keeps a query-less new panel unsaveable but still serializes its seed query', () => {
+	it('keeps a query-less new panel clean but still serializes its seed query', () => {
 		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
 
 		expect(mockUseQuerySync).toHaveBeenCalledWith(
 			expect.objectContaining({ alwaysSerializeQuery: true }),
 		);
-		// No query and no edits yet → nothing to save, so Save stays disabled.
+		// No query and no edits yet → not dirty, so closing won't prompt to discard.
 		expect(mockHeaderProps).toHaveBeenCalledWith(
 			expect.objectContaining({ isDirty: false }),
 		);
 	});
 
-	it('marks a new panel that already has a query saveable (e.g. list auto-runs one)', () => {
+	it('keeps a query-less new panel clean after the staged-query sync seeds its draft (regression)', () => {
+		// Staged-query sync populated the draft with the seed; dirty must read the seed
+		// `panel` (query-less), not the draft, else an untouched new panel reads dirty.
+		const committedDraft = makePanel('signoz/TimeSeriesPanel', [
+			{ spec: { plugin: { kind: 'signoz/CompositeQuery', spec: {} } } },
+		]);
+		setup(
+			makePanel('signoz/TimeSeriesPanel'),
+			{ isNew: true },
+			{ draft: committedDraft },
+		);
+
+		expect(mockHeaderProps).toHaveBeenCalledWith(
+			expect.objectContaining({ isDirty: false }),
+		);
+	});
+
+	it('marks a new panel that already has a query dirty (e.g. list auto-runs one)', () => {
 		const seededQuery = {
 			spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { signal: 'logs' } } },
 		};
@@ -308,6 +334,24 @@ describe('PanelEditorContainer composition', () => {
 		expect(mockSave).toHaveBeenCalledWith(panel.spec);
 	});
 
+	it('surfaces a save failure through the error modal', async () => {
+		// The raw thrown value flows straight to the modal, which normalizes it to an
+		// APIError itself (that normalization is covered by ErrorModalProvider's tests).
+		const failure = {
+			response: {
+				status: 400,
+				data: { error: { code: 'INVALID', message: 'Panel name already exists' } },
+			},
+		};
+		mockSave.mockRejectedValueOnce(failure);
+		setup(makePanel('signoz/TimeSeriesPanel'));
+
+		await userEvent.click(screen.getByTestId('editor-save'));
+
+		await waitFor(() => expect(mockShowErrorModal).toHaveBeenCalledWith(failure));
+		expect(toast.error).not.toHaveBeenCalled();
+	});
+
 	it('marks the saved panel to be scrolled into view on the dashboard', async () => {
 		setup(makePanel('signoz/TimeSeriesPanel'));
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelEditorQuerySync.integration.test.tsx

@@ -2,6 +2,7 @@ import { renderHook, waitFor } from '@testing-library/react';
 import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesQueryDTO,
+	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -9,7 +10,7 @@ import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { AllTheProviders } from 'tests/test-utils';
 
-import { toPerses } from '../../../queryV5/persesQueryAdapters';
+import { fromPerses, toPerses } from '../../../queryV5/persesQueryAdapters';
 import { usePanelEditorQuerySync } from '../usePanelEditorQuerySync';
 
 // Exercises the REAL query builder provider (not mocks) so the dirty check is
@@ -45,6 +46,28 @@ function makePanel(queries: DashboardtypesQueryDTO[]): DashboardtypesPanelDTO {
 	} as unknown as DashboardtypesPanelDTO;
 }
 
+/** Providers whose URL already carries `query` as the compositeQuery param (a mid-edit refresh). */
+function makeUrlWrapper(
+	query: Query,
+): ({ children }: { children: React.ReactNode }) => JSX.Element {
+	const params = new URLSearchParams();
+	params.set(
+		QueryParams.compositeQuery,
+		encodeURIComponent(JSON.stringify(query)),
+	);
+	return function UrlWrapper({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element {
+		return (
+			<AllTheProviders initialRoute={`/?${params.toString()}`}>
+				{children}
+			</AllTheProviders>
+		);
+	};
+}
+
 describe('usePanelEditorQuerySync (real query builder)', () => {
 	it('an untouched existing panel is NOT query-dirty on mount', async () => {
 		const saved = makeSavedQueries();
@@ -67,6 +90,76 @@ describe('usePanelEditorQuerySync (real query builder)', () => {
 		expect(result.current.isQueryDirty).toBe(false);
 	});
 
+	it.each([
+		[DataSource.METRICS, PANEL_TYPES.TIME_SERIES],
+		[DataSource.LOGS, PANEL_TYPES.TIME_SERIES],
+		[DataSource.TRACES, PANEL_TYPES.TIME_SERIES],
+		[DataSource.LOGS, PANEL_TYPES.LIST],
+	])(
+		'a NEW %s panel (%s, no savedQueries) is NOT query-dirty on mount',
+		async (ds, pt) => {
+			const { result } = renderHook(
+				() =>
+					usePanelEditorQuerySync({
+						draft: makePanel([]),
+						panelType: pt,
+						setSpec: jest.fn(),
+						refetch: jest.fn(),
+						alwaysSerializeQuery: true,
+						signal: ds as unknown as TelemetrytypesSignalDTO,
+						// savedQueries omitted — new panel.
+					}),
+				{ wrapper: AllTheProviders },
+			);
+
+			await waitFor(() => expect(result.current.isQueryDirty).toBe(false));
+			expect(result.current.isQueryDirty).toBe(false);
+		},
+	);
+
+	it('a NEW panel stays query-dirty after Stage & Run commits the edited query into the draft', async () => {
+		// Repro of the P0: new panel → edit → Run commits the query into the draft; the
+		// dirty baseline must not drift onto it, or Save re-disables.
+		const editedInUrl: Query = {
+			...initialQueriesMap[DataSource.METRICS],
+			id: 'edited-new-panel',
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [
+					{
+						...initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+						legend: 'edited-legend',
+					},
+				],
+			},
+		};
+		const committed = toPerses(editedInUrl, panelType);
+
+		const { result, rerender } = renderHook(
+			({ draftQueries }: { draftQueries: DashboardtypesQueryDTO[] }) =>
+				usePanelEditorQuerySync({
+					draft: makePanel(draftQueries),
+					panelType,
+					setSpec: jest.fn(),
+					refetch: jest.fn(),
+					alwaysSerializeQuery: true,
+					signal: DataSource.METRICS as unknown as TelemetrytypesSignalDTO,
+					// savedQueries omitted — new panel.
+				}),
+			{
+				wrapper: makeUrlWrapper(editedInUrl),
+				initialProps: { draftQueries: [] as DashboardtypesQueryDTO[] },
+			},
+		);
+
+		// The edited query (from the URL) diverges from the seeded default → dirty.
+		await waitFor(() => expect(result.current.isQueryDirty).toBe(true));
+
+		// Stage & Run commits the edited query into the draft → must stay dirty.
+		rerender({ draftQueries: committed });
+		expect(result.current.isQueryDirty).toBe(true);
+	});
+
 	it('an untouched panel with a minimal/older stored query is NOT dirty (drift fix)', async () => {
 		// An older saved query carries only a few fields; the builder re-emits many more
 		// (source, stepInterval, filter, spaceAggregation, …). Comparing raw would read
@@ -112,6 +205,80 @@ describe('usePanelEditorQuerySync (real query builder)', () => {
 		expect(result.current.isQueryDirty).toBe(false);
 	});
 
+	it('a saved panel with no `having` is NOT dirty on mount (builder seeds an empty having)', async () => {
+		// Reproduces the reported bug: a panel saved as a bare signoz/BuilderQuery that never
+		// carried a `having`. On editor open the builder hydrates from the URL and
+		// prepareQueryBuilderData seeds an empty `{ expression: '' }`, so a verbatim envelope
+		// compare flags the untouched panel as dirty. Seed via the URL (not resetQuery) so the
+		// hydration path that synthesizes the having actually runs.
+		const savedNoHaving: DashboardtypesQueryDTO[] = [
+			{
+				kind: 'time_series',
+				spec: {
+					name: 'A',
+					plugin: {
+						kind: 'signoz/BuilderQuery',
+						spec: {
+							name: 'A',
+							signal: 'metrics',
+							source: '',
+							aggregations: [
+								{
+									metricName: 'signoz_latency.bucket',
+									temporality: 'delta',
+									timeAggregation: '',
+									spaceAggregation: 'p99',
+								},
+							],
+							disabled: false,
+							filter: { expression: 'service.name IN $service_name' },
+							groupBy: [
+								{
+									name: 'service.name',
+									signal: '',
+									fieldContext: 'resource',
+									fieldDataType: '',
+								},
+							],
+							order: [
+								{
+									key: {
+										name: '__result',
+										signal: '',
+										fieldContext: '',
+										fieldDataType: '',
+									},
+									direction: 'desc',
+								},
+							],
+							limit: 100,
+							legend: '',
+						},
+					},
+				},
+			},
+		] as unknown as DashboardtypesQueryDTO[];
+
+		// The editor puts the (having-less) seed query into the URL; the provider then hydrates
+		// from it, which is where the empty having is added.
+		const seededInUrl = fromPerses(savedNoHaving, panelType);
+
+		const { result } = renderHook(
+			() =>
+				usePanelEditorQuerySync({
+					draft: makePanel(savedNoHaving),
+					panelType,
+					setSpec: jest.fn(),
+					refetch: jest.fn(),
+					savedQueries: savedNoHaving,
+				}),
+			{ wrapper: makeUrlWrapper(seededInUrl) },
+		);
+
+		await waitFor(() => expect(result.current.isQueryDirty).toBe(false));
+		expect(result.current.isQueryDirty).toBe(false);
+	});
+
 	it('retains an in-editor query edit carried in the URL across a refresh (and reads dirty)', async () => {
 		// Simulate a refresh mid-edit: the saved panel is unchanged, but the URL still
 		// carries the last-run (edited) query. The builder must hydrate from the URL —
@@ -130,23 +297,8 @@ describe('usePanelEditorQuerySync (real query builder)', () => {
 				],
 			},
 		};
-		const params = new URLSearchParams();
-		params.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(editedInUrl)),
-		);
 		const setSpec = jest.fn();
 
-		const wrapper = ({
-			children,
-		}: {
-			children: React.ReactNode;
-		}): JSX.Element => (
-			<AllTheProviders initialRoute={`/?${params.toString()}`}>
-				{children}
-			</AllTheProviders>
-		);
-
 		const { result } = renderHook(
 			() =>
 				usePanelEditorQuerySync({
@@ -157,7 +309,7 @@ describe('usePanelEditorQuerySync (real query builder)', () => {
 					refetch: jest.fn(),
 					savedQueries: saved,
 				}),
-			{ wrapper },
+			{ wrapper: makeUrlWrapper(editedInUrl) },
 		);
 
 		// The URL edit is retained → dirty, and it's synced into the draft so the

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorQuerySync.ts

@@ -79,6 +79,11 @@ export function usePanelEditorQuerySync({
 	// in-editor edit in the URL survives a refresh / browser Back-Forward.
 	useShareBuilderUrl({ defaultValue: seedQuery });
 
+	// Frozen seed for the new-panel dirty baseline: Stage & Run commits the live query
+	// into `draft.spec.queries`, so re-reading `seedQuery` would drift the baseline onto
+	// the run query and Save would re-disable right after a run.
+	const initialSeedRef = useRef(seedQuery);
+
 	// Commit the live query into the draft (what the preview fetches).
 	const commitQuery = useCallback(
 		(query: Query): boolean => {
@@ -152,16 +157,19 @@ export function usePanelEditorQuerySync({
 	// the V5 envelope level. Anchoring to `savedQueries` (not the builder-seed) keeps a
 	// handed-off / URL-restored edit reading as dirty; routing both sides through the same
 	// `fromPerses → toPerses` round-trip stops builder-added defaults (absent from an older
-	// stored query) reading an untouched panel as modified. New panel: fall back to seed.
+	// stored query) reading an untouched panel as modified. New panel: fall back to the
+	// frozen initial seed (see `initialSeedRef`).
 	const baselineEnvelopes = useMemo(
 		() =>
 			toQueryEnvelopes(
 				toPerses(
-					savedQueries ? fromPerses(savedQueries, panelType) : seedQuery,
+					savedQueries
+						? fromPerses(savedQueries, panelType)
+						: initialSeedRef.current,
 					panelType,
 				),
 			),
-		[savedQueries, seedQuery, panelType],
+		[savedQueries, panelType],
 	);
 	const isQueryDirty = useMemo(
 		() =>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -19,6 +19,7 @@ import {
 	SectionKind,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
 import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
@@ -159,11 +160,13 @@ function PanelEditorContainer({
 		return section?.controls;
 	}, [panelDefinition]);
 
-	// A new panel is savable once it has a query to run — List auto-seeds one; other
-	// kinds open query-less, so there's nothing to save until the user builds one.
+	// Unsaved-edits flag driving the discard confirmation on close (Save is always
+	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
+	// commits the seed into the draft on open, which would falsely dirty an untouched
+	// query-less new panel.
 	const isDirty = useMemo(
-		() => isSpecDirty || isQueryDirty || (isNew && draft.spec.queries.length > 0),
-		[isSpecDirty, isQueryDirty, isNew, draft.spec.queries.length],
+		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
+		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
 	);
 
 	const isListPanel = panelKind === 'signoz/ListPanel';
@@ -225,6 +228,7 @@ function PanelEditorContainer({
 	});
 
 	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+	const { showErrorModal } = useErrorModal();
 
 	const onSave = useCallback(async (): Promise<void> => {
 		if (!isEditable) {
@@ -235,12 +239,22 @@ function PanelEditorContainer({
 			const savedPanelId = await save(buildSaveSpec(draft.spec));
 			// Reveal the saved panel once the dashboard re-renders.
 			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved');
+			toast.success('Panel saved', {
+				position: 'top-center',
+			});
 			onSaved();
-		} catch {
-			toast.error('Failed to save panel');
+		} catch (err) {
+			showErrorModal(err);
 		}
-	}, [isEditable, save, buildSaveSpec, draft.spec, setScrollTargetId, onSaved]);
+	}, [
+		isEditable,
+		save,
+		buildSaveSpec,
+		draft.spec,
+		setScrollTargetId,
+		onSaved,
+		showErrorModal,
+	]);
 
 	// Leaving an existing panel's editor (without saving) still returns to it, so
 	// the dashboard lands on that panel rather than scrolled to the top. A new,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage.module.scss

@@ -1,16 +1,24 @@
+@use '../../../../../../styles/scrollbar' as *;
+
 // Centred, vertically-stacked panel state (no query / no data / error). Fills
-// the panel body below the header and centres its content both axes.
+// the panel body below the header and centres its content both axes. When the
+// panel is too small to fit icon + text + actions, it scrolls instead of
+// clipping the buttons at the edge (`safe center` keeps the top reachable).
 .message {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	justify-content: center;
+	justify-content: safe center;
 	gap: 6px;
 	padding: 16px;
 	text-align: center;
 	min-height: 0;
 	min-width: 0;
+	overflow: auto;
+
+	// Match the shared panel scrollbar (chart legend, table/list panels).
+	@include custom-scrollbar;
 }
 
 // Muted glyph in a soft tinted disc so the icon reads as decorative chrome
@@ -51,4 +59,5 @@
 	justify-content: center;
 	gap: 8px;
 	margin-top: 8px;
+	max-width: 100%;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/__tests__/prepareData.test.ts

@@ -33,7 +33,7 @@ describe('preparePieData', () => {
 		]);
 	});
 
-	it('keeps one slice per group row for a single value column', () => {
+	it('serialises a single group-by column as {key="value"} (V1 parity)', () => {
 		const table = tableWith(
 			[
 				{
@@ -53,8 +53,59 @@ describe('preparePieData', () => {
 		const slices = preparePieData(args([table]));
 
 		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['adservice', 100],
-			['cartservice', 200],
+			['{service.name="adservice"}', 100],
+			['{service.name="cartservice"}', 200],
+		]);
+	});
+
+	it('serialises a grouped metrics query as {direction="write"} (V1 parity)', () => {
+		const table = tableWith(
+			[
+				{
+					name: 'direction',
+					queryName: 'A',
+					isValueColumn: false,
+					id: 'direction',
+				},
+				{ name: 'A', queryName: 'A', isValueColumn: true, id: 'A' },
+			],
+			[
+				{ data: { direction: 'write', A: 3170000000 } },
+				{ data: { direction: 'read', A: 10000000 } },
+			],
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => s.label)).toStrictEqual([
+			'{direction="write"}',
+			'{direction="read"}',
+		]);
+	});
+
+	it('substitutes a legend format template with the group-by values', () => {
+		const table = tableWith(
+			[
+				{
+					name: 'service.name',
+					queryName: 'A',
+					isValueColumn: false,
+					id: 'service.name',
+				},
+				{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
+			],
+			[
+				{ data: { 'service.name': 'adservice', A: 100 } },
+				{ data: { 'service.name': 'cartservice', A: 200 } },
+			],
+			{ legend: 'service.name = {{service.name}}' },
+		);
+
+		const slices = preparePieData(args([table]));
+
+		expect(slices.map((s) => s.label)).toStrictEqual([
+			'service.name = adservice',
+			'service.name = cartservice',
 		]);
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -1,5 +1,6 @@
 import { themeColors } from 'constants/theme';
 import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
+import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
 
@@ -51,7 +52,8 @@ export function preparePieData({
 				if (hasMultipleValueColumns) {
 					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
 				} else {
-					label = groupLabel || table.legend || table.queryName || '';
+					// V1 parity: serialise group-by labels as `{key="value"}`.
+					label = getLabelName(labels, table.queryName || '', table.legend || '');
 				}
 
 				const color = customColors?.[label] ?? generateColor(label, colorMap);

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/__tests__/tableColumns.test.ts

@@ -0,0 +1,60 @@
+import type { PanelTableColumn } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import { formatTableCellText } from '../tableColumns';
+
+jest.mock('../../../utils/formatPanelValue', () => ({
+	formatPanelValue: (value: number, unit?: string): string =>
+		`${value}${unit ?? ''}`,
+}));
+
+const valueColumn: PanelTableColumn = {
+	name: 'p99',
+	queryName: 'A',
+	isValueColumn: true,
+	id: 'A',
+};
+
+const groupColumn: PanelTableColumn = {
+	name: 'service',
+	queryName: 'A',
+	isValueColumn: false,
+	id: 'service',
+};
+
+describe('formatTableCellText', () => {
+	it.each([null, undefined, ''])(
+		'renders empty value-column cells (%p) as n/a instead of 0',
+		(raw) => {
+			expect(formatTableCellText(valueColumn, raw, 'ms', undefined)).toBe('n/a');
+		},
+	);
+
+	it('keeps a real zero as a formatted 0, not n/a', () => {
+		expect(formatTableCellText(valueColumn, 0, 'ms', undefined)).toBe('0ms');
+	});
+
+	it('formats a numeric value column through unit + precision', () => {
+		expect(formatTableCellText(valueColumn, 1234, 'ms', undefined)).toBe(
+			'1234ms',
+		);
+	});
+
+	it('renders a non-numeric value cell as raw text', () => {
+		expect(formatTableCellText(valueColumn, 'n/a', 'ms', undefined)).toBe('n/a');
+	});
+
+	it.each([null, undefined, ''])(
+		'renders empty group-column cells (%p) as n/a',
+		(raw) => {
+			expect(formatTableCellText(groupColumn, raw, undefined, undefined)).toBe(
+				'n/a',
+			);
+		},
+	);
+
+	it('renders group-column labels as raw text', () => {
+		expect(
+			formatTableCellText(groupColumn, 'frontend', undefined, undefined),
+		).toBe('frontend');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/__tests__/tableCsv.test.ts

@@ -64,6 +64,19 @@ describe('buildTableCsvRows', () => {
 
 		expect(rows).toStrictEqual([{ service: 'api', p99: 'n/a' }]);
 	});
+
+	it('exports empty value cells as n/a rather than 0', () => {
+		const rows = buildTableCsvRows({
+			table: {
+				...table,
+				rows: [{ data: { service: 'api', A: null } }],
+			},
+			columnUnits: { A: 'ms' },
+			decimalPrecision: undefined,
+		});
+
+		expect(rows).toStrictEqual([{ service: 'api', p99: 'n/a' }]);
+	});
 });
 
 describe('getTableCsvRows', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/tableColumns.tsx

@@ -18,6 +18,17 @@ import styles from './TablePanel.module.scss';
 /** A prepared scalar-table row flattened for the antd Table, with the antd key. */
 export type TableRowData = Record<string, unknown> & { key: number };
 
+const NA_TEXT = 'n/a';
+
+// Empty cells (null/undefined/'') aren't numbers: `Number(null)` is 0, which
+// would render/colour/sort an empty cell as a real zero.
+function toCellNumber(raw: unknown): number {
+	if (raw == null || raw === '') {
+		return NaN;
+	}
+	return Number(raw);
+}
+
 /**
  * Groups table thresholds by the column they target, mapping each onto the
  * V2-native `PanelThreshold` consumed by `resolveActiveThreshold`. A column with
@@ -43,6 +54,9 @@ export function formatTableCellText(
 	unit: string | undefined,
 	decimalPrecision?: PrecisionOption,
 ): string {
+	if (raw == null || raw === '') {
+		return NA_TEXT;
+	}
 	if (!col.isValueColumn) {
 		return coerceToString(raw);
 	}
@@ -56,15 +70,17 @@ export function formatTableCellText(
 // Sort comparator: numeric when both cells parse as numbers (value columns and
 // numeric group keys), otherwise a locale string compare. Nullish sorts last.
 function compareCells(a: unknown, b: unknown): number {
-	const aNum = Number(a);
-	const bNum = Number(b);
+	const aNum = toCellNumber(a);
+	const bNum = toCellNumber(b);
 	if (Number.isFinite(aNum) && Number.isFinite(bNum)) {
 		return aNum - bNum;
 	}
-	if (a == null) {
-		return b == null ? 0 : 1;
+	const aEmpty = a == null || a === '';
+	const bEmpty = b == null || b === '';
+	if (aEmpty) {
+		return bEmpty ? 0 : 1;
 	}
-	if (b == null) {
+	if (bEmpty) {
 		return -1;
 	}
 	return coerceToString(a).localeCompare(coerceToString(b));
@@ -113,7 +129,7 @@ export function buildTableColumns({
 				compareCells(a[key], b[key]),
 			render: (raw: unknown): React.ReactNode => {
 				const text = formatTableCellText(col, raw, unit, decimalPrecision);
-				const num = Number(raw);
+				const num = toCellNumber(raw);
 				if (
 					!col.isValueColumn ||
 					colThresholds.length === 0 ||
@@ -131,7 +147,7 @@ export function buildTableColumns({
 				const cellProps: React.HTMLAttributes<HTMLElement> = {};
 
 				if (col.isValueColumn && colThresholds.length > 0) {
-					const num = Number(record[key]);
+					const num = toCellNumber(record[key]);
 					if (Number.isFinite(num)) {
 						const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
 						if (threshold?.format === 'background') {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts

@@ -14,15 +14,16 @@ import type {
 	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
+	Antenna,
 	BarChart,
 	Columns3,
 	Hash,
-	Layers,
-	LayoutDashboard,
-	Link,
+	Link2,
 	Palette,
-	Ruler,
-	SlidersHorizontal,
+	PencilRuler,
+	Scale3D,
+	Signpost,
+	Wallpaper,
 } from '@signozhq/icons';
 
 // Derived from an actual icon component so the type stays exact (size is a
@@ -157,14 +158,14 @@ export type SectionConfig =
 // Per-section title + sidebar icon. Pure data; the editor component + spec lens
 // live in the ConfigPane section registry.
 export const SECTION_METADATA = {
-	[SectionKind.Formatting]: { title: 'Formatting & Units', icon: Hash },
-	[SectionKind.Axes]: { title: 'Axes', icon: Ruler },
-	[SectionKind.Legend]: { title: 'Legend', icon: Layers },
+	[SectionKind.Formatting]: { title: 'Formatting & Units', icon: PencilRuler },
+	[SectionKind.Axes]: { title: 'Axes', icon: Scale3D },
+	[SectionKind.Legend]: { title: 'Legend', icon: Signpost },
 	[SectionKind.ChartAppearance]: { title: 'Chart appearance', icon: Palette },
-	[SectionKind.Visualization]: { title: 'Visualization', icon: LayoutDashboard },
+	[SectionKind.Visualization]: { title: 'Visualization', icon: Wallpaper },
 	[SectionKind.Buckets]: { title: 'Histogram / Buckets', icon: BarChart },
-	[SectionKind.Thresholds]: { title: 'Thresholds', icon: SlidersHorizontal },
-	[SectionKind.ContextLinks]: { title: 'Context Links', icon: Link },
+	[SectionKind.Thresholds]: { title: 'Thresholds', icon: Antenna },
+	[SectionKind.ContextLinks]: { title: 'Context Links', icon: Link2 },
 	[SectionKind.Columns]: { title: 'Columns', icon: Columns3 },
 } as const satisfies Record<SectionKind, SectionMetadata>;