Add a new tab for version and environment info

Signed-off-by: Manav Gupta <manavg@gmail.com>

Author: manavgup

mcpgateway/static/admin.js

@@ -25,6 +25,63 @@ document.addEventListener("DOMContentLoaded", function () {
   document.getElementById("tab-metrics").addEventListener("click", () => {
     showTab("metrics");
   });
+  document.getElementById("tab-version-info").addEventListener("click", () => {
+    showTab("version-info");
+  });
+
+  // Preload version info on page load (optional)
+  document.addEventListener("DOMContentLoaded", () => {
+    const panel = document.getElementById("version-info-panel");
+    if (panel && panel.innerHTML.trim() === "") {
+      const url = `${window.ROOT_PATH}/version?partial=true`;
+      fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Network response was not ok");
+          }
+          return response.text();
+        })
+        .then((html) => {
+          panel.innerHTML = html;
+          // Show the version-info panel and activate the tab on page load if hash is #version-info
+          if (window.location.hash === "#version-info") {
+            showTab("version-info");
+          }
+        })
+        .cconsole.error("Failed to preload version info:", error);
+          atch((error) => {;
+        });
+    }
+  })
+
+  // HTMX event listeners for debugging
+  document.body.addEventListener("htmx:beforeRequest", (event) => {
+    if (event.detail.elt.id === "tab-version-info") {
+      console.log("HTMX: Sending request for version info partial");
+    }
+   );
+
+  document.body.addEventListener("htmx:afterSwap", (event) => {
+    if (event.detail.target.id === "version-info-panel") {
+      console.log("HTMX: Content swapped into version-info-panel" console.error("Failed to preload version info:", error);
+          panel.innerHTML = "<p class='text-red-600'>Failed to load version info.</p>";
+        });
+    }
+  });
+
+  // HTMX event listeners for debugging
+  document.body.addEventListener("htmx:beforeRequest", (event) => {
+    if (event.detail.elt.id === "tab-version-info") {
+      console.log("HTMX: Sending request for version info partial");
+    }
+  });
+
+  document.body.addEventListener("htmx:afterSwap", (event) => {
+    if (event.detail.target.id === "version-info-panel") {
+      console.log("HTMX: Content swapped into version-info-panel");
+    }
+  });
+
   // Authentication toggle
   document.getElementById("auth-type").addEventListener("change", function () {
     const basicFields = document.getElementById("auth-basic-fields");
@@ -88,15 +145,18 @@ document.addEventListener("DOMContentLoaded", function () {
       } else {
         basicFields.style.display = "none";
         bearerFields.style.display = "none";
-        headersFields.style.display = "none";
+        heconsole.log(response);
+          adersFields.style.display = "none";
       }
     });
 
   document
     .getElementById("add-gateway-form")
     .addEventListener("submit", (e) => {
       e.preventDefault();
-      const form = e.target;
+      const formerror = e.t
+          console.error("Error:", error);
+        arget;
       const formData = new FormData(form);
       fetch(`${window.ROOT_PATH}/admin/gateways`, {
         method: "POST",
@@ -110,6 +170,7 @@ document.addEventListener("DOMContentLoaded", function () {
             status.classList.add("error-status");
           } else {
             location.reload();
+          console.log(response);
           }
         })
         .catch((error) => {
@@ -118,7 +179,9 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
   document
-    .getElementById("add-resource-form")
+    .getElementBerroryId("a
+          console.error("Error:", error);
+        dd-resource-form")
     .addEventListener("submit", (e) => {
       e.preventDefault();
       const form = e.target;
@@ -261,7 +324,7 @@ document.addEventListener("DOMContentLoaded", function () {
     "edit-tool-request-type",
   );
 
-  const requestTypeMap = {
+  const requeM= {-ed mtho, if valid
     MCP: ["SSE", "STDIO"],
     REST: ["GET", "POST", "PUT", "DELETE"],
   };
@@ -329,11 +392,33 @@ function showTab(tabName) {
     .classList.add("border-indigo-500", "text-indigo-600");
   document
     .querySelector(`[href="#${tabName}"]`)
-    .classList.remove("border-transparent", "text-gray-500");
+    .classconsole.error("Failed to load version info:", error);
+          List.remove("border-transparent", "text-gray-500");
 
   if (tabName === "metrics") {
     loadAggregatedMetrics();
   }
+
+  if (tabName === "version-info") {
+    const panel = document.getElementById("version-info-panel");
+    if (panel && panel.innerHTML.trim() === "") {
+      const url = `${window.ROOT_PATH}/version?partial=true`;
+      fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Network response was not ok");
+          }
+          return response.text();
+        })
+        .then((html) => {
+          panel.innerHTML = html;
+        })
+        .catch((error) => {
+          console.error("Failed to load version info:", error);
+          panel.innerHTML = "<p class='text-red-600'>Failed to load version info.</p>";
+        });
+    }
+  }
 }
 
 // handle auth type selection
@@ -407,29 +492,7 @@ function updateSchemaPreview() {
 }
 
 // Refresh CodeMirror every time Direct JSON Input is selected
-Array.from(schemaModeRadios).forEach((radio) => {
-  radio.addEventListener("change", () => {
-    if (radio.value === "ui" && radio.checked) {
-      uiBuilderDiv.style.display = "block";
-      jsonInputContainer.style.display = "none";
-    } else if (radio.value === "json" && radio.checked) {
-      uiBuilderDiv.style.display = "none";
-      jsonInputContainer.style.display = "block";
-      updateSchemaPreview();
-    }
-  });
-});
-
-// Attach event listeners to dynamically added parameter inputs
-function attachListeners(paramDiv) {
-  const inputs = paramDiv.querySelectorAll("input, select, textarea");
-  inputs.forEach((input) => {
-    input.addEventListener("input", () => {
-      const mode = document.querySelector(
-        'input[name="schema_input_mode"]:checked',
-      ).value;
-      if (mode === "json") {
-        updateSchemaPreview();
+Array.from(schemaModeant)      updateSchemaPreview();
       }
     });
   });

mcpgateway/templates/admin.html

@@ -114,15 +114,18 @@ <h1 class="text-3xl font-bold text-gray-800">
             </a>
             <!-- New Version tab (opens separate /version page) -->
             <a
-              href="{{ root_path }}/version"
-              target="_blank"
-              class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+              href="#version-info"
+              id="tab-version-info"
+              class="tab-link border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
             >
-              Version
+              Version and Environment Info
             </a>
           </nav>
         </div>
       </div>
+      
+      <!-- Version Info Panel -->
+      <div id="version-info-panel" class="tab-panel hidden"></div>
 
       <!-- Catalog Panel -->
       <div id="catalog-panel" class="tab-panel">

mcpgateway/templates/version_info_partial.html

@@ -0,0 +1,37 @@
+<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-6">
+  <div class="md:flex">
+    <div class="md:flex-shrink-0">
+      <svg class="h-12 w-12 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3s3-1.343 3-3c0-1.657-1.343-3-3-3z" />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v2m0 16v2m8-10h2M2 12H4m15.364 6.364l1.414 1.414M4.222 4.222l1.414 1.414m12.728 0l-1.414 1.414M6.636 17.364l-1.414 1.414" />
+      </svg>
+    </div>
+    <div class="mt-4 md:mt-0 md:ml-6">
+      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Version and Environment Info</div>
+      <p class="block mt-1 text-lg leading-tight font-medium text-black">App: {{ payload.app.name }}</p>
+      <p class="mt-1 text-gray-500">Version: {{ payload.app.git_revision or "N/A" }}</p>
+      <p class="mt-1 text-gray-500">Protocol Version: {{ payload.app.mcp_protocol_version }}</p>
+      <p class="mt-1 text-gray-500">Runtime: {{ payload.platform.python }} + FastAPI {{ payload.platform.fastapi }}</p>
+      <p class="mt-1 text-gray-500">Container: Docker</p>
+      <button
+        id="copy-json-btn"
+        class="mt-4 px-3 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        onclick="copyJsonToClipboard()"
+      >
+        Copy JSON to Clipboard
+      </button>
+      <pre id="json-data" class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto" style="max-height: 200px;">{{ payload | tojson(indent=2) }}</pre>
+    </div>
+  </div>
+</div>
+
+<script>
+  function copyJsonToClipboard() {
+    const jsonText = document.getElementById('json-data').innerText;
+    navigator.clipboard.writeText(jsonText).then(() => {
+      alert('JSON copied to clipboard!');
+    }, (err) => {
+      alert('Failed to copy JSON: ' + err);
+    });
+  }
+</script>

mcpgateway/version.py

@@ -364,14 +364,16 @@ def _login_html(next_url: str) -> str:
 async def version_endpoint(
     request: Request,
     fmt: Optional[str] = None,
+    partial: Optional[bool] = False,
     _user=Depends(require_auth),
 ) -> Response:
     """
-    Serve diagnostics as JSON or HTML (if requested).
+    Serve diagnostics as JSON, full HTML, or partial HTML (if requested).
 
     Parameters:
         request (Request): The incoming HTTP request.
-        fmt (Optional[str]): Query param 'html' for HTML output.
+        fmt (Optional[str]): Query param 'html' for full HTML output.
+        partial (Optional[bool]): Query param to request partial HTML fragment.
 
     Returns:
         Response: JSONResponse or HTMLResponse with diagnostics data.
@@ -390,6 +392,11 @@ async def version_endpoint(
             redis_version = str(exc)
 
     payload = _build_payload(redis_version, redis_ok)
+    if partial:
+        # Return partial HTML fragment for HTMX embedding
+        from fastapi.templating import Jinja2Templates
+        templates = Jinja2Templates(directory="mcpgateway/templates")
+        return templates.TemplateResponse("version_info_partial.html", {"request": request, "payload": payload})
     wants_html = fmt == "html" or "text/html" in request.headers.get("accept", "")
     if wants_html:
         return HTMLResponse(_render_html(payload))

tests/unit/mcpgateway/test_main.py

@@ -54,6 +54,30 @@ def test_ready_check(self, test_client):
         assert response.status_code == 200
         assert response.json()["status"] == "ready"
 
+    def test_version_partial_html(self, test_client, auth_headers):
+        """Test the /version endpoint with partial=true returns HTML fragment."""
+        response = test_client.get("/version?partial=true", headers=auth_headers)
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        content = response.text
+        assert "Version and Environment Info" in content
+        assert "App:" in content
+
+    def test_admin_ui_contains_version_tab(self, test_client, auth_headers):
+        """Test the Admin UI contains the Version and Environment Info tab."""
+        response = test_client.get("/admin", headers=auth_headers)
+        assert response.status_code == 200
+        content = response.text
+        assert 'id="tab-version-info"' in content
+        assert "Version and Environment Info" in content
+
+    def test_version_partial_htmx_load(self, test_client, auth_headers):
+        """Test HTMX request to /version?partial=true returns the partial HTML."""
+        response = test_client.get("/version?partial=true", headers=auth_headers)
+        assert response.status_code == 200
+        assert "Version and Environment Info" in response.text
+        assert "<div" in response.text
+
     def test_root_redirect(self, test_client):
         """Test root path redirects to admin."""
         response = test_client.get("/", allow_redirects=False)