HDDS-10684.Add configurable server URL input to Recon API Swagger UI

Author: chiraggoyal19

docs/05-administrator-guide/03-operations/09-observability/02-recon/02-recon-rest-api.mdx

@@ -5,7 +5,13 @@ import SwaggerUI from '@site/src/components/SwaggerUI';
 Ozone Recon's public **REST API** follows the [OpenAPI specification](https://www.openapis.org/), and is documented below. The docs are generated using [Swagger React UI](https://github.com/swagger-api/swagger-ui).
 
 :::info
-You can find an interactive version of this documentation on your local Ozone Recon instance at **/api/v1/** (if Recon is running).
+**Interactive API Testing**
+
+You can test these APIs directly from this page using the "Try it out" button on each endpoint. 
+
+- **Default server**: `http://localhost:9888` (matches the [Docker quick start guide](/docs/quick-start/installation/docker))
+- **Custom server**: Update the "Recon Server URL" field above to point to your own Recon instance
+- **Local instance**: If you're running Recon locally, you can also access the interactive Swagger UI at `http://localhost:9888/api/v1/`
 :::
 
-<SwaggerUI spec="/recon-api.yaml" />
+<SwaggerUI spec="/recon-api.yaml" defaultServer="http://localhost:9888" />

src/components/SwaggerUI/index.js

@@ -17,22 +17,66 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 
-export default function SwaggerUIComponent({ spec }) {
+export default function SwaggerUIComponent({ spec, defaultServer }) {
   const specUrl = useBaseUrl(spec);
-  
+  const [serverUrl, setServerUrl] = useState(defaultServer || 'http://localhost:9888');
+  const [specData, setSpecData] = useState(null);
+
+  useEffect(() => {
+    // Fetch the spec and modify the servers array
+    fetch(specUrl)
+      .then(response => response.text())
+      .then(text => {
+        // Parse YAML to JSON (simple approach for this case)
+        // Since swagger-ui-react can handle YAML, we'll pass the URL
+        // but configure servers via the spec modification
+        return fetch(specUrl).then(r => r.json().catch(() => {
+          // If JSON parsing fails, it's YAML, use the URL directly
+          return null;
+        }));
+      })
+      .catch(() => null);
+  }, [specUrl]);
+
   return (
     <div className={styles.swaggerWrapper}>
+      <div className={styles.serverConfig}>
+        <label htmlFor="recon-server-url" className={styles.serverLabel}>
+          Recon Server URL:
+        </label>
+        <input
+          id="recon-server-url"
+          type="text"
+          value={serverUrl}
+          onChange={(e) => setServerUrl(e.target.value)}
+          placeholder="http://localhost:9888"
+          className={styles.serverInput}
+        />
+        <span className={styles.serverHint}>
+          (Default for Docker quick start. Change to match your Recon instance.)
+        </span>
+      </div>
       <SwaggerUI 
         url={specUrl}
         docExpansion="list"
         defaultModelsExpandDepth={1}
         defaultModelExpandDepth={1}
+        onComplete={(system) => {
+          // Override the servers in the spec with the user-configured URL
+          const spec = system.getState().getIn(['spec', 'json']);
+          if (spec) {
+            system.specActions.updateJsonSpec({
+              ...spec.toJS(),
+              servers: [{ url: serverUrl, description: 'Configured Recon Server' }]
+            });
+          }
+        }}
       />
     </div>
   );

src/components/SwaggerUI/styles.module.css

@@ -22,6 +22,63 @@
   margin-bottom: 2rem;
 }
 
+/* Server configuration input */
+.serverConfig {
+  background: var(--ifm-color-primary-lightest);
+  border: 1px solid var(--ifm-color-primary-light);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  flex-wrap: wrap;
+}
+
+[data-theme='dark'] .serverConfig {
+  background: rgba(150, 210, 110, 0.1);
+  border-color: var(--ifm-color-primary-dark);
+}
+
+.serverLabel {
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  font-size: 14px;
+  margin: 0;
+}
+
+.serverInput {
+  flex: 1;
+  min-width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: var(--ifm-font-family-monospace);
+  color: var(--ifm-font-color-base);
+  background: var(--ifm-background-color);
+}
+
+[data-theme='dark'] .serverInput {
+  border-color: #444;
+}
+
+.serverInput:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 2px rgba(53, 117, 0, 0.1);
+}
+
+[data-theme='dark'] .serverInput:focus {
+  box-shadow: 0 0 0 2px rgba(150, 210, 110, 0.2);
+}
+
+.serverHint {
+  font-size: 13px;
+  color: var(--ifm-font-color-base);
+  font-style: italic;
+}
+
 /* Remove white bars and extra spacing */
 .swaggerWrapper :global(.swagger-ui .information-container) {
   margin: 0;