chore: temp commit

.github/workflows/integrationci.yaml

@@ -39,8 +39,6 @@ jobs:
       matrix:
         suite:
           - alerts
-          - alertmanager
-          - alertmanagerrotation
           - basepath
           - callbackauthn
           - cloudintegrations
@@ -56,7 +54,6 @@ jobs:
           - querierscalar
           - queriercommon
           - rawexportdata
-          - promqlconformance
           - querierauthz
           - role
           - rootuser

cmd/authz.go

@@ -93,13 +93,9 @@ 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.ResourceTelemetryResourceLogs).String():         true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
-		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceServiceAccount).String():           true,
+		coretypes.NewResourceRef(coretypes.ResourceRole).String():                     true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceFactorAPIKey).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/telemetryschema/logstelemetryschema"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/metricstelemetryschema"
-	"github.com/SigNoz/signoz/pkg/telemetryschema/tracestelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrylogs"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
+	"github.com/SigNoz/signoz/pkg/telemetrytraces"
 	"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:               logstelemetryschema.DBName,
-			TableName:            logstelemetryschema.LogsV2LocalTableName,
+			DBName:               telemetrylogs.DBName,
+			TableName:            telemetrylogs.LogsV2LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultLogsRetentionDays,
 		},
 	},
@@ -36,8 +36,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterSpanSize,
 			Unit:                 zeustypes.MeterUnitBytes,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               tracestelemetryschema.DBName,
-			TableName:            tracestelemetryschema.SpanIndexV3LocalTableName,
+			DBName:               telemetrytraces.DBName,
+			TableName:            telemetrytraces.SpanIndexV3LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultTracesRetentionDays,
 		},
 	},
@@ -47,8 +47,8 @@ var meterConfigs = []metercollector.Config{
 			Name:                 zeustypes.MeterDatapointCount,
 			Unit:                 zeustypes.MeterUnitCount,
 			Aggregation:          zeustypes.MeterAggregationSum,
-			DBName:               metricstelemetryschema.DBName,
-			TableName:            metricstelemetryschema.SamplesV4LocalTableName,
+			DBName:               telemetrymetrics.DBName,
+			TableName:            telemetrymetrics.SamplesV4LocalTableName,
 			DefaultRetentionDays: retentiontypes.DefaultMetricsRetentionDays,
 		},
 	},

docs/api/openapi.yml

@@ -1496,9 +1496,6 @@ components:
       - redis
       - cloudsql_postgres
       - memorystore_redis
-      - computeengine
-      - gke
-      - cloudstorage
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:

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/telemetryschema/metertelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrymeter"
 	"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(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
+	sb.From(telemetrymeter.DBName + "." + telemetrymeter.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(metertelemetryschema.DBName + "." + metertelemetryschema.SamplesTableName)
+	sb.From(telemetrymeter.DBName + "." + telemetrymeter.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/telemetryschema/metricstelemetryschema"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/types/metricreductionruletypes"
 )
 
 var (
-	reductionRulesTable = metricstelemetryschema.DBName + "." + metricstelemetryschema.ReductionRulesTableName
-	metadataTable       = metricstelemetryschema.DBName + "." + metricstelemetryschema.AttributesMetadataTableName
-	bufferSeriesTable   = metricstelemetryschema.DBName + "." + metricstelemetryschema.TimeseriesV4BufferTableName
+	reductionRulesTable = telemetrymetrics.DBName + "." + telemetrymetrics.ReductionRulesTableName
+	metadataTable       = telemetrymetrics.DBName + "." + telemetrymetrics.AttributesMetadataTableName
+	bufferSeriesTable   = telemetrymetrics.DBName + "." + telemetrymetrics.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(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
-		counts, err := c.reducedSeriesCountForTable(ctx, metricstelemetryschema.DBName+"."+table, metricNames, effectiveFrom, startMs, endMs)
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+		counts, err := c.reducedSeriesCountForTable(ctx, telemetrymetrics.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 := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName
-	reducedLast := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedLastTableName
-	reducedSum := metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4ReducedSumTableName
+	ingestedTable := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName
+	reducedLast := telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4ReducedLastTableName
+	reducedSum := telemetrymetrics.DBName + "." + telemetrymetrics.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, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
-	last, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
-	sum, err := c.countSamplesByMetric(ctx, metricstelemetryschema.DBName+"."+metricstelemetryschema.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	sum, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.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(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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(metricstelemetryschema.DBName + "." + metricstelemetryschema.SamplesV4BufferTableName)
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.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{metricstelemetryschema.SamplesV4ReducedLastTableName, metricstelemetryschema.SamplesV4ReducedSumTableName} {
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.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(metricstelemetryschema.DBName + "." + table)
+		sb.From(telemetrymetrics.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

@@ -1,136 +0,0 @@
-# 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,10 +14,7 @@ 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,
-	routeWithInitialAuthZSupport,
-} from 'utils/permission';
+import { routePermission } from 'utils/permission';
 
 import routes, {
 	LIST_LICENSES,
@@ -45,6 +42,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
+
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -228,16 +226,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		if (isPrivate) {
 			if (isLoggedInState) {
 				const route = routePermission[key];
-				const hasInitialAuthZSupport = Object.hasOwn(
-					routeWithInitialAuthZSupport,
-					key,
-				);
-
-				if (
-					route &&
-					route.find((e) => e === user.role) === undefined &&
-					hasInitialAuthZSupport === false
-				) {
+				if (route && route.find((e) => e === user.role) === undefined) {
 					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
 				}
 			} else {

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

@@ -17,7 +17,6 @@ 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';
 
@@ -179,7 +178,6 @@ function createMockAppContext(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
-		isFetchingUserPreferences: false,
 		userFetchError: null,
 		activeLicenseFetchError: null,
 		hostsFetchError: null,
@@ -200,39 +198,24 @@ 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 buildPrivateRouteTree(
-	options: RenderPrivateRouteOptions,
-): ReactElement {
-	const { initialRoute = ROUTES.HOME, appContext = {} } = options;
+function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
+	const {
+		initialRoute = ROUTES.HOME,
+		appContext = {},
+		isCloudUser = true,
+	} = options;
 
-	const contextValue = createMockAppContext({
-		...appContext,
-	});
+	mockIsCloudUser = isCloudUser;
 
-	return (
+	const contextValue = createMockAppContext(appContext);
+
+	render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
@@ -246,15 +229,10 @@ function buildPrivateRouteTree(
 					</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
 
@@ -1454,25 +1432,6 @@ 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', () => {
@@ -1518,174 +1477,6 @@ 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,29 +2,6 @@ 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>,
@@ -33,29 +10,15 @@ 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: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				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 ?? '',
+				})),
 			},
 		});
 	}
@@ -99,7 +62,9 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
+			code:
+				errorData?.code ||
+				String(response?.status || error.code || 'unknown_error'),
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,38 +2,19 @@ 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: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
 			},
 		});
 	}

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

@@ -1,126 +0,0 @@
-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/sigNoz.schemas.ts

@@ -2815,9 +2815,6 @@ export enum CloudintegrationtypesServiceIDDTO {
 	redis = 'redis',
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
-	computeengine = 'computeengine',
-	gke = 'gke',
-	cloudstorage = 'cloudstorage',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**

frontend/src/assets/Logos/gcp-cloud-storage.svg

@@ -1 +1 @@
-<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>
+<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>

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

@@ -1 +1 @@
-<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>
+<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>

frontend/src/components/FieldsSelector/OtherFields.tsx

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

frontend/src/components/LogDetail/index.tsx

@@ -438,11 +438,7 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div
-				className="log-detail-drawer__content"
-				data-log-detail-ignore="true"
-				data-testid="log-detail-drawer"
-			>
+			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
 				<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: FieldDataType | undefined =
+			const fieldDataType =
 				functionContextForFetch &&
 				operatorsWithoutDataType.includes(functionContextForFetch)
 					? undefined
-					: 'number';
+					: QUERY_BUILDER_KEY_TYPES.NUMBER;
 
 			return getKeySuggestions({
 				signal: queryData.dataSource,
 				searchText: '',
-				fieldDataType,
+				fieldDataType: fieldDataType as QUERY_BUILDER_KEY_TYPES,
 			});
 		},
 		{

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

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

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

@@ -1,8 +1,6 @@
 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,13 +23,6 @@ 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,76 +92,52 @@
 						color: var(--l3-foreground);
 					}
 
-					.only-btn,
+					.only-btn {
+						cursor: not-allowed;
+						color: var(--l3-foreground);
+					}
+
 					.toggle-btn {
 						cursor: not-allowed;
 						color: var(--l3-foreground);
 					}
 				}
 
-				// 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 {
+					display: none;
 				}
-
-				.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);
 				}
 			}
 		}
 
-		@media (prefers-reduced-motion: reduce) {
-			.only-btn,
+		.value:hover {
 			.toggle-btn {
-				transition: none;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 		}
 	}

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

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

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -88,7 +88,6 @@ function TanStackCustomTableRow<TData, TItemKey = string>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
-			data-testid={context?.getRowTestId?.(rowData)}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
@@ -155,12 +154,6 @@ 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,6 +33,7 @@ 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;
@@ -51,9 +52,21 @@ function TanStackRowCellsInner<TData, TItemKey = string>({
 			}
 
 			const isActive = isRowActive?.(rowData) ?? false;
-			onRowClick?.(rowData, itemKey, { isActive });
+			if (isActive && onRowDeactivate) {
+				onRowDeactivate();
+			} else {
+				onRowClick?.(rowData, itemKey);
+			}
 		},
-		[isRowActive, onRowClick, onRowClickNewTab, rowData, getRowKeyData, rowIndex],
+		[
+			isRowActive,
+			onRowDeactivate,
+			onRowClick,
+			onRowClickNewTab,
+			rowData,
+			getRowKeyData,
+			rowIndex,
+		],
 	);
 
 	if (itemKind === 'expansion') {
@@ -107,6 +120,7 @@ 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,9 +85,7 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1', {
-			isActive: false,
-		});
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 	});
 
 	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
@@ -119,19 +117,17 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '', {
-			isActive: false,
-		});
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
 	});
 
-	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.
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
 		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,
@@ -156,44 +152,8 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		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,
-		});
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
 	});
 
 	it('does not render renderRowActions before hover', () => {

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

@@ -611,7 +611,6 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				'1',
-				{ isActive: false },
 			);
 		});
 
@@ -640,7 +639,6 @@ describe('TanStackTableView Integration', () => {
 			expect(onRowClick).toHaveBeenCalledWith(
 				expect.objectContaining({ id: '1', name: 'Item 1' }),
 				{ id: '1', name: 'Item 1' },
-				{ isActive: false },
 			);
 		});
 
@@ -661,15 +659,15 @@ describe('TanStackTableView Integration', () => {
 			expect(row).toHaveClass('tableRowActive');
 		});
 
