style: removed unused css

### Summary

Fixes for `expected type 'bool', got unconvertible type 'string'` errors.

Signed-off-by: Prashant Shahi <prashant@signoz.io>

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

@@ -133,7 +133,7 @@ services:
   #     - ./data/clickhouse-3/:/var/lib/clickhouse/
 
   alertmanager:
-    image: signoz/alertmanager:0.23.5
+    image: signoz/alertmanager:0.23.7
     volumes:
       - ./data/alertmanager:/data
     command:
@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.55.0
+    image: signoz/query-service:0.56.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.55.0
+    image: signoz/frontend:0.56.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.102.10
+    image: signoz/signoz-otel-collector:0.102.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

deploy/docker-swarm/clickhouse-setup/otel-collector-config.yaml

@@ -131,8 +131,8 @@ processors:
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/signoz_traces
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
-    low_cardinal_exception_grouping: ${LOW_CARDINAL_EXCEPTION_GROUPING}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
     resource_to_telemetry_conversion:
@@ -142,7 +142,7 @@ exporters:
   # logging: {}
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
     use_new_schema: true
 extensions:

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

@@ -57,7 +57,7 @@ services:
 
   alertmanager:
     container_name: signoz-alertmanager
-    image: signoz/alertmanager:0.23.5
+    image: signoz/alertmanager:0.23.7
     volumes:
       - ./data/alertmanager:/data
     depends_on:
@@ -84,7 +84,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`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.102.10
+    image: signoz/signoz-otel-collector:0.102.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

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

@@ -147,7 +147,7 @@ services:
   #     - ./user_scripts:/var/lib/clickhouse/user_scripts/
 
   alertmanager:
-    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.5}
+    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.7}
     container_name: signoz-alertmanager
     volumes:
       - ./data/alertmanager:/data
@@ -162,7 +162,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:${DOCKER_TAG:-0.55.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.56.0}
     container_name: signoz-query-service
     command:
       [
@@ -201,7 +201,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.55.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.56.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -227,7 +227,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.10}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.12}
     container_name: signoz-otel-collector
     command:
       [

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

@@ -152,7 +152,7 @@ services:
   #     - ./user_scripts:/var/lib/clickhouse/user_scripts/
 
   alertmanager:
-    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.5}
+    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.7}
     container_name: signoz-alertmanager
     volumes:
       - ./data/alertmanager:/data
@@ -167,7 +167,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:${DOCKER_TAG:-0.55.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.56.0}
     container_name: signoz-query-service
     command:
       [
@@ -207,7 +207,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.55.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.56.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -233,7 +233,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.10}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.12}
     container_name: signoz-otel-collector
     command:
       [

deploy/docker/clickhouse-setup/otel-collector-config.yaml

@@ -142,8 +142,8 @@ extensions:
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/signoz_traces
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
-    low_cardinal_exception_grouping: ${LOW_CARDINAL_EXCEPTION_GROUPING}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
     resource_to_telemetry_conversion:
@@ -152,7 +152,7 @@ exporters:
     endpoint: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
     use_new_schema: true
   # logging: {}

ee/query-service/app/api/queryrange.go

@@ -53,7 +53,11 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 	if anomalyQueryExists {
 		// ensure all queries have metric data source, and there should be only one anomaly query
 		for _, query := range queryRangeParams.CompositeQuery.BuilderQueries {
-			if query.DataSource != v3.DataSourceMetrics {
+			// What is query.QueryName == query.Expression doing here?
+			// In the current implementation, the way to recognize if a query is a formula is by
+			// checking if the expression is the same as the query name. if the expression is different
+			// then it is a formula. otherwise, it is simple builder query.
+			if query.DataSource != v3.DataSourceMetrics && query.QueryName == query.Expression {
 				RespondError(w, &model.ApiError{Typ: model.ErrorBadData, Err: fmt.Errorf("all queries must have metric data source")}, nil)
 				return
 			}
@@ -100,6 +104,13 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 				anomaly.WithReader[*anomaly.HourlyProvider](aH.opts.DataConnector),
 				anomaly.WithFeatureLookup[*anomaly.HourlyProvider](aH.opts.FeatureFlags),
 			)
+		default:
+			provider = anomaly.NewDailyProvider(
+				anomaly.WithCache[*anomaly.DailyProvider](aH.opts.Cache),
+				anomaly.WithKeyGenerator[*anomaly.DailyProvider](queryBuilder.NewKeyGenerator()),
+				anomaly.WithReader[*anomaly.DailyProvider](aH.opts.DataConnector),
+				anomaly.WithFeatureLookup[*anomaly.DailyProvider](aH.opts.FeatureFlags),
+			)
 		}
 		anomalies, err := provider.GetAnomalies(r.Context(), &anomaly.GetAnomaliesRequest{Params: queryRangeParams})
 		if err != nil {

ee/query-service/model/plans.go

@@ -373,7 +373,7 @@ var EnterprisePlan = basemodel.FeatureSet{
 	},
 	basemodel.Feature{
 		Name:       basemodel.AnomalyDetection,
-		Active:     true,
+		Active:     false,
 		Usage:      0,
 		UsageLimit: -1,
 		Route:      "",

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

@@ -56,6 +56,7 @@
 	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
+	"option_above_below": "above/below",
 	"option_equal": "is equal to",
 	"option_notequal": "not equal to",
 	"button_query": "Query",
@@ -110,6 +111,8 @@
 	"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.",
+	"anomaly_based_alert": "Anomaly based Alert",
+	"anomaly_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-GB/rules.json

@@ -43,6 +43,7 @@
 	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
+	"option_above_below": "above/below",
 	"option_equal": "is equal to",
 	"option_notequal": "not equal to",
 	"button_query": "Query",

frontend/public/locales/en/alerts.json

@@ -13,9 +13,12 @@
 	"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",
+	"alert_form_step1": "Choose a detection method",
+	"alert_form_step2": "Define the metric",
+	"alert_form_step3": "Define Alert Conditions",
+	"alert_form_step4": "Alert Configuration",
+	"threshold_alert_desc": "An alert is triggered whenever a metric deviates from an expected threshold.",
+	"anomaly_detection_alert_desc": "An alert is triggered whenever a metric deviates from an expected pattern.",
 	"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",
@@ -35,6 +38,7 @@
 	"button_cancelchanges": "Cancel",
 	"button_discard": "Discard",
 	"text_condition1": "Send a notification when",
+	"text_condition1_anomaly": "Send notification when the observed value for",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
 	"option_1min": "1 min",
@@ -56,6 +60,7 @@
 	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
+	"option_above_below": "above/below",
 	"option_equal": "is equal to",
 	"option_notequal": "not equal to",
 	"button_query": "Query",
@@ -109,7 +114,9 @@
 	"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",
+	"anomaly_based_alert": "Anomaly based Alert",
 	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data.",
+	"anomaly_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/rules.json

@@ -43,6 +43,7 @@
 	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
+	"option_above_below": "above/below",
 	"option_equal": "is equal to",
 	"option_notequal": "not equal to",
 	"button_query": "Query",

frontend/src/AppRoutes/pageComponents.ts

@@ -224,3 +224,10 @@ export const MQDetailPage = Loadable(
 			/* webpackChunkName: "MQDetailPage" */ 'pages/MessagingQueues/MQDetailPage'
 		),
 );
+
+export const InfrastructureMonitoring = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "InfrastructureMonitoring" */ 'pages/InfrastructureMonitoring'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -15,6 +15,7 @@ import {
 	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,
+	InfrastructureMonitoring,
 	IngestionSettings,
 	InstalledIntegrations,
 	LicensePage,
@@ -383,6 +384,13 @@ const routes: AppRoutes[] = [
 		key: 'MESSAGING_QUEUES_DETAIL',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		exact: true,
+		component: InfrastructureMonitoring,
+		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/alerts/create.ts

@@ -7,6 +7,7 @@ const create = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	const response = await axios.post('/rules', {
 		...props.data,
+		version: 'v4',
 	});
 
 	return {

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -0,0 +1,75 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface HostListPayload {
+	filters: TagFilter;
+	groupBy: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface TimeSeriesValue {
+	timestamp: number;
+	value: string;
+}
+
+export interface TimeSeries {
+	labels: Record<string, string>;
+	labelsArray: Array<Record<string, string>>;
+	values: TimeSeriesValue[];
+}
+
+export interface HostData {
+	hostName: string;
+	active: boolean;
+	os: string;
+	cpu: number;
+	cpuTimeSeries: TimeSeries;
+	memory: number;
+	memoryTimeSeries: TimeSeries;
+	wait: number;
+	waitTimeSeries: TimeSeries;
+	load15: number;
+	load15TimeSeries: TimeSeries;
+}
+
+export interface HostListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: HostData[];
+		groups: null;
+		total: number;
+	};
+}
+
+export const getHostLists = async (
+	props: HostListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<HostListResponse> | ErrorResponse> => {
+	try {
+		const response = await ApiBaseInstance.post('/hosts/list', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+			params: props,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/infraMonitoring/getInfraAttributeValues.ts

@@ -0,0 +1,38 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IAttributeValuesResponse,
+	IGetAttributeValuesPayload,
+} from 'types/api/queryBuilder/getAttributesValues';
+
+export const getInfraAttributesValues = async ({
+	dataSource,
+	attributeKey,
+	filterAttributeKeyDataType,
+	tagType,
+	searchText,
+}: IGetAttributeValuesPayload): Promise<
+	SuccessResponse<IAttributeValuesResponse> | ErrorResponse
+> => {
+	try {
+		const response = await ApiBaseInstance.get(
+			`/hosts/attribute_values?${createQueryParams({
+				dataSource,
+				attributeKey,
+				searchText,
+			})}&filterAttributeKeyDataType=${filterAttributeKeyDataType}&tagType=${tagType}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/queryBuilder/getAttributeKeys.ts

