chore: added changes for sorting tooltip content

* 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.

* chore: change allow referrer and add noopener

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

@@ -1,16 +1,65 @@
+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="noopener">
+									Learn to write faster, optimized queries
+								</a>
+								{showAgentSkill && (
+									<>
+										{' · Using AI? '}
+										<a href={DOCLINKS.AGENT_SKILL_INSTALL} target="_blank" rel="noopener">
+											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/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/index.tsx

@@ -26,12 +26,12 @@ function ClickHouseQueryContainer(): JSX.Element | null {
 							<a
 								href={DOCLINKS.QUERY_CLICKHOUSE_TRACES}
 								target="_blank"
-								rel="noreferrer"
+								rel="noopener"
 							>
 								Learn to write faster, optimized queries
 							</a>
 							{' · Using AI? '}
-							<a href={DOCLINKS.AGENT_SKILL_INSTALL} target="_blank" rel="noreferrer">
+							<a href={DOCLINKS.AGENT_SKILL_INSTALL} target="_blank" rel="noopener">
 								Install the SigNoz ClickHouse query agent skill
 							</a>
 						</span>

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -189,7 +189,7 @@ describe('Tooltip utils', () => {
 			];
 		}
 
-		it('builds tooltip content in series-index order with isActive flag set correctly', () => {
+		it('builds tooltip content sorted by value descending with isActive flag set correctly', () => {
 			const data: AlignedData = [[0], [10], [20], [30]];
 			const series = createSeriesConfig();
 			const dataIndexes = [null, 0, 0, 0];
@@ -206,21 +206,21 @@ describe('Tooltip utils', () => {
 			});
 
 			expect(result).toHaveLength(2);
-			// Series are returned in series-index order (A=index 1 before B=index 2)
+			// Sorted by value descending: B (20) before A (10)
 			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'A',
-				value: 10,
-				tooltipValue: 'formatted-10',
-				color: '#ff0000',
-				isActive: false,
-			});
-			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
 				label: 'B',
 				value: 20,
 				tooltipValue: 'formatted-20',
 				color: 'color-2',
 				isActive: true,
 			});
+			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'A',
+				value: 10,
+				tooltipValue: 'formatted-10',
+				color: '#ff0000',
+				isActive: false,
+			});
 		});
 
 		it('skips series with null data index or non-finite values', () => {
@@ -274,7 +274,7 @@ describe('Tooltip utils', () => {
 			expect(result[1].value).toBe(30);
 		});
 
-		it('returns items in series-index order', () => {
+		it('returns items sorted by value descending', () => {
 			// Series values in non-sorted order: 3, 1, 4, 2
 			const data: AlignedData = [[0], [3], [1], [4], [2]];
 			const series: Series[] = [
@@ -297,7 +297,7 @@ describe('Tooltip utils', () => {
 				decimalPrecision,
 			});
 
-			expect(result.map((item) => item.value)).toStrictEqual([3, 1, 4, 2]);
+			expect(result.map((item) => item.value)).toStrictEqual([4, 3, 2, 1]);
 		});
 	});
 });

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -142,5 +142,7 @@ export function buildTooltipContent({
 		}
 	}
 
+	items.sort((a, b) => b.value - a.value);
+
 	return items;
 }

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',
 };