fix(frontend): unblock pnpm generate:api after orval v8 upgrade (#11346)

Orval v8's pre-generation validator (@scalar/openapi-parser) treats every
`$ref` key as a JSON Reference. Our spec embeds Perses' `common.JSONRef`
struct, which has a property literally named `$ref`, so validation aborts
with `INVALID_REFERENCE`. Set `input.unsafeDisableValidation: true` to
bypass — codegen itself handles the spec correctly, and the spec is
backend-generated and CI-gated.

Closes SigNoz/engineering-pod#4963

frontend/orval.config.ts

@@ -10,6 +10,13 @@ export default defineConfig({
 	signoz: {
 		input: {
 			target: '../docs/api/openapi.yml',
+			// Perses' `common.JSONRef` (used by `DashboardGridItem.content`) has a
+			// field tagged `json:"$ref"`, so our spec contains a property literally
+			// named `$ref`.
+			// Orval v8's validator (`@scalar/openapi-parser`) treats every `$ref` key
+			// as a JSON Reference and aborts with `INVALID_REFERENCE` when the value isn't a URI string.
+			// Safe to disable: yes, the spec is generated by `cmd/openapi.go` and gated by backend CI, not hand-edited.
+			unsafeDisableValidation: true,
 		},
 		output: {
 			target: './src/api/generated/services',

frontend/src/AppRoutes/routes.ts

@@ -144,18 +144,18 @@ const routes: AppRoutes[] = [
 	// /trace-old serves V3 (URL-only access). Flip the two `component`
 	// values back to release V3.
 	{
-		path: ROUTES.TRACE_DETAIL,
+		path: ROUTES.TRACE_DETAIL_OLD,
 		exact: true,
 		component: TraceDetail,
 		isPrivate: true,
-		key: 'TRACE_DETAIL',
+		key: 'TRACE_DETAIL_OLD',
 	},
 	{
-		path: ROUTES.TRACE_DETAIL_OLD,
+		path: ROUTES.TRACE_DETAIL,
 		exact: true,
 		component: TraceDetailV3,
 		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
+		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 export interface AlertmanagertypesChannelDTO {
 	/**

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/components/ValueGraph/index.tsx

@@ -93,7 +93,6 @@ function ValueGraph({
 		<div
 			ref={containerRef}
 			className="value-graph-container"
-			data-testid="value-graph-container"
 			style={{
 				backgroundColor:
 					threshold.thresholdFormat === 'Background'

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -98,11 +98,7 @@ function YAxisUnitSelector({
 				{categoriesToRender.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
-							<Select.Option
-								key={unit.id}
-								value={unit.id}
-								data-testid={`unit-option-${unit.id}`}
-							>
+							<Select.Option key={unit.id} value={unit.id}>
 								{unit.name}
 							</Select.Option>
 						))}

frontend/src/container/GridTableComponent/index.tsx

@@ -159,8 +159,6 @@ function GridTableComponent({
 				if (threshold && idx !== -1) {
 					return (
 						<div
-							data-testid="threshold-styled-cell"
-							data-threshold-format={threshold.thresholdFormat}
 							style={
 								threshold.thresholdFormat === 'Background'
 									? { backgroundColor: threshold.thresholdColor }

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -231,14 +231,12 @@ function Threshold({
 							type="text"
 							icon={<Pencil size={14} />}
 							className="edit-btn"
-							data-testid="threshold-edit-btn"
 							onClick={editHandler}
 						/>
 						<Button
 							type="text"
 							icon={<Trash2 size={14} />}
 							className="delete-btn"
-							data-testid="threshold-delete-btn"
 							onClick={deleteHandler}
 						/>
 					</div>

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
 import { Input as AntdInput } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';
 
 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
 
@@ -32,11 +33,31 @@ const interestedInOptions: Record<string, string> = {
 	openSourceTooling: 'Prefer open-source tooling',
 };
 
+function seededShuffle<T>(array: T[], seed: string): T[] {
+	const result = [...array];
+
+	let num = 0;
+	for (let i = 0; i < seed.length; i++) {
+		num = Math.imul(num + seed.charCodeAt(i), 2654435761);
+		num = Math.abs(num);
+	}
+
+	for (let i = result.length - 1; i > 0; i--) {
+		num = Math.abs(Math.imul(num, 1664525) + 1013904223);
+		const j = num % (i + 1);
+		[result[i], result[j]] = [result[j], result[i]];
+	}
+
+	return result;
+}
+
 export function AboutSigNozQuestions({
 	signozDetails,
 	setSignozDetails,
 	onNext,
 }: AboutSigNozQuestionsProps): JSX.Element {
+	const { versionData } = useAppContext();
+
 	const [interestInSignoz, setInterestInSignoz] = useState<string[]>(
 		signozDetails?.interestInSignoz || [],
 	);
@@ -48,6 +69,12 @@ export function AboutSigNozQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
+	const shuffledOptionKeys = useMemo(
+		() =>
+			seededShuffle(Object.keys(interestedInOptions), versionData?.version ?? ''),
+		[versionData?.version],
+	);
+
 	useEffect((): void => {
 		if (
 			discoverSignoz !== '' &&
@@ -115,7 +142,7 @@ export function AboutSigNozQuestions({
 					<div className="form-group">
 						<div className="question">What got you interested in SigNoz?</div>
 						<div className="checkbox-grid">
-							{Object.keys(interestedInOptions).map((option: string) => (
+							{shuffledOptionKeys.map((option: string) => (
 								<div key={option} className="checkbox-item">
 									<Checkbox
 										id={`checkbox-${option}`}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { useHistory, useLocation } from 'react-router-dom';
+import { Redirect, useHistory, useLocation } from 'react-router-dom';
 import { Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
@@ -26,7 +26,9 @@ import type { AuthzResources } from '../utils';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ROUTES from 'constants/routes';
 import { capitalize } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { handleApiError, toAPIError } from 'utils/errorUtils';
 
@@ -52,8 +54,9 @@ function RoleDetailsPage(): JSX.Element {
 
 	const queryClient = useQueryClient();
 	const { showErrorModal } = useErrorModal();
+	const { activeLicense, isFetchingActiveLicense } = useAppContext();
 
-	const authzResources = permissionsType.data as unknown as AuthzResources;
+	const authzResources: AuthzResources = permissionsType.data;
 
 	// Extract roleId from URL pathname since useParams doesn't work in nested routing
 	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
@@ -158,6 +161,22 @@ function RoleDetailsPage(): JSX.Element {
 		},
 	});
 
+	if (isFetchingActiveLicense) {
+		return (
+			<div className="role-details-page">
+				<Skeleton
+					active
+					paragraph={{ rows: 8 }}
+					className="role-details-skeleton"
+				/>
+			</div>
+		);
+	}
+
+	if (activeLicense?.status !== LicenseStatus.VALID) {
+		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
+	}
+
 	if (!hasReadPermission && readPerms !== null) {
 		return <PermissionDeniedFullPage permissionName="role:read" />;
 	}

frontend/src/container/RolesSettings/RoleDetails/__tests__/RoleDetailsPage.test.tsx

@@ -5,6 +5,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { Route, Switch } from 'react-router-dom';
 import {
 	fireEvent,
 	render,
@@ -15,6 +16,7 @@ import {
 } from 'tests/test-utils';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
+	invalidLicense,
 	mockUseAuthZDenyAll,
 	mockUseAuthZGrantAll,
 } from 'tests/authz-test-utils';
@@ -230,6 +232,28 @@ describe('RoleDetailsPage', () => {
 		).resolves.toBeInTheDocument();
 	});
 
+	it('redirects to the roles list when license is not valid', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: { activeLicense: invalidLicense },
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
 	describe('permission side panel', () => {
 		beforeEach(() => {
 			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -11,7 +11,9 @@ import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions'
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
+import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';
 
@@ -30,6 +32,9 @@ interface RolesListingTableProps {
 function RolesListingTable({
 	searchQuery,
 }: RolesListingTableProps): JSX.Element {
+	const { activeLicense } = useAppContext();
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+
 	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
 		RoleListPermission,
 	]);
@@ -203,19 +208,27 @@ function RolesListingTable({
 	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
-			className="roles-table-row roles-table-row--clickable"
-			role="button"
-			tabIndex={0}
-			onClick={(): void => {
-				if (role.id) {
-					navigateToRole(role.id, role.name);
-				}
-			}}
-			onKeyDown={(e): void => {
-				if ((e.key === 'Enter' || e.key === ' ') && role.id) {
-					navigateToRole(role.id, role.name);
-				}
-			}}
+			className={`roles-table-row${isValidLicense ? ' roles-table-row--clickable' : ''}`}
+			role={isValidLicense ? 'button' : undefined}
+			tabIndex={isValidLicense ? 0 : undefined}
+			onClick={
+				isValidLicense
+					? (): void => {
+							if (role.id) {
+								navigateToRole(role.id, role.name);
+							}
+						}
+					: undefined
+			}
+			onKeyDown={
+				isValidLicense
+					? (e): void => {
+							if ((e.key === 'Enter' || e.key === ' ') && role.id) {
+								navigateToRole(role.id, role.name);
+							}
+						}
+					: undefined
+			}
 		>
 			<div className="roles-table-cell roles-table-cell--name">
 				{role.name ?? '—'}

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -4,6 +4,8 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAppContext } from 'providers/App/App';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
 
 import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -13,6 +15,8 @@ import './RolesSettings.styles.scss';
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const { activeLicense } = useAppContext();
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
 
 	return (
 		<div className="roles-settings" data-testid="roles-settings">
@@ -38,17 +42,19 @@ function RolesSettings(): JSX.Element {
 						value={searchQuery}
 						onChange={(e): void => setSearchQuery(e.target.value)}
 					/>
-					<AuthZTooltip checks={[RoleCreatePermission]}>
-						<Button
-							variant="solid"
-							color="primary"
-							className="role-settings-toolbar-button"
-							onClick={(): void => setIsCreateModalOpen(true)}
-						>
-							<Plus size={14} />
-							Custom role
-						</Button>
-					</AuthZTooltip>
+					{isValidLicense && (
+						<AuthZTooltip checks={[RoleCreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								className="role-settings-toolbar-button"
+								onClick={(): void => setIsCreateModalOpen(true)}
+							>
+								<Plus size={14} />
+								Custom role
+							</Button>
+						</AuthZTooltip>
+					)}
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />
 			</div>

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

@@ -6,7 +6,7 @@ import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { fireEvent, render, screen } from 'tests/test-utils';
 import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
 
 import RolesSettings from '../RolesSettings';
 
@@ -176,6 +176,26 @@ describe('RolesSettings', () => {
 		}
 	});
 
+	it('hides the create button and disables row clicks when license is not valid', async () => {
+		render(<RolesSettings />, undefined, {
+			appContextOverrides: { activeLicense: invalidLicense },
+		});
+
+		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
+
+		// Create button must be absent
+		expect(
+			screen.queryByRole('button', { name: /custom role/i }),
+		).not.toBeInTheDocument();
+
+		// Rows must not carry the clickable class or button role
+		const rows = document.querySelectorAll('.roles-table-row');
+		rows.forEach((row) => {
+			expect(row).not.toHaveClass('roles-table-row--clickable');
+			expect(row.getAttribute('role')).not.toBe('button');
+		});
+	});
+
 	it('handles invalid dates gracefully by showing fallback', async () => {
 		const invalidRole = {
 			id: 'edge-0009',

frontend/src/container/RolesSettings/__tests__/utils.test.ts

@@ -1,5 +1,4 @@
 import type {
-	CoretypesResourceRefDTO,
 	CoretypesObjectGroupDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -8,11 +7,7 @@ import type {
 	PermissionConfig,
 	ResourceDefinition,
 } from '../PermissionSidePanel/PermissionSidePanel.types';
-
-type AuthzResources = {
-	resources: CoretypesResourceRefDTO[];
-	relations: Record<string, string[]>;
-};
+import type { AuthzResources } from '../utils';
 import { PermissionScope } from '../PermissionSidePanel/PermissionSidePanel.types';
 import {
 	buildConfig,
@@ -41,12 +36,14 @@ jest.mock('../RoleDetails/constants', () => {
 
 const dashboardResource: AuthzResources['resources'][number] = {
 	kind: 'dashboard',
-	type: 'metaresource' as CoretypesTypeDTO,
+	type: 'metaresource',
+	allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
 };
 
 const alertResource: AuthzResources['resources'][number] = {
 	kind: 'alert',
-	type: 'metaresource' as CoretypesTypeDTO,
+	type: 'metaresource',
+	allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
 };
 
 const baseAuthzResources: AuthzResources = {
@@ -57,6 +54,16 @@ const baseAuthzResources: AuthzResources = {
 	},
 };
 
+// API payload resource refs — only kind+type, no allowedVerbs (matches CoretypesResourceRefDTO shape)
+const dashboardResourceRef = {
+	kind: 'dashboard',
+	type: 'metaresource' as CoretypesTypeDTO,
+};
+const alertResourceRef = {
+	kind: 'alert',
+	type: 'metaresource' as CoretypesTypeDTO,
+};
+
 const resourceDefs: ResourceDefinition[] = [
 	{
 		id: 'metaresource:dashboard',
@@ -107,7 +114,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.deletions).toBeNull();
 	});
@@ -142,7 +149,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.additions).toBeNull();
 	});
@@ -207,10 +214,10 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
 		]);
 	});
 
@@ -241,7 +248,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.additions).toBeNull();
 	});
@@ -264,7 +271,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.additions).toBeNull();
 	});
@@ -287,7 +294,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.deletions).toBeNull();
 	});
@@ -313,7 +320,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
 		]);
 		expect(result.additions).toBeNull();
 	});
@@ -339,7 +346,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_A] },
+			{ resource: dashboardResourceRef, selectors: [ID_A] },
 		]);
 		expect(result.deletions).toBeNull();
 	});
@@ -385,7 +392,7 @@ describe('buildPatchPayload', () => {
 		});
 
 		expect(result.additions).toStrictEqual([
-			{ resource: alertResource, selectors: [ID_B] },
+			{ resource: alertResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.deletions).toBeNull();
 	});
@@ -394,7 +401,7 @@ describe('buildPatchPayload', () => {
 describe('objectsToPermissionConfig', () => {
 	it('maps a wildcard selector to ALL scope', () => {
 		const objects: CoretypesObjectGroupDTO[] = [
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		];
 
 		const result = objectsToPermissionConfig(objects, resourceDefs);
@@ -407,7 +414,7 @@ describe('objectsToPermissionConfig', () => {
 
 	it('maps specific selectors to ONLY_SELECTED scope with the IDs', () => {
 		const objects: CoretypesObjectGroupDTO[] = [
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
 		];
 
 		const result = objectsToPermissionConfig(objects, resourceDefs);
@@ -566,4 +573,41 @@ describe('deriveResourcesForRelation', () => {
 			deriveResourcesForRelation(baseAuthzResources, 'nonexistent'),
 		).toHaveLength(0);
 	});
+
+	describe('allowedVerbs filtering', () => {
+		it('excludes resources whose allowedVerbs does not include the relation', () => {
+			const authz: AuthzResources = {
+				resources: [
+					{
+						kind: 'dashboard',
+						type: 'metaresource',
+						allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
+					},
+					{
+						kind: 'alert',
+						type: 'metaresource',
+						allowedVerbs: ['create', 'read', 'update', 'delete', 'list', 'attach'],
+					},
+				],
+				relations: { attach: ['metaresource'] },
+			};
+
+			const result = deriveResourcesForRelation(authz, 'attach');
+
+			expect(result).toHaveLength(1);
+			expect(result[0].id).toBe('metaresource:alert');
+		});
+
+		it('requires both type-relation match and allowedVerbs — neither condition alone is sufficient', () => {
+			const authz: AuthzResources = {
+				resources: [
+					{ kind: 'dashboard', type: 'metaresource', allowedVerbs: ['read'] },
+					{ kind: 'role', type: 'role', allowedVerbs: ['create'] },
+				],
+				relations: { create: ['metaresource'] },
+			};
+
+			expect(deriveResourcesForRelation(authz, 'create')).toHaveLength(0);
+		});
+	});
 });

frontend/src/container/RolesSettings/utils.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import type {
-	CoretypesResourceRefDTO,
 	CoretypesObjectGroupDTO,
+	CoretypesResourceRefDTO,
+	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { capitalize } from 'lodash-es';
@@ -21,7 +22,11 @@ import {
 } from './RoleDetails/constants';
 
 export type AuthzResources = {
-	resources: ReadonlyArray<CoretypesResourceRefDTO>;
+	resources: ReadonlyArray<{
+		kind: string;
+		type: string;
+		allowedVerbs: readonly string[];
+	}>;
 	relations: Readonly<Record<string, ReadonlyArray<string>>>;
 };
 
@@ -69,7 +74,9 @@ export function deriveResourcesForRelation(
 	}
 	const supportedTypes = authzResources.relations[relation] ?? [];
 	return authzResources.resources
-		.filter((r) => supportedTypes.includes(r.type))
+		.filter(
+			(r) => supportedTypes.includes(r.type) && r.allowedVerbs.includes(relation),
+		)
 		.map((r) => ({
 			id: `${r.type}:${r.kind}`,
 			kind: r.kind,
@@ -141,7 +148,7 @@ export function buildPatchPayload({
 		}
 		const resourceDef: CoretypesResourceRefDTO = {
 			kind: found.kind,
-			type: found.type,
+			type: found.type as CoretypesTypeDTO,
 		};
 
 		const initialScope = initial?.scope ?? PermissionScope.NONE;

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -189,7 +189,7 @@ describe('Tooltip utils', () => {
 			];
 		}
 
-		it('builds tooltip content in series-index order with isActive flag set correctly', () => {
+		it('builds tooltip content sorted by value descending with isActive flag set correctly', () => {
 			const data: AlignedData = [[0], [10], [20], [30]];
 			const series = createSeriesConfig();
 			const dataIndexes = [null, 0, 0, 0];
@@ -206,21 +206,21 @@ describe('Tooltip utils', () => {
 			});
 
 			expect(result).toHaveLength(2);
-			// Series are returned in series-index order (A=index 1 before B=index 2)
+			// Sorted by value descending: B (20) before A (10)
 			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'A',
-				value: 10,
-				tooltipValue: 'formatted-10',
-				color: '#ff0000',
-				isActive: false,
-			});
-			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
 				label: 'B',
 				value: 20,
 				tooltipValue: 'formatted-20',
 				color: 'color-2',
 				isActive: true,
 			});
+			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'A',
+				value: 10,
+				tooltipValue: 'formatted-10',
+				color: '#ff0000',
+				isActive: false,
+			});
 		});
 
 		it('skips series with null data index or non-finite values', () => {
@@ -274,7 +274,7 @@ describe('Tooltip utils', () => {
 			expect(result[1].value).toBe(30);
 		});
 
-		it('returns items in series-index order', () => {
+		it('returns items sorted by value descending', () => {
 			// Series values in non-sorted order: 3, 1, 4, 2
 			const data: AlignedData = [[0], [3], [1], [4], [2]];
 			const series: Series[] = [
@@ -297,7 +297,7 @@ describe('Tooltip utils', () => {
 				decimalPrecision,
 			});
 
-			expect(result.map((item) => item.value)).toStrictEqual([3, 1, 4, 2]);
+			expect(result.map((item) => item.value)).toStrictEqual([4, 3, 2, 1]);
 		});
 	});
 });

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -142,5 +142,7 @@ export function buildTooltipContent({
 		}
 	}
 
+	items.sort((a, b) => b.value - a.value);
+
 	return items;
 }

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -473,6 +473,7 @@ export const SpanDuration = memo(function SpanDuration({
 const columnDefHelper = createColumnHelper<SpanV3>();
 
 const ROW_HEIGHT = 28;
+const WATERFALL_BOTTOM_PADDING = 24;
 const DEFAULT_SIDEBAR_WIDTH = 450;
 const MIN_SIDEBAR_WIDTH = 240;
 const MAX_SIDEBAR_WIDTH = 900;
@@ -740,53 +741,69 @@ function Success(props: ISuccessProps): JSX.Element {
 		);
 	}, [spans, sidebarWidth]);
 
-	// Scroll to the interested span only when it isn't already on screen.
-	// Covers every entry point uniformly: deep-link, flamegraph click,
-	// filter prev/next, browser back/forward all scroll only if needed;
-	// waterfall row clicks and chevron expand/collapse don't yank the viewport
-	// because the affected row is by definition already visible.
+	// Scroll a span to viewport center if it isn't already visible. Shared by
+	// the two effects below — one keyed on interestedSpanId (chevron, boundary
+	// pagination, deep-link to unloaded), the other on selectedSpan (in-window
+	// URL navigation that doesn't mutate interestedSpanId).
+	const scrollSpanIntoView = useCallback(
+		(span: SpanV3, spansList: SpanV3[]): void => {
+			if (!virtualizerRef.current) {
+				return;
+			}
+			const idx = spansList.findIndex((s) => s.span_id === span.span_id);
+			if (idx === -1) {
+				return;
+			}
+			const scrollEl = scrollContainerRef.current;
+			const scrollTop = scrollEl?.scrollTop ?? 0;
+			const viewportHeight = scrollEl?.clientHeight ?? 0;
+			const viewportStartIdx = Math.floor(scrollTop / ROW_HEIGHT);
+			const viewportEndIdx =
+				Math.ceil((scrollTop + viewportHeight) / ROW_HEIGHT) - 1;
+			const isOnScreen =
+				viewportHeight > 0 && idx >= viewportStartIdx && idx <= viewportEndIdx;
+			if (isOnScreen) {
+				return;
+			}
+			setTimeout(() => {
+				virtualizerRef.current?.scrollToIndex(idx, {
+					align: 'center',
+					behavior: 'auto',
+				});
+				const sidebarScrollEl = scrollContainerRef.current?.querySelector(
+					'.resizable-box__content',
+				);
+				if (sidebarScrollEl) {
+					const targetScrollLeft = Math.max(0, span.level * CONNECTOR_WIDTH - 40);
+					(sidebarScrollEl as HTMLElement).scrollLeft = targetScrollLeft;
+				}
+			}, 100);
+		},
+		[],
+	);
+
 	useEffect(() => {
-		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
+		if (interestedSpanId.spanId !== '') {
 			const idx = spans.findIndex(
 				(span) => span.span_id === interestedSpanId.spanId,
 			);
 			if (idx !== -1) {
-				const visible = virtualizerRef.current.getVirtualItems();
-				const isOnScreen =
-					visible.length > 0 &&
-					idx >= visible[0].index &&
-					idx <= visible[visible.length - 1].index;
-
-				if (!isOnScreen) {
-					setTimeout(() => {
-						virtualizerRef.current?.scrollToIndex(idx, {
-							align: 'center',
-							behavior: 'auto',
-						});
-
-						// Auto-scroll sidebar horizontally to show the span name
-						const span = spans[idx];
-						const sidebarScrollEl = scrollContainerRef.current?.querySelector(
-							'.resizable-box__content',
-						);
-						if (sidebarScrollEl) {
-							const targetScrollLeft = Math.max(0, span.level * CONNECTOR_WIDTH - 40);
-							sidebarScrollEl.scrollLeft = targetScrollLeft;
-						}
-					}, 400);
-				}
-
+				scrollSpanIntoView(spans[idx], spans);
 				setSelectedSpan(spans[idx]);
 			}
 		} else {
-			setSelectedSpan((prev) => {
-				if (!prev) {
-					return spans[0];
-				}
-				return prev;
-			});
+			setSelectedSpan((prev) => prev ?? spans[0]);
 		}
-	}, [interestedSpanId, setSelectedSpan, spans]);
+	}, [interestedSpanId, setSelectedSpan, spans, scrollSpanIntoView]);
+
+	// Covers URL-driven navigation to an already-loaded span (flamegraph /
+	// filter / browser back) that the interestedSpanId-keyed effect doesn't see.
+	useEffect(() => {
+		if (selectedSpan) {
+			scrollSpanIntoView(selectedSpan, spans);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedSpan, scrollSpanIntoView]);
 
 	const virtualItems = virtualizer.getVirtualItems();
 	const leftRows = leftTable.getRowModel().rows;
@@ -846,7 +863,7 @@ function Success(props: ISuccessProps): JSX.Element {
 				<div
 					className={styles.splitBody}
 					style={{
-						minHeight: virtualizer.getTotalSize(),
+						minHeight: virtualizer.getTotalSize() + WATERFALL_BOTTOM_PADDING,
 						height: '100%',
 					}}
 				>

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -74,17 +74,21 @@ function TraceDetailsV3(): JSX.Element {
 		onClose: handleSpanDetailsClose,
 	});
 
+	const allSpansRef = useRef<SpanV3[]>([]);
+
+	// Refetch only when the URL target isn't already loaded. Keeps row clicks
+	// and other in-window URL navigation from triggering a backend window slide.
 	useEffect(() => {
 		const spanId = urlQuery.get('spanId') || '';
-		// Only update interestedSpanId when a new span is selected,
-		// not when it's cleared (panel close) — avoids unnecessary API refetch
 		if (!spanId) {
 			return;
 		}
-		setInterestedSpanId({
-			spanId,
-			isUncollapsed: true,
-		});
+		const idx = allSpansRef.current.findIndex((s) => s.span_id === spanId);
+		if (idx !== -1) {
+			setSelectedSpan(allSpansRef.current[idx]);
+			return;
+		}
+		setInterestedSpanId({ spanId, isUncollapsed: true });
 	}, [urlQuery]);
 
 	// Hardcoded for now — fetch aggregations for all 3 candidate color-by fields
@@ -145,6 +149,10 @@ function TraceDetailsV3(): JSX.Element {
 		};
 	}
 
+	useEffect(() => {
+		allSpansRef.current = allSpans;
+	}, [allSpans]);
+
 	// Frontend mode: expand all parents by default when full data arrives
 	useEffect(() => {
 		if (isFullDataLoaded && allSpans.length > 0) {

frontend/src/tests/authz-test-utils.ts

@@ -11,6 +11,13 @@ import type {
 } from 'hooks/useAuthZ/types';
 import { rest } from 'msw';
 import type { RestHandler } from 'msw';
+import {
+	LicenseEvent,
+	LicensePlatform,
+	type LicenseResModel,
+	LicenseState,
+	LicenseStatus,
+} from 'types/api/licensesV3/getActive';
 
 export const AUTHZ_CHECK_URL = `${ENVIRONMENT.baseURL || ''}/api/v1/authz/check`;
 
@@ -97,6 +104,40 @@ export function setupAuthzAllow(
 	});
 }
 
+export function buildLicense(
+	overrides?: Partial<LicenseResModel>,
+): LicenseResModel {
+	return {
+		key: 'test-key',
+		status: LicenseStatus.VALID,
+		state: LicenseState.ACTIVATED,
+		platform: LicensePlatform.CLOUD,
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		plan: {
+			created_at: '0',
+			description: '',
+			is_active: true,
+			name: '',
+			updated_at: '0',
+		},
+		plan_id: '0',
+		free_until: '0',
+		updated_at: '0',
+		valid_from: 0,
+		valid_until: 0,
+		created_at: '0',
+		...overrides,
+	};
+}
+
+export const invalidLicense = buildLicense({ status: LicenseStatus.INVALID });
+
 export function mockUseAuthZGrantAll(
 	permissions: BrandedPermission[],
 	_options?: UseAuthZOptions,

frontend/src/utils/permission/index.ts

@@ -48,7 +48,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	HOME: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALERTS_NEW: ['ADMIN', 'EDITOR'],
 	ORG_SETTINGS: ['ADMIN'],
-	MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SERVICE_MAP: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALL_CHANNELS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	INGESTION_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -72,7 +72,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR', 'ANONYMOUS'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_METRICS: ['ADMIN', 'EDITOR', 'VIEWER'],
-	SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SIGN_UP: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACES_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -98,10 +98,10 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	GET_STARTED_AZURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ROLES_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ROLE_DETAILS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ROLES_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
+	ROLE_DETAILS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	MEMBERS_SETTINGS: ['ADMIN'],
-	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],

pkg/cache/memorycache/provider.go

@@ -64,7 +64,8 @@ func New(ctx context.Context, settings factory.ProviderSettings, config cache.Co
 		o.ObserveInt64(telemetry.setsRejected, int64(metrics.SetsRejected()), metric.WithAttributes(attributes...))
 		o.ObserveInt64(telemetry.getsDropped, int64(metrics.GetsDropped()), metric.WithAttributes(attributes...))
 		o.ObserveInt64(telemetry.getsKept, int64(metrics.GetsKept()), metric.WithAttributes(attributes...))
-		o.ObserveInt64(telemetry.totalCost, int64(cc.MaxCost()), metric.WithAttributes(attributes...))
+		o.ObserveInt64(telemetry.costUsed, int64(metrics.CostAdded())-int64(metrics.CostEvicted()), metric.WithAttributes(attributes...))
+		o.ObserveInt64(telemetry.totalCost, cc.MaxCost(), metric.WithAttributes(attributes...))
 		return nil
 	},
 		telemetry.cacheRatio,
@@ -79,6 +80,7 @@ func New(ctx context.Context, settings factory.ProviderSettings, config cache.Co
 		telemetry.setsRejected,
 		telemetry.getsDropped,
 		telemetry.getsKept,
+		telemetry.costUsed,
 		telemetry.totalCost,
 	)
 	if err != nil {
@@ -112,11 +114,13 @@ func (provider *provider) Set(ctx context.Context, orgID valuer.UUID, cacheKey s
 	}
 
 	if cloneable, ok := data.(cachetypes.Cloneable); ok {
+		cost := max(cloneable.Cost(), 1)
+		// Clamp to a minimum of 1: ristretto treats cost 0 specially and we
+		// never want zero-size entries to bypass admission accounting.
 		span.SetAttributes(attribute.Bool("memory.cloneable", true))
-		span.SetAttributes(attribute.Int64("memory.cost", 1))
+		span.SetAttributes(attribute.Int64("memory.cost", cost))
 		toCache := cloneable.Clone()
-		// In case of contention we are choosing to evict the cloneable entries first hence cost is set to 1
-		if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, 1, ttl); !ok {
+		if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, cost, ttl); !ok {
 			return errors.New(errors.TypeInternal, errors.CodeInternal, "error writing to cache")
 		}
 
@@ -125,15 +129,15 @@ func (provider *provider) Set(ctx context.Context, orgID valuer.UUID, cacheKey s
 	}
 
 	toCache, err := provider.marshalBinary(ctx, data)
-	cost := int64(len(toCache))
 	if err != nil {
 		return err
 	}
+	cost := max(int64(len(toCache)), 1)
 
 	span.SetAttributes(attribute.Bool("memory.cloneable", false))
 	span.SetAttributes(attribute.Int64("memory.cost", cost))
 
-	if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, 1, ttl); !ok {
+	if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, cost, ttl); !ok {
 		return errors.New(errors.TypeInternal, errors.CodeInternal, "error writing to cache")
 	}
 

pkg/cache/memorycache/provider_test.go

@@ -31,6 +31,10 @@ func (cloneable *CloneableA) Clone() cachetypes.Cacheable {
 	}
 }
 
+func (cloneable *CloneableA) Cost() int64 {
+	return int64(len(cloneable.Key)) + 16
+}
+
 func (cloneable *CloneableA) MarshalBinary() ([]byte, error) {
 	return json.Marshal(cloneable)
 }
@@ -165,6 +169,45 @@ func TestSetGetWithDifferentTypes(t *testing.T) {
 	assert.Error(t, err)
 }
 
+// LargeCloneable reports a large byte cost so we can test ristretto eviction
+// without allocating the full payload in memory.
+type LargeCloneable struct {
+	Key      string
+	CostHint int64
+}
+
+func (c *LargeCloneable) Clone() cachetypes.Cacheable {
+	return &LargeCloneable{Key: c.Key, CostHint: c.CostHint}
+}
+
+func (c *LargeCloneable) Cost() int64 { return c.CostHint }
+
+func (c *LargeCloneable) MarshalBinary() ([]byte, error) { return json.Marshal(c) }
+
+func (c *LargeCloneable) UnmarshalBinary(data []byte) error { return json.Unmarshal(data, c) }
+
+func TestCloneableExceedingMaxCostIsRejected(t *testing.T) {
+	const maxCost int64 = 1 << 20  // 1 MiB
+	const oversize int64 = 2 << 20 // 2 MiB, larger than the entire cache
+
+	c, err := New(context.Background(), factorytest.NewSettings(), cache.Config{Provider: "memory", Memory: cache.Memory{
+		NumCounters: 10 * 1000,
+		MaxCost:     maxCost,
+	}})
+	require.NoError(t, err)
+
+	orgID := valuer.GenerateUUID()
+	const key = "oversize-key"
+	assert.NoError(t, c.Set(context.Background(), orgID, key,
+		&LargeCloneable{Key: key, CostHint: oversize}, time.Minute))
+
+	// Ristretto rejects any entry with cost > MaxCost (policy.go:100). Probe
+	// ristretto directly to confirm no admission, instead of relying on metrics.
+	cc := c.(*provider).cc
+	_, ok := cc.Get(strings.Join([]string{orgID.StringValue(), key}, "::"))
+	assert.False(t, ok, "entry with Cost() > MaxCost must be rejected")
+}
+
 func TestCloneableConcurrentSetGet(t *testing.T) {
 	cache, err := New(context.Background(), factorytest.NewSettings(), cache.Config{Provider: "memory", Memory: cache.Memory{
 		NumCounters: 10 * 1000,

pkg/cache/memorycache/telemetry.go

@@ -7,17 +7,18 @@ import (
 
 type telemetry struct {
 	cacheRatio   metric.Float64ObservableGauge
-	cacheHits    metric.Int64ObservableGauge
-	cacheMisses  metric.Int64ObservableGauge
-	costAdded    metric.Int64ObservableGauge
-	costEvicted  metric.Int64ObservableGauge
-	keysAdded    metric.Int64ObservableGauge
-	keysEvicted  metric.Int64ObservableGauge
-	keysUpdated  metric.Int64ObservableGauge
-	setsDropped  metric.Int64ObservableGauge
-	setsRejected metric.Int64ObservableGauge
-	getsDropped  metric.Int64ObservableGauge
-	getsKept     metric.Int64ObservableGauge
+	cacheHits    metric.Int64ObservableCounter
+	cacheMisses  metric.Int64ObservableCounter
+	costAdded    metric.Int64ObservableCounter
+	costEvicted  metric.Int64ObservableCounter
+	keysAdded    metric.Int64ObservableCounter
+	keysEvicted  metric.Int64ObservableCounter
+	keysUpdated  metric.Int64ObservableCounter
+	setsDropped  metric.Int64ObservableCounter
+	setsRejected metric.Int64ObservableCounter
+	getsDropped  metric.Int64ObservableCounter
+	getsKept     metric.Int64ObservableCounter
+	costUsed     metric.Int64ObservableGauge
 	totalCost    metric.Int64ObservableGauge
 }
 
@@ -28,62 +29,67 @@ func newMetrics(meter metric.Meter) (*telemetry, error) {
 		errs = errors.Join(errs, err)
 	}
 
-	cacheHits, err := meter.Int64ObservableGauge("signoz.cache.hits", metric.WithDescription("Hits is the number of Get calls where a value was found for the corresponding key."))
+	cacheHits, err := meter.Int64ObservableCounter("signoz.cache.hits", metric.WithDescription("Hits is the number of Get calls where a value was found for the corresponding key."))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	cacheMisses, err := meter.Int64ObservableGauge("signoz.cache.misses", metric.WithDescription("Misses is the number of Get calls where a value was not found for the corresponding key"))
+	cacheMisses, err := meter.Int64ObservableCounter("signoz.cache.misses", metric.WithDescription("Misses is the number of Get calls where a value was not found for the corresponding key"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	costAdded, err := meter.Int64ObservableGauge("signoz.cache.cost.added", metric.WithDescription("CostAdded is the sum of costs that have been added (successful Set calls)"))
+	costAdded, err := meter.Int64ObservableCounter("signoz.cache.cost.added", metric.WithDescription("CostAdded is the sum of costs that have been added (successful Set calls)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	costEvicted, err := meter.Int64ObservableGauge("signoz.cache.cost.evicted", metric.WithDescription("CostEvicted is the sum of all costs that have been evicted"))
+	costEvicted, err := meter.Int64ObservableCounter("signoz.cache.cost.evicted", metric.WithDescription("CostEvicted is the sum of all costs that have been evicted"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	keysAdded, err := meter.Int64ObservableGauge("signoz.cache.keys.added", metric.WithDescription("KeysAdded is the total number of Set calls where a new key-value item was added"))
+	keysAdded, err := meter.Int64ObservableCounter("signoz.cache.keys.added", metric.WithDescription("KeysAdded is the total number of Set calls where a new key-value item was added"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	keysEvicted, err := meter.Int64ObservableGauge("signoz.cache.keys.evicted", metric.WithDescription("KeysEvicted is the total number of keys evicted"))
+	keysEvicted, err := meter.Int64ObservableCounter("signoz.cache.keys.evicted", metric.WithDescription("KeysEvicted is the total number of keys evicted"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	keysUpdated, err := meter.Int64ObservableGauge("signoz.cache.keys.updated", metric.WithDescription("KeysUpdated is the total number of Set calls where the value was updated"))
+	keysUpdated, err := meter.Int64ObservableCounter("signoz.cache.keys.updated", metric.WithDescription("KeysUpdated is the total number of Set calls where the value was updated"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	setsDropped, err := meter.Int64ObservableGauge("signoz.cache.sets.dropped", metric.WithDescription("SetsDropped is the number of Set calls that don't make it into internal buffers (due to contention or some other reason)"))
+	setsDropped, err := meter.Int64ObservableCounter("signoz.cache.sets.dropped", metric.WithDescription("SetsDropped is the number of Set calls that don't make it into internal buffers (due to contention or some other reason)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	setsRejected, err := meter.Int64ObservableGauge("signoz.cache.sets.rejected", metric.WithDescription("SetsRejected is the number of Set calls rejected by the policy (TinyLFU)"))
+	setsRejected, err := meter.Int64ObservableCounter("signoz.cache.sets.rejected", metric.WithDescription("SetsRejected is the number of Set calls rejected by the policy (TinyLFU)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	getsDropped, err := meter.Int64ObservableGauge("signoz.cache.gets.dropped", metric.WithDescription("GetsDropped is the number of Get calls that don't make it into internal buffers (due to contention or some other reason)"))
+	getsDropped, err := meter.Int64ObservableCounter("signoz.cache.gets.dropped", metric.WithDescription("GetsDropped is the number of Get calls that don't make it into internal buffers (due to contention or some other reason)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	getsKept, err := meter.Int64ObservableGauge("signoz.cache.gets.kept", metric.WithDescription("GetsKept is the number of Get calls that make it into internal buffers"))
+	getsKept, err := meter.Int64ObservableCounter("signoz.cache.gets.kept", metric.WithDescription("GetsKept is the number of Get calls that make it into internal buffers"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
 
-	totalCost, err := meter.Int64ObservableGauge("signoz.cache.total.cost", metric.WithDescription("TotalCost is the available cost configured for the cache"))
+	costUsed, err := meter.Int64ObservableGauge("signoz.cache.cost.used", metric.WithDescription("CostUsed is the current retained cost in the cache (CostAdded - CostEvicted)."))
+	if err != nil {
+		errs = errors.Join(errs, err)
+	}
+
+	totalCost, err := meter.Int64ObservableGauge("signoz.cache.total.cost", metric.WithDescription("TotalCost is the configured MaxCost ceiling for the cache."))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
@@ -105,6 +111,7 @@ func newMetrics(meter metric.Meter) (*telemetry, error) {
 		setsRejected: setsRejected,
 		getsDropped:  getsDropped,
 		getsKept:     getsKept,
+		costUsed:     costUsed,
 		totalCost:    totalCost,
 	}, nil
 }

pkg/cache/rediscache/provider_test.go

@@ -29,6 +29,10 @@ func (cacheable *CacheableA) Clone() cachetypes.Cacheable {
 	}
 }
 
+func (cacheable *CacheableA) Cost() int64 {
+	return int64(len(cacheable.Key)) + 16
+}
+
 func (cacheable *CacheableA) MarshalBinary() ([]byte, error) {
 	return json.Marshal(cacheable)
 }

pkg/querier/postprocess.go

@@ -335,10 +335,8 @@ func (q *querier) applyFormulas(ctx context.Context, results map[string]*qbtypes
 			}
 		case qbtypes.RequestTypeScalar:
 			result := q.processScalarFormula(ctx, results, formula, req)
-			if result != nil {
-				result = q.applySeriesLimit(result, formula.Limit, formula.Order)
-				results[name] = result
-			}
+			// For scalar results, apply limit by processScalarFormula itself since it needs to be applied before converting back to scalar format
+			results[name] = result
 		}
 	}
 
@@ -526,6 +524,9 @@ func (q *querier) processScalarFormula(
 		return nil
 	}
 
+	// Apply ordering (and limit) before converting to scalar format.
+	formulaSeries = qbtypes.ApplySeriesLimit(formulaSeries, formula.Order, formula.Limit)
+
 	// Convert back to scalar format
 	scalarResult := &qbtypes.ScalarData{
 		QueryName: formula.Name,

pkg/querier/postprocess_test.go

@@ -1,15 +1,155 @@
 package querier
 
 import (
+	"context"
 	"testing"
 
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
 )
 
+// scalarInputResult builds a ScalarData result with one group column ("service")
+// and one aggregation column ("__result"), holding the provided (service, value) rows.
+func scalarInputResult(queryName string, rows []struct {
+	service string
+	value   float64
+}) *qbtypes.Result {
+	serviceKey := telemetrytypes.TelemetryFieldKey{
+		Name:          "service",
+		FieldDataType: telemetrytypes.FieldDataTypeString,
+	}
+	resultKey := telemetrytypes.TelemetryFieldKey{
+		Name:          "__result",
+		FieldDataType: telemetrytypes.FieldDataTypeFloat64,
+	}
+
+	data := make([][]any, 0, len(rows))
+	for _, r := range rows {
+		data = append(data, []any{r.service, r.value})
+	}
+
+	return &qbtypes.Result{
+		Value: &qbtypes.ScalarData{
+			QueryName: queryName,
+			Columns: []*qbtypes.ColumnDescriptor{
+				{
+					TelemetryFieldKey: serviceKey,
+					QueryName:         queryName,
+					Type:              qbtypes.ColumnTypeGroup,
+				},
+				{
+					TelemetryFieldKey: resultKey,
+					QueryName:         queryName,
+					AggregationIndex:  0,
+					Type:              qbtypes.ColumnTypeAggregation,
+				},
+			},
+			Data: data,
+		},
+	}
+}
+
+func TestProcessScalarFormula_AppliesOrderAndLimit(t *testing.T) {
+	q := &querier{
+		logger: instrumentationtest.New().Logger(),
+	}
+
+	// Mimic what a dashboard emits: orderBy keyed by the formula name ("F1"),
+	// which applyFormulas rewrites to __result before sorting.
+	orderByFormula := func(name string, dir qbtypes.OrderDirection) []qbtypes.OrderBy {
+		return []qbtypes.OrderBy{
+			{
+				Key: qbtypes.OrderByKey{
+					TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+						Name: name,
+					},
+				},
+				Direction: dir,
+			},
+		}
+	}
+
+	// A+B per service: a=101, b=11, c=2
+	makeInputs := func() map[string]*qbtypes.Result {
+		return map[string]*qbtypes.Result{
+			"A": scalarInputResult("A", []struct {
+				service string
+				value   float64
+			}{
+				{"a", 100},
+				{"b", 10},
+				{"c", 1},
+			}),
+			"B": scalarInputResult("B", []struct {
+				service string
+				value   float64
+			}{
+				{"a", 1},
+				{"b", 0},
+				{"c", 1},
+			}),
+		}
+	}
+
+	makeReq := func(formula qbtypes.QueryBuilderFormula) *qbtypes.QueryRangeRequest {
+		return &qbtypes.QueryRangeRequest{
+			RequestType: qbtypes.RequestTypeScalar,
+			CompositeQuery: qbtypes.CompositeQuery{
+				Queries: []qbtypes.QueryEnvelope{
+					{Type: qbtypes.QueryTypeBuilder, Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{Name: "A"}},
+					{Type: qbtypes.QueryTypeBuilder, Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{Name: "B"}},
+					{Type: qbtypes.QueryTypeFormula, Spec: formula},
+				},
+			},
+		}
+	}
+
+	t.Run("F1 desc with limit truncates and sorts", func(t *testing.T) {
+		formula := qbtypes.QueryBuilderFormula{
+			Name:       "F1",
+			Expression: "A + B",
+			Order:      orderByFormula("F1", qbtypes.OrderDirectionDesc),
+			Limit:      2,
+		}
+
+		out := q.applyFormulas(context.Background(), makeInputs(), makeReq(formula))
+		got, ok := out["F1"]
+		require.True(t, ok, "formula result missing")
+		scalar, ok := got.Value.(*qbtypes.ScalarData)
+		require.True(t, ok, "expected *ScalarData, got %T", got.Value)
+
+		// Limit=2 + F1 desc: the two largest __result rows in descending order.
+		require.Len(t, scalar.Data, 2, "limit=2 was ignored before the fix")
+		require.Equal(t, "a", scalar.Data[0][0])
+		require.InDelta(t, 101.0, scalar.Data[0][1].(float64), 1e-9)
+		require.Equal(t, "b", scalar.Data[1][0])
+		require.InDelta(t, 10.0, scalar.Data[1][1].(float64), 1e-9)
+	})
+
+	t.Run("F1 desc without limit sorts all rows", func(t *testing.T) {
+		formula := qbtypes.QueryBuilderFormula{
+			Name:       "F1",
+			Expression: "A / B",
+			Order:      orderByFormula("F1", qbtypes.OrderDirectionAsc),
+		}
+
+		out := q.applyFormulas(context.Background(), makeInputs(), makeReq(formula))
+		got, ok := out["F1"]
+		require.True(t, ok)
+		scalar, ok := got.Value.(*qbtypes.ScalarData)
+		require.True(t, ok)
+
+		require.Len(t, scalar.Data, 2)
+		require.Equal(t, "c", scalar.Data[0][0])
+		require.InDelta(t, 1.0, scalar.Data[0][1].(float64), 1e-9)
+		require.Equal(t, "a", scalar.Data[1][0])
+		require.InDelta(t, 100.0, scalar.Data[1][1].(float64), 1e-9)
+	})
+}
+
 // Multiple series with different number of labels, shouldn't panic and should align labels correctly.
 func TestConvertTimeSeriesDataToScalar_RaggedLabels(t *testing.T) {
 	label := func(name string, value any) *qbtypes.Label {

pkg/query-service/app/parser.go

@@ -769,6 +769,13 @@ func ParseQueryRangeParams(r *http.Request) (*v3.QueryRangeParamsV3, *model.ApiE
 		return nil, &model.ApiError{Typ: model.ErrorBadData, Err: err}
 	}
 
+	// Clamp the top-level Step for PromQL
+	if queryRangeParams.CompositeQuery.QueryType == v3.QueryTypePromQL {
+		if minStep := common.MinAllowedStepInterval(queryRangeParams.Start, queryRangeParams.End); queryRangeParams.Step < minStep {
+			queryRangeParams.Step = minStep
+		}
+	}
+
 	// prepare the variables for the corresponding query type
 	formattedVars := make(map[string]interface{})
 	for name, value := range queryRangeParams.Variables {

pkg/query-service/model/cacheable.go

@@ -41,6 +41,11 @@ func (c *GetWaterfallSpansForTraceWithMetadataCache) Clone() cachetypes.Cacheabl
 	}
 }
 
+func (c *GetWaterfallSpansForTraceWithMetadataCache) Cost() int64 {
+	const perSpanBytes = 256
+	return int64(c.TotalSpans) * perSpanBytes
+}
+
 func (c *GetWaterfallSpansForTraceWithMetadataCache) MarshalBinary() (data []byte, err error) {
 	return json.Marshal(c)
 }
@@ -66,6 +71,16 @@ func (c *GetFlamegraphSpansForTraceCache) Clone() cachetypes.Cacheable {
 	}
 }
 
+func (c *GetFlamegraphSpansForTraceCache) Cost() int64 {
+	const perSpanBytes = 128
+	var spans int64
+	for _, row := range c.SelectedSpans {
+		spans += int64(len(row))
+	}
+	spans += int64(len(c.TraceRoots))
+	return spans * perSpanBytes
+}
+
 func (c *GetFlamegraphSpansForTraceCache) MarshalBinary() (data []byte, err error) {
 	return json.Marshal(c)
 }

pkg/types/cachetypes/cacheable.go

@@ -18,6 +18,10 @@ type Cloneable interface {
 	// Creates a deep copy of the Cacheable. This method is useful for memory caches to avoid the need for serialization/deserialization. It also prevents
 	// race conditions in the memory cache.
 	Clone() Cacheable
+	// Cost returns the weight of this entry for cost-based cache accounting
+	// and eviction. Typically derived from the approximate retained byte size,
+	// but the value represents cache cost, not literal bytes.
+	Cost() int64
 }
 
 func NewSha1CacheKey(val string) string {

pkg/types/querybuildertypes/querybuildertypesv5/cached.go

@@ -59,3 +59,21 @@ func (c *CachedData) Clone() cachetypes.Cacheable {
 
 	return clonedCachedData
 }
+
+// Cost approximates the retained bytes of this CachedData for use as the
+// ristretto cache cost. The dominant contributor is the serialized bucket
+// values (json.RawMessage); other fields are fixed-size or small strings.
+func (c *CachedData) Cost() int64 {
+	var size int64
+	for _, b := range c.Buckets {
+		if b == nil {
+			continue
+		}
+		// Value is the bulk of the payload
+		size += int64(len(b.Value))
+	}
+	for _, w := range c.Warnings {
+		size += int64(len(w))
+	}
+	return size
+}

tests/e2e/helpers/dashboards.ts

@@ -3,10 +3,6 @@ import path from 'path';
 import type { APIRequestContext, Locator, Page } from '@playwright/test';
 
 import apmMetricsTemplate from '../testdata/apm-metrics.json';
-import queriesData from '../testdata/queries.json';
-
-export type SignalType = 'metrics' | 'logs' | 'traces';
-export type QueriesData = typeof queriesData;
 
 // ─── Constants ───────────────────────────────────────────────────────────
 //
@@ -181,248 +177,3 @@ export async function openDashboardActionMenu(
 	await icon.click();
 	return page.getByRole('tooltip');
 }
-
-// ─── Dashboard detail page helpers ──────────────────────────────────────────
-
-/**
- * Click the Configure button (`data-testid="show-drawer"`) on a dashboard
- * detail page and wait for the settings drawer (`.settings-container-root`) to
- * be visible. Works from both the empty-state view and the populated toolbar —
- * both render the same testid.
- *
- * Returns the drawer locator so callers can scope further assertions to it.
- */
-export async function openDashboardSettingsDrawer(page: Page): Promise<Locator> {
-	await page.getByTestId('show-drawer').first().click();
-	const drawer = page.locator('.settings-container-root');
-	await drawer.waitFor({ state: 'visible' });
-	return drawer;
-}
-
-/**
- * Click `data-testid="save-dashboard-config"` and wait for the resulting
- * `PUT /api/v1/dashboards/<id>` response. The Save button is only rendered
- * when there is at least one unsaved change — callers must ensure the drawer
- * has been dirtied before calling this.
- */
-export async function saveDashboardSettings(page: Page): Promise<void> {
-	const patchResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('save-dashboard-config').click();
-	await patchResponse;
-}
-
-/**
- * Rename a dashboard via the toolbar options popover:
- * opens the popover (`data-testid="options"`), clicks "Rename", fills the
- * input, clicks "Rename Dashboard", and waits for the PUT response.
- *
- * Pre-condition: the caller must be on the dashboard detail page.
- */
-export async function renameDashboardViaToolbar(
-	page: Page,
-	newTitle: string,
-): Promise<void> {
-	await page.getByTestId('options').click();
-	await page.getByRole('button', { name: 'Rename' }).click();
-
-	const modal = page.getByRole('dialog');
-	await modal.waitFor({ state: 'visible' });
-
-	const input = modal.getByTestId('dashboard-name');
-	await input.clear();
-	await input.fill(newTitle);
-
-	const patchResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByRole('button', { name: 'Rename Dashboard' }).click();
-	await patchResponse;
-
-	await modal.waitFor({ state: 'hidden' });
-}
-
-// ─── Add panel flow ─────────────────────────────────────────────────────────
-
-/**
- * From the dashboard detail page (must already be loaded), drive the full
- * "Add Panel" flow for the given signal type:
- *   1. Click the empty-state `add-panel` CTA to open the New Panel modal.
- *   2. Pick the Time Series panel type.
- *   3. Fill the panel name in the right pane (drives the post-save assertion).
- *   4. For metrics: type the metric name from `queries.json` into the metric
- *      AutoComplete and select it from the dropdown. For logs/traces: switch
- *      the data-source selector to LOGS / TRACES; default Query Builder state
- *      is sufficient (queries.json query strings are empty by design).
- *   5. Click Save Changes, confirm the modal, and wait for the
- *      PUT /api/v1/dashboards/<id> response.
- *
- * Throws if the PUT response is not 2xx. After return, the page is back on
- * the dashboard detail page; the caller asserts the panel rendered.
- */
-export async function configureAndSavePanel(
-	page: Page,
-	signal: SignalType,
-	panelTitle: string,
-): Promise<void> {
-	await page.getByTestId('add-panel').click();
-
-	const newPanelModal = page
-		.getByRole('dialog')
-		.filter({ hasText: 'New Panel' });
-	await newPanelModal.waitFor({ state: 'visible' });
-	await newPanelModal.getByTestId('panel-type-graph').click();
-
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-	await page.getByTestId('panel-name-input').fill(panelTitle);
-
-	if (signal === 'metrics') {
-		const metricName = queriesData.metrics.metricName;
-		// The testid is on the Ant Select wrapper <div>; the editable input
-		// lives inside it. Target the descendant input for fill().
-		const metricInput = page.getByTestId('metric-name-selector-0').locator('input');
-		await metricInput.click();
-		await metricInput.fill(metricName);
-		// AutoComplete debounces and fetches; wait for the option then click.
-		await page
-			.locator('.ant-select-item-option-content', { hasText: metricName })
-			.first()
-			.click();
-	} else {
-		// logs / traces — switch the data source. Default query is sufficient.
-		await page.getByTestId('query-data-source-selector-0').click();
-		await page
-			.locator('.ant-select-item-option-content', {
-				hasText: signal.toUpperCase(),
-			})
-			.click();
-	}
-
-	const putResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('new-widget-save').click();
-
-	// Confirmation modal (title varies: "Save Widget" vs "Unsaved Changes" —
-	// don't assert title, just click OK on the topmost dialog).
-	const confirmModal = page.getByRole('dialog').last();
-	await confirmModal.waitFor({ state: 'visible' });
-	await confirmModal.getByRole('button', { name: /^OK$/i }).click();
-
-	const res = await putResponse;
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
-		);
-	}
-
-	// Save navigates back to /dashboard/<id> (no /new suffix).
-	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-}
-
-// ─── Widget editor (re-open existing panel) ────────────────────────────────
-
-/**
- * Display labels surfaced in the `panel-change-select` Ant Select inside the
- * widget editor. The mapping to URL `graphType` values comes from the
- * `PANEL_TYPES` enum: TIME_SERIES='graph', VALUE='value', and so on.
- */
-export type PanelDisplayLabel =
-	| 'Time Series'
-	| 'Number'
-	| 'Table'
-	| 'List'
-	| 'Bar'
-	| 'Pie'
-	| 'Histogram';
-
-const PANEL_DISPLAY_TO_GRAPH_TYPE: Record<PanelDisplayLabel, string> = {
-	'Time Series': 'graph',
-	Number: 'value',
-	Table: 'table',
-	List: 'list',
-	Bar: 'bar',
-	Pie: 'pie',
-	Histogram: 'histogram',
-};
-
-/**
- * Open the widget editor for an existing panel by driving the panel header
- * options menu (the three-dot Ant `Dropdown` next to the title).
- *
- * The widget-header-options button is `visibility: hidden` until the panel is
- * hovered (see `GridCardLayout.styles.scss`) — except on TABLE panels, where
- * `globalSearchAvailable` keeps it permanently visible. Hovering the title
- * testid first works for both states.
- */
-export async function openWidgetEditor(
-	page: Page,
-	panelTitle: string,
-): Promise<void> {
-	await page.getByTestId(panelTitle).first().hover();
-	await page.getByTestId('widget-header-options').first().click();
-	await page
-		.getByRole('menuitem', { name: /^edit$/i })
-		.first()
-		.click();
-	await page.waitForURL(/widgetId=/);
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}
-
-/**
- * Click "Save Changes" in the widget editor, confirm via the OK button on the
- * resulting modal, await the dashboard PUT response, and wait for navigation
- * back to `/dashboard/<id>`. Throws if the PUT response is not 2xx.
- *
- * The confirmation modal title varies between "Save Widget" and "Unsaved
- * Changes" depending on whether the query was modified — don't assert title,
- * just OK the topmost dialog.
- */
-export async function saveWidgetEdit(page: Page): Promise<void> {
-	const putResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('new-widget-save').click();
-	const confirmModal = page.getByRole('dialog').last();
-	await confirmModal.waitFor({ state: 'visible' });
-	await confirmModal.getByRole('button', { name: /^OK$/i }).click();
-	const res = await putResponse;
-	if (!res.ok()) {
-		throw new Error(
-			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
-		);
-	}
-	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-}
-
-/**
- * Switch the editor's panel display type via the Ant `Select` exposed as
- * `data-testid="panel-change-select"`. The select options carry the display
- * label as visible text (matches `PanelDisplay` enum values). After the
- * change, this helper waits for the URL `graphType` param to reflect the new
- * panel type and for the Save Changes button to re-render — the editor
- * re-routes mid-flow via `redirectWithQueryBuilderData`.
- *
- * Note: the "List" option is filtered out of the dropdown when the current
- * query contains a metrics data source (see VisualizationSettingsSection).
- */
-export async function changePanelType(
-	page: Page,
-	displayLabel: PanelDisplayLabel,
-): Promise<void> {
-	const expectedGraphType = PANEL_DISPLAY_TO_GRAPH_TYPE[displayLabel];
-	await page.getByTestId('panel-change-select').click();
-	// Each option renders a .select-option containing the display text — match
-	// against the typography element to avoid matching the trigger itself.
-	await page
-		.locator('.ant-select-item-option .display', { hasText: displayLabel })
-		.first()
-		.click();
-	await page.waitForURL(new RegExp(`graphType=${expectedGraphType}`));
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}

tests/e2e/testdata/queries.json

@@ -1,12 +0,0 @@
-{
-    "logs": {
-        "query": ""
-    },
-    "metrics": {
-        "metricName": "signoz_calls_total",
-        "query": ""
-    },
-    "traces": {
-        "query": ""
-    }
-}

tests/e2e/tests/dashboards/create.spec.ts

@@ -1,550 +0,0 @@
-import path from 'path';
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../fixtures/auth';
-import { newAdminContext } from '../../helpers/auth';
-import {
-	APM_METRICS_TITLE,
-	authToken,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	gotoDashboardsList,
-	openDashboardSettingsDrawer,
-	renameDashboardViaToolbar,
-	saveDashboardSettings,
-	SEARCH_PLACEHOLDER,
-} from '../../helpers/dashboards';
-
-// All tests mutate dashboard state (create / rename / delete). Run serially to
-// prevent cross-test interference on the list and detail pages.
-test.describe.configure({ mode: 'serial' });
-
-// ─── Suite-level seed registry ────────────────────────────────────────────────
-//
-// Every dashboard created by any test is registered here; one afterAll tears
-// them all down. Tests that don't create anything (TC-10, TC-11, TC-13) need
-// no cleanup entry.
-const seedIds = new Set<string>();
-const BASE_FIXTURE_TITLE = 'create-flow-base-fixture';
-
-const APM_METRICS_TESTDATA_PATH = path.resolve(
-	__dirname,
-	'../../testdata/apm-metrics.json',
-);
-
-async function seed(page: Page, title: string): Promise<string> {
-	const id = await createDashboardViaApi(page, title);
-	seedIds.add(id);
-	return id;
-}
-
-test.beforeAll(async ({ browser }) => {
-	// Seed one base dashboard so the list is non-empty and the
-	// `new-dashboard-cta` header button is rendered for all tests that
-	// drive the "New dashboard" dropdown from the list page.
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		seedIds.add(await createDashboardViaApi(page, BASE_FIXTURE_TITLE));
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.describe('Dashboard Create Flow', () => {
-	// ─── 1. Create Dashboard (blank) ─────────────────────────────────────────
-
-	test('TC-01 blank create lands on onboarding state with correct default title', async ({
-		authedPage: page,
-	}) => {
-		await gotoDashboardsList(page);
-
-		const postResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
-		);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('create-dashboard-menu-cta').click();
-		const res = await postResponse;
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
-
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-		const body = (await res.json()) as {
-			data: { data: { title: string }; id: string };
-		};
-		expect(body.data.data.title).toBe('Sample Title');
-
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		// DashboardDescription always renders dashboard-title even on blank dashboards.
-		await expect(page.getByTestId('dashboard-title')).toBeVisible();
-		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
-		await expect(page.getByText('Configure your new dashboard')).toBeVisible();
-		await expect(page.getByTestId('show-drawer').first()).toBeVisible();
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		// Register the UI-created dashboard for cleanup.
-		const id = body.data.id;
-		expect(id, 'POST response must include a dashboard id').toBeTruthy();
-		seedIds.add(id);
-	});
-
-	test('TC-02 configure drawer opens with Overview tab and pre-fills existing title', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc02');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		// Overview tab is the default active tab.
-		await expect(drawer.getByRole('button', { name: 'Overview' })).toBeVisible();
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await expect(nameInput).toHaveValue('create-flow-tc02');
-
-		const descInput = drawer.getByTestId('dashboard-desc');
-		await expect(descInput).toBeVisible();
-		await expect(descInput).toHaveValue('');
-
-		await expect(
-			drawer.getByPlaceholder('Start typing your tag name'),
-		).toBeVisible();
-
-		// Ant Drawer does not close on Escape — use the X close button in the header.
-		await drawer.getByRole('button', { name: 'Close' }).click();
-		await expect(drawer).not.toHaveClass(/ant-drawer-open/);
-	});
-
-	test('TC-03 rename title, add description and tags, save persists to list', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc03-original');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await nameInput.clear();
-		await nameInput.fill('create-flow-tc03-renamed');
-		await expect(drawer.getByText(/1 unsaved change/)).toBeVisible();
-
-		await drawer.getByTestId('dashboard-desc').fill('A test description');
-		await expect(drawer.getByText(/2 unsaved changes/)).toBeVisible();
-
-		const tagInput = drawer.getByPlaceholder('Start typing your tag name');
-		await tagInput.click();
-		await tagInput.fill('e2e-tag');
-		await page.keyboard.press('Enter');
-		await expect(drawer.getByText(/3 unsaved changes/)).toBeVisible();
-
-		// Click save and wait for the unsaved-changes footer to disappear — the
-		// footer only clears after the PUT success callback re-syncs local state.
-		await page.getByTestId('save-dashboard-config').click();
-		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
-
-		await drawer.getByRole('button', { name: 'Close' }).click();
-
-		// Renamed dashboard appears in the list.
-		await gotoDashboardsList(page);
-		const searchInput = page.getByPlaceholder(SEARCH_PLACEHOLDER);
-		await searchInput.fill('create-flow-tc03-renamed');
-		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
-
-		// Tag search also surfaces the renamed dashboard.
-		await searchInput.fill('e2e-tag');
-		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
-	});
-
-	test('TC-04 discard reverts unsaved changes without API call', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc04');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-
-		const nameInput = drawer.getByTestId('dashboard-name');
-		await nameInput.clear();
-		await nameInput.fill('create-flow-tc04-discarded');
-		await drawer.getByTestId('dashboard-desc').fill('discarded desc');
-		await expect(drawer.getByText(/unsaved change/)).toBeVisible();
-
-		// Intercept any PUT to detect an unwanted save.
-		let patchFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				patchFired = true;
-			}
-			route.continue();
-		});
-
-		await drawer.getByRole('button', { name: 'Discard' }).click();
-
-		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
-		await expect(nameInput).toHaveValue('create-flow-tc04');
-		await expect(drawer.getByTestId('dashboard-desc')).toHaveValue('');
-		expect(patchFired).toBe(false);
-	});
-
-	test('TC-05 rename via toolbar options popover persists to the toolbar title', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc05');
-		await page.goto(`/dashboard/${id}`);
-
-		// DashboardDescription toolbar always renders — even on blank dashboards.
-		await expect(page.getByTestId('options')).toBeVisible();
-
-		await renameDashboardViaToolbar(page, 'create-flow-tc05-renamed');
-
-		await expect(page.getByTestId('dashboard-title')).toHaveText(
-			'create-flow-tc05-renamed',
-		);
-	});
-
-	// ─── 2. Variables ─────────────────────────────────────────────────────────
-
-	test('TC-06 add a Custom variable, verify it appears in the variables bar', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc06');
-		await page.goto(`/dashboard/${id}`);
-
-		const drawer = await openDashboardSettingsDrawer(page);
-		await drawer.getByRole('button', { name: 'Variables' }).click();
-
-		await drawer.getByTestId('add-new-variable').click();
-		await expect(drawer.getByRole('button', { name: 'All variables' })).toBeVisible();
-
-		await drawer
-			.getByPlaceholder('Unique name of the variable')
-			.fill('env');
-
-		await drawer.getByRole('button', { name: 'Custom' }).click();
-
-		// After selecting "Custom" type, the Options collapse panel contains a
-		// textarea with placeholder "Enter options separated by commas."
-		const customInput = drawer.getByPlaceholder(
-			'Enter options separated by commas.',
-		);
-		await customInput.fill('prod,staging,dev');
-
-		const patchResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-		);
-		await drawer.getByRole('button', { name: 'Save Variable' }).click();
-		const res = await patchResponse;
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-
-		// After saving, the variable form disappears and the table row is visible.
-		await expect(drawer.getByRole('button', { name: 'All variables' })).not.toBeVisible();
-		await expect(drawer.getByText('env')).toBeVisible();
-
-		// Close the drawer via its X button and check the variables bar.
-		await drawer.getByRole('button', { name: 'Close' }).click();
-		await expect(page.locator('.dashboard-variables')).toBeVisible();
-	});
-
-	test('TC-07 duplicate variable name is rejected inline', async ({
-		authedPage: page,
-	}) => {
-		// Seed a dashboard that already has a variable named 'env'.
-		const id = await seed(page, 'create-flow-tc07');
-		await page.goto(`/dashboard/${id}`);
-
-		// Use the UI to add the first variable so the state is real.
-		const drawer = await openDashboardSettingsDrawer(page);
-		await drawer.getByRole('button', { name: 'Variables' }).click();
-		await drawer.getByTestId('add-new-variable').click();
-		await drawer.getByPlaceholder('Unique name of the variable').fill('env');
-		await drawer.getByRole('button', { name: 'Custom' }).click();
-		await drawer
-			.getByPlaceholder('Enter options separated by commas.')
-			.fill('prod');
-		const firstSave = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-		);
-		await drawer.getByRole('button', { name: 'Save Variable' }).click();
-		await firstSave;
-
-		// Now try to add a second variable with the same name.
-		await drawer.getByTestId('add-new-variable').click();
-		const nameInput = drawer.getByPlaceholder('Unique name of the variable');
-		await nameInput.fill('env');
-
-		await expect(
-			drawer.getByText('Variable name already exists'),
-		).toBeVisible();
-		await expect(
-			drawer.getByRole('button', { name: 'Save Variable' }),
-		).toBeDisabled();
-	});
-
-	// ─── 3. Import JSON ───────────────────────────────────────────────────────
-	//
-	// TC-08 and TC-12 are merged: TC-08 covers the POST contract and navigation;
-	// the merged test also navigates back to the list and verifies metadata
-	// surfacing (the TC-12 concern). This avoids two identical import flows.
-
-	test('TC-08 import via file upload creates dashboard, navigates to detail, and surfaces metadata in list', async ({
-		authedPage: page,
-	}) => {
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		const postResponse = page.waitForResponse(
-			(r) =>
-				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
-		);
-		await dialog.locator('input[type="file"]').setInputFiles(APM_METRICS_TESTDATA_PATH);
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-		const res = await postResponse;
-
-		expect(res.status()).toBeGreaterThanOrEqual(200);
-		expect(res.status()).toBeLessThan(300);
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
-
-		// Register for cleanup.
-		const urlMatch = page.url().match(/\/dashboard\/([0-9a-f-]+)/);
-		expect(urlMatch, 'URL must contain dashboard ID').not.toBeNull();
-		seedIds.add(urlMatch![1]);
-
-		await expect(page.getByTestId('dashboard-title')).toHaveText(APM_METRICS_TITLE);
-
-		// Navigate back and confirm the imported dashboard surfaces in the list
-		// with at least one tag chip (TC-12 coverage).
-		await gotoDashboardsList(page);
-		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(APM_METRICS_TITLE);
-		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
-		// The apm-metrics fixture has tags ['apm', 'latency', 'error rate', 'throughput'].
-		await expect(page.getByText('apm').first()).toBeVisible();
-	});
-
-	// TC-09 (Monaco paste path) is intentionally dropped — the file-upload
-	// path (TC-08) exercises the same populate-editor-then-import code path.
-	// Keyboard-typing large JSON into Monaco is unreliable in headless CI.
-
-	test('TC-10 invalid JSON via file upload shows "Invalid JSON" error', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created by this test — no cleanup entry needed.
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		await dialog.locator('input[type="file"]').setInputFiles({
-			name: 'bad.json',
-			mimeType: 'application/json',
-			buffer: Buffer.from('not valid json {'),
-		});
-
-		await expect(dialog.getByText('Invalid JSON')).toBeVisible();
-		await expect(dialog).toBeVisible();
-
-		// Clicking "Import and Next" with invalid content should surface an error
-		// and keep the dialog open.
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-		await expect(dialog).toBeVisible();
-	});
-
-	test('TC-11 import with empty editor clicking Import and Next shows error', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created — no cleanup entry needed.
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-		await page.getByTestId('import-json-menu-cta').click();
-
-		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
-		await expect(dialog).toBeVisible();
-
-		await dialog.getByRole('button', { name: 'Import and Next' }).click();
-
-		await expect(dialog.getByText('Error loading JSON file')).toBeVisible();
-		await expect(dialog).toBeVisible();
-		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-	});
-
-	// ─── 4. View Templates ────────────────────────────────────────────────────
-
-	test('TC-13 View templates menu item is an external link targeting a new tab', async ({
-		authedPage: page,
-	}) => {
-		// No dashboard is created — no cleanup entry needed.
-		// The assertion guards against the link being silently changed to an
-		// in-app modal or a different URL (the DashboardTemplatesModal exists in
-		// source but is never triggered from this menu item).
-		await gotoDashboardsList(page);
-		await page.getByTestId('new-dashboard-cta').click();
-
-		const link = page.getByTestId('view-templates-menu-cta');
-		await expect(link).toBeVisible();
-
-		await expect(link).toHaveAttribute(
-			'href',
-			/signoz\.io\/docs\/dashboards\/dashboard-templates/,
-		);
-		await expect(link).toHaveAttribute('target', '_blank');
-		await expect(link).toHaveAttribute('rel', /noopener/);
-	});
-
-	// ─── 5. Post-Create Dashboard Detail — Panel Addition ────────────────────
-
-	test('TC-14 New Panel modal opens and selecting Time Series navigates to widget editor', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc14');
-		await page.goto(`/dashboard/${id}`);
-
-		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
-
-		await page.getByTestId('add-panel').click();
-		// PANEL_TYPES enum: TIME_SERIES='graph', VALUE='value', TABLE='table'
-		// — the testid is panel-type-<enum-value>, not panel-type-<enum-name>.
-		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
-		await expect(modal).toBeVisible();
-
-		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
-		await expect(modal.getByTestId('panel-type-value')).toBeVisible();
-		await expect(modal.getByTestId('panel-type-table')).toBeVisible();
-
-		await modal.getByTestId('panel-type-graph').click();
-		await expect(page).toHaveURL(/graphType=graph/);
-	});
-
-	test('TC-15 New Panel button from toolbar header opens the same panel type modal', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc15');
-		await page.goto(`/dashboard/${id}`);
-
-		// The toolbar "New Panel" button (add-panel-header) is present even on
-		// a blank dashboard, alongside the empty-state "add-panel" button.
-		await expect(page.getByTestId('add-panel-header')).toBeVisible();
-		await page.getByTestId('add-panel-header').click();
-
-		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
-		await expect(modal).toBeVisible();
-		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
-
-		// Click the modal X button to close (Escape also works but may conflict
-		// with the Enterprise modal in the background; explicit click is more reliable).
-		await modal.getByRole('button', { name: 'Close' }).click();
-		await expect(modal).not.toBeVisible();
-	});
-
-	// ─── 6. Cancellation and Navigation Away ─────────────────────────────────
-
-	test('TC-16 browser Back from dashboard detail returns to list with URL preserved', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc16');
-
-		await page.goto(`/dashboard?search=create-flow-tc16`);
-		await page
-			.getByRole('heading', { name: 'Dashboards', level: 1 })
-			.waitFor({ state: 'visible' });
-
-		await page.getByAltText('dashboard-image').first().click();
-		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
-
-		await page.goBack();
-		await expect(page).toHaveURL(/search=create-flow-tc16/);
-		await expect(
-			page.getByPlaceholder(SEARCH_PLACEHOLDER),
-		).toHaveValue('create-flow-tc16');
-	});
-
-	test('TC-17 navigating away with the settings drawer open does not crash', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'create-flow-tc17');
-		await page.goto(`/dashboard/${id}`);
-
-		await openDashboardSettingsDrawer(page);
-
-		// Navigate away without closing the drawer.
-		await page.goto('/dashboard');
-		await expect(page).toHaveURL(/\/dashboard($|\?)/);
-		await expect(
-			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
-		).toBeVisible();
-		// No error overlay should be present.
-		await expect(
-			page.getByRole('alert').filter({ hasText: /error/i }),
-		).toHaveCount(0);
-	});
-
-	// ─── 7. Add Panel — end-to-end per signal ────────────────────────────────
-	//
-	// TC-14/TC-15 verify the New Panel modal opens and routes to the widget
-	// editor. The TCs below go further: configure a query for each signal
-	// using values from testdata/queries.json, save the panel, return to the
-	// dashboard, and verify the panel card renders.
-
-	test('TC-18 add metrics Time Series panel using signoz_calls_total from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-metrics');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'metrics', 'metrics-timeseries');
-
-		await expect(page.getByTestId('metrics-timeseries')).toBeVisible();
-	});
-
-	test('TC-19 add logs Time Series panel with default query from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-logs');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'logs', 'logs-timeseries');
-
-		await expect(page.getByTestId('logs-timeseries')).toBeVisible();
-	});
-
-	test('TC-20 add traces Time Series panel with default query from queries.json', async ({
-		authedPage: page,
-	}) => {
-		const id = await seed(page, 'add-panel-traces');
-		await page.goto(`/dashboard/${id}`);
-		await expect(page.getByTestId('add-panel')).toBeVisible();
-
-		await configureAndSavePanel(page, 'traces', 'traces-timeseries');
-
-		await expect(page.getByTestId('traces-timeseries')).toBeVisible();
-	});
-});

