From 8d9a865751ad723335db36edf7dae319955577da Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Sat, 20 Sep 2025 16:34:20 +0530
Subject: [PATCH] feat: enable users to query meter specific data in alerts

---
 .../QueryBuilderV2/QueryBuilderV2.styles.scss |  2 +-
 .../QueryBuilderV2/QueryBuilderV2.tsx         |  6 ++++
 .../MetricsSelect/MetricsSelect.styles.scss   |  9 ++++--
 .../QueryV2/MetricsSelect/MetricsSelect.tsx   | 32 +++++++++++++++++--
 .../QueryBuilderV2/QueryV2/QueryV2.tsx        | 12 +++++--
 .../container/FormAlertRules/QuerySection.tsx |  9 ++++++
 .../MeterExplorer/Breakdown/BreakDown.tsx     |  2 +-
 .../QueryBuilder/QueryBuilder.interfaces.ts   |  2 ++
 8 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
index fcfafc3688cc..e0195ef0fed5 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -398,7 +398,7 @@
 	}
 
 	.qb-search-container {
-		.metrics-select-container {
+		.metrics-container {
 			margin-bottom: 12px;
 		}
 	}
diff --git a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
index 7be666c27084..086cf490bf93 100644
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -22,6 +22,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
 }: QueryBuilderProps): JSX.Element {
 	const {
 		currentQuery,
@@ -175,6 +177,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
+							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
+							signalSourceChangeEnabled={signalSourceChangeEnabled}
 						/>
 					) : (
 						currentQuery.builder.queryData.map((query, index) => (
@@ -194,6 +198,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
 								signalSource={config?.signalSource || ''}
+								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
+								signalSourceChangeEnabled={signalSourceChangeEnabled}
 							/>
 						))
 					)}
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
index 9038e8ce433a..6d6638ae6020 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
@@ -1,5 +1,10 @@
-.metrics-select-container {
+.metrics-source-select-container {
 	margin-bottom: 8px;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 8px;
+	width: 100%;
 
 	.ant-select-selector {
 		width: 100%;
@@ -42,7 +47,7 @@
 }
 
 .lightMode {
-	.metrics-select-container {
+	.metrics-source-select-container {
 		.ant-select-selector {
 			border: 1px solid var(--bg-vanilla-300) !important;
 			background: var(--bg-vanilla-100);
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
index b04e1d303ffc..e52afb2a1010 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx
@@ -1,20 +1,31 @@
 import './MetricsSelect.styles.scss';
 
+import { Select } from 'antd';
 import { AggregatorFilter } from 'container/QueryBuilder/filters';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { SelectOption } from 'types/common/select';
+
+export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
+	{ value: 'metrics', label: 'Metrics' },
+	{ value: 'meter', label: 'Meter' },
+];
 
 export const MetricsSelect = memo(function MetricsSelect({
 	query,
 	index,
 	version,
 	signalSource,
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
 }: {
 	query: IBuilderQuery;
 	index: number;
 	version: string;
 	signalSource: 'meter' | '';
+	onSignalSourceChange: (value: string) => void;
+	signalSourceChangeEnabled: boolean;
 }): JSX.Element {
 	const { handleChangeAggregatorAttribute } = useQueryOperations({
 		index,
@@ -22,8 +33,25 @@ export const MetricsSelect = memo(function MetricsSelect({
 		entityVersion: version,
 	});
 
+	const [source, setSource] = useState<string>(
+		signalSource === 'meter' ? 'meter' : 'metrics',
+	);
+
+	const handleSignalSourceChange = (value: string): void => {
+		setSource(value);
+		onSignalSourceChange(value);
+	};
+
 	return (
-		<div className="metrics-select-container">
+		<div className="metrics-source-select-container">
+			<Select
+				className="source-selector"
+				placeholder="Source"
+				options={SOURCE_OPTIONS}
+				value={source}
+				onChange={handleSignalSourceChange}
+				disabled={!signalSourceChangeEnabled}
+			/>
 			<AggregatorFilter
 				onChange={handleChangeAggregatorAttribute}
 				query={query}
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
index b628164efe51..72649c196e00 100644
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -33,7 +33,13 @@ export const QueryV2 = memo(function QueryV2({
 	showOnlyWhereClause = false,
 	signalSource = '',
 	isMultiQueryAllowed = false,
-}: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
+}: QueryProps & {
+	ref: React.RefObject<HTMLDivElement>;
+	onSignalSourceChange: (value: string) => void;
+	signalSourceChangeEnabled: boolean;
+}): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
@@ -207,12 +213,14 @@ export const QueryV2 = memo(function QueryV2({
 					<div className="qb-elements-container">
 						<div className="qb-search-container">
 							{dataSource === DataSource.METRICS && (
-								<div className="metrics-select-container">
+								<div className="metrics-container">
 									<MetricsSelect
 										query={query}
 										index={index}
 										version={ENTITY_VERSION_V5}
 										signalSource={signalSource as 'meter' | ''}
+										onSignalSourceChange={onSignalSourceChange}
+										signalSourceChangeEnabled={signalSourceChangeEnabled}
 									/>
 								</div>
 							)}
diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx
index 1238a8501551..a1ec87fdd28a 100644
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -36,6 +36,7 @@ function QuerySection({
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
 	const [currentTab, setCurrentTab] = useState(queryCategory);
+	const [signalSource, setSignalSource] = useState<string>('metrics');
 
 	const handleQueryCategoryChange = (queryType: string): void => {
 		setQueryCategory(queryType as EQueryType);
@@ -48,12 +49,17 @@ function QuerySection({
 
 	const isDarkMode = useIsDarkMode();
 
+	const handleSignalSourceChange = (value: string): void => {
+		setSignalSource(value);
+	};
+
 	const renderMetricUI = (): JSX.Element => (
 		<QueryBuilderV2
 			panelType={panelType}
 			config={{
 				queryVariant: 'static',
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
+				signalSource: signalSource === 'meter' ? 'meter' : '',
 			}}
 			showTraceOperator={alertType === AlertTypes.TRACES_BASED_ALERT}
 			showFunctions={
@@ -62,6 +68,9 @@ function QuerySection({
 				alertType === AlertTypes.LOGS_BASED_ALERT
 			}
 			version={alertDef.version || 'v3'}
+			onSignalSourceChange={handleSignalSourceChange}
+			key={signalSource}
+			signalSourceChangeEnabled
 		/>
 	);
 
diff --git a/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx b/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
index 8be14514902f..1ca6cd03a106 100644
--- a/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
+++ b/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
@@ -119,7 +119,7 @@ function BreakDown(): JSX.Element {
 						type="info"
 						showIcon
 						message="Billing is calculated in UTC. To match your meter data with billing, select full-day ranges in UTC time (00:00 – 23:59 UTC). 
-						For example, if you’re in IST, for the billing of Jan 1, select your time range as Jan 1, 5:30 AM – Jan 2, 5:29 AM IST."
+						For example, if you’re in PST, for the billing of Jan 2, select your time range as Jan 1, 5:00 PM – Jan 2, 4:59 PM PST." // to PT timezone (PST)
 					/>
 					{isCloudUser && (
 						<Alert
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
index 798d45e897f3..6781f402a770 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
@@ -35,6 +35,8 @@ export type QueryBuilderProps = {
 	showTraceOperator?: boolean;
 	version: string;
 	onChangeTraceView?: (view: TraceView) => void;
+	onSignalSourceChange?: (value: string) => void;
+	signalSourceChangeEnabled?: boolean;
 };
 
 export enum TraceView {