Merge branch 'develop' into develop

deploy/docker-swarm/clickhouse-setup/clickhouse-config.xml

@@ -22,7 +22,7 @@
 
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
-        <level>trace</level>
+        <level>information</level>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -40,7 +40,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.9.2
+    image: signoz/query-service:0.10.0
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -68,7 +68,7 @@ services:
       - clickhouse
 
   frontend:
-    image: signoz/frontend:0.9.2
+    image: signoz/frontend:0.10.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -81,7 +81,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-config.yaml"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -111,7 +111,7 @@ services:
       - clickhouse
 
   otel-collector-metrics:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

deploy/docker/clickhouse-setup/clickhouse-config.xml

@@ -22,7 +22,7 @@
 
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
-        <level>trace</level>
+        <level>information</level>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -39,7 +39,7 @@ services:
 # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:0.9.2
+    image: signoz/query-service:0.10.0
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
@@ -66,7 +66,7 @@ services:
         condition: service_healthy
 
   frontend:
-    image: signoz/frontend:0.9.2
+    image: signoz/frontend:0.10.0
     container_name: frontend
     restart: on-failure
     depends_on:
@@ -78,7 +78,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-config.yaml"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -103,7 +103,7 @@ services:
         condition: service_healthy
 
   otel-collector-metrics:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

frontend/public/locales/en-GB/alerts.json

@@ -0,0 +1,85 @@
+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}

frontend/public/locales/en-GB/rules.json

@@ -59,5 +59,27 @@
   "option_critical": "Critical",
   "option_error": "Error",
   "option_warning": "Warning",
-  "option_info": "Info"
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
 }

frontend/public/locales/en/alerts.json

@@ -0,0 +1,85 @@
+{
+  "preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
+  "preview_chart_threshold_label": "Threshold",
+  "placeholder_label_key_pair": "Click here to enter a label (key value pairs)",
+  "button_yes": "Yes",
+  "button_no": "No",
+  "remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
+  "remove_label_success": "Labels cleared",
+  "alert_form_step1": "Step 1 - Define the metric",
+  "alert_form_step2": "Step 2 - Define Alert Conditions",
+  "alert_form_step3": "Step 3 - Alert Configuration",
+  "metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
+  "confirm_save_title": "Save Changes",
+  "confirm_save_content_part1": "Your alert built with",
+  "confirm_save_content_part2": "query will be saved. Press OK to confirm.",
+  "unexpected_error": "Sorry, an unexpected error occurred. Please contact your admin",
+  "rule_created": "Rule created successfully",
+  "rule_edited": "Rule edited successfully",
+  "expression_missing": "expression is missing in {{where}}",
+  "metricname_missing": "metric name is missing in {{where}}",
+  "condition_required": "at least one metric condition is required",
+  "alertname_required": "alert name is required",
+  "promql_required": "promql expression is required when query format is set to PromQL",
+  "button_savechanges": "Save Rule",
+  "button_createrule": "Create Rule",
+  "button_returntorules": "Return to rules",
+  "button_cancelchanges": "Cancel",
+  "button_discard": "Discard",
+  "text_condition1": "Send a notification when the metric is",
+  "text_condition2": "the threshold",
+  "text_condition3": "during the last",
+  "option_5min": "5 mins",
+  "option_10min": "10 mins",
+  "option_15min": "15 mins",
+  "option_60min": "60 mins",
+  "option_4hours": "4 hours",
+  "option_24hours": "24 hours",
+  "field_threshold": "Alert Threshold",
+  "option_allthetimes": "all the times",
+  "option_atleastonce": "at least once",
+  "option_onaverage": "on average",
+  "option_intotal": "in total",
+  "option_above": "above",
+  "option_below": "below",
+  "option_equal": "is equal to",
+  "option_notequal": "not equal to",
+  "button_query": "Query",
+  "button_formula": "Formula",
+  "tab_qb": "Query Builder",
+  "tab_promql": "PromQL",
+  "title_confirm": "Confirm",
+  "button_ok": "Yes",
+  "button_cancel": "No",
+  "field_promql_expr": "PromQL Expression",
+  "field_alert_name": "Alert Name",
+  "field_alert_desc": "Alert Description",
+  "field_labels": "Labels",
+  "field_severity": "Severity",
+  "option_critical": "Critical",
+  "option_error": "Error",
+  "option_warning": "Warning",
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
+}

frontend/public/locales/en/rules.json