tests/e2e/tests/dashboards/panels/bar.spec.ts

@@ -1,484 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'bar-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'bar-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Bar');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-async function selectYAxisUnit(
-	page: Page,
-	wrapperSelector: string,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const wrapper = page.locator(wrapperSelector).first();
-	await wrapper.locator('.ant-select').click();
-	await wrapper.locator('.ant-select input').fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Bar Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('bar-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('bar-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'bar-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'bar-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E bar description');
-		await saveWidgetEdit(page);
-
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E bar description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 stack series toggle persists; editor reflects state via data-stacking-state', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		const stackSwitch = page.locator('section.stack-chart').getByRole('switch');
-		const panelChangeSelect = page.getByTestId('panel-change-select');
-
-		await expect(stackSwitch).toHaveAttribute('aria-checked', 'false');
-		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'false');
-
-		await stackSwitch.click();
-		await expect(stackSwitch).toHaveAttribute('aria-checked', 'true');
-		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'true');
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.stack-chart').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-		await expect(page.getByTestId('panel-change-select')).toHaveAttribute(
-			'data-stacking-state',
-			'true',
-		);
-
-		// Reset
-		await page.locator('section.stack-chart').getByRole('switch').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change check is omitted — the test stack's
-		// `signoz_calls_total` data slides outside the dashboard's default
-		// "Last 30 minutes" window mid-suite, so the rendered panel often
-		// shows "No Data" and the tooltip never appears. Verify persistence
-		// only — the selector value round-trips through PUT.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Milliseconds',
-			'Milliseconds (ms)',
-		);
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Milliseconds/);
-
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change check is omitted for the same reason
-		// as TC-05.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-
-		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('10');
-		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('100');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').first(),
-		).toHaveValue('10');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').last(),
-		).toHaveValue('100');
-
-		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('');
-		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 log scale persists (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.log-scale .ant-select-selection-item').first(),
-		).toContainText(/Logarithmic/);
-
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-09 legend position swap toggles chart-layout--legend-right and shows the search input', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
-			.first()
-			.click();
-
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Legend');
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-	});
-
-	test('TC-10 Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		// Driving the Ant ColorPicker is fiddly across builds (trigger class
-		// varies, preset chips may not be configured). Per-option testids have
-		// been added in `YAxisUnitSelector.tsx` for the unit picker, but the
-		// LegendColors picker uses Ant's `ColorPicker` directly with no stable
-		// testids. The pragmatic check is structural: when a query has run
-		// and produced series, the Legend Colors collapse panel renders one
-		// row per legend label with a `.legend-marker` carrying an inline
-		// `background-color` (the auto-assigned default). This guards against
-		// regressions in the LegendColors → query-response wiring.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-11 threshold add + persistence (canvas-only line)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// Bar thresholds do NOT have a label input — the time-series-alerts block
-		// only renders for TIME_SERIES. Skip label.
-		await card.getByTestId('threshold-value-input').fill('100');
-
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		await expect(page.locator('.threshold-container').first()).toBeVisible();
-
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-12 panel type swap from Bar to Time Series and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-
-		// Editor-side visual change: Time-Series-only section appears.
-		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		await changePanelType(page, 'Bar');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-13 sections hidden for BAR are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Hidden by the panel-type matrix for BAR.
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-
-		// Expected to be present.
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-		await expect(page.locator('section.stack-chart').first()).toBeVisible();
-		await expect(page.locator('section.panel-time-preference').first()).toBeVisible();
-
-		await expandSection(page, 'Axes');
-		await expect(page.locator('section.soft-min-max').first()).toBeVisible();
-		await expect(page.locator('section.log-scale').first()).toBeVisible();
-
-		await expandSection(page, 'Legend');
-		await expect(page.locator('section.legend-position').first()).toBeVisible();
-
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-14 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-bar-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/list.spec.ts

@@ -1,192 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'list-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'list-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		// LIST panels require a logs (or traces) data source — metrics queries
-		// hide the LIST option from panel-change-select.
-		await configureAndSavePanel(page, 'logs', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-test.describe('List Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('list-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('list-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'list-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'list-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E list description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E list description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel type switch from List to Table persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Table');
-		// Table re-renders Decimal Precision + Column Units in the right pane.
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Panel card should now render an Ant table head.
-		await expect(
-			page
-				.locator('[data-testid="' + FIXTURE_PANEL_TITLE + '"]')
-				.first(),
-		).toBeVisible();
-		await expect(page.locator('.ant-table-thead').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=table/);
-
-		// Reset back to List.
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 sections hidden for LIST are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
-		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-description-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-	});
-
-	test('TC-05 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-list-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/table.spec.ts

@@ -1,470 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'table-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'table-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Return the last <td> in the first data row of the panel's Ant Design table.
- * Ant Design applies .ant-table-row to actual data rows only (not header rows),
- * so this correctly skips the fixed/sticky header tbody rows.
- *
- * For the metrics panel the row has: td[0] = label column, td[last] = value
- * column (the aggregation query "A"). The last td is thus the value cell.
- * However, depending on the panel query there may only be ONE td per row. Use
- * the cell that contains a non-empty value: any td that is not purely the
- * label placeholder.
- *
- * NOTE: the value cell wraps its text in a <button> element (from the
- * QueryTable open-traces render path) so textContent picks it up correctly.
- */
-async function getFirstDataCell(page: Page) {
-	// .ant-table-row targets Ant Design data rows only (not header/fixed rows).
-	const firstRow = page.locator('tr.ant-table-row').first();
-	await firstRow.waitFor({ state: 'visible' });
-	// Return the last <td> — for a metrics table with columns [label, A] this
-	// is the value column. For a single-column table it is the only column.
-	return firstRow.locator('td').last();
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the content to
- * become visible.
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) => el.classList.contains('open'));
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the column-unit selector dropdown by typing a search
- * term, then clicking the filtered option. Scoped to .column-unit-selector to
- * avoid matching the Y-axis unit selectors on other panel types.
- *
- * The selector has `showSearch` enabled and renders a long virtualised option
- * list — typing first avoids instability from the list re-rendering when the
- * target option is off-screen.
- */
-async function selectColumnUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const unitSelect = page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select')
-		.first();
-	await unitSelect.click();
-	await page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select input')
-		.first()
-		.fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Table Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('table-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('table-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'table-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'table-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E table description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E table description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 column unit formats the matching column cells and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Use selectColumnUnit to avoid virtualised-list detached-DOM failures.
-		await selectColumnUnit(page, 'Milliseconds', 'Milliseconds (ms)');
-
-		await saveWidgetEdit(page);
-
-		// Cell text in the data column should now contain the `ms` suffix.
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toContainText(/ms/);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page
-				.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-selection-item')
-				.first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset — clear the unit via the Ant Select allowClear X button.
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision changes the number of decimals when a column unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Set a column unit so decimal precision has a visible effect.
-		await selectColumnUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toContainText(/s/);
-		const text = (await cell.textContent()) ?? '';
-		expect(text.replace(/\s*s\s*$/, '')).not.toMatch(/\./);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: decimal precision back to 2, clear column unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 column-targeted Background threshold paints only the targeted column', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// For TABLE thresholds the column selector (table-operator-input-selector)
-		// defaults to the first aggregation query column (typically `A`). Operator
-		// defaults to '>'; switch to '>=' so it reliably matches non-negative values.
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await card.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array).
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Find a data row and inspect its cells. Use tr.ant-table-row to skip
-		// fixed-header tbody rows that Ant Design inserts for sticky scroll.
-		// QueryTable wraps each cell in <div role="button">; the threshold
-		// styled <div> is nested inside it. Use div[style] to target the first
-		// <div> that actually carries an inline style — that is the threshold div.
-		// TODO: switch to `getByTestId('threshold-styled-cell')` once the frontend
-		// build deployed to the test stack picks up the testid added in
-		// GridTableComponent/index.tsx (the host also carries
-		// `data-threshold-format="Background|Text"` to discriminate variants).
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const dataCellInner = row.locator('td').last().locator('div[style]').first();
-		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/background-color:/);
-
-		// Reset — delete the threshold. Edit/delete buttons are display:none
-		// by default and revealed only on .threshold-card-container:hover.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection defaultOpen is based on threshold count at mount; may
-		// start collapsed due to async state loading — always expand before interacting.
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the stack
-		// frontend rebuild picks up the testid added in Threshold.tsx.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 column-targeted Text threshold colors only the targeted column text', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-		// Format defaults to 'Text' — no change needed.
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// QueryTable wraps each cell in <div role="button">; the threshold styled
-		// <div> is nested inside. Use div[style] to find the threshold div directly.
-		// TODO: same testid migration as TC-06 once the frontend rebuild lands.
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const dataCellInner = row.locator('td').last().locator('div[style]').first();
-		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/color:/);
-		expect(dataStyle).not.toMatch(/background-color:/);
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after frontend rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 sections hidden for TABLE are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// decimal-precision-selector and column-unit-selector are inside the
-		// "Formatting & Units" section which starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-		await expect(page.locator('.column-unit-selector').first()).toBeVisible();
-
-		// add-threshold-cta is inside "Thresholds" which is also collapsed.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-09 panel type switch from Table to Number persists and re-renders as a number', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Number');
-		// Number panel exposes the Y-axis unit selector in the Formatting & Units section.
-		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-graph-text').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=value/);
-
-		// Reset: switch back to Table.
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-table-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/time-series.spec.ts

