refactor(alert-rules): disable clickhouse/prompql for anomaly detection

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -24,6 +24,12 @@ import { FormContainer, StepHeading } from './styles';
 
 import './QuerySection.styles.scss';
 
+const ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE =
+	'https://github.com/SigNoz/signoz/issues/11034';
+
+const ANOMALY_QUERY_SUPPORT_PROMQL_ISSUE =
+	'https://github.com/SigNoz/signoz/issues/11036';
+
 function QuerySection({
 	queryCategory,
 	setQueryCategory,
@@ -33,6 +39,7 @@ function QuerySection({
 	panelType,
 	ruleId,
 	hideTitle,
+	isAnomalyDetection,
 }: QuerySectionProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
@@ -74,6 +81,21 @@ function QuerySection({
 		/>
 	);
 
+	const anomalyDisabledTooltip = (url: string): JSX.Element => (
+		<span>
+			Coming soon for anomaly detection.{' '}
+			<Typography.Link
+				href={url}
+				target="_blank"
+				rel="noopener noreferrer"
+				style={{ color: 'inherit', textDecoration: 'underline' }}
+			>
+				Leave a thumbs-up
+			</Typography.Link>{' '}
+			to help us prioritize!
+		</span>
+	);
+
 	const tabs = [
 		{
 			label: (
@@ -88,17 +110,33 @@ function QuerySection({
 		},
 		{
 			label: (
-				<Tooltip title="ClickHouse">
-					<Button className="nav-btns">
+				<Tooltip
+					title={
+						isAnomalyDetection
+							? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE)
+							: 'ClickHouse'
+					}
+				>
+					<Button className="nav-btns" disabled={isAnomalyDetection}>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
 				</Tooltip>
 			),
 			key: EQueryType.CLICKHOUSE,
+			disabled: isAnomalyDetection,
 		},
 	];
 
+	useEffect(() => {
+		if (
+			alertType === 'ANOMALY_BASED_ALERT' &&
+			queryCategory !== EQueryType.QUERY_BUILDER
+		) {
+			setQueryCategory(EQueryType.QUERY_BUILDER);
+		}
+	}, [alertType, queryCategory, setQueryCategory]);
+
 	const items = useMemo(
 		() => [
 			{
@@ -114,19 +152,32 @@ function QuerySection({
 			},
 			{
 				label: (
-					<Tooltip title="ClickHouse">
-						<Button className="nav-btns">
+					<Tooltip
+						title={
+							isAnomalyDetection
+								? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_CLICKHOUSE_ISSUE)
+								: 'ClickHouse'
+						}
+					>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
 					</Tooltip>
 				),
 				key: EQueryType.CLICKHOUSE,
+				disabled: isAnomalyDetection,
 			},
 			{
 				label: (
-					<Tooltip title="PromQL">
-						<Button className="nav-btns">
+					<Tooltip
+						title={
+							isAnomalyDetection
+								? anomalyDisabledTooltip(ANOMALY_QUERY_SUPPORT_PROMQL_ISSUE)
+								: 'PromQL'
+						}
+					>
+						<Button className="nav-btns" disabled={isAnomalyDetection}>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>
@@ -135,9 +186,10 @@ function QuerySection({
 					</Tooltip>
 				),
 				key: EQueryType.PROM,
+				disabled: isAnomalyDetection,
 			},
 		],
-		[isDarkMode],
+		[isDarkMode, isAnomalyDetection, anomalyDisabledTooltip],
 	);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -205,16 +257,16 @@ function QuerySection({
 		}
 	};
 	const renderQuerySection = (c: EQueryType): JSX.Element | null => {
-		switch (c) {
-			case EQueryType.PROM:
-				return renderPromqlUI();
-			case EQueryType.CLICKHOUSE:
-				return renderChQueryUI();
-			case EQueryType.QUERY_BUILDER:
-				return renderMetricUI();
-			default:
-				return null;
+		if (c === EQueryType.PROM && !isAnomalyDetection) {
+			return renderPromqlUI();
 		}
+		if (c === EQueryType.CLICKHOUSE && !isAnomalyDetection) {
+			return renderChQueryUI();
+		}
+		if (c === EQueryType.QUERY_BUILDER) {
+			return renderMetricUI();
+		}
+		return null;
 	};
 
 	const step2Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '2' : '1';
@@ -241,10 +293,12 @@ interface QuerySectionProps {
 	panelType: PANEL_TYPES;
 	ruleId: string;
 	hideTitle?: boolean;
+	isAnomalyDetection?: boolean;
 }
 
 QuerySection.defaultProps = {
 	hideTitle: false,
+	isAnomalyDetection: false,
 };
 
 export default QuerySection;

frontend/src/container/FormAlertRules/index.tsx

@@ -918,6 +918,9 @@ function FormAlertRules({
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}
 							ruleId={ruleId}
+							isAnomalyDetection={
+								alertDef.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT
+							}
 						/>
 
 						<RuleOptions