feat: alert query options is updated

SigNoz · Nov 10, 2023 · fa40669 · fa40669
1 parent 343c23f
commit fa40669
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 25 deletions.
diff --git a/frontend/src/container/FormAlertRules/PromqlSection.tsx b/frontend/src/container/FormAlertRules/PromqlSection.tsx
@@ -5,12 +5,16 @@ function PromqlSection(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 
 	return (
-		<PromQLQueryBuilder
-			key="A"
-			queryIndex={0}
-			queryData={currentQuery.promql[0]}
-			deletable={false}
-		/>
+		<>
+			{currentQuery.promql.map((query, index) => (
+				<PromQLQueryBuilder
+					key={query.name}
+					queryIndex={index}
+					queryData={query}
+					deletable={false}
+				/>
+			))}
+		</>
 	);
 }
 

diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx
@@ -7,12 +7,12 @@ import {
 	Space,
 	Typography,
 } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
 import {
 	getCategoryByOptionId,
 	getCategorySelectOptionByName,
 } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
 	AlertDef,
@@ -29,6 +29,7 @@ function RuleOptions({
 	alertDef,
 	setAlertDef,
 	queryCategory,
+	queryOptions,
 }: RuleOptionsProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
@@ -45,18 +46,6 @@ function RuleOptions({
 		});
 	};
 
-	const queryOptions = useMemo(
-		() =>
-			[
-				...currentQuery.builder.queryData.map((query) => query.queryName),
-				...currentQuery.builder.queryFormulas.map((query) => query.queryName),
-			].map((query) => ({
-				label: query,
-				value: query,
-			})),
-		[currentQuery],
-	);
-
 	const onChangeSelectedQueryName = (value: string | unknown): void => {
 		if (typeof value !== 'string') return;
 
@@ -163,11 +152,22 @@ function RuleOptions({
 			</Typography.Text>
 		</Form.Item>
 	);
+
 	const renderPromRuleOptions = (): JSX.Element => (
 		<Form.Item>
 			<Typography.Text>
-				{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
-				{renderPromMatchOpts()}
+				{t('text_condition1')}
+				<InlineSelect
+					getPopupContainer={popupContainer}
+					allowClear
+					showSearch
+					options={queryOptions}
+					placeholder={t('selected_query_placeholder')}
+					value={alertDef.condition.selectedQueryName}
+					onChange={onChangeSelectedQueryName}
+				/>
+				<Typography.Text>is</Typography.Text>
+				{renderCompareOps()} {t('text_condition2')} {renderPromMatchOpts()}
 			</Typography.Text>
 		</Form.Item>
 	);
@@ -240,5 +240,6 @@ interface RuleOptionsProps {
 	alertDef: AlertDef;
 	setAlertDef: (a: AlertDef) => void;
 	queryCategory: EQueryType;
+	queryOptions: DefaultOptionType[];
 }
 export default RuleOptions;
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
@@ -1,5 +1,12 @@
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
-import { Col, FormInstance, Modal, Tooltip, Typography } from 'antd';
+import {
+	Col,
+	FormInstance,
+	Modal,
+	SelectProps,
+	Tooltip,
+	Typography,
+} from 'antd';
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import { FeatureKeys } from 'constants/features';
@@ -44,6 +51,7 @@ import {
 	StyledLeftContainer,
 } from './styles';
 import UserGuide from './UserGuide';
+import { getSelectedQueryOptions } from './utils';
 
 function FormAlertRules({
 	alertType,
@@ -80,6 +88,20 @@ function FormAlertRules({
 		initialValue,
 	]);
 
+	const queryOptions = useMemo(() => {
+		const queryConfig: Record<EQueryType, () => SelectProps['options']> = {
+			[EQueryType.QUERY_BUILDER]: () => [
+				...(getSelectedQueryOptions(currentQuery.builder.queryData) || []),
+				...(getSelectedQueryOptions(currentQuery.builder.queryFormulas) || []),
+			],
+			[EQueryType.PROM]: () => getSelectedQueryOptions(currentQuery.promql),
+			[EQueryType.CLICKHOUSE]: () =>
+				getSelectedQueryOptions(currentQuery.clickhouse_sql),
+		};
+
+		return queryConfig[currentQuery.queryType]?.() || [];
+	}, [currentQuery]);
+
 	const sq = useMemo(() => mapQueryDataFromApi(initQuery), [initQuery]);
 
 	useShareBuilderUrl(sq);
@@ -88,6 +110,18 @@ function FormAlertRules({
 		setAlertDef(initialValue);
 	}, [initialValue]);
 
+	useEffect(() => {
+		// Set selectedQueryName based on the length of queryOptions
+		setAlertDef((def) => ({
+			...def,
+			condition: {
+				...def.condition,
+				selectedQueryName:
+					queryOptions.length > 0 ? String(queryOptions[0].value) : undefined,
+			},
+		}));
+	}, [currentQuery?.queryType, queryOptions]);
+
 	const onCancelHandler = useCallback(() => {
 		history.replace(ROUTES.LIST_ALL_ALERT);
 	}, []);
@@ -437,6 +471,7 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							alertDef={alertDef}
 							setAlertDef={setAlertDef}
+							queryOptions={queryOptions}
 						/>
 
 						{renderBasicInfo()}

diff --git a/frontend/src/container/FormAlertRules/utils.ts b/frontend/src/container/FormAlertRules/utils.ts
@@ -1,6 +1,13 @@
+import { SelectProps } from 'antd';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import getStep from 'lib/getStep';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+	IClickHouseQuery,
+	IPromQLQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
 
 // toChartInterval converts eval window to chart selection time interval
 export const toChartInterval = (evalWindow: string | undefined): Time => {
@@ -35,3 +42,15 @@ export const getUpdatedStepInterval = (evalWindow?: string): number => {
 		inputFormat: 'ns',
 	});
 };
+
+export const getSelectedQueryOptions = (
+	queries: Array<
+		IBuilderQuery | IBuilderFormula | IClickHouseQuery | IPromQLQuery
+	>,
+): SelectProps['options'] =>
+	queries
+		.filter((query) => !query.disabled)
+		.map((query) => ({
+			label: 'queryName' in query ? query.queryName : query.name,
+			value: 'queryName' in query ? query.queryName : query.name,
+		}));
diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -146,9 +146,11 @@ function RightContainer({
 					fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
 				/>
 
-				<Button icon={<UploadOutlined />} onClick={onCreateAlertsHandler}>
-					Create Alerts from Queries
-				</Button>
+				{selectedWidget?.panelTypes !== PANEL_TYPES.TABLE && (
+					<Button icon={<UploadOutlined />} onClick={onCreateAlertsHandler}>
+						Create Alerts from Queries
+					</Button>
+				)}
 			</Space>
 		</Container>
 	);