@@ -1,584 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-// All TCs share one fixture panel — run serially.
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'time-series-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'time-series-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		// configureAndSavePanel creates a Time Series (graph) panel by default —
-		// no panel-type swap needed here.
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. No-op if already open.
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from a Y-axis-unit-selector wrapper by typing a search term
- * first (Ant Select has a virtualised option list — typing first prevents
- * detached-DOM failures when the target option is off-screen).
- *
- * `wrapperSelector` is the CSS selector for the enclosing
- * `.y-axis-unit-selector-v2` instance (use `.y-axis-unit-selector-v2` for the
- * Formatting Y-axis unit; threshold cards have their own nested instance —
- * scope accordingly).
- */
-async function selectYAxisUnit(
-	page: Page,
-	wrapperSelector: string,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const wrapper = page.locator(wrapperSelector).first();
-	await wrapper.locator('.ant-select').click();
-	await wrapper.locator('.ant-select input').fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Time Series Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('ts-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('ts-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'ts-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'ts-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E time series description');
-		await saveWidgetEdit(page);
-
-		// Visible change: info icon appears in the widget header.
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E time series description',
-		);
-
-		// Reset and assert the info icon disappears.
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		// Reset
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 fill gaps toggle persists', async ({ authedPage: page }) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// canvas-only — visible chart effect not asserted (canvas-drawn series).
-		const fillGapsSwitch = page.locator('section.fill-gaps').getByRole('switch');
-		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'false');
-		await fillGapsSwitch.click();
-		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'true');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.fill-gaps').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-
-		// Reset
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
-		// The plan asks for a tooltip-driven visible-change check (hover the
-		// chart, assert tooltip text contains `ms`). In practice the test
-		// stack's `signoz_calls_total` data slides outside the dashboard's
-		// default "Last 30 minutes" window between the suite-start golden
-		// reseed and the time TC-05 runs, so the rendered panel often shows
-		// "No Data" and the tooltip never appears. Until the seeder either
-		// emits points in a rolling-now window or the dashboard global-time
-		// preset gets widened from the test fixture, the tooltip assertion is
-		// not viable. Verify persistence only — the selector value round-trips
-		// through PUT and re-renders in the editor.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Milliseconds',
-			'Milliseconds (ms)',
-		);
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset — clear via allowClear.
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change assertion is omitted for the same reason
-		// as TC-05 — `signoz_calls_total` data window flakes mid-suite. Verify
-		// persistence only.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-
-		// Soft Min is the first .ant-input-number inside section.soft-min-max.
-		const softMin = page.locator('section.soft-min-max .ant-input-number-input').first();
-		const softMax = page.locator('section.soft-min-max .ant-input-number-input').last();
-
-		await softMin.fill('10');
-		await softMax.fill('100');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').first(),
-		).toHaveValue('10');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').last(),
-		).toHaveValue('100');
-
-		// Reset — clear both. (Note: the |...|| 0 coercion in onClickSaveHandler
-		// will persist 0 not null after this save; that's the known behaviour.)
-		await page
-			.locator('section.soft-min-max .ant-input-number-input')
-			.first()
-			.fill('');
-		await page
-			.locator('section.soft-min-max .ant-input-number-input')
-			.last()
-			.fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 log scale persists (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-		const logScaleSelect = page.locator('section.log-scale .ant-select').first();
-		await logScaleSelect.click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.log-scale .ant-select-selection-item').first(),
-		).toContainText(/Logarithmic/);
-
-		// Reset
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-09 legend position swap toggles the chart-layout--legend-right class and shows the search input', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		// Before: legend is at the bottom; no chart-layout--legend-right; no
-		// legend-search-input.
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-
-		// Switch to Right.
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
-			.first()
-			.click();
-
-		// In-editor live preview: layout updates.
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard: same assertions hold on the rendered panel card.
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Legend');
-		await expect(
-			page.locator('section.legend-position .ant-select-selection-item').first(),
-		).toContainText(/Right/);
-
-		// Reset to Bottom and assert the class disappears.
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-	});
-
-	test('TC-09b Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		// The original plan was to drive the Ant `ColorPicker` and assert a
-		// custom color round-trips. The Ant ColorPicker DOM is fiddly to drive
-		// reliably from Playwright (the trigger is the wrapped child element,
-		// presets vary by build, and committing a color requires Escape /
-		// click-outside semantics that depend on portal positioning). The
-		// pragmatic check we ship here is the *structural* one: when a query
-		// has run and produced series, the LegendColors collapse panel renders
-		// one row per legend label with a `.legend-marker` that carries an
-		// inline `background-color` (the auto-assigned default). This guards
-		// against regressions in the LegendColors → query-response wiring,
-		// which is the part most likely to silently break.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		// Expand the Ant Collapse panel "Legend Colors" (it sits below the
-		// Position selector inside the Legend SettingsSection).
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		// After expansion: at least one per-series row, each with a coloured
-		// `.legend-marker` swatch carrying inline backgroundColor.
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-10 threshold add + persistence (canvas-only line)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// Time Series thresholds have a label input (unique to TIME_SERIES).
-		await card.getByTestId('threshold-label-input').fill('alert-threshold');
-		await card.getByTestId('threshold-value-input').fill('500');
-
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// canvas-only — line is canvas-drawn. Verify persistence by re-open.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		await expect(page.locator('.threshold-container').first()).toBeVisible();
-
-		// Reset — delete via hover-revealed button.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-11 threshold value persists in edit mode after save + re-open', async ({
-		authedPage: page,
-	}) => {
-		// Originally drove the threshold's V1 unit selector to assert
-		// `'seconds (s)'` round-trips. The V1 selector's `handleSearch`
-		// filterOption hides every option when a V2-style search term is typed
-		// AND the dropdown options don't reliably surface in the
-		// currently-visible portal under Playwright. We've added per-option
-		// `data-testid="unit-option-<id>"` in `YAxisUnitSelector.tsx`; once the
-		// test stack frontend rebuilds with that testid, this TC can be
-		// upgraded to pick the unit deterministically via
-		// `page.getByTestId('unit-option-s')`. Meanwhile the TC verifies the
-		// numeric value field round-trips through edit mode — the most common
-		// regression vector and the one most worth guarding.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		await card.getByTestId('threshold-value-input').fill('100');
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-
-		// Re-enter edit mode and assert the value field carries the saved 100.
-		const cardAfter = page.locator('.threshold-container').first();
-		await cardAfter.hover();
-		// TODO: switch to `getByTestId('threshold-edit-btn')` after stack rebuild.
-		await cardAfter.locator('button.edit-btn').click();
-		await expect(cardAfter.getByTestId('threshold-value-input')).toHaveValue(
-			'100',
-		);
-
-		// Reset — discard the edit, then delete.
-		await cardAfter.getByRole('button', { name: /^discard$/i }).click();
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-12 panel type swap from Time Series to Bar and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Bar');
-
-		// Editor-side visual change: Bar-only section appears, Time-Series-only
-		// section disappears.
-		await expect(page.locator('section.stack-chart').first()).toBeVisible();
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=bar/);
-
-		// Reset
-		await changePanelType(page, 'Time Series');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-13 fill gaps and panel time preference persist together', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Set both.
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 1 hr/i }).click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.fill-gaps').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 1 hr/i);
-
-		// Reset both.
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-14 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-ts-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/value.spec.ts

