enh(dashboard-v2): show the variable clear only where it can act

The clear icon appeared on hover of the closed control — an action in a row of
variable pills whose result you cannot see, since the list it clears is not on
screen — and it committed the default immediately in that state. It was also offered
while ALL was selected, where the shared control refuses to empty the selection, so
the icon sat there doing nothing.

It now exists only while the list is open, and not while every option is selected:
unchecking ALL in the list is the way out of that. Clicking it empties the list and
commits nothing; closing fills in whatever the variable should hold — its configured
default, else ALL where it offers one, else the first option.

.github/workflows/integrationci.yaml

@@ -54,6 +54,7 @@ jobs:
           - querierscalar
           - queriercommon
           - rawexportdata
+          - promqlconformance
           - querierauthz
           - role
           - rootuser

cmd/authz.go

@@ -93,9 +93,13 @@ func runGenerateAuthz(_ context.Context) error {
 	registry := coretypes.NewRegistry()
 
 	allowedResources := map[string]bool{
-		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():           true,
-		coretypes.NewResourceRef(coretypes.ResourceRole).String():                     true,
-		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():                true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                          true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceLogs).String():         true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
+		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
 	}
 
 	allowedTypes := map[string]bool{}

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

@@ -1496,6 +1496,9 @@ components:
       - redis
       - cloudsql_postgres
       - memorystore_redis
+      - computeengine
+      - gke
+      - cloudstorage
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -9934,14 +9937,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
@@ -9991,14 +9989,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/docs/authz-guide.md

