Merge branch 'main' into SIG-3495

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -1,29 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
-
-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,
-		};
-	} catch (error) {
-		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};

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

@@ -1,5 +1,10 @@
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip, Typography } from 'antd';
+import { toast } from '@signozhq/sonner';
+import { Button, Tooltip, Typography } from 'antd';
+import {
+	invalidateGetMetricMetadata,
+	useUpdateMetricMetadata,
+} from 'api/generated/services/metrics';
 import { isAxiosError } from 'axios';
 import classNames from 'classnames';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
@@ -13,7 +18,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { AlertTriangle } from 'lucide-react';
 import { useMemo } from 'react';
-import { useQueries } from 'react-query';
+import { useQueries, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
@@ -23,7 +28,10 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { TimeSeriesProps } from './types';
-import { splitQueryIntoOneChartPerQuery } from './utils';
+import {
+	buildUpdateMetricYAxisUnitPayload,
+	splitQueryIntoOneChartPerQuery,
+} from './utils';
 
 function TimeSeries({
 	showOneChartPerQuery,
@@ -35,6 +43,7 @@ function TimeSeries({
 	yAxisUnit,
 	setYAxisUnit,
 	showYAxisUnitSelector,
+	metrics,
 }: TimeSeriesProps): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
 
@@ -42,6 +51,7 @@ function TimeSeries({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
@@ -138,54 +148,45 @@ function TimeSeries({
 		setYAxisUnit(value);
 	};
 
-	// TODO: Enable once we have resolved all related metrics v2 api issues
 	// 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 showSaveUnitButton = useMemo(
+		() =>
+			metricUnits.length === 1 &&
+			Boolean(metrics?.[0]) &&
+			!metricUnits[0] &&
+			yAxisUnit,
+		[metricUnits, metrics, yAxisUnit],
+	);
 
-	// const {
-	// 	mutate: updateMetricMetadata,
-	// 	isLoading: isUpdatingMetricMetadata,
-	// } = useUpdateMetricMetadata();
+	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 handleSaveUnit = (): void => {
+		updateMetricMetadata(
+			{
+				pathParams: {
+					metricName: metricNames[0],
+				},
+				data: buildUpdateMetricYAxisUnitPayload(metrics?.[0], yAxisUnit),
+			},
+			{
+				onSuccess: () => {
+					toast.success('Unit saved successfully');
+					invalidateGetMetricMetadata(queryClient, {
+						metricName: metricNames[0],
+					});
+				},
+				onError: () => {
+					toast.error('Failed to save unit');
+				},
+			},
+		);
+	};
 
 	return (
 		<>
@@ -198,8 +199,7 @@ function TimeSeries({
 							source={YAxisSource.EXPLORER}
 							data-testid="y-axis-unit-selector"
 						/>
-						{/* TODO: Enable once we have resolved all related metrics v2 api issues */}
-						{/* {showSaveUnitButton && (
+						{showSaveUnitButton && (
 							<div className="save-unit-container">
 								<Typography.Text>
 									Save the selected unit for this metric?
@@ -213,7 +213,7 @@ function TimeSeries({
 									<Typography.Paragraph>Yes</Typography.Paragraph>
 								</Button>
 							</div>
-						)} */}
+						)}
 					</>
 				)}
 			</div>

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

@@ -2,9 +2,7 @@ import { render, RenderResult, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { UpdateMetricMetadataResponse } from 'api/metricsExplorer/updateMetricMetadata';
-import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
-import { UseUpdateMetricMetadataProps } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { UseMutationResult } from 'react-query';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
@@ -12,18 +10,14 @@ import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
 import TimeSeries from '../TimeSeries';
 import { TimeSeriesProps } from '../types';
 
-type MockUpdateMetricMetadata = UseMutationResult<
-	SuccessResponse<UpdateMetricMetadataResponse> | ErrorResponse,
-	Error,
-	UseUpdateMetricMetadataProps
->;
 const mockUpdateMetricMetadata = jest.fn();
-jest
-	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
-	.mockReturnValue(({
-		mutate: mockUpdateMetricMetadata,
-		isLoading: false,
-	} as Partial<MockUpdateMetricMetadata>) as MockUpdateMetricMetadata);
+const updateMetricMetadataSpy = jest.spyOn(
+	metricsExplorerHooks,
+	'useUpdateMetricMetadata',
+);
+type UseUpdateMetricMetadataReturnType = ReturnType<
+	typeof metricsExplorerHooks.useUpdateMetricMetadata
+>;
 
 jest.mock('container/TimeSeriesView/TimeSeriesView', () => ({
 	__esModule: true,
@@ -96,6 +90,13 @@ function renderTimeSeries(
 }
 
 describe('TimeSeries', () => {
+	beforeEach(() => {
+		updateMetricMetadataSpy.mockReturnValue(({
+			mutate: mockUpdateMetricMetadata,
+			isLoading: false,
+		} as Partial<UseUpdateMetricMetadataReturnType>) as UseUpdateMetricMetadataReturnType);
+	});
+
 	it('should render a warning icon when a metric has no unit among multiple metrics', () => {
 		const user = userEvent.setup();
 		const { container } = renderTimeSeries({
@@ -133,18 +134,17 @@ describe('TimeSeries', () => {
 		);
 	});
 
-	// TODO: Unskip this test once the save unit button is implemented
-	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
-	it.skip('shows Save unit button when metric had no unit but one is selected', () => {
+	it('shows Save unit button when metric had no unit but one is selected', async () => {
 		const { findByText, getByRole } = renderTimeSeries({
 			metricUnits: [undefined],
 			metricNames: ['metric1'],
 			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
+			showYAxisUnitSelector: true,
 		});
 
 		expect(
-			findByText('Save the selected unit for this metric?'),
+			await findByText('Save the selected unit for this metric?'),
 		).toBeInTheDocument();
 
 		const yesButton = getByRole('button', { name: 'Yes' });
@@ -152,24 +152,25 @@ describe('TimeSeries', () => {
 		expect(yesButton).toBeEnabled();
 	});
 
-	// TODO: Unskip this test once the save unit button is implemented
-	// Tracking at - https://github.com/SigNoz/engineering-pod/issues/3495
-	it.skip('clicking on save unit button shoould upated metric metadata', () => {
+	it('clicking on save unit button shoould upated metric metadata', async () => {
 		const user = userEvent.setup();
 		const { getByRole } = renderTimeSeries({
 			metricUnits: [''],
 			metricNames: ['metric1'],
 			metrics: [mockMetric],
 			yAxisUnit: 'seconds',
+			showYAxisUnitSelector: true,
 		});
 
 		const yesButton = getByRole('button', { name: /Yes/i });
-		user.click(yesButton);
+		await user.click(yesButton);
 
 		expect(mockUpdateMetricMetadata).toHaveBeenCalledWith(
 			{
-				metricName: 'metric1',
-				payload: expect.objectContaining({ unit: 'seconds' }),
+				pathParams: {
+					metricName: 'metric1',
+				},
+				data: expect.objectContaining({ unit: 'seconds' }),
 			},
 			expect.objectContaining({
 				onSuccess: expect.any(Function),

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

@@ -1,3 +1,4 @@
+import { UpdateMetricMetadataMutationBody } from 'api/generated/services/metrics';
 import { mapMetricUnitToUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { useGetMultipleMetrics } from 'hooks/metricsExplorer/useGetMultipleMetrics';
 import { MetricMetadata } from 'types/api/metricsExplorer/v2/getMetricMetadata';
@@ -95,3 +96,15 @@ export function getMetricUnits(
 		.map((metric) => metric?.unit)
 		.map((unit) => mapMetricUnitToUniversalUnit(unit) || undefined);
 }
+
+export function buildUpdateMetricYAxisUnitPayload(
+	metric: MetricMetadata | undefined,
+	yAxisUnit: string | undefined,
+): UpdateMetricMetadataMutationBody {
+	return {
+		type: metric?.type,
+		description: metric?.description,
+		unit: yAxisUnit,
+		temporality: metric?.temporality,
+	};
+}

frontend/src/hooks/metricsExplorer/useGetMultipleMetrics.ts

@@ -1,5 +1,7 @@
-import { getMetricMetadata } from 'api/metricsExplorer/v2/getMetricMetadata';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	getGetMetricMetadataQueryKey,
+	getMetricMetadata,
+} from 'api/generated/services/metrics';
 import { useQueries, UseQueryOptions, UseQueryResult } from 'react-query';
 import { SuccessResponseV2 } from 'types/api';
 import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
@@ -18,14 +20,21 @@ type UseGetMultipleMetrics = (
 export const useGetMultipleMetrics: UseGetMultipleMetrics = (
 	metricNames,
 	options,
-	headers,
 ) =>
 	useQueries(
 		metricNames.map(
 			(metricName) =>
 				({
-					queryKey: [REACT_QUERY_KEY.GET_METRIC_METADATA, metricName],
-					queryFn: ({ signal }) => getMetricMetadata(metricName, signal, headers),
+					queryKey: getGetMetricMetadataQueryKey({
+						metricName,
+					}),
+					queryFn: ({ signal }) =>
+						getMetricMetadata(
+							{
+								metricName,
+							},
+							signal,
+						),
 					...options,
 				} as UseQueryOptions<SuccessResponseV2<MetricMetadataResponse>, Error>),
 		),