@@ -1,495 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-// All TCs operate on the same fixture panel and toggle its state — they MUST
-// run serially within the worker. Project-level fullyParallel still runs this
-// file in parallel with other files.
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'value-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'value-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		// configureAndSavePanel creates a Time Series panel. Switch it to the
-		// Number (VALUE) type before the per-TC bodies run.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	} finally {
-		await ctx.close();
-	}
-});
-
-test.afterAll(async ({ browser }) => {
-	if (seedIds.size === 0) return;
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const token = await authToken(page);
-		for (const id of [...seedIds]) {
-			await deleteDashboardViaApi(ctx.request, id, token);
-			seedIds.delete(id);
-		}
-	} finally {
-		await ctx.close();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the CSS
- * transition to complete. This handles both the common case (collapsed on
- * mount) and the defensive case (already open).
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	// Find the settings-section that contains this title in its header.
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-
-	// Check if the content div already has the `open` class.
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-
-	if (!isOpen) {
-		// Click the header button to open the section.
-		await section.locator('button.settings-section-header').click();
-		// Wait for the CSS transition to complete (opacity 0→1, max-height 0→1000px).
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the Y-axis unit selector dropdown by typing a search
- * term, then clicking the filtered option. The selector has `showSearch`
- * enabled and renders a long virtualised option list — typing first avoids
- * instability from the virtualised list re-rendering when the target option
- * is off-screen.
- */
-async function selectYAxisUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	// Click the outer wrapper to open the dropdown.
-	const unitSelect = page.locator('.y-axis-unit-selector-v2 .ant-select').first();
-	await unitSelect.click();
-	// The Ant Select input is now focused — type to filter the virtual list.
-	await page.locator('.y-axis-unit-selector-v2 .ant-select input').first().fill(searchTerm);
-	// Wait for the dropdown to show the filtered option, then click it.
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Value Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('value-controls-renamed');
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'value-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'value-controls-renamed',
-		);
-
-		// Reset back to fixture title so subsequent TCs locate the panel.
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 panel description persists and renders the info icon on the header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E test description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E test description',
-		);
-
-		// Reset
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches from Global Time to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		const timeButton = page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i });
-		await timeButton.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		// Reset
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 Y-axis unit applies a suffix to the rendered value and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// The Y-Axis Unit selector has showSearch enabled and a long virtualised
-		// option list. Type "Seconds" to filter before clicking.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		// Live preview should now render a suffix unit `s`.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Back on the dashboard the panel card should also render the suffix.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Seconds/);
-
-		// Reset — clear the unit via allowClear (X button on the Ant Select).
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision reformats the rendered value when a unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Setting a unit is required for decimal precision to have a visible
-		// effect — see Known Limitations #3 in the test plan.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		// Live preview: the numeric text should no longer contain a decimal point.
-		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
-			/\./,
-		);
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: same assertion.
-		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
-			/\./,
-		);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: restore default 2 decimals and clear the unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 Text-format threshold colors the rendered value text and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds
-		// (defaultOpen={!!thresholds.length}) — expand it first.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-
-		// VALUE panels do not render a threshold label input — only operator,
-		// value, unit, format (Text/Background), and color. Defaults: operator
-		// '>', format 'Text', value 0, color 'Red'. We force operator to '>=' so
-		// the threshold reliably matches non-negative values.
-		const thresholdCard = page.locator('.threshold-container').first();
-		await thresholdCard
-			.getByTestId('operator-input-selector')
-			.click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array). The
-		// dashboard PUT still needs `saveWidgetEdit` after this.
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: value text should now carry an inline color style.
-		const valueText = page.getByTestId('value-graph-text').first();
-		await expect(valueText).toBeVisible();
-		const inlineStyle = await valueText.getAttribute('style');
-		expect(inlineStyle).toMatch(/color:/);
-
-		// Re-open editor and verify the threshold round-tripped.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// The ThresholdsSection defaultOpen is based on threshold count at mount
-		// time; due to async state loading it may start collapsed. Expand it.
-		await expandSection(page, 'Thresholds');
-		await expect(
-			page.locator('.threshold-container').first(),
-		).toBeVisible();
-
-		// Reset — delete the threshold. The delete button is `display:none` by
-		// default and revealed only on `.threshold-card-container:hover`; hover
-		// the card so the CSS :hover rule activates, then click via testid.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
-		// build deployed to the test stack includes the new testid (added in
-		// Threshold.tsx). The class-based fallback is robust meanwhile.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 Background-format threshold paints the value container background', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const thresholdCard = page.locator('.threshold-container').first();
-
-		// Set operator >= and switch format from Text to Background.
-		await thresholdCard.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await thresholdCard.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Dashboard render: .value-graph-container should now have an inline
-		// background-color style. TODO: switch to `getByTestId('value-graph-container')`
-		// once the frontend build deployed to the test stack picks up the testid
-		// added in ValueGraph/index.tsx.
-		const container = page.locator('.value-graph-container').first();
-		await expect(container).toBeVisible();
-		const inlineStyle = await container.getAttribute('style');
-		expect(inlineStyle).toMatch(/background-color:/);
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection may start collapsed even with thresholds — always
-		// expand before interacting with threshold cards.
-		await expandSection(page, 'Thresholds');
-		// Edit/delete buttons are display:none by default, revealed on :hover.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
-		// build deployed to the test stack includes the new testid (added in
-		// Threshold.tsx). The class-based fallback is robust meanwhile.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 clearing the Y-axis unit removes the suffix from the rendered value', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Apply a unit first.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		// Clear it.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-
-		// Suffix should be gone from the rendered panel.
-		await expect(page.getByTestId('value-graph-suffix-unit')).toHaveCount(0);
-	});
-
-	test('TC-09 panel type switch from Number to Time Series persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-		// Time Series exposes Fill gaps — confirm the right pane re-rendered.
-		await expect(page.locator('section.fill-gaps')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Reset: switch back to Number for downstream TCs.
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 sections hidden for VALUE are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Hidden by the panel-type matrix for VALUE — these sections are not
-		// rendered in the DOM at all (conditionally excluded by RightContainer).
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-
-		// Expected to be present in the always-open General and Visualization
-		// sections.
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// The "Formatting & Units" section is collapsed on open — expand it to
-		// verify the controls are rendered for VALUE.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		// The "Thresholds" section is collapsed when there are no thresholds —
-		// expand it to verify the Add Threshold CTA is rendered for VALUE.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-11 discarding right-pane changes does not persist or visually update', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-value-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		// If a discard confirmation appears, OK it. Right-pane-only changes
-		// usually don't trigger one.
-		const confirmDialog = page.getByRole('dialog').last();
-		await confirmDialog
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — the editor navigated away immediately
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/fixtures/querier.py

@@ -200,6 +200,8 @@ def build_formula_query(
     *,
     functions: list[dict] | None = None,
     disabled: bool = False,
+    order: list[dict] | None = None,
+    limit: int | None = None,
 ) -> dict:
     spec: dict[str, Any] = {
         "name": name,
@@ -208,6 +210,10 @@ def build_formula_query(
     }
     if functions:
         spec["functions"] = functions
+    if order:
+        spec["order"] = order
+    if limit is not None:
+        spec["limit"] = limit
     return {"type": "builder_formula", "spec": spec}
 
 

tests/integration/tests/querier/01_logs.py

@@ -11,6 +11,11 @@ from fixtures.logs import Logs
 from fixtures.querier import (
     assert_identical_query_response,
     assert_minutely_bucket_values,
+    build_formula_query,
+    build_group_by_field,
+    build_logs_aggregation,
+    build_order_by,
+    build_scalar_query,
     find_named_result,
     index_series_by_label,
     make_query_request,
@@ -2111,3 +2116,180 @@ def test_logs_fill_zero_formula_with_group_by(
             expected_by_ts=expectations[service_name],
             context=f"logs/fillZero/F1/{service_name}",
         )
+
+
+def test_logs_formula_orderby_and_limit(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_logs: Callable[[list[Logs]], None],
+) -> None:
+    """
+    Test that formula results are correctly ordered and limited when
+    order and limit are applied on the formula.
+    """
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    logs: list[Logs] = []
+    # For service-i (i in 0..9): insert (10 - i) ERROR logs and 2 INFO logs.
+    # A counts ERROR, B counts INFO, so A/B = (10 - i) / 2.
+    # service-0 ratio = 5.0 (highest), service-9 ratio = 0.5 (lowest).
+    for i in range(10):
+        for j in range(10 - i):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=j + 1),
+                    resources={"service.name": f"service-{i}"},
+                    attributes={"code.file": "test.py"},
+                    body=f"Error log {i}-{j}",
+                    severity_text="ERROR",
+                )
+            )
+        for k in range(2):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=k + 1),
+                    resources={"service.name": f"service-{i}"},
+                    attributes={"code.file": "test.py"},
+                    body=f"Info log {i}-{k}",
+                    severity_text="INFO",
+                )
+            )
+    # Extra INFO-only services that appear in B but not in A. The formula
+    for name in ("service-info-only-1", "service-info-only-2"):
+        for k in range(2):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=k + 1),
+                    resources={"service.name": name},
+                    attributes={"code.file": "test.py"},
+                    body=f"Info log {name}-{k}",
+                    severity_text="INFO",
+                )
+            )
+
+    # Logs look like this (columns = minutes before `now`; query range is
+    # (now - 15m, now], so the `now` column is the exclusive upper bound and
+    # no log lands there). E = ERROR, I = INFO, X = both at that minute.
+    #
+    #              t-10 t-9 t-8 t-7 t-6 t-5 t-4 t-3 t-2 t-1 |now |  A  B  A/B
+    # service-0:    E   E   E   E   E   E   E   E   X   X  |    | 10  2  5.0
+    # service-1:    .   E   E   E   E   E   E   E   X   X  |    |  9  2  4.5
+    # service-2:    .   .   E   E   E   E   E   E   X   X  |    |  8  2  4.0
+    # service-3:    .   .   .   E   E   E   E   E   X   X  |    |  7  2  3.5
+    # service-4:    .   .   .   .   E   E   E   E   X   X  |    |  6  2  3.0
+    # service-5:    .   .   .   .   .   E   E   E   X   X  |    |  5  2  2.5
+    # service-6:    .   .   .   .   .   .   E   E   X   X  |    |  4  2  2.0
+    # service-7:    .   .   .   .   .   .   .   E   X   X  |    |  3  2  1.5
+    # service-8:    .   .   .   .   .   .   .   .   X   X  |    |  2  2  1.0
+    # service-9:    .   .   .   .   .   .   .   .   I   X  |    |  1  2  0.5
+    # info-only-1:  .   .   .   .   .   .   .   .   I   I  |    |  0* 2  0.0
+    # info-only-2:  .   .   .   .   .   .   .   .   I   I  |    |  0* 2  0.0
+    #
+    # * A is missing for the info-only services; because A is count(), the
+    #   formula evaluator defaults missing A to 0, yielding A/B = 0.
+    insert_logs(logs)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    result = make_query_request(
+        signoz,
+        token,
+        start_ms=int((now - timedelta(minutes=15)).timestamp() * 1000),
+        end_ms=int(now.timestamp() * 1000),
+        request_type="scalar",
+        queries=[
+            build_scalar_query(
+                name="A",
+                signal="logs",
+                aggregations=[build_logs_aggregation("count()")],
+                group_by=[build_group_by_field("service.name")],
+                filter_expression="severity_text = 'ERROR'",
+                disabled=True,
+            ),
+            build_scalar_query(
+                name="B",
+                signal="logs",
+                aggregations=[build_logs_aggregation("count()")],
+                group_by=[build_group_by_field("service.name")],
+                filter_expression="severity_text = 'INFO'",
+                disabled=True,
+            ),
+            build_formula_query(
+                "F1",
+                "A / B",
+                order=[build_order_by("__result", "desc")],
+                limit=3,
+            ),
+            build_formula_query(
+                "F2",
+                "A / B",
+                order=[build_order_by("__result", "desc")],
+            ),
+            build_formula_query(
+                "F3",
+                "A / B",
+                order=[build_order_by("__result", "asc")],
+                limit=3,
+            ),
+            build_formula_query(
+                "F4",
+                "A / B",
+                order=[build_order_by("__result", "asc")],
+            ),
+        ],
+    )
+    assert result.status_code == HTTPStatus.OK
+    assert result.json()["status"] == "success"
+
+    results = result.json()["data"]["data"]["results"]
+
+    def extract_services_and_values(query_name: str) -> tuple[list, list]:
+        res = find_named_result(results, query_name)
+        assert res is not None, f"Expected formula result named {query_name}"
+        cols = res["columns"]
+        s_col = next(i for i, c in enumerate(cols) if c["name"] == "service.name")
+        v_col = next(i for i, c in enumerate(cols) if c["name"] == "__result")
+        rows = res["data"]
+        return [row[s_col] for row in rows], [row[v_col] for row in rows]
+
+    # Because A is count(), canDefaultZero["A"] is true; the formula evaluator
+    # defaults A to 0 for services that exist only in B. So the two INFO-only
+    # services appear in the formula result with value 0.0 (extreme bottom in
+    # desc order, extreme top in asc order). Their relative ordering is not
+    # deterministic across separate formula evaluations (tied values).
+    info_only_services = {"service-info-only-1", "service-info-only-2"}
+
+    # F2: desc, no limit -> 12 rows in descending order by value.
+    f2_services, f2_values = extract_services_and_values("F2")
+    assert len(f2_services) == 12, f"F2: expected 12 rows with no limit, got {len(f2_services)}"
+    assert f2_values == [5.0, 4.5, 4.0, 3.5, 3.0, 2.5, 2.0, 1.5, 1.0, 0.5, 0.0, 0.0], f2_values
+    # Top 10 have distinct positive values -> deterministic service ordering.
+    assert f2_services[:10] == [f"service-{i}" for i in range(10)], f2_services[:10]
+    # Tail 2 are the INFO-only services tied at 0.0 (order between them not guaranteed).
+    assert set(f2_services[10:]) == info_only_services, f2_services[10:]
+
+    # F1: desc + limit 3 -> must be exactly the first 3 rows of F2.
+    # Top 3 are not in the tie region, so prefix equality is safe.
+    f1_services, f1_values = extract_services_and_values("F1")
+    assert len(f1_services) == 3, f"F1: expected 3 rows after limit, got {len(f1_services)}"
+    assert f1_services == f2_services[:3], f"F1 services {f1_services} are not the prefix of F2 services {f2_services}"
+    assert f1_values == f2_values[:3], f"F1 values {f1_values} are not the prefix of F2 values {f2_values}"
+
+    # F4: asc, no limit -> 12 rows in ascending order by value.
+    f4_services, f4_values = extract_services_and_values("F4")
+    assert len(f4_services) == 12, f"F4: expected 12 rows with no limit, got {len(f4_services)}"
+    assert f4_values == sorted(f4_values), f"F4 not ascending: {f4_values}"
+    # First 2 are the INFO-only services tied at 0.0 (order between them not guaranteed).
+    assert set(f4_services[:2]) == info_only_services, f4_services[:2]
+    assert f4_values[:2] == [0.0, 0.0], f4_values[:2]
+    # Tail 10 are service-9 down to service-0 by value.
+    assert f4_services[2:] == [f"service-{i}" for i in reversed(range(10))], f4_services[2:]
+    assert f4_values[2:] == [(10 - i) / 2 for i in reversed(range(10))], f4_values[2:]
+
+    # F3: asc + limit 3 -> values must match F4[:3] exactly; service set must
+    # match too. Direct prefix equality on services would be flaky because the
+    # two tied INFO-only entries can swap order between formula evaluations.
+    f3_services, f3_values = extract_services_and_values("F3")
+    assert len(f3_services) == 3, f"F3: expected 3 rows after limit, got {len(f3_services)}"
+    assert f3_values == f4_values[:3], f"F3 values {f3_values} do not match F4[:3] values {f4_values[:3]}"
+    assert set(f3_services) == set(f4_services[:3]), f"F3 services {f3_services} do not match F4[:3] services {f4_services[:3]}"