diff --git a/frontend/public/locales/en-GB/alerts.json b/frontend/public/locales/en-GB/alerts.json
index 98e9780e6a..5b102e147d 100644
--- a/frontend/public/locales/en-GB/alerts.json
+++ b/frontend/public/locales/en-GB/alerts.json
@@ -62,6 +62,7 @@
"button_cancel": "No",
"field_promql_expr": "PromQL Expression",
"field_alert_name": "Alert Name",
+ "field_notification_channel": "Notification Channel",
"field_alert_desc": "Alert Description",
"field_labels": "Labels",
"field_severity": "Severity",
@@ -100,7 +101,7 @@
"user_guide_ch_step3a": "Set alert severity, name and descriptions",
"user_guide_ch_step3b": "Add tags to the alert in the Label field if needed",
"user_tooltip_more_help": "More details on how to create alerts",
- "choose_alert_type": "Choose a type for the alert:",
+ "choose_alert_type": "Choose a type for the alert",
"metric_based_alert": "Metric based Alert",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
"log_based_alert": "Log-based Alert",
diff --git a/frontend/public/locales/en-GB/rules.json b/frontend/public/locales/en-GB/rules.json
index c913dc08e0..9d55a0ba0f 100644
--- a/frontend/public/locales/en-GB/rules.json
+++ b/frontend/public/locales/en-GB/rules.json
@@ -54,6 +54,7 @@
"field_promql_expr": "PromQL Expression",
"field_alert_name": "Alert Name",
"field_alert_desc": "Alert Description",
+ "field_notification_channel": "Notification Channel",
"field_labels": "Labels",
"field_severity": "Severity",
"option_critical": "Critical",
diff --git a/frontend/public/locales/en/alerts.json b/frontend/public/locales/en/alerts.json
index 98e9780e6a..455ade61e3 100644
--- a/frontend/public/locales/en/alerts.json
+++ b/frontend/public/locales/en/alerts.json
@@ -63,6 +63,7 @@
"field_promql_expr": "PromQL Expression",
"field_alert_name": "Alert Name",
"field_alert_desc": "Alert Description",
+ "field_notification_channel": "Notification Channel",
"field_labels": "Labels",
"field_severity": "Severity",
"option_critical": "Critical",
@@ -100,7 +101,7 @@
"user_guide_ch_step3a": "Set alert severity, name and descriptions",
"user_guide_ch_step3b": "Add tags to the alert in the Label field if needed",
"user_tooltip_more_help": "More details on how to create alerts",
- "choose_alert_type": "Choose a type for the alert:",
+ "choose_alert_type": "Choose a type for the alert",
"metric_based_alert": "Metric based Alert",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
"log_based_alert": "Log-based Alert",
diff --git a/frontend/public/locales/en/rules.json b/frontend/public/locales/en/rules.json
index c913dc08e0..9d55a0ba0f 100644
--- a/frontend/public/locales/en/rules.json
+++ b/frontend/public/locales/en/rules.json
@@ -54,6 +54,7 @@
"field_promql_expr": "PromQL Expression",
"field_alert_name": "Alert Name",
"field_alert_desc": "Alert Description",
+ "field_notification_channel": "Notification Channel",
"field_labels": "Labels",
"field_severity": "Severity",
"option_critical": "Critical",
diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
index 65a5914fca..60bf658e5d 100644
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -1,4 +1,4 @@
-import { Row } from 'antd';
+import { Row, Typography } from 'antd';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -33,7 +33,14 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
return (
- {t('choose_alert_type')}
+
+ {t('choose_alert_type')}
+
{renderOptions}
);
diff --git a/frontend/src/container/FormAlertRules/BasicInfo.tsx b/frontend/src/container/FormAlertRules/BasicInfo.tsx
index 3d96e7fb79..54877f5e0b 100644
--- a/frontend/src/container/FormAlertRules/BasicInfo.tsx
+++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx
@@ -1,4 +1,5 @@
-import { Form, Select } from 'antd';
+import { Form, Select, Switch } from 'antd';
+import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertDef, Labels } from 'types/api/alerts/def';
import { requireErrorMessage } from 'utils/form/requireErrorMessage';
@@ -7,7 +8,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
import ChannelSelect from './ChannelSelect';
import LabelSelect from './labels';
import {
- ChannelSelectTip,
FormContainer,
FormItemMedium,
InputSmall,
@@ -19,14 +19,41 @@ import {
const { Option } = Select;
interface BasicInfoProps {
+ isNewRule: boolean;
alertDef: AlertDef;
setAlertDef: (a: AlertDef) => void;
}
-function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
- // init namespace for translations
+function BasicInfo({
+ isNewRule,
+ alertDef,
+ setAlertDef,
+}: BasicInfoProps): JSX.Element {
const { t } = useTranslation('alerts');
+ const [
+ shouldBroadCastToAllChannels,
+ setShouldBroadCastToAllChannels,
+ ] = useState(false);
+
+ useEffect(() => {
+ const hasPreferredChannels =
+ (alertDef.preferredChannels && alertDef.preferredChannels.length > 0) ||
+ isNewRule;
+
+ setShouldBroadCastToAllChannels(!hasPreferredChannels);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const handleBroadcastToAllChannels = (shouldBroadcast: boolean): void => {
+ setShouldBroadCastToAllChannels(shouldBroadcast);
+
+ setAlertDef({
+ ...alertDef,
+ broadcastToAll: shouldBroadcast,
+ });
+ };
+
return (
<>
{t('alert_form_step3')}
@@ -105,18 +132,38 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
initialValues={alertDef.labels}
/>
-
- {
- setAlertDef({
- ...alertDef,
- preferredChannels,
- });
- }}
+
+
+
- {t('channel_select_tooltip')}
+
+ {!shouldBroadCastToAllChannels && (
+
+ {
+ setAlertDef({
+ ...alertDef,
+ preferredChannels,
+ });
+ }}
+ />
+
+ )}
>
);
diff --git a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx
index c2d78e661c..15f391c7cf 100644
--- a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx
@@ -8,11 +8,13 @@ import { useTranslation } from 'react-i18next';
import { StyledSelect } from './styles';
export interface ChannelSelectProps {
+ disabled?: boolean;
currentValue?: string[];
onSelectChannels: (s: string[]) => void;
}
function ChannelSelect({
+ disabled,
currentValue,
onSelectChannels,
}: ChannelSelectProps): JSX.Element | null {
@@ -52,6 +54,7 @@ function ChannelSelect({
};
return (
{
- setAlertDef(initialValue);
- }, [initialValue]);
+ const broadcastToSpecificChannels =
+ (initialValue &&
+ initialValue.preferredChannels &&
+ initialValue.preferredChannels.length > 0) ||
+ isNewRule;
+
+ setAlertDef({
+ ...initialValue,
+ broadcastToAll: !broadcastToSpecificChannels,
+ });
+ }, [initialValue, isNewRule]);
useEffect(() => {
// Set selectedQueryName based on the length of queryOptions
@@ -243,6 +255,7 @@ function FormAlertRules({
const preparePostData = (): AlertDef => {
const postableAlert: AlertDef = {
...alertDef,
+ preferredChannels: alertDef.broadcastToAll ? [] : alertDef.preferredChannels,
alertType,
source: window?.location.toString(),
ruleType:
@@ -386,7 +399,11 @@ function FormAlertRules({
}, [t, isFormValid, memoizedPreparePostData, notifications]);
const renderBasicInfo = (): JSX.Element => (
-
+
);
const renderQBChartPreview = (): JSX.Element => (
@@ -421,8 +438,6 @@ function FormAlertRules({
/>
);
- const isNewRule = ruleId === 0;
-
const isAlertNameMissing = !formInstance.getFieldValue('alert');
const isAlertAvialableToSave =
@@ -442,6 +457,10 @@ function FormAlertRules({
}));
};
+ const isChannelConfigurationValid =
+ alertDef?.broadcastToAll ||
+ (alertDef.preferredChannels && alertDef.preferredChannels.length > 0);
+
return (
<>
{Element}
@@ -489,7 +508,11 @@ function FormAlertRules({
type="primary"
onClick={onSaveHandler}
icon={}
- disabled={isAlertNameMissing || isAlertAvialableToSave}
+ disabled={
+ isAlertNameMissing ||
+ isAlertAvialableToSave ||
+ !isChannelConfigurationValid
+ }
>
{isNewRule ? t('button_createrule') : t('button_savechanges')}
@@ -497,6 +520,7 @@ function FormAlertRules({
diff --git a/frontend/src/types/api/alerts/def.ts b/frontend/src/types/api/alerts/def.ts
index a5420e7ef0..42d599948d 100644
--- a/frontend/src/types/api/alerts/def.ts
+++ b/frontend/src/types/api/alerts/def.ts
@@ -21,6 +21,7 @@ export interface AlertDef {
source?: string;
disabled?: boolean;
preferredChannels?: string[];
+ broadcastToAll?: boolean;
}
export interface RuleCondition {