fix: address comment

* fix(dashboard-v2): seed the query builder before the View modal mounts

The query builder context is global and outlives the View modal, so it still
holds the previously-viewed panel's query when the modal for the next panel
mounts. The modal only re-seeded it in a mount effect, and the builder's fields
seed themselves on mount — PromQL inputs are uncontrolled and QueryAddOns picks
its visible rows once — so they kept rendering the previous panel's query until
the modal was closed and reopened.

Seed the context in the open handlers instead, before the modal renders.
resetQuery (not initQueryBuilderData): the latter sets a staged query, and
swapping one staged id for another makes useSyncTimeOnStagedQueryChange
re-anchor global time, refetching every panel on the grid. Clearing the staged
query also stops the previous panel's query being committed into the new
panel's draft, and keeps the provider's URL hydration running for drilldowns.

* fix: fixed bar panel ordering issue

* test(dashboard-v2): drop the userEvent delay in the View modal suites

`userEvent.setup()` defaults to `delay: 0`, which awaits a macrotask between
every sub-event of a click. Each await flushes React, so every one re-renders
the real query builder these two suites mount — enough to push both add-on
tests past jest's 5s default timeout on CI.

`delay: null` dispatches the sequence synchronously: the add-on tests drop from
3172ms/1171ms to ~495ms/262ms and PromQL from 815ms to ~455ms, with the full
tree still rendered and every assertion unchanged. Verified to still fail
against the unseeded builder, so the regressions stay pinned.

* fix(dashboard-v2): carry the opened panel's query in compositeQuery

The query builder context is mounted above the router, so opening the panel
editor or the View modal leaves the previously-opened panel's query in it.
Fields that read the query once on mount then keep showing that panel: PromQL
inputs are uncontrolled and their rows are keyed by query name, and QueryAddOns
picks its visible rows once.

Both surfaces now state the panel's query in the URL as compositeQuery, so they
derive from the URL and survive a refresh or a shared link (V1 does the same in
WidgetHeader.onEditHandler). The URL alone isn't enough — the provider applies
it in an effect, a tick after those fields have mounted — so the same query goes
into the context before navigating. resetQuery, not initQueryBuilderData:
swapping one staged id for another makes useSyncTimeOnStagedQueryChange
re-anchor global time and refetch the grid.

* fix(dashboard-v2): order time series by mean, sharing the bar sort

Review feedback: the sort shouldn't be a bar-panel local. The mean/tiebreak
rules move to the visualization layer as a generic `sortByMeanDesc`, with a
`PanelSeries` adapter in `Panels/utils` that the bar and time-series renderers
both call, so any other bar consumer can adopt it in one line.

Time series flipped for the same reason bar did — the backend returns a query's
series in Go map-iteration order — so it now sorts too: draw order, legend order
and the View modal's legend table are deterministic across refreshes. Colours
are unaffected, since `generateColor` hashes the label rather than the position.

The order still has to be settled before the uPlot config and aligned data are
built: those two and drilldown click attribution index the flattened list
positionally, and uPlot draws a stacked bar's segments in series-index order, so
sorting inside `BarChart` paints the accumulated total over every segment.

---------

Co-authored-by: Ashwin Bhatkal <ashwin96@gmail.com>

.github/workflows/integrationci.yaml

@@ -53,6 +53,7 @@ jobs:
           - queriermetrics
           - querierscalar
           - queriercommon
+          - querierai
           - rawexportdata
           - promqlconformance
           - querierauthz

cmd/authz.go

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

docs/api/openapi.yml

@@ -1497,6 +1497,8 @@ components:
       - cloudsql_postgres
       - memorystore_redis
       - computeengine
+      - gke
+      - cloudstorage
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -6900,6 +6902,7 @@ components:
     Querybuildertypesv5QueryEnvelope:
       discriminator:
         mapping:
+          builder_ai_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
           builder_formula: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
           builder_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
           builder_trace_operator: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
@@ -6908,6 +6911,7 @@ components:
         propertyName: type
       oneOf:
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
+      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
@@ -6922,6 +6926,15 @@ components:
       required:
       - type
       type: object
+    Querybuildertypesv5QueryEnvelopeBuilderAI:
+      properties:
+        spec:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
+        type:
+          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
+      required:
+      - type
+      type: object
     Querybuildertypesv5QueryEnvelopeClickHouseSQL:
       properties:
         spec:
@@ -7035,6 +7048,7 @@ components:
     Querybuildertypesv5QueryType:
       enum:
       - builder_query
+      - builder_ai_query
       - builder_formula
       - builder_trace_operator
       - clickhouse_sql

frontend/public/locales/en-GB/channels.json

@@ -24,8 +24,6 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -24,8 +24,6 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

frontend/src/AppRoutes/Private.tsx

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

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

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

