Merge pull request #2901 from dlabrecq/3478-ros-unleash

Unleash for ROS

locales/data.json

@@ -9555,6 +9555,12 @@
         "value": "OpenShift in Cost Management"
       }
     ],
+    "notAuthorizedStateRecommendations": [
+      {
+        "type": 0,
+        "value": "Recommendations in Cost Management"
+      }
+    ],
     "notAuthorizedStateRhel": [
       {
         "type": 0,

locales/translations.json

@@ -369,6 +369,7 @@
   "notAuthorizedStateIbm": "IBM Cloud in Cost Management",
   "notAuthorizedStateOci": "Oracle Cloud Infrastructure in Cost Management",
   "notAuthorizedStateOcp": "OpenShift in Cost Management",
+  "notAuthorizedStateRecommendations": "Recommendations in Cost Management",
   "notAuthorizedStateRhel": "RHEL in Cost Management",
   "oci": "Oracle Cloud Infrastructure",
   "ociComputeTitle": "Virtual machines usage",

src/api/userAccess.ts

@@ -24,7 +24,8 @@ export const enum UserAccessType {
   ibm = 'ibm',
   oci = 'oci',
   ocp = 'ocp',
-  rhel = 'ocp', // Todo: update to use rhel when APIs are available
+  rhel = 'ocp', // Todo: update to use RHEL when APIs are available
+  ros = 'ocp', // Todo: update to use ROS when APIs are available
 }
 
 // If the user-access API is called without a query parameter, all types are returned in the response

src/components/featureFlags/featureFlags.tsx

@@ -20,6 +20,7 @@ export const enum FeatureToggle {
   negativeFiltering = 'cost-management.ui.negative-filtering', // Negative (aka exclude) filtering https://issues.redhat.com/browse/COST-2773
   oci = 'cost-management.ui.oci', // Oracle Cloud Infrastructure https://issues.redhat.com/browse/COST-2358
   platformCosts = 'cost-management.ui.platform-costs', // OCP platform costs https://issues.redhat.com/browse/COST-2774
+  ros = 'cost-management.ui.ros', // ROS support https://issues.redhat.com/browse/COST-3477
 }
 
 let userId;
@@ -63,11 +64,12 @@ const FeatureFlags: React.FC<FeatureFlagsProps> = ({ children = null }) => {
             isCostDistributionFeatureEnabled: client.isEnabled(FeatureToggle.costDistribution),
             isCostTypeFeatureEnabled: client.isEnabled(FeatureToggle.costType),
             isExportsFeatureEnabled: client.isEnabled(FeatureToggle.exports),
-            isFINsightsFeatureEnabled: client.isEnabled(FeatureToggle.finsights),
+            isFinsightsFeatureEnabled: client.isEnabled(FeatureToggle.finsights),
             isNegativeFilteringFeatureEnabled: client.isEnabled(FeatureToggle.negativeFiltering),
             isIbmFeatureEnabled: client.isEnabled(FeatureToggle.ibm),
             isOciFeatureEnabled: client.isEnabled(FeatureToggle.oci),
             isPlatformCostsFeatureEnabled: client.isEnabled(FeatureToggle.platformCosts),
+            isRosFeatureEnabled: client.isEnabled(FeatureToggle.ros),
           })
         );
       });

src/components/userAccess/permissions.tsx

@@ -21,16 +21,18 @@ import {
   hasOciAccess,
   hasOcpAccess,
   hasRhelAccess,
+  hasRosAccess,
 } from 'utils/userAccess';
 
 interface PermissionsOwnProps {
   children?: React.ReactNode;
 }
 
 interface PermissionsStateProps {
-  isFINsightsFeatureEnabled?: boolean;
+  isFinsightsFeatureEnabled?: boolean;
   isIbmFeatureEnabled?: boolean;
   isOciFeatureEnabled?: boolean;
+  isRosFeatureEnabled?: boolean;
   userAccess: UserAccess;
   userAccessError: AxiosError;
   userAccessFetchStatus: FetchStatus;
@@ -41,9 +43,10 @@ type PermissionsProps = PermissionsOwnProps & PermissionsStateProps;
 
 const PermissionsBase: React.FC<PermissionsProps> = ({
   children = null,
-  isFINsightsFeatureEnabled,
+  isFinsightsFeatureEnabled,
   isIbmFeatureEnabled,
   isOciFeatureEnabled,
+  isRosFeatureEnabled,
   userAccess,
   userAccessError,
   userAccessFetchStatus,
@@ -65,12 +68,13 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
 
     const aws = hasAwsAccess(userAccess);
     const azure = hasAzureAccess(userAccess);
-    const oci = isOciFeatureEnabled && hasOciAccess(userAccess);
     const costModel = hasCostModelAccess(userAccess);
     const gcp = hasGcpAccess(userAccess);
     const ibm = isIbmFeatureEnabled && hasIbmAccess(userAccess);
+    const oci = isOciFeatureEnabled && hasOciAccess(userAccess);
     const ocp = hasOcpAccess(userAccess);
-    const rhel = isFINsightsFeatureEnabled && hasRhelAccess(userAccess);
+    const rhel = isFinsightsFeatureEnabled && hasRhelAccess(userAccess);
+    const ros = isRosFeatureEnabled && hasRosAccess(userAccess);
 
     switch (path) {
       case paths.explorer:
@@ -96,6 +100,9 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
       case paths.ocpDetails:
       case paths.ocpDetailsBreakdown:
         return ocp;
+      case paths.recommendations:
+      case paths.recommendationsBreakdown:
+        return ros;
       case paths.rhelDetails:
       case paths.rhelDetailsBreakdown:
         return rhel;
@@ -130,9 +137,10 @@ const mapStateToProps = createMapStateToProps<PermissionsOwnProps, PermissionsSt
   );
 
   return {
+    isFinsightsFeatureEnabled: featureFlagsSelectors.selectIsFinsightsFeatureEnabled(state),
     isIbmFeatureEnabled: featureFlagsSelectors.selectIsIbmFeatureEnabled(state),
     isOciFeatureEnabled: featureFlagsSelectors.selectIsOciFeatureEnabled(state),
-    isFINsightsFeatureEnabled: featureFlagsSelectors.selectIsFINsightsFeatureEnabled(state),
+    isRosFeatureEnabled: featureFlagsSelectors.selectIsRosFeatureEnabled(state),
     userAccess,
     userAccessError,
     userAccessFetchStatus,

src/locales/messages.ts

@@ -2342,6 +2342,11 @@ export default defineMessages({
     description: 'OpenShift in Cost Management',
     id: 'notAuthorizedStateOcp',
   },
+  notAuthorizedStateRecommendations: {
+    defaultMessage: 'Recommendations in Cost Management',
+    description: 'Recommendations in Cost Management',
+    id: 'notAuthorizedStateRecommendations',
+  },
   notAuthorizedStateRhel: {
     defaultMessage: 'RHEL in Cost Management',
     description: 'RHEL in Cost Management',

src/routes.tsx

@@ -22,6 +22,10 @@ const OciDetails = lazy(() => import(/* webpackChunkName: "ociDetails" */ 'route
 const OcpBreakdown = lazy(() => import(/* webpackChunkName: "ocpBreakdown" */ 'routes/views/details/ocpBreakdown'));
 const OcpDetails = lazy(() => import(/* webpackChunkName: "ocpDetails" */ 'routes/views/details/ocpDetails'));
 const Overview = lazy(() => import(/* webpackChunkName: "overview" */ 'routes/views/overview'));
+const Recommendations = lazy(() => import(/* webpackChunkName: "ocpDetails" */ 'routes/views/details/rhelDetails')); // Todo: Add page
+const RecommendationsBreakdown = lazy(
+  () => import(/* webpackChunkName: "ocpDetails" */ 'routes/views/details/rhelBreakdown')
+); // Todo: Add page
 const RhelDetails = lazy(() => import(/* webpackChunkName: "ocpDetails" */ 'routes/views/details/rhelDetails'));
 const RhelBreakdown = lazy(() => import(/* webpackChunkName: "ocpDetails" */ 'routes/views/details/rhelBreakdown'));
 
@@ -42,6 +46,8 @@ const paths = {
   ocpDetails: '/ocp',
   ocpDetailsBreakdown: '/ocp/breakdown',
   overview: '/',
+  recommendations: '/recommendations',
+  recommendationsBreakdown: '/recommendations/breakdown',
   rhelDetails: '/rhel',
   rhelDetailsBreakdown: '/rhel/breakdown',
 };
@@ -113,6 +119,14 @@ const routes = [
     element: userAccess(OcpBreakdown),
     path: paths.ocpDetailsBreakdown,
   },
+  {
+    element: userAccess(Recommendations),
+    path: paths.recommendations,
+  },
+  {
+    element: userAccess(RecommendationsBreakdown),
+    path: paths.recommendationsBreakdown,
+  },
   {
     element: userAccess(RhelDetails),
     path: paths.rhelDetails,

src/routes/state/notAuthorized/notAuthorizedState.tsx

@@ -49,6 +49,10 @@ class NotAuthorizedStateBase extends React.Component<NotAuthorizedStateProps> {
       case paths.rhelDetailsBreakdown:
         msg = messages.notAuthorizedStateRhel;
         break;
+      case paths.recommendations:
+      case paths.recommendationsBreakdown:
+        msg = messages.notAuthorizedStateRecommendations;
+        break;
       case paths.explorer:
       default:
         msg = messages.costManagement;

src/routes/views/explorer/explorer.tsx

@@ -82,7 +82,7 @@ interface ExplorerStateProps {
   dateRangeType: DateRangeType;
   gcpProviders: Providers;
   ibmProviders: Providers;
-  isFINsightsFeatureEnabled?: boolean;
+  isFinsightsFeatureEnabled?: boolean;
   ocpProviders: Providers;
   perspective: PerspectiveType;
   providers: Providers;
@@ -389,8 +389,8 @@ class Explorer extends React.Component<ExplorerProps> {
   };
 
   private isRhelAvailable = () => {
-    const { isFINsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
-    return isFINsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
+    const { isFinsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
+    return isFinsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
   };
 
   private updateReport = () => {
@@ -636,7 +636,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
     dateRangeType,
     gcpProviders,
     ibmProviders,
-    isFINsightsFeatureEnabled: featureFlagsSelectors.selectIsFINsightsFeatureEnabled(state),
+    isFinsightsFeatureEnabled: featureFlagsSelectors.selectIsFinsightsFeatureEnabled(state),
     ociProviders,
     ocpProviders,
     perspective,

src/routes/views/explorer/explorerHeader.tsx

@@ -78,7 +78,7 @@ interface ExplorerHeaderStateProps {
   isCostTypeFeatureEnabled?: boolean;
   isCurrencyFeatureEnabled?: boolean;
   isExportsFeatureEnabled?: boolean;
-  isFINsightsFeatureEnabled?: boolean;
+  isFinsightsFeatureEnabled?: boolean;
   isIbmFeatureEnabled?: boolean;
   isOciFeatureEnabled?: boolean;
   ociProviders?: Providers;
@@ -242,8 +242,8 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps> {
   };
 
   private isRhelAvailable = () => {
-    const { isFINsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
-    return isFINsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
+    const { isFinsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
+    return isFinsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
   };
 
   public render() {
@@ -384,7 +384,7 @@ const mapStateToProps = createMapStateToProps<ExplorerHeaderOwnProps, ExplorerHe
       isCostTypeFeatureEnabled: featureFlagsSelectors.selectIsCostTypeFeatureEnabled(state),
       isCurrencyFeatureEnabled: featureFlagsSelectors.selectIsCurrencyFeatureEnabled(state),
       isExportsFeatureEnabled: featureFlagsSelectors.selectIsExportsFeatureEnabled(state),
-      isFINsightsFeatureEnabled: featureFlagsSelectors.selectIsFINsightsFeatureEnabled(state),
+      isFinsightsFeatureEnabled: featureFlagsSelectors.selectIsFinsightsFeatureEnabled(state),
       isIbmFeatureEnabled: featureFlagsSelectors.selectIsIbmFeatureEnabled(state),
       isOciFeatureEnabled: featureFlagsSelectors.selectIsOciFeatureEnabled(state),
       ociProviders: filterProviders(providers, ProviderType.oci),

src/routes/views/overview/overview.tsx

@@ -135,7 +135,7 @@ interface OverviewStateProps {
   ibmProviders?: Providers;
   isCostTypeFeatureEnabled?: boolean;
   isCurrencyFeatureEnabled?: boolean;
-  isFINsightsFeatureEnabled?: boolean;
+  isFinsightsFeatureEnabled?: boolean;
   isIbmFeatureEnabled?: boolean;
   isOciFeatureEnabled?: boolean;
   ociProviders?: Providers;
@@ -199,7 +199,7 @@ class OverviewBase extends React.Component<OverviewProps> {
   }
 
   private getAvailableTabs = () => {
-    const { isFINsightsFeatureEnabled } = this.props;
+    const { isFinsightsFeatureEnabled } = this.props;
     const availableTabs = [];
 
     const infrastructureTabs =
@@ -235,7 +235,7 @@ class OverviewBase extends React.Component<OverviewProps> {
         ]
       : undefined;
 
-    if (isFINsightsFeatureEnabled) {
+    if (isFinsightsFeatureEnabled) {
       if (infrastructureTabs) {
         availableTabs.push(...infrastructureTabs);
       }
@@ -284,7 +284,7 @@ class OverviewBase extends React.Component<OverviewProps> {
   };
 
   private getCurrentTab = () => {
-    const { isFINsightsFeatureEnabled } = this.props;
+    const { isFinsightsFeatureEnabled } = this.props;
     const { activeTabKey } = this.state;
 
     const hasAws = this.isAwsAvailable();
@@ -308,7 +308,7 @@ class OverviewBase extends React.Component<OverviewProps> {
     } else if (showRhelOnly) {
       return OverviewTab.rhel;
     } else {
-      if (isFINsightsFeatureEnabled) {
+      if (isFinsightsFeatureEnabled) {
         switch (activeTabKey) {
           case 0:
             return OverviewTab.infrastructure;
@@ -574,10 +574,10 @@ class OverviewBase extends React.Component<OverviewProps> {
   };
 
   private getTabTitle = (tab: OverviewTab) => {
-    const { intl, isFINsightsFeatureEnabled } = this.props;
+    const { intl, isFinsightsFeatureEnabled } = this.props;
 
     if (tab === OverviewTab.infrastructure) {
-      if (isFINsightsFeatureEnabled) {
+      if (isFinsightsFeatureEnabled) {
         return intl.formatMessage(messages.summary);
       }
       return intl.formatMessage(messages.infrastructure);
@@ -707,16 +707,16 @@ class OverviewBase extends React.Component<OverviewProps> {
   };
 
   private isRhelAvailable = () => {
-    const { isFINsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
-    return isFINsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
+    const { isFinsightsFeatureEnabled, rhelProviders, userAccess } = this.props;
+    return isFinsightsFeatureEnabled && isRhelAvailable(userAccess, rhelProviders);
   };
 
   public render() {
     const {
       providersFetchStatus,
       intl,
       isCurrencyFeatureEnabled,
-      isFINsightsFeatureEnabled,
+      isFinsightsFeatureEnabled,
       isIbmFeatureEnabled,
       isOciFeatureEnabled,
       userAccessFetchStatus,
@@ -762,7 +762,7 @@ class OverviewBase extends React.Component<OverviewProps> {
                       <p style={styles.infoTitle}>{intl.formatMessage(messages.openShift)}</p>
                       <p>{intl.formatMessage(messages.openShiftDesc)}</p>
                       <br />
-                      {isFINsightsFeatureEnabled && (
+                      {isFinsightsFeatureEnabled && (
                         <>
                           <p style={styles.infoTitle}>{intl.formatMessage(messages.rhel)}</p>
                           <p>{intl.formatMessage(messages.rhelDesc)}</p>
@@ -868,7 +868,7 @@ const mapStateToProps = createMapStateToProps<OverviewOwnProps, OverviewStatePro
     ibmProviders: filterProviders(providers, ProviderType.ibm),
     isCostTypeFeatureEnabled,
     isCurrencyFeatureEnabled,
-    isFINsightsFeatureEnabled: featureFlagsSelectors.selectIsFINsightsFeatureEnabled(state),
+    isFinsightsFeatureEnabled: featureFlagsSelectors.selectIsFinsightsFeatureEnabled(state),
     isIbmFeatureEnabled: featureFlagsSelectors.selectIsIbmFeatureEnabled(state),
     isOciFeatureEnabled: featureFlagsSelectors.selectIsOciFeatureEnabled(state),
     ociProviders: filterProviders(providers, ProviderType.oci),

src/store/featureFlags/__snapshots__/featureFlags.test.ts.snap

@@ -7,10 +7,11 @@ exports[`default state 1`] = `
   "isCostTypeFeatureEnabled": false,
   "isCurrencyFeatureEnabled": false,
   "isExportsFeatureEnabled": false,
-  "isFINsightsFeatureEnabled": false,
+  "isFinsightsFeatureEnabled": false,
   "isIbmFeatureEnabled": false,
   "isNegativeFilteringFeatureEnabled": false,
   "isOciFeatureEnabled": false,
   "isPlatformCostsFeatureEnabled": false,
+  "isRosFeatureEnabled": false,
 }
 `;

src/store/featureFlags/featureFlags.test.ts

@@ -34,8 +34,8 @@ test('cost type feature is enabled', async () => {
 
 test('FINsights feature is enabled', async () => {
   const store = createUIStore();
-  store.dispatch(actions.setFeatureFlags({ isFINsightsFeatureEnabled: true }));
-  expect(featureFlagsSelectors.selectIsFINsightsFeatureEnabled(store.getState())).toBe(true);
+  store.dispatch(actions.setFeatureFlags({ isFinsightsFeatureEnabled: true }));
+  expect(featureFlagsSelectors.selectIsFinsightsFeatureEnabled(store.getState())).toBe(true);
 });
 
 test('exports feature is enabled', async () => {
@@ -67,3 +67,9 @@ test('platform costs feature is enabled', async () => {
   store.dispatch(actions.setFeatureFlags({ isPlatformCostsFeatureEnabled: true }));
   expect(featureFlagsSelectors.selectIsPlatformCostsFeatureEnabled(store.getState())).toBe(true);
 });
+
+test('ROS feature is enabled', async () => {
+  const store = createUIStore();
+  store.dispatch(actions.setFeatureFlags({ isRosFeatureEnabled: true }));
+  expect(featureFlagsSelectors.selectIsRosFeatureEnabled(store.getState())).toBe(true);
+});

src/store/featureFlags/featureFlagsActions.ts

@@ -5,11 +5,12 @@ export interface FeatureFlagsActionMeta {
   isCostTypeFeatureEnabled?: boolean;
   isCurrencyFeatureEnabled?: boolean;
   isExportsFeatureEnabled?: boolean;
-  isFINsightsFeatureEnabled?: boolean;
+  isFinsightsFeatureEnabled?: boolean;
   isIbmFeatureEnabled?: boolean;
   isNegativeFilteringFeatureEnabled?: boolean;
   isOciFeatureEnabled?: boolean;
   isPlatformCostsFeatureEnabled?: boolean;
+  isRosFeatureEnabled?: boolean;
 }
 
 export const setFeatureFlags = createAction('feature/init_feature_flags')<FeatureFlagsActionMeta>();