ISPN-11786 Fix menu nav selected

infinispan · May 6, 2020 · c3cb25d · c3cb25d
1 parent 601691c
commit c3cb25d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { useState } from 'react';
+import {useState} from 'react';
 import {
-  Alert,
-  AlertActionCloseButton,
-  AlertGroup,
   Brand,
   Nav,
   NavItem,
@@ -15,10 +12,10 @@ import {
   SkipToContent
 } from '@patternfly/react-core';
 import icon from '!!url-loader!@app/assets/images/brand.svg';
-import { NavLink } from 'react-router-dom';
-import { routes } from '@app/routes';
-import { APIAlertProvider } from '@app/providers/APIAlertProvider';
-import { ActionResponseAlert } from '@app/Common/ActionResponseAlert';
+import {NavLink} from 'react-router-dom';
+import {routes} from '@app/routes';
+import {APIAlertProvider} from '@app/providers/APIAlertProvider';
+import {ActionResponseAlert} from '@app/Common/ActionResponseAlert';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -81,7 +78,21 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({
                 key={`${route.label}-${idx}`}
                 id={`${route.label}-${idx}`}
               >
-                <NavLink exact to={route.path} activeClassName="pf-m-current">
+                <NavLink exact to={route.path} activeClassName="pf-m-current" isActive={(match, location) => {
+                  if (match) {
+                    return true;
+                  }
+                  let isSubRoute = false;
+                  if(route.subRoutes != null) {
+                    for (let i = 0; i < route.subRoutes.length; i++) {
+                      if (location.pathname.includes(route.subRoutes[i])) {
+                        isSubRoute = true;
+                        break;
+                      }
+                    }
+                  }
+                  return isSubRoute;
+                }}>
                   {route.label}
                 </NavLink>
               </NavItem>
@@ -91,6 +102,18 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({
     </Nav>
   );
 
+  const isActive = (match, location) => {
+    console.log("mierda");
+    console.log(location);
+    if (!match) {
+      return false;
+    }
+
+    // only consider an event active if its event id is an odd number
+    const eventID = parseInt(match.params.eventID);
+    return !isNaN(eventID) && eventID % 2 === 1;
+  };
+
   const Sidebar = (
     <PageSidebar
       theme="dark"

diff --git a/src/app/routes.tsx b/src/app/routes.tsx
@@ -97,6 +97,7 @@ export interface IAppRoute {
   title: string;
   isAsync?: boolean;
   menu?: boolean;
+  subRoutes?: string[];
 }
 
 const routes: IAppRoute[] = [
@@ -114,7 +115,8 @@ const routes: IAppRoute[] = [
     label: 'Data Container',
     path: '/',
     title: 'Data Container',
-    menu: true
+    menu: true,
+    subRoutes:['container', 'cache']
   },
   {
     component: GlobalStats,