Merge pull request #4219 from dlabrecq/COST-5922

Display the overhead cost selection in the VMs tab

Author: dlabrecq

src/routes/details/components/breakdown/breakdownBase.tsx

@@ -385,9 +385,9 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> {
           onCurrencySelect={() => handleOnCurrencySelect(query, router, router.location.state)}
           query={query}
           report={report}
-          showCostDistribution={showCostDistribution && !(optimizationsComponent && activeTabKey === 2)}
+          showCostDistribution={showCostDistribution && !(optimizationsComponent && activeTabKey === 3)}
           showCostType={showCostType}
-          showCurrency={!(optimizationsComponent && activeTabKey === 2)}
+          showCurrency={!(optimizationsComponent && activeTabKey === 3)}
           tabs={this.getTabs(availableTabs)}
           tagPathsType={tagPathsType}
           timeScopeValue={timeScopeValue}

src/routes/details/ocpBreakdown/ocpBreakdown.tsx

@@ -152,7 +152,7 @@ const mapStateToProps = createMapStateToProps<OcpBreakdownOwnProps, BreakdownSta
     tagPathsType: TagPathsType.ocp,
     timeScopeValue,
     title,
-    virtualizationComponent: <Virtualization currency={currency} />,
+    virtualizationComponent: <Virtualization costDistribution={costDistribution} currency={currency} />,
   };
   return test;
 });

src/routes/details/ocpBreakdown/virtualization/virtualization.tsx

@@ -39,6 +39,7 @@ import { VirtualizationTable, VirtualizationTableColumnIds } from './virtualizat
 import { VirtualizationToolbar } from './virtualizationToolbar';
 
 interface VirtualizationOwnProps {
+  costDistribution?: string;
   costType?: string;
   currency?: string;
 }
@@ -86,7 +87,7 @@ const defaultColumnOptions: ColumnManagementModalOption[] = [
 const reportType = ReportType.virtualization;
 const reportPathsType = ReportPathsType.ocp;
 
-const Virtualization: React.FC<VirtualizationProps> = ({ costType, currency }) => {
+const Virtualization: React.FC<VirtualizationProps> = ({ costDistribution, costType, currency }) => {
   const intl = useIntl();
 
   const [hiddenColumns, setHiddenColumns] = useState(initHiddenColumns(defaultColumnOptions));
@@ -192,6 +193,7 @@ const Virtualization: React.FC<VirtualizationProps> = ({ costType, currency }) =
   const getTable = () => {
     return (
       <VirtualizationTable
+        costDistribution={costDistribution}
         exclude={query.exclude}
         filterBy={query.filter_by}
         hideCluster={hasClusterFilter}

src/routes/details/ocpBreakdown/virtualization/virtualizationTable.tsx

@@ -6,6 +6,7 @@ import type { Report } from 'api/reports/report';
 import messages from 'locales/messages';
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { ComputedReportItemValueType } from 'routes/components/charts/common';
 import { DataTable } from 'routes/components/dataTable';
 import { styles } from 'routes/components/dataTable/dataTable.styles';
 import { NoVirtualizationState } from 'routes/components/page/noVirtualization/noVirtualizationState';
@@ -16,6 +17,7 @@ import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getC
 import { formatCurrency, formatUnits, unitsLookupKey } from 'utils/format';
 
 interface VirtualizationTableOwnProps {
+  costDistribution?: string;
   exclude?: any;
   filterBy?: any;
   hideCluster?: boolean;
@@ -43,6 +45,7 @@ export const VirtualizationTableColumnIds = {
 };
 
 const VirtualizationTable: React.FC<VirtualizationTableProps> = ({
+  costDistribution,
   exclude,
   filterBy,
   hideCluster,
@@ -119,7 +122,7 @@ const VirtualizationTable: React.FC<VirtualizationTableProps> = ({
         ...(computedItems.length && { isSortable: true }),
       },
       {
-        orderBy: 'cost',
+        orderBy: costDistribution === ComputedReportItemValueType.distributed ? 'distributed_cost' : 'cost',
         name: intl.formatMessage(messages.cost),
         style: styles.costColumn,
         ...(computedItems.length && { isSortable: true }),
@@ -212,8 +215,10 @@ const VirtualizationTable: React.FC<VirtualizationTableProps> = ({
   };
 
   const getTotalCost = (item: ComputedReportItem) => {
-    const value = item.cost?.total?.value || 0;
-    const units = item.cost?.total?.units || 'USD';
+    const reportItemValue = costDistribution ? costDistribution : ComputedReportItemValueType.total;
+    const hasTotal = item?.cost?.[reportItemValue];
+    const value = hasTotal ? item?.cost?.[reportItemValue]?.value : 0;
+    const units = hasTotal ? item?.cost?.[reportItemValue]?.units : 'USD';
     return formatCurrency(value, units);
   };
 
@@ -225,7 +230,7 @@ const VirtualizationTable: React.FC<VirtualizationTableProps> = ({
 
   useEffect(() => {
     initDatum();
-  }, [hiddenColumns, report, selectedItems]);
+  }, [costDistribution, hiddenColumns, report, selectedItems]);
 
   return (
     <DataTable