frontend/src/api/alerts/ruleStats.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleStatsPayload } from 'types/api/alerts/def';
-import { RuleStatsProps } from 'types/api/alerts/ruleStats';
-
-const ruleStats = async (
-	props: RuleStatsProps,
-): Promise<SuccessResponse<AlertRuleStatsPayload> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/rules/${props.id}/history/stats`, {
-			start: props.start,
-			end: props.end,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default ruleStats;

frontend/src/api/alerts/timelineGraph.ts

@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTimelineGraphResponsePayload } from 'types/api/alerts/def';
-import { GetTimelineGraphRequestProps } from 'types/api/alerts/timelineGraph';
-
-const timelineGraph = async (
-	props: GetTimelineGraphRequestProps,
-): Promise<
-	SuccessResponse<AlertRuleTimelineGraphResponsePayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(
-			`/rules/${props.id}/history/overall_status`,
-			{
-				start: props.start,
-				end: props.end,
-			},
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default timelineGraph;

frontend/src/api/alerts/timelineTable.ts

@@ -1,36 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTimelineTableResponsePayload } from 'types/api/alerts/def';
-import { GetTimelineTableRequestProps } from 'types/api/alerts/timelineTable';
-
-const timelineTable = async (
-	props: GetTimelineTableRequestProps,
-): Promise<
-	SuccessResponse<AlertRuleTimelineTableResponsePayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(`/rules/${props.id}/history/timeline`, {
-			start: props.start,
-			end: props.end,
-			offset: props.offset,
-			limit: props.limit,
-			order: props.order,
-			state: props.state,
-			// TODO(shaheer): implement filters
-			filters: props.filters,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default timelineTable;

frontend/src/api/alerts/topContributors.ts

@@ -1,33 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { AlertRuleTopContributorsPayload } from 'types/api/alerts/def';
-import { TopContributorsProps } from 'types/api/alerts/topContributors';
-
-const topContributors = async (
-	props: TopContributorsProps,
-): Promise<
-	SuccessResponse<AlertRuleTopContributorsPayload> | ErrorResponse
-> => {
-	try {
-		const response = await axios.post(
-			`/rules/${props.id}/history/top_contributors`,
-			{
-				start: props.start,
-				end: props.end,
-			},
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default topContributors;

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

@@ -2816,6 +2816,8 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cloudsql_postgres = 'cloudsql_postgres',
 	memorystore_redis = 'memorystore_redis',
 	computeengine = 'computeengine',
+	gke = 'gke',
+	cloudstorage = 'cloudstorage',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -4299,6 +4301,18 @@ export interface Querybuildertypesv5QueryEnvelopeBuilderDTO {
 	type: Querybuildertypesv5QueryEnvelopeBuilderDTOType;
 }
 
+export enum Querybuildertypesv5QueryEnvelopeBuilderAIDTOType {
+	builder_ai_query = 'builder_ai_query',
+}
+export interface Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
+	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO;
+	/**
+	 * @type string
+	 * @enum builder_ai_query
+	 */
+	type: Querybuildertypesv5QueryEnvelopeBuilderAIDTOType;
+}
+
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	/**
 	 * @type boolean
@@ -4482,6 +4496,7 @@ export interface Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO {
 
 export type Querybuildertypesv5QueryEnvelopeDTO =
 	| Querybuildertypesv5QueryEnvelopeBuilderDTO
+	| Querybuildertypesv5QueryEnvelopeBuilderAIDTO
 	| Querybuildertypesv5QueryEnvelopeFormulaDTO
 	| Querybuildertypesv5QueryEnvelopeTraceOperatorDTO
 	| Querybuildertypesv5QueryEnvelopePromQLDTO
@@ -8285,6 +8300,7 @@ export interface Querybuildertypesv5QueryRangeResponseDTO {
 
 export enum Querybuildertypesv5QueryTypeDTO {
 	builder_query = 'builder_query',
+	builder_ai_query = 'builder_ai_query',
 	builder_formula = 'builder_formula',
 	builder_trace_operator = 'builder_trace_operator',
 	clickhouse_sql = 'clickhouse_sql',

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

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

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

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

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

@@ -102,6 +102,15 @@ interface QuerySearchProps {
 	showFilterSuggestionsWithoutMetric?: boolean;
 	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
 	initialExpression?: string;
+	/** When set, replaces the generic value-suggestion API with a custom fetcher. */
+	valueSuggestionsOverride?: (
+		key: string,
+		searchText: string,
+	) => Promise<{
+		stringValues: string[];
+		numberValues: number[];
+		complete: boolean;
+	}>;
 }
 
 function QuerySearch({
@@ -115,6 +124,7 @@ function QuerySearch({
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
 	metricNamespace,
+	valueSuggestionsOverride,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -484,13 +494,24 @@ function QuerySearch({
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
 
 			try {
-				const response = await getValueSuggestions({
-					key,
-					searchText: sanitizedSearchText,
-					signal: dataSource,
-					signalSource: signalSource as 'meter' | '',
-					metricName: debouncedMetricName ?? undefined,
-				});
+				const values = valueSuggestionsOverride
+					? await valueSuggestionsOverride(key, sanitizedSearchText)
+					: await getValueSuggestions({
+							key,
+							searchText: sanitizedSearchText,
+							signal: dataSource,
+							signalSource: signalSource as 'meter' | '',
+							metricName: debouncedMetricName ?? undefined,
+						}).then((response) => {
+							const responseData = response.data as any;
+							const data = responseData.data || {};
+							const values = data.values || {};
+							return {
+								stringValues: values.stringValues || [],
+								numberValues: values.numberValues || [],
+								complete: data.complete ?? false,
+							};
+						});
 
 				// Skip updates if component unmounted or key changed
 				if (
@@ -502,8 +523,6 @@ function QuerySearch({
 				}
 
 				// Process the response data
-				const responseData = response.data as any;
-				const values = responseData.data?.values || {};
 				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
@@ -584,6 +603,7 @@ function QuerySearch({
 			debouncedMetricName,
 			signalSource,
 			toggleSuggestions,
+			valueSuggestionsOverride,
 		],
 	);
 

frontend/src/constants/localStorage.ts

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

frontend/src/constants/reactQueryKeys.ts

@@ -20,10 +20,6 @@ export const REACT_QUERY_KEY = {
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
 	ALERT_RULE_DETAILS: 'ALERT_RULE_DETAILS',
-	ALERT_RULE_STATS: 'ALERT_RULE_STATS',
-	ALERT_RULE_TOP_CONTRIBUTORS: 'ALERT_RULE_TOP_CONTRIBUTORS',
-	ALERT_RULE_TIMELINE_TABLE: 'ALERT_RULE_TIMELINE_TABLE',
-	ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
 	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 	TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
 	GET_ALL_ALERTS: 'GET_ALL_ALERTS',

frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useGetAlertRuleDetailsStats } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { StatsTimeSeriesItem } from 'types/api/alerts/def';
 
 import AverageResolutionCard from '../AverageResolutionCard/AverageResolutionCard';
 import StatsCard from '../StatsCard/StatsCard';
@@ -25,24 +26,59 @@ type StatsCardsRendererProps = {
 };
 
 // TODO(shaheer): render the DataStateRenderer inside the TotalTriggeredCard/AverageResolutionCard, it should display the title
+type AdaptedStatsData = {
+	totalCurrentTriggers: number;
+	totalPastTriggers: number;
+	currentAvgResolutionTime: string;
+	pastAvgResolutionTime: string;
+	currentTriggersSeries: StatsTimeSeriesItem[];
+	currentAvgResolutionTimeSeries: StatsTimeSeriesItem[];
+};
+
 function StatsCardsRenderer({
 	setTotalCurrentTriggers,
 }: StatsCardsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsStats();
 
-	useEffect(() => {
-		if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
-			setTotalCurrentTriggers(data.payload.data.totalCurrentTriggers);
+	const adaptedData = useMemo((): AdaptedStatsData | null => {
+		if (!data?.data) {
+			return null;
 		}
-	}, [data, setTotalCurrentTriggers]);
+		const statsData = data.data;
+
+		const adaptTimeSeries = (
+			series: typeof statsData.currentTriggersSeries,
+		): StatsTimeSeriesItem[] =>
+			series?.values?.map((item) => ({
+				timestamp: item.timestamp ?? 0,
+				value: String(item.value ?? 0),
+			})) ?? [];
+
+		return {
+			totalCurrentTriggers: statsData.totalCurrentTriggers,
+			totalPastTriggers: statsData.totalPastTriggers,
+			currentAvgResolutionTime: String(statsData.currentAvgResolutionTime),
+			pastAvgResolutionTime: String(statsData.pastAvgResolutionTime),
+			currentTriggersSeries: adaptTimeSeries(statsData.currentTriggersSeries),
+			currentAvgResolutionTimeSeries: adaptTimeSeries(
+				statsData.currentAvgResolutionTimeSeries,
+			),
+		};
+	}, [data?.data]);
+
+	useEffect(() => {
+		if (adaptedData?.totalCurrentTriggers !== undefined) {
+			setTotalCurrentTriggers(adaptedData.totalCurrentTriggers);
+		}
+	}, [adaptedData, setTotalCurrentTriggers]);
 
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={data?.payload?.data || null}
+			data={adaptedData}
 		>
 			{(data): JSX.Element => {
 				const {
@@ -60,7 +96,7 @@ function StatsCardsRenderer({
 							<TotalTriggeredCard
 								totalCurrentTriggers={totalCurrentTriggers}
 								totalPastTriggers={totalPastTriggers}
-								timeSeries={currentTriggersSeries?.values}
+								timeSeries={currentTriggersSeries}
 							/>
 						) : (
 							<StatsCard
@@ -77,7 +113,7 @@ function StatsCardsRenderer({
 							<AverageResolutionCard
 								currentAvgResolutionTime={currentAvgResolutionTime}
 								pastAvgResolutionTime={pastAvgResolutionTime}
-								timeSeries={currentAvgResolutionTimeSeries?.values}
+								timeSeries={currentAvgResolutionTimeSeries}
 							/>
 						) : (
 							<StatsCard

frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx

@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
 import { useGetAlertRuleDetailsTopContributors } from 'pages/AlertDetails/hooks';
+import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
-import { AlertRuleStats } from 'types/api/alerts/def';
+import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
 
 import TopContributorsCard from '../TopContributorsCard/TopContributorsCard';
 
@@ -13,15 +15,27 @@ function TopContributorsRenderer({
 }: TopContributorsRendererProps): JSX.Element {
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTopContributors();
-	const response = data?.payload?.data;
 
 	// TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
+	const adaptedData = useMemo((): AlertRuleTopContributors[] | null => {
+		if (!data?.data) {
+			return null;
+		}
+		return data.data.map((contributor) => ({
+			fingerprint: contributor.fingerprint,
+			count: contributor.count,
+			labels: labelsArrayToObject(contributor.labels),
+			relatedLogsLink: contributor.relatedLogsLink ?? '',
+			relatedTracesLink: contributor.relatedTracesLink ?? '',
+		}));
+	}, [data?.data]);
+
 	return (
 		<DataStateRenderer
 			isLoading={isLoading}
 			isRefetching={isRefetching}
 			isError={isError || !isValidRuleId || !ruleId}
-			data={response || null}
+			data={adaptedData}
 		>
 			{(topContributorsData): JSX.Element => (
 				<TopContributorsCard

frontend/src/container/AlertHistory/Timeline/Graph/constants.ts

@@ -1,12 +1,18 @@
 import { Color } from '@signozhq/design-tokens';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
 
-export const ALERT_STATUS: { [key: string]: number } = {
-	firing: 0,
-	inactive: 1,
+export const ALERT_STATUS: Record<RuletypesAlertStateDTO, number> & {
+	[key: string]: number;
+} = {
+	[RuletypesAlertStateDTO.firing]: 0,
+	[RuletypesAlertStateDTO.inactive]: 1,
 	normal: 1,
-	'no-data': 2,
-	disabled: 3,
-	muted: 4,
+	[RuletypesAlertStateDTO.pending]: 2,
+	[RuletypesAlertStateDTO.recovering]: 2,
+	'no-data': 3,
+	[RuletypesAlertStateDTO.nodata]: 3,
+	[RuletypesAlertStateDTO.disabled]: 4,
+	muted: 5,
 };
 
 export const STATE_VS_COLOR: {
@@ -16,9 +22,10 @@ export const STATE_VS_COLOR: {
 	{
 		0: { stroke: Color.BG_CHERRY_500, fill: Color.BG_CHERRY_500 },
 		1: { stroke: Color.BG_FOREST_500, fill: Color.BG_FOREST_500 },
-		2: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
-		3: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
-		4: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
+		2: { stroke: Color.BG_AMBER_500, fill: Color.BG_AMBER_500 },
+		3: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
+		4: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
+		5: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
 	},
 ];
 

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
 import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 
 import Graph from '../Graph/Graph';
 
@@ -18,26 +20,16 @@ function GraphWrapper({
 	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
 		useGetAlertRuleDetailsTimelineGraphData();
 
-	// TODO(shaheer): uncomment when the API is ready for
-	// const { startTime } = useAlertHistoryQueryParams();
-
-	// const [isVerticalGraph, setIsVerticalGraph] = useState(false);
-
-	// useEffect(() => {
-	// 	const checkVerticalGraph = (): void => {
-	// 		if (startTime) {
-	// 			const startTimeDate = dayjs(Number(startTime));
-	// 			const twentyFourHoursAgo = dayjs().subtract(
-	// 				HORIZONTAL_GRAPH_HOURS_THRESHOLD,
-	// 				DAYJS_MANIPULATE_TYPES.HOUR,
-	// 			);
-
-	// 			setIsVerticalGraph(startTimeDate.isBefore(twentyFourHoursAgo));
-	// 		}
-	// 	};
-
-	// 	checkVerticalGraph();
-	// }, [startTime]);
+	const adaptedData = useMemo((): AlertRuleTimelineGraphResponse[] | null => {
+		if (!data?.data) {
+			return null;
+		}
+		return data.data.map((item) => ({
+			start: item.start,
+			end: item.end,
+			state: item.state as AlertRuleTimelineGraphResponse['state'],
+		}));
+	}, [data?.data]);
 
 	return (
 		<div className="timeline-graph">
@@ -49,7 +41,7 @@ function GraphWrapper({
 					isLoading={isLoading}
 					isError={isError || !isValidRuleId || !ruleId}
 					isRefetching={isRefetching}
-					data={data?.payload?.data || null}
+					data={adaptedData}
 				>
 					{(data): JSX.Element => <Graph type="horizontal" data={data} />}
 				</DataStateRenderer>

frontend/src/container/AlertHistory/Timeline/Table/Table.styles.scss

@@ -1,11 +1,35 @@
 .timeline-table {
 	border-top: 1px solid var(--l1-border);
 	border-radius: 6px;
-	overflow: hidden;
 	margin-top: 4px;
 	min-height: 600px;
+
+	&__filter {
+		padding: 12px 16px;
+		background: var(--l1-background);
+		border-bottom: 1px solid var(--l1-border);
+	}
+
+	&__filter-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__filter-search {
+		flex: 1;
+	}
+
+	&__filter--loading,
+	&__filter--loading-skeleton {
+		width: 100% !important;
+	}
+
 	.ant-table {
 		background: var(--l1-background);
+		&-placeholder {
+			background: var(--l1-background) !important;
+		}
 		&-cell {
 			padding: 12px 16px !important;
 			vertical-align: baseline;
@@ -23,6 +47,9 @@
 		&-tbody > tr > td {
 			border: none;
 		}
+		&-footer {
+			background-color: var(--l1-background);
+		}
 	}
 
 	.label-filter {
@@ -86,4 +113,38 @@
 			background: var(--l2-background);
 		}
 	}
+
+	&__error {
+		display: flex;
+		align-self: flex-start;
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	&__pagination {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: var(--spacing-4);
+		padding: var(--spacing-6) var(--spacing-8);
+		background: var(--l1-background);
+
+		.pagination-controls {
+			display: flex;
+			gap: 4px;
+
+			.ant-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 4px;
+				min-width: 24px;
+				height: 24px;
+
+				&:disabled {
+					opacity: 0.4;
+				}
+			}
+		}
+	}
 }

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -1,52 +1,126 @@
-import { HTMLAttributes, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Table } from 'antd';
+import { HTMLAttributes, useCallback, useMemo } from 'react';
+import { Button, Skeleton, Table } from 'antd';
+import { ChevronLeft, ChevronRight } from '@signozhq/icons';
 import logEvent from 'api/common/logEvent';
-import { initialFilters } from 'constants/queryBuilder';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import {
+	QuerySearchV2Provider,
+	useExpression,
+	useInputExpression,
+	useQuerySearchOnChange,
+	useQuerySearchOnRun,
+} from 'components/QueryBuilderV2';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
+import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
+import { labelsArrayToObject } from 'container/AlertHistory/utils/labelAdapters';
 import { useTimezone } from 'providers/Timezone';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
 
+import { useAlertHistoryFilterSuggestions } from './useAlertHistoryFilterSuggestions';
 import { timelineTableColumns } from './useTimelineTable';
 
 import './Table.styles.scss';
 
-function TimelineTable(): JSX.Element {
-	const [filters, setFilters] = useState<TagFilter>(initialFilters);
+export const ALERT_HISTORY_EXPRESSION_KEY = 'alertHistoryExpression';
 
-	const { isLoading, isRefetching, isError, data, isValidRuleId, ruleId } =
-		useGetAlertRuleDetailsTimelineTable({ filters });
+function TimelineTableContent(): JSX.Element {
+	const expression = useExpression();
+	const inputExpression = useInputExpression();
+	const querySearchOnChange = useQuerySearchOnChange();
+	const querySearchOnRun = useQuerySearchOnRun();
+
+	const {
+		isLoading,
+		isRefetching,
+		isError,
+		data,
+		error,
+		ruleId,
+		refetch,
+		cancel,
+	} = useGetAlertRuleDetailsTimelineTable({ filterExpression: expression });
+
+	const apiError = useMemo(() => convertToApiError(error), [error]);
+
+	const { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys } =
+		useAlertHistoryFilterSuggestions(ruleId ?? null);
+
+	const { timelineData, totalItems, nextCursor } = useMemo(() => {
+		const response = data?.data;
+		const items: AlertRuleTimelineTableResponse[] | undefined =
+			response?.items?.map((item) => {
+				return {
+					ruleID: item.ruleId,
+					ruleName: item.ruleName,
+					overallState: item.overallState as string,
+					overallStateChanged: item.overallStateChanged,
+					state: item.state as string,
+					stateChanged: item.stateChanged,
+					unixMilli: item.unixMilli,
+					fingerprint: item.fingerprint,
+					value: item.value,
+					labels: labelsArrayToObject(item.labels),
+					relatedLogsLink: item.relatedLogsLink,
+					relatedTracesLink: item.relatedTracesLink,
+				};
+			});
 
-	const { timelineData, totalItems, labels } = useMemo(() => {
-		const response = data?.payload?.data;
 		return {
-			timelineData: response?.items,
-			totalItems: response?.total,
-			labels: response?.labels,
+			timelineData: items,
+			totalItems: response?.total ?? 0,
+			nextCursor: response?.nextCursor,
 		};
-	}, [data?.payload?.data]);
+	}, [data?.data]);
 
-	const { paginationConfig, onChangeHandler } = useTimelineTable({
+	const {
+		paginationConfig,
+		onChangeHandler,
+		handleNextPage,
+		handlePrevPage,
+		hasNextPage,
+		hasPrevPage,
+	} = useTimelineTable({
 		totalItems: totalItems ?? 0,
+		nextCursor,
 	});
 
-	const { t } = useTranslation('common');
-
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	if (isError || !isValidRuleId || !ruleId) {
-		return <div>{t('something_went_wrong')}</div>;
-	}
+	const handleRunQuery = useCallback(
+		(updatedExpression?: string): void => {
+			const nextExpression = updatedExpression ?? inputExpression;
+			querySearchOnRun(nextExpression);
+
+			if (nextExpression === expression) {
+				refetch();
+			}
+		},
+		[querySearchOnRun, refetch, inputExpression, expression],
+	);
+
+	const queryData = useMemo(
+		() => ({
+			...initialQueryBuilderFormValuesMap.logs,
+			queryName: 'A',
+			dataSource: DataSource.LOGS,
+			filter: { expression },
+			expression,
+		}),
+		[expression],
+	);
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
 	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
 		onClick: (): void => {
-			logEvent('Alert history: Timeline table row: Clicked', {
+			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
 				labels: record.labels,
 			});
@@ -55,23 +129,106 @@ function TimelineTable(): JSX.Element {
 
 	return (
 		<div className="timeline-table">
+			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
+			{!isLoadingKeys && hardcodedAttributeKeys ? (
+				<div className="timeline-table__filter">
+					<div className="timeline-table__filter-row">
+						<div className="timeline-table__filter-search">
+							<QuerySearch
+								onChange={querySearchOnChange}
+								queryData={queryData}
+								dataSource={DataSource.LOGS}
+								onRun={handleRunQuery}
+								hardcodedAttributeKeys={hardcodedAttributeKeys}
+								valueSuggestionsOverride={valueSuggestionsOverride}
+							/>
+						</div>
+						<RunQueryBtn
+							isLoadingQueries={isLoading || isRefetching}
+							onStageRunQuery={(): void => handleRunQuery()}
+							handleCancelQuery={cancel}
+						/>
+					</div>
+				</div>
+			) : (
+				<div className="timeline-table__filter timeline-table__filter--loading">
+					<Skeleton.Input
+						className="timeline-table__filter--loading-skeleton"
+						active
+					/>
+				</div>
+			)}
 			<Table
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({
-					filters,
-					labels: labels ?? {},
-					setFilters,
 					formatTimezoneAdjustedTimestamp,
 				})}
 				onRow={handleRowClick}
 				dataSource={timelineData}
-				pagination={paginationConfig}
+				pagination={false}
 				size="middle"
 				onChange={onChangeHandler}
 				loading={isLoading || isRefetching}
+				locale={{
+					emptyText:
+						isError && apiError ? (
+							<div className="timeline-table__error">
+								<ErrorContent error={apiError} />
+							</div>
+						) : undefined,
+				}}
+				footer={(): JSX.Element => (
+					<div className="timeline-table__pagination">
+						<div className="timeline-table__pagination-info">
+							{paginationConfig.showTotal?.(totalItems, [
+								totalItems === 0
+									? 0
+									: ((paginationConfig.current ?? 1) - 1) *
+											(paginationConfig.pageSize ?? 10) +
+										1,
+								Math.min(
+									(paginationConfig.current ?? 1) * (paginationConfig.pageSize ?? 10),
+									totalItems,
+								),
+							])}
+						</div>
+						<div className="pagination-controls">
+							<Button
+								type="text"
+								size="small"
+								disabled={!hasPrevPage}
+								onClick={handlePrevPage}
+								data-testid="timeline-prev-page"
+							>
+								<ChevronLeft size={14} />
+							</Button>
+							<Button
+								type="text"
+								size="small"
+								disabled={!hasNextPage}
+								onClick={handleNextPage}
+								data-testid="timeline-next-page"
+							>
+								<ChevronRight size={14} />
+							</Button>
+						</div>
+					</div>
+				)}
 			/>
 		</div>
 	);
 }
 
+function TimelineTable(): JSX.Element {
+	return (
+		<QuerySearchV2Provider
+			queryParamKey={ALERT_HISTORY_EXPRESSION_KEY}
+			initialExpression=""
+			persistOnUnmount
+		>
+			<TimelineTableContent />
+		</QuerySearchV2Provider>
+	);
+}
+
 export default TimelineTable;

frontend/src/container/AlertHistory/Timeline/Table/useAlertHistoryFilterSuggestions.ts

@@ -0,0 +1,100 @@
+import { useCallback, useMemo } from 'react';
+import {
+	getRuleHistoryFilterValues,
+	useGetRuleHistoryFilterKeys,
+} from 'api/generated/services/rules';
+import { useAlertHistoryQueryParams } from 'pages/AlertDetails/hooks';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { fieldContextToSuggestionContext } from 'container/AlertHistory/Timeline/Table/utils';
+
+export interface AlertHistoryFilterSuggestions {
+	hardcodedAttributeKeys: QueryKeyDataSuggestionsProps[];
+	valueSuggestionsOverride: (
+		key: string,
+		searchText: string,
+	) => Promise<{
+		stringValues: string[];
+		numberValues: number[];
+		complete: boolean;
+	}>;
+	isLoadingKeys: boolean;
+}
+
+export function useAlertHistoryFilterSuggestions(
+	ruleId: string | null,
+): AlertHistoryFilterSuggestions {
+	const { startTime, endTime } = useAlertHistoryQueryParams();
+
+	const { data: filterKeysData, isLoading: isLoadingKeys } =
+		useGetRuleHistoryFilterKeys(
+			{ id: ruleId ?? '' },
+			{ startUnixMilli: startTime, endUnixMilli: endTime },
+			{
+				query: {
+					enabled: !!ruleId,
+					refetchOnMount: false,
+					refetchOnWindowFocus: false,
+				},
+			},
+		);
+
+	const hardcodedAttributeKeys = useMemo((): QueryKeyDataSuggestionsProps[] => {
+		const keys = filterKeysData?.data?.keys;
+		if (!keys) {
+			// by default, when QuerySearch keys fails, we don't render fallback keys
+			// we just return empty to let user write whatever they want with no
+			// key suggestion
+			return [];
+		}
+		return Object.values(keys).flatMap((items) =>
+			items.map(
+				(item) =>
+					({
+						label: item.name,
+						name: item.name,
+						type: item.fieldDataType || 'string',
+						signal: 'logs' as const,
+						fieldDataType: item.fieldDataType,
+						fieldContext: fieldContextToSuggestionContext(item.fieldContext),
+					}) satisfies QueryKeyDataSuggestionsProps,
+			),
+		);
+	}, [filterKeysData]);
+
+	const valueSuggestionsOverride = useCallback(
+		async (
+			key: string,
+			searchText: string,
+		): Promise<{
+			stringValues: string[];
+			numberValues: number[];
+			complete: boolean;
+		}> => {
+			if (!ruleId) {
+				return {
+					stringValues: [],
+					numberValues: [],
+					complete: true,
+				};
+			}
+			const response = await getRuleHistoryFilterValues(
+				{ id: ruleId },
+				{
+					name: key,
+					searchText,
+					startUnixMilli: startTime,
+					endUnixMilli: endTime,
+				},
+			);
+			const values = response.data?.values;
+			return {
+				stringValues: values?.stringValues ?? [],
+				numberValues: values?.numberValues ?? [],
+				complete: response.data?.complete ?? false,
+			};
+		},
+		[ruleId, startTime, endTime],
+	);
+
+	return { hardcodedAttributeKeys, valueSuggestionsOverride, isLoadingKeys };
+}

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,83 +1,15 @@
-import { useMemo } from 'react';
-import { Ellipsis, Search } from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
-import { Button, TableColumnsType as ColumnsType } from 'antd';
-import ClientSideQBSearch, {
-	AttributeKey,
-} from 'components/ClientSideQBSearch/ClientSideQBSearch';
+import { Ellipsis } from '@signozhq/icons';
+import { Button, TableColumnsType as ColumnsType, Tooltip } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
-import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import AlertLabels, {
-	AlertLabelsProps,
-} from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-const transformLabelsToQbKeys = (
-	labels: AlertRuleTimelineTableResponse['labels'],
-): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
-
-function LabelFilter({
-	filters,
-	setFilters,
-	labels,
-}: {
-	setFilters: (filters: TagFilter) => void;
-	filters: TagFilter;
-	labels: AlertLabelsProps['labels'];
-}): JSX.Element | null {
-	const isDarkMode = useIsDarkMode();
-
-	const { transformedKeys, attributesMap } = useMemo(
-		() => ({
-			transformedKeys: transformLabelsToQbKeys(labels || {}),
-			attributesMap: transformKeyValuesToAttributeValuesMap(labels),
-		}),
-		[labels],
-	);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length
-		) {
-			return;
-		}
-		setFilters(tagFilters);
-	};
-
-	return (
-		<ClientSideQBSearch
-			onChange={handleSearch}
-			filters={filters}
-			className="alert-history-label-search"
-			attributeKeys={transformedKeys}
-			attributeValuesMap={attributesMap}
-			suffixIcon={
-				<Search
-					size={14}
-					color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-				/>
-			}
-		/>
-	);
-}
 
 export const timelineTableColumns = ({
-	filters,
-	labels,
-	setFilters,
 	formatTimezoneAdjustedTimestamp,
 }: {
-	filters: TagFilter;
-	labels: AlertLabelsProps['labels'];
-	setFilters: (filters: TagFilter) => void;
 	formatTimezoneAdjustedTimestamp: (
 		input: TimestampInput,
 		format?: string,
@@ -95,9 +27,7 @@ export const timelineTableColumns = ({
 		),
 	},
 	{
-		title: (
-			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
-		),
+		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
 			<div className="alert-rule-labels">
@@ -119,15 +49,27 @@ export const timelineTableColumns = ({
 		title: 'ACTIONS',
 		width: 140,
 		align: 'right',
-		render: (record): JSX.Element => (
-			<ConditionalAlertPopover
-				relatedTracesLink={record.relatedTracesLink}
-				relatedLogsLink={record.relatedLogsLink}
-			>
-				<Button type="text" ghost>
-					<Ellipsis className="dropdown-icon" size="md" />
-				</Button>
-			</ConditionalAlertPopover>
-		),
+		render: (_, record): JSX.Element => {
+			if (!record.relatedTracesLink && !record.relatedLogsLink) {
+				return (
+					<Tooltip title="No links available for this item">
+						<Button type="text" ghost disabled>
+							<Ellipsis className="dropdown-icon" size="md" />
+						</Button>
+					</Tooltip>
+				);
+			}
+
+			return (
+				<ConditionalAlertPopover
+					relatedTracesLink={record.relatedTracesLink ?? ''}
+					relatedLogsLink={record.relatedLogsLink ?? ''}
+				>
+					<Button type="text" ghost>
+						<Ellipsis className="dropdown-icon" size="md" />
+					</Button>
+				</ConditionalAlertPopover>
+			);
+		},
 	},
 ];

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTableCursor.ts

@@ -0,0 +1,53 @@
+import {
+	Options,
+	parseAsInteger,
+	parseAsStringLiteral,
+	useQueryState,
+	UseQueryStateReturn,
+} from 'nuqs';
+import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
+
+const defaultNuqsOptions: Options = {
+	history: 'push',
+};
+
+export const TIMELINE_TABLE_PARAMS = {
+	PAGE: 'page',
+	ORDER: 'order',
+} as const;
+
+const ORDER_VALUES = ['asc', 'desc'] as const;
+export type OrderDirection = (typeof ORDER_VALUES)[number];
+
+export const useTimelineTablePage = (): UseQueryStateReturn<number, number> =>
+	useQueryState(
+		TIMELINE_TABLE_PARAMS.PAGE,
+		parseAsInteger.withDefault(1).withOptions(defaultNuqsOptions),
+	);
+
+export const useTimelineTableOrder = (): UseQueryStateReturn<
+	OrderDirection,
+	OrderDirection
+> =>
+	useQueryState(
+		TIMELINE_TABLE_PARAMS.ORDER,
+		parseAsStringLiteral(ORDER_VALUES)
+			.withDefault('asc')
+			.withOptions(defaultNuqsOptions),
+	);
+
+export function encodeCursor(page: number, limit: number): string | undefined {
+	if (page <= 1) {
+		return undefined;
+	}
+	const offset = (page - 1) * limit;
+	// Backend uses base64.RawURLEncoding (URL-safe, no padding)
+	return btoa(JSON.stringify({ offset, limit }))
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_')
+		.replace(/=+$/, '');
+}
+
+export function computeCursorForPage(page: number): string | undefined {
+	return encodeCursor(page, TIMELINE_TABLE_PAGE_SIZE);
+}

frontend/src/container/AlertHistory/Timeline/Table/utils.ts

@@ -0,0 +1,26 @@
+import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+
+const fieldContextToSuggestionMap: Record<
+	TelemetrytypesFieldContextDTO,
+	QueryKeyDataSuggestionsProps['fieldContext']
+> = {
+	[TelemetrytypesFieldContextDTO.resource]: 'resource',
+	[TelemetrytypesFieldContextDTO.span]: 'span',
+	[TelemetrytypesFieldContextDTO.attribute]: 'attribute',
+	// no maps for the following values on suggestion context
+	[TelemetrytypesFieldContextDTO.body]: undefined,
+	[TelemetrytypesFieldContextDTO.metric]: undefined,
+	[TelemetrytypesFieldContextDTO.log]: undefined,
+	[TelemetrytypesFieldContextDTO['']]: undefined,
+};
+
+export function fieldContextToSuggestionContext(
+	fc: TelemetrytypesFieldContextDTO | undefined,
+): QueryKeyDataSuggestionsProps['fieldContext'] {
+	if (fc === undefined) {
+		return undefined;
+	}
+
+	return fieldContextToSuggestionMap[fc];
+}

frontend/src/container/AlertHistory/utils/labelAdapters.ts

@@ -0,0 +1,19 @@
+import type { Querybuildertypesv5LabelDTO } from 'api/generated/services/sigNoz.schemas';
+import type { Labels } from 'types/api/alerts/def';
+
+export function labelsArrayToObject(
+	labels: Querybuildertypesv5LabelDTO[] | null | undefined,
+): Labels {
+	if (!labels) {
+		return {};
+	}
+
+	return labels.reduce<Labels>((acc, label) => {
+		const key = label.key?.name ?? '';
+		const value = String(label.value ?? '');
+		if (key) {
+			acc[key] = value;
+		}
+		return acc;
+	}, {});
+}

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,9 +1,6 @@
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
-import { GoogleChatInitialConfig } from 'container/CreateAlertChannels/defaults';
 import {
-	googleChatDescriptionDefaultValue,
-	googleChatTitleDefaultValue,
 	opsGenieDescriptionDefaultValue,
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
@@ -422,99 +419,5 @@ describe('Create Alert Channel', () => {
 				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
 			});
 		});
-		describe('Google Chat', () => {
-			const validWebhookUrl =
-				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
-
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
-				expect(screen.getByText('Google Chat')).toBeInTheDocument();
-			});
-
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-
-			it('Should check if Title contains the google chat template', () => {
-				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-					googleChatTitleDefaultValue,
-				);
-			});
-
-			it('Should check if Description contains the google chat template', () => {
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					googleChatDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
-				fireEvent.change(screen.getByTestId('channel-name-textbox'), {
-					target: { value: 'gchat-channel' },
-				});
-				fireEvent.change(screen.getByTestId('webhook-url-textbox'), {
-					target: { value: 'https://example.com/webhook' },
-				});
-
-				fireEvent.click(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				);
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'google_chat_webhook_url_invalid',
-					}),
-				);
-			});
-
-			it('Should check if saving sends a googlechat_configs payload', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				fireEvent.change(screen.getByTestId('channel-name-textbox'), {
-					target: { value: 'gchat-channel' },
-				});
-				fireEvent.change(screen.getByTestId('webhook-url-textbox'), {
-					target: { value: validWebhookUrl },
-				});
-
-				fireEvent.click(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				);
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'gchat-channel',
-					googlechat_configs: [
-						{
-							webhook_url: validWebhookUrl,
-							title: GoogleChatInitialConfig.title,
-							text: GoogleChatInitialConfig.text,
-							send_resolved: true,
-						},
-					],
-				});
-			});
-		});
 	});
 });

frontend/src/container/AppLayout/index.tsx

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

frontend/src/container/CreateAlertChannels/config.ts

@@ -104,7 +104,6 @@ export enum ChannelType {
 	Pagerduty = 'pagerduty',
 	Opsgenie = 'opsgenie',
 	MsTeams = 'msteams',
-	GoogleChat = 'googlechat',
 }
 
 // LabelFilterStatement will be used for preparing filter conditions / matchers
@@ -126,11 +125,3 @@ export interface MsTeamsChannel extends Channel {
 	title?: string;
 	text?: string;
 }
-
-export interface GoogleChatChannel extends Channel {
-	// incoming webhook url of the google chat space, must be an
-	// https url on chat.googleapis.com
-	webhook_url?: string;
-	title?: string;
-	text?: string;
-}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -1,48 +1,4 @@
-import {
-	EmailChannel,
-	GoogleChatChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-} from './config';
-
-// shared by slack and ms teams, both render the same title / description boxes
-export const SlackInitialConfig: Partial<SlackChannel> = {
-	text: `{{ range .Alerts -}}
-     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
-
-     *Summary:* {{ .Annotations.summary }}
-     *Description:* {{ .Annotations.description }}
-     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
-     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
-
-     *Details:*
-       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
-       {{ end }}
-     {{ end }}`,
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
-     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
-       {{" "}}(
-       {{- with .CommonLabels.Remove .GroupLabels.Names }}
-         {{- range $index, $label := .SortedPairs -}}
-           {{ if $index }}, {{ end }}
-           {{- $label.Name }}="{{ $label.Value -}}"
-         {{- end }}
-       {{- end -}}
-       )
-     {{- end }}`,
-};
-
-// mirrors DefaultGoogleChatReceiverConfig in pkg/types/alertmanagertypes/googlechat.go,
-// which the backend applies when title / text are left empty
-export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	text: `{{ range .Alerts -}}
-**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }}
-**Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }}
-**Description:** {{ .Annotations.description }}{{ end }}
-{{ end }}`,
-};
+import { EmailChannel, OpsgenieChannel, PagerChannel } from './config';
 
 export const PagerInitialConfig: Partial<PagerChannel> = {
 	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}

