Unverified Commit 7881aee3 authored by Amol Umbark's avatar Amol Umbark Committed by GitHub
Browse files

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

* feat: added user preferred channel filters in alerts

* fix: resolved minor translation issue
parent 39be8201
Showing with 122 additions and 6 deletions
+122 -6
{
"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)",
......
{
"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)",
......
......@@ -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>
</>
);
......
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;
import { Select } from 'antd';
import styled from 'styled-components';
export const StyledSelect = styled(Select)`
border-radius: 4px;
`;
......@@ -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;
......
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);
`;
......@@ -18,6 +18,7 @@ export interface AlertDef {
annotations?: Labels;
evalWindow?: string;
source?: string;
preferredChannels?: string[];
}
export interface RuleCondition {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment