diff --git a/frontend/src/container/FormAlertRules/PromqlSection.tsx b/frontend/src/container/FormAlertRules/PromqlSection.tsx
index 7e23c2e1dc..91aab81400 100644
--- 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 (
-
+ <>
+ {currentQuery.promql.map((query, index) => (
+
+ ))}
+ >
);
}
diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx
index ae1fbc71b7..0fa5e404e7 100644
--- 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({
);
+
const renderPromRuleOptions = (): JSX.Element => (
- {t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
- {renderPromMatchOpts()}
+ {t('text_condition1')}
+
+ is
+ {renderCompareOps()} {t('text_condition2')} {renderPromMatchOpts()}
);
@@ -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
index 7b80b2150c..0076449faf 100644
--- 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 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
index 3734474c29..0d41ac5197 100644
--- 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
index 00163732eb..4cae7475a6 100644
--- 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'}
/>
- } onClick={onCreateAlertsHandler}>
- Create Alerts from Queries
-
+ {selectedWidget?.panelTypes !== PANEL_TYPES.TABLE && (
+ } onClick={onCreateAlertsHandler}>
+ Create Alerts from Queries
+
+ )}
);