fix(apm): update the apdex to latest response structure (#7966)

* fix(apm): update the apdex to latest response structure

* fix(apm): update the apdex to latest response structure

frontend/src/api/metrics/ApDex/getApDexSettings.ts

@@ -1,8 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
-
-export const getApDexSettings = (
-	servicename: string,
-): Promise<AxiosResponse<ApDexPayloadAndSettingsProps[]>> =>
-	axios.get(`/settings/apdex?services=${servicename}`);

frontend/src/api/v1/settings/apdex/services/get.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	ApDexPayloadAndSettingsProps,
+	PayloadProps,
+} from 'types/api/metrics/getApDex';
+
+const getApDexSettings = async (
+	servicename: string,
+): Promise<SuccessResponseV2<ApDexPayloadAndSettingsProps[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(
+			`/settings/apdex?services=${servicename}`,
+		);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getApDexSettings;

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx

@@ -1,8 +1,8 @@
 import Spinner from 'components/Spinner';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { useGetApDexSettings } from 'hooks/apDex/useGetApDexSettings';
-import useErrorNotification from 'hooks/useErrorNotification';
+import { useNotifications } from 'hooks/useNotifications';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { IServiceName } from '../../types';
@@ -17,11 +17,20 @@ function ApDexApplication({
 }: ApDexApplicationProps): JSX.Element {
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
+	const { notifications } = useNotifications();
 
 	const { data, isLoading, error, isRefetching } = useGetApDexSettings(
 		servicename,
 	);
-	useErrorNotification(error);
+
+	useEffect(() => {
+		if (error) {
+			notifications.error({
+				message: error.getErrorCode(),
+				description: error.getErrorMessage(),
+			});
+		}
+	}, [error, notifications]);
 
 	if (isLoading || isRefetching) {
 		return (

frontend/src/hooks/apDex/useGetApDexSettings.ts

@@ -1,12 +1,16 @@
-import { getApDexSettings } from 'api/metrics/ApDex/getApDexSettings';
+import getApDexSettings from 'api/v1/settings/apdex/services/get';
-import { AxiosError, AxiosResponse } from 'axios';
 import { useQuery, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import APIError from 'types/api/error';
 import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
 
 export const useGetApDexSettings = (
 	servicename: string,
-): UseQueryResult<AxiosResponse<ApDexPayloadAndSettingsProps[]>, AxiosError> =>
+): UseQueryResult<
-	useQuery<AxiosResponse<ApDexPayloadAndSettingsProps[]>, AxiosError>({
+	SuccessResponseV2<ApDexPayloadAndSettingsProps[]>,
+	APIError
+> =>
+	useQuery<SuccessResponseV2<ApDexPayloadAndSettingsProps[]>, APIError>({
 		queryKey: [{ servicename }],
 		queryFn: async () => getApDexSettings(servicename),
 	});

frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx

@@ -2,8 +2,8 @@ import { SettingOutlined } from '@ant-design/icons';
 import { Popover } from 'antd';
 import { IServiceName } from 'container/MetricsApplication/Tabs/types';
 import { useGetApDexSettings } from 'hooks/apDex/useGetApDexSettings';
-import useErrorNotification from 'hooks/useErrorNotification';
+import { useNotifications } from 'hooks/useNotifications';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Button } from '../styles';
@@ -20,7 +20,16 @@ function ApDexApplication(): JSX.Element {
 		refetch: refetchGetApDexSetting,
 	} = useGetApDexSettings(servicename);
 	const [isOpen, setIsOpen] = useState<boolean>(false);
-	useErrorNotification(error);
+	const { notifications } = useNotifications();
+
+	useEffect(() => {
+		if (error) {
+			notifications.error({
+				message: error.getErrorCode(),
+				description: error.getErrorMessage(),
+			});
+		}
+	}, [error, notifications]);
 
 	const handlePopOverClose = (): void => {
 		setIsOpen(false);

frontend/src/pages/MetricsApplication/ApDex/__mock__/axiosResponseMockThresholdData.ts

@@ -1,4 +1,6 @@
-import { AxiosResponse } from 'axios';
+import { StatusCodes } from 'http-status-codes';
+import { SuccessResponseV2 } from 'types/api';
+import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
 
 export const axiosResponseThresholdData = {
 	data: [
@@ -6,4 +8,5 @@ export const axiosResponseThresholdData = {
 			threshold: 0.5,
 		},
 	],
-} as AxiosResponse;
+	httpStatusCode: StatusCodes.OK,
+} as SuccessResponseV2<ApDexPayloadAndSettingsProps[]>;

frontend/src/pages/MetricsApplication/ApDex/types.ts

@@ -1,10 +1,10 @@
-import { AxiosResponse } from 'axios';
+import { SuccessResponseV2 } from 'types/api';
 import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
 
 export interface ApDexSettingsProps {
 	servicename: string;
 	handlePopOverClose: () => void;
 	isLoading?: boolean;
-	data?: AxiosResponse<ApDexPayloadAndSettingsProps[]>;
+	data?: SuccessResponseV2<ApDexPayloadAndSettingsProps[]>;
 	refetchGetApDexSetting?: () => void;
 }

frontend/src/types/api/metrics/getApDex.ts

@@ -12,3 +12,8 @@ export interface MetricMetaProps {
 	delta: boolean;
 	le: number[] | null;
 }
+
+export interface PayloadProps {
+	data: ApDexPayloadAndSettingsProps[];
+	status: string;
+}