Merge pull request #76 from unity-sds/bugs/75-fix-navigation-menu

Bugs/75 fix navigation menu

Author: anilnatha

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed issue with basepath not set correctly after proxy label was updated from `ui` to `portal` [#68](https://github.com/unity-sds/unity-portal/issues/68)
 - Changed consumption of Health API endpoint so that it now captures information for three new fields, `componentCategory`, `componentType`, and `description` [#71](https://github.com/unity-sds/unity-portal/issues/71)
 - Updated home page view so that it only lists items that have a `componentType` of `ui` [#71](https://github.com/unity-sds/unity-portal/issues/71)
+- Fixed inconsistent routes being displayed when comparing the home page cards with what was shown in the main navigations application's menu [#75](https://github.com/unity-sds/unity-portal/issues/75)
 
 ## [0.8.0] 2025-01-14
 - Added support to report on when health API endpoint is not available in navbar and on health dashboard

src/Config.tsx

@@ -1,4 +1,35 @@
-const Config = {
+import { Service } from "./state/slices/healthSlice";
+
+type Config = {
+  general: {
+    appTitle:string,
+    version:string,
+    adminEmail:string,
+    wwwDomain:string,
+    basePath:string,
+    project:string,
+    venue:string,
+    defaultRoutes:Service[]
+  },
+  auth: {
+    oauthRedirectUri:string,
+    oauthLogoutEndpoint:string,
+    oauthProviderUrl:string,
+    appAdminGroupName:string,
+    appViewerGroupName:string,
+  },
+  cs: {
+    healthEndpointUrl:string
+  },
+  ads: {
+    url:string
+  },
+  sps: {
+    endpoint:string
+  }
+}
+
+const Config:Config = {
 
    ['general']: {
       appTitle: "MDPS",
@@ -7,7 +38,35 @@ const Config = {
       wwwDomain: import.meta.env.VITE_WWW_DOMAIN,
       basePath: import.meta.env.VITE_BASE_PATH,
       project: import.meta.env.VITE_PROJECT,
-      venue: import.meta.env.VITE_VENUE
+      venue: import.meta.env.VITE_VENUE,
+      defaultRoutes: [
+        {
+          componentName: "Health Dashboard",
+          componentCategory: "",
+          componentType: "ui",
+          description: "Check the health status of services running in this venue.",
+          healthChecks: [],
+          healthCheckUrl: "",
+          landingPageUrl: "/health-dashboard",
+          nativeRoute: true,
+          reportHealthStatus: false,
+          route: "/health-dashboard",
+          ssmKey: ""
+        },
+        {
+          componentName: "Documentation (Gitbook)",
+          componentCategory: "",
+          componentType: "ui",
+          description: "Documentation to help become familiar with the Unity platform.",
+          healthChecks: [],
+          healthCheckUrl: "",
+          landingPageUrl: "https://unity-sds.gitbook.io/docs",
+          nativeRoute: true,
+          reportHealthStatus: false,
+          route: "https://unity-sds.gitbook.io/docs",
+          ssmKey: ""
+        }
+      ]
    },
 
    ['auth']: {

src/Root.tsx

@@ -14,7 +14,6 @@ import NotFound from "./routes/errors/not-found";
 import { useAppDispatch, useAppSelector } from "./state/hooks";
 import { useEffect, useState } from "react";
 import { getHealthData } from "./state/slices/healthSlice";
-import { formatRoute } from "./utils/strings";
 import { Progress } from "@nasa-jpl/react-stellar";
 
 function Root() {
@@ -69,7 +68,8 @@ function Root() {
           <Routes>
             {
               healthState.items.map( (item, index) => {
-                return <Route key={index} path={"/applications/" + formatRoute(item.componentName)} element={<WebView url={item.landingPageUrl} />} />
+                if( !item.nativeRoute )
+                  return <Route key={index} path={item.route} element={<WebView url={item.landingPageUrl} />} />
               })
             }
             <Route path="/" element={<Navigate to="/home" replace={true} />} />

src/components/Navbar/index.tsx

@@ -17,15 +17,15 @@ import {
   NavbarContent, 
   NavbarMobileMenu
 } from "@nasa-jpl/react-stellar";
-import { getHealthData } from "../../state/slices/healthSlice";
 import { GetUsername } from "../../AuthorizationWrapper";
 import { logout } from "../../utils/auth";
-import { useAppDispatch, useAppSelector } from "../../state/hooks";
+import { useAppSelector } from "../../state/hooks";
 import { useEffect, useState, } from "react";
+import { getUiItems } from "../../state/selectors/healthSelectors";
+import { Service } from "../../state/slices/healthSlice";
 import MdpsLogo from "../../assets/images/mdps-logo.svg";
 
 import Config from "../../Config";
-import { formatRoute } from "../../utils/strings";
 
 const MenuErrorMessage = ({message}:{message:string}) => {
   return <div className="st-react-menu-message"><IconWarning />{message}</div>
@@ -35,8 +35,6 @@ export default function Navbar() {
 
   const [healthApiError, setHealthApiError] = useState(false);
   const healthApiErrorMessage = "Application List Unavailable";
-  
-  const dispatch = useAppDispatch();
 
   const loggedInUsername = GetUsername();
   const userInitials = loggedInUsername.substring(0,1).toUpperCase();
@@ -50,21 +48,20 @@ export default function Navbar() {
     return state.health;
   });
 
+  const uiItems:Service[] = useAppSelector((state) => { 
+    return getUiItems(state.health);
+  });
+
   useEffect(() => {
 
-    if (healthState.status === "idle") {
-      // Fetch the health data
-      dispatch(getHealthData());
-    } else if ( healthState.status === "pending" ) {
-      // Do something to inform the user that the health data is being fetched
-    } else if (healthState.status === "succeeded") {
-      // Do something to handle the successful fetching of data
-    } else if (healthState.status === "failed") {
+    if (healthState.status === "failed") {
       // Do something to handle the error
       setHealthApiError(true);
     }
 
-  }, [dispatch, healthState]);
+  }, [healthState]);
+
+
 
   return (
     <StellarNavbar mobileBreakpoint={800}>
@@ -96,17 +93,13 @@ export default function Navbar() {
               </Button>
             }>
               <NavLink to="/"><MenuItem>Home</MenuItem></NavLink>
-              <NavLink to="/health-dashboard"><MenuItem>Health Dashboard</MenuItem></NavLink>
               {
-                healthState.items.map( (service, index) => {
-                  return <NavLink to={"/applications/" + formatRoute(service.componentName)} key={index}>
+                uiItems.map( (service, index) => {
+                  return <NavLink to={service.route} key={index}>
                     <MenuItem>{service.componentName}</MenuItem>
                   </NavLink>
                 })
               }
-              <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank">
-                <MenuItem>Documentation (Gitbook)</MenuItem>
-              </NavLink>
               {
                 healthApiError && <MenuErrorMessage message={healthApiErrorMessage} />
               }
@@ -162,17 +155,13 @@ export default function Navbar() {
               </Button>
             }>
               <NavLink to="/"><MenuItem>Home</MenuItem></NavLink>
-              <NavLink to="/health-dashboard"><MenuItem>Health Dashboard</MenuItem></NavLink>
               {
-                healthState.items.map( (service, index) => {
-                  return <NavLink to={"/applications/" + formatRoute(service.componentName)} key={index}>
+                uiItems.map( (service, index) => {
+                  return <NavLink to={service.route} key={index}>
                     <MenuItem>{service.componentName}</MenuItem>
                   </NavLink>
                 })
               }
-              <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank">
-                <MenuItem>Documentation (Gitbook)</MenuItem>
-              </NavLink>
               {
                 healthApiError && <MenuErrorMessage message={healthApiErrorMessage} />
               }
@@ -237,13 +226,11 @@ export default function Navbar() {
       </NavbarBreakpoint>
       <NavbarMobileMenu>
         <NavLink to="/" className="st-react-navbar-link"><IconHome />{' '}Home</NavLink>
-        <NavLink to="/health-dashboard" className="st-react-navbar-link">{' '}Health Dashboard</NavLink>
         {
-          healthState.items.map( (service, index) => {
-            return <NavLink key={index} className="st-react-navbar-link" to={"/applications/" + formatRoute(service.componentName)}>{service.componentName}</NavLink>
+          uiItems.map( (service, index) => {
+            return <NavLink key={index} className="st-react-navbar-link" to={service.route}>{service.componentName}</NavLink>
           })
         }
-        <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank" className="st-react-navbar-link">{' '}Documentation (Gitbook)</NavLink>
         {
         healthApiError && <MenuErrorMessage message={healthApiErrorMessage} />
         }

src/routes/health-dashboard/index.tsx

@@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import { IconWarning, Error } from "@nasa-jpl/react-stellar";
 import React from "react";
 import { Link } from "react-router-dom";
+import { Service } from "../../state/slices/healthSlice";
 
  const LinkCellRenderer = (props:CustomCellRendererProps) => {
   return <Link to={props.value} target="_blank">{props.value}</Link>
@@ -74,6 +75,12 @@ function HealthDashboard() {
     []
   );
 
+  const getHealthDashboardData = () => {
+    return healthState.items.filter( (service:Service) => {
+      return service.reportHealthStatus ? true : false;
+    })
+  }
+
   // Example of consuming Grid Event
   const cellClickedListener = useCallback( (event:CellClickedEvent) => {
 
@@ -129,7 +136,7 @@ function HealthDashboard() {
         { healthApiError && <Error><IconWarning />{healthApiErrorMessage}</Error> }
         <div className="ag-theme-stellar mdps-aggrid-container">
           <AgGridReact
-            rowData={healthState.items} // Row Data for Rows
+            rowData={getHealthDashboardData()} // Row Data for Rows
             columnDefs={columnDefs} // Column Defs for Columns
             defaultColDef={defaultColDef} // Default Column Properties
             animateRows={true} // Optional - set to 'true' to have rows animate when sorted

src/routes/home/index.tsx

@@ -4,53 +4,25 @@ import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta";
 import { useAppSelector } from "../../state/hooks";
 import { getUiItems } from "../../state/selectors/healthSelectors";
 import { Service } from "../../state/slices/healthSlice";
-import { formatRoute } from "../../utils/strings";
 
 function Home() {
 
   const uiItems:Service[] = useAppSelector((state) => { 
     return getUiItems(state.health);
   });
 
-  let appCards = uiItems.map( (item) => {
+  const appCards = uiItems.map( (item) => {
     return (
       <Card
         description={item.description}
-        route={"/applications/" + formatRoute(item.componentName)}
+        route={item.route}
         title={item.componentName}
         type={item.componentType}
         url={item.landingPageUrl}
       />
     )
   })
 
-  appCards.push(
-    <Card
-      description={`Check the health status of services running in this venue.`}
-      route={"/health-dashboard"}
-      title="Health Dashboard"
-      type={"ui"}
-      url={"/health-dashboard"}
-    />,
-    <Card
-      description="Documentation to help become familiar with the Unity platform."
-      route={"https://unity-sds.gitbook.io/docs"}
-      title="Documentation (Gitbook)"
-      type={"ui"}
-      url={"https://unity-sds.gitbook.io/docs"}
-    />
-  );
-
-  appCards = appCards.sort( (a, b) => {
-    if( a.props.title < b.props.title ) {
-      return -1;
-    }
-    if( a.props.title > b.props.title ) {
-      return 1;
-    }
-    return 0;
-  });
-
   return (
     <>
       <DocumentMeta

src/state/slices/healthSlice.ts

@@ -2,6 +2,7 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 import Config from "../../Config";
 import { GetToken } from '../../AuthorizationWrapper';
+import { formatRoute } from '../../utils/routes';
 
 enum HEALTH_ACTIONS {
   GET_HEALTH = "health/getHealth",
@@ -18,9 +19,12 @@ export type Service = {
   componentCategory:string;
   componentType:string;
   description:string;
+  healthChecks: Array<HealthCheck>;
   healthCheckUrl:string;
   landingPageUrl:string;
-  healthChecks: Array<HealthCheck>;
+  nativeRoute:boolean;
+  reportHealthStatus:boolean;
+  route:string; // needed for portal routing
   ssmKey:string;
 };
 
@@ -81,8 +85,26 @@ const healthSlice = createSlice({
       state.status = "succeeded";
       state.lastUpdated = Date.now();
 
-      // Parse and store the fetched data into the state
-      const data = action.payload;
+      const data = Config.general.defaultRoutes;
+
+      // Add portal route for each application
+      action.payload.forEach( (service:Service) => {
+        service.nativeRoute = false;
+        service.route = "/applications/" + formatRoute(service.componentName);
+        service.reportHealthStatus = true;
+        data.push(service);
+      })
+
+      // sort services alphabetically by their componentName
+      data.sort( (a:Service, b:Service) => {
+        
+        if( a.componentName > b.componentName ) return 1;
+        if( a.componentName < b.componentName ) return -1;
+        
+        return 0;
+
+      });
+
       state.items = data;
 
     });

src/types/process.d.tsx

@@ -3,7 +3,9 @@ export const formatRoute = (str:string) => {
   let cleanedStr = str.toLowerCase();
   const charReplacements = {
     " ": "-",
-    "_": "-"
+    "_": "-",
+    "(": "",
+    ")": "",
   };
 
   for( const [key, value] of Object.entries(charReplacements) ) {