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 && (
- }>
+
+ }
+ disabled={!addNewChannelPermission}
+ >
{t('button_new_channel')}
- )}
+
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 && (
+
+ }
+ className="create-notification-btn"
+ disabled={!addNewChannelPermission}
+ >
+ Create a notification channel
+
+
)}
>
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 (