@@ -1,4 +1,4 @@
-import { ApiV3Instance } from 'api';
+import { ApiBaseInstance, ApiV3Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
@@ -18,20 +18,25 @@ export const getAggregateKeys = async ({
 	dataSource,
 	aggregateAttribute,
 	tagType,
+	isInfraMonitoring,
 }: IGetAttributeKeysPayload): Promise<
 	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 > => {
 	try {
+		const endpoint = isInfraMonitoring
+			? `/hosts/attribute_keys?dataSource=metrics&searchText=${searchText || ''}`
+			: `/autocomplete/attribute_keys?${createQueryParams({
+					aggregateOperator,
+					searchText,
+					dataSource,
+					aggregateAttribute,
+			  })}&tagType=${tagType}`;
+
+		const apiInstance = isInfraMonitoring ? ApiBaseInstance : ApiV3Instance;
+
 		const response: AxiosResponse<{
 			data: IQueryAutocompleteResponse;
-		}> = await ApiV3Instance.get(
-			`/autocomplete/attribute_keys?${createQueryParams({
-				aggregateOperator,
-				searchText,
-				dataSource,
-				aggregateAttribute,
-			})}&tagType=${tagType}`,
-		);
+		}> = await apiInstance.get(endpoint);
 
 		const payload: BaseAutocompleteData[] =
 			response.data.data.attributeKeys?.map(({ id: _, ...item }) => ({

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -107,6 +107,7 @@ function DynamicColumnTable({
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
+							data-testid="additional-filters-button"
 						/>
 					</Dropdown>
 				)}

frontend/src/constants/alerts.ts

@@ -2,6 +2,7 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const ALERTS_DATA_SOURCE_MAP: Record<AlertTypes, DataSource> = {
+	[AlertTypes.ANOMALY_BASED_ALERT]: DataSource.METRICS,
 	[AlertTypes.METRICS_BASED_ALERT]: DataSource.METRICS,
 	[AlertTypes.LOGS_BASED_ALERT]: DataSource.LOGS,
 	[AlertTypes.TRACES_BASED_ALERT]: DataSource.TRACES,

frontend/src/constants/features.ts

@@ -22,4 +22,5 @@ export enum FeatureKeys {
 	GATEWAY = 'GATEWAY',
 	PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
 	QUERY_BUILDER_SEARCH_V2 = 'QUERY_BUILDER_SEARCH_V2',
+	ANOMALY_DETECTION = 'ANOMALY_DETECTION',
 }

frontend/src/constants/query.ts

@@ -36,4 +36,5 @@ export enum QueryParams {
 	topic = 'topic',
 	partition = 'partition',
 	selectedTimelineQuery = 'selectedTimelineQuery',
+	ruleType = 'ruleType',
 }

frontend/src/constants/queryFunctionOptions.ts

@@ -3,6 +3,10 @@ import { QueryFunctionsTypes } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 
 export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
+	{
+		value: QueryFunctionsTypes.ANOMALY,
+		label: 'Anomaly',
+	},
 	{
 		value: QueryFunctionsTypes.CUTOFF_MIN,
 		label: 'Cut Off Min',
@@ -67,6 +71,10 @@ export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
 		value: QueryFunctionsTypes.TIME_SHIFT,
 		label: 'Time Shift',
 	},
+	{
+		value: QueryFunctionsTypes.TIME_SHIFT,
+		label: 'Time Shift',
+	},
 ];
 
 export const logsQueryFunctionOptions: SelectOption<string, string>[] = [
@@ -80,10 +88,15 @@ interface QueryFunctionConfigType {
 		showInput: boolean;
 		inputType?: string;
 		placeholder?: string;
+		disabled?: boolean;
 	};
 }
 
 export const queryFunctionsTypesConfig: QueryFunctionConfigType = {
+	anomaly: {
+		showInput: false,
+		disabled: true,
+	},
 	cutOffMin: {
 		showInput: true,
 		inputType: 'text',

frontend/src/constants/reactQueryKeys.ts

@@ -18,4 +18,5 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
+	GET_HOST_LIST: 'GET_HOST_LIST',
 };

frontend/src/constants/routes.ts

@@ -58,6 +58,7 @@ const ROUTES = {
 	INTEGRATIONS: '/integrations',
 	MESSAGING_QUEUES: '/messaging-queues',
 	MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
+	INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
 } as const;
 
 export default ROUTES;

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.styles.scss

@@ -0,0 +1,110 @@
+.anomaly-alert-evaluation-view {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+	height: 100%;
+
+	.anomaly-alert-evaluation-view-chart-section {
+		height: 100%;
+		width: 100%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		&.has-multi-series-data {
+			width: calc(100% - 240px);
+		}
+
+		.anomaly-alert-evaluation-view-no-data-container {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.anomaly-alert-evaluation-view-series-selection {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 240px;
+		padding: 0px 8px;
+		height: 100%;
+
+		.anomaly-alert-evaluation-view-series-list {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			height: 100%;
+
+			.anomaly-alert-evaluation-view-series-list-search {
+				margin-bottom: 16px;
+			}
+
+			.anomaly-alert-evaluation-view-series-list-title {
+				margin-top: 12px;
+				font-size: 13px !important;
+				font-weight: 400;
+			}
+
+			.anomaly-alert-evaluation-view-series-list-items {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+				height: 100%;
+				overflow-y: auto;
+
+				.anomaly-alert-evaluation-view-series-list-item {
+					display: flex;
+					flex-direction: row;
+					gap: 8px;
+
+					cursor: pointer;
+				}
+
+				&::-webkit-scrollbar {
+					width: 0.1rem;
+				}
+				&::-webkit-scrollbar-corner {
+					background: transparent;
+				}
+				&::-webkit-scrollbar-thumb {
+					background: rgb(136, 136, 136);
+					border-radius: 0.625rem;
+				}
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+			}
+		}
+	}
+
+	.uplot {
+		.u-title {
+			text-align: center;
+			font-size: 18px;
+			font-weight: 400;
+			display: flex;
+			height: 40px;
+			font-size: 13px;
+			align-items: center;
+		}
+
+		.u-legend {
+			display: flex;
+			margin-top: 16px;
+
+			tbody {
+				width: 100%;
+
+				.u-series {
+					display: inline-flex;
+				}
+			}
+		}
+	}
+}

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -0,0 +1,315 @@
+import 'uplot/dist/uPlot.min.css';
+import './AnomalyAlertEvaluationView.styles.scss';
+
+import { Checkbox, Typography } from 'antd';
+import Search from 'antd/es/input/Search';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { useResizeObserver } from 'hooks/useDimensions';
+import getAxes from 'lib/uPlotLib/utils/getAxes';
+import { getUplotChartDataForAnomalyDetection } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getYAxisScaleForAnomalyDetection } from 'lib/uPlotLib/utils/getYAxisScale';
+import { LineChart } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import uPlot from 'uplot';
+
+function UplotChart({
+	data,
+	options,
+	chartRef,
+}: {
+	data: any;
+	options: any;
+	chartRef: any;
+}): JSX.Element {
+	const plotInstance = useRef(null);
+
+	useEffect(() => {
+		if (plotInstance.current) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			plotInstance.current.destroy();
+		}
+
+		if (data && data.length > 0) {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			// eslint-disable-next-line new-cap
+			plotInstance.current = new uPlot(options, data, chartRef.current);
+		}
+
+		return (): void => {
+			if (plotInstance.current) {
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				plotInstance.current.destroy();
+			}
+		};
+	}, [data, options, chartRef]);
+
+	return <div ref={chartRef} />;
+}
+
+function AnomalyAlertEvaluationView({
+	data,
+	yAxisUnit,
+}: {
+	data: any;
+	yAxisUnit: string;
+}): JSX.Element {
+	const { spline } = uPlot.paths;
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	const _spline = spline ? spline() : undefined;
+	const chartRef = useRef<HTMLDivElement>(null);
+	const isDarkMode = useIsDarkMode();
+	const [seriesData, setSeriesData] = useState<any>({});
+	const [selectedSeries, setSelectedSeries] = useState<string | null>(null);
+
+	const [filteredSeriesKeys, setFilteredSeriesKeys] = useState<string[]>([]);
+	const [allSeries, setAllSeries] = useState<string[]>([]);
+
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+
+	useEffect(() => {
+		const chartData = getUplotChartDataForAnomalyDetection(data);
+		setSeriesData(chartData);
+
+		setAllSeries(Object.keys(chartData));
+
+		setFilteredSeriesKeys(Object.keys(chartData));
+	}, [data]);
+
+	useEffect(() => {
+		const seriesKeys = Object.keys(seriesData);
+		if (seriesKeys.length === 1) {
+			setSelectedSeries(seriesKeys[0]); // Automatically select if only one series
+		} else {
+			setSelectedSeries(null); // Default to "Show All" if multiple series
+		}
+	}, [seriesData]);
+
+	const handleSeriesChange = (series: string | null): void => {
+		setSelectedSeries(series);
+	};
+
+	const bandsPlugin = {
+		hooks: {
+			draw: [
+				(u: any): void => {
+					if (!selectedSeries) return;
+
+					const { ctx } = u;
+					const upperBandIdx = 3;
+					const lowerBandIdx = 4;
+
+					const xData = u.data[0];
+					const yUpperData = u.data[upperBandIdx];
+					const yLowerData = u.data[lowerBandIdx];
+
+					const strokeStyle =
+						u.series[1]?.stroke || seriesData[selectedSeries].color;
+					const fillStyle =
+						typeof strokeStyle === 'string'
+							? strokeStyle.replace(')', ', 0.1)')
+							: 'rgba(255, 255, 255, 0.1)';
+
+					ctx.beginPath();
+					const firstX = u.valToPos(xData[0], 'x', true);
+					const firstUpperY = u.valToPos(yUpperData[0], 'y', true);
+					ctx.moveTo(firstX, firstUpperY);
+
+					for (let i = 0; i < xData.length; i++) {
+						const x = u.valToPos(xData[i], 'x', true);
+						const y = u.valToPos(yUpperData[i], 'y', true);
+						ctx.lineTo(x, y);
+					}
+
+					for (let i = xData.length - 1; i >= 0; i--) {
+						const x = u.valToPos(xData[i], 'x', true);
+						const y = u.valToPos(yLowerData[i], 'y', true);
+						ctx.lineTo(x, y);
+					}
+
+					ctx.closePath();
+					ctx.fillStyle = fillStyle;
+					ctx.fill();
+				},
+			],
+		},
+	};
+
+	const initialData = allSeries.length
+		? [
+				seriesData[allSeries[0]].data[0], // Shared X-axis
+				...allSeries.map((key) => seriesData[key].data[1]), // Map through Y-axis data for all series
+		  ]
+		: [];
+
+	const options = {
+		width: dimensions.width,
+		height: dimensions.height - 36,
+		plugins: [bandsPlugin],
+		focus: {
+			alpha: 0.3,
+		},
+		series: [
+			{
+				label: 'Time',
+			},
+			...(selectedSeries
+				? [
+						{
+							label: `Main Series`,
+							stroke: seriesData[selectedSeries].color,
+							width: 2,
+							show: true,
+							paths: _spline,
+						},
+						{
+							label: `Predicted Value`,
+							stroke: seriesData[selectedSeries].color,
+							width: 1,
+							dash: [2, 2],
+							show: true,
+							paths: _spline,
+						},
+						{
+							label: `Upper Band`,
+							stroke: 'transparent',
+							show: false,
+							paths: _spline,
+						},
+						{
+							label: `Lower Band`,
+							stroke: 'transparent',
+							show: false,
+							paths: _spline,
+						},
+				  ]
+				: allSeries.map((seriesKey) => ({
+						label: seriesKey,
+						stroke: seriesData[seriesKey].color,
+						width: 2,
+						show: true,
+						paths: _spline,
+				  }))),
+		],
+		scales: {
+			x: {
+				time: true,
+			},
+			y: {
+				...getYAxisScaleForAnomalyDetection({
+					seriesData,
+					selectedSeries,
+					initialData,
+					yAxisUnit,
+				}),
+			},
+		},
+		grid: {
+			show: true,
+		},
+		legend: {
+			show: true,
+		},
+		axes: getAxes(isDarkMode, yAxisUnit),
+	};
+
+	const handleSearch = (searchText: string): void => {
+		if (!searchText || searchText.length === 0) {
+			setFilteredSeriesKeys(allSeries);
+			return;
+		}
+
+		const filteredSeries = allSeries.filter((series) =>
+			series.toLowerCase().includes(searchText.toLowerCase()),
+		);
+
+		setFilteredSeriesKeys(filteredSeries);
+	};
+
+	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const value = event?.target?.value || '';
+
+		handleSearch(value);
+	}, 300);
+
+	return (
+		<div className="anomaly-alert-evaluation-view">
+			<div
+				className={`anomaly-alert-evaluation-view-chart-section ${
+					allSeries.length > 1 ? 'has-multi-series-data' : ''
+				}`}
+				ref={graphRef}
+			>
+				{allSeries.length > 0 ? (
+					<UplotChart
+						data={selectedSeries ? seriesData[selectedSeries].data : initialData}
+						options={options}
+						chartRef={chartRef}
+					/>
+				) : (
+					<div className="anomaly-alert-evaluation-view-no-data-container">
+						<LineChart size={48} strokeWidth={0.5} />
+
+						<Typography>No Data</Typography>
+					</div>
+				)}
+			</div>
+
+			{allSeries.length > 1 && (
+				<div className="anomaly-alert-evaluation-view-series-selection">
+					{allSeries.length > 1 && (
+						<div className="anomaly-alert-evaluation-view-series-list">
+							<Search
+								className="anomaly-alert-evaluation-view-series-list-search"
+								placeholder="Search a series"
+								allowClear
+								onChange={handleSearchValueChange}
+							/>
+
+							<div className="anomaly-alert-evaluation-view-series-list-items">
+								{filteredSeriesKeys.length > 0 && (
+									<Checkbox
+										className="anomaly-alert-evaluation-view-series-list-item"
+										type="checkbox"
+										name="series"
+										value="all"
+										checked={selectedSeries === null}
+										onChange={(): void => handleSeriesChange(null)}
+									>
+										Show All
+									</Checkbox>
+								)}
+
+								{filteredSeriesKeys.map((seriesKey) => (
+									<Checkbox
+										className="anomaly-alert-evaluation-view-series-list-item"
+										key={seriesKey}
+										type="checkbox"
+										name="series"
+										value={seriesKey}
+										checked={selectedSeries === seriesKey}
+										onChange={(): void => handleSeriesChange(seriesKey)}
+									>
+										{seriesKey}
+									</Checkbox>
+								))}
+
+								{filteredSeriesKeys.length === 0 && (
+									<Typography>No series found</Typography>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default AnomalyAlertEvaluationView;

frontend/src/container/AnomalyAlertEvaluationView/index.tsx

@@ -0,0 +1,3 @@
+import AnomalyAlertEvaluationView from './AnomalyAlertEvaluationView';
+
+export default AnomalyAlertEvaluationView;

frontend/src/container/CreateAlertRule/SelectAlertType/config.ts

@@ -3,25 +3,41 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { OptionType } from './types';
 
-export const getOptionList = (t: TFunction): OptionType[] => [
-	{
-		title: t('metric_based_alert'),
-		selection: AlertTypes.METRICS_BASED_ALERT,
-		description: t('metric_based_alert_desc'),
-	},
-	{
-		title: t('log_based_alert'),
-		selection: AlertTypes.LOGS_BASED_ALERT,
-		description: t('log_based_alert_desc'),
-	},
-	{
-		title: t('traces_based_alert'),
-		selection: AlertTypes.TRACES_BASED_ALERT,
-		description: t('traces_based_alert_desc'),
-	},
-	{
-		title: t('exceptions_based_alert'),
-		selection: AlertTypes.EXCEPTIONS_BASED_ALERT,
-		description: t('exceptions_based_alert_desc'),
-	},
-];
+export const getOptionList = (
+	t: TFunction,
+	isAnomalyDetectionEnabled: boolean,
+): OptionType[] => {
+	const optionList: OptionType[] = [
+		{
+			title: t('metric_based_alert'),
+			selection: AlertTypes.METRICS_BASED_ALERT,
+			description: t('metric_based_alert_desc'),
+		},
+		{
+			title: t('log_based_alert'),
+			selection: AlertTypes.LOGS_BASED_ALERT,
+			description: t('log_based_alert_desc'),
+		},
+		{
+			title: t('traces_based_alert'),
+			selection: AlertTypes.TRACES_BASED_ALERT,
+			description: t('traces_based_alert_desc'),
+		},
+		{
+			title: t('exceptions_based_alert'),
+			selection: AlertTypes.EXCEPTIONS_BASED_ALERT,
+			description: t('exceptions_based_alert_desc'),
+		},
+	];
+
+	if (isAnomalyDetectionEnabled) {
+		optionList.unshift({
+			title: t('anomaly_based_alert'),
+			selection: AlertTypes.ANOMALY_BASED_ALERT,
+			description: t('anomaly_based_alert_desc'),
+			isBeta: true,
+		});
+	}
+
+	return optionList;
+};

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,6 +1,8 @@
-import { Row, Typography } from 'antd';
+import { Row, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
+import { FeatureKeys } from 'constants/features';
+import useFeatureFlags from 'hooks/useFeatureFlag';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -12,11 +14,18 @@ import { OptionType } from './types';
 function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 	const { t } = useTranslation(['alerts']);
 
-	const optionList = getOptionList(t);
+	const isAnomalyDetectionEnabled =
+		useFeatureFlags(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+
+	const optionList = getOptionList(t, isAnomalyDetectionEnabled);
 
 	function handleRedirection(option: AlertTypes): void {
 		let url = '';
 		switch (option) {
+			case AlertTypes.ANOMALY_BASED_ALERT:
+				url =
+					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				break;
 			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';
@@ -52,6 +61,13 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
+						extra={
+							option.isBeta ? (
+								<Tag bordered={false} color="geekblue">
+									Beta
+								</Tag>
+							) : undefined
+						}
 						onClick={(): void => {
 							onSelect(option.selection);
 						}}

frontend/src/container/CreateAlertRule/SelectAlertType/types.ts

@@ -4,4 +4,5 @@ export interface OptionType {
 	title: string;
 	selection: AlertTypes;
 	description: string;
+	isBeta?: boolean;
 }

frontend/src/container/CreateAlertRule/defaults.ts

@@ -7,9 +7,11 @@ import {
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import {
 	AlertDef,
+	defaultAlgorithm,
 	defaultCompareOp,
 	defaultEvalWindow,
 	defaultMatchType,
+	defaultSeasonality,
 } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -46,6 +48,8 @@ export const alertDefaults: AlertDef = {
 		},
 		op: defaultCompareOp,
 		matchType: defaultMatchType,
+		algorithm: defaultAlgorithm,
+		seasonality: defaultSeasonality,
 	},
 	labels: {
 		severity: 'warning',
@@ -145,6 +149,7 @@ export const exceptionAlertDefaults: AlertDef = {
 };
 
 export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
+	[AlertTypes.ANOMALY_BASED_ALERT]: alertDefaults,
 	[AlertTypes.METRICS_BASED_ALERT]: alertDefaults,
 	[AlertTypes.LOGS_BASED_ALERT]: logAlertDefaults,
 	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,

frontend/src/container/CreateAlertRule/index.tsx

@@ -2,7 +2,7 @@ import { Form, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import FormAlertRules from 'container/FormAlertRules';
+import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import history from 'lib/history';
 import { useEffect, useState } from 'react';
@@ -45,6 +45,7 @@ function CreateRules(): JSX.Element {
 
 	const onSelectType = (typ: AlertTypes): void => {
 		setAlertType(typ);
+
 		switch (typ) {
 			case AlertTypes.LOGS_BASED_ALERT:
 				setInitValues(logAlertDefaults);
@@ -55,13 +56,37 @@ function CreateRules(): JSX.Element {
 			case AlertTypes.EXCEPTIONS_BASED_ALERT:
 				setInitValues(exceptionAlertDefaults);
 				break;
+			case AlertTypes.ANOMALY_BASED_ALERT:
+				setInitValues({
+					...alertDefaults,
+					version: version || ENTITY_VERSION_V4,
+					ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+				});
+				break;
 			default:
 				setInitValues({
 					...alertDefaults,
 					version: version || ENTITY_VERSION_V4,
+					ruleType: AlertDetectionTypes.THRESHOLD_ALERT,
 				});
 		}
-		queryParams.set(QueryParams.alertType, typ);
+
+		queryParams.set(
+			QueryParams.alertType,
+			typ === AlertTypes.ANOMALY_BASED_ALERT
+				? AlertTypes.METRICS_BASED_ALERT
+				: typ,
+		);
+
+		if (typ === AlertTypes.ANOMALY_BASED_ALERT) {
+			queryParams.set(
+				QueryParams.ruleType,
+				AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+			);
+		} else {
+			queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
+		}
+
 		const generatedUrl = `${location.pathname}?${queryParams.toString()}`;
 		history.replace(generatedUrl);
 	};

frontend/src/container/EditRules/index.tsx

@@ -7,18 +7,16 @@ function EditRules({ initialValue, ruleId }: EditRulesProps): JSX.Element {
 	const [formInstance] = Form.useForm();
 
 	return (
-		<div style={{ marginTop: '1rem' }}>
-			<FormAlertRules
-				alertType={
-					initialValue.alertType
-						? (initialValue.alertType as AlertTypes)
-						: AlertTypes.METRICS_BASED_ALERT
-				}
-				formInstance={formInstance}
-				initialValue={initialValue}
-				ruleId={ruleId}
-			/>
-		</div>
+		<FormAlertRules
+			alertType={
+				initialValue.alertType
+					? (initialValue.alertType as AlertTypes)
+					: AlertTypes.METRICS_BASED_ALERT
+			}
+			formInstance={formInstance}
+			initialValue={initialValue}
+			ruleId={ruleId}
+		/>
 	);
 }
 

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -96,7 +96,7 @@ function BasicInfo({
 
 	return (
 		<>
-			<StepHeading> {t('alert_form_step3')} </StepHeading>
+			<StepHeading> {t('alert_form_step4')} </StepHeading>
 			<FormContainer>
 				<Form.Item
 					label={t('field_severity')}

frontend/src/container/FormAlertRules/ChartPreview/ChartPreview.styles.scss

@@ -0,0 +1,26 @@
+.alert-chart-container {
+	height: 57vh;
+	width: 100%;
+
+	.threshold-alert-uplot-chart-container {
+		height: calc(100% - 24px);
+	}
+
+	.ant-card-body {
+		padding: 12px;
+	}
+
+	.anomaly-alert-evaluation-view-loading-container {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.anomaly-alert-evaluation-view-error-container {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

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

@@ -1,8 +1,12 @@
+import './ChartPreview.styles.scss';
+
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Spinner from 'components/Spinner';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
@@ -14,6 +18,7 @@ import {
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import useFeatureFlags from 'hooks/useFeatureFlag';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
@@ -34,6 +39,7 @@ import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
+import { AlertDetectionTypes } from '..';
 import { ChartContainer, FailedMessageContainer } from './styles';
 import { getThresholdLabel } from './utils';
 
@@ -141,6 +147,7 @@ function ChartPreview({
 				selectedInterval,
 				minTime,
 				maxTime,
+				alertDef?.ruleType,
 			],
 			retry: false,
 			enabled: canQuery,
@@ -163,8 +170,6 @@ function ChartPreview({
 		queryResponse.data.payload.data.result = sortedSeriesData;
 	}
 
-	const chartData = getUPlotChartData(queryResponse?.data?.payload);
-
 	const containerDimensions = useResizeObserver(graphRef);
 
 	const isDarkMode = useIsDarkMode();
@@ -202,7 +207,10 @@ function ChartPreview({
 				id: 'alert_legend_widget',
 				yAxisUnit,
 				apiResponse: queryResponse?.data?.payload,
-				dimensions: containerDimensions,
+				dimensions: {
+					height: containerDimensions?.height ? containerDimensions.height - 48 : 0,
+					width: containerDimensions?.width,
+				},
 				minTimeScale,
 				maxTimeScale,
 				isDarkMode,
@@ -245,36 +253,59 @@ function ChartPreview({
 		],
 	);
 
+	const chartData = getUPlotChartData(queryResponse?.data?.payload);
+
+	const isAnomalyDetectionAlert =
+		alertDef?.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
+
+	const chartDataAvailable =
+		chartData && !queryResponse.isError && !queryResponse.isLoading;
+
+	const isAnomalyDetectionEnabled =
+		useFeatureFlags(FeatureKeys.ANOMALY_DETECTION)?.active || false;
+
 	return (
-		<ChartContainer>
-			{headline}
+		<div className="alert-chart-container" ref={graphRef}>
+			<ChartContainer>
+				{headline}
 
-			<div ref={graphRef} style={{ height: '100%' }}>
-				{queryResponse.isLoading && (
-					<Spinner size="large" tip="Loading..." height="100%" />
-				)}
-				{(queryResponse?.isError || queryResponse?.error) && (
-					<FailedMessageContainer color="red" title="Failed to refresh the chart">
-						<InfoCircleOutlined />{' '}
-						{queryResponse.error.message || t('preview_chart_unexpected_error')}
-					</FailedMessageContainer>
-				)}
+				<div className="threshold-alert-uplot-chart-container">
+					{queryResponse.isLoading && (
+						<Spinner size="large" tip="Loading..." height="100%" />
+					)}
+					{(queryResponse?.isError || queryResponse?.error) && (
+						<FailedMessageContainer color="red" title="Failed to refresh the chart">
+							<InfoCircleOutlined />
+							{queryResponse.error.message || t('preview_chart_unexpected_error')}
+						</FailedMessageContainer>
+					)}
 
-				{chartData && !queryResponse.isError && !queryResponse.isLoading && (
-					<GridPanelSwitch
-						options={options}
-						panelType={graphType}
-						data={chartData}
-						name={name || 'Chart Preview'}
-						panelData={
-							queryResponse.data?.payload?.data?.newResult?.data?.result || []
-						}
-						query={query || initialQueriesMap.metrics}
-						yAxisUnit={yAxisUnit}
-					/>
-				)}
-			</div>
-		</ChartContainer>
+					{chartDataAvailable && !isAnomalyDetectionAlert && (
+						<GridPanelSwitch
+							options={options}
+							panelType={graphType}
+							data={chartData}
+							name={name || 'Chart Preview'}
+							panelData={
+								queryResponse.data?.payload?.data?.newResult?.data?.result || []
+							}
+							query={query || initialQueriesMap.metrics}
+							yAxisUnit={yAxisUnit}
+						/>
+					)}
+
+					{chartDataAvailable &&
+						isAnomalyDetectionAlert &&
+						isAnomalyDetectionEnabled &&
+						queryResponse?.data?.payload?.data?.resultType === 'anomaly' && (
+							<AnomalyAlertEvaluationView
+								data={queryResponse?.data?.payload}
+								yAxisUnit={yAxisUnit}
+							/>
+						)}
+				</div>
+			</ChartContainer>
+		</div>
 	);
 }
 

frontend/src/container/FormAlertRules/FormAlertRules.styles.scss

@@ -21,6 +21,70 @@
 	}
 }
 
+.steps-container {
+	width: 80%;
+}
+
+.qb-chart-preview-container {
+	margin-bottom: 1rem;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+}
+
+.overview-header {
+	margin-bottom: 1rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.alert-type-container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+
+		.alert-type-title {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.ant-typography {
+			margin: 0;
+		}
+	}
+}
+
+.chart-preview-container {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	gap: 1rem;
+
+	.ant-card {
+		flex: 1;
+	}
+}
+
+.detection-method-container {
+	margin: 24px 0;
+
+	.ant-tabs-nav {
+		margin-bottom: 0;
+
+		.ant-tabs-tab {
+			padding: 12px 0;
+		}
+	}
+
+	.detection-method-description {
+		padding: 8px 0;
+		font-size: 12px;
+	}
+}
+
 .info-help-btns {
 	display: grid;
 	grid-template-columns: auto auto;

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -222,7 +222,7 @@ function QuerySection({
 	};
 	return (
 		<>
-			<StepHeading> {t('alert_form_step1')}</StepHeading>
+			<StepHeading> {t('alert_form_step2')}</StepHeading>
 			<FormContainer>
 				<div>{renderTabs(alertType)}</div>
 				{renderQuerySection(currentTab)}

frontend/src/container/FormAlertRules/RuleOptions.styles.scss

@@ -0,0 +1,6 @@
+.rule-definition {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+}

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -1,3 +1,5 @@
+import './RuleOptions.styles.scss';
+
 import {
 	Checkbox,
 	Collapse,
@@ -18,14 +20,17 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useTranslation } from 'react-i18next';
 import {
 	AlertDef,
+	defaultAlgorithm,
 	defaultCompareOp,
 	defaultEvalWindow,
 	defaultFrequency,
 	defaultMatchType,
+	defaultSeasonality,
 } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { AlertDetectionTypes } from '.';
 import {
 	FormContainer,
 	InlineSelect,
@@ -43,6 +48,8 @@ function RuleOptions({
 	const { t } = useTranslation('alerts');
 	const { currentQuery } = useQueryBuilder();
 
+	const { ruleType } = alertDef;
+
 	const handleMatchOptChange = (value: string | unknown): void => {
 		const m = (value as string) || alertDef.condition?.matchType;
 		setAlertDef({
@@ -86,8 +93,19 @@ function RuleOptions({
 		>
 			<Select.Option value="1">{t('option_above')}</Select.Option>
 			<Select.Option value="2">{t('option_below')}</Select.Option>
-			<Select.Option value="3">{t('option_equal')}</Select.Option>
-			<Select.Option value="4">{t('option_notequal')}</Select.Option>
+
+			{/* hide equal and not eqaul in case of analmoy based alert */}
+
+			{ruleType !== 'anomaly_rule' && (
+				<>
+					<Select.Option value="3">{t('option_equal')}</Select.Option>
+					<Select.Option value="4">{t('option_notequal')}</Select.Option>
+				</>
+			)}
+
+			{ruleType === 'anomaly_rule' && (
+				<Select.Option value="5">{t('option_above_below')}</Select.Option>
+			)}
 		</InlineSelect>
 	);
 
@@ -101,9 +119,14 @@ function RuleOptions({
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
 			<Select.Option value="2">{t('option_allthetimes')}</Select.Option>
-			<Select.Option value="3">{t('option_onaverage')}</Select.Option>
-			<Select.Option value="4">{t('option_intotal')}</Select.Option>
-			<Select.Option value="5">{t('option_last')}</Select.Option>
+
+			{ruleType !== 'anomaly_rule' && (
+				<>
+					<Select.Option value="3">{t('option_onaverage')}</Select.Option>
+					<Select.Option value="4">{t('option_intotal')}</Select.Option>
+					<Select.Option value="5">{t('option_last')}</Select.Option>
+				</>
+			)}
 		</InlineSelect>
 	);
 
@@ -115,6 +138,28 @@ function RuleOptions({
 		});
 	};
 
+	const onChangeAlgorithm = (value: string | unknown): void => {
+		const alg = (value as string) || alertDef.condition.algorithm;
+		setAlertDef({
+			...alertDef,
+			condition: {
+				...alertDef.condition,
+				algorithm: alg,
+			},
+		});
+	};
+
+	const onChangeSeasonality = (value: string | unknown): void => {
+		const seasonality = (value as string) || alertDef.condition.seasonality;
+		setAlertDef({
+			...alertDef,
+			condition: {
+				...alertDef.condition,
+				seasonality,
+			},
+		});
+	};
+
 	const renderEvalWindows = (): JSX.Element => (
 		<InlineSelect
 			getPopupContainer={popupContainer}
@@ -146,6 +191,32 @@ function RuleOptions({
 		</InlineSelect>
 	);
 
+	const renderAlgorithms = (): JSX.Element => (
+		<InlineSelect
+			getPopupContainer={popupContainer}
+			defaultValue={defaultAlgorithm}
+			style={{ minWidth: '120px' }}
+			value={alertDef.condition.algorithm}
+			onChange={onChangeAlgorithm}
+		>
+			<Select.Option value="standard">Standard</Select.Option>
+		</InlineSelect>
+	);
+
+	const renderSeasonality = (): JSX.Element => (
+		<InlineSelect
+			getPopupContainer={popupContainer}
+			defaultValue={defaultSeasonality}
+			style={{ minWidth: '120px' }}
+			value={alertDef.condition.seasonality}
+			onChange={onChangeSeasonality}
+		>
+			<Select.Option value="hourly">Hourly</Select.Option>
+			<Select.Option value="daily">Daily</Select.Option>
+			<Select.Option value="weekly">Weekly</Select.Option>
+		</InlineSelect>
+	);
+
 	const renderThresholdRuleOpts = (): JSX.Element => (
 		<Form.Item>
 			<Typography.Text>
@@ -166,6 +237,39 @@ function RuleOptions({
 		</Form.Item>
 	);
 
+	const renderAnomalyRuleOpts = (
+		onChange: InputNumberProps['onChange'],
+	): JSX.Element => (
+		<Form.Item>
+			<Typography.Text className="rule-definition">
+				{t('text_condition1_anomaly')}
+				<InlineSelect
+					getPopupContainer={popupContainer}
+					allowClear
+					showSearch
+					options={queryOptions}
+					placeholder={t('selected_query_placeholder')}
+					value={alertDef.condition.selectedQueryName}
+					onChange={onChangeSelectedQueryName}
+				/>
+				{t('text_condition3')} {renderEvalWindows()}
+				<Typography.Text>is</Typography.Text>
+				<InputNumber
+					value={alertDef?.condition?.target}
+					onChange={onChange}
+					type="number"
+					onWheel={(e): void => e.currentTarget.blur()}
+				/>
+				<Typography.Text>deviations</Typography.Text>
+				{renderCompareOps()}
+				<Typography.Text>the predicted data</Typography.Text>
+				{renderMatchOpts()}
+				using the {renderAlgorithms()} algorithm with {renderSeasonality()}{' '}
+				seasonality
+			</Typography.Text>
+		</Form.Item>
+	);
+
 	const renderPromRuleOptions = (): JSX.Element => (
 		<Form.Item>
 			<Typography.Text>
@@ -245,36 +349,46 @@ function RuleOptions({
 
 	return (
 		<>
-			<StepHeading>{t('alert_form_step2')}</StepHeading>
+			<StepHeading>{t('alert_form_step3')}</StepHeading>
 			<FormContainer>
-				{queryCategory === EQueryType.PROM
-					? renderPromRuleOptions()
-					: renderThresholdRuleOpts()}
+				{queryCategory === EQueryType.PROM && renderPromRuleOptions()}
+				{queryCategory !== EQueryType.PROM &&
+					ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT && (
+						<>{renderAnomalyRuleOpts(onChange)}</>
+					)}
+
+				{queryCategory !== EQueryType.PROM &&
+					ruleType === AlertDetectionTypes.THRESHOLD_ALERT &&
+					renderThresholdRuleOpts()}
 
 				<Space direction="vertical" size="large">
-					<Space direction="horizontal" align="center">
-						<Form.Item noStyle name={['condition', 'target']}>
-							<InputNumber
-								addonBefore={t('field_threshold')}
-								value={alertDef?.condition?.target}
-								onChange={onChange}
-								type="number"
-								onWheel={(e): void => e.currentTarget.blur()}
-							/>
-						</Form.Item>
+					{queryCategory !== EQueryType.PROM &&
+						ruleType !== AlertDetectionTypes.ANOMALY_DETECTION_ALERT && (
+							<Space direction="horizontal" align="center">
+								<Form.Item noStyle name={['condition', 'target']}>
+									<InputNumber
+										addonBefore={t('field_threshold')}
+										value={alertDef?.condition?.target}
+										onChange={onChange}
+										type="number"
+										onWheel={(e): void => e.currentTarget.blur()}
+									/>
+								</Form.Item>
+
+								<Form.Item noStyle>
+									<Select
+										getPopupContainer={popupContainer}
+										allowClear
+										showSearch
+										options={categorySelectOptions}
+										placeholder={t('field_unit')}
+										value={alertDef.condition.targetUnit}
+										onChange={onChangeAlertUnit}
+									/>
+								</Form.Item>
+							</Space>
+						)}
 
-						<Form.Item noStyle>
-							<Select
-								getPopupContainer={popupContainer}
-								allowClear
-								showSearch
-								options={categorySelectOptions}
-								placeholder={t('field_unit')}
-								value={alertDef.condition.targetUnit}
-								onChange={onChangeAlertUnit}
-							/>
-						</Form.Item>
-					</Space>
 					<Collapse>
 						<Collapse.Panel header={t('More options')} key="1">
 							<Space direction="vertical" size="large">

frontend/src/container/FormAlertRules/index.tsx

@@ -3,7 +3,6 @@ import './FormAlertRules.styles.scss';
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
 import {
 	Button,
-	Col,
 	FormInstance,
 	Modal,
 	SelectProps,
@@ -13,8 +12,6 @@ import {
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import logEvent from 'api/common/logEvent';
-import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
-import { alertHelpMessage } from 'components/LaunchChatSupport/util';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
@@ -26,13 +23,18 @@ import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
 import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag';
+import useFeatureFlag, {
+	MESSAGE,
+	useIsFeatureDisabled,
+} from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEqual } from 'lodash-es';
+import { BellDot, ExternalLink } from 'lucide-react';
+import Tabs2 from 'periscope/components/Tabs2';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
@@ -44,7 +46,11 @@ import {
 	defaultEvalWindow,
 	defaultMatchType,
 } from 'types/api/alerts/def';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	Query,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -56,13 +62,16 @@ import {
 	ActionButton,
 	ButtonContainer,
 	MainFormContainer,
-	PanelContainer,
 	StepContainer,
-	StyledLeftContainer,
+	StepHeading,
 } from './styles';
-import UserGuide from './UserGuide';
 import { getSelectedQueryOptions } from './utils';
 
+export enum AlertDetectionTypes {
+	THRESHOLD_ALERT = 'threshold_rule',
+	ANOMALY_DETECTION_ALERT = 'anomaly_rule',
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function FormAlertRules({
 	alertType,
@@ -86,6 +95,7 @@ function FormAlertRules({
 	const {
 		currentQuery,
 		stagedQuery,
+		handleSetQueryData,
 		handleRunQuery,
 		handleSetConfig,
 		initialDataSource,
@@ -108,6 +118,12 @@ function FormAlertRules({
 	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
 	const [yAxisUnit, setYAxisUnit] = useState<string>(currentQuery.unit || '');
 
+	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);
+
+	const [detectionMethod, setDetectionMethod] = useState<string>(
+		AlertDetectionTypes.THRESHOLD_ALERT,
+	);
+
 	useEffect(() => {
 		if (!isEqual(currentQuery.unit, yAxisUnit)) {
 			setYAxisUnit(currentQuery.unit || '');
@@ -138,6 +154,45 @@ function FormAlertRules({
 
 	useShareBuilderUrl(sq);
 
+	const updateFunctions = (data: IBuilderQuery): QueryFunctionProps[] => {
+		const anomalyFunction = {
+			name: 'anomaly',
+			args: [],
+			namedArgs: { z_score_threshold: 9 },
+		};
+		const functions = data.functions || [];
+
+		if (alertDef.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
+			// Add anomaly if not already present
+			if (!functions.some((func) => func.name === 'anomaly')) {
+				functions.push(anomalyFunction);
+			}
+		} else {
+			// Remove anomaly if present
+			const index = functions.findIndex((func) => func.name === 'anomaly');
+			if (index !== -1) {
+				functions.splice(index, 1);
+			}
+		}
+
+		return functions;
+	};
+
+	const updateFunctionsBasedOnAlertType = (): void => {
+		for (let index = 0; index < currentQuery.builder.queryData.length; index++) {
+			const queryData = currentQuery.builder.queryData[index];
+
+			const updatedFunctions = updateFunctions(queryData);
+			queryData.functions = updatedFunctions;
+			handleSetQueryData(index, queryData);
+		}
+	};
+
+	useEffect(() => {
+		updateFunctionsBasedOnAlertType();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [detectionMethod, alertDef, currentQuery.builder.queryData.length]);
+
 	useEffect(() => {
 		const broadcastToSpecificChannels =
 			(initialValue &&
@@ -145,11 +200,22 @@ function FormAlertRules({
 				initialValue.preferredChannels.length > 0) ||
 			isNewRule;
 
+		let ruleType = AlertDetectionTypes.THRESHOLD_ALERT;
+
+		if (initialValue.ruleType) {
+			ruleType = initialValue.ruleType as AlertDetectionTypes;
+		} else if (alertTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
+			ruleType = AlertDetectionTypes.ANOMALY_DETECTION_ALERT;
+		}
+
 		setAlertDef({
 			...initialValue,
 			broadcastToAll: !broadcastToSpecificChannels,
+			ruleType,
 		});
-	}, [initialValue, isNewRule]);
+
+		setDetectionMethod(ruleType);
+	}, [initialValue, isNewRule, alertTypeFromURL]);
 
 	useEffect(() => {
 		// Set selectedQueryName based on the length of queryOptions
@@ -300,12 +366,15 @@ function FormAlertRules({
 		const postableAlert: AlertDef = {
 			...alertDef,
 			preferredChannels: alertDef.broadcastToAll ? [] : alertDef.preferredChannels,
-			alertType,
+			alertType:
+				alertType === AlertTypes.ANOMALY_BASED_ALERT
+					? AlertTypes.METRICS_BASED_ALERT
+					: alertType,
 			source: window?.location.toString(),
 			ruleType:
 				currentQuery.queryType === EQueryType.PROM
 					? 'promql_rule'
-					: 'threshold_rule',
+					: alertDef.ruleType,
 			condition: {
 				...alertDef.condition,
 				compositeQuery: {
@@ -322,6 +391,12 @@ function FormAlertRules({
 				},
 			},
 		};
+
+		if (alertDef.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
+			postableAlert.condition.algorithm = alertDef.condition.algorithm;
+			postableAlert.condition.seasonality = alertDef.condition.seasonality;
+		}
+
 		return postableAlert;
 	};
 
@@ -585,63 +660,102 @@ function FormAlertRules({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	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;
-		}
-		logEvent('Alert: Check example alert clicked', {
-			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
-			isNewRule: !ruleId || ruleId === 0,
-			ruleId,
-			queryType: currentQuery.queryType,
-			link: url,
-		});
-		window.open(url, '_blank');
-	}
+	const tabs = [
+		{
+			value: AlertDetectionTypes.THRESHOLD_ALERT,
+			label: 'Threshold Alert',
+		},
+		{
+			value: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
+			label: 'Anomaly Detection Alert',
+			isBeta: true,
+		},
+	];
+
+	const handleDetectionMethodChange = (value: any): void => {
+		setAlertDef((def) => ({
+			...def,
+			ruleType: value,
+		}));
+
+		setDetectionMethod(value);
+	};
+
+	const isAnomalyDetectionEnabled =
+		useFeatureFlag(FeatureKeys.ANOMALY_DETECTION)?.active || false;
 
 	return (
 		<>
 			{Element}
 
-			<PanelContainer id="top">
-				<StyledLeftContainer flex="5 1 600px" md={18}>
-					<MainFormContainer
-						initialValues={initialValue}
-						layout="vertical"
-						form={formInstance}
-						className="main-container"
-					>
+			<div id="top">
+				<div className="overview-header">
+					<div className="alert-type-container">
+						{isNewRule && (
+							<Typography.Title level={5} className="alert-type-title">
+								<BellDot size={14} />
+
+								{alertDef.alertType === AlertTypes.ANOMALY_BASED_ALERT &&
+									'Anomaly Detection Alert'}
+								{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT &&
+									'Metrics Based Alert'}
+								{alertDef.alertType === AlertTypes.LOGS_BASED_ALERT &&
+									'Logs Based Alert'}
+								{alertDef.alertType === AlertTypes.TRACES_BASED_ALERT &&
+									'Traces Based Alert'}
+								{alertDef.alertType === AlertTypes.EXCEPTIONS_BASED_ALERT &&
+									'Exceptions Based Alert'}
+							</Typography.Title>
+						)}
+					</div>
+
+					<Button className="periscope-btn" icon={<ExternalLink size={14} />}>
+						Alert Setup Guide
+					</Button>
+				</div>
+
+				<MainFormContainer
+					initialValues={initialValue}
+					layout="vertical"
+					form={formInstance}
+					className="main-container"
+				>
+					<div className="chart-preview-container">
 						{currentQuery.queryType === EQueryType.QUERY_BUILDER &&
 							renderQBChartPreview()}
 						{currentQuery.queryType === EQueryType.PROM &&
 							renderPromAndChQueryChartPreview()}
 						{currentQuery.queryType === EQueryType.CLICKHOUSE &&
 							renderPromAndChQueryChartPreview()}
+					</div>
 
-						<StepContainer>
-							<BuilderUnitsFilter
-								onChange={onUnitChangeHandler}
-								yAxisUnit={yAxisUnit}
-							/>
-						</StepContainer>
+					<StepContainer>
+						<BuilderUnitsFilter
+							onChange={onUnitChangeHandler}
+							yAxisUnit={yAxisUnit}
+						/>
+					</StepContainer>
+
+					<div className="steps-container">
+						{alertDef.alertType === AlertTypes.METRICS_BASED_ALERT &&
+							isAnomalyDetectionEnabled && (
+								<div className="detection-method-container">
+									<StepHeading> {t('alert_form_step1')}</StepHeading>
+
+									<Tabs2
+										key={detectionMethod}
+										tabs={tabs}
+										initialSelectedTab={detectionMethod}
+										onSelectTab={handleDetectionMethodChange}
+									/>
+
+									<div className="detection-method-description">
+										{detectionMethod === AlertDetectionTypes.ANOMALY_DETECTION_ALERT
+											? t('anomaly_detection_alert_desc')
+											: t('threshold_alert_desc')}
+									</div>
+								</div>
+							)}
 
 						<QuerySection
 							queryCategory={currentQuery.queryType}
@@ -662,79 +776,49 @@ function FormAlertRules({
 						/>
 
 						{renderBasicInfo()}
-						<ButtonContainer>
-							<Tooltip title={isAlertAvailableToSave ? MESSAGE.ALERT : ''}>
-								<ActionButton
-									loading={loading || false}
-									type="primary"
-									onClick={onSaveHandler}
-									icon={<SaveOutlined />}
-									disabled={
-										isAlertNameMissing ||
-										isAlertAvailableToSave ||
-										!isChannelConfigurationValid ||
-										queryStatus === 'error'
-									}
-								>
-									{isNewRule ? t('button_createrule') : t('button_savechanges')}
-								</ActionButton>
-							</Tooltip>
-
+					</div>
+					<ButtonContainer>
+						<Tooltip title={isAlertAvailableToSave ? MESSAGE.ALERT : ''}>
 							<ActionButton
 								loading={loading || false}
+								type="primary"
+								onClick={onSaveHandler}
+								icon={<SaveOutlined />}
 								disabled={
 									isAlertNameMissing ||
+									isAlertAvailableToSave ||
 									!isChannelConfigurationValid ||
 									queryStatus === 'error'
 								}
-								type="default"
-								onClick={onTestRuleHandler}
 							>
-								{' '}
-								{t('button_testrule')}
+								{isNewRule ? t('button_createrule') : t('button_savechanges')}
 							</ActionButton>
-							<ActionButton
-								disabled={loading || false}
-								type="default"
-								onClick={onCancelHandler}
-							>
-								{ruleId === 0 && t('button_cancelchanges')}
-								{ruleId > 0 && t('button_discard')}
-							</ActionButton>
-						</ButtonContainer>
-					</MainFormContainer>
-				</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)
+						</Tooltip>
+
+						<ActionButton
+							loading={loading || false}
+							disabled={
+								isAlertNameMissing ||
+								!isChannelConfigurationValid ||
+								queryStatus === 'error'
 							}
-							className="doc-redirection-btn"
+							type="default"
+							onClick={onTestRuleHandler}
 						>
-							Check an example alert
-						</Button>
-						<LaunchChatSupport
-							attributes={{
-								alert: alertDef?.alert,
-								alertType: alertDef?.alertType,
-								id: ruleId,
-								ruleType: alertDef?.ruleType,
-								state: (alertDef as any)?.state,
-								panelType,
-								screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
-							}}
-							className="facing-issue-btn"
-							eventName="Alert: Facing Issues in alert"
-							buttonText="Need help with this alert?"
-							message={alertHelpMessage(alertDef, ruleId)}
-							onHoverText="Click here to get help with this alert"
-						/>
-					</div>
-				</Col>
-			</PanelContainer>
+							{' '}
+							{t('button_testrule')}
+						</ActionButton>
+						<ActionButton
+							disabled={loading || false}
+							type="default"
+							onClick={onCancelHandler}
+						>
+							{ruleId === 0 && t('button_cancelchanges')}
+							{ruleId > 0 && t('button_discard')}
+						</ActionButton>
+					</ButtonContainer>
+				</MainFormContainer>
+			</div>
 		</>
 	);
 }

frontend/src/container/FormAlertRules/styles.ts

@@ -1,13 +1,9 @@
-import { Button, Card, Col, Form, Input, Row, Select, Typography } from 'antd';
+import { Button, Card, Col, Form, Input, Select, Typography } from 'antd';
 import styled from 'styled-components';
 
 const { TextArea } = Input;
 const { Item } = Form;
 
-export const PanelContainer = styled(Row)`
-	flex-wrap: nowrap;
-`;
-
 export const StyledLeftContainer = styled(Col)`
 	&&& {
 		margin-right: 1rem;

frontend/src/container/HostMetricsLoading/HostMetricsLoading.styles.scss

@@ -0,0 +1,19 @@
+.loading-host-metrics {
+	padding: 24px 0;
+	height: 600px;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.loading-host-metrics-content {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		.loading-gif {
+			height: 72px;
+			margin-left: -24px;
+		}
+	}
+}

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -0,0 +1,26 @@
+import './HostMetricsLoading.styles.scss';
+
+import { Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { DataSource } from 'types/common/queryBuilder';
+
+export function HostMetricsLoading(): JSX.Element {
+	const { t } = useTranslation('common');
+	return (
+		<div className="loading-host-metrics">
+			<div className="loading-host-metrics-content">
+				<img
+					className="loading-gif"
+					src="/Icons/loading-plane.gif"
+					alt="wait-icon"
+				/>
+
+				<Typography>
+					{t('pending_data_placeholder', {
+						dataSource: `host ${DataSource.METRICS}`,
+					})}
+				</Typography>
+			</div>
+		</div>
+	);
+}

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -24,7 +24,7 @@ import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParse
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { debounce, isArray, isString } from 'lodash-es';
 import map from 'lodash-es/map';
-import { ChangeEvent, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -257,8 +257,7 @@ function VariableItem({
 		if (variableData.name) {
 			if (
 				value === ALL_SELECT_VALUE ||
-				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE)) ||
-				(Array.isArray(value) && value.length === 0)
+				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
 			) {
 				onValueUpdate(variableData.name, variableData.id, optionsData, true);
 			} else {
@@ -278,25 +277,6 @@ function VariableItem({
 
 	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
 
-	const [variableDropdownOpen, setVariableDropdownOpen] = useState(false);
-	const wrapperRef = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		const handleClickOutside = (event: MouseEvent): void => {
-			if (
-				wrapperRef.current &&
-				!wrapperRef.current.contains(event.target as Node)
-			) {
-				setVariableDropdownOpen(false);
-			}
-		};
-
-		window.addEventListener('click', handleClickOutside);
-		return (): void => {
-			window.removeEventListener('click', handleClickOutside);
-		};
-	}, []);
-
 	const selectValue =
 		variableData.allSelected && enableSelectAll
 			? 'ALL'
@@ -343,10 +323,6 @@ function VariableItem({
 			Array.isArray(selectedValueStringified) &&
 			selectedValueStringified.includes(option.toString())
 		) {
-			if (newSelectedValue.length === 0) {
-				handleChange(ALL_SELECT_VALUE);
-				return;
-			}
 			if (newSelectedValue.length === 1) {
 				handleChange(newSelectedValue[0].toString());
 				return;
@@ -431,7 +407,7 @@ function VariableItem({
 			<Typography.Text className="variable-name" ellipsis>
 				${variableData.name}
 			</Typography.Text>
-			<div className="variable-value" ref={wrapperRef}>
+			<div className="variable-value">
 				{variableData.type === 'TEXTBOX' ? (
 					<Input
 						placeholder="Enter value"
@@ -464,10 +440,6 @@ function VariableItem({
 							style={SelectItemStyle}
 							loading={isLoading}
 							showSearch
-							open={variableDropdownOpen}
-							onDropdownVisibleChange={(visible): void =>
-								setVariableDropdownOpen(visible)
-							}
 							data-testid="variable-select"
 							className="variable-select"
 							popupClassName="dropdown-styles"

frontend/src/container/OnboardingContainer/Modules/LogsManagement/Http/md-docs/httpJsonPayload.md

@@ -60,7 +60,7 @@ This is a **sample cURL request** which can be used as a template:
  
 
 ```bash
-curl --location 'https://ingest.{{REGION}}.signoz.cloud:443/logs/json/' \
+curl --location 'https://ingest.{{REGION}}.signoz.cloud:443/logs/json' \
 --header 'Content-Type: application/json' \
 --header 'signoz-access-token: {{SIGNOZ_INGESTION_KEY}}' \
 --data '[

frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx

@@ -33,7 +33,7 @@ export default function Function({
 	handleDeleteFunction,
 }: FunctionProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const { showInput } = queryFunctionsTypesConfig[funcData.name];
+	const { showInput, disabled } = queryFunctionsTypesConfig[funcData.name];
 
 	let functionValue;
 
@@ -62,6 +62,7 @@ export default function Function({
 			<Select
 				className={cx('query-function-name-selector', showInput ? 'showInput' : '')}
 				value={funcData.name}
+				disabled={disabled}
 				style={{ minWidth: '100px' }}
 				onChange={(value): void => {
 					handleUpdateFunctionName(funcData, index, value);

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.interfaces.ts

@@ -4,5 +4,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 export type GroupByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: BaseAutocompleteData[]) => void;
-	disabled: boolean;
+	disabled?: boolean;
+	isInfraMonitoring?: boolean;
 };

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -25,6 +25,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 	query,
 	onChange,
 	disabled,
+	isInfraMonitoring,
 }: GroupByFilterProps): JSX.Element {
 	const queryClient = useQueryClient();
 	const [searchText, setSearchText] = useState<string>('');
@@ -85,6 +86,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 				setOptionsData(options);
 			},
 		},
+		isInfraMonitoring,
 	);
 
 	const getAttributeKeys = useCallback(async () => {
@@ -96,6 +98,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 					dataSource: query.dataSource,
 					aggregateOperator: query.aggregateOperator,
 					searchText,
+					isInfraMonitoring,
 				}),
 		);
 
@@ -107,6 +110,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 		query.dataSource,
 		queryClient,
 		searchText,
+		isInfraMonitoring,
 	]);
 
 	const handleSearchKeys = (searchText: string): void => {

frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts

@@ -59,9 +59,10 @@ export const useOrderByFilter = ({
 		];
 	}, [searchText]);
 
-	const selectedValue = useMemo(() => transformToOrderByStringValues(query), [
-		query,
-	]);
+	const selectedValue = useMemo(
+		() => transformToOrderByStringValues(query, entityVersion),
+		[query, entityVersion],
+	);
 
 	const generateOptions = useCallback(
 		(options: IOption[]): IOption[] => {

frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts

@@ -13,11 +13,14 @@ export const orderByValueDelimiter = '|';
 
 export const transformToOrderByStringValues = (
 	query: IBuilderQuery,
+	entityVersion?: string,
 ): IOption[] => {
 	const prepareSelectedValue: IOption[] = query.orderBy.map((item) => {
 		if (item.columnName === SIGNOZ_VALUE) {
 			return {
-				label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) ${item.order}`,
+				label: `${
+					entityVersion === 'v4' ? query.spaceAggregation : query.aggregateOperator
+				}(${query.aggregateAttribute.key}) ${item.order}`,
 				value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
 			};
 		}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -72,6 +72,7 @@ function QueryBuilderSearch({
 	className,
 	placeholder,
 	suffixIcon,
+	isInfraMonitoring,
 }: QueryBuilderSearchProps): JSX.Element {
 	const { pathname } = useLocation();
 	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
@@ -93,7 +94,12 @@ function QueryBuilderSearch({
 		searchKey,
 		key,
 		exampleQueries,
-	} = useAutoComplete(query, whereClauseConfig, isLogsExplorerPage);
+	} = useAutoComplete(
+		query,
+		whereClauseConfig,
+		isLogsExplorerPage,
+		isInfraMonitoring,
+	);
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 	const [showAllFilters, setShowAllFilters] = useState<boolean>(false);
 	const [dynamicPlacholder, setDynamicPlaceholder] = useState<string>(
@@ -105,6 +111,7 @@ function QueryBuilderSearch({
 		query,
 		searchKey,
 		isLogsExplorerPage,
+		isInfraMonitoring,
 	);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -185,8 +192,8 @@ function QueryBuilderSearch({
 	);
 
 	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
+		() => query.dataSource === DataSource.METRICS && !isInfraMonitoring,
+		[query.dataSource, isInfraMonitoring],
 	);
 
 	const fetchValueDataType = (value: unknown, operator: string): DataTypes => {
@@ -426,6 +433,7 @@ interface QueryBuilderSearchProps {
 	className?: string;
 	placeholder?: string;
 	suffixIcon?: React.ReactNode;
+	isInfraMonitoring?: boolean;
 }
 
 QueryBuilderSearch.defaultProps = {
@@ -433,6 +441,7 @@ QueryBuilderSearch.defaultProps = {
 	className: '',
 	placeholder: PLACEHOLDER,
 	suffixIcon: undefined,
+	isInfraMonitoring: false,
 };
 
 export interface CustomTagProps {

frontend/src/container/SideNav/menuItems.tsx

@@ -11,6 +11,7 @@ import {
 	LayoutGrid,
 	ListMinus,
 	MessageSquare,
+	PackagePlus,
 	Receipt,
 	Route,
 	ScrollText,
@@ -118,6 +119,11 @@ const menuItems: SidebarItem[] = [
 		label: 'Billing',
 		icon: <Receipt size={16} />,
 	},
+	{
+		key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+		label: 'Infrastructure Monitoring',
+		icon: <PackagePlus size={16} />,
+	},
 	{
 		key: ROUTES.SETTINGS,
 		label: 'Settings',

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -212,6 +212,7 @@ export const routesToSkip = [
 	ROUTES.ALERT_OVERVIEW,
 	ROUTES.MESSAGING_QUEUES,
 	ROUTES.MESSAGING_QUEUES_DETAIL,
+	ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

@@ -98,7 +98,7 @@ function NoFilterTable({
 	return (
 		<ResizeTable
 			columns={columns}
-			rowKey="startsAt"
+			rowKey={(record): string => `${record.startsAt}-${record.fingerprint}`}
 			dataSource={filteredAlerts}
 		/>
 	);

frontend/src/hooks/infraMonitoring/useGetAggregateKeys.ts

@@ -0,0 +1,34 @@
+import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
+import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { useMemo } from 'react';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { IGetAttributeKeysPayload } from 'types/api/queryBuilder/getAttributeKeys';
+import { IQueryAutocompleteResponse } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+type UseGetAttributeKeys = (
+	requestData: IGetAttributeKeysPayload,
+	options?: UseQueryOptions<
+		SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
+	>,
+) => UseQueryResult<
+	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
+>;
+
+export const useGetAggregateKeys: UseGetAttributeKeys = (
+	requestData,
+	options,
+) => {
+	const queryKey = useMemo(() => {
+		if (options?.queryKey && Array.isArray(options.queryKey)) {
+			return [QueryBuilderKeys.GET_AGGREGATE_KEYS, ...options.queryKey];
+		}
+		return [QueryBuilderKeys.GET_AGGREGATE_KEYS, requestData];
+	}, [options?.queryKey, requestData]);
+
+	return useQuery<SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse>({
+		queryKey,
+		queryFn: () => getAggregateKeys(requestData),
+		...options,
+	});
+};

frontend/src/hooks/infraMonitoring/useGetHostList.ts

@@ -0,0 +1,42 @@
+import {
+	getHostLists,
+	HostListPayload,
+	HostListResponse,
+} from 'api/infraMonitoring/getHostLists';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useMemo } from 'react';
+import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+type UseGetHostList = (
+	requestData: HostListPayload,
+	options?: UseQueryOptions<
+		SuccessResponse<HostListResponse> | ErrorResponse,
+		Error
+	>,
+	headers?: Record<string, string>,
+) => UseQueryResult<SuccessResponse<HostListResponse> | ErrorResponse, Error>;
+
+export const useGetHostList: UseGetHostList = (
+	requestData,
+	options,
+	headers,
+) => {
+	const queryKey = useMemo(() => {
+		if (options?.queryKey && Array.isArray(options.queryKey)) {
+			return [...options.queryKey];
+		}
+
+		if (options?.queryKey && typeof options.queryKey === 'string') {
+			return options.queryKey;
+		}
+
+		return [REACT_QUERY_KEY.GET_HOST_LIST, requestData];
+	}, [options?.queryKey, requestData]);
+
+	return useQuery<SuccessResponse<HostListResponse> | ErrorResponse, Error>({
+		queryFn: ({ signal }) => getHostLists(requestData, signal, headers),
+		...options,
+		queryKey,
+	});
+};

frontend/src/hooks/queryBuilder/useAutoComplete.ts

@@ -28,6 +28,7 @@ export const useAutoComplete = (
 	query: IBuilderQuery,
 	whereClauseConfig?: WhereClauseConfig,
 	shouldUseSuggestions?: boolean,
+	isInfraMonitoring?: boolean,
 ): IAutoComplete => {
 	const [searchValue, setSearchValue] = useState<string>('');
 	const [searchKey, setSearchKey] = useState<string>('');
@@ -37,6 +38,7 @@ export const useAutoComplete = (
 		query,
 		searchKey,
 		shouldUseSuggestions,
+		isInfraMonitoring,
 	);
 
 	const [key, operator, result] = useSetCurrentKeyAndOperator(searchValue, keys);
@@ -170,4 +172,5 @@ interface IAutoComplete {
 	searchKey: string;
 	key: string;
 	exampleQueries: TagFilter[];
+	isInfraMonitoring?: boolean;
 }

frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts

@@ -1,3 +1,4 @@
+import { getInfraAttributesValues } from 'api/infraMonitoring/getInfraAttributeValues';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import {
@@ -43,6 +44,7 @@ export const useFetchKeysAndValues = (
 	query: IBuilderQuery,
 	searchKey: string,
 	shouldUseSuggestions?: boolean,
+	isInfraMonitoring?: boolean,
 ): IuseFetchKeysAndValues => {
 	const [keys, setKeys] = useState<BaseAutocompleteData[]>([]);
 	const [exampleQueries, setExampleQueries] = useState<TagFilter[]>([]);
@@ -91,10 +93,10 @@ export const useFetchKeysAndValues = (
 
 	const isQueryEnabled = useMemo(
 		() =>
-			query.dataSource === DataSource.METRICS
+			query.dataSource === DataSource.METRICS && !isInfraMonitoring
 				? !!query.dataSource && !!query.aggregateAttribute.dataType
 				: true,
-		[query.aggregateAttribute.dataType, query.dataSource],
+		[isInfraMonitoring, query.aggregateAttribute.dataType, query.dataSource],
 	);
 
 	const { data, isFetching, status } = useGetAggregateKeys(
@@ -109,6 +111,7 @@ export const useFetchKeysAndValues = (
 			queryKey: [searchParams],
 			enabled: isQueryEnabled && !shouldUseSuggestions,
 		},
+		isInfraMonitoring,
 	);
 
 	const {
@@ -136,6 +139,7 @@ export const useFetchKeysAndValues = (
 		value: string,
 		query: IBuilderQuery,
 		keys: BaseAutocompleteData[],
+		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): Promise<void> => {
 		if (!value) {
 			return;
@@ -152,17 +156,36 @@ export const useFetchKeysAndValues = (
 		setAggregateFetching(true);
 
 		try {
-			const { payload } = await getAttributesValues({
-				aggregateOperator: query.aggregateOperator,
-				dataSource: query.dataSource,
-				aggregateAttribute: query.aggregateAttribute.key,
-				attributeKey: filterAttributeKey?.key ?? tagKey,
-				filterAttributeKeyDataType: filterAttributeKey?.dataType ?? DataTypes.EMPTY,
-				tagType: filterAttributeKey?.type ?? '',
-				searchText: isInNInOperator(tagOperator)
-					? tagValue[tagValue.length - 1]?.toString() ?? '' // last element of tagvalue will be always user search value
-					: tagValue?.toString() ?? '',
-			});
+			let payload;
+			if (isInfraMonitoring) {
+				const response = await getInfraAttributesValues({
+					dataSource: query.dataSource,
+					attributeKey: filterAttributeKey?.key ?? tagKey,
+					filterAttributeKeyDataType:
+						filterAttributeKey?.dataType ?? DataTypes.EMPTY,
+					tagType: filterAttributeKey?.type ?? '',
+					searchText: isInNInOperator(tagOperator)
+						? tagValue[tagValue.length - 1]?.toString() ?? ''
+						: tagValue?.toString() ?? '',
+					aggregateOperator: query.aggregateOperator,
+					aggregateAttribute: query.aggregateAttribute.key,
+				});
+				payload = response.payload;
+			} else {
+				const response = await getAttributesValues({
+					aggregateOperator: query.aggregateOperator,
+					dataSource: query.dataSource,
+					aggregateAttribute: query.aggregateAttribute.key,
+					attributeKey: filterAttributeKey?.key ?? tagKey,
+					filterAttributeKeyDataType:
+						filterAttributeKey?.dataType ?? DataTypes.EMPTY,
+					tagType: filterAttributeKey?.type ?? '',
+					searchText: isInNInOperator(tagOperator)
+						? tagValue[tagValue.length - 1]?.toString() ?? ''
+						: tagValue?.toString() ?? '',
+				});
+				payload = response.payload;
+			}
 
 			if (payload) {
 				const values = Object.values(payload).find((el) => !!el) || [];

frontend/src/hooks/queryBuilder/useGetAggregateKeys.ts

@@ -11,6 +11,7 @@ type UseGetAttributeKeys = (
 	options?: UseQueryOptions<
 		SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 	>,
+	isInfraMonitoring?: boolean,
 ) => UseQueryResult<
 	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 >;
@@ -18,17 +19,22 @@ type UseGetAttributeKeys = (
 export const useGetAggregateKeys: UseGetAttributeKeys = (
 	requestData,
 	options,
+	isInfraMonitoring,
 ) => {
 	const queryKey = useMemo(() => {
 		if (options?.queryKey && Array.isArray(options.queryKey)) {
-			return [QueryBuilderKeys.GET_AGGREGATE_KEYS, ...options.queryKey];
+			return [
+				QueryBuilderKeys.GET_AGGREGATE_KEYS,
+				...options.queryKey,
+				isInfraMonitoring,
+			];
 		}
-		return [QueryBuilderKeys.GET_AGGREGATE_KEYS, requestData];
-	}, [options?.queryKey, requestData]);
+		return [QueryBuilderKeys.GET_AGGREGATE_KEYS, requestData, isInfraMonitoring];
+	}, [options?.queryKey, requestData, isInfraMonitoring]);
 
 	return useQuery<SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse>({
 		queryKey,
-		queryFn: () => getAggregateKeys(requestData),
+		queryFn: () => getAggregateKeys({ ...requestData, isInfraMonitoring }),
 		...options,
 	});
 };

frontend/src/lib/dashboard/getQueryResults.ts

@@ -12,7 +12,7 @@ import {
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import { Pagination } from 'hooks/queryPagination';
 import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
-import { isEmpty, cloneDeep } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -24,6 +24,7 @@ export async function GetMetricQueryRange(
 	version: string,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
+	isInfraMonitoring?: boolean,
 ): Promise<SuccessResponse<MetricRangePayloadProps>> {
 	const { legendMap, queryPayload } = prepareQueryRangePayload(props);
 	const response = await getMetricsQueryRange(
@@ -32,7 +33,6 @@ export async function GetMetricQueryRange(
 		signal,
 		headers,
 	);
-	
 
 	if (response.statusCode >= 400) {
 		let error = `API responded with ${response.statusCode} -  ${response.error} status: ${response.message}`;
@@ -71,6 +71,19 @@ export async function GetMetricQueryRange(
 			},
 		);
 	}
+
+	if (response.payload?.data?.newResult?.data?.resultType === 'anomaly') {
+		response.payload.data.newResult.data.result = response.payload.data.newResult.data.result.map(
+			(queryData) => {
+				if (legendMap[queryData.queryName]) {
+					queryData.legend = legendMap[queryData.queryName];
+				}
+
+				return queryData;
+			},
+		);
+	}
+
 	return response;
 }
 

frontend/src/lib/newQueryBuilder/convertNewDataToOld.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-identical-functions */
 import {
 	MetricRangePayloadProps,
 	MetricRangePayloadV3,
@@ -12,8 +13,8 @@ export const convertNewDataToOld = (
 
 	result.forEach((item) => {
 		if (item.series) {
-			item.series.forEach((serie) => {
-				const values: QueryData['values'] = serie.values.reduce<
+			item.series.forEach((series) => {
+				const values: QueryData['values'] = series.values.reduce<
 					QueryData['values']
 				>((acc, currentInfo) => {
 					const renderValues: [number, string] = [
@@ -23,16 +24,87 @@ export const convertNewDataToOld = (
 
 					return [...acc, renderValues];
 				}, []);
+
 				const result: QueryData = {
-					metric: serie.labels,
+					metric: series.labels,
 					values,
-					queryName: item.queryName,
+					queryName: `${item.queryName}`,
+				};
+
+				oldResult.push(result);
+			});
+		}
+
+		if (item.predictedSeries) {
+			item.predictedSeries.forEach((series) => {
+				const values: QueryData['values'] = series.values.reduce<
+					QueryData['values']
+				>((acc, currentInfo) => {
+					const renderValues: [number, string] = [
+						currentInfo.timestamp / 1000,
+						currentInfo.value,
+					];
+
+					return [...acc, renderValues];
+				}, []);
+
+				const result: QueryData = {
+					metric: series.labels,
+					values,
+					queryName: `${item.queryName}`,
+				};
+
+				oldResult.push(result);
+			});
+		}
+
+		if (item.upperBoundSeries) {
+			item.upperBoundSeries.forEach((series) => {
+				const values: QueryData['values'] = series.values.reduce<
+					QueryData['values']
+				>((acc, currentInfo) => {
+					const renderValues: [number, string] = [
+						currentInfo.timestamp / 1000,
+						currentInfo.value,
+					];
+
+					return [...acc, renderValues];
+				}, []);
+
+				const result: QueryData = {
+					metric: series.labels,
+					values,
+					queryName: `${item.queryName}`,
+				};
+
+				oldResult.push(result);
+			});
+		}
+
+		if (item.lowerBoundSeries) {
+			item.lowerBoundSeries.forEach((series) => {
+				const values: QueryData['values'] = series.values.reduce<
+					QueryData['values']
+				>((acc, currentInfo) => {
+					const renderValues: [number, string] = [
+						currentInfo.timestamp / 1000,
+						currentInfo.value,
+					];
+
+					return [...acc, renderValues];
+				}, []);
+
+				const result: QueryData = {
+					metric: series.labels,
+					values,
+					queryName: `${item.queryName}`,
 				};
 
 				oldResult.push(result);
 			});
 		}
 	});
+
 	const oldResultType = resultType;
 
 	// TODO: fix it later for using only v3 version of api

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -163,6 +163,8 @@ export const getUPlotChartOptions = ({
 
 	const stackBarChart = stackChart && isUndefined(hiddenGraph);
 
+	const isAnomalyRule = apiResponse?.data?.newResult?.data?.result[0].isAnomaly;
+
 	const series = getStackedSeries(apiResponse?.data?.result || []);
 
 	const bands = stackBarChart ? getBands(series) : null;
@@ -251,11 +253,14 @@ export const getUPlotChartOptions = ({
 		hooks: {
 			draw: [
 				(u): void => {
+					if (isAnomalyRule) {
+						return;
+					}
+
 					thresholds?.forEach((threshold) => {
 						if (threshold.thresholdValue !== undefined) {
 							const { ctx } = u;
 							ctx.save();
-
 							const yPos = u.valToPos(
 								convertValue(
 									threshold.thresholdValue,
@@ -265,30 +270,22 @@ export const getUPlotChartOptions = ({
 								'y',
 								true,
 							);
-
 							ctx.strokeStyle = threshold.thresholdColor || 'red';
 							ctx.lineWidth = 2;
 							ctx.setLineDash([10, 5]);
-
 							ctx.beginPath();
-
 							const plotLeft = u.bbox.left; // left edge of the plot area
 							const plotRight = plotLeft + u.bbox.width; // right edge of the plot area
-
 							ctx.moveTo(plotLeft, yPos);
 							ctx.lineTo(plotRight, yPos);
-
 							ctx.stroke();
-
 							// Text configuration
 							if (threshold.thresholdLabel) {
 								const text = threshold.thresholdLabel;
 								const textX = plotRight - ctx.measureText(text).width - 20;
-
 								const canvasHeight = ctx.canvas.height;
 								const yposHeight = canvasHeight - yPos;
 								const isHeightGreaterThan90Percent = canvasHeight * 0.9 < yposHeight;
-
 								// Adjust textY based on the condition
 								let textY;
 								if (isHeightGreaterThan90Percent) {
@@ -299,7 +296,6 @@ export const getUPlotChartOptions = ({
 								ctx.fillStyle = threshold.thresholdColor || 'red';
 								ctx.fillText(text, textX, textY);
 							}
-
 							ctx.restore();
 						}
 					});

frontend/src/lib/uPlotLib/utils/getUplotChartData.ts

@@ -1,3 +1,5 @@
+import getLabelName from 'lib/getLabelName';
+import { colors } from 'lib/getRandomColor';
 import { cloneDeep, isUndefined } from 'lodash-es';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
@@ -20,7 +22,7 @@ function getXAxisTimestamps(seriesList: QueryData[]): number[] {
 function fillMissingXAxisTimestamps(timestampArr: number[], data: any[]): any {
 	// Generate a set of all timestamps in the range
 	const allTimestampsSet = new Set(timestampArr);
-	const processedData = JSON.parse(JSON.stringify(data));
+	const processedData = cloneDeep(data);
 
 	// Fill missing timestamps with null values
 	processedData.forEach((entry: { values: (number | null)[][] }) => {
@@ -90,3 +92,70 @@ export const getUPlotChartData = (
 			: yAxisValuesArr),
 	];
 };
+
+const processAnomalyDetectionData = (
+	anomalyDetectionData: any,
+): Record<string, { data: number[][]; color: string }> => {
+	if (!anomalyDetectionData) {
+		return {};
+	}
+
+	const processedData: Record<
+		string,
+		{ data: number[][]; color: string; legendLabel: string }
+	> = {};
+
+	for (
+		let queryIndex = 0;
+		queryIndex < anomalyDetectionData.length;
+		queryIndex++
+	) {
+		const {
+			series,
+			predictedSeries,
+			upperBoundSeries,
+			lowerBoundSeries,
+			queryName,
+			legend,
+		} = anomalyDetectionData[queryIndex];
+
+		for (let index = 0; index < series?.length; index++) {
+			const label = getLabelName(
+				series[index].labels,
+				queryName || '', // query
+				legend || '',
+			);
+
+			const objKey = `${queryName}-${label}`;
+
+			processedData[objKey] = {
+				data: [
+					series[index].values.map((v: { timestamp: number }) => v.timestamp / 1000),
+					series[index].values.map((v: { value: number }) => v.value),
+					predictedSeries[index].values.map((v: { value: number }) => v.value),
+					upperBoundSeries[index].values.map((v: { value: number }) => v.value),
+					lowerBoundSeries[index].values.map((v: { value: number }) => v.value),
+				],
+				color: colors[index],
+				legendLabel: label,
+			};
+		}
+	}
+
+	return processedData;
+};
+
+export const getUplotChartDataForAnomalyDetection = (
+	apiResponse?: MetricRangePayloadProps,
+): Record<
+	string,
+	{
+		[x: string]: any;
+		data: number[][];
+		color: string;
+	}
+> => {
+	const anomalyDetectionData = apiResponse?.data?.newResult?.data?.result;
+
+	return processAnomalyDetectionData(anomalyDetectionData);
+};

frontend/src/lib/uPlotLib/utils/getYAxisScale.ts

@@ -233,6 +233,43 @@ GetYAxisScale): { auto?: boolean; range?: uPlot.Scale.Range } => {
 	return { auto: false, range: [min, max] };
 };
 
+function getMinMax(data: any): { minValue: number; maxValue: number } {
+	// Exclude the first array
+	const arrays = data.slice(1);
+
+	// Flatten the array and convert all elements to float
+	const flattened = arrays.flat().map(Number);
+
+	// Get min and max, with fallback of 0 for min
+	const minValue = flattened.length ? Math.min(...flattened) : 0;
+	const maxValue = Math.max(...flattened);
+
+	return { minValue, maxValue };
+}
+
+export const getYAxisScaleForAnomalyDetection = ({
+	seriesData,
+	selectedSeries,
+	initialData,
+}: {
+	seriesData: any;
+	selectedSeries: string | null;
+	initialData: any;
+	yAxisUnit?: string;
+}): { auto?: boolean; range?: uPlot.Scale.Range } => {
+	if (!selectedSeries && !initialData) {
+		return { auto: true };
+	}
+
+	const selectedSeriesData = selectedSeries
+		? seriesData[selectedSeries]?.data
+		: initialData;
+
+	const { minValue, maxValue } = getMinMax(selectedSeriesData);
+
+	return { auto: false, range: [minValue, maxValue] };
+};
+
 export type GetYAxisScale = {
 	thresholds?: ThresholdProps[];
 	series?: QueryDataV3[];

frontend/src/pages/InfraMonitoringHosts/HostsList.tsx

@@ -0,0 +1,141 @@
+import { Table, TablePaginationConfig, TableProps, Typography } from 'antd';
+import { SorterResult } from 'antd/es/table/interface';
+import { HostListPayload } from 'api/infraMonitoring/getHostLists';
+import { HostMetricsLoading } from 'container/HostMetricsLoading/HostMetricsLoading';
+import NoLogs from 'container/NoLogs/NoLogs';
+import { useGetHostList } from 'hooks/infraMonitoring/useGetHostList';
+import { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import HostsListControls from './HostsListControls';
+import {
+	formatDataForTable,
+	getHostListsQuery,
+	getHostsListColumns,
+	HostRowData,
+} from './utils';
+
+function HostsList(): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const [currentPage, setCurrentPage] = useState(1);
+	const [filters, setFilters] = useState<IBuilderQuery['filters']>({
+		items: [],
+		op: 'and',
+	});
+
+	const [orderBy, setOrderBy] = useState<{
+		columnName: string;
+		order: 'asc' | 'desc';
+	} | null>(null);
+
+	const pageSize = 10;
+
+	const query = useMemo(() => {
+		const baseQuery = getHostListsQuery();
+		return {
+			...baseQuery,
+			limit: pageSize,
+			offset: (currentPage - 1) * pageSize,
+			filters,
+			start: Math.floor(minTime / 1000000),
+			end: Math.floor(maxTime / 1000000),
+			orderBy,
+		};
+	}, [currentPage, filters, minTime, maxTime, orderBy]);
+
+	const { data, isFetching, isLoading, isError } = useGetHostList(
+		query as HostListPayload,
+		{
+			queryKey: ['hostList', query],
+			enabled: !!query,
+		},
+	);
+
+	const hostMetricsData = useMemo(() => data?.payload?.data?.records || [], [
+		data,
+	]);
+	const totalCount = data?.payload?.data?.total || 0;
+
+	const formattedHostMetricsData = useMemo(
+		() => formatDataForTable(hostMetricsData),
+		[hostMetricsData],
+	);
+
+	const columns = useMemo(() => getHostsListColumns(), []);
+
+	const isDataPresent =
+		!isLoading && !isFetching && !isError && hostMetricsData.length === 0;
+
+	const handleTableChange: TableProps<HostRowData>['onChange'] = useCallback(
+		(
+			pagination: TablePaginationConfig,
+			_filters: Record<string, (string | number | boolean)[] | null>,
+			sorter: SorterResult<HostRowData> | SorterResult<HostRowData>[],
+		): void => {
+			if (pagination.current) {
+				setCurrentPage(pagination.current);
+			}
+
+			if ('field' in sorter && sorter.order) {
+				setOrderBy({
+					columnName: sorter.field as string,
+					order: sorter.order === 'ascend' ? 'asc' : 'desc',
+				});
+			} else {
+				setOrderBy(null);
+			}
+		},
+		[],
+	);
+
+	const handleFiltersChange = useCallback(
+		(value: IBuilderQuery['filters']): void => {
+			setFilters(value);
+		},
+		[],
+	);
+
+	return (
+		<div>
+			<HostsListControls handleFiltersChange={handleFiltersChange} />
+			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
+
+			{isLoading && <HostMetricsLoading />}
+
+			{isDataPresent && filters.items.length === 0 && (
+				<NoLogs dataSource={DataSource.METRICS} />
+			)}
+
+			{isDataPresent && filters.items.length > 0 && (
+				<div>No hosts match the applied filters.</div>
+			)}
+
+			{!isError && formattedHostMetricsData.length > 0 && (
+				<Table
+					dataSource={formattedHostMetricsData}
+					columns={columns}
+					pagination={{
+						current: currentPage,
+						pageSize,
+						total: totalCount,
+						showSizeChanger: false,
+						hideOnSinglePage: true,
+					}}
+					scroll={{ x: true }}
+					loading={isFetching}
+					tableLayout="fixed"
+					rowKey={(record): string => record.hostName}
+					onChange={handleTableChange}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HostsList;

frontend/src/pages/InfraMonitoringHosts/HostsListControls.tsx

@@ -0,0 +1,58 @@
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { useCallback, useMemo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+function HostsListControls({
+	handleFiltersChange,
+}: {
+	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
+}): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery],
+	);
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query,
+		isListViewPanel: true,
+		entityVersion: '',
+	});
+
+	const handleChangeTagFilters = useCallback(
+		(value: IBuilderQuery['filters']) => {
+			handleChangeQueryData('filters', value);
+			handleFiltersChange(value);
+		},
+		[handleChangeQueryData, handleFiltersChange],
+	);
+
+	return (
+		<div className="hosts-list-controls">
+			<QueryBuilderSearch
+				query={query}
+				onChange={handleChangeTagFilters}
+				isInfraMonitoring
+			/>
+		</div>
+	);
+}
+
+export default HostsListControls;

frontend/src/pages/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -0,0 +1,59 @@
+.infra-monitoring-container {
+	display: flex;
+	height: 100%;
+	margin-top: 1rem;
+
+	.time-selector {
+        position: absolute;
+        top: 9px;
+        right: 0;
+		padding: 0 1.5rem;
+    }
+
+	.infra-monitoring-header {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		margin-bottom: 16px;
+
+		.tabs-wrapper {
+			flex: 1;
+			margin-right: 24px;
+
+			.infra-monitoring-tabs {
+				width: 100%;
+
+				:global(.ant-tabs-nav) {
+					margin: 0;
+				}
+			}
+		}
+
+		.time-selector {
+			flex-shrink: 0;
+		}
+	}
+
+	.hosts-list-controls {
+		margin: 1rem 0.5rem;
+	}
+	
+	.progress-container {
+		display: flex;
+		align-items: center;
+	  }
+	  
+	  .progress-bar {
+		flex: 1;
+		margin-right: 8px;
+	  }
+	  
+	  .clickable-row {
+		cursor: pointer;
+	  }
+
+	  .infra-monitoring-tags {
+		border-radius: 10px;
+		width: fit-content;
+	  }
+}

frontend/src/pages/InfraMonitoringHosts/index.tsx

@@ -0,0 +1,36 @@
+import './InfraMonitoring.styles.scss';
+
+import * as Sentry from '@sentry/react';
+import { Tabs } from 'antd';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+import { getTabsItems } from './utils';
+
+function InfraMonitoringHosts(): JSX.Element {
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<div className="infra-monitoring-container">
+				<div className="infra-monitoring-header">
+					<div className="tabs-wrapper">
+						<Tabs
+							defaultActiveKey="list"
+							items={getTabsItems()}
+							className="infra-monitoring-tabs"
+							type="card"
+						/>
+					</div>
+				</div>
+				<div className="time-selector">
+					<DateTimeSelectionV2
+						showAutoRefresh={false}
+						showRefreshText={false}
+						hideShareModal
+					/>
+				</div>
+			</div>
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default InfraMonitoringHosts;

frontend/src/pages/InfraMonitoringHosts/utils.tsx

@@ -0,0 +1,121 @@
+import './InfraMonitoring.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Progress, TabsProps, Tag } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { HostData, HostListPayload } from 'api/infraMonitoring/getHostLists';
+import TabLabel from 'components/TabLabel';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+import HostsList from './HostsList';
+
+export interface HostRowData {
+	hostName: string;
+	cpu: React.ReactNode;
+	memory: React.ReactNode;
+	ioWait: number;
+	load15: number;
+	active: React.ReactNode;
+}
+
+export const getHostListsQuery = (): HostListPayload => ({
+	filters: {
+		items: [],
+		op: 'and',
+	},
+	groupBy: [],
+	orderBy: { columnName: '', order: 'asc' },
+});
+export const getTabsItems = (): TabsProps['items'] => [
+	{
+		label: <TabLabel label="List View" isDisabled={false} tooltipText="" />,
+		key: PANEL_TYPES.LIST,
+		children: <HostsList />,
+	},
+];
+
+export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
+	{
+		title: 'Hostname',
+		dataIndex: 'hostName',
+		key: 'hostName',
+		width: 150,
+	},
+	{
+		title: 'Status',
+		dataIndex: 'active',
+		key: 'active',
+		width: 100,
+	},
+	{
+		title: 'CPU Usage',
+		dataIndex: 'cpu',
+		key: 'cpu',
+		width: 100,
+		sorter: true,
+	},
+	{
+		title: 'Memory Usage',
+		dataIndex: 'memory',
+		key: 'memory',
+		width: 100,
+		sorter: true,
+	},
+	{
+		title: 'IOWait',
+		dataIndex: 'wait',
+		key: 'wait',
+		width: 100,
+		sorter: true,
+	},
+	{
+		title: 'Load Avg',
+		dataIndex: 'load15',
+		key: 'load15',
+		width: 100,
+		sorter: true,
+	},
+];
+
+export const formatDataForTable = (data: HostData[]): HostRowData[] =>
+	data.map((host, index) => ({
+		key: `${host.hostName}-${index}`,
+		hostName: host.hostName || '',
+		active: (
+			<Tag color={host.active ? 'success' : 'default'} bordered>
+				{host.active ? 'ACTIVE' : 'INACTIVE'}
+			</Tag>
+		),
+		cpu: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.cpu * 100).toFixed(1))}
+					size="small"
+					strokeColor={((): string => {
+						const cpuPercent = Number((host.cpu * 100).toFixed(1));
+						if (cpuPercent >= 90) return Color.BG_SAKURA_500;
+						if (cpuPercent >= 60) return Color.BG_AMBER_500;
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
+		memory: (
+			<div className="progress-container">
+				<Progress
+					percent={Number((host.memory * 100).toFixed(1))}
+					size="small"
+					strokeColor={((): string => {
+						const memoryPercent = Number((host.memory * 100).toFixed(1));
+						if (memoryPercent >= 90) return Color.BG_CHERRY_500;
+						if (memoryPercent >= 60) return Color.BG_AMBER_500;
+						return Color.BG_FOREST_500;
+					})()}
+					className="progress-bar"
+				/>
+			</div>
+		),
+		ioWait: host.wait,
+		load15: host.load15,
+	}));

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -0,0 +1,51 @@
+.infra-monitoring-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+
+	.ant-tabs {
+		flex: 1;
+	}
+
+	.ant-tabs-nav {
+		padding: 0;
+		margin-bottom: 0px;
+
+		&::before {
+			border-bottom: 1px solid var(--bg-slate-400) !important;
+		}
+	}
+
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
+	.tab-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+}
+
+.lightMode {
+	.infra-monitoring-module-container {
+		.ant-tabs-nav {
+			&::before {
+				border-bottom: 1px solid var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoringPage.tsx

@@ -0,0 +1,20 @@
+import './InfrastructureMonitoring.styles.scss';
+
+import RouteTab from 'components/RouteTab';
+import { TabRoutes } from 'components/RouteTab/types';
+import history from 'lib/history';
+import { useLocation } from 'react-use';
+
+import { Hosts } from './constants';
+
+export default function InfrastructureMonitoringPage(): JSX.Element {
+	const { pathname } = useLocation();
+
+	const routes: TabRoutes[] = [Hosts];
+
+	return (
+		<div className="infra-monitoring-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
+	);
+}

frontend/src/pages/InfrastructureMonitoring/constants.tsx

@@ -0,0 +1,15 @@
+import { TabRoutes } from 'components/RouteTab/types';
+import ROUTES from 'constants/routes';
+import { Inbox } from 'lucide-react';
+import InfraMonitoringHosts from 'pages/InfraMonitoringHosts';
+
+export const Hosts: TabRoutes = {
+	Component: InfraMonitoringHosts,
+	name: (
+		<div className="tab-item">
+			<Inbox size={16} /> Hosts
+		</div>
+	),
+	route: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+	key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+};

frontend/src/pages/InfrastructureMonitoring/index.tsx

@@ -0,0 +1,3 @@
+import InfrastructureMonitoringPage from './InfrastructureMonitoringPage';
+
+export default InfrastructureMonitoringPage;

frontend/src/periscope/components/Tabs2/Tabs2.styles.scss

@@ -11,8 +11,8 @@
 			gap: 10px;
 			color: var(--text-vanilla-400);
 			background: var(--bg-ink-400);
-			font-size: 14px;
-			line-height: 20px;
+			font-size: 13px;
+			line-height: 18px;
 			letter-spacing: -0.07px;
 			padding: 6px 24px;
 			border-color: var(--bg-slate-400);

frontend/src/periscope/components/Tabs2/Tabs2.tsx

@@ -1,7 +1,7 @@
 import './Tabs2.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
+import { Button, Tag } from 'antd';
 import { TimelineFilter } from 'container/AlertHistory/types';
 import { Undo } from 'lucide-react';
 import { useState } from 'react';
@@ -11,6 +11,7 @@ interface Tab {
 	label: string | JSX.Element;
 	disabled?: boolean;
 	icon?: string | JSX.Element;
+	isBeta?: boolean;
 }
 
 interface TimelineTabsProps {
@@ -63,6 +64,12 @@ function Tabs2({
 						style={{ minWidth: buttonMinWidth }}
 					>
 						{tab.label}
+
+						{tab.isBeta && (
+							<Tag bordered={false} color="geekblue">
+								Beta
+							</Tag>
+						)}
 					</Button>
 				))}
 			</Button.Group>

frontend/src/types/api/alerts/alertTypes.ts

@@ -1,5 +1,6 @@
 // this list must exactly match with the backend
 export enum AlertTypes {
+	ANOMALY_BASED_ALERT = 'ANOMALY_BASED_ALERT',
 	METRICS_BASED_ALERT = 'METRIC_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',

frontend/src/types/api/alerts/def.ts

@@ -12,6 +12,10 @@ export const defaultFrequency = '1m0s';
 // default compare op: above
 export const defaultCompareOp = '1';
 
+export const defaultAlgorithm = 'standard';
+
+export const defaultSeasonality = 'hourly';
+
 export interface AlertDef {
 	id?: number;
 	alertType?: string;
@@ -40,6 +44,8 @@ export interface RuleCondition {
 	absentFor?: number | undefined;
 	requireMinPoints?: boolean | undefined;
 	requiredNumPoints?: number | undefined;
+	algorithm?: string;
+	seasonality?: string;
 }
 export interface Labels {
 	[key: string]: string;

frontend/src/types/api/queryBuilder/getAttributeKeys.ts

@@ -3,9 +3,10 @@ import { DataSource } from 'types/common/queryBuilder';
 import { BaseAutocompleteData } from './queryAutocompleteResponse';
 
 export interface IGetAttributeKeysPayload {
-	aggregateOperator: string;
+	aggregateOperator?: string;
 	dataSource: DataSource;
 	searchText: string;
-	aggregateAttribute: string;
+	aggregateAttribute?: string;
 	tagType?: BaseAutocompleteData['type'];
+	isInfraMonitoring?: boolean;
 }

frontend/src/types/api/widgets/getQuery.ts

@@ -8,6 +8,10 @@ export interface PayloadProps {
 export type ListItem = { timestamp: string; data: Omit<ILog, 'timestamp'> };
 
 export interface QueryData {
+	lowerBoundSeries?: [number, string][];
+	upperBoundSeries?: [number, string][];
+	predictedSeries?: [number, string][];
+	anomalyScores?: [number, string][];
 	metric: {
 		[key: string]: string;
 	};
@@ -34,6 +38,11 @@ export interface QueryDataV3 {
 	quantity?: number;
 	unitPrice?: number;
 	unit?: string;
+	lowerBoundSeries?: SeriesItem[] | null;
+	upperBoundSeries?: SeriesItem[] | null;
+	predictedSeries?: SeriesItem[] | null;
+	anomalyScores?: SeriesItem[] | null;
+	isAnomaly?: boolean;
 }
 
 export interface Props {

frontend/src/types/common/queryBuilder.ts

@@ -153,6 +153,7 @@ export enum LogsAggregatorOperator {
 }
 
 export enum QueryFunctionsTypes {
+	ANOMALY = 'anomaly',
 	CUTOFF_MIN = 'cutOffMin',
 	CUTOFF_MAX = 'cutOffMax',
 	CLAMP_MIN = 'clampMin',

frontend/src/utils/permission/index.ts

@@ -103,4 +103,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	SHORTCUTS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	INTEGRATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_TOP_LEVEL_OPERATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	INFRASTRUCTURE_MONITORING_HOSTS: ['ADMIN', 'EDITOR', 'VIEWER'],
 };

go.mod

@@ -8,7 +8,7 @@ require (
 	github.com/ClickHouse/clickhouse-go/v2 v2.25.0
 	github.com/DATA-DOG/go-sqlmock v1.5.2
 	github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd
-	github.com/SigNoz/signoz-otel-collector v0.102.10
+	github.com/SigNoz/signoz-otel-collector v0.102.12
 	github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974
 	github.com/SigNoz/zap_otlp/zap_otlp_sync v0.0.0-20230822164844-1b861a431974
 	github.com/antonmedv/expr v1.15.3

go.sum

@@ -70,8 +70,8 @@ github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd h1:Bk43AsDYe0fhkb
 github.com/SigNoz/govaluate v0.0.0-20240203125216-988004ccc7fd/go.mod h1:nxRcH/OEdM8QxzH37xkGzomr1O0JpYBRS6pwjsWW6Pc=
 github.com/SigNoz/prometheus v1.12.0 h1:+BXeIHyMOOWWa+xjhJ+x80JFva7r1WzWIfIhQ5PUmIE=
 github.com/SigNoz/prometheus v1.12.0/go.mod h1:EqNM27OwmPfqMUk+E+XG1L9rfDFcyXnzzDrg0EPOfxA=
-github.com/SigNoz/signoz-otel-collector v0.102.10 h1:1zjU31OcRZL6fS0IIag8LA8bdhP4S28dzovDwuOg7Lg=
-github.com/SigNoz/signoz-otel-collector v0.102.10/go.mod h1:APoBVD4aRu9vIny1vdzZSi2wPY3elyjHA/I/rh1hKfs=
+github.com/SigNoz/signoz-otel-collector v0.102.12 h1:5yY0IBtNz6SHMzKzwHmKfIx99Ij8mr72nDI2Xi08pDQ=
+github.com/SigNoz/signoz-otel-collector v0.102.12/go.mod h1:tcNyU+NSn7ZkzZcLa+k+dJIPOPV+CjHn3+z1SICAfdA=
 github.com/SigNoz/zap_otlp v0.1.0 h1:T7rRcFN87GavY8lDGZj0Z3Xv6OhJA6Pj3I9dNPmqvRc=
 github.com/SigNoz/zap_otlp v0.1.0/go.mod h1:lcHvbDbRgvDnPxo9lDlaL1JK2PyOyouP/C3ynnYIvyo=
 github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974 h1:PKVgdf83Yw+lZJbFtNGBgqXiXNf3+kOXW2qZ7Ms7OaY=

pkg/query-service/README.md

@@ -13,7 +13,7 @@ https://github.com/SigNoz/signoz/blob/main/CONTRIBUTING.md#to-run-clickhouse-set
 - Change the alertmanager section in `signoz/deploy/docker/clickhouse-setup/docker-compose.yaml` as follows:
 ```console
 alertmanager:
-    image: signoz/alertmanager:0.23.5
+    image: signoz/alertmanager:0.23.7
     volumes:
       - ./data/alertmanager:/data
     expose:

pkg/query-service/app/http_handler.go

@@ -112,7 +112,8 @@ type APIHandler struct {
 
 	UseLogsNewSchema bool
 
-	hostsRepo *inframetrics.HostsRepo
+	hostsRepo     *inframetrics.HostsRepo
+	processesRepo *inframetrics.ProcessesRepo
 }
 
 type APIHandlerOpts struct {
@@ -183,6 +184,7 @@ func NewAPIHandler(opts APIHandlerOpts) (*APIHandler, error) {
 	querierv2 := querierV2.NewQuerier(querierOptsV2)
 
 	hostsRepo := inframetrics.NewHostsRepo(opts.Reader, querierv2)
+	processesRepo := inframetrics.NewProcessesRepo(opts.Reader, querierv2)
 
 	aH := &APIHandler{
 		reader:                        opts.Reader,
@@ -202,6 +204,7 @@ func NewAPIHandler(opts APIHandlerOpts) (*APIHandler, error) {
 		querierV2:                     querierv2,
 		UseLogsNewSchema:              opts.UseLogsNewSchema,
 		hostsRepo:                     hostsRepo,
+		processesRepo:                 processesRepo,
 	}
 
 	logsQueryBuilder := logsv3.PrepareLogsQuery
@@ -351,10 +354,15 @@ func (aH *APIHandler) RegisterQueryRangeV3Routes(router *mux.Router, am *AuthMid
 }
 
 func (aH *APIHandler) RegisterInfraMetricsRoutes(router *mux.Router, am *AuthMiddleware) {
-	subRouter := router.PathPrefix("/api/v1/hosts").Subrouter()
-	subRouter.HandleFunc("/attribute_keys", am.ViewAccess(aH.getHostAttributeKeys)).Methods(http.MethodGet)
-	subRouter.HandleFunc("/attribute_values", am.ViewAccess(aH.getHostAttributeValues)).Methods(http.MethodGet)
-	subRouter.HandleFunc("/list", am.ViewAccess(aH.getHostList)).Methods(http.MethodPost)
+	hostsSubRouter := router.PathPrefix("/api/v1/hosts").Subrouter()
+	hostsSubRouter.HandleFunc("/attribute_keys", am.ViewAccess(aH.getHostAttributeKeys)).Methods(http.MethodGet)
+	hostsSubRouter.HandleFunc("/attribute_values", am.ViewAccess(aH.getHostAttributeValues)).Methods(http.MethodGet)
+	hostsSubRouter.HandleFunc("/list", am.ViewAccess(aH.getHostList)).Methods(http.MethodPost)
+
+	processesSubRouter := router.PathPrefix("/api/v1/processes").Subrouter()
+	processesSubRouter.HandleFunc("/attribute_keys", am.ViewAccess(aH.getProcessAttributeKeys)).Methods(http.MethodGet)
+	processesSubRouter.HandleFunc("/attribute_values", am.ViewAccess(aH.getProcessAttributeValues)).Methods(http.MethodGet)
+	processesSubRouter.HandleFunc("/list", am.ViewAccess(aH.getProcessList)).Methods(http.MethodPost)
 }
 
 func (aH *APIHandler) RegisterWebSocketPaths(router *mux.Router, am *AuthMiddleware) {

pkg/query-service/app/infra.go

@@ -69,3 +69,56 @@ func (aH *APIHandler) getHostList(w http.ResponseWriter, r *http.Request) {
 	// write response
 	aH.Respond(w, hostList)
 }
+
+func (aH *APIHandler) getProcessAttributeKeys(w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	req, err := parseFilterAttributeKeyRequest(r)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	keys, err := aH.processesRepo.GetProcessAttributeKeys(ctx, *req)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	aH.Respond(w, keys)
+}
+
+func (aH *APIHandler) getProcessAttributeValues(w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	req, err := parseFilterAttributeValueRequest(r)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	values, err := aH.processesRepo.GetProcessAttributeValues(ctx, *req)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	aH.Respond(w, values)
+}
+
+func (aH *APIHandler) getProcessList(w http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+	req := model.ProcessListRequest{}
+
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	hostList, err := aH.processesRepo.GetProcessList(ctx, req)
+	if err != nil {
+		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, nil)
+		return
+	}
+
+	aH.Respond(w, hostList)
+}

pkg/query-service/app/inframetrics/hosts.go

@@ -394,13 +394,6 @@ func (h *HostsRepo) getHostsForQuery(ctx context.Context,
 		records = append(records, record)
 	}
 
-	if req.Offset > 0 {
-		records = records[req.Offset:]
-	}
-	if req.Limit > 0 && len(records) > req.Limit {
-		records = records[:req.Limit]
-	}
-
 	return records, nil
 }
 
@@ -417,6 +410,10 @@ func dedupRecords(records []model.HostListRecord) []model.HostListRecord {
 }
 
 func (h *HostsRepo) GetHostList(ctx context.Context, req model.HostListRequest) (model.HostListResponse, error) {
+	if req.Limit == 0 {
+		req.Limit = 10
+	}
+
 	resp := model.HostListResponse{
 		Type: "list",
 	}
@@ -436,6 +433,16 @@ func (h *HostsRepo) GetHostList(ctx context.Context, req model.HostListRequest)
 	// are present in the response. we need to dedup the results.
 	records = dedupRecords(records)
 
+	resp.Total = len(records)
+
+	if req.Offset > 0 {
+		records = records[req.Offset:]
+	}
+	if req.Limit > 0 && len(records) > req.Limit {
+		records = records[:req.Limit]
+	}
+	resp.Records = records
+
 	if len(req.GroupBy) > 0 {
 		groups := []model.HostListGroup{}
 
@@ -505,8 +512,6 @@ func (h *HostsRepo) GetHostList(ctx context.Context, req model.HostListRequest)
 		resp.Groups = groups
 		resp.Type = "grouped_list"
 	}
-	resp.Records = records
-	resp.Total = len(records)
 
 	return resp, nil
 }

pkg/query-service/app/inframetrics/processes.go

@@ -0,0 +1,334 @@
+package inframetrics
+
+import (
+	"context"
+	"fmt"
+	"math"
+	"strings"
+
+	"go.signoz.io/signoz/pkg/query-service/app/metrics/v4/helpers"
+	"go.signoz.io/signoz/pkg/query-service/common"
+	"go.signoz.io/signoz/pkg/query-service/interfaces"
+	"go.signoz.io/signoz/pkg/query-service/model"
+	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
+	"go.signoz.io/signoz/pkg/query-service/postprocess"
+	"golang.org/x/exp/slices"
+)
+
+type ProcessesRepo struct {
+	reader    interfaces.Reader
+	querierV2 interfaces.Querier
+}
+
+func NewProcessesRepo(reader interfaces.Reader, querierV2 interfaces.Querier) *ProcessesRepo {
+	return &ProcessesRepo{reader: reader, querierV2: querierV2}
+}
+
+func (p *ProcessesRepo) GetProcessAttributeKeys(ctx context.Context, req v3.FilterAttributeKeyRequest) (*v3.FilterAttributeKeyResponse, error) {
+	// TODO(srikanthccv): remove hardcoded metric name and support keys from any system metric
+	req.DataSource = v3.DataSourceMetrics
+	req.AggregateAttribute = "process_memory_usage"
+	if req.Limit == 0 {
+		req.Limit = 50
+	}
+
+	attributeKeysResponse, err := p.reader.GetMetricAttributeKeys(ctx, &req)
+	if err != nil {
+		return nil, err
+	}
+
+	// TODO(srikanthccv): only return resource attributes when we have a way to
+	// distinguish between resource attributes and other attributes.
+	filteredKeys := []v3.AttributeKey{}
+	for _, key := range attributeKeysResponse.AttributeKeys {
+		if slices.Contains(pointAttrsToIgnore, key.Key) {
+			continue
+		}
+		filteredKeys = append(filteredKeys, key)
+	}
+
+	return &v3.FilterAttributeKeyResponse{AttributeKeys: filteredKeys}, nil
+}
+
+func (p *ProcessesRepo) GetProcessAttributeValues(ctx context.Context, req v3.FilterAttributeValueRequest) (*v3.FilterAttributeValueResponse, error) {
+	req.DataSource = v3.DataSourceMetrics
+	req.AggregateAttribute = "process_memory_usage"
+	if req.Limit == 0 {
+		req.Limit = 50
+	}
+
+	attributeValuesResponse, err := p.reader.GetMetricAttributeValues(ctx, &req)
+	if err != nil {
+		return nil, err
+	}
+	return attributeValuesResponse, nil
+}
+
+func getGroupKeyForProcesses(record model.ProcessListRecord, groupBy []v3.AttributeKey) string {
+	groupKey := ""
+	for _, key := range groupBy {
+		groupKey += fmt.Sprintf("%s=%s,", key.Key, record.Meta[key.Key])
+	}
+	return groupKey
+}
+
+func (p *ProcessesRepo) getMetadataAttributes(ctx context.Context,
+	req model.ProcessListRequest) (map[string]map[string]string, error) {
+	processAttrs := map[string]map[string]string{}
+
+	keysToAdd := []string{"process_pid", "process_executable_name", "process_command", "process_command_line"}
+	for _, key := range keysToAdd {
+		hasKey := false
+		for _, groupByKey := range req.GroupBy {
+			if groupByKey.Key == key {
+				hasKey = true
+				break
+			}
+		}
+		if !hasKey {
+			req.GroupBy = append(req.GroupBy, v3.AttributeKey{Key: key})
+		}
+	}
+
+	mq := v3.BuilderQuery{
+		AggregateAttribute: v3.AttributeKey{
+			Key:      "process_memory_usage",
+			DataType: v3.AttributeKeyDataTypeFloat64,
+		},
+		Temporality: v3.Cumulative,
+		GroupBy:     req.GroupBy,
+	}
+
+	query, err := helpers.PrepareTimeseriesFilterQuery(req.Start, req.End, &mq)
+	if err != nil {
+		return nil, err
+	}
+
+	// TODO(srikanthccv): remove this
+	// What is happening here?
+	// The `PrepareTimeseriesFilterQuery` uses the local time series table for sub-query because each fingerprint
+	// goes to same shard.
+	// However, in this case, we are interested in the attributes values across all the shards.
+	// So, we replace the local time series table with the distributed time series table.
+	// See `PrepareTimeseriesFilterQuery` for more details.
+	query = strings.Replace(query, ".time_series_v4", ".distributed_time_series_v4", 1)
+
+	attrsListResponse, err := p.reader.GetListResultV3(ctx, query)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, row := range attrsListResponse {
+		stringData := map[string]string{}
+		for key, value := range row.Data {
+			if str, ok := value.(string); ok {
+				stringData[key] = str
+			} else if strPtr, ok := value.(*string); ok {
+				stringData[key] = *strPtr
+			}
+		}
+
+		pid := stringData["process_pid"]
+		if _, ok := processAttrs[pid]; !ok {
+			processAttrs[pid] = map[string]string{}
+		}
+
+		for _, key := range req.GroupBy {
+			processAttrs[pid][key.Key] = stringData[key.Key]
+		}
+	}
+
+	return processAttrs, nil
+}
+
+func (p *ProcessesRepo) GetProcessList(ctx context.Context, req model.ProcessListRequest) (model.ProcessListResponse, error) {
+	if req.Limit == 0 {
+		req.Limit = 10
+	}
+
+	resp := model.ProcessListResponse{
+		Type: "list",
+	}
+
+	step := common.MinAllowedStepInterval(req.Start, req.End)
+
+	query := ProcessesTableListQuery.Clone()
+	if req.OrderBy != nil {
+		for _, q := range query.CompositeQuery.BuilderQueries {
+			q.OrderBy = []v3.OrderBy{*req.OrderBy}
+		}
+	}
+
+	query.Start = req.Start
+	query.End = req.End
+	query.Step = step
+
+	for _, query := range query.CompositeQuery.BuilderQueries {
+		query.StepInterval = step
+		if req.Filters != nil && len(req.Filters.Items) > 0 {
+			if query.Filters == nil {
+				query.Filters = &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{}}
+			}
+			query.Filters.Items = append(query.Filters.Items, req.Filters.Items...)
+		}
+	}
+
+	processAttrs, err := p.getMetadataAttributes(ctx, req)
+	if err != nil {
+		return resp, err
+	}
+
+	queryResponse, _, err := p.querierV2.QueryRange(ctx, query)
+	if err != nil {
+		return resp, err
+	}
+
+	type processTSInfo struct {
+		CpuTimeSeries    *v3.Series `json:"cpu_time_series"`
+		MemoryTimeSeries *v3.Series `json:"memory_time_series"`
+	}
+	processTSInfoMap := map[string]*processTSInfo{}
+
+	for _, result := range queryResponse {
+		for _, series := range result.Series {
+			pid := series.Labels["process_pid"]
+			if _, ok := processTSInfoMap[pid]; !ok {
+				processTSInfoMap[pid] = &processTSInfo{}
+			}
+		}
+	}
+
+	query.FormatForWeb = false
+	query.CompositeQuery.PanelType = v3.PanelTypeGraph
+
+	formulaResult, err := postprocess.PostProcessResult(queryResponse, query)
+	if err != nil {
+		return resp, err
+	}
+
+	for _, result := range formulaResult {
+		for _, series := range result.Series {
+			pid := series.Labels["process_pid"]
+			if _, ok := processTSInfoMap[pid]; !ok {
+				processTSInfoMap[pid] = &processTSInfo{}
+			}
+			loadSeries := *series
+			if result.QueryName == "F1" {
+				processTSInfoMap[pid].CpuTimeSeries = &loadSeries
+			} else if result.QueryName == "C" {
+				processTSInfoMap[pid].MemoryTimeSeries = &loadSeries
+			}
+		}
+	}
+
+	query.FormatForWeb = true
+	query.CompositeQuery.PanelType = v3.PanelTypeTable
+
+	formattedResponse, err := postprocess.PostProcessResult(queryResponse, query)
+	if err != nil {
+		return resp, err
+	}
+
+	if len(formattedResponse) == 0 {
+		return resp, nil
+	}
+
+	records := []model.ProcessListRecord{}
+
+	// there should be only one result in the response
+	processInfo := formattedResponse[0]
+
+	for _, row := range processInfo.Table.Rows {
+		record := model.ProcessListRecord{
+			ProcessCPU:    -1,
+			ProcessMemory: -1,
+		}
+
+		pid, ok := row.Data["process_pid"].(string)
+		if ok {
+			record.ProcessID = pid
+		}
+
+		processCPU, ok := row.Data["F1"].(float64)
+		if ok {
+			record.ProcessCPU = processCPU
+		}
+
+		processMemory, ok := row.Data["C"].(float64)
+		if ok {
+			record.ProcessMemory = processMemory
+		}
+		record.Meta = processAttrs[record.ProcessID]
+		if processTSInfoMap[record.ProcessID] != nil {
+			record.ProcessCPUTimeSeries = processTSInfoMap[record.ProcessID].CpuTimeSeries
+			record.ProcessMemoryTimeSeries = processTSInfoMap[record.ProcessID].MemoryTimeSeries
+		}
+		record.ProcessName = record.Meta["process_executable_name"]
+		record.ProcessCMD = record.Meta["process_command"]
+		record.ProcessCMDLine = record.Meta["process_command_line"]
+		records = append(records, record)
+	}
+
+	resp.Total = len(records)
+
+	if req.Offset > 0 {
+		records = records[req.Offset:]
+	}
+	if req.Limit > 0 && len(records) > req.Limit {
+		records = records[:req.Limit]
+	}
+	resp.Records = records
+
+	if len(req.GroupBy) > 0 {
+		groups := []model.ProcessListGroup{}
+
+		groupMap := make(map[string][]model.ProcessListRecord)
+		for _, record := range records {
+			groupKey := getGroupKeyForProcesses(record, req.GroupBy)
+			if _, ok := groupMap[groupKey]; !ok {
+				groupMap[groupKey] = []model.ProcessListRecord{record}
+			} else {
+				groupMap[groupKey] = append(groupMap[groupKey], record)
+			}
+		}
+
+		for _, records := range groupMap {
+			var avgCPU, avgMemory float64
+			var validCPU, validMemory int
+			for _, record := range records {
+				if !math.IsNaN(record.ProcessCPU) {
+					avgCPU += record.ProcessCPU
+					validCPU++
+				}
+				if !math.IsNaN(record.ProcessMemory) {
+					avgMemory += record.ProcessMemory
+					validMemory++
+				}
+			}
+			avgCPU /= float64(validCPU)
+			avgMemory /= float64(validMemory)
+
+			// take any record and make it as the group meta
+			firstRecord := records[0]
+			var groupValues []string
+			for _, key := range req.GroupBy {
+				groupValues = append(groupValues, firstRecord.Meta[key.Key])
+			}
+			processNames := []string{}
+			for _, record := range records {
+				processNames = append(processNames, record.ProcessName)
+			}
+
+			groups = append(groups, model.ProcessListGroup{
+				GroupValues:    groupValues,
+				GroupCPUAvg:    avgCPU,
+				GroupMemoryAvg: avgMemory,
+				ProcessNames:   processNames,
+			})
+		}
+		resp.Groups = groups
+		resp.Type = "grouped_list"
+	}
+
+	return resp, nil
+}

pkg/query-service/app/inframetrics/table_list_query.go

@@ -335,3 +335,69 @@ var NonK8STableListQuery = v3.QueryRangeParamsV3{
 	Version:      "v4",
 	FormatForWeb: true,
 }
+
+var ProcessesTableListQuery = v3.QueryRangeParamsV3{
+	CompositeQuery: &v3.CompositeQuery{
+		BuilderQueries: map[string]*v3.BuilderQuery{
+			"A": {
+				QueryName:  "A",
+				DataSource: v3.DataSourceMetrics,
+				AggregateAttribute: v3.AttributeKey{
+					Key:      "process_cpu_time",
+					DataType: v3.AttributeKeyDataTypeFloat64,
+				},
+				Temporality: v3.Cumulative,
+				Filters: &v3.FilterSet{
+					Operator: "AND",
+					Items:    []v3.FilterItem{},
+				},
+				GroupBy: []v3.AttributeKey{
+					{
+						Key:      "process_pid",
+						DataType: v3.AttributeKeyDataTypeString,
+						Type:     v3.AttributeKeyTypeResource,
+					},
+				},
+				Expression:       "A",
+				ReduceTo:         v3.ReduceToOperatorAvg,
+				TimeAggregation:  v3.TimeAggregationRate,
+				SpaceAggregation: v3.SpaceAggregationSum,
+				Disabled:         true,
+			},
+			"F1": {
+				QueryName:  "F1",
+				Expression: "A",
+				Legend:     "Process CPU Usage (%)",
+			},
+			"C": {
+				QueryName:  "C",
+				DataSource: v3.DataSourceMetrics,
+				AggregateAttribute: v3.AttributeKey{
+					Key:      "process_memory_usage",
+					DataType: v3.AttributeKeyDataTypeFloat64,
+				},
+				Temporality: v3.Cumulative,
+				Filters: &v3.FilterSet{
+					Operator: "AND",
+					Items:    []v3.FilterItem{},
+				},
+				GroupBy: []v3.AttributeKey{
+					{
+						Key:      "process_pid",
+						DataType: v3.AttributeKeyDataTypeString,
+						Type:     v3.AttributeKeyTypeResource,
+					},
+				},
+				Expression:       "C",
+				ReduceTo:         v3.ReduceToOperatorAvg,
+				TimeAggregation:  v3.TimeAggregationAvg,
+				SpaceAggregation: v3.SpaceAggregationSum,
+				Disabled:         false,
+			},
+		},
+		PanelType: v3.PanelTypeTable,
+		QueryType: v3.QueryTypeBuilder,
+	},
+	Version:      "v4",
+	FormatForWeb: true,
+}

pkg/query-service/app/logparsingpipeline/collector_config.go

@@ -19,24 +19,28 @@ var lockLogsPipelineSpec sync.RWMutex
 // check if the processors already exist
 // if yes then update the processor.
 // if something doesn't exists then remove it.
-func buildLogParsingProcessors(agentConf, parsingProcessors map[string]interface{}) error {
+func updateProcessorConfigsInCollectorConf(
+	collectorConf map[string]interface{},
+	signozPipelineProcessors map[string]interface{},
+) error {
 	agentProcessors := map[string]interface{}{}
-	if agentConf["processors"] != nil {
-		agentProcessors = (agentConf["processors"]).(map[string]interface{})
+	if collectorConf["processors"] != nil {
+		agentProcessors = (collectorConf["processors"]).(map[string]interface{})
 	}
 
 	exists := map[string]struct{}{}
-	for key, params := range parsingProcessors {
+	for key, params := range signozPipelineProcessors {
 		agentProcessors[key] = params
 		exists[key] = struct{}{}
 	}
-	// remove the old unwanted processors
+	// remove the old unwanted pipeline processors
 	for k := range agentProcessors {
-		if _, ok := exists[k]; !ok && strings.HasPrefix(k, constants.LogsPPLPfx) {
+		_, isInDesiredPipelineProcs := exists[k]
+		if hasSignozPipelineProcessorPrefix(k) && !isInDesiredPipelineProcs {
 			delete(agentProcessors, k)
 		}
 	}
-	agentConf["processors"] = agentProcessors
+	collectorConf["processors"] = agentProcessors
 	return nil
 }
 
@@ -65,21 +69,24 @@ func getOtelPipelineFromConfig(config map[string]interface{}) (*otelPipeline, er
 	return &p, nil
 }
 
-func buildLogsProcessors(current []string, logsParserPipeline []string) ([]string, error) {
+func buildCollectorPipelineProcessorsList(
+	currentCollectorProcessors []string,
+	signozPipelineProcessorNames []string,
+) ([]string, error) {
 	lockLogsPipelineSpec.Lock()
 	defer lockLogsPipelineSpec.Unlock()
 
 	exists := map[string]struct{}{}
-	for _, v := range logsParserPipeline {
+	for _, v := range signozPipelineProcessorNames {
 		exists[v] = struct{}{}
 	}
 
 	// removed the old processors which are not used
 	var pipeline []string
-	for _, v := range current {
-		k := v
-		if _, ok := exists[k]; ok || !strings.HasPrefix(k, constants.LogsPPLPfx) {
-			pipeline = append(pipeline, v)
+	for _, procName := range currentCollectorProcessors {
+		_, isInDesiredPipelineProcs := exists[procName]
+		if isInDesiredPipelineProcs || !hasSignozPipelineProcessorPrefix(procName) {
+			pipeline = append(pipeline, procName)
 		}
 	}
 
@@ -96,7 +103,7 @@ func buildLogsProcessors(current []string, logsParserPipeline []string) ([]strin
 	existingVsSpec := map[int]int{}
 
 	// go through plan and map its elements to current positions in effective config
-	for i, m := range logsParserPipeline {
+	for i, m := range signozPipelineProcessorNames {
 		if loc, ok := existing[m]; ok {
 			specVsExistingMap[i] = loc
 			existingVsSpec[loc] = i
@@ -106,11 +113,11 @@ func buildLogsProcessors(current []string, logsParserPipeline []string) ([]strin
 	lastMatched := 0
 	newPipeline := []string{}
 
-	for i := 0; i < len(logsParserPipeline); i++ {
-		m := logsParserPipeline[i]
+	for i := 0; i < len(signozPipelineProcessorNames); i++ {
+		m := signozPipelineProcessorNames[i]
 		if loc, ok := specVsExistingMap[i]; ok {
 			for j := lastMatched; j < loc; j++ {
-				if strings.HasPrefix(pipeline[j], constants.LogsPPLPfx) {
+				if hasSignozPipelineProcessorPrefix(pipeline[j]) {
 					delete(specVsExistingMap, existingVsSpec[j])
 				} else {
 					newPipeline = append(newPipeline, pipeline[j])
@@ -159,13 +166,13 @@ func GenerateCollectorConfigWithPipelines(
 	config []byte,
 	pipelines []Pipeline,
 ) ([]byte, *coreModel.ApiError) {
-	var c map[string]interface{}
-	err := yaml.Unmarshal([]byte(config), &c)
+	var collectorConf map[string]interface{}
+	err := yaml.Unmarshal([]byte(config), &collectorConf)
 	if err != nil {
 		return nil, coreModel.BadRequest(err)
 	}
 
-	processors, procNames, err := PreparePipelineProcessor(pipelines)
+	signozPipelineProcessors, signozPipelineProcNames, err := PreparePipelineProcessor(pipelines)
 	if err != nil {
 		return nil, coreModel.BadRequest(errors.Wrap(
 			err, "could not prepare otel collector processors for log pipelines",
@@ -174,8 +181,8 @@ func GenerateCollectorConfigWithPipelines(
 
 	// Escape any `$`s as `$$` in config generated for pipelines, to ensure any occurrences
 	// like $data do not end up being treated as env vars when loading collector config.
-	for _, procName := range procNames {
-		procConf := processors[procName]
+	for _, procName := range signozPipelineProcNames {
+		procConf := signozPipelineProcessors[procName]
 		serializedProcConf, err := yaml.Marshal(procConf)
 		if err != nil {
 			return nil, coreModel.InternalError(fmt.Errorf(
@@ -194,14 +201,14 @@ func GenerateCollectorConfigWithPipelines(
 			))
 		}
 
-		processors[procName] = escapedConf
+		signozPipelineProcessors[procName] = escapedConf
 	}
 
 	// Add processors to unmarshaled collector config `c`
-	buildLogParsingProcessors(c, processors)
+	updateProcessorConfigsInCollectorConf(collectorConf, signozPipelineProcessors)
 
 	// build the new processor list in service.pipelines.logs
-	p, err := getOtelPipelineFromConfig(c)
+	p, err := getOtelPipelineFromConfig(collectorConf)
 	if err != nil {
 		return nil, coreModel.BadRequest(err)
 	}
@@ -211,16 +218,20 @@ func GenerateCollectorConfigWithPipelines(
 		))
 	}
 
-	updatedProcessorList, _ := buildLogsProcessors(p.Pipelines.Logs.Processors, procNames)
+	updatedProcessorList, _ := buildCollectorPipelineProcessorsList(p.Pipelines.Logs.Processors, signozPipelineProcNames)
 	p.Pipelines.Logs.Processors = updatedProcessorList
 
 	// add the new processor to the data ( no checks required as the keys will exists)
-	c["service"].(map[string]interface{})["pipelines"].(map[string]interface{})["logs"] = p.Pipelines.Logs
+	collectorConf["service"].(map[string]interface{})["pipelines"].(map[string]interface{})["logs"] = p.Pipelines.Logs
 
-	updatedConf, err := yaml.Marshal(c)
+	updatedConf, err := yaml.Marshal(collectorConf)
 	if err != nil {
 		return nil, coreModel.BadRequest(err)
 	}
 
 	return updatedConf, nil
 }
+
+func hasSignozPipelineProcessorPrefix(procName string) bool {
+	return strings.HasPrefix(procName, constants.LogsPPLPfx) || strings.HasPrefix(procName, constants.OldLogsPPLPfx)
+}

pkg/query-service/app/logparsingpipeline/collector_config_test.go

@@ -1,12 +1,14 @@
 package logparsingpipeline
 
 import (
+	"context"
 	"fmt"
 	"testing"
 
 	. "github.com/smartystreets/goconvey/convey"
 	"github.com/stretchr/testify/require"
 	"go.signoz.io/signoz/pkg/query-service/constants"
+	"go.signoz.io/signoz/pkg/query-service/model"
 	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 	"gopkg.in/yaml.v3"
 )
@@ -94,7 +96,7 @@ var buildProcessorTestData = []struct {
 func TestBuildLogParsingProcessors(t *testing.T) {
 	for _, test := range buildProcessorTestData {
 		Convey(test.Name, t, func() {
-			err := buildLogParsingProcessors(test.agentConf, test.pipelineProcessor)
+			err := updateProcessorConfigsInCollectorConf(test.agentConf, test.pipelineProcessor)
 			So(err, ShouldBeNil)
 			So(test.agentConf, ShouldResemble, test.outputConf)
 		})
@@ -200,7 +202,7 @@ var BuildLogsPipelineTestData = []struct {
 func TestBuildLogsPipeline(t *testing.T) {
 	for _, test := range BuildLogsPipelineTestData {
 		Convey(test.Name, t, func() {
-			v, err := buildLogsProcessors(test.currentPipeline, test.logsPipeline)
+			v, err := buildCollectorPipelineProcessorsList(test.currentPipeline, test.logsPipeline)
 			So(err, ShouldBeNil)
 			fmt.Println(test.Name, "\n", test.currentPipeline, "\n", v, "\n", test.expectedPipeline)
 			So(v, ShouldResemble, test.expectedPipeline)
@@ -293,3 +295,74 @@ func TestPipelineAliasCollisionsDontResultInDuplicateCollectorProcessors(t *test
 	)
 
 }
+
+func TestPipelineRouterWorksEvenIfFirstOpIsDisabled(t *testing.T) {
+	require := require.New(t)
+
+	testPipelines := []Pipeline{
+		{
+			OrderId: 1,
+			Name:    "pipeline1",
+			Alias:   "pipeline1",
+			Enabled: true,
+			Filter: &v3.FilterSet{
+				Operator: "AND",
+				Items: []v3.FilterItem{
+					{
+						Key: v3.AttributeKey{
+							Key:      "method",
+							DataType: v3.AttributeKeyDataTypeString,
+							Type:     v3.AttributeKeyTypeTag,
+						},
+						Operator: "=",
+						Value:    "GET",
+					},
+				},
+			},
+			Config: []PipelineOperator{
+				{
+					OrderId: 1,
+					ID:      "add",
+					Type:    "add",
+					Field:   "attributes.test",
+					Value:   "val",
+					Enabled: false,
+					Name:    "test add",
+				},
+				{
+					OrderId: 2,
+					ID:      "add2",
+					Type:    "add",
+					Field:   "attributes.test2",
+					Value:   "val2",
+					Enabled: true,
+					Name:    "test add 2",
+				},
+			},
+		},
+	}
+
+	result, collectorWarnAndErrorLogs, err := SimulatePipelinesProcessing(
+		context.Background(),
+		testPipelines,
+		[]model.SignozLog{
+			makeTestSignozLog(
+				"test log body",
+				map[string]any{
+					"method": "GET",
+				},
+			),
+		},
+	)
+
+	require.Nil(err)
+	require.Equal(0, len(collectorWarnAndErrorLogs))
+	require.Equal(1, len(result))
+
+	require.Equal(
+		map[string]string{
+			"method": "GET",
+			"test2":  "val2",
+		}, result[0].Attributes_string,
+	)
+}

pkg/query-service/app/logparsingpipeline/pipelineBuilder.go

@@ -49,7 +49,7 @@ func PreparePipelineProcessor(pipelines []Pipeline) (map[string]interface{}, []s
 				Type: "router",
 				Routes: &[]Route{
 					{
-						Output: v.Config[0].ID,
+						Output: operators[0].ID,
 						Expr:   filterExpr,
 					},
 				},

pkg/query-service/app/logparsingpipeline/preview.go

@@ -7,7 +7,7 @@ import (
 	"time"
 
 	_ "github.com/SigNoz/signoz-otel-collector/pkg/parser/grok"
-	"github.com/open-telemetry/opentelemetry-collector-contrib/processor/logstransformprocessor"
+	"github.com/SigNoz/signoz-otel-collector/processor/signozlogspipelineprocessor"
 	"github.com/pkg/errors"
 	"go.opentelemetry.io/collector/pdata/pcommon"
 	"go.opentelemetry.io/collector/pdata/plog"
@@ -42,7 +42,7 @@ func SimulatePipelinesProcessing(
 	simulatorInputPLogs := SignozLogsToPLogs(logs)
 
 	processorFactories, err := processor.MakeFactoryMap(
-		logstransformprocessor.NewFactory(),
+		signozlogspipelineprocessor.NewFactory(),
 	)
 	if err != nil {
 		return nil, nil, model.InternalError(errors.Wrap(

pkg/query-service/constants/constants.go

@@ -346,7 +346,9 @@ var ReservedColumnTargetAliases = map[string]struct{}{
 }
 
 // logsPPLPfx is a short constant for logsPipelinePrefix
-const LogsPPLPfx = "logstransform/pipeline_"
+// TODO(Raj): Remove old prefix after new processor based pipelines have been rolled out
+const LogsPPLPfx = "signozlogspipeline/pipeline_"
+const OldLogsPPLPfx = "logstransform/pipeline_"
 
 const IntegrationPipelineIdPrefix = "integration"
 

pkg/query-service/model/infra.go

@@ -44,3 +44,39 @@ type HostListResponse struct {
 	Groups  []HostListGroup  `json:"groups"`
 	Total   int              `json:"total"`
 }
+
+type ProcessListRequest struct {
+	Start   int64             `json:"start"` // epoch time in ms
+	End     int64             `json:"end"`   // epoch time in ms
+	Filters *v3.FilterSet     `json:"filters"`
+	GroupBy []v3.AttributeKey `json:"groupBy"`
+	OrderBy *v3.OrderBy       `json:"orderBy"`
+	Offset  int               `json:"offset"`
+	Limit   int               `json:"limit"`
+}
+
+type ProcessListResponse struct {
+	Type    string              `json:"type"`
+	Records []ProcessListRecord `json:"records"`
+	Groups  []ProcessListGroup  `json:"groups"`
+	Total   int                 `json:"total"`
+}
+
+type ProcessListRecord struct {
+	ProcessName             string            `json:"processName"`
+	ProcessID               string            `json:"processID"`
+	ProcessCMD              string            `json:"processCMD"`
+	ProcessCMDLine          string            `json:"processCMDLine"`
+	ProcessCPU              float64           `json:"processCPU"`
+	ProcessCPUTimeSeries    *v3.Series        `json:"processCPUTimeSeries"`
+	ProcessMemory           float64           `json:"processMemory"`
+	ProcessMemoryTimeSeries *v3.Series        `json:"processMemoryTimeSeries"`
+	Meta                    map[string]string `json:"-"`
+}
+
+type ProcessListGroup struct {
+	GroupValues    []string `json:"groupValues"`
+	GroupCPUAvg    float64  `json:"groupCPUAvg"`
+	GroupMemoryAvg float64  `json:"groupMemoryAvg"`
+	ProcessNames   []string `json:"processNames"`
+}

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

@@ -138,7 +138,7 @@ services:
   #     - ./data/clickhouse-3/:/var/lib/clickhouse/
 
   alertmanager:
-    image: signoz/alertmanager:0.23.5
+    image: signoz/alertmanager:0.23.7
     container_name: signoz-alertmanager
     volumes:
       - ./data/alertmanager:/data
@@ -205,7 +205,7 @@ services:
       #   condition: service_healthy
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.102.10
+    image: signoz/signoz-otel-collector:0.102.12
     container_name: signoz-otel-collector
     command:
       [

pkg/query-service/tests/test-deploy/otel-collector-config.yaml

@@ -103,8 +103,8 @@ extensions:
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/signoz_traces
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
-    low_cardinal_exception_grouping: ${LOW_CARDINAL_EXCEPTION_GROUPING}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
     resource_to_telemetry_conversion:
@@ -113,7 +113,7 @@ exporters:
     endpoint: 0.0.0.0:8889
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
-    docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
     use_new_schema: true
   # logging: {}