diff --git a/frontend/src/constants/features.ts b/frontend/src/constants/features.ts index 769522455d..9a2550ec0b 100644 --- a/frontend/src/constants/features.ts +++ b/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', } diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/config.ts b/frontend/src/container/CreateAlertRule/SelectAlertType/config.ts index b03b7dd767..2986cb9f38 100644 --- a/frontend/src/container/CreateAlertRule/SelectAlertType/config.ts +++ b/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; +}; diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx index 1a6d14f379..70e1a1784e 100644 --- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx +++ b/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 { + Beta + + ) : undefined + } onClick={(): void => { onSelect(option.selection); }} diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/types.ts b/frontend/src/container/CreateAlertRule/SelectAlertType/types.ts index 670f5a2708..4c087b6590 100644 --- a/frontend/src/container/CreateAlertRule/SelectAlertType/types.ts +++ b/frontend/src/container/CreateAlertRule/SelectAlertType/types.ts @@ -4,4 +4,5 @@ export interface OptionType { title: string; selection: AlertTypes; description: string; + isBeta?: boolean; } diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx index a397801c9a..af6550dedf 100644 --- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx +++ b/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 (
@@ -291,6 +296,7 @@ function ChartPreview({ {chartDataAvailable && isAnomalyDetectionAlert && + isAnomalyDetectionEnabled && queryResponse?.data?.payload?.data?.resultType === 'anomaly' && ( {Element} @@ -730,24 +737,25 @@ function FormAlertRules({
- {alertDef.alertType === AlertTypes.METRICS_BASED_ALERT && ( -
- {t('alert_form_step1')} + {alertDef.alertType === AlertTypes.METRICS_BASED_ALERT && + isAnomalyDetectionEnabled && ( +
+ {t('alert_form_step1')} - + -
- {detectionMethod === AlertDetectionTypes.ANOMALY_DETECTION_ALERT - ? t('anomaly_detection_alert_desc') - : t('threshold_alert_desc')} +
+ {detectionMethod === AlertDetectionTypes.ANOMALY_DETECTION_ALERT + ? t('anomaly_detection_alert_desc') + : t('threshold_alert_desc')} +
-
- )} + )} {tab.label} + + {tab.isBeta && ( + + Beta + + )} ))}