From 191a2a319d2a7669b4af18940727085f32e43e23 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Thu, 13 Jun 2024 23:50:47 +0530
Subject: [PATCH] feat: added link for example alerts (#5216)

---
 frontend/public/locales/en-GB/alerts.json     |  2 +-
 frontend/public/locales/en/alerts.json        |  2 +-
 .../facingIssueBtn/FacingIssueBtn.style.scss  | 14 +++-
 .../CreateAlertRule/SelectAlertType/index.tsx | 35 +++++++++-
 .../FormAlertRules/FormAlertRules.styles.scss | 26 +++++--
 .../src/container/FormAlertRules/index.tsx    | 69 ++++++++++++++-----
 .../TracesExplorer/Filter/filterUtils.ts      | 10 +--
 7 files changed, 129 insertions(+), 29 deletions(-)

diff --git a/frontend/public/locales/en-GB/alerts.json b/frontend/public/locales/en-GB/alerts.json
index 0901b14d19..a43d04ab59 100644
--- a/frontend/public/locales/en-GB/alerts.json
+++ b/frontend/public/locales/en-GB/alerts.json
@@ -108,7 +108,7 @@
 	"user_tooltip_more_help": "More details on how to create alerts",
 	"choose_alert_type": "Choose a type for the alert",
 	"metric_based_alert": "Metric based Alert",
-	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
+	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data.",
 	"log_based_alert": "Log-based Alert",
 	"log_based_alert_desc": "Send a notification when a condition occurs in the logs data.",
 	"traces_based_alert": "Trace-based Alert",
diff --git a/frontend/public/locales/en/alerts.json b/frontend/public/locales/en/alerts.json
index 597cc24096..e7ed6232ad 100644
--- a/frontend/public/locales/en/alerts.json
+++ b/frontend/public/locales/en/alerts.json
@@ -108,7 +108,7 @@
 	"user_tooltip_more_help": "More details on how to create alerts",
 	"choose_alert_type": "Choose a type for the alert",
 	"metric_based_alert": "Metric based Alert",
-	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
+	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data.",
 	"log_based_alert": "Log-based Alert",
 	"log_based_alert_desc": "Send a notification when a condition occurs in the logs data.",
 	"traces_based_alert": "Trace-based Alert",
diff --git a/frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss b/frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss
index 68602d3aca..2cf239dfd9 100644
--- a/frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss
+++ b/frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss
@@ -2,12 +2,24 @@
 	color: var(--bg-amber-500);
 	border-color: var(--bg-amber-500);
 
-	.ant-btn:hover {
+	> .ant-btn:hover {
 		color: var(--bg-amber-400) !important;
 		border-color: var(--bg-amber-300) !important;
 	}
 }
 
+.lightMode {
+	.facing-issue-button {
+		color: var(--bg-vanilla-500);
+		border-color: var(--bg-vanilla-300);
+
+		> .ant-btn:hover {
+			color: var(--bg-vanilla-500) !important;
+			border-color: var(--bg-vanilla-300) !important;
+		}
+	}
+}
+
 .tooltip-overlay {
 	text-wrap: nowrap;
 	.ant-tooltip-inner {
diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
index 60bf658e5d..916c9341a6 100644
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -12,6 +12,30 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 
 	const optionList = getOptionList(t);
 
+	function handleRedirection(option: AlertTypes): void {
+		let url = '';
+		switch (option) {
+			case AlertTypes.METRICS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/metrics-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				break;
+			case AlertTypes.LOGS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/log-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				break;
+			case AlertTypes.TRACES_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/trace-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				break;
+			case AlertTypes.EXCEPTIONS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#example';
+				break;
+			default:
+				break;
+		}
+		window.open(url, '_blank');
+	}
 	const renderOptions = useMemo(
 		() => (
 			<>
@@ -23,7 +47,16 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 							onSelect(option.selection);
 						}}
 					>
-						{option.description}
+						{option.description}{' '}
+						<Typography.Link
+							onClick={(e): void => {
+								e.preventDefault();
+								e.stopPropagation();
+								handleRedirection(option.selection);
+							}}
+						>
+							Click here to see how to create a sample alert.
+						</Typography.Link>{' '}
 					</AlertTypeCard>
 				))}
 			</>
diff --git a/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
index 73e77abfcf..34a2b0b5f7 100644
--- a/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
+++ b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
@@ -21,6 +21,22 @@
 	}
 }
 