frontend/src/container/CreateAlertChannels/index.tsx

@@ -14,24 +14,16 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
-import {
-	useCreateChannel,
-	useTestChannel,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
 
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -41,16 +33,10 @@ import {
 } from './config';
 import {
 	EmailInitialConfig,
-	GoogleChatInitialConfig,
 	OpsgenieInitialConfig,
 	PagerInitialConfig,
-	SlackInitialConfig,
 } from './defaults';
-import {
-	isChannelType,
-	isValidGoogleChatWebhookURL,
-	prepareGoogleChatRequest,
-} from './utils';
+import { isChannelType } from './utils';
 
 import './CreateAlertChannels.styles.scss';
 
@@ -74,22 +60,38 @@ function CreateAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel
+				EmailChannel
 		>
-	>(() => ({
+	>({
 		send_resolved: true,
-		...(preType === ChannelType.GoogleChat
-			? GoogleChatInitialConfig
-			: SlackInitialConfig),
-	}));
+		text: `{{ range .Alerts -}}
+     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
+
+     *Summary:* {{ .Annotations.summary }}
+     *Description:* {{ .Annotations.description }}
+     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
+     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
+
+     *Details:*
+       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
+       {{ end }}
+     {{ end }}`,
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
+       {{" "}}(
+       {{- with .CommonLabels.Remove .GroupLabels.Names }}
+         {{- range $index, $label := .SortedPairs -}}
+           {{ if $index }}, {{ end }}
+           {{- $label.Name }}="{{ $label.Value -}}"
+         {{- end }}
+       {{- end -}}
+       )
+     {{- end }}`,
+	});
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
-	const { mutateAsync: createChannel } = useCreateChannel();
-	const { mutateAsync: testChannel } = useTestChannel();
-
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
 		(value: string) => {
@@ -119,26 +121,8 @@ function CreateAlertChannels({
 					...EmailInitialConfig,
 				}));
 			}
-
-			// google chat prefills its own title / description templates, so switching
-			// in or out of it has to swap the templates the form is showing
-			if (
-				currentType !== value &&
-				(value === ChannelType.GoogleChat || currentType === ChannelType.GoogleChat)
-			) {
-				const templates =
-					value === ChannelType.GoogleChat
-						? GoogleChatInitialConfig
-						: SlackInitialConfig;
-
-				setSelectedConfig((selectedConfig) => ({
-					...selectedConfig,
-					...templates,
-				}));
-				formInstance.setFieldsValue(templates);
-			}
 		},
-		[type, selectedConfig, formInstance],
+		[type, selectedConfig],
 	);
 
 	const prepareSlackRequest = useCallback(
@@ -423,56 +407,6 @@ function CreateAlertChannels({
 		showErrorModal,
 	]);
 
-	const validateGoogleChatConfig = useCallback((): boolean => {
-		if (!selectedConfig.webhook_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return false;
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			notifications.error({
-				message: 'Error',
-				description: t('google_chat_webhook_url_invalid'),
-			});
-			return false;
-		}
-
-		return true;
-	}, [selectedConfig.webhook_url, notifications, t]);
-
-	const onGoogleChatHandler = useCallback(async () => {
-		if (!validateGoogleChatConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			if (!selectedConfig.name) {
@@ -490,7 +424,6 @@ function CreateAlertChannels({
 				[ChannelType.Opsgenie]: onOpsgenieHandler,
 				[ChannelType.MsTeams]: onMsTeamsHandler,
 				[ChannelType.Email]: onEmailHandler,
-				[ChannelType.GoogleChat]: onGoogleChatHandler,
 			};
 
 			if (isChannelType(value)) {
@@ -522,7 +455,6 @@ function CreateAlertChannels({
 			onOpsgenieHandler,
 			onMsTeamsHandler,
 			onEmailHandler,
-			onGoogleChatHandler,
 			notifications,
 			t,
 		],
@@ -560,13 +492,6 @@ function CreateAlertChannels({
 						request = prepareEmailRequest();
 						await testEmail(request);
 						break;
-					case ChannelType.GoogleChat:
-						if (!validateGoogleChatConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
 					default:
 						notifications.error({
 							message: 'Error',
@@ -588,11 +513,7 @@ function CreateAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				showErrorModal(
-					error instanceof APIError
-						? error
-						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
-				);
+				showErrorModal(error as APIError);
 
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
@@ -614,8 +535,6 @@ function CreateAlertChannels({
 			prepareSlackRequest,
 			prepareMsTeamsRequest,
 			prepareEmailRequest,
-			validateGoogleChatConfig,
-			testChannel,
 			notifications,
 		],
 	);

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,39 +1,4 @@
-import {
-	AlertmanagertypesPostableChannelDTO,
-	ConfigSecretURLDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { ChannelType, GoogleChatChannel } from './config';
+import { ChannelType } from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
-
-const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
-
-// the backend enforces the same two rules, this is only for a nicer error experience
-export const isValidGoogleChatWebhookURL = (url: string): boolean => {
-	try {
-		const { protocol, hostname } = new URL(url);
-		return (
-			protocol === 'https:' && hostname.toLowerCase() === GOOGLE_CHAT_WEBHOOK_HOST
-		);
-	} catch {
-		return false;
-	}
-};
-
-// create, update and test all send the same body shape
-export const prepareGoogleChatRequest = (
-	config: Partial<GoogleChatChannel>,
-): AlertmanagertypesPostableChannelDTO => ({
-	name: config.name || '',
-	googlechat_configs: [
-		{
-			// the generated type models go's config.SecretURL as an object, the api takes a string
-			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
-			title: config.title || '',
-			text: config.text || '',
-			send_resolved: config.send_resolved || false,
-		},
-	],
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/sortByMeanDesc.test.ts

@@ -0,0 +1,66 @@
+import { sortByMeanDesc } from '../sortByMeanDesc';
+
+interface Item {
+	name: string;
+	values: (number | null)[];
+}
+
+const item = (name: string, values: (number | null)[]): Item => ({
+	name,
+	values,
+});
+
+const sorted = (items: Item[]): string[] =>
+	sortByMeanDesc(items, {
+		getValues: (entry) => entry.values,
+		getKey: (entry) => entry.name,
+	}).map((entry) => entry.name);
+
+describe('sortByMeanDesc', () => {
+	it('orders items by descending mean', () => {
+		expect(
+			sorted([item('a', [1, 1]), item('b', [10, 20]), item('c', [5, 5])]),
+		).toStrictEqual(['b', 'c', 'a']);
+	});
+
+	it('sinks items with no finite values to the bottom', () => {
+		expect(
+			sorted([item('a', []), item('b', [NaN, Infinity]), item('c', [1])]),
+		).toStrictEqual(['c', 'a', 'b']);
+	});
+
+	it('ignores non-finite and null values when averaging', () => {
+		// Mean over the finite values only is 10, so NaN must not poison it to last place.
+		expect(
+			sorted([item('a', [2, 2]), item('b', [10, NaN]), item('c', [4, null])]),
+		).toStrictEqual(['b', 'c', 'a']);
+	});
+
+	it('produces the same order whichever order the items arrive in', () => {
+		const a = item('a', [5]);
+		const b = item('b', [5]);
+		const c = item('c', [9]);
+
+		expect(sorted([a, b, c])).toStrictEqual(sorted([c, b, a]));
+		expect(sorted([b, a, c])).toStrictEqual(['c', 'a', 'b']);
+	});
+
+	it('tiebreaks equal means on the key', () => {
+		expect(sorted([item('b', [1]), item('a', [1])])).toStrictEqual(['a', 'b']);
+	});
+
+	it('tiebreaks on the key for items that have no finite values either', () => {
+		expect(sorted([item('b', []), item('a', [NaN])])).toStrictEqual(['a', 'b']);
+	});
+
+	it('does not mutate the input array', () => {
+		const items = [item('a', [1]), item('b', [9])];
+
+		expect(sorted(items)).toStrictEqual(['b', 'a']);
+		expect(items.map((entry) => entry.name)).toStrictEqual(['a', 'b']);
+	});
+
+	it('returns an empty array for no items', () => {
+		expect(sorted([])).toStrictEqual([]);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/sortByMeanDesc.ts

@@ -0,0 +1,45 @@
+type MeanInput = number | null | undefined;
+
+function finiteMean(values: Iterable<MeanInput>): number | null {
+	let sum = 0;
+	let count = 0;
+	for (const value of values) {
+		if (typeof value === 'number' && Number.isFinite(value)) {
+			sum += value;
+			count += 1;
+		}
+	}
+	return count > 0 ? sum / count : null;
+}
+
+export interface SortByMeanDescOptions<T> {
+	/** Numeric values of an item; non-finite entries are ignored. */
+	getValues: (item: T) => Iterable<MeanInput>;
+	/** Stable identity of an item, used to break ties on equal means. */
+	getKey: (item: T) => string;
+}
+
+/**
+ * Orders series by descending mean, on a copy (V1 parity: `utils/getSortedSeriesData`). The wire
+ * order can't stand in for it: the backend returns series in Go map-iteration order.
+ *
+ * Call this before building the uPlot config and aligned data — those two and click attribution
+ * all index the list positionally, and uPlot draws a stacked bar's segments in series-index order.
+ */
+export function sortByMeanDesc<T>(
+	items: T[],
+	{ getValues, getKey }: SortByMeanDescOptions<T>,
+): T[] {
+	return items
+		.map((item) => ({ item, mean: finiteMean(getValues(item)) }))
+		.sort((a, b) => {
+			if (a.mean !== null && b.mean !== null && a.mean !== b.mean) {
+				return b.mean - a.mean;
+			}
+			if ((a.mean === null) !== (b.mean === null)) {
+				return a.mean === null ? 1 : -1;
+			}
+			return getKey(a.item).localeCompare(getKey(b.item));
+		})
+		.map(({ item }) => item);
+}

frontend/src/container/EditAlertChannels/index.tsx

@@ -14,17 +14,10 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
-import {
-	useTestChannel,
-	useUpdateChannelByID,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -32,15 +25,10 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
-import {
-	isValidGoogleChatWebhookURL,
-	prepareGoogleChatRequest,
-} from 'container/CreateAlertChannels/utils';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
 
 function EditAlertChannels({
 	initialValue,
@@ -57,8 +45,7 @@ function EditAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel
+				EmailChannel
 		>
 	>({
 		...initialValue,
@@ -67,26 +54,6 @@ function EditAlertChannels({
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
-	const { mutateAsync: updateChannel } = useUpdateChannelByID();
-	const { mutateAsync: testChannel } = useTestChannel();
-
-	const notifyError = useCallback(
-		(error: unknown): APIError => {
-			const apiError =
-				error instanceof APIError
-					? error
-					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
-
-			notifications.error({
-				message: apiError.getErrorCode(),
-				description: apiError.getErrorMessage(),
-			});
-
-			return apiError;
-		},
-		[notifications],
-	);
-
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
 	);
@@ -397,61 +364,6 @@ function EditAlertChannels({
 		}
 	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
 
-	const validateGoogleChatConfig = useCallback((): string => {
-		if (!selectedConfig?.webhook_url) {
-			return t('webhook_url_required');
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			return t('google_chat_webhook_url_invalid');
-		}
-
-		return '';
-	}, [selectedConfig, t]);
-
-	const onGoogleChatEditHandler = useCallback(async () => {
-		const validationError = validateGoogleChatConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareGoogleChatRequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			let result;
@@ -467,8 +379,6 @@ function EditAlertChannels({
 				result = await onOpsgenieEditHandler();
 			} else if (value === ChannelType.Email) {
 				result = await onEmailEditHandler();
-			} else if (value === ChannelType.GoogleChat) {
-				result = await onGoogleChatEditHandler();
 			}
 			logEvent('Alert Channel: Save channel', {
 				type: value,
@@ -487,7 +397,6 @@ function EditAlertChannels({
 			onMsTeamsEditHandler,
 			onOpsgenieEditHandler,
 			onEmailEditHandler,
-			onGoogleChatEditHandler,
 		],
 	);
 
@@ -529,19 +438,6 @@ function EditAlertChannels({
 							await testEmail(request);
 						}
 						break;
-					case ChannelType.GoogleChat: {
-						const validationError = validateGoogleChatConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
-					}
 					default:
 						notifications.error({
 							message: 'Error',
@@ -563,7 +459,10 @@ function EditAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				notifyError(error);
+				notifications.error({
+					message: (error as APIError).getErrorCode(),
+					description: (error as APIError).getErrorMessage(),
+				});
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
 					sendResolvedAlert: selectedConfig?.send_resolved,
@@ -577,9 +476,6 @@ function EditAlertChannels({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			t,
-			notifyError,
-			validateGoogleChatConfig,
-			testChannel,
 			prepareWebhookRequest,
 			preparePagerRequest,
 			prepareSlackRequest,

frontend/src/container/FormAlertChannels/Settings/GoogleChat.tsx

@@ -1,82 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-
-import { GoogleChatChannel } from '../../CreateAlertChannels/config';
-import { isValidGoogleChatWebhookURL } from '../../CreateAlertChannels/utils';
-
-function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
-	const { t } = useTranslation('channels');
-
-	return (
-		<>
-			<Form.Item
-				name="webhook_url"
-				label={t('field_webhook_url')}
-				required
-				rules={[
-					{
-						validator: (_, value: string): Promise<void> =>
-							!value || isValidGoogleChatWebhookURL(value)
-								? Promise.resolve()
-								: Promise.reject(new Error(t('google_chat_webhook_url_invalid'))),
-					},
-				]}
-				tooltip={{
-					title: (
-						<MarkdownRenderer
-							markdownContent={t('tooltip_google_chat_url')}
-							variables={{}}
-						/>
-					),
-					overlayInnerStyle: { maxWidth: 400 },
-					placement: 'right',
-				}}
-			>
-				<Input
-					onChange={(event): void => {
-						setSelectedConfig((value) => ({
-							...value,
-							webhook_url: event.target.value,
-						}));
-					}}
-					data-testid="webhook-url-textbox"
-				/>
-			</Form.Item>
-
-			<Form.Item name="title" label={t('field_slack_title')}>
-				<Input.TextArea
-					rows={4}
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							title: event.target.value,
-						}))
-					}
-					data-testid="title-textarea"
-				/>
-			</Form.Item>
-
-			<Form.Item name="text" label={t('field_slack_description')}>
-				<Input.TextArea
-					rows={4}
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							text: event.target.value,
-						}))
-					}
-					data-testid="description-textarea"
-					placeholder={t('placeholder_slack_description')}
-				/>
-			</Form.Item>
-		</>
-	);
-}
-
-interface GoogleChatProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<GoogleChatChannel>>>;
-}
-
-export default GoogleChat;

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,7 +9,6 @@ import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	OpsgenieChannel,
 	PagerChannel,
 	SlackChannel,
@@ -18,7 +17,6 @@ import {
 import history from 'lib/history';
 
 import EmailSettings from './Settings/Email';
-import GoogleChatSettings from './Settings/GoogleChat';
 import MsTeamsSettings from './Settings/MsTeams';
 import OpsgenieSettings from './Settings/Opsgenie';
 import PagerSettings from './Settings/Pager';
@@ -51,8 +49,6 @@ function FormAlertChannels({
 				return <PagerSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.MsTeams:
 				return <MsTeamsSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.GoogleChat:
-				return <GoogleChatSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Opsgenie:
 				return <OpsgenieSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Email:
@@ -133,14 +129,6 @@ function FormAlertChannels({
 						<Select.Option value="msteams" key="msteams" data-testid="select-option">
 							Microsoft Teams
 						</Select.Option>
-
-						<Select.Option
-							value="googlechat"
-							key="googlechat"
-							data-testid="select-option"
-						>
-							Google Chat
-						</Select.Option>
 					</Select>
 				</Form.Item>
 
@@ -188,8 +176,7 @@ interface FormAlertChannelsProps {
 					WebhookChannel &
 					PagerChannel &
 					OpsgenieChannel &
-					EmailChannel &
-					GoogleChatChannel
+					EmailChannel
 			>
 		>
 	>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -756,10 +756,14 @@ function QueryBuilderSearchV2(
 
 			let operatorOptions;
 			if (currentFilterItem?.key?.dataType) {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
-					currentFilterItem.key
-						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-				].map((operator) => ({
+				// 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) => ({
 					label: operator,
 					value: operator,
 				}));

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

@@ -1,11 +1,6 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
-import {
-	act,
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-} from '@testing-library/react';
+import { render, RenderResult, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
@@ -91,6 +86,9 @@ 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;
@@ -113,6 +111,14 @@ 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',
+			},
 		],
 	},
 };
@@ -165,41 +171,28 @@ 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 { container } = renderWithContext();
+		const user = userEvent.setup({ delay: null });
+		renderWithContext();
 
-		// Get the combobox input specifically
-		const combobox = container.querySelector(
-			'.query-builder-search-v2 .ant-select-selection-search-input',
-		) as HTMLInputElement;
+		const combobox = getSearchCombobox();
 
 		// 1. Focus and type to trigger key suggestions
-		await act(async () => {
-			fireEvent.focus(combobox);
-			fireEvent.change(combobox, { target: { value: 'http.' } });
-		});
+		await user.click(combobox);
+		await user.type(combobox, 'http.');
 
 		// Wait for dropdown to appear
 		await screen.findByRole('listbox');
 
 		// 2. Select a key from suggestions
-		const statusOption = await screen.findByText('http.status');
-		await act(async () => {
-			fireEvent.click(statusOption);
-		});
+		await user.click(await screen.findByText('http.status'));
 
 		// Should show operator suggestions
 		expect(screen.getByText('=')).toBeInTheDocument();
 		expect(screen.getByText('!=')).toBeInTheDocument();
 
 		// 3. Select an operator
-		const equalsOption = screen.getByText('=');
-		await act(async () => {
-			fireEvent.click(equalsOption);
-		});
+		await user.click(screen.getByText('='));
 
 		// Should show value suggestions
 		expect(screen.getByText('200')).toBeInTheDocument();
@@ -207,10 +200,7 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 		expect(screen.getByText('500')).toBeInTheDocument();
 
 		// 4. Select a value
-		const valueOption = screen.getByText('200');
-		await act(async () => {
-			fireEvent.click(valueOption);
-		});
+		await user.click(screen.getByText('200'));
 
 		// Verify final filter
 		expect(mockOnChange).toHaveBeenCalledWith(
@@ -227,39 +217,52 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 	});
 });
 
-describe('Dynamic Variable Suggestions', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
+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 { container } = renderWithContext();
+		const user = userEvent.setup({ delay: null });
+		renderWithContext();
 
-		// Get the combobox input
-		const combobox = container.querySelector(
-			'.query-builder-search-v2 .ant-select-selection-search-input',
-		) as HTMLInputElement;
+		const combobox = getSearchCombobox();
 
 		// Focus and type to trigger key suggestions for service.name
-		await act(async () => {
-			fireEvent.focus(combobox);
-			fireEvent.change(combobox, { target: { value: 'service.' } });
-		});
+		await user.click(combobox);
+		await user.type(combobox, 'service.');
 
 		// Wait for dropdown to appear
 		await screen.findByRole('listbox');
 
 		// Select service.name key from suggestions
-		const serviceNameOption = await screen.findByText('service.name');
-		await act(async () => {
-			fireEvent.click(serviceNameOption);
-		});
+		await user.click(await screen.findByText('service.name'));
 
 		// Select equals operator
-		await act(async () => {
-			const equalsOption = screen.getByText('=');
-			fireEvent.click(equalsOption);
-		});
+		await user.click(screen.getByText('='));
 
 		// Should show value suggestions including the dynamic variable
 		// For 'service.name', we expect to see '$service' as the first suggestion
@@ -271,9 +274,7 @@ describe('Dynamic Variable Suggestions', () => {
 		expect(screen.getByText('404')).toBeInTheDocument();
 
 		// Select the variable suggestion
-		await act(async () => {
-			fireEvent.click(variableSuggestion);
-		});
+		await user.click(variableSuggestion);
 
 		// Verify the query was updated with the variable as value
 		expect(mockOnChange).toHaveBeenCalledWith(

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+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,6 +7,7 @@ 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';
@@ -39,10 +40,13 @@ 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(() => {
@@ -121,11 +125,25 @@ function ActionToggle({
 						<Divider />
 
 						<ItemInputSelector
-							placeholder={getResourcePanel(resource).selectorPlaceholder}
+							placeholder={panel.selectorPlaceholder}
 							selectedIds={selectedIds}
 							onChange={onSelectedIdsChange}
-							docsAnchor={getResourcePanel(resource).docsAnchor}
+							testId={selectorTestId}
+							docsAnchor={panel.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,9 +4,10 @@
 	gap: var(--spacing-4);
 	background: var(--l1-background);
 	border: 1px solid var(--l1-border);
-	border-radius: 4px;
+	border-radius: var(--radius-2);
 	padding: var(--spacing-4);
 
+	--input-prefix-padding: var(--spacing-2);
 	--input-suffix-padding: var(--spacing-2);
 }
 
@@ -41,6 +42,11 @@
 	overflow-y: auto;
 }
 
+.itemInputSelectorBadge {
+	--badge-border-radius: 4px;
+	--badge-hover-background: var(--l2-background) !important;
+}
+
 .itemInputSelectorInfoIcon {
 	flex-shrink: 0;
 	color: var(--l2-foreground);
@@ -51,55 +57,7 @@
 	}
 }
 
-.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,5 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
-import { Info, Plus, X } from '@signozhq/icons';
+import { Info, Plus } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
@@ -15,8 +16,10 @@ 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[] {
@@ -30,11 +33,13 @@ function ItemInputSelector({
 	placeholder,
 	selectedIds,
 	onChange,
+	testId,
 	docsAnchor = 'role',
 	hasError = false,
+	prefixElement,
 }: ItemInputSelectorProps): JSX.Element {
 	const [inputValue, setInputValue] = useState('');
-	const footerRef = useRef<HTMLDivElement>(null);
+	const badgesRef = useRef<HTMLDivElement>(null);
 
 	const addValues = useCallback(
 		(input: string): void => {
@@ -87,26 +92,24 @@ function ItemInputSelector({
 		[selectedIds, onChange],
 	);
 
-	const handleBadgeKeyDown = useCallback(
-		(
-			e: React.KeyboardEvent<HTMLButtonElement>,
-			itemId: string,
-			index: number,
-		): void => {
-			if (e.key !== 'Enter' && e.key !== ' ') {
-				return;
-			}
-
+	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) {
+				return;
+			}
+
 			const targetIndex = index > 0 ? index - 1 : 0;
 			requestAnimationFrame(() => {
-				const buttons = footerRef.current?.querySelectorAll('button');
-				const targetButton = buttons?.[targetIndex] as
-					| HTMLButtonElement
-					| undefined;
-				targetButton?.focus();
+				const buttons = badgesRef.current?.querySelectorAll('button');
+				buttons?.[targetIndex]?.focus();
 			});
 		},
 		[handleRemove],
@@ -120,7 +123,7 @@ function ItemInputSelector({
 				styles.itemInputSelector,
 				showError ? styles.itemInputSelectorError : '',
 			)}
-			data-testid="item-input-selector"
+			data-testid={`item-input-selector-${testId}`}
 		>
 			<Input
 				placeholder={placeholder}
@@ -128,14 +131,15 @@ function ItemInputSelector({
 				onChange={handleInputChange}
 				onKeyDown={handleInputKeyDown}
 				onBlur={handleInputBlur}
-				data-testid="item-input-selector-input"
+				data-testid={`item-input-selector-input-${testId}`}
+				prefix={prefixElement}
 				suffix={
 					<Button
 						variant="solid"
 						size="sm"
 						onClick={handleAddClick}
 						disabled={!inputValue.trim()}
-						data-testid="item-input-selector-add-btn"
+						data-testid={`item-input-selector-add-btn-${testId}`}
 					>
 						<Plus size={14} />
 						Add
@@ -144,28 +148,22 @@ function ItemInputSelector({
 			/>
 
 			{selectedIds.length > 0 ? (
-				<div ref={footerRef} className={styles.itemInputSelectorFooter}>
-					<div className={styles.itemInputSelectorBadges}>
+				<div className={styles.itemInputSelectorFooter}>
+					<div ref={badgesRef} className={styles.itemInputSelectorBadges}>
 						{selectedIds.map((id, index) => (
-							<span key={id} className={styles.itemInputSelectorBadge} title={id}>
-								<Typography
-									as="span"
-									size="small"
-									truncate={1}
-									className={styles.itemInputSelectorBadgeLabel}
-								>
+							<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}>
 									{id}
 								</Typography>
-								<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>
+							</Badge>
 						))}
 					</div>
 					<TooltipSimple

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

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

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

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

@@ -0,0 +1,139 @@
+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,9 +76,10 @@ function createGrantPermissionAsReadonly(
 	return {
 		label: 'readonly',
 		insertText: resources
-			.filter(
-				(r) => r.allowedVerbs.includes('read') || r.allowedVerbs.includes('list'),
-			)
+			.filter((r) => {
+				const verbs: readonly string[] = r.allowedVerbs;
+				return verbs.includes('read') || verbs.includes('list');
+			})
 			.flatMap((r) => {
 				const verbs = r.allowedVerbs.filter((v) => v === 'read' || v === 'list');
 				return verbs.map(
@@ -103,7 +104,12 @@ function buildResourceSnippets(): SnippetDef[] {
 	for (const resource of resources) {
 		const { kind, type, allowedVerbs } = resource;
 
-		snippets.push(createGrantAllPermissionSnippet(kind, allowedVerbs, type));
+		// 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));
+		}
 
 		for (const verb of allowedVerbs) {
 			snippets.push(createGrantPermissionToVerbAndKind(kind, verb, type));

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

@@ -0,0 +1,157 @@
+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,11 +329,15 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(3);
+		expect(result).toHaveLength(7);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'role',
 			'serviceaccount',
+			'logs',
+			'traces',
+			'metrics',
+			'meter-metrics',
 		]);
 	});
 
@@ -414,11 +418,15 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(3);
+		expect(result).toHaveLength(7);
 		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,4 +1,12 @@
-import { Bot, Key, Shield } from '@signozhq/icons';
+import {
+	Bot,
+	ChartLine,
+	DraftingCompass,
+	Gauge,
+	Key,
+	Logs,
+	Shield,
+} from '@signozhq/icons';
 
 import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import {
@@ -14,12 +22,15 @@ 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;
 }
 
 /**
@@ -50,6 +61,42 @@ 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,6 +108,7 @@ export function getAppContextMockState(
 		isFetchingHosts: false,
 		isFetchingFeatureFlags: false,
 		isFetchingOrgPreferences: false,
+		isFetchingUserPreferences: false,
 		userFetchError: undefined,
 		activeLicenseFetchError: null,
 		hostsFetchError: undefined,

frontend/src/container/SideNav/SideNav.tsx

@@ -144,6 +144,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		trialInfo,
 		isLoggedIn,
 		userPreferences,
+		isFetchingUserPreferences,
 		changelog,
 		toggleChangelogModal,
 		updateUserPreferenceInContext,
@@ -261,6 +262,11 @@ 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,
 		);
@@ -268,11 +274,6 @@ 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
@@ -282,9 +283,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				.filter((item): item is SidebarItem => item !== undefined);
 		}
 
-		// No preference, or empty array → use defaults
+		// No preference, or empty array, or error loading → use defaults
 		return defaultMoreMenuItems.filter((item) => item.isPinned);
-	}, [userPreferences]);
+	}, [isFetchingUserPreferences, userPreferences]);
 
 	const computedSecondaryMenuItems = useMemo(() => {
 		const shouldShowIntegrationsValue =
@@ -322,12 +323,16 @@ 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 && userPreferences !== null) {
+		if (!hasInitializedRef.current && isFetchingUserPreferences === false) {
 			setPinnedMenuItems(computedPinnedMenuItems);
 			setSecondaryMenuItems(computedSecondaryMenuItems);
 			hasInitializedRef.current = true;
 		}
-	}, [computedPinnedMenuItems, computedSecondaryMenuItems, userPreferences]);
+	}, [
+		computedPinnedMenuItems,
+		computedSecondaryMenuItems,
+		isFetchingUserPreferences,
+	]);
 
 	const isChatSupportEnabled = featureFlags?.find(
 		(flag) => flag.name === FeatureKeys.CHAT_SUPPORT,

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('role', 'admin')),
+			buildPermission('update', buildObjectString<'update'>('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('role', 'admin')),
+			buildPermission('update', buildObjectString<'update'>('role', 'admin')),
 		];
 		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
 		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();

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

@@ -35,6 +35,26 @@ 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'],
@@ -43,7 +63,7 @@ export default {
 			delete: ['metaresource', 'role', 'serviceaccount'],
 			detach: ['metaresource', 'role', 'serviceaccount'],
 			list: ['metaresource', 'role', 'serviceaccount'],
-			read: ['metaresource', 'role', 'serviceaccount'],
+			read: ['metaresource', 'role', 'serviceaccount', 'telemetryresource'],
 			update: ['metaresource', 'role', 'serviceaccount'],
 		},
 	},

frontend/src/lib/authz/hooks/useAuthZ/utils.ts

@@ -23,6 +23,40 @@ export function buildPermission<R extends AuthZRelation>(
 	return `${relation}${PermissionSeparator}${object}` as BrandedPermission;
 }
 
+/**
+ * Builds an object string for use with `buildPermission`.
+ *
+ * ## Type Inference Behavior
+ *
+ * TypeScript infers `R` from `resource`. If a resource belongs to multiple relations,
+ * the return type becomes a union of all matching `AuthZObject` types.
+ *
+ * Example: 'role' is valid for 'read', 'update', 'delete', 'assignee'.
+ * Without explicit generic, return type = `AuthZObject<'read' | 'update' | 'delete' | 'assignee'>`.
+ *
+ * ## When to specify explicit generic
+ *
+ * **Needed** when resource belongs to multiple relations AND you pass result to `buildPermission`
+ * with a relation that has FEWER valid resources than others:
+ *
+ * ```ts
+ * // ERROR: 'read' includes telemetry resources, 'update' does not
+ * buildPermission('update', buildObjectString('role', 'admin'))
+ *
+ * // OK: explicit generic narrows return type
+ * buildPermission('update', buildObjectString<'update'>('role', 'admin'))
+ * ```
+ *
+ * **Not needed** when:
+ * - Resource only belongs to one relation in the constraint
+ * - Using with 'read' relation (widest type, accepts all)
+ * - Storing in a variable typed as `BrandedPermission` (already opaque)
+ *
+ * ```ts
+ * // OK: 'read' is widest, accepts union return type
+ * buildPermission('read', buildObjectString('role', 'admin'))
+ * ```
+ */
 export function buildObjectString<
 	R extends 'delete' | 'read' | 'update' | 'assignee',
 >(resource: ResourcesForRelation<R>, objectId: string): AuthZObject<R> {

frontend/src/mocks-server/__mockdata__/alerts.ts

@@ -27,10 +27,6 @@ export const slackTitleDefaultValue = `[{{ .Status | toUpper }}{{ if eq .Status
 
 export const slackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }} *Summary:* {{ .Annotations.summary }} *Description:* {{ .Annotations.description }} *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}} *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}} *Details:* {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }} {{ end }} {{ end }}`;
 
-export const googleChatTitleDefaultValue = `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`;
-
-export const googleChatDescriptionDefaultValue = `{{ range .Alerts -}} **Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }} **Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }} **Description:** {{ .Annotations.description }}{{ end }} {{ end }}`;
-
 export const editSlackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }} dummy_summary *Summary:* {{ .Annotations.summary }} *Description:* {{ .Annotations.description }} *Details:* {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }} {{ end }} {{ end }}`;
 
 export const pagerDutyDescriptionDefaultVaule = `{{ if gt (len .Alerts.Firing) 0 -}} Alerts Firing: {{ range .Alerts.Firing }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }} {{ if gt (len .Alerts.Resolved) 0 -}} Alerts Resolved: {{ range .Alerts.Resolved }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }}`;

