[#3062] fix(web): Support special character like "//" and improve the…

… interceptors of axios (#3118) ### What changes were proposed in this pull request? 1. Support special character like '//' for database name or table name and so on. <img width="852" alt="image" src="https://github.com/datastrato/gravitino/assets/9210625/9ae20ce1-3683-453a-a651-53a2277a8e25"> 3. Improvment interceptors of axois for avoide repeat request 4. Fix some runtime errors ### Why are the changes needed? N/A Fix: #3062 ### Does this PR introduce _any_ user-facing change? N/A ### How was this patch tested? Manual Co-authored-by: Qian Xia <lauraxiaqian@gmail.com>
apache · Apr 23, 2024 · a52e2ff · a52e2ff
1 parent f385dac
commit a52e2ff
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 37 deletions.
diff --git a/web/src/lib/api/catalogs/index.js b/web/src/lib/api/catalogs/index.js
@@ -6,11 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake }) => `/api/metalakes/${metalake}/catalogs?details=true`,
-  GET_DETAIL: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`,
-  CREATE: ({ metalake }) => `/api/metalakes/${metalake}/catalogs`,
-  UPDATE: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`,
-  DELETE: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}`
+  GET: ({ metalake }) => `/api/metalakes/${encodeURIComponent(metalake)}/catalogs?details=true`,
+  GET_DETAIL: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
+  CREATE: ({ metalake }) => `/api/metalakes/${encodeURIComponent(metalake)}/catalogs`,
+  UPDATE: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`,
+  DELETE: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}`
 }
 
 export const getCatalogsApi = params => {

diff --git a/web/src/lib/api/filesets/index.js b/web/src/lib/api/filesets/index.js
@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/filesets`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/filesets`,
   GET_DETAIL: ({ metalake, catalog, schema, fileset }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/filesets/${fileset}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/filesets/${encodeURIComponent(fileset)}`
 }
 
 export const getFilesetsApi = params => {

diff --git a/web/src/lib/api/schemas/index.js b/web/src/lib/api/schemas/index.js
@@ -6,8 +6,12 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas`,
-  GET_DETAIL: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}`
+  GET: ({ metalake, catalog }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(catalog)}/schemas`,
+  GET_DETAIL: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}`
 }
 
 export const getSchemasApi = params => {

diff --git a/web/src/lib/api/tables/index.js b/web/src/lib/api/tables/index.js
@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/tables`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/tables`,
   GET_DETAIL: ({ metalake, catalog, schema, table }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/tables/${table}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/tables/${encodeURIComponent(table)}`
 }
 
 export const getTablesApi = params => {

diff --git a/web/src/lib/api/topics/index.js b/web/src/lib/api/topics/index.js
@@ -6,9 +6,14 @@
 import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
-  GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/topics`,
+  GET: ({ metalake, catalog, schema }) =>
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/topics`,
   GET_DETAIL: ({ metalake, catalog, schema, topic }) =>
-    `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/topics/${topic}`
+    `/api/metalakes/${encodeURIComponent(metalake)}/catalogs/${encodeURIComponent(
+      catalog
+    )}/schemas/${encodeURIComponent(schema)}/topics/${encodeURIComponent(topic)}`
 }
 
 export const getTopicsApi = params => {

diff --git a/web/src/lib/provider/session.js b/web/src/lib/provider/session.js
@@ -48,7 +48,7 @@ const AuthProvider = ({ children }) => {
   useEffect(() => {
     const initAuth = async () => {
       const [authConfigsErr, resAuthConfigs] = await to(dispatch(getAuthConfigs()))
-      const { authType } = resAuthConfigs.payload
+      const authType = resAuthConfigs?.payload?.authType
 
       if (authType === 'simple') {
         dispatch(initialVersion())

diff --git a/web/src/lib/store/metalakes/index.js b/web/src/lib/store/metalakes/index.js
@@ -140,12 +140,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'relational') {
       const [err, res] = await to(getTablesApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(tableItem => {
         return {
           ...tableItem,
@@ -163,12 +163,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'fileset') {
       const [err, res] = await to(getFilesetsApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(filesetItem => {
         return {
           ...filesetItem,
@@ -184,12 +184,12 @@ export const setIntoTreeNodeWithFetch = createAsyncThunk(
     } else if (pathArr.length === 4 && type === 'messaging') {
       const [err, res] = await to(getTopicsApi({ metalake, catalog, schema }))
 
-      const { identifiers = [] } = res
-
       if (err || !res) {
         throw new Error(err)
       }
 
+      const { identifiers = [] } = res
+
       result.data = identifiers.map(topicItem => {
         return {
           ...topicItem,
@@ -970,27 +970,37 @@ export const appMetalakesSlice = createSlice({
       state.metalakes = action.payload.metalakes
     })
     builder.addCase(fetchMetalakes.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(setIntoTreeNodeWithFetch.fulfilled, (state, action) => {
       const { key, data, tree } = action.payload
 
       state.metalakeTree = updateTreeData(tree, key, data)
     })
     builder.addCase(setIntoTreeNodeWithFetch.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getMetalakeDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getMetalakeDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(createCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(updateCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchCatalogs.fulfilled, (state, action) => {
       state.catalogs = action.payload.catalogs
@@ -1004,16 +1014,22 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchCatalogs.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getCatalogDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getCatalogDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(deleteCatalog.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchSchemas.fulfilled, (state, action) => {
       state.schemas = action.payload.schemas
@@ -1022,13 +1038,17 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchSchemas.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getSchemaDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
     })
     builder.addCase(getSchemaDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchTables.fulfilled, (state, action) => {
       state.tables = action.payload.tables
@@ -1037,14 +1057,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchTables.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getTableDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = action.payload.columns || []
     })
     builder.addCase(getTableDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchFilesets.fulfilled, (state, action) => {
       state.filesets = action.payload.filesets
@@ -1053,14 +1077,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchFilesets.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getFilesetDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = []
     })
     builder.addCase(getFilesetDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(fetchTopics.fulfilled, (state, action) => {
       state.topics = action.payload.topics
@@ -1069,14 +1097,18 @@ export const appMetalakesSlice = createSlice({
       }
     })
     builder.addCase(fetchTopics.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
     builder.addCase(getTopicDetails.fulfilled, (state, action) => {
       state.activatedDetails = action.payload
       state.tableData = []
     })
     builder.addCase(getTopicDetails.rejected, (state, action) => {
-      toast.error(action.error.message)
+      if (!action.error.message.includes('CanceledError')) {
+        toast.error(action.error.message)
+      }
     })
   }
 })

diff --git a/web/src/lib/utils/axios/index.ts b/web/src/lib/utils/axios/index.ts
@@ -256,7 +256,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           apiUrl: '',
           urlPrefix: '',
           joinTime: true,
-          ignoreCancelToken: true,
+          ignoreCancelToken: false,
           withToken: true,
           retryRequest: {
             isOpenRetry: false,