feat(ui): divide admin.js into modules

Signed-off-by: Gabriel Costa <gabrielcg@proton.me>

Author: gcgoncalves

.github/workflows/playwright.yml

@@ -60,10 +60,21 @@ jobs:
           version: "0.9.2"
           python-version: "3.12"
 
+      - name: 🟢 Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+
       - name: 📦 Install gateway dependencies
         run: |
           make venv install
 
+      - name: 🏗️ Build admin UI bundle
+        run: |
+          npm ci
+          npm run vite:build
+
       - name: 🎭 Run make serve + CI smoke tests
         shell: bash
         run: |

Containerfile.lite

@@ -73,6 +73,26 @@ RUN if [ "$ENABLE_RUST" = "true" ]; then \
 
 FROM rust-builder-base AS rust-builder
 
+###########################
+# Frontend builder stage
+###########################
+FROM node:lts-alpine AS frontend-builder
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
+
+# Install frontend dependencies
+RUN npm install --frozen-lockfile
+
+# Copy frontend source files
+COPY mcpgateway/admin_ui/ mcpgateway/admin_ui/
+COPY vite.config.js ./
+
+# Run Vite build
+RUN npm run vite:build
+
+
 ###########################
 # Builder stage
 ###########################
@@ -125,6 +145,12 @@ COPY pyproject.toml /app/
 # ----------------------------------------------------------------------------
 COPY --from=rust-builder /build/plugins_rust/target/wheels/ /tmp/rust-wheels/
 
+# ----------------------------------------------------------------------------
+# Copy frontend build artifacts from frontend-builder stage
+# ----------------------------------------------------------------------------
+COPY --from=frontend-builder /app/mcpgateway/static/ /app/mcpgateway/static/
+
+
 # ----------------------------------------------------------------------------
 # Create and populate virtual environment
 #  - Upgrade pip, setuptools, wheel, pdm, uv

docker-compose.yml

@@ -221,7 +221,7 @@ services:
       # JWT Configuration - Choose ONE approach:
       # Option 1: HMAC (Default - Simple deployments)
       - JWT_ALGORITHM=HS256
-      - JWT_SECRET_KEY=my-test-key
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-my-test-key}
       # Option 2: RSA (Production - Asymmetric, uncomment and generate certs)
       # - JWT_ALGORITHM=RS256
       # - JWT_PUBLIC_KEY_PATH=/app/certs/jwt/public.pem
@@ -1243,7 +1243,7 @@ services:
       fast_time_server:
         condition: service_started
     environment:
-      - JWT_SECRET_KEY=my-test-key
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-my-test-key}
     # This is a one-shot container that exits after registration
     restart: "no"
     entrypoint: ["/bin/sh", "-c"]
@@ -1628,7 +1628,7 @@ services:
       fast_test_server:
         condition: service_healthy
     environment:
-      - JWT_SECRET_KEY=my-test-key
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-my-test-key}
     restart: "no"
     entrypoint: ["/bin/sh", "-c"]
     command:
@@ -1728,7 +1728,7 @@ services:
       a2a_echo_agent:
         condition: service_healthy
     environment:
-      - JWT_SECRET_KEY=my-test-key
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-my-test-key}
     restart: "no"
     entrypoint: ["/bin/sh", "-c"]
     command:
@@ -1963,7 +1963,7 @@ services:
       benchmark_server:
         condition: service_started
     environment:
-      - JWT_SECRET_KEY=my-test-key
+      - JWT_SECRET_KEY=${JWT_SECRET_KEY:-my-test-key}
       - BENCHMARK_SERVER_COUNT=${BENCHMARK_SERVER_COUNT:-10}
       - BENCHMARK_START_PORT=${BENCHMARK_START_PORT:-9000}
     restart: "no"

eslint.config.js

@@ -1,31 +1,18 @@
 "use strict";
 const neostandard = require("neostandard");
