chore(sentry): drop the tab-close case from the request failure comment

.github/CODEOWNERS

@@ -194,8 +194,8 @@ go.mod @therealpandey
 /frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
 /frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
-/frontend/src/container/CreateAlert/ @SigNoz/pulse-frontend
-/frontend/src/container/EditAlert/ @SigNoz/pulse-frontend
+/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
+/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
 /frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend

docs/api/openapi.yml

@@ -3970,7 +3970,6 @@ components:
       - logs-field
       - traces-field
       - metrics-field
-      - llm-pricing-rule
       type: string
     CoretypesObject:
       properties:
@@ -11746,10 +11745,20 @@ components:
           description: Whether the rule is paused. A disabled rule is neither evaluated
             nor notifies. Defaults to false.
           type: boolean
+        evalWindow:
+          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.
+          type: string
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
           description: The evaluation window, as a kind and spec.
+        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
+            it in evaluation.spec instead.
+          type: string
         labels:
           additionalProperties:
             type: string
@@ -11761,6 +11770,13 @@ components:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
           description: Grouping, re-notification and routing behaviour.
+        preferredChannels:
+          description: The displayName of each notification channel to notify, for
+            schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
+            its own channels.
+          items:
+            type: string
+          type: array
         ruleType:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleType'
@@ -11870,10 +11886,20 @@ components:
           description: Whether the rule is paused. A disabled rule is neither evaluated
             nor notifies. Defaults to false.
           type: boolean
+        evalWindow:
+          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.
+          type: string
         evaluation:
           allOf:
           - $ref: '#/components/schemas/RuletypesEvaluationEnvelope'
           description: The evaluation window, as a kind and spec.
+        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
+            it in evaluation.spec instead.
+          type: string
         id:
           description: The unique identifier of the rule.
           type: string
@@ -11888,6 +11914,13 @@ components:
           allOf:
           - $ref: '#/components/schemas/RuletypesNotificationSettings'
           description: Grouping, re-notification and routing behaviour.
+        preferredChannels:
+          description: The displayName of each notification channel to notify, for
+            schemaVersion v1 rules. Ignored for v2alpha1, where each threshold carries
+            its own channels.
+          items:
+            type: string
+          type: array
         ruleType:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleType'
@@ -11941,10 +11974,28 @@ components:
           description: Whether to fire a nodata alert when the query returns no data.
             Defaults to false.
           type: boolean
+        algorithm:
+          description: 'anomaly_rule only: the anomaly detection algorithm. The supported
+            value is standard.'
+          type: string
         compositeQuery:
           allOf:
           - $ref: '#/components/schemas/RuletypesAlertCompositeQuery'
           description: The queries whose result is compared against the thresholds.
+        matchType:
+          allOf:
+          - $ref: '#/components/schemas/RuletypesMatchType'
+          description: 'schemaVersion v1 only: which points in the window must satisfy
+            op. Accepted as at_least_once, all_the_times, on_average, in_total or
+            last, their aliases avg and sum, or the legacy codes as strings, ''1''
+            to ''5''. Required for v1; v2alpha1 sets matchType on each threshold.'
+        op:
+          allOf:
+          - $ref: '#/components/schemas/RuletypesCompareOperator'
+          description: 'schemaVersion v1 only: how the value is compared with target.
+            Accepted as above, below, equal, not_equal, above_or_equal, below_or_equal
+            or outside_bounds, their symbols, or the legacy codes as strings, ''1''
+            to ''7''. Required for v1; v2alpha1 sets op on each threshold.'
         requireMinPoints:
           description: Whether a series is skipped until it has at least requiredNumPoints
             points in the window. Defaults to false.
@@ -11962,6 +12013,17 @@ components:
           description: The name of the query whose result is evaluated, such as A
             or F1. Must match a query in compositeQuery.
           type: string
+        target:
+          description: 'schemaVersion v1 only: the value compared against, in targetUnit.
+            Required for v1; v2alpha1 sets target on each threshold.'
+          format: double
+          nullable: true
+          type: number
+        targetUnit:
+          description: 'schemaVersion v1 only: the unit of target, such as percent
+            or ms. Converted to compositeQuery.unit before comparison when the two
+            differ.'
+          type: string
         thresholds:
           allOf:
           - $ref: '#/components/schemas/RuletypesRuleThresholdData'
@@ -16088,9 +16150,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - llm-pricing-rule:list
+        - VIEWER
       - tokenizer:
-        - llm-pricing-rule:list
+        - VIEWER
       summary: List pricing rules
       tags:
       - llmpricingrules
@@ -16135,9 +16197,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - llm-pricing-rule:update
+        - ADMIN
       - tokenizer:
-        - llm-pricing-rule:update
+        - ADMIN
       summary: Create or update pricing rules
       tags:
       - llmpricingrules
@@ -16183,9 +16245,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - llm-pricing-rule:delete
+        - ADMIN
       - tokenizer:
-        - llm-pricing-rule:delete
+        - ADMIN
       summary: Delete a pricing rule
       tags:
       - llmpricingrules
@@ -16241,9 +16303,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - llm-pricing-rule:read
+        - VIEWER
       - tokenizer:
-        - llm-pricing-rule:read
+        - VIEWER
       summary: Get a pricing rule
       tags:
       - llmpricingrules
@@ -16296,11 +16358,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - llm-pricing-rule:list
-        - traces:read
+        - VIEWER
       - tokenizer:
-        - llm-pricing-rule:list
-        - traces:read
+        - VIEWER
       summary: List unmapped models
       tags:
       - llmpricingrules
@@ -25470,6 +25530,56 @@ paths:
       - rules
       x-signoz-stability: alpha
   /api/v2/rules:
+    get:
+      deprecated: true
+      description: 'This endpoint lists all alert rules with their current evaluation
+        state. Deprecated: use ListRulesV3, which supports filtering, sorting and
+        pagination.'
+      operationId: ListRules
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      $ref: '#/components/schemas/RuletypesRule'
+                    type: array
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List alert rules
+      tags:
+      - rules
+      x-signoz-stability: alpha
     post:
       deprecated: false
       description: This endpoint creates a new alert rule

ee/query-service/rules/anomaly.go

@@ -34,7 +34,8 @@ type AnomalyRule struct {
 
 	provider anomaly.Provider
 
-	logger *slog.Logger
+	version string
+	logger  *slog.Logger
 
 	seasonality anomaly.Seasonality
 }
