Add cost model links to cluster info

https://issues.redhat.com/browse/COST-4925

Author: dlabrecq

locales/data.json

@@ -1156,6 +1156,12 @@
         "value": "Cost Management"
       }
     ],
+    "costModel": [
+      {
+        "type": 0,
+        "value": "Cost Model:"
+      }
+    ],
     "costModels": [
       {
         "type": 0,

locales/translations.json

@@ -81,6 +81,7 @@
   "costDistributionTitle": "Overhead cost breakdown",
   "costDistributionType": "{value, select, distributed {Distribute through cost models} total {Don't distribute overhead costs} other {}}",
   "costManagement": "Cost Management",
+  "costModel": "Cost Model:",
   "costModels": "Cost Models",
   "costModelsActions": "Cost model actions",
   "costModelsAddTagValues": "Add more tag values",

src/locales/messages.ts

@@ -461,6 +461,11 @@ export default defineMessages({
     description: 'Cost Management',
     id: 'costManagement',
   },
+  costModel: {
+    defaultMessage: 'Cost Model:',
+    description: 'Cost Model:',
+    id: 'costModel',
+  },
   costModels: {
     defaultMessage: 'Cost Models',
     description: 'Cost Models',
@@ -1030,13 +1035,11 @@ export default defineMessages({
     description: 'Currency and calculations',
     id: 'currencyCalcuationsTitle',
   },
-
   currencyDesc: {
     defaultMessage: 'Select the preferred currency view for your organization',
     description: 'Select the preferred currency view for your organization',
     id: 'currencyDesc',
   },
-
   // See https://www.localeplanet.com/icu/currency.html
   currencyOptions: {
     defaultMessage:

src/routes/details/ocpBreakdown/providerDetails/clusterInfo/clusterInfoContent.tsx

@@ -67,11 +67,6 @@ const ClusterInfoContent: React.FC<ClusterInfoContentProps> = ({ clusterId }: Cl
           <span style={styles.spacingRight}>{clusterId}</span>
           <a href={`${release}/openshift/details/${clusterId}`}>{intl.formatMessage(messages.ocpClusterDetails)}</a>
         </TextListItem>
-        {clusterProvider?.cost_models?.length === 0 && (
-          <TextListItem>
-            <a href={formatPath(routes.settings.path)}>{intl.formatMessage(messages.assignCostModel)}</a>
-          </TextListItem>
-        )}
       </TextList>
       <Text component={TextVariants.h3}>{intl.formatMessage(messages.metricsOperatorVersion)}</Text>
       <TextList isPlain>
@@ -95,6 +90,18 @@ const ClusterInfoContent: React.FC<ClusterInfoContentProps> = ({ clusterId }: Cl
               <span style={styles.spacingRight}>{intl.formatMessage(messages.source, { value: 'ocp' })}</span>
               <a href={`${release}/settings/integrations/detail/${clusterProvider.id}`}>{clusterProvider.name}</a>
             </TextListItem>
+            <TextListItem>
+              {clusterProvider?.cost_models?.length ? (
+                clusterProvider.cost_models.map(cm => (
+                  <>
+                    <span style={styles.spacingRight}>{intl.formatMessage(messages.costModel)}</span>
+                    <a href={`${formatPath(routes.costModel.basePath, true)}/${cm.uuid}`}>{cm.name}</a>
+                  </>
+                ))
+              ) : (
+                <a href={formatPath(routes.settings.path, true)}>{intl.formatMessage(messages.assignCostModel)}</a>
+              )}
+            </TextListItem>
           </TextList>
           {cloudProvider && <CloudIntegration provider={cloudProvider} />}
         </>

src/routes/details/ocpBreakdown/providerDetails/clusterInfo/components/cloudIntegration.tsx

@@ -7,6 +7,8 @@ import { routes } from 'routes';
 import { SourceLink } from 'routes/details/ocpBreakdown/providerDetails/components/sourceLink';
 import { formatPath } from 'utils/paths';
 
+import { styles } from '../clusterInfo.styles';
+
 interface CloudIntegrationOwnProps {
   provider: Provider;
 }
@@ -27,11 +29,18 @@ const CloudIntegration: React.FC<CloudIntegrationProps> = ({ provider }: CloudIn
         <TextListItem>
           <SourceLink provider={provider} />
         </TextListItem>
-        {provider?.cost_models?.length === 0 && (
-          <TextListItem>
-            <a href={formatPath(routes.settings.path)}>{intl.formatMessage(messages.assignCostModel)}</a>
-          </TextListItem>
-        )}
+        <TextListItem>
+          {provider?.cost_models?.length ? (
+            provider.cost_models.map(cm => (
+              <>
+                <span style={styles.spacingRight}>{intl.formatMessage(messages.costModel)}</span>
+                <a href={`${formatPath(routes.costModel.basePath, true)}/${cm.uuid}`}>{cm.name}</a>
+              </>
+            ))
+          ) : (
+            <a href={formatPath(routes.settings.path, true)}>{intl.formatMessage(messages.assignCostModel)}</a>
+          )}
+        </TextListItem>
       </TextList>
     </>
   );

src/utils/paths.ts

@@ -5,9 +5,10 @@ import { routes } from 'routes';
 //
 // Note the basename does not include a release prefix (/beta, /preview, etc.), unlike the getBaseName function from
 // @redhat-cloud-services/frontend-components-utilities/helpers
-export const formatPath = path => {
+export const formatPath = (path, isReleasePath = false) => {
   const basename = '/openshift/cost-management';
-  return path === routes.overview.path ? basename : `${basename}${path}`;
+  const newPath = path === routes.overview.path ? basename : `${basename}${path}`;
+  return isReleasePath ? `${getReleasePath()}${newPath}` : newPath;
 };
 
 export const getReleasePath = () => {