+.info-help-btns {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 12px;
+	margin-top: 20px;
+
+	.doc-redirection-btn {
+		color: var(--bg-aqua-500) !important;
+		border-color: var(--bg-aqua-500) !important;
+	}
+
+	.facing-issue-btn {
+		width: 100% !important;
+	}
+}
+
 .lightMode {
 	.main-container {
 		.plot-tag {
@@ -47,9 +63,11 @@
 			}
 		}
 	}
-}
 
-.facing-issue-btn {
-	margin-top: 20px;
-	width: 100%;
+	.info-help-btns {
+		.doc-redirection-btn {
+			color: var(--bg-aqua-600) !important;
+			border-color: var(--bg-aqua-600) !important;
+		}
+	}
 }
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
index 5a4bf13e00..588fd498bc 100644
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -2,6 +2,7 @@ import './FormAlertRules.styles.scss';
 
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
 import {
+	Button,
 	Col,
 	FormInstance,
 	Modal,
@@ -511,6 +512,31 @@ function FormAlertRules({
 
 	const isRuleCreated = !ruleId || ruleId === 0;
 
+	function handleRedirection(option: AlertTypes): void {
+		let url = '';
+		switch (option) {
+			case AlertTypes.METRICS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/metrics-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
+				break;
+			case AlertTypes.LOGS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/log-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
+				break;
+			case AlertTypes.TRACES_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/trace-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
+				break;
+			case AlertTypes.EXCEPTIONS_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
+				break;
+			default:
+				break;
+		}
+		window.open(url, '_blank');
+	}
+
 	return (
 		<>
 			{Element}
@@ -594,22 +620,33 @@ function FormAlertRules({
 				</StyledLeftContainer>
 				<Col flex="1 1 300px">
 					<UserGuide queryType={currentQuery.queryType} />
-					<FacingIssueBtn
-						attributes={{
-							alert: alertDef?.alert,
-							alertType: alertDef?.alertType,
-							id: ruleId,
-							ruleType: alertDef?.ruleType,
-							state: (alertDef as any)?.state,
-							panelType,
-							screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
-						}}
-						className="facing-issue-btn"
-						eventName="Alert: Facing Issues in alert"
-						buttonText="Need help with this alert?"
-						message={alertHelpMessage(alertDef, ruleId)}
-						onHoverText="Click here to get help with this alert"
-					/>
+					<div className="info-help-btns">
+						<Button
+							style={{ height: 32 }}
+							onClick={(): void =>
+								handleRedirection(alertDef?.alertType as AlertTypes)
+							}
+							className="doc-redirection-btn"
+						>
+							Check an example alert
+						</Button>
+						<FacingIssueBtn
+							attributes={{
+								alert: alertDef?.alert,
+								alertType: alertDef?.alertType,
+								id: ruleId,
+								ruleType: alertDef?.ruleType,
+								state: (alertDef as any)?.state,
+								panelType,
+								screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
+							}}
+							className="facing-issue-btn"
+							eventName="Alert: Facing Issues in alert"
+							buttonText="Need help with this alert?"
+							message={alertHelpMessage(alertDef, ruleId)}
+							onHoverText="Click here to get help with this alert"
+						/>
+					</div>
 				</Col>
 			</PanelContainer>
 		</>
diff --git a/frontend/src/pages/TracesExplorer/Filter/filterUtils.ts b/frontend/src/pages/TracesExplorer/Filter/filterUtils.ts
index ede7615e47..86b52fdbb0 100644
--- a/frontend/src/pages/TracesExplorer/Filter/filterUtils.ts
+++ b/frontend/src/pages/TracesExplorer/Filter/filterUtils.ts
@@ -328,17 +328,17 @@ export function unionTagFilterItems(
 ): TagFilterItem[] {
 	const unionMap = new Map<string, TagFilterItem>();
 
-	items1.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item.op}`;
+	items1?.forEach((item) => {
+		const keyOp = `${item?.key?.key}_${item?.op}`;
 		unionMap.set(keyOp, item);
 	});
 
-	items2.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item.op}`;
+	items2?.forEach((item) => {
+		const keyOp = `${item?.key?.key}_${item?.op}`;
 		unionMap.set(keyOp, item);
 	});
 
-	return Array.from(unionMap.values());
+	return Array.from(unionMap?.values());
 }
 
 export interface HandleRunProps {