From 175e9a4c5ec071c7148f329791ccee474b3273d8 Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Sat, 17 May 2025 16:23:11 +0530 Subject: [PATCH] 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 --- .../src/api/metrics/ApDex/getApDexSettings.ts | 8 ------ .../src/api/v1/settings/apdex/services/get.ts | 26 +++++++++++++++++++ .../Tabs/Overview/ApDex/index.tsx | 15 ++++++++--- .../src/hooks/apDex/useGetApDexSettings.ts | 12 ++++++--- .../ApDex/ApDexApplication.tsx | 15 ++++++++--- .../axiosResponseMockThresholdData.ts | 7 +++-- .../pages/MetricsApplication/ApDex/types.ts | 4 +-- frontend/src/types/api/metrics/getApDex.ts | 5 ++++ 8 files changed, 70 insertions(+), 22 deletions(-) delete mode 100644 frontend/src/api/metrics/ApDex/getApDexSettings.ts create mode 100644 frontend/src/api/v1/settings/apdex/services/get.ts diff --git a/frontend/src/api/metrics/ApDex/getApDexSettings.ts b/frontend/src/api/metrics/ApDex/getApDexSettings.ts deleted file mode 100644 index 4dcb96c760..0000000000 --- a/frontend/src/api/metrics/ApDex/getApDexSettings.ts +++ /dev/null @@ -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> => - axios.get(`/settings/apdex?services=${servicename}`); diff --git a/frontend/src/api/v1/settings/apdex/services/get.ts b/frontend/src/api/v1/settings/apdex/services/get.ts new file mode 100644 index 0000000000..bea1cb138f --- /dev/null +++ b/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> => { + try { + const response = await axios.get( + `/settings/apdex?services=${servicename}`, + ); + return { + httpStatusCode: response.status, + data: response.data.data, + }; + } catch (error) { + ErrorResponseHandlerV2(error as AxiosError); + } +}; + +export default getApDexSettings; diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx index 140b6d1409..c901aa4f2e 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx +++ b/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 { memo } from 'react'; +import { useNotifications } from 'hooks/useNotifications'; +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(); 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 ( diff --git a/frontend/src/hooks/apDex/useGetApDexSettings.ts b/frontend/src/hooks/apDex/useGetApDexSettings.ts index c97a5a90a5..8bd0f6c3ee 100644 --- a/frontend/src/hooks/apDex/useGetApDexSettings.ts +++ b/frontend/src/hooks/apDex/useGetApDexSettings.ts @@ -1,12 +1,16 @@ -import { getApDexSettings } from 'api/metrics/ApDex/getApDexSettings'; -import { AxiosError, AxiosResponse } from 'axios'; +import getApDexSettings from 'api/v1/settings/apdex/services/get'; 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, AxiosError> => - useQuery, AxiosError>({ +): UseQueryResult< + SuccessResponseV2, + APIError +> => + useQuery, APIError>({ queryKey: [{ servicename }], queryFn: async () => getApDexSettings(servicename), }); diff --git a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx b/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx index 00b29c7809..29800fe864 100644 --- a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx +++ b/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 { useState } from 'react'; +import { useNotifications } from 'hooks/useNotifications'; +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(false); - useErrorNotification(error); + const { notifications } = useNotifications(); + + useEffect(() => { + if (error) { + notifications.error({ + message: error.getErrorCode(), + description: error.getErrorMessage(), + }); + } + }, [error, notifications]); const handlePopOverClose = (): void => { setIsOpen(false); diff --git a/frontend/src/pages/MetricsApplication/ApDex/__mock__/axiosResponseMockThresholdData.ts b/frontend/src/pages/MetricsApplication/ApDex/__mock__/axiosResponseMockThresholdData.ts index c0028a91c2..3e3b43f477 100644 --- a/frontend/src/pages/MetricsApplication/ApDex/__mock__/axiosResponseMockThresholdData.ts +++ b/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; diff --git a/frontend/src/pages/MetricsApplication/ApDex/types.ts b/frontend/src/pages/MetricsApplication/ApDex/types.ts index 37a931886c..4a50cd4684 100644 --- a/frontend/src/pages/MetricsApplication/ApDex/types.ts +++ b/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; + data?: SuccessResponseV2; refetchGetApDexSetting?: () => void; } diff --git a/frontend/src/types/api/metrics/getApDex.ts b/frontend/src/types/api/metrics/getApDex.ts index 60c82fefd0..43203cda1c 100644 --- a/frontend/src/types/api/metrics/getApDex.ts +++ b/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; +}