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

* feat: add clickhouse query doc and skill links

* fix: switch to using callout component for info

* chore: update banner message

* chore: move styles to a separate file and rename folder

to match conventions

* fix: rename folder in git as well

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

@@ -1,4 +1,4 @@
-import ClickHouseQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/clickHouse/query';
+import ClickHouseQueryBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
 function ChQuerySection(): JSX.Element {

frontend/src/container/Home/HomeChecklist/HomeChecklist.styles.scss

@@ -143,8 +143,8 @@
 					background-color: #4568dc;
 					content: '';
 					display: inline-block;
-					background: url('/public/Icons/status-inprogress-pill.svg') no-repeat
-						center;
+					background: url('../../../assets/Icons/status-inprogress-pill.svg')
+						no-repeat center;
 					background-size: contain;
 					border: none !important;
 
@@ -160,7 +160,8 @@
 					background-color: var(--bg-amber-400);
 					content: '';
 					display: inline-block;
-					background: url('/public/Icons/status-skipped-pill.svg') no-repeat center;
+					background: url('../../../assets/Icons/status-skipped-pill.svg') no-repeat
+						center;
 					background-size: contain;
 					border: none;
 

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/ClickHouse.styles.scss

@@ -0,0 +1,7 @@
+.info-banner-wrapper {
+	margin: 8px 8px 16px 16px;
+
+	a {
+		text-decoration: underline;
+	}
+}

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/index.tsx

@@ -1,10 +1,14 @@
 import { PlusOutlined } from '@ant-design/icons';
+import { Callout } from '@signozhq/ui';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { EQueryType } from 'types/common/dashboard';
+import DOCLINKS from 'utils/docLinks';
 
 import { QueryButton } from '../../styles';
 import ClickHouseQueryBuilder from './query';
 
+import './ClickHouse.styles.scss';
+
 function ClickHouseQueryContainer(): JSX.Element | null {
 	const { currentQuery, addNewQueryItem } = useQueryBuilder();
 	const addQueryHandler = (): void => {
@@ -13,6 +17,28 @@ function ClickHouseQueryContainer(): JSX.Element | null {
 
 	return (
 		<>
+			<div className="info-banner-wrapper">
+				<Callout
+					type="info"
+					showIcon
+					title={
+						<span>
+							<a
+								href={DOCLINKS.QUERY_CLICKHOUSE_TRACES}
+								target="_blank"
+								rel="noreferrer"
+							>
+								Learn to write faster, optimized queries
+							</a>
+							{' · Using AI? '}
+							<a href={DOCLINKS.AGENT_SKILL_INSTALL} target="_blank" rel="noreferrer">
+								Install the SigNoz ClickHouse query agent skill
+							</a>
+						</span>
+					}
+				/>
+			</div>
+
 			{currentQuery.clickhouse_sql.map((q, idx) => (
 				<ClickHouseQueryBuilder
 					key={q.name}

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -19,7 +19,7 @@ import { Atom, Terminal } from 'lucide-react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { EQueryType } from 'types/common/dashboard';
 
-import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
+import ClickHouseQueryContainer from './QueryBuilder/ClickHouse';
 import PromQLQueryContainer from './QueryBuilder/promQL';
 
 import './QuerySection.styles.scss';

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -23,9 +23,11 @@ import { CheckIcon, Goal, UserPlus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { isModifierKeyPressed } from 'utils/app';
 
+import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
+
 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
 import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
-import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links.json';
+import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links';
 
 import '../OnboardingV2.styles.scss';
 
@@ -894,7 +896,7 @@ function OnboardingAddDataSource(): JSX.Element {
 																	>
 																		{option.imgUrl && (
 																			<img
-																				src={option.imgUrl || '/Logos/signoz-brand-logo-new.svg'}
+																				src={option.imgUrl || signozBrandLogoUrl}
 																				alt={option.label}
 																				className="onboarding-data-source-button-img"
 																			/>
@@ -957,7 +959,7 @@ function OnboardingAddDataSource(): JSX.Element {
 																		}
 																	>
 																		<img
-																			src={option.imgUrl || '/Logos/signoz-brand-logo-new.svg'}
+																			src={option.imgUrl || signozBrandLogoUrl}
 																			alt={option.label}
 																			className="onboarding-data-source-button-img"
 																		/>

frontend/src/utils/docLinks.ts

@@ -8,6 +8,9 @@ const DOCLINKS = {
 		'https://signoz.io/docs/userguide/send-metrics-cloud/',
 	EXTERNAL_API_MONITORING:
 		'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',
+	AGENT_SKILL_INSTALL: 'https://signoz.io/docs/ai/agent-skills/#installation',
 };
 
 export default DOCLINKS;