Change file name and style for api dashboard

cloud-barista · Aug 17, 2024 · 862f43c · 862f43c
2 parents 4ce826d + 0aedc1b
commit 862f43c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -31,7 +31,7 @@ COPY --from=builder /app/dist ./dist
 COPY --from=builder /app/img ./dist/img
 COPY --from=builder /app/index.html ./
 COPY --from=builder /app/index.js ./
-COPY --from=builder /app/redoc-swagger-integration.html ./
+COPY --from=builder /app/redoc-swagger.html ./
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/package-lock.json ./package-lock.json
 COPY --from=builder /app/package.json ./package.json

diff --git a/index.html b/index.html
@@ -227,15 +227,15 @@
                   <a class="dropdown-item" href="javascript:void(0)" onclick="getConnection();">Show all Clouds</a>
                   <a class="dropdown-item" href="javascript:void(0)" onclick="hideMCI();">Hide/Show MCI</a>
                   <a class="dropdown-item" href="javascript:void(0)" onclick="clearMap();">Clear Map</a>
-                  <a class="dropdown-item" href="javascript:void(0)" onclick="window.open('redoc-swagger-integration.html', '_blank');">API Dashboard</a>
+                  <a class="dropdown-item" href="javascript:void(0)" onclick="window.open('redoc-swagger.html', '_blank');">API Dashboard</a>
                   <a class="dropdown-item" href="javascript:void(0)" onclick="toggleView();">Toggle Map/API</a>
                 </div>
               </div>
 
               <!-- Create toggleView Field -->
               <div class="form-group col">
                 <button type="button" onClick="toggleView();" class="btn btn-info w-100">Toggle Map/API</button>
-                <!-- <button type="button" onclick="window.open('redoc-swagger-integration.html', '_blank')" class="btn btn-info w-100">Redoc & Swagger</button> -->
+                <!-- <button type="button" onclick="window.open('redoc-swagger.html', '_blank')" class="btn btn-info w-100">Redoc & Swagger</button> -->
               </div>
 
             </form>

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   },
   "scripts": {
     "start": "parcel -p 1324 --host 0.0.0.0 index.html",
-    "build": "echo 'Removing temporal cache files' && rm -rf dist/* .parcel-cache/* && mkdir -p dist/img/ && cp -r img/ dist/ && cp redoc-swagger-integration.html dist/ && parcel build --public-url . index.html"
+    "build": "echo 'Removing temporal cache files' && rm -rf dist/* .parcel-cache/* && mkdir -p dist/img/ && cp -r img/ dist/ && cp redoc-swagger.html dist/ && parcel build --public-url . index.html"
   },
   "description": "MapUI Client for CB-Tumblebug (display multi-cloud infra service)",
   "repository": {

diff --git a/redoc-swagger-integration.html → redoc-swagger.html b/redoc-swagger-integration.html → redoc-swagger.html
@@ -120,9 +120,12 @@
                     SwaggerUIBundle.presets.apis,
                     SwaggerUIStandalonePreset
                 ],
+                docExpansion: "list",
                 layout: "BaseLayout",
                 deepLinking: true, // Enable deep linking
-                displayOperationId: true, // Display operationId in Swagger UI
+                //displayOperationId: true, // Display operationId in Swagger UI
+                tagsSorter: "alpha", 
+                operationsSorter: "alpha", 
                 requestInterceptor: (request) => {
                     request.headers['Authorization'] = authHeader;
                     return request;
@@ -139,20 +142,31 @@
             Redoc.init(spec, {
                 scrollYOffset: 50,
                 hideLoading: true,
+                suppressWarnings: true,
+                requiredPropsFirst: true,
+                sortPropsAlphabetically: true,
+                expandResponses: "200", 
+                // pathInMiddlePanel: true,
                 theme: {
-                    colors: {
-                        primary: {
-                            main: '#dd5522'
-                        }
-                    },
                     typography: {
-                        fontFamily: 'Arial, sans-serif',
-                        fontSize: '18px',
+                        fontFamily: '"Arial", Helvetica, Open Sans, sans-serif',
                         headings: {
-                            fontFamily: 'Arial, sans-serif'
+                            fontFamily: '"Arial", "Roboto Condensed", sans-serif'
+                        },
+                        code: {
+                            fontFamily: '"Arial", "Courier", monospace'
                         }
                     },
+                    rightPanel: {
+                        width: '40%',
+                        backgroundColor: '#6c757d',
+                        textColor: '#f8f9fa'
+                    },
+                    codeSample: {
+                        backgroundColor: '#343a40'
+                    }
                 }
+
             }, document.getElementById('redoc-container'));
 
             console.log('Redoc initialized');