feat: added link for example alerts (#5216)

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",

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",

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 {

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>
 				))}
 			</>

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 {
+	.info-help-btns {
-	margin-top: 20px;
+		.doc-redirection-btn {
-	width: 100%;
+			color: var(--bg-aqua-600) !important;
+			border-color: var(--bg-aqua-600) !important;
+		}
+	}
 }

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,6 +620,16 @@ function FormAlertRules({
 				</StyledLeftContainer>
 				<Col flex="1 1 300px">
 					<UserGuide queryType={currentQuery.queryType} />
+					<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,
@@ -610,6 +646,7 @@ function FormAlertRules({
 							message={alertHelpMessage(alertDef, ruleId)}
 							onHoverText="Click here to get help with this alert"
 						/>
+					</div>
 				</Col>
 			</PanelContainer>
 		</>

frontend/src/pages/TracesExplorer/Filter/filterUtils.ts

@@ -328,17 +328,17 @@ export function unionTagFilterItems(
 ): TagFilterItem[] {
 	const unionMap = new Map<string, TagFilterItem>();
 
-	items1.forEach((item) => {
+	items1?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item.op}`;
+		const keyOp = `${item?.key?.key}_${item?.op}`;
 		unionMap.set(keyOp, item);
 	});
 
-	items2.forEach((item) => {
+	items2?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item.op}`;
+		const keyOp = `${item?.key?.key}_${item?.op}`;
 		unionMap.set(keyOp, item);
 	});
 
-	return Array.from(unionMap.values());
+	return Array.from(unionMap?.values());
 }
 
 export interface HandleRunProps {