Merge pull request #4052 from dlabrecq/integration-status

Integration status
project-koku · Oct 7, 2024 · 484ad0e · 484ad0e
2 parents 9c8e8d0 + b123a27
commit 484ad0e
Show file tree

Hide file tree

Showing 24 changed files with 392 additions and 48 deletions.
diff --git a/src/components/featureToggle/featureToggle.tsx b/src/components/featureToggle/featureToggle.tsx
@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
 import { FeatureToggleActions } from 'store/featureToggle';
 
 export const enum FeatureToggle {
+  accountInfoDetails = 'cost-management.ui.account-info-details', // https://issues.redhat.com/browse/COST-5386
   accountInfoEmptyState = 'cost-management.ui.account-info-empty-state', // https://issues.redhat.com/browse/COST-5335
   awsEc2Instances = 'cost-management.ui.aws-ec2-instances', // https://issues.redhat.com/browse/COST-4855
   chartSkeleton = 'cost-management.ui.chart-skeleton', // https://issues.redhat.com/browse/COST-5573
@@ -21,6 +22,10 @@ const useIsToggleEnabled = (toggle: FeatureToggle) => {
   return client.isEnabled(toggle);
 };
 
+export const useIsAccountInfoDetailsToggleEnabled = () => {
+  return useIsToggleEnabled(FeatureToggle.accountInfoDetails);
+};
+
 export const useIsAccountInfoEmptyStateToggleEnabled = () => {
   return useIsToggleEnabled(FeatureToggle.accountInfoEmptyState);
 };
@@ -62,6 +67,7 @@ export const useFeatureToggle = () => {
   const dispatch = useDispatch();
   const { auth } = useChrome();
 
+  const isAccountInfoDetailsToggleEnabled = useIsAccountInfoDetailsToggleEnabled();
   const isAccountInfoEmptyStateToggleEnabled = useIsAccountInfoEmptyStateToggleEnabled();
   const isAwsEc2InstancesToggleEnabled = useIsAwsEc2InstancesToggleEnabled();
   const isChartSkeletonToggleEnabled = useIsChartSkeletonToggleEnabled();
@@ -82,6 +88,7 @@ export const useFeatureToggle = () => {
     // Workaround for code that doesn't use hooks
     dispatch(
       FeatureToggleActions.setFeatureToggle({
+        isAccountInfoDetailsToggleEnabled,
         isAccountInfoEmptyStateToggleEnabled,
         isAwsEc2InstancesToggleEnabled,
         isChartSkeletonToggleEnabled,
@@ -98,6 +105,7 @@ export const useFeatureToggle = () => {
       fetchUser(identity => console.log('User identity:', identity));
     }
   }, [
+    isAccountInfoDetailsToggleEnabled,
     isAccountInfoEmptyStateToggleEnabled,
     isAwsEc2InstancesToggleEnabled,
     isChartSkeletonToggleEnabled,

diff --git a/src/routes/details/awsDetails/awsDetails.tsx b/src/routes/details/awsDetails/awsDetails.tsx
@@ -56,6 +56,7 @@ import { DetailsToolbar } from './detailsToolbar';
 interface AwsDetailsStateProps {
   costType: string;
   currency?: string;
+  isAccountInfoDetailsToggleEnabled?: boolean;
   isAccountInfoEmptyStateToggleEnabled?: boolean;
   isCurrentMonthData?: boolean;
   isDetailsDateRangeToggleEnabled?: boolean;
@@ -215,7 +216,15 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
   };
 
   private getTable = () => {
-    const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props;
+    const {
+      isAccountInfoDetailsToggleEnabled,
+      query,
+      report,
+      reportFetchStatus,
+      reportQueryString,
+      router,
+      timeScopeValue,
+    } = this.props;
     const { isAllSelected, selectedItems } = this.state;
 
     const groupById = getIdKeyForGroupBy(query.group_by);
@@ -238,6 +247,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
         groupByCostCategory={groupByCostCategory}
         groupByTagKey={groupByTagKey}
         groupByOrg={groupByOrg}
+        isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled}
         isAllSelected={isAllSelected}
         isLoading={reportFetchStatus === FetchStatus.inProgress}
         onSelect={this.handleonSelect}
@@ -524,6 +534,7 @@ const mapStateToProps = createMapStateToProps<AwsDetailsOwnProps, AwsDetailsStat
   return {
     costType,
     currency,
+    isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
     isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
     isCurrentMonthData,
     isDetailsDateRangeToggleEnabled,

diff --git a/src/routes/details/awsDetails/detailsTable.tsx b/src/routes/details/awsDetails/detailsTable.tsx
@@ -1,5 +1,6 @@
 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';
@@ -13,6 +14,7 @@ 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';
@@ -30,6 +32,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
   groupByCostCategory?: string;
   groupByOrg?: string;
   groupByTagKey?: string;
+  isAccountInfoDetailsToggleEnabled?: boolean;
   isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
@@ -83,6 +86,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
       groupByOrg,
       groupByTagKey,
       intl,
+      isAccountInfoDetailsToggleEnabled,
       isAllSelected,
       query,
       report,
@@ -93,6 +97,8 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
       return;
     }
 
+    const isGroupByAccount = groupBy === 'account';
+
     const rows = [];
     const computedItems = getUnsortedComputedReportItems({
       report,
@@ -136,10 +142,14 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
               name: '',
             },
             {
-              orderBy: groupBy === 'account' ? 'account_alias' : groupBy,
+              orderBy: isGroupByAccount ? 'account_alias' : groupBy,
               name: intl.formatMessage(messages.detailsResourceNames, { value: groupBy }),
               ...(computedItems.length && { isSortable: true }),
             },
+            {
+              hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled),
+              name: intl.formatMessage(messages.costModelsLastUpdated),
+            },
             {
               name: intl.formatMessage(messages.monthOverMonthChange),
             },
@@ -201,6 +211,17 @@ 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 },
@@ -211,9 +232,15 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
       });
     });
 
+    const filteredColumns = (columns as any[]).filter(column => !column.hidden);
+    const filteredRows = rows.map(({ ...row }) => {
+      row.cells = row.cells.filter(cell => !cell.hidden);
+      return row;
+    });
+
     this.setState({
-      columns,
-      rows,
+      columns: filteredColumns,
+      rows: filteredRows,
     });
   };
 

