[#653] Swagger and Metrics links

Author: Katia Aresti

cypress/e2e/1_cluster-welcome.cy.js

@@ -49,11 +49,15 @@ describe('Welcome page', () => {
     // Show sidebar
     clickSideBar();
     //Checks if navigation menu is visible
+    cy.contains('Operations').should('be.visible');
     cy.contains('Data Container').should('be.visible');
     cy.contains('Global Statistics').should('be.visible');
     cy.contains('Cluster Membership').should('be.visible');
     cy.contains('Access Management').should('be.visible');
     cy.contains('Connected Clients').should('be.visible');
+    cy.contains('DevOps Tools').should('be.visible');
+    cy.contains('Swagger Ui').should('be.visible');
+    cy.contains('Metrics endpoint').should('be.visible');
 
     //Clicks the side menu Data Container
     cy.get('[itemid="data_container"]').click();

src/app/AppLayout/AppLayout.tsx

@@ -17,6 +17,7 @@ import {
   MenuToggle,
   MenuToggleElement,
   Nav,
+  NavGroup,
   NavItem,
   NavList,
   Page,
@@ -264,21 +265,34 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const Navigation = (
     <Nav id="nav-primary-simple">
       <NavList id="nav-list-simple">
-        {filteredRoutes.map(
-          (route, idx) =>
-            displayNavMenu(route) && (
-              <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
-                <NavLink
-                  itemID={route.id}
-                  caseSensitive={true}
-                  to={route.path + location.search}
-                  className={isCurrentActiveNavItem(route) ? 'pf-m-current' : ''}
-                >
-                  {route.label}
-                </NavLink>
-              </NavItem>
-            )
-        )}
+        <NavGroup title="Operations">
+          {filteredRoutes.map(
+            (route, idx) =>
+              displayNavMenu(route) && (
+                <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
+                  <NavLink
+                    itemID={route.id}
+                    caseSensitive={true}
+                    to={route.path + location.search}
+                    className={isCurrentActiveNavItem(route) ? 'pf-m-current' : ''}
+                  >
+                    {route.label}
+                  </NavLink>
+                </NavItem>
+              )
+          )}
+        </NavGroup>
+        <NavGroup title="DevOps Tools">
+          <NavItem icon={<ExternalLinkAltIcon />} onClick={() => window.open(ConsoleServices.swaggerUi(), '_blank')}>
+            {t('layout.swagger-ui')}
+          </NavItem>
+          <NavItem
+            icon={<ExternalLinkAltIcon />}
+            onClick={() => window.open(ConsoleServices.metricsEndpoint(), '_blank')}
+          >
+            {t('layout.metrics')}
+          </NavItem>
+        </NavGroup>
       </NavList>
     </Nav>
   );

src/app/assets/languages/en.json

@@ -38,7 +38,9 @@
     "documentation-name": "Documentation",
     "close-browser-message": "Close the browser or open an incognito window to log again.",
     "dark-theme": "Dark theme",
-    "logout": "Logout"
+    "logout": "Logout",
+    "swagger-ui": "Swagger Ui",
+    "metrics": "Metrics endpoint"
   },
   "welcome-page": {
     "welcome-title": "Welcome to {{brandname}} Server",
@@ -57,7 +59,8 @@
     "learn-more": " Get started",
     "develop": "Code applications for different use cases.",
     "tutorials": " Run quick tutorials",
-    "go-to-console": "Open the console"
+    "go-to-console": "Open the console",
+    "open-swagger-ui": "Open Swagger UI"
   },
   "login-form": {
     "login-main": "Log in to {{brandname}}.",

src/services/ConsoleServices.ts

@@ -55,6 +55,26 @@ export class ConsoleServices {
     }
   }
 
+  public static metricsEndpoint(): string {
+    return ConsoleServices.getEndpoint('/metrics');
+  }
+
+  public static swaggerUi(): string {
+    return ConsoleServices.getEndpoint('/swagger-ui');
+  }
+
+  private static getEndpoint(endpoint: string): string {
+    if (ConsoleServices.isDevMode()) {
+      if (!process.env.INFINISPAN_SERVER_URL) {
+        return 'http://localhost:11222' + endpoint;
+      } else {
+        return process.env.INFINISPAN_SERVER_URL + endpoint;
+      }
+    } else {
+      return window.location.origin.toString() + endpoint;
+    }
+  }
+
   public static landing(): string {
     if (ConsoleServices.isDevMode()) {
       return 'http://localhost:9000/console/';