refactor(querier): 3-layer per-signal query architecture

Split the five telemetry<signal> packages, which mixed three concerns, into
three per-signal layers with a cycle-free dependency direction:

- telemetryschema/<signal>telemetryschema — primitives (const + table
  selection, field_mapper, condition_builder, trace helpers); leaf layer.
- statementbuilder/<signal>statementbuilder — SQL generation, each with a
  cohesive New() that internalizes FieldMapper/ConditionBuilder/AggExprRewriter.
  telemetryresourcefilter moves here as statementbuilder/resourcefilter.
- telemetrymetadata — key/value resolution; NewTelemetryMetaStore collapses
  from 24 args to (settings, telemetrystore, flagger), sourcing table names
  from the schema constants.

Centralize query-stack assembly in signoz.go via newQueryStack: build a single
metadata store, the statementbuilder.Builders bundle, and the bucket cache
once, then inject them. This removes the duplicate metadata store that
signozquerier used to build, so signozquerier is now a thin
querier.New(*statementbuilder.Builders) adapter.

Also:
- statementbuilder.Config owns SkipResourceFingerprint (moved off
  querier.Config). YAML key moves querier.skip_resource_fingerprint ->
  statementbuilder.skip_resource_fingerprint.
- Querier interface moves into querier.go (interfaces.go removed); BucketCache
  -> bucket_cache.go, Handler -> api.go.
- Add pkg/querier/queriertest.MockQuerier.

cmd/enterprise/meter.go

@@ -2,9 +2,9 @@ package main
 
 import (
 	"github.com/SigNoz/signoz/pkg/metercollector"
-	"github.com/SigNoz/signoz/pkg/telemetrylogs"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
-	"github.com/SigNoz/signoz/pkg/telemetrytraces"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/logstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/tracestelemetryschema"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
 	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 )
@@ -25,8 +25,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterLogSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrylogs.DBName,
-			TableName:            telemetrylogs.LogsV2LocalTableName,
+			DBName:               logstelemetryschema.DBName,
+			TableName:            logstelemetryschema.LogsV2LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultLogsRetentionDays,
 		},
 	},
@@ -36,8 +36,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterSpanSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrytraces.DBName,
-			TableName:            telemetrytraces.SpanIndexV3LocalTableName,
+			DBName:               tracestelemetryschema.DBName,
+			TableName:            tracestelemetryschema.SpanIndexV3LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultTracesRetentionDays,
 		},
 	},
@@ -47,8 +47,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterDatapointCount,
 			Unit:                 zeustypes.MeterUnitCount,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               telemetrymetrics.DBName,
-			TableName:            telemetrymetrics.SamplesV4LocalTableName,
+			DBName:               metricstelemetryschema.DBName,
+			TableName:            metricstelemetryschema.SamplesV4LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultMetricsRetentionDays,
 		},
 	},

docs/api/openapi.yml

@@ -7238,6 +7238,10 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
+        relatedLogsLink:
+          type: string
+        relatedTracesLink:
+          type: string
         ruleId:
           type: string
         ruleName:
@@ -9930,14 +9934,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 +9986,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/metercollector/telemetrymetercollector/provider.go

@@ -16,7 +16,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/metercollector"
 	"github.com/SigNoz/signoz/pkg/modules/retention"
-	"github.com/SigNoz/signoz/pkg/telemetrymeter"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metertelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/licensetypes"
 	"github.com/SigNoz/signoz/pkg/types/retentiontypes"
@@ -153,7 +153,7 @@ func (provider *Provider) Collect(
 func buildOriginQuery(meterName string) (string, []any) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("toInt64(ifNull(min(unix_milli), 0))")
-	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
+	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
 	sb.Where(sb.Equal("metric_name", meterName))
 	return sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 }
@@ -171,7 +171,7 @@ func buildQuery(meterName string, segment *retentiontypes.RetentionPolicySegment
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(selects...)
-	sb.From(telemetrymeter.DBName + "." + telemetrymeter.SamplesTableName)
+	sb.From(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
 	sb.Where(
 		sb.Equal("metric_name", meterName),
 		sb.GTE("unix_milli", segment.StartMs),

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -8,16 +8,16 @@ import (
 	sqlbuilder "github.com/huandu/go-sqlbuilder"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
 )
 
 var (
-	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
-	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
-	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.TimeseriesV4BufferTableName
+	reductionRulesTable = metricstelemetryschema.DBName + "." + metricstelemetryschema.ReductionRulesTableName
+	metadataTable       = metricstelemetryschema.DBName + "." + metricstelemetryschema.AttributesMetadataTableName
+	bufferSeriesTable   = metricstelemetryschema.DBName + "." + metricstelemetryschema.TimeseriesV4BufferTableName
 )
 
 const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
@@ -192,7 +192,7 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("metric_name", "uniq(fingerprint)")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	conds := []string{
 		sb.In("metric_name", names...),
 		sb.GE("unix_milli", startMs),
@@ -229,8 +229,8 @@ func (c *clickhouse) ingestedSeriesCount(ctx context.Context, metricNames []stri
 // reduced sample tables.
 func (c *clickhouse) reducedSeriesCount(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
 	out := make(map[string]uint64, len(metricNames))
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
-		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
+	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
+		counts, err := c.reducedSeriesCountForTable(ctx, metricstelemetryschema.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
@@ -300,9 +300,9 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 		direction = "DESC"
 	}
 
-	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
-	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
-	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedSumTableName
+	ingestedTable := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName
+	reducedLast := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedLastTableName
+	reducedSum := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedSumTableName
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("base.metric_name AS metric_name", "ifNull(i.cnt, 0) AS ingested", "ifNull(d.cnt, 0) AS reduced")
@@ -352,16 +352,16 @@ func (c *clickhouse) SampleVolumeByMetric(ctx context.Context, metricNames []str
 	}
 	ctx = c.withThreads(ctx)
 
-	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
-	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
-	sum, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	sum, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
@@ -419,7 +419,7 @@ func (c *clickhouse) TotalVolume(ctx context.Context, startMs, endMs int64) (uin
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select("uniq(fingerprint)", "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
 
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
@@ -470,7 +470,7 @@ func (c *clickhouse) SampleTimeseries(ctx context.Context, ruledMetrics []string
 func (c *clickhouse) totalSamplesByBucket(ctx context.Context, startMs, endMs int64) (map[int64]uint64, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
 	sb.GroupBy("bucket")
 
@@ -485,7 +485,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam
 
 	sb := sqlbuilder.NewSelectBuilder()
 	sb.Select(sampleBucketExpr, "count()")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.From(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
 	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 	if len(effectiveFrom) > 0 {
 		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
@@ -499,7 +499,7 @@ func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNam
 // reduced 60s rows are versioned by computed_at, so count distinct buckets.
 func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
 	out := make(map[int64]uint64)
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+	for _, table := range []string{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
 		names := make([]any, len(metricNames))
 		for i, name := range metricNames {
 			names[i] = name
@@ -507,7 +507,7 @@ func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNam
 
 		sb := sqlbuilder.NewSelectBuilder()
 		sb.Select(sampleBucketExpr, "uniq(reduced_fingerprint, unix_milli)")
-		sb.From(telemetrymetrics.DBName + "." + table)
+		sb.From(metricstelemetryschema.DBName + "." + table)
 		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
 		if len(effectiveFrom) > 0 {
 			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))

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

@@ -8320,6 +8320,14 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
+	/**
+	 * @type string
+	 */
+	relatedLogsLink?: string;
+	/**
+	 * @type string
+	 */
+	relatedTracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -10196,14 +10204,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 +10216,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/assets/Logos/gcp.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 128 128"><path fill="#ea4535" d="M80.6 40.3h.4l-.2-.2 14-14v-.3c-11.8-10.4-28.1-14-43.2-9.5C36.5 20.8 24.9 32.8 20.7 48c.2-.1.5-.2.8-.2 5.2-3.4 11.4-5.4 17.9-5.4 2.2 0 4.3.2 6.4.6.1-.1.2-.1.3-.1 9-9.9 24.2-11.1 34.6-2.6h-.1z"/><path fill="#557ebf" d="M108.1 47.8c-2.3-8.5-7.1-16.2-13.8-22.1L80 39.9c6 4.9 9.5 12.3 9.3 20v2.5c16.9 0 16.9 25.2 0 25.2H63.9v20h-.1l.1.2h25.4c14.6.1 27.5-9.3 31.8-23.1 4.3-13.8-1-28.8-13-36.9z"/><path fill="#36a852" d="M39 107.9h26.3V87.7H39c-1.9 0-3.7-.4-5.4-1.1l-15.2 14.6v.2c6 4.3 13.2 6.6 20.7 6.6z"/><path fill="#f9bc15" d="M40.2 41.9c-14.9.1-28.1 9.3-32.9 22.8-4.8 13.6 0 28.5 11.8 37.3l15.6-14.9c-8.6-3.7-10.6-14.5-4-20.8 6.6-6.4 17.8-4.4 21.7 3.8L68 55.2C61.4 46.9 51.1 42 40.2 42.1z"/></svg>

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/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/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.tsx

@@ -17,12 +17,9 @@ import { ChevronDown, Dot, PencilLine, Plug, Plus } from '@signozhq/icons';
 
 import AzureCloudAccountSetupModal from '../../AzureCloudServices/AddNewAccount/CloudAccountSetupModal';
 import AzureAccountSettingsModal from '../../AzureCloudServices/EditAccount/AccountSettingsModal';
-import GcpCloudAccountSetupDrawer from '../../GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer';
-import GcpAccountSettingsDrawer from '../../GoogleCloudPlatform/EditAccount/AccountSettingsDrawer';
 import {
 	mapAccountDtoToAwsCloudAccount,
 	mapAccountDtoToAzureCloudAccount,
-	mapAccountDtoToGcpCloudAccount,
 } from '../../mapCloudAccountFromDto';
 import AwsCloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
 import AwsAccountSettingsModal from '../EditAccount/AccountSettingsModal';
@@ -159,18 +156,6 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 			});
 		}
 
-		if (type === IntegrationType.GCP_SERVICES) {
-			raw.forEach((account) => {
-				if (!account) {
-					return;
-				}
-				const mapped = mapAccountDtoToGcpCloudAccount(account);
-				if (mapped) {
-					mappedAccounts.push(mapped);
-				}
-			});
-		}
-
 		return mappedAccounts;
 	}, [listAccountsResponse, type]);
 
@@ -222,23 +207,13 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 	// log telemetry event when an account is viewed.
 	useEffect(() => {
 		if (activeAccount) {
-			const { config } = activeAccount;
-			let enabledRegions: string[];
-			if ('regions' in config) {
-				// AWS
-				enabledRegions = config.regions;
-			} else if ('resource_groups' in config) {
-				// Azure
-				enabledRegions = config.resource_groups;
-			} else {
-				// GCP
-				enabledRegions = config.project_ids;
-			}
-
 			logEvent(`${type} Integration: Account viewed`, {
 				cloudAccountId: activeAccount?.cloud_account_id,
 				status: activeAccount?.status,
-				enabledRegions,
+				enabledRegions:
+					'regions' in activeAccount.config
+						? activeAccount.config.regions
+						: activeAccount.config.resource_groups,
 			});
 		}
 	}, [activeAccount, type]);
@@ -285,11 +260,6 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 							onClose={(): void => setIsIntegrationModalOpen(false)}
 						/>
 					)}
-					{type === IntegrationType.GCP_SERVICES && (
-						<GcpCloudAccountSetupDrawer
-							onClose={(): void => setIsIntegrationModalOpen(false)}
-						/>
-					)}
 				</>
 			)}
 
@@ -311,13 +281,6 @@ function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 							setActiveAccount={setActiveAccount}
 						/>
 					)}
-					{type === IntegrationType.GCP_SERVICES && (
-						<GcpAccountSettingsDrawer
-							onClose={(): void => setIsAccountSettingsModalOpen(false)}
-							account={activeAccount}
-							setActiveAccount={setActiveAccount}
-						/>
-					)}
 				</>
 			)}
 		</div>

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

