[apache#2443] refactor(web): Restructure web and configure production…

… mode for the static export (apache#2519)

### What changes were proposed in this pull request?

Reorganising the web folder hierarchy
- Placing application code under the src directory
- Reorganising the component file structure based on layout
- Remove the ui routing folder of the application
- Redefine the main project portal：${application}/index.html
- Configuring `distDir:dist/ui` and `basePath:/ui `parameters for build
static files


### Why are the changes needed?

- Distinguish between code files and configuration files
<img width="387" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/e5c29c1c-c52f-41e7-a534-48d031dd1996">

- Corresponding file code one by one according to the nest layout
<img width="1505" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/5487ede0-72e7-4778-8854-3b14aeadf678">
<img width="1497" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/f8d130dc-f5ed-42c6-8dd1-4cb160f6a53d">

- Distinguish between production and development modes by configuring a
secondary catalogue` /ui`
<img width="1511" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/ded0a951-43c8-425d-a266-32ca3d6367c1">



Fix: apache#2443

### Does this PR introduce _any_ user-facing change?

N/A

### How was this patch tested?

run the e2e test
<img width="1085" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/a2be4095-ddac-4f03-a89a-cbc754c65815">

build.gradle.kts

@@ -504,9 +504,9 @@ tasks.rat {
     "web/next-env.d.ts",
     "web/dist/**/*",
     "web/node_modules/**/*",
-    "web/lib/utils/axios/**/*",
-    "web/lib/enums/httpEnum.ts",
-    "web/types/axios.d.ts",
+    "web/src/lib/utils/axios/**/*",
+    "web/src/lib/enums/httpEnum.ts",
+    "web/src/types/axios.d.ts",
     "web/yarn.lock",
     "web/package-lock.json",
     "web/pnpm-lock.yaml",

server/src/main/java/com/datastrato/gravitino/server/web/ui/WebUIFilter.java

@@ -22,7 +22,7 @@ public void doFilter(ServletRequest request, ServletResponse response, FilterCha
     HttpServletRequest httpRequest = (HttpServletRequest) request;
     String path = httpRequest.getRequestURI();
     String lastPathSegment = path.substring(path.lastIndexOf("/") + 1);
-    if (path.equals("/")) {
+    if (path.equals("/") || path.equals("/ui") || path.equals("/ui/")) {
       // Redirect to the index page.
       httpRequest.getRequestDispatcher("/ui/index.html").forward(request, response);
     } else if (path.startsWith("/ui/") && !lastPathSegment.contains(".")) {

web/.env

@@ -5,6 +5,7 @@
 
 OUTPUT_MODE=standalone
 # Development ENV
+NEXT_PUBLIC_BASE_PATH=''
 NEXT_PUBLIC_API_URL=http://localhost:8090
 NEXT_PUBLIC_OAUTH_URI=http://localhost:9000
 NEXT_PUBLIC_OAUTH_PATH=/oauth2/token

web/.env.static

@@ -4,7 +4,10 @@
 #
 
 OUTPUT_MODE=export
+DIST_DIR=dist/ui
+BASE_PATH=/ui
 # Development ENV
+NEXT_PUBLIC_BASE_PATH=/ui
 NEXT_PUBLIC_API_URL=http://localhost:8090
 NEXT_PUBLIC_OAUTH_URI=http://localhost:9000
 NEXT_PUBLIC_OAUTH_PATH=/oauth2/token

web/next.config.js

@@ -22,10 +22,6 @@ const nextConfig = {
         async rewrites() {
           return {
             fallback: [
-              {
-                source: '/',
-                destination: `/ui`
-              },
               {
                 source: '/api/:path*',
                 destination: `${apiUrl}/api/:path*`
@@ -43,9 +39,10 @@ const nextConfig = {
         }
       }),
   output: process.env.OUTPUT_MODE || 'standalone',
-  distDir: 'dist',
+  basePath: process.env.BASE_PATH,
+  distDir: process.env.DIST_DIR,
   trailingSlash: false,
-  reactStrictMode: false
+  reactStrictMode: true
 }
 
 module.exports = withBundleAnalyzer(nextConfig)

web/package.json

@@ -9,7 +9,7 @@
     "analyze": "env-cmd -f .env.analyze pnpm build",
     "dev": "next dev --turbo",
     "build": "pnpm format && next build",
-    "dist": "env-cmd -f .env.static pnpm build",
+    "dist": "env-cmd -f .env.static next build",
     "start": "next start",
     "lint": "next lint",
     "format": "prettier --write .",

web/app/layout.js → web/src/app/layout.js

@@ -7,26 +7,23 @@ import '@/lib/styles/globals.css'
 
 import { Suspense } from 'react'
 
-import { NavigationEvents } from '@/lib/layout/navigation-events'
+import { NavigationEvents } from './rootLayout/navigation-events'
 
 import Provider from '@/lib/provider'
-import Layout from '@/lib/layout/Layout'
-
-import Loading from '@/lib/layout/Loading'
 
+import Loading from './rootLayout/Loading'
+import Layout from './rootLayout/Layout'
 import StyledToast from '../components/StyledToast'
 
 export const metadata = {
   title: 'Gravitino',
   description: 'A high-performance, geo-distributed and federated metadata lake.',
   icons: {
-    icon: '/icons/gravitino.svg'
+    icon: '/ui/icons/gravitino.svg'
   }
 }
 
-const RootLayout = props => {
-  const { children } = props
-
+const RootLayout = ({ children }) => {
   return (
     <html lang='en' suppressHydrationWarning>
       <body>