Spinner and Page Navigation issues (#3543)

* PBENCH-1263 Spinner and Page Navigation issues
distributed-system-analysis · Oct 2, 2023 · 277df9b · 277df9b
1 parent b19a55a
commit 277df9b
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 24 deletions.
diff --git a/dashboard/src/App.js b/dashboard/src/App.js
@@ -101,6 +101,10 @@ const App = () => {
                       element={<ComparisonComponent />}
                     />
                   </Route>
+                  <Route
+                    path={APP_ROUTES.ALL_RUNS}
+                    element={<ComingSoonPage />}
+                  />
                   <Route
                     path={APP_ROUTES.SEARCH}
                     element={<ComingSoonPage />}

diff --git a/dashboard/src/modules/components/HeaderComponent/index.jsx b/dashboard/src/modules/components/HeaderComponent/index.jsx
@@ -28,13 +28,12 @@ import {
 } from "@patternfly/react-core";
 import { NAVBAR_CLOSE, NAVBAR_OPEN } from "actions/types";
 import React, { useState } from "react";
+import { movePage, sessionLogout } from "actions/authActions";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { sessionLogout } from "actions/authActions";
 import pbenchLogo from "assets/logo/pbench_logo.svg";
 import { useKeycloak } from "@react-keycloak/web";
-import { movePage } from "actions/authActions";
 
 const HeaderToolbar = () => {
   const dispatch = useDispatch();
@@ -143,7 +142,7 @@ const HeaderComponent = () => {
         </PageToggleButton>
       </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand>
+        <MastheadBrand href={"/" + APP_ROUTES.HOME}>
           <Brand src={pbenchLogo} className="header-logo" alt="pbench Logo" />
         </MastheadBrand>
       </MastheadMain>

diff --git a/dashboard/src/modules/components/LoadingComponent/index.less b/dashboard/src/modules/components/LoadingComponent/index.less
@@ -5,9 +5,13 @@
     width: 15%;
     height: 15%;
     position: absolute;
-    top: 30%;
-    left: 30%;
+    top: 35%;
+    left: 50%;
     z-index: 9999;
+    .pf-c-spinner {
+      width: 40px;
+      height: 40px;
+    }
   }
 }
 .main-with-spinner {

diff --git a/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js b/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js
@@ -1,3 +1,5 @@
+import * as APP_ROUTES from "utils/routeConstants";
+
 export const menuOptions = [
   {
     group: { key: "dashboard", title: "Dashboard" },
@@ -7,35 +9,35 @@ export const menuOptions = [
         submenu: true,
         key: "overview",
         submenuOf: "dashboard",
-        link: "overview",
+        link: APP_ROUTES.OVERVIEW,
       },
       {
         name: "Analysis",
         submenu: true,
         key: "analysis",
         submenuOf: "dashboard",
-        link: "analysis",
+        link: APP_ROUTES.ANALYSIS,
       },
       {
         name: "All runs",
         submenu: true,
         key: "all_runs",
         submenuOf: "dashboard",
-        link: "all_runs",
+        link: APP_ROUTES.ALL_RUNS,
       },
       {
         name: "Results",
         submenu: true,
         key: "results",
         submenuOf: "dashboard",
-        link: "results",
+        link: APP_ROUTES.RESULTS,
       },
       {
         name: "Visualization",
         submenu: true,
         key: "visualization",
         submenuOf: "dashboard",
-        link: "visualization",
+        link: APP_ROUTES.VISUALIZATION,
       },
     ],
   },
@@ -47,14 +49,14 @@ export const menuOptions = [
         submenu: true,
         key: "search",
         submenuOf: "tools",
-        link: "search",
+        link: APP_ROUTES.SEARCH,
       },
     ],
   },
 ];
 
 export const menuOptionsNonLoggedIn = [
   { key: "dashboard", link: "/", name: "Dashboard" },
-  { key: "search", link: "search", name: "Search" },
-  { key: "expore", link: "explore", name: "Explore" },
+  { key: "search", link: APP_ROUTES.SEARCH, name: "Search" },
+  { key: "expore", link: APP_ROUTES.EXPLORE, name: "Explore" },
 ];
diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx
@@ -26,7 +26,6 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { DATASET_UPLOADED } from "assets/constants/overviewConstants";
 import DatePickerWidget from "../DatePickerComponent";
-import PathBreadCrumb from "../BreadCrumbComponent";
 import { RenderPagination } from "../OverviewComponent/common-component";
 import TablePagination from "../PaginationComponent";
 import { useKeycloak } from "@react-keycloak/web";
@@ -129,10 +128,6 @@ const TableWithFavorite = () => {
   const onCloseLoginHint = () => {
     setLoginHintVisible(false);
   };
-  const datasetBreadcrumb = [
-    { name: "Dashboard", link: "/" },
-    { name: "Results", link: "" },
-  ];
 
   /* Favorite Table Pagination */
   const onSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
@@ -157,7 +152,6 @@ const TableWithFavorite = () => {
         />
       )}
       <div className="table-container">
-        <PathBreadCrumb pathList={datasetBreadcrumb} />
         <Heading
           containerClass="publicDataPageTitle"
           headingTitle="Results"

diff --git a/dashboard/src/utils/routeConstants.js b/dashboard/src/utils/routeConstants.js
@@ -1,14 +1,15 @@
 export const HOME = "dashboard/";
 
+export const ALL_RUNS = "all-runs";
+export const ANALYSIS = "analysis";
 export const AUTH = "auth";
 export const AUTH_LOGIN = "login";
 export const AUTH_SIGNUP = "signup";
+export const EXPLORE = "explore";
 export const OVERVIEW = "overview";
-export const TOC = "toc";
-export const TABLE_OF_CONTENT = "toc/:dataset_id";
-export const USER_PROFILE = "user-profile";
-export const ANALYSIS = "analysis";
 export const SEARCH = "search";
 export const RESULTS = "results";
-export const EXPLORE = "explore";
+export const TABLE_OF_CONTENT = "toc/:dataset_id";
+export const TOC = "toc";
+export const USER_PROFILE = "user-profile";
 export const VISUALIZATION = "visualization";