diff --git a/ui/src/containers/AlertPage.tsx b/ui/src/containers/AlertPage.tsx index 0dd83ad0d6..8f04482235 100644 --- 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 ( @@ -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 index 51e76a0c55..277e01944f 100644 --- 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) => { { /> { )} { label={intl.formatMessage({ id: 'details', })} - path={`${location.pathname}/details`} + path={url.includes('/details') ? url : `${url}/details`} data-cy="details_tab_volume_page" >