diff --git a/src/components/featureToggle/featureToggle.tsx b/src/components/featureToggle/featureToggle.tsx index d29dc709a..ca7741019 100644 --- 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 index 6a31c734e..c27e37963 100644 --- 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 { }; 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 { groupByCostCategory={groupByCostCategory} groupByTagKey={groupByTagKey} groupByOrg={groupByOrg} + isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleonSelect} @@ -524,6 +534,7 @@ const mapStateToProps = createMapStateToProps ), }, + { + hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, @@ -211,9 +232,15 @@ class DetailsTableBase extends React.Component !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 index 2d2f0ca4f..049562495 100644 --- 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 }; 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 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 { - 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 ), }, + { + hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, @@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component !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 index 00e4bc719..c2a6b3359 100644 --- 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 = ({ clusterId, isLastUpdated, + isLastUpdatedStatus, isStatusMsg, providerId, providerType, + uuId, }: OverallStatusProps) => { const { providers, providersError } = useMapToProps(); const intl = useIntl(); @@ -55,7 +59,10 @@ const OverallStatus: React.FC = ({ // 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 = ({ if (isLastUpdated) { return overallStatus.lastUpdated ? formatDate(overallStatus.lastUpdated) : null; } + if (isLastUpdatedStatus) { + return ( + <> + {getOverallStatusIcon(overallStatus.status)} + + {overallStatus.lastUpdated + ? formatDate(overallStatus.lastUpdated) + : intl.formatMessage(messages.statusMsg, { value: overallStatus.status })} + + + ); + } if (overallStatus.msg && overallStatus.status) { return ( <> diff --git a/src/routes/details/components/providerDetails/providerDetailsContent.tsx b/src/routes/details/components/providerDetails/providerDetailsContent.tsx index 1730c91e0..33d1628db 100644 --- a/src/routes/details/components/providerDetails/providerDetailsContent.tsx +++ b/src/routes/details/components/providerDetails/providerDetailsContent.tsx @@ -22,6 +22,7 @@ interface ProviderDetailsContentOwnProps { clusterId?: string; providerId?: string; providerType: ProviderType; + uuId?: string; } interface ProviderDetailsContentStateProps { @@ -37,6 +38,7 @@ const ProviderDetailsContent: React.FC = ({ clusterId, providerId, providerType, + uuId, }: ProviderDetailsContentProps) => { const intl = useIntl(); @@ -59,7 +61,10 @@ const ProviderDetailsContent: React.FC = ({ // 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 ); if (providerType === ProviderType.ocp) { diff --git a/src/routes/details/components/providerDetails/providerDetailsModal.tsx b/src/routes/details/components/providerDetails/providerDetailsModal.tsx index aa3765084..0354e9359 100644 --- a/src/routes/details/components/providerDetails/providerDetailsModal.tsx +++ b/src/routes/details/components/providerDetails/providerDetailsModal.tsx @@ -11,18 +11,22 @@ import { ProviderDetailsContent } from './providerDetailsContent'; interface ProviderDetailsModalOwnProps { clusterId?: string; - showStatus?: boolean; + isLastUpdatedStatus?: boolean; + isOverallStatus?: boolean; providerId?: string; providerType: ProviderType; + uuId?: string; } type ProviderDetailsModalProps = ProviderDetailsModalOwnProps; const ProviderDetailsModal: React.FC = ({ clusterId, + isOverallStatus = true, + isLastUpdatedStatus, providerId, providerType, - showStatus = true, + uuId, }: ProviderDetailsModalProps) => { const intl = useIntl(); const [isOpen, setIsOpen] = useState(false); @@ -40,14 +44,27 @@ const ProviderDetailsModal: React.FC = ({ return ( <> - {showStatus && } + {isOverallStatus && ( + + )} - + diff --git a/src/routes/details/components/providerDetails/providerDetailsTable.tsx b/src/routes/details/components/providerDetails/providerDetailsTable.tsx index 2997dc3dd..e4e2188ee 100644 --- a/src/routes/details/components/providerDetails/providerDetailsTable.tsx +++ b/src/routes/details/components/providerDetails/providerDetailsTable.tsx @@ -47,9 +47,9 @@ const ProviderDetailsTable: React.FC = ({ providers, newRows.push({ cells: [ { value: }, - { value: }, - { value: }, - { value: }, + { value: }, + { value: }, + { value: }, ], item, }); diff --git a/src/routes/details/gcpDetails/detailsTable.tsx b/src/routes/details/gcpDetails/detailsTable.tsx index 6e4b06069..09debd7c6 100644 --- a/src/routes/details/gcpDetails/detailsTable.tsx +++ b/src/routes/details/gcpDetails/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 { GcpReport } from 'api/reports/gcpReports'; 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'; @@ -28,6 +30,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro filterBy?: any; groupBy: string; groupByTagKey?: string; + isAccountInfoDetailsToggleEnabled?: boolean; isAllSelected?: boolean; isLoading?: boolean; onSelect(items: ComputedReportItem[], isSelected: boolean); @@ -74,12 +77,24 @@ class DetailsTableBase extends React.Component { - 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 isGroupByAccount = groupBy === 'account'; + const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -116,6 +131,10 @@ class DetailsTableBase extends React.Component ), }, + { + hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, @@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component !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/gcpDetails/gcpDetails.tsx b/src/routes/details/gcpDetails/gcpDetails.tsx index 6de79c0f7..b14e10925 100644 --- a/src/routes/details/gcpDetails/gcpDetails.tsx +++ b/src/routes/details/gcpDetails/gcpDetails.tsx @@ -52,6 +52,7 @@ import { styles } from './gcpDetails.styles'; interface GcpDetailsStateProps { currency?: string; + isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -202,7 +203,15 @@ class GcpDetails extends React.Component { }; 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); const groupByTagKey = getGroupByTagKey(query); @@ -214,6 +223,7 @@ class GcpDetails extends React.Component { filterBy={query.filter_by} groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById} groupByTagKey={groupByTagKey} + isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleonSelect} @@ -469,6 +479,7 @@ const mapStateToProps = createMapStateToProps { - 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 isGroupByAccount = groupBy === 'account'; + const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -116,6 +131,10 @@ class DetailsTableBase extends React.Component ), }, + { + hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, @@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component !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/ibmDetails/ibmDetails.tsx b/src/routes/details/ibmDetails/ibmDetails.tsx index c7e1e31e4..fbfdb3c2e 100644 --- a/src/routes/details/ibmDetails/ibmDetails.tsx +++ b/src/routes/details/ibmDetails/ibmDetails.tsx @@ -53,6 +53,7 @@ import { styles } from './ibmDetails.styles'; interface IbmDetailsStateProps { currency?: string; + isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -203,7 +204,15 @@ class IbmDetails extends React.Component { }; 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); @@ -216,6 +225,7 @@ class IbmDetails extends React.Component { filterBy={query.filter_by} groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById} groupByTagKey={groupByTagKey} + isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleonSelect} @@ -471,6 +481,7 @@ const mapStateToProps = createMapStateToProps { - 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 isGroupByPayerTenantId = groupBy === 'payer_tenant_id'; + const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -116,6 +131,10 @@ class DetailsTableBase extends React.Component ), }, + { + hidden: !(isGroupByPayerTenantId && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, @@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component !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/ociDetails/ociDetails.tsx b/src/routes/details/ociDetails/ociDetails.tsx index f7c8476fa..402134f38 100644 --- a/src/routes/details/ociDetails/ociDetails.tsx +++ b/src/routes/details/ociDetails/ociDetails.tsx @@ -52,6 +52,7 @@ import { styles } from './ociDetails.styles'; interface OciDetailsStateProps { currency?: string; + isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -202,7 +203,15 @@ class OciDetails extends React.Component { }; 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 OciDetails extends React.Component { filterBy={query.filter_by} groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById} groupByTagKey={groupByTagKey} + isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleonSelect} @@ -470,6 +480,7 @@ const mapStateToProps = createMapStateToProps : undefined, dataDetailsComponent: groupBy === 'cluster' ? ( - + ) : undefined, costDistribution, costOverviewComponent: ( diff --git a/src/routes/details/ocpDetails/detailsTable.tsx b/src/routes/details/ocpDetails/detailsTable.tsx index 1ea78f600..d0f35af03 100644 --- a/src/routes/details/ocpDetails/detailsTable.tsx +++ b/src/routes/details/ocpDetails/detailsTable.tsx @@ -2,6 +2,7 @@ import 'routes/components/dataTable/dataTable.scss'; import { Label, Tooltip } from '@patternfly/react-core'; import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; +import { ProviderType } from 'api/providers'; import type { Query } from 'api/queries/query'; import type { OcpReport, OcpReportItem } from 'api/reports/ocpReports'; import { ReportPathsType, ReportType } from 'api/reports/report'; @@ -15,6 +16,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'; @@ -38,6 +40,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro groupBy: string; groupByTagKey: string; hiddenColumns?: Set; + isAccountInfoDetailsToggleEnabled?: boolean; isAllSelected?: boolean; isLoading?: boolean; onSelect(items: ComputedReportItem[], isSelected: boolean); @@ -100,6 +103,7 @@ class DetailsTableBase extends React.Component({ @@ -126,7 +131,7 @@ class DetailsTableBase extends React.Component ), }, + { + hidden: !(isGroupByCluster && isAccountInfoDetailsToggleEnabled), + value: ( + + ), + }, { value: monthOverMonth, id: DetailsTableColumnIds.monthOverMonth }, { value: InfrastructureCost, diff --git a/src/routes/details/ocpDetails/ocpDetails.tsx b/src/routes/details/ocpDetails/ocpDetails.tsx index 91d6bdcad..bfccb8d9a 100644 --- a/src/routes/details/ocpDetails/ocpDetails.tsx +++ b/src/routes/details/ocpDetails/ocpDetails.tsx @@ -59,6 +59,7 @@ export interface OcpDetailsStateProps { costDistribution?: string; currency?: string; currentDateRangeType?: string; + isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -246,8 +247,16 @@ class OcpDetails extends React.Component { }; private getTable = () => { - const { costDistribution, query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = - this.props; + const { + costDistribution, + isAccountInfoDetailsToggleEnabled, + query, + report, + reportFetchStatus, + reportQueryString, + router, + timeScopeValue, + } = this.props; const { hiddenColumns, isAllSelected, selectedItems } = this.state; const groupById = getIdKeyForGroupBy(query.group_by); @@ -262,6 +271,7 @@ class OcpDetails extends React.Component { groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById} groupByTagKey={groupByTagKey} hiddenColumns={hiddenColumns} + isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleOnSelect} @@ -556,6 +566,7 @@ const mapStateToProps = createMapStateToProps; + isAccountInfoDetailsToggleEnabled?: boolean; isAllSelected?: boolean; isLoading?: boolean; onSelect(items: ComputedReportItem[], isSelected: boolean); @@ -89,6 +92,7 @@ class DetailsTableBase extends React.Component