[#1113][#1224] improvement(UI): TS support and improve global request…

… handing (#1332) ### What changes were proposed in this pull request? 1. Support TypeScript 2. Improve global reauest handing and add error messages ### Why are the changes needed? Fix: #1113 Fix: #1224 Fix: #1225 ### Does this PR introduce _any_ user-facing change? N/A ### How was this patch tested? N/A Co-authored-by: CHEYNE <[email protected]>
apache · Jan 4, 2024 · 839f5c7 · 839f5c7
1 parent 86f04a4
commit 839f5c7
Show file tree

Hide file tree

Showing 38 changed files with 1,547 additions and 223 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -273,10 +273,12 @@ tasks.rat {
     "**/licenses/*.md",
     "integration-test/**",
     "web/.**",
+    "web/next-env.d.ts",
     "web/dist/**/*",
     "web/node_modules/**/*",
-    "web/src/iconify-bundle/bundle-icons-react.js",
-    "web/src/iconify-bundle/icons-bundle-react.js",
+    "web/lib/utils/axios/**/*",
+    "web/lib/enums/httpEnum.ts",
+    "web/types/axios.d.ts",
     "web/yarn.lock",
     "**/LICENSE.*",
     "**/NOTICE.*"

diff --git a/web/.prettierignore b/web/.prettierignore
@@ -5,3 +5,4 @@
 
 .next
 node_modules
+tsconfig.json
diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
@@ -3,8 +3,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": false
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
   "eslint.validate": ["javascript", "javascriptreact"],
   "eslint.format.enable": true,

diff --git a/web/LICENSE.bin b/web/LICENSE.bin
@@ -203,15 +203,21 @@
 
    This product bundles various third-party components also under the
    Apache Software License 2.0.
-   
+
    Apache Zeppelin
    ./web/WEB-INF/web.xml
 
    @swc/helpers
+   typescript
 
    This product bundles various third-party components also under the
    MIT license.
 
+   Vben
+  ./web/lib/utils/axios
+  ./web/types/axios.d.ts
+  ./web/lib/enums/httpEnum.ts
+
    @babel/code-frame
    @babel/helper-module-imports
    @babel/helper-string-parser
@@ -321,6 +327,7 @@
    prop-types
    property-expr
    proxy-from-env
+   qs
    react-dom
    react-hook-form
    react-hot-toast
@@ -338,6 +345,7 @@
    rtl-css-js
    scheduler
    screenfull
+   side-channel
    stack-generator
    stackframe
    stacktrace-gps
@@ -348,11 +356,13 @@
    stylis
    supports-color
    supports-preserve-symlinks-flag
+   sweetalert2
    throttle-debounce
    tiny-case
    to-fast-properties
    toggle-selection
    toposort
+   undici-types
    use-sync-external-store
    watchpack
    yup

diff --git a/web/app/layout.js b/web/app/layout.js
@@ -12,27 +12,28 @@ import { NavigationEvents } from '@/lib/layout/navigation-events'
 import Provider from '@/lib/provider'
 import Layout from '@/lib/layout/Layout'
 
+import Loading from '@/lib/layout/Loading'
+
+import { Toaster } from 'react-hot-toast'
+
 export const metadata = {
   title: 'Gravitino',
   description: 'A high-performance, geo-distributed and federated metadata lake.'
 }
 
-import Loading from '@/lib/layout/Loading'
-
 const RootLayout = props => {
   const { children } = props
 
   return (
     <html lang='en' suppressHydrationWarning>
       <body>
         <Provider>
-          {
-            <Suspense fallback={<Loading />}>
-              <NavigationEvents />
-              <Layout>{children}</Layout>
-            </Suspense>
-          }
+          <Suspense fallback={<Loading />}>
+            <NavigationEvents />
+            <Layout>{children}</Layout>
+          </Suspense>
         </Provider>
+        <Toaster position='top-right' />
       </body>
     </html>
   )

diff --git a/web/jsconfig.json b/web/jsconfig.json
diff --git a/web/lib/api/auth/index.js b/web/lib/api/auth/index.js
@@ -3,19 +3,17 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import axios from 'axios'
+import { defHttp } from '@/lib/utils/axios'
+import qs from 'qs'
 
 export const getAuthConfigsApi = () => {
-  return axios({
-    url: `/configs`,
-    method: 'get'
+  return defHttp.get({
+    url: '/configs'
   })
 }
 
 export const loginApi = (url, params) => {
-  return axios({
-    url,
-    method: 'post',
-    params
+  return defHttp.post({
+    url: `${url}?${qs.stringify(params)}`
   })
 }
diff --git a/web/lib/api/catalogs/index.js b/web/lib/api/catalogs/index.js
@@ -3,7 +3,7 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import defHttp from '@/lib/api'
+import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
   GET: ({ metalake }) => `/api/metalakes/${metalake}/catalogs`,
@@ -12,23 +12,20 @@ const Apis = {
 }
 
 export const getCatalogsApi = params => {
-  return defHttp.request({
-    url: `${Apis.GET(params)}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET(params)}`
   })
 }
 
 export const getCatalogDetailsApi = ({ metalake, catalog }) => {
-  return defHttp.request({
-    url: `${Apis.GET_DETAIL({ metalake, catalog })}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET_DETAIL({ metalake, catalog })}`
   })
 }
 
 export const createCatalogApi = ({ data, metalake }) => {
-  return defHttp.request({
+  return defHttp.post({
     url: `${Apis.CREATE({ metalake })}`,
-    method: 'post',
     data
   })
 }
diff --git a/web/lib/api/index.js b/web/lib/api/index.js
diff --git a/web/lib/api/metalakes/index.js b/web/lib/api/metalakes/index.js
@@ -3,7 +3,7 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import defHttp from '@/lib/api'
+import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
   GET: '/api/metalakes',
@@ -13,38 +13,33 @@ const Apis = {
 }
 
 export const getMetalakesApi = () => {
-  return defHttp.request({
-    url: `${Apis.GET}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET}`
   })
 }
 
 export const getMetalakeDetailsApi = name => {
-  return defHttp.request({
-    url: `${Apis.GET}/${name}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET}/${name}`
   })
 }
 
 export const createMetalakeApi = data => {
-  return defHttp.request({
+  return defHttp.post({
     url: `${Apis.CREATE}`,
-    method: 'post',
     data
   })
 }
 
 export const deleteMetalakeApi = name => {
-  return defHttp.request({
-    url: `${Apis.DELETE}/${name}`,
-    method: 'delete'
+  return defHttp.delete({
+    url: `${Apis.DELETE}/${name}`
   })
 }
 
 export const updateMetalakeApi = ({ name, data }) => {
-  return defHttp.request({
+  return defHttp.put({
     url: `${Apis.UPDATE}/${name}`,
-    method: 'put',
     data
   })
 }
diff --git a/web/lib/api/schemas/index.js b/web/lib/api/schemas/index.js
@@ -3,23 +3,21 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import defHttp from '@/lib/api'
+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}`
 }
 
 export const getSchemasApi = params => {
-  return defHttp.request({
-    url: `${Apis.GET(params)}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET(params)}`
   })
 }
 
 export const getSchemaDetailsApi = ({ metalake, catalog, schema }) => {
-  return defHttp.request({
-    url: `${Apis.GET_DETAIL({ metalake, catalog, schema })}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET_DETAIL({ metalake, catalog, schema })}`
   })
 }
diff --git a/web/lib/api/tables/index.js b/web/lib/api/tables/index.js
@@ -3,7 +3,7 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import defHttp from '@/lib/api'
+import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
   GET: ({ metalake, catalog, schema }) => `/api/metalakes/${metalake}/catalogs/${catalog}/schemas/${schema}/tables`,
@@ -12,15 +12,13 @@ const Apis = {
 }
 
 export const getTablesApi = params => {
-  return defHttp.request({
-    url: `${Apis.GET(params)}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET(params)}`
   })
 }
 
 export const getTableDetailsApi = ({ metalake, catalog, schema, table }) => {
-  return defHttp.request({
-    url: `${Apis.GET_DETAIL({ metalake, catalog, schema, table })}`,
-    method: 'get'
+  return defHttp.get({
+    url: `${Apis.GET_DETAIL({ metalake, catalog, schema, table })}`
   })
 }
diff --git a/web/lib/api/version/index.js b/web/lib/api/version/index.js
@@ -3,15 +3,14 @@
  * This software is licensed under the Apache License version 2.
  */
 
-import defHttp from '@/lib/api'
+import { defHttp } from '@/lib/utils/axios'
 
 const Apis = {
   GET: '/api/version'
 }
 
 export const getVersionApi = () => {
-  return defHttp.request({
-    method: 'get',
+  return defHttp.get({
     url: `${Apis.GET}`
   })
 }