@@ -46,31 +46,14 @@ const EMPTY_FORM_VALUES: ServiceConfigFormValues = {
 	s3BucketsByRegion: {},
 };
 
-function getIntegrationServiceConfig(
-	type: IntegrationType,
-	serviceDetailsData?: ServiceDetailsData,
-):
-	| { logs?: { enabled?: boolean }; metrics?: { enabled?: boolean } }
-	| undefined {
-	const config = serviceDetailsData?.cloudIntegrationService?.config;
-
-	if (type === IntegrationType.AWS_SERVICES) {
-		return config?.aws;
-	}
-	if (type === IntegrationType.GCP_SERVICES) {
-		return config?.gcp;
-	}
-	return config?.azure;
-}
-
 function getInitialFormValues(
 	type: IntegrationType,
 	serviceDetailsData?: ServiceDetailsData,
 ): ServiceConfigFormValues {
-	const integrationConfig = getIntegrationServiceConfig(
-		type,
-		serviceDetailsData,
-	);
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
 
 	return {
 		logsEnabled: integrationConfig?.logs?.enabled || false,
@@ -115,21 +98,16 @@ function getServiceConfigPayload({
 		};
 	}
 
-	// Azure and GCP share the same simple logs/metrics enable-flag shape.
-	const signalConfig = {
-		logs: {
-			enabled: isLogsSupported ? logsEnabled : false,
-		},
-		metrics: {
-			enabled: isMetricsSupported ? metricsEnabled : false,
+	return {
+		azure: {
+			logs: {
+				enabled: isLogsSupported ? logsEnabled : false,
+			},
+			metrics: {
+				enabled: isMetricsSupported ? metricsEnabled : false,
+			},
 		},
 	};
-
-	if (type === IntegrationType.GCP_SERVICES) {
-		return { gcp: signalConfig };
-	}
-
-	return { azure: signalConfig };
 }
 
 function ServiceDetails({
@@ -169,7 +147,6 @@ function ServiceDetails({
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
 		{
 			query: {
 				enabled: !!serviceId && !cloudAccountId,
@@ -185,10 +162,10 @@ function ServiceDetails({
 		? isAccountServiceLoading
 		: isReadOnlyServiceLoading;
 
-	const integrationConfig = getIntegrationServiceConfig(
-		type,
-		serviceDetailsData,
-	);
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
 	const isServiceEnabledInPersistedConfig =
 		Boolean(integrationConfig?.logs?.enabled) ||
 		Boolean(integrationConfig?.metrics?.enabled);

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/EditAccount/AccountSettingsModal.tsx

@@ -36,12 +36,8 @@ function AccountSettingsModal({
 
 	const queryClient = useQueryClient();
 
-	// `account.config` is the shared per-provider union (Azure | AWS | GCP).
-	// Narrow to Azure by `resource_groups` (Azure-only) rather than
-	// `deployment_region`, which GCP also has — so it no longer identifies
-	// Azure uniquely.
 	const azureConfig = useMemo(
-		() => ('resource_groups' in account.config ? account.config : null),
+		() => ('deployment_region' in account.config ? account.config : null),
 		[account.config],
 	);
 

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer.module.scss

@@ -1,150 +0,0 @@
-.setupDrawer {
-	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
-	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
-
-	// Fill every field with --l2-background (Input/ComboboxSimple default to transparent).
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--combobox-trigger-background-color: var(--l2-background);
-
-	// Text uses the brighter --l1-foreground, placeholders the duller --l3-foreground.
-	--input-foreground: var(--l1-foreground);
-	--input-placeholder-color: var(--l3-foreground);
-	--combobox-trigger-placeholder-color: var(--l3-foreground);
-
-	// Shared resting border (--l2-border) and text size; focus borders stay per-component.
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--l2-border);
-	--combobox-trigger-border-color: var(--l2-border);
-	--input-font-size: var(--periscope-font-size-base);
-	--combobox-trigger-font-size: var(--periscope-font-size-base);
-	--combobox-trigger-value-font-size: var(--periscope-font-size-base);
-
-	// Bounded flex column so the header/footer stay put and only the body
-	// scrolls when content overflows.
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	[data-slot='drawer-header'],
-	[data-slot='drawer-footer'] {
-		flex-shrink: 0;
-	}
-
-	// The drawer body renders inside [data-slot='drawer-description'] — this is
-	// the only region allowed to scroll.
-	[data-slot='drawer-description'] {
-		display: flex;
-		flex: 1 1 auto;
-		flex-direction: column;
-		gap: var(--spacing-10);
-		min-height: 0;
-		padding: var(--spacing-10) var(--spacing-12);
-		overflow-y: auto;
-	}
-
-	[data-slot='select-content'] {
-		width: var(--radix-select-trigger-width);
-	}
-
-	[data-slot='combobox-content'] {
-		z-index: 5;
-		background: var(--l1-background);
-		border: 1px solid var(--l2-border);
-		border-radius: var(--radius-2);
-	}
-
-	// Selected region value: bright, like every other field's text.
-	[data-slot='combobox-value'] {
-		color: var(--l1-foreground);
-	}
-
-	// Empty trigger (.regionEmpty, set from the RHF value): dull the placeholder text.
-	.regionEmpty [data-slot='combobox-value'] {
-		color: var(--l3-foreground);
-	}
-}
-
-.title {
-	h3 {
-		margin: 0;
-		font-size: var(--periscope-font-size-medium);
-		font-weight: var(--font-weight-semibold);
-	}
-}
-
-.footerContainer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-}
-
-.footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 0;
-}
-
-.drawerSection {
-	composes: drawerSection from './shared.module.scss';
-}
-
-.mono {
-	composes: mono from './shared.module.scss';
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.fieldError {
-	composes: fieldError from './shared.module.scss';
-}
-
-.projectIdsSelect {
-	:global(.ant-select-selector) {
-		min-height: 36px;
-		background: var(--l2-background);
-		border: 1px solid var(--l2-border) !important;
-	}
-
-	&:hover :global(.ant-select-selector),
-	&:global(.ant-select-focused) :global(.ant-select-selector) {
-		border-color: var(--l2-border);
-		box-shadow: none;
-	}
-
-	// antd defaults to 14px; pin to 13px to line up with the Input/Combobox fields.
-	:global(.ant-select-selection-placeholder),
-	:global(.ant-select-selection-search-input),
-	:global(.ant-select-selection-item) {
-		font-size: var(--periscope-font-size-base);
-	}
-
-	:global(.ant-select-selection-placeholder) {
-		color: var(--l3-foreground);
-	}
-
-	:global(.ant-select-selection-search-input) {
-		color: var(--l1-foreground);
-	}
-
-	:global(.ant-select-selection-item) {
-		color: var(--l1-foreground);
-		background: var(--l2-background);
-		border: 1px solid var(--l2-border);
-		border-radius: var(--radius-2);
-	}
-
-	:global(.ant-select-selection-item-remove) {
-		color: var(--l3-foreground);
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/CloudAccountSetupDrawer.tsx

@@ -1,286 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import { Select } from 'antd';
-import cx from 'classnames';
-import { GCP_REGIONS } from 'container/Integrations/constants';
-import { IntegrationModalProps } from 'container/Integrations/HeroSection/types';
-import { useCloudAccountSetupDrawer } from 'hooks/integration/gcp/useCloudAccountSetupDrawer';
-import { Controller, useForm } from 'react-hook-form';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import ConnectionSecretsFields from './ConnectionSecretsFields';
-import FieldLabel from './FieldLabel';
-import FlowSelector from './FlowSelector';
-import { GcpSetupFormValues, SetupFlow } from './types';
-
-import styles from './CloudAccountSetupDrawer.module.scss';
-
-const REGION_ITEMS = GCP_REGIONS.map((region) => ({
-	value: region.value,
-	label: `${region.label} (${region.value})`,
-}));
-
-const DEFAULT_VALUES: GcpSetupFormValues = {
-	accountName: '',
-	deploymentProjectId: '',
-	deploymentRegion: '',
-	projectIds: [],
-	sigNozApiUrl: '',
-	sigNozApiKey: '',
-	ingestionUrl: '',
-	ingestionKey: '',
-};
-
-function CloudAccountSetupDrawer({
-	onClose,
-}: IntegrationModalProps): JSX.Element {
-	const {
-		isLoading,
-		connectAccount,
-		handleClose,
-		connectionParams,
-		isConnectionParamsLoading,
-		submitError,
-		clearSubmitError,
-	} = useCloudAccountSetupDrawer({ onClose });
-
-	const { control, handleSubmit, setValue } = useForm<GcpSetupFormValues>({
-		defaultValues: DEFAULT_VALUES,
-	});
-
-	const [flow, setFlow] = useState<SetupFlow>('manual');
-
-	// Pre-fill the deployment/ingestion fields with the fetched credentials.
-	useEffect(() => {
-		if (!connectionParams) {
-			return;
-		}
-		setValue('sigNozApiUrl', connectionParams.sigNozApiUrl);
-		setValue('sigNozApiKey', connectionParams.sigNozApiKey);
-		setValue('ingestionUrl', connectionParams.ingestionUrl);
-		setValue('ingestionKey', connectionParams.ingestionKey);
-	}, [connectionParams, setValue]);
-
-	const footer = (
-		<div className={styles.footerContainer}>
-			{submitError && (
-				<Callout
-					type="error"
-					size="small"
-					showIcon
-					action="dismissible"
-					onClick={clearSubmitError}
-					title="Failed to connect GCP account"
-					testId="gcp-connect-error"
-				>
-					{submitError}
-				</Callout>
-			)}
-			<div className={styles.footer}>
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={handleClose}
-					testId="gcp-cancel-btn"
-				>
-					Cancel
-				</Button>
-				<Button
-					variant="solid"
-					color="primary"
-					onClick={handleSubmit(connectAccount)}
-					loading={isLoading}
-					disabled={isConnectionParamsLoading}
-					testId="gcp-connect-account-btn"
-				>
-					Connect Account
-				</Button>
-			</div>
-		</div>
-	);
-
-	return (
-		<DrawerWrapper
-			open={true}
-			className={styles.setupDrawer}
-			onOpenChange={(open): void => {
-				if (!open) {
-					handleClose();
-				}
-			}}
-			direction="right"
-			showCloseButton
-			title="Connect Google Cloud Platform"
-			width="base"
-			footer={footer}
-			drawerHeaderProps={{ className: styles.title }}
-		>
-			<FlowSelector value={flow} onChange={setFlow} />
-			<div className={styles.drawerSection}>
-				<FieldLabel
-					htmlFor="gcp-account-name-input"
-					label="Account Name"
-					tooltip="A label to identify this group of GCP projects (org ID, billing email, or any descriptive name)"
-					required
-				/>
-				<Controller
-					name="accountName"
-					control={control}
-					rules={{ required: 'Please enter an account name' }}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<Input
-								id="gcp-account-name-input"
-								className={styles.fullWidth}
-								placeholder="e.g. my-org or billing@company.com"
-								value={field.value}
-								onChange={(e): void => field.onChange(e.target.value)}
-								testId="gcp-account-name-input"
-							/>
-							{fieldState.error && (
-								<Typography.Text
-									as="span"
-									size="small"
-									role="alert"
-									className={styles.fieldError}
-								>
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-			<div className={styles.drawerSection}>
-				<FieldLabel
-					htmlFor="gcp-deployment-project-id-input"
-					label="Deployment Project ID"
-					tooltip="The GCP project that hosts your OTel Collector deployment — often separate from the projects you actually monitor"
-					required
-				/>
-				<Controller
-					name="deploymentProjectId"
-					control={control}
-					rules={{ required: 'Please enter the deployment project ID' }}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<Input
-								id="gcp-deployment-project-id-input"
-								className={cx(styles.fullWidth, styles.mono)}
-								placeholder="e.g. my-deployment-project-123"
-								value={field.value}
-								onChange={(e): void => field.onChange(e.target.value)}
-								testId="gcp-deployment-project-id-input"
-							/>
-							{fieldState.error && (
-								<Typography.Text
-									as="span"
-									size="small"
-									role="alert"
-									className={styles.fieldError}
-								>
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-			<div className={styles.drawerSection}>
-				<FieldLabel
-					htmlFor="gcp-deployment-region-select"
-					label="Deployment Region"
-					tooltip="The GCP region where your OTel Collector will be deployed"
-					required
-				/>
-				<Controller
-					name="deploymentRegion"
-					control={control}
-					rules={{ required: 'Please select a region' }}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<ComboboxSimple
-								id="gcp-deployment-region-select"
-								className={cx(styles.fullWidth, {
-									[styles.regionEmpty]: !field.value,
-								})}
-								items={REGION_ITEMS}
-								value={field.value}
-								onChange={(value): void => field.onChange(value as string)}
-								placeholder="Select a region..."
-								inputPlaceholder="Search regions…"
-								withPortal={false}
-								testId="gcp-deployment-region-select"
-							/>
-							{fieldState.error && (
-								<Typography.Text
-									as="span"
-									size="small"
-									role="alert"
-									className={styles.fieldError}
-								>
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-			<div className={styles.drawerSection}>
-				<FieldLabel
-					htmlFor="gcp-project-ids-select"
-					label="Projects to Monitor"
-					tooltip="Enter each GCP project ID then press Enter"
-					required
-				/>
-				<Controller
-					name="projectIds"
-					control={control}
-					rules={{
-						validate: (value): true | string =>
-							value.length > 0 || 'Please add at least one project ID',
-					}}
-					render={({ field, fieldState }): JSX.Element => (
-						<>
-							<Select
-								id="gcp-project-ids-select"
-								className={cx(styles.fullWidth, styles.projectIdsSelect)}
-								mode="tags"
-								value={field.value}
-								onChange={(value): void => field.onChange(value)}
-								placeholder="Add project IDs…"
-								tokenSeparators={[',', ' ']}
-								notFoundContent={null}
-								suffixIcon={null}
-								getPopupContainer={popupContainer}
-								data-testid="gcp-project-ids-select"
-							/>
-							{fieldState.error && (
-								<Typography.Text
-									as="span"
-									size="small"
-									role="alert"
-									className={styles.fieldError}
-								>
-									{fieldState.error.message}
-								</Typography.Text>
-							)}
-						</>
-					)}
-				/>
-			</div>
-			<ConnectionSecretsFields
-				control={control}
-				isLoading={isConnectionParamsLoading}
-				connectionParams={connectionParams}
-			/>
-		</DrawerWrapper>
-	);
-}
-
-export default CloudAccountSetupDrawer;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/ConnectionSecretsFields.module.scss

@@ -1,71 +0,0 @@
-.drawerSurface {
-	composes: drawerSurface from './shared.module.scss';
-}
-
-.drawerSurfaceHead {
-	composes: drawerSurfaceHead from './shared.module.scss';
-}
-
-.drawerSection {
-	composes: drawerSection from './shared.module.scss';
-}
-
-.headLabel {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.mono {
-	composes: mono from './shared.module.scss';
-}
-
-.fieldError {
-	composes: fieldError from './shared.module.scss';
-}
-
-.fullWidth {
-	width: 100%;
-}
-
-.secretsBody {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-}
-
-.skeletonLabel :global(.ant-skeleton-input) {
-	width: 120px;
-	min-width: 120px;
-	height: 14px;
-}
-
-.skeletonInput :global(.ant-skeleton-input) {
-	width: 100%;
-	min-width: 100%;
-	height: 36px;
-}
-
-.readonlyField {
-	display: flex;
-	gap: var(--spacing-2);
-	align-items: center;
-	height: 36px;
-	padding: 0 var(--spacing-2) 0 var(--spacing-4);
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: var(--radius-2);
-}
-
-.readonlyValue {
-	flex: 1 1 auto;
-	min-width: 0;
-	overflow: hidden;
-	// Match the other fields' value text: 13px and the brighter --l1-foreground.
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	cursor: not-allowed;
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/ConnectionSecretsFields.tsx

@@ -1,193 +0,0 @@
-import { Lock } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import { Skeleton } from 'antd';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-import { Control, Controller } from 'react-hook-form';
-
-import FieldLabel from './FieldLabel';
-import { GcpSetupFormValues } from './types';
-import { SecretFieldType, validateSecretValue } from './validators';
-import styles from './ConnectionSecretsFields.module.scss';
-
-type CredentialField = keyof CloudintegrationtypesCredentialsDTO;
-
-interface FieldConfig {
-	name: CredentialField;
-	label: string;
-	tooltip: string;
-	placeholder: string;
-	testId: string;
-	type: SecretFieldType;
-}
-
-const FIELDS: FieldConfig[] = [
-	{
-		name: 'sigNozApiUrl',
-		label: 'SigNoz API URL',
-		tooltip: 'Base URL of your SigNoz instance the collector reports to',
-		placeholder: 'https://<tenant>.signoz.cloud',
-		testId: 'gcp-signoz-api-url-input',
-		type: 'url',
-	},
-	{
-		name: 'sigNozApiKey',
-		label: 'SigNoz API Key',
-		tooltip: 'API key used to authenticate with your SigNoz instance',
-		placeholder: 'Enter SigNoz API key',
-		testId: 'gcp-signoz-api-key-input',
-		type: 'text',
-	},
-	{
-		name: 'ingestionUrl',
-		label: 'Ingestion URL',
-		tooltip: 'OTLP ingestion endpoint your OTel Collector sends telemetry to',
-		placeholder: 'https://ingest.<region>.signoz.cloud',
-		testId: 'gcp-ingestion-url-input',
-		type: 'url',
-	},
-	{
-		name: 'ingestionKey',
-		label: 'Ingestion Key',
-		tooltip: 'Ingestion key that authorizes telemetry sent to SigNoz',
-		placeholder: 'Enter ingestion key',
-		testId: 'gcp-ingestion-key-input',
-		type: 'text',
-	},
-];
-
-interface ConnectionSecretsFieldsProps {
-	control: Control<GcpSetupFormValues>;
-	isLoading: boolean;
-	connectionParams?: CloudintegrationtypesCredentialsDTO;
-}
-
-function ConnectionSecretsFields({
-	control,
-	isLoading,
-	connectionParams,
-}: ConnectionSecretsFieldsProps): JSX.Element {
-	const hasMissingValue = FIELDS.some(
-		(field) => !connectionParams?.[field.name],
-	);
-
-	return (
-		<div className={styles.drawerSurface}>
-			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text weight="bold" size="base">
-					Deployment details &amp; ingestion secrets
-				</Typography.Text>
-				{!hasMissingValue && (
-					<div className={styles.headLabel}>
-						<Lock size={12} />
-						<Typography.Text as="span" size="small" className={styles.headLabel}>
-							Auto-filled by SigNoz
-						</Typography.Text>
-					</div>
-				)}
-			</div>
-
-			{isLoading ? (
-				<div className={styles.secretsBody} data-testid="gcp-secrets-skeleton">
-					{FIELDS.map((field) => (
-						<div key={field.name} className={styles.drawerSection}>
-							<Skeleton.Input active size="small" className={styles.skeletonLabel} />
-							<Skeleton.Input active block className={styles.skeletonInput} />
-						</div>
-					))}
-				</div>
-			) : (
-				<div className={styles.secretsBody}>
-					{FIELDS.map((field) => {
-						// Backend-provided values are read-only — the user can't edit them, so
-						// show a truncated value with a copy button. Missing values (enterprise)
-						// stay editable inputs with no copy button.
-						const providedValue = connectionParams?.[field.name];
-						if (providedValue) {
-							return (
-								<div key={field.name} className={styles.drawerSection}>
-									<FieldLabel
-										htmlFor={field.testId}
-										label={field.label}
-										tooltip={field.tooltip}
-									/>
-									<div className={styles.readonlyField}>
-										<Typography.Text
-											as="span"
-											id={field.testId}
-											className={cx(styles.readonlyValue, styles.mono)}
-											title={providedValue}
-											testId={field.testId}
-										>
-											{providedValue}
-										</Typography.Text>
-										<CopyButton
-											value={providedValue}
-											size={12}
-											ariaLabel={`Copy ${field.label}`}
-											testId={`${field.testId}-copy`}
-											onCopy={(): void => {
-												toast.success(`${field.label} copied to clipboard`, {
-													position: 'bottom-right',
-												});
-											}}
-										/>
-									</div>
-								</div>
-							);
-						}
-
-						return (
-							<div key={field.name} className={styles.drawerSection}>
-								<FieldLabel
-									htmlFor={field.testId}
-									label={field.label}
-									tooltip={field.tooltip}
-								/>
-								<Controller
-									name={field.name}
-									control={control}
-									rules={{
-										validate: (value): true | string =>
-											validateSecretValue(field.label, field.type, value),
-									}}
-									render={({ field: rhfField, fieldState }): JSX.Element => (
-										<>
-											<Input
-												id={field.testId}
-												className={cx(styles.fullWidth, styles.mono)}
-												placeholder={field.placeholder}
-												value={rhfField.value}
-												onChange={(e): void => rhfField.onChange(e.target.value)}
-												testId={field.testId}
-											/>
-											{fieldState.error && (
-												<Typography.Text
-													as="span"
-													size="small"
-													role="alert"
-													className={styles.fieldError}
-												>
-													{fieldState.error.message}
-												</Typography.Text>
-											)}
-										</>
-									)}
-								/>
-							</div>
-						);
-					})}
-				</div>
-			)}
-		</div>
-	);
-}
-
-ConnectionSecretsFields.defaultProps = {
-	connectionParams: undefined,
-};
-
-export default ConnectionSecretsFields;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FieldLabel.module.scss

@@ -1,22 +0,0 @@
-.fieldLabel {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-2);
-}
-
-.required {
-	composes: required from './shared.module.scss';
-}
-
-.infoTrigger {
-	display: inline-flex;
-	align-items: center;
-	color: var(--l3-foreground);
-	cursor: help;
-}
-
-.tooltipContent {
-	max-width: 240px;
-	white-space: normal;
-	word-break: break-word;
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FieldLabel.tsx

@@ -1,49 +0,0 @@
-import { Info } from '@signozhq/icons';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-import styles from './FieldLabel.module.scss';
-
-interface FieldLabelProps {
-	htmlFor: string;
-	label: string;
-	tooltip: string;
-	required?: boolean;
-}
-
-function FieldLabel({
-	htmlFor,
-	label,
-	tooltip,
-	required,
-}: FieldLabelProps): JSX.Element {
-	return (
-		<label className={styles.fieldLabel} htmlFor={htmlFor}>
-			{label}
-
-			<TooltipSimple
-				title={tooltip}
-				side="top"
-				tooltipContentProps={{ className: styles.tooltipContent }}
-			>
-				<span
-					className={styles.infoTrigger}
-					aria-label={`${label} help`}
-					data-testid={`${htmlFor}-tooltip`}
-				>
-					<Info size={12} />
-				</span>
-			</TooltipSimple>
-			{required && (
-				<span className={styles.required} aria-hidden="true">
-					*
-				</span>
-			)}
-		</label>
-	);
-}
-
-FieldLabel.defaultProps = {
-	required: false,
-};
-
-export default FieldLabel;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FlowSelector.module.scss

@@ -1,84 +0,0 @@
-.drawerSection {
-	composes: drawerSection from './shared.module.scss';
-}
-
-.drawerSurface {
-	composes: drawerSurface from './shared.module.scss';
-}
-
-.drawerSurfaceHead {
-	composes: drawerSurfaceHead from './shared.module.scss';
-}
-
-.flowRadioGroup {
-	--radio-group-item-border-color: var(--l2-border);
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-
-	.flowRadio {
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		justify-content: flex-start;
-		gap: var(--spacing-5);
-		width: 100%;
-		padding: var(--spacing-5) var(--spacing-6);
-		margin: 0;
-		border: 1px solid transparent;
-		border-radius: var(--radius-2);
-		box-sizing: border-box;
-		cursor: pointer;
-		transition:
-			background-color 0.12s ease,
-			border-color 0.12s ease;
-
-		> button[role='radio'] {
-			flex: 0 0 16px;
-			width: 16px;
-			height: 16px;
-			margin-top: 3px;
-		}
-
-		> label {
-			flex: 1 1 auto;
-			min-width: 0;
-			display: block;
-			text-align: left;
-			cursor: pointer;
-			font-size: inherit;
-			font-weight: inherit;
-			color: inherit;
-		}
-
-		&.flowRadioManual:has(button[data-state='checked']) {
-			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
-			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
-		}
-
-		&:hover {
-			background: var(--l3-background-hover);
-		}
-
-		&:has(button[disabled]) {
-			cursor: not-allowed;
-			opacity: 0.55;
-
-			&:hover {
-				background: var(--l3-background);
-			}
-		}
-	}
-}
-
-.flowRadioTitle {
-	display: flex;
-	gap: var(--spacing-2);
-	align-items: center;
-}
-
-.flowRadioDesc {
-	margin-top: var(--spacing-2);
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/FlowSelector.tsx

@@ -1,76 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import { SetupFlow } from './types';
-import styles from './FlowSelector.module.scss';
-
-interface FlowSelectorProps {
-	value: SetupFlow;
-	onChange: (flow: SetupFlow) => void;
-}
-
-function FlowSelector({ value, onChange }: FlowSelectorProps): JSX.Element {
-	return (
-		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
-			<div className={styles.drawerSurfaceHead}>
-				<Typography.Text weight="bold" size="base">
-					Connection method
-				</Typography.Text>
-			</div>
-
-			<RadioGroup
-				value={value}
-				onChange={(next): void => onChange(next as SetupFlow)}
-				className={styles.flowRadioGroup}
-			>
-				<RadioGroupItem
-					value="manual"
-					containerClassName={cx(styles.flowRadio, styles.flowRadioManual)}
-					testId="gcp-flow-manual"
-				>
-					<div className={styles.flowRadioTitle}>
-						<Typography.Text weight="semibold" size="base">
-							Connect Manually
-						</Typography.Text>
-					</div>
-					<Typography.Text
-						as="p"
-						size="small"
-						color="muted"
-						className={styles.flowRadioDesc}
-					>
-						Deploy your own OTel Collector and configure log sinks.
-					</Typography.Text>
-				</RadioGroupItem>
-
-				<RadioGroupItem
-					value="agent"
-					containerClassName={styles.flowRadio}
-					testId="gcp-flow-agent"
-					disabled
-				>
-					<div className={styles.flowRadioTitle}>
-						<Typography.Text weight="semibold" size="base">
-							Connect via Agent
-						</Typography.Text>
-						<Badge color="robin" variant="default">
-							Soon
-						</Badge>
-					</div>
-					<Typography.Text
-						as="p"
-						size="small"
-						color="muted"
-						className={styles.flowRadioDesc}
-					>
-						SigNoz deploys and manages the collector for you.
-					</Typography.Text>
-				</RadioGroupItem>
-			</RadioGroup>
-		</div>
-	);
-}
-
-export default FlowSelector;

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/shared.module.scss

@@ -1,36 +0,0 @@
-.drawerSection {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.drawerSection > label {
-	font-size: var(--periscope-font-size-normal);
-	color: var(--l2-foreground);
-}
-
-.required {
-	color: var(--accent-cherry);
-}
-
-.fieldError {
-	font-size: var(--periscope-font-size-small);
-	color: var(--accent-cherry);
-}
-
-.drawerSurface {
-	padding: var(--spacing-7);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-}
-
-.drawerSurfaceHead {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: var(--spacing-5);
-}
-
-.mono {
-	font-family: var(--font-family-mono);
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/types.ts

@@ -1,12 +0,0 @@
-export type SetupFlow = 'manual' | 'agent';
-
-export interface GcpSetupFormValues {
-	accountName: string;
-	deploymentProjectId: string;
-	deploymentRegion: string;
-	projectIds: string[];
-	sigNozApiUrl: string;
-	sigNozApiKey: string;
-	ingestionUrl: string;
-	ingestionKey: string;
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/validators.ts

@@ -1,24 +0,0 @@
-export type SecretFieldType = 'url' | 'text';
-
-export function isValidUrl(value: string): boolean {
-	try {
-		return Boolean(new URL(value));
-	} catch {
-		return false;
-	}
-}
-
-export function validateSecretValue(
-	label: string,
-	type: SecretFieldType,
-	value: string | undefined,
-): true | string {
-	const trimmed = value?.trim();
-	if (!trimmed) {
-		return `Please enter the ${label}`;
-	}
-	if (type === 'url' && !isValidUrl(trimmed)) {
-		return `Please enter a valid URL for ${label}`;
-	}
-	return true;
-}

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/EditAccount/AccountSettingsDrawer.tsx

@@ -1,165 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useQueryClient } from 'react-query';
-import { Save } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DrawerWrapper } from '@signozhq/ui/drawer';
-import { Form, Select } from 'antd';
-import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { CloudAccount } from 'container/Integrations/types';
-import { useAccountSettingsDrawer } from 'hooks/integration/gcp/useAccountSettingsDrawer';
-
-import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
-
-import '../../AmazonWebServices/EditAccount/AccountSettingsModal.style.scss';
-
-interface AccountSettingsDrawerProps {
-	onClose: () => void;
-	account: CloudAccount;
-	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
-}
-
-function AccountSettingsDrawer({
-	onClose,
-	account,
-	setActiveAccount,
-}: AccountSettingsDrawerProps): JSX.Element {
-	const {
-		form,
-		isLoading,
-		projectIds,
-		isSaveDisabled,
-		setProjectIds,
-		handleSubmit,
-		handleClose,
-	} = useAccountSettingsDrawer({ onClose, account, setActiveAccount });
-
-	const queryClient = useQueryClient();
-
-	const gcpConfig = useMemo(
-		() => ('project_ids' in account.config ? account.config : null),
-		[account.config],
-	);
-
-	return (
-		<DrawerWrapper
-			open={true}
-			className="account-settings-modal"
-			title="Account Settings"
-			direction="right"
-			showCloseButton
-			onOpenChange={(open): void => {
-				if (!open) {
-					handleClose();
-				}
-			}}
-			width="wide"
-			footer={
-				<div className="account-settings-modal__footer">
-					<RemoveIntegrationAccount
-						accountId={account?.id}
-						onRemoveIntegrationAccountSuccess={(): void => {
-							void invalidateListAccounts(queryClient, {
-								cloudProvider: INTEGRATION_TYPES.GCP,
-							});
-							setActiveAccount(null);
-							handleClose();
-						}}
-						cloudProvider={INTEGRATION_TYPES.GCP}
-					/>
-					<Button
-						variant="solid"
-						color="secondary"
-						disabled={isSaveDisabled}
-						onClick={handleSubmit}
-						loading={isLoading}
-						prefix={<Save size={14} />}
-						data-testid="gcp-update-account-btn"
-					>
-						Update Changes
-					</Button>
-				</div>
-			}
-		>
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					projectIds: gcpConfig?.project_ids || [],
-				}}
-			>
-				<div className="account-settings-modal__body">
-					<div className="account-settings-modal__body-account-info">
-						<div className="account-settings-modal__body-account-info-connected-account-details">
-							<div className="account-settings-modal__body-account-info-connected-account-details-title">
-								Connected Account details
-							</div>
-							<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
-								Account Name:{' '}
-								<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
-									{account?.providerAccountId}
-								</span>
-							</div>
-						</div>
-					</div>
-
-					{gcpConfig?.deployment_project_id && (
-						<div className="account-settings-modal__body-region-selector">
-							<div className="account-settings-modal__body-region-selector-title">
-								Deployment project ID
-							</div>
-							<div className="account-settings-modal__body-region-selector-description">
-								{gcpConfig.deployment_project_id}
-							</div>
-						</div>
-					)}
-
-					{gcpConfig?.deployment_region && (
-						<div className="account-settings-modal__body-region-selector">
-							<div className="account-settings-modal__body-region-selector-title">
-								Deployment region
-							</div>
-							<div className="account-settings-modal__body-region-selector-description">
-								{gcpConfig.deployment_region}
-							</div>
-						</div>
-					)}
-
-					<div className="account-settings-modal__body-region-selector">
-						<div className="account-settings-modal__body-region-selector-title">
-							Projects to monitor
-						</div>
-						<div className="account-settings-modal__body-region-selector-description">
-							Update the GCP project IDs that should be monitored.
-						</div>
-
-						<Form.Item
-							name="projectIds"
-							rules={[
-								{
-									required: true,
-									type: 'array',
-									min: 1,
-									message: 'Please add at least one project ID',
-								},
-							]}
-						>
-							<Select
-								mode="tags"
-								value={projectIds}
-								tokenSeparators={[',']}
-								onChange={(values): void => {
-									setProjectIds(values);
-									form.setFieldValue('projectIds', values);
-								}}
-								data-testid="gcp-edit-project-ids-select"
-							/>
-						</Form.Item>
-					</div>
-				</div>
-			</Form>
-		</DrawerWrapper>
-	);
-}
-
-export default AccountSettingsDrawer;

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.tsx

@@ -60,44 +60,6 @@ function RemoveIntegrationAccount({
 		setIsModalOpen(false);
 	};
 
-	let modalDescription: JSX.Element;
-	if (cloudProvider === INTEGRATION_TYPES.AWS) {
-		modalDescription = (
-			<>
-				Removing this account will remove all components created for sending
-				telemetry to SigNoz in your AWS account within the next ~15 minutes
-				(cloudformation stacks named signoz-integration-telemetry-collection in
-				enabled regions). <br />
-				<br />
-				After that, you can delete the cloudformation stack that was created
-				manually when connecting this account.
-			</>
-		);
-	} else if (cloudProvider === INTEGRATION_TYPES.GCP) {
-		modalDescription = (
-			<>
-				Removing this account will stop SigNoz from monitoring it. <br />
-				<br />
-				Since you manage the GCP resources yourself, remember to manually tear down
-				the OTel collector and Pub/Sub resources you created for this integration if
-				you no longer need them.
-			</>
-		);
-	} else {
-		modalDescription = (
-			<>
-				Removing this account will remove all components created for sending
-				telemetry to SigNoz in your Azure subscription within the next ~15 minutes
-				(deployment stack named signoz-integration-telemetry will be deleted
-				automatically). <br />
-				<br />
-				After that, you have to manually delete &apos;signoz-integration&apos;
-				deployment stack that was created while connecting this account (Takes ~20
-				minutes to delete).
-			</>
-		);
-	}
-
 	return (
 		<div className="remove-integration-account-container">
 			<Button
@@ -122,7 +84,28 @@ function RemoveIntegrationAccount({
 					loading: isRemoveIntegrationLoading,
 				}}
 			>
-				{modalDescription}
+				{cloudProvider === INTEGRATION_TYPES.AWS ? (
+					<>
+						Removing this account will remove all components created for sending
+						telemetry to SigNoz in your AWS account within the next ~15 minutes
+						(cloudformation stacks named signoz-integration-telemetry-collection in
+						enabled regions). <br />
+						<br />
+						After that, you can delete the cloudformation stack that was created
+						manually when connecting this account.
+					</>
+				) : (
+					<>
+						Removing this account will remove all components created for sending
+						telemetry to SigNoz in your Azure subscription within the next ~15 minutes
+						(deployment stack named signoz-integration-telemetry will be deleted
+						automatically). <br />
+						<br />
+						After that, you have to manually delete &apos;signoz-integration&apos;
+						deployment stack that was created while connecting this account (Takes ~20
+						minutes to delete).
+					</>
+				)}
 			</Modal>
 		</div>
 	);

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/Integrations/CloudIntegration/mapCloudAccountFromDto.ts

@@ -47,27 +47,3 @@ export function mapAccountDtoToAzureCloudAccount(
 		providerAccountId: account.providerAccountId,
 	};
 }
-
-export function mapAccountDtoToGcpCloudAccount(
-	account: CloudintegrationtypesAccountDTO,
-): IntegrationCloudAccount | null {
-	if (!account.providerAccountId) {
-		return null;
-	}
-
-	return {
-		id: account.id,
-		cloud_account_id: account.id,
-		config: {
-			deployment_region: account.config?.gcp?.deploymentRegion ?? '',
-			deployment_project_id: account.config?.gcp?.deploymentProjectId ?? '',
-			project_ids: account.config?.gcp?.projectIds ?? [],
-		},
-		status: {
-			integration: {
-				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
-			},
-		},
-		providerAccountId: account.providerAccountId,
-	};
-}

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -13,8 +13,8 @@ import { ArrowLeft, MoveUpRight, RotateCw } from '@signozhq/icons';
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 
 import CloudIntegration from '../CloudIntegration/CloudIntegration';
-import { IntegrationType } from '../types';
 import { INTEGRATION_TYPES } from '../constants';
+import { IntegrationType } from '../types';
 import { handleContactSupport } from '../utils';
 import IntegrationDetailContent from './IntegrationDetailContent';
 import IntegrationDetailHeader from './IntegrationDetailHeader';
@@ -24,12 +24,6 @@ import { getConnectionStatesFromConnectionStatus } from './utils';
 
 import './IntegrationDetailPage.styles.scss';
 
-const cloudIntegrationTypeById: Record<string, IntegrationType> = {
-	[INTEGRATION_TYPES.AWS]: IntegrationType.AWS_SERVICES,
-	[INTEGRATION_TYPES.AZURE]: IntegrationType.AZURE_SERVICES,
-	[INTEGRATION_TYPES.GCP]: IntegrationType.GCP_SERVICES,
-};
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function IntegrationDetailPage(): JSX.Element {
 	const history = useHistory();
@@ -61,8 +55,19 @@ function IntegrationDetailPage(): JSX.Element {
 		),
 	);
 
-	if (integrationId && cloudIntegrationTypeById[integrationId]) {
-		return <CloudIntegration type={cloudIntegrationTypeById[integrationId]} />;
+	if (
+		integrationId === INTEGRATION_TYPES.AWS ||
+		integrationId === INTEGRATION_TYPES.AZURE
+	) {
+		return (
+			<CloudIntegration
+				type={
+					integrationId === INTEGRATION_TYPES.AWS
+						? IntegrationType.AWS_SERVICES
+						: IntegrationType.AZURE_SERVICES
+				}
+			/>
+		);
 	}
 
 	return (

frontend/src/container/Integrations/constants.ts

@@ -1,8 +1,7 @@
 import awsDarkLogo from '@/assets/Logos/aws-dark.svg';
 import azureOpenaiLogo from '@/assets/Logos/azure-openai.svg';
-import gcpLogo from '@/assets/Logos/gcp.svg';
 
-import { AzureRegion, GCPRegion } from './types';
+import { AzureRegion } from './types';
 
 export const INTEGRATION_TELEMETRY_EVENTS = {
 	INTEGRATIONS_LIST_VISITED: 'Integrations Page: Visited the list page',
@@ -22,7 +21,6 @@ export const INTEGRATION_TELEMETRY_EVENTS = {
 export const INTEGRATION_TYPES = {
 	AWS: 'aws',
 	AZURE: 'azure',
-	GCP: 'gcp',
 };
 
 export const AWS_INTEGRATION = {
@@ -55,26 +53,7 @@ export const AZURE_INTEGRATION = {
 	is_new: true,
 };
 
-export const GCP_INTEGRATION = {
-	id: INTEGRATION_TYPES.GCP,
-	title: 'Google Cloud Platform',
-	description: 'Setup for GCP monitoring with SigNoz',
-	author: {
-		name: 'SigNoz',
-		email: 'integrations@signoz.io',
-		homepage: 'https://signoz.io',
-	},
-	icon: gcpLogo,
-	icon_alt: 'gcp-logo',
-	is_installed: false,
-	is_new: true,
-};
-
-export const ONE_CLICK_INTEGRATIONS = [
-	AWS_INTEGRATION,
-	AZURE_INTEGRATION,
-	GCP_INTEGRATION,
-];
+export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION, AZURE_INTEGRATION];
 
 export const AZURE_REGIONS: AzureRegion[] = [
 	{
@@ -186,66 +165,3 @@ export const AZURE_REGIONS: AzureRegion[] = [
 	{ label: 'West US 2', value: 'westus2', geography: 'United States' },
 	{ label: 'West US 3', value: 'westus3', geography: 'United States' },
 ];
-
-// Source of truth: pkg/types/cloudintegrationtypes/regions.go (GCP regions).
-export const GCP_REGIONS: GCPRegion[] = [
-	{ label: 'Johannesburg', value: 'africa-south1', geography: 'Africa' },
-	{ label: 'Changhua County', value: 'asia-east1', geography: 'APAC' },
-	{ label: 'Hong Kong', value: 'asia-east2', geography: 'APAC' },
-	{ label: 'Tokyo', value: 'asia-northeast1', geography: 'APAC' },
-	{ label: 'Osaka', value: 'asia-northeast2', geography: 'APAC' },
-	{ label: 'Seoul', value: 'asia-northeast3', geography: 'APAC' },
-	{ label: 'Mumbai', value: 'asia-south1', geography: 'APAC' },
-	{ label: 'Delhi', value: 'asia-south2', geography: 'APAC' },
-	{ label: 'Singapore', value: 'asia-southeast1', geography: 'APAC' },
-	{ label: 'Jakarta', value: 'asia-southeast2', geography: 'APAC' },
-	{ label: 'Bangkok', value: 'asia-southeast3', geography: 'APAC' },
-	{ label: 'Sydney', value: 'australia-southeast1', geography: 'APAC' },
-	{ label: 'Melbourne', value: 'australia-southeast2', geography: 'APAC' },
-	{ label: 'Warsaw', value: 'europe-central2', geography: 'Europe' },
-	{ label: 'Hamina', value: 'europe-north1', geography: 'Europe' },
-	{ label: 'Stockholm', value: 'europe-north2', geography: 'Europe' },
-	{ label: 'Madrid', value: 'europe-southwest1', geography: 'Europe' },
-	{ label: 'St. Ghislain', value: 'europe-west1', geography: 'Europe' },
-	{ label: 'London', value: 'europe-west2', geography: 'Europe' },
-	{ label: 'Frankfurt', value: 'europe-west3', geography: 'Europe' },
-	{ label: 'Eemshaven', value: 'europe-west4', geography: 'Europe' },
-	{ label: 'Zurich', value: 'europe-west6', geography: 'Europe' },
-	{ label: 'Milan', value: 'europe-west8', geography: 'Europe' },
-	{ label: 'Paris', value: 'europe-west9', geography: 'Europe' },
-	{ label: 'Berlin', value: 'europe-west10', geography: 'Europe' },
-	{ label: 'Turin', value: 'europe-west12', geography: 'Europe' },
-	{ label: 'Doha', value: 'me-central1', geography: 'Middle East' },
-	{ label: 'Dammam', value: 'me-central2', geography: 'Middle East' },
-	{ label: 'Tel Aviv', value: 'me-west1', geography: 'Middle East' },
-	{
-		label: 'Montréal',
-		value: 'northamerica-northeast1',
-		geography: 'North America',
-	},
-	{
-		label: 'Toronto',
-		value: 'northamerica-northeast2',
-		geography: 'North America',
-	},
-	{
-		label: 'Querétaro',
-		value: 'northamerica-south1',
-		geography: 'North America',
-	},
-	{
-		label: 'São Paulo',
-		value: 'southamerica-east1',
-		geography: 'South America',
-	},
-	{ label: 'Santiago', value: 'southamerica-west1', geography: 'South America' },
-	{ label: 'Council Bluffs', value: 'us-central1', geography: 'North America' },
-	{ label: 'Moncks Corner', value: 'us-east1', geography: 'North America' },
-	{ label: 'Ashburn', value: 'us-east4', geography: 'North America' },
-	{ label: 'Columbus', value: 'us-east5', geography: 'North America' },
-	{ label: 'Dallas', value: 'us-south1', geography: 'North America' },
-	{ label: 'The Dalles', value: 'us-west1', geography: 'North America' },
-	{ label: 'Los Angeles', value: 'us-west2', geography: 'North America' },
-	{ label: 'Salt Lake City', value: 'us-west3', geography: 'North America' },
-	{ label: 'Las Vegas', value: 'us-west4', geography: 'North America' },
-];

frontend/src/container/Integrations/types.ts

@@ -6,7 +6,6 @@ import {
 export enum IntegrationType {
 	AWS_SERVICES = 'aws',
 	AZURE_SERVICES = 'azure',
-	GCP_SERVICES = 'gcp',
 }
 
 interface LogField {
@@ -88,10 +87,7 @@ export interface ServiceData {
 export interface CloudAccount {
 	id: string;
 	cloud_account_id: string;
-	config:
-		| AzureCloudAccountConfig
-		| AWSCloudAccountConfig
-		| GCPCloudAccountConfig;
+	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
 	status: AccountStatus | IServiceStatus;
 	providerAccountId: string;
 }
@@ -101,12 +97,6 @@ export interface AzureCloudAccountConfig {
 	resource_groups: string[];
 }
 
-export interface GCPCloudAccountConfig {
-	deployment_region: string;
-	deployment_project_id: string;
-	project_ids: string[];
-}
-
 export interface AccountStatus {
 	integration: IntegrationStatus;
 }
@@ -121,12 +111,6 @@ export interface AzureRegion {
 	value: string;
 }
 
-export interface GCPRegion {
-	label: string;
-	geography: string;
-	value: string;
-}
-
 export interface UpdateServiceConfigPayload {
 	cloud_account_id: string;
 	config: AzureServicesConfig;

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/Integrations/useGetIntegrationStatus.ts

@@ -10,8 +10,7 @@ import {
 export function isOneClickIntegration(integrationId: string): boolean {
 	return (
 		integrationId === INTEGRATION_TYPES.AWS ||
-		integrationId === INTEGRATION_TYPES.AZURE ||
-		integrationId === INTEGRATION_TYPES.GCP
+		integrationId === INTEGRATION_TYPES.AZURE
 	);
 }
 

frontend/src/hooks/integration/azure/useAccountSettingsModal.ts

@@ -39,12 +39,8 @@ export function useAccountSettingsModal({
 }: UseAccountSettingsModalProps): UseAccountSettingsModal {
 	const [form] = Form.useForm();
 	const { mutate: updateAccount, isLoading } = useUpdateAccount();
-	// `account.config` is the shared per-provider union (Azure | AWS | GCP).
-	// Narrow to Azure by `resource_groups` (Azure-only) rather than
-	// `deployment_region`, which GCP also has — so it no longer identifies
-	// Azure uniquely.
 	const accountConfig = useMemo(
-		() => ('resource_groups' in account.config ? account.config : null),
+		() => ('deployment_region' in account.config ? account.config : null),
 		[account.config],
 	);
 	const [resourceGroups, setResourceGroups] = useState<string[]>(

frontend/src/hooks/integration/gcp/useAccountSettingsDrawer.ts

@@ -1,148 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { Form } from 'antd';
-import { FormInstance } from 'antd/lib';
-import { useUpdateAccount } from 'api/generated/services/cloudintegration';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { CloudAccount } from 'container/Integrations/types';
-import { isEqual } from 'lodash-es';
-
-import logEvent from '../../../api/common/logEvent';
-
-interface UseAccountSettingsDrawerProps {
-	onClose: () => void;
-	account: CloudAccount;
-	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
-}
-
-interface UseAccountSettingsDrawer {
-	form: FormInstance;
-	isLoading: boolean;
-	projectIds: string[];
-	isSaveDisabled: boolean;
-	setProjectIds: Dispatch<SetStateAction<string[]>>;
-	handleSubmit: () => Promise<void>;
-	handleClose: () => void;
-}
-
-export function useAccountSettingsDrawer({
-	onClose,
-	account,
-	setActiveAccount,
-}: UseAccountSettingsDrawerProps): UseAccountSettingsDrawer {
-	const [form] = Form.useForm();
-	const { mutate: updateAccount, isLoading } = useUpdateAccount();
-	const accountConfig = useMemo(
-		() => ('project_ids' in account.config ? account.config : null),
-		[account.config],
-	);
-	const [projectIds, setProjectIds] = useState<string[]>(
-		accountConfig?.project_ids || [],
-	);
-
-	useEffect(() => {
-		if (!accountConfig) {
-			return;
-		}
-
-		form.setFieldsValue({
-			projectIds: accountConfig.project_ids,
-		});
-		setProjectIds(accountConfig.project_ids);
-	}, [accountConfig, form]);
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-
-			if (!accountConfig) {
-				return;
-			}
-
-			updateAccount(
-				{
-					pathParams: {
-						cloudProvider: INTEGRATION_TYPES.GCP,
-						id: account?.id || '',
-					},
-					data: {
-						config: {
-							gcp: {
-								// Deployment region & project ID are immutable in the UI, but the
-								// Updatable GCP DTO requires all three fields to be sent.
-								deploymentRegion: accountConfig.deployment_region,
-								deploymentProjectId: accountConfig.deployment_project_id,
-								projectIds: values.projectIds || [],
-							},
-						},
-					},
-				},
-				{
-					onSuccess: () => {
-						const nextConfig = {
-							deployment_region: accountConfig.deployment_region,
-							deployment_project_id: accountConfig.deployment_project_id,
-							project_ids: values.projectIds || [],
-						};
-
-						setActiveAccount({
-							...account,
-							config: nextConfig,
-						});
-						onClose();
-
-						toast.success('Account settings updated successfully', {
-							position: 'bottom-right',
-						});
-
-						void logEvent('GCP Integration: Account settings updated', {
-							cloudAccountId: account.cloud_account_id,
-							deploymentRegion: nextConfig.deployment_region,
-							projectIds: nextConfig.project_ids,
-						});
-					},
-					onError: (error) => {
-						toast.error('Failed to update account settings', {
-							description: error?.message,
-							position: 'bottom-right',
-						});
-					},
-				},
-			);
-		} catch (error) {
-			console.error('Form submission failed:', error);
-		}
-	}, [form, updateAccount, account, accountConfig, setActiveAccount, onClose]);
-
-	const isSaveDisabled = useMemo(() => {
-		if (!accountConfig) {
-			return true;
-		}
-
-		return isEqual(
-			[...(projectIds || [])].sort(),
-			[...accountConfig.project_ids].sort(),
-		);
-	}, [accountConfig, projectIds]);
-
-	const handleClose = useCallback(() => {
-		onClose();
-	}, [onClose]);
-
-	return {
-		form,
-		isLoading,
-		projectIds,
-		isSaveDisabled,
-		setProjectIds,
-		handleSubmit,
-		handleClose,
-	};
-}

frontend/src/hooks/integration/gcp/useCloudAccountSetupDrawer.ts

@@ -1,165 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { toast } from '@signozhq/ui/sonner';
-import {
-	CreateAccountMutationResult,
-	GetConnectionCredentialsQueryResult,
-	invalidateListAccounts,
-	useAgentCheckIn,
-	useCreateAccount,
-	useGetConnectionCredentials,
-} from 'api/generated/services/cloudintegration';
-import {
-	CloudintegrationtypesCredentialsDTO,
-	CloudintegrationtypesPostableAccountDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { GcpSetupFormValues } from 'container/Integrations/CloudIntegration/GoogleCloudPlatform/AddNewAccount/types';
-import useAxiosError from 'hooks/useAxiosError';
-import { toAPIError } from 'utils/errorUtils';
-
-import logEvent from '../../../api/common/logEvent';
-
-interface UseCloudAccountSetupDrawerProps {
-	onClose: () => void;
-}
-
-interface UseCloudAccountSetupDrawer {
-	isLoading: boolean;
-	connectAccount: (values: GcpSetupFormValues) => Promise<void>;
-	handleClose: () => void;
-	connectionParams?: CloudintegrationtypesCredentialsDTO;
-	isConnectionParamsLoading: boolean;
-	submitError: string | null;
-	clearSubmitError: () => void;
-}
-
-export function useCloudAccountSetupDrawer({
-	onClose,
-}: UseCloudAccountSetupDrawerProps): UseCloudAccountSetupDrawer {
-	const queryClient = useQueryClient();
-	const [isLoading, setIsLoading] = useState(false);
-	const [submitError, setSubmitError] = useState<string | null>(null);
-
-	const clearSubmitError = useCallback((): void => {
-		setSubmitError(null);
-	}, []);
-
-	const { mutateAsync: createAccount } = useCreateAccount();
-	const { mutateAsync: checkIn } = useAgentCheckIn();
-	const handleError = useAxiosError();
-
-	const { data: connectionParams, isLoading: isConnectionParamsLoading } =
-		useGetConnectionCredentials<GetConnectionCredentialsQueryResult>(
-			{
-				cloudProvider: INTEGRATION_TYPES.GCP,
-			},
-			{
-				query: {
-					onError: handleError,
-				},
-			},
-		);
-
-	const handleClose = useCallback((): void => {
-		onClose();
-	}, [onClose]);
-
-	const handleConnectionSuccess = useCallback(
-		(payload: {
-			cloudIntegrationId: string;
-			providerAccountId: string;
-		}): void => {
-			void logEvent('GCP Integration: Account connected', {
-				cloudIntegrationId: payload.cloudIntegrationId,
-				providerAccountId: payload.providerAccountId,
-			});
-			toast.success('GCP account connected successfully', {
-				position: 'bottom-right',
-			});
-			void invalidateListAccounts(queryClient, {
-				cloudProvider: INTEGRATION_TYPES.GCP,
-			});
-			handleClose();
-		},
-		[handleClose, queryClient],
-	);
-
-	const connectAccount = useCallback(
-		async (values: GcpSetupFormValues): Promise<void> => {
-			try {
-				setIsLoading(true);
-				setSubmitError(null);
-
-				const payload: CloudintegrationtypesPostableAccountDTO = {
-					config: {
-						gcp: {
-							deploymentRegion: values.deploymentRegion,
-							deploymentProjectId: values.deploymentProjectId,
-							projectIds: values.projectIds || [],
-						},
-					},
-					credentials: {
-						// Cloud users can't edit these — the backend-provided credentials are
-						// authoritative. Enterprise users have no backend defaults and enter
-						// their own (validated non-empty), so their form values are used.
-						ingestionUrl: connectionParams?.data?.ingestionUrl || values.ingestionUrl,
-						ingestionKey: connectionParams?.data?.ingestionKey || values.ingestionKey,
-						sigNozApiUrl: connectionParams?.data?.sigNozApiUrl || values.sigNozApiUrl,
-						sigNozApiKey: connectionParams?.data?.sigNozApiKey || values.sigNozApiKey,
-					},
-				};
-
-				// Step 1: create the integration account.
-				const createResponse: CreateAccountMutationResult = await createAccount({
-					pathParams: { cloudProvider: INTEGRATION_TYPES.GCP },
-					data: payload,
-				});
-
-				const cloudIntegrationId = createResponse.data.id;
-				const providerAccountId = values.accountName;
-
-				void logEvent('GCP Integration: Account created', {
-					id: cloudIntegrationId,
-				});
-
-				// Step 2: mimic the agent by checking in from the frontend (manual flow).
-				await checkIn({
-					pathParams: { cloudProvider: INTEGRATION_TYPES.GCP },
-					data: {
-						providerAccountId,
-						cloudIntegrationId,
-						data: {},
-					},
-				});
-
-				handleConnectionSuccess({ cloudIntegrationId, providerAccountId });
-			} catch (error) {
-				// Surface the backend's message inline in the drawer instead of a
-				// generic failure string.
-				const message = toAPIError(
-					error as ErrorType<RenderErrorResponseDTO>,
-					'Failed to connect GCP account',
-				).getErrorMessage();
-				setSubmitError(message);
-			} finally {
-				setIsLoading(false);
-			}
-		},
-		[connectionParams, createAccount, checkIn, handleConnectionSuccess],
-	);
-
-	return {
-		isLoading,
-		connectAccount,
-		handleClose,
-		connectionParams: connectionParams?.data as
-			| CloudintegrationtypesCredentialsDTO
-			| undefined,
-		isConnectionParamsLoading,
-		submitError,
-		clearSubmitError,
-	};
-}

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