refactor(monaco): render every editor through one shared theme

docs/api/openapi.yml

@@ -11389,7 +11389,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11405,7 +11406,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11418,30 +11420,26 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - alert
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesPostableRuleView:
       properties:
@@ -11530,7 +11528,8 @@ components:
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
-          description: The evaluation window, as a kind and spec.
+          description: The evaluation window, as a kind and spec. Required when schemaVersion
+            is v2alpha1; derived from evalWindow and frequency for v1.
         frequency:
           description: How often the rule is evaluated, as a Go duration such as 1m.
             Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set
@@ -11549,7 +11548,8 @@ components:
         notificationSettings:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
-          description: Grouping, re-notification and routing behaviour.
+          description: Grouping, re-notification and routing behaviour. Required when
+            schemaVersion is v2alpha1; derived from the v1 fields otherwise.
         preferredChannels:
           description: The displayName of each notification channel to notify, for
             schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
@@ -11562,15 +11562,14 @@ components:
           - $ref: '#/components/schemas/RuletypesRuleType'
           description: 'The evaluation strategy: threshold_rule compares against thresholds,
             promql_rule evaluates a PromQL expression, anomaly_rule scores deviation
-            from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql
-            queries and is forced to promql_rule for promql queries.'
+            from seasonal history. Defaults to threshold_rule for builder queries
+            and is forced to promql_rule for promql queries.'
         schemaVersion:
-          description: The rule payload schema.
-          enum:
-          - v2alpha1
+          description: 'The rule payload schema: v1 (the default when omitted) uses
+            the flat condition fields, v2alpha1 uses condition.thresholds, evaluation
+            and notificationSettings.'
           type: string
         source:
-          deprecated: true
           description: The URL of the page the rule was created from. Informational;
             it is not used for evaluation.
           type: string
@@ -11585,8 +11584,8 @@ components:
         updatedBy:
           type: string
         version:
-          deprecated: true
-          description: The query payload version. Nothing reads it.
+          description: The query payload version. Only v5 is accepted and it is filled
+            in when omitted.
           type: string
       required:
       - id
@@ -11595,9 +11594,6 @@ components:
       - alertType
       - ruleType
       - condition
-      - evaluation
-      - schemaVersion
-      - notificationSettings
       type: object
     RuletypesRuleCondition:
       properties:
@@ -11647,7 +11643,8 @@ components:
             against, hourly, daily or weekly.'
         selectedQueryName:
           description: The name of the query whose result is evaluated, such as A
-            or F1. Must match a query in compositeQuery.
+            or F1. Must match a query in compositeQuery. When omitted, F1 is used
+            if present, otherwise the enabled query with the highest name.
           type: string
         target:
           description: 'schemaVersion v1 only: the value compared against, in targetUnit.
@@ -11663,11 +11660,10 @@ components:
         thresholds:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleThresholdData'
-          description: The thresholds to evaluate, as a kind and spec.
+          description: The thresholds to evaluate, as a kind and spec. Required when
+            schemaVersion is v2alpha1; derived from op, target and matchType for v1.
       required:
       - compositeQuery
-      - selectedQueryName
-      - thresholds
       type: object
     RuletypesRuleThresholdData:
       discriminator:
@@ -25316,13 +25312,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -25357,36 +25353,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -26282,13 +26264,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -26323,36 +26305,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -27149,13 +27117,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -27190,36 +27158,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL
@@ -28722,13 +28676,13 @@ paths:
                   schemaVersion: v2alpha1
                   version: v5
               metric_anomaly:
-                description: Wraps a builder query in the `anomaly` function with
-                  daily seasonality, so SigNoz compares each point against the forecast
-                  for that time of day. The threshold is compared against the signed
-                  anomaly score, so `below` with a target of -2 fires when an abrupt
-                  drop holds for the entire window; `requireMinPoints` guards against
-                  noisy intervals.
-                summary: Metric anomaly rule
+                description: Anomaly rules are not yet supported under schemaVersion
+                  v2alpha1, so this example uses the v1 shape. Wraps a builder query
+                  in the `anomaly` function with daily seasonality SigNoz compares
+                  each point against the forecast for that time of day. Fires when
+                  the anomaly score stays below the threshold for the entire window;
+                  `requireMinPoints` guards against noisy intervals.
+                summary: Metric anomaly rule (v1 only)
                 value:
                   alert: Anomalous drop in ingested spans
                   alertType: METRIC_BASED_ALERT
@@ -28763,36 +28717,22 @@ paths:
                           stepInterval: 21600
                         type: builder_query
                       queryType: builder
+                    matchType: all_the_times
+                    op: below
                     requireMinPoints: true
                     requiredNumPoints: 3
                     seasonality: daily
                     selectedQueryName: A
-                    thresholds:
-                      kind: basic
-                      spec:
-                      - channels:
-                        - slack-ingestion
-                        matchType: all_the_times
-                        name: warning
-                        op: below
-                        target: -2
+                    target: 2
                   description: Detect an abrupt drop in span ingestion using a z-score
                     anomaly function
-                  evaluation:
-                    kind: rolling
-                    spec:
-                      evalWindow: 24h
-                      frequency: 3h
+                  evalWindow: 24h
+                  frequency: 3h
                   labels:
                     severity: warning
-                  notificationSettings:
-                    renotify:
-                      alertStates:
-                      - firing
-                      enabled: true
-                      interval: 4h
+                  preferredChannels:
+                  - slack-ingestion
                   ruleType: anomaly_rule
-                  schemaVersion: v2alpha1
                   version: v5
               metric_promql:
                 description: PromQL expression instead of the builder. Dotted OTEL

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

