Add integration status to details pages

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

Author: dlabrecq

locales/data.json

@@ -152,6 +152,12 @@
         "value": "Back"
       }
     ],
+    "backToIntegrations": [
+      {
+        "type": 0,
+        "value": "Back to integrations status"
+      }
+    ],
     "breakdownBackToDetails": [
       {
         "options": {
@@ -10394,6 +10400,18 @@
         "value": "Integration"
       }
     ],
+    "integrationsDetails": [
+      {
+        "type": 0,
+        "value": "Integrations details"
+      }
+    ],
+    "integrationsStatus": [
+      {
+        "type": 0,
+        "value": "Integrations status"
+      }
+    ],
     "lastProcessed": [
       {
         "type": 0,
@@ -11837,12 +11855,6 @@
         "value": "Rate must be a positive number"
       }
     ],
-    "providerDetails": [
-      {
-        "type": 0,
-        "value": "Integrations details"
-      }
-    ],
     "pvcTitle": [
       {
         "type": 0,
@@ -13589,6 +13601,12 @@
         "value": "vCPU"
       }
     ],
+    "viewAll": [
+      {
+        "type": 0,
+        "value": "View all"
+      }
+    ],
     "volumeTitle": [
       {
         "type": 0,

locales/translations.json

@@ -19,6 +19,7 @@
   "azureDetailsTitle": "Microsoft Azure Details",
   "azureOcpDashboardCostTitle": "Microsoft Azure filtered by OpenShift cost",
   "back": "Back",
+  "backToIntegrations": "Back to integrations status",
   "breakdownBackToDetails": "{groupBy, select, account {Back to {value} account details} aws_category {Back to {value} cost category details} cluster {Back to {value} cluster details} gcp_project {Back to {value} GCP project details} node {Back to {value} node details} org_unit_id {Back to {value} organizational unit details} payer_tenant_id {Back to {value} account details} product_service {Back to {value} service details} project {Back to {value} project details} region {Back to {value} region details} resource_location {Back to {value} region details} service {Back to {value} service details} service_name {Back to {value} service details} subscription_guid {Back to {value} account details} tag {Back to {value} tag details} other {}}",
   "breakdownBackToDetailsAriaLabel": "Back to details",
   "breakdownBackToOptimizations": "Back to optimizations",
@@ -368,6 +369,8 @@
   "infrastructure": "Infrastructure",
   "instances": "Instances",
   "integration": "Integration",
+  "integrationsDetails": "Integrations details",
+  "integrationsStatus": "Integrations status",
   "lastProcessed": "Last processed",
   "lastUpdated": "Last updated",
   "learnMore": "Learn more",
@@ -508,7 +511,6 @@
   "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.",
@@ -635,6 +637,7 @@
   "valueUnits": "{value} {units}",
   "various": "Various",
   "vcpuTitle": "vCPU",
+  "viewAll": "View all",
   "volumeTitle": "Volume",
   "workerUnallocated": "Worker unallocated",
   "workerUnallocatedDesc": "Distribute unused and non-reserved resource costs to projects",

src/locales/messages.ts

@@ -101,6 +101,11 @@ export default defineMessages({
     description: 'Back',
     id: 'back',
   },
+  backToIntegrations: {
+    defaultMessage: 'Back to integrations status',
+    description: 'Back to integrations status',
+    id: 'backToIntegrations',
+  },
   breakdownBackToDetails: {
     defaultMessage:
       '{groupBy, select, ' +
@@ -2382,6 +2387,16 @@ export default defineMessages({
     description: 'Integration',
     id: 'integration',
   },
+  integrationsDetails: {
+    defaultMessage: 'Integrations details',
+    description: 'Integrations details',
+    id: 'integrationsDetails',
+  },
+  integrationsStatus: {
+    defaultMessage: 'Integrations status',
+    description: 'Integrations status',
+    id: 'integrationsStatus',
+  },
   lastProcessed: {
     defaultMessage: 'Last processed',
     description: 'Last processed',
@@ -3156,11 +3171,6 @@ 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',
@@ -3885,6 +3895,11 @@ export default defineMessages({
     description: 'vCPU',
     id: 'vcpuTitle',
   },
+  viewAll: {
+    defaultMessage: 'View all',
+    description: 'View all',
+    id: 'viewAll',
+  },
   volumeTitle: {
     defaultMessage: 'Volume',
     description: 'Volume',

src/routes/components/page/noData/noData.styles.ts

@@ -0,0 +1,9 @@
+import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl';
+import type React from 'react';
+
+export const styles = {
+  details: {
+    marginBottom: global_spacer_xl.value,
+    marginTop: global_spacer_xl.value,
+  },
+} as { [className: string]: React.CSSProperties };

src/routes/components/page/noData/noDataState.tsx

@@ -1,4 +1,5 @@
 import {
+  Bullseye,
   Button,
   EmptyState,
   EmptyStateBody,
@@ -13,6 +14,8 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 
+import { styles } from './noData.styles';
+
 interface NoDataStateOwnProps {
   detailsComponent?: React.ReactNode;
   showReload?: boolean;
@@ -33,7 +36,7 @@ class NoDataStateBase extends React.Component<NoDataStateProps, any> {
         />
         <EmptyStateBody>
           {intl.formatMessage(messages.noDataStateDesc, {
-            status: detailsComponent,
+            status: detailsComponent ? <Bullseye style={styles.details}>{detailsComponent}</Bullseye> : '',
           })}
         </EmptyStateBody>
         <EmptyStateFooter>

src/routes/details/awsDetails/awsDetails.tsx

@@ -20,7 +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 { ProviderStatus } from 'routes/details/components/providerStatus';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
@@ -56,7 +56,6 @@ import { DetailsToolbar } from './detailsToolbar';
 interface AwsDetailsStateProps {
   costType: string;
   currency?: string;
-  isAccountInfoDetailsToggleEnabled?: boolean;
   isAccountInfoEmptyStateToggleEnabled?: boolean;
   isCurrentMonthData?: boolean;
   isDetailsDateRangeToggleEnabled?: boolean;
@@ -216,15 +215,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
   };
 
   private getTable = () => {
-    const {
-      isAccountInfoDetailsToggleEnabled,
-      query,
-      report,
-      reportFetchStatus,
-      reportQueryString,
-      router,
-      timeScopeValue,
-    } = this.props;
+    const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props;
     const { isAllSelected, selectedItems } = this.state;
 
     const groupById = getIdKeyForGroupBy(query.group_by);
@@ -247,7 +238,6 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
         groupByCostCategory={groupByCostCategory}
         groupByTagKey={groupByTagKey}
         groupByOrg={groupByOrg}
-        isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled}
         isAllSelected={isAllSelected}
         isLoading={reportFetchStatus === FetchStatus.inProgress}
         onSelect={this.handleonSelect}
@@ -414,7 +404,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
         return (
           <NoData
             detailsComponent={
-              isAccountInfoEmptyStateToggleEnabled ? <ProviderDetails providerType={ProviderType.aws} /> : undefined
+              isAccountInfoEmptyStateToggleEnabled ? <ProviderStatus providerType={ProviderType.aws} /> : undefined
             }
             title={title}
           />
@@ -534,7 +524,6 @@ const mapStateToProps = createMapStateToProps<AwsDetailsOwnProps, AwsDetailsStat
   return {
     costType,
     currency,
-    isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
     isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
     isCurrentMonthData,
     isDetailsDateRangeToggleEnabled,

src/routes/details/awsDetails/detailsHeader.styles.ts

@@ -26,6 +26,9 @@ export const styles = {
   perspectiveContainer: {
     alignItems: 'unset',
   },
+  status: {
+    marginBottom: global_spacer_sm.var,
+  },
   title: {
     paddingBottom: global_spacer_sm.var,
   },

src/routes/details/awsDetails/detailsHeader.tsx

@@ -18,6 +18,7 @@ import { CostType } from 'routes/components/costType';
 import { Currency } from 'routes/components/currency';
 import { DateRange } from 'routes/components/dateRange';
 import { GroupBy } from 'routes/components/groupBy';
+import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedAwsReportItemsParams } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import { DateRangeType } from 'routes/utils/dateRange';
@@ -48,7 +49,8 @@ interface DetailsHeaderOwnProps {
 }
 
 interface DetailsHeaderStateProps {
-  isDetailsDateRangeToggleEnabled: boolean;
+  isAccountInfoDetailsToggleEnabled?: boolean;
+  isDetailsDateRangeToggleEnabled?: boolean;
   isExportsToggleEnabled?: boolean;
   providers: Providers;
   providersError: AxiosError;
@@ -112,6 +114,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
       currency,
       groupBy,
       intl,
+      isAccountInfoDetailsToggleEnabled,
       isCurrentMonthData,
       isDetailsDateRangeToggleEnabled,
       isExportsToggleEnabled,
@@ -142,7 +145,14 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
         </Flex>
         <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }} style={styles.perspectiveContainer}>
           <FlexItem>
-            <Flex style={styles.perspective}>
+            {isAccountInfoDetailsToggleEnabled && (
+              <Flex>
+                <FlexItem style={styles.status}>
+                  <ProviderDetailsModal providerType={ProviderType.aws} />
+                </FlexItem>
+              </Flex>
+            )}
+            <Flex style={isAccountInfoDetailsToggleEnabled ? undefined : styles.perspective}>
               <FlexItem>
                 <GroupBy
                   getIdKeyForGroupBy={getIdKeyForGroupBy}
@@ -206,6 +216,7 @@ const mapStateToProps = createMapStateToProps<DetailsHeaderOwnProps, DetailsHead
   );
 
   return {
+    isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
     isDetailsDateRangeToggleEnabled: FeatureToggleSelectors.selectIsDetailsDateRangeToggleEnabled(state),
     isExportsToggleEnabled: FeatureToggleSelectors.selectIsExportsToggleEnabled(state),
     providers: filterProviders(providers, ProviderType.aws),

src/routes/details/awsDetails/detailsTable.tsx

@@ -1,6 +1,5 @@
 import 'routes/components/dataTable/dataTable.scss';
 
-import { ProviderType } from 'api/providers';
 import type { Query } from 'api/queries/query';
 import type { AwsReport } from 'api/reports/awsReports';
 import { ReportPathsType, ReportType } from 'api/reports/report';
@@ -14,7 +13,6 @@ import { DataTable } from 'routes/components/dataTable';
 import { styles } from 'routes/components/dataTable/dataTable.styles';
 import { EmptyValueState } from 'routes/components/state/emptyValueState';
 import { Actions } from 'routes/details/components/actions';
-import { ProviderDetailsModal } from 'routes/details/components/providerDetails';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
 import { getOrgBreakdownPath } from 'routes/utils/paths';
@@ -32,7 +30,6 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   groupByCostCategory?: string;
   groupByOrg?: string;
   groupByTagKey?: string;
-  isAccountInfoDetailsToggleEnabled?: boolean;
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
@@ -86,7 +83,6 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
       groupByOrg,
       groupByTagKey,
       intl,
-      isAccountInfoDetailsToggleEnabled,
       isAllSelected,
       query,
       report,
@@ -146,10 +142,6 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
               name: intl.formatMessage(messages.detailsResourceNames, { value: groupBy }),
               ...(computedItems.length && { isSortable: true }),
             },
-            {
-              hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled),
-              name: intl.formatMessage(messages.costModelsLastUpdated),
-            },
             {
               name: intl.formatMessage(messages.monthOverMonthChange),
             },
@@ -211,17 +203,6 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
               </>
             ),
           },
-          {
-            hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled),
-            value: (
-              <ProviderDetailsModal
-                isLastUpdatedStatus
-                isOverallStatus
-                uuId={item.source_uuid?.[0]}
-                providerType={ProviderType.aws}
-              />
-            ),
-          },
           { value: monthOverMonth },
           { value: cost, style: styles.managedColumn },
           { value: actions },