diff --git a/src/routes/details/azureDetails/azureDetails.tsx b/src/routes/details/azureDetails/azureDetails.tsx
@@ -52,6 +52,7 @@ import { DetailsToolbar } from './detailsToolbar';
 
 interface AzureDetailsStateProps {
   currency?: string;
+  isAccountInfoDetailsToggleEnabled?: boolean;
   isAccountInfoEmptyStateToggleEnabled?: boolean;
   isCurrentMonthData?: boolean;
   isDetailsDateRangeToggleEnabled?: boolean;
@@ -202,7 +203,15 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
   };
 
   private getTable = () => {
-    const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props;
+    const {
+      isAccountInfoDetailsToggleEnabled,
+      query,
+      report,
+      reportFetchStatus,
+      reportQueryString,
+      router,
+      timeScopeValue,
+    } = this.props;
     const { isAllSelected, selectedItems } = this.state;
 
     const groupById = getIdKeyForGroupBy(query.group_by);
@@ -215,6 +224,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
         filterBy={query.filter_by}
         groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById}
         groupByTagKey={groupByTagKey}
+        isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled}
         isAllSelected={isAllSelected}
         isLoading={reportFetchStatus === FetchStatus.inProgress}
         onSelect={this.handleOnSelect}
@@ -468,6 +478,7 @@ const mapStateToProps = createMapStateToProps<AzureDetailsOwnProps, AzureDetails
 
   return {
     currency,
+    isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
     isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
     isCurrentMonthData,
     isDetailsDateRangeToggleEnabled,

diff --git a/src/routes/details/azureDetails/detailsTable.tsx b/src/routes/details/azureDetails/detailsTable.tsx
@@ -1,5 +1,6 @@
 import 'routes/components/dataTable/dataTable.scss';
 
+import { ProviderType } from 'api/providers';
 import type { Query } from 'api/queries/query';
 import type { AzureReport } from 'api/reports/azureReports';
 import { ReportPathsType, ReportType } from 'api/reports/report';
@@ -13,6 +14,7 @@ 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 { getBreakdownPath } from 'routes/utils/paths';
@@ -26,9 +28,10 @@ import { withRouter } from 'utils/router';
 interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentProps {
   breadcrumbPath?: string;
   filterBy?: any;
-  isAllSelected?: boolean;
   groupBy: string;
   groupByTagKey?: string;
+  isAccountInfoDetailsToggleEnabled?: boolean;
+  isAllSelected?: boolean;
   isLoading?: boolean;
   onSelect(items: ComputedReportItem[], isSelected: boolean);
   onSort(sortType: string, isSortAscending: boolean);
@@ -74,12 +77,24 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
   }
 
   private initDatum = () => {
-    const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } =
-      this.props;
+    const {
+      breadcrumbPath,
+      groupBy,
+      groupByTagKey,
+      intl,
+      isAccountInfoDetailsToggleEnabled,
+      isAllSelected,
+      query,
+      report,
+      router,
+      selectedItems,
+    } = this.props;
     if (!report) {
       return;
     }
 
+    const isGroupBySubscriptionGuid = groupBy === 'subscription_guid';
+
     const rows = [];
     const computedItems = getUnsortedComputedReportItems({
       report,
@@ -112,10 +127,14 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
             name: '',
           },
           {
-            orderBy: groupBy === 'subscription_guid' ? 'subscription_name' : groupBy,
+            orderBy: isGroupBySubscriptionGuid ? 'subscription_name' : groupBy,
             name: intl.formatMessage(messages.detailsResourceNames, { value: groupBy }),
             ...(computedItems.length && { isSortable: true }),
           },
+          {
+            hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled),
+            name: intl.formatMessage(messages.costModelsLastUpdated),
+          },
           {
             name: intl.formatMessage(messages.monthOverMonthChange),
           },
@@ -172,6 +191,17 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
               </>
             ),
           },