@@ -62,6 +63,7 @@ func NewAnomalyRule(
 	r := AnomalyRule{
 		BaseRule: baseRule,
 		querier:  querier,
+		version:  p.Version,
 		logger:   logger.With(slog.String("rule.id", id)),
 	}
 
@@ -103,15 +105,15 @@ func (r *AnomalyRule) Type() ruletypes.RuleType {
 }
 
 func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) *qbtypes.QueryRangeRequest {
-	startTs, endTs := r.Timestamps(ts)
-	start, end := startTs.UnixMilli(), endTs.UnixMilli()
-
 	r.logger.InfoContext(
 		ctx, "prepare query range request", slog.Int64("ts", ts.UnixMilli()),
-		slog.Int64("eval.window_ms", end-start),
+		slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()),
 		slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()),
 	)
 
+	startTs, endTs := r.Timestamps(ts)
+	start, end := startTs.UnixMilli(), endTs.UnixMilli()
+
 	req := &qbtypes.QueryRangeRequest{
 		Start:       uint64(start),
 		End:         uint64(end),
@@ -418,10 +420,12 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 func (r *AnomalyRule) String() string {
 
 	ar := ruletypes.PostableRule{
-		AlertName:     valuer.NewDisplayName(r.Name()),
-		RuleCondition: r.Condition(),
-		Labels:        r.Labels().Map(),
-		Annotations:   r.Annotations().Map(),
+		AlertName:         valuer.NewDisplayName(r.Name()),
+		RuleCondition:     r.Condition(),
+		EvalWindow:        r.EvalWindow(),
+		Labels:            r.Labels().Map(),
+		Annotations:       r.Annotations().Map(),
+		PreferredChannels: r.PreferredChannels(),
 	}
 
 	byt, err := json.Marshal(ar)

ee/query-service/rules/anomaly_test.go

@@ -54,6 +54,9 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
+			CompareOperator: ruletypes.ValueIsAbove,
+			MatchType:       ruletypes.AtleastOnce,
+			Target:          &target,
 			CompositeQuery: &ruletypes.AlertCompositeQuery{
 				QueryType: ruletypes.QueryTypeBuilder,
 				Queries: []qbtypes.QueryEnvelope{{
@@ -154,7 +157,10 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
-			AlertOnAbsent: true,
+			CompareOperator: ruletypes.ValueIsAbove,
+			MatchType:       ruletypes.AtleastOnce,
+			AlertOnAbsent:   true,
+			Target:          &target,
 			CompositeQuery: &ruletypes.AlertCompositeQuery{
 				QueryType: ruletypes.QueryTypeBuilder,
 				Queries: []qbtypes.QueryEnvelope{{

frontend/src/AppRoutes/__tests__/sentryFilters.test.ts

@@ -1,7 +1,9 @@
 import type { ErrorEvent, StackFrame } from '@sentry/react';
+import { AxiosError, AxiosHeaders } from 'axios';
 
 import {
 	hasNoAppFrames,
+	isExpectedRequestFailure,
 	isExternalIntegrationError,
 	SENTRY_IGNORE_ERRORS,
 } from '../sentryFilters';
@@ -138,3 +140,36 @@ describe('SENTRY_IGNORE_ERRORS', () => {
 		).toBe(true);
 	});
 });
+
+describe('isExpectedRequestFailure', () => {
+	function axiosErrorWithStatus(status: number): AxiosError {
+		const config = { headers: new AxiosHeaders() };
+		return new AxiosError(
+			`Request failed with status code ${status}`,
+			AxiosError.ERR_BAD_REQUEST,
+			config,
+			undefined,
+			{ status, statusText: '', headers: {}, config, data: {} },
+		);
+	}
+
+	it.each([401, 403])('drops a %i response', (status) => {
+		expect(isExpectedRequestFailure(axiosErrorWithStatus(status))).toBe(true);
+	});
+
+	it('drops a network error', () => {
+		expect(
+			isExpectedRequestFailure(
+				new AxiosError('Network Error', AxiosError.ERR_NETWORK),
+			),
+		).toBe(true);
+	});
+
+	it.each([400, 404, 500, 503])('keeps a %i response', (status) => {
+		expect(isExpectedRequestFailure(axiosErrorWithStatus(status))).toBe(false);
+	});
+
+	it('keeps an error that is not from axios', () => {
+		expect(isExpectedRequestFailure(new Error('Network Error'))).toBe(false);
+	});
+});

frontend/src/AppRoutes/index.tsx

@@ -40,6 +40,7 @@ import defaultRoutes, {
 } from './routes';
 import {
 	hasNoAppFrames,
+	isExpectedRequestFailure,
 	isExternalIntegrationError,
 	SENTRY_IGNORE_ERRORS,
 } from './sentryFilters';
@@ -341,6 +342,9 @@ function App(): JSX.Element {
 						if (error?.name === 'AbortError') {
 							return null;
 						}
+						if (isExpectedRequestFailure(hint?.originalException)) {
+							return null;
+						}
 						// Ignore benign Monaco cancellation errors (name 'Canceled').
 						if (error?.name === 'Canceled') {
 							return null;

frontend/src/AppRoutes/sentryFilters.ts

@@ -1,4 +1,5 @@
 import type { ErrorEvent } from '@sentry/react';
+import { AxiosError, isAxiosError } from 'axios';
 
 export const SENTRY_IGNORE_ERRORS = [
 	// A tab that outlived a deploy requests hashed assets the new build no longer
@@ -14,6 +15,18 @@ export const SENTRY_IGNORE_ERRORS = [
 	/Called on script loaded before session recording is available/,
 ];
 
+// Not UI bugs: 401/403 come from the session or role, ERR_NETWORK from a
+// dropped connection.
+export function isExpectedRequestFailure(error: unknown): boolean {
+	if (!isAxiosError(error)) {
+		return false;
+	}
+	const status = error.response?.status;
+	return (
+		error.code === AxiosError.ERR_NETWORK || status === 401 || status === 403
+	);
+}
+
 const APP_ASSETS_PATH = '/assets/';
 
 // Frames without a position are `[native code]`, which says nothing about the

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

@@ -45,6 +45,7 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRuleViews200,
+	ListRules200,
 	ListRulesV3200,
 	ListRulesV3Params,
 	PatchRuleByID200,
@@ -426,6 +427,85 @@ export const useUpdateRuleView = <
 > => {
 	return useMutation(getUpdateRuleViewMutationOptions(options));
 };
+/**
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
+ * @summary List alert rules
+ */
+export const listRules = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRules200>({
+		url: `/api/v2/rules`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRulesQueryKey = () => {
+	return [`/api/v2/rules`] as const;
+};
+
+export const getListRulesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRules>>> = ({
+		signal,
+	}) => listRules(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRules>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRules>>
+>;
+export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary List alert rules
+ */
+
+export function useListRules<
+	TData = Awaited<ReturnType<typeof listRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @deprecated
+ * @summary List alert rules
+ */
+export const invalidateListRules = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint creates a new alert rule
  * @summary Create alert rule

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

@@ -3611,7 +3611,6 @@ export enum CoretypesKindDTO {
 	'logs-field' = 'logs-field',
 	'traces-field' = 'traces-field',
 	'metrics-field' = 'metrics-field',
-	'llm-pricing-rule' = 'llm-pricing-rule',
 }
 export enum CoretypesTypeDTO {
 	user = 'user',
@@ -12967,10 +12966,23 @@ export interface RuletypesRuleConditionDTO {
 	 * @description Whether to fire a nodata alert when the query returns no data. Defaults to false.
 	 */
 	alertOnAbsent?: boolean;
+	/**
+	 * @type string
+	 * @description anomaly_rule only: the anomaly detection algorithm. The supported value is standard.
+	 */
+	algorithm?: string;
 	/**
 	 * @description The queries whose result is compared against the thresholds.
 	 */
 	compositeQuery: RuletypesAlertCompositeQueryDTO;
+	/**
+	 * @description schemaVersion v1 only: which points in the window must satisfy op. Accepted as at_least_once, all_the_times, on_average, in_total or last, their aliases avg and sum, or the legacy codes as strings, '1' to '5'. Required for v1; v2alpha1 sets matchType on each threshold.
+	 */
+	matchType?: RuletypesMatchTypeDTO;
+	/**
+	 * @description schemaVersion v1 only: how the value is compared with target. Accepted as above, below, equal, not_equal, above_or_equal, below_or_equal or outside_bounds, their symbols, or the legacy codes as strings, '1' to '7'. Required for v1; v2alpha1 sets op on each threshold.
+	 */
+	op?: RuletypesCompareOperatorDTO;
 	/**
 	 * @type boolean
 	 * @description Whether a series is skipped until it has at least requiredNumPoints points in the window. Defaults to false.
@@ -12990,6 +13002,17 @@ export interface RuletypesRuleConditionDTO {
 	 * @description The name of the query whose result is evaluated, such as A or F1. Must match a query in compositeQuery.
 	 */
 	selectedQueryName: string;
+	/**
+	 * @type number,null
+	 * @format double
+	 * @description schemaVersion v1 only: the value compared against, in targetUnit. Required for v1; v2alpha1 sets target on each threshold.
+	 */
+	target?: number | null;
+	/**
+	 * @type string
+	 * @description schemaVersion v1 only: the unit of target, such as percent or ms. Converted to compositeQuery.unit before comparison when the two differ.
+	 */
+	targetUnit?: string;
 	/**
 	 * @description The thresholds to evaluate, as a kind and spec.
 	 */
@@ -13025,10 +13048,20 @@ export interface RuletypesPostableRuleDTO {
 	 * @description Whether the rule is paused. A disabled rule is neither evaluated nor notifies. Defaults to false.
 	 */
 	disabled?: boolean;
+	/**
+	 * @type string
+	 * @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.
+	 */
+	evalWindow?: string;
 	/**
 	 * @description The evaluation window, as a kind and spec.
 	 */
 	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.
+	 */
+	frequency?: string;
 	/**
 	 * @type object
 	 * @description Labels attached to every alert the rule fires. Keys match [a-zA-Z_.][a-zA-Z0-9_.]*; values may use Go templates such as {{$labels.service_name}}. severity is the conventional routing label.
@@ -13038,6 +13071,11 @@ export interface RuletypesPostableRuleDTO {
 	 * @description Grouping, re-notification and routing behaviour.
 	 */
 	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.
 	 */
@@ -13122,10 +13160,20 @@ export interface RuletypesRuleDTO {
 	 * @description Whether the rule is paused. A disabled rule is neither evaluated nor notifies. Defaults to false.
 	 */
 	disabled?: boolean;
+	/**
+	 * @type string
+	 * @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.
+	 */
+	evalWindow?: string;
 	/**
 	 * @description The evaluation window, as a kind and spec.
 	 */
 	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.
+	 */
+	frequency?: string;
 	/**
 	 * @type string
 	 * @description The unique identifier of the rule.
@@ -13140,6 +13188,11 @@ export interface RuletypesRuleDTO {
 	 * @description Grouping, re-notification and routing behaviour.
 	 */
 	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.
 	 */
@@ -16730,6 +16783,17 @@ export type UpdateRuleView200 = {
 	status: string;
 };
 
+export type ListRules200 = {
+	/**
+	 * @type array
+	 */
+	data: RuletypesRuleDTO[];
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type CreateRule201 = {
 	data: RuletypesRuleDTO;
 	/**

frontend/src/constants/query.ts

@@ -53,6 +53,7 @@ export enum QueryParams {
 	variables = 'variables',
 	version = 'version',
 	source = 'source',
+	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
 	yAxisUnit = 'yAxisUnit',
 	ruleName = 'ruleName',

frontend/src/constants/reactQueryKeys.ts

@@ -26,6 +26,7 @@ export const REACT_QUERY_KEY = {
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	CLONE_ALERT_RULE: 'CLONE_ALERT_RULE',
 	GET_HOST_LIST: 'GET_HOST_LIST',
+	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
 	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
 	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',

frontend/src/container/CreateAlert/index.ts

@@ -1,3 +0,0 @@
-import CreateAlert from './CreateAlert';
-
-export default CreateAlert;

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -0,0 +1,136 @@
+import ROUTES from 'constants/routes';
+import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
+import CreateAlertPage from 'pages/CreateAlert';
+import { act, fireEvent, render } from 'tests/test-utils';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
+
+jest
+	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
+	.mockReturnValue({
+		matchType: '3',
+		op: '1',
+		target: 100,
+		targetUnit: 'rpm',
+	});
+
+let mockWindowOpen: jest.Mock;
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+function findLinkForAlertType(
+	links: HTMLElement[],
+	alertType: AlertTypes,
+): HTMLElement {
+	const link = links.find(
+		(el) =>
+			el.closest('[data-testid]')?.getAttribute('data-testid') ===
+			`alert-type-card-${alertType}`,
+	);
+	expect(link).toBeTruthy();
+	return link as HTMLElement;
+}
+
+function clickLinkAndVerifyRedirect(
+	link: HTMLElement,
+	expectedUrl: string,
+): void {
+	fireEvent.click(link);
+	expect(mockWindowOpen).toHaveBeenCalledWith(expectedUrl, '_blank');
+}
+describe('Alert rule documentation redirection', () => {
+	let renderResult: ReturnType<typeof render>;
+
+	beforeAll(() => {
+		mockWindowOpen = jest.fn();
+		window.open = mockWindowOpen;
+	});
+
+	beforeEach(() => {
+		act(() => {
+			renderResult = render(
+				<CreateAlertPage />,
+				{},
+				{
+					initialRoute: ROUTES.ALERTS_NEW,
+				},
+			);
+		});
+	});
+
+	it('should render alert type cards', () => {
+		const { getByText, getAllByText } = renderResult;
+
+		// Check for the heading
+		expect(getByText('choose_alert_type')).toBeInTheDocument();
+
+		// Check for alert type titles and descriptions
+		Object.values(AlertTypes).forEach((alertType) => {
+			const title = ALERT_TYPE_TO_TITLE[alertType];
+			expect(getByText(title)).toBeInTheDocument();
+			expect(getByText(`${title}_desc`)).toBeInTheDocument();
+		});
+
+		const clickHereLinks = getAllByText(
+			'Click here to see how to create a sample alert.',
+		);
+
+		expect(clickHereLinks).toHaveLength(5);
+	});
+
+	it('should redirect to correct documentation for each alert type', () => {
+		const { getAllByText } = renderResult;
+
+		const clickHereLinks = getAllByText(
+			'Click here to see how to create a sample alert.',
+		);
+		const alertTypeCount = Object.keys(AlertTypes).length;
+
+		expect(clickHereLinks).toHaveLength(alertTypeCount);
+
+		Object.values(AlertTypes).forEach((alertType) => {
+			const linkForAlertType = findLinkForAlertType(clickHereLinks, alertType);
+			const expectedUrl = ALERT_TYPE_URL_MAP[alertType];
+
+			clickLinkAndVerifyRedirect(linkForAlertType, expectedUrl.selection);
+		});
+
+		expect(mockWindowOpen).toHaveBeenCalledTimes(alertTypeCount);
+	});
+});
+
+describe('Create alert page redirection', () => {
+	Object.values(AlertTypes)
+		.filter((type) => type !== AlertTypes.ANOMALY_BASED_ALERT)
+		.forEach((alertType) => {
+			it(`should redirect to create alert page for ${alertType} and "Check an example alert" should redirect to the correct documentation`, () => {
+				const { getByRole } = render(
+					<CreateAlertPage />,
+					{},
+					{
+						initialRoute: `${ROUTES.ALERTS_NEW}?alertType=${alertType}&showClassicCreateAlertsPage=true`,
+					},
+				);
+
+				act(() => {
+					fireEvent.click(
+						getByRole('button', {
+							name: /alert setup guide/i,
+						}),
+					);
+				});
+
+				expect(mockWindowOpen).toHaveBeenCalledWith(
+					ALERT_TYPE_URL_MAP[alertType].creation,
+					'_blank',
+				);
+			});
+		});
+});

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -0,0 +1,60 @@
+import ROUTES from 'constants/routes';
+import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
+import CreateAlertPage from 'pages/CreateAlert';
+import { act, fireEvent, render } from 'tests/test-utils';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+
+import { ALERT_TYPE_URL_MAP } from './constants';
+
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+jest
+	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
+	.mockReturnValue({
+		matchType: '3',
+		op: '1',
+		target: 100,
+		targetUnit: 'rpm',
+	});
+
+describe('Anomaly Alert Documentation Redirection', () => {
+	let mockWindowOpen: jest.Mock;
+
+	beforeAll(() => {
+		mockWindowOpen = jest.fn();
+		window.open = mockWindowOpen;
+	});
+
+	it('should handle anomaly alert documentation redirection correctly', () => {
+		// The setup guide button only exists in the classic form.
+		const { getByRole } = render(<CreateAlertPage />, undefined, {
+			initialRoute: `${ROUTES.ALERTS_NEW}?ruleType=anomaly_rule&showClassicCreateAlertsPage=true`,
+		});
+
+		const alertType = AlertTypes.ANOMALY_BASED_ALERT;
+
+		act(() => {
+			fireEvent.click(
+				getByRole('button', {
+					name: /alert setup guide/i,
+				}),
+			);
+		});
+
+		expect(mockWindowOpen).toHaveBeenCalledWith(
+			ALERT_TYPE_URL_MAP[alertType].creation,
+			'_blank',
+		);
+	});
+});

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
-import { useIsAnomalyDetectionAvailable } from 'container/CreateAlert/useIsAnomalyDetectionAvailable';
+import { useIsAnomalyDetectionAvailable } from 'container/CreateAlertV2/useIsAnomalyDetectionAvailable';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';

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

@@ -23,9 +23,28 @@ jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
 	},
 }));
 
-jest.mock('container/CreateAlert', () => ({
+jest.mock('container/FormAlertRules', () => ({
 	__esModule: true,
-	default: function MockCreateAlert({
+	default: function MockFormAlertRules({
+		alertType,
+	}: {
+		alertType: AlertTypes;
+	}): JSX.Element {
+		return (
+			<div>
+				<h1>Form Alert Rules</h1>
+				<p>{alertType}</p>
+			</div>
+		);
+	},
+	AlertDetectionTypes: {
+		THRESHOLD_ALERT: 'threshold_rule',
+		ANOMALY_DETECTION_ALERT: 'anomaly_rule',
+	},
+}));
+jest.mock('container/CreateAlertV2', () => ({
+	__esModule: true,
+	default: function MockCreateAlertV2({
 		alertType,
 	}: {
 		alertType: AlertTypes;
@@ -57,6 +76,7 @@ const mockGetUrlQuery = jest.fn();
 const mockSafeNavigate = jest.fn();
 const mockDeleteUrlQuery = jest.fn();
 
+const FORM_ALERT_RULES_TEXT = 'Form Alert Rules';
 const CREATE_ALERT_V2_TEXT = 'Create Alert V2';
 
 describe('CreateAlertRule', () => {
@@ -75,6 +95,20 @@ describe('CreateAlertRule', () => {
 		useAppContextSpy.mockReturnValue(getAppContextMockState());
 	});
 
+	it('should render classic flow when showClassicCreateAlertsPage is true', () => {
+		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.showClassicCreateAlertsPage) {
+				return 'true';
+			}
+			if (key === QueryParams.alertType) {
+				return AlertTypes.METRICS_BASED_ALERT;
+			}
+			return null;
+		});
+		render(<CreateAlertRule />);
+		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
+	});
+
 	it('should render new flow when alertType is provided', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.alertType) {
@@ -90,6 +124,7 @@ describe('CreateAlertRule', () => {
 		mockGetUrlQuery.mockReturnValue(null);
 		useCompositeQueryParamSpy.mockReturnValue(null);
 		render(<CreateAlertRule />);
+		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
 		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
 	});
 
@@ -114,6 +149,9 @@ describe('CreateAlertRule', () => {
 
 	it('should render new flow with the anomaly alert type when ruleType is anomaly_rule', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
+			if (key === QueryParams.showClassicCreateAlertsPage) {
+				return 'false';
+			}
 			if (key === QueryParams.ruleType) {
 				return 'anomaly_rule';
 			}
@@ -122,6 +160,7 @@ describe('CreateAlertRule', () => {
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(AlertTypes.ANOMALY_BASED_ALERT)).toBeInTheDocument();
+		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
 	});
 
 	it('should use alertType from URL when provided', () => {
@@ -245,5 +284,27 @@ describe('CreateAlertRule', () => {
 			);
 			expect(mockSafeNavigate).toHaveBeenCalled();
 		});
+
+		it('should navigate even when showClassicCreateAlertsPage flag is present', () => {
+			mockGetUrlQuery.mockImplementation((key: string) => {
+				if (key === QueryParams.showClassicCreateAlertsPage) {
+					return 'true';
+				}
+				return null;
+			});
+
+			render(<CreateAlertRule />);
+			fireEvent.click(screen.getByText('metric_based_alert'));
+
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.ruleType,
+				'threshold_rule',
+			);
+			expect(mockSetUrlQuery).toHaveBeenCalledWith(
+				QueryParams.alertType,
+				AlertTypes.METRICS_BASED_ALERT,
+			);
+			expect(mockSafeNavigate).toHaveBeenCalled();
+		});
 	});
 });

frontend/src/container/CreateAlertRule/defaults.ts

@@ -1,10 +1,10 @@
-import { RuletypesRuleTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import {
 	initialQueryBuilderFormValuesMap,
 	initialQueryPromQLData,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {
 	AlertDef,
@@ -63,7 +63,7 @@ export const alertDefaults: AlertDef = {
 export const anamolyAlertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
 	version: ENTITY_VERSION_V5,
-	ruleType: RuletypesRuleTypeDTO.anomaly_rule,
+	ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -201,6 +201,14 @@ export const exceptionAlertDefaults: AlertDef = {
 	alert: '',
 };
 
+export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
+	[AlertTypes.ANOMALY_BASED_ALERT]: anamolyAlertDefaults,
+	[AlertTypes.METRICS_BASED_ALERT]: alertDefaults,
+	[AlertTypes.LOGS_BASED_ALERT]: logAlertDefaults,
+	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,
+	[AlertTypes.EXCEPTIONS_BASED_ALERT]: exceptionAlertDefaults,
+};
+
 export const ALERT_TYPE_BREADCRUMB_TITLE: Record<AlertTypes, string> = {
 	[AlertTypes.ANOMALY_BASED_ALERT]: 'Anomaly-Based Alert',
 	[AlertTypes.METRICS_BASED_ALERT]: 'Metric-Based Alert',

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { Tabs, TabsProps } from 'antd';
+import { Form, Tabs, TabsProps } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { RuletypesRuleTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
 import AlertBreadcrumb from 'components/AlertBreadcrumb';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
-import CreateAlert from 'container/CreateAlert';
+import CreateAlertV2 from 'container/CreateAlertV2';
+import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -15,20 +16,25 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { AlertListTabs } from 'pages/AlertList/types';
 import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { AlertDef } from 'types/api/alerts/def';
 
 import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
-import { ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
+import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
 import SelectAlertType from './SelectAlertType';
 
 import './CreateAlertRule.styles.scss';
 
 function CreateRules(): JSX.Element {
+	const [formInstance] = Form.useForm();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
 
 	const ruleTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const alertTypeFromURL = queryParams.get(QueryParams.alertType);
+	const version = queryParams.get(QueryParams.version);
+	const showClassicCreateAlertsPageFlag =
+		queryParams.get(QueryParams.showClassicCreateAlertsPage) === 'true';
 
 	const isTypeSelectionMode =
 		!alertTypeFromURL && !ruleTypeFromURL && !compositeQuery;
@@ -40,7 +46,7 @@ function CreateRules(): JSX.Element {
 	}, [isTypeSelectionMode]);
 
 	const alertType = useMemo(() => {
-		if (ruleTypeFromURL === RuletypesRuleTypeDTO.anomaly_rule) {
+		if (ruleTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
 			return AlertTypes.ANOMALY_BASED_ALERT;
 		}
 		if (!alertTypeFromURL) {
@@ -53,6 +59,14 @@ function CreateRules(): JSX.Element {
 		return alertTypeFromURL as AlertTypes;
 	}, [alertTypeFromURL, ruleTypeFromURL, compositeQuery?.builder.queryData]);
 
+	const initialAlertValue: AlertDef = useMemo(
+		() => ({
+			...ALERTS_VALUES_MAP[alertType],
+			version: version || ENTITY_VERSION_V5,
+		}),
+		[alertType, version],
+	);
+
 	const handleTabChange = useCallback(
 		(tab: string): void => {
 			queryParams.set('tab', tab);
@@ -66,10 +80,13 @@ function CreateRules(): JSX.Element {
 	const handleSelectType = useCallback(
 		(type: AlertTypes, newTab?: boolean): void => {
 			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-				queryParams.set(QueryParams.ruleType, RuletypesRuleTypeDTO.anomaly_rule);
+				queryParams.set(
+					QueryParams.ruleType,
+					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+				);
 				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
 			} else {
-				queryParams.set(QueryParams.ruleType, RuletypesRuleTypeDTO.threshold_rule);
+				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
 				queryParams.set(QueryParams.alertType, type);
 			}
 
@@ -82,8 +99,26 @@ function CreateRules(): JSX.Element {
 		if (isTypeSelectionMode) {
 			return <SelectAlertType onSelect={handleSelectType} />;
 		}
-		return <CreateAlert alertType={alertType} />;
-	}, [isTypeSelectionMode, handleSelectType, alertType]);
+
+		if (showClassicCreateAlertsPageFlag) {
+			return (
+				<FormAlertRules
+					alertType={alertType}
+					formInstance={formInstance}
+					initialValue={initialAlertValue}
+					ruleId=""
+				/>
+			);
+		}
+		return <CreateAlertV2 alertType={alertType} />;
+	}, [
+		isTypeSelectionMode,
+		handleSelectType,
+		showClassicCreateAlertsPageFlag,
+		alertType,
+		formInstance,
+		initialAlertValue,
+	]);
 
 	const items: TabsProps['items'] = [
 		{

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AlertThreshold.test.tsx

@@ -111,8 +111,8 @@ jest.mock('constants/formats/alertFormatCategories', () => ({
 	]),
 }));
 
-jest.mock('container/CreateAlert/utils', () => ({
-	...jest.requireActual('container/CreateAlert/utils'),
+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
 }));
 
 const TEST_STRINGS = {

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/AnomalyThreshold.test.tsx

@@ -1,4 +1,4 @@
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { render, screen, userEvent, within } from 'tests/test-utils';
 import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';
 

frontend/src/container/CreateAlertV2/AlertCondition/__tests__/ThresholdItem.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { DefaultOptionType } from 'antd/es/select';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as appHooks from 'providers/App/App';
 import { ChannelOption } from 'hooks/notificationChannels/useChannelOptions';

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -9,7 +9,7 @@ import ROUTES from 'constants/routes';
 import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
-} from 'container/CreateAlert/context/types';
+} from 'container/CreateAlertV2/context/types';
 import { getSelectedQueryOptions } from 'container/FormAlertRules/utils';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { ArrowRight } from '@signozhq/icons';

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -1,7 +1,14 @@
 import { useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
+import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { RotateCcw } from '@signozhq/icons';
 import { useAlertRuleOptional } from 'providers/Alert';
 import { Labels } from 'types/api/alerts/def';
 
@@ -15,6 +22,8 @@ function CreateAlertHeader(): JSX.Element {
 	const alertRuleContext = useAlertRuleOptional();
 
 	const { currentQuery } = useQueryBuilder();
+	const { safeNavigate } = useSafeNavigate();
+	const urlQuery = useUrlQuery();
 
 	const groupByLabels = useMemo(() => {
 		const labels = new Array<string>();
@@ -37,6 +46,14 @@ function CreateAlertHeader(): JSX.Element {
 		[groupByLabels],
 	);
 
+	const handleSwitchToClassicExperience = useCallback(() => {
+		logEvent('Alert: Switch to classic experience button clicked', {});
+
+		urlQuery.set(QueryParams.showClassicCreateAlertsPage, 'true');
+		const url = `${ROUTES.ALERTS_NEW}?${urlQuery.toString()}`;
+		safeNavigate(url, { replace: true });
+	}, [safeNavigate, urlQuery]);
+
 	return (
 		<div
 			className={classNames('alert-header', { 'edit-alert-header': isEditMode })}
@@ -44,6 +61,15 @@ function CreateAlertHeader(): JSX.Element {
 			{!isEditMode && (
 				<div className="alert-header__tab-bar">
 					<div className="alert-header__tab">New Alert Rule</div>
+					<Button
+						prefix={<RotateCcw size={12} />}
+						onClick={handleSwitchToClassicExperience}
+						variant="solid"
+						color="secondary"
+						size="sm"
+					>
+						Switch to Classic Experience
+					</Button>
 				</div>
 			)}
 			<div className="alert-header__content">

frontend/src/container/CreateAlertV2/CreateAlertHeader/__tests__/CreateAlertHeader.test.tsx

@@ -1,6 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { defaultPostableAlertRuleV2 } from 'container/CreateAlert/constants';
-import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlert/utils';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { defaultPostableAlertRuleV2 } from 'container/CreateAlertV2/constants';
+import { getCreateAlertLocalStateFromAlertDef } from 'container/CreateAlertV2/utils';
+import * as useSafeNavigateHook from 'hooks/useSafeNavigate';
 import { mockAppLocation } from 'tests/router-mocks';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
@@ -8,6 +11,11 @@ import * as rulesHook from '../../../../api/generated/services/rules';
 import { CreateAlertProvider } from '../../context';
 import CreateAlertHeader from '../CreateAlertHeader';
 
+const mockSafeNavigate = jest.fn();
+jest.spyOn(useSafeNavigateHook, 'useSafeNavigate').mockReturnValue({
+	safeNavigate: mockSafeNavigate,
+});
+
 jest.spyOn(rulesHook, 'useCreateRule').mockReturnValue({
 	mutate: jest.fn(),
 	isLoading: false,
@@ -93,4 +101,37 @@ describe('CreateAlertHeader', () => {
 			screen.getByPlaceholderText(ENTER_ALERT_RULE_NAME_PLACEHOLDER),
 		).toHaveValue('TEST_ALERT');
 	});
+
+	it('should navigate to classic experience when button is clicked', () => {
+		renderCreateAlertHeader();
+		const switchToClassicExperienceButton = screen.getByText(
+			'Switch to Classic Experience',
+		);
+		expect(switchToClassicExperienceButton).toBeInTheDocument();
+		fireEvent.click(switchToClassicExperienceButton);
+
+		const params = new URLSearchParams();
+		params.set(QueryParams.showClassicCreateAlertsPage, 'true');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			`${ROUTES.ALERTS_NEW}?${params.toString()}`,
+			{ replace: true },
+		);
+	});
+
+	it('should not render "switch to classic experience" button when isEditMode is true', () => {
+		render(
+			<CreateAlertProvider
+				isEditMode
+				initialAlertType={AlertTypes.METRICS_BASED_ALERT}
+				initialAlertState={getCreateAlertLocalStateFromAlertDef(
+					defaultPostableAlertRuleV2,
+				)}
+			>
+				<CreateAlertHeader />
+			</CreateAlertProvider>,
+		);
+		expect(
+			screen.queryByText('Switch to Classic Experience'),
+		).not.toBeInTheDocument();
+	});
 });

frontend/src/container/CreateAlertV2/CreateAlertV2.tsx

@@ -9,12 +9,12 @@ import CreateAlertHeader from './CreateAlertHeader';
 import Footer from './Footer';
 import NotificationSettings from './NotificationSettings';
 import QuerySection from './QuerySection';
-import { CreateAlertProps } from './types';
+import { CreateAlertV2Props } from './types';
 import { Spinner } from './utils';
 
-import './CreateAlert.styles.scss';
+import './CreateAlertV2.styles.scss';
 
-function CreateAlert({ alertType }: CreateAlertProps): JSX.Element {
+function CreateAlertV2({ alertType }: CreateAlertV2Props): JSX.Element {
 	const queryToRedirect = buildInitialAlertDef(alertType);
 	const currentQueryToRedirect = mapQueryDataFromApi(
 		queryToRedirect.condition.compositeQuery,
@@ -36,8 +36,8 @@ function CreateAlert({ alertType }: CreateAlertProps): JSX.Element {
 	);
 }
 
-CreateAlert.defaultProps = {
+CreateAlertV2.defaultProps = {
 	initialQuery: initialQueriesMap.metrics,
 };
 
-export default CreateAlert;
+export default CreateAlertV2;

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { useCreateAlertState } from 'container/CreateAlert/context';
-import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlert/context/constants';
-import { IEditCustomScheduleProps } from 'container/CreateAlert/EvaluationSettings/types';
+import { useCreateAlertState } from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';
 import { Calendar1, Pencil, Trash } from '@signozhq/icons';
 
 function EditCustomSchedule({

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { Button, DatePicker, Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
-import { useCreateAlertState } from 'container/CreateAlert/context';
-import { AdvancedOptionsState } from 'container/CreateAlert/context/types';
+import { useCreateAlertState } from 'container/CreateAlertV2/context';
+import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';
 import dayjs from 'dayjs';
 import { Code, PencilLine } from '@signozhq/icons';
 

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/AdvancedOptions.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
+import * as alertState from 'container/CreateAlertV2/context';
 
 import AdvancedOptions from '../AdvancedOptions';
 import { createMockAlertContextState } from './testUtils';

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EditCustomSchedule.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
-import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlert/context/constants';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 
 import { TIMEZONE_DATA } from '../constants';
 import EditCustomSchedule from '../EvaluationCadence/EditCustomSchedule';

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadence.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
-import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlert/context/constants';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 
 import { TIMEZONE_DATA } from '../constants';
 import EvaluationCadence from '../EvaluationCadence';

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadenceDetails.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
-import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlert/context/constants';
-import { AdvancedOptionsState } from 'container/CreateAlert/context/types';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
+import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';
 
 import EvaluationCadenceDetails from '../EvaluationCadence/EvaluationCadenceDetails';
 import { createMockAlertContextState } from './testUtils';

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationCadencePreview.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
-import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlert/context/constants';
+import * as alertState from 'container/CreateAlertV2/context';
+import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 
 import { TIMEZONE_DATA } from '../constants';
 import EvaluationCadencePreview, {

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationSettings.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react';
-import * as alertState from 'container/CreateAlert/context';
+import * as alertState from 'container/CreateAlertV2/context';
 
 import EvaluationSettings from '../EvaluationSettings';
 import { createMockAlertContextState } from './testUtils';
 
-jest.mock('container/CreateAlert/utils', () => ({
-	...jest.requireActual('container/CreateAlert/utils'),
+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
 }));
 
 const mockSetEvaluationWindow = jest.fn();

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/EvaluationWindowPopover.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { EvaluationWindowState } from 'container/CreateAlert/context/types';
+import { EvaluationWindowState } from 'container/CreateAlertV2/context/types';
 
 import {
 	EVALUATION_WINDOW_TIMEFRAME,

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/testUtils.ts

@@ -4,11 +4,11 @@ import {
 	INITIAL_ALERT_THRESHOLD_STATE,
 	INITIAL_EVALUATION_WINDOW_STATE,
 	INITIAL_NOTIFICATION_SETTINGS_STATE,
-} from 'container/CreateAlert/context/constants';
+} from 'container/CreateAlertV2/context/constants';
 import {
 	EvaluationWindowState,
 	ICreateAlertContextProps,
-} from 'container/CreateAlert/context/types';
+} from 'container/CreateAlertV2/context/types';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 export const createMockAlertContextState = (

frontend/src/container/CreateAlertV2/EvaluationSettings/__tests__/utils.test.ts

@@ -20,7 +20,7 @@ jest.mock('dayjs', () => {
 });
 
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
-import { EvaluationWindowState } from 'container/CreateAlert/context/types';
+import { EvaluationWindowState } from 'container/CreateAlertV2/context/types';
 import dayjs, { Dayjs } from 'dayjs';
 import { rrulestr } from 'rrule';
 

frontend/src/container/CreateAlertV2/Footer/__tests__/Footer.test.tsx

@@ -2,8 +2,8 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
-} from 'container/CreateAlert/context/types';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+} from 'container/CreateAlertV2/context/types';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 
 import * as createAlertState from '../../context';
 import Footer from '../Footer';

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -6,15 +6,15 @@ import {
 	INITIAL_ALERT_THRESHOLD_STATE,
 	INITIAL_EVALUATION_WINDOW_STATE,
 	INITIAL_NOTIFICATION_SETTINGS_STATE,
-} from 'container/CreateAlert/context/constants';
+} from 'container/CreateAlertV2/context/constants';
 import {
 	AdvancedOptionsState,
 	AlertThresholdOperator,
 	EvaluationWindowState,
 	NotificationSettingsState,
 	Seasonality,
-} from 'container/CreateAlert/context/types';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+} from 'container/CreateAlertV2/context/types';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -556,6 +556,8 @@ describe('Footer utils', () => {
 				},
 				ruleType: 'threshold_rule',
 				schemaVersion: 'v2alpha1',
+				source: 'http://localhost/',
+				version: 'v5',
 			});
 		});
 

frontend/src/container/CreateAlertV2/Footer/utils.tsx

@@ -1,12 +1,12 @@
-import { RuletypesRuleTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {
-	AlertTypes,
 	BasicThreshold,
 	PostableAlertRuleV2,
-} from 'types/api/alerts/alertTypes';
+} from 'types/api/alerts/alertTypesV2';
 import { EQueryType } from 'types/common/dashboard';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
 
@@ -266,7 +266,7 @@ export function buildCreateThresholdAlertRulePayload(
 	// Evaluation
 	const evaluationProps = getEvaluationProps(evaluationWindow, advancedOptions);
 
-	let ruleType: string = RuletypesRuleTypeDTO.threshold_rule;
+	let ruleType: string = AlertDetectionTypes.THRESHOLD_ALERT;
 	if (query.queryType === EQueryType.PROM) {
 		ruleType = 'promql_rule';
 	}
@@ -292,7 +292,9 @@ export function buildCreateThresholdAlertRulePayload(
 			summary: notificationSettings.description,
 		},
 		notificationSettings: notificationSettingsProps,
+		version: 'v5',
 		schemaVersion: 'v2alpha1',
+		source: window?.location.toString(),
 	};
 }
 
@@ -319,7 +321,7 @@ export function buildCreateAnomalyAlertRulePayload(
 
 	return {
 		...payload,
-		ruleType: RuletypesRuleTypeDTO.anomaly_rule,
+		ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
 		alertType: AlertTypes.METRICS_BASED_ALERT,
 		condition: {
 			...payload.condition,

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/MultipleNotifications.test.tsx

@@ -1,12 +1,12 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ALL_SELECTED_VALUE } from 'container/CreateAlert/constants';
-import * as createAlertContext from 'container/CreateAlert/context';
+import { ALL_SELECTED_VALUE } from 'container/CreateAlertV2/constants';
+import * as createAlertContext from 'container/CreateAlertV2/context';
 import {
 	INITIAL_ALERT_THRESHOLD_STATE,
 	INITIAL_NOTIFICATION_SETTINGS_STATE,
-} from 'container/CreateAlert/context/constants';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+} from 'container/CreateAlertV2/context/constants';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 
 import MultipleNotifications from '../MultipleNotifications';
 

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/NotificationMessage.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as createAlertContext from 'container/CreateAlert/context';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+import * as createAlertContext from 'container/CreateAlertV2/context';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 
 import NotificationMessage from '../NotificationMessage';
 

frontend/src/container/CreateAlertV2/NotificationSettings/__tests__/NotificationSettings.test.tsx

@@ -1,11 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as createAlertContext from 'container/CreateAlert/context';
-import { createMockAlertContextState } from 'container/CreateAlert/EvaluationSettings/__tests__/testUtils';
+import * as createAlertContext from 'container/CreateAlertV2/context';
+import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationSettings/__tests__/testUtils';
 
 import NotificationSettings from '../NotificationSettings';
 
 jest.mock(
-	'container/CreateAlert/NotificationSettings/MultipleNotifications',
+	'container/CreateAlertV2/NotificationSettings/MultipleNotifications',
 	() => ({
 		__esModule: true,
 		default: (): JSX.Element => (
@@ -14,7 +14,7 @@ jest.mock(
 	}),
 );
 jest.mock(
-	'container/CreateAlert/NotificationSettings/NotificationMessage',
+	'container/CreateAlertV2/NotificationSettings/NotificationMessage',
 	() => ({
 		__esModule: true,
 		default: (): JSX.Element => (
@@ -23,8 +23,8 @@ jest.mock(
 	}),
 );
 
-jest.mock('container/CreateAlert/utils', () => ({
-	...jest.requireActual('container/CreateAlert/utils'),
+jest.mock('container/CreateAlertV2/utils', () => ({
+	...jest.requireActual('container/CreateAlertV2/utils'),
 }));
 
 const initialNotificationSettings =

frontend/src/container/CreateAlertV2/QuerySection/ChartPreview/ChartPreview.tsx

@@ -6,7 +6,7 @@ import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QueryParams } from 'constants/query';
-import { useCreateAlertState } from 'container/CreateAlert/context';
+import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import ChartPreviewComponent from 'container/FormAlertRules/ChartPreview';
 import PlotTag from 'components/PlotTag/PlotTag';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/container/CreateAlertV2/QuerySection/QuerySection.tsx

@@ -179,6 +179,7 @@ function QuerySection(): JSX.Element {
 				isAnomalyDetection={isAnomalyDetection}
 				key={currentQuery.queryType}
 				ruleId=""
+				hideTitle
 			/>
 		</div>
 	);

frontend/src/container/CreateAlertV2/QuerySection/__tests__/ChartPreview.test.tsx

@@ -6,8 +6,8 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	INITIAL_ALERT_STATE,
 	INITIAL_ALERT_THRESHOLD_STATE,
-} from 'container/CreateAlert/context/constants';
-import { buildInitialAlertDef } from 'container/CreateAlert/context/utils';
+} from 'container/CreateAlertV2/context/constants';
+import { buildInitialAlertDef } from 'container/CreateAlertV2/context/utils';
 import store from 'store';
 import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';

frontend/src/container/CreateAlertV2/QuerySection/__tests__/QuerySection.test.tsx

@@ -3,12 +3,12 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { RuletypesRuleTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import {
 	initialClickHouseData,
 	initialQueryPromQLData,
 } from 'constants/queryBuilder';
+import { AlertDetectionTypes } from 'container/FormAlertRules';
 import store from 'store';
 import { TestRouter } from 'tests/router';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -237,7 +237,7 @@ describe('QuerySection', () => {
 			expect.any(Object),
 			{
 				[QueryParams.alertType]: AlertTypes.LOGS_BASED_ALERT,
-				[QueryParams.ruleType]: RuletypesRuleTypeDTO.threshold_rule,
+				[QueryParams.ruleType]: AlertDetectionTypes.THRESHOLD_ALERT,
 			},
 			undefined,
 			true,
@@ -252,7 +252,7 @@ describe('QuerySection', () => {
 			expect.any(Object),
 			{
 				[QueryParams.alertType]: AlertTypes.TRACES_BASED_ALERT,
-				[QueryParams.ruleType]: RuletypesRuleTypeDTO.threshold_rule,
+				[QueryParams.ruleType]: AlertDetectionTypes.THRESHOLD_ALERT,
 			},
 			undefined,
 			true,
@@ -376,7 +376,7 @@ describe('QuerySection', () => {
 
 		expect(result[1]).toStrictEqual({
 			[QueryParams.alertType]: AlertTypes.METRICS_BASED_ALERT,
-			[QueryParams.ruleType]: RuletypesRuleTypeDTO.threshold_rule,
+			[QueryParams.ruleType]: AlertDetectionTypes.THRESHOLD_ALERT,
 		});
 	});