diff --git a/locales/data.json b/locales/data.json index d805615e9..bf3cae29b 100644 --- a/locales/data.json +++ b/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, diff --git a/locales/translations.json b/locales/translations.json index d4e481c04..4a951916d 100644 --- a/locales/translations.json +++ b/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", diff --git a/src/locales/messages.ts b/src/locales/messages.ts index ce7f24b6e..f42057b34 100644 --- a/src/locales/messages.ts +++ b/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', diff --git a/src/routes/components/page/noData/noData.styles.ts b/src/routes/components/page/noData/noData.styles.ts new file mode 100644 index 000000000..1cb3c59b6 --- /dev/null +++ b/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 }; diff --git a/src/routes/components/page/noData/noDataState.tsx b/src/routes/components/page/noData/noDataState.tsx index 7ce759d65..5efd0c998 100644 --- a/src/routes/components/page/noData/noDataState.tsx +++ b/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 { /> {intl.formatMessage(messages.noDataStateDesc, { - status: detailsComponent, + status: detailsComponent ? {detailsComponent} : '', })} diff --git a/src/routes/details/awsDetails/awsDetails.tsx b/src/routes/details/awsDetails/awsDetails.tsx index c27e37963..72dca13cb 100644 --- a/src/routes/details/awsDetails/awsDetails.tsx +++ b/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 { }; 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 { 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 { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -534,7 +524,6 @@ const mapStateToProps = createMapStateToProps { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -142,7 +145,14 @@ class DetailsHeaderBase extends React.Component { - + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} + ), }, - { - hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, diff --git a/src/routes/details/azureDetails/azureDetails.tsx b/src/routes/details/azureDetails/azureDetails.tsx index 049562495..10105c4c4 100644 --- a/src/routes/details/azureDetails/azureDetails.tsx +++ b/src/routes/details/azureDetails/azureDetails.tsx @@ -18,7 +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 { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; @@ -52,7 +52,6 @@ import { DetailsToolbar } from './detailsToolbar'; interface AzureDetailsStateProps { currency?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -203,15 +202,7 @@ class AzureDetails extends React.Component }; 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); @@ -224,7 +215,6 @@ 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} @@ -372,7 +362,7 @@ class AzureDetails extends React.Component return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -478,7 +468,6 @@ const mapStateToProps = createMapStateToProps { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -126,19 +129,24 @@ class DetailsHeaderBase extends React.Component { + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} - -
- -
+ + {isDetailsDateRangeToggleEnabled && ( @@ -185,6 +193,7 @@ const mapStateToProps = createMapStateToProps { - const { - breadcrumbPath, - groupBy, - groupByTagKey, - intl, - isAccountInfoDetailsToggleEnabled, - isAllSelected, - query, - report, - router, - selectedItems, - } = this.props; + const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } = + this.props; if (!report) { return; } @@ -131,10 +118,6 @@ class DetailsTableBase extends React.Component ), }, - { - hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, diff --git a/src/routes/details/components/providerDetails/index.ts b/src/routes/details/components/providerDetails/index.ts deleted file mode 100644 index 61e26dae5..000000000 --- a/src/routes/details/components/providerDetails/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { ProviderDetails } from './providerDetails'; -export { ProviderDetailsModal } from './providerDetailsModal'; diff --git a/src/routes/details/components/providerDetails/components/cloudData.tsx b/src/routes/details/components/providerStatus/components/cloudData.tsx similarity index 91% rename from src/routes/details/components/providerDetails/components/cloudData.tsx rename to src/routes/details/components/providerStatus/components/cloudData.tsx index f8fbc4fe2..65bb70343 100644 --- a/src/routes/details/components/providerDetails/components/cloudData.tsx +++ b/src/routes/details/components/providerStatus/components/cloudData.tsx @@ -3,11 +3,11 @@ import type { Provider } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; import { useIntl } from 'react-intl'; -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 { SourceLink } from 'routes/details/components/providerStatus/components/sourceLink'; +import { formatDate } from 'routes/details/components/providerStatus/utils/format'; +import { getProgressStepIcon } from 'routes/details/components/providerStatus/utils/icon'; +import { getProviderAvailability } from 'routes/details/components/providerStatus/utils/status'; +import { getProgressStepVariant } from 'routes/details/components/providerStatus/utils/variant'; import { styles } from './component.styles'; diff --git a/src/routes/details/components/providerDetails/components/clusterData.tsx b/src/routes/details/components/providerStatus/components/clusterData.tsx similarity index 91% rename from src/routes/details/components/providerDetails/components/clusterData.tsx rename to src/routes/details/components/providerStatus/components/clusterData.tsx index 3a4ae83e8..256be3f22 100644 --- a/src/routes/details/components/providerDetails/components/clusterData.tsx +++ b/src/routes/details/components/providerStatus/components/clusterData.tsx @@ -3,11 +3,11 @@ import type { Provider } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; import { useIntl } from 'react-intl'; -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 { SourceLink } from 'routes/details/components/providerStatus/components/sourceLink'; +import { formatDate } from 'routes/details/components/providerStatus/utils/format'; +import { getProgressStepIcon } from 'routes/details/components/providerStatus/utils/icon'; +import { getProviderAvailability } from 'routes/details/components/providerStatus/utils/status'; +import { getProgressStepVariant } from 'routes/details/components/providerStatus/utils/variant'; import { styles } from './component.styles'; diff --git a/src/routes/details/components/providerDetails/components/component.styles.ts b/src/routes/details/components/providerStatus/components/component.styles.ts similarity index 94% rename from src/routes/details/components/providerDetails/components/component.styles.ts rename to src/routes/details/components/providerStatus/components/component.styles.ts index 44aa60ec0..5cf0feefc 100644 --- a/src/routes/details/components/providerDetails/components/component.styles.ts +++ b/src/routes/details/components/providerStatus/components/component.styles.ts @@ -6,6 +6,9 @@ import global_spacer_sm from '@patternfly/react-tokens/dist/js/global_spacer_sm' import type React from 'react'; export const styles = { + count: { + marginRight: global_spacer_sm.value, + }, description: { color: global_disabled_color_100.value, fontSize: global_FontSize_xs.value, diff --git a/src/routes/details/components/providerDetails/components/finalization.tsx b/src/routes/details/components/providerStatus/components/finalization.tsx similarity index 92% rename from src/routes/details/components/providerDetails/components/finalization.tsx rename to src/routes/details/components/providerStatus/components/finalization.tsx index 6c9d784d5..0e37e59ae 100644 --- a/src/routes/details/components/providerDetails/components/finalization.tsx +++ b/src/routes/details/components/providerStatus/components/finalization.tsx @@ -4,9 +4,9 @@ import { ProviderType } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; import { useIntl } from 'react-intl'; -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'; +import { formatDate } from 'routes/details/components/providerStatus/utils/format'; +import { getProgressStepIcon } from 'routes/details/components/providerStatus/utils/icon'; +import { getProgressStepVariant } from 'routes/details/components/providerStatus/utils/variant'; import { styles } from './component.styles'; diff --git a/src/routes/details/components/providerDetails/components/overallStatus.tsx b/src/routes/details/components/providerStatus/components/overallStatus.tsx similarity index 57% rename from src/routes/details/components/providerDetails/components/overallStatus.tsx rename to src/routes/details/components/providerStatus/components/overallStatus.tsx index c2a6b3359..6b74777c7 100644 --- a/src/routes/details/components/providerDetails/components/overallStatus.tsx +++ b/src/routes/details/components/providerStatus/components/overallStatus.tsx @@ -7,13 +7,13 @@ import React from 'react'; import type { MessageDescriptor } from 'react-intl'; import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; -import { formatDate } from 'routes/details/components/providerDetails/utils/format'; -import { getOverallStatusIcon } from 'routes/details/components/providerDetails/utils/icon'; +import { formatDate } from 'routes/details/components/providerStatus/utils/format'; +import { getOverallStatusIcon } from 'routes/details/components/providerStatus/utils/icon'; import { getProviderAvailability, getProviderStatus, StatusType, -} from 'routes/details/components/providerDetails/utils/status'; +} from 'routes/details/components/providerStatus/utils/status'; import { filterProviders } from 'routes/utils/providers'; import type { RootState } from 'store'; import type { FetchStatus } from 'store/common'; @@ -24,7 +24,6 @@ import { styles } from './component.styles'; interface OverallStatusOwnProps { clusterId?: string; isLastUpdated?: boolean; - isLastUpdatedStatus?: boolean; isStatusMsg?: boolean; providerId?: string; providerType: ProviderType; @@ -43,7 +42,6 @@ type OverallStatusProps = OverallStatusOwnProps; const OverallStatus: React.FC = ({ clusterId, isLastUpdated, - isLastUpdatedStatus, isStatusMsg, providerId, providerType, @@ -52,21 +50,15 @@ const OverallStatus: React.FC = ({ const { providers, providersError } = useMapToProps(); const intl = useIntl(); - if (!providers || providersError) { - return null; - } - - // 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) || - uuId === val.uuid - ); - const cloudProvider = providers?.data?.find(val => val.uuid === provider?.infrastructure?.uuid); + // Filter providers to skip an extra API request + const getFilteredProviders = () => { + return filterProviders(providers, providerType)?.data?.filter(data => data.status !== null); + }; - const getOverallStatus = (): { lastUpdated: string; msg: MessageDescriptor; status: StatusType } => { + const getOverallStatus = ( + provider, + cloudProvider + ): { lastUpdated: string; msg: MessageDescriptor; status: StatusType } => { let lastUpdated; let msg; let status; @@ -124,36 +116,111 @@ const OverallStatus: React.FC = ({ return { lastUpdated, msg, status }; }; - const overallStatus = getOverallStatus(); + const getAllStatus = () => { + let completeCount = 0; + let failedCount = 0; + let inProgressCount = 0; + let pausedCount = 0; + let pendingCount = 0; - if (isLastUpdated) { - return overallStatus.lastUpdated ? formatDate(overallStatus.lastUpdated) : null; - } - if (isLastUpdatedStatus) { + const overallProviderStatus = []; + const filteredProviders = getFilteredProviders(); + + filteredProviders.map(provider => { + const cloudProvider = providers?.data?.find(val => val.uuid === provider?.infrastructure?.uuid); + overallProviderStatus.push(getOverallStatus(provider, cloudProvider)); + }); + + overallProviderStatus.map(overallStatus => { + if (overallStatus.status === StatusType.failed) { + failedCount++; + } + if (overallStatus.status === StatusType.paused) { + pausedCount++; + } + if (overallStatus.status === StatusType.inProgress) { + inProgressCount++; + } + if (overallStatus.status === StatusType.pending) { + pendingCount++; + } + if (overallStatus.status === StatusType.complete) { + completeCount++; + } + }); return ( <> - {getOverallStatusIcon(overallStatus.status)} - - {overallStatus.lastUpdated - ? formatDate(overallStatus.lastUpdated) - : intl.formatMessage(messages.statusMsg, { value: overallStatus.status })} - + {completeCount > 0 && ( + <> + {completeCount} + {getOverallStatusIcon(StatusType.complete)} + + )} + {failedCount > 0 && ( + <> + {failedCount} + {getOverallStatusIcon(StatusType.failed)} + + )} + {inProgressCount > 0 && ( + <> + {inProgressCount} + {getOverallStatusIcon(StatusType.inProgress)} + + )} + {pausedCount > 0 && ( + <> + {pausedCount} + {getOverallStatusIcon(StatusType.paused)} + + )} + {pendingCount > 0 && ( + <> + {pendingCount} + {getOverallStatusIcon(StatusType.pending)} + + )} ); - } - if (overallStatus.msg && overallStatus.status) { - return ( - <> - {getOverallStatusIcon(overallStatus.status)} - - {isStatusMsg - ? intl.formatMessage(messages.statusMsg, { value: overallStatus.status }) - : intl.formatMessage(overallStatus.msg)} - - + }; + + const getStatus = () => { + const filteredProviders = getFilteredProviders(); + const provider = filteredProviders?.find( + 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); + const overallStatus = getOverallStatus(provider, cloudProvider); + + if (isLastUpdated) { + return overallStatus.lastUpdated ? formatDate(overallStatus.lastUpdated) : null; + } + if (overallStatus.msg && overallStatus.status) { + return ( + <> + {getOverallStatusIcon(overallStatus.status)} + + {isStatusMsg + ? intl.formatMessage(messages.statusMsg, { value: overallStatus.status }) + : intl.formatMessage(overallStatus.msg)} + + + ); + } + return null; + }; + + if (!providers || providersError) { + return null; + } + if (providerId || clusterId || uuId) { + return getStatus(); + } else { + return getAllStatus(); } - return null; }; const useMapToProps = (): OverallStatusStateProps => { diff --git a/src/routes/details/components/providerDetails/components/sourceLink.tsx b/src/routes/details/components/providerStatus/components/sourceLink.tsx similarity index 91% rename from src/routes/details/components/providerDetails/components/sourceLink.tsx rename to src/routes/details/components/providerStatus/components/sourceLink.tsx index e02c4a60a..2b97d1ece 100644 --- a/src/routes/details/components/providerDetails/components/sourceLink.tsx +++ b/src/routes/details/components/providerStatus/components/sourceLink.tsx @@ -2,7 +2,7 @@ import type { Provider } from 'api/providers'; import messages from 'locales/messages'; import React from 'react'; import { useIntl } from 'react-intl'; -import { normalize } from 'routes/details/components/providerDetails/utils/normailize'; +import { normalize } from 'routes/details/components/providerStatus/utils/normailize'; import { getReleasePath } from 'utils/paths'; import { styles } from './component.styles'; diff --git a/src/routes/details/components/providerStatus/index.ts b/src/routes/details/components/providerStatus/index.ts new file mode 100644 index 000000000..019d75fc8 --- /dev/null +++ b/src/routes/details/components/providerStatus/index.ts @@ -0,0 +1,3 @@ +export { ProviderBreakdownModal } from './providerBreakdownModal'; +export { ProviderDetailsModal } from './providerDetailsModal'; +export { ProviderStatus } from './providerStatus'; diff --git a/src/routes/details/components/providerDetails/providerDetailsContent.tsx b/src/routes/details/components/providerStatus/providerBreakdownContent.tsx similarity index 95% rename from src/routes/details/components/providerDetails/providerDetailsContent.tsx rename to src/routes/details/components/providerStatus/providerBreakdownContent.tsx index 33d1628db..98db75cdd 100644 --- a/src/routes/details/components/providerDetails/providerDetailsContent.tsx +++ b/src/routes/details/components/providerStatus/providerBreakdownContent.tsx @@ -16,7 +16,7 @@ import { providersQuery, providersSelectors } from 'store/providers'; import { CloudData } from './components/cloudData'; import { ClusterData } from './components/clusterData'; import { Finalization } from './components/finalization'; -import { styles } from './providerDetails.styles'; +import { styles } from './providerStatus.styles'; interface ProviderDetailsContentOwnProps { clusterId?: string; @@ -34,7 +34,7 @@ interface ProviderDetailsContentStateProps { type ProviderDetailsContentProps = ProviderDetailsContentOwnProps; -const ProviderDetailsContent: React.FC = ({ +const ProviderBreakdownContent: React.FC = ({ clusterId, providerId, providerType, @@ -106,4 +106,4 @@ const useMapToProps = (): ProviderDetailsContentStateProps => { }; }; -export { ProviderDetailsContent }; +export { ProviderBreakdownContent }; diff --git a/src/routes/details/components/providerDetails/providerDetailsModal.tsx b/src/routes/details/components/providerStatus/providerBreakdownModal.tsx similarity index 75% rename from src/routes/details/components/providerDetails/providerDetailsModal.tsx rename to src/routes/details/components/providerStatus/providerBreakdownModal.tsx index 0354e9359..46f997758 100644 --- a/src/routes/details/components/providerDetails/providerDetailsModal.tsx +++ b/src/routes/details/components/providerStatus/providerBreakdownModal.tsx @@ -6,12 +6,11 @@ import React, { useState } from 'react'; import { useIntl } from 'react-intl'; import { OverallStatus } from './components/overallStatus'; -import { styles } from './providerDetails.styles'; -import { ProviderDetailsContent } from './providerDetailsContent'; +import { ProviderBreakdownContent } from './providerBreakdownContent'; +import { styles } from './providerStatus.styles'; interface ProviderDetailsModalOwnProps { clusterId?: string; - isLastUpdatedStatus?: boolean; isOverallStatus?: boolean; providerId?: string; providerType: ProviderType; @@ -20,10 +19,9 @@ interface ProviderDetailsModalOwnProps { type ProviderDetailsModalProps = ProviderDetailsModalOwnProps; -const ProviderDetailsModal: React.FC = ({ +const ProviderBreakdownModal: React.FC = ({ clusterId, - isOverallStatus = true, - isLastUpdatedStatus, + isOverallStatus, providerId, providerType, uuId, @@ -36,7 +34,7 @@ const ProviderDetailsModal: React.FC = ({ }; const handleOnClick = () => { - setIsOpen(!isOpen); + setIsOpen(true); }; // PatternFly modal appends to document.body, which is outside the scoped "costManagement" dom tree. @@ -45,13 +43,7 @@ const ProviderDetailsModal: React.FC = ({ return ( <> {isOverallStatus && ( - + )} + + + ) : ( + + ); +}; + +export { ProviderDetailsContent }; diff --git a/src/routes/details/components/providerStatus/providerDetailsModal.tsx b/src/routes/details/components/providerStatus/providerDetailsModal.tsx new file mode 100644 index 000000000..024604d2f --- /dev/null +++ b/src/routes/details/components/providerStatus/providerDetailsModal.tsx @@ -0,0 +1,67 @@ +import { Button, ButtonVariant } from '@patternfly/react-core'; +import { Modal, ModalBody, ModalHeader, ModalVariant } from '@patternfly/react-core/next'; +import type { ProviderType } from 'api/providers'; +import messages from 'locales/messages'; +import React, { useState } from 'react'; +import { useIntl } from 'react-intl'; + +import { OverallStatus } from './components/overallStatus'; +import { ProviderDetailsContent } from './providerDetailsContent'; +import { styles } from './providerStatus.styles'; + +interface ProviderDetailsModalOwnProps { + providerType: ProviderType; +} + +type ProviderDetailsModalProps = ProviderDetailsModalOwnProps; + +const ProviderDetailsModal: React.FC = ({ providerType }: ProviderDetailsModalProps) => { + const intl = useIntl(); + const [isOpen, setIsOpen] = useState(false); + const [title, setTitle] = useState(messages.integrationsStatus); + const [variant, setVariant] = useState(ModalVariant.medium); + + const handleOnClose = () => { + setIsOpen(false); + }; + + const handleOnClick = () => { + setVariant(ModalVariant.medium); + setIsOpen(true); + }; + + const handleOnBackClick = () => { + setVariant(ModalVariant.medium); + setTitle(messages.integrationsStatus); + }; + + const handleOnDetailsClick = () => { + setVariant(ModalVariant.small); + setTitle(messages.integrationsDetails); + }; + + // PatternFly modal appends to document.body, which is outside the scoped "costManagement" dom tree. + // Use className="costManagement" to override PatternFly styles or append the modal to an element within the tree + + return ( + <> + {intl.formatMessage(messages.integrationsStatus)} + + + + + + + + + + ); +}; + +export { ProviderDetailsModal }; diff --git a/src/routes/details/components/providerDetails/providerDetails.styles.ts b/src/routes/details/components/providerStatus/providerStatus.styles.ts similarity index 51% rename from src/routes/details/components/providerDetails/providerDetails.styles.ts rename to src/routes/details/components/providerStatus/providerStatus.styles.ts index 944909be1..0c8be632b 100644 --- a/src/routes/details/components/providerDetails/providerDetails.styles.ts +++ b/src/routes/details/components/providerStatus/providerStatus.styles.ts @@ -1,17 +1,21 @@ import global_BackgroundColor_light_100 from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100'; +import global_FontSize_sm from '@patternfly/react-tokens/dist/js/global_FontSize_sm'; import global_FontSize_xs from '@patternfly/react-tokens/dist/js/global_FontSize_xs'; -import global_spacer_xl from '@patternfly/react-tokens/dist/js/global_spacer_xl'; import type React from 'react'; export const styles = { + backButton: { + paddingBottom: global_FontSize_sm.var, + paddingLeft: 0, + paddingTop: 0, + }, dataDetailsButton: { - fontSize: global_FontSize_xs.value, + fontSize: global_FontSize_xs.var, }, loading: { - backgroundColor: global_BackgroundColor_light_100.value, + backgroundColor: global_BackgroundColor_light_100.var, }, - detailsTable: { - marginBottom: global_spacer_xl.value, - marginTop: global_spacer_xl.value, + statusLabel: { + marginRight: global_FontSize_xs.var, }, } as { [className: string]: React.CSSProperties }; diff --git a/src/routes/details/components/providerDetails/providerDetails.tsx b/src/routes/details/components/providerStatus/providerStatus.tsx similarity index 75% rename from src/routes/details/components/providerDetails/providerDetails.tsx rename to src/routes/details/components/providerStatus/providerStatus.tsx index f191acd4b..2942d2edf 100644 --- a/src/routes/details/components/providerDetails/providerDetails.tsx +++ b/src/routes/details/components/providerStatus/providerStatus.tsx @@ -1,4 +1,3 @@ -import { Bullseye } from '@patternfly/react-core'; import type { Providers } from 'api/providers'; import { ProviderType } from 'api/providers'; import { getProvidersQuery } from 'api/queries/providersQuery'; @@ -14,28 +13,29 @@ import type { RootState } from 'store'; import { FetchStatus } from 'store/common'; import { providersQuery, providersSelectors } from 'store/providers'; -import { styles } from './providerDetails.styles'; -import { ProviderDetailsTable } from './providerDetailsTable'; +import { styles } from './providerStatus.styles'; +import { ProviderTable } from './providerTable'; -interface ProviderDetailsOwnProps { +interface ProviderStatusOwnProps { + onClick?: (providerId: string) => void; providerType: ProviderType; } -interface ProviderDetailsStateProps { +interface ProviderStatusStateProps { providers: Providers; providersError: AxiosError; providersFetchStatus: FetchStatus; providersQueryString: string; } -type ProviderDetailsProps = ProviderDetailsOwnProps; +type ProviderStatusProps = ProviderStatusOwnProps; -const ProviderDetails: React.FC = ({ providerType }: ProviderDetailsProps) => { +const ProviderStatus: React.FC = ({ onClick, providerType }: ProviderStatusProps) => { const intl = useIntl(); const { providers, providersError, providersFetchStatus } = useMapToProps(); - const title = intl.formatMessage(messages.providerDetails); + const title = intl.formatMessage(messages.integrationsDetails); if (providersError) { return ; @@ -55,14 +55,10 @@ const ProviderDetails: React.FC = ({ providerType }: Provi return; } - return ( - - - - ); + return ; }; -const useMapToProps = (): ProviderDetailsStateProps => { +const useMapToProps = (): ProviderStatusStateProps => { // PermissionsWrapper has already made an API request const providersQueryString = getProvidersQuery(providersQuery); const providers = useSelector((state: RootState) => @@ -83,4 +79,4 @@ const useMapToProps = (): ProviderDetailsStateProps => { }; }; -export { ProviderDetails }; +export { ProviderStatus }; diff --git a/src/routes/details/components/providerDetails/providerDetailsTable.tsx b/src/routes/details/components/providerStatus/providerTable.tsx similarity index 65% rename from src/routes/details/components/providerDetails/providerDetailsTable.tsx rename to src/routes/details/components/providerStatus/providerTable.tsx index e4e2188ee..ace42feda 100644 --- a/src/routes/details/components/providerDetails/providerDetailsTable.tsx +++ b/src/routes/details/components/providerStatus/providerTable.tsx @@ -1,3 +1,4 @@ +import { Button, ButtonVariant } from '@patternfly/react-core'; import type { Provider, ProviderType } from 'api/providers'; import messages from 'locales/messages'; import React, { useEffect, useState } from 'react'; @@ -6,16 +7,19 @@ import { DataTable } from 'routes/components/dataTable'; import { OverallStatus } from './components/overallStatus'; import { SourceLink } from './components/sourceLink'; -import { ProviderDetailsModal } from './providerDetailsModal'; +import { ProviderBreakdownModal } from './providerBreakdownModal'; +import { styles } from './providerStatus.styles'; -interface ProviderDetailsTableOwnProps { +interface ProviderTableOwnProps { + onClick?: (id: string) => void; providers?: Provider[]; providerType?: ProviderType; + showContent?: boolean; } -type ProviderDetailsTableProps = ProviderDetailsTableOwnProps; +type ProviderTableProps = ProviderTableOwnProps; -const ProviderDetailsTable: React.FC = ({ providers, providerType }) => { +const ProviderTable: React.FC = ({ onClick, providers, providerType }) => { const intl = useIntl(); const [columns, setColumns] = useState([]); const [rows, setRows] = useState([]); @@ -49,7 +53,15 @@ const ProviderDetailsTable: React.FC = ({ providers, { value: }, { value: }, { value: }, - { value: }, + { + value: onClick ? ( + + ) : ( + + ), + }, ], item, }); @@ -66,4 +78,4 @@ const ProviderDetailsTable: React.FC = ({ providers, return rows.length ? : null; }; -export { ProviderDetailsTable }; +export { ProviderTable }; diff --git a/src/routes/details/components/providerDetails/utils/format.ts b/src/routes/details/components/providerStatus/utils/format.ts similarity index 100% rename from src/routes/details/components/providerDetails/utils/format.ts rename to src/routes/details/components/providerStatus/utils/format.ts diff --git a/src/routes/details/components/providerDetails/utils/icon.tsx b/src/routes/details/components/providerStatus/utils/icon.tsx similarity index 100% rename from src/routes/details/components/providerDetails/utils/icon.tsx rename to src/routes/details/components/providerStatus/utils/icon.tsx diff --git a/src/routes/details/components/providerDetails/utils/normailize.ts b/src/routes/details/components/providerStatus/utils/normailize.ts similarity index 100% rename from src/routes/details/components/providerDetails/utils/normailize.ts rename to src/routes/details/components/providerStatus/utils/normailize.ts diff --git a/src/routes/details/components/providerDetails/utils/status.ts b/src/routes/details/components/providerStatus/utils/status.ts similarity index 97% rename from src/routes/details/components/providerDetails/utils/status.ts rename to src/routes/details/components/providerStatus/utils/status.ts index 7da4f4a90..68c6fdd79 100644 --- a/src/routes/details/components/providerDetails/utils/status.ts +++ b/src/routes/details/components/providerStatus/utils/status.ts @@ -2,7 +2,7 @@ import type { Provider } from 'api/providers'; import { ProviderType } from 'api/providers'; import messages from 'locales/messages'; import type { MessageDescriptor } from 'react-intl'; -import { normalize } from 'routes/details/components/providerDetails/utils/normailize'; +import { normalize } from 'routes/details/components/providerStatus/utils/normailize'; export const enum StatusType { complete = 'complete', diff --git a/src/routes/details/components/providerDetails/utils/variant.ts b/src/routes/details/components/providerStatus/utils/variant.ts similarity index 100% rename from src/routes/details/components/providerDetails/utils/variant.ts rename to src/routes/details/components/providerStatus/utils/variant.ts diff --git a/src/routes/details/gcpDetails/detailsHeader.styles.ts b/src/routes/details/gcpDetails/detailsHeader.styles.ts index d55ff51cc..b4c026fd7 100644 --- a/src/routes/details/gcpDetails/detailsHeader.styles.ts +++ b/src/routes/details/gcpDetails/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, }, diff --git a/src/routes/details/gcpDetails/detailsHeader.tsx b/src/routes/details/gcpDetails/detailsHeader.tsx index dbfd4b42b..8c5056494 100644 --- a/src/routes/details/gcpDetails/detailsHeader.tsx +++ b/src/routes/details/gcpDetails/detailsHeader.tsx @@ -15,6 +15,7 @@ import { connect } from 'react-redux'; 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 { ComputedGcpReportItemsParams } from 'routes/utils/computedReport/getComputedGcpReportItems'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems'; import { DateRangeType } from 'routes/utils/dateRange'; @@ -43,7 +44,8 @@ interface DetailsHeaderOwnProps { } interface DetailsHeaderStateProps { - isDetailsDateRangeToggleEnabled: boolean; + isAccountInfoDetailsToggleEnabled?: boolean; + isDetailsDateRangeToggleEnabled?: boolean; isExportsToggleEnabled?: boolean; providers: Providers; providersError: AxiosError; @@ -97,6 +99,7 @@ class DetailsHeaderBase extends React.Component { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -127,19 +130,24 @@ class DetailsHeaderBase extends React.Component { + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} - -
- -
+ + {isDetailsDateRangeToggleEnabled && ( @@ -186,6 +194,7 @@ const mapStateToProps = createMapStateToProps { - const { - breadcrumbPath, - groupBy, - groupByTagKey, - intl, - isAccountInfoDetailsToggleEnabled, - isAllSelected, - query, - report, - router, - selectedItems, - } = this.props; + const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } = + this.props; if (!report) { return; } - const isGroupByAccount = groupBy === 'account'; - const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -131,10 +116,6 @@ class DetailsTableBase extends React.Component ), }, - { - hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, diff --git a/src/routes/details/gcpDetails/gcpDetails.tsx b/src/routes/details/gcpDetails/gcpDetails.tsx index b14e10925..47d558765 100644 --- a/src/routes/details/gcpDetails/gcpDetails.tsx +++ b/src/routes/details/gcpDetails/gcpDetails.tsx @@ -18,7 +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 { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; @@ -52,7 +52,6 @@ import { styles } from './gcpDetails.styles'; interface GcpDetailsStateProps { currency?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -203,15 +202,7 @@ class GcpDetails extends React.Component { }; 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); const groupByTagKey = getGroupByTagKey(query); @@ -223,7 +214,6 @@ 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} @@ -372,7 +362,7 @@ class GcpDetails extends React.Component { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -479,7 +469,6 @@ const mapStateToProps = createMapStateToProps { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -127,19 +130,24 @@ class DetailsHeaderBase extends React.Component { + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} - -
- -
+ + {isDetailsDateRangeToggleEnabled && ( @@ -186,6 +194,7 @@ const mapStateToProps = createMapStateToProps { - const { - breadcrumbPath, - groupBy, - groupByTagKey, - intl, - isAccountInfoDetailsToggleEnabled, - isAllSelected, - query, - report, - router, - selectedItems, - } = this.props; + const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } = + this.props; if (!report) { return; } - const isGroupByAccount = groupBy === 'account'; - const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -131,10 +116,6 @@ class DetailsTableBase extends React.Component ), }, - { - hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, diff --git a/src/routes/details/ibmDetails/ibmDetails.tsx b/src/routes/details/ibmDetails/ibmDetails.tsx index fbfdb3c2e..2c3e319ae 100644 --- a/src/routes/details/ibmDetails/ibmDetails.tsx +++ b/src/routes/details/ibmDetails/ibmDetails.tsx @@ -18,7 +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 { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedIbmReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; @@ -53,7 +53,6 @@ import { styles } from './ibmDetails.styles'; interface IbmDetailsStateProps { currency?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -204,15 +203,7 @@ class IbmDetails extends React.Component { }; 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); @@ -225,7 +216,6 @@ 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} @@ -374,7 +364,7 @@ class IbmDetails extends React.Component { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -481,7 +471,6 @@ const mapStateToProps = createMapStateToProps { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -126,19 +129,24 @@ class DetailsHeaderBase extends React.Component { + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} - -
- -
+ + {isDetailsDateRangeToggleEnabled && ( @@ -185,6 +193,7 @@ const mapStateToProps = createMapStateToProps { - const { - breadcrumbPath, - groupBy, - groupByTagKey, - intl, - isAccountInfoDetailsToggleEnabled, - isAllSelected, - query, - report, - router, - selectedItems, - } = this.props; + const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } = + this.props; if (!report) { return; } - const isGroupByPayerTenantId = groupBy === 'payer_tenant_id'; - const rows = []; const computedItems = getUnsortedComputedReportItems({ report, @@ -131,10 +116,6 @@ class DetailsTableBase extends React.Component ), }, - { - hidden: !(isGroupByPayerTenantId && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value: monthOverMonth }, { value: cost, style: styles.managedColumn }, { value: actions }, diff --git a/src/routes/details/ociDetails/ociDetails.tsx b/src/routes/details/ociDetails/ociDetails.tsx index 402134f38..7fe9de029 100644 --- a/src/routes/details/ociDetails/ociDetails.tsx +++ b/src/routes/details/ociDetails/ociDetails.tsx @@ -18,7 +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 { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOciReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; @@ -52,7 +52,6 @@ import { styles } from './ociDetails.styles'; interface OciDetailsStateProps { currency?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -203,15 +202,7 @@ class OciDetails extends React.Component { }; 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); @@ -224,7 +215,6 @@ 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} @@ -373,7 +363,7 @@ class OciDetails extends React.Component { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -480,7 +470,6 @@ const mapStateToProps = createMapStateToProps : undefined, dataDetailsComponent: groupBy === 'cluster' ? ( - + ) : undefined, costDistribution, costOverviewComponent: ( diff --git a/src/routes/details/ocpDetails/detailsHeader.styles.ts b/src/routes/details/ocpDetails/detailsHeader.styles.ts index caa2a81fe..1f2fb619b 100644 --- a/src/routes/details/ocpDetails/detailsHeader.styles.ts +++ b/src/routes/details/ocpDetails/detailsHeader.styles.ts @@ -36,6 +36,9 @@ export const styles = { infoTitle: { fontWeight: 'bold', }, + status: { + marginBottom: global_spacer_sm.var, + }, title: { paddingBottom: global_spacer_sm.var, }, diff --git a/src/routes/details/ocpDetails/detailsHeader.tsx b/src/routes/details/ocpDetails/detailsHeader.tsx index ca043529b..49ec67ab6 100644 --- a/src/routes/details/ocpDetails/detailsHeader.tsx +++ b/src/routes/details/ocpDetails/detailsHeader.tsx @@ -18,6 +18,7 @@ import { Currency } from 'routes/components/currency'; import { DateRange } from 'routes/components/dateRange'; import { GroupBy } from 'routes/components/groupBy'; import { EmptyValueState } from 'routes/components/state/emptyValueState'; +import { ProviderDetailsModal } from 'routes/details/components/providerStatus'; import type { ComputedOcpReportItemsParams } from 'routes/utils/computedReport/getComputedOcpReportItems'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOcpReportItems'; import { DateRangeType } from 'routes/utils/dateRange'; @@ -49,7 +50,8 @@ interface DetailsHeaderOwnProps { } interface DetailsHeaderStateProps { - isDetailsDateRangeToggleEnabled: boolean; + isAccountInfoDetailsToggleEnabled?: boolean; + isDetailsDateRangeToggleEnabled?: boolean; isExportsToggleEnabled?: boolean; providers: Providers; providersError: AxiosError; @@ -103,6 +105,7 @@ class DetailsHeaderBase extends React.Component - - -
- -
+ {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} + + + {showCostDistribution && ( @@ -226,6 +234,7 @@ const mapStateToProps = createMapStateToProps; - isAccountInfoDetailsToggleEnabled?: boolean; isAllSelected?: boolean; isLoading?: boolean; onSelect(items: ComputedReportItem[], isSelected: boolean); @@ -103,7 +100,6 @@ class DetailsTableBase extends React.Component({ @@ -182,10 +177,6 @@ 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 bfccb8d9a..276b6e5f0 100644 --- a/src/routes/details/ocpDetails/ocpDetails.tsx +++ b/src/routes/details/ocpDetails/ocpDetails.tsx @@ -22,7 +22,7 @@ import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; import type { ColumnManagementModalOption } from 'routes/details/components/columnManagement'; import { ColumnManagementModal, initHiddenColumns } from 'routes/details/components/columnManagement'; -import { ProviderDetails } from 'routes/details/components/providerDetails'; +import { ProviderStatus } from 'routes/details/components/providerStatus'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOcpReportItems'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; @@ -59,7 +59,6 @@ export interface OcpDetailsStateProps { costDistribution?: string; currency?: string; currentDateRangeType?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -247,16 +246,8 @@ class OcpDetails extends React.Component { }; private getTable = () => { - const { - costDistribution, - isAccountInfoDetailsToggleEnabled, - query, - report, - reportFetchStatus, - reportQueryString, - router, - timeScopeValue, - } = this.props; + const { costDistribution, query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = + this.props; const { hiddenColumns, isAllSelected, selectedItems } = this.state; const groupById = getIdKeyForGroupBy(query.group_by); @@ -271,7 +262,6 @@ 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} @@ -448,7 +438,7 @@ class OcpDetails extends React.Component { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -566,7 +556,6 @@ const mapStateToProps = createMapStateToProps { currency, groupBy, intl, + isAccountInfoDetailsToggleEnabled, isCurrentMonthData, isDetailsDateRangeToggleEnabled, isExportsToggleEnabled, @@ -150,19 +153,24 @@ class DetailsHeaderBase extends React.Component { + {isAccountInfoDetailsToggleEnabled && ( + + + + + + )} - -
- -
+ + {isDetailsDateRangeToggleEnabled && ( @@ -214,6 +222,7 @@ const mapStateToProps = createMapStateToProps; - isAccountInfoDetailsToggleEnabled?: boolean; isAllSelected?: boolean; isLoading?: boolean; onSelect(items: ComputedReportItem[], isSelected: boolean); @@ -92,7 +89,6 @@ class DetailsTableBase extends React.Component ), }, - { - hidden: !(isGroupByCluster && isAccountInfoDetailsToggleEnabled), - value: ( - - ), - }, { value:
{monthOverMonth}
, id: DetailsTableColumnIds.monthOverMonth }, { value:
{InfrastructureCost}
, diff --git a/src/routes/details/rhelDetails/rhelDetails.tsx b/src/routes/details/rhelDetails/rhelDetails.tsx index dd1916e17..952840e91 100644 --- a/src/routes/details/rhelDetails/rhelDetails.tsx +++ b/src/routes/details/rhelDetails/rhelDetails.tsx @@ -21,7 +21,7 @@ import { NoProviders } from 'routes/components/page/noProviders'; import { NotAvailable } from 'routes/components/page/notAvailable'; import type { ColumnManagementModalOption } from 'routes/details/components/columnManagement'; import { ColumnManagementModal, initHiddenColumns } from 'routes/details/components/columnManagement'; -import { ProviderDetails } from 'routes/details/components/providerDetails'; +import { ProviderStatus } from 'routes/details/components/providerStatus'; import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems'; import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems'; import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedRhelReportItems'; @@ -55,7 +55,6 @@ import { styles } from './rhelDetails.styles'; interface RhelDetailsStateProps { currency?: string; - isAccountInfoDetailsToggleEnabled?: boolean; isAccountInfoEmptyStateToggleEnabled?: boolean; isCurrentMonthData?: boolean; isDetailsDateRangeToggleEnabled?: boolean; @@ -243,15 +242,7 @@ class RhelDetails extends React.Component { }; private getTable = () => { - const { - isAccountInfoDetailsToggleEnabled, - query, - report, - reportFetchStatus, - reportQueryString, - router, - timeScopeValue, - } = this.props; + const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props; const { hiddenColumns, isAllSelected, selectedItems } = this.state; const groupById = getIdKeyForGroupBy(query.group_by); @@ -264,7 +255,6 @@ class RhelDetails extends React.Component { groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById} groupByTagKey={groupByTagKey} hiddenColumns={hiddenColumns} - isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled} isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelect={this.handleonSelect} @@ -427,7 +417,7 @@ class RhelDetails extends React.Component { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } title={title} /> @@ -534,7 +524,6 @@ const mapStateToProps = createMapStateToProps { return ( : undefined + isAccountInfoEmptyStateToggleEnabled ? : undefined } /> );