chore: update query key

frontend/src/api/metricsExplorer/getMetricMetadata.ts

@@ -0,0 +1,44 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+import { Temporality } from './getMetricDetails';
+import { MetricType } from './getMetricsList';
+
+export interface MetricMetadata {
+	description: string;
+	type: MetricType;
+	unit: string;
+	temporality: Temporality;
+	isMonotonic: boolean;
+}
+
+export interface MetricMetadataResponse {
+	status: string;
+	data: MetricMetadata;
+}
+
+export const getMetricMetadata = async (
+	metricName: string,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
+	try {
+		const encodedMetricName = encodeURIComponent(metricName);
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/constants/reactQueryKeys.ts

@@ -55,6 +55,7 @@ export const REACT_QUERY_KEY = {
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
 	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',
+	GET_METRIC_METADATA: 'GET_METRIC_METADATA',
 
 	// Traces Funnels Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',

frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -58,6 +58,27 @@
 	.explore-content {
 		padding: 0 8px;
 
+		.y-axis-unit-selector-container {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			padding-top: 10px;
+			margin-bottom: 10px;
+
+			.save-unit-container {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+
+				.ant-btn {
+					border-radius: 2px;
+					.ant-typography {
+						font-size: 12px;
+					}
+				}
+			}
+		}
+
 		.ant-space {
 			margin-top: 10px;
 			margin-bottom: 20px;
@@ -75,6 +96,14 @@
 		.time-series-view {
 			min-width: 100%;
 			width: 100%;
+			position: relative;
+
+			.no-unit-warning {
+				position: absolute;
+				top: 30px;
+				right: 40px;
+				z-index: 1000;
+			}
 		}
 
 		.time-series-container {

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -1,7 +1,7 @@
 import './Explorer.styles.scss';
 
 import * as Sentry from '@sentry/react';
-import { Switch } from 'antd';
+import { Switch, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -25,10 +25,10 @@ import { generateExportToDashboardLink } from 'utils/dashboard/generateExportToD
 import { v4 as uuid } from 'uuid';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-// import QuerySection from './QuerySection';
+import MetricDetails from '../MetricDetails/MetricDetails';
 import TimeSeries from './TimeSeries';
 import { ExplorerTabs } from './types';
-import { splitQueryIntoOneChartPerQuery } from './utils';
+import { splitQueryIntoOneChartPerQuery, useGetMetricUnits } from './utils';
 
 const ONE_CHART_PER_QUERY_ENABLED_KEY = 'isOneChartPerQueryEnabled';
 
@@ -40,6 +40,31 @@ function Explorer(): JSX.Element {
 		currentQuery,
 	} = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
+	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
+
+	const metricNames = useMemo(
+		() =>
+			stagedQuery?.builder.queryData.map(
+				(query) => query.aggregateAttribute?.key ?? '',
+			) ?? [],
+		[stagedQuery],
+	);
+
+	const {
+		units,
+		metrics,
+		isLoading: isMetricUnitsLoading,
+		isError: isMetricUnitsError,
+	} = useGetMetricUnits(metricNames);
+
+	const areAllMetricUnitsSame = useMemo(
+		() =>
+			!isMetricUnitsLoading &&
+			!isMetricUnitsError &&
+			units.length > 0 &&
+			units.every((unit) => unit === units[0]),
+		[units, isMetricUnitsLoading, isMetricUnitsError],
+	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isOneChartPerQueryEnabled =
@@ -48,7 +73,49 @@ function Explorer(): JSX.Element {
 	const [showOneChartPerQuery, toggleShowOneChartPerQuery] = useState(
 		isOneChartPerQueryEnabled,
 	);
+	const [disableOneChartPerQuery, toggleDisableOneChartPerQuery] = useState(
+		false,
+	);
 	const [selectedTab] = useState<ExplorerTabs>(ExplorerTabs.TIME_SERIES);
+	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
+
+	useEffect(() => {
+		// Set the y axis unit to the first metric unit if
+		// 1. There is one metric unit and it is not empty
+		// 2. All metric units are the same and not empty
+		// Else, set the y axis unit to empty if
+		// 1. There are more than one metric units and they are not the same
+		// 2. There are no metric units
+		if (units.length === 0) {
+			setYAxisUnit(undefined);
+		} else if (units.length === 1 && units[0]) {
+			setYAxisUnit(units[0]);
+		} else if (areAllMetricUnitsSame) {
+			if (units[0]) {
+				setYAxisUnit(units[0]);
+			} else {
+				setYAxisUnit(undefined);
+			}
+		} else if (units.length > 1 && !areAllMetricUnitsSame) {
+			setYAxisUnit(undefined);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(units), areAllMetricUnitsSame]);
+
+	useEffect(() => {
+		// Disable one chart per query if -
+		// 1. There are more than one metric
+		// 2. The metric units are not the same
+		if (units.length > 1 && !areAllMetricUnitsSame) {
+			toggleShowOneChartPerQuery(true);
+			toggleDisableOneChartPerQuery(true);
+		} else if (units.length <= 1) {
+			toggleShowOneChartPerQuery(false);
+			toggleDisableOneChartPerQuery(true);
+		} else {
+			toggleDisableOneChartPerQuery(false);
+		}
+	}, [units, areAllMetricUnitsSame]);
 
 	const handleToggleShowOneChartPerQuery = (): void => {
 		toggleShowOneChartPerQuery(!showOneChartPerQuery);
@@ -68,15 +135,20 @@ function Explorer(): JSX.Element {
 		[updateAllQueriesOperators],
 	);
 
-	const exportDefaultQuery = useMemo(
-		() =>
-			updateAllQueriesOperators(
-				currentQuery || initialQueriesMap[DataSource.METRICS],
-				PANEL_TYPES.TIME_SERIES,
-				DataSource.METRICS,
-			),
-		[currentQuery, updateAllQueriesOperators],
-	);
+	const exportDefaultQuery = useMemo(() => {
+		const query = updateAllQueriesOperators(
+			currentQuery || initialQueriesMap[DataSource.METRICS],
+			PANEL_TYPES.TIME_SERIES,
+			DataSource.METRICS,
+		);
+		if (yAxisUnit) {
+			return {
+				...query,
+				unit: yAxisUnit,
+			};
+		}
+		return query;
+	}, [currentQuery, updateAllQueriesOperators, yAxisUnit]);
 
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
@@ -90,8 +162,16 @@ function Explorer(): JSX.Element {
 
 			const widgetId = uuid();
 
+			let query = queryToExport || exportDefaultQuery;
+			if (yAxisUnit) {
+				query = {
+					...query,
+					unit: yAxisUnit,
+				};
+			}
+
 			const dashboardEditView = generateExportToDashboardLink({
-				query: queryToExport || exportDefaultQuery,
+				query,
 				panelType: PANEL_TYPES.TIME_SERIES,
 				dashboardId: dashboard.id,
 				widgetId,
@@ -99,7 +179,7 @@ function Explorer(): JSX.Element {
 
 			safeNavigate(dashboardEditView);
 		},
-		[exportDefaultQuery, safeNavigate],
+		[exportDefaultQuery, safeNavigate, yAxisUnit],
 	);
 
 	const splitedQueries = useMemo(
@@ -110,6 +190,20 @@ function Explorer(): JSX.Element {
 		[stagedQuery],
 	);
 
+	const [selectedMetricName, setSelectedMetricName] = useState<string | null>(
+		null,
+	);
+
+	const handleOpenMetricDetails = (metricName: string): void => {
+		setIsMetricDetailsOpen(true);
+		setSelectedMetricName(metricName);
+	};
+
+	const handleCloseMetricDetails = (): void => {
+		setIsMetricDetailsOpen(false);
+		setSelectedMetricName(null);
+	};
+
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'explorer',
@@ -123,17 +217,36 @@ function Explorer(): JSX.Element {
 
 	const [warning, setWarning] = useState<Warning | undefined>(undefined);
 
+	const oneChartPerQueryDisabledTooltip = useMemo(() => {
+		if (splitedQueries.length <= 1) {
+			return 'One chart per query cannot be toggled for a single query.';
+		}
+		if (units.length <= 1) {
+			return 'One chart per query cannot be toggled when there is only one metric.';
+		}
+		if (disableOneChartPerQuery) {
+			return 'One chart per query cannot be disabled for multiple queries with different units.';
+		}
+		return undefined;
+	}, [disableOneChartPerQuery, splitedQueries.length, units.length]);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-explore-container">
 				<div className="explore-header">
 					<div className="explore-header-left-actions">
 						<span>1 chart/query</span>
-						<Switch
-							checked={showOneChartPerQuery}
-							onChange={handleToggleShowOneChartPerQuery}
-							size="small"
-						/>
+						<Tooltip
+							open={disableOneChartPerQuery ? undefined : false}
+							title={oneChartPerQueryDisabledTooltip}
+						>
+							<Switch
+								checked={showOneChartPerQuery}
+								onChange={handleToggleShowOneChartPerQuery}
+								disabled={disableOneChartPerQuery || splitedQueries.length <= 1}
+								size="small"
+							/>
+						</Tooltip>
 					</div>
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
@@ -174,6 +287,15 @@ function Explorer(): JSX.Element {
 						<TimeSeries
 							showOneChartPerQuery={showOneChartPerQuery}
 							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							handleOpenMetricDetails={handleOpenMetricDetails}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
 						/>
 					)}
 					{/* TODO: Enable once we have resolved all related metrics issues */}
@@ -190,6 +312,14 @@ function Explorer(): JSX.Element {
 				isOneChartPerQuery={false}
 				splitedQueries={splitedQueries}
 			/>
+			{isMetricDetailsOpen && (
+				<MetricDetails
+					metricName={selectedMetricName}
+					isOpen={isMetricDetailsOpen}
+					onClose={handleCloseMetricDetails}
+					isModalTimeSelection={false}
+				/>
+			)}
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -1,14 +1,18 @@
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip, Typography } from 'antd';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
+import YAxisUnitSelector from 'components/YAxisUnitSelector';
+import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits';
 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 { useMemo, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -24,6 +28,13 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 function TimeSeries({
 	showOneChartPerQuery,
 	setWarning,
+	areAllMetricUnitsSame,
+	isMetricUnitsLoading,
+	metricUnits,
+	metricNames,
+	handleOpenMetricDetails,
+	yAxisUnit,
+	setYAxisUnit,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -61,8 +72,6 @@ function TimeSeries({
 		[showOneChartPerQuery, stagedQuery],
 	);
 
-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
-
 	const queries = useQueries(
 		queryPayloads.map((payload, index) => ({
 			queryKey: [
@@ -126,32 +135,160 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
+	const showYAxisUnitSelector = useMemo(() => {
+		if (metricUnits.length <= 1) {
+			return true;
+		}
+		if (areAllMetricUnitsSame) {
+			return Boolean(metricUnits[0]);
+		}
+		return false;
+	}, [metricUnits, areAllMetricUnitsSame]);
+
+	// Show the save unit button if
+	// 1. There is only one metric
+	// 2. The metric has no saved unit
+	// 3. The user has selected a unit
+	// const showSaveUnitButton = useMemo(
+	// 	() =>
+	// 		metricUnits.length === 1 &&
+	// 		Boolean(metrics?.[0]) &&
+	// 		!metricUnits[0] &&
+	// 		yAxisUnit,
+	// 	[metricUnits, metrics, yAxisUnit],
+	// );
+
+	// const {
+	// 	mutate: updateMetricMetadata,
+	// 	isLoading: isUpdatingMetricMetadata,
+	// } = useUpdateMetricMetadata();
+
+	// const handleSaveUnit = (): void => {
+	// 	updateMetricMetadata(
+	// 		{
+	// 			metricName: metricNames[0],
+	// 			payload: {
+	// 				unit: yAxisUnit,
+	// 				description: metrics[0]?.description ?? '',
+	// 				metricType: metrics[0]?.type as MetricType,
+	// 				temporality: metrics[0]?.temporality,
+	// 			},
+	// 		},
+	// 		{
+	// 			onSuccess: () => {
+	// 				notifications.success({
+	// 					message: 'Unit saved successfully',
+	// 				});
+	// 				queryClient.invalidateQueries([
+	// 					REACT_QUERY_KEY.GET_METRIC_DETAILS,
+	// 					metricNames[0],
+	// 				]);
+	// 			},
+	// 			onError: () => {
+	// 				notifications.error({
+	// 					message: 'Failed to save unit',
+	// 				});
+	// 			},
+	// 		},
+	// 	);
+	// };
+
+	const noUnitWarning = useCallback(
+		(metricName: string): JSX.Element => (
+			<Tooltip
+				className="no-unit-warning"
+				title={
+					<Typography.Text>
+						This metric does not have a unit. Please set one for it in the{' '}
+						<Typography.Link
+							onClick={(): void => handleOpenMetricDetails(metricName)}
+						>
+							metric details
+						</Typography.Link>{' '}
+						page.
+					</Typography.Text>
+				}
+			>
+				<AlertTriangle size={16} color={Color.BG_AMBER_400} />
+			</Tooltip>
+		),
+		[handleOpenMetricDetails],
+	);
+
 	return (
 		<>
-			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			<div className="y-axis-unit-selector-container">
+				{showYAxisUnitSelector && (
+					<>
+						<YAxisUnitSelector
+							onChange={onUnitChangeHandler}
+							value={yAxisUnit}
+							source={YAxisSource.EXPLORER}
+							data-testid="y-axis-unit-selector"
+						/>
+						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
+						{/* {showSaveUnitButton && (
+							<div className="save-unit-container">
+								<Typography.Text>
+									Save the selected unit for this metric?
+								</Typography.Text>
+								<Button
+									type="primary"
+									size="small"
+									disabled={isUpdatingMetricMetadata}
+									onClick={handleSaveUnit}
+								>
+									<Typography.Paragraph>Yes</Typography.Paragraph>
+								</Button>
+							</div>
+						)} */}
+					</>
+				)}
+			</div>
 			<div
 				className={classNames({
 					'time-series-container': changeLayoutForOneChartPerQuery,
 				})}
 			>
-				{responseData.map((datapoint, index) => (
-					<div
-						className="time-series-view"
-						// eslint-disable-next-line react/no-array-index-key
-						key={index}
-					>
-						<TimeSeriesView
-							isFilterApplied={false}
-							isError={queries[index].isError}
-							isLoading={queries[index].isLoading}
-							data={datapoint}
-							yAxisUnit={yAxisUnit}
-							dataSource={DataSource.METRICS}
-							error={queries[index].error as APIError}
-							setWarning={setWarning}
-						/>
-					</div>
-				))}
+				{responseData.map((datapoint, index) => {
+					const isQueryDataItem = index < metricNames.length;
+					const metricName = isQueryDataItem ? metricNames[index] : undefined;
+					const metricUnit = isQueryDataItem ? metricUnits[index] : undefined;
+
+					// Show the no unit warning if -
+					// 1. The metric query is not loading
+					// 2. The metric units are not loading
+					// 3. There are more than one metric
+					// 4. The current metric unit is empty
+					// 5. Is a queryData item
+					const isMetricUnitEmpty =
+						isQueryDataItem &&
+						!queries[index].isLoading &&
+						!isMetricUnitsLoading &&
+						metricUnits.length > 1 &&
+						!metricUnit &&
+						metricName;
+
+					return (
+						<div
+							className="time-series-view"
+							// eslint-disable-next-line react/no-array-index-key
+							key={index}
+						>
+							{isMetricUnitEmpty && metricName && noUnitWarning(metricName)}
+							<TimeSeriesView
+								isFilterApplied={false}
+								isError={queries[index].isError}
+								isLoading={queries[index].isLoading}
+								data={datapoint}
+								yAxisUnit={yAxisUnit}
+								dataSource={DataSource.METRICS}
+								error={queries[index].error as APIError}
+								setWarning={setWarning}
+							/>
+						</div>
+					);
+				})}
 			</div>
 		</>
 	);

frontend/src/container/MetricsExplorer/Explorer/__tests__/Explorer.test.tsx

@@ -1,4 +1,7 @@
 import { render, screen } from '@testing-library/react';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricMetadata } from 'api/metricsExplorer/getMetricMetadata';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import * as useOptionsMenuHooks from 'container/OptionsMenu';
 import * as useUpdateDashboardHooks from 'hooks/dashboard/useUpdateDashboard';
@@ -12,9 +15,10 @@ import { MemoryRouter } from 'react-router-dom';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import store from 'store';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
-import { DataSource } from 'types/common/queryBuilder';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
 import Explorer from '../Explorer';
+import * as useGetMetricUnitsHooks from '../utils';
 
 const mockSetSearchParams = jest.fn();
 const queryClient = new QueryClient();
@@ -126,6 +130,31 @@ jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
 	...mockUseQueryBuilderData,
 } as any);
 
+const Y_AXIS_UNIT_SELECTOR_TEST_ID = 'y-axis-unit-selector';
+const SECONDS_UNIT_LABEL = 'Seconds (s)';
+
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
+function renderExplorer(): void {
+	render(
+		<QueryClientProvider client={queryClient}>
+			<MemoryRouter>
+				<Provider store={store}>
+					<ErrorModalProvider>
+						<Explorer />
+					</ErrorModalProvider>
+				</Provider>
+			</MemoryRouter>
+		</QueryClientProvider>,
+	);
+}
+
 describe('Explorer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -142,17 +171,7 @@ describe('Explorer', () => {
 			mockSetSearchParams,
 		]);
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		expect(mockUpdateAllQueriesOperators).toHaveBeenCalledWith(
 			initialQueriesMap[DataSource.METRICS],
@@ -166,18 +185,14 @@ describe('Explorer', () => {
 			new URLSearchParams({ isOneChartPerQueryEnabled: 'true' }),
 			mockSetSearchParams,
 		]);
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds', 'seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		const toggle = screen.getByRole('switch');
 		expect(toggle).toBeChecked();
@@ -188,20 +203,132 @@ describe('Explorer', () => {
 			new URLSearchParams({ isOneChartPerQueryEnabled: 'false' }),
 			mockSetSearchParams,
 		]);
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds', 'seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
 
-		render(
-			<QueryClientProvider client={queryClient}>
-				<MemoryRouter>
-					<Provider store={store}>
-						<ErrorModalProvider>
-							<Explorer />
-						</ErrorModalProvider>
-					</Provider>
-				</MemoryRouter>
-			</QueryClientProvider>,
-		);
+		renderExplorer();
 
 		const toggle = screen.getByRole('switch');
 		expect(toggle).not.toBeChecked();
 	});
+
+	it('should render pre-populated y axis unit for single metric', () => {
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.getByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).toBeInTheDocument();
+		expect(yAxisUnitSelector).toHaveTextContent(SECONDS_UNIT_LABEL);
+	});
+
+	it('should render pre-populated y axis unit for mutliple metrics with same unit', () => {
+		(useSearchParams as jest.Mock).mockReturnValueOnce([
+			new URLSearchParams({ isOneChartPerQueryEnabled: 'true' }),
+			mockSetSearchParams,
+		]);
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds', 'seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.getByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).toBeInTheDocument();
+		expect(yAxisUnitSelector).toHaveTextContent(SECONDS_UNIT_LABEL);
+
+		// One chart per query switch should be enabled
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeChecked();
+	});
+
+	it('should hide y axis unit selector for multiple metrics with different units', () => {
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds', 'milliseconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).not.toBeInTheDocument();
+
+		// One chart per query toggle should be disabled
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeDisabled();
+	});
+
+	it('should render empty y axis unit selector for a single metric with no unit', () => {
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: [],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric],
+		});
+
+		renderExplorer();
+
+		const yAxisUnitSelector = screen.queryByTestId(Y_AXIS_UNIT_SELECTOR_TEST_ID);
+		expect(yAxisUnitSelector).toBeInTheDocument();
+		expect(yAxisUnitSelector).toHaveTextContent('Please select a unit');
+	});
+
+	it('one chart per query should be off and disabled when there is only one query', () => {
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric],
+		});
+
+		renderExplorer();
+
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).not.toBeChecked();
+		expect(oneChartPerQueryToggle).toBeDisabled();
+	});
+
+	it('one chart per query should enabled by default when there are multiple metrics with the same unit', () => {
+		const mockStagedQueryWithMultipleQueries = {
+			...initialQueriesMap[DataSource.METRICS],
+			builder: {
+				...initialQueriesMap[DataSource.METRICS].builder,
+				queryData: [
+					initialQueriesMap[DataSource.METRICS].builder.queryData[0],
+					{ ...initialQueriesMap[DataSource.METRICS].builder.queryData[0] },
+				],
+			},
+		};
+
+		jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue(({
+			...mockUseQueryBuilderData,
+			stagedQuery: mockStagedQueryWithMultipleQueries,
+		} as Partial<QueryBuilderContextType>) as QueryBuilderContextType);
+
+		jest.spyOn(useGetMetricUnitsHooks, 'useGetMetricUnits').mockReturnValue({
+			units: ['seconds', 'seconds'],
+			isLoading: false,
+			isError: false,
+			metrics: [mockMetric, mockMetric],
+		});
+
+		renderExplorer();
+
+		const oneChartPerQueryToggle = screen.getByRole('switch');
+		expect(oneChartPerQueryToggle).toBeEnabled();
+	});
 });

frontend/src/container/MetricsExplorer/Explorer/__tests__/TimeSeries.test.tsx

@@ -0,0 +1,190 @@
+import {
+	fireEvent,
+	render,
+	RenderResult,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricMetadata } from 'api/metricsExplorer/getMetricMetadata';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import TimeSeries from '../TimeSeries';
+import { TimeSeriesProps } from '../types';
+
+const mockUpdateMetricMetadata = jest.fn();
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue({
+		mutate: mockUpdateMetricMetadata,
+		isLoading: false,
+	} as any);
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
+	const base = initialQueriesMap.metrics;
+	const query: Query = {
+		...base,
+		builder: {
+			...base.builder,
+			queryData: [...base.builder.queryData, { ...base.builder.queryData[0] }],
+		},
+	};
+	return {
+		useQueryBuilder: (): { stagedQuery: Query; currentQuery: Query } => ({
+			stagedQuery: query,
+			currentQuery: query,
+		}),
+	};
+});
+
+jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
+	__esModule: true,
+	default: jest.fn().mockReturnValue(
+		<div role="img" aria-label="warning">
+			TimeSeriesView
+		</div>,
+	),
+}));
+
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQueryClient: jest.fn().mockReturnValue({
+		invalidateQueries: jest.fn(),
+	}),
+	useQueries: jest.fn().mockImplementation((queries: any[]) =>
+		queries.map(() => ({
+			data: undefined,
+			isLoading: false,
+			isError: false,
+			error: undefined,
+		})),
+	),
+}));
+
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn().mockReturnValue({
+		globalTime: {
+			selectedTime: '5min',
+			maxTime: 1713738000000,
+			minTime: 1713734400000,
+		},
+	}),
+}));
+
+const mockMetric: MetricMetadata = {
+	type: MetricType.SUM,
+	description: 'metric1 description',
+	unit: 'metric1 unit',
+	temporality: Temporality.CUMULATIVE,
+	isMonotonic: true,
+};
+
+const queryClient = new QueryClient();
+
+const mockSetWarning = jest.fn();
+const mockSetIsMetricDetailsOpen = jest.fn();
+const mockSetYAxisUnit = jest.fn();
+
+function renderTimeSeries(
+	overrides: Partial<TimeSeriesProps> = {},
+): RenderResult {
+	return render(
+		<QueryClientProvider client={queryClient}>
+			<TimeSeries
+				showOneChartPerQuery={false}
+				setWarning={mockSetWarning}
+				areAllMetricUnitsSame={false}
+				isMetricUnitsLoading={false}
+				metricUnits={[]}
+				metricNames={[]}
+				metrics={[]}
+				isMetricUnitsError={false}
+				handleOpenMetricDetails={mockSetIsMetricDetailsOpen}
+				yAxisUnit="count"
+				setYAxisUnit={mockSetYAxisUnit}
+				// eslint-disable-next-line react/jsx-props-no-spreading
+				{...overrides}
+			/>
+		</QueryClientProvider>,
+	);
+}
+
+describe('TimeSeries', () => {
+	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
+		const { container } = renderTimeSeries({
+			metricUnits: ['', 'count'],
+			metricNames: ['metric1', 'metric2'],
+			metrics: [undefined, undefined],
+		});
+
+		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
+		fireEvent.mouseOver(alertIcon);
+		return waitFor(() =>
+			expect(
+				screen.getByText(/This metric does not have a unit/i),
+			).toBeInTheDocument(),
+		);
+	});
+
+	it('clicking on warning icon tooltip should open metric details modal', async () => {
+		const { container } = renderTimeSeries({
+			metricUnits: ['', 'count'],
+			metricNames: ['metric1', 'metric2'],
+			metrics: [mockMetric, mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		const alertIcon = container.querySelector('.no-unit-warning') as HTMLElement;
+		fireEvent.mouseOver(alertIcon);
+
+		const metricDetailsLink = await screen.findByText(/metric details/i);
+		fireEvent.click(metricDetailsLink);
+
+		expect(mockSetIsMetricDetailsOpen).toHaveBeenCalledWith('metric1');
+	});
+
+	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
+		const { getByText, getByRole } = renderTimeSeries({
+			metricUnits: [undefined],
+			metricNames: ['metric1'],
+			metrics: [mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		expect(
+			getByText(/Save the selected unit for this metric\?/i),
+		).toBeInTheDocument();
+
+		const yesButton = getByRole('button', { name: /Yes/i });
+		expect(yesButton).toBeInTheDocument();
+		expect(yesButton).toBeEnabled();
+	});
+
+	it.skip('clicking on save unit button shoould upated metric metadata', () => {
+		const { getByRole } = renderTimeSeries({
+			metricUnits: [''],
+			metricNames: ['metric1'],
+			metrics: [mockMetric],
+			yAxisUnit: 'seconds',
+		});
+
+		const yesButton = getByRole('button', { name: /Yes/i });
+		fireEvent.click(yesButton);
+
+		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
+			{
+				metricName: 'metric1',
+				payload: expect.objectContaining({ unit: 'seconds' }),
+			},
+			expect.objectContaining({
+				onSuccess: expect.any(Function),
+				onError: expect.any(Function),
+			}),
+		);
+	});
+});

frontend/src/container/MetricsExplorer/Explorer/types.ts

@@ -1,3 +1,4 @@
+import { MetricMetadata } from 'api/metricsExplorer/getMetricMetadata';
 import { RelatedMetric } from 'api/metricsExplorer/getRelatedMetrics';
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
@@ -12,6 +13,15 @@ export enum ExplorerTabs {
 export interface TimeSeriesProps {
 	showOneChartPerQuery: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
+	areAllMetricUnitsSame: boolean;
+	isMetricUnitsLoading: boolean;
+	isMetricUnitsError: boolean;
+	metricUnits: (string | undefined)[];
+	metricNames: string[];
+	metrics: (MetricMetadata | undefined)[];
+	handleOpenMetricDetails: (metricName: string) => void;
+	yAxisUnit: string | undefined;
+	setYAxisUnit: (unit: string) => void;
 }
 
 export interface RelatedMetricsProps {

frontend/src/container/MetricsExplorer/Explorer/utils.tsx

@@ -1,3 +1,5 @@
+import { MetricMetadata } from 'api/metricsExplorer/getMetricMetadata';
+import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
@@ -35,3 +37,23 @@ export const splitQueryIntoOneChartPerQuery = (query: Query): Query[] => {
 
 	return queries;
 };
+
+export function useGetMetricUnits(
+	metricNames: string[],
+	isEnabled = true,
+): {
+	isLoading: boolean;
+	units: (string | undefined)[];
+	isError: boolean;
+	metrics: (MetricMetadata | undefined)[];
+} {
+	const metricsData = useGetMultipleMetrics(metricNames, {
+		enabled: metricNames.length > 0 && isEnabled,
+	});
+	return {
+		isLoading: metricsData.some((metric) => metric.isLoading),
+		units: metricsData.map((metric) => metric.data?.data?.unit),
+		metrics: metricsData.map((metric) => metric.data?.data),
+		isError: metricsData.some((metric) => metric.isError),
+	};
+}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -131,8 +131,8 @@ function MetricDetails({
 						>
 							Open in Explorer
 						</Button>
-						{/* Show the based on the feature flag. Will remove before releasing the feature */}
-						{showInspectFeature && (
+						{/* Show the inspect button if the metric type is GAUGE */}
+						{showInspectFeature && openInspectModal && (
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -11,7 +11,7 @@ export interface MetricDetailsProps {
 	isOpen: boolean;
 	metricName: string | null;
 	isModalTimeSelection: boolean;
-	openInspectModal: (metricName: string) => void;
+	openInspectModal?: (metricName: string) => void;
 }
 
 export interface DashboardsAndAlertsPopoverProps {

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -0,0 +1,33 @@
+import {
+	getMetricMetadata,
+	MetricMetadataResponse,
+} from 'api/metricsExplorer/getMetricMetadata';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
+
+type QueryResult = UseQueryResult<MetricMetadataResponse, Error>;
+
+type UseGetMultipleMetrics = (
+	metricNames: string[],
+	options?: UseQueryOptions<MetricMetadataResponse, Error>,
+	headers?: Record<string, string>,
+) => QueryResult[];
+
+export const useGetMultipleMetrics: UseGetMultipleMetrics = (
+	metricNames,
+	options,
+	headers,
+) => {
+	const queries = useQueries(
+		metricNames.map(
+			(metricName) =>
+				({
+					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
+					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
+					...options,
+				} as UseQueryOptions<MetricMetadataResponse, Error>),
+		),
+	);
+
+	return queries as QueryResult[];
+};