feat: added user preferred channel filters in alerts (#1458)

* feat: added user preferred channel filters in alerts

* fix: resolved minor translation issue

frontend/public/locales/en-GB/alerts.json

@@ -1,4 +1,7 @@
 {
+  "label_channel_select": "Notification Channels",
+  "placeholder_channel_select": "select one or more channels",
+  "channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
   "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
   "preview_chart_threshold_label": "Threshold",
   "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",

frontend/public/locales/en/alerts.json

@@ -1,4 +1,7 @@
 {
+  "label_channel_select": "Notification Channels",
+  "placeholder_channel_select": "select one or more channels",
+  "channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
   "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
   "preview_chart_threshold_label": "Threshold",
   "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -4,9 +4,12 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertDef, Labels } from 'types/api/alerts/def';
 
+import ChannelSelect from './ChannelSelect';
 import LabelSelect from './labels';
 import {
+	ChannelSelectTip,
 	FormContainer,
+	FormItemMedium,
 	InputSmall,
 	SeveritySelect,
 	StepHeading,
@@ -80,7 +83,7 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
 						}}
 					/>
 				</FormItem>
-				<FormItem label={t('field_labels')}>
+				<FormItemMedium label={t('field_labels')}>
 					<LabelSelect
 						onSetLabels={(l: Labels): void => {
 							setAlertDef({
@@ -92,7 +95,19 @@ function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
 						}}
 						initialValues={alertDef.labels}
 					/>
-				</FormItem>
+				</FormItemMedium>
+				<FormItemMedium label="Notification Channels">
+					<ChannelSelect
+						currentValue={alertDef.preferredChannels}
+						onSelectChannels={(s: string[]): void => {
+							setAlertDef({
+								...alertDef,
+								preferredChannels: s,
+							});
+						}}
+					/>
+					<ChannelSelectTip> {t('channel_select_tooltip')}</ChannelSelectTip>
+				</FormItemMedium>
 			</FormContainer>
 		</>
 	);

frontend/src/container/FormAlertRules/ChannelSelect/index.tsx

@@ -0,0 +1,70 @@
+import { notification, Select } from 'antd';
+import getChannels from 'api/channels/getAll';
+import useFetch from 'hooks/useFetch';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { StyledSelect } from './styles';
+
+export interface ChannelSelectProps {
+	currentValue?: string[];
+	onSelectChannels: (s: string[]) => void;
+}
+
+function ChannelSelect({
+	currentValue,
+	onSelectChannels,
+}: ChannelSelectProps): JSX.Element | null {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const { loading, payload, error, errorMessage } = useFetch(getChannels);
+
+	const handleChange = (value: string[]): void => {
+		onSelectChannels(value);
+	};
+
+	if (error && errorMessage !== '') {
+		notification.error({
+			message: 'Error',
+			description: errorMessage,
+		});
+	}
+	const renderOptions = (): React.ReactNode[] => {
+		const children: React.ReactNode[] = [];
+
+		if (loading || payload === undefined || payload.length === 0) {
+			return children;
+		}
+
+		payload.forEach((o) => {
+			children.push(
+				<Select.Option key={o.id} value={o.name}>
+					{o.name}
+				</Select.Option>,
+			);
+		});
+
+		return children;
+	};
+	return (
+		<StyledSelect
+			status={error ? 'error' : ''}
+			mode="multiple"
+			style={{ width: '100%' }}
+			placeholder={t('placeholder_channel_select')}
+			value={currentValue}
+			onChange={(value): void => {
+				handleChange(value as string[]);
+			}}
+			optionLabelProp="label"
+		>
+			{renderOptions()}
+		</StyledSelect>
+	);
+}
+
+ChannelSelect.defaultProps = {
+	currentValue: [],
+};
+export default ChannelSelect;

frontend/src/container/FormAlertRules/ChannelSelect/styles.ts

@@ -0,0 +1,6 @@
+import { Select } from 'antd';
+import styled from 'styled-components';
+
+export const StyledSelect = styled(Select)`
+	border-radius: 4px;
+`;

frontend/src/container/FormAlertRules/labels/styles.ts

@@ -8,8 +8,7 @@ interface SearchContainerProps {
 }
 
 export const SearchContainer = styled.div<SearchContainerProps>`
-	width: 70%;
-	border-radisu: 4px;
+	border-radius: 4px;
 	background: ${({ isDarkMode }): string => (isDarkMode ? '#000' : '#fff')};
 	flex: 1;
 	display: flex;

frontend/src/container/FormAlertRules/styles.ts

@@ -1,4 +1,15 @@
-import { Button, Card, Col, Form, Input, InputNumber, Row, Select } from 'antd';
+import {
+	Button,
+	Card,
+	Col,
+	Form,
+	Input,
+	InputNumber,
+	Row,
+	Select,
+	Typography,
+} from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import TextArea from 'antd/lib/input/TextArea';
 import styled from 'styled-components';
 
@@ -67,7 +78,7 @@ export const InlineSelect = styled(Select)`
 `;
 
 export const SeveritySelect = styled(Select)`
-	width: 15% !important;
+	width: 25% !important;
 `;
 
 export const InputSmall = styled(Input)`
@@ -99,3 +110,11 @@ export const ThresholdInput = styled(InputNumber)`
 export const TextareaMedium = styled(TextArea)`
 	width: 70%;
 `;
+
+export const FormItemMedium = styled(FormItem)`
+	width: 70%;
+`;
+
+export const ChannelSelectTip = styled(Typography.Text)`
+	color: hsla(0, 0%, 100%, 0.3);
+`;

frontend/src/types/api/alerts/def.ts

@@ -18,6 +18,7 @@ export interface AlertDef {
 	annotations?: Labels;
 	evalWindow?: string;
 	source?: string;
+	preferredChannels?: string[];
 }
 
 export interface RuleCondition {