From aa9689e025e7ac334dbe1ddace26dbbab35eb56d Mon Sep 17 00:00:00 2001 From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com> Date: Fri, 14 Jun 2024 11:23:34 +0530 Subject: [PATCH] feat: added an option to create channel when no Channels are available in alert config (#5195) * feat: added an option to create channel when no Channels are availabel in alert config * feat: added tooltip for the case when nochannel * feat: opened notification channel creation in new tab * feat: added role permission on create-notification-btn and disabled on loading * feat: added admin permission required message in tooltip --------- Co-authored-by: Vishal Sharma --- .../src/container/AllAlertChannels/index.tsx | 18 ++- .../container/FormAlertRules/BasicInfo.tsx | 112 ++++++++++++++---- .../FormAlertRules/ChannelSelect/index.tsx | 22 ++-- .../FormAlertRules/FormAlertRules.styles.scss | 4 + 4 files changed, 119 insertions(+), 37 deletions(-) diff --git a/frontend/src/container/AllAlertChannels/index.tsx b/frontend/src/container/AllAlertChannels/index.tsx index 8038f17778..5f34264a60 100644 --- a/frontend/src/container/AllAlertChannels/index.tsx +++ b/frontend/src/container/AllAlertChannels/index.tsx @@ -1,5 +1,5 @@ import { PlusOutlined } from '@ant-design/icons'; -import { Typography } from 'antd'; +import { Tooltip, Typography } from 'antd'; import getAll from 'api/channels/getAll'; import Spinner from 'components/Spinner'; import TextToolTip from 'components/TextToolTip'; @@ -52,11 +52,21 @@ function AlertChannels(): JSX.Element { url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel" /> - {addNewChannelPermission && ( - - )} + diff --git a/frontend/src/container/FormAlertRules/BasicInfo.tsx b/frontend/src/container/FormAlertRules/BasicInfo.tsx index 54877f5e0b..5fae4a713d 100644 --- a/frontend/src/container/FormAlertRules/BasicInfo.tsx +++ b/frontend/src/container/FormAlertRules/BasicInfo.tsx @@ -1,7 +1,17 @@ -import { Form, Select, Switch } from 'antd'; -import { useEffect, useState } from 'react'; +import './FormAlertRules.styles.scss'; + +import { PlusOutlined } from '@ant-design/icons'; +import { Button, Form, Select, Switch, Tooltip } from 'antd'; +import getChannels from 'api/channels/getAll'; +import ROUTES from 'constants/routes'; +import useComponentPermission from 'hooks/useComponentPermission'; +import useFetch from 'hooks/useFetch'; +import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; +import { AppState } from 'store/reducers'; import { AlertDef, Labels } from 'types/api/alerts/def'; +import AppReducer from 'types/reducer/app'; import { requireErrorMessage } from 'utils/form/requireErrorMessage'; import { popupContainer } from 'utils/selectPopupContainer'; @@ -31,6 +41,13 @@ function BasicInfo({ }: BasicInfoProps): JSX.Element { const { t } = useTranslation('alerts'); + const channels = useFetch(getChannels); + const { role } = useSelector((state) => state.app); + const [addNewChannelPermission] = useComponentPermission( + ['add_new_channel'], + role, + ); + const [ shouldBroadCastToAllChannels, setShouldBroadCastToAllChannels, @@ -54,6 +71,11 @@ function BasicInfo({ }); }; + const noChannels = channels.payload?.length === 0; + const handleCreateNewChannels = useCallback(() => { + window.open(ROUTES.CHANNELS_NEW, '_blank'); + }, []); + return ( <> {t('alert_form_step3')} @@ -137,32 +159,74 @@ function BasicInfo({ name="alert_all_configured_channels" label="Alert all the configured channels" > - + + + {!shouldBroadCastToAllChannels && ( - - { - setAlertDef({ - ...alertDef, - preferredChannels, - }); - }} - /> - + + { + setAlertDef({ + ...alertDef, + preferredChannels, + }); + }} + /> + + + )} + + {noChannels && ( + + + )} diff --git a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx index 15f391c7cf..ad1b9fb327 100644 --- a/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx +++ b/frontend/src/container/FormAlertRules/ChannelSelect/index.tsx @@ -1,9 +1,9 @@ import { Select } from 'antd'; -import getChannels from 'api/channels/getAll'; -import useFetch from 'hooks/useFetch'; +import { State } from 'hooks/useFetch'; import { useNotifications } from 'hooks/useNotifications'; import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; +import { PayloadProps } from 'types/api/channels/getAll'; import { StyledSelect } from './styles'; @@ -11,38 +11,42 @@ export interface ChannelSelectProps { disabled?: boolean; currentValue?: string[]; onSelectChannels: (s: string[]) => void; + channels: State; } function ChannelSelect({ disabled, currentValue, onSelectChannels, + channels, }: ChannelSelectProps): JSX.Element | null { // init namespace for translations const { t } = useTranslation('alerts'); - const { loading, payload, error, errorMessage } = useFetch(getChannels); - const { notifications } = useNotifications(); const handleChange = (value: string[]): void => { onSelectChannels(value); }; - if (error && errorMessage !== '') { + if (channels.error && channels.errorMessage !== '') { notifications.error({ message: 'Error', - description: errorMessage, + description: channels.errorMessage, }); } const renderOptions = (): ReactNode[] => { const children: ReactNode[] = []; - if (loading || payload === undefined || payload.length === 0) { + if ( + channels.loading || + channels.payload === undefined || + channels.payload.length === 0 + ) { return children; } - payload.forEach((o) => { + channels.payload.forEach((o) => { children.push( {o.name} @@ -55,7 +59,7 @@ function ChannelSelect({ return (