@@ -12584,12 +12584,6 @@ export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesPostableRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export enum RuletypesSeasonalityDTO {
 	hourly = 'hourly',
 	daily = 'daily',
@@ -12666,9 +12660,9 @@ export interface RuletypesRuleConditionDTO {
 	seasonality?: RuletypesSeasonalityDTO;
 	/**
 	 * @type string
-	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery.
+	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name.
 	 */
-	selectedQueryName: string;
+	selectedQueryName?: string;
 	/**
 	 * @type number,null
 	 * @format double
@@ -12681,9 +12675,9 @@ export interface RuletypesRuleConditionDTO {
 	 */
 	targetUnit?: string;
 	/**
-	 * @description The thresholds to evaluate, as a kind and spec.
+	 * @description The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1.
 	 */
-	thresholds: RuletypesRuleThresholdDataDTO;
+	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
 export interface RuletypesPostableRuleDTO {
@@ -12721,9 +12715,9 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12735,24 +12729,23 @@ export interface RuletypesPostableRuleDTO {
 	 */
 	labels?: RuletypesPostableRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesPostableRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12760,7 +12753,7 @@ export interface RuletypesPostableRuleDTO {
 	source?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }
@@ -12783,12 +12776,6 @@ export type RuletypesRuleDTOAnnotations = { [key: string]: string };
  */
 export type RuletypesRuleDTOLabels = { [key: string]: string };
 
-/**
- * The rule payload schema.
- */
-export enum RuletypesRuleDTOSchemaVersion {
-	v2alpha1 = 'v2alpha1',
-}
 export interface RuletypesRuleDTO {
 	/**
 	 * @type string
@@ -12833,9 +12820,9 @@ export interface RuletypesRuleDTO {
 	 */
 	evalWindow?: string;
 	/**
-	 * @description The evaluation window, as a kind and spec.
+	 * @description The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1.
 	 */
-	evaluation: RuletypesEvaluationEnvelopeDTO;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
 	/**
 	 * @type string
 	 * @description How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead.
@@ -12852,24 +12839,23 @@ export interface RuletypesRuleDTO {
 	 */
 	labels?: RuletypesRuleDTOLabels;
 	/**
-	 * @description Grouping, re-notification and routing behaviour.
+	 * @description Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise.
 	 */
-	notificationSettings: RuletypesNotificationSettingsDTO;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
 	 * @description The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels.
 	 */
 	preferredChannels?: string[];
 	/**
-	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries.
+	 * @description The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries.
 	 */
 	ruleType: RuletypesRuleTypeDTO;
 	/**
-	 * @enum v2alpha1
 	 * @type string
-	 * @description The rule payload schema.
+	 * @description The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings.
 	 */
-	schemaVersion: RuletypesRuleDTOSchemaVersion;
+	schemaVersion?: string;
 	/**
 	 * @type string
 	 * @description The URL of the page the rule was created from. Informational; it is not used for evaluation.
@@ -12890,7 +12876,7 @@ export interface RuletypesRuleDTO {
 	updatedBy?: string;
 	/**
 	 * @type string
-	 * @description The query payload version. Nothing reads it.
+	 * @description The query payload version. Only v5 is accepted and it is filled in when omitted.
 	 */
 	version?: string;
 }

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import MEditor, { EditorProps } from '@monaco-editor/react';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import { EditorProps } from '@monaco-editor/react';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 function Editor({
 	value,
@@ -10,8 +10,6 @@ function Editor({
 	height,
 	options,
 }: MEditorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
 	const onChangeHandler = (newValue?: string): void => {
 		if (readOnly) {
 			return;
@@ -28,8 +26,7 @@ function Editor({
 	);
 
 	return (
-		<MEditor
-			theme={isDarkMode ? 'vs-dark' : 'vs-light'}
+		<MonacoEditor
 			language={language}
 			value={value}
 			options={editorOptions}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -129,7 +129,6 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										onChange={handleChangeOperator}
 										operators={operators}
 										className="metrics-operators-select"
-										data-testid="metrics-time-aggregation"
 									/>
 								</div>
 							</div>
@@ -193,10 +192,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										AGGREGATE ACROSS TIME SERIES
 									</div>
 								</Tooltip>
-								<div
-									className="metrics-aggregation-section-content-item-value"
-									data-testid="metrics-space-aggregation"
-								>
+								<div className="metrics-aggregation-section-content-item-value">
 									<SpaceAggregationOptions
 										panelType={panelType}
 										key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}
@@ -233,10 +229,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 				<div className="metrics-space-aggregation-section">
 					<div className="metrics-aggregation-section-content">
 						<div className="metrics-aggregation-section-content-item">
-							<div
-								className="metrics-aggregation-section-content-item-value"
-								data-testid="metrics-space-aggregation"
-							>
+							<div className="metrics-aggregation-section-content-item-value">
 								<SpaceAggregationOptions
 									panelType={panelType}
 									key={`${panelType}${queryAggregation.spaceAggregation}${queryAggregation.timeAggregation}`}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -332,7 +332,6 @@ function HavingFilter({
 					value={input}
 					onChange={handleChange}
 					theme={isDarkMode ? copilot : githubLight}
-					data-testid="having-editor"
 					className="having-filter-select-editor"
 					width="100%"
 					extensions={[

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -615,7 +615,6 @@ function QueryAggregationSelect({
 					setInput(value);
 					onChange?.(value);
 				}}
-				data-testid="query-aggregation-editor"
 				className={`query-aggregation-select-editor ${
 					validationError ? 'error' : ''
 				}`}

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

@@ -1607,7 +1607,6 @@ function QuerySearch({
 					onChange={handleChange}
 					onUpdate={handleUpdate}
 					onCreateEditor={handleEditorCreate}
-					data-testid="query-where-clause-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
@@ -1681,7 +1680,6 @@ function QuerySearch({
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,
 						})}
-						data-testid="query-validation-status"
 					>
 						<Popover
 							placement="bottomRight"

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

@@ -183,7 +183,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 		<div
 			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
 			ref={ref}
-			data-testid={`query-${query.queryName}`}
 		>
 			<div className="qb-content-section">
 				{(!showOnlyWhereClause || showTraceOperator) && (
@@ -247,7 +246,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 							{isMultiQueryAllowed && (
 								<Dropdown
 									items={queryActionItems}
-									testId="query-actions"
 									nativeButton={false}
 									align="end"
 									side="bottom"

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

@@ -61,10 +61,7 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div
-			className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}
-			data-testid="trace-operator"
-		>
+		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -378,7 +378,6 @@ function TraceOperatorEditor({
 					theme={isDarkMode ? copilot : githubLight}
 					onChange={handleChange}
 					onUpdate={handleUpdate}
-					data-testid="trace-operator-editor"
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,

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

@@ -1,17 +1,11 @@
-import MEditor from '@monaco-editor/react';
 import { Play, RotateCcw } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import styles from './TestTab.module.scss';
 import JsonEditorSkeleton from './JsonEditorSkeleton';
 import TestResult from './TestResult';
-import {
-	defineSignozJsonTheme,
-	SIGNOZ_JSON_THEME_DARK,
-	SIGNOZ_JSON_THEME_LIGHT,
-} from './jsonEditorTheme';
 import { UseTestSpanMapper } from './useTestSpanMapper';
 
 interface TestTabProps {
@@ -32,7 +26,6 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 		error,
 		validationError,
 	} = spanTest;
-	const isDarkMode = useIsDarkMode();
 
 	function renderResults(): JSX.Element {
 		if (error) {
@@ -122,14 +115,12 @@ function TestTab({ spanTest }: TestTabProps): JSX.Element {
 					data-testid="test-span-input"
 					aria-label="Sample span JSON"
 				>
-					<MEditor
+					<MonacoEditor
 						language="json"
 						value={input}
 						onChange={(value): void => setInput(value ?? '')}
 						height="100%"
 						loading={<JsonEditorSkeleton />}
-						theme={isDarkMode ? SIGNOZ_JSON_THEME_DARK : SIGNOZ_JSON_THEME_LIGHT}
-						beforeMount={defineSignozJsonTheme}
 						options={{
 							minimap: { enabled: false },
 							fontSize: 12,

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

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

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -112,7 +112,7 @@ export function Formula({
 	);
 
 	return (
-		<Row gutter={[0, 15]} data-testid={`formula-${formula.queryName}`}>
+		<Row gutter={[0, 15]}>
 			<QBEntityOptions
 				isCollapsed={isCollapse}
 				showFunctions={false}
@@ -130,7 +130,6 @@ export function Formula({
 						<Input.TextArea
 							name="expression"
 							className="formula-expression"
-							data-testid="formula-expression"
 							onChange={handleChange}
 							size="middle"
 							value={formula.expression}
@@ -142,7 +141,6 @@ export function Formula({
 						<Input
 							name="legend"
 							className="formula-legend"
-							data-testid="formula-legend"
 							onChange={handleChange}
 							size="middle"
 							value={formula.legend}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -98,7 +98,6 @@ export default function QBEntityOptions({
 									value="search"
 									className="periscope-btn collapse"
 									onClick={onCollapseEntity}
-									data-testid="qb-entity-collapse"
 								>
 									{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
 								</Button>
@@ -109,7 +108,6 @@ export default function QBEntityOptions({
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
 									disabled={isRawQuery && !showTraceOperator}
-									data-testid="qb-entity-visibility"
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -117,11 +115,7 @@ export default function QBEntityOptions({
 
 							{entityType === 'query' && showCloneOption && (
 								<Tooltip title={`Clone Query ${entityData.queryName}`}>
-									<Button
-										className={cx('periscope-btn')}
-										onClick={handleCloneEntity}
-										data-testid="qb-entity-clone"
-									>
+									<Button className={cx('periscope-btn')} onClick={handleCloneEntity}>
 										<Copy size={14} />
 									</Button>
 								</Tooltip>
@@ -137,7 +131,6 @@ export default function QBEntityOptions({
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
 								)}
-								data-testid="qb-entity-name"
 							>
 								{entityData.queryName}
 							</Button>
@@ -192,11 +185,7 @@ export default function QBEntityOptions({
 				</div>
 
 				{showDeleteButton && !isRawQuery && (
-					<Button
-						className="periscope-btn ghost"
-						onClick={onDelete}
-						data-testid="qb-entity-delete"
-					>
+					<Button className="periscope-btn ghost" onClick={onDelete}>
 						<Trash2 size={14} />
 					</Button>
 				)}

frontend/src/container/QueryBuilder/rawQueryEditors/ClickHouse/query.tsx

@@ -1,10 +1,8 @@
 import { ChangeEvent, useCallback } from 'react';
-import MEditor, { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import { LEGEND } from 'constants/global';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 import { IClickHouseQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { getFormatedLegend } from 'utils/getFormatedLegend';
@@ -71,22 +69,6 @@ function ClickHouseQueryBuilder({
 		[handleUpdateQuery],
 	);
 
-	const isDarkMode = useIsDarkMode();
-
-	function setEditorTheme(monaco: Monaco): void {
-		monaco.editor.defineTheme('my-theme', {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-			],
-			colors: {
-				'editor.background': Color.BG_INK_300,
-			},
-		});
-	}
-
 	return (
 		<QueryHeader
 			name={queryData?.name}
@@ -95,15 +77,13 @@ function ClickHouseQueryBuilder({
 			onDelete={handleRemoveQuery}
 			deletable={deletable}
 		>
-			<MEditor
+			<MonacoEditor
 				language="sql"
 				height="200px"
 				onChange={handleUpdateEditor}
 				value={queryData?.query}
 				onMount={(_, monaco): void => {
-					document.fonts.ready.then(() => {
-						monaco.editor.remeasureFonts();
-					});
+					void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
 				}}
 				options={{
 					scrollbar: {
@@ -115,8 +95,6 @@ function ClickHouseQueryBuilder({
 					fontSize: 14,
 					fontFamily: 'Space Mono',
 				}}
-				theme={isDarkMode ? 'my-theme' : 'light'}
-				beforeMount={setEditorTheme}
 			/>
 			<Input
 				onChange={handleUpdateInput}

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

@@ -7,7 +7,7 @@ import {
 	useRef,
 } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor, { Monaco, OnMount } from '@monaco-editor/react';
+import { Monaco, OnMount } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
@@ -15,12 +15,9 @@ import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import type { AuthtypesTransactionGroupDTO } from 'api/generated/services/sigNoz.schemas';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { EDITABLE_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
-import {
-	defineJsonTheme,
-	EDITABLE_EDITOR_OPTIONS,
-	JSON_THEME_DARK,
-} from '../../monaco.config';
 import {
 	transformResourcePermissionsToTransactionGroups,
 	transformTransactionGroupsToResourcePermissions,
@@ -34,7 +31,7 @@ import {
 import styles from './JsonEditor.module.scss';
 import { JsonEditorProps, JsonEditorRef } from './JsonEditor.types';
 
-type MonacoEditor = Parameters<OnMount>[0];
+type MonacoEditorInstance = Parameters<OnMount>[0];
 
 const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 	function JsonEditor({ resources, mode, onChange, onValidityChange }, ref) {
@@ -50,7 +47,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		});
 		const prevModeRef = useRef(mode);
 		const completionDisposableRef = useRef<{ dispose(): void } | null>(null);
-		const editorRef = useRef<MonacoEditor | null>(null);
+		const editorRef = useRef<MonacoEditorInstance | null>(null);
 		const markersListenerRef = useRef<{ dispose(): void } | null>(null);
 
 		const hasError = parseError !== null || schemaErrors.length > 0;
@@ -100,7 +97,6 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 		);
 
 		const configureMonaco = useCallback((monaco: Monaco): void => {
-			defineJsonTheme(monaco);
 			registerJsonSchema(monaco);
 			completionDisposableRef.current = registerCompletionProvider(monaco);
 		}, []);
@@ -184,7 +180,7 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 							</Button>
 						</Tooltip>
 					</div>
-					<MEditor
+					<MonacoEditor
 						value={jsonBuffer}
 						language="json"
 						path={ROLE_PERMISSIONS_MODEL_PATH}
@@ -192,7 +188,6 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 						onChange={handleEditorChange}
 						onMount={handleEditorMount}
 						height="100%"
-						theme={isDarkMode ? JSON_THEME_DARK : 'light'}
 						beforeMount={configureMonaco}
 					/>
 				</div>
@@ -225,7 +220,11 @@ const JsonEditor = forwardRef<JsonEditorRef, JsonEditorProps>(
 								className={styles.jsonEditorErrorMessage}
 							>
 								{schemaErrors[0]}
-								{schemaErrors.length > 1 && ` (+${schemaErrors.length - 1} more)`}
+								{schemaErrors.length > 1 && (
+									<span className="translate-safe">
+										{` (+${schemaErrors.length - 1} more)`}
+									</span>
+								)}
 							</Typography>
 						</div>
 					)}

frontend/src/container/RolesSettings/ViewRolePage/ReadOnlyJsonViewer.tsx

@@ -1,17 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
-import {
-	defineJsonTheme,
-	JSON_THEME_DARK,
-	READONLY_EDITOR_OPTIONS,
-} from '../monaco.config';
 import { RolePermissionsData } from '../types';
 import { transformResourcePermissionsToTransactionGroups } from '../hooks/useRolePermissions';
 
@@ -79,13 +75,11 @@ function ReadOnlyJsonViewer({
 						</Button>
 					</Tooltip>
 				</div>
-				<MEditor
+				<MonacoEditor
 					value={jsonContent}
 					language="json"
 					options={READONLY_EDITOR_OPTIONS}
 					height="100%"
-					theme={isDarkMode ? JSON_THEME_DARK : 'light'}
-					beforeMount={defineJsonTheme}
 				/>
 			</div>
 		</div>

frontend/src/lib/monaco/MonacoEditor.tsx

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
+
+import { EDITOR_THEME, registerEditorTheme } from './editorTheme';
+
+export type MonacoEditorProps = Omit<EditorProps, 'theme'>;
+
+function MonacoEditor({
+	beforeMount,
+	...props
+}: MonacoEditorProps): JSX.Element {
+	const handleBeforeMount = useCallback(
+		(monaco: Monaco): void => {
+			registerEditorTheme(monaco);
+			beforeMount?.(monaco);
+		},
+		[beforeMount],
+	);
+
+	return (
+		<MEditor {...props} theme={EDITOR_THEME} beforeMount={handleBeforeMount} />
+	);
+}
+
+export default MonacoEditor;

frontend/src/lib/monaco/__tests__/MonacoEditor.test.tsx

@@ -0,0 +1,58 @@
+import type { EditorProps, Monaco } from '@monaco-editor/react';
+import { render } from '@testing-library/react';
+
+import { EDITOR_THEME, registerEditorTheme } from '../editorTheme';
+import MonacoEditor from '../MonacoEditor';
+
+const editorProps = jest.fn();
+
+jest.mock('@monaco-editor/react', () => ({
+	__esModule: true,
+	default: (props: EditorProps): JSX.Element => {
+		editorProps(props);
+		return <div data-testid="monaco" />;
+	},
+}));
+
+jest.mock('../editorTheme', () => ({
+	EDITOR_THEME: 'signoz',
+	registerEditorTheme: jest.fn(),
+}));
+
+function lastProps(): EditorProps {
+	return editorProps.mock.calls[editorProps.mock.calls.length - 1][0];
+}
+
+describe('MonacoEditor', () => {
+	beforeEach(() => {
+		editorProps.mockClear();
+		jest.mocked(registerEditorTheme).mockClear();
+	});
+
+	it('renders with the shared theme and forwards the other props', () => {
+		render(<MonacoEditor language="json" value="{}" height="100%" />);
+
+		expect(lastProps()).toMatchObject({
+			theme: EDITOR_THEME,
+			language: 'json',
+			value: '{}',
+			height: '100%',
+		});
+	});
+
+	it('registers the theme before the caller sets up monaco', () => {
+		const calls: string[] = [];
+		jest
+			.mocked(registerEditorTheme)
+			.mockImplementation(() => calls.push('theme'));
+		const beforeMount = jest.fn(() => calls.push('caller'));
+		const monaco = {} as Monaco;
+
+		render(<MonacoEditor beforeMount={beforeMount} />);
+		lastProps().beforeMount?.(monaco);
+
+		expect(registerEditorTheme).toHaveBeenCalledWith(monaco);
+		expect(beforeMount).toHaveBeenCalledWith(monaco);
+		expect(calls).toStrictEqual(['theme', 'caller']);
+	});
+});

frontend/src/lib/monaco/__tests__/editorTheme.test.ts

@@ -0,0 +1,138 @@
+import type { Monaco } from '@monaco-editor/react';
+
+type EditorThemeModule = typeof import('../editorTheme');
+
+const DARK_TOKENS = {
+	'--l1-background': '#0b0c0e',
+	'--l1-foreground': '#eceef2',
+	'--bg-vanilla-400': '#c0c1c3',
+	'--bg-robin-400': '#7190f9',
+};
+
+const LIGHT_TOKENS = {
+	'--l1-background': '#ffffff',
+	'--l1-foreground': '#121317',
+	'--bg-vanilla-400': '#c0c1c3',
+	'--bg-robin-400': '#7190f9',
+};
+
+function setTokens(tokens: Record<string, string>): void {
+	Object.entries(tokens).forEach(([name, value]) => {
+		document.body.style.setProperty(name, value);
+	});
+}
+
+function createMonaco(): { monaco: Monaco; defineTheme: jest.Mock } {
+	const defineTheme = jest.fn();
+	return {
+		monaco: { editor: { defineTheme } } as unknown as Monaco,
+		defineTheme,
+	};
+}
+
+function loadModule(): EditorThemeModule {
+	let mod: EditorThemeModule | undefined;
+	jest.isolateModules(() => {
+		mod = jest.requireActual<EditorThemeModule>('../editorTheme');
+	});
+	return mod as EditorThemeModule;
+}
+
+async function flushMutations(): Promise<void> {
+	await Promise.resolve();
+}
+
+describe('registerEditorTheme', () => {
+	afterEach(() => {
+		document.body.removeAttribute('style');
+		document.body.className = '';
+	});
+
+	it('defines a dark theme with the JSON token colours on a dark surface', () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme, EDITOR_THEME } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+
+		registerEditorTheme(monaco);
+
+		expect(defineTheme).toHaveBeenCalledTimes(1);
+		expect(defineTheme).toHaveBeenCalledWith(EDITOR_THEME, {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: 'c0c1c3' },
+				{ token: 'string.value.json', foreground: '7190f9' },
+			],
+			colors: {
+				'editor.background': '#0b0c0e',
+				'editor.foreground': '#eceef2',
+			},
+		});
+	});
+
+	it('keeps the vs palette on a light surface', () => {
+		setTokens(LIGHT_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+
+		registerEditorTheme(monaco);
+
+		expect(defineTheme).toHaveBeenCalledWith(
+			expect.any(String),
+			expect.objectContaining({
+				base: 'vs',
+				rules: [],
+				colors: {
+					'editor.background': '#ffffff',
+					'editor.foreground': '#121317',
+				},
+			}),
+		);
+	});
+
+	it('redefines the theme when the body class switches the tokens', async () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+
+		setTokens(LIGHT_TOKENS);
+		document.body.classList.add('lightMode');
+		await flushMutations();
+
+		expect(defineTheme).toHaveBeenCalledTimes(2);
+		expect(defineTheme).toHaveBeenLastCalledWith(
+			expect.any(String),
+			expect.objectContaining({ base: 'vs' }),
+		);
+	});
+
+	it('ignores body class changes that leave the tokens alone', async () => {
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+
+		document.body.classList.add('ant-scrolling-effect');
+		await flushMutations();
+
+		expect(defineTheme).toHaveBeenCalledTimes(1);
+	});
+
+	it('watches the body once however many editors mount', async () => {
+		const observe = jest.spyOn(MutationObserver.prototype, 'observe');
+		setTokens(DARK_TOKENS);
+		const { registerEditorTheme } = loadModule();
+		const { monaco, defineTheme } = createMonaco();
+		registerEditorTheme(monaco);
+		registerEditorTheme(monaco);
+
+		setTokens(LIGHT_TOKENS);
+		document.body.classList.add('lightMode');
+		await flushMutations();
+
+		expect(observe).toHaveBeenCalledTimes(1);
+		expect(defineTheme).toHaveBeenCalledTimes(2);
+		observe.mockRestore();
+	});
+});

frontend/src/lib/monaco/editorOptions.ts

@@ -1,24 +1,7 @@
 import { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 
 type EditorOptions = Parameters<Monaco['editor']['create']>[1];
 
-export const JSON_THEME_DARK = 'json-theme-dark';
-
-export function defineJsonTheme(monaco: Monaco): void {
-	monaco.editor.defineTheme(JSON_THEME_DARK, {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: {
-			'editor.background': Color.BG_INK_400,
-		},
-	});
-}
-
 const BASE_EDITOR_OPTIONS: EditorOptions = {
 	automaticLayout: true,
 	wordWrap: 'on',

frontend/src/lib/monaco/editorTheme.ts

@@ -0,0 +1,78 @@
+import type { Monaco } from '@monaco-editor/react';
+
+export const EDITOR_THEME = 'signoz';
+
+let definedBackground: string | undefined;
+let bodyClassObserver: MutationObserver | undefined;
+
+function token(name: string): string {
+	return getComputedStyle(document.body)
+		.getPropertyValue(name)
+		.trim()
+		.replace('#', '');
+}
+
+function isDark(hex: string): boolean {
+	if (hex.length < 6) {
+		return true;
+	}
+	const r = parseInt(hex.slice(0, 2), 16);
+	const g = parseInt(hex.slice(2, 4), 16);
+	const b = parseInt(hex.slice(4, 6), 16);
+	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
+}
+
+function defineEditorTheme(monaco: Monaco): void {
+	const background = token('--l1-background');
+	if (background === definedBackground) {
+		return;
+	}
+	definedBackground = background;
+
+	const foreground = token('--l1-foreground');
+	const keyColor = token('--bg-vanilla-400');
+	const valueColor = token('--bg-robin-400');
+
+	// Both token colours are picked to read on a dark surface, so on a light one
+	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
+	// for that surface, so let it keep its colours there, as the role viewer does.
+	const rules: { token: string; foreground: string }[] = [];
+	if (isDark(background)) {
+		if (keyColor) {
+			rules.push({ token: 'string.key.json', foreground: keyColor });
+		}
+		if (valueColor) {
+			rules.push({ token: 'string.value.json', foreground: valueColor });
+		}
+	}
+
+	const colors: Record<string, string> = {};
+	if (background) {
+		colors['editor.background'] = `#${background}`;
+	}
+	if (foreground) {
+		colors['editor.foreground'] = `#${foreground}`;
+	}
+
+	monaco.editor.defineTheme(EDITOR_THEME, {
+		base: isDark(background) ? 'vs-dark' : 'vs',
+		inherit: true,
+		rules,
+		colors,
+	});
+}
+
+// Monaco has a single theme for every editor on the page, and the design tokens
+// switch with the body's `dark` class, so the theme follows that class instead
+// of being defined per editor.
+export function registerEditorTheme(monaco: Monaco): void {
+	defineEditorTheme(monaco);
+	if (bodyClassObserver) {
+		return;
+	}
+	bodyClassObserver = new MutationObserver(() => defineEditorTheme(monaco));
+	bodyClassObserver.observe(document.body, {
+		attributes: true,
+		attributeFilter: ['class'],
+	});
+}

frontend/src/lib/monaco/jsonEditorTheme.ts

@@ -1,52 +0,0 @@
-import type { Monaco } from '@monaco-editor/react';
-
-export const JSON_EDITOR_THEME = 'signoz-json';
-
-function token(el: HTMLElement, name: string): string {
-	return getComputedStyle(el).getPropertyValue(name).trim().replace('#', '');
-}
-
-function isDark(hex: string): boolean {
-	if (hex.length < 6) {
-		return true;
-	}
-	const r = parseInt(hex.slice(0, 2), 16);
-	const g = parseInt(hex.slice(2, 4), 16);
-	const b = parseInt(hex.slice(4, 6), 16);
-	return 0.299 * r + 0.587 * g + 0.114 * b < 128;
-}
-
-export function defineJsonEditorTheme(monaco: Monaco, el: HTMLElement): void {
-	const background = token(el, '--l1-background');
-	const foreground = token(el, '--l1-foreground');
-	const keyColor = token(el, '--bg-vanilla-400');
-	const valueColor = token(el, '--bg-robin-400');
-
-	// Both token colours are picked to read on a dark surface, so on a light one
-	// they wash out, the keys worst of all. Monaco's own `vs` palette is built
-	// for that surface, so let it keep its colours there, as the role viewer does.
-	const rules: { token: string; foreground: string }[] = [];
-	if (isDark(background)) {
-		if (keyColor) {
-			rules.push({ token: 'string.key.json', foreground: keyColor });
-		}
-		if (valueColor) {
-			rules.push({ token: 'string.value.json', foreground: valueColor });
-		}
-	}
-
-	const colors: Record<string, string> = {};
-	if (background) {
-		colors['editor.background'] = `#${background}`;
-	}
-	if (foreground) {
-		colors['editor.foreground'] = `#${foreground}`;
-	}
-
-	monaco.editor.defineTheme(JSON_EDITOR_THEME, {
-		base: isDark(background) ? 'vs-dark' : 'vs',
-		inherit: true,
-		rules,
-		colors,
-	});
-}

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

@@ -1,10 +1,8 @@
 import {
 	RuletypesAlertStateDTO,
 	RuletypesAlertTypeDTO,
-	RuletypesEvaluationRollingDTOKind,
 	RuletypesPanelTypeDTO,
 	RuletypesQueryTypeDTO,
-	RuletypesRuleDTOSchemaVersion,
 	RuletypesRuleTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type {
@@ -40,12 +38,6 @@ const make = (
 	evalWindow: '5m0s',
 	frequency: '1m0s',
 	ruleType: RuletypesRuleTypeDTO.threshold_rule,
-	schemaVersion: RuletypesRuleDTOSchemaVersion.v2alpha1,
-	evaluation: {
-		kind: RuletypesEvaluationRollingDTOKind.rolling,
-		spec: { evalWindow: '5m0s', frequency: '1m0s' },
-	},
-	notificationSettings: { usePolicy: false, renotify: { enabled: false } },
 	...overrides,
 });
 

frontend/src/pages/AlertList/NotificationChannels/components/ChannelJsonDialog/ChannelJsonDialog.tsx

@@ -1,15 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import MEditor from '@monaco-editor/react';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { useGetNotificationChannel } from 'api/generated/services/channels';
 import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
 import Spinner from 'components/Spinner';
-import { READONLY_EDITOR_OPTIONS } from 'container/RolesSettings/monaco.config';
-import {
-	defineJsonEditorTheme,
-	JSON_EDITOR_THEME,
-} from 'lib/monaco/jsonEditorTheme';
+import { READONLY_EDITOR_OPTIONS } from 'lib/monaco/editorOptions';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import { channelToJson, hasSecrets } from '../../utils/channelJson';
 import styles from './ChannelJsonDialog.module.scss';
@@ -92,18 +88,11 @@ function ChannelJsonDialog({
 					/>
 
 					<div className={styles.editor}>
-						<MEditor
+						<MonacoEditor
 							value={json}
 							language="json"
 							options={READONLY_EDITOR_OPTIONS}
 							height="100%"
-							theme="vs-dark"
-							// the same theme the dashboard JSON drawer uses: it reads the
-							// page's own tokens, so it follows light and dark
-							onMount={(editor, monaco): void => {
-								defineJsonEditorTheme(monaco, editor.getContainerDomNode());
-								monaco.editor.setTheme(JSON_EDITOR_THEME);
-							}}
 						/>
 					</div>
 				</div>

frontend/src/pages/AlertList/stories/__story_mockdata__/alerts.ts

@@ -18,7 +18,6 @@ import {
 	RuletypesMatchTypeDTO,
 	RuletypesPanelTypeDTO,
 	RuletypesQueryTypeDTO,
-	RuletypesRuleDTOSchemaVersion,
 	RuletypesRuleTypeDTO,
 	RuletypesSeasonalityDTO,
 	RuletypesThresholdBasicDTOKind,
@@ -35,6 +34,7 @@ import {
 	type AlertmanagertypesGettableNotificationChannelDTO,
 	type AlertmanagertypesListedNotificationChannelDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { NEW_ALERT_SCHEMA_VERSION } from 'types/api/alerts/alertTypesV2';
 
 const MINUTE = 60 * 1000;
 const HOUR = 60 * MINUTE;
@@ -388,18 +388,18 @@ const buildRule = (index: number, shape: RuleShape): RuletypesRuleDTO => {
 		},
 		evalWindow: isAnomaly ? '1h0m0s' : '5m0s',
 		frequency: '1m0s',
-		evaluation: {
-			kind: RuletypesEvaluationRollingDTOKind.rolling,
-			spec: { evalWindow: isAnomaly ? '1h0m0s' : '5m0s', frequency: '1m0s' },
-		},
+		...(isAnomaly && {
+			evaluation: {
+				kind: RuletypesEvaluationRollingDTOKind.rolling,
+				spec: { evalWindow: '1h0m0s', frequency: '1m0s' },
+			},
+		}),
 		createdAt: ago((index + 3) * DAY),
 		updatedAt: ago((index + 1) * HOUR),
 		createdBy: 'ada@signoz.io',
 		updatedBy: 'grace@signoz.io',
-		// classic rows predate schemaVersion, which the spec now requires
-		schemaVersion: (shape.schema === 'classic'
-			? undefined
-			: RuletypesRuleDTOSchemaVersion.v2alpha1) as RuletypesRuleDTOSchemaVersion,
+		schemaVersion:
+			shape.schema === 'classic' ? undefined : NEW_ALERT_SCHEMA_VERSION,
 		version: 'v5',
 		source: 'http://localhost/alerts',
 		preferredChannels: ['ops-slack'],

frontend/src/pages/DashboardPage/DashboardContainer/DashboardPageToolbar/JsonEditorDrawer/JsonEditorDrawer.tsx

@@ -1,5 +1,4 @@
 import { KeyboardEvent, useCallback } from 'react';
-import MEditor from '@monaco-editor/react';
 import { TriangleAlert } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -12,10 +11,7 @@ import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import { useCopyToClipboard } from 'react-use';
 import { toast } from '@signozhq/ui/sonner';
 
-import {
-	defineJsonEditorTheme,
-	JSON_EDITOR_THEME,
-} from 'lib/monaco/jsonEditorTheme';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 import styles from './JsonEditorDrawer.module.scss';
 import JsonEditorToolbar from './JsonEditorToolbar';
 import { useJsonEditor } from './useJsonEditor';
@@ -213,7 +209,7 @@ function JsonEditorDrawer({
 					onReset={reset}
 				/>
 				<div className={styles.editor}>
-					<MEditor
+					<MonacoEditor
 						language="json"
 						height="100%"
 						value={draft}
@@ -225,10 +221,7 @@ function JsonEditorDrawer({
 							fontSize: 13,
 							fontFamily: 'Space Mono',
 						}}
-						theme="vs-dark"
-						onMount={(editor, monaco): void => {
-							defineJsonEditorTheme(monaco, editor.getContainerDomNode());
-							monaco.editor.setTheme(JSON_EDITOR_THEME);
+						onMount={(_editor, monaco): void => {
 							void document.fonts.ready.then(() => monaco.editor.remeasureFonts());
 						}}
 					/>

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -166,10 +166,7 @@ function PanelEditorQueryBuilder({
 		return modes.map((queryType) => ({
 			key: queryType,
 			label: (
-				<div
-					className={styles.queryTypeTab}
-					data-testid={`query-type-tab-${queryType}`}
-				>
+				<div className={styles.queryTypeTab}>
 					{queryTypeComponents[queryType].icon}
 					<Typography>{queryTypeComponents[queryType].label}</Typography>
 				</div>

frontend/src/pages/DashboardPage/PanelEditorPage/stories/PanelEditorPage.stories.tsx

@@ -1,11 +1,13 @@
 import type { ComponentType } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Route } from 'react-router-dom';
+import * as monaco from 'monaco-editor';
 import ROUTES from 'constants/routes';
-import { screen, userEvent, within } from 'storybook/test';
+import { screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import { panelEditorMocks, savePanel } from './PanelEditorPage.stories.mocks';
 
@@ -249,3 +251,43 @@ export const TextPanelSavedToast: Story = {
 	args: { panel: 'new', newPanelKind: 'text' },
 	play: PanelSavedToast.play,
 };
+
+const CLICKHOUSE_QUERY =
+	'SELECT toStartOfInterval(timestamp, INTERVAL 1 MINUTE) AS ts, serviceName, count() AS calls FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp > now() - INTERVAL 1 HOUR GROUP BY ts, serviceName ORDER BY ts';
+
+/**
+ * The ClickHouse Query tab with a query written in its SQL editor, over the
+ * panel the editor opened on.
+ */
+export const ClickHouseQuery: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const tab = await within(canvasElement).findByRole(
+			'tab',
+			{ name: /ClickHouse Query/ },
+			{ timeout: 10000 },
+		);
+
+		await userEvent.click(tab);
+
+		// Typing into Monaco's hidden textarea never reaches its model in this runner.
+		const model = await waitFor(
+			() => {
+				const found = monaco.editor
+					.getModels()
+					.find((candidate) => candidate.getLanguageId() === 'sql');
+
+				if (!found) {
+					throw new Error('The SQL editor has not mounted');
+				}
+
+				return found;
+			},
+			{ timeout: 15000 },
+		);
+
+		model.setValue(CLICKHOUSE_QUERY);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(tab);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/pages/DashboardsListPage/components/NewDashboardModal/JsonEditor.tsx

@@ -1,10 +1,8 @@
 import { useState } from 'react';
-import MEditor, { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { Maximize2 } from '@signozhq/icons';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import styles from './NewDashboardModal.module.scss';
 
@@ -15,18 +13,6 @@ interface Props {
 	height?: string;
 }
 
-const defineTheme = (monaco: Monaco): void => {
-	monaco.editor.defineTheme('my-theme', {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: { 'editor.background': Color.BG_INK_300 },
-	});
-};
-
 // JSON editor with a one-click "expand" into an extra-wide modal for easier
 // editing/review. The expanded editor shares the same value, so edits persist.
 function JsonEditor({
@@ -35,11 +21,10 @@ function JsonEditor({
 	readOnly = false,
 	height = '38vh',
 }: Props): JSX.Element {
-	const isDarkMode = useIsDarkMode();
 	const [expanded, setExpanded] = useState(false);
 
 	const renderEditor = (editorHeight: string): JSX.Element => (
-		<MEditor
+		<MonacoEditor
 			language="json"
 			height={editorHeight}
 			value={value}
@@ -51,8 +36,6 @@ function JsonEditor({
 				fontSize: 14,
 				fontFamily: 'Space Mono',
 			}}
-			theme={isDarkMode ? 'my-theme' : 'light'}
-			beforeMount={defineTheme}
 		/>
 	);
 

frontend/src/pages/LLMObservability/AttributeMapping/stories/AttributeMapping.stories.tsx

@@ -3,6 +3,7 @@ import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import LLMObservabilityPage from '../../index';
 import {
@@ -101,3 +102,21 @@ export const ChangesSavedToast: Story = {
 		}
 	},
 };
+
+/**
+ * The Test tab: the JSON editor pre-filled with the sample span, before any run.
+ */
+export const TestTab: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const tab = await within(canvasElement).findByRole(
+			'tab',
+			{ name: 'Test' },
+			{ timeout: 10000 },
+		);
+
+		await userEvent.click(tab);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(tab);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/pages/TraceDetailsV3/stories/TraceDetailsV3.stories.tsx

@@ -12,6 +12,7 @@ import {
 
 import { storyMocks } from '@/storybook/controls/defineStoryMocks';
 import type { PageStoryArgs } from '@/storybook/runtime/resolveStory';
+import { waitForMonacoText } from '@/storybook/visual/waitForMonacoText';
 
 import {
 	focusSpanIndex,
@@ -325,3 +326,19 @@ export const TraceExportCancelledToast: Story = {
 		await userEvent.click(await screen.findByTestId('trace-download-cancel'));
 	},
 };
+
+/** The span panel switched from the pretty view to the span's raw JSON. */
+export const SpanJsonView: Story = {
+	play: async ({ canvasElement }): Promise<void> => {
+		const option = await within(canvasElement).findByTestId(
+			'data-viewer-view-mode-button-json',
+			undefined,
+			untilLoaded,
+		);
+
+		await userEvent.click(option);
+		await waitForMonacoText(canvasElement);
+		await userEvent.unhover(option);
+		(document.activeElement as HTMLElement | null)?.blur();
+	},
+};

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
-import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
+import { EditorProps } from '@monaco-editor/react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import MonacoEditor from 'lib/monaco/MonacoEditor';
 
 import './JsonView.styles.scss';
 
@@ -38,36 +37,16 @@ const editorOptions: EditorProps['options'] = {
 	folding: false,
 };
 
-function setEditorTheme(monaco: Monaco): void {
-	monaco.editor.defineTheme('signoz-dark', {
-		base: 'vs-dark',
-		inherit: true,
-		rules: [
-			{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-			{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-		],
-		colors: {
-			'editor.background': '#00000000', // transparent
-		},
-		fontFamily: 'SF Mono, Geist Mono, Fira Code, monospace',
-		fontSize: 12,
-		fontWeight: 'normal',
-		lineHeight: 18,
-		letterSpacing: -0.06,
-	});
-}
-
 function JsonView({
 	data,
 	height = '575px',
 	fontSize = 12,
 }: JsonViewProps): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState(true);
-	const isDarkMode = useIsDarkMode();
 
 	return (
 		<div className="json-view">
-			<MEditor
+			<MonacoEditor
 				value={data}
 				language="json"
 				options={{
@@ -77,8 +56,6 @@ function JsonView({
 				}}
 				onChange={(): void => {}}
 				height={height}
-				theme={isDarkMode ? 'signoz-dark' : 'light'}
-				beforeMount={setEditorTheme}
 			/>
 			<div className="json-view__footer">
 				<div className="json-view__wrap-toggle">

frontend/src/storybook/visual/waitForMonacoText.ts

@@ -0,0 +1,26 @@
+import { waitFor } from 'storybook/test';
+
+/**
+ * Monaco mounts its container before its language loads, so the editor is on
+ * screen while still blank or uncoloured. Waits for text with at least two
+ * token colours, which only exists once the tokenizer has run.
+ */
+export const waitForMonacoText = async (
+	canvasElement: HTMLElement,
+): Promise<void> => {
+	await waitFor(
+		() => {
+			const lines = canvasElement.querySelector('.monaco-editor .view-lines');
+			const tokens = new Set(
+				Array.from(lines?.querySelectorAll('span[class^="mtk"]') ?? []).map(
+					(token) => token.className,
+				),
+			);
+
+			if (!lines?.textContent?.trim() || tokens.size < 2) {
+				throw new Error('Monaco has not rendered its text');
+			}
+		},
+		{ timeout: 15_000 },
+	);
+};

pkg/apiserver/signozapiserver/ruler_examples.go

@@ -221,15 +221,16 @@ func postableRuleExamples() []handler.OpenAPIExample {
 		},
 		{
 			Name:        "metric_anomaly",
-			Summary:     "Metric anomaly rule",
-			Description: "Wraps a builder query in the `anomaly` function with daily seasonality, so SigNoz compares each point against the forecast for that time of day. The threshold is compared against the signed anomaly score, so `below` with a target of -2 fires when an abrupt drop holds for the entire window; `requireMinPoints` guards against noisy intervals.",
+			Summary:     "Metric anomaly rule (v1 only)",
+			Description: "Anomaly rules are not yet supported under schemaVersion v2alpha1, so this example uses the v1 shape. Wraps a builder query in the `anomaly` function with daily seasonality SigNoz compares each point against the forecast for that time of day. Fires when the anomaly score stays below the threshold for the entire window; `requireMinPoints` guards against noisy intervals.",
 			Value: map[string]any{
-				"alert":         "Anomalous drop in ingested spans",
-				"alertType":     "METRIC_BASED_ALERT",
-				"description":   "Detect an abrupt drop in span ingestion using a z-score anomaly function",
-				"ruleType":      "anomaly_rule",
-				"version":       "v5",
-				"schemaVersion": "v2alpha1",
+				"alert":       "Anomalous drop in ingested spans",
+				"alertType":   "METRIC_BASED_ALERT",
+				"description": "Detect an abrupt drop in span ingestion using a z-score anomaly function",
+				"ruleType":    "anomaly_rule",
+				"version":     "v5",
+				"evalWindow":  "24h",
+				"frequency":   "3h",
 				"condition": map[string]any{
 					"compositeQuery": map[string]any{
 						"queryType": "builder",
@@ -255,29 +256,17 @@ func postableRuleExamples() []handler.OpenAPIExample {
 							},
 						},
 					},
+					"op":                "below",
+					"matchType":         "all_the_times",
+					"target":            2,
 					"algorithm":         "standard",
 					"seasonality":       "daily",
 					"selectedQueryName": "A",
 					"requireMinPoints":  true,
 					"requiredNumPoints": 3,
-					"thresholds": map[string]any{
-						"kind": "basic",
-						"spec": []any{
-							map[string]any{
-								"name":      "warning",
-								"op":        "below",
-								"matchType": "all_the_times",
-								"target":    -2,
-								"channels":  []any{"slack-ingestion"},
-							},
-						},
-					},
 				},
-				"evaluation": rolling("24h", "3h"),
-				"notificationSettings": map[string]any{
-					"renotify": renotify("4h", "firing"),
-				},
-				"labels": map[string]any{"severity": "warning"},
+				"labels":            map[string]any{"severity": "warning"},
+				"preferredChannels": []any{"slack-ingestion"},
 				"annotations": map[string]any{
 					"description": "Ingestion rate for tenant {{$tenant_id}} is anomalously low (z-score {{$value}}).",
 					"summary":     "Span ingestion anomaly",

pkg/types/ruletypes/alerting.go

@@ -117,10 +117,10 @@ type RuleCondition struct {
 	TargetUnit        string               `json:"targetUnit,omitempty" description:"schemaVersion v1 only: the unit of target, such as percent or ms. Converted to compositeQuery.unit before comparison when the two differ."`
 	Algorithm         string               `json:"algorithm,omitempty" description:"anomaly_rule only: the anomaly detection algorithm. The supported value is standard."`
 	Seasonality       Seasonality          `json:"seasonality,omitzero" description:"anomaly_rule only: the seasonal period the history is compared against, hourly, daily or weekly."`
-	SelectedQuery     string               `json:"selectedQueryName,omitempty" required:"true" description:"The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery."`
+	SelectedQuery     string               `json:"selectedQueryName,omitempty" description:"The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery. When omitted, F1 is used if present, otherwise the enabled query with the highest name."`
 	RequireMinPoints  bool                 `json:"requireMinPoints,omitempty" description:"Whether a series is skipped until it has at least requiredNumPoints points in the window. Defaults to false."`
 	RequiredNumPoints int                  `json:"requiredNumPoints,omitempty" description:"The minimum number of points a series needs before it is evaluated. Must be greater than 0 when requireMinPoints is true."`
-	Thresholds        *RuleThresholdData   `json:"thresholds,omitempty" required:"true" description:"The thresholds to evaluate, as a kind and spec."`
+	Thresholds        *RuleThresholdData   `json:"thresholds,omitempty" description:"The thresholds to evaluate, as a kind and spec. Required when schemaVersion is v2alpha1; derived from op, target and matchType for v1."`
 }
 
 func (rc *RuleCondition) SelectedQueryName() string {

pkg/types/ruletypes/api_params.go

@@ -9,7 +9,6 @@ import (
 	"unicode/utf8"
 
 	"github.com/prometheus/alertmanager/config"
-	"github.com/swaggest/jsonschema-go"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -64,7 +63,7 @@ type PostableRule struct {
 	AlertName   valuer.DisplayName  `json:"alert" required:"true" description:"The display name of the alert rule."`
 	AlertType   AlertType           `json:"alertType" required:"true" description:"The signal the rule evaluates: METRIC_BASED_ALERT, TRACES_BASED_ALERT, LOGS_BASED_ALERT, EXCEPTIONS_BASED_ALERT or AI_TRACES_BASED_ALERT."`
 	Description string              `json:"description,omitempty" description:"A human readable description of what the rule monitors."`
-	RuleType    RuleType            `json:"ruleType" required:"true" description:"The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder and clickhouse_sql queries and is forced to promql_rule for promql queries."`
+	RuleType    RuleType            `json:"ruleType" required:"true" description:"The evaluation strategy: threshold_rule compares against thresholds, promql_rule evaluates a PromQL expression, anomaly_rule scores deviation from seasonal history. Defaults to threshold_rule for builder queries and is forced to promql_rule for promql queries."`
 	EvalWindow  valuer.TextDuration `json:"evalWindow,omitzero" description:"The lookback window as a Go duration such as 5m. Only read when schemaVersion is v1, defaulting to 5m; v2alpha1 rules set it in evaluation.spec instead."`
 	Frequency   valuer.TextDuration `json:"frequency,omitzero" description:"How often the rule is evaluated, as a Go duration such as 1m. Only read when schemaVersion is v1, defaulting to 1m; v2alpha1 rules set it in evaluation.spec instead."`
 
@@ -78,12 +77,12 @@ type PostableRule struct {
 
 	PreferredChannels []string `json:"preferredChannels,omitempty" description:"The displayName of each notification channel to notify, for schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries its own channels."`
 
-	Version string `json:"version" description:"The query payload version. Nothing reads it."`
+	Version string `json:"version" description:"The query payload version. Only v5 is accepted and it is filled in when omitted."`
 
-	Evaluation    *EvaluationEnvelope `json:"evaluation,omitempty" required:"true" description:"The evaluation window, as a kind and spec."`
-	SchemaVersion string              `json:"schemaVersion,omitempty" required:"true" enum:"v2alpha1" description:"The rule payload schema."`
+	Evaluation    *EvaluationEnvelope `json:"evaluation,omitempty" description:"The evaluation window, as a kind and spec. Required when schemaVersion is v2alpha1; derived from evalWindow and frequency for v1."`
+	SchemaVersion string              `json:"schemaVersion,omitempty" description:"The rule payload schema: v1 (the default when omitted) uses the flat condition fields, v2alpha1 uses condition.thresholds, evaluation and notificationSettings."`
 
-	NotificationSettings *NotificationSettings `json:"notificationSettings,omitempty" required:"true" description:"Grouping, re-notification and routing behaviour."`
+	NotificationSettings *NotificationSettings `json:"notificationSettings,omitempty" description:"Grouping, re-notification and routing behaviour. Required when schemaVersion is v2alpha1; derived from the v1 fields otherwise."`
 }
 
 type NotificationSettings struct {
@@ -336,19 +335,6 @@ func (r *PostableRule) UnmarshalJSON(bytes []byte) error {
 	return r.validate()
 }
 
-var _ jsonschema.Preparer = PostableRule{}
-
-// PrepareJSONSchema marks version and source deprecated: nothing reads them,
-// they stay only so existing clients keep a stable schema.
-func (PostableRule) PrepareJSONSchema(schema *jsonschema.Schema) error {
-	for _, name := range []string{"version", "source"} {
-		if property, ok := schema.Properties[name]; ok && property.TypeObject != nil {
-			property.TypeObject.WithDeprecated(true)
-		}
-	}
-	return nil
-}
-
 func isValidLabelName(ln string) bool {
 	if len(ln) == 0 {
 		return false

tests/e2e/drivers/query-builder.ts

@@ -1,715 +0,0 @@
-/**
- * AI-owned. Generated and maintained by coding agents alongside the specs that
- * use it. Do not hand-edit: regenerate it with the spec that needs the change.
- */
-import {
-	expect,
-	type Locator,
-	type Page,
-	type Request,
-} from '@playwright/test';
-
-import { ownDropdown } from '../helpers/alert-forms/shared';
-import { postToSeeder } from '../helpers/alerts/seeding';
-import { watchConsole, type ConsoleWatch } from '../helpers/common';
-import { isQueryRange } from '../helpers/query-range-mock';
-import { dismissQuickFiltersAnnouncement } from '../helpers/quick-filters';
-
-import { driver, kit, seeded } from './kit';
-
-export const EXPLORER = {
-	logs: '/logs/logs-explorer',
-	traces: '/traces-explorer',
-	metrics: '/metrics-explorer/explorer',
-} as const;
-
-/** A monotonic Sum in the golden dataset. */
-export const SUM_METRIC = 'signoz_calls_total';
-/** Another golden Sum, for switching between metrics of one type. */
-export const OTHER_SUM_METRIC = 'signoz_latency_count';
-
-/** The golden dataset has only Sums; these are seeded per worker. */
-export interface MetricTypes {
-	gauge: string;
-	histogram: string;
-}
-
-/** Inside the golden dataset's window. */
-export const RELATIVE_TIME = '6h';
-
-/** One entry of a v5 `query_range` body's `compositeQuery.queries`. */
-export interface V5Query {
-	type: string;
-	spec: {
-		name?: string;
-		signal?: string;
-		disabled?: boolean;
-		filter?: { expression?: string };
-		aggregations?: {
-			expression?: string;
-			metricName?: string;
-			timeAggregation?: string;
-			spaceAggregation?: string;
-			reduceTo?: string;
-		}[];
-		groupBy?: { name: string }[];
-		having?: { expression?: string };
-		order?: { key: { name: string }; direction: string }[];
-		limit?: number;
-		stepInterval?: number;
-		[key: string]: unknown;
-	};
-}
-
-export interface V5Body {
-	requestType: string;
-	compositeQuery: { queries: V5Query[] };
-}
-
-export interface FilterEditor {
-	root(): Locator;
-	/** The contenteditable CodeMirror surface. */
-	content(): Locator;
-	/** Replaces the expression by typing it key by key. */
-	type(text: string): Promise<void>;
-	/** Appends at the caret without clearing. */
-	append(text: string): Promise<void>;
-	clear(): Promise<void>;
-	press(key: string): Promise<void>;
-	/** The document text, placeholder excluded, lines joined with `\n`. */
-	expression(): Promise<string>;
-	lineCount(): Locator;
-	/** The open autocomplete popup. */
-	suggestions(): Locator;
-	/**
-	 * Ctrl+Space: opens the popup at the caret. Typing opens it only once the
-	 * debounced key fetch answers, which a loaded stack can delay past a test's
-	 * next step.
-	 */
-	openSuggestions(): Promise<void>;
-	suggestion(label: string | RegExp): Locator;
-}
-
-export interface QueryBlock {
-	root(): Locator;
-	filter: FilterEditor;
-	/** The filter's status icon: shown only while unfocused and non-empty. */
-	filterStatus(): Locator;
-	aggregation: FilterEditor;
-	/** The aggregation's "every … Seconds" input. */
-	step(): Locator;
-	metric: MetricControls;
-	addOns: AddOns;
-	/** The "…" menu: offered only where several queries are allowed. */
-	actions(): Locator;
-	/** A row of the open "…" menu. */
-	menuItem(action: 'clone' | 'delete'): Locator;
-	clone(): Promise<void>;
-	delete(): Promise<void>;
-	toggleVisibility(): Promise<void>;
-	collapse(): Promise<void>;
-	/** The data-source dropdown's value; only on hosts that let it change. */
-	signal(): Locator;
-	setSignal(label: 'Logs' | 'Traces' | 'Metrics'): Promise<void>;
-}
-
-export interface FormulaBlock {
-	root(): Locator;
-	expression(): Locator;
-	legend(): Locator;
-	delete(): Promise<void>;
-}
-
-/** `query-add-on-<field>` toggle values: a documented DOM contract. */
-export type AddOnField =
-	| 'group_by'
-	| 'having'
-	| 'order_by'
-	| 'limit'
-	| 'legend_format'
-	| 'reduce_to';
-
-export interface AddOns {
-	/** The toggle row; its children name the add-ons on offer. */
-	toggles(): Locator;
-	/** Idempotent: leaves an already-open add-on open. */
-	open(field: AddOnField): Promise<void>;
-	content(field: AddOnField): Locator;
-	groupBy: {
-		/** Types `key` and picks the suggestion with that exact name. */
-		add(key: string): Promise<void>;
-		remove(key: string): Promise<void>;
-		/** The selected keys, in order. */
-		values(): Promise<string[]>;
-	};
-	having: FilterEditor;
-	limit(): Locator;
-	legend(): Locator;
-	reduceTo: {
-		/** The selected value. */
-		value(): Locator;
-		set(label: string): Promise<void>;
-	};
-}
-
-/** The metrics aggregation section: metric picker plus time/space selects. */
-export interface MetricControls {
-	select(name: string): Promise<void>;
-	/** The metric name input. */
-	input(): Locator;
-	/** The selected value. Absent for histograms. */
-	timeAggregation(): Locator;
-	/** The selected value. */
-	spaceAggregation(): Locator;
-	setTimeAggregation(label: string): Promise<void>;
-	setSpaceAggregation(label: string): Promise<void>;
-	/** Labels offered by the space-aggregation select, as shown. */
-	spaceOptions(): Promise<string[]>;
-}
-
-export interface QuickFilterValue {
-	checkbox(): Locator;
-	/** Toggles the value; returns the query_range bodies the toggle fired. */
-	toggle(): Promise<V5Body[]>;
-}
-
-/** The explorer's tab, carried in the `panelTypes` param. */
-export type ExplorerView = 'list' | 'graph' | 'table';
-
-export interface OpenOptions {
-	/** Serialised the way the app writes it. */
-	query?: unknown;
-	/** A `compositeQuery` value sent as given, for malformed input. */
-	raw?: string;
-	view?: ExplorerView;
-}
-
-export interface QueryBuilderDriver {
-	/**
-	 * Resolves once the page's own first query_range has answered: the explorer
-	 * rewrites its URL and re-mounts the builder until then, which drops
-	 * keystrokes. Returns the bodies that load fired.
-	 */
-	openExplorer(path: string, options?: OpenOptions): Promise<V5Body[]>;
-	query(name: string): QueryBlock;
-	/** Adds the next query (B, C, …) and waits for its block. */
-	addQuery(name: string): Promise<QueryBlock>;
-	/** Builder query names, top to bottom. */
-	queryNames(): Promise<string[]>;
-	/** Panel-editor query-type tab, by its queryType (`builder`, `promql`, …). */
-	tab(queryType: string): Locator;
-	promql(): Locator;
-	formula(name: string): FormulaBlock;
-	addFormula(name: string): Promise<FormulaBlock>;
-	traceOperator: {
-		root(): Locator;
-		/** "Add Trace Matching": offered on traces hosts that allow it. */
-		addButton(): Locator;
-		add(): Promise<void>;
-		remove(): Promise<void>;
-		editor: FilterEditor;
-	};
-	/**
-	 * Explorer "Add to dashboard": picks the dashboard titled `title` and waits
-	 * for the new-panel editor the export navigates to.
-	 */
-	addToDashboard(title: string): Promise<void>;
-	runButton(): Locator;
-	/** The logs explorer's results area, below the builder. */
-	logsResults(): Locator;
-	/** Clicks Run; returns every query_range body the click fired. */
-	run(): Promise<V5Body[]>;
-	/**
-	 * Clicks Run until `read()` equals `expected`. For panel-editor structural
-	 * edits, whose draft can lag the DOM: an early Run is a cache hit that
-	 * sends nothing. Never clicks while the button is Cancel.
-	 */
-	rerunUntil(read: () => unknown, expected: unknown): Promise<void>;
-	/**
-	 * Ctrl/Cmd+Enter from the focused field; returns the fired bodies. Waits two
-	 * frames first: editor changes reach React state on its next scheduler task,
-	 * and a keypress inside the same frame as the last keystroke reads the
-	 * previous render — a gap no person can produce.
-	 */
-	runShortcut(): Promise<V5Body[]>;
-	/** A value in an explorer's checkbox quick filter, by its header title. */
-	quickFilter(title: string, value: string): QuickFilterValue;
-	/** The spec of query `name` in the first body that has it. */
-	spec(bodies: V5Body[], name: string): V5Query['spec'];
-	/** Every query_range body sent since the test started. */
-	sent(): V5Body[];
-	/**
-	 * Query `name`'s spec in the newest body that has it, whatever sent it. The
-	 * panel editor fetches on structural edits, so Run after one can be a cache
-	 * hit that sends nothing: poll this rather than waiting on Run.
-	 */
-	latest(name: string): V5Query['spec'] | undefined;
-	/** The URL's `compositeQuery`, parsed. */
-	urlQuery(): Record<string, unknown> | null;
-	console: ConsoleWatch;
-}
-
-/** CodeMirror renders its placeholder inside the empty line. */
-const EDITOR_DOC = async (root: Locator): Promise<string> => {
-	const lines = root.locator('.cm-content .cm-line');
-	const texts = await lines.allTextContents();
-	const placeholders = await lines.evaluateAll((nodes) =>
-		nodes.map((node) => node.querySelector('.cm-placeholder')?.textContent ?? ''),
-	);
-	return texts
-		.map((text, i) =>
-			placeholders[i] ? text.replace(placeholders[i], '') : text,
-		)
-		.join('\n');
-};
-
-function editorAt(page: Page, root: () => Locator): FilterEditor {
-	const content = (): Locator => root().locator('.cm-content');
-	const editor: FilterEditor = {
-		root,
-		content,
-		async type(text) {
-			await editor.clear();
-			await page.keyboard.type(text);
-		},
-		async append(text) {
-			await content().click();
-			await page.keyboard.press('End');
-			await page.keyboard.type(text);
-		},
-		async clear() {
-			await content().click();
-			await page.keyboard.press('ControlOrMeta+a');
-			await page.keyboard.press('Backspace');
-			await expect.poll(() => EDITOR_DOC(root())).toBe('');
-		},
-		press: (key) => page.keyboard.press(key),
-		expression: () => EDITOR_DOC(root()),
-		lineCount: () => root().locator('.cm-line'),
-		suggestions: () => page.locator('.cm-tooltip-autocomplete'),
-		async openSuggestions() {
-			await expect(async () => {
-				await page.keyboard.press('Control+Space');
-				await expect(editor.suggestions()).toBeVisible({ timeout: 2_000 });
-			}).toPass({ timeout: 15_000 });
-		},
-		suggestion: (label) =>
-			page
-				.locator('.cm-tooltip-autocomplete [role="option"]')
-				.filter({ hasText: label }),
-	};
-	return editor;
-}
-
-/**
- * Opens the antd select inside `select` and returns its options. Scoped to the
- * list the select owns: a previous select's list can still be mid-close.
- */
-async function openSelect(page: Page, select: Locator): Promise<Locator> {
-	await select.locator('.ant-select-selector').click();
-	const list = await ownDropdown(page, select);
-	await expect(list).toBeVisible();
-	return list.locator('.ant-select-item-option');
-}
-
-/** antd renders select options with trailing whitespace ("Sum "). */
-const exactly = (label: string): RegExp => new RegExp(`^\\s*${label}\\s*$`);
-
-/** A reduce-to option or value by its operator: "Sum of values in timeframe". */
-export const reduceToLabel = (operator: string): RegExp =>
-	new RegExp(`^\\s*${operator} of values`);
-
-const ADD_ON_CONTENT: Record<AddOnField, string> = {
-	group_by: 'group-by-content',
-	having: 'having-content',
-	order_by: 'order-by-content',
-	limit: 'limit-content',
-	legend_format: 'legend-format-content',
-	reduce_to: 'reduce-to-content',
-};
-
-function addOnsAt(page: Page, root: () => Locator): AddOns {
-	const content = (field: AddOnField): Locator =>
-		root().getByTestId(ADD_ON_CONTENT[field]);
-	const groupBy = (): Locator => root().getByTestId('group-by');
-	const addOns: AddOns = {
-		toggles: () => root().locator('[data-testid^="query-add-on-"]'),
-		async open(field) {
-			if (await content(field).isVisible()) {
-				return;
-			}
-			await root().getByTestId(`query-add-on-${field}`).click();
-			await expect(content(field)).toBeVisible();
-		},
-		content,
-		groupBy: {
-			async add(key) {
-				const options = await openSelect(page, groupBy());
-				await groupBy().locator('input').fill(key);
-				await options
-					.filter({ hasText: exactly(key) })
-					.first()
-					.click();
-				await page.keyboard.press('Escape');
-				await expect(
-					groupBy().locator('.ant-select-selection-item', { hasText: key }),
-				).toBeVisible();
-			},
-			async remove(key) {
-				await groupBy()
-					.locator('.ant-select-selection-item', { hasText: key })
-					.locator('.ant-select-selection-item-remove')
-					.click();
-			},
-			async values() {
-				const texts = await groupBy()
-					.locator('.ant-select-selection-item-content')
-					.allTextContents();
-				return texts.map((text) => text.trim());
-			},
-		},
-		having: editorAt(page, () => root().getByTestId('having-editor')),
-		limit: () => content('limit').getByTestId('input-Limit'),
-		legend: () => content('legend_format').getByTestId('input-Legend format'),
-		reduceTo: {
-			value: () =>
-				root().getByTestId('reduce-to').locator('.ant-select-selection-item'),
-			// Labels read "<Op> of values in timeframe"; matched on the operator.
-			async set(label) {
-				const options = await openSelect(page, root().getByTestId('reduce-to'));
-				await options.filter({ hasText: reduceToLabel(label) }).click();
-				await expect(addOns.reduceTo.value()).toHaveText(reduceToLabel(label));
-			},
-		},
-	};
-	return addOns;
-}
-
-function metricAt(page: Page, root: () => Locator): MetricControls {
-	const picker = (): Locator =>
-		root().locator('[data-testid^="metric-name-selector-"]');
-	const time = (): Locator => root().getByTestId('metrics-time-aggregation');
-	const space = (): Locator => root().getByTestId('metrics-space-aggregation');
-	return {
-		async select(name) {
-			// An antd AutoComplete: the testid is on a wrapper.
-			const field = picker();
-			const options = await openSelect(page, field);
-			await field.locator('input').fill(name);
-			// Options carry the metric's type and unit next to its name.
-			await options.filter({ hasText: name }).first().click();
-		},
-		// The selection item, not the root: these selects render their list
-		// inside the root, so its text includes every option.
-		input: () => picker().locator('input'),
-		timeAggregation: () => time().locator('.ant-select-selection-item'),
-		spaceAggregation: () => space().locator('.ant-select-selection-item'),
-		async setTimeAggregation(label) {
-			const options = await openSelect(page, time());
-			await options.filter({ hasText: exactly(label) }).click();
-			await expect(this.timeAggregation()).toHaveText(label);
-		},
-		async setSpaceAggregation(label) {
-			const options = await openSelect(page, space());
-			await options.filter({ hasText: exactly(label) }).click();
-			await expect(this.spaceAggregation()).toHaveText(label);
-		},
-		async spaceOptions() {
-			const options = await openSelect(page, space());
-			const labels = await options.allTextContents();
-			await page.keyboard.press('Escape');
-			return labels.map((label) => label.trim());
-		},
-	};
-}
-
-/**
- * Two frames: an edit reaches React state on its next scheduler task, and an
- * action in the same frame reads the previous render. A long render delays
- * the frame itself, so this cannot pass before the commit.
- */
-async function afterRender(page: Page): Promise<void> {
-	await page.evaluate(
-		() =>
-			new Promise<void>((resolve) => {
-				// Runs in the browser; the e2e tsconfig has no DOM lib.
-				const { requestAnimationFrame: frame } = globalThis as unknown as {
-					requestAnimationFrame(this: void, callback: () => void): number;
-				};
-				frame(() => frame(() => resolve()));
-			}),
-	);
-}
-
-function queryBuilderDriver(page: Page): QueryBuilderDriver {
-	const bodies: V5Body[] = [];
-	page.on('request', (request: Request) => {
-		if (isQueryRange(request.url()) && request.method() === 'POST') {
-			bodies.push(request.postDataJSON() as V5Body);
-		}
-	});
-	const consoleWatch = watchConsole(page, {
-		// ANTLR reports every partial expression on console.error, prefixed
-		// with its position (`line 1:14 ...`).
-		ignore: ['line 1:', 'line 2:', 'line 3:'],
-	});
-
-	// Waits on a request the action started: a response to one already in
-	// flight (e.g. after a structural edit) would end the wait too early.
-	const firedBy = async (action: () => Promise<void>): Promise<V5Body[]> => {
-		const before = bodies.length;
-		const answered = page
-			.waitForRequest((r) => isQueryRange(r.url()) && r.method() === 'POST')
-			.then((request) => request.response());
-		await action();
-		await answered;
-		return bodies.slice(before);
-	};
-
-	const qb: QueryBuilderDriver = {
-		async openExplorer(path, { query, raw, view } = {}) {
-			await dismissQuickFiltersAnnouncement(page);
-			const params = [`relativeTime=${RELATIVE_TIME}`];
-			if (view) {
-				params.push(`panelTypes=${encodeURIComponent(JSON.stringify(view))}`);
-			}
-			const composite =
-				raw ??
-				(query === undefined
-					? undefined
-					: encodeURIComponent(JSON.stringify(query)));
-			if (composite !== undefined) {
-				params.push(`compositeQuery=${composite}`);
-			}
-			const url = `${path}?${params.join('&')}`;
-			// The metrics explorer runs nothing until a metric is chosen; its
-			// settle point is the metric list instead.
-			if (path === EXPLORER.metrics) {
-				await Promise.all([
-					page.waitForResponse((r) => r.url().includes('/api/v2/metrics')),
-					page.goto(url),
-				]);
-				await expect(qb.query('A').filter.content()).toBeVisible();
-				return [];
-			}
-			const fired = await firedBy(async () => {
-				await page.goto(url);
-			});
-			await expect(qb.query('A').filter.content()).toBeVisible();
-			return fired;
-		},
-		query(name) {
-			const root = (): Locator => page.getByTestId(`query-${name}`);
-			// Index-suffixed testids follow screen position, not the query's
-			// name (A, C, B after a delete and re-add): match them in the block.
-			const signalSelect = (): Locator =>
-				root().locator('[data-testid^="query-data-source-selector-"]');
-			return {
-				root,
-				filter: editorAt(page, () =>
-					root().getByTestId('query-where-clause-editor'),
-				),
-				filterStatus: () => root().getByTestId('query-validation-status'),
-				aggregation: editorAt(page, () =>
-					root().getByTestId('query-aggregation-editor'),
-				),
-				step: () => root().getByTestId('input-Seconds'),
-				metric: metricAt(page, root),
-				addOns: addOnsAt(page, root),
-				actions: () => root().getByTestId('query-actions'),
-				menuItem: (action) =>
-					page.getByTestId(`query-actions-item-${action}-query`),
-				async clone() {
-					await root().getByTestId('query-actions').click();
-					await page.getByTestId('query-actions-item-clone-query').click();
-					await afterRender(page);
-				},
-				async delete() {
-					await root().getByTestId('query-actions').click();
-					await page.getByTestId('query-actions-item-delete-query').click();
-					await expect(root()).toHaveCount(0);
-					await afterRender(page);
-				},
-				async toggleVisibility() {
-					await root().getByTestId('qb-entity-visibility').click();
-					// The icon is the only visible change and carries no state.
-					await afterRender(page);
-				},
-				collapse: () => root().getByTestId('qb-entity-collapse').click(),
-				signal: () => signalSelect().locator('.ant-select-selection-item'),
-				async setSignal(label) {
-					const options = await openSelect(page, signalSelect());
-					await options.filter({ hasText: exactly(label) }).click();
-					await expect(this.signal()).toHaveText(label);
-				},
-			};
-		},
-		tab: (queryType) => page.getByTestId(`query-type-tab-${queryType}`),
-		promql: () => page.getByTestId('promql-query-input').first(),
-		async addQuery(name) {
-			await page.getByTestId('add-new-query-button').click();
-			const block = qb.query(name);
-			await expect(block.filter.content()).toBeVisible();
-			return block;
-		},
-		queryNames: () =>
-			page.locator('[data-testid^="query-"]').evaluateAll((nodes) =>
-				nodes
-					.map((node) => node.getAttribute('data-testid') ?? '')
-					.filter((id) => /^query-[A-Z]$/.test(id))
-					.map((id) => id.slice('query-'.length)),
-			),
-		formula(name) {
-			const root = (): Locator => page.getByTestId(`formula-${name}`);
-			return {
-				root,
-				expression: () => root().getByTestId('formula-expression'),
-				legend: () => root().getByTestId('formula-legend'),
-				async delete() {
-					await root().getByTestId('qb-entity-delete').click();
-					await expect(root()).toHaveCount(0);
-					// The block leaves the DOM before the editor's draft follows.
-					await afterRender(page);
-				},
-			};
-		},
-		async addFormula(name) {
-			await page.getByTestId('add-formula-button').click();
-			const formula = qb.formula(name);
-			await expect(formula.expression()).toBeVisible();
-			return formula;
-		},
-		traceOperator: {
-			root: () => page.getByTestId('trace-operator'),
-			// No testid; the label is followed by a "Beta" tag inside the button.
-			addButton: () =>
-				page.getByRole('button').filter({ hasText: /^Add Trace Matching/ }),
-			async add() {
-				await qb.traceOperator.addButton().click();
-				await expect(qb.traceOperator.editor.content()).toBeVisible();
-			},
-			async remove() {
-				// The only direct button child: the trash icon, no testid.
-				await qb.traceOperator.root().locator(':scope > button').click();
-				await expect(qb.traceOperator.root()).toHaveCount(0);
-			},
-			editor: editorAt(page, () => page.getByTestId('trace-operator-editor')),
-		},
-		async addToDashboard(title) {
-			await page.getByTestId('explorer-add-to-dashboard').click();
-			const dialog = page.getByTestId('export-panel-dialog');
-			await dialog
-				.getByTestId('export-dashboard-select')
-				.locator('input')
-				.fill(title);
-			await dialog.locator(`.ant-select-item-option[title="${title}"]`).click();
-			await dialog.getByTestId('export-panel-export').click();
-			await page.waitForURL(/\/panel\/new\?/);
-			await expect(qb.query('A').filter.content()).toBeVisible();
-		},
-		runButton: () => page.locator('[data-run-query-btn]').first(),
-		// No testid on the container.
-		logsResults: () => page.locator('.logs-explorer-views'),
-		async run() {
-			await afterRender(page);
-			return firedBy(() => qb.runButton().click());
-		},
-		async rerunUntil(read, expected) {
-			await expect(async () => {
-				await expect(qb.runButton()).toHaveText(/Run Query/);
-				await afterRender(page);
-				await qb.runButton().click();
-				await expect.poll(read, { timeout: 3_000 }).toEqual(expected);
-			}).toPass({ timeout: 25_000 });
-		},
-		async runShortcut() {
-			await afterRender(page);
-			return firedBy(() => page.keyboard.press('ControlOrMeta+Enter'));
-		},
-		quickFilter(title, value) {
-			const checkbox = (): Locator =>
-				page.getByTestId(`checkbox-${title}-${value}`);
-			return {
-				checkbox,
-				toggle: () => firedBy(() => checkbox().click()),
-			};
-		},
-		spec(fired, name) {
-			for (const body of fired) {
-				const match = body.compositeQuery?.queries?.find(
-					(q) => q.spec?.name === name,
-				);
-				if (match) {
-					return match.spec;
-				}
-			}
-			throw new Error(`no query ${name} in ${fired.length} query_range bodies`);
-		},
-		sent: () => bodies,
-		latest: (name) =>
-			[...bodies]
-				.reverse()
-				.flatMap((body) => body.compositeQuery?.queries ?? [])
-				.find((query) => query.spec?.name === name)?.spec,
-		urlQuery() {
-			const raw = new URL(page.url()).searchParams.get('compositeQuery');
-			if (!raw) {
-				return null;
-			}
-			// The app encodes before URLSearchParams encodes again.
-			return JSON.parse(decodeURIComponent(raw)) as Record<string, unknown>;
-		},
-		console: consoleWatch,
-	};
-	return qb;
-}
-
-/** Layers `qb` onto another host's test, e.g. the alert-rule fixtures. */
-export const withQueryBuilder = driver('qb', ({ page }) =>
-	queryBuilderDriver(page),
-);
-
-const HISTOGRAM_BOUNDS = ['1', '2', '4', '+Inf'];
-
-/** Ten minutes of a gauge and a cumulative histogram, names unique per worker. */
-export const withMetricTypes = seeded(
-	'metricTypes',
-	async ({ page, workerIndex }) => {
-		const suffix = `${workerIndex}_${Date.now()}`;
-		const types: MetricTypes = {
-			gauge: `e2e_qb_gauge_${suffix}`,
-			histogram: `e2e_qb_histogram_${suffix}`,
-		};
-		const now = Date.now();
-		const points: Record<string, unknown>[] = [];
-		for (let minute = 0; minute < 10; minute += 1) {
-			const timestamp = new Date(now - (10 - minute) * 60_000).toISOString();
-			points.push({
-				metric_name: types.gauge,
-				labels: { host: 'qb-host' },
-				timestamp,
-				value: 10 + minute,
-				type_: 'Gauge',
-				temporality: 'Unspecified',
-				is_monotonic: false,
-			});
-			HISTOGRAM_BOUNDS.forEach((le, bucket) => {
-				points.push({
-					metric_name: types.histogram,
-					labels: { le },
-					timestamp,
-					value: (minute + 1) * (bucket + 1),
-					type_: 'Histogram',
-					temporality: 'Cumulative',
-					is_monotonic: false,
-				});
-			});
-		}
-		await postToSeeder(page, '/telemetry/metrics', points);
-		return types;
-	},
-);
-
-export const test = withQueryBuilder(kit);
-
-export { expect } from './kit';

tests/e2e/helpers/alert-forms/shared.ts

@@ -85,17 +85,8 @@ export async function pickChannelByName(
 	channelName: string,
 ): Promise<void> {
 	const tagsBefore = await selectedTags(select).count();
-	// A re-render of the condition section (e.g. after a query edit) can close
-	// the select as the click opens it; re-click only while it is still closed.
-	await expect(async () => {
-		const isOpen = await select.evaluate((node) =>
-			node.classList.contains('ant-select-open'),
-		);
-		if (!isOpen) {
-			await select.click();
-		}
-		await expect(select).toHaveClass(/ant-select-open/, { timeout: 2_000 });
-	}).toPass({ timeout: 15_000 });
+	await select.click();
+	await expect(select).toHaveClass(/ant-select-open/);
 
 	// `fill` on the combobox input rather than `keyboard.type`: the query is a ~30
 	// character channel name and every keystroke re-runs antd's filter, so typing it

tests/e2e/helpers/alerts/seeding.ts

@@ -15,7 +15,7 @@ import type {
 
 // ─── Seeding telemetry ───────────────────────────────────────────────────
 
-export async function postToSeeder(
+async function postToSeeder(
 	page: Page,
 	path: string,
 	data: unknown,

tests/e2e/helpers/query-range-mock.ts

@@ -272,9 +272,7 @@ export async function holdQueryRange(
 	});
 	await page.route(QUERY_RANGE_GLOB, async (route) => {
 		await gate;
-		// A cancelled run aborts its request while it is held; there is
-		// nothing left to answer.
-		await fulfill(route, body).catch(() => undefined);
+		await fulfill(route, body);
 	});
 	return { release: () => release() };
 }

tests/e2e/tests/query-builder/addons.spec.ts

@@ -1,152 +0,0 @@
-import {
-	expect,
-	EXPLORER,
-	SUM_METRIC,
-	test,
-} from '../../drivers/query-builder';
-
-const HAVING = ['count() > 10', 'count() IN [1, 2]', 'count() NOT IN [1, 2]'];
-
-test.describe('Query builder — add-ons', () => {
-	for (const explorer of ['logs', 'traces'] as const) {
-		test(`TC-21 ${explorer} group by keeps order through removal and reload`, async ({
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER[explorer], { view: 'graph' });
-			const addOns = qb.query('A').addOns;
-			await addOns.open('group_by');
-
-			await addOns.groupBy.add('service.name');
-			await addOns.groupBy.add('deployment.environment');
-			await addOns.groupBy.add('k8s.namespace.name');
-			await addOns.groupBy.remove('service.name');
-			const fired = await qb.run();
-
-			const expected = ['deployment.environment', 'k8s.namespace.name'];
-			expect(qb.spec(fired, 'A').groupBy?.map((key) => key.name)).toEqual(
-				expected,
-			);
-			const reloaded = await qb.openExplorer(EXPLORER[explorer], {
-				view: 'graph',
-				query: qb.urlQuery(),
-			});
-			expect(qb.spec(reloaded, 'A').groupBy?.map((key) => key.name)).toEqual(
-				expected,
-			);
-			expect(await qb.query('A').addOns.groupBy.values()).toEqual(expected);
-		});
-	}
-
-	test('TC-21 metrics group by offers the metric’s own attributes', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.metrics);
-		const query = qb.query('A');
-		await query.metric.select(SUM_METRIC);
-
-		await query.addOns.groupBy.add('operation');
-		const fired = await qb.run();
-
-		expect(qb.spec(fired, 'A').groupBy?.map((key) => key.name)).toEqual([
-			'operation',
-		]);
-	});
-
-	for (const having of HAVING) {
-		test(`TC-22 having "${having}" is sent verbatim and accepted`, async ({
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-			const addOns = qb.query('A').addOns;
-			await addOns.open('group_by');
-			await addOns.groupBy.add('service.name');
-			await addOns.open('having');
-
-			await addOns.having.type(having);
-			await addOns.having.press('Escape');
-			const fired = await qb.run();
-
-			expect(qb.spec(fired, 'A').having?.expression).toBe(having);
-			expect(qb.console.failedResponses).toEqual([]);
-		});
-	}
-
-	test('TC-23 the logs list orders by timestamp then id, traces by timestamp only', async ({
-		qb,
-	}) => {
-		const logs = await qb.openExplorer(EXPLORER.logs, { view: 'list' });
-		expect(qb.spec(logs, 'A').order?.map((o) => o.key.name)).toEqual([
-			'timestamp',
-			'id',
-		]);
-
-		const traces = await qb.openExplorer(EXPLORER.traces, { view: 'list' });
-		expect(qb.spec(traces, 'A').order?.map((o) => o.key.name)).toEqual([
-			'timestamp',
-		]);
-	});
-
-	test('TC-24 a positive limit is sent; empty and zero send none', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-		const addOns = qb.query('A').addOns;
-		await addOns.open('group_by');
-		await addOns.groupBy.add('service.name');
-		await addOns.open('limit');
-
-		await addOns.limit().fill('10');
-		expect(qb.spec(await qb.run(), 'A').limit).toBe(10);
-
-		await addOns.limit().fill('');
-		expect(qb.spec(await qb.run(), 'A')).not.toHaveProperty('limit');
-
-		await addOns.limit().fill('3');
-		await qb.run();
-		await addOns.limit().fill('0');
-		expect(qb.spec(await qb.run(), 'A')).not.toHaveProperty('limit');
-	});
-
-	// known: the input accepts a negative limit; Run then sends nothing, and the
-	// next Run sends it and the backend answers 400.
-	test.fixme('TC-24 a negative limit is never sent', async ({ qb }) => {
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-		const addOns = qb.query('A').addOns;
-		await addOns.open('limit');
-
-		await addOns.limit().fill('-5');
-		await qb.runButton().click();
-		await qb.runButton().click();
-
-		expect(qb.sent().map((body) => qb.spec([body], 'A').limit)).not.toContain(-5);
-		expect(qb.console.failedResponses).toEqual([]);
-	});
-
-	test('TC-25 the legend prefills from group by and a custom one is kept', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-		const addOns = qb.query('A').addOns;
-		await addOns.open('group_by');
-		await addOns.groupBy.add('service.name');
-		await addOns.groupBy.add('deployment.environment');
-
-		await addOns.open('legend_format');
-		await expect(addOns.legend()).toHaveValue(
-			'service.name = {{service.name}}, deployment.environment = {{deployment.environment}}',
-		);
-
-		await addOns.legend().fill('{{service.name}} logs');
-		await addOns.groupBy.add('k8s.namespace.name');
-		await expect(addOns.legend()).toHaveValue('{{service.name}} logs');
-		expect(qb.spec(await qb.run(), 'A').legend).toBe('{{service.name}} logs');
-	});
-
-	test('TC-25 the legend opens empty without a group by', async ({ qb }) => {
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-
-		await qb.query('A').addOns.open('legend_format');
-
-		await expect(qb.query('A').addOns.legend()).toHaveValue('');
-	});
-});

tests/e2e/tests/query-builder/aggregation.spec.ts

@@ -1,80 +0,0 @@
-import { expect, EXPLORER, test } from '../../drivers/query-builder';
-
-// One comma-separated term per entry in the request's `aggregations`.
-const EXPRESSIONS: Record<string, string[]> = {
-	'a count': ['count()'],
-	'a distinct count': ['count_distinct(service.name)'],
-	'a percentile of a span field': ['p99(duration_nano)'],
-	'two aggregations': ['count()', 'p99(duration_nano)'],
-};
-
-test.describe('Query builder — logs and traces aggregations', () => {
-	for (const [label, terms] of Object.entries(EXPRESSIONS)) {
-		test(`TC-17 ${label} reaches the request`, async ({ qb }) => {
-			await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
-			const aggregation = qb.query('A').aggregation;
-
-			await aggregation.type(terms.join(', '));
-			await aggregation.press('Escape');
-			const fired = await qb.run();
-
-			expect(qb.spec(fired, 'A').aggregations?.map((a) => a.expression)).toEqual(
-				terms,
-			);
-		});
-	}
-
-	test('TC-18 the step interval reaches the request', async ({
-		authedPage: page,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
-
-		await qb.query('A').step().fill('120');
-		await page.keyboard.press('Tab');
-		const fired = await qb.run();
-
-		expect(qb.spec(fired, 'A').stepInterval).toBe(120);
-	});
-
-	test('TC-30 a trace operator replaces per-query aggregation until removed', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.traces, { view: 'graph' });
-		await (await qb.addQuery('B')).filter.type("http.status_code = '500'");
-		await qb.query('B').filter.press('Escape');
-
-		await qb.traceOperator.add();
-		await qb.traceOperator.editor.type('A => B');
-		await qb.traceOperator.editor.press('Escape');
-		for (const name of ['A', 'B']) {
-			await expect(qb.query(name).aggregation.root()).toHaveCount(0);
-			await expect(qb.query(name).addOns.toggles()).toHaveCount(0);
-		}
-		const fired = await qb.run();
-		const operator = fired
-			.flatMap((body) => body.compositeQuery.queries)
-			.find((query) => query.type === 'builder_trace_operator');
-		expect(operator?.spec).toMatchObject({ expression: 'A => B' });
-
-		await qb.traceOperator.remove();
-		await expect(qb.query('A').aggregation.root()).toBeVisible();
-		await qb.rerunUntil(
-			() =>
-				qb
-					.sent()
-					.at(-1)
-					?.compositeQuery.queries.some(
-						(query) => query.type === 'builder_trace_operator',
-					),
-			false,
-		);
-	});
-
-	test('TC-30 the logs explorer offers no trace matching', async ({ qb }) => {
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-
-		await expect(qb.query('A').root()).toBeVisible();
-		await expect(qb.traceOperator.addButton()).toHaveCount(0);
-	});
-});

tests/e2e/tests/query-builder/alerts.spec.ts

@@ -1,85 +0,0 @@
-import { withQueryBuilder } from '../../drivers/query-builder';
-import {
-	expect,
-	test as alertRulesTest,
-} from '../../fixtures/alerts/alert-rules';
-import { AlertType } from '../../helpers/alert-forms/constants';
-import { gotoCreateAlertV2 } from '../../helpers/alert-forms/navigation';
-import {
-	selectThresholdChannel,
-	v2SaveButton,
-} from '../../helpers/alert-forms/v2';
-import { gotoAlertOverview } from '../../helpers/alerts/navigation';
-
-const test = withQueryBuilder(alertRulesTest);
-
-const FILTER_A = "http.method = 'GET'";
-const FILTER_B = "http.status_code = '500'";
-const TRACE_MATCH = 'A => B';
-
-interface SavedRule {
-	condition?: {
-		compositeQuery?: {
-			queries?: {
-				type: string;
-				spec: {
-					name?: string;
-					expression?: string;
-					filter?: { expression?: string };
-				};
-			}[];
-		};
-	};
-}
-
-test.describe('Query builder — alerts', () => {
-	test('TC-06 a trace-matching traces alert saves and reopens intact', async ({
-		authedPage: page,
-		alertChannel,
-		ownedRules,
-		qb,
-	}) => {
-		await gotoCreateAlertV2(page, { alertType: AlertType.TRACES });
-		await page.getByTestId('alert-name-input').fill(`e2e-qb-tc06-${Date.now()}`);
-
-		await qb.query('A').filter.type(FILTER_A);
-		await qb.query('A').filter.press('Escape');
-		const b = await qb.addQuery('B');
-		await b.filter.type(FILTER_B);
-		await b.filter.press('Escape');
-		await qb.traceOperator.add();
-		await qb.traceOperator.editor.type(TRACE_MATCH);
-		await qb.traceOperator.editor.press('Escape');
-		// Blur first: the editor's blur re-renders the condition section, which
-		// otherwise closes the channel select as its click opens it.
-		await qb.traceOperator.editor.content().blur();
-		await selectThresholdChannel(page, 0, alertChannel.name);
-
-		const [response] = await Promise.all([
-			page.waitForResponse(
-				(r) => r.url().includes('/api/v2/rules') && r.request().method() === 'POST',
-			),
-			v2SaveButton(page).click(),
-		]);
-		await ownedRules.register(response);
-		const saved = response.request().postDataJSON() as SavedRule;
-		const queries = saved.condition?.compositeQuery?.queries ?? [];
-		expect(queries).toEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					type: 'builder_trace_operator',
-					spec: expect.objectContaining({ expression: TRACE_MATCH }),
-				}),
-			]),
-		);
-
-		const { data } = (await response.json()) as { data: { id: string } };
-		await gotoAlertOverview(page, String(data.id));
-
-		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER_A);
-		await expect.poll(() => qb.query('B').filter.expression()).toBe(FILTER_B);
-		await expect
-			.poll(() => qb.traceOperator.editor.expression())
-			.toBe(TRACE_MATCH);
-	});
-});

tests/e2e/tests/query-builder/dashboards.spec.ts

@@ -1,72 +0,0 @@
-import { emptyDashboard, test as editorTest } from '../../drivers/panel-editor';
-import {
-	expect,
-	EXPLORER,
-	withQueryBuilder,
-} from '../../drivers/query-builder';
-
-const test = withQueryBuilder(editorTest);
-
-const FILTER = "severity_text = 'ERROR'";
-const AGGREGATION = 'count_distinct(service.name)';
-
-interface StoredQuery {
-	spec: {
-		filter?: { expression?: string };
-		aggregations?: { expression?: string }[];
-	};
-}
-
-/** Where a non-List panel keeps its builder queries in the v2 dashboard spec. */
-interface StoredPanel {
-	spec: {
-		queries: {
-			spec: { plugin: { kind: string; spec: { queries: StoredQuery[] } } };
-		}[];
-	};
-}
-
-test.describe('Query builder — explorer to dashboard', () => {
-	test('TC-05 a logs explorer query survives add to dashboard, save and reopen', async ({
-		dashboards,
-		editor,
-		qb,
-	}) => {
-		const dashboard = emptyDashboard();
-		const title = dashboard.spec.display.name;
-		const id = await dashboards.seed(dashboard);
-
-		await qb.openExplorer(EXPLORER.logs, { view: 'graph' });
-		await qb.query('A').filter.type(FILTER);
-		await qb.query('A').filter.press('Escape');
-		await qb.query('A').aggregation.type(AGGREGATION);
-		await qb.query('A').aggregation.press('Escape');
-		await qb.run();
-
-		await qb.addToDashboard(title);
-		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER);
-		await expect
-			.poll(() => qb.query('A').aggregation.expression())
-			.toBe(AGGREGATION);
-
-		await editor.save();
-		// The shared spec types model only bare BuilderQuery plugins.
-		const panels = (await dashboards.get(id)).spec.panels as unknown as Record<
-			string,
-			StoredPanel
-		>;
-		const [panelId] = Object.keys(panels);
-		const plugin = panels[panelId].spec.queries[0].spec.plugin;
-		expect(plugin.kind).toBe('signoz/CompositeQuery');
-		expect(plugin.spec.queries[0].spec).toMatchObject({
-			filter: { expression: FILTER },
-			aggregations: [{ expression: AGGREGATION }],
-		});
-
-		await dashboards.openEditor(id, panelId);
-		await expect.poll(() => qb.query('A').filter.expression()).toBe(FILTER);
-		await expect
-			.poll(() => qb.query('A').aggregation.expression())
-			.toBe(AGGREGATION);
-	});
-});

tests/e2e/tests/query-builder/filter.spec.ts

@@ -1,284 +0,0 @@
-import { expect, EXPLORER, test } from '../../drivers/query-builder';
-
-// Typing is real keystrokes: the regressions here (caret jumps, swallowed
-// Enter, the run shortcut) only show up through the keyboard path.
-
-const RECENT_KEPT = "service.name = 'frontend' AND severity_text = 'WARN'";
-const RECENT_REMOVED = 'logger.name EXISTS';
-
-const COMPOUND: Record<string, string> = {
-	'NOT over a parenthesised OR':
-		"NOT (severity_text = 'INFO' OR severity_text = 'WARN') AND service.name = 'frontend'",
-	'nested groups':
-		"(service.name = 'frontend' AND (severity_text = 'ERROR' OR severity_text = 'WARN'))",
-	'NOT IN with EXISTS':
-		"service.name NOT IN ['frontend', 'adservice'] AND logger.name EXISTS",
-};
-
-const queryWithFilter = (expression: string): unknown => ({
-	queryType: 'builder',
-	builder: {
-		queryFormulas: [],
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource: 'logs',
-				expression: 'A',
-				filter: { expression },
-				aggregations: [{ expression: 'count()' }],
-			},
-		],
-	},
-});
-
-const VERBATIM: Record<string, string> = {
-	'an escaped quote': "logger.name = 'it\\'s'",
-	'a double-quoted string': 'logger.name = "double quoted"',
-	'a quoted numeric string': "logger.name = '123'",
-	'a bare number': 'logger.name = 123',
-	'a boolean': 'logger.name = true',
-	'spaces and a backslash': "logger.name = 'a b\\\\c'",
-};
-
-test.describe('Query builder — filter editor', () => {
-	test('TC-07 key, operator and value suggestions build the expression', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-
-		await filter.type('severity_te');
-		await filter.openSuggestions();
-		await filter.suggestion('severity_text').first().click();
-		await expect.poll(() => filter.expression()).toMatch(/^severity_text\s*$/);
-
-		await filter.openSuggestions();
-		await expect(filter.suggestion(/^=/).first()).toBeVisible();
-		await filter.append('= ');
-		await filter.openSuggestions();
-		await filter.suggestion('ERROR').first().click();
-		await expect
-			.poll(() => filter.expression())
-			.toMatch(/^severity_text = 'ERROR'\s*$/);
-
-		const fired = await qb.run();
-		expect(qb.spec(fired, 'A').filter?.expression?.trim()).toBe(
-			"severity_text = 'ERROR'",
-		);
-	});
-
-	for (const [label, expression] of Object.entries(VERBATIM)) {
-		test(`TC-08 ${label} is sent and restored verbatim`, async ({
-			authedPage: page,
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER.logs);
-			const filter = qb.query('A').filter;
-
-			await filter.type(expression);
-			await filter.press('Escape');
-			const fired = await qb.run();
-			expect(qb.spec(fired, 'A').filter?.expression).toBe(expression);
-
-			await page.reload();
-			await expect(filter.content()).toBeVisible();
-			await expect.poll(() => filter.expression()).toBe(expression);
-			await expect(qb.query('A').filterStatus()).toHaveCount(0);
-		});
-	}
-
-	test('TC-11 the status icon shows only for an unfocused invalid filter', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const query = qb.query('A');
-
-		await query.filter.type('service.name =');
-		await expect(query.filterStatus()).toHaveCount(0);
-
-		await query.filter.content().blur();
-		await expect(query.filterStatus()).toBeVisible();
-
-		await query.filter.type("service.name = 'frontend'");
-		await query.filter.content().blur();
-		await expect(query.filterStatus()).toHaveCount(0);
-
-		await query.filter.clear();
-		await query.filter.content().blur();
-		await expect(query.filterStatus()).toHaveCount(0);
-	});
-
-	test('TC-12 Enter and Shift+Enter never insert a newline or run', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-		await filter.type("severity_text = 'ERROR'");
-		await filter.press('Escape');
-		await expect(filter.suggestions()).toHaveCount(0);
-		const sentBefore = qb.sent().length;
-
-		await filter.press('Enter');
-		await filter.press('Shift+Enter');
-
-		await expect(filter.lineCount()).toHaveCount(1);
-		await expect.poll(() => filter.expression()).toBe("severity_text = 'ERROR'");
-		expect(qb.sent()).toHaveLength(sentBefore);
-	});
-
-	for (const explorer of ['logs', 'traces'] as const) {
-		test(`TC-13 Cmd/Ctrl+Enter in the ${explorer} filter runs the edited query`, async ({
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER[explorer]);
-			const filter = qb.query('A').filter;
-			await filter.type("service.name = 'frontend'");
-
-			const fired = await qb.runShortcut();
-
-			expect(qb.spec(fired, 'A').filter?.expression).toBe(
-				"service.name = 'frontend'",
-			);
-			await expect(filter.lineCount()).toHaveCount(1);
-			expect(qb.urlQuery()).toMatchObject({ queryType: 'builder' });
-		});
-	}
-
-	test('TC-14 Escape closes suggestions and keeps the text', async ({ qb }) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-
-		await filter.type('serv');
-		await filter.openSuggestions();
-		await filter.press('Escape');
-
-		await expect(filter.suggestions()).toHaveCount(0);
-		await expect.poll(() => filter.expression()).toBe('serv');
-		await filter.press('i');
-		await expect.poll(() => filter.expression()).toBe('servi');
-
-		await filter.press('Escape');
-		await filter.press('Escape');
-		await expect.poll(() => filter.expression()).toBe('servi');
-		await expect(filter.content()).toBeFocused();
-	});
-
-	test('TC-09 value suggestions fill an IN list', async ({ qb }) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-
-		await filter.type('service.name IN ');
-		await filter.openSuggestions();
-		await filter.suggestion('frontend').first().click();
-		await expect
-			.poll(() => filter.expression())
-			.toBe("service.name IN ['frontend'] ");
-
-		await filter.type("service.name IN ['frontend', 'cartservice']");
-		await filter.press('Escape');
-		const fired = await qb.run();
-
-		expect(qb.spec(fired, 'A').filter?.expression).toBe(
-			"service.name IN ['frontend', 'cartservice']",
-		);
-		await expect(qb.query('A').filterStatus()).toHaveCount(0);
-	});
-
-	for (const [label, expression] of Object.entries(COMPOUND)) {
-		test(`TC-10 ${label} is valid and sent verbatim`, async ({ qb }) => {
-			await qb.openExplorer(EXPLORER.logs);
-			const query = qb.query('A');
-
-			await query.filter.type(expression);
-			await query.filter.press('Escape');
-			await query.filter.content().blur();
-			await expect(query.filterStatus()).toHaveCount(0);
-			const fired = await qb.run();
-
-			expect(qb.spec(fired, 'A').filter?.expression).toBe(expression);
-		});
-	}
-
-	test('TC-15 an expression with CRLF from the URL loads without a RangeError', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs, {
-			query: queryWithFilter("body CONTAINS 'line1\r\nline2'"),
-		});
-
-		await expect.poll(() => qb.query('A').filter.expression()).toContain('line1');
-		expect(qb.console.errors.filter((e) => e.includes('RangeError'))).toEqual([]);
-		await qb.query('A').filter.append(" AND severity_text = 'ERROR'");
-		await expect
-			.poll(() => qb.query('A').filter.expression())
-			.toMatch(/severity_text = 'ERROR'$/);
-		expect(qb.console.errors).toEqual([]);
-	});
-
-	test('TC-15 recent searches are offered, applied and deleted', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-		for (const expression of [RECENT_KEPT, RECENT_REMOVED]) {
-			await filter.type(expression);
-			await filter.press('Escape');
-			await qb.run();
-		}
-
-		await filter.clear();
-		await filter.openSuggestions();
-		await expect(filter.suggestion(RECENT_KEPT)).toBeVisible();
-		await expect(filter.suggestion(RECENT_REMOVED)).toBeVisible();
-
-		await filter.suggestion(RECENT_KEPT).click();
-		await expect.poll(() => filter.expression()).toBe(RECENT_KEPT);
-
-		await filter.clear();
-		await filter.openSuggestions();
-		await filter
-			.suggestion(RECENT_REMOVED)
-			.getByRole('button', { name: 'Remove from recent searches' })
-			.click();
-		await expect(filter.suggestion(RECENT_REMOVED)).toHaveCount(0);
-	});
-
-	test('TC-15 recent searches survive a reload and stay with their signal', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		await qb.query('A').filter.type(RECENT_KEPT);
-		await qb.query('A').filter.press('Escape');
-		await qb.run();
-
-		await qb.openExplorer(EXPLORER.logs);
-		await qb.query('A').filter.clear();
-		await qb.query('A').filter.openSuggestions();
-		await expect(qb.query('A').filter.suggestion(RECENT_KEPT)).toBeVisible();
-
-		await qb.openExplorer(EXPLORER.traces);
-		await qb.query('A').filter.clear();
-		await qb.query('A').filter.openSuggestions();
-		await expect(qb.query('A').filter.suggestion(RECENT_KEPT)).toHaveCount(0);
-	});
-
-	test('TC-16 a quick-filter value toggles between excluded and cleared', async ({
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const filter = qb.query('A').filter;
-		const handTyped = "service.name = 'frontend'";
-		const excluded = `${handTyped} severity_text not in ['ERROR']`;
-		const error = qb.quickFilter('Severity Text', 'ERROR');
-		await filter.type(handTyped);
-		await qb.run();
-
-		for (const expected of [excluded, handTyped, excluded]) {
-			const fired = await error.toggle();
-
-			expect(qb.spec(fired, 'A').filter?.expression).toBe(expected);
-			await expect.poll(() => filter.expression()).toBe(expected);
-		}
-		await expect(error.checkbox()).toHaveAttribute('aria-checked', 'false');
-	});
-});

tests/e2e/tests/query-builder/metrics.spec.ts

@@ -1,106 +0,0 @@
-import {
-	expect,
-	EXPLORER,
-	type MetricTypes,
-	OTHER_SUM_METRIC,
-	SUM_METRIC,
-	test as base,
-	withMetricTypes,
-} from '../../drivers/query-builder';
-
-const test = withMetricTypes(base);
-
-const MOMENT_AGGREGATIONS = ['Sum', 'Avg', 'Min', 'Max'];
-
-interface TypeDefaults {
-	metric: (types: MetricTypes) => string;
-	time?: string;
-	space: string;
-	spaceOptions: string[];
-}
-
-const DEFAULTS: Record<string, TypeDefaults> = {
-	sum: {
-		metric: () => SUM_METRIC,
-		time: 'Rate',
-		space: 'Sum',
-		spaceOptions: MOMENT_AGGREGATIONS,
-	},
-	gauge: {
-		metric: (types) => types.gauge,
-		time: 'Avg',
-		space: 'Avg',
-		spaceOptions: MOMENT_AGGREGATIONS,
-	},
-	histogram: {
-		metric: (types) => types.histogram,
-		space: 'P90',
-		spaceOptions: ['P50', 'P75', 'P90', 'P95', 'P99'],
-	},
-};
-
-test.describe('Query builder — metric aggregations', () => {
-	for (const [type, expected] of Object.entries(DEFAULTS)) {
-		test(`TC-19 a ${type} metric gets its type's default aggregations`, async ({
-			metricTypes,
-			qb,
-		}) => {
-			const metricName = expected.metric(metricTypes);
-			await qb.openExplorer(EXPLORER.metrics);
-			const metric = qb.query('A').metric;
-
-			await metric.select(metricName);
-
-			await expect(metric.spaceAggregation()).toHaveText(expected.space);
-			expect(await metric.spaceOptions()).toEqual(expected.spaceOptions);
-			const fired = await qb.run();
-			expect(qb.spec(fired, 'A').aggregations?.[0]).toMatchObject({
-				metricName,
-				spaceAggregation: expected.space.toLowerCase(),
-				...(expected.time && { timeAggregation: expected.time.toLowerCase() }),
-			});
-		});
-	}
-
-	test('TC-19 a histogram has no time aggregation control', async ({
-		metricTypes,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.metrics);
-
-		await qb.query('A').metric.select(metricTypes.histogram);
-
-		await expect(qb.query('A').metric.spaceAggregation()).toHaveText('P90');
-		await expect(qb.query('A').metric.timeAggregation()).toHaveCount(0);
-	});
-
-	test('TC-20 aggregations reset only when the metric type changes', async ({
-		metricTypes,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.metrics);
-		const metric = qb.query('A').metric;
-
-		await metric.select(SUM_METRIC);
-		await metric.setTimeAggregation('Increase');
-		await metric.setSpaceAggregation('Max');
-
-		await metric.select(OTHER_SUM_METRIC);
-		await expect(metric.timeAggregation()).toHaveText('Increase');
-		await expect(metric.spaceAggregation()).toHaveText('Max');
-
-		await metric.select(metricTypes.gauge);
-		await expect(metric.timeAggregation()).toHaveText('Avg');
-		await expect(metric.spaceAggregation()).toHaveText('Avg');
-
-		await metric.select(SUM_METRIC);
-		await expect(metric.timeAggregation()).toHaveText('Rate');
-		await expect(metric.spaceAggregation()).toHaveText('Sum');
-		const fired = await qb.run();
-		expect(qb.spec(fired, 'A').aggregations?.[0]).toMatchObject({
-			metricName: SUM_METRIC,
-			timeAggregation: 'rate',
-			spaceAggregation: 'sum',
-		});
-	});
-});

tests/e2e/tests/query-builder/multi-query.spec.ts

@@ -1,112 +0,0 @@
-import {
-	metricsQuery,
-	SINGLE_PANEL_ID,
-	singlePanelDashboard,
-	test as editorTest,
-} from '../../drivers/panel-editor';
-import {
-	expect,
-	OTHER_SUM_METRIC,
-	SUM_METRIC,
-	withQueryBuilder,
-} from '../../drivers/query-builder';
-
-// In the panel editor a new query starts as metrics with no metric picked, and
-// Run does nothing until one is: each added query picks a metric first.
-const test = withQueryBuilder(editorTest);
-
-const CLONED_FILTER = "operation = '/ads/get'";
-
-test.describe('Query builder — multiple queries', () => {
-	test('TC-28 a deleted name is reused by the next added query', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: metricsQuery() }),
-			SINGLE_PANEL_ID,
-		);
-		for (const name of ['B', 'C']) {
-			await (await qb.addQuery(name)).metric.select(OTHER_SUM_METRIC);
-		}
-		expect(await qb.queryNames()).toEqual(['A', 'B', 'C']);
-
-		await qb.query('B').delete();
-		expect(await qb.queryNames()).toEqual(['A', 'C']);
-		const reAdded = await qb.addQuery('B');
-		expect(await qb.queryNames()).toEqual(['A', 'C', 'B']);
-		await reAdded.metric.select(SUM_METRIC);
-		await expect(reAdded.metric.input()).toHaveValue(SUM_METRIC);
-		await expect(qb.query('C').metric.input()).toHaveValue(OTHER_SUM_METRIC);
-	});
-
-	test('TC-28 a clone and a hidden query reach the request', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: metricsQuery({ filter: CLONED_FILTER }) }),
-			SINGLE_PANEL_ID,
-		);
-		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
-
-		await qb.query('A').clone();
-		await expect
-			.poll(() => qb.query('C').filter.expression())
-			.toBe(CLONED_FILTER);
-		await qb.query('B').toggleVisibility();
-		await qb.runButton().click();
-
-		await expect.poll(() => qb.latest('B')?.disabled).toBe(true);
-		expect(qb.latest('C')).toMatchObject({
-			filter: { expression: CLONED_FILTER },
-			aggregations: [expect.objectContaining({ metricName: SUM_METRIC })],
-		});
-	});
-
-	test('TC-28 the last remaining query offers no delete', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: metricsQuery() }),
-			SINGLE_PANEL_ID,
-		);
-		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
-
-		await qb.query('B').delete();
-		await qb.query('A').actions().click();
-
-		await expect(qb.query('A').menuItem('clone')).toBeVisible();
-		await expect(qb.query('A').menuItem('delete')).toHaveCount(0);
-	});
-
-	test('TC-29 a formula over two queries reaches the request', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: metricsQuery() }),
-			SINGLE_PANEL_ID,
-		);
-		await (await qb.addQuery('B')).metric.select(OTHER_SUM_METRIC);
-
-		const formula = await qb.addFormula('F1');
-		await formula.expression().fill('A / B');
-		await formula.legend().fill('ratio');
-		await qb.runButton().click();
-		await expect
-			.poll(() => qb.latest('F1'))
-			.toMatchObject({ expression: 'A / B', legend: 'ratio' });
-
-		await formula.delete();
-		await qb.rerunUntil(
-			() =>
-				qb
-					.sent()
-					.at(-1)
-					?.compositeQuery.queries.map((q) => q.spec.name),
-			['A', 'B'],
-		);
-	});
-});

tests/e2e/tests/query-builder/panel-editor.spec.ts

@@ -1,203 +0,0 @@
-import {
-	logsCountQuery,
-	metricsQuery,
-	PanelKind,
-	SINGLE_PANEL_ID,
-	singlePanelDashboard,
-	test as editorTest,
-} from '../../drivers/panel-editor';
-import {
-	expect,
-	reduceToLabel,
-	SUM_METRIC,
-	withMetricTypes,
-	withQueryBuilder,
-} from '../../drivers/query-builder';
-
-const test = withMetricTypes(withQueryBuilder(editorTest));
-
-const LOGS_FILTER = "severity_text = 'ERROR'";
-const TRACES_FILTER = "http.method = 'GET'";
-const PROMQL = 'sum(rate(signoz_calls_total[5m]))';
-
-const QUERIES = {
-	logs: () => logsCountQuery(),
-	traces: () => logsCountQuery({ signal: 'traces' }),
-	metrics: () => metricsQuery(),
-};
-
-const ALL = ['group_by', 'having', 'order_by', 'limit', 'legend_format'];
-const NO_HAVING = ['group_by', 'order_by', 'limit', 'legend_format'];
-const METRICS = ['having', 'order_by', 'limit', 'legend_format'];
-
-/**
- * Add-on toggles each panel kind offers per signal. Metrics group by lives in
- * the aggregation row, so it is never a toggle there.
- */
-const ADD_ONS: Record<
-	keyof typeof QUERIES,
-	Partial<Record<string, string[]>>
-> = {
-	logs: {
-		[PanelKind.TimeSeries]: ALL,
-		[PanelKind.BarChart]: ALL,
-		[PanelKind.Table]: ALL,
-		[PanelKind.PieChart]: ALL,
-		[PanelKind.Number]: ['legend_format'],
-		[PanelKind.Heatmap]: NO_HAVING,
-	},
-	traces: {
-		[PanelKind.TimeSeries]: ALL,
-		[PanelKind.BarChart]: ALL,
-		[PanelKind.Table]: ALL,
-		[PanelKind.PieChart]: ALL,
-		[PanelKind.Number]: ['legend_format'],
-		[PanelKind.Heatmap]: NO_HAVING,
-	},
-	metrics: {
-		[PanelKind.TimeSeries]: METRICS,
-		[PanelKind.BarChart]: METRICS,
-		[PanelKind.Table]: [...METRICS, 'reduce_to'],
-		[PanelKind.PieChart]: [...METRICS, 'reduce_to'],
-		[PanelKind.Number]: ['legend_format', 'reduce_to'],
-		[PanelKind.Heatmap]: ['order_by', 'limit', 'legend_format', 'bucket_options'],
-	},
-};
-
-test.describe('Query builder — panel editor', () => {
-	for (const [signal, kinds] of Object.entries(ADD_ONS)) {
-		for (const [kind, expected] of Object.entries(kinds)) {
-			test(`TC-27 ${signal} on ${kind.replace('signoz/', '')} offers its add-ons`, async ({
-				dashboards,
-				qb,
-			}) => {
-				await dashboards.seedAndEdit(
-					singlePanelDashboard({
-						kind: kind as PanelKind,
-						query: QUERIES[signal as keyof typeof QUERIES](),
-					}),
-					SINGLE_PANEL_ID,
-				);
-
-				await expect(qb.query('A').addOns.toggles()).toHaveCount(
-					expected?.length ?? 0,
-				);
-				const toggles = await qb
-					.query('A')
-					.addOns.toggles()
-					.evaluateAll((nodes) =>
-						nodes.map((node) =>
-							(node.getAttribute('data-testid') ?? '').replace('query-add-on-', ''),
-						),
-					);
-				expect(toggles).toEqual(expected);
-			});
-		}
-	}
-
-	test('TC-27 a limit hidden by a kind switch reopens with its value', async ({
-		dashboards,
-		editor,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: logsCountQuery() }),
-			SINGLE_PANEL_ID,
-		);
-		const addOns = qb.query('A').addOns;
-		await addOns.open('limit');
-		await addOns.limit().fill('7');
-
-		await editor.switchType(PanelKind.Number);
-		await expect(addOns.content('limit')).toHaveCount(0);
-		await editor.switchType(PanelKind.TimeSeries);
-
-		await expect(addOns.limit()).toHaveValue('7');
-		// The kind switch already fetched: Run can be a cache hit.
-		await qb.runButton().click();
-		await expect.poll(() => qb.latest('A')?.limit).toBe(7);
-	});
-
-	test('TC-26 reduce-to follows the metric type and keeps a choice within it', async ({
-		dashboards,
-		metricTypes,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ kind: PanelKind.Table, query: metricsQuery() }),
-			SINGLE_PANEL_ID,
-		);
-		const query = qb.query('A');
-		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Sum'));
-
-		await query.addOns.reduceTo.set('Max');
-		await query.metric.select('signoz_latency_count');
-		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Max'));
-
-		await query.metric.select(metricTypes.gauge);
-		await expect(query.addOns.reduceTo.value()).toHaveText(
-			reduceToLabel('Average'),
-		);
-
-		await query.metric.select(SUM_METRIC);
-		await expect(query.addOns.reduceTo.value()).toHaveText(reduceToLabel('Sum'));
-		expect(qb.spec(await qb.run(), 'A').aggregations?.[0]).toMatchObject({
-			metricName: SUM_METRIC,
-			reduceTo: 'sum',
-		});
-	});
-
-	test('TC-31 switching signal restores the query left on each signal', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: logsCountQuery({ groupBy: [] }) }),
-			SINGLE_PANEL_ID,
-		);
-		const query = qb.query('A');
-		await query.filter.type(LOGS_FILTER);
-		await query.filter.press('Escape');
-
-		await query.setSignal('Traces');
-		await expect.poll(() => query.filter.expression()).toBe('');
-		await query.filter.type(TRACES_FILTER);
-		await query.filter.press('Escape');
-
-		await query.setSignal('Logs');
-		await expect.poll(() => query.filter.expression()).toBe(LOGS_FILTER);
-		await query.setSignal('Traces');
-		await expect.poll(() => query.filter.expression()).toBe(TRACES_FILTER);
-		await qb.runButton().click();
-		await expect
-			.poll(() => qb.latest('A'))
-			.toMatchObject({
-				signal: 'traces',
-				filter: { expression: TRACES_FILTER },
-			});
-	});
-
-	test('TC-33 a PromQL query is sent as promql and kept across tab switches', async ({
-		dashboards,
-		qb,
-	}) => {
-		await dashboards.seedAndEdit(
-			singlePanelDashboard({ query: metricsQuery() }),
-			SINGLE_PANEL_ID,
-		);
-
-		await qb.tab('promql').click();
-		await qb.promql().fill(PROMQL);
-		const fired = await qb.run();
-		expect(fired.at(-1)?.compositeQuery.queries[0]).toMatchObject({
-			type: 'promql',
-			spec: { name: 'A', query: PROMQL },
-		});
-
-		await qb.tab('clickhouse_sql').click();
-		await qb.tab('builder').click();
-		await expect(qb.query('A').metric.spaceAggregation()).toHaveText('Sum');
-		await qb.tab('promql').click();
-		await expect(qb.promql()).toHaveValue(PROMQL);
-	});
-});

tests/e2e/tests/query-builder/run.spec.ts

@@ -1,80 +0,0 @@
-import { expect, EXPLORER, test } from '../../drivers/query-builder';
-import {
-	holdQueryRange,
-	mockQueryRange,
-	mockQueryRangeError,
-	QueryRange,
-	unmockQueryRange,
-} from '../../helpers/query-range-mock';
-
-test.describe('Query builder — run and cancel', () => {
-	test('TC-34 a held run can be cancelled and the next run goes through', async ({
-		authedPage: page,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		const held = await holdQueryRange(page, QueryRange.empty());
-		await qb.query('A').filter.type("severity_text = 'WARN'");
-		await qb.query('A').filter.press('Escape');
-
-		await qb.runButton().click();
-		await expect(qb.runButton()).toHaveText('Cancel');
-		await qb.runButton().click();
-		await expect(qb.runButton()).toHaveText(/Run Query/);
-		await expect(qb.logsResults()).toContainText('Query cancelled');
-
-		held.release();
-		await unmockQueryRange(page);
-		await qb.query('A').filter.type("severity_text = 'ERROR'");
-		await qb.query('A').filter.press('Escape');
-		// The cancelled query is re-sent alongside; the newest request wins.
-		await qb.run();
-		expect(qb.latest('A')?.filter?.expression).toBe("severity_text = 'ERROR'");
-		await expect(qb.logsResults()).not.toContainText('Query cancelled');
-	});
-
-	test('TC-35 a failed run keeps the query editable and the next run recovers', async ({
-		authedPage: page,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		await mockQueryRangeError(page, 'mocked query failure');
-		await qb.query('A').filter.type("severity_text = 'INFO'");
-		await qb.query('A').filter.press('Escape');
-
-		await qb.runButton().click();
-		// The failed request is retried before the error settles.
-		await expect(qb.runButton()).toHaveText(/Run Query/, { timeout: 20_000 });
-		await expect(qb.logsResults()).toContainText('mocked query failure');
-		await expect
-			.poll(() => qb.query('A').filter.expression())
-			.toBe("severity_text = 'INFO'");
-
-		await unmockQueryRange(page);
-		await qb.query('A').filter.type("severity_text = 'WARN'");
-		await qb.query('A').filter.press('Escape');
-		const fired = await qb.run();
-		expect(qb.spec(fired, 'A').filter?.expression).toBe("severity_text = 'WARN'");
-		await expect(qb.logsResults()).not.toContainText('mocked query failure');
-	});
-
-	test('TC-35 an empty result leaves the query unchanged', async ({
-		authedPage: page,
-		qb,
-	}) => {
-		await qb.openExplorer(EXPLORER.logs);
-		await mockQueryRange(page, QueryRange.empty());
-		await qb.query('A').filter.type("service.name = 'nothing-here'");
-		await qb.query('A').filter.press('Escape');
-
-		const fired = await qb.run();
-
-		expect(qb.spec(fired, 'A').filter?.expression).toBe(
-			"service.name = 'nothing-here'",
-		);
-		await expect
-			.poll(() => qb.query('A').filter.expression())
-			.toBe("service.name = 'nothing-here'");
-		expect(qb.console.errors).toEqual([]);
-	});
-});

tests/e2e/tests/query-builder/url.spec.ts

@@ -1,198 +0,0 @@
-import { expect, EXPLORER, test } from '../../drivers/query-builder';
-
-// A shared or hand-edited explorer link must never take the page down: the
-// param is parsed, repaired and rewritten before the builder mounts.
-
-const MALFORMED: Record<string, string> = {
-	'not JSON': 'not-json',
-	'truncated JSON': '%7B',
-	'a JSON string': encodeURIComponent('"a string"'),
-	'a JSON array': encodeURIComponent('[]'),
-	'JSON null': 'null',
-	'an empty JSON string': '%22%22',
-	'double encoded': encodeURIComponent(
-		encodeURIComponent(JSON.stringify({ queryType: 'builder' })),
-	),
-};
-
-const PARTIAL: Record<string, unknown> = {
-	'an empty object': {},
-	'builder with no builder block': { queryType: 'builder' },
-	'builder with no queryData': { queryType: 'builder', builder: {} },
-	'empty queryData': {
-		queryType: 'builder',
-		builder: { queryData: [], queryFormulas: [] },
-	},
-	'a query with no dataSource': {
-		queryType: 'builder',
-		builder: { queryData: [{ queryName: 'A' }] },
-	},
-	'an unknown queryType': { queryType: 'zzz' },
-	'non-array promql and clickhouse blocks': {
-		queryType: 'builder',
-		promql: {},
-		clickhouse_sql: 'x',
-		builder: { queryData: [{ queryName: 'A', dataSource: 'logs' }] },
-	},
-};
-
-/**
- * Saved before the v5 builder: structured filters, a having array and an
- * aggregate operator. The old having filter wrote `columnName` upper-cased
- * (`COUNT()`).
- */
-const legacyLogsQuery = (having: unknown[]): unknown => ({
-	queryType: 'builder',
-	promql: [],
-	clickhouse_sql: [],
-	builder: {
-		queryFormulas: [],
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource: 'logs',
-				expression: 'A',
-				disabled: false,
-				aggregateOperator: 'count',
-				aggregateAttribute: { key: '', dataType: '', type: '', isColumn: false },
-				filters: {
-					op: 'AND',
-					items: [
-						{
-							id: 'f1',
-							key: {
-								key: 'severity_text',
-								dataType: 'string',
-								type: '',
-								isColumn: true,
-							},
-							op: '=',
-							value: 'ERROR',
-						},
-					],
-				},
-				having,
-				groupBy: [],
-				orderBy: [],
-				functions: [],
-				legend: '',
-				limit: null,
-				stepInterval: 60,
-				reduceTo: 'avg',
-			},
-		],
-	},
-});
-
-const FIRST = "service.name = 'frontend'";
-const SECOND = "service.name = 'cartservice'";
-
-interface UrlQuery {
-	builder?: { queryData?: { filter?: { expression?: string } }[] };
-}
-
-test.describe('Query builder — URL handling', () => {
-	for (const [label, raw] of Object.entries(MALFORMED)) {
-		test(`TC-01 logs explorer survives ${label} and still runs`, async ({
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER.logs, { raw });
-
-			await expect(qb.query('A').filter.content()).toBeVisible();
-			await qb.query('A').filter.type("severity_text = 'ERROR'");
-			const fired = await qb.run();
-
-			expect(qb.spec(fired, 'A').filter?.expression).toBe(
-				"severity_text = 'ERROR'",
-			);
-			expect(qb.urlQuery()).toMatchObject({ queryType: 'builder' });
-			expect(qb.console.errors).toEqual([]);
-		});
-	}
-
-	for (const [label, query] of Object.entries(PARTIAL)) {
-		test(`TC-02 logs explorer repairs ${label}`, async ({ qb }) => {
-			const loaded = await qb.openExplorer(EXPLORER.logs, { query });
-
-			expect(qb.spec(loaded, 'A').signal).toBe('logs');
-			await expect
-				.poll(() => qb.urlQuery())
-				.toMatchObject({
-					queryType: 'builder',
-					builder: { queryData: [{ queryName: 'A', dataSource: 'logs' }] },
-				});
-			expect(qb.console.errors).toEqual([]);
-		});
-	}
-
-	test('TC-03 legacy filters and aggregate operator convert to v5 expressions', async ({
-		qb,
-	}) => {
-		const loaded = await qb.openExplorer(EXPLORER.logs, {
-			view: 'graph',
-			query: legacyLogsQuery([]),
-		});
-
-		const spec = qb.spec(loaded, 'A');
-		expect(spec.filter?.expression).toMatch(/^severity_text\s*=\s*'ERROR'$/);
-		expect(spec.aggregations?.[0]?.expression).toBe('count()');
-		expect(spec).not.toHaveProperty('filters');
-		await expect
-			.poll(() => qb.query('A').filter.expression())
-			.toMatch(/^severity_text\s*=\s*'ERROR'$/);
-		expect(qb.console.errors).toEqual([]);
-	});
-
-	// known: convertHavingToExpression keeps the stored `COUNT()` casing, which
-	// the v5 backend rejects with a 400 ("Invalid references in `Having`").
-	test.fixme('TC-03 a legacy having as the old builder stored it still runs', async ({
-		qb,
-	}) => {
-		const loaded = await qb.openExplorer(EXPLORER.logs, {
-			view: 'graph',
-			query: legacyLogsQuery([{ columnName: 'COUNT()', op: '>', value: 5 }]),
-		});
-
-		expect(qb.spec(loaded, 'A').having?.expression).toMatch(
-			/^count\(\)\s*>\s*5$/i,
-		);
-		expect(qb.console.failedResponses).toEqual([]);
-	});
-
-	for (const explorer of ['logs', 'traces'] as const) {
-		test(`TC-04 ${explorer} explorer query follows back, forward and reload`, async ({
-			authedPage: page,
-			qb,
-		}) => {
-			await qb.openExplorer(EXPLORER[explorer]);
-			const filter = qb.query('A').filter;
-			const urlFilter = (): unknown =>
-				(qb.urlQuery() as UrlQuery | null)?.builder?.queryData?.[0]?.filter
-					?.expression;
-
-			await filter.type(FIRST);
-			await qb.run();
-			await filter.type(SECOND);
-			await qb.run();
-
-			await page.goBack();
-			await expect.poll(urlFilter).toBe(FIRST);
-			await expect.poll(() => filter.expression()).toBe(FIRST);
-
-			await page.goForward();
-			await expect.poll(urlFilter).toBe(SECOND);
-			await expect.poll(() => filter.expression()).toBe(SECOND);
-
-			await filter.type("service.name = 'unsaved'");
-			const sentBefore = qb.sent().length;
-			await page.reload();
-			await expect.poll(() => filter.expression()).toBe(SECOND);
-			await expect
-				.poll(() => qb.sent().slice(sentBefore).length)
-				.toBeGreaterThan(0);
-			expect(qb.spec(qb.sent().slice(sentBefore), 'A').filter?.expression).toBe(
-				SECOND,
-			);
-		});
-	}
-});