YARN-11888. Serve the Capacity Scheduler UI.

Author: brumi1024

.gitignore

@@ -47,6 +47,7 @@ hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/npm-debug.log
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/testem.log
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/dist
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/tmp
+hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/node_modules/
 yarnregistry.pdf
 patchprocess/
 .history/

LICENSE.txt

@@ -257,6 +257,7 @@ hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/resources/webapps/st
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/resources/webapps/static/jquery
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/resources/webapps/static/jt/jquery.jstree.js
 hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-nodemanager/src/main/resources/TERMINAL
+hadoop-yarn-project/hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/src/main/webapp/node_modules
 
 =======
 For hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-nodemanager/src/main/native/container-executor/impl/utils/cJSON.[ch]:

hadoop-assemblies/src/main/resources/assemblies/hadoop-yarn-dist.xml

@@ -211,6 +211,13 @@
         <include>**/*</include>
       </includes>
     </fileSet>
+    <fileSet>
+      <directory>hadoop-yarn/hadoop-yarn-capacity-scheduler-ui/target/hadoop-yarn-capacity-scheduler-ui-${project.version}</directory>
+      <outputDirectory>/share/hadoop/${hadoop.component}/webapps/scheduler-ui</outputDirectory>
+      <includes>
+        <include>**/*</include>
+      </includes>
+    </fileSet>
     <!-- Copy dependecies from hadoop-yarn-server-timelineservice as well -->
     <fileSet>
       <directory>hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-timelineservice-hbase/hadoop-yarn-server-timelineservice-hbase-client/target/lib</directory>
@@ -280,6 +287,7 @@
       <excludes>
         <exclude>org.apache.hadoop:hadoop-yarn-server-timelineservice*</exclude>
         <exclude>org.apache.hadoop:hadoop-yarn-ui</exclude>
+        <exclude>org.apache.hadoop:hadoop-yarn-capacity-scheduler-ui</exclude>
         <exclude>org.apache.hadoop:hadoop-yarn-csi</exclude>
       </excludes>
       <binaries>

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-api/src/main/java/org/apache/hadoop/yarn/conf/YarnConfiguration.java

@@ -378,6 +378,21 @@ private static void addDeprecatedKeys() {
 
   public static final String YARN_WEBAPP_UI2_WARFILE_PATH = "yarn."
       + "webapp.ui2.war-file-path";
+
+  /**
+   * Enable YARN Capacity Scheduler UI.
+   */
+  public static final String YARN_WEBAPP_SCHEDULER_UI_ENABLE = "yarn."
+      + "webapp.scheduler-ui.enable";
+  public static final boolean DEFAULT_YARN_WEBAPP_SCHEDULER_UI_ENABLE = false;
+
+  public static final String YARN_WEBAPP_SCHEDULER_UI_WARFILE_PATH = "yarn."
+      + "webapp.scheduler-ui.war-file-path";
+
+  public static final String YARN_WEBAPP_SCHEDULER_UI_READ_ONLY_ENABLE = "yarn."
+      + "webapp.scheduler-ui.read-only.enable";
+  public static final boolean DEFAULT_YARN_WEBAPP_SCHEDULER_UI_READ_ONLY = false;
+
   public static final String YARN_API_SERVICES_ENABLE = "yarn."
       + "webapp.api-service.enable";
   public static final String YARN_WEBAPP_UI1_ENABLE_TOOLS = "yarn."

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(),

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/java/org/apache/hadoop/yarn/webapp/WebApps.java

@@ -481,16 +481,22 @@ public WebApp start() {
     }
 
     public WebApp start(WebApp webapp) {
-      return start(webapp, null);
+      return start(webapp, (WebAppContext[]) null);
     }
 
-    public WebApp start(WebApp webapp, WebAppContext ui2Context) {
+    public WebApp start(WebApp webapp, WebAppContext... additionalContexts) {
       WebApp webApp = build(webapp);
       HttpServer2 httpServer = webApp.httpServer();
-      if (ui2Context != null) {
-        addFiltersForNewContext(ui2Context);
-        httpServer.addHandlerAtFront(ui2Context);
+
+      if (additionalContexts != null) {
+        for (WebAppContext context : additionalContexts) {
+          if (context != null) {
+            addFiltersForNewContext(context);
+            httpServer.addHandlerAtFront(context);
+          }
+        }
       }
+
       try {
         httpServer.start();
         LOG.info("Web app {} started at {}.", name, httpServer.getConnectorAddress(0).getPort());
@@ -500,15 +506,15 @@ public WebApp start(WebApp webapp, WebAppContext ui2Context) {
       return webApp;
     }
 
-    private void addFiltersForNewContext(WebAppContext ui2Context) {
+    private void addFiltersForNewContext(WebAppContext uiContext) {
       Map<String, String> params = getConfigParameters(csrfConfigPrefix);
 
       if (hasCSRFEnabled(params)) {
         LOG.info("CSRF Protection has been enabled for the {} application. "
             + "Please ensure that there is an authentication mechanism "
             + "enabled (kerberos, custom, etc).", name);
         String restCsrfClassName = RestCsrfPreventionFilter.class.getName();
-        HttpServer2.defineFilter(ui2Context, restCsrfClassName,
+        HttpServer2.defineFilter(uiContext, restCsrfClassName,
             restCsrfClassName, params, new String[]{"/*"});
       }
     }

hadoop-yarn-project/hadoop-yarn/hadoop-yarn-common/src/main/resources/yarn-default.xml

@@ -336,6 +336,30 @@
     <value></value>
   </property>
 
+  <property>
+    <description>To enable YARN Capacity Scheduler UI.</description>
+    <name>yarn.webapp.scheduler-ui.enable</name>
+    <value>false</value>
+  </property>
+
+  <property>
+    <description>
+      The WAR file path for the YARN Capacity Scheduler UI.
+      If not specified, the scheduler UI will be loaded from the classpath.
+    </description>
+    <name>yarn.webapp.scheduler-ui.war-file-path</name>
+    <value></value>
+  </property>
+
+  <property>
+    <description>
+      Enable read-only mode for YARN Capacity Scheduler UI.
+      When set to true, the UI will not allow configuration changes.
+    </description>
+    <name>yarn.webapp.scheduler-ui.read-only.enable</name>
+    <value>false</value>
+  </property>
+
   <property>
     <description>
       Enable services rest api on ResourceManager.