@@ -0,0 +1,136 @@
+# AuthZ Guide
+
+How to structure a page so it works with the permission system.
+
+We are migrating from the `ADMIN | EDITOR | VIEWER` roles to per-action checks. Instead of granting `VIEWER` and
+exposing everything, a user can now be granted access to a single resource, eg: `Logs` only.
+
+- [Prerequisites](#prerequisites)
+- [Core rules](#core-rules)
+- [Page patterns](#page-patterns)
+- [What "blocked" means](#what-blocked-means)
+- [Migration checklist](#migration-checklist)
+- [Testing](#testing)
+
+## Prerequisites
+
+Check whether the resource your page represents is supported: see
+[permissions.type.ts](../src/lib/authz/hooks/useAuthZ/permissions.type.ts) for the current resources and their allowed
+verbs.
+
+**If the resource is not listed there, skip authz for now**. The backend does not enforce it yet, so any frontend
+check would be decorative. Revisit once the resource is generated into that file (it is auto-generated from the
+backend).
+
+## Core rules
+
+These hold for every page. The per-pattern sections below only add to them.
+
+1. **A page is always reachable, regardless of permission.** The intended action must be known before permission can
+   be checked, so the route renders first and individual pieces are gated.
+2. **`update` requires both `read` and `update`.** A user who can write but cannot read the current value must not get
+   an edit affordance.
+3. **`delete` is independent of `read`.** Delete controls stay visible for a user who holds `delete` but not `read`.
+4. **Never gate per row.** If a user can `list`, render every row. Check `read` only when the row is opened (drawer or
+   detail route).
+5. **Gate the narrowest thing that works**, a button over a section, a section over a page.
+6. **A resource may be gated while a sub-resource is not.** A user without `read` on Service Accounts can still hold
+   `create` on API Keys, so blocking the outer container would hide work they are allowed to do.
+7. **Verbs not covered here** (`attach`, `detach`, `assignee`) behave like `delete`: gate the control that triggers
+   them, not the surrounding content.
+
+## Page patterns
+
+### List page
+
+![Visual rules for structuring a list page](./assets/list-example.svg)
+
+Without `list`, but with any of `read` / `create` / `update`, only the table is blocked:
+
+- Title, description, search filters and action buttons stay visible.
+- Filters and any control that drives the table are non-interactive.
+- The create button stays enabled if the user holds `create`.
+
+### Edit page
+
+![Visual rules for structuring an edit page](./assets/edit-example.svg)
+
+Without `read`:
+
+- Block the content with `withAuthZContent`, not the whole route.
+- Keep delete visible (rule 3).
+- Keep update blocked (rule 2).
+
+### Drawer
+
+![Visual rules for structuring a drawer](./assets/drawer-example.svg)
+
+Without `read`:
+
+- Block the drawer body, not the drawer itself.
+- Prefer routing that carries the resource ID in the URL, so delete stays reachable without `read`.
+- Keep update blocked (rule 2).
+- Watch for sub-resources the user may still be allowed to act on (rule 6).
+
+### Create
+
+Without `create`:
+
+| Entry point           | Gate with                                                     |
+| --------------------- | ------------------------------------------------------------- |
+| Button                | `AuthZButton`                                                 |
+| Dedicated create page | `withAuthZPage`                                               |
+| Create drawer opened directly (deep link) | `withAuthZContent` on the body + `AuthZButton` on footer actions |
+
+### Delete
+
+Gate the control with `AuthZButton`, or `AuthZTooltip` for a non-button trigger such as an icon or menu item.
+
+### Quick filters
+
+![Visual rules for structuring a page with quick filters](./assets/quick-filters-example.svg)
+
+## What "blocked" means
+
+Blocking is always a visible denial, never a silent removal. Use the components in
+[`lib/authz/components`](../src/lib/authz/components/README.md) rather than hand-rolling a check, they carry the
+denial message and the loading state.
+
+| Scope           | Component                                 | Denied state                                |
+| --------------- | ----------------------------------------- | ------------------------------------------- |
+| Button          | `AuthZButton`                             | Disabled + tooltip                          |
+| Any element      | `AuthZTooltip`                            | Disabled child + tooltip                    |
+| Section         | `withAuthZContent` / `AuthZGuardContent`  | Inline `PermissionDeniedCallout`            |
+| Page / route    | `withAuthZPage` / `AuthZGuardPage`        | `PermissionDeniedFullPage`                  |
+| Custom fallback | `withAuthZ` / `AuthZGuard`                | Whatever you pass as `fallback`             |
+
+Prefer the HOC (`withAuthZ*`); reach for the JSX guard (`AuthZGuard*`) when the gate depends on conditional rendering
+and an HOC cannot express it. The components README has the full decision tree and how to build the `checks` array.
+
+## Migration checklist
+
+Use the existing components. Create a new one only if none fit.
+
+- [ ] Can I apply a `withAuthZ*` variant directly, or must I extract the content into a component first?
+  - If extraction is needed, declare the new content component in the same file to keep the diff small, then move it
+    to its own file in a follow-up commit or PR.
+- [ ] Is the layout structured to respect the [core rules](#core-rules)?
+  - If not, raise it in the frontend Slack channel before reshaping the page.
+- [ ] Am I gating a shared component rather than a page or section?
+  - If so, it must stay functional with no permission. Example: the Query Builder works without field suggestions when
+    the user cannot read them.
+
+## Testing
+
+### Devtool
+
+Press `Cmd + K` (`Ctrl + K` on Windows/Linux) to open the shortcuts, search for `AuthZ`, and pick the first
+result. The devtool simulates granted and denied permissions across the UI.
+
+Available only in local development, it is stripped from production builds.
+
+### Unit tests
+
+[`lib/authz/utils/README.md`](../src/lib/authz/utils/README.md) covers the `*.authz.test.tsx` naming convention, the
+MSW handlers (`setupAuthzAdmin`, `setupAuthzDenyAll`, `setupAuthzDeny`, `setupAuthzAllow`,
+`setupAuthzGrantByPrefix`), and how to test the loading state.

frontend/src/AppRoutes/Private.tsx

@@ -14,7 +14,10 @@ import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { USER_ROLES } from 'types/roles';
-import { routePermission } from 'utils/permission';
+import {
+	routePermission,
+	routeWithInitialAuthZSupport,
+} from 'utils/permission';
 
 import routes, {
 	LIST_LICENSES,
@@ -42,7 +45,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
-
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -226,7 +228,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (isPrivate) {
 			if (isLoggedInState) {
 				const route = routePermission[key];
-				if (route && route.find((e) => e === user.role) === undefined) {
+				const hasInitialAuthZSupport = Object.hasOwn(
+					routeWithInitialAuthZSupport,
+					key,
+				);
+
+				if (
+					route &&
+					route.find((e) => e === user.role) === undefined &&
+					hasInitialAuthZSupport === false
+				) {
 					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
 				}
 			} else {

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -17,6 +17,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { ROLES, USER_ROLES } from 'types/roles';
+import { routeWithInitialAuthZSupport } from 'utils/permission';
 
 import PrivateRoute from '../Private';
 
@@ -178,6 +179,7 @@ function createMockAppContext(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
+		isFetchingUserPreferences: false,
 		userFetchError: null,
 		activeLicenseFetchError: null,
 		hostsFetchError: null,
@@ -198,24 +200,39 @@ function createMockAppContext(
 	};
 }
 
+// Roles that no authz-aware route grants through the legacy routePermission table
+const DENIED_ROLES: ROLES[] = [
+	USER_ROLES.ANONYMOUS as ROLES,
+	USER_ROLES.AUTHOR as ROLES,
+];
+
+const PERMITTED_ROLES: ROLES[] = [
+	USER_ROLES.ADMIN as ROLES,
+	USER_ROLES.EDITOR as ROLES,
+	USER_ROLES.VIEWER as ROLES,
+];
+
+interface AuthzRouteCase {
+	path: string;
+	deniedRoles: ROLES[];
+}
+
 interface RenderPrivateRouteOptions {
 	initialRoute?: string;
 	appContext?: Partial<IAppContext>;
 	isCloudUser?: boolean;
 }
 
-function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
-	const {
-		initialRoute = ROUTES.HOME,
-		appContext = {},
-		isCloudUser = true,
-	} = options;
+function buildPrivateRouteTree(
+	options: RenderPrivateRouteOptions,
+): ReactElement {
+	const { initialRoute = ROUTES.HOME, appContext = {} } = options;
 
-	mockIsCloudUser = isCloudUser;
+	const contextValue = createMockAppContext({
+		...appContext,
+	});
 
-	const contextValue = createMockAppContext(appContext);
-
-	render(
+	return (
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
@@ -229,10 +246,15 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>
-		</QueryClientProvider>,
+		</QueryClientProvider>
 	);
 }
 
+function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
+	mockIsCloudUser = options.isCloudUser ?? true;
+	render(buildPrivateRouteTree(options));
+}
+
 // Generic assertion helpers for navigation behavior
 // Using location-based assertions since Private.tsx now uses Redirect component
 
@@ -1432,6 +1454,25 @@ describe('PrivateRoute', () => {
 
 			assertStaysOnRoute(ROUTES.GET_STARTED_WITH_CLOUD);
 		});
+
+		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
+			'should render the unauthorized page for a %s instead of bouncing off it',
+			(role) => {
+				// routePermission.UN_AUTHORIZED must grant every role: a role denied here
+				// is redirected to /un-authorized and then redirected away from it again,
+				// which loops until React bails out with a blank screen.
+				renderPrivateRoute({
+					initialRoute: ROUTES.UN_AUTHORIZED,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(ROUTES.UN_AUTHORIZED);
+				assertRendersChildren();
+			},
+		);
 	});
 
 	describe('Edge Cases', () => {
@@ -1477,6 +1518,174 @@ describe('PrivateRoute', () => {
 		});
 	});
 
+	describe('AuthZ Support (routeWithInitialAuthZSupport)', () => {
+		// Routes in routeWithInitialAuthZSupport always bypass legacy role check
+		const AUTHZ_ROUTE_CASES: Record<
+			keyof typeof routeWithInitialAuthZSupport,
+			AuthzRouteCase
+		> = {
+			// Everything under /settings resolves to the non-exact SETTINGS route
+			SETTINGS: { path: ROUTES.SETTINGS, deniedRoles: DENIED_ROLES },
+			MY_SETTINGS: { path: ROUTES.MY_SETTINGS, deniedRoles: DENIED_ROLES },
+			ROLES_SETTINGS: { path: ROUTES.ROLES_SETTINGS, deniedRoles: DENIED_ROLES },
+			ROLE_CREATE: { path: ROUTES.ROLE_CREATE, deniedRoles: DENIED_ROLES },
+			ROLE_DETAILS: {
+				path: ROUTES.ROLE_DETAILS.replace(':roleId', 'role-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			ROLE_EDIT: {
+				path: ROUTES.ROLE_EDIT.replace(':roleId', 'role-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			SERVICE_ACCOUNTS_SETTINGS: {
+				path: ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+				deniedRoles: DENIED_ROLES,
+			},
+			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
+			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
+			TRACE_DETAIL: {
+				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			TRACE_DETAIL_OLD: {
+				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
+			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
+			// route definition comes last, and both keys are authz-aware either way.
+			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
+			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
+			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
+			OLD_LOGS_EXPLORER: {
+				path: ROUTES.OLD_LOGS_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER: {
+				path: ROUTES.METRICS_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER_EXPLORER: {
+				path: ROUTES.METRICS_EXPLORER_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
+			METRICS_EXPLORER_VOLUME_CONTROL: {
+				path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
+				deniedRoles: DENIED_ROLES,
+			},
+			METER: { path: ROUTES.METER, deniedRoles: DENIED_ROLES },
+			METER_EXPLORER: { path: ROUTES.METER_EXPLORER, deniedRoles: DENIED_ROLES },
+			// SUPPORT already grants ANONYMOUS in routePermission, so only AUTHOR
+			// exercises the redirect branch here.
+			SUPPORT: {
+				path: ROUTES.SUPPORT,
+				deniedRoles: [USER_ROLES.AUTHOR as ROLES],
+			},
+		};
+
+		const authzRouteRolePairs: [string, string, ROLES][] = Object.entries(
+			AUTHZ_ROUTE_CASES,
+		).flatMap(([name, { path, deniedRoles }]) =>
+			deniedRoles.map((role): [string, string, ROLES] => [name, path, role]),
+		);
+
+		// Routes with no authz check - legacy role check still applies
+		const NON_AUTHZ_ROUTE_CASES: [string, string, ROLES][] = [
+			['ALERTS_NEW', ROUTES.ALERTS_NEW, USER_ROLES.VIEWER as ROLES],
+			['LIST_LICENSES', ROUTES.LIST_LICENSES, USER_ROLES.EDITOR as ROLES],
+			['ONBOARDING', ROUTES.ONBOARDING, USER_ROLES.VIEWER as ROLES],
+			['APPLICATION', ROUTES.APPLICATION, USER_ROLES.ANONYMOUS as ROLES],
+			[
+				'METRICS_EXPLORER_VIEWS',
+				ROUTES.METRICS_EXPLORER_VIEWS,
+				USER_ROLES.ANONYMOUS as ROLES,
+			],
+		];
+
+		it.each(authzRouteRolePairs)(
+			'should not redirect %s (%s) for role %s - authz routes bypass legacy role check',
+			(_name, path, role) => {
+				// Routes in routeWithInitialAuthZSupport always bypass the legacy role check.
+				// Authorization is handled by downstream components via fine-grained authz.
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(path);
+				assertRendersChildren();
+			},
+		);
+
+		it.each([...PERMITTED_ROLES, ...DENIED_ROLES])(
+			'should not redirect a %s from an authz-aware route',
+			(role) => {
+				// All roles pass through - authorization handled downstream
+				renderPrivateRoute({
+					initialRoute: ROUTES.LOGS_EXPLORER,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				assertStaysOnRoute(ROUTES.LOGS_EXPLORER);
+				assertRendersChildren();
+			},
+		);
+
+		it.each(NON_AUTHZ_ROUTE_CASES)(
+			'should redirect %s (%s) for role %s - non-authz routes use legacy role check',
+			async (_name, path, role) => {
+				// Routes NOT in routeWithInitialAuthZSupport still use legacy role check
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: true,
+						user: createMockUser({ role }),
+					},
+				});
+
+				await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
+			},
+		);
+
+		it.each(authzRouteRolePairs)(
+			'should still redirect unauthenticated users away from %s (%s) with role %s',
+			async (_name, path, role) => {
+				// The authz bypass only relaxes the role check, never the login check.
+				renderPrivateRoute({
+					initialRoute: path,
+					appContext: {
+						isLoggedIn: false,
+						user: createMockUser({ role }),
+					},
+				});
+
+				await assertRedirectsTo(ROUTES.LOGIN);
+			},
+		);
+
+		it('should still redirect to workspace locked from an authz-aware route', async () => {
+			// Workspace guards run before the role check and must not be bypassed.
+			renderPrivateRoute({
+				initialRoute: ROUTES.LOGS_EXPLORER,
+				appContext: {
+					isLoggedIn: true,
+					isFetchingActiveLicense: false,
+					activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD }),
+					trialInfo: createMockTrialInfo({ workSpaceBlock: true }),
+					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
+				},
+				isCloudUser: true,
+			});
+
+			await assertRedirectsTo(ROUTES.WORKSPACE_LOCKED);
+		});
+	});
+
 	describe('Old channel route redirects', () => {
 		it.each([
 			['/settings/channels', '/alerts', 'tab=Channels'],

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

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

frontend/src/api/ErrorResponseHandlerV2.ts

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

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

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

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

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

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

@@ -2815,6 +2815,9 @@ export enum CloudintegrationtypesServiceIDDTO {
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
+	computeengine = 'computeengine',
+	gke = 'gke',
+	cloudstorage = 'cloudstorage',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -10204,14 +10207,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;
 	/**
@@ -10224,14 +10219,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/assets/Logos/gcp-cloud-storage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200" height="800" viewBox="-19.2 -28.483 166.401 170.898"><g transform="translate(0 -7.034)"><linearGradient id="a" x1="64" x2="64" y1="7.034" y2="120.789" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4387fd"/><stop offset="1" stop-color="#4683ea"/></linearGradient><path fill="url(#a)" d="M27.79 115.217 1.54 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.96-5.75h52.5a11.5 11.5 0 0 1 9.959 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.959 5.75h-52.5a11.5 11.5 0 0 1-9.96-5.75z"/></g><g transform="translate(0 -7.034)"><defs><path id="b" d="M27.791 115.217 1.541 69.749a11.5 11.5 0 0 1 0-11.499l26.25-45.467a11.5 11.5 0 0 1 9.959-5.75h52.5a11.5 11.5 0 0 1 9.96 5.75l26.25 45.467a11.5 11.5 0 0 1 0 11.5l-26.25 45.466a11.5 11.5 0 0 1-9.96 5.75h-52.5a11.5 11.5 0 0 1-9.959-5.75z"/></defs><clipPath id="c"><use xlink:href="#b" width="100%" height="100%" overflow="visible"/></clipPath><path d="m49.313 53.875-7.01 6.99 5.957 5.958-5.898 10.476 44.635 44.636 10.816.002L118.936 84 85.489 50.55z" clip-path="url(#c)" opacity=".07"/></g><path fill="#fff" d="M84.7 43.236H43.264c-.667 0-1.212.546-1.212 1.214v8.566c0 .666.546 1.212 1.212 1.212H84.7c.667 0 1.213-.546 1.213-1.212v-8.568c0-.666-.545-1.213-1.212-1.213m-6.416 7.976a2.484 2.484 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477c1.37 0 2.48 1.103 2.48 2.477a2.48 2.48 0 0 1-2.48 2.48m6.415 8.491-41.436.002c-.667 0-1.212.546-1.212 1.214v8.565c0 .666.546 1.213 1.212 1.213H84.7c.667 0 1.213-.547 1.213-1.213v-8.567c0-.666-.545-1.214-1.212-1.214m-6.416 7.976a2.483 2.483 0 0 1-2.477-2.48 2.475 2.475 0 0 1 2.477-2.477 2.48 2.48 0 1 1 0 4.956"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#aecbfa;}.cls-2{fill:#669df6;}.cls-3{fill:#4285f4;}.cls-4{fill:#fff;}</style></defs><title>Icon_24px_CloudStorage_Color</title><g data-name="Product Icons"><rect class="cls-1" x="2" y="4" width="20" height="7"/><rect class="cls-2" x="20" y="4" width="2" height="7"/><polygon class="cls-3" points="22 4 20 4 20 11 22 4"/><rect class="cls-2" x="2" y="4" width="2" height="7"/><rect class="cls-4" x="6" y="7" width="6" height="1"/><rect class="cls-4" x="15" y="6" width="3" height="3" rx="1.5"/><rect class="cls-1" x="2" y="13" width="20" height="7"/><rect class="cls-2" x="20" y="13" width="2" height="7"/><polygon class="cls-3" points="22 13 20 13 20 20 22 13"/><rect class="cls-2" x="2" y="13" width="2" height="7"/><rect class="cls-4" x="6" y="16" width="6" height="1"/><rect class="cls-4" x="15" y="15" width="3" height="3" rx="1.5"/></g></svg>

frontend/src/assets/Logos/gcp-gke.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19.73 6.56a1.73 1.73 0 0 0-1.68 1.68 1.83 1.83 0 0 0 .89 1.48v6.9l-5.16 3.06.8 1.28 5.55-3.25a.84.84 0 0 0 .4-.69v-7.3a1.64 1.64 0 0 0 .89-1.48 1.61 1.61 0 0 0-1.69-1.68" style="fill:#aecbfa"/><path d="m18 5.48-5.61-3.16a1.18 1.18 0 0 0-.79 0L5.25 6a1.72 1.72 0 0 0-2.68 1.35A1.73 1.73 0 0 0 4.26 9a1.73 1.73 0 0 0 1.68-1.65L12 3.9l5.15 3ZM11.2 18.5a1.57 1.57 0 0 0-.89.29l-5.16-3V9.92H3.56v6.31a.84.84 0 0 0 .4.69L9.52 20v.09a1.69 1.69 0 0 0 3.37 0 1.65 1.65 0 0 0-1.69-1.59" data-name="Path" style="fill:#aecbfa"/><path d="M16.96 8.63 12.1 5.78 7.13 8.63l4.97 2.77z" data-name="Path" style="fill:#669df6"/><path d="M12.1 12.38 6.84 9.32v2.47l5.26 2.96zM12.1 15.73l-5.26-3.05v2.07l5.26 3.06z" style="fill:#669df6"/><path d="M12.09 12.38v2.37l5.26-3.06V9.33Zm4.32-.94a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76M12.09 15.73v2.07l5.26-3.05v-2.07Zm4.32-1.07a.38.38 0 1 1 0-.76.38.38 0 0 1 0 .76" style="fill:#4285f4"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#4285f4;}.cls-1,.cls-2,.cls-4{fill-rule:evenodd;}.cls-2{fill:#669df6;}.cls-3,.cls-4{fill:#aecbfa;}</style></defs><title>Icon_24px_K8Engine_Color</title><g data-name="Product Icons"><g ><polygon class="cls-1" points="14.68 13.06 19.23 15.69 19.23 16.68 14.29 13.83 14.68 13.06"/><polygon class="cls-2" points="9.98 13.65 4.77 16.66 4.45 15.86 9.53 12.92 9.98 13.65"/><rect class="cls-3" x="11.55" y="3.29" width="0.86" height="5.78"/><path class="cls-4" d="M3.25,7V17L12,22l8.74-5V7L12,2Zm15.63,8.89L12,19.78,5.12,15.89V8.11L12,4.22l6.87,3.89v7.78Z"/><polygon class="cls-4" points="11.98 11.5 15.96 9.21 11.98 6.91 8.01 9.21 11.98 11.5"/><polygon class="cls-2" points="11.52 12.3 7.66 10.01 7.66 14.6 11.52 16.89 11.52 12.3"/><polygon class="cls-1" points="12.48 12.3 12.48 16.89 16.34 14.6 16.34 10.01 12.48 12.3"/></g></g></svg>

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/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -23,13 +23,6 @@
 			font-weight: 400;
 			line-height: 20px; /* 142.857% */
 			letter-spacing: -0.07px;
-
-			.cloud-service-data-collected-table-heading-info {
-				display: inline-flex;
-				align-items: center;
-				color: var(--l3-foreground);
-				cursor: help;
-			}
 		}
 
 		.cloud-service-data-collected-table-logs {
@@ -39,9 +32,3 @@
 		}
 	}
 }
-
-.cloud-service-data-collected-table-tooltip {
-	max-width: 280px;
-	white-space: normal;
-	word-break: break-word;
-}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -3,19 +3,16 @@ import {
 	CloudintegrationtypesCollectedLogAttributeDTO,
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { BarChart, ScrollText } from '@signozhq/icons';
 
 import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
-	metricsInfoTooltip,
 }: {
 	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
 	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
-	metricsInfoTooltip?: string;
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -87,25 +84,6 @@ function CloudServiceDataCollected({
 					<div className="cloud-service-data-collected-table-heading">
 						<BarChart size={14} />
 						Metrics
-						{metricsInfoTooltip && (
-							<TooltipProvider>
-								<TooltipSimple
-									title={metricsInfoTooltip}
-									side="top"
-									tooltipContentProps={{
-										className: 'cloud-service-data-collected-table-tooltip',
-									}}
-								>
-									<span
-										className="cloud-service-data-collected-table-heading-info"
-										aria-label="About the metrics listed below"
-										data-testid="data-collected-metrics-info"
-									>
-										<Info size={12} />
-									</span>
-								</TooltipSimple>
-							</TooltipProvider>
-						)}
 					</div>
 					<Table
 						columns={metricsColumns}
@@ -119,8 +97,4 @@ function CloudServiceDataCollected({
 	);
 }
 
-CloudServiceDataCollected.defaultProps = {
-	metricsInfoTooltip: undefined,
-};
-
 export default CloudServiceDataCollected;

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/LogDetail/index.tsx

@@ -438,7 +438,11 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
+			<div
+				className="log-detail-drawer__content"
+				data-log-detail-ignore="true"
+				data-testid="log-detail-drawer"
+			>
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip

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/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -49,7 +49,11 @@ import { unquote } from 'utils/stringUtils';
 import { getRecentQueries } from 'lib/recentQueries/getRecentQueries';
 import type { SignalType } from 'types/api/v5/queryRange';
 
-import { queryExamples, SUGGESTIONS_SECTION } from './constants';
+import {
+	queryExamples,
+	SUGGESTION_FETCH_DEBOUNCE_MS,
+	SUGGESTIONS_SECTION,
+} from './constants';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -353,7 +357,7 @@ function QuerySearch({
 	);
 
 	const debouncedFetchKeySuggestions = useMemo(
-		() => debounce(fetchKeySuggestions, 300),
+		() => debounce(fetchKeySuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
 		[fetchKeySuggestions],
 	);
 
@@ -584,7 +588,7 @@ function QuerySearch({
 	);
 
 	const debouncedFetchValueSuggestions = useMemo(
-		() => debounce(fetchValueSuggestions, 300),
+		() => debounce(fetchValueSuggestions, SUGGESTION_FETCH_DEBOUNCE_MS),
 		[fetchValueSuggestions],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts

@@ -1,6 +1,8 @@
 export const RECENTS_SECTION = { name: 'Recent searches', rank: 1 } as const;
 export const SUGGESTIONS_SECTION = { name: 'Suggestions', rank: 2 } as const;
 
+export const SUGGESTION_FETCH_DEBOUNCE_MS = 300;
+
 // TODO: move to using TelemetrytypesFieldContextDTO when we migrate getKeySuggestions API (Part of https://github.com/SigNoz/engineering-pod/issues/5289)
 export const FIELD_CONTEXTS = [
 	'attribute',

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -23,6 +23,13 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}),
 }));
 
+// Shrink the suggestion-fetch debounce (300ms in prod) so these integration
+// tests aren't paced by it; coalescing semantics stay intact.
+jest.mock('../QuerySearch/constants', () => ({
+	...jest.requireActual('../QuerySearch/constants'),
+	SUGGESTION_FETCH_DEBOUNCE_MS: 30,
+}));
+
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
 	const handleRunQuery = jest.fn();
 	return {

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/TanStackTableView/TanStackCustomTableRow.tsx

@@ -88,6 +88,7 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
+			data-testid={context?.getRowTestId?.(rowData)}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
@@ -154,6 +155,12 @@ function areTableRowPropsEqual<TData, TItemKey = string>(
 			return false;
 		}
 
+		const prevTestId = prev.context?.getRowTestId?.(prevData) ?? '';
+		const nextTestId = next.context?.getRowTestId?.(nextData) ?? '';
+		if (prevTestId !== nextTestId) {
+			return false;
+		}
+
 		const prevStyle = prev.context?.getRowStyle?.(prevData);
 		const nextStyle = next.context?.getRowStyle?.(nextData);
 		if (prevStyle !== nextStyle) {

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -33,7 +33,6 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 	// Stable references via destructuring, keep them as is
 	const onRowClick = context?.onRowClick;
 	const onRowClickNewTab = context?.onRowClickNewTab;
-	const onRowDeactivate = context?.onRowDeactivate;
 	const isRowActive = context?.isRowActive;
 	const getRowKeyData = context?.getRowKeyData;
 	const rowIndex = row.index;
@@ -52,21 +51,9 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 			}
 
 			const isActive = isRowActive?.(rowData) ?? false;
-			if (isActive && onRowDeactivate) {
-				onRowDeactivate();
-			} else {
-				onRowClick?.(rowData, itemKey);
-			}
+			onRowClick?.(rowData, itemKey, { isActive });
 		},
-		[
-			isRowActive,
-			onRowDeactivate,
-			onRowClick,
-			onRowClickNewTab,
-			rowData,
-			getRowKeyData,
-			rowIndex,
-		],
+		[isRowActive, onRowClick, onRowClickNewTab, rowData, getRowKeyData, rowIndex],
 	);
 
 	if (itemKind === 'expansion') {
@@ -120,7 +107,6 @@ function areRowCellsPropsEqual<TData>(
 		prev.columnVisibilityKey === next.columnVisibilityKey &&
 		prev.context?.onRowClick === next.context?.onRowClick &&
 		prev.context?.onRowClickNewTab === next.context?.onRowClickNewTab &&
-		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
 		prev.context?.isRowActive === next.context?.isRowActive &&
 		prev.context?.getRowKeyData === next.context?.getRowKeyData &&
 		prev.context?.renderRowActions === next.context?.renderRowActions &&

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -92,11 +92,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		getGroupKey,
 		getRowStyle,
 		getRowClassName,
+		getRowTestId,
 		isRowActive,
 		renderRowActions,
 		onRowClick,
 		onRowClickNewTab,
-		onRowDeactivate,
 		onSort,
 		activeRowIndex,
 		renderExpandedRow,
@@ -378,11 +378,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
+			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
-			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			colCount: visibleColumnsCount,
@@ -396,11 +396,11 @@ function TanStackTableInner<TData, TItemKey = string>(
 		[
 			getRowStyle,
 			getRowClassName,
+			getRowTestId,
 			isRowActive,
 			renderRowActions,
 			onRowClick,
 			onRowClickNewTab,
-			onRowDeactivate,
 			renderExpandedRow,
 			getRowKeyData,
 			visibleColumnsCount,

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

@@ -85,7 +85,9 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: false,
+		});
 	});
 
 	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
@@ -117,17 +119,19 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '', {
+			isActive: false,
+		});
 	});
 
-	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+	it('calls onRowClick with isActive: true when the row is active', async () => {
+		// The table no longer owns open/close — it reports the active state and the
+		// consumer routes the click. An active row must still fire onRowClick.
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
-		const onRowDeactivate = jest.fn();
 		const ctx: TableRowContext<Row> = {
 			colCount: 1,
 			onRowClick,
-			onRowDeactivate,
 			isRowActive: () => true,
 			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
@@ -152,8 +156,44 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowDeactivate).toHaveBeenCalled();
-		expect(onRowClick).not.toHaveBeenCalled();
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: true,
+		});
+	});
+
+	it('calls onRowClick with isActive: false when the row is not active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			isRowActive: () => false,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
+			hasSingleColumn: false,
+			columnOrderKey: '',
+			columnVisibilityKey: '',
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+							columnOrderKey=""
+							columnVisibilityKey=""
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
+			isActive: false,
+		});
 	});
 
 	it('does not render renderRowActions before hover', () => {

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

@@ -611,6 +611,7 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				'1',
+				{ isActive: false },
 			);
 		});
 
@@ -639,6 +640,7 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				{ id: '1', name: 'Item 1' },
+				{ isActive: false },
 			);
 		});
 
@@ -659,15 +661,15 @@ describe('TanStackTableView Integration', () => {
 			expect(row).toHaveClass('tableRowActive');
 		});
 
-		it('calls onRowDeactivate when clicking active row', async () => {
+		it('calls onRowClick with isActive: true when clicking the active row', async () => {
+			// The consumer owns open/close routing — the table just reports the
+			// active state via the click context.
 			const user = userEvent.setup();
 			const onRowClick = jest.fn();
-			const onRowDeactivate = jest.fn();
 
 			renderTanStackTable({
 				props: {
 					onRowClick,
-					onRowDeactivate,
 					isRowActive: (row) => row.id === '1',
 				},
 			});
@@ -678,8 +680,11 @@ describe('TanStackTableView Integration', () => {
 
 			await user.click(screen.getByText('Item 1'));
 
-			expect(onRowDeactivate).toHaveBeenCalled();
-			expect(onRowClick).not.toHaveBeenCalled();
+			expect(onRowClick).toHaveBeenCalledWith(
+				expect.objectContaining({ id: '1' }),
+				expect.anything(),
+				{ isActive: true },
+			);
 		});
 
 		it('opens in new tab on ctrl+click', async () => {

frontend/src/components/TanStackTableView/index.tsx

@@ -116,9 +116,11 @@ export * from './useTableParams';
  *   getItemKey={(row) => row.id}
  *   isRowActive={(row) => row.id === selectedId}
  *   activeRowIndex={selectedIndex}
- *   onRowClick={(row, itemKey) => setSelectedId(itemKey)}
+ *   // The table reports the click + the row's active state; the consumer owns open/close.
+ *   onRowClick={(row, itemKey, { isActive }) =>
+ *     setSelectedId(isActive ? undefined : itemKey)
+ *   }
  *   onRowClickNewTab={(row, itemKey) => openInNewTab(itemKey)}
- *   onRowDeactivate={() => setSelectedId(undefined)}
  *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
  *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
  *   renderRowActions={(row) => <Button size="small">Open</Button>}

frontend/src/components/TanStackTableView/types.ts

@@ -81,15 +81,19 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };
 
+export type RowClickContext = {
+	isActive: boolean;
+};
+
 export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
+	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
-	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
 		rowKey: string,
@@ -178,12 +182,12 @@ export type TanStackTableProps<TData, TItemKey = string> = {
 	getGroupKey?: (row: TData) => Record<string, string>;
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
+	getRowTestId?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: TItemKey) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey, context: RowClickContext) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
-	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (
 		row: TData,

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,6 +1,11 @@
+.warning-popover-overlay {
+	--antd-arrow-background-color: var(--l2-background);
+}
+
 .warning-content {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--l2-background);
 
 	// === SECTION: Summary (Top)
 	&__summary-section {
@@ -10,16 +15,25 @@
 
 	&__summary {
 		display: flex;
+		align-items: flex-start;
 		justify-content: space-between;
+		gap: var(--spacing-8);
 		padding: 16px;
 	}
 
 	&__summary-left {
 		display: flex;
-		align-items: baseline;
+		align-items: flex-start;
 		gap: 8px;
 	}
 
+	&__icon-wrapper {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: var(--spacing-12);
+	}
+
 	&__summary-text {
 		display: flex;
 		flex-direction: column;

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, PopoverProps } from 'antd';
 import ErrorIcon from 'assets/Error';
+import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown, TriangleAlert } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
@@ -30,16 +31,18 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 			{/* Summary Header */}
 			<section className="warning-content__summary-section">
 				<header className="warning-content__summary">
-					<div className="warning-content__summary-left">
-						<div className="warning-content__icon-wrapper">
-							<ErrorIcon />
-						</div>
+					{(warningCode || warningMessage) && (
+						<div className="warning-content__summary-left">
+							<div className="warning-content__icon-wrapper">
+								<ErrorIcon />
+							</div>
 
-						<div className="warning-content__summary-text">
-							<h2 className="warning-content__warning-code">{warningCode}</h2>
-							<p className="warning-content__warning-message">{warningMessage}</p>
+							<div className="warning-content__summary-text">
+								<h2 className="warning-content__warning-code">{warningCode}</h2>
+								<p className="warning-content__warning-message">{warningMessage}</p>
+							</div>
 						</div>
-					</div>
+					)}
 
 					{warningUrl && (
 						<div className="warning-content__summary-right">
@@ -154,6 +157,10 @@ function WarningPopover({
 			overlayInnerStyle={{ padding: 0 }}
 			autoAdjustOverflow
 			{...popoverProps}
+			overlayClassName={cx(
+				'warning-popover-overlay',
+				popoverProps.overlayClassName,
+			)}
 		>
 			{children || (
 				<TriangleAlert

frontend/src/constants/localStorage.ts

@@ -45,4 +45,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
+	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
 }

frontend/src/container/AppLayout/index.tsx

@@ -104,6 +104,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		isFetchingFeatureFlags,
 		featureFlagsFetchError,
 		userPreferences,
+		isFetchingUserPreferences,
 		updateChangelog,
 		toggleChangelogModal,
 		showChangelogModal,
@@ -724,12 +725,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, []);
 
-	// Set sidebar as loaded after user preferences are fetched
+	// Set sidebar as loaded after user preferences fetch completes (success or error)
 	useEffect(() => {
-		if (userPreferences !== null) {
+		if (!isFetchingUserPreferences) {
 			setIsSidebarLoaded(true);
 		}
-	}, [userPreferences]);
+	}, [isFetchingUserPreferences]);
 
 	// Use localStorage value as fallback until preferences are loaded
 	const isSideNavPinned = isSidebarLoaded

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,34 +46,14 @@ const EMPTY_FORM_VALUES: ServiceConfigFormValues = {
 	s3BucketsByRegion: {},
 };
 
-const GCP_METRICS_INFO_TOOLTIP =
-	'These are suggested metrics for your OpenTelemetry Collector Configuration. The metrics you actually receive may vary based on the metrics listed in your collector config.';
-
-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,
@@ -118,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({
@@ -172,7 +147,6 @@ function ServiceDetails({
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
 		{
 			query: {
 				enabled: !!serviceId && !cloudAccountId,
@@ -188,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);
@@ -503,11 +477,6 @@ function ServiceDetails({
 				<CloudServiceDataCollected
 					logsData={serviceDetailsData?.dataCollected?.logs || []}
 					metricsData={serviceDetailsData?.dataCollected?.metrics || []}
-					metricsInfoTooltip={
-						type === IntegrationType.GCP_SERVICES
-							? GCP_METRICS_INFO_TOOLTIP
-							: undefined
-					}
 				/>
 			</div>
 		);

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,142 +0,0 @@
-.setupDrawer {
-	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
-	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
-
-	// Input and ComboboxSimple default to --border borders, inherited text and
-	// --muted-foreground placeholders; the drawer wants the dimmer --l2-border with
-	// brighter values and duller placeholders. Backgrounds are left alone — both
-	// components default to transparent and every field sits on an --l2-background
-	// surface already. Focus borders stay at their per-component defaults.
-	--input-border-color: var(--l2-border);
-	--input-hover-border-color: var(--l2-border);
-	--input-foreground: var(--l1-foreground);
-	--input-placeholder-color: var(--l3-foreground);
-	--combobox-trigger-border-color: var(--l2-border);
-
-	// 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.module.scss

@@ -1,64 +0,0 @@
-.body {
-	display: flex;
-	flex-direction: column;
-	gap: 17px;
-	border-radius: 3px;
-}
-
-.connectedAccountDetails {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.connectedAccountDetailsTitle {
-	color: var(--l1-foreground);
-	font-size: 14px;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-20);
-	letter-spacing: -0.07px;
-}
-
-.accountId {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 18px;
-	letter-spacing: -0.06px;
-}
-
-.accountIdValue {
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: var(--font-weight-bold);
-	line-height: 18px;
-	letter-spacing: -0.06px;
-}
-
-.regionSelector {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.regionSelectorTitle {
-	color: var(--l1-foreground);
-	font-size: 14px;
-	font-weight: var(--font-weight-medium);
-	line-height: var(--line-height-20);
-	letter-spacing: -0.07px;
-}
-
-.regionSelectorDescription {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 18px;
-	letter-spacing: -0.06px;
-}
-
-.footer {
-	display: flex;
-	flex-direction: row;
-	gap: var(--spacing-5);
-	justify-content: space-between;
-	width: 100%;
-}

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

@@ -1,156 +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 styles from './AccountSettingsDrawer.module.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}
-			title="Account Settings"
-			direction="right"
-			showCloseButton
-			onOpenChange={(open): void => {
-				if (!open) {
-					handleClose();
-				}
-			}}
-			width="wide"
-			footer={
-				<div className={styles.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={styles.body}>
-					<div className={styles.connectedAccountDetails}>
-						<div className={styles.connectedAccountDetailsTitle}>
-							Connected Account details
-						</div>
-						<div className={styles.accountId}>
-							Account Name:{' '}
-							<span className={styles.accountIdValue}>
-								{account?.providerAccountId}
-							</span>
-						</div>
-					</div>
-
-					{gcpConfig?.deployment_project_id && (
-						<div className={styles.regionSelector}>
-							<div className={styles.regionSelectorTitle}>Deployment project ID</div>
-							<div className={styles.regionSelectorDescription}>
-								{gcpConfig.deployment_project_id}
-							</div>
-						</div>
-					)}
-
-					{gcpConfig?.deployment_region && (
-						<div className={styles.regionSelector}>
-							<div className={styles.regionSelectorTitle}>Deployment region</div>
-							<div className={styles.regionSelectorDescription}>
-								{gcpConfig.deployment_region}
-							</div>
-						</div>
-					)}
-
-					<div className={styles.regionSelector}>
-						<div className={styles.regionSelectorTitle}>Projects to monitor</div>
-						<div className={styles.regionSelectorDescription}>
-							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/GoogleCloudPlatform/__tests__/AccountSettingsDrawer.test.tsx

@@ -1,230 +0,0 @@
-import { render, screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { toast } from '@signozhq/ui/sonner';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-
-import AccountSettingsDrawer from '../EditAccount/AccountSettingsDrawer';
-import {
-	GCP_ACCOUNT_ID,
-	GCP_ACCOUNT_URL,
-	GCP_ACCOUNTS_URL,
-	gcpAccount,
-	gcpAccountConfig,
-	listAccountsResponse,
-} from './mockData';
-
-// `useAccountSettingsDrawer` imports logEvent by relative path, which the
-// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
-// not intercept — so mock the resolved module directly.
-jest.mock('../../../../../api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const onClose = jest.fn();
-const setActiveAccount = jest.fn();
-
-const renderDrawer = (): void => {
-	render(
-		<MockQueryClientProvider>
-			<TooltipProvider>
-				<AccountSettingsDrawer
-					onClose={onClose}
-					account={gcpAccount}
-					setActiveAccount={setActiveAccount}
-				/>
-			</TooltipProvider>
-		</MockQueryClientProvider>,
-	);
-};
-
-/** The antd tags Select renders its text input inside the testId wrapper. */
-const getProjectIdsInput = (): HTMLElement =>
-	within(screen.getByTestId('gcp-edit-project-ids-select')).getByRole(
-		'combobox',
-	);
-
-/** Each selected tag carries an antd "close" icon that removes it. */
-const getProjectIdTagRemoveButtons = (): HTMLElement[] =>
-	within(screen.getByTestId('gcp-edit-project-ids-select')).queryAllByLabelText(
-		'close',
-	);
-
-describe('GCP AccountSettingsDrawer', () => {
-	let updatePayload: Record<string, unknown> | null;
-
-	beforeEach(() => {
-		updatePayload = null;
-
-		server.use(
-			rest.get(GCP_ACCOUNTS_URL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listAccountsResponse)),
-			),
-			rest.put(GCP_ACCOUNT_URL, async (req: RestRequest, res, ctx) => {
-				updatePayload = await req.json();
-				return res(ctx.status(204));
-			}),
-		);
-	});
-
-	it('renders the connected account details and existing project IDs', () => {
-		renderDrawer();
-
-		expect(screen.getByText(gcpAccount.providerAccountId)).toBeInTheDocument();
-		expect(
-			screen.getByText(gcpAccountConfig.deployment_project_id),
-		).toBeInTheDocument();
-		expect(
-			screen.getByText(gcpAccountConfig.deployment_region),
-		).toBeInTheDocument();
-
-		gcpAccountConfig.project_ids.forEach((projectId) => {
-			expect(screen.getByTitle(projectId)).toBeInTheDocument();
-		});
-	});
-
-	it('keeps save disabled until the project IDs actually change', async () => {
-		const user = userEvent.setup();
-		renderDrawer();
-
-		expect(screen.getByTestId('gcp-update-account-btn')).toBeDisabled();
-
-		await user.type(getProjectIdsInput(), 'project-c,');
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
-		});
-	});
-
-	it('sends the updated project IDs while preserving the immutable deployment fields', async () => {
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await user.type(getProjectIdsInput(), 'project-c,');
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('gcp-update-account-btn'));
-
-		await waitFor(() => {
-			expect(updatePayload).not.toBeNull();
-		});
-
-		expect(updatePayload).toStrictEqual({
-			config: {
-				gcp: {
-					deploymentRegion: gcpAccountConfig.deployment_region,
-					deploymentProjectId: gcpAccountConfig.deployment_project_id,
-					projectIds: ['project-a', 'project-b', 'project-c'],
-				},
-			},
-		});
-
-		await waitFor(() => {
-			expect(setActiveAccount).toHaveBeenCalledWith({
-				...gcpAccount,
-				config: {
-					deployment_region: gcpAccountConfig.deployment_region,
-					deployment_project_id: gcpAccountConfig.deployment_project_id,
-					project_ids: ['project-a', 'project-b', 'project-c'],
-				},
-			});
-		});
-		expect(onClose).toHaveBeenCalledTimes(1);
-		expect(toast.success).toHaveBeenCalledWith(
-			'Account settings updated successfully',
-			expect.anything(),
-		);
-	});
-
-	it('blocks the update and shows a validation error when every project ID is removed', async () => {
-		const user = userEvent.setup();
-		renderDrawer();
-
-		// Strip every tag via its remove icon; the list shrinks as we go.
-		while (getProjectIdTagRemoveButtons().length > 0) {
-			// eslint-disable-next-line no-await-in-loop
-			await user.click(getProjectIdTagRemoveButtons()[0]);
-		}
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('gcp-update-account-btn'));
-
-		await waitFor(() => {
-			expect(
-				screen.getByText('Please add at least one project ID'),
-			).toBeInTheDocument();
-		});
-		expect(updatePayload).toBeNull();
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('surfaces a toast and keeps the drawer open when the update fails', async () => {
-		server.use(
-			rest.put(GCP_ACCOUNT_URL, (_req, res, ctx) =>
-				res(
-					ctx.status(500),
-					ctx.json({ status: 'error', error: { message: 'update failed' } }),
-				),
-			),
-		);
-
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await user.type(getProjectIdsInput(), 'project-c,');
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-update-account-btn')).toBeEnabled();
-		});
-		await user.click(screen.getByTestId('gcp-update-account-btn'));
-
-		await waitFor(() => {
-			expect(toast.error).toHaveBeenCalledWith(
-				'Failed to update account settings',
-				expect.anything(),
-			);
-		});
-		expect(setActiveAccount).not.toHaveBeenCalled();
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('disconnects the account with the GCP-specific confirmation copy', async () => {
-		let disconnectedId: string | null = null;
-		server.use(
-			rest.delete(`${GCP_ACCOUNTS_URL}/:id`, (req, res, ctx) => {
-				disconnectedId = req.params.id as string;
-				return res(ctx.status(204));
-			}),
-		);
-
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await user.click(screen.getByRole('button', { name: /disconnect/i }));
-
-		await expect(
-			screen.findByText(/manually tear down/i),
-		).resolves.toBeInTheDocument();
-
-		await user.click(screen.getByRole('button', { name: /remove account/i }));
-
-		await waitFor(() => {
-			expect(disconnectedId).toBe(GCP_ACCOUNT_ID);
-		});
-		expect(setActiveAccount).toHaveBeenCalledWith(null);
-		expect(onClose).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/__tests__/CloudAccountSetupDrawer.test.tsx

@@ -1,210 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-
-import CloudAccountSetupDrawer from '../AddNewAccount/CloudAccountSetupDrawer';
-import {
-	checkInResponse,
-	CLOUD_INTEGRATION_ID,
-	connectionCredentials,
-	connectionCredentialsResponse,
-	createAccountResponse,
-	GCP_ACCOUNTS_URL,
-	GCP_CHECK_IN_URL,
-	GCP_CREDENTIALS_URL,
-} from './mockData';
-
-// `useCloudAccountSetupDrawer` imports logEvent by relative path, which the
-// jest.config moduleNameMapper (keyed on the `api/common/logEvent` alias) does
-// not intercept — so mock the resolved module directly.
-jest.mock('../../../../../api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const onClose = jest.fn();
-
-const renderDrawer = (): void => {
-	render(
-		<MockQueryClientProvider>
-			<TooltipProvider>
-				<CloudAccountSetupDrawer onClose={onClose} />
-			</TooltipProvider>
-		</MockQueryClientProvider>,
-	);
-};
-
-describe('GCP CloudAccountSetupDrawer', () => {
-	let createAccountPayload: Record<string, unknown> | null;
-	let checkInPayload: Record<string, unknown> | null;
-
-	beforeEach(() => {
-		createAccountPayload = null;
-		checkInPayload = null;
-
-		server.use(
-			rest.get(GCP_CREDENTIALS_URL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(connectionCredentialsResponse)),
-			),
-			// check_in is registered first — it is a more specific path than
-			// /accounts and msw matches handlers in registration order.
-			rest.post(GCP_CHECK_IN_URL, async (req: RestRequest, res, ctx) => {
-				checkInPayload = await req.json();
-				return res(ctx.status(200), ctx.json(checkInResponse));
-			}),
-			rest.post(GCP_ACCOUNTS_URL, async (req: RestRequest, res, ctx) => {
-				createAccountPayload = await req.json();
-				return res(ctx.status(201), ctx.json(createAccountResponse));
-			}),
-		);
-	});
-
-	it('renders SigNoz-provided credentials as read-only fields', async () => {
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-signoz-api-url-input')).toHaveTextContent(
-				connectionCredentials.sigNozApiUrl,
-			);
-		});
-
-		expect(screen.getByTestId('gcp-signoz-api-key-input')).toHaveTextContent(
-			connectionCredentials.sigNozApiKey,
-		);
-		expect(screen.getByTestId('gcp-ingestion-url-input')).toHaveTextContent(
-			connectionCredentials.ingestionUrl,
-		);
-		expect(screen.getByTestId('gcp-ingestion-key-input')).toHaveTextContent(
-			connectionCredentials.ingestionKey,
-		);
-		expect(screen.getByText('Auto-filled by SigNoz')).toBeInTheDocument();
-	});
-
-	it('blocks submission and surfaces validation errors when the form is empty', async () => {
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
-		});
-
-		await user.click(screen.getByTestId('gcp-connect-account-btn'));
-
-		await waitFor(() => {
-			expect(screen.getByText('Please enter an account name')).toBeInTheDocument();
-		});
-		expect(
-			screen.getByText('Please enter the deployment project ID'),
-		).toBeInTheDocument();
-		expect(screen.getByText('Please select a region')).toBeInTheDocument();
-		expect(
-			screen.getByText('Please add at least one project ID'),
-		).toBeInTheDocument();
-
-		expect(createAccountPayload).toBeNull();
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('creates the account, checks the agent in, and closes the drawer', async () => {
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
-		});
-
-		await user.type(
-			screen.getByTestId('gcp-account-name-input'),
-			'billing@company.com',
-		);
-		await user.type(
-			screen.getByTestId('gcp-deployment-project-id-input'),
-			'my-deployment-project-123',
-		);
-
-		await user.click(screen.getByTestId('gcp-deployment-region-select'));
-		await user.click(await screen.findByText('Mumbai (asia-south1)'));
-
-		const projectIdsInput = document.querySelector(
-			'#gcp-project-ids-select',
-		) as HTMLInputElement;
-		await user.type(projectIdsInput, 'project-a,project-b,');
-
-		await user.click(screen.getByTestId('gcp-connect-account-btn'));
-
-		await waitFor(() => {
-			expect(createAccountPayload).not.toBeNull();
-		});
-
-		expect(createAccountPayload).toStrictEqual({
-			config: {
-				gcp: {
-					deploymentRegion: 'asia-south1',
-					deploymentProjectId: 'my-deployment-project-123',
-					projectIds: ['project-a', 'project-b'],
-				},
-			},
-			// Backend-provided credentials win over anything in the form.
-			credentials: connectionCredentials,
-		});
-
-		await waitFor(() => {
-			expect(checkInPayload).toStrictEqual({
-				providerAccountId: 'billing@company.com',
-				cloudIntegrationId: CLOUD_INTEGRATION_ID,
-				data: {},
-			});
-		});
-
-		await waitFor(() => {
-			expect(onClose).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	it('shows the backend error inline when account creation fails', async () => {
-		server.use(
-			rest.post(GCP_ACCOUNTS_URL, (_req, res, ctx) =>
-				res(
-					ctx.status(400),
-					ctx.json({
-						status: 'error',
-						error: { message: 'deployment project id is not accessible' },
-					}),
-				),
-			),
-		);
-
-		const user = userEvent.setup();
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-connect-account-btn')).toBeEnabled();
-		});
-
-		await user.type(screen.getByTestId('gcp-account-name-input'), 'my-org');
-		await user.type(
-			screen.getByTestId('gcp-deployment-project-id-input'),
-			'my-deployment-project-123',
-		);
-		await user.click(screen.getByTestId('gcp-deployment-region-select'));
-		await user.click(await screen.findByText('Mumbai (asia-south1)'));
-
-		const projectIdsInput = document.querySelector(
-			'#gcp-project-ids-select',
-		) as HTMLInputElement;
-		await user.type(projectIdsInput, 'project-a,');
-
-		await user.click(screen.getByTestId('gcp-connect-account-btn'));
-
-		await waitFor(() => {
-			expect(screen.getByTestId('gcp-connect-error')).toHaveTextContent(
-				'deployment project id is not accessible',
-			);
-		});
-		expect(checkInPayload).toBeNull();
-		expect(onClose).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/Integrations/CloudIntegration/GoogleCloudPlatform/__tests__/mockData.ts

@@ -1,65 +0,0 @@
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
-import {
-	CloudAccount,
-	GCPCloudAccountConfig,
-} from 'container/Integrations/types';
-
-export const GCP_CREDENTIALS_URL =
-	'http://localhost/api/v1/cloud_integrations/gcp/credentials';
-export const GCP_ACCOUNTS_URL =
-	'http://localhost/api/v1/cloud_integrations/gcp/accounts';
-export const GCP_CHECK_IN_URL =
-	'http://localhost/api/v1/cloud_integrations/gcp/accounts/check_in';
-
-export const CLOUD_INTEGRATION_ID = 'ci-gcp-1234';
-
-export const GCP_ACCOUNT_ID = 'acc-gcp-1';
-export const GCP_ACCOUNT_URL = `${GCP_ACCOUNTS_URL}/${GCP_ACCOUNT_ID}`;
-
-export const gcpAccountConfig: GCPCloudAccountConfig = {
-	deployment_region: 'asia-south1',
-	deployment_project_id: 'my-deployment-project-123',
-	project_ids: ['project-a', 'project-b'],
-};
-
-export const gcpAccount: CloudAccount = {
-	id: GCP_ACCOUNT_ID,
-	cloud_account_id: 'gcp-cloud-1',
-	providerAccountId: 'billing@company.com',
-	config: gcpAccountConfig,
-	status: { integration: { last_heartbeat_ts_ms: 1_700_000_000_000 } },
-};
-
-export const listAccountsResponse = {
-	status: 'success',
-	data: { accounts: [] },
-};
-
-/**
- * Credentials the backend hands out on SigNoz Cloud. When present the drawer
- * renders them read-only and sends them back verbatim on submit.
- */
-export const connectionCredentials: CloudintegrationtypesCredentialsDTO = {
-	sigNozApiUrl: 'https://tenant.signoz.cloud',
-	sigNozApiKey: 'signoz-api-key-abc',
-	ingestionUrl: 'https://ingest.us.signoz.cloud',
-	ingestionKey: 'ingestion-key-xyz',
-};
-
-export const connectionCredentialsResponse = {
-	status: 'success',
-	data: connectionCredentials,
-};
-
-export const createAccountResponse = {
-	status: 'success',
-	data: {
-		id: CLOUD_INTEGRATION_ID,
-		connectionArtifact: {},
-	},
-};
-
-export const checkInResponse = {
-	status: 'success',
-	data: {},
-};

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/LLMObservability/AttributeMapping/AttributeMappingsTab/__tests__/AttributeMappingsTab.test.tsx

@@ -15,6 +15,18 @@ jest.mock('@signozhq/ui/sonner', () => ({
 	},
 }));
 
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
+
+// Admin gating on the write controls flows through useAuthZ. Mock it directly
+// (synchronous) so the functional tests stay synchronous; the read-only block
+// below flips it to deny-all.
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 import {
 	GROUPS_ENDPOINT,
 	makeGroupsResponse,
@@ -102,6 +114,8 @@ describe('AttributeMappingsTab (integration)', () => {
 	beforeEach(() => {
 		// Reset URL state between tests — jsdom shares window.location across a file.
 		window.history.pushState(null, '', '/');
+		// Default to an admin; the read-only block overrides this.
+		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
@@ -507,4 +521,55 @@ describe('AttributeMappingsTab (integration)', () => {
 			).resolves.toBeInTheDocument();
 		});
 	});
+
+	// The write APIs (create/update/delete group & mapper) are Admin-only on the
+	// backend, so a non-admin gets a read-only view: the data renders, but every
+	// write control is hidden.
+	describe('read-only (non-admin)', () => {
+		beforeEach(() => {
+			mockedUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+		});
+
+		it('hides the "Add a new group" button', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(screen.queryByTestId('add-group-row')).not.toBeInTheDocument();
+		});
+
+		it('hides the group enable toggle and actions menu', async () => {
+			setupGroups();
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			expect(
+				screen.queryByTestId('group-enabled-group-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('group-actions-group-1'),
+			).not.toBeInTheDocument();
+		});
+
+		it('renders mappers read-only: no "Add mapping" button or row actions', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			setupGroups();
+			setupMappers([makeMapper({ id: 'mapper-1', name: 'gen_ai.request.model' })]);
+			render(<AttributeMappingsTabWithStore />);
+
+			await screen.findByTestId('group-name-group-1');
+			await expandGroup(user);
+
+			// The mapper still renders...
+			await screen.findByTestId('mapper-target-mapper-1');
+			// ...but every write control is gone.
+			expect(screen.queryByTestId('add-mapper-group-1')).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('mapper-enabled-mapper-1'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: 'Mapping actions' }),
+			).not.toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupHeaderActions/GroupHeaderActions.tsx

@@ -1,6 +1,7 @@
 import { Switch } from '@signozhq/ui/switch';
 
 import { DraftGroup } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupActionsMenu from '../GroupActionsMenu/GroupActionsMenu';
 import styles from './GroupHeaderActions.module.scss';
 
@@ -16,7 +17,11 @@ function GroupHeaderActions({
 	onToggle,
 	onEdit,
 	onRemove,
-}: GroupHeaderActionsProps): JSX.Element {
+}: GroupHeaderActionsProps): JSX.Element | null {
+	const canManage = useCanManageAttributeMapping();
+	if (!canManage) {
+		return null;
+	}
 	return (
 		<div
 			className={styles.actions}

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/GroupMappers/GroupMappers.tsx

@@ -11,6 +11,7 @@ import {
 	Mapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import { COLUMN_COUNT } from '../constants';
 import MapperRow from '../MapperRow/MapperRow';
 import MapperRowSkeleton from '../MapperRow/MapperRowSkeleton';
@@ -39,6 +40,7 @@ function GroupMappers({
 	onEditMapper,
 }: GroupMappersProps): JSX.Element {
 	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
+	const canManage = useCanManageAttributeMapping();
 
 	const hasServerId = group.serverId !== null;
 	const { data, isLoading, isError } = useListSpanMappers(
@@ -144,16 +146,20 @@ function GroupMappers({
 		/>
 	));
 
-	// The add-mapping row trails every non-error state (including loading/empty).
+	// The add-mapping row trails every non-error state (including loading/empty),
+	// but only for users who can manage mappings — non-admins get a read-only view.
 	let rows: JSX.Element[];
 	if (isErrorMappers) {
 		rows = [errorRow];
 	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows, addMapperRow];
+		rows = [...skeletonRows];
 	} else if (mapperCount === 0) {
-		rows = [emptyRow, addMapperRow];
+		rows = [emptyRow];
 	} else {
-		rows = [...mapperRows, addMapperRow];
+		rows = [...mapperRows];
+	}
+	if (canManage && !isErrorMappers) {
+		rows.push(addMapperRow);
 	}
 
 	return (

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MapperRow/MapperRow.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { motion } from 'motion/react';
 
 import { DraftMapper } from 'container/LLMObservability/AttributeMapping/types';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import MapperActionsMenu from '../MapperActionsMenu/MapperActionsMenu';
 import styles from './MapperRow.module.scss';
 
@@ -30,6 +31,7 @@ function MapperRow({
 	onRemove,
 	onToggle,
 }: MapperRowProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
 	const sources = mapper.sources ?? [];
 	const visibleSources = sources.slice(0, MAX_VISIBLE_SOURCES);
 	const remainingSources = sources.length - visibleSources.length;
@@ -101,14 +103,16 @@ function MapperRow({
 				)}
 			</td>
 			<td className={cx(styles.cell, styles.actionsCell)}>
-				<div className={styles.rowActions}>
-					<Switch
-						value={mapper.enabled}
-						onChange={(checked): void => onToggle(mapper.localId, checked)}
-						testId={`mapper-enabled-${mapper.localId}`}
-					/>
-					<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
-				</div>
+				{canManage && (
+					<div className={styles.rowActions}>
+						<Switch
+							value={mapper.enabled}
+							onChange={(checked): void => onToggle(mapper.localId, checked)}
+							testId={`mapper-enabled-${mapper.localId}`}
+						/>
+						<MapperActionsMenu mapper={mapper} onEdit={onEdit} onRemove={onRemove} />
+					</div>
+				)}
 			</td>
 		</motion.tr>
 	);

frontend/src/container/LLMObservability/AttributeMapping/AttributeMappingsTab/components/MappingsTable/MappingsTable.tsx

@@ -11,6 +11,7 @@ import {
 	DraftMapper,
 } from 'container/LLMObservability/AttributeMapping/types';
 import { AttributeMappingEditor } from 'container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor';
+import { useCanManageAttributeMapping } from 'container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping';
 import GroupHeader from './GroupHeader/GroupHeader';
 import GroupHeaderActions from './GroupHeaderActions/GroupHeaderActions';
 import GroupMappers from './GroupMappers/GroupMappers';
@@ -33,6 +34,7 @@ function MappingsTable({
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
 	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
 	const drawer = useMapperFormDrawer();
+	const canManage = useCanManageAttributeMapping();
 
 	const { upsertMapper, removeMapper } = editor;
 
@@ -120,18 +122,20 @@ function MappingsTable({
 
 	return (
 		<div className={styles.tableWrapper}>
-			<div className={styles.toolbar}>
-				<Button
-					variant="link"
-					color="primary"
-					prefix={<Plus size={14} />}
-					onClick={onAddGroup}
-					testId="add-group-row"
-					disabled={editor.isLoading}
-				>
-					Add a new group
-				</Button>
-			</div>
+			{canManage && (
+				<div className={styles.toolbar}>
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={onAddGroup}
+						testId="add-group-row"
+						disabled={editor.isLoading}
+					>
+						Add a new group
+					</Button>
+				</div>
+			)}
 
 			{isEmpty ? (
 				<div className={styles.tableState} data-testid="mapper-groups-empty">

frontend/src/container/LLMObservability/AttributeMapping/LLMObservabilityAttributeMapping.tsx

@@ -8,12 +8,18 @@ import AttributeMappingsTab from './AttributeMappingsTab/AttributeMappingsTab';
 import DiscardChangesDialog from './components/DiscardChangesDialog/DiscardChangesDialog';
 import GroupFormDrawer from './components/GroupFormDrawer/GroupFormDrawer';
 import styles from './LLMObservabilityAttributeMapping.module.scss';
+import TestTab from './TestTab/TestTab';
 import { useAttributeMappingEditor } from './hooks/useAttributeMappingEditor';
 import { useGroupFormDrawer } from './components/GroupFormDrawer/hooks/useGroupFormDrawer';
+import { useTestSpanMapper } from './TestTab/useTestSpanMapper';
+
+const MAPPINGS_TAB_KEY = 'attribute-mappings';
+const TEST_TAB_KEY = 'test';
 
 function LLMObservabilityAttributeMapping(): JSX.Element {
 	const editor = useAttributeMappingEditor();
 	const groupDrawer = useGroupFormDrawer();
+	const spanTest = useTestSpanMapper(editor.snapshot, editor.groups);
 
 	const { discard } = editor;
 	// Discarding wipes the whole working copy, so gate it behind a confirm
@@ -31,7 +37,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 	const tabItems = [
 		{
-			key: 'attribute-mappings',
+			key: MAPPINGS_TAB_KEY,
 			label: 'Attribute Mappings',
 			children: (
 				<AttributeMappingsTab
@@ -42,11 +48,9 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			),
 		},
 		{
-			key: 'test',
+			key: TEST_TAB_KEY,
 			label: 'Test',
-			disabled: true,
-			disabledReason: 'Coming soon',
-			children: null,
+			children: <TestTab spanTest={spanTest} />,
 		},
 	];
 
@@ -71,7 +75,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 			<Tabs
 				testId="attribute-mapping-tabs"
-				defaultValue="attribute-mappings"
+				defaultValue={MAPPINGS_TAB_KEY}
 				items={tabItems}
 			/>
 			{groupDrawer.isOpen && (

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.module.scss

@@ -0,0 +1,54 @@
+.skeleton {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: var(--l1-background);
+}
+
+.line {
+	display: flex;
+	align-items: center;
+	height: 18px;
+}
+
+.lineNumber {
+	flex: 0 0 40px;
+	padding-right: var(--padding-3);
+	text-align: right;
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+	color: var(--l3-foreground);
+	opacity: 0.6;
+	user-select: none;
+}
+
+.lineContent {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.bar {
+	height: 8px;
+	border-radius: var(--radius-1);
+	background: var(--l2-border);
+	animation: jsonSkeletonPulse 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.bar {
+		animation: none;
+	}
+}
+
+@keyframes jsonSkeletonPulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.45;
+	}
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/JsonEditorSkeleton.tsx

@@ -0,0 +1,56 @@
+import styles from './JsonEditorSkeleton.module.scss';
+
+interface SkeletonLine {
+	indent: number;
+	barWidths: number[];
+}
+
+const SKELETON_LINES: SkeletonLine[] = [
+	{ indent: 0, barWidths: [10] },
+	{ indent: 1, barWidths: [90, 10] },
+	{ indent: 2, barWidths: [155, 190] },
+	{ indent: 2, barWidths: [135, 190] },
+	{ indent: 2, barWidths: [150, 50] },
+	{ indent: 2, barWidths: [180, 35] },
+	{ indent: 2, barWidths: [185, 200] },
+	{ indent: 1, barWidths: [14] },
+	{ indent: 1, barWidths: [75, 10] },
+	{ indent: 2, barWidths: [95, 90] },
+	{ indent: 2, barWidths: [170, 85] },
+	{ indent: 1, barWidths: [10] },
+	{ indent: 0, barWidths: [10] },
+];
+
+const INDENT_WIDTH_PX = 14;
+
+function JsonEditorSkeleton(): JSX.Element {
+	return (
+		<div
+			className={styles.skeleton}
+			data-testid="json-editor-skeleton"
+			aria-hidden="true"
+		>
+			{SKELETON_LINES.map((line, lineIndex) => (
+				// eslint-disable-next-line react/no-array-index-key
+				<div key={lineIndex} className={styles.line}>
+					<span className={styles.lineNumber}>{lineIndex + 1}</span>
+					<span
+						className={styles.lineContent}
+						style={{ paddingLeft: line.indent * INDENT_WIDTH_PX }}
+					>
+						{line.barWidths.map((width, barIndex) => (
+							<span
+								// eslint-disable-next-line react/no-array-index-key
+								key={barIndex}
+								className={styles.bar}
+								style={{ width }}
+							/>
+						))}
+					</span>
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default JsonEditorSkeleton;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestResult.tsx

@@ -0,0 +1,121 @@
+import { Badge } from '@signozhq/ui/badge';
+import { SpantypesSpanMapperTestSpanDTO } from 'api/generated/services/sigNoz.schemas';
+import { useMemo } from 'react';
+
+import {
+	AttrChangeStatus,
+	AttrDiffEntry,
+	diffAttributeMaps,
+	formatAttributeValue,
+} from './testPayload';
+import styles from './TestTab.module.scss';
+import { TestTabAttributes, TestTabResource } from './useTestSpanMapper';
+
+interface TestResultProps {
+	index: number;
+	span: SpantypesSpanMapperTestSpanDTO;
+	inputAttributes: TestTabAttributes;
+	inputResource: TestTabResource;
+}
+
+const STATUS_BADGE: Partial<
+	Record<
+		AttrChangeStatus,
+		{ color: 'success' | 'robin' | 'sienna'; label: string }
+	>
+> = {
+	added: { color: 'success', label: 'populated' },
+	changed: { color: 'robin', label: 'remapped' },
+	removed: { color: 'sienna', label: 'moved out' },
+};
+
+const ROW_CLASS: Partial<Record<AttrChangeStatus, string>> = {
+	added: styles.added,
+	removed: styles.removed,
+};
+
+interface ResultSection {
+	key: string;
+	title: string;
+	entries: AttrDiffEntry[];
+}
+
+function TestResult({
+	index,
+	span,
+	inputAttributes,
+	inputResource,
+}: TestResultProps): JSX.Element {
+	const attributeEntries = useMemo(
+		() => diffAttributeMaps(inputAttributes, span.attributes ?? {}),
+		[inputAttributes, span.attributes],
+	);
+	const resourceEntries = useMemo(
+		() => diffAttributeMaps(inputResource, span.resource ?? {}),
+		[inputResource, span.resource],
+	);
+
+	const sections: ResultSection[] = [
+		{
+			key: 'attributes',
+			title: 'Resulting attributes',
+			entries: attributeEntries,
+		},
+	];
+	if (resourceEntries.length > 0) {
+		sections.push({
+			key: 'resource',
+			title: 'Resulting resource',
+			entries: resourceEntries,
+		});
+	}
+
+	return (
+		<div className={styles.resultCard} data-testid={`test-result-${index}`}>
+			{sections.map((section) => (
+				<div
+					key={section.key}
+					className={styles.resultSection}
+					data-testid={`test-result-${index}-${section.key}`}
+				>
+					<div className={styles.resultTitle}>{section.title}</div>
+
+					{section.entries.length === 0 ? (
+						<div className={styles.resultEmpty}>No keys in this map.</div>
+					) : (
+						<div className={styles.attrRows}>
+							{section.entries.map((entry) => {
+								const badge = STATUS_BADGE[entry.status];
+								return (
+									<div
+										key={entry.key}
+										className={`${styles.attrRow} ${ROW_CLASS[entry.status] ?? ''}`}
+									>
+										<span className={styles.attrKey} title={entry.key}>
+											{entry.key}
+										</span>
+										<span
+											className={styles.attrValue}
+											title={formatAttributeValue(entry.value)}
+										>
+											{formatAttributeValue(entry.value)}
+										</span>
+										{badge ? (
+											<Badge color={badge.color} variant="outline">
+												{badge.label}
+											</Badge>
+										) : (
+											<span />
+										)}
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</div>
+			))}
+		</div>
+	);
+}
+
+export default TestResult;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.module.scss

@@ -0,0 +1,177 @@
+.testTab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-6);
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+}
+
+.headerActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	flex-shrink: 0;
+}
+
+.headerText {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.heading {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.description {
+	margin: 0;
+	font-size: var(--periscope-font-size-base);
+	color: var(--l3-foreground);
+}
+
+.body {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+	height: calc(100vh - 320px);
+	min-height: 320px;
+}
+
+.editor {
+	width: 100%;
+	height: 100%;
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	overflow: hidden;
+}
+.validationCallout {
+	width: 100%;
+}
+
+// No top padding so results align with the editor's first line, which sits
+// flush against the top of its own panel.
+.resultsPanel {
+	height: 100%;
+	overflow-y: auto;
+	padding: var(--padding-4);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+// Pre-run empty state that fills the blank right half.
+.placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-2);
+	height: 100%;
+	text-align: center;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.placeholderTitle {
+	font-weight: var(--font-weight-semibold);
+	color: var(--l2-foreground);
+}
+
+.error {
+	padding: var(--padding-3) var(--padding-4);
+	border-radius: var(--radius-2);
+	background: var(--callout-error-background);
+	color: var(--callout-error-title);
+	font-size: var(--periscope-font-size-base);
+}
+
+.results {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.resultCard {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: var(--l1-background);
+}
+
+.resultSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.resultTitle {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-semibold);
+}
+
+.resultEmpty {
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}
+
+.attrRows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.attrRow {
+	display: grid;
+	grid-template-columns: clamp(200px, 40%, 340px) minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) var(--padding-3);
+	border-radius: var(--radius-2);
+	font-family: 'Geist Mono', monospace;
+	font-size: var(--font-size-xs);
+
+	&.added {
+		background: var(--callout-success-background);
+	}
+
+	&.removed {
+		opacity: 0.65;
+
+		.attrKey,
+		.attrValue {
+			text-decoration: line-through;
+		}
+	}
+}
+
+.attrKey,
+.attrValue {
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.attrKey {
+	font-weight: var(--font-weight-medium);
+}
+
+.attrValue {
+	color: var(--l3-foreground);
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/TestTab.tsx

@@ -0,0 +1,162 @@
+import MEditor from '@monaco-editor/react';
+import { Play, RotateCcw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Callout } from '@signozhq/ui/callout';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import styles from './TestTab.module.scss';
+import JsonEditorSkeleton from './JsonEditorSkeleton';
+import TestResult from './TestResult';
+import {
+	defineSignozJsonTheme,
+	SIGNOZ_JSON_THEME_DARK,
+	SIGNOZ_JSON_THEME_LIGHT,
+} from './jsonEditorTheme';
+import { UseTestSpanMapper } from './useTestSpanMapper';
+
+interface TestTabProps {
+	spanTest: UseTestSpanMapper;
+}
+
+function TestTab({ spanTest }: TestTabProps): JSX.Element {
+	const {
+		input,
+		setInput,
+		run,
+		resetToTemplate,
+		isTemplateInput,
+		isRunning,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+		validationError,
+	} = spanTest;
+	const isDarkMode = useIsDarkMode();
+
+	function renderResults(): JSX.Element {
+		if (error) {
+			return (
+				<div className={styles.error} role="alert" data-testid="test-error">
+					{error}
+				</div>
+			);
+		}
+		if (result) {
+			if (result.length === 0) {
+				return (
+					<div className={styles.resultEmpty} data-testid="test-results-empty">
+						No spans returned. The mappers produced no output for this input.
+					</div>
+				);
+			}
+			return (
+				<div className={styles.results} data-testid="test-results">
+					{result.map((span, index) => (
+						<TestResult
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+							index={index}
+							span={span}
+							inputAttributes={testedAttributes ?? {}}
+							inputResource={testedResource ?? {}}
+						/>
+					))}
+				</div>
+			);
+		}
+		return (
+			<div className={styles.placeholder} data-testid="test-results-placeholder">
+				<span className={styles.placeholderTitle}>No results yet</span>
+				<span>
+					Run the test to see which target attributes your mappers populate.
+				</span>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.testTab} data-testid="test-tab">
+			<div className={styles.header}>
+				<div className={styles.headerText}>
+					<h3 className={styles.heading}>Test with sample span</h3>
+					<p className={styles.description}>
+						Paste a JSON span object to see which target attributes get populated and
+						which source key matched.
+					</p>
+				</div>
+
+				<div className={styles.headerActions}>
+					<Button
+						testId="reset-template-button"
+						variant="outlined"
+						color="secondary"
+						prefix={<RotateCcw size={14} />}
+						onClick={resetToTemplate}
+						disabled={isTemplateInput}
+					>
+						Reset to Default Span
+					</Button>
+
+					<Button
+						testId="run-test-button"
+						variant="solid"
+						color="primary"
+						prefix={<Play size={14} />}
+						onClick={run}
+						loading={isRunning}
+						disabled={isRunning || validationError !== null}
+					>
+						Run Test
+					</Button>
+				</div>
+			</div>
+
+			<div className={styles.body}>
+				<div
+					className={styles.editor}
+					data-testid="test-span-input"
+					aria-label="Sample span JSON"
+				>
+					<MEditor
+						language="json"
+						value={input}
+						onChange={(value): void => setInput(value ?? '')}
+						height="100%"
+						loading={<JsonEditorSkeleton />}
+						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
+						beforeMount={defineSignozJsonTheme}
+						options={{
+							minimap: { enabled: false },
+							fontSize: 12,
+							lineNumbers: 'on',
+							wordWrap: 'on',
+							scrollBeyondLastLine: false,
+							formatOnPaste: true,
+							tabSize: 2,
+							automaticLayout: true,
+							scrollbar: { alwaysConsumeMouseWheel: false },
+						}}
+					/>
+				</div>
+
+				<div className={styles.resultsPanel} data-testid="test-results-panel">
+					{renderResults()}
+				</div>
+			</div>
+
+			{validationError && (
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					title={validationError}
+					testId="test-input-error"
+					className={styles.validationCallout}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default TestTab;

frontend/src/container/LLMObservability/AttributeMapping/TestTab/jsonEditorTheme.ts

@@ -0,0 +1,38 @@
+//TODO: This is a local theme for now, but ideally for the editor as well. Just like prettyViewer, we have a theme. We should have a theme for the editor as well.
+import { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+
+export const SIGNOZ_JSON_THEME_DARK = 'signoz-attr-mapping-json-dark';
+export const SIGNOZ_JSON_THEME_LIGHT = 'signoz-attr-mapping-json-light';
+
+const SHARED_THEME = {
+	inherit: true,
+	colors: {
+		'editor.background': '#00000000', // transparent — inherit the panel bg
+	},
+	fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
+	fontSize: 12,
+	fontWeight: 'normal',
+	lineHeight: 18,
+	letterSpacing: -0.06,
+};
+
+export function defineSignozJsonTheme(monaco: Monaco): void {
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_DARK, {
+		...SHARED_THEME,
+		base: 'vs-dark',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_400 },
+			{ token: 'string.value.json', foreground: Color.BG_VANILLA_400 },
+		],
+	});
+
+	monaco.editor.defineTheme(SIGNOZ_JSON_THEME_LIGHT, {
+		...SHARED_THEME,
+		base: 'vs',
+		rules: [
+			{ token: 'string.key.json', foreground: Color.BG_ROBIN_500 },
+			{ token: 'string.value.json', foreground: Color.BG_INK_400 },
+		],
+	});
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/spanInputStorage.ts

@@ -0,0 +1,53 @@
+import get from 'api/browser/localstorage/get';
+import remove from 'api/browser/localstorage/remove';
+import set from 'api/browser/localstorage/set';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+import { parseSpanInput } from './testPayload';
+
+export const SAMPLE_SPAN_JSON = `{
+  "attributes": {
+    "my_company.llm.input": "What is quantum computing?",
+    "llm.input_messages": "What is quantum computing?",
+    "gen_ai.request.model": "gpt-4",
+    "gen_ai.usage.total_tokens": 1250,
+    "gen_ai.content.completion": "Quantum computing leverages..."
+  },
+  "resource": {
+    "service.name": "llm-gateway",
+    "deployment.environment": "production"
+  }
+}`;
+
+function hasNoSpanData(input: string): boolean {
+	let span;
+	try {
+		span = parseSpanInput(input);
+	} catch {
+		return false;
+	}
+	return (
+		Object.keys(span.attributes ?? {}).length === 0 &&
+		Object.keys(span.resource ?? {}).length === 0
+	);
+}
+
+export function getStoredSpanInput(): string {
+	const stored = get(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+	if (!stored?.trim() || hasNoSpanData(stored)) {
+		return SAMPLE_SPAN_JSON;
+	}
+	return stored;
+}
+
+export function setStoredSpanInput(value: string): void {
+	if (!value.trim() || hasNoSpanData(value)) {
+		remove(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+		return;
+	}
+	set(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN, value);
+}
+
+export function clearStoredSpanInput(): void {
+	remove(LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN);
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts

@@ -0,0 +1,145 @@
+import {
+	SpantypesPostableSpanMapperTestDTO,
+	SpantypesPostableSpanMapperTestGroupDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { isEqual } from 'lodash-es';
+
+import { DraftGroup } from '../types';
+import {
+	buildPostableGroup,
+	buildPostableMapper,
+	groupDraftFromNode,
+	mapperDraftFromNode,
+} from '../utils';
+
+function shouldSendMappers(
+	snap: DraftGroup | undefined,
+	group: DraftGroup,
+): boolean {
+	if (!snap) {
+		return true;
+	}
+	return !isEqual(snap.mappers, group.mappers);
+}
+
+export function buildTestGroups(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): SpantypesPostableSpanMapperTestGroupDTO[] {
+	const snapById = new Map(
+		snapshot
+			.filter((group) => group.serverId)
+			.map((group) => [group.serverId as string, group]),
+	);
+
+	return draft.map((group) => {
+		const base = buildPostableGroup(groupDraftFromNode(group));
+		const snap = group.serverId ? snapById.get(group.serverId) : undefined;
+		return {
+			...base,
+			mappers: shouldSendMappers(snap, group)
+				? group.mappers.map((mapper) =>
+						buildPostableMapper(mapperDraftFromNode(mapper)),
+					)
+				: null,
+		};
+	});
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+	return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
+	const keys = Object.keys(parsed);
+	return (
+		keys.length > 0 &&
+		keys.every((key) => key === 'attributes' || key === 'resource') &&
+		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
+	);
+}
+
+export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {
+	const trimmed = input.trim();
+	if (!trimmed) {
+		throw new Error('Paste a JSON span object to run the test.');
+	}
+
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(trimmed);
+	} catch {
+		throw new Error(
+			'Invalid JSON — check for trailing commas or missing quotes.',
+		);
+	}
+
+	if (!isPlainObject(parsed)) {
+		throw new Error('Span must be a JSON object of attribute key-value pairs.');
+	}
+
+	if (isSpanEnvelope(parsed)) {
+		return {
+			attributes: isPlainObject(parsed.attributes) ? parsed.attributes : {},
+			resource: isPlainObject(parsed.resource) ? parsed.resource : {},
+		};
+	}
+
+	return { attributes: parsed, resource: {} };
+}
+
+export function buildTestRequest(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+	input: string,
+): SpantypesPostableSpanMapperTestDTO {
+	return {
+		groups: buildTestGroups(snapshot, draft),
+		spans: [parseSpanInput(input)],
+	};
+}
+
+export type AttrChangeStatus = 'added' | 'changed' | 'unchanged' | 'removed';
+
+export interface AttrDiffEntry {
+	key: string;
+	value: unknown;
+	status: AttrChangeStatus;
+}
+
+// Renders a diff value for display: strings as-is, everything else JSON-encoded.
+export function formatAttributeValue(value: unknown): string {
+	if (typeof value === 'string') {
+		return value;
+	}
+	return JSON.stringify(value);
+}
+
+export function diffAttributeMaps(
+	inputAttributes: Record<string, unknown>,
+	resultAttributes: Record<string, unknown>,
+): AttrDiffEntry[] {
+	const added: AttrDiffEntry[] = [];
+	const changed: AttrDiffEntry[] = [];
+	const unchanged: AttrDiffEntry[] = [];
+	const removed: AttrDiffEntry[] = [];
+
+	Object.entries(resultAttributes).forEach(([key, value]) => {
+		if (!(key in inputAttributes)) {
+			added.push({ key, value, status: 'added' });
+		} else if (!isEqual(inputAttributes[key], value)) {
+			changed.push({ key, value, status: 'changed' });
+		} else {
+			unchanged.push({ key, value, status: 'unchanged' });
+		}
+	});
+
+	Object.entries(inputAttributes).forEach(([key, value]) => {
+		if (!(key in resultAttributes)) {
+			removed.push({ key, value, status: 'removed' });
+		}
+	});
+
+	return [...added, ...changed, ...unchanged, ...removed];
+}

frontend/src/container/LLMObservability/AttributeMapping/TestTab/useTestSpanMapper.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	RenderErrorResponseDTO,
+	SpantypesSpanMapperTestSpanDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useTestSpanMappers } from 'api/generated/services/spanmapper';
+import { AxiosError } from 'axios';
+import { debounce } from 'lodash-es';
+
+import { buildTestRequest, parseSpanInput } from './testPayload';
+import {
+	clearStoredSpanInput,
+	getStoredSpanInput,
+	SAMPLE_SPAN_JSON,
+	setStoredSpanInput,
+} from './spanInputStorage';
+import { DraftGroup } from '../types';
+
+export type TestTabAttributes = Record<string, unknown>;
+export type TestTabResource = Record<string, unknown>;
+
+const PERSIST_DEBOUNCE_MS = 500;
+
+function apiErrorMessage(error: unknown): string {
+	const axiosError = error as AxiosError<RenderErrorResponseDTO>;
+	return (
+		axiosError?.response?.data?.error?.message ??
+		(error instanceof Error ? error.message : 'Test failed. Please try again.')
+	);
+}
+
+export interface UseTestSpanMapper {
+	input: string;
+	setInput: (value: string) => void;
+	run: () => void;
+	reset: () => void;
+	resetToTemplate: () => void;
+	isTemplateInput: boolean;
+	isRunning: boolean;
+	validationError: string | null;
+	result: SpantypesSpanMapperTestSpanDTO[] | null;
+	testedAttributes: TestTabAttributes | null;
+	testedResource: TestTabResource | null;
+	error: string | null;
+}
+
+export function useTestSpanMapper(
+	snapshot: DraftGroup[],
+	draft: DraftGroup[],
+): UseTestSpanMapper {
+	const [input, setInputValue] = useState<string>(getStoredSpanInput);
+	const [error, setError] = useState<string | null>(null);
+	const [result, setResult] = useState<SpantypesSpanMapperTestSpanDTO[] | null>(
+		null,
+	);
+	const [testedAttributes, setTestedAttributes] =
+		useState<TestTabAttributes | null>(null);
+	const [testedResource, setTestedResource] = useState<TestTabResource | null>(
+		null,
+	);
+
+	const { mutate, isLoading } = useTestSpanMappers();
+
+	const persistInput = useMemo(
+		() => debounce(setStoredSpanInput, PERSIST_DEBOUNCE_MS),
+		[],
+	);
+
+	useEffect(
+		() => (): void => {
+			persistInput.flush();
+		},
+		[persistInput],
+	);
+
+	const setInput = useCallback(
+		(value: string): void => {
+			setInputValue(value);
+			persistInput(value);
+		},
+		[persistInput],
+	);
+
+	const validationError = useMemo((): string | null => {
+		try {
+			parseSpanInput(input);
+			return null;
+		} catch (err) {
+			return err instanceof Error ? err.message : 'Invalid span JSON.';
+		}
+	}, [input]);
+
+	const reset = useCallback((): void => {
+		setError(null);
+		setResult(null);
+		setTestedAttributes(null);
+		setTestedResource(null);
+	}, []);
+
+	const resetToTemplate = useCallback((): void => {
+		persistInput.cancel();
+		clearStoredSpanInput();
+		setInputValue(SAMPLE_SPAN_JSON);
+		reset();
+	}, [persistInput, reset]);
+
+	const isTemplateInput = input.trim() === SAMPLE_SPAN_JSON;
+
+	const run = useCallback((): void => {
+		reset();
+
+		let body;
+		try {
+			body = buildTestRequest(snapshot, draft, input);
+		} catch (parseError) {
+			setError(apiErrorMessage(parseError));
+			return;
+		}
+
+		const submittedSpan = body.spans?.[0];
+		const submittedAttributes = (submittedSpan?.attributes ??
+			{}) as TestTabAttributes;
+		const submittedResource = (submittedSpan?.resource ?? {}) as TestTabResource;
+
+		mutate(
+			{ data: body },
+			{
+				onSuccess: (response) => {
+					setTestedAttributes(submittedAttributes);
+					setTestedResource(submittedResource);
+					setResult(response.data?.spans ?? []);
+				},
+				onError: (mutationError) => {
+					setResult(null);
+					setError(apiErrorMessage(mutationError));
+				},
+			},
+		);
+	}, [snapshot, draft, input, mutate, reset]);
+
+	return {
+		input,
+		setInput,
+		run,
+		reset,
+		resetToTemplate,
+		isTemplateInput,
+		isRunning: isLoading,
+		validationError,
+		result,
+		testedAttributes,
+		testedResource,
+		error,
+	};
+}

frontend/src/container/LLMObservability/AttributeMapping/__tests__/LLMObservabilityAttributeMapping.test.tsx

@@ -1,6 +1,32 @@
 import { rest, server } from 'mocks-server/server';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
+// The header's Save/Discard and the group toggle are Admin-gated via useAuthZ;
+// render as an admin so those controls are present.
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockedUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+// Monaco can't run in jsdom — stand in a textarea so the span input is editable.
+jest.mock('@monaco-editor/react', () => ({
+	__esModule: true,
+	default: ({
+		value,
+		onChange,
+	}: {
+		value: string;
+		onChange: (next?: string) => void;
+	}): JSX.Element => (
+		<textarea
+			aria-label="span-json-editor"
+			data-testid="span-json-editor"
+			value={value}
+			onChange={(event): void => onChange(event.target.value)}
+		/>
+	),
+}));
+
 import LLMObservabilityAttributeMapping from '../LLMObservabilityAttributeMapping';
 import { GROUPS_ENDPOINT, makeGroupsResponse, mockGroups } from './fixtures';
 
@@ -16,6 +42,7 @@ describe('LLMObservabilityAttributeMapping', () => {
 	beforeEach(() => {
 		window.history.pushState(null, '', '/');
 		setupGroups();
+		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
@@ -86,6 +113,26 @@ describe('LLMObservabilityAttributeMapping', () => {
 		expect(screen.queryByTestId('discard-changes-btn')).not.toBeInTheDocument();
 	});
 
+	it('keeps the sample span input when switching away from the test tab and back', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<LLMObservabilityAttributeMapping />);
+
+		await user.click(screen.getByRole('tab', { name: 'Test' }));
+		const editor = await screen.findByTestId('span-json-editor');
+		await user.clear(editor);
+		await user.type(editor, '{{ "my.attr": 1 }');
+
+		await user.click(screen.getByRole('tab', { name: 'Attribute Mappings' }));
+		await screen.findByTestId('attribute-mappings-tab');
+		expect(screen.queryByTestId('span-json-editor')).not.toBeInTheDocument();
+
+		await user.click(screen.getByRole('tab', { name: 'Test' }));
+
+		await expect(screen.findByTestId('span-json-editor')).resolves.toHaveValue(
+			'{ "my.attr": 1 }',
+		);
+	});
+
 	it('keeps staged changes when the discard prompt is dismissed', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<LLMObservabilityAttributeMapping />);

frontend/src/container/LLMObservability/AttributeMapping/components/AttributeMappingHeader/AttributeMappingHeader.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 
+import { useCanManageAttributeMapping } from '../../hooks/useCanManageAttributeMapping';
 import styles from './AttributeMappingHeader.module.scss';
 
 interface AttributeMappingHeaderProps {
@@ -16,12 +17,13 @@ function AttributeMappingHeader({
 	onDiscard,
 	onSave,
 }: AttributeMappingHeaderProps): JSX.Element {
+	const canManage = useCanManageAttributeMapping();
 	return (
 		<header className={styles.pageHeader}>
 			<Typography.Text as="p" size="base" color="muted">
 				Configure source-to-target attribute remapping for LLM traces
 			</Typography.Text>
-			{isDirty && (
+			{canManage && isDirty && (
 				<div className={styles.pageHeaderActions}>
 					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
 						Unsaved changes

frontend/src/container/LLMObservability/AttributeMapping/hooks/useAttributeMappingEditor.ts

@@ -35,6 +35,7 @@ function clone(groups: DraftGroup[]): DraftGroup[] {
 
 export interface AttributeMappingEditor {
 	groups: DraftGroup[];
+	snapshot: DraftGroup[];
 	isLoading: boolean;
 	isError: boolean;
 	isDirty: boolean;
@@ -304,6 +305,7 @@ export function useAttributeMappingEditor(): AttributeMappingEditor {
 
 	return {
 		groups: draft ?? [],
+		snapshot,
 		isLoading: !ready || draft === null,
 		isError: groupsQuery.isError,
 		isDirty,

frontend/src/container/LLMObservability/AttributeMapping/hooks/useCanManageAttributeMapping.ts

@@ -0,0 +1,9 @@
+import { IsAdminPermission } from 'lib/authz/hooks/useAuthZ/legacy';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+const ADMIN_PERMISSION = [IsAdminPermission];
+
+export function useCanManageAttributeMapping(): boolean {
+	const { allowed } = useAuthZ(ADMIN_PERMISSION);
+	return allowed;
+}

frontend/src/container/LiveLogs/LiveLogsList/LiveLogsList.styles.scss

@@ -60,3 +60,7 @@
 		}
 	}
 }
+
+.logs-linked-row td {
+	background-color: var(--row-active-bg) !important;
+}

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

@@ -204,6 +204,9 @@ function LiveLogsList({
 							data={formattedLogs}
 							isLoading={false}
 							isRowActive={(log): boolean => log.id === activeLog?.id}
+							getRowClassName={(log): string =>
+								log.id === activeLogId ? 'logs-linked-row' : ''
+							}
 							getRowStyle={(log): CSSProperties =>
 								({
 									'--row-active-bg': getRowBackgroundColor(
@@ -216,10 +219,13 @@ function LiveLogsList({
 									),
 								}) as CSSProperties
 							}
-							onRowClick={(log): void => {
-								handleSetActiveLog(log);
+							onRowClick={(log, _itemKey, { isActive }): void => {
+								if (isActive) {
+									handleCloseLogDetail();
+								} else {
+									handleSetActiveLog(log);
+								}
 							}}
-							onRowDeactivate={handleCloseLogDetail}
 							activeRowIndex={activeLogIndex}
 							renderRowActions={(log): ReactNode => (
 								<LogLinesActionButtons

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -323,3 +323,7 @@
 		}
 	}
 }
+
+.logs-linked-row td {
+	background-color: var(--row-active-bg) !important;
+}

frontend/src/container/LogsExplorerList/index.tsx

@@ -211,9 +211,11 @@ function LogsExplorerList({
 					data={logs}
 					isLoading={isLoading || isFetching}
 					onEndReached={onEndReached}
-					isRowActive={(log): boolean =>
-						log.id === activeLog?.id || log.id === activeLogId
+					isRowActive={(log): boolean => log.id === activeLog?.id}
+					getRowClassName={(log): string =>
+						log.id === activeLogId ? 'logs-linked-row' : ''
 					}
+					getRowTestId={(log): string => `logs-table-row-${log.id}`}
 					getRowStyle={(log): CSSProperties =>
 						({
 							'--row-active-bg': getRowBackgroundColor(
@@ -226,10 +228,13 @@ function LogsExplorerList({
 							),
 						}) as CSSProperties
 					}
-					onRowClick={(log): void => {
-						handleSetActiveLog(log);
+					onRowClick={(log, _itemKey, { isActive }): void => {
+						if (isActive) {
+							handleCloseLogDetail();
+						} else {
+							handleSetActiveLog(log);
+						}
 					}}
-					onRowDeactivate={handleCloseLogDetail}
 					activeRowIndex={activeLogIndex}
 					renderRowActions={(log): ReactNode => (
 						<LogLinesActionButtons
@@ -282,6 +287,7 @@ function LogsExplorerList({
 		options.maxLines,
 		options.fontSize,
 		activeLogIndex,
+		activeLogId,
 		logs,
 		onEndReached,
 		getItemContent,

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