frontend/src/pages/AlertDetails/AlertHeader/AlertState/AlertState.tsx

@@ -1,11 +1,12 @@
 import { Color } from '@signozhq/design-tokens';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { BellOff, CircleCheck, CircleOff, Flame } from '@signozhq/icons';
+import { RuletypesAlertStateDTO } from 'api/generated/services/sigNoz.schemas';
 
 import './AlertState.styles.scss';
 
 type AlertStateProps = {
-	state: string;
+	state: RuletypesAlertStateDTO | string;
 	showLabel?: boolean;
 };
 
@@ -17,7 +18,7 @@ export default function AlertState({
 	let label;
 	const isDarkMode = useIsDarkMode();
 	switch (state) {
-		case 'nodata':
+		case RuletypesAlertStateDTO.nodata:
 			icon = (
 				<CircleOff
 					size={18}
@@ -28,7 +29,7 @@ export default function AlertState({
 			label = <span style={{ color: Color.BG_SIENNA_400 }}>No Data</span>;
 			break;
 
-		case 'disabled':
+		case RuletypesAlertStateDTO.disabled:
 			icon = (
 				<BellOff
 					size={18}
@@ -38,15 +39,16 @@ export default function AlertState({
 			);
 			label = <span style={{ color: Color.BG_VANILLA_400 }}>Muted</span>;
 			break;
-		case 'firing':
+
+		case RuletypesAlertStateDTO.firing:
 			icon = (
 				<Flame size={18} fill={Color.BG_CHERRY_500} color={Color.BG_CHERRY_500} />
 			);
 			label = <span style={{ color: Color.BG_CHERRY_500 }}>Firing</span>;
 			break;
 
-		case 'normal':
-		case 'inactive':
+		case RuletypesAlertStateDTO.inactive:
+		case 'normal': // legacy
 			icon = (
 				<CircleCheck
 					size={18}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -1,28 +1,34 @@
-import { useCallback, useMemo } from 'react';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
-import { generatePath, useLocation } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useMutation, useQueryClient, useQuery } from 'react-query';
+import { generatePath } from 'react-router-dom';
 import { TablePaginationConfig, TableProps } from 'antd';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import { patchRulePartial } from 'api/alerts/patchRulePartial';
-import ruleStats from 'api/alerts/ruleStats';
-import timelineGraph from 'api/alerts/timelineGraph';
-import timelineTable from 'api/alerts/timelineTable';
-import topContributors from 'api/alerts/topContributors';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	createRule,
 	deleteRuleByID,
 	getGetRuleByIDQueryKey,
+	getGetRuleHistoryTimelineQueryOptions,
 	invalidateGetRuleByID,
 	invalidateListRules,
 	updateRuleByID,
 	useGetRuleByID,
+	useGetRuleHistoryOverallStatus,
+	useGetRuleHistoryStats,
+	useGetRuleHistoryTopContributors,
 	useListRules,
 } from 'api/generated/services/rules';
-import type {
-	GetRuleByID200,
-	RenderErrorResponseDTO,
-	RuletypesPostableRuleDTO,
+import {
+	Querybuildertypesv5OrderDirectionDTO,
+	RuletypesAlertStateDTO,
+	type GetRuleByID200,
+	type GetRuleHistoryOverallStatus200,
+	type GetRuleHistoryStats200,
+	type GetRuleHistoryTimeline200,
+	type GetRuleHistoryTopContributors200,
+	type RenderErrorResponseDTO,
+	type RuletypesPostableRuleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { TabRoutes } from 'components/RouteTab/types';
@@ -31,35 +37,27 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import AlertHistory from 'container/AlertHistory';
 import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants';
+import {
+	computeCursorForPage,
+	useTimelineTableOrder,
+	useTimelineTablePage,
+} from 'container/AlertHistory/Timeline/Table/useTimelineTableCursor';
 import { AlertDetailsTab, TimelineFilter } from 'container/AlertHistory/types';
-import { urlKey } from 'container/AllError/utils';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import createQueryParams from 'lib/createQueryParams';
 import GetMinMax from 'lib/getMinMax';
 import history from 'lib/history';
 import { History, Table } from '@signozhq/icons';
 import EditRules from 'pages/EditRules';
-import { OrderPreferenceItems } from 'pages/Logs/config';
 import BetaTag from 'periscope/components/BetaTag/BetaTag';
-import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
 import { useAlertRule } from 'providers/Alert';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { ErrorResponse, SuccessResponse } from 'types/api';
 import { toPostableRuleDTOFromAlertDef } from 'types/api/alerts/convert';
-import {
-	AlertDef,
-	AlertRuleStatsPayload,
-	AlertRuleTimelineGraphResponsePayload,
-	AlertRuleTimelineTableResponse,
-	AlertRuleTimelineTableResponsePayload,
-	AlertRuleTopContributorsPayload,
-} from 'types/api/alerts/def';
+import { AlertDef, AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
 import APIError from 'types/api/error';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { nanoToMilli } from 'utils/timeUtils';
+import { Typography } from '@signozhq/ui/typography';
 
 export const useAlertHistoryQueryParams = (): {
 	ruleId: string | null;
@@ -201,10 +199,7 @@ type GetAlertRuleDetailsApiProps = {
 };
 
 type GetAlertRuleDetailsStatsProps = GetAlertRuleDetailsApiProps & {
-	data:
-		| SuccessResponse<AlertRuleStatsPayload, unknown>
-		| ErrorResponse
-		| undefined;
+	data: GetRuleHistoryStats200 | undefined;
 };
 
 export const useGetAlertRuleDetailsStats =
@@ -213,18 +208,15 @@ export const useGetAlertRuleDetailsStats =
 
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 
-		const { isLoading, isRefetching, isError, data } = useQuery(
-			[REACT_QUERY_KEY.ALERT_RULE_STATS, ruleId, startTime, endTime],
+		const { isLoading, isRefetching, isError, data } = useGetRuleHistoryStats(
+			{ id: ruleId || '' },
+			{ start: startTime, end: endTime },
 			{
-				queryFn: () =>
-					ruleStats({
-						id: ruleId || '',
-						start: startTime,
-						end: endTime,
-					}),
-				enabled: isValidRuleId && !!startTime && !!endTime,
-				refetchOnMount: false,
-				refetchOnWindowFocus: false,
+				query: {
+					enabled: isValidRuleId && !!startTime && !!endTime,
+					refetchOnMount: false,
+					refetchOnWindowFocus: false,
+				},
 			},
 		);
 
@@ -232,10 +224,7 @@ export const useGetAlertRuleDetailsStats =
 	};
 
 type GetAlertRuleDetailsTopContributorsProps = GetAlertRuleDetailsApiProps & {
-	data:
-		| SuccessResponse<AlertRuleTopContributorsPayload, unknown>
-		| ErrorResponse
-		| undefined;
+	data: GetRuleHistoryTopContributors200 | undefined;
 };
 
 export const useGetAlertRuleDetailsTopContributors =
@@ -244,90 +233,128 @@ export const useGetAlertRuleDetailsTopContributors =
 
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 
-		const { isLoading, isRefetching, isError, data } = useQuery(
-			[REACT_QUERY_KEY.ALERT_RULE_TOP_CONTRIBUTORS, ruleId, startTime, endTime],
-			{
-				queryFn: () =>
-					topContributors({
-						id: ruleId || '',
-						start: startTime,
-						end: endTime,
-					}),
-				enabled: isValidRuleId,
-				refetchOnMount: false,
-				refetchOnWindowFocus: false,
-			},
-		);
+		const { isLoading, isRefetching, isError, data } =
+			useGetRuleHistoryTopContributors(
+				{ id: ruleId || '' },
+				{ start: startTime, end: endTime },
+				{
+					query: {
+						enabled: isValidRuleId && !!startTime && !!endTime,
+						refetchOnMount: false,
+						refetchOnWindowFocus: false,
+					},
+				},
+			);
 
 		return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
 	};
 
 type GetAlertRuleDetailsTimelineTableProps = GetAlertRuleDetailsApiProps & {
-	data:
-		| SuccessResponse<AlertRuleTimelineTableResponsePayload, unknown>
-		| ErrorResponse
-		| undefined;
+	data: GetRuleHistoryTimeline200 | undefined;
+	error: AxiosError<RenderErrorResponseDTO> | null;
+	refetch: () => void;
+	cancel: () => void;
 };
 
 export const useGetAlertRuleDetailsTimelineTable = ({
-	filters,
+	filterExpression,
 }: {
-	filters: TagFilter;
+	filterExpression: string;
 }): GetAlertRuleDetailsTimelineTableProps => {
+	const queryClient = useQueryClient();
 	const { ruleId, startTime, endTime, params } = useAlertHistoryQueryParams();
-	const { updatedOrder, offset } = useMemo(
-		() => ({
-			updatedOrder: params.get(urlKey.order) ?? OrderPreferenceItems.ASC,
-			offset: parseInt(params.get(urlKey.offset) ?? '0', 10),
-		}),
-		[params],
+	const [page, setPage] = useTimelineTablePage();
+	const [order] = useTimelineTableOrder();
+
+	const updatedOrder = useMemo(
+		() =>
+			order === 'asc'
+				? Querybuildertypesv5OrderDirectionDTO.asc
+				: Querybuildertypesv5OrderDirectionDTO.desc,
+		[order],
 	);
 
 	const timelineFilter = params.get('timelineFilter');
 
 	const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
-	const hasStartAndEnd = startTime !== null && endTime !== null;
 
-	const { isLoading, isRefetching, isError, data } = useQuery(
-		[
-			REACT_QUERY_KEY.ALERT_RULE_TIMELINE_TABLE,
-			ruleId,
-			startTime,
-			endTime,
-			timelineFilter,
-			updatedOrder,
-			offset,
-			JSON.stringify(filters.items),
-		],
+	const stateFilter = useMemo(() => {
+		if (!timelineFilter || timelineFilter === TimelineFilter.ALL) {
+			return undefined;
+		}
+		return timelineFilter === TimelineFilter.FIRED
+			? RuletypesAlertStateDTO.firing
+			: RuletypesAlertStateDTO.inactive;
+	}, [timelineFilter]);
+
+	const filtersKey = `${filterExpression}|${stateFilter ?? ''}|${startTime}|${endTime}`;
+	const prevFiltersKeyRef = useRef(filtersKey);
+	const filtersChanged = prevFiltersKeyRef.current !== filtersKey;
+	const cursor = computeCursorForPage(filtersChanged ? 1 : page);
+
+	useEffect(() => {
+		if (prevFiltersKeyRef.current !== filtersKey) {
+			prevFiltersKeyRef.current = filtersKey;
+			if (page > 1) {
+				void setPage(1);
+			}
+		}
+	}, [filtersKey, page, setPage]);
+
+	const queryParams = useMemo(
+		() => ({
+			start: startTime,
+			end: endTime,
+			limit: TIMELINE_TABLE_PAGE_SIZE,
+			order: updatedOrder,
+			cursor,
+			filterExpression: filterExpression || undefined,
+			state: stateFilter,
+		}),
+		[startTime, endTime, updatedOrder, cursor, filterExpression, stateFilter],
+	);
+
+	const queryOptions = getGetRuleHistoryTimelineQueryOptions(
+		{ id: ruleId || '' },
+		queryParams,
 		{
-			queryFn: () =>
-				timelineTable({
-					id: ruleId || '',
-					start: startTime,
-					end: endTime,
-					limit: TIMELINE_TABLE_PAGE_SIZE,
-					order: updatedOrder,
-					offset,
-					filters,
-					...(timelineFilter && timelineFilter !== TimelineFilter.ALL
-						? {
-								state: timelineFilter === TimelineFilter.FIRED ? 'firing' : 'normal',
-							}
-						: {}),
-				}),
-			enabled: isValidRuleId && hasStartAndEnd,
-			refetchOnMount: false,
-			refetchOnWindowFocus: false,
+			query: {
+				enabled: isValidRuleId,
+				refetchOnMount: false,
+				refetchOnWindowFocus: false,
+			},
 		},
 	);
 
-	return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
+	const { isLoading, isRefetching, isError, data, error, refetch } =
+		useQuery(queryOptions);
+
+	const queryKeyRef = useRef(queryOptions.queryKey);
+	queryKeyRef.current = queryOptions.queryKey;
+
+	const cancel = useCallback(() => {
+		void queryClient.cancelQueries({ queryKey: queryKeyRef.current });
+	}, [queryClient]);
+
+	return {
+		isLoading,
+		isRefetching,
+		isError,
+		data,
+		error: error as AxiosError<RenderErrorResponseDTO> | null,
+		isValidRuleId,
+		ruleId,
+		refetch,
+		cancel,
+	};
 };
 
 export const useTimelineTable = ({
 	totalItems,
+	nextCursor,
 }: {
 	totalItems: number;
+	nextCursor?: string;
 }): {
 	paginationConfig: TablePaginationConfig;
 	onChangeHandler: (
@@ -336,16 +363,13 @@ export const useTimelineTable = ({
 		filters: any,
 		extra: any,
 	) => void;
+	handleNextPage: () => void;
+	handlePrevPage: () => void;
+	hasNextPage: boolean;
+	hasPrevPage: boolean;
 } => {
-	const { safeNavigate } = useSafeNavigate();
-
-	const { pathname } = useLocation();
-
-	const { search } = useLocation();
-
-	const params = useMemo(() => new URLSearchParams(search), [search]);
-
-	const offset = params.get('offset') ?? '0';
+	const [page, setPage] = useTimelineTablePage();
+	const [, setOrder] = useTimelineTableOrder();
 
 	const onChangeHandler: TableProps<AlertRuleTimelineTableResponse>['onChange'] =
 		useCallback(
@@ -357,38 +381,52 @@ export const useTimelineTable = ({
 					| SorterResult<AlertRuleTimelineTableResponse>,
 			) => {
 				if (!Array.isArray(sorter)) {
-					const { pageSize = 0, current = 0 } = pagination;
 					const { order } = sorter;
 					const updatedOrder = order === 'ascend' ? 'asc' : 'desc';
-					const params = new URLSearchParams(window.location.search);
-
-					safeNavigate(
-						`${pathname}?${createQueryParams({
-							...Object.fromEntries(params),
-							order: updatedOrder,
-							offset: current * TIMELINE_TABLE_PAGE_SIZE - TIMELINE_TABLE_PAGE_SIZE,
-							pageSize,
-						})}`,
-					);
+					void Promise.all([setOrder(updatedOrder), setPage(1)]);
 				}
 			},
-			[pathname, safeNavigate],
+			[setOrder, setPage],
 		);
 
-	const offsetInt = parseInt(offset, 10);
-	const pageSize = params.get('pageSize') ?? String(TIMELINE_TABLE_PAGE_SIZE);
-	const pageSizeInt = parseInt(pageSize, 10);
+	const handleNextPage = useCallback(() => {
+		if (!nextCursor) {
+			return;
+		}
+		void setPage(page + 1);
+	}, [nextCursor, page, setPage]);
+
+	const handlePrevPage = useCallback(() => {
+		if (page <= 1) {
+			return;
+		}
+		void setPage(page - 1);
+	}, [page, setPage]);
 
 	const paginationConfig: TablePaginationConfig = {
-		pageSize: pageSizeInt,
-		showTotal: PaginationInfoText,
-		current: offsetInt / TIMELINE_TABLE_PAGE_SIZE + 1,
+		pageSize: TIMELINE_TABLE_PAGE_SIZE,
+		showTotal: (total, [start, end]) => (
+			<span>
+				<Typography.Text size="small">
+					{start} &#8212; {end}
+				</Typography.Text>
+				<Typography.Text size="small"> of {total}</Typography.Text>
+			</span>
+		),
+		current: page,
 		showSizeChanger: false,
 		hideOnSinglePage: true,
 		total: totalItems,
 	};
 
-	return { paginationConfig, onChangeHandler };
+	return {
+		paginationConfig,
+		onChangeHandler,
+		handleNextPage,
+		handlePrevPage,
+		hasNextPage: !!nextCursor,
+		hasPrevPage: page > 1,
+	};
 };
 
 export const useAlertRuleStatusToggle = ({
@@ -581,10 +619,7 @@ export const useAlertRuleDelete = ({
 };
 
 type GetAlertRuleDetailsTimelineGraphProps = GetAlertRuleDetailsApiProps & {
-	data:
-		| SuccessResponse<AlertRuleTimelineGraphResponsePayload, unknown>
-		| ErrorResponse
-		| undefined;
+	data: GetRuleHistoryOverallStatus200 | undefined;
 };
 
 export const useGetAlertRuleDetailsTimelineGraphData =
@@ -594,20 +629,18 @@ export const useGetAlertRuleDetailsTimelineGraphData =
 		const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
 		const hasStartAndEnd = startTime !== null && endTime !== null;
 
-		const { isLoading, isRefetching, isError, data } = useQuery(
-			[REACT_QUERY_KEY.ALERT_RULE_TIMELINE_GRAPH, ruleId, startTime, endTime],
-			{
-				queryFn: () =>
-					timelineGraph({
-						id: ruleId || '',
-						start: startTime,
-						end: endTime,
-					}),
-				enabled: isValidRuleId && hasStartAndEnd,
-				refetchOnMount: false,
-				refetchOnWindowFocus: false,
-			},
-		);
+		const { isLoading, isRefetching, isError, data } =
+			useGetRuleHistoryOverallStatus(
+				{ id: ruleId || '' },
+				{ start: startTime, end: endTime },
+				{
+					query: {
+						enabled: isValidRuleId && hasStartAndEnd,
+						refetchOnMount: false,
+						refetchOnWindowFocus: false,
+					},
+				},
+			);
 
 		return { isLoading, isRefetching, isError, data, isValidRuleId, ruleId };
 	};

frontend/src/pages/ChannelsEdit/index.tsx

@@ -10,7 +10,6 @@ import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
-	GoogleChatChannel,
 	MsTeamsChannel,
 	PagerChannel,
 	SlackChannel,
@@ -60,17 +59,9 @@ function ChannelsEdit(): JSX.Element {
 
 	const prepChannelConfig = (): {
 		type: string;
-		channel: SlackChannel &
-			WebhookChannel &
-			PagerChannel &
-			MsTeamsChannel &
-			GoogleChatChannel;
+		channel: SlackChannel & WebhookChannel & PagerChannel & MsTeamsChannel;
 	} => {
-		let channel: SlackChannel &
-			WebhookChannel &
-			PagerChannel &
-			MsTeamsChannel &
-			GoogleChatChannel = {
+		let channel: SlackChannel & WebhookChannel & PagerChannel & MsTeamsChannel = {
 			name: '',
 		};
 		if (value && 'slack_configs' in value) {
@@ -90,15 +81,6 @@ function ChannelsEdit(): JSX.Element {
 				channel,
 			};
 		}
-		if (value && 'googlechat_configs' in value) {
-			const [googleChatConfig] = value.googlechat_configs;
-			channel = googleChatConfig;
-			return {
-				type: ChannelType.GoogleChat,
-				channel,
-			};
-		}
-
 		if (value && 'pagerduty_configs' in value) {
 			const pagerConfig = value.pagerduty_configs[0];
 			channel = pagerConfig;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/variableAdapters.test.ts

@@ -0,0 +1,97 @@
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from '../variableFormModel';
+import { dtoToFormModel, formModelToDto } from '../variableAdapters';
+
+function model(overrides: Partial<VariableFormModel>): VariableFormModel {
+	return { ...emptyVariableFormModel(), name: 'v', ...overrides };
+}
+
+/** The list spec a saved variable carries, whatever its plugin. */
+function listSpec(m: VariableFormModel): {
+	allowMultiple?: boolean;
+	allowAllValue?: boolean;
+} {
+	return formModelToDto(m).spec as {
+		allowMultiple?: boolean;
+		allowAllValue?: boolean;
+	};
+}
+
+describe('formModelToDto — the ALL flag needs multi-select', () => {
+	it('keeps ALL for a multi-select dynamic variable', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'DYNAMIC',
+					dynamicAttribute: 'host.name',
+					multiSelect: true,
+				}),
+			),
+		).toMatchObject({ allowMultiple: true, allowAllValue: true });
+	});
+
+	it('drops ALL for a single-select dynamic variable', () => {
+		// The API rejects allowAllValue without allowMultiple, and this used to be forced
+		// true for every dynamic variable — which blocked saving the whole dashboard.
+		expect(
+			listSpec(
+				model({
+					type: 'DYNAMIC',
+					dynamicAttribute: 'host.name',
+					multiSelect: false,
+				}),
+			),
+		).toMatchObject({ allowMultiple: false, allowAllValue: false });
+	});
+
+	it('drops ALL for a single-select query variable that still carries the flag', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'QUERY',
+					queryValue: 'SELECT 1',
+					multiSelect: false,
+					showAllOption: true,
+				}),
+			),
+		).toMatchObject({ allowMultiple: false, allowAllValue: false });
+	});
+
+	it('respects the toggle on a multi-select query variable', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'QUERY',
+					queryValue: 'SELECT 1',
+					multiSelect: true,
+					showAllOption: false,
+				}),
+			),
+		).toMatchObject({ allowMultiple: true, allowAllValue: false });
+	});
+
+	it('round-trips a single-select dynamic variable unchanged', () => {
+		// What the dashboard in the report holds: saving it must not flip the flag.
+		const dto = {
+			kind: 'ListVariable',
+			spec: {
+				name: 'host.name',
+				display: { name: 'host.name', description: '' },
+				allowMultiple: false,
+				allowAllValue: false,
+				sort: 'alphabetical-asc',
+				plugin: {
+					kind: 'signoz/DynamicVariable',
+					spec: { name: 'host.name', signal: 'all' },
+				},
+			},
+		} as never;
+
+		expect(listSpec(dtoToFormModel(dto))).toMatchObject({
+			allowMultiple: false,
+			allowAllValue: false,
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -133,9 +133,14 @@ export function formModelToDto(
 			name: model.name,
 			display,
 			allowMultiple: model.multiSelect,
-			// Dynamic variables always expose the aggregate "ALL" entry (matches V1,
-			// which forced showALLOption true on save); other types respect the toggle.
-			allowAllValue: model.type === 'DYNAMIC' ? true : model.showAllOption,
+			// Dynamic variables always expose the aggregate "ALL" entry (matches V1, which
+			// forced showALLOption true on save); other types respect the toggle. Either
+			// way it needs multi-select — ALL is a set of values, and the API rejects the
+			// flag without it, which used to make a single-select dynamic variable
+			// unsaveable and blocked every other edit to the dashboard with it.
+			allowAllValue:
+				model.multiSelect &&
+				(model.type === 'DYNAMIC' ? true : model.showAllOption),
 			// model.sort is already a Perses sort token (`none` / `alphabetical-*`).
 			sort: model.sort,
 			defaultValue: model.defaultValue,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/panelEditorUrlQuery.promql.test.tsx

@@ -0,0 +1,164 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter, Route, useHistory, useParams } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import {
+	type DashboardtypesPanelDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import { useOpenPanelEditor } from '../../hooks/useOpenPanelEditor';
+import { usePanelEditorQuerySync } from '../hooks/usePanelEditorQuerySync';
+import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory: useRouterHistory } =
+		jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useRouterHistory();
+			return {
+				safeNavigate: (to: string): void => history.push(to),
+			};
+		},
+	};
+});
+
+jest.mock('../../store/useDashboardStore', () => ({
+	useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+		selector({ dashboardId: 'dash-1' }),
+}));
+
+function makePromPanel(name: string, promql: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/PromQLQuery',
+							spec: { name: 'A', query: promql, legend: '', disabled: false },
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePromPanel('Panel A', 'up{job="alpha"}'),
+	B: makePromPanel('Panel B', 'up{job="bravo"}'),
+};
+
+const noop = (): void => {};
+
+/** Stands in for the editor route: the same draft + builder sync `PanelEditorContainer` runs. */
+function EditorRoute(): JSX.Element {
+	const { panelId } = useParams<{ panelId: string }>();
+	const [panel] = useState(PANELS[panelId]);
+
+	usePanelEditorQuerySync({
+		draft: panel,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		setSpec: noop,
+		refetch: noop,
+		signal: TelemetrytypesSignalDTO.metrics,
+		savedQueries: panel.spec.queries,
+	});
+
+	return (
+		<PanelEditorQueryBuilder
+			panelKind="signoz/TimeSeriesPanel"
+			signal={TelemetrytypesSignalDTO.metrics}
+			isLoadingQueries={false}
+			onStageRunQuery={noop}
+			onCancelQuery={noop}
+		/>
+	);
+}
+
+function Harness(): JSX.Element {
+	const openPanelEditor = useOpenPanelEditor();
+	const history = useHistory();
+
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="edit-a"
+				onClick={(): void => openPanelEditor('A', { panel: PANELS.A })}
+			>
+				edit A
+			</button>
+			<button
+				type="button"
+				data-testid="edit-b"
+				onClick={(): void => openPanelEditor('B', { panel: PANELS.B })}
+			>
+				edit B
+			</button>
+			<button
+				type="button"
+				data-testid="back"
+				onClick={(): void => history.push('/dashboard/dash-1')}
+			>
+				back
+			</button>
+			<Route
+				path="/dashboard/:dashboardId/panel/:panelId"
+				component={EditorRoute}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('Panel editor route, PromQL panels', () => {
+	it('opens on the edited panel query, not the previously edited one', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('edit-a'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="alpha"}',
+		);
+
+		await user.click(screen.getByTestId('back'));
+		await user.click(screen.getByTestId('edit-b'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="bravo"}',
+		);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -27,6 +27,7 @@ import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
 import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
 import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
 
 import { buildBarChartConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -70,7 +71,12 @@ function BarPanelRenderer({
 
 	const flatSeries = useMemo(
 		() =>
-			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
 		[data.response, data.legendMap],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -27,6 +27,7 @@ import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
 import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
 import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
 
 import { buildTimeSeriesConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -71,7 +72,12 @@ function TimeSeriesPanelRenderer({
 
 	const flatSeries = useMemo(
 		() =>
-			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
 		[data.response, data.legendMap],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/sortSeriesByMean.test.ts

@@ -0,0 +1,95 @@
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import { sortSeriesByMeanDesc } from '../sortSeriesByMean';
+
+function makeSeries(
+	queryName: string,
+	values: number[],
+	overrides: Partial<PanelSeries> = {},
+): PanelSeries {
+	return {
+		queryName,
+		legend: '',
+		labels: {},
+		kind: 'series',
+		values: values.map((value, index) => ({
+			timestamp: (index + 1) * 1_000,
+			value,
+		})),
+		aggregation: { index: 0, alias: '' },
+		...overrides,
+	};
+}
+
+const names = (series: PanelSeries[]): string[] =>
+	series.map((item) => item.queryName);
+
+describe('sortSeriesByMeanDesc', () => {
+	it('orders series by descending mean', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', [1, 1]),
+			makeSeries('B', [10, 20]),
+			makeSeries('C', [5, 5]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['B', 'C', 'A']);
+	});
+
+	it('sinks series with no finite points to the bottom', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', []),
+			makeSeries('B', [NaN, Infinity]),
+			makeSeries('C', [1]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['C', 'A', 'B']);
+	});
+
+	it('ignores non-finite points when averaging', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', [2, 2]),
+			// Mean over finite points only is 10, so NaN must not poison it to last place.
+			makeSeries('B', [10, NaN]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['B', 'A']);
+	});
+
+	it('produces the same order regardless of input order', () => {
+		const a = makeSeries('A', [5]);
+		const b = makeSeries('B', [5]);
+		const c = makeSeries('C', [9]);
+
+		expect(names(sortSeriesByMeanDesc([a, b, c]))).toStrictEqual(
+			names(sortSeriesByMeanDesc([c, b, a])),
+		);
+		expect(names(sortSeriesByMeanDesc([b, a, c]))).toStrictEqual(['C', 'A', 'B']);
+	});
+
+	it('tiebreaks equal means on labels when the query name matches', () => {
+		const forward = sortSeriesByMeanDesc([
+			makeSeries('A', [1], { labels: { host: 'b' } }),
+			makeSeries('A', [1], { labels: { host: 'a' } }),
+		]);
+		const reversed = sortSeriesByMeanDesc([
+			makeSeries('A', [1], { labels: { host: 'a' } }),
+			makeSeries('A', [1], { labels: { host: 'b' } }),
+		]);
+
+		expect(forward.map((item) => item.labels.host)).toStrictEqual(['a', 'b']);
+		expect(reversed.map((item) => item.labels.host)).toStrictEqual(['a', 'b']);
+	});
+
+	it('does not mutate the input array', () => {
+		const input = [makeSeries('A', [1]), makeSeries('B', [9])];
+
+		const sorted = sortSeriesByMeanDesc(input);
+
+		expect(names(input)).toStrictEqual(['A', 'B']);
+		expect(names(sorted)).toStrictEqual(['B', 'A']);
+	});
+
+	it('returns an empty array for no series', () => {
+		expect(sortSeriesByMeanDesc([])).toStrictEqual([]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelBuilderQuery.ts

@@ -0,0 +1,23 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getPanelDefinition } from '../registry';
+import { PANEL_KIND_TO_PANEL_TYPE } from '../types/panelKind';
+import { fromPerses } from '../../queryV5/persesQueryAdapters';
+
+/**
+ * The panel's saved query as a builder `Query` — what the editor route and the View
+ * modal put in `compositeQuery` when they open. Matches the seed
+ * `usePanelEditorQuerySync` computes from the panel.
+ */
+export function getPanelBuilderQuery(panel: DashboardtypesPanelDTO): Query {
+	const kind = panel.spec.plugin.kind;
+	const [defaultSignal] = getPanelDefinition(kind).supportedSignals;
+	// A query-less panel seeds from the kind's first supported signal — `fromPerses`'s
+	// metrics default isn't authorable in every kind (e.g. List).
+	if (panel.spec.queries.length === 0 && defaultSignal) {
+		return initialQueriesMap[defaultSignal];
+	}
+	return fromPerses(panel.spec.queries, PANEL_KIND_TO_PANEL_TYPE[kind]);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/sortSeriesByMean.ts

@@ -0,0 +1,18 @@
+import { sortByMeanDesc } from 'container/DashboardContainer/visualization/charts/utils/sortByMeanDesc';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+function seriesKey(series: PanelSeries): string {
+	const labels = Object.keys(series.labels)
+		.sort()
+		.map((name) => `${name}=${series.labels[name]}`)
+		.join(',');
+	return `${series.queryName}|${series.aggregation.index}|${series.kind}|${labels}`;
+}
+
+/** `sortByMeanDesc` over flattened V5 series; call it before building the config and chart data. */
+export function sortSeriesByMeanDesc(series: PanelSeries[]): PanelSeries[] {
+	return sortByMeanDesc(series, {
+		getValues: (item) => item.values.map((point) => point.value),
+		getKey: seriesKey,
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -240,7 +240,10 @@ describe('usePanelActionItems', () => {
 			(i) => 'key' in i && i.key === 'edit-panel',
 		);
 		(edit as { onClick: () => void }).onClick();
-		expect(mockOpenEditor).toHaveBeenCalledWith('panel-1');
+		// The panel rides along so its saved query lands in the editor URL.
+		expect(mockOpenEditor).toHaveBeenCalledWith('panel-1', {
+			panel: mockPanel,
+		});
 	});
 
 	it('"Move to section" offers a single "Dashboard (root)" target', () => {
@@ -394,7 +397,9 @@ describe('usePanelActionItems', () => {
 			(i) => 'key' in i && i.key === 'view-panel',
 		);
 		(view as { onClick: () => void }).onClick();
-		expect(mockOpenView).toHaveBeenCalledWith('panel-1');
+		// The panel goes along so the opener can seed the shared query builder before
+		// the modal mounts (otherwise it renders the previously-viewed panel's query).
+		expect(mockOpenView).toHaveBeenCalledWith('panel-1', baseArgs.panel);
 	});
 
 	it('create-alert seeds an alert from this panel', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx

@@ -130,7 +130,7 @@ export function usePanelActionItems({
 				key: 'view-panel',
 				label: 'View',
 				icon: <Fullscreen size={14} />,
-				onClick: (): void => openView(panelId),
+				onClick: (): void => openView(panelId, panel),
 			});
 		}
 		if (canEdit && canEditWidget && panelCapabilities.edit) {
@@ -139,7 +139,7 @@ export function usePanelActionItems({
 				label: label('Edit panel'),
 				icon: <PenLine size={14} />,
 				disabled: isLocked,
-				onClick: (): void => openPanelEditor(panelId),
+				onClick: (): void => openPanelEditor(panelId, { panel }),
 			});
 		}
 		if (canEdit && canEditWidget && panelCapabilities.clone) {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanel.addons.test.tsx

@@ -0,0 +1,253 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// CodeMirror (the where-clause editor) needs real DOM measurement APIs.
+beforeAll(() => {
+	const rect = {
+		width: 100,
+		height: 20,
+		top: 0,
+		left: 0,
+		right: 100,
+		bottom: 20,
+		x: 0,
+		y: 0,
+		toJSON: (): unknown => rect,
+	} as DOMRect;
+	const rects = { length: 1, item: (): DOMRect => rect, 0: rect };
+	document.createRange = (): Range =>
+		({
+			getClientRects: (): unknown => rects,
+			getBoundingClientRect: (): DOMRect => rect,
+			setStart: (): void => {},
+			setEnd: (): void => {},
+			startContainer: document.body,
+			endContainer: document.body,
+			startOffset: 0,
+			endOffset: 0,
+			collapsed: true,
+			commonAncestorContainer: document.body,
+		}) as unknown as Range;
+	Element.prototype.getBoundingClientRect = (): DOMRect => rect;
+});
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest
+		.fn()
+		.mockResolvedValue({ data: { data: { keys: {} } } }),
+}));
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn().mockResolvedValue({
+		data: { data: { values: { stringValues: [], numberValues: [] } } },
+	}),
+}));
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
+	() =>
+		function MockPreviewPane(): ReactElement {
+			return <div data-testid="preview-pane" />;
+		},
+);
+
+jest.mock('../hooks/useDrilldown', () => ({
+	useDrilldown: (): unknown => ({
+		enableDrillDown: false,
+		onPanelClick: jest.fn(),
+		contextMenuProps: {
+			coordinates: null,
+			popoverPosition: null,
+			items: null,
+			onClose: jest.fn(),
+		},
+	}),
+}));
+
+jest.mock('../hooks/usePanelInteractions', () => ({
+	usePanelInteractions: (): unknown => ({
+		onDragSelect: jest.fn(),
+		dashboardPreference: { syncMode: 0 },
+	}),
+}));
+
+jest.mock(
+	'../ViewPanelModal/ViewPanelModalHeader',
+	() =>
+		function MockViewPanelModalHeader(): ReactElement {
+			return <div data-testid="view-panel-header" />;
+		},
+);
+
+function makePanel(
+	name: string,
+	extras: Record<string, unknown>,
+): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								disabled: false,
+								filter: { expression: "service = 'x'" },
+								aggregations: [{ expression: 'count()' }],
+								...extras,
+							},
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	plain: makePanel('Plain panel', {}),
+	grouped: makePanel('Grouped panel', {
+		groupBy: [{ name: 'host.name', fieldDataType: 'string' }],
+		having: { expression: 'count() > 5' },
+	}),
+};
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, closeView } = useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-plain"
+				onClick={(): void => openView('plain', PANELS.plain)}
+			>
+				open plain
+			</button>
+			<button
+				type="button"
+				data-testid="open-grouped"
+				onClick={(): void => openView('grouped', PANELS.grouped)}
+			>
+				open grouped
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<ViewPanelModal
+				open={!!expandedPanelId}
+				panel={expandedPanelId ? PANELS[expandedPanelId] : undefined}
+				panelId={expandedPanelId ?? undefined}
+				onClose={closeView}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+// QueryAddOns picks which rows are visible once on mount and never re-seeds, so unlike
+// the field values these never recover from a context swap that lands after mount.
+describe('View modal, builder add-on rows', () => {
+	it('shows the opened panel add-ons, not the previous panel ones', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-grouped'));
+		expect(screen.getByTestId('group-by-content')).toBeInTheDocument();
+		expect(screen.getByTestId('having-content')).toBeInTheDocument();
+
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-plain'));
+		expect(screen.queryByTestId('group-by-content')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('having-content')).not.toBeInTheDocument();
+	});
+
+	it('shows add-ons the opened panel has after a panel without them', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-plain'));
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-grouped'));
+
+		expect(screen.getByTestId('group-by-content')).toBeInTheDocument();
+		expect(screen.getByTestId('having-content')).toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanel.promql.test.tsx

@@ -0,0 +1,187 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
+	() =>
+		function MockPreviewPane(): ReactElement {
+			return <div data-testid="preview-pane" />;
+		},
+);
+
+jest.mock('../hooks/useDrilldown', () => ({
+	useDrilldown: (): unknown => ({
+		enableDrillDown: false,
+		onPanelClick: jest.fn(),
+		contextMenuProps: {
+			coordinates: null,
+			popoverPosition: null,
+			items: null,
+			onClose: jest.fn(),
+		},
+	}),
+}));
+
+jest.mock('../hooks/usePanelInteractions', () => ({
+	usePanelInteractions: (): unknown => ({
+		onDragSelect: jest.fn(),
+		dashboardPreference: { syncMode: 0 },
+	}),
+}));
+
+jest.mock(
+	'../ViewPanelModal/ViewPanelModalHeader',
+	() =>
+		function MockViewPanelModalHeader(): ReactElement {
+			return <div data-testid="view-panel-header" />;
+		},
+);
+
+function makePromPanel(name: string, promql: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/PromQLQuery',
+							spec: { name: 'A', query: promql, legend: '', disabled: false },
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePromPanel('Panel A', 'up{job="alpha"}'),
+	B: makePromPanel('Panel B', 'up{job="bravo"}'),
+};
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, closeView } = useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-a"
+				onClick={(): void => openView('A', PANELS.A)}
+			>
+				open A
+			</button>
+			<button
+				type="button"
+				data-testid="open-b"
+				onClick={(): void => openView('B', PANELS.B)}
+			>
+				open B
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<ViewPanelModal
+				open={!!expandedPanelId}
+				panel={expandedPanelId ? PANELS[expandedPanelId] : undefined}
+				panelId={expandedPanelId ?? undefined}
+				onClose={closeView}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('View modal, PromQL panels', () => {
+	it('shows the opened panel query, not the previously viewed one', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="alpha"}',
+		);
+
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-b'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="bravo"}',
+		);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanel.test.tsx

@@ -0,0 +1,285 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useViewPanelMode } from '../ViewPanelModal/useViewPanelMode';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+function makePanel(name: string, expression: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								disabled: false,
+								filter: { expression },
+								aggregations: [{ expression: 'count()' }],
+							},
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePanel('Panel A', "service = 'alpha'"),
+	B: makePanel('Panel B', "service = 'bravo'"),
+};
+
+const panelOf = (json: string): string => {
+	if (json.includes('alpha')) {
+		return 'A';
+	}
+	if (json.includes('bravo')) {
+		return 'B';
+	}
+	return 'none';
+};
+
+/** Every render of the open modal, so a single stale frame can't hide. */
+const renders: { current: string; draft: string; filterItems: number }[] = [];
+
+const stagedIds: (string | undefined)[] = [];
+
+function ModalBody({ panelId }: { panelId: string }): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const { draft } = useViewPanelMode({
+		panel: PANELS[panelId],
+		panelId,
+		time: { startMs: 0, endMs: 1000 },
+	});
+	renders.push({
+		current: panelOf(JSON.stringify(currentQuery)),
+		draft: panelOf(JSON.stringify(draft.spec.queries)),
+		filterItems: currentQuery.builder.queryData[0]?.filters?.items.length ?? 0,
+	});
+	return <div data-testid="modal-body" />;
+}
+
+function SearchProbe(): JSX.Element {
+	return <div data-testid="search">{useLocation().search}</div>;
+}
+
+function StagedQueryProbe(): null {
+	const { stagedQuery } = useQueryBuilder();
+	if (stagedIds.at(-1) !== stagedQuery?.id) {
+		stagedIds.push(stagedQuery?.id);
+	}
+	return null;
+}
+
+const drilldownQuery = (base: Query): Query => ({
+	...base,
+	builder: {
+		...base.builder,
+		queryData: base.builder.queryData.map((q) => ({
+			...q,
+			filter: { expression: "service = 'bravo' AND host = 'h1'" },
+		})),
+	},
+});
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, openViewWithQuery, closeView } =
+		useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-a"
+				onClick={(): void => openView('A', PANELS.A)}
+			>
+				open A
+			</button>
+			<button
+				type="button"
+				data-testid="open-b"
+				onClick={(): void => openView('B', PANELS.B)}
+			>
+				open B
+			</button>
+			<button
+				type="button"
+				data-testid="drilldown-b"
+				onClick={(): void =>
+					openViewWithQuery(
+						'B',
+						drilldownQuery(
+							fromPerses(PANELS.B.spec.queries, PANEL_TYPES.TIME_SERIES),
+						),
+						PANEL_TYPES.TIME_SERIES,
+					)
+				}
+			>
+				drilldown B
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<StagedQueryProbe />
+			<SearchProbe />
+			{expandedPanelId && <ModalBody panelId={expandedPanelId} />}
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryBuilderProvider>
+					<Harness />
+				</QueryBuilderProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('useViewPanel', () => {
+	beforeEach(() => {
+		renders.length = 0;
+		stagedIds.length = 0;
+	});
+
+	// The builder context is global and outlives the modal; its fields seed themselves
+	// on mount, so a late swap leaves them on the previously-viewed panel.
+	it('seeds the builder with the opened panel before the modal renders', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('open-b'));
+
+		expect(renders.length).toBeGreaterThan(0);
+		expect(renders.every((r) => r.current === 'B')).toBe(true);
+	});
+
+	it("carries the opened panel's query in the URL", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-b'));
+
+		const search = new URLSearchParams(
+			screen.getByTestId('search').textContent ?? '',
+		);
+		expect(search.get(QueryParams.expandedWidgetId)).toBe('B');
+		const carried = search.get(QueryParams.compositeQuery);
+		expect(panelOf(decodeURIComponent(carried as string))).toBe('B');
+		expect(search.get(QueryParams.graphType)).toBeNull();
+	});
+
+	// The edit session commits any staged query on mount, so a staged query left over
+	// from the previous panel would make this panel's preview fetch the old query.
+	it('never lets the previous panel query reach the new panel draft', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('open-b'));
+
+		expect(renders.every((r) => r.draft === 'B')).toBe(true);
+	});
+
+	// The drilldown URL carries the query's own id, so a staged query with that id makes
+	// the provider skip hydration — losing the normalisation that fills `filters.items`.
+	it('still lets the provider hydrate a drilldown query from the URL', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('drilldown-b'));
+
+		expect(renders.every((r) => r.current === 'B')).toBe(true);
+		expect(renders.at(-1)?.filterItems).toBeGreaterThan(0);
+	});
+
+	// `useSyncTimeOnStagedQueryChange` (dashboard toolbar) re-anchors global time when one
+	// non-null staged id replaces another, refetching every panel behind the modal.
+	it.each([['open-b'], ['drilldown-b']])(
+		'never swaps one staged query for another (%s)',
+		async (trigger) => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderHarness();
+
+			await user.click(screen.getByTestId('open-a'));
+			await user.click(screen.getByTestId('close'));
+			await user.click(screen.getByTestId(trigger));
+
+			const swapsWithoutNull = stagedIds.some(
+				(id, i) => i > 0 && id !== undefined && stagedIds[i - 1] !== undefined,
+			);
+			expect(swapsWithoutNull).toBe(false);
+		},
+	);
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useViewPanel.ts

@@ -1,11 +1,14 @@
 import { useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import logEvent from 'api/common/logEvent';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
+import { getPanelBuilderQuery } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelBuilderQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
@@ -13,8 +16,8 @@ import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
 export interface UseViewPanelApi {
 	/** Panel id currently expanded in the View modal; null when none is open. */
 	expandedPanelId: string | null;
-	/** Open the View modal on the saved panel (clears any leftover in-modal query/kind). */
-	openView: (panelId: string) => void;
+	/** Open the View modal on the saved panel, its query carried in `compositeQuery`. */
+	openView: (panelId: string, panel: DashboardtypesPanelDTO) => void;
 	/**
 	 * Open the View modal pre-seeded with a drilldown query + kind, persisted in the URL so it
 	 * survives refresh (V1 parity); the modal hydrates its draft from these on mount.
@@ -30,30 +33,38 @@ export interface UseViewPanelApi {
 
 /**
  * Drives the panel View modal off the URL (V1 parity): `expandedWidgetId` holds the open
- * panel, and a drilldown additionally seeds `compositeQuery` + `graphType`. URL-backed state
- * is shareable, survives refresh, and the browser back-button closes it.
+ * panel and `compositeQuery` the query it opens on, which a drilldown retargets along with
+ * `graphType`. URL-backed state is shareable, survives refresh, and browser Back closes it.
  */
 export function useViewPanel(): UseViewPanelApi {
 	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const urlQuery = useUrlQuery();
+	const { resetQuery } = useQueryBuilder();
 
 	const expandedPanelId = urlQuery.get(QueryParams.expandedWidgetId);
 
 	const openView = useCallback(
-		(panelId: string): void => {
+		(panelId: string, panel: DashboardtypesPanelDTO): void => {
 			// Copy before mutating: useUrlQuery returns a memoized instance.
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
-			// Drop leftover in-modal query/kind + the editor's handoff so a plain View opens
-			// on the saved panel, not stale state the modal would otherwise hydrate from.
-			next.delete(QueryParams.compositeQuery);
+			// Only a drilldown retargets the panel type.
 			next.delete(QueryParams.graphType);
 			clearViewPanelHandoff();
+			const query = getPanelBuilderQuery(panel);
+			next.set(
+				QueryParams.compositeQuery,
+				encodeURIComponent(JSON.stringify(query)),
+			);
+			// The provider applies the URL in an effect, a tick after the builder's fields have
+			// mounted and read the query they keep. `resetQuery` — not `initQueryBuilderData`:
+			// swapping one staged id for another re-anchors global time and refetches the grid.
+			resetQuery(query);
 			void logEvent(DashboardDetailEvents.PanelViewed, { panelId });
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
-		[pathname, safeNavigate, urlQuery],
+		[pathname, safeNavigate, urlQuery, resetQuery],
 	);
 
 	const openViewWithQuery = useCallback(
@@ -63,6 +74,10 @@ export function useViewPanel(): UseViewPanelApi {
 			next.set(QueryParams.graphType, panelType);
 			// A grid drilldown opens on the saved panel, never a stale editor handoff.
 			clearViewPanelHandoff();
+			// As in `openView`. Clearing the staged query matters twice over here: the URL
+			// below carries this query's own id, and a staged query with a matching id
+			// makes the provider skip the hydration that normalises legacy filter fields.
+			resetQuery(query);
 			// Same encoding the query builder uses (see `useGetCompositeQueryParam`): the URL
 			// value is `encodeURIComponent(JSON.stringify(query))`, decoded once on read.
 			next.set(
@@ -71,7 +86,7 @@ export function useViewPanel(): UseViewPanelApi {
 			);
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
-		[pathname, safeNavigate, urlQuery],
+		[pathname, safeNavigate, urlQuery, resetQuery],
 	);
 
 	const closeView = useCallback((): void => {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -13,6 +13,7 @@ import { TOOLTIP_SCROLL_CONTENT_CLASS } from 'components/TooltipScrollArea/Toolt
 
 import HiddenVariablesTooltip from './components/HiddenVariablesTooltip/HiddenVariablesTooltip';
 import { useVariableSelection } from './hooks/useVariableSelection';
+import { resolveDefaultSelection } from './utils/resolveVariableSelection';
 import VariableSelector from './components/VariableSelector/VariableSelector';
 import styles from './VariablesBar.module.scss';
 
@@ -96,12 +97,10 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 							variable={variable}
 							variables={variables}
 							selections={selection}
-							selection={
-								selection[variable.name] ?? {
-									value: variable.multiSelect ? [] : '',
-									allSelected: false,
-								}
-							}
+							// Until the seed commits a selection, stand in the same default it will
+							// commit, through the one resolver — an empty stand-in reads as "nothing
+							// selected" to a control that snapshots it on mount.
+							selection={selection[variable.name] ?? resolveDefaultSelection(variable)}
 							onChange={(next): void => setSelection(variable.name, next)}
 							onAutoSelect={(next): void => autoSelect(variable.name, next)}
 						/>