feat: pass abort signal to cancel api request on query-key change or … (#4193)

* feat: pass abort signal to cancel api request on query-key change or dashboard unmount

* fix: transformIgnorePatterns axios

* fix: remove axios types

* feat: handle error type from dashboardAPI response

* feat: remove console.log

frontend/jest.config.ts

@@ -22,7 +22,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -38,7 +38,7 @@
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
-		"axios": "^0.21.0",
+		"axios": "1.6.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -87,7 +87,7 @@
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
 		"react-markdown": "8.0.7",
-		"react-query": "^3.34.19",
+		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-syntax-highlighter": "15.5.0",

frontend/src/api/ErrorResponseHandler.ts

@@ -1,4 +1,4 @@
-import { AxiosError } from 'axios';
+import { AxiosError, AxiosResponse } from 'axios';
 import { ErrorResponse } from 'types/api';
 import { ErrorStatusCode } from 'types/common';
 
@@ -10,7 +10,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		const statusCode = response.status as ErrorStatusCode;
 
 		if (statusCode >= 400 && statusCode < 500) {
-			const { data } = response;
+			const { data } = response as AxiosResponse;
 
 			if (statusCode === 404) {
 				return {

frontend/src/api/dashboard/get.ts

@@ -3,9 +3,9 @@ import { ApiResponse } from 'types/api';
 import { Props } from 'types/api/dashboard/get';
 import { Dashboard } from 'types/api/dashboard/getAll';
 
-const get = (props: Props): Promise<Dashboard> =>
+const getDashboard = (props: Props): Promise<Dashboard> =>
 	axios
 		.get<ApiResponse<Dashboard>>(`/dashboards/${props.uuid}`)
 		.then((res) => res.data.data);
 
-export default get;
+export default getDashboard;

frontend/src/api/index.ts

@@ -4,7 +4,7 @@
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import loginApi from 'api/user/login';
 import afterLogin from 'AppRoutes/utils';
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import store from 'store';
@@ -17,14 +17,16 @@ const interceptorsResponse = (
 ): Promise<AxiosResponse<any>> => Promise.resolve(value);
 
 const interceptorsRequestResponse = (
-	value: AxiosRequestConfig,
+	value: InternalAxiosRequestConfig,
-): AxiosRequestConfig => {
+): InternalAxiosRequestConfig => {
 	const token =
 		store.getState().app.user?.accessJwt ||
 		getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) ||
 		'';
 
+	if (value && value.headers) {
 		value.headers.Authorization = token ? `Bearer ${token}` : '';
+	}
 
 	return value;
 };
@@ -92,8 +94,8 @@ const instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
 });
 
-instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiAlertManager}`,

frontend/src/api/metrics/getQueryRange.ts

@@ -9,9 +9,10 @@ import {
 
 export const getMetricsQueryRange = async (
 	props: QueryRangePayload,
+	signal: AbortSignal,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
-		const response = await axios.post('/query_range', props);
+		const response = await axios.post('/query_range', props, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/container/PipelinePage/PipelineListsView/Preview/hooks/usePipelinePreview.ts

@@ -53,7 +53,7 @@ const usePipelinePreview = ({
 		isLoading: isFetching,
 		outputLogs,
 		isError,
-		errorMsg: error?.response?.data?.error || '',
+		errorMsg: error?.message || '',
 	};
 };
 

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -15,14 +15,19 @@ type UseGetQueryRange = (
 
 export const useGetQueryRange: UseGetQueryRange = (requestData, options) => {
 	const queryKey = useMemo(() => {
-		if (options?.queryKey) {
+		if (options?.queryKey && Array.isArray(options.queryKey)) {
 			return [...options.queryKey];
 		}
+
+		if (options?.queryKey && typeof options.queryKey === 'string') {
+			return options.queryKey;
+		}
+
 		return [REACT_QUERY_KEY.GET_QUERY_RANGE, requestData];
 	}, [options?.queryKey, requestData]);
 
 	return useQuery<SuccessResponse<MetricRangePayloadProps>, Error>({
-		queryFn: async () => GetMetricQueryRange(requestData),
+		queryFn: async ({ signal }) => GetMetricQueryRange(requestData, signal),
 		...options,
 		queryKey,
 	});

frontend/src/lib/dashboard/getQueryResults.ts

@@ -17,10 +17,11 @@ import { prepareQueryRangePayload } from './prepareQueryRangePayload';
 
 export async function GetMetricQueryRange(
 	props: GetQueryResultsProps,
+	signal?: AbortSignal,
 ): Promise<SuccessResponse<MetricRangePayloadProps>> {
 	const { legendMap, queryPayload } = prepareQueryRangePayload(props);
 
-	const response = await getMetricsQueryRange(queryPayload);
+	const response = await getMetricsQueryRange(queryPayload, signal);
 
 	if (response.statusCode >= 400) {
 		throw new Error(

frontend/src/pages/NewDashboard/DashboardPage.tsx

@@ -12,7 +12,9 @@ function DashboardPage(): JSX.Element {
 	const { isFetching, isError, isLoading } = dashboardResponse;
 
 	const errorMessage = isError
-		? (dashboardResponse?.error as AxiosError)?.response?.data.errorType
+		? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		  // @ts-ignore
+		  (dashboardResponse?.error as AxiosError)?.response?.data?.errorType
 		: 'Something went wrong';
 
 	if (isError && !isFetching && errorMessage === ErrorType.NotFound) {

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -1,5 +1,5 @@
 import Modal from 'antd/es/modal';
-import get from 'api/dashboard/get';
+import getDashboard from 'api/dashboard/get';
 import lockDashboardApi from 'api/dashboard/lockDashboard';
 import unlockDashboardApi from 'api/dashboard/unlockDashboard';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -107,7 +107,7 @@ export function DashboardProvider({
 		{
 			enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn,
 			queryFn: () =>
-				get({
+				getDashboard({
 					uuid: dashboardId,
 				}),
 			refetchOnWindowFocus: false,

frontend/yarn.lock

@@ -4639,7 +4639,16 @@ axe-core@^4.6.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
-axios@^0.21.0, axios@^0.21.1:
+axios@1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axios@^0.21.1:
   version "0.21.4"
   resolved "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
@@ -7710,6 +7719,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+follow-redirects@^1.15.0:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+
 fontfaceobserver@2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz"
@@ -7759,6 +7773,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
@@ -12294,6 +12317,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz"
@@ -12962,9 +12990,9 @@ react-markdown@8.0.7, react-markdown@~8.0.0:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-react-query@^3.34.19:
+react-query@3.39.3:
   version "3.39.3"
-  resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35"
   integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==
   dependencies:
     "@babel/runtime" "^7.5.5"