diff --git a/public/app/features/alerting/unified/components/InvalidIntervalWarning.tsx b/public/app/features/alerting/unified/components/InvalidIntervalWarning.tsx new file mode 100644 index 00000000000..eca95b7311a --- /dev/null +++ b/public/app/features/alerting/unified/components/InvalidIntervalWarning.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react'; + +import { config } from '@grafana/runtime'; +import { Alert } from '@grafana/ui'; + +const EvaluationIntervalLimitExceeded: FC = () => ( + + A minimum evaluation interval of {config.unifiedAlerting.minInterval} has been configured in + Grafana. +
+ Please contact the administrator to configure a lower interval. +
+); + +export { EvaluationIntervalLimitExceeded }; diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx index 0e8b109651e..c8ff4d087dd 100644 --- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx @@ -3,8 +3,7 @@ import React, { FC, useState } from 'react'; import { RegisterOptions, useFormContext } from 'react-hook-form'; import { durationToMilliseconds, GrafanaTheme2, parseDuration } from '@grafana/data'; -import { config } from '@grafana/runtime'; -import { Alert, Field, InlineLabel, Input, InputControl, useStyles2 } from '@grafana/ui'; +import { Field, InlineLabel, Input, InputControl, useStyles2 } from '@grafana/ui'; import { RuleFormValues } from '../../types/rule-form'; import { checkEvaluationIntervalGlobalLimit } from '../../utils/config'; @@ -14,6 +13,7 @@ import { positiveDurationValidationPattern, } from '../../utils/time'; import { CollapseToggle } from '../CollapseToggle'; +import { EvaluationIntervalLimitExceeded } from '../InvalidIntervalWarning'; import { GrafanaAlertStatePicker } from './GrafanaAlertStatePicker'; import { PreviewRule } from './PreviewRule'; @@ -120,14 +120,7 @@ export const GrafanaEvaluationBehavior: FC = () => { - {exceedsGlobalEvaluationLimit && ( - - A minimum evaluation interval of{' '} - {config.unifiedAlerting.minInterval} has been configured in - Grafana.
- Please contact the administrator to configure a lower interval. -
- )} + {exceedsGlobalEvaluationLimit && } setShowErrorHandling(!collapsed)} diff --git a/public/app/features/alerting/unified/components/rules/CloudRules.tsx b/public/app/features/alerting/unified/components/rules/CloudRules.tsx index 982a2fc9346..05bd149c1a5 100644 --- a/public/app/features/alerting/unified/components/rules/CloudRules.tsx +++ b/public/app/features/alerting/unified/components/rules/CloudRules.tsx @@ -60,6 +60,7 @@ export const CloudRules: FC = ({ namespaces, expandAll }) => { key={`${getRulesSourceUid(namespace.rulesSource)}-${namespace.name}-${group.name}`} namespace={namespace} expandAll={expandAll} + viewMode={'grouped'} /> ); })} diff --git a/public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx similarity index 80% rename from public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx rename to public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx index 8018fef98bb..a287ec26f4b 100644 --- a/public/app/features/alerting/unified/components/rules/EditCloudGroupModal.tsx +++ b/public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx @@ -2,15 +2,18 @@ import { css } from '@emotion/css'; import React, { useEffect, useMemo } from 'react'; import { useDispatch } from 'react-redux'; +import { isValidGoDuration } from '@grafana/data'; import { Modal, Button, Form, Field, Input, useStyles2 } from '@grafana/ui'; import { useCleanup } from 'app/core/hooks/useCleanup'; import { CombinedRuleGroup, CombinedRuleNamespace } from 'app/types/unified-alerting'; import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; import { updateLotexNamespaceAndGroupAction } from '../../state/actions'; +import { checkEvaluationIntervalGlobalLimit } from '../../utils/config'; import { getRulesSourceName } from '../../utils/datasource'; import { initialAsyncRequestState } from '../../utils/redux'; import { durationValidationPattern } from '../../utils/time'; +import { EvaluationIntervalLimitExceeded } from '../InvalidIntervalWarning'; interface Props { namespace: CombinedRuleNamespace; @@ -71,7 +74,7 @@ export function EditCloudGroupModal(props: Props): React.ReactElement { onClickBackdrop={onClose} >
- {({ register, errors, formState: { isDirty } }) => ( + {({ register, errors, formState: { isDirty }, watch }) => ( <> { + const validDuration = isValidGoDuration(input); + if (!validDuration) { + return 'Invalid duration. Valid example: 1m (Available units: h, m, s)'; + } + + const limitExceeded = !checkEvaluationIntervalGlobalLimit(input).exceedsLimit; + if (limitExceeded) { + return true; + } + + return false; + }, })} /> + {checkEvaluationIntervalGlobalLimit(watch('groupInterval')).exceedsLimit && ( + + )}