+          {
+            hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled),
+            value: (
+              <ProviderDetailsModal
+                isLastUpdatedStatus
+                isOverallStatus
+                uuId={item.source_uuid?.[0]}
+                providerType={ProviderType.azure}
+              />
+            ),
+          },
           { value: monthOverMonth },
           { value: cost, style: styles.managedColumn },
           { value: actions },
@@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
       });
     });
 
+    const filteredColumns = (columns as any[]).filter(column => !column.hidden);
+    const filteredRows = rows.map(({ ...row }) => {
+      row.cells = row.cells.filter(cell => !cell.hidden);
+      return row;
+    });
+
     this.setState({
-      columns,
-      rows,
+      columns: filteredColumns,
+      rows: filteredRows,
     });
   };
 

diff --git a/src/routes/details/components/providerDetails/components/overallStatus.tsx b/src/routes/details/components/providerDetails/components/overallStatus.tsx
@@ -24,9 +24,11 @@ import { styles } from './component.styles';
 interface OverallStatusOwnProps {
   clusterId?: string;
   isLastUpdated?: boolean;
+  isLastUpdatedStatus?: boolean;
   isStatusMsg?: boolean;
   providerId?: string;
   providerType: ProviderType;
+  uuId?: string;
 }
 
 interface OverallStatusStateProps {
@@ -41,9 +43,11 @@ type OverallStatusProps = OverallStatusOwnProps;
 const OverallStatus: React.FC<OverallStatusProps> = ({
   clusterId,
   isLastUpdated,
+  isLastUpdatedStatus,
   isStatusMsg,
   providerId,
   providerType,
+  uuId,
 }: OverallStatusProps) => {
   const { providers, providersError } = useMapToProps();
   const intl = useIntl();
@@ -55,7 +59,10 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
   // Filter OCP providers to skip an extra API request
   const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
   const provider = filteredProviders?.find(
-    val => providerId === val.id || (clusterId && val.authentication?.credentials?.cluster_id === clusterId)
+    val =>
+      providerId === val.id ||
+      (clusterId && val.authentication?.credentials?.cluster_id === clusterId) ||
+      uuId === val.uuid
   );
   const cloudProvider = providers?.data?.find(val => val.uuid === provider?.infrastructure?.uuid);
 
@@ -122,6 +129,18 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
   if (isLastUpdated) {
     return overallStatus.lastUpdated ? formatDate(overallStatus.lastUpdated) : null;
   }
+  if (isLastUpdatedStatus) {
+    return (
+      <>
+        <span style={styles.statusIcon}>{getOverallStatusIcon(overallStatus.status)}</span>
+        <span style={styles.description}>
+          {overallStatus.lastUpdated
+            ? formatDate(overallStatus.lastUpdated)
+            : intl.formatMessage(messages.statusMsg, { value: overallStatus.status })}
+        </span>
+      </>
+    );
+  }
   if (overallStatus.msg && overallStatus.status) {
     return (
       <>