From b3551bf140e5277d13edfbce40f4c55c954375c8 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Wed, 6 Aug 2025 13:11:55 +0530
Subject: [PATCH] feat: handle save views

---
 frontend/src/api/saveView/getAllViews.ts      |  2 +-
 .../ExplorerOptions/ExplorerOptions.tsx       | 38 +++++++++++-----
 .../container/ExplorerOptions/constants.ts    |  1 +
 .../src/container/ExplorerOptions/types.ts    |  5 ++-
 .../src/container/ExplorerOptions/utils.ts    |  2 +-
 .../Explorer/Explorer.styles.scss             | 16 +++++++
 .../MeterExplorer/Explorer/TimeSeries.tsx     | 45 ++++++++++++-------
 .../BuilderUnitsFilter/BuilderUnits.tsx       |  6 ++-
 frontend/src/container/SideNav/menuItems.tsx  |  5 ++-
 .../src/hooks/saveViews/useGetAllViews.ts     |  4 +-
 10 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/frontend/src/api/saveView/getAllViews.ts b/frontend/src/api/saveView/getAllViews.ts
index 4a54d6af0df4..a26fd13441f5 100644
--- a/frontend/src/api/saveView/getAllViews.ts
+++ b/frontend/src/api/saveView/getAllViews.ts
@@ -4,6 +4,6 @@ import { AllViewsProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const getAllViews = (
-	sourcepage: DataSource,
+	sourcepage: DataSource | 'meter',
 ): Promise<AxiosResponse<AllViewsProps>> =>
 	axios.get(`/explorer/views?sourcePage=${sourcepage}`);
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index f46e695b7531..d425b29d4d05 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -111,6 +111,7 @@ function ExplorerOptions({
 
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
 	const isMetricsExplorer = sourcepage === DataSource.METRICS;
+	const isMeterExplorer = signalSource === 'meter';
 
 	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = LOCALSTORAGE.LAST_USED_SAVED_VIEWS;
 
@@ -121,8 +122,11 @@ function ExplorerOptions({
 		if (isMetricsExplorer) {
 			return PreservedViewsTypes.METRICS;
 		}
+		if (isMeterExplorer) {
+			return PreservedViewsTypes.METER;
+		}
 		return PreservedViewsTypes.TRACES;
-	}, [isLogsExplorer, isMetricsExplorer]);
+	}, [isLogsExplorer, isMetricsExplorer, isMeterExplorer]);
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -151,6 +155,10 @@ function ExplorerOptions({
 				[MetricsExplorerEventKeys.OneChartPerQueryEnabled]: isOneChartPerQuery,
 				panelType,
 			});
+		} else if (isMeterExplorer) {
+			logEvent('Meter Explorer: Save view clicked', {
+				panelType,
+			});
 		}
 		setIsSaveModalOpen(!isSaveModalOpen);
 	};
@@ -244,7 +252,7 @@ function ExplorerOptions({
 		error,
 		isRefetching,
 		refetch: refetchAllView,
-	} = useGetAllViews(sourcepage);
+	} = useGetAllViews(isMeterExplorer ? 'meter' : sourcepage);
 
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 
@@ -317,7 +325,7 @@ function ExplorerOptions({
 		compositeQuery,
 		viewKey,
 		extraData: updatedExtraData,
-		sourcePage: sourcepage,
+		sourcePage: isMeterExplorer ? 'meter' : sourcepage,
 		viewName,
 	});
 
