chore: replace y axis unit selector in dashboards

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,31 @@ 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>('');
+
+	useEffect(() => {
+		if (units.length === 0) {
+			setYAxisUnit('');
+		} else if (units.length === 1 && units[0] !== '') {
+			setYAxisUnit(units[0]);
+		} else if (areAllMetricUnitsSame && units[0] !== '') {
+			setYAxisUnit(units[0]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(units), areAllMetricUnitsSame]);
+
+	useEffect(() => {
+		if (units.length > 1 && !areAllMetricUnitsSame) {
+			toggleShowOneChartPerQuery(true);
+			toggleDisableOneChartPerQuery(true);
+		} else {
+			toggleDisableOneChartPerQuery(false);
+		}
+	}, [units, areAllMetricUnitsSame]);
 
 	const handleToggleShowOneChartPerQuery = (): void => {
 		toggleShowOneChartPerQuery(!showOneChartPerQuery);
@@ -68,15 +117,20 @@ function Explorer(): JSX.Element {
 		[updateAllQueriesOperators],
 	);
 
-	const exportDefaultQuery = useMemo(
+	const exportDefaultQuery = useMemo(() => {
-		() =>
+		const query = updateAllQueriesOperators(
-			updateAllQueriesOperators(
 			currentQuery || initialQueriesMap[DataSource.METRICS],
 			PANEL_TYPES.TIME_SERIES,
 			DataSource.METRICS,
-			),
-		[currentQuery, updateAllQueriesOperators],
 		);
+		if (yAxisUnit) {
+			return {
+				...query,
+				unit: yAxisUnit,
+			};
+		}
+		return query;
+	}, [currentQuery, updateAllQueriesOperators, yAxisUnit]);
 
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
@@ -90,8 +144,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 +161,7 @@ function Explorer(): JSX.Element {
 
 			safeNavigate(dashboardEditView);
 		},
-		[exportDefaultQuery, safeNavigate],
+		[exportDefaultQuery, safeNavigate, yAxisUnit],
 	);
 
 	const splitedQueries = useMemo(
@@ -129,11 +191,17 @@ function Explorer(): JSX.Element {
 				<div className="explore-header">
 					<div className="explore-header-left-actions">
 						<span>1 chart/query</span>
+						<Tooltip
+							open={disableOneChartPerQuery ? undefined : false}
+							title="One chart per query cannot be disabled for multiple queries with different units."
+						>
 							<Switch
 								checked={showOneChartPerQuery}
 								onChange={handleToggleShowOneChartPerQuery}
+								disabled={disableOneChartPerQuery}
 								size="small"
 							/>
+						</Tooltip>
 					</div>
 					<div className="explore-header-right-actions">
 						{!isEmpty(warning) && <WarningPopover warningData={warning} />}
@@ -174,6 +242,15 @@ function Explorer(): JSX.Element {
 						<TimeSeries
 							showOneChartPerQuery={showOneChartPerQuery}
 							setWarning={setWarning}
+							areAllMetricUnitsSame={areAllMetricUnitsSame}
+							isMetricUnitsLoading={isMetricUnitsLoading}
+							isMetricUnitsError={isMetricUnitsError}
+							metricUnits={units}
+							metricNames={metricNames}
+							metrics={metrics}
+							setIsMetricDetailsOpen={setIsMetricDetailsOpen}
+							yAxisUnit={yAxisUnit}
+							setYAxisUnit={setYAxisUnit}
 						/>
 					)}
 					{/* TODO: Enable once we have resolved all related metrics issues */}
@@ -190,6 +267,14 @@ function Explorer(): JSX.Element {
 				isOneChartPerQuery={false}
 				splitedQueries={splitedQueries}
 			/>
+			{isMetricDetailsOpen && (
+				<MetricDetails
+					metricName={metricNames[0]}
+					isOpen={isMetricDetailsOpen}
+					onClose={(): void => setIsMetricDetailsOpen(false)}
+					isModalTimeSelection={false}
+				/>
+			)}
 		</Sentry.ErrorBoundary>
 	);
 }

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

@@ -1,3 +1,4 @@
+import { MetricDetails } from 'api/metricsExplorer/getMetricDetails';
 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[];
+	metricNames: string[];
+	metrics: (MetricDetails | undefined)[];
+	setIsMetricDetailsOpen: (isOpen: boolean) => void;
+	yAxisUnit: string;
+	setYAxisUnit: (unit: string) => void;
 }
 
 export interface RelatedMetricsProps {

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

@@ -139,7 +139,7 @@ function MetricDetails({
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
 									if (metric?.name) {
-										openInspectModal(metric.name);
+										openInspectModal?.(metric.name);
 									}
 								}}
 								data-testid="inspect-metric-button"

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/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -190,7 +190,8 @@
 			text-transform: uppercase;
 		}
 
-		.y-axis-unit-selector {
+		.y-axis-unit-selector,
+		.y-axis-unit-selector-v2 {
 			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
@@ -223,6 +224,21 @@
 				}
 			}
 		}
+
+		.y-axis-unit-selector-v2 {
+			.y-axis-unit-selector-component {
+				.ant-select {
+					width: 100%;
+					border-radius: 2px;
+					background: var(--bg-ink-300);
+
+					.ant-select-selector {
+						border: 1px solid var(--bg-slate-400);
+					}
+				}
+			}
+		}
+
 		.soft-min-max {
 			display: flex;
 			align-items: center;

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelectorV2.tsx

@@ -0,0 +1,23 @@
+import { Typography } from 'antd';
+import YAxisUnitSelectorComponent from 'components/YAxisUnitSelector';
+import { Dispatch, SetStateAction } from 'react';
+
+type OnSelectType = Dispatch<SetStateAction<string>> | ((val: string) => void);
+function YAxisUnitSelectorV2({
+	defaultValue,
+	onSelect,
+	fieldLabel,
+}: {
+	defaultValue: string;
+	onSelect: OnSelectType;
+	fieldLabel: string;
+}): JSX.Element {
+	return (
+		<div className="y-axis-unit-selector-v2">
+			<Typography.Text className="heading">{fieldLabel}</Typography.Text>
+			<YAxisUnitSelectorComponent value={defaultValue} onChange={onSelect} />
+		</div>
+	);
+}
+
+export default YAxisUnitSelectorV2;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -63,7 +63,7 @@ import LegendColors from './LegendColors/LegendColors';
 import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
 import { timePreferance } from './timeItems';
-import YAxisUnitSelector from './YAxisUnitSelector';
+import YAxisUnitSelector from './YAxisUnitSelectorV2';
 
 const { TextArea } = Input;
 const { Option } = Select;
@@ -347,7 +347,6 @@ function RightContainer({
 				{allowYAxisUnit && (
 					<YAxisUnitSelector
 						onSelect={setYAxisUnit}
-						value={yAxisUnit || ''}
 						fieldLabel={
 							selectedGraphType === PanelDisplay.VALUE ||
 							selectedGraphType === PanelDisplay.PIE

frontend/src/container/NewWidget/index.tsx

@@ -49,6 +49,7 @@ import {
 import { Props } from 'types/api/dashboard/update';
 import { IField } from 'types/api/logs/fields';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -301,6 +302,19 @@ function NewWidget({
 		contextLinks,
 	]);
 
+	useEffect(() => {
+		const compositeQuery = query.get('compositeQuery');
+		if (compositeQuery) {
+			try {
+				const decoded = decodeURIComponent(compositeQuery);
+				const parsedQuery = JSON.parse(decoded) as Query;
+				setYAxisUnit(parsedQuery.unit || 'none');
+			} catch (error) {
+				setYAxisUnit('none');
+			}
+		}
+	}, [query]);
+
 	const closeModal = (): void => {
 		setSaveModal(false);
 		setDiscardModal(false);