feat: support y axis unit in timeseries view of logs and traces explorer (#9709)

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

@@ -124,7 +124,7 @@
 
 		.builder-units-filter-label {
 			margin-bottom: 0px !important;
-			font-size: 13px;
+			font-size: 12px;
 		}
 	}
 }

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx

@@ -1,10 +1,10 @@
-import { Select, SelectProps, Space } from 'antd';
+import { Select, SelectProps, Space, Typography } from 'antd';
 import { getCategorySelectOptionByName } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { categoryToSupport } from './config';
-import { DefaultLabel, selectStyles } from './styles';
+import { selectStyles } from './styles';
 import { IBuilderUnitsFilterProps } from './types';
 import { filterOption } from './utils';
 
@@ -31,9 +31,9 @@ function BuilderUnitsFilter({
 
 	return (
 		<Space className="builder-units-filter">
-			<DefaultLabel className="builder-units-filter-label">
+			<Typography.Text className="builder-units-filter-label">
 				Y-axis unit
-			</DefaultLabel>
+			</Typography.Text>
 			<Select
 				getPopupContainer={popupContainer}
 				style={selectStyles}

frontend/src/container/TimeSeriesView/TimeSeriesView.styles.scss

@@ -8,4 +8,13 @@
 		min-height: 350px;
 		padding: 0px 12px;
 	}
+
+	.time-series-view-container {
+		.time-series-view-container-header {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			padding: 12px 0;
+		}
+	}
 }

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -11,6 +11,7 @@ import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import EmptyMetricsSearch from 'container/MetricsExplorer/Explorer/EmptyMetricsSearch';
 import { MetricsLoading } from 'container/MetricsExplorer/MetricsLoading/MetricsLoading';
 import NoLogs from 'container/NoLogs/NoLogs';
+import { BuilderUnitsFilter } from 'container/QueryBuilder/filters';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
 import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -81,6 +82,14 @@ function TimeSeriesView({
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
 	const [graphVisibility, setGraphVisibility] = useState<boolean[]>([]);
+	const [yAxisUnitInternal, setYAxisUnitInternal] = useState<string>(
+		yAxisUnit || '',
+	);
+
+	const onUnitChangeHandler = (value: string): void => {
+		setYAxisUnitInternal(value);
+	};
+
 	const legendScrollPositionRef = useRef<{
 		scrollTop: number;
 		scrollLeft: number;
@@ -189,7 +198,7 @@ function TimeSeriesView({
 	const chartOptions = getUPlotChartOptions({
 		id: 'time-series-explorer',
 		onDragSelect,
-		yAxisUnit: yAxisUnit || '',
+		yAxisUnit: yAxisUnitInternal || '',
 		apiResponse: data?.payload,
 		dimensions: {
 			width: containerDimensions.width,
@@ -261,7 +270,17 @@ function TimeSeriesView({
 					!isError &&
 					chartData &&
 					!isEmpty(chartData?.[0]) &&
-					chartOptions && <Uplot data={chartData} options={chartOptions} />}
+					chartOptions && (
+						<div className="time-series-view-container">
+							<div className="time-series-view-container-header">
+								<BuilderUnitsFilter
+									onChange={onUnitChangeHandler}
+									yAxisUnit={yAxisUnitInternal}
+								/>
+							</div>
+							<Uplot data={chartData} options={chartOptions} />
+						</div>
+					)}
 			</div>
 		</div>
 	);