diff --git a/src/routes/details/awsBreakdown/awsBreakdown.tsx b/src/routes/details/awsBreakdown/awsBreakdown.tsx
index 1c6bbf6a1..9800a1a6a 100644
--- a/src/routes/details/awsBreakdown/awsBreakdown.tsx
+++ b/src/routes/details/awsBreakdown/awsBreakdown.tsx
@@ -109,12 +109,12 @@ const mapStateToProps = createMapStateToProps
),
costType,
currency,
- defaultBreadcrumbPath: formatPath(routes.awsDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.awsDetailsTitle),
diff --git a/src/routes/details/azureBreakdown/azureBreakdown.tsx b/src/routes/details/azureBreakdown/azureBreakdown.tsx
index cb7014dbe..455fe3c20 100644
--- a/src/routes/details/azureBreakdown/azureBreakdown.tsx
+++ b/src/routes/details/azureBreakdown/azureBreakdown.tsx
@@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps,
currency,
- defaultBreadcrumbPath: formatPath(routes.azureDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.azureDetailsTitle),
diff --git a/src/routes/details/components/breakdown/breakdownBase.tsx b/src/routes/details/components/breakdown/breakdownBase.tsx
index 756017622..52f401c60 100644
--- a/src/routes/details/components/breakdown/breakdownBase.tsx
+++ b/src/routes/details/components/breakdown/breakdownBase.tsx
@@ -55,13 +55,14 @@ interface BreakdownOwnProps extends RouterComponentProps {
}
export interface BreakdownStateProps {
+ breadcrumbLabel?: string;
+ breadcrumbPath?: string; // Default breadcrumb path
clusterInfoComponent?: React.ReactNode;
costDistribution?: string;
costOverviewComponent?: React.ReactNode;
costType?: string;
currency?: string;
dataDetailsComponent?: React.ReactNode;
- defaultBreadcrumbPath?: string;
description?: string;
detailsURL?: string;
emptyStateTitle?: string;
@@ -280,12 +281,13 @@ class BreakdownBase extends React.Component {
public render() {
const {
+ breadcrumbLabel,
+ breadcrumbPath,
clusterInfoComponent,
costDistribution,
costType,
currency,
dataDetailsComponent,
- defaultBreadcrumbPath,
description,
detailsURL,
emptyStateTitle,
@@ -327,10 +329,11 @@ class BreakdownBase extends React.Component {
return (
<>
{
public state: BreakdownHeaderState = { ...this.defaultState };
private getBackToLink = groupByKey => {
- const { breadcrumb, intl, router, tagPathsType } = this.props;
+ const { breadcrumbLabel, breadcrumbPath, intl, router, tagPathsType } = this.props;
- if (!breadcrumb) {
+ if (!breadcrumbPath) {
return null;
}
return (
-
- {intl.formatMessage(messages.breakdownBackToDetails, {
- value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }),
- groupBy: groupByKey,
- })}
+
+ {breadcrumbLabel
+ ? breadcrumbLabel
+ : intl.formatMessage(messages.breakdownBackToDetails, {
+ value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }),
+ groupBy: groupByKey,
+ })}
);
};
diff --git a/src/routes/details/gcpBreakdown/gcpBreakdown.tsx b/src/routes/details/gcpBreakdown/gcpBreakdown.tsx
index 6255147d8..e64ffb9d3 100644
--- a/src/routes/details/gcpBreakdown/gcpBreakdown.tsx
+++ b/src/routes/details/gcpBreakdown/gcpBreakdown.tsx
@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps,
currency,
- defaultBreadcrumbPath: formatPath(routes.gcpDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.gcpDetailsTitle),
diff --git a/src/routes/details/ibmBreakdown/ibmBreakdown.tsx b/src/routes/details/ibmBreakdown/ibmBreakdown.tsx
index c2531ae2b..7b1478e45 100644
--- a/src/routes/details/ibmBreakdown/ibmBreakdown.tsx
+++ b/src/routes/details/ibmBreakdown/ibmBreakdown.tsx
@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps,
currency,
- defaultBreadcrumbPath: formatPath(routes.ibmDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.ibmDetailsTitle),
diff --git a/src/routes/details/ociBreakdown/ociBreakdown.tsx b/src/routes/details/ociBreakdown/ociBreakdown.tsx
index 1e222391b..689d8bd82 100644
--- a/src/routes/details/ociBreakdown/ociBreakdown.tsx
+++ b/src/routes/details/ociBreakdown/ociBreakdown.tsx
@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps(
);
return {
+ breadcrumbPath: formatPath(routes.ociDetails.path),
costOverviewComponent: ,
currency,
- defaultBreadcrumbPath: formatPath(routes.ociDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.ociDetailsTitle),
diff --git a/src/routes/details/ocpBreakdown/ocpBreakdown.tsx b/src/routes/details/ocpBreakdown/ocpBreakdown.tsx
index e869e4cc1..bb6009e0e 100644
--- a/src/routes/details/ocpBreakdown/ocpBreakdown.tsx
+++ b/src/routes/details/ocpBreakdown/ocpBreakdown.tsx
@@ -23,7 +23,7 @@ import { providersQuery, providersSelectors } from 'store/providers';
import { reportActions, reportSelectors } from 'store/reports';
import { uiActions } from 'store/ui';
import { formatPath } from 'utils/paths';
-import { breakdownDescKey, breakdownTitleKey, platformCategoryKey } from 'utils/props';
+import { breadcrumbLabelKey, breakdownDescKey, breakdownTitleKey, platformCategoryKey } from 'utils/props';
import type { RouterComponentProps } from 'utils/router';
import { withRouter } from 'utils/router';
import { getCostDistribution, getCurrency } from 'utils/sessionStorage';
@@ -94,9 +94,11 @@ const mapStateToProps = createMapStateToProps : undefined,
dataDetailsComponent: groupBy === 'cluster' ? : undefined,
costDistribution,
@@ -111,7 +113,6 @@ const mapStateToProps = createMapStateToProps
),
currency,
- defaultBreadcrumbPath: formatPath(routes.ocpDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.ocpDetailsTitle),
diff --git a/src/routes/details/ocpBreakdown/optimizations.tsx b/src/routes/details/ocpBreakdown/optimizations.tsx
index a6e446545..05e8b903d 100644
--- a/src/routes/details/ocpBreakdown/optimizations.tsx
+++ b/src/routes/details/ocpBreakdown/optimizations.tsx
@@ -24,7 +24,8 @@ const Optimizations: React.FC = () => {
const groupByValue = getGroupByValue(queryFromRoute);
const otimizationsTab = location.search.indexOf('optimizationsTab') === -1 ? '&optimizationsTab=true' : '';
- const clusterFilter = queryState?.filter_by?.cluster ? queryState.filter_by.cluster : undefined;
+ const clusterFilter = queryState?.filter_by?.cluster;
+ const isOptimizationsPath = queryFromRoute?.optimizationsPath === 'true';
return (
= () => {
cluster={clusterFilter}
hideCluster={clusterFilter !== undefined}
hideProject={groupBy === 'project'}
+ isOptimizationsPath={isOptimizationsPath}
linkPath={formatPath(routes.optimizationsBreakdown.path)}
linkState={{
...(location.state && location.state),
diff --git a/src/routes/details/rhelBreakdown/rhelBreakdown.tsx b/src/routes/details/rhelBreakdown/rhelBreakdown.tsx
index c57ff7e12..ea5b92ec7 100644
--- a/src/routes/details/rhelBreakdown/rhelBreakdown.tsx
+++ b/src/routes/details/rhelBreakdown/rhelBreakdown.tsx
@@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps,
currency,
- defaultBreadcrumbPath: formatPath(routes.rhelDetails.path),
description: queryFromRoute[breakdownDescKey],
detailsURL,
emptyStateTitle: intl.formatMessage(messages.rhelDetailsTitle),
diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx
index 862f94742..63962ce2e 100644
--- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx
+++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx
@@ -1,10 +1,5 @@
import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
-import messages from 'locales/messages';
import React from 'react';
-import { useIntl } from 'react-intl';
-import { routes } from 'routes';
-import { useQueryFromRoute } from 'utils/hooks';
-import { formatPath } from 'utils/paths';
import { styles } from './optimizationsBreakdown.styles';
@@ -15,19 +10,9 @@ interface OptimizationsBreakdownOwnProps {
type OptimizationsBreakdownProps = OptimizationsBreakdownOwnProps;
const OptimizationsBreakdown: React.FC = () => {
- const intl = useIntl();
- const queryFromRoute = useQueryFromRoute();
-
return (
);
};
diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx
index 1042343e0..d116c9259 100644
--- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx
+++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx
@@ -30,6 +30,7 @@ const OptimizationsDetails: React.FC = () => {
linkState={{
...(location.state && location.state),
}}
+ projectPath={formatPath(routes.ocpBreakdown.path)}
/>
);
diff --git a/src/routes/utils/queryState.ts b/src/routes/utils/queryState.ts
index 8f9feea74..ce566d681 100644
--- a/src/routes/utils/queryState.ts
+++ b/src/routes/utils/queryState.ts
@@ -2,11 +2,11 @@ import type * as H from 'history';
import { cloneDeep } from 'lodash';
export function clearQueryState(location: H.Location, key: string) {
- if (location?.state && location.state[key]) {
+ if (location?.state?.[key]) {
location.state[key] = undefined;
}
}
export function getQueryState(location: H.Location, key: string) {
- return location?.state && location.state[key] ? cloneDeep(location.state[key]) : undefined;
+ return location?.state?.[key] ? cloneDeep(location.state[key]) : undefined;
}