feta(dashboard): Add Retry Strategy

pkg/web/src/services/clusterApi.ts

@@ -1,3 +1,4 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { ClusterSimpleInfo } from '../models';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
@@ -28,14 +29,17 @@ interface DeleteClusterArgs {
 export const clusterApi = createApi({
   reducerPath: 'clusterApi',
   tagTypes: ['clusterList'],
-  baseQuery: fetchBaseQuery({
-    cache: 'no-cache',
-    baseUrl: `/api/v1/cluster`,
-    prepareHeaders: (headers, api) => {
-      headers.set('Content-Type', 'application/json');
-      return headers;
-    },
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      cache: 'no-cache',
+      baseUrl: `/api/v1/cluster`,
+      timeout: 15000,
+      prepareHeaders: (headers, api) => {
+        headers.set('Content-Type', 'application/json');
+        return headers;
+      },
+    }),
+  ),
   endpoints: (builder) => ({
     deleteCluster: builder.mutation<any, DeleteClusterArgs>({
       invalidatesTags: ['clusterList'],

pkg/web/src/services/grafanaApi.ts

@@ -1,3 +1,4 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 type FetchDashboardDetailArgs = {
@@ -11,11 +12,14 @@ interface FetchDashboardListArgs {
 
 export const grafanaApi = createApi({
   reducerPath: 'grafanaApi',
-  baseQuery: fetchBaseQuery({
-    baseUrl: '',
-    prepareHeaders: (headers, api) => headers,
-    fetchFn: (input, init) => fetch(input, { ...init }),
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      baseUrl: '',
+      timeout: 15000,
+      prepareHeaders: (headers, api) => headers,
+      fetchFn: (input, init) => fetch(input, { ...init }),
+    }),
+  ),
   endpoints: (builder) => ({
     fetchDashboardList: builder.query<any, FetchDashboardListArgs>({
       query: (args) => ({

pkg/web/src/services/namespaceApi.ts

@@ -1,3 +1,4 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 export interface FetchNamespaceListArgs {
@@ -15,14 +16,17 @@ export interface FetchNamespaceListResult {
 export const namespaceApi = createApi({
   reducerPath: 'namespaceApi',
   tagTypes: ['namespaceList'],
-  baseQuery: fetchBaseQuery({
-    baseUrl: '/api/v1/namespaces',
-    prepareHeaders: (headers, api) => {
-      headers.set('Content-Type', 'application/json');
-      headers.set('Accept', 'application/json');
-      return headers;
-    },
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      baseUrl: '/api/v1/namespaces',
+      timeout: 15000,
+      prepareHeaders: (headers, api) => {
+        headers.set('Content-Type', 'application/json');
+        headers.set('Accept', 'application/json');
+        return headers;
+      },
+    }),
+  ),
   endpoints: (builder) => ({
     fetchNamespaceList: builder.query<FetchNamespaceListResult, FetchNamespaceListArgs>({
       query: (args) => ({

pkg/web/src/services/prometheusApi.ts

@@ -1,3 +1,4 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { IBoardProps } from '../components/BoardChart';
 import queryString from 'query-string';
@@ -43,14 +44,17 @@ const URI = '/api/v1/prometheus';
 export const prometheusApi = createApi({
   reducerPath: 'prometheus',
   tagTypes: ['prometheus'],
-  baseQuery: fetchBaseQuery({
-    cache: 'no-cache',
-    baseUrl: ``,
-    prepareHeaders: (headers, api) => {
-      headers.set('Content-Type', 'application/json');
-      return headers;
-    },
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      cache: 'no-cache',
+      baseUrl: ``,
+      timeout: 15000,
+      prepareHeaders: (headers, api) => {
+        headers.set('Content-Type', 'application/json');
+        return headers;
+      },
+    }),
+  ),
   endpoints: (builder) => ({
     instantPrometheus: builder.query<QueryInstantPrometheusResult, QueryInstantPrometheusArgs>({
       providesTags: ['prometheus'],

pkg/web/src/services/recommendationApi.ts

@@ -1,6 +1,7 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { parse } from 'yaml';
-import {RecommendationRuleSimpleInfo} from "./recommendationRuleApi";
+import { RecommendationRuleSimpleInfo } from './recommendationRuleApi';
 
 interface ownerReference {
   apiVersion: string;
@@ -106,8 +107,8 @@ export interface RecommendationSimpleInfo {
 
 interface AdoptRecommendationArgs {
   craneUrl: string;
-  namespace?: string
-  name?: string
+  namespace?: string;
+  name?: string;
 }
 
 interface FetchRecommendationArgs {
@@ -128,14 +129,17 @@ const URI = '/api/v1/recommendation';
 export const recommendationApi = createApi({
   reducerPath: 'recommendationApi',
   tagTypes: ['recommendation', 'idleNode'],
-  baseQuery: fetchBaseQuery({
-    cache: 'no-cache',
-    baseUrl: ``,
-    prepareHeaders: (headers, api) => {
-      headers.set('Content-Type', 'application/json');
-      return headers;
-    },
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      cache: 'no-cache',
+      baseUrl: ``,
+      timeout: 15000,
+      prepareHeaders: (headers, api) => {
+        headers.set('Content-Type', 'application/json');
+        return headers;
+      },
+    }),
+  ),
   endpoints: (builder) => ({
     adoptRecommendation: builder.mutation<any, AdoptRecommendationArgs>({
       invalidatesTags: ['recommendation'],
@@ -171,4 +175,5 @@ export const recommendationApi = createApi({
   }),
 });
 
-export const { useFetchRecommendationListQuery, useLazyFetchRecommendationListQuery, useAdoptRecommendationMutation } = recommendationApi;
+export const { useFetchRecommendationListQuery, useLazyFetchRecommendationListQuery, useAdoptRecommendationMutation } =
+  recommendationApi;

pkg/web/src/services/recommendationRuleApi.ts

@@ -1,3 +1,4 @@
+import { buildRetryFetchBaseQuery } from './retryFetchBaseQuery';
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 type FetchRecommendationRuleListArgs = { craneUrl?: string };
@@ -46,14 +47,17 @@ const URI = '/api/v1/recommendationRule';
 export const recommendationRuleApi = createApi({
   reducerPath: 'recommendationRuleApi',
   tagTypes: ['recommendationRuleList'],
-  baseQuery: fetchBaseQuery({
-    cache: 'no-cache',
-    baseUrl: ``,
-    prepareHeaders: (headers, api) => {
-      headers.set('Content-Type', 'application/json');
-      return headers;
-    },
-  }),
+  baseQuery: buildRetryFetchBaseQuery(
+    fetchBaseQuery({
+      cache: 'no-cache',
+      baseUrl: ``,
+      timeout: 15000,
+      prepareHeaders: (headers, api) => {
+        headers.set('Content-Type', 'application/json');
+        return headers;
+      },
+    }),
+  ),
   endpoints: (builder) => ({
     deleteRecommendationRule: builder.mutation<any, DeleteRecommendationRuleArgs>({
       invalidatesTags: ['recommendationRuleList'],

pkg/web/src/services/retryFetchBaseQuery.ts

@@ -0,0 +1,23 @@
+import { BaseQueryFn, retry } from '@reduxjs/toolkit/query/react';
+
+/**
+ * BuildRetryFetchBaseQuery
+ * https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-retries
+ *
+ * RTK Query exports a utility called retry that you can wrap the baseQuery in your API definition with. It defaults to 5 attempts with a basic exponential backoff.
+ * The default behavior would retry at these intervals:
+ *
+ * 600ms * random(0.4, 1.4)
+ * 1200ms * random(0.4, 1.4)
+ * 2400ms * random(0.4, 1.4)
+ * 4800ms * random(0.4, 1.4)
+ * 9600ms * random(0.4, 1.4)
+ * @param fn fetchBaseQuery
+ * @returns
+ */
+export const buildRetryFetchBaseQuery = (fn: any): BaseQueryFn => {
+  const staggeredBaseQuery = retry(fn, {
+    maxRetries: 10,
+  });
+  return staggeredBaseQuery;
+};