-const prettierPlugin = require("eslint-plugin-prettier");
-const prettierRecommended = require("eslint-plugin-prettier/recommended");
 
 module.exports = [
-    ...neostandard({
-        env: ["browser"],
-        ignores: neostandard.resolveIgnoresFromGitignore(),
-        noStyle: true,
-    }),
-    prettierRecommended,
-    {
-        plugins: {
-            prettier: prettierPlugin,
-        },
-        rules: {
-            // Match previous style preferences: semicolons and double quotes
-            "prettier/prettier": [
-                "error",
-                {
-                    semi: true,
-                    singleQuote: false,
-                },
-            ],
-            // Preserve previous lint behavior for curly braces and prefer-const
-            curly: "error",
-            "prefer-const": "error",
-        },
+  ...neostandard({
+    env: ["browser"],
+    ignores: neostandard.resolveIgnoresFromGitignore(),
+    noStyle: true,
+  }),
+  {
+    rules: {
+      indent: ["error", 2, { SwitchCase: 1 }],
+      // Preserve previous lint behavior for curly braces and prefer-const
+      curly: "error",
+      "prefer-const": "error",
     },
+  },
 ];

mcpgateway/admin.py

@@ -188,7 +188,6 @@ class GrpcServiceNameConflictError(GrpcServiceError):  # type: ignore
 # This will be set by main.py when it imports admin_router
 logging_service: Optional[LoggingService] = None
 LOGGER: logging.Logger = logging.getLogger("mcpgateway.admin")
-
 UI_SECTION_TO_TABS: Dict[str, tuple[str, ...]] = {
     "overview": ("overview",),
     "servers": ("catalog",),
@@ -214,6 +213,50 @@ class GrpcServiceNameConflictError(GrpcServiceError):  # type: ignore
 UI_HIDE_SECTIONS_COOKIE_NAME = "mcpgateway_ui_hide_sections"
 UI_HIDE_SECTIONS_COOKIE_MAX_AGE = 30 * 24 * 60 * 60  # 30 days
 
+# Cache for the bundle filename to avoid reading manifest on every request
+# Using a mutable dict to avoid the need for a global statement in the accessor function
+_bundle_js_cache: dict[str, Optional[str]] = {"filename": None}
+
+
+def get_bundle_js_filename() -> str:
+    """Get the hashed bundle.js filename from Vite manifest.
+
+    Reads the Vite manifest file to get the current hashed bundle filename.
+    Falls back to scanning for bundle-*.js on disk if the manifest is unreadable.
+    Invalidates the cache when the cached bundle file no longer exists on disk.
+
+    Returns:
+        str: The bundle filename (e.g., 'bundle-abc123.js')
+    """
+    static_dir = Path(__file__).parent / "static"
+
+    # Use cache if the bundle file still exists on disk
+    cached = _bundle_js_cache["filename"]
+    if cached is not None and (static_dir / cached).exists():
+        return cached
+
+    manifest_path = static_dir / ".vite" / "manifest.json"
+    try:
+        if manifest_path.exists():
+            with open(manifest_path, "r", encoding="utf-8") as f:
+                manifest = orjson.loads(f.read())
+                # The key is the input path relative to the project root
+                entry_key = "mcpgateway/admin_ui/index.js"
+                if entry_key in manifest and manifest[entry_key].get("file"):
+                    _bundle_js_cache["filename"] = manifest[entry_key]["file"]
+                    return _bundle_js_cache["filename"]  # type: ignore[return-value]
+    except Exception as e:
+        LOGGER.warning(f"Failed to read Vite manifest: {e}")
+
+    # Manifest unreadable or missing entry — find bundle file directly on disk
+    bundles = sorted(static_dir.glob("bundle-*.js"), key=lambda p: p.stat().st_mtime, reverse=True)
+    if bundles:
+        _bundle_js_cache["filename"] = bundles[0].name
+        return _bundle_js_cache["filename"]  # type: ignore[return-value]
+
+    LOGGER.error("No bundle-*.js found in %s — admin UI will not load", static_dir)
+    return ""
+
 
 def _normalize_ui_hide_values(raw: Any, valid_values: frozenset[str], aliases: Optional[Dict[str, str]] = None) -> set[str]:
     """Normalize UI hide values from CSV/list input into a validated set.
@@ -3548,6 +3591,7 @@ def _to_dict_and_filter(raw_list):
             "roots": roots,
             "include_inactive": include_inactive,
             "root_path": root_path,
+            "bundle_js": get_bundle_js_filename(),
             "max_name_length": max_name_length,
             "gateway_tool_name_separator": settings.gateway_tool_name_separator,
             "bulk_import_max_tools": settings.mcpgateway_bulk_import_max_tools,
@@ -5569,7 +5613,7 @@ async def admin_get_team_edit(
                     </select>
                 </div>
                 <div class="flex justify-end space-x-3">
-                    <button type="button" onclick="hideTeamEditModal()"
+                    <button type="button" onclick="Admin.hideTeamEditModal()"
                             class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                         Cancel
                     </button>
@@ -7268,7 +7312,7 @@ async def admin_get_user_edit(
 
         # Create edit form HTML
         edit_form = f"""
-        <div class="space-y-4">
+        <div id="user-edit-modal-content" class="space-y-4">
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit User</h3>
             <div id="edit-user-error"></div>
             <form hx-post="{root_path}/admin/users/{user_email}/update" hx-target="#edit-user-error" hx-swap="innerHTML" class="space-y-4">
@@ -7292,13 +7336,13 @@ async def admin_get_user_edit(
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Password (leave empty to keep current)</label>
                     <input type="password" name="password" id="password-field"
                            class="mt-1 px-1.5 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 text-gray-900 dark:text-white"
-                           oninput="validatePasswordRequirements(); validatePasswordMatch();">
+                           oninput="Admin.validatePasswordRequirements(); Admin.validatePasswordMatch();">
                 </div>
                 <div>
                     <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm New Password</label>
                     <input type="password" name="confirm_password" id="confirm-password-field"
                            class="mt-1 px-1.5 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 text-gray-900 dark:text-white"
-                           oninput="validatePasswordMatch()">
+                           oninput="Admin.validatePasswordMatch()">
                     <div id="password-match-message" class="mt-1 text-sm text-red-600 hidden">Passwords do not match</div>
                 </div>
                 {password_requirements_html}
@@ -7312,7 +7356,7 @@ async def admin_get_user_edit(
                     data-require-special="{"true" if settings.password_require_special else "false"}"
                 ></div>
                 <div class="flex justify-end space-x-3">
-                    <button type="button" onclick="hideUserEditModal()"
+                    <button type="button" onclick="Admin.hideUserEditModal()"
                             class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
                         Cancel
                     </button>
@@ -7406,6 +7450,9 @@ async def admin_update_user(
         success_html = """
         <div class="text-green-500 text-center p-4">
             <p>User updated successfully</p>
+            <button type="button" onclick="Admin.hideUserEditModal()" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
+                Close
+            </button>
         </div>
         """
         response = HTMLResponse(content=success_html)