fix: add converting to ms for the durationNano attribute (#3072)

* fix: add converting to ms for the durationNano attrbute

* fix: add ms title to the graph

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -11,6 +11,7 @@ function TimeSeriesView({
 	data,
 	isLoading,
 	isError,
+	yAxisUnit,
 }: TimeSeriesViewProps): JSX.Element {
 	const chartData = useMemo(
 		() =>
@@ -32,6 +33,7 @@ function TimeSeriesView({
 				<Graph
 					animate={false}
 					data={chartData}
+					yAxisUnit={yAxisUnit}
 					name="tracesExplorerGraph"
 					type="line"
 				/>
@@ -42,12 +44,14 @@ function TimeSeriesView({
 
 interface TimeSeriesViewProps {
 	data?: SuccessResponse<MetricRangePayloadProps>;
+	yAxisUnit?: string;
 	isLoading: boolean;
 	isError: boolean;
 }
 
 TimeSeriesView.defaultProps = {
 	data: undefined,
+	yAxisUnit: 'short',
 };
 
 export default TimeSeriesView;

frontend/src/container/TimeSeriesView/index.tsx

@@ -2,23 +2,43 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 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,
 }: TimeSeriesViewProps): JSX.Element {
-	const { stagedQuery, panelType } = useQueryBuilder();
+	const { stagedQuery, currentQuery, panelType } = useQueryBuilder();
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const isValidToConvertToMs = useMemo(() => {
+		const isValid: boolean[] = [];
+
+		currentQuery.builder.queryData.forEach(
+			({ aggregateAttribute, aggregateOperator }) => {
+				const isExistDurationNanoAttribute =
+					aggregateAttribute.key === 'durationNano';
+
+				const isCountOperator =
+					aggregateOperator === 'count' || aggregateOperator === 'count_distinct';
+
+				isValid.push(!isCountOperator && isExistDurationNanoAttribute);
+			},
+		);
+
+		return isValid.every(Boolean);
+	}, [currentQuery]);
+
 	const { data, isLoading, isError } = useGetQueryRange(
 		{
 			query: stagedQuery || initialQueriesMap[dataSource],
@@ -41,7 +61,19 @@ function TimeSeriesViewContainer({
 		},
 	);
 
-	return <TimeSeriesView isError={isError} isLoading={isLoading} data={data} />;
+	const responseData = useMemo(
+		() => (isValidToConvertToMs ? convertDataValueToMs(data) : data),
+		[data, isValidToConvertToMs],
+	);
+
+	return (
+		<TimeSeriesView
+			isError={isError}
+			isLoading={isLoading}
+			data={responseData}
+			yAxisUnit={isValidToConvertToMs ? 'ms' : 'short'}
+		/>
+	);
 }
 
 interface TimeSeriesViewProps {

frontend/src/container/TimeSeriesView/utils.ts

@@ -0,0 +1,26 @@
+import { SuccessResponse } from 'types/api/index';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData } from 'types/api/widgets/getQuery';
+
+export const convertDataValueToMs = (
+	data?: SuccessResponse<MetricRangePayloadProps>,
+): SuccessResponse<MetricRangePayloadProps> | undefined => {
+	const convertedData = data;
+
+	const convertedResult: QueryData[] = data?.payload?.data?.result
+		? data.payload.data.result.map((item) => {
+				const values: [number, string][] = item.values.map((value) => {
+					const [first = 0, second = ''] = value || [];
+					return [first, String(Number(second) / 1000000)];
+				});
+
+				return { ...item, values };
+		  })
+		: [];
+
+	if (convertedData?.payload?.data?.result && convertedResult) {
+		convertedData.payload.data.result = convertedResult;
+	}
+
+	return convertedData;
+};