Fix routing.

Author: brumi1024

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/react-router.config.ts

@@ -5,4 +5,5 @@ export default {
   // Server-side render by default, to enable SPA mode set this to `false`
   ssr: false,
   appDirectory: "src/app",
+  basename: "/scheduler-ui",
 } satisfies Config;

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/app/entry.client.tsx

@@ -40,6 +40,13 @@ async function enableMocking() {
 }
 
 enableMocking().then(() => {
+  // Handle servlet welcome-file redirect to index.html
+  // React Router doesn't need index.html in the URL, so redirect without it
+  if (window.location.pathname.endsWith('/index.html')) {
+    const newPath = window.location.pathname.replace(/\/index\.html$/, '/');
+    window.history.replaceState(null, '', newPath + window.location.search + window.location.hash);
+  }
+
   startTransition(() => {
     hydrateRoot(
       document,

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/src/app/root.tsx

@@ -55,3 +55,21 @@ export default function App() {
     </ValidationProvider>
   );
 }
+
+export function HydrateFallback() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-background">
+      <div className="text-center space-y-4">
+        <div
+          className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
+          role="status"
+        >
+          <span className="sr-only">Loading...</span>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Loading YARN Capacity Scheduler UI...
+        </p>
+      </div>
+    </div>
+  );
+}

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig(({ mode }) => {
   const clusterProxyTarget = env.VITE_CLUSTER_PROXY_TARGET;
 
   return {
+    base: '/scheduler-ui/',
     plugins: [
       tailwindcss(),
       reactRouter(),