-		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.
+		it('calls onRowDeactivate when clicking active row', async () => {
 			const user = userEvent.setup();
 			const onRowClick = jest.fn();
+			const onRowDeactivate = jest.fn();
 
 			renderTanStackTable({
 				props: {
 					onRowClick,
+					onRowDeactivate,
 					isRowActive: (row) => row.id === '1',
 				},
 			});
@@ -680,11 +678,8 @@ describe('TanStackTableView Integration', () => {
 
 			await user.click(screen.getByText('Item 1'));
 
-			expect(onRowClick).toHaveBeenCalledWith(
-				expect.objectContaining({ id: '1' }),
-				expect.anything(),
-				{ isActive: true },
-			);
+			expect(onRowDeactivate).toHaveBeenCalled();
+			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
 		it('opens in new tab on ctrl+click', async () => {

frontend/src/components/TanStackTableView/index.tsx

@@ -116,11 +116,9 @@ export * from './useTableParams';
  *   getItemKey={(row) => row.id}
  *   isRowActive={(row) => row.id === selectedId}
  *   activeRowIndex={selectedIndex}
- *   // The table reports the click + the row's active state; the consumer owns open/close.
- *   onRowClick={(row, itemKey, { isActive }) =>
- *     setSelectedId(isActive ? undefined : itemKey)
- *   }
+ *   onRowClick={(row, itemKey) => setSelectedId(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,19 +81,15 @@ 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, context: RowClickContext) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
+	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
 		rowKey: string,
@@ -182,12 +178,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, context: RowClickContext) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => 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,11 +1,6 @@
-.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 {
@@ -15,25 +10,16 @@
 
 	&__summary {
 		display: flex;
-		align-items: flex-start;
 		justify-content: space-between;
-		gap: var(--spacing-8);
 		padding: 16px;
 	}
 
 	&__summary-left {
 		display: flex;
-		align-items: flex-start;
+		align-items: baseline;
 		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,7 +2,6 @@ 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';
@@ -31,18 +30,16 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 			{/* Summary Header */}
 			<section className="warning-content__summary-section">
 				<header className="warning-content__summary">
-					{(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>
+					<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>
+					</div>
 
 					{warningUrl && (
 						<div className="warning-content__summary-right">
@@ -157,10 +154,6 @@ function WarningPopover({
 			overlayInnerStyle={{ padding: 0 }}
 			autoAdjustOverflow
 			{...popoverProps}
-			overlayClassName={cx(
-				'warning-popover-overlay',
-				popoverProps.overlayClassName,
-			)}
 		>
 			{children || (
 				<TriangleAlert

frontend/src/constants/localStorage.ts

@@ -45,5 +45,4 @@ 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/constants/queryBuilder.ts

@@ -1,5 +1,8 @@
 // ** Helpers
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { defaultTraceSelectedColumns } from 'container/OptionsMenu/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { createNewBuilderItemName } from 'lib/newQueryBuilder/createNewBuilderItemName';
@@ -389,11 +392,19 @@ const METRIC_TYPE_TO_ATTRIBUTE_TYPE: Record<
 export function toAttributeType(
 	metricType: MetrictypesTypeDTO | undefined,
 	isMonotonic?: boolean,
+	temporality?: MetrictypesTemporalityDTO,
 ): ATTRIBUTE_TYPES | '' {
 	if (!metricType) {
 		return '';
 	}
-	if (metricType === MetrictypesTypeDTO.sum && isMonotonic === false) {
+	// Monotonicity carries meaning only for cumulative sums: a non-monotonic
+	// cumulative sum is a gauge for all practical purposes. Delta sums are
+	// counters regardless of monotonicity.
+	if (
+		metricType === MetrictypesTypeDTO.sum &&
+		isMonotonic === false &&
+		temporality === MetrictypesTemporalityDTO.cumulative
+	) {
 		return ATTRIBUTE_TYPES.GAUGE;
 	}
 	return METRIC_TYPE_TO_ATTRIBUTE_TYPE[metricType] || '';

frontend/src/container/AppLayout/index.tsx

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

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

@@ -15,18 +15,6 @@ 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,
@@ -114,8 +102,6 @@ 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(() => {
@@ -521,55 +507,4 @@ 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,7 +1,6 @@
 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';
 
@@ -17,11 +16,7 @@ function GroupHeaderActions({
 	onToggle,
 	onEdit,
 	onRemove,
-}: GroupHeaderActionsProps): JSX.Element | null {
-	const canManage = useCanManageAttributeMapping();
-	if (!canManage) {
-		return null;
-	}
+}: GroupHeaderActionsProps): JSX.Element {
 	return (
 		<div
 			className={styles.actions}

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

@@ -11,7 +11,6 @@ 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';
@@ -40,7 +39,6 @@ function GroupMappers({
 	onEditMapper,
 }: GroupMappersProps): JSX.Element {
 	const { hydrateGroupMappers, removeMapper, toggleMapper } = editor;
-	const canManage = useCanManageAttributeMapping();
 
 	const hasServerId = group.serverId !== null;
 	const { data, isLoading, isError } = useListSpanMappers(
@@ -146,20 +144,16 @@ function GroupMappers({
 		/>
 	));
 
-	// 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.
+	// The add-mapping row trails every non-error state (including loading/empty).
 	let rows: JSX.Element[];
 	if (isErrorMappers) {
 		rows = [errorRow];
 	} else if (isLoadingMappers && mapperCount === 0) {
-		rows = [...skeletonRows];
+		rows = [...skeletonRows, addMapperRow];
 	} else if (mapperCount === 0) {
-		rows = [emptyRow];
+		rows = [emptyRow, addMapperRow];
 	} else {
-		rows = [...mapperRows];
-	}
-	if (canManage && !isErrorMappers) {
-		rows.push(addMapperRow);
+		rows = [...mapperRows, addMapperRow];
 	}
 
 	return (

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

@@ -6,7 +6,6 @@ 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';
 
@@ -31,7 +30,6 @@ 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;
@@ -103,16 +101,14 @@ function MapperRow({
 				)}
 			</td>
 			<td className={cx(styles.cell, styles.actionsCell)}>
-				{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>
-				)}
+				<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,7 +11,6 @@ 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';
@@ -34,7 +33,6 @@ function MappingsTable({
 	const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
 	const [targetGroupId, setTargetGroupId] = useState<string | null>(null);
 	const drawer = useMapperFormDrawer();
-	const canManage = useCanManageAttributeMapping();
 
 	const { upsertMapper, removeMapper } = editor;
 
@@ -122,20 +120,18 @@ function MappingsTable({
 
 	return (
 		<div className={styles.tableWrapper}>
-			{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>
-			)}
+			<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>
 
 			{isEmpty ? (
 				<div className={styles.tableState} data-testid="mapper-groups-empty">

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

@@ -8,18 +8,12 @@ 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
@@ -37,7 +31,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 	const tabItems = [
 		{
-			key: MAPPINGS_TAB_KEY,
+			key: 'attribute-mappings',
 			label: 'Attribute Mappings',
 			children: (
 				<AttributeMappingsTab
@@ -48,9 +42,11 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 			),
 		},
 		{
-			key: TEST_TAB_KEY,
+			key: 'test',
 			label: 'Test',
-			children: <TestTab spanTest={spanTest} />,
+			disabled: true,
+			disabledReason: 'Coming soon',
+			children: null,
 		},
 	];
 
@@ -75,7 +71,7 @@ function LLMObservabilityAttributeMapping(): JSX.Element {
 
 			<Tabs
 				testId="attribute-mapping-tabs"
-				defaultValue={MAPPINGS_TAB_KEY}
+				defaultValue="attribute-mappings"
 				items={tabItems}
 			/>
 			{groupDrawer.isOpen && (

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

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

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

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

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

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

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

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

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

@@ -1,155 +0,0 @@
-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,32 +1,6 @@
 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';
 
@@ -42,7 +16,6 @@ describe('LLMObservabilityAttributeMapping', () => {
 	beforeEach(() => {
 		window.history.pushState(null, '', '/');
 		setupGroups();
-		mockedUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	});
 
 	afterEach(() => {
@@ -113,26 +86,6 @@ 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,7 +1,6 @@
 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 {
@@ -17,13 +16,12 @@ 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>
-			{canManage && isDirty && (
+			{isDirty && (
 				<div className={styles.pageHeaderActions}>
 					<span className={styles.unsavedChanges} data-testid="unsaved-changes">
 						Unsaved changes

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

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

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

@@ -1,9 +0,0 @@
-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,7 +60,3 @@
 		}
 	}
 }
-
-.logs-linked-row td {
-	background-color: var(--row-active-bg) !important;
-}

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

@@ -204,9 +204,6 @@ 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(
@@ -219,13 +216,10 @@ function LiveLogsList({
 									),
 								}) as CSSProperties
 							}
-							onRowClick={(log, _itemKey, { isActive }): void => {
-								if (isActive) {
-									handleCloseLogDetail();
-								} else {
-									handleSetActiveLog(log);
-								}
+							onRowClick={(log): void => {
+								handleSetActiveLog(log);
 							}}
+							onRowDeactivate={handleCloseLogDetail}
 							activeRowIndex={activeLogIndex}
 							renderRowActions={(log): ReactNode => (
 								<LogLinesActionButtons

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

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

frontend/src/container/LogsExplorerList/index.tsx

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

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

@@ -33,6 +33,7 @@ function AllAttributes({
 	metricName,
 	metricType,
 	isMonotonic,
+	temporality,
 	minTime,
 	maxTime,
 }: AllAttributesProps): JSX.Element {
@@ -71,6 +72,7 @@ function AllAttributes({
 				groupBy,
 				limit,
 				isMonotonic,
+				temporality,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -89,7 +91,7 @@ function AllAttributes({
 				[MetricsExplorerEventKeys.AttributeKey]: groupBy,
 			});
 		},
-		[metricName, metricType, isMonotonic, handleExplorerTabChange],
+		[metricName, metricType, isMonotonic, temporality, handleExplorerTabChange],
 	);
 
 	const goToMetricsExploreWithAppliedAttribute = useCallback(
@@ -101,6 +103,7 @@ function AllAttributes({
 				undefined,
 				undefined,
 				isMonotonic,
+				temporality,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -120,7 +123,7 @@ function AllAttributes({
 				[MetricsExplorerEventKeys.AttributeValue]: value,
 			});
 		},
-		[metricName, metricType, isMonotonic, handleExplorerTabChange],
+		[metricName, metricType, isMonotonic, temporality, handleExplorerTabChange],
 	);
 
 	const handleKeyMenuItemClick = useCallback(

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

@@ -6,7 +6,7 @@ import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
-	useGetMetricDashboardsV2,
+	useGetMetricDashboards,
 } 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,
-	} = useGetMetricDashboardsV2(
+	} = useGetMetricDashboards(
 		{
 			metricName,
 		},
@@ -55,8 +55,7 @@ function DashboardsAndAlertsPopover({
 
 	const dashboards = useMemo(() => {
 		const currentDashboards = dashboardsData?.data.dashboards ?? [];
-		// The API returns one entry per referencing panel, so a dashboard repeats
-		// once per panel that uses the metric.
+		// Remove duplicate dashboards
 		return currentDashboards.filter(
 			(dashboard, index, self) =>
 				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),

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

@@ -86,6 +86,7 @@ function MetricDetails({
 				undefined,
 				undefined,
 				metadata?.isMonotonic,
+				metadata?.temporality,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -108,6 +109,7 @@ function MetricDetails({
 		handleExplorerTabChange,
 		metadata?.type,
 		metadata?.isMonotonic,
+		metadata?.temporality,
 	]);
 
 	useEffect(() => {
@@ -196,6 +198,7 @@ function MetricDetails({
 					metricName={metricName}
 					metricType={metadata?.type}
 					isMonotonic={metadata?.isMonotonic}
+					temporality={metadata?.temporality}
 					minTime={minTime}
 					maxTime={maxTime}
 				/>

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

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

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

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

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/utils.test.ts

@@ -147,6 +147,44 @@ describe('MetricDetails utils', () => {
 			expect(query.builder.queryData[0]?.spaceAggregation).toBe('sum');
 		});
 
+		it('should treat a non-monotonic cumulative SUM as a gauge', () => {
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+				undefined,
+				undefined,
+				undefined,
+				false,
+				MetrictypesTemporalityDTO.cumulative,
+			);
+
+			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
+				ATTRIBUTE_TYPES.GAUGE,
+			);
+			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
+			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
+			expect(query.builder.queryData[0]?.spaceAggregation).toBe('avg');
+		});
+
+		it('should treat a non-monotonic delta SUM as a counter', () => {
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+				undefined,
+				undefined,
+				undefined,
+				false,
+				MetrictypesTemporalityDTO.delta,
+			);
+
+			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
+				ATTRIBUTE_TYPES.SUM,
+			);
+			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
+			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
+			expect(query.builder.queryData[0]?.spaceAggregation).toBe('sum');
+		});
+
 		it('should create correct query for GAUGE metric type', () => {
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -35,6 +35,7 @@ export interface AllAttributesProps {
 	metricName: string;
 	metricType: MetrictypesTypeDTO | undefined;
 	isMonotonic?: boolean;
+	temporality?: MetrictypesTemporalityDTO;
 	minTime?: number;
 	maxTime?: number;
 }

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

@@ -89,16 +89,21 @@ export function getMetricDetailsQuery(
 	groupBy?: string,
 	limit?: number,
 	isMonotonic?: boolean,
+	temporality?: MetrictypesTemporalityDTO,
 ): Query {
 	let timeAggregation;
 	let spaceAggregation;
 	let aggregateOperator;
-	const isNonMonotonicSum =
-		metricType === MetrictypesTypeDTO.sum && isMonotonic === false;
+	// Monotonicity carries meaning only for cumulative sums; delta sums are
+	// counters regardless of monotonicity.
+	const isNonMonotonicCumulativeSum =
+		metricType === MetrictypesTypeDTO.sum &&
+		isMonotonic === false &&
+		temporality === MetrictypesTemporalityDTO.cumulative;
 
 	switch (metricType) {
 		case MetrictypesTypeDTO.sum:
-			if (isNonMonotonicSum) {
+			if (isNonMonotonicCumulativeSum) {
 				timeAggregation = 'avg';
 				spaceAggregation = 'avg';
 				aggregateOperator = 'avg';
@@ -131,7 +136,7 @@ export function getMetricDetailsQuery(
 			break;
 	}
 
-	const attributeType = toAttributeType(metricType, isMonotonic);
+	const attributeType = toAttributeType(metricType, isMonotonic, temporality);
 
 	return {
 		...initialQueriesMap[DataSource.METRICS],

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -113,7 +113,7 @@ const useOptionsMenu = ({
 					(suggestion) => ({
 						name: suggestion.name,
 						signal: suggestion.signal as SignalType,
-						fieldDataType: suggestion.fieldDataType,
+						fieldDataType: suggestion.fieldDataType as 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,
+				fieldDataType: e.fieldDataType as FieldDataType,
 			}));
 		}
 		if (dataSource === DataSource.TRACES) {

frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.test.tsx

@@ -8,6 +8,7 @@ import {
 } from '@testing-library/react';
 import {
 	MetricsexplorertypesListMetricDTO,
+	MetrictypesTemporalityDTO,
 	MetrictypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { ENTITY_VERSION_V5 } from 'constants/app';
@@ -70,7 +71,7 @@ function makeMetric(
 		type: MetrictypesTypeDTO.sum,
 		isMonotonic: true,
 		description: '',
-		temporality: 'cumulative' as never,
+		temporality: MetrictypesTemporalityDTO.cumulative,
 		unit: '',
 		...overrides,
 	};
@@ -393,12 +394,13 @@ describe('selecting a metric type updates the aggregation options', () => {
 		]);
 	});
 
-	it('non-monotonic Sum metric is treated as Gauge', () => {
+	it('non-monotonic cumulative Sum metric is treated as Gauge', () => {
 		returnMetrics([
 			makeMetric({
 				metricName: 'active_connections',
 				type: MetrictypesTypeDTO.sum,
 				isMonotonic: false,
+				temporality: MetrictypesTemporalityDTO.cumulative,
 			}),
 		]);
 
@@ -427,6 +429,36 @@ describe('selecting a metric type updates the aggregation options', () => {
 		]);
 	});
 
+	it('non-monotonic delta Sum metric remains a counter with Rate/Increase options', () => {
+		returnMetrics([
+			makeMetric({
+				metricName: 'gcp_reject_connections_count',
+				type: MetrictypesTypeDTO.sum,
+				isMonotonic: false,
+				temporality: MetrictypesTemporalityDTO.delta,
+			}),
+		]);
+
+		render(<MetricQueryHarness query={makeQuery()} />);
+
+		const input = screen.getByRole('combobox');
+		fireEvent.change(input, {
+			target: { value: 'gcp_reject_connections_count' },
+		});
+		fireEvent.blur(input);
+
+		expect(getOptionLabels('time-agg-options')).toStrictEqual([
+			'Rate',
+			'Increase',
+		]);
+		expect(getOptionLabels('space-agg-options')).toStrictEqual([
+			'Sum',
+			'Avg',
+			'Min',
+			'Max',
+		]);
+	});
+
 	it('Histogram metric shows no time options and P50–P99 space options', () => {
 		returnMetrics([
 			makeMetric({

frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx

@@ -34,7 +34,7 @@ export type MetricNameSelectorProps = {
 function getAttributeType(
 	metric: MetricsexplorertypesListMetricDTO,
 ): ATTRIBUTE_TYPES | '' {
-	return toAttributeType(metric.type, metric.isMonotonic);
+	return toAttributeType(metric.type, metric.isMonotonic, metric.temporality);
 }
 
 function createAutocompleteData(

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -756,14 +756,10 @@ function QueryBuilderSearchV2(
 
 			let operatorOptions;
 			if (currentFilterItem?.key?.dataType) {
-				// Fallback to universal suggestions if no match found for currentFilter dataType
-				const operatorsForDataType =
-					QUERY_BUILDER_OPERATORS_BY_TYPES[
-						currentFilterItem.key
-							.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-					] ?? QUERY_BUILDER_OPERATORS_BY_TYPES.universal;
-
-				operatorOptions = operatorsForDataType.map((operator) => ({
+				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
+					currentFilterItem.key
+						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
+				].map((operator) => ({
 					label: operator,
 					value: operator,
 				}));

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/QueryBuilderSearchV2.test.tsx

@@ -1,6 +1,11 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { render, RenderResult, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import {
+	act,
+	fireEvent,
+	render,
+	RenderResult,
+	screen,
+} from '@testing-library/react';
 import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
@@ -86,9 +91,6 @@ const renderWithContext = (props = {}): RenderResult => {
 	);
 };
 
-const getSearchCombobox = (): HTMLElement =>
-	within(screen.getByTestId('qb-search-select')).getByRole('combobox');
-
 // Constants to fix linter errors
 const TYPE_TAG = 'tag';
 const IS_COLUMN_FALSE = false;
@@ -111,14 +113,6 @@ const mockAggregateKeysData = {
 				isJSON: IS_JSON_FALSE,
 				id: 'service.name--string--tag--false',
 			},
-			{
-				key: 'unmapped.attribute',
-				dataType: 'not-a-real-data-type' as unknown as DataTypes,
-				type: TYPE_TAG,
-				isColumn: IS_COLUMN_FALSE,
-				isJSON: IS_JSON_FALSE,
-				id: 'unmapped.attribute--String--tag--false',
-			},
 		],
 	},
 };
@@ -171,28 +165,41 @@ jest.mock('hooks/dashboard/useDashboardVariables', () => ({
 }));
 
 describe('Suggestion Key -> Operator -> Value Flow', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
 	it('should complete full flow from key selection to value', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderWithContext();
+		const { container } = renderWithContext();
 
-		const combobox = getSearchCombobox();
+		// Get the combobox input specifically
+		const combobox = container.querySelector(
+			'.query-builder-search-v2 .ant-select-selection-search-input',
+		) as HTMLInputElement;
 
 		// 1. Focus and type to trigger key suggestions
-		await user.click(combobox);
-		await user.type(combobox, 'http.');
+		await act(async () => {
+			fireEvent.focus(combobox);
+			fireEvent.change(combobox, { target: { value: 'http.' } });
+		});
 
 		// Wait for dropdown to appear
 		await screen.findByRole('listbox');
 
 		// 2. Select a key from suggestions
-		await user.click(await screen.findByText('http.status'));
+		const statusOption = await screen.findByText('http.status');
+		await act(async () => {
+			fireEvent.click(statusOption);
+		});
 
 		// Should show operator suggestions
 		expect(screen.getByText('=')).toBeInTheDocument();
 		expect(screen.getByText('!=')).toBeInTheDocument();
 
 		// 3. Select an operator
-		await user.click(screen.getByText('='));
+		const equalsOption = screen.getByText('=');
+		await act(async () => {
+			fireEvent.click(equalsOption);
+		});
 
 		// Should show value suggestions
 		expect(screen.getByText('200')).toBeInTheDocument();
@@ -200,7 +207,10 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 		expect(screen.getByText('500')).toBeInTheDocument();
 
 		// 4. Select a value
-		await user.click(screen.getByText('200'));
+		const valueOption = screen.getByText('200');
+		await act(async () => {
+			fireEvent.click(valueOption);
+		});
 
 		// Verify final filter
 		expect(mockOnChange).toHaveBeenCalledWith(
@@ -217,52 +227,39 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 	});
 });
 
-describe('Operator suggestions for data types missing from the operators map', () => {
-	it('should fall back to universal operators for a non-canonical data type', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderWithContext();
-
-		const combobox = getSearchCombobox();
-
-		await user.click(combobox);
-		await user.type(combobox, 'unmapped.');
-
-		await screen.findByRole('listbox');
-
-		await user.click(await screen.findByText('unmapped.attribute'));
-
-		expect(screen.getByText('=')).toBeInTheDocument();
-		expect(screen.getByText('!=')).toBeInTheDocument();
-		expect(screen.getByText('>')).toBeInTheDocument();
-		expect(screen.getByText('<')).toBeInTheDocument();
-
-		expect(screen.queryByText('REGEX')).not.toBeInTheDocument();
-
-		await user.click(screen.getByText('='));
-
-		expect(combobox).toHaveDisplayValue(/unmapped\.attribute =/);
-	});
-});
-
 describe('Dynamic Variable Suggestions', () => {
-	it('should suggest dynamic variable when key matches a variable attribute', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderWithContext();
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
 
-		const combobox = getSearchCombobox();
+	it('should suggest dynamic variable when key matches a variable attribute', async () => {
+		const { container } = renderWithContext();
+
+		// Get the combobox input
+		const combobox = container.querySelector(
+			'.query-builder-search-v2 .ant-select-selection-search-input',
+		) as HTMLInputElement;
 
 		// Focus and type to trigger key suggestions for service.name
-		await user.click(combobox);
-		await user.type(combobox, 'service.');
+		await act(async () => {
+			fireEvent.focus(combobox);
+			fireEvent.change(combobox, { target: { value: 'service.' } });
+		});
 
 		// Wait for dropdown to appear
 		await screen.findByRole('listbox');
 
 		// Select service.name key from suggestions
-		await user.click(await screen.findByText('service.name'));
+		const serviceNameOption = await screen.findByText('service.name');
+		await act(async () => {
+			fireEvent.click(serviceNameOption);
+		});
 
 		// Select equals operator
-		await user.click(screen.getByText('='));
+		await act(async () => {
+			const equalsOption = screen.getByText('=');
+			fireEvent.click(equalsOption);
+		});
 
 		// Should show value suggestions including the dynamic variable
 		// For 'service.name', we expect to see '$service' as the first suggestion
@@ -274,7 +271,9 @@ describe('Dynamic Variable Suggestions', () => {
 		expect(screen.getByText('404')).toBeInTheDocument();
 
 		// Select the variable suggestion
-		await user.click(variableSuggestion);
+		await act(async () => {
+			fireEvent.click(variableSuggestion);
+		});
 
 		// Verify the query was updated with the variable as value
 		expect(mockOnChange).toHaveBeenCalledWith(

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: fieldDataTypeToDataType(keyData.fieldDataType),
+					dataType: keyData.fieldDataType as QUERY_BUILDER_KEY_TYPES,
 					type: '',
 				});
 			});

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

@@ -238,10 +238,6 @@ 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/tableDrilldownUtils.tsx

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

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

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

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/JsonEditor.test.tsx

@@ -151,9 +151,7 @@ describe('JsonEditor', () => {
 			);
 			await user.click(await within(readToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'test-key-123{enter}');
 
 			await switchToJsonMode();

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.test.tsx

@@ -1,10 +1,17 @@
+import { Route, Switch } from 'react-router-dom';
+import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
-import { screen, userEvent, waitFor, within } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 
-import { expandResourceCard, renderCreateRolePage } from './testUtils';
+import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.setTimeout(15_000);
+async function expandAllCards(): Promise<void> {
+	const user = userEvent.setup();
+	const expandButton = await screen.findByTestId('expand-all-button');
+	await user.click(expandButton);
+}
 
 beforeEach(() => {
 	server.use(setupAuthzAdmin());
@@ -14,16 +21,35 @@ afterEach(() => {
 	server.resetHandlers();
 });
 
+async function renderPage(): Promise<ReturnType<typeof render>> {
+	const result = render(
+		<TooltipProvider>
+			<Switch>
+				<Route path={ROUTES.ROLES_SETTINGS} exact>
+					<div data-testid="roles-list-redirect" />
+				</Route>
+				<Route path={ROUTES.ROLE_CREATE}>
+					<CreateEditRolePage />
+				</Route>
+			</Switch>
+		</TooltipProvider>,
+		undefined,
+		{ initialRoute: '/settings/roles/new' },
+	);
+	await screen.findByTestId('permission-editor');
+	return result;
+}
+
 describe('PermissionEditor', () => {
 	describe('mode toggle', () => {
 		it('renders permission editor with testId', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
 		});
 
 		it('defaults to interactive mode', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			const interactiveRadio = screen.getByTestId(
 				'permission-editor-mode-interactive',
@@ -33,7 +59,7 @@ describe('PermissionEditor', () => {
 
 		it('switches to JSON mode when clicked', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -44,7 +70,7 @@ describe('PermissionEditor', () => {
 
 		it('switches back to interactive mode', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -61,7 +87,7 @@ describe('PermissionEditor', () => {
 
 	describe('resource cards', () => {
 		it('renders all resource cards', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			expect(
 				screen.getByTestId('resource-card-factor-api-key'),
@@ -73,7 +99,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('resource cards are collapsed by default', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -85,7 +111,7 @@ describe('PermissionEditor', () => {
 
 		it('expands resource card when header clicked', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -99,7 +125,7 @@ describe('PermissionEditor', () => {
 
 		it('collapses expanded resource card when header clicked again', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -113,7 +139,7 @@ describe('PermissionEditor', () => {
 		});
 
 		it('shows granted count in resource card header', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			await expect(
@@ -124,8 +150,8 @@ describe('PermissionEditor', () => {
 
 	describe('action toggles', () => {
 		it('renders action toggles for each available action', async () => {
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			expect(
@@ -143,8 +169,8 @@ describe('PermissionEditor', () => {
 		});
 
 		it('defaults all actions to None scope', async () => {
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -161,8 +187,8 @@ describe('PermissionEditor', () => {
 
 		it('changes scope to All when clicked', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -182,8 +208,8 @@ describe('PermissionEditor', () => {
 
 		it('updates granted count when scope changed', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -201,8 +227,8 @@ describe('PermissionEditor', () => {
 	describe('Only Selected scope', () => {
 		it('shows item input selector when Only Selected is chosen', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -213,15 +239,13 @@ describe('PermissionEditor', () => {
 				await within(createToggle).findByText('Only selected');
 			await user.click(onlySelectedBtn);
 
-			expect(
-				screen.getByTestId('item-input-selector-factor-api-key-read'),
-			).toBeInTheDocument();
+			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
 		});
 
 		it('adds item when typed and Enter pressed', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -230,9 +254,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'api-key-001{enter}');
 
 			await expect(screen.findByText('api-key-001')).resolves.toBeInTheDocument();
@@ -240,8 +262,8 @@ describe('PermissionEditor', () => {
 
 		it('adds item when Add button clicked', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -250,14 +272,10 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'api-key-002');
 
-			const addBtn = screen.getByTestId(
-				'item-input-selector-add-btn-factor-api-key-read',
-			);
+			const addBtn = screen.getByTestId('item-input-selector-add-btn');
 			await user.click(addBtn);
 
 			await expect(screen.findByText('api-key-002')).resolves.toBeInTheDocument();
@@ -265,8 +283,8 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by comma', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -275,9 +293,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'key-a, key-b, key-c{enter}');
 
 			await expect(screen.findByText('key-a')).resolves.toBeInTheDocument();
@@ -287,8 +303,8 @@ describe('PermissionEditor', () => {
 
 		it('adds multiple items separated by space', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -297,9 +313,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'key-x key-y key-z{enter}');
 
 			await expect(screen.findByText('key-x')).resolves.toBeInTheDocument();
@@ -309,8 +323,8 @@ describe('PermissionEditor', () => {
 
 		it('does not add duplicate items', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -319,9 +333,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'same-key{enter}');
 			await user.type(input, 'same-key{enter}');
 
@@ -331,8 +343,8 @@ describe('PermissionEditor', () => {
 
 		it('removes item when X clicked', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -341,139 +353,21 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'removable-key{enter}');
 
-			const badge = await screen.findByTestId('item-badge-factor-api-key-read-0');
-			const removeBtn = within(badge).getByRole('button', {
-				name: 'Remove removable-key',
+			const removeBtn = screen.getByRole('button', {
+				name: /remove removable-key/i,
 			});
 			await user.click(removeBtn);
 
 			expect(screen.queryByText('removable-key')).not.toBeInTheDocument();
 		});
 
-		it('names each badge close button after the item it removes', async () => {
-			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
-			await user.type(input, 'key-one key-two{enter}');
-
-			const firstBadge = await screen.findByTestId(
-				'item-badge-factor-api-key-read-0',
-			);
-			const secondBadge = screen.getByTestId('item-badge-factor-api-key-read-1');
-
-			expect(
-				within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
-			).toBeInTheDocument();
-			expect(
-				within(secondBadge).getByRole('button', { name: 'Remove key-two' }),
-			).toBeInTheDocument();
-		});
-
-		it('exposes the full item value as a title so truncated badges stay readable', async () => {
-			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
-			await user.type(input, 'a-very-long-api-key-identifier-000001{enter}');
-
-			const badge = await screen.findByTestId('item-badge-factor-api-key-read-0');
-			expect(
-				within(badge).getByTitle('a-very-long-api-key-identifier-000001'),
-			).toBeInTheDocument();
-		});
-
-		it('moves focus to the previous badge when closed with the keyboard', async () => {
-			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
-			await user.type(input, 'key-one key-two{enter}');
-
-			const secondBadge = await screen.findByTestId(
-				'item-badge-factor-api-key-read-1',
-			);
-			within(secondBadge).getByRole('button', { name: 'Remove key-two' }).focus();
-
-			await user.keyboard('{Enter}');
-
-			await waitFor(() => {
-				const firstBadge = screen.getByTestId('item-badge-factor-api-key-read-0');
-				expect(
-					within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
-				).toHaveFocus();
-			});
-		});
-
-		it('does not steal focus when a badge is closed with the mouse', async () => {
-			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
-
-			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-			const readToggle = within(apiKeyCard).getByTestId(
-				'action-toggle-factor-api-key-read',
-			);
-			await user.click(await within(readToggle).findByText('Only selected'));
-
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
-			await user.type(input, 'key-one key-two{enter}');
-
-			const secondBadge = await screen.findByTestId(
-				'item-badge-factor-api-key-read-1',
-			);
-			await user.click(
-				within(secondBadge).getByRole('button', { name: 'Remove key-two' }),
-			);
-
-			await waitFor(() => {
-				expect(screen.queryByText('key-two')).not.toBeInTheDocument();
-			});
-
-			const firstBadge = screen.getByTestId('item-badge-factor-api-key-read-0');
-			expect(
-				within(firstBadge).getByRole('button', { name: 'Remove key-one' }),
-			).not.toHaveFocus();
-		});
-
 		it('shows Add button disabled when input is empty', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -482,9 +376,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const addBtn = screen.getByTestId(
-				'item-input-selector-add-btn-factor-api-key-read',
-			);
+			const addBtn = screen.getByTestId('item-input-selector-add-btn');
 			expect(addBtn).toBeDisabled();
 		});
 	});
@@ -492,8 +384,8 @@ describe('PermissionEditor', () => {
 	describe('scope change confirmation dialog', () => {
 		it('shows confirm dialog when leaving Only Selected with items', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -502,9 +394,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'will-be-cleared{enter}');
 
 			await user.click(await within(createToggle).findByText('All'));
@@ -516,8 +406,8 @@ describe('PermissionEditor', () => {
 
 		it('clears items when confirmed', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -526,9 +416,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'to-be-cleared{enter}');
 
 			await user.click(await within(createToggle).findByText('All'));
@@ -545,8 +433,8 @@ describe('PermissionEditor', () => {
 
 		it('keeps items when cancelled', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -555,9 +443,7 @@ describe('PermissionEditor', () => {
 
 			await user.click(await within(createToggle).findByText('Only selected'));
 
-			const input = screen.getByTestId(
-				'item-input-selector-input-factor-api-key-read',
-			);
+			const input = screen.getByTestId('item-input-selector-input');
 			await user.type(input, 'preserved-key{enter}');
 
 			await user.click(await within(createToggle).findByText('None'));
@@ -569,15 +455,13 @@ describe('PermissionEditor', () => {
 				screen.findByText('preserved-key'),
 			).resolves.toBeInTheDocument();
 
-			expect(
-				screen.getByTestId('item-input-selector-factor-api-key-read'),
-			).toBeInTheDocument();
+			expect(screen.getByTestId('item-input-selector')).toBeInTheDocument();
 		});
 
 		it('does not show dialog when leaving Only Selected with no items', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const createToggle = within(apiKeyCard).getByTestId(
@@ -595,8 +479,8 @@ describe('PermissionEditor', () => {
 
 	describe('verbs without Only Selected option', () => {
 		it('does not show Only Selected for list verb', async () => {
-			await renderCreateRolePage();
-			await expandResourceCard('factor-api-key');
+			await renderPage();
+			await expandAllCards();
 
 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const listToggle = within(apiKeyCard).getByTestId(
@@ -617,7 +501,7 @@ describe('PermissionEditor', () => {
 
 	describe('collapse/expand all resources', () => {
 		it('shows expand/collapse toggle group', async () => {
-			await renderCreateRolePage();
+			await renderPage();
 
 			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
 			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
@@ -625,23 +509,21 @@ describe('PermissionEditor', () => {
 		});
 
 		it('expands all cards when expand button clicked', async () => {
-			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
+			await expandAllCards();
 
-			await user.click(screen.getByTestId('expand-all-button'));
-
-			const headers = screen.getAllByTestId(/^resource-card-header-/);
-			expect(headers.length).toBeGreaterThan(1);
-			headers.forEach((header) => {
-				expect(header).toHaveAttribute('aria-expanded', 'true');
-			});
+			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
+			const header = within(apiKeyCard).getByTestId(
+				'resource-card-header-factor-api-key',
+			);
+			expect(header).toHaveAttribute('aria-expanded', 'true');
 		});
 	});
 
 	describe('resource card error states', () => {
 		it('shows error border on collapsed card with validation error', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -671,7 +553,7 @@ describe('PermissionEditor', () => {
 
 		it('hides error border when card is expanded', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -708,7 +590,7 @@ describe('PermissionEditor', () => {
 
 		it('clears validation error when permission is changed', async () => {
 			const user = userEvent.setup();
-			await renderCreateRolePage();
+			await renderPage();
 
 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.wizard.test.tsx

@@ -1,466 +0,0 @@
-import { server } from 'mocks-server/server';
-import { screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
-
-import { expandResourceCard, renderCreateRolePage } from './testUtils';
-
-jest.setTimeout(15_000);
-
-beforeEach(() => {
-	server.use(setupAuthzAdmin());
-});
-
-afterEach(() => {
-	server.resetHandlers();
-});
-
-async function selectOnlySelected(
-	user: ReturnType<typeof userEvent.setup>,
-	resource = 'logs',
-): Promise<void> {
-	await renderCreateRolePage();
-	await expandResourceCard(resource);
-
-	const card = screen.getByTestId(`resource-card-${resource}`);
-	const readToggle = within(card).getByTestId(`action-toggle-${resource}-read`);
-	await user.click(await within(readToggle).findByText('Only selected'));
-}
-
-async function selectLogsOnlySelected(
-	user: ReturnType<typeof userEvent.setup>,
-): Promise<void> {
-	await selectOnlySelected(user, 'logs');
-}
-
-async function openWizard(
-	user: ReturnType<typeof userEvent.setup>,
-	resource = 'logs',
-): Promise<void> {
-	await selectOnlySelected(user, resource);
-
-	await user.click(
-		screen.getByTestId(`telemetry-wizard-trigger-${resource}-read`),
-	);
-	await screen.findByTestId(`telemetry-wizard-dialog-${resource}-read`);
-}
-
-async function openLogsWizard(
-	user: ReturnType<typeof userEvent.setup>,
-): Promise<void> {
-	await openWizard(user, 'logs');
-}
-
-describe('PermissionEditor - TelemetrySelectorWizard', () => {
-	it('shows wizard button for telemetry resources', async () => {
-		const user = userEvent.setup();
-		await selectLogsOnlySelected(user);
-
-		expect(
-			screen.getByTestId('telemetry-wizard-trigger-logs-read'),
-		).toBeInTheDocument();
-	});
-
-	it('does not show wizard button for non-telemetry resources', async () => {
-		await renderCreateRolePage();
-		await expandResourceCard('factor-api-key');
-
-		const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
-		const readToggle = within(apiKeyCard).getByTestId(
-			'action-toggle-factor-api-key-read',
-		);
-
-		const user = userEvent.setup();
-		await user.click(await within(readToggle).findByText('Only selected'));
-
-		expect(
-			within(apiKeyCard).queryByTestId(
-				'telemetry-wizard-trigger-factor-api-key-read',
-			),
-		).not.toBeInTheDocument();
-	});
-
-	it('opens wizard dialog when trigger clicked', async () => {
-		const user = userEvent.setup();
-		await selectLogsOnlySelected(user);
-
-		await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
-
-		await expect(
-			screen.findByTestId('telemetry-wizard-dialog-logs-read'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('adds a query-type wildcard when the value is left empty', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await expect(
-			screen.findByText('builder_query/*'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('does not offer builder sub query', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-
-		expect(screen.queryByText('Builder Sub Query')).not.toBeInTheDocument();
-	});
-
-	it('does not show PromQL for logs', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-
-		expect(
-			screen.queryByTestId('wizard-query-type-option-promql-logs-read'),
-		).not.toBeInTheDocument();
-	});
-
-	it('does not show PromQL for traces', async () => {
-		const user = userEvent.setup();
-		await openWizard(user, 'traces');
-
-		await user.click(screen.getByTestId('wizard-query-type-select-traces-read'));
-
-		expect(
-			screen.queryByTestId('wizard-query-type-option-promql-traces-read'),
-		).not.toBeInTheDocument();
-	});
-
-	it('allows PromQL for metrics', async () => {
-		const user = userEvent.setup();
-		await openWizard(user, 'metrics');
-
-		await user.click(screen.getByTestId('wizard-query-type-select-metrics-read'));
-		await user.click(
-			await screen.findByTestId('wizard-query-type-option-promql-metrics-read'),
-		);
-
-		await user.click(screen.getByTestId('wizard-add-btn-metrics-read'));
-
-		await expect(screen.findByText('promql/*')).resolves.toBeInTheDocument();
-	});
-
-	it('hardcodes the key and does not let it be edited', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const keyInput = screen.getByTestId('wizard-key-input-logs-read');
-		expect(keyInput).toHaveValue('signoz.workspace.key.id');
-		expect(keyInput).toBeDisabled();
-	});
-
-	it('hides Key field for query types that do not support key scoping', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-		await user.click(await screen.findByText('ClickHouse SQL'));
-
-		expect(
-			screen.queryByTestId('wizard-key-input-logs-read'),
-		).not.toBeInTheDocument();
-	});
-
-	it('adds a key-scoped selector when the value is filled', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '123');
-
-		expect(screen.getByTestId('wizard-selector-input-logs-read')).toHaveValue(
-			'builder_query/signoz.workspace.key.id/123',
-		);
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await expect(
-			screen.findByText('builder_query/signoz.workspace.key.id/123'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('replaces the value with a wildcard when any resource is checked', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByLabelText('Any value'));
-
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue('*');
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await expect(
-			screen.findByText('builder_query/signoz.workspace.key.id/*'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('clears the value when any resource is unchecked', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const anyResource = screen.getByLabelText('Any value');
-		await user.click(anyResource);
-		expect(anyResource).toBeChecked();
-
-		await user.click(anyResource);
-
-		expect(anyResource).not.toBeChecked();
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue('');
-	});
-
-	it('checks any resource when the value is typed as a wildcard', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '*');
-
-		expect(screen.getByLabelText('Any value')).toBeChecked();
-	});
-
-	it('disables value scoping for query types that do not support it', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-		await user.click(await screen.findByText('ClickHouse SQL'));
-
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toBeDisabled();
-		expect(screen.getByLabelText('Any value')).toBeDisabled();
-	});
-
-	it('clears the value when switching to a query type without key scoping', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '123');
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-		await user.click(await screen.findByText('ClickHouse SQL'));
-
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue('');
-		expect(screen.getByTestId('wizard-selector-input-logs-read')).toHaveValue(
-			'clickhouse_sql/*',
-		);
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await expect(
-			screen.findByText('clickhouse_sql/*'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('follows a hand-edited selector on the query type and value inputs', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(
-			selectorInput,
-			'clickhouse_sql/signoz.workspace.key.id/checkout',
-		);
-
-		const selectTrigger = screen.getByTestId(
-			'wizard-query-type-select-logs-read',
-		);
-		expect(within(selectTrigger).getByText('ClickHouse SQL')).toBeInTheDocument();
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue(
-			'checkout',
-		);
-	});
-
-	it('checks any resource when the selector is edited to a wildcard value', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/signoz.workspace.key.id/*');
-
-		expect(screen.getByLabelText('Any value')).toBeChecked();
-	});
-
-	it('keeps the key input hardcoded when the selector uses another key', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/service.name/frontend');
-
-		expect(screen.getByTestId('wizard-key-input-logs-read')).toHaveValue(
-			'signoz.workspace.key.id',
-		);
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent('Allow service.name=frontend for Builder Query queries.');
-		expect(screen.getByTestId('wizard-add-btn-logs-read')).not.toBeDisabled();
-	});
-
-	it('restores the hardcoded key in the selector once the value changes', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/service.name/frontend');
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '2');
-
-		expect(selectorInput).toHaveValue(
-			'builder_query/signoz.workspace.key.id/frontend2',
-		);
-		expect(screen.getByTestId('wizard-add-btn-logs-read')).not.toBeDisabled();
-	});
-
-	it('blocks adding when the selector has an unknown query type', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'sql_query/*');
-
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent('"sql_query" is not a supported query type.');
-		expect(screen.getByTestId('wizard-add-btn-logs-read')).toBeDisabled();
-	});
-
-	it('blocks adding when the selector is emptied', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.clear(screen.getByTestId('wizard-selector-input-logs-read'));
-
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent('Enter a selector.');
-		expect(screen.getByTestId('wizard-add-btn-logs-read')).toBeDisabled();
-	});
-
-	it('adds the hand-edited selector verbatim', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		const selectorInput = screen.getByTestId('wizard-selector-input-logs-read');
-		await user.clear(selectorInput);
-		await user.type(selectorInput, 'builder_query/signoz.workspace.key.id/a/b');
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await expect(
-			screen.findByText('builder_query/signoz.workspace.key.id/a/b'),
-		).resolves.toBeInTheDocument();
-	});
-
-	it('closes dialog after adding selector', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await waitFor(() => {
-			expect(
-				screen.queryByTestId('telemetry-wizard-dialog-logs-read'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	it('does not add duplicate selectors', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
-		await screen.findByTestId('telemetry-wizard-dialog-logs-read');
-		await user.click(screen.getByTestId('wizard-add-btn-logs-read'));
-
-		const badges = screen.getAllByText('builder_query/*');
-		expect(badges).toHaveLength(1);
-	});
-
-	it('resets wizard state when dialog is closed and reopened', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '123');
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-		await user.click(await screen.findByText('ClickHouse SQL'));
-
-		await user.click(screen.getByRole('button', { name: /cancel/i }));
-
-		await waitFor(() => {
-			expect(
-				screen.queryByTestId('telemetry-wizard-dialog-logs-read'),
-			).not.toBeInTheDocument();
-		});
-
-		await user.click(screen.getByTestId('telemetry-wizard-trigger-logs-read'));
-		const selectTrigger = await screen.findByTestId(
-			'wizard-query-type-select-logs-read',
-		);
-
-		expect(within(selectTrigger).getByText('Builder Query')).toBeInTheDocument();
-		expect(screen.getByTestId('wizard-value-input-logs-read')).toHaveValue('');
-		expect(screen.getByTestId('wizard-selector-input-logs-read')).toHaveValue(
-			'builder_query/*',
-		);
-	});
-
-	it('previews the query-type wildcard while the value is empty', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		expect(screen.getByTestId('wizard-selector-input-logs-read')).toHaveValue(
-			'builder_query/*',
-		);
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent('Allow every "Builder Query" query.');
-	});
-
-	it('describes a key-scoped selector', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.type(screen.getByTestId('wizard-value-input-logs-read'), '123');
-
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent(
-			'Allow signoz.workspace.key.id=123 for Builder Query queries.',
-		);
-	});
-
-	it('describes an any-resource selector', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByLabelText('Any value'));
-
-		expect(
-			screen.getByTestId('wizard-selector-hint-logs-read'),
-		).toHaveTextContent(
-			'Allow every signoz.workspace.key.id for Builder Query queries.',
-		);
-	});
-
-	it('does not show query type descriptions', async () => {
-		const user = userEvent.setup();
-		await openLogsWizard(user);
-
-		await user.click(screen.getByTestId('wizard-query-type-select-logs-read'));
-
-		expect(
-			screen.queryByText(
-				'Visual query builder for selecting data sources, filters, and aggregations',
-			),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/testUtils.tsx

@@ -1,35 +0,0 @@
-import { Route, Switch } from 'react-router-dom';
-import ROUTES from 'constants/routes';
-import { render, screen, userEvent, within } from 'tests/test-utils';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-
-import CreateEditRolePage from '../CreateEditRolePage';
-
-export async function renderCreateRolePage(): Promise<
-	ReturnType<typeof render>
-> {
-	const result = render(
-		<TooltipProvider>
-			<Switch>
-				<Route path={ROUTES.ROLES_SETTINGS} exact>
-					<div data-testid="roles-list-redirect" />
-				</Route>
-				<Route path={ROUTES.ROLE_CREATE}>
-					<CreateEditRolePage />
-				</Route>
-			</Switch>
-		</TooltipProvider>,
-		undefined,
-		{ initialRoute: '/settings/roles/new' },
-	);
-	await screen.findByTestId('permission-editor');
-	return result;
-}
-
-export async function expandResourceCard(resourceId: string): Promise<void> {
-	const user = userEvent.setup();
-	const card = await screen.findByTestId(`resource-card-${resourceId}`);
-	await user.click(
-		within(card).getByTestId(`resource-card-header-${resourceId}`),
-	);
-}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.tsx

@@ -7,7 +7,6 @@ import { Typography } from '@signozhq/ui/typography';
 import { PermissionScope } from '../../types';
 import { getResourcePanel } from '../../permissions.config';
 import ItemInputSelector from './ItemInputSelector';
-import TelemetrySelectorWizard from './TelemetrySelectorWizard';
 
 import styles from './ActionToggle.module.scss';
 import { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
@@ -40,13 +39,10 @@ function ActionToggle({
 	onSelectedIdsChange,
 	hasError = false,
 }: ActionToggleProps): JSX.Element {
-	const panel = getResourcePanel(resource);
-
 	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
 	const [pendingScope, setPendingScope] = useState<PermissionScope | null>(null);
 
 	const displayLabel = getActionLabel(action);
-	const selectorTestId = `${resource}-${action}`;
 
 	const scopeItems: Array<{ value: PermissionScope; label: string }> =
 		useMemo(() => {
@@ -125,25 +121,11 @@ function ActionToggle({
 						<Divider />
 
 						<ItemInputSelector
-							placeholder={panel.selectorPlaceholder}
+							placeholder={getResourcePanel(resource).selectorPlaceholder}
 							selectedIds={selectedIds}
 							onChange={onSelectedIdsChange}
-							testId={selectorTestId}
-							docsAnchor={panel.docsAnchor}
+							docsAnchor={getResourcePanel(resource).docsAnchor}
 							hasError={hasError}
-							prefixElement={
-								panel.selectorType === 'telemetryBuilder' ? (
-									<TelemetrySelectorWizard
-										resource={resource}
-										testId={selectorTestId}
-										onAdd={(selector): void => {
-											if (!selectedIds.includes(selector)) {
-												onSelectedIdsChange([...selectedIds, selector]);
-											}
-										}}
-									/>
-								) : null
-							}
 						/>
 					</div>
 				)}

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.module.scss

@@ -4,10 +4,9 @@
 	gap: var(--spacing-4);
 	background: var(--l1-background);
 	border: 1px solid var(--l1-border);
-	border-radius: var(--radius-2);
+	border-radius: 4px;
 	padding: var(--spacing-4);
 
-	--input-prefix-padding: var(--spacing-2);
 	--input-suffix-padding: var(--spacing-2);
 }
 
@@ -42,11 +41,6 @@
 	overflow-y: auto;
 }
 
-.itemInputSelectorBadge {
-	--badge-border-radius: 4px;
-	--badge-hover-background: var(--l2-background) !important;
-}
-
 .itemInputSelectorInfoIcon {
 	flex-shrink: 0;
 	color: var(--l2-foreground);
@@ -57,7 +51,55 @@
 	}
 }
 
+.itemInputSelectorBadge {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 140px;
+	padding: 2px 4px 2px 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+}
+
+.itemInputSelectorBadgeLabel {
+	flex: 1;
+	min-width: 0;
+}
+
+.itemInputSelectorBadgeRemove {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 14px;
+	height: 14px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--l2-foreground);
+	cursor: pointer;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
+
+	&:hover {
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+	}
+}
+
 .itemInputSelectorHint {
 	margin: 0;
 	color: var(--l2-foreground);
+
+	a {
+		color: var(--primary);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
 }

frontend/src/container/RolesSettings/CreateEditRolePage/components/ItemInputSelector.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import { Info, Plus } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Info, Plus, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
@@ -16,10 +15,8 @@ export interface ItemInputSelectorProps {
 	placeholder: string;
 	selectedIds: string[];
 	onChange: (ids: string[]) => void;
-	testId: string;
 	docsAnchor?: string;
 	hasError?: boolean;
-	prefixElement?: React.ReactNode;
 }
 
 function parseInputValues(input: string): string[] {
@@ -33,13 +30,11 @@ function ItemInputSelector({
 	placeholder,
 	selectedIds,
 	onChange,
-	testId,
 	docsAnchor = 'role',
 	hasError = false,
-	prefixElement,
 }: ItemInputSelectorProps): JSX.Element {
 	const [inputValue, setInputValue] = useState('');
-	const badgesRef = useRef<HTMLDivElement>(null);
+	const footerRef = useRef<HTMLDivElement>(null);
 
 	const addValues = useCallback(
 		(input: string): void => {
@@ -92,24 +87,26 @@ function ItemInputSelector({
 		[selectedIds, onChange],
 	);
 
-	const handleBadgeClose = useCallback(
-		(e: React.MouseEvent, itemId: string, index: number): void => {
-			e.preventDefault();
-			handleRemove(itemId);
-
-			// Activating a button via Enter/Space reports detail 0;
-			// a real click reports 1 or more
-			// Only trigger focus when using keyboard
-			const isKeyboardActivation = e.detail === 0;
-
-			if (!isKeyboardActivation) {
+	const handleBadgeKeyDown = useCallback(
+		(
+			e: React.KeyboardEvent<HTMLButtonElement>,
+			itemId: string,
+			index: number,
+		): void => {
+			if (e.key !== 'Enter' && e.key !== ' ') {
 				return;
 			}
 
+			e.preventDefault();
+			handleRemove(itemId);
+
 			const targetIndex = index > 0 ? index - 1 : 0;
 			requestAnimationFrame(() => {
-				const buttons = badgesRef.current?.querySelectorAll('button');
-				buttons?.[targetIndex]?.focus();
+				const buttons = footerRef.current?.querySelectorAll('button');
+				const targetButton = buttons?.[targetIndex] as
+					| HTMLButtonElement
+					| undefined;
+				targetButton?.focus();
 			});
 		},
 		[handleRemove],
@@ -123,7 +120,7 @@ function ItemInputSelector({
 				styles.itemInputSelector,
 				showError ? styles.itemInputSelectorError : '',
 			)}
-			data-testid={`item-input-selector-${testId}`}
+			data-testid="item-input-selector"
 		>
 			<Input
 				placeholder={placeholder}
@@ -131,15 +128,14 @@ function ItemInputSelector({
 				onChange={handleInputChange}
 				onKeyDown={handleInputKeyDown}
 				onBlur={handleInputBlur}
-				data-testid={`item-input-selector-input-${testId}`}
-				prefix={prefixElement}
+				data-testid="item-input-selector-input"
 				suffix={
 					<Button
 						variant="solid"
 						size="sm"
 						onClick={handleAddClick}
 						disabled={!inputValue.trim()}
-						data-testid={`item-input-selector-add-btn-${testId}`}
+						data-testid="item-input-selector-add-btn"
 					>
 						<Plus size={14} />
 						Add
@@ -148,22 +144,28 @@ function ItemInputSelector({
 			/>
 
 			{selectedIds.length > 0 ? (
-				<div className={styles.itemInputSelectorFooter}>
-					<div ref={badgesRef} className={styles.itemInputSelectorBadges}>
+				<div ref={footerRef} className={styles.itemInputSelectorFooter}>
+					<div className={styles.itemInputSelectorBadges}>
 						{selectedIds.map((id, index) => (
-							<Badge
-								key={id}
-								color="secondary"
-								className={styles.itemInputSelectorBadge}
-								testId={`item-badge-${testId}-${index}`}
-								closable
-								closeAriaLabel={`Remove ${id}`}
-								onClose={(e): void => handleBadgeClose(e, id, index)}
-							>
-								<Typography as="span" size="small" truncate={1} title={id}>
+							<span key={id} className={styles.itemInputSelectorBadge} title={id}>
+								<Typography
+									as="span"
+									size="small"
+									truncate={1}
+									className={styles.itemInputSelectorBadgeLabel}
+								>
 									{id}
 								</Typography>
-							</Badge>
+								<button
+									type="button"
+									className={styles.itemInputSelectorBadgeRemove}
+									onClick={(): void => handleRemove(id)}
+									onKeyDown={(e): void => handleBadgeKeyDown(e, id, index)}
+									aria-label={`Remove ${id}`}
+								>
+									<X size={10} />
+								</button>
+							</span>
 						))}
 					</div>
 					<TooltipSimple

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.constants.ts

@@ -1,50 +0,0 @@
-// intentionally omitting few query types
-// from pkg/types/querybuildertypes/querybuildertypesv5/query_type.go
-export type QueryTypeId = 'builder_query' | 'promql' | 'clickhouse_sql';
-
-export interface QueryTypeOption {
-	id: QueryTypeId;
-	label: string;
-	supportsKeyScoping: boolean;
-	metricsOnly?: boolean;
-}
-
-export const QUERY_TYPES: readonly QueryTypeOption[] = [
-	{
-		id: 'builder_query',
-		label: 'Builder Query',
-		supportsKeyScoping: true,
-	},
-	{
-		id: 'promql',
-		label: 'PromQL',
-		supportsKeyScoping: false,
-		metricsOnly: true,
-	},
-	{
-		id: 'clickhouse_sql',
-		label: 'ClickHouse SQL',
-		supportsKeyScoping: false,
-	},
-] as const;
-
-export const DEFAULT_QUERY_TYPE: QueryTypeId = 'builder_query';
-
-export const SUPPORTED_GRANT_KEY = 'signoz.workspace.key.id';
-
-export const ANY_RESOURCE_VALUE = '*';
-
-export interface SelectorDraft {
-	queryType: QueryTypeId;
-	value: string;
-}
-
-export interface ParsedSelector {
-	queryType?: QueryTypeId;
-	value: string;
-}
-
-export interface SelectorValidation {
-	message: string;
-	isError: boolean;
-}

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.module.scss

@@ -1,52 +0,0 @@
-.wizardDialog {
-	border-color: var(--l1-border);
-
-	--select-trigger-background-color: var(--l3-background);
-	--select-trigger-border-color: var(--l3-background);
-	--select-content-background: var(--l3-background);
-	--select-item-highlight-background: var(--l3-background-hover);
-	--select-trigger-outline-width: 1px;
-	--select-trigger-outline-offset: 0px;
-
-	--input-background: var(--l3-background);
-	--input-hover-background: var(--l3-background);
-	--input-focus-background: var(--l3-background);
-	--input-disabled-background: var(--l3-background);
-	--input-border-color: var(--l3-border);
-	--input-hover-border-color: var(--l3-border);
-	--input-focus-border-color: var(--l3-border);
-
-	outline: none;
-
-	& > div {
-		background-color: var(--l2-background);
-	}
-}
-
-.wizardBody {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-}
-
-.wizardField {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-}
-
-.wizardValueRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-}
-
-.wizardValueInput {
-	flex: 1;
-	min-width: 0;
-}
-
-.selectContent {
-	z-index: 10;
-	background-color: var(--l3-background);
-}

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.tsx

@@ -1,190 +0,0 @@
-import { Wand } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '@signozhq/ui/select';
-import { Typography } from '@signozhq/ui/typography';
-
-import {
-	ANY_RESOURCE_VALUE,
-	QUERY_TYPES,
-	SUPPORTED_GRANT_KEY,
-} from './TelemetrySelectorWizard.constants';
-import { isQueryTypeAvailable } from './TelemetrySelectorWizard.utils';
-import useTelemetrySelectorWizard from './useTelemetrySelectorWizard';
-
-import styles from './TelemetrySelectorWizard.module.scss';
-import { AuthZResource } from 'lib/authz/hooks/useAuthZ/types';
-
-interface TelemetrySelectorWizardProps {
-	onAdd: (selector: string) => void;
-	resource: AuthZResource;
-	testId: string;
-}
-
-function TelemetrySelectorWizard({
-	onAdd,
-	resource,
-	testId,
-}: TelemetrySelectorWizardProps): JSX.Element {
-	const {
-		open,
-		queryType,
-		selectedQueryType,
-		value,
-		selector,
-		isAnyResource,
-		supportsKeyScoping,
-		validation,
-		canAdd,
-		handleOpenChange,
-		handleQueryTypeChange,
-		handleValueChange,
-		handleAnyResourceChange,
-		handleSelectorChange,
-		handleAdd,
-		handleInputKeyDown,
-	} = useTelemetrySelectorWizard({ onAdd });
-
-	const trigger = (
-		<Button
-			variant="solid"
-			size="sm"
-			data-testid={`telemetry-wizard-trigger-${testId}`}
-		>
-			<Wand size={14} />
-			Wizard
-		</Button>
-	);
-
-	const footer = (
-		<>
-			<Button
-				variant="ghost"
-				color="secondary"
-				onClick={(): void => handleOpenChange(false)}
-			>
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				onClick={handleAdd}
-				disabled={!canAdd}
-				data-testid={`wizard-add-btn-${testId}`}
-			>
-				Add Selector
-			</Button>
-		</>
-	);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={handleOpenChange}
-			title="Selector Wizard"
-			width="wide"
-			testId={`telemetry-wizard-dialog-${testId}`}
-			trigger={trigger}
-			footer={footer}
-			className={styles.wizardDialog}
-		>
-			<div className={styles.wizardBody}>
-				<div className={styles.wizardField}>
-					<Typography as="label" weight="medium">
-						Query Type
-					</Typography>
-					<Select value={queryType} onChange={handleQueryTypeChange}>
-						<SelectTrigger data-testid={`wizard-query-type-select-${testId}`}>
-							<SelectValue>{selectedQueryType?.label}</SelectValue>
-						</SelectTrigger>
-						<SelectContent withPortal={false} className={styles.selectContent}>
-							{QUERY_TYPES.filter((queryTypeOption) =>
-								isQueryTypeAvailable(queryTypeOption, resource),
-							).map((queryTypeOption) => (
-								<SelectItem
-									key={queryTypeOption.id}
-									value={queryTypeOption.id}
-									testId={`wizard-query-type-option-${queryTypeOption.id}-${testId}`}
-								>
-									{queryTypeOption.label}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
-
-				{supportsKeyScoping && (
-					<div className={styles.wizardField}>
-						<Typography as="label" weight="medium">
-							Key
-						</Typography>
-						<Input
-							value={SUPPORTED_GRANT_KEY}
-							readOnly
-							disabled
-							testId={`wizard-key-input-${testId}`}
-						/>
-					</div>
-				)}
-
-				<div className={styles.wizardField}>
-					<Typography as="label" weight="medium">
-						Value
-					</Typography>
-					<div className={styles.wizardValueRow}>
-						<Input
-							className={styles.wizardValueInput}
-							placeholder={
-								supportsKeyScoping
-									? 'Value or leave empty to allow every query'
-									: ANY_RESOURCE_VALUE
-							}
-							value={value}
-							disabled={!supportsKeyScoping}
-							onChange={handleValueChange}
-							onKeyDown={handleInputKeyDown}
-							testId={`wizard-value-input-${testId}`}
-						/>
-						<Checkbox
-							id={`wizard-any-resource-${testId}`}
-							value={isAnyResource}
-							disabled={!supportsKeyScoping}
-							onChange={(checked): void => handleAnyResourceChange(checked === true)}
-							testId={`wizard-any-resource-checkbox-${testId}`}
-						>
-							Any value
-						</Checkbox>
-					</div>
-				</div>
-
-				<div className={styles.wizardField}>
-					<Typography as="label" weight="medium">
-						Selector
-					</Typography>
-					<Input
-						value={selector}
-						onChange={handleSelectorChange}
-						onKeyDown={handleInputKeyDown}
-						testId={`wizard-selector-input-${testId}`}
-					/>
-					<Typography.Text
-						size="small"
-						color={validation.isError ? 'danger' : 'muted'}
-						testId={`wizard-selector-hint-${testId}`}
-					>
-						{validation.message}
-					</Typography.Text>
-				</div>
-			</div>
-		</DialogWrapper>
-	);
-}
-
-export default TelemetrySelectorWizard;

frontend/src/container/RolesSettings/CreateEditRolePage/components/TelemetrySelectorWizard.utils.ts

@@ -1,139 +0,0 @@
-import { AuthZResource } from 'lib/authz/hooks/useAuthZ/types';
-
-import {
-	ANY_RESOURCE_VALUE,
-	ParsedSelector,
-	QUERY_TYPES,
-	QueryTypeId,
-	QueryTypeOption,
-	SelectorDraft,
-	SelectorValidation,
-	SUPPORTED_GRANT_KEY,
-} from './TelemetrySelectorWizard.constants';
-
-const METRIC_RESOURCES: ReadonlySet<AuthZResource> = new Set<AuthZResource>([
-	'metrics',
-	'meter-metrics',
-]);
-
-export function getQueryTypeOption(
-	queryType: string,
-): QueryTypeOption | undefined {
-	return QUERY_TYPES.find((option) => option.id === queryType);
-}
-
-export function isQueryTypeAvailable(
-	option: QueryTypeOption,
-	resource: AuthZResource,
-): boolean {
-	return !option.metricsOnly || METRIC_RESOURCES.has(resource);
-}
-
-export function supportsKeyScoping(queryType: string): boolean {
-	return getQueryTypeOption(queryType)?.supportsKeyScoping ?? false;
-}
-
-export function isAnyResourceValue(value: string): boolean {
-	return value.trim() === ANY_RESOURCE_VALUE;
-}
-
-function splitSelector(selector: string): string[] {
-	const parts = selector.split('/');
-
-	if (parts.length <= 3) {
-		return parts;
-	}
-
-	return [parts[0], parts[1], parts.slice(2).join('/')];
-}
-
-export function buildSelector({ queryType, value }: SelectorDraft): string {
-	const trimmedValue = value.trim();
-
-	if (!supportsKeyScoping(queryType) || !trimmedValue) {
-		return `${queryType}/${ANY_RESOURCE_VALUE}`;
-	}
-
-	return `${queryType}/${SUPPORTED_GRANT_KEY}/${trimmedValue}`;
-}
-
-export function parseSelector(selector: string): ParsedSelector {
-	const parts = splitSelector(selector.trim());
-
-	return {
-		queryType: getQueryTypeOption(parts[0])?.id,
-		value: parts.length >= 3 ? parts[2] : '',
-	};
-}
-
-/**
- * This does a basic validation, intentionally omitting deep validations since this is to be made at backend,
- * so this will allow to produce invalid selectors, and the validation will be done after the user try to save
- */
-export function validateSelector(selector: string): SelectorValidation {
-	const trimmed = selector.trim();
-
-	if (!trimmed) {
-		return { message: 'Enter a selector.', isError: true };
-	}
-
-	if (trimmed === ANY_RESOURCE_VALUE) {
-		return { message: 'Allow every query of every type.', isError: false };
-	}
-
-	const parts = splitSelector(trimmed);
-	const option = getQueryTypeOption(parts[0]);
-
-	if (!option) {
-		return {
-			message: `"${parts[0]}" is not a supported query type.`,
-			isError: true,
-		};
-	}
-
-	if (parts.length < 3) {
-		if (parts.length === 2 && parts[1] !== ANY_RESOURCE_VALUE) {
-			if (!option.supportsKeyScoping) {
-				return {
-					message: `This query type does not support key scoping. Use ${option.id}/*`,
-					isError: false, // intentionally not an error
-				};
-			}
-
-			return {
-				message: `Use <query-type>/${ANY_RESOURCE_VALUE} or <query-type>/${SUPPORTED_GRANT_KEY}/<value>.`,
-				isError: false, // intentionally not an error
-			};
-		}
-
-		return {
-			message: `Allow every "${option.label}" query.`,
-			isError: false,
-		};
-	}
-
-	const [, key, value] = parts;
-
-	if (value === ANY_RESOURCE_VALUE) {
-		return {
-			message: `Allow every ${key} for ${option.label} queries.`,
-			isError: false,
-		};
-	}
-
-	if (!option.supportsKeyScoping) {
-		return {
-			message: `This query type does not support key scoping. Use ${option.id}/*`,
-			isError: false, // intentionally not an error
-		};
-	}
-
-	return {
-		message: `Allow ${key}=${value} for ${option.label} queries.`,
-		isError: false,
-	};
-}
-
-export function getDefaultSelector(queryType: QueryTypeId): string {
-	return buildSelector({ queryType, value: '' });
-}

frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts

@@ -76,10 +76,9 @@ function createGrantPermissionAsReadonly(
 	return {
 		label: 'readonly',
 		insertText: resources
-			.filter((r) => {
-				const verbs: readonly string[] = r.allowedVerbs;
-				return verbs.includes('read') || verbs.includes('list');
-			})
+			.filter(
+				(r) => r.allowedVerbs.includes('read') || r.allowedVerbs.includes('list'),
+			)
 			.flatMap((r) => {
 				const verbs = r.allowedVerbs.filter((v) => v === 'read' || v === 'list');
 				return verbs.map(
@@ -104,12 +103,7 @@ function buildResourceSnippets(): SnippetDef[] {
 	for (const resource of resources) {
 		const { kind, type, allowedVerbs } = resource;
 
-		// If only one verb is supported, no point on add grant all
-		// that will only add one permission at time, just leave the verb snippet
-		// and it will look cleaner
-		if (allowedVerbs.length > 1) {
-			snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
-		}
+		snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
 
 		for (const verb of allowedVerbs) {
 			snippets.push(createGrantPermissionToVerbAndKind(kind, verb, type));

frontend/src/container/RolesSettings/CreateEditRolePage/components/useTelemetrySelectorWizard.ts

@@ -1,157 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import {
-	ANY_RESOURCE_VALUE,
-	DEFAULT_QUERY_TYPE,
-	QueryTypeId,
-	QueryTypeOption,
-	SelectorValidation,
-} from './TelemetrySelectorWizard.constants';
-import {
-	buildSelector,
-	getDefaultSelector,
-	getQueryTypeOption,
-	isAnyResourceValue,
-	parseSelector,
-	validateSelector,
-} from './TelemetrySelectorWizard.utils';
-
-interface UseTelemetrySelectorWizardParams {
-	onAdd: (selector: string) => void;
-}
-
-interface UseTelemetrySelectorWizardResult {
-	open: boolean;
-	queryType: QueryTypeId;
-	selectedQueryType: QueryTypeOption | undefined;
-	value: string;
-	selector: string;
-	isAnyResource: boolean;
-	supportsKeyScoping: boolean;
-	validation: SelectorValidation;
-	canAdd: boolean;
-	handleOpenChange: (nextOpen: boolean) => void;
-	handleQueryTypeChange: (value: string | string[]) => void;
-	handleValueChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-	handleAnyResourceChange: (checked: boolean) => void;
-	handleSelectorChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-	handleAdd: () => void;
-	handleInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-}
-
-function useTelemetrySelectorWizard({
-	onAdd,
-}: UseTelemetrySelectorWizardParams): UseTelemetrySelectorWizardResult {
-	const [open, setOpen] = useState(false);
-	const [queryType, setQueryType] = useState<QueryTypeId>(DEFAULT_QUERY_TYPE);
-	const [value, setValue] = useState('');
-	const [selector, setSelector] = useState(() =>
-		getDefaultSelector(DEFAULT_QUERY_TYPE),
-	);
-
-	const selectedQueryType = useMemo(
-		() => getQueryTypeOption(queryType),
-		[queryType],
-	);
-	const supportsKeyScoping = selectedQueryType?.supportsKeyScoping ?? false;
-
-	const validation = useMemo(() => validateSelector(selector), [selector]);
-
-	const applyDraft = useCallback(
-		(nextQueryType: QueryTypeId, nextValue: string): void => {
-			setQueryType(nextQueryType);
-			setValue(nextValue);
-			setSelector(buildSelector({ queryType: nextQueryType, value: nextValue }));
-		},
-		[],
-	);
-
-	const handleQueryTypeChange = useCallback(
-		(next: string | string[]): void => {
-			const selected = (Array.isArray(next) ? next[0] : next) as QueryTypeId;
-			const keepsValue = getQueryTypeOption(selected)?.supportsKeyScoping ?? false;
-
-			applyDraft(selected, keepsValue ? value : '');
-		},
-		[applyDraft, value],
-	);
-
-	const handleValueChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			applyDraft(queryType, event.target.value);
-		},
-		[applyDraft, queryType],
-	);
-
-	const handleAnyResourceChange = useCallback(
-		(checked: boolean): void => {
-			applyDraft(queryType, checked ? ANY_RESOURCE_VALUE : '');
-		},
-		[applyDraft, queryType],
-	);
-
-	const handleSelectorChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const nextSelector = event.target.value;
-			setSelector(nextSelector);
-
-			const parsed = parseSelector(nextSelector);
-			if (parsed.queryType) {
-				setQueryType(parsed.queryType);
-			}
-			setValue(parsed.value);
-		},
-		[],
-	);
-
-	const handleOpenChange = useCallback((nextOpen: boolean): void => {
-		setOpen(nextOpen);
-
-		if (!nextOpen) {
-			setQueryType(DEFAULT_QUERY_TYPE);
-			setValue('');
-			setSelector(getDefaultSelector(DEFAULT_QUERY_TYPE));
-		}
-	}, []);
-
-	const handleAdd = useCallback((): void => {
-		const trimmed = selector.trim();
-
-		if (validateSelector(trimmed).isError) {
-			return;
-		}
-
-		onAdd(trimmed);
-		handleOpenChange(false);
-	}, [selector, onAdd, handleOpenChange]);
-
-	const handleInputKeyDown = useCallback(
-		(event: React.KeyboardEvent<HTMLInputElement>): void => {
-			if (event.key === 'Enter') {
-				handleAdd();
-			}
-		},
-		[handleAdd],
-	);
-
-	return {
-		open,
-		queryType,
-		selectedQueryType,
-		value,
-		selector,
-		isAnyResource: isAnyResourceValue(value),
-		supportsKeyScoping,
-		validation,
-		canAdd: !validation.isError,
-		handleOpenChange,
-		handleQueryTypeChange,
-		handleValueChange,
-		handleAnyResourceChange,
-		handleSelectorChange,
-		handleAdd,
-		handleInputKeyDown,
-	};
-}
-
-export default useTelemetrySelectorWizard;

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,15 +329,11 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(7);
+		expect(result).toHaveLength(3);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'role',
 			'serviceaccount',
-			'logs',
-			'traces',
-			'metrics',
-			'meter-metrics',
 		]);
 	});
 
@@ -418,15 +414,11 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(7);
+		expect(result).toHaveLength(3);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'role',
 			'serviceaccount',
-			'logs',
-			'traces',
-			'metrics',
-			'meter-metrics',
 		]);
 	});
 

frontend/src/container/RolesSettings/permissions.config.ts

@@ -1,12 +1,4 @@
-import {
-	Bot,
-	ChartLine,
-	DraftingCompass,
-	Gauge,
-	Key,
-	Logs,
-	Shield,
-} from '@signozhq/icons';
+import { Bot, Key, Shield } from '@signozhq/icons';
 
 import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import {
@@ -22,15 +14,12 @@ type IconComponent = typeof Shield;
 
 const OBJECT_SCOPED_VERB_SET = new Set<string>(OBJECT_SCOPED_VERBS);
 
-export type SelectorType = 'input' | 'telemetryBuilder';
-
 export interface ResourcePanelConfig {
 	label: string;
 	description: string;
 	icon: IconComponent;
 	selectorPlaceholder: string;
 	docsAnchor: string;
-	selectorType?: SelectorType;
 }
 
 /**
@@ -61,42 +50,6 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 			'Type service account ID, separate multiple with comma or space',
 		docsAnchor: 'service-account',
 	},
-	logs: {
-		label: 'Logs',
-		description: 'Log data collected across the workspace.',
-		icon: Logs,
-		selectorPlaceholder:
-			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
-		docsAnchor: 'logs',
-		selectorType: 'telemetryBuilder',
-	},
-	traces: {
-		label: 'Traces',
-		description: 'Distributed tracing data collected across the workspace.',
-		icon: DraftingCompass,
-		selectorPlaceholder:
-			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
-		docsAnchor: 'traces',
-		selectorType: 'telemetryBuilder',
-	},
-	metrics: {
-		label: 'Metrics',
-		description: 'Metric data collected across the workspace.',
-		icon: ChartLine,
-		selectorPlaceholder:
-			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
-		docsAnchor: 'metrics',
-		selectorType: 'telemetryBuilder',
-	},
-	'meter-metrics': {
-		label: 'Meter Metrics',
-		description: 'Usage metering data for the workspace.',
-		icon: Gauge,
-		selectorPlaceholder:
-			'Enter selector as <query-type>/<key>/<value> or <query-type>/* or use wizard...',
-		docsAnchor: 'meter-metrics',
-		selectorType: 'telemetryBuilder',
-	},
 };
 
 export const RESOURCE_ORDER = Object.keys(RESOURCE_PANELS) as AuthZResource[];

frontend/src/container/RoutingPolicies/__tests__/testUtils.ts

@@ -108,7 +108,6 @@ export function getAppContextMockState(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
-		isFetchingUserPreferences: false,
 		userFetchError: undefined,
 		activeLicenseFetchError: null,
 		hostsFetchError: undefined,

frontend/src/container/SideNav/SideNav.tsx

@@ -144,7 +144,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		trialInfo,
 		isLoggedIn,
 		userPreferences,
-		isFetchingUserPreferences,
 		changelog,
 		toggleChangelogModal,
 		updateUserPreferenceInContext,
@@ -262,11 +261,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	// Compute initial pinned items and secondary menu items synchronously to avoid flash
 	const computedPinnedMenuItems = useMemo(() => {
-		// While loading, return empty to avoid flash
-		if (isFetchingUserPreferences) {
-			return [];
-		}
-
 		const navShortcutsPreference = userPreferences?.find(
 			(preference) => preference.name === USER_PREFERENCES.NAV_SHORTCUTS,
 		);
@@ -274,6 +268,11 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			| string[]
 			| undefined;
 
+		// If userPreferences not loaded yet, return empty to avoid showing defaults before preferences load
+		if (userPreferences === null) {
+			return [];
+		}
+
 		// If preference exists with non-empty array, use stored shortcuts
 		if (isArray(navShortcuts) && navShortcuts.length > 0) {
 			return navShortcuts
@@ -283,9 +282,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				.filter((item): item is SidebarItem => item !== undefined);
 		}
 
-		// No preference, or empty array, or error loading → use defaults
+		// No preference, or empty array → use defaults
 		return defaultMoreMenuItems.filter((item) => item.isPinned);
-	}, [isFetchingUserPreferences, userPreferences]);
+	}, [userPreferences]);
 
 	const computedSecondaryMenuItems = useMemo(() => {
 		const shouldShowIntegrationsValue =
@@ -323,16 +322,12 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	// Sync state only on initial load when userPreferences first becomes available
 	useEffect(() => {
 		// Only sync once: when userPreferences loads for the first time
-		if (!hasInitializedRef.current && isFetchingUserPreferences === false) {
+		if (!hasInitializedRef.current && userPreferences !== null) {
 			setPinnedMenuItems(computedPinnedMenuItems);
 			setSecondaryMenuItems(computedSecondaryMenuItems);
 			hasInitializedRef.current = true;
 		}
-	}, [
-		computedPinnedMenuItems,
-		computedSecondaryMenuItems,
-		isFetchingUserPreferences,
-	]);
+	}, [computedPinnedMenuItems, computedSecondaryMenuItems, userPreferences]);
 
 	const isChatSupportEnabled = featureFlags?.find(
 		(flag) => flag.name === FeatureKeys.CHAT_SUPPORT,

frontend/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const DEFAULT_COPIED_RESET_MS = 2000;
+
+export interface UseCopyToClipboardOptions {
+	/** How long (ms) to keep "copied" state before resetting. Default 2000. */
+	copiedResetMs?: number;
+}
+
+export type ID = number | string | null;
+
+export interface UseCopyToClipboardReturn {
+	/** Copy text to clipboard. Pass an optional id to track which item was copied (e.g. seriesIndex). */
+	copyToClipboard: (text: string, id?: ID) => void;
+	/** True when something was just copied and still within the reset threshold. */
+	isCopied: boolean;
+	/** The id passed to the last successful copy, or null after reset. Use to show "copied" state for a specific item (e.g. copiedId === item.seriesIndex). */
+	id: ID;
+}
+
+export function useCopyToClipboard(
+	options: UseCopyToClipboardOptions = {},
+): UseCopyToClipboardReturn {
+	const { copiedResetMs = DEFAULT_COPIED_RESET_MS } = options;
+	const [state, setState] = useState<{ isCopied: boolean; id: ID }>({
+		isCopied: false,
+		id: null,
+	});
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(() => {
+		return (): void => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+		};
+	}, []);
+
+	const copyToClipboard = useCallback(
+		(text: string, id?: ID): void => {
+			// oxlint-disable-next-line signoz/no-navigator-clipboard
+			navigator.clipboard.writeText(text).then(() => {
+				if (timeoutRef.current) {
+					clearTimeout(timeoutRef.current);
+				}
+				setState({ isCopied: true, id: id ?? null });
+				timeoutRef.current = setTimeout(() => {
+					setState({ isCopied: false, id: null });
+					timeoutRef.current = null;
+				}, copiedResetMs);
+			});
+		},
+		[copiedResetMs],
+	);
+
+	return {
+		copyToClipboard,
+		isCopied: state.isCopied,
+		id: state.id,
+	};
+}

frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -19,7 +19,7 @@ describe('PermissionDeniedCallout', () => {
 	it('renders multiple denied permissions', () => {
 		const deniedPermissions = [
 			buildPermission('read', buildObjectString('serviceaccount', '*')),
-			buildPermission('update', buildObjectString<'update'>('role', 'admin')),
+			buildPermission('update', buildObjectString('role', 'admin')),
 		];
 		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
 

frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -20,7 +20,7 @@ describe('PermissionDeniedFullPage', () => {
 	it('renders with multiple denied permissions', () => {
 		const deniedPermissions = [
 			buildPermission('read', buildObjectString('role', 'admin')),
-			buildPermission('update', buildObjectString<'update'>('role', 'admin')),
+			buildPermission('update', buildObjectString('role', 'admin')),
 		];
 		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
 		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -35,26 +35,6 @@ export default {
 					'update',
 				],
 			},
-			{
-				kind: 'logs',
-				type: 'telemetryresource',
-				allowedVerbs: ['read'],
-			},
-			{
-				kind: 'meter-metrics',
-				type: 'telemetryresource',
-				allowedVerbs: ['read'],
-			},
-			{
-				kind: 'metrics',
-				type: 'telemetryresource',
-				allowedVerbs: ['read'],
-			},
-			{
-				kind: 'traces',
-				type: 'telemetryresource',
-				allowedVerbs: ['read'],
-			},
 		],
 		relations: {
 			assignee: ['role'],
@@ -63,7 +43,7 @@ export default {
 			delete: ['metaresource', 'role', 'serviceaccount'],
 			detach: ['metaresource', 'role', 'serviceaccount'],
 			list: ['metaresource', 'role', 'serviceaccount'],
-			read: ['metaresource', 'role', 'serviceaccount', 'telemetryresource'],
+			read: ['metaresource', 'role', 'serviceaccount'],
 			update: ['metaresource', 'role', 'serviceaccount'],
 		},
 	},