feat: move anomaly detection behind ff and show beta

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>
-
- <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')}
+ {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}
+ />
+
+ <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>