Merge pull request #3703 from dlabrecq/data-details

Data details
project-koku · Mar 13, 2024 · a1ced68 · a1ced68
2 parents 4b9fd40 + b79bd60
commit a1ced68
Show file tree

Hide file tree

Showing 19 changed files with 681 additions and 26 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -1093,6 +1093,12 @@
         "value": "Cost categories"
       }
     ],
+    "costData": [
+      {
+        "type": 0,
+        "value": "Cost data"
+      }
+    ],
     "costDistribution": [
       {
         "type": 0,
@@ -2368,6 +2374,133 @@
         "value": "supplementaryCost"
       }
     ],
+    "dataDetails": [
+      {
+        "type": 0,
+        "value": "Data details"
+      }
+    ],
+    "dataDetailsDownload": [
+      {
+        "options": {
+          "complete": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data download complete"
+              }
+            ]
+          },
+          "in_progress": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data download in progress"
+              }
+            ]
+          },
+          "other": {
+            "value": []
+          },
+          "pending": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data download pending"
+              }
+            ]
+          }
+        },
+        "type": 5,
+        "value": "value"
+      }
+    ],
+    "dataDetailsProcessing": [
+      {
+        "options": {
+          "complete": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data processing complete"
+              }
+            ]
+          },
+          "in_progress": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data processing in progress"
+              }
+            ]
+          },
+          "other": {
+            "value": []
+          },
+          "pending": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data processing pending"
+              }
+            ]
+          }
+        },
+        "type": 5,
+        "value": "value"
+      }
+    ],
+    "dataDetailsProgressStep": [
+      {
+        "type": 0,
+        "value": "Data details progress step "
+      },
+      {
+        "type": 1,
+        "value": "count"
+      }
+    ],
+    "dataDetailsProgressStepper": [
+      {
+        "type": 0,
+        "value": "Data details progress stepper"
+      }
+    ],
+    "dataDetailsSummary": [
+      {
+        "options": {
+          "complete": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data summary complete"
+              }
+            ]
+          },
+          "in_progress": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data summary in progress"
+              }
+            ]
+          },
+          "other": {
+            "value": []
+          },
+          "pending": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Data summary pending"
+              }
+            ]
+          }
+        },
+        "type": 5,
+        "value": "value"
+      }
+    ],
     "dataTableAriaLabel": [
       {
         "type": 0,

diff --git a/locales/translations.json b/locales/translations.json
@@ -74,6 +74,7 @@
   "costCategoryDesc": "Enable your AWS cost categories to be used for report grouping and filtering. Changes will be reflected within 24 hours. {learnMore}",
   "costCategoryNames": "Cost category names",
   "costCategoryTitle": "Cost categories",
+  "costData": "Cost data",
   "costDistribution": "Cost distribution",
   "costDistributionAriaDesc": "Overhead cost breakdown of platform, worker unallocated, and total costs",
   "costDistributionAriaLabel": "A description of platform, worker unallocated, and total costs",
@@ -197,6 +198,12 @@
   "dashboardNetworkTitle": "Network services cost",
   "dashboardStorageTitle": "Storage services usage",
   "dashboardTotalCostTooltip": "This total cost is the sum of the infrastructure cost {infrastructureCost} and supplementary cost {supplementaryCost}",
+  "dataDetails": "Data details",
+  "dataDetailsDownload": "{value, select, complete {Data download complete}in_progress {Data download in progress}pending {Data download pending}other {}}",
+  "dataDetailsProcessing": "{value, select, complete {Data processing complete}in_progress {Data processing in progress}pending {Data processing pending}other {}}",
+  "dataDetailsProgressStep": "Data details progress step {count}",
+  "dataDetailsProgressStepper": "Data details progress stepper",
+  "dataDetailsSummary": "{value, select, complete {Data summary complete}in_progress {Data summary in progress}pending {Data summary pending}other {}}",
   "dataTableAriaLabel": "Details table",
   "datePickerAfterError": "Date is after the allowable range",
   "datePickerBeforeError": "Date is before the allowable range",

diff --git a/src/api/providers.ts b/src/api/providers.ts
@@ -62,6 +62,11 @@ export interface Provider {
   paused?: boolean;
   previous_month_data?: boolean;
   source_type?: string;
+  status?: {
+    download?: string;
+    processing?: string;
+    summary?: string;
+  };
   type?: string;
   uuid?: string;
 }

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -422,6 +422,11 @@ export default defineMessages({
     description: 'Cost categories',
     id: 'costCategoryTitle',
   },
+  costData: {
+    defaultMessage: 'Cost data',
+    description: 'Cost data',
+    id: 'costData',
+  },
   costDistribution: {
     defaultMessage: 'Cost distribution',
     description: 'Cost distribution',
@@ -1117,6 +1122,51 @@ export default defineMessages({
     description: 'total cost is the sum of the infrastructure cost and supplementary cost',
     id: 'dashboardTotalCostTooltip',
   },
+  dataDetails: {
+    defaultMessage: 'Data details',
+    description: 'Data details',
+    id: 'dataDetails',
+  },
+  dataDetailsDownload: {
+    defaultMessage:
+      '{value, select, ' +
+      'complete {Data download complete}' +
+      'in_progress {Data download in progress}' +
+      'pending {Data download pending}' +
+      'other {}}',
+    description: 'Data download status',
+    id: 'dataDetailsDownload',
+  },
+  dataDetailsProcessing: {
+    defaultMessage:
+      '{value, select, ' +
+      'complete {Data processing complete}' +
+      'in_progress {Data processing in progress}' +
+      'pending {Data processing pending}' +
+      'other {}}',
+    description: 'Data processing status',
+    id: 'dataDetailsProcessing',
+  },
+  dataDetailsProgressStep: {
+    defaultMessage: 'Data details progress step {count}',
+    description: 'Data details progress step {count}',
+    id: 'dataDetailsProgressStep',
+  },
+  dataDetailsProgressStepper: {
+    defaultMessage: 'Data details progress stepper',
+    description: 'Data details progress stepper',
+    id: 'dataDetailsProgressStepper',
+  },
+  dataDetailsSummary: {
+    defaultMessage:
+      '{value, select, ' +
+      'complete {Data summary complete}' +
+      'in_progress {Data summary in progress}' +
+      'pending {Data summary pending}' +
+      'other {}}',
+    description: 'Data summary status',
+    id: 'dataDetailsSummary',
+  },
   dataTableAriaLabel: {
     defaultMessage: 'Details table',
     description: 'Details table',

diff --git a/src/routes/details/components/breakdown/breakdownBase.tsx b/src/routes/details/components/breakdown/breakdownBase.tsx
@@ -58,6 +58,7 @@ export interface BreakdownStateProps {
   costOverviewComponent?: React.ReactNode;
   costType?: string;
   currency?: string;
+  dataDetailsComponent?: React.ReactNode;
   description?: string;
   detailsURL?: string;
   emptyStateTitle?: string;
@@ -269,6 +270,7 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> {
       costDistribution,
       costType,
       currency,
+      dataDetailsComponent,
       description,
       detailsURL,
       emptyStateTitle,
@@ -316,6 +318,7 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> {
               : undefined
           }
           clusterInfoComponent={clusterInfoComponent}
+          dataDetailsComponent={dataDetailsComponent}
           costDistribution={costDistribution}
           costType={costType}
           currency={currency}

diff --git a/src/routes/details/components/breakdown/breakdownHeader.tsx b/src/routes/details/components/breakdown/breakdownHeader.tsx
@@ -33,6 +33,7 @@ interface BreakdownHeaderOwnProps extends RouterComponentProps {
   costDistribution?: string;
   costType?: string;
   currency?: string;
+  dataDetailsComponent?: React.ReactNode;
   detailsURL?: string;
   description?: string;
   groupBy?: string;
@@ -95,6 +96,7 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> {
       costDistribution,
       costType,
       currency,
+      dataDetailsComponent,
       description,
       groupBy,
       intl,
@@ -158,10 +160,13 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> {
             <Title headingLevel="h1" size={TitleSizes['2xl']}>
               {intl.formatMessage(messages.breakdownTitle, { value: title })}
               {description && (
-                <div>
-                  <span style={styles.description}>{description}</span>
-                  {clusterInfoComponent && isClusterInfoToggleEnabled ? clusterInfoComponent : null}
-                </div>
+                <>
+                  <div style={styles.description}>
+                    {description}
+                    {clusterInfoComponent && isClusterInfoToggleEnabled ? clusterInfoComponent : null}
+                  </div>
+                  <div>{dataDetailsComponent && isClusterInfoToggleEnabled ? dataDetailsComponent : null}</div>
+                </>
               )}
             </Title>
             {showCostDistribution && (

diff --git a/src/routes/details/ocpBreakdown/clusterInfo/cloudIntegration.tsx b/src/routes/details/ocpBreakdown/clusterInfo/cloudIntegration.tsx
@@ -22,18 +22,14 @@ interface CloudIntegrationOwnProps {
   uuid?: string;
 }
 
-export interface CloudIntegrationStateProps {
+interface CloudIntegrationStateProps {
   provider: Provider;
   providerError: AxiosError;
   providerFetchStatus: FetchStatus;
   providerQueryString: string;
   uuid?: string;
 }
 
-export interface CloudIntegrationMapProps {
-  // TBD...
-}
-
 type CloudIntegrationProps = CloudIntegrationOwnProps;
 
 const CloudIntegration: React.FC<CloudIntegrationProps> = ({ uuid }: CloudIntegrationProps) => {

diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.styles.ts
@@ -1,22 +1,19 @@
 import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import global_FontSize_md from '@patternfly/react-tokens/dist/js/global_FontSize_md';
 import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs';
+import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md';
 import global_warning_color_100 from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import type React from 'react';
 
 export const styles = {
   clusterInfo: {
     fontSize: global_FontSize_xs.value,
   },
-  container: {
-    overflow: 'auto',
-  },
   loading: {
     backgroundColor: global_BackgroundColor_light_100.value,
     minHeight: '520px',
   },
   spacingRight: {
-    marginRight: global_FontSize_md.value,
+    marginRight: global_spacer_md.value,
   },
   updateAvailable: {
     color: global_warning_color_100.value,

diff --git a/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.tsx b/src/routes/details/ocpBreakdown/clusterInfo/clusterInfo.tsx
@@ -4,8 +4,8 @@ import messages from 'locales/messages';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { ClusterContent } from './clusterContent';
 import { styles } from './clusterInfo.styles';
+import { ClusterInfoContent } from './clusterInfoContent';
 
 interface ClusterInfoOwnProps {
   clusterId?: string;
@@ -36,11 +36,11 @@ const ClusterInfo: React.FC<ClusterInfoProps> = ({ clusterId }: ClusterInfoProps
       <Modal className="costManagement" isOpen={isOpen} onClose={handleOnClose} variant={ModalVariant.medium}>
         <ModalHeader title={intl.formatMessage(messages.clusterInfo)} />
         <ModalBody>
-          <ClusterContent clusterId={clusterId} />
+          <ClusterInfoContent clusterId={clusterId} />
         </ModalBody>
       </Modal>
     </>
   );
 };
 
-export { ClusterInfo };
+export default ClusterInfo;
diff --git a/...Breakdown/clusterInfo/clusterContent.scss → ...kdown/clusterInfo/clusterInfoContent.scss b/...Breakdown/clusterInfo/clusterContent.scss → ...kdown/clusterInfo/clusterInfoContent.scss