Refactor AlertPage and VolumePageRSP to use dynamic base paths for na…

…vigation
scality · Dec 6, 2024 · 6d185ec · 6d185ec
1 parent 1578894
commit 6d185ec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/ui/src/containers/AlertPage.tsx b/ui/src/containers/AlertPage.tsx
@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import CircleStatus from '../components/CircleStatus';
 import StatusIcon from '../components/StatusIcon';
 import { STATUS_CRITICAL, STATUS_HEALTH, STATUS_WARNING } from '../constants';
-import { useUserAccessRight } from '../hooks';
+import { useTypedSelector, useUserAccessRight } from '../hooks';
 import { compareHealth } from '../services/utils';
 import { useAlerts } from './AlertProvider';
 
@@ -111,6 +111,9 @@ function AlertPageHeader({
   const alertStatus = getAlertStatus(critical, warning);
 
   const { canConfigureEmailNotification } = useUserAccessRight();
+
+  const basename = useTypedSelector((state) => state.config.api?.ui_base_path);
+
   return (
     <AlertPageHeaderContainer>
       <Stack>
@@ -154,7 +157,7 @@ function AlertPageHeader({
           label="Email notification configuration"
           variant="secondary"
           onClick={() => {
-            navigate('/configure-alerts');
+            navigate(basename + '/configure-alerts');
           }}
         />
       ) : null}

diff --git a/ui/src/containers/VolumePageRSP.tsx b/ui/src/containers/VolumePageRSP.tsx
@@ -1,32 +1,32 @@
-import { useIntl } from 'react-intl';
-import { useLocation, useParams } from 'react-router';
-import { computeVolumeGlobalStatus } from '../services/NodeVolumesUtils';
-import {
-  LVM_LOGICAL_VOLUME,
-  RAW_BLOCK_DEVICE,
-  SPARSE_LOOP_DEVICE,
-} from '../constants';
-import { useAlerts } from './AlertProvider';
 import { TextBadge, spacing } from '@scality/core-ui';
+import { Tabs } from '@scality/core-ui/dist/next';
+import { useIntl } from 'react-intl';
+import { useParams, useResolvedPath } from 'react-router';
 import AlertsTab from '../components/AlertsTab';
 import {
-  RightSidePanel,
-  NotBoundContainer,
-  NoInstanceSelectedContainer,
   NoInstanceSelected,
+  NoInstanceSelectedContainer,
+  NotBoundContainer,
+  RightSidePanel,
 } from '../components/style/CommonLayoutStyle';
 import VolumeDetailsTab from '../components/VolumeDetailsTab';
 import VolumeMetricsTab from '../components/VolumeMetricsTab';
 import VolumeOverviewTab from '../components/VolumeOverviewTab';
-import { Tabs } from '@scality/core-ui/dist/next';
+import {
+  LVM_LOGICAL_VOLUME,
+  RAW_BLOCK_DEVICE,
+  SPARSE_LOOP_DEVICE,
+} from '../constants';
+import { computeVolumeGlobalStatus } from '../services/NodeVolumesUtils';
+import { useAlerts } from './AlertProvider';
 
 export const VolumePageRSP = (props) => {
   const { volumes, nodes, volumeListData, pVList, pods, currentVolumeObject } =
     props;
 
   const { name } = useParams();
-  const location = useLocation();
   const intl = useIntl();
+  const url = useResolvedPath('').pathname;
 
   const currentVolumeName = name;
   const volume = volumes?.find(
@@ -67,7 +67,7 @@ export const VolumePageRSP = (props) => {
     <RightSidePanel>
       <Tabs>
         <Tabs.Tab
-          path={`${location.pathname}/overview`}
+          path={url.includes('/overview') ? url : `${url}/overview`}
           label={intl.formatMessage({
             id: 'overview',
           })}
@@ -135,7 +135,7 @@ export const VolumePageRSP = (props) => {
           />
         </Tabs.Tab>
         <Tabs.Tab
-          path={`${location.pathname}/alerts`}
+          path={url.includes('/alerts') ? url : `${url}/alerts`}
           label={intl.formatMessage({
             id: 'alerts',
           })}
@@ -163,7 +163,7 @@ export const VolumePageRSP = (props) => {
           )}
         </Tabs.Tab>
         <Tabs.Tab
-          path={`${location.pathname}/metrics`}
+          path={url.includes('/metrics') ? url : `${url}/metrics`}
           label={intl.formatMessage({
             id: 'metrics',
           })}
@@ -182,7 +182,7 @@ export const VolumePageRSP = (props) => {
           label={intl.formatMessage({
             id: 'details',
           })}
-          path={`${location.pathname}/details`}
+          path={url.includes('/details') ? url : `${url}/details`}
           data-cy="details_tab_volume_page"
         >
           <VolumeDetailsTab currentVolumeObject={currentVolumeObject} />