feat(UI): Auto refresh (#411)

* feat(hook): useInterval hook is made

* feat(UI): alert rules and grouped alerts are fetched automatically within in 30sec

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -2,7 +2,9 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, notification, Tag, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
+import getAll from 'api/alerts/getAll';
 import ROUTES from 'constants/routes';
+import useInterval from 'hooks/useInterval';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
 import { generatePath } from 'react-router';
@@ -15,6 +17,16 @@ import Status from './TableComponents/Status';
 const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
 	const [data, setData] = useState<Alerts[]>(allAlertRules || []);
 
+	useInterval(() => {
+		(async (): Promise<void> => {
+			const { payload, statusCode } = await getAll();
+
+			if (statusCode === 200 && payload !== null) {
+				setData(payload);
+			}
+		})();
+	}, 30000);
+
 	const onClickNewAlertHandler = useCallback(() => {
 		history.push(ROUTES.ALERTS_NEW);
 	}, []);

frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx

@@ -1,3 +1,5 @@
+import getGroupApi from 'api/alerts/getGroup';
+import useInterval from 'hooks/useInterval';
 import React, { useState } from 'react';
 import { Alerts } from 'types/api/alerts/getAll';
 
@@ -8,7 +10,27 @@ import NoFilterTable from './NoFilterTable';
 import { NoTableContainer } from './styles';
 
 const TriggeredAlerts = ({ allAlerts }: TriggeredAlertsProps): JSX.Element => {
-	const allInitialAlerts = allAlerts || [];
+	const [allInitialAlerts, setInitialAlerts] = useState(allAlerts || []);
+
+	useInterval(() => {
+		(async (): Promise<void> => {
+			const response = await getGroupApi({
+				active: true,
+				inhibited: true,
+				silenced: false,
+			});
+
+			if (response.statusCode === 200 && response.payload !== null) {
+				const initialAlerts: Alerts[] = [];
+
+				const allAlerts: Alerts[] = response.payload.reduce((acc, cur) => {
+					return [...acc, ...cur.alerts];
+				}, initialAlerts);
+
+				setInitialAlerts(allAlerts);
+			}
+		})();
+	}, 30000);
 
 	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
 	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);

frontend/src/hooks/useInterval.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+function useInterval(callback: () => void, delay: number): void {
+	const savedCallback = useRef<() => void>();
+
+	useEffect(() => {
+		savedCallback.current = callback;
+	});
+
+	useEffect(() => {
+		function tick(): void {
+			if (savedCallback.current) {
+				savedCallback.current();
+			}
+		}
+
+		const id = setInterval(tick, delay);
+		return (): void => clearInterval(id);
+	}, [delay]);
+}
+
+export default useInterval;