@@ -333,7 +341,7 @@ function ExplorerOptions({
 				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
 				viewKey,
 				extraData: updatedExtraData,
-				sourcePage: sourcepage,
+				sourcePage: isMeterExplorer ? 'meter' : sourcepage,
 				viewName,
 			},
 			{
@@ -460,6 +468,11 @@ function ExplorerOptions({
 				panelType,
 				viewName: option?.value,
 			});
+		} else if (isMeterExplorer) {
+			logEvent('Meter Explorer: Select view', {
+				panelType,
+				viewName: option?.value,
+			});
 		}
 
 		updatePreservedViewInLocalStorage(option);
@@ -555,7 +568,7 @@ function ExplorerOptions({
 			redirectWithQueryBuilderData,
 			refetchAllView,
 			saveViewAsync,
-			sourcePage: sourcepage,
+			sourcePage: isMeterExplorer ? 'meter' : sourcepage,
 			viewName: newViewName,
 			setNewViewName,
 		});
@@ -674,7 +687,7 @@ function ExplorerOptions({
 		return `Query ${query.builder.queryData[0].queryName}`;
 	};
 
-	const alertButton = useMemo(() => {
+	const CreateAlertButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
 				<Button
@@ -727,7 +740,7 @@ function ExplorerOptions({
 		splitedQueries,
 	]);
 
-	const dashboardButton = useMemo(() => {
+	const AddToDashboardButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
 				<Button
@@ -890,10 +903,13 @@ function ExplorerOptions({
 
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
-					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						{alertButton}
-						{dashboardButton}
-					</div>
+					{signalSource !== 'meter' && (
+						<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
+							{CreateAlertButton}
+							{AddToDashboardButton}
+						</div>
+					)}
+
 					<div className="actions">
 						{/* Hide the info icon for metrics explorer until we get the docs link */}
 						{!isMetricsExplorer && (
diff --git a/frontend/src/container/ExplorerOptions/constants.ts b/frontend/src/container/ExplorerOptions/constants.ts
index 85d2b0b98e7b..f0e49bb5ab91 100644
--- a/frontend/src/container/ExplorerOptions/constants.ts
+++ b/frontend/src/container/ExplorerOptions/constants.ts
@@ -2,4 +2,5 @@ export enum PreservedViewsTypes {
 	LOGS = 'logs',
 	TRACES = 'traces',
 	METRICS = 'metrics',
+	METER = 'meter',
 }
diff --git a/frontend/src/container/ExplorerOptions/types.ts b/frontend/src/container/ExplorerOptions/types.ts
index a9f71a04140f..3f8fec96614a 100644
--- a/frontend/src/container/ExplorerOptions/types.ts
+++ b/frontend/src/container/ExplorerOptions/types.ts
@@ -13,7 +13,7 @@ import { PreservedViewsTypes } from './constants';
 export interface SaveNewViewHandlerProps {
 	viewName: string;
 	compositeQuery: ICompositeMetricQuery;
-	sourcePage: DataSource;
+	sourcePage: DataSource | 'meter';
 	extraData: SaveViewProps['extraData'];
 	panelType: PANEL_TYPES | null;
 	notifications: NotificationInstance;
@@ -32,7 +32,8 @@ export interface SaveNewViewHandlerProps {
 export type PreservedViewType =
 	| PreservedViewsTypes.LOGS
 	| PreservedViewsTypes.TRACES
-	| PreservedViewsTypes.METRICS;
+	| PreservedViewsTypes.METRICS
+	| PreservedViewsTypes.METER;
 
 export type PreservedViewsInLocalStorage = Partial<
 	Record<PreservedViewType, { key: string; value: string }>
diff --git a/frontend/src/container/ExplorerOptions/utils.ts b/frontend/src/container/ExplorerOptions/utils.ts
index d3a2d768d54e..8f280dc61a58 100644
--- a/frontend/src/container/ExplorerOptions/utils.ts
+++ b/frontend/src/container/ExplorerOptions/utils.ts
@@ -37,7 +37,7 @@ export const saveNewViewHandler = ({
 		{
 			viewName,
 			compositeQuery,
-			sourcePage,
+			sourcePage: sourcePage as DataSource,
 			extraData,
 		},
 		{
diff --git a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
index 74cf54423841..36a4fe8804e3 100644
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
@@ -173,6 +173,22 @@
 	padding-bottom: 80px;
 }
 
+.meter-time-series-container {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+
+	.builder-units-filter {
+		padding: 0 8px;
+		margin-bottom: 0px !important;
+
+		.builder-units-filter-label {
+			margin-bottom: 0px !important;
+			font-size: 13px;
+		}
+	}
+}
+
 .lightMode {
 	.metrics-explorer-explore-container {
 		.explore-tabs {
diff --git a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
index e500eeb4720c..fc60e1dcd329 100644
--- a/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx
@@ -2,12 +2,13 @@ import { isAxiosError } from 'axios';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -25,6 +26,8 @@ function TimeSeries(): JSX.Element {
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const [yAxisUnit, setYAxisUnit] = useState<string>('');
+
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
 
@@ -107,23 +110,31 @@ function TimeSeries(): JSX.Element {
 		[data, isValidToConvertToMs],
 	);
 
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
+
 	return (
-		<div className="time-series-container">
-			{responseData.map((datapoint, index) => (
-				<div
-					className="time-series-view-panel"
-					// eslint-disable-next-line react/no-array-index-key
-					key={index}
-				>
-					<TimeSeriesView
-						isFilterApplied={false}
-						isError={queries[index].isError}
-						isLoading={queries[index].isLoading}
-						data={datapoint}
-						dataSource={DataSource.METRICS}
-					/>
-				</div>
-			))}
+		<div className="meter-time-series-container">
+			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			<div className="time-series-container">
+				{responseData.map((datapoint, index) => (
+					<div
+						className="time-series-view-panel"
+						// eslint-disable-next-line react/no-array-index-key
+						key={index}
+					>
+						<TimeSeriesView
+							isFilterApplied={false}
+							isError={queries[index].isError}
+							isLoading={queries[index].isLoading}
+							data={datapoint}
+							dataSource={DataSource.METRICS}
+							yAxisUnit={yAxisUnit}
+						/>
+					</div>
+				))}
+			</div>
 		</div>
 	);
 }
diff --git a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
index c128abc4843e..69085a1c96d3 100644
--- a/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
+++ b/frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx
@@ -30,8 +30,10 @@ function BuilderUnitsFilter({
 	};
 
 	return (
-		<Space>
-			<DefaultLabel>Y-axis unit</DefaultLabel>
+		<Space className="builder-units-filter">
+			<DefaultLabel className="builder-units-filter-label">
+				Y-axis unit
+			</DefaultLabel>
 			<Select
 				getPopupContainer={popupContainer}
 				style={selectStyles}
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index aa6a581bd21f..b4d49a54e6ac 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -269,8 +269,9 @@ export const defaultMoreMenuItems: SidebarItem[] = [
 		key: ROUTES.METER_EXPLORER,
 		label: 'Meter Explorer',
 		icon: <ChartArea size={16} />,
-		isNew: true,
-		isEnabled: true,
+		isNew: false,
+		isEnabled: false,
+		isBeta: true,
 		itemKey: 'meter-explorer',
 	},
 	{
diff --git a/frontend/src/hooks/saveViews/useGetAllViews.ts b/frontend/src/hooks/saveViews/useGetAllViews.ts
index cb0ce6ba9db2..cb5e62dd0bec 100644
--- a/frontend/src/hooks/saveViews/useGetAllViews.ts
+++ b/frontend/src/hooks/saveViews/useGetAllViews.ts
@@ -5,9 +5,9 @@ import { AllViewsProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const useGetAllViews = (
-	sourcepage: DataSource,
+	sourcepage: DataSource | 'meter',
 ): UseQueryResult<AxiosResponse<AllViewsProps>, AxiosError> =>
 	useQuery<AxiosResponse<AllViewsProps>, AxiosError>({
 		queryKey: [{ sourcepage }],
-		queryFn: () => getAllViews(sourcepage),
+		queryFn: () => getAllViews(sourcepage as DataSource),
 	});