feat: implement alert channels polling and add 'create channel' optio…

…n in channels list

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -44,7 +44,7 @@ function BasicInfo({
 }: BasicInfoProps): JSX.Element {
 	const { t } = useTranslation('alerts');
 
-	const channels = useFetch(getChannels);
+	const channels = useFetch(getChannels, { poll: true });
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [addNewChannelPermission] = useComponentPermission(
 		['add_new_channel'],

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

@@ -1,4 +1,5 @@
 import { Select } from 'antd';
+import ROUTES from 'constants/routes';
 import { State } from 'hooks/useFetch';
 import { useNotifications } from 'hooks/useNotifications';
 import { ReactNode } from 'react';
@@ -26,6 +27,10 @@ function ChannelSelect({
 	const { notifications } = useNotifications();
 
 	const handleChange = (value: string[]): void => {
+		if (value.includes('add-new-channel')) {
+			window.open(ROUTES.CHANNELS_NEW, '_blank');
+			return;
+		}
 		onSelectChannels(value);
 	};
 
@@ -35,6 +40,7 @@ function ChannelSelect({
 			description: channels.errorMessage,
 		});
 	}
+
 	const renderOptions = (): ReactNode[] => {
 		const children: ReactNode[] = [];
 
@@ -54,8 +60,15 @@ function ChannelSelect({
 			);
 		});
 
+		children.push(
+			<Select.Option key="add-new-channel" value="add-new-channel">
+				Add a new channel
+			</Select.Option>,
+		);
+
 		return children;
 	};
+
 	return (
 		<StyledSelect
 			disabled={disabled}

frontend/src/hooks/useFetch.ts

@@ -1,7 +1,16 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
-function useFetch<PayloadProps, FunctionParams>(
+import useInterval from './useInterval';
+
+interface FetchParams extends Record<string, unknown> {
+	poll?: boolean;
+	interval?: number;
+}
+
+const DEFAULT_POLL_INTERVAL = 5000;
+
+function useFetch<PayloadProps, FunctionParams extends FetchParams>(
 	functions: {
 		(props: FunctionParams): Promise<
 			SuccessResponse<PayloadProps> | ErrorResponse
@@ -21,35 +30,27 @@ function useFetch<PayloadProps, FunctionParams>(
 
 	const loadingRef = useRef(0);
 
-	useEffect(() => {
+	const fetchData = useCallback(async (): Promise<void> => {
 		try {
-			(async (): Promise<void> => {
-				if (state.loading) {
-					const response = await functions(param);
+			const response = await functions(param);
 
-					if (loadingRef.current === 0) {
-						loadingRef.current = 1;
-
-						if (response.statusCode === 200) {
-							setStates({
-								loading: false,
-								error: false,
-								success: true,
-								payload: response.payload,
-								errorMessage: '',
-							});
-						} else {
-							setStates({
-								loading: false,
-								error: true,
-								success: false,
-								payload: undefined,
-								errorMessage: response.error as string,
-							});
-						}
-					}
-				}
-			})();
+			if (response.statusCode === 200) {
+				setStates({
+					loading: false,
+					error: false,
+					success: true,
+					payload: response.payload,
+					errorMessage: '',
+				});
+			} else {
+				setStates({
+					loading: false,
+					error: true,
+					success: false,
+					payload: undefined,
+					errorMessage: response.error as string,
+				});
+			}
 		} catch (error) {
 			setStates({
 				payload: undefined,
@@ -59,10 +60,24 @@ function useFetch<PayloadProps, FunctionParams>(
 				errorMessage: error as string,
 			});
 		}
+	}, [functions, param]);
+
+	// Initial fetch
+	useEffect(() => {
+		if (state.loading) {
+			fetchData();
+		}
 		return (): void => {
 			loadingRef.current = 1;
 		};
-	}, [functions, param, state.loading]);
+	}, [fetchData, state.loading]);
+
+	// Polling logic
+	useInterval(
+		fetchData,
+		param?.interval || DEFAULT_POLL_INTERVAL,
+		!!param?.poll && !state.loading && !state.error,
+	);
 
 	return {
 		...state,