@@ -59,5 +59,27 @@
   "option_critical": "Critical",
   "option_error": "Error",
   "option_warning": "Warning",
-  "option_info": "Info"
+  "option_info": "Info",
+  "user_guide_headline": "Steps to create an Alert",
+  "user_guide_qb_step1": "Step 1 - Define the metric",
+  "user_guide_qb_step1a": "Choose a metric which you want to create an alert on",
+  "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed",
+  "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric",
+  "user_guide_qb_step1d": "Create a formula based on Queries if needed",
+  "user_guide_qb_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value",
+  "user_guide_qb_step2b": "Enter the Alert threshold",
+  "user_guide_qb_step3": "Step 3 -Alert Configuration",
+  "user_guide_qb_step3a": "Set alert severity, name and descriptions",
+  "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed",
+  "user_guide_pql_step1": "Step 1 - Define the metric",
+  "user_guide_pql_step1a": "Write a PromQL query for the metric",
+  "user_guide_pql_step1b": "Format the legends based on labels you want to highlight",
+  "user_guide_pql_step2": "Step 2 - Define Alert Conditions",
+  "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value",
+  "user_guide_pql_step2b": "Enter the Alert threshold",
+  "user_guide_pql_step3": "Step 3 -Alert Configuration",
+  "user_guide_pql_step3a": "Set alert severity, name and descriptions",
+  "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed",
+  "user_tooltip_more_help": "More details on how to create alerts"
 }

frontend/src/container/AllError/utils.ts

@@ -74,10 +74,10 @@ export const getDefaultOrder = (
 	return undefined;
 };
 
-export const getNanoSeconds = (date: string): number => {
+export const getNanoSeconds = (date: string): string => {
 	return (
-		parseInt((new Date(date).getTime() / 1e3).toString(), 10) * 1e9 +
+		Math.floor(new Date(date).getTime() / 1e3).toString() +
-		Timestamp.fromString(date).getNano()
+		Timestamp.fromString(date).getNano().toString()
 	);
 };
 

frontend/src/container/ErrorDetails/index.tsx

@@ -40,7 +40,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				getNextPrevId({
 					errorID: errorId || idPayload.errorId,
 					groupID: idPayload.groupID,
-					timestamp: timestamp || getNanoSeconds(idPayload.timestamp).toString(),
+					timestamp: timestamp || getNanoSeconds(idPayload.timestamp),
 				}),
 		},
 	);
@@ -79,7 +79,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 	const onClickErrorIdHandler = async (
 		id: string,
-		timespamp: string,
+		timestamp: string,
 	): Promise<void> => {
 		try {
 			if (id.length === 0) {
@@ -92,7 +92,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			history.replace(
 				`${history.location.pathname}?&groupId=${
 					idPayload.groupID
-				}&timestamp=${getNanoSeconds(timespamp)}&errorId=${id}`,
+				}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
 			);
 		} catch (error) {
 			notification.error({

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -22,7 +22,7 @@ interface BasicInfoProps {
 
 function BasicInfo({ alertDef, setAlertDef }: BasicInfoProps): JSX.Element {
 	// init namespace for translations
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 
 	return (
 		<>

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -33,7 +33,7 @@ function ChartPreview({
 	headline,
 	threshold,
 }: ChartPreviewProps): JSX.Element | null {
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 	const staticLine: StaticLineProps | undefined =
 		threshold && threshold > 0
 			? {

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -31,7 +31,7 @@ function QuerySection({
 	setPromQueries,
 }: QuerySectionProps): JSX.Element {
 	// init namespace for translations
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 
 	const handleQueryCategoryChange = (s: string): void => {
 		if (

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -25,7 +25,7 @@ function RuleOptions({
 	queryCategory,
 }: RuleOptionsProps): JSX.Element {
 	// init namespace for translations
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 
 	const handleMatchOptChange = (value: string | unknown): void => {
 		const m = (value as string) || alertDef.condition?.matchType;

frontend/src/container/FormAlertRules/UserGuide/index.tsx

@@ -0,0 +1,132 @@
+import { Col, Row, Typography } from 'antd';
+import TextToolTip from 'components/TextToolTip';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { EQueryType } from 'types/common/dashboard';
+
+import {
+	StyledList,
+	StyledListItem,
+	StyledMainContainer,
+	StyledTopic,
+} from './styles';
+
+function UserGuide({ queryType }: UserGuideProps): JSX.Element {
+	// init namespace for translations
+	const { t } = useTranslation('alerts');
+
+	const renderStep1QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderStep3QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderGuideForQB = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1QB()}
+				{renderStep2QB()}
+				{renderStep3QB()}
+			</>
+		);
+	};
+	const renderStep1PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderStep3PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+
+	const renderGuideForPQL = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1PQL()}
+				{renderStep2PQL()}
+				{renderStep3PQL()}
+			</>
+		);
+	};
+
+	return (
+		<StyledMainContainer>
+			<Row>
+				<Col flex="auto">
+					<Typography.Paragraph> {t('user_guide_headline')} </Typography.Paragraph>
+				</Col>
+				<Col flex="none">
+					<TextToolTip
+						text={t('user_tooltip_more_help')}
+						url="https://signoz.io/docs/userguide/alerts-management/#create-alert-rules"
+					/>
+				</Col>
+			</Row>
+			{queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()}
+			{queryType === EQueryType.PROM && renderGuideForPQL()}
+		</StyledMainContainer>
+	);
+}
+
+interface UserGuideProps {
+	queryType: EQueryType;
+}
+
+export default UserGuide;

frontend/src/container/FormAlertRules/UserGuide/styles.ts

@@ -0,0 +1,17 @@
+import { Card, Typography } from 'antd';
+import styled from 'styled-components';
+
+export const StyledMainContainer = styled(Card)``;
+
+export const StyledTopic = styled(Typography.Paragraph)`
+	font-weight: 600;
+`;
+
+export const StyledList = styled.ul`
+	padding-left: 18px;
+`;
+
+export const StyledListItem = styled.li`
+	font-style: italic;
+	padding-bottom: 0.5rem;
+`;

frontend/src/container/FormAlertRules/index.tsx

@@ -25,8 +25,16 @@ import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
 import QuerySection from './QuerySection';
 import RuleOptions from './RuleOptions';
-import { ActionButton, ButtonContainer, MainFormContainer } from './styles';
+import {
+	ActionButton,
+	ButtonContainer,
+	MainFormContainer,
+	PanelContainer,
+	StyledLeftContainer,
+	StyledRightContainer,
+} from './styles';
 import useDebounce from './useDebounce';
+import UserGuide from './UserGuide';
 import {
 	prepareBuilderQueries,
 	prepareStagedQuery,
@@ -41,7 +49,7 @@ function FormAlertRules({
 	ruleId,
 }: FormAlertRuleProps): JSX.Element {
 	// init namespace for translations
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 
 	// use query client
 	const ruleCache = useQueryClient();
@@ -309,50 +317,57 @@ function FormAlertRules({
 	return (
 		<>
 			{Element}
-			<MainFormContainer
+			<PanelContainer>
-				initialValues={initialValue}
+				<StyledLeftContainer flex="5 1 600px">
-				layout="vertical"
+					<MainFormContainer
-				form={formInstance}
+						initialValues={initialValue}
-			>
+						layout="vertical"
-				{queryCategory === EQueryType.QUERY_BUILDER && renderQBChartPreview()}
+						form={formInstance}
-				{queryCategory === EQueryType.PROM && renderPromChartPreview()}
-				<QuerySection
-					queryCategory={queryCategory}
-					setQueryCategory={onQueryCategoryChange}
-					metricQueries={metricQueries}
-					setMetricQueries={setMetricQueries}
-					formulaQueries={formulaQueries}
-					setFormulaQueries={setFormulaQueries}
-					promQueries={promQueries}
-					setPromQueries={setPromQueries}
-				/>
-
-				<RuleOptions
-					queryCategory={queryCategory}
-					alertDef={alertDef}
-					setAlertDef={setAlertDef}
-				/>
-
-				{renderBasicInfo()}
-				<ButtonContainer>
-					<ActionButton
-						loading={loading || false}
-						type="primary"
-						onClick={onSaveHandler}
-						icon={<SaveOutlined />}
 					>
-						{ruleId > 0 ? t('button_savechanges') : t('button_createrule')}
+						{queryCategory === EQueryType.QUERY_BUILDER && renderQBChartPreview()}
-					</ActionButton>
+						{queryCategory === EQueryType.PROM && renderPromChartPreview()}
-					<ActionButton
+						<QuerySection
-						disabled={loading || false}
+							queryCategory={queryCategory}
-						type="default"
+							setQueryCategory={onQueryCategoryChange}
-						onClick={onCancelHandler}
+							metricQueries={metricQueries}
-					>
+							setMetricQueries={setMetricQueries}
-						{ruleId === 0 && t('button_cancelchanges')}
+							formulaQueries={formulaQueries}
-						{ruleId > 0 && t('button_discard')}
+							setFormulaQueries={setFormulaQueries}
-					</ActionButton>
+							promQueries={promQueries}
-				</ButtonContainer>
+							setPromQueries={setPromQueries}
-			</MainFormContainer>
+						/>
+
+						<RuleOptions
+							queryCategory={queryCategory}
+							alertDef={alertDef}
+							setAlertDef={setAlertDef}
+						/>
+
+						{renderBasicInfo()}
+						<ButtonContainer>
+							<ActionButton
+								loading={loading || false}
+								type="primary"
+								onClick={onSaveHandler}
+								icon={<SaveOutlined />}
+							>
+								{ruleId > 0 ? t('button_savechanges') : t('button_createrule')}
+							</ActionButton>
+							<ActionButton
+								disabled={loading || false}
+								type="default"
+								onClick={onCancelHandler}
+							>
+								{ruleId === 0 && t('button_cancelchanges')}
+								{ruleId > 0 && t('button_discard')}
+							</ActionButton>
+						</ButtonContainer>
+					</MainFormContainer>
+				</StyledLeftContainer>
+				<StyledRightContainer flex="1 1 300px">
+					<UserGuide queryType={queryCategory} />
+				</StyledRightContainer>
+			</PanelContainer>
 		</>
 	);
 }

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -28,7 +28,7 @@ function LabelSelect({
 	onSetLabels,
 	initialValues,
 }: LabelSelectProps): JSX.Element | null {
-	const { t } = useTranslation('rules');
+	const { t } = useTranslation('alerts');
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [currentVal, setCurrentVal] = useState('');
 	const [staging, setStaging] = useState<string[]>([]);

frontend/src/container/FormAlertRules/styles.ts

@@ -1,11 +1,24 @@
-import { Button, Card, Form, Input, InputNumber, Select } from 'antd';
+import { Button, Card, Col, Form, Input, InputNumber, Row, Select } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import styled from 'styled-components';
 
-export const MainFormContainer = styled(Form)`
+export const PanelContainer = styled(Row)`
-	max-width: 900px;
+	flex-wrap: nowrap;
 `;
 
+export const StyledRightContainer = styled(Col)`
+	&&& {
+	}
+`;
+
+export const StyledLeftContainer = styled(Col)`
+	&&& {
+		margin-right: 1rem;
+	}
+`;
+
+export const MainFormContainer = styled(Form)``;
+
 export const ButtonContainer = styled.div`
 	&&& {
 		display: flex;

frontend/src/container/TraceDetail/SelectedSpanDetails/EllipsedButton.tsx

@@ -0,0 +1,53 @@
+import { StyledButton } from 'components/Styled';
+import React from 'react';
+
+import { styles } from './styles';
+
+function EllipsedButton({
+	onToggleHandler,
+	setText,
+	value,
+	event,
+	buttonText,
+}: Props): JSX.Element {
+	const isFullValueButton = buttonText === 'View full value';
+
+	const style = [styles.removePadding];
+
+	if (!isFullValueButton) {
+		style.push(styles.removeMargin);
+	} else {
+		style.push(styles.selectedSpanDetailsContainer);
+		style.push(styles.buttonContainer);
+	}
+
+	return (
+		<StyledButton
+			styledclass={style}
+			onClick={(): void => {
+				onToggleHandler(true);
+				setText({
+					subText: value,
+					text: event,
+				});
+			}}
+			type="link"
+		>
+			{buttonText}
+		</StyledButton>
+	);
+}
+
+interface Props {
+	onToggleHandler: (isOpen: boolean) => void;
+	setText: (text: { subText: string; text: string }) => void;
+	value: string;
+	event: string;
+	buttonText?: string;
+}
+
+EllipsedButton.defaultProps = {
+	buttonText: 'View full log event message',
+};
+
+export default EllipsedButton;

frontend/src/container/TraceDetail/SelectedSpanDetails/ErrorTag.tsx

@@ -1,29 +1,22 @@
-import { Collapse, Modal } from 'antd';
+import { Collapse } from 'antd';
-import Editor from 'components/Editor';
-import { StyledButton } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
 import keys from 'lodash-es/keys';
 import map from 'lodash-es/map';
-import React, { useState } from 'react';
+import React from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
-import { CustomSubText, CustomSubTitle, styles } from './styles';
+import EllipsedButton from './EllipsedButton';
+import { CustomSubText, CustomSubTitle } from './styles';
 
 const { Panel } = Collapse;
 
-function ErrorTag({ event }: ErrorTagProps): JSX.Element {
+function ErrorTag({
-	const [isOpen, setIsOpen] = useState(false);
+	event,
+	onToggleHandler,
+	setText,
+}: ErrorTagProps): JSX.Element {
 	const { isDarkMode } = useThemeMode();
 
-	const [text, setText] = useState({
-		text: '',
-		subText: '',
-	});
-
-	const onToggleHandler = (state: boolean): void => {
-		setIsOpen(state);
-	};
-
 	return (
 		<>
 			{map(event, ({ attributeMap, name }) => {
@@ -45,23 +38,23 @@ function ErrorTag({ event }: ErrorTagProps): JSX.Element {
 								return (
 									<>
 										<CustomSubTitle>{event}</CustomSubTitle>
-										<CustomSubText ellipsis={isEllipsed} isDarkMode={isDarkMode}>
+										<CustomSubText
+											ellipsis={{
+												rows: isEllipsed ? 1 : 0,
+											}}
+											isDarkMode={isDarkMode}
+										>
 											{value}
 											<br />
 											{isEllipsed && (
-												<StyledButton
+												<EllipsedButton
-													styledclass={[styles.removeMargin, styles.removePadding]}
+													{...{
-													onClick={(): void => {
+														event,
-														onToggleHandler(true);
+														onToggleHandler,
-														setText({
+														setText,
-															subText: value,
+														value,
-															text: event,
-														});
 													}}
-													type="link"
+												/>
-												>
-													View full log event message
-												</StyledButton>
 											)}
 										</CustomSubText>
 									</>
@@ -71,31 +64,14 @@ function ErrorTag({ event }: ErrorTagProps): JSX.Element {
 					</Collapse>
 				);
 			})}
-
-			<Modal
-				onCancel={(): void => onToggleHandler(false)}
-				title="Log Message"
-				visible={isOpen}
-				destroyOnClose
-				footer={[]}
-				width="70vw"
-			>
-				<CustomSubTitle>{text.text}</CustomSubTitle>
-
-				{text.text === 'exception.stacktrace' ? (
-					<Editor onChange={(): void => {}} readOnly value={text.subText} />
-				) : (
-					<CustomSubText ellipsis={false} isDarkMode={isDarkMode}>
-						{text.subText}
-					</CustomSubText>
-				)}
-			</Modal>
 		</>
 	);
 }
 
 interface ErrorTagProps {
 	event: ITraceTree['event'];
+	onToggleHandler: (isOpen: boolean) => void;
+	setText: (text: { subText: string; text: string }) => void;
 }
 
 export default ErrorTag;

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -1,9 +1,11 @@
-import { Tabs, Tooltip, Typography } from 'antd';
+import { Modal, Tabs, Tooltip, Typography } from 'antd';
+import Editor from 'components/Editor';
 import { StyledSpace } from 'components/Styled';
 import useThemeMode from 'hooks/useThemeMode';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ITraceTree } from 'types/api/trace/getTraceItem';
 
+import EllipsedButton from './EllipsedButton';
 import ErrorTag from './ErrorTag';
 import {
 	CardContainer,
@@ -12,6 +14,7 @@ import {
 	CustomText,
 	CustomTitle,
 	styles,
+	SubTextContainer,
 } from './styles';
 
 const { TabPane } = Tabs;
@@ -26,6 +29,17 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 		tree?.serviceName,
 	]);
 
+	const [isOpen, setIsOpen] = useState(false);
+
+	const [text, setText] = useState({
+		text: '',
+		subText: '',
+	});
+
+	const onToggleHandler = (state: boolean): void => {
+		setIsOpen(state);
+	};
+
 	if (!tree) {
 		return <div />;
 	}
@@ -52,18 +66,60 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				</Tooltip>
 			</StyledSpace>
 
+			<Modal
+				onCancel={(): void => onToggleHandler(false)}
+				title={text.text}
+				visible={isOpen}
+				destroyOnClose
+				footer={[]}
+				width="70vw"
+				centered
+			>
+				{text.text === 'exception.stacktrace' ? (
+					<Editor onChange={(): void => {}} readOnly value={text.subText} />
+				) : (
+					<CustomSubText ellipsis={false} isDarkMode={isDarkMode}>
+						{text.subText}
+					</CustomSubText>
+				)}
+			</Modal>
+
 			<Tabs defaultActiveKey="1">
 				<TabPane tab="Tags" key="1">
 					{tags.length !== 0 ? (
 						tags.map((tags) => {
+							const value = tags.key === 'error' ? 'true' : tags.value;
+							const isEllipsed = value.length > 24;
+
 							return (
 								<React.Fragment key={JSON.stringify(tags)}>
 									{tags.value && (
 										<>
 											<CustomSubTitle>{tags.key}</CustomSubTitle>
-											<CustomSubText isDarkMode={isDarkMode}>
+											<SubTextContainer isDarkMode={isDarkMode}>
-												{tags.key === 'error' ? 'true' : tags.value}
+												<Tooltip overlay={(): string => value}>
-											</CustomSubText>
+													<CustomSubText
+														ellipsis={{
+															rows: isEllipsed ? 1 : 0,
+														}}
+														isDarkMode={isDarkMode}
+													>
+														{value}
+													</CustomSubText>
+
+													{isEllipsed && (
+														<EllipsedButton
+															{...{
+																event: tags.key,
+																onToggleHandler,
+																setText,
+																value,
+																buttonText: 'View full value',
+															}}
+														/>
+													)}
+												</Tooltip>
+											</SubTextContainer>
 										</>
 									)}
 								</React.Fragment>
@@ -75,7 +131,11 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				</TabPane>
 				<TabPane tab="Events" key="2">
 					{tree.event && Object.keys(tree.event).length !== 0 ? (
-						<ErrorTag event={tree.event} />
+						<ErrorTag
+							onToggleHandler={onToggleHandler}
+							setText={setText}
+							event={tree.event}
+						/>
 					) : (
 						<Typography>No events data in selected span</Typography>
 					)}

frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts

@@ -18,7 +18,8 @@ export const CustomText = styled(Paragraph)`
 export const CustomSubTitle = styled(Title)`
 	&&& {
 		font-size: 14px;
-		margin-bottom: 8px;
+		margin-bottom: 0.1rem;
+		margin-top: 0.5rem;
 	}
 `;
 
@@ -26,13 +27,19 @@ interface CustomSubTextProps {
 	isDarkMode: boolean;
 }
 
+export const SubTextContainer = styled.div<CustomSubTextProps>`
+	&&& {
+		background: ${({ isDarkMode }): string => (isDarkMode ? '#444' : '#ddd')};
+	}
+`;
+
 export const CustomSubText = styled(Paragraph)<CustomSubTextProps>`
 	&&& {
 		background: ${({ isDarkMode }): string => (isDarkMode ? '#444' : '#ddd')};
 		font-size: 12px;
-		padding: 6px 8px;
+		padding: 4px 8px;
 		word-break: break-all;
-		margin-bottom: 16px;
+		margin-bottom: 0rem;
 	}
 `;
 
@@ -81,10 +88,15 @@ const overflow = css`
 	}
 `;
 
+const buttonContainer = css`
+	height: 1.5rem;
+`;
+
 export const styles = {
 	removeMargin,
 	removePadding,
 	selectedSpanDetailsContainer,
 	spanEventsTabsContainer,
 	overflow,
+	buttonContainer,
 };

frontend/yarn.lock

@@ -4093,6 +4093,11 @@ chartjs-adapter-date-fns@^2.0.0:
   resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
   integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
 
+chartjs-plugin-annotation@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-annotation/-/chartjs-plugin-annotation-1.4.0.tgz#4c84cec1ec838bc09712f3686237866e6c3f4798"
+  integrity sha512-OC0eGoVvdxTtGGi8mV3Dr+G1YmMhtYYQWqGMb2uWcgcnyiBslaRKPofKwAYWPbh7ABnmQNsNDQLIKPH+XiaZLA==
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"

pkg/query-service/tests/test-deploy/clickhouse-config.xml

@@ -22,7 +22,7 @@
 
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
-        <level>trace</level>
+        <level>information</level>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy

pkg/query-service/tests/test-deploy/docker-compose.yaml

@@ -59,7 +59,7 @@ services:
         condition: service_healthy
 
   otel-collector:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-config.yaml"]
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -74,7 +74,7 @@ services:
         condition: service_healthy
 
   otel-collector-metrics:
-    image: signoz/otelcontribcol:0.45.1-1.0
+    image: signoz/otelcontribcol:0.45.1-1.1
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml