feat(alerts): add docs and agent skill info banner to ClickHouse query editor

Shows a contextual info banner when creating alert rules using ClickHouse
query mode, with doc links that vary by alert type (logs/traces/metrics).
Agent skill link is shown for logs and traces but skipped for metrics.

frontend/src/container/FormAlertRules/ChQuerySection/ChQuerySection.tsx

@@ -1,16 +1,69 @@
+import { Callout } from '@signozhq/ui/callout';
 import ClickHouseQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { AlertTypes } from 'types/api/alerts/alertTypes';
+import DOCLINKS from 'utils/docLinks';
 
-function ChQuerySection(): JSX.Element {
+import 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/ClickHouse.styles.scss';
+
+const ALERT_TYPE_DOC_LINK: Partial<Record<AlertTypes, string>> = {
+	[AlertTypes.LOGS_BASED_ALERT]: DOCLINKS.QUERY_CLICKHOUSE_LOGS,
+	[AlertTypes.TRACES_BASED_ALERT]: DOCLINKS.QUERY_CLICKHOUSE_TRACES,
+	[AlertTypes.EXCEPTIONS_BASED_ALERT]: DOCLINKS.QUERY_CLICKHOUSE_TRACES,
+	[AlertTypes.METRICS_BASED_ALERT]: DOCLINKS.QUERY_CLICKHOUSE_METRICS,
+};
+
+const ALERT_TYPES_WITH_AGENT_SKILL: AlertTypes[] = [
+	AlertTypes.LOGS_BASED_ALERT,
+	AlertTypes.TRACES_BASED_ALERT,
+	AlertTypes.EXCEPTIONS_BASED_ALERT,
+];
+
+interface ChQuerySectionProps {
+	alertType: AlertTypes;
+}
+
+function ChQuerySection({ alertType }: ChQuerySectionProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
+	const docLink = ALERT_TYPE_DOC_LINK[alertType];
+	const showAgentSkill = ALERT_TYPES_WITH_AGENT_SKILL.includes(alertType);
 
 	return (
-		<ClickHouseQueryBuilder
-			key="A"
-			queryIndex={0}
-			queryData={currentQuery.clickhouse_sql[0]}
-			deletable={false}
-		/>
+		<>
+			{docLink && (
+				<div className="info-banner-wrapper">
+					<Callout
+						type="info"
+						showIcon
+						title={
+							<span>
+								<a href={docLink} target="_blank" rel="noreferrer">
+									Learn to write faster, optimized queries
+								</a>
+								{showAgentSkill && (
+									<>
+										{' · Using AI? '}
+										<a
+											href={DOCLINKS.AGENT_SKILL_INSTALL}
+											target="_blank"
+											rel="noreferrer"
+										>
+											Install the SigNoz ClickHouse query agent skill
+										</a>
+									</>
+								)}
+							</span>
+						}
+					/>
+				</div>
+			)}
+			<ClickHouseQueryBuilder
+				key="A"
+				queryIndex={0}
+				queryData={currentQuery.clickhouse_sql[0]}
+				deletable={false}
+			/>
+		</>
 	);
 }
 

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -56,7 +56,9 @@ function QuerySection({
 
 	const renderPromqlUI = (): JSX.Element => <PromqlSection />;
 
-	const renderChQueryUI = (): JSX.Element => <ChQuerySection />;
+	const renderChQueryUI = (): JSX.Element => (
+		<ChQuerySection alertType={alertType} />
+	);
 
 	const isDarkMode = useIsDarkMode();
 

frontend/src/utils/docLinks.ts

@@ -10,6 +10,10 @@ const DOCLINKS = {
 		'https://signoz.io/docs/external-api-monitoring/overview/',
 	QUERY_CLICKHOUSE_TRACES:
 		'https://signoz.io/docs/userguide/writing-clickhouse-traces-query/#timestamp-bucketing-for-distributed_signoz_index_v3',
+	QUERY_CLICKHOUSE_LOGS:
+		'https://signoz.io/docs/userguide/logs_clickhouse_queries/',
+	QUERY_CLICKHOUSE_METRICS:
+		'https://signoz.io/docs/userguide/write-a-metrics-clickhouse-query/',
 	AGENT_SKILL_INSTALL: 'https://signoz.io/docs/ai/agent-skills/#installation',
 };