From a649ced33721028d15146a851d825e8b5a0cafc5 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Tue, 13 Jun 2023 11:45:52 +0300
Subject: [PATCH] chore: alert rules is updated (#2646)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../container/ListAlertRules/ListAlert.tsx    | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx
index 41e69c718b..c1204eb79b 100644
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -2,6 +2,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import saveAlertApi from 'api/alerts/save';
 import { ResizeTable } from 'components/ResizeTable';
 import TextToolTip from 'components/TextToolTip';
 import { COMPOSITE_QUERY } from 'constants/queryBuilderQueryNames';
@@ -67,7 +68,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			.catch(handleError);
 	}, [featureResponse, handleError]);
 
-	const onEditHandler = (record: GettableAlert): void => {
+	const onEditHandler = (record: GettableAlert) => (): void => {
 		featureResponse
 			.refetch()
 			.then(() => {
@@ -84,6 +85,44 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			.catch(handleError);
 	};
 
+	const onCloneHandler = (
+		originalAlert: GettableAlert,
+	) => async (): Promise<void> => {
+		const copyAlert = {
+			...originalAlert,
+			alert: originalAlert.alert.concat(' - Copy'),
+		};
+		const apiReq = { data: copyAlert };
+
+		const response = await saveAlertApi(apiReq);
+
+		if (response.statusCode === 200) {
+			notificationsApi.success({
+				message: 'Success',
+				description: 'Alert cloned successfully',
+			});
+
+			const { data: refetchData, status } = await refetch();
+			if (status === 'success' && refetchData.payload) {
+				setData(refetchData.payload || []);
+				setTimeout(() => {
+					const clonedAlert = refetchData.payload[refetchData.payload.length - 1];
+					history.push(`${ROUTES.EDIT_ALERTS}?ruleId=${clonedAlert.id}`);
+				}, 2000);
+			}
+			if (status === 'error') {
+				notificationsApi.error({
+					message: t('something_went_wrong'),
+				});
+			}
+		} else {
+			notificationsApi.error({
+				message: 'Error',
+				description: response.error || t('something_went_wrong'),
+			});
+		}
+	};
+
 	const columns: ColumnsType<GettableAlert> = [
 		{
 			title: 'Status',
@@ -107,9 +146,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				return 0;
 			},
 			render: (value, record): JSX.Element => (
-				<Typography.Link onClick={(): void => onEditHandler(record)}>
-					{value}
-				</Typography.Link>
+				<Typography.Link onClick={onEditHandler(record)}>{value}</Typography.Link>
 			),
 		},
 		{
@@ -165,9 +202,12 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				<>
 					<ToggleAlertState disabled={record.disabled} setData={setData} id={id} />
 
-					<ColumnButton onClick={(): void => onEditHandler(record)} type="link">
+					<ColumnButton onClick={onEditHandler(record)} type="link">
 						Edit
 					</ColumnButton>
+					<ColumnButton onClick={onCloneHandler(record)} type="link">
+						Clone
+					</ColumnButton>
 
 					<DeleteAlert notifications={notificationsApi} setData={setData} id={id} />
 				</>