feat: move anomaly detection behind ff and show beta (#6180)

frontend/src/constants/features.ts

@@ -22,4 +22,5 @@ export enum FeatureKeys {
 	GATEWAY = 'GATEWAY',
 	PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
 	QUERY_BUILDER_SEARCH_V2 = 'QUERY_BUILDER_SEARCH_V2',
+	ANOMALY_DETECTION = 'ANOMALY_DETECTION',
 }

frontend/src/container/CreateAlertRule/SelectAlertType/config.ts

@@ -3,30 +3,41 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { OptionType } from './types';
 
-export const getOptionList = (t: TFunction): OptionType[] => [
-	{
-		title: t('anomaly_based_alert'),
-		selection: AlertTypes.ANOMALY_BASED_ALERT,
-		description: t('anomaly_based_alert_desc'),
-	},
-	{
-		title: t('metric_based_alert'),
-		selection: AlertTypes.METRICS_BASED_ALERT,
-		description: t('metric_based_alert_desc'),
-	},
-	{
-		title: t('log_based_alert'),
-		selection: AlertTypes.LOGS_BASED_ALERT,
-		description: t('log_based_alert_desc'),
-	},
-	{
-		title: t('traces_based_alert'),
-		selection: AlertTypes.TRACES_BASED_ALERT,
-		description: t('traces_based_alert_desc'),
-	},
-	{
-		title: t('exceptions_based_alert'),
-		selection: AlertTypes.EXCEPTIONS_BASED_ALERT,
-		description: t('exceptions_based_alert_desc'),
-	},
-];
+export const getOptionList = (
+	t: TFunction,
+	isAnomalyDetectionEnabled: boolean,
+): OptionType[] => {
+	const optionList: OptionType[] = [
+		{
+			title: t('metric_based_alert'),
+			selection: AlertTypes.METRICS_BASED_ALERT,
+			description: t('metric_based_alert_desc'),
+		},
+		{
+			title: t('log_based_alert'),
+			selection: AlertTypes.LOGS_BASED_ALERT,
+			description: t('log_based_alert_desc'),
+		},
+		{
+			title: t('traces_based_alert'),
+			selection: AlertTypes.TRACES_BASED_ALERT,
+			description: t('traces_based_alert_desc'),
+		},
+		{
+			title: t('exceptions_based_alert'),
+			selection: AlertTypes.EXCEPTIONS_BASED_ALERT,
+			description: t('exceptions_based_alert_desc'),
+		},
+	];
+
+	if (isAnomalyDetectionEnabled) {
+		optionList.unshift({
+			title: t('anomaly_based_alert'),
+			selection: AlertTypes.ANOMALY_BASED_ALERT,
+			description: t('anomaly_based_alert_desc'),
+			isBeta: true,
+		});
+	}
+
+	return optionList;
+};

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

@@ -1,6 +1,8 @@
-import { Row, Typography } from 'antd';
+import { Row, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
+import { FeatureKeys } from 'constants/features';
+import useFeatureFlags from 'hooks/useFeatureFlag';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -12,7 +14,10 @@ import { OptionType } from './types';
 function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 	const { t } = useTranslation(['alerts']);
 
-	const optionList = getOptionList(t);
+	const isAnomalyDetectionEnabled =
+		useFeatureFlags(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+
+	const optionList = getOptionList(t, isAnomalyDetectionEnabled);
 
 	function handleRedirection(option: AlertTypes): void {
 		let url = '';
@@ -56,6 +61,13 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
+						extra={
+							option.isBeta ? (
+								<Tag bordered={false} color="geekblue">
+									Beta
+								</Tag>
+							) : undefined
+						}
 						onClick={(): void => {
 							onSelect(option.selection);
 						}}

frontend/src/container/CreateAlertRule/SelectAlertType/types.ts

@@ -4,4 +4,5 @@ export interface OptionType {
 	title: string;
 	selection: AlertTypes;
 	description: string;
+	isBeta?: boolean;
 }

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -3,6 +3,7 @@ import './ChartPreview.styles.scss';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Spinner from 'components/Spinner';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
@@ -17,6 +18,7 @@ import {
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import useFeatureFlags from 'hooks/useFeatureFlag';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
@@ -259,6 +261,9 @@ function ChartPreview({
 	const chartDataAvailable =
 		chartData && !queryResponse.isError && !queryResponse.isLoading;
 
+	const isAnomalyDetectionEnabled =
+		useFeatureFlags(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+
 	return (
 		<div className="alert-chart-container" ref={graphRef}>
 			<ChartContainer>
@@ -291,6 +296,7 @@ function ChartPreview({
 
 					{chartDataAvailable &&
 						isAnomalyDetectionAlert &&
+						isAnomalyDetectionEnabled &&
 						queryResponse?.data?.payload?.data?.resultType === 'anomaly' && (
 							<AnomalyAlertEvaluationView
 								data={queryResponse?.data?.payload}

frontend/src/container/FormAlertRules/index.tsx

@@ -23,7 +23,10 @@ import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag';
+import useFeatureFlag, {
+	MESSAGE,
+	useIsFeatureDisabled,
+} from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
@@ -665,6 +668,7 @@ function FormAlertRules({
 		{
 			value: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
 			label: 'Anomaly Detection Alert',
+			isBeta: true,
 		},
 	];
 
@@ -677,6 +681,9 @@ function FormAlertRules({
 		setDetectionMethod(value);
 	};
 
+	const isAnomalyDetectionEnabled =
+		useFeatureFlag(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+
 	return (
 		<>
 			{Element}
@@ -730,24 +737,25 @@ function FormAlertRules({
 					</StepContainer>
 
 					<div className="steps-container">
-						{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT && (
-							<div className="detection-method-container">
-								<StepHeading> {t('alert_form_step1')}</StepHeading>
+						{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT &&
+							isAnomalyDetectionEnabled && (
+								<div className="detection-method-container">
+									<StepHeading> {t('alert_form_step1')}</StepHeading>
 
-								<Tabs2
-									key={detectionMethod}
-									tabs={tabs}
-									initialSelectedTab={detectionMethod}
-									onSelectTab={handleDetectionMethodChange}
-								/>
+									<Tabs2
+										key={detectionMethod}
+										tabs={tabs}
+										initialSelectedTab={detectionMethod}
+										onSelectTab={handleDetectionMethodChange}
+									/>
 
-								<div className="detection-method-description">
-									{detectionMethod === AlertDetectionTypes.ANOMALY_DETECTION_ALERT
-										? t('anomaly_detection_alert_desc')
-										: t('threshold_alert_desc')}
+									<div className="detection-method-description">
+										{detectionMethod === AlertDetectionTypes.ANOMALY_DETECTION_ALERT
+											? t('anomaly_detection_alert_desc')
+											: t('threshold_alert_desc')}
+									</div>
 								</div>
-							</div>
-						)}
+							)}
 
 						<QuerySection
 							queryCategory={currentQuery.queryType}

frontend/src/periscope/components/Tabs2/Tabs2.tsx

@@ -1,7 +1,7 @@
 import './Tabs2.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
+import { Button, Tag } from 'antd';
 import { TimelineFilter } from 'container/AlertHistory/types';
 import { Undo } from 'lucide-react';
 import { useState } from 'react';
@@ -11,6 +11,7 @@ interface Tab {
 	label: string | JSX.Element;
 	disabled?: boolean;
 	icon?: string | JSX.Element;
+	isBeta?: boolean;
 }
 
 interface TimelineTabsProps {
@@ -63,6 +64,12 @@ function Tabs2({
 						style={{ minWidth: buttonMinWidth }}
 					>
 						{tab.label}
+
+						{tab.isBeta && (
+							<Tag bordered={false} color="geekblue">
+								Beta
+							</Tag>
+						)}
 					</Button>
 				))}
 			</Button.Group>