fix: added y-axis unit selector in traces view (#9761)

frontend/src/pages/TracesExplorer/TimeSeriesView/TimeSeriesView.styles.scss

@@ -0,0 +1,8 @@
+.trace-explorer-time-series-view-container {
+	&-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 12px;
+	}
+}

frontend/src/pages/TracesExplorer/TimeSeriesView/index.tsx

@@ -3,6 +3,9 @@ import './TimeSeriesView.styles.scss';
 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';
+import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
+import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
@@ -11,6 +14,7 @@ import {
 	SetStateAction,
 	useEffect,
 	useMemo,
+	useState,
 } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -19,9 +23,6 @@ import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import TimeSeriesView from './TimeSeriesView';
-import { convertDataValueToMs } from './utils';
-
 function TimeSeriesViewContainer({
 	dataSource = DataSource.TRACES,
 	isFilterApplied,
@@ -31,11 +32,6 @@ function TimeSeriesViewContainer({
 }: TimeSeriesViewProps): JSX.Element {
 	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
 
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
 
@@ -55,6 +51,19 @@ function TimeSeriesViewContainer({
 		return isValid.every(Boolean);
 	}, [currentQuery]);
 
+	const [yAxisUnit, setYAxisUnit] = useState<string>(
+		isValidToConvertToMs ? 'ms' : 'short',
+	);
+
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnit(value);
+	};
+
+	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -110,16 +119,21 @@ function TimeSeriesViewContainer({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	return (
-		<TimeSeriesView
-			isFilterApplied={isFilterApplied}
-			isError={isError}
-			error={error as APIError}
-			isLoading={isLoading || isFetching}
-			data={responseData}
-			yAxisUnit={isValidToConvertToMs ? 'ms' : 'short'}
-			dataSource={dataSource}
-			setWarning={setWarning}
-		/>
+		<div className="trace-explorer-time-series-view-container">
+			<div className="trace-explorer-time-series-view-container-header">
+				<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			</div>
+			<TimeSeriesView
+				isFilterApplied={isFilterApplied}
+				isError={isError}
+				error={error as APIError}
+				isLoading={isLoading || isFetching}
+				data={responseData}
+				yAxisUnit={yAxisUnit}
+				dataSource={dataSource}
+				setWarning={setWarning}
+			/>
+		</div>
 	);
 }
 

frontend/src/pages/TracesExplorer/index.tsx

@@ -15,7 +15,6 @@ import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapp
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import TimeSeriesView from 'container/TimeSeriesView';
 import Toolbar from 'container/Toolbar/Toolbar';
 import {
 	getExportQueryData,
@@ -51,6 +50,8 @@ import {
 } from 'utils/explorerUtils';
 import { v4 } from 'uuid';
 
+import TimeSeriesView from './TimeSeriesView';
+
 function TracesExplorer(): JSX.Element {
 	const {
 		panelType,