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'} /> - + {selectedWidget?.panelTypes !== PANEL_TYPES.TABLE && ( + + )} );