Merge pull request #3968 from dlabrecq/account-info

Added account info to cloud details empty states
project-koku · Aug 9, 2024 · d0f3a14 · d0f3a14
2 parents 0dc0730 + 1e37aa0
commit d0f3a14
Show file tree

Hide file tree

Showing 29 changed files with 309 additions and 150 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -8207,6 +8207,12 @@
         "value": "This page shows filtered results. To undo filters, clear filters on the previous page."
       }
     ],
+    "finalization": [
+      {
+        "type": 0,
+        "value": "Finalization"
+      }
+    ],
     "forDate": [
       {
         "type": 1,
@@ -11775,6 +11781,12 @@
         "value": "Rate must be a positive number"
       }
     ],
+    "providerDetails": [
+      {
+        "type": 0,
+        "value": "Integrations details"
+      }
+    ],
     "pvcTitle": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -336,6 +336,7 @@
   "filterByValuesAriaLabel": "Values",
   "filteredBy": "Filtered by",
   "filteredByWarning": "This page shows filtered results. To undo filters, clear filters on the previous page.",
+  "finalization": "Finalization",
   "forDate": "{value} for {dateRange}",
   "gcp": "Google Cloud Platform",
   "gcpComputeTitle": "Compute instances usage",
@@ -505,6 +506,7 @@
   "priceListEmptyRateDesc": "To add rates to the price list, click on the \"Add\" rate button above.",
   "priceListNumberRate": "Rate must be a number",
   "priceListPosNumberRate": "Rate must be a positive number",
+  "providerDetails": "Integrations details",
   "pvcTitle": "Persistent Volume Claims",
   "rate": "Rate",
   "rawCostDesc": "The costs reported by a cloud provider without any cost model calculations applied.",

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -2124,6 +2124,11 @@ export default defineMessages({
     description: 'This page shows filtered results. To undo filters, clear filters on the previous page.',
     id: 'filteredByWarning',
   },
+  finalization: {
+    defaultMessage: 'Finalization',
+    description: 'Finalization',
+    id: 'finalization',
+  },
   forDate: {
     defaultMessage: '{value} for {dateRange}',
     description: '{value} for {Jan 1-31}',
@@ -3137,6 +3142,11 @@ export default defineMessages({
     description: 'Rate must be a positive number',
     id: 'priceListPosNumberRate',
   },
+  providerDetails: {
+    defaultMessage: 'Integrations details',
+    description: 'Integrations details',
+    id: 'providerDetails',
+  },
   pvcTitle: {
     defaultMessage: 'Persistent Volume Claims',
     description: 'Persistent Volume Claims',

diff --git a/src/routes/details/awsDetails/awsDetails.tsx b/src/routes/details/awsDetails/awsDetails.tsx
@@ -20,6 +20,7 @@ import { Loading } from 'routes/components/page/loading';
 import { NoData } from 'routes/components/page/noData';
 import { NoProviders } from 'routes/components/page/noProviders';
 import { NotAvailable } from 'routes/components/page/notAvailable';
+import { ProviderDetails } from 'routes/details/components/providerDetails';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
@@ -36,6 +37,7 @@ import {
   handleOnSort,
 } from 'routes/utils/queryNavigate';
 import { createMapStateToProps, FetchStatus } from 'store/common';
+import { FeatureToggleSelectors } from 'store/featureToggle';
 import { providersQuery, providersSelectors } from 'store/providers';
 import { reportActions, reportSelectors } from 'store/reports';
 import { formatPath } from 'utils/paths';
@@ -52,6 +54,7 @@ import { DetailsToolbar } from './detailsToolbar';
 interface AwsDetailsStateProps {
   costType: string;
   currency?: string;
+  isAccountInfoEmptyStateToggleEnabled?: boolean;
   providers: Providers;
   providersError: AxiosError;
   providersFetchStatus: FetchStatus;
@@ -365,6 +368,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
       costType,
       currency,
       intl,
+      isAccountInfoEmptyStateToggleEnabled,
       providers,
       providersFetchStatus,
       query,
@@ -392,9 +396,17 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
         return <NoProviders providerType={ProviderType.aws} title={title} />;
       }
       if (!hasCurrentMonthData(providers)) {
-        return <NoData title={title} />;
+        return (
+          <NoData
+            detailsComponent={
+              isAccountInfoEmptyStateToggleEnabled ? <ProviderDetails providerType={ProviderType.aws} /> : undefined
+            }
+            title={title}
+          />
+        );
       }
     }
+
     return (
       <div style={styles.awsDetails}>
         <DetailsHeader
@@ -480,6 +492,7 @@ const mapStateToProps = createMapStateToProps<AwsDetailsOwnProps, AwsDetailsStat
   return {
     costType,
     currency,
+    isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
     providers: filterProviders(providers, ProviderType.aws),
     providersError,
     providersFetchStatus,

diff --git a/src/routes/details/azureDetails/azureDetails.tsx b/src/routes/details/azureDetails/azureDetails.tsx
@@ -18,6 +18,7 @@ import { Loading } from 'routes/components/page/loading';
 import { NoData } from 'routes/components/page/noData';
 import { NoProviders } from 'routes/components/page/noProviders';
 import { NotAvailable } from 'routes/components/page/notAvailable';
+import { ProviderDetails } from 'routes/details/components/providerDetails';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
@@ -33,6 +34,7 @@ import {
   handleOnSort,
 } from 'routes/utils/queryNavigate';
 import { createMapStateToProps, FetchStatus } from 'store/common';
+import { FeatureToggleSelectors } from 'store/featureToggle';
 import { providersQuery, providersSelectors } from 'store/providers';
 import { reportActions, reportSelectors } from 'store/reports';
 import { formatPath } from 'utils/paths';
@@ -48,6 +50,7 @@ import { DetailsToolbar } from './detailsToolbar';
 
 interface AzureDetailsStateProps {
   currency?: string;
+  isAccountInfoEmptyStateToggleEnabled?: boolean;
   providers: Providers;
   providersError: AxiosError;
   providersFetchStatus: FetchStatus;
@@ -324,6 +327,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
     const {
       currency,
       intl,
+      isAccountInfoEmptyStateToggleEnabled,
       providers,
       providersFetchStatus,
       query,
@@ -352,9 +356,17 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
         return <NoProviders providerType={ProviderType.azure} title={title} />;
       }
       if (!hasCurrentMonthData(providers)) {
-        return <NoData title={title} />;
+        return (
+          <NoData
+            detailsComponent={
+              isAccountInfoEmptyStateToggleEnabled ? <ProviderDetails providerType={ProviderType.azure} /> : undefined
+            }
+            title={title}
+          />
+        );
       }
     }
+
     return (
       <div style={styles.azureDetails}>
         <DetailsHeader
@@ -427,6 +439,7 @@ const mapStateToProps = createMapStateToProps<AzureDetailsOwnProps, AzureDetails
 
   return {
     currency,
+    isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
     providers: filterProviders(providers, ProviderType.azure),
     providersError,
     providersFetchStatus,

diff --git a/src/routes/details/components/providerDetails/clusterDetails/index.ts b/src/routes/details/components/providerDetails/clusterDetails/index.ts
diff --git a/...s/clusterDetails/components/cloudData.tsx → .../providerDetails/components/cloudData.tsx b/...s/clusterDetails/components/cloudData.tsx → .../providerDetails/components/cloudData.tsx
@@ -3,12 +3,13 @@ import type { Provider } from 'api/providers';
 import messages from 'locales/messages';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { styles } from 'routes/details/components/providerDetails/clusterDetails/clusterDetails.styles';
-import { formatDate } from 'routes/details/components/providerDetails/clusterDetails/utils/format';
-import { getProgressStepIcon } from 'routes/details/components/providerDetails/clusterDetails/utils/icon';
-import { getProviderAvailability } from 'routes/details/components/providerDetails/clusterDetails/utils/status';
-import { getProgressStepVariant } from 'routes/details/components/providerDetails/clusterDetails/utils/variant';
 import { SourceLink } from 'routes/details/components/providerDetails/components/sourceLink';
+import { formatDate } from 'routes/details/components/providerDetails/utils/format';
+import { getProgressStepIcon } from 'routes/details/components/providerDetails/utils/icon';
+import { getProviderAvailability } from 'routes/details/components/providerDetails/utils/status';
+import { getProgressStepVariant } from 'routes/details/components/providerDetails/utils/variant';
+
+import { styles } from './component.styles';
 
 interface CloudDataOwnProps {
   provider: Provider;
@@ -43,8 +44,8 @@ const CloudData: React.FC<CloudDataProps> = ({ provider }: CloudDataProps) => {
         </ProgressStep>
         <ProgressStep
           aria-label={intl.formatMessage(messages.dataDetailsAvailability)}
-          id="step1"
-          titleId="step1-title"
+          id="step2"
+          titleId="step2-title"
           variant="success"
         >
           {intl.formatMessage(messages.dataDetailsAvailability)}
@@ -53,8 +54,8 @@ const CloudData: React.FC<CloudDataProps> = ({ provider }: CloudDataProps) => {
         <ProgressStep
           aria-label={intl.formatMessage(messages.dataDetailsRetrieval)}
           icon={getProgressStepIcon(provider.status?.download?.state)}
-          id="step2"
-          titleId="step2-title"
+          id="step3"
+          titleId="step3-title"
           variant={getProgressStepVariant(provider.status?.download?.state)}
         >
           {intl.formatMessage(messages.dataDetailsRetrieval)}
@@ -65,8 +66,8 @@ const CloudData: React.FC<CloudDataProps> = ({ provider }: CloudDataProps) => {
         <ProgressStep
           aria-label={intl.formatMessage(messages.dataDetailsProcessing, { count: 3 })}
           icon={getProgressStepIcon(provider.status?.processing?.state)}
-          id="step3"
-          titleId="step3-title"
+          id="step4"
+          titleId="step4-title"
           variant={getProgressStepVariant(provider.status?.processing?.state)}
         >
           {intl.formatMessage(messages.dataDetailsProcessing)}

diff --git a/...clusterDetails/components/clusterData.tsx → ...roviderDetails/components/clusterData.tsx b/...clusterDetails/components/clusterData.tsx → ...roviderDetails/components/clusterData.tsx
@@ -3,12 +3,13 @@ import type { Provider } from 'api/providers';
 import messages from 'locales/messages';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { styles } from 'routes/details/components/providerDetails/clusterDetails/clusterDetails.styles';
-import { formatDate } from 'routes/details/components/providerDetails/clusterDetails/utils/format';
-import { getProgressStepIcon } from 'routes/details/components/providerDetails/clusterDetails/utils/icon';
-import { getProviderAvailability } from 'routes/details/components/providerDetails/clusterDetails/utils/status';
-import { getProgressStepVariant } from 'routes/details/components/providerDetails/clusterDetails/utils/variant';
 import { SourceLink } from 'routes/details/components/providerDetails/components/sourceLink';
+import { formatDate } from 'routes/details/components/providerDetails/utils/format';
+import { getProgressStepIcon } from 'routes/details/components/providerDetails/utils/icon';
+import { getProviderAvailability } from 'routes/details/components/providerDetails/utils/status';
+import { getProgressStepVariant } from 'routes/details/components/providerDetails/utils/variant';
+
+import { styles } from './component.styles';
 
 interface ClusterDataOwnProps {
   provider: Provider;

diff --git a/...s/clusterDetails/clusterDetails.styles.ts → ...derDetails/components/component.styles.ts b/...s/clusterDetails/clusterDetails.styles.ts → ...derDetails/components/component.styles.ts
@@ -1,4 +1,3 @@
-import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
 import global_disabled_color_100 from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
 import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
 import global_spacer_lg from '@patternfly/react-tokens/dist/js/global_spacer_lg';
@@ -7,16 +6,10 @@ import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm'
 import type React from 'react';
 
 export const styles = {
-  dataDetailsButton: {
-    fontSize: global_FontSize_xs.value,
-  },
   description: {
     color: global_disabled_color_100.value,
     fontSize: global_FontSize_xs.value,
   },
-  loading: {
-    backgroundColor: global_BackgroundColor_light_100.value,
-  },
   sourceLink: {
     fontSize: global_FontSize_xs.value,
   },

diff --git a/...ls/clusterDetails/components/costData.tsx → ...oviderDetails/components/finalization.tsx b/...ls/clusterDetails/components/costData.tsx → ...oviderDetails/components/finalization.tsx
@@ -1,36 +1,39 @@
 import { ProgressStep, ProgressStepper, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import type { Provider } from 'api/providers';
+import { ProviderType } from 'api/providers';
 import messages from 'locales/messages';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { styles } from 'routes/details/components/providerDetails/clusterDetails/clusterDetails.styles';
-import { formatDate } from 'routes/details/components/providerDetails/clusterDetails/utils/format';
-import { getProgressStepIcon } from 'routes/details/components/providerDetails/clusterDetails/utils/icon';
-import { getProgressStepVariant } from 'routes/details/components/providerDetails/clusterDetails/utils/variant';
+import { formatDate } from 'routes/details/components/providerDetails/utils/format';
+import { getProgressStepIcon } from 'routes/details/components/providerDetails/utils/icon';
+import { getProgressStepVariant } from 'routes/details/components/providerDetails/utils/variant';
 
-interface CostDataOwnProps {
+import { styles } from './component.styles';
+
+interface FinalizationDataOwnProps {
   provider: Provider;
+  providerType: ProviderType;
 }
 
-type CostDataProps = CostDataOwnProps;
+type FinalizationDataProps = FinalizationDataOwnProps;
 
-const CostData: React.FC<CostDataProps> = ({ provider }: CostDataProps) => {
+const Finalization: React.FC<FinalizationDataProps> = ({ provider, providerType }: FinalizationDataProps) => {
   const intl = useIntl();
 
   if (!provider) {
     return null;
   }
 
+  const title = intl.formatMessage(
+    providerType === ProviderType.ocp ? messages.dataDetailsCostManagementData : messages.finalization
+  );
+
   return (
     <>
       <TextContent>
-        <Text component={TextVariants.h3}>{intl.formatMessage(messages.dataDetailsCostManagementData)}</Text>
+        <Text component={TextVariants.h3}>{title}</Text>
       </TextContent>
-      <ProgressStepper
-        aria-label={intl.formatMessage(messages.dataDetailsCostManagementData)}
-        isVertical
-        style={styles.stepper}
-      >
+      <ProgressStepper aria-label={title} isVertical style={styles.stepper}>
         <ProgressStep
           aria-label={intl.formatMessage(messages.dataDetailsIntegrationAndFinalization)}
           icon={getProgressStepIcon(provider.status?.summary?.state)}
@@ -48,4 +51,4 @@ const CostData: React.FC<CostDataProps> = ({ provider }: CostDataProps) => {
   );
 };
 
-export { CostData };
+export { Finalization };