Refactored storage historical chart to be visible when grouped by cluster, node, and project

dlabrecq · dlabrecq · commit ff1b0badc827 · 2024-07-17T13:12:46.000-04:00
Fixed storage card title in OCP breakdown for isPlatformProject flag https://issues.redhat.com/browse/COST-4856
diff --git a/src/routes/details/components/costOverview/costOverviewBase.tsx b/src/routes/details/components/costOverview/costOverviewBase.tsx
@@ -59,7 +59,7 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
     const { groupBy, intl, report, title } = this.props;
 
     let showWidget = false;
-    for (const groupById of widget.cluster.showWidgetOnGroupBy) {
+    for (const groupById of widget.showWidgetOnGroupBy) {
       if (groupById === groupBy || (groupById === tagPrefix && groupBy && groupBy.indexOf(tagPrefix) !== -1)) {
         showWidget = true;
         break;
@@ -210,8 +210,8 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
     const { groupBy, intl } = this.props;
 
     let showWidget = false;
-    if (widget.pvc.showWidgetOnGroupBy) {
-      for (const groupById of widget.pvc.showWidgetOnGroupBy) {
+    if (widget.showWidgetOnGroupBy) {
+      for (const groupById of widget.showWidgetOnGroupBy) {
         if (groupById === groupBy) {
           showWidget = true;
           break;
@@ -242,20 +242,23 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
     const groupByCostCategory = getGroupByCostCategory(query);
     const groupByOrg = getGroupByOrgValue(query);
     const groupByTag = getGroupByTagKey(query);
+
     let showWidget = false;
+    let showPlatformCosts = false;
 
-    if (widget.reportSummary.showWidgetOnGroupBy) {
-      for (const groupById of widget.reportSummary.showWidgetOnGroupBy) {
+    if (widget.showWidgetOnGroupBy) {
+      for (const groupById of widget.showWidgetOnGroupBy) {
         if (groupById === groupBy || groupByCostCategory || groupByOrg || groupByTag) {
           showWidget = true;
           break;
         }
       }
     }
-    if (!showWidget && widget.reportSummary.showWidgetOnPlatformCategory) {
-      for (const categoryId of widget.reportSummary.showWidgetOnPlatformCategory) {
+    if (!showWidget && widget.showWidgetOnPlatformCategory) {
+      for (const categoryId of widget.showWidgetOnPlatformCategory) {
         if (isPlatformCosts && categoryId === platformCategoryKey) {
           showWidget = true;
+          showPlatformCosts = true;
           break;
         }
       }
@@ -267,7 +270,7 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
           costDistribution={!isVolumeWidget ? costDistribution : undefined}
           costType={!isVolumeWidget ? costType : undefined}
           currency={currency}
-          isPlatformCosts={isPlatformCosts}
+          isPlatformCosts={showPlatformCosts}
           reportGroupBy={widget.reportSummary.reportGroupBy}
           reportPathsType={widget.reportPathsType}
           reportType={widget.reportType}
@@ -285,8 +288,8 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
 
     let showWidget = false;
 
-    if (widget.volume.showWidgetOnGroupBy) {
-      for (const groupById of widget.volume.showWidgetOnGroupBy) {
+    if (widget.showWidgetOnGroupBy) {
+      for (const groupById of widget.showWidgetOnGroupBy) {
         if (groupById === groupBy || (groupById === tagPrefix && groupBy && groupBy.indexOf(tagPrefix) !== -1)) {
           showWidget = true;
           break;
diff --git a/src/routes/details/components/historicalData/historicalDataBase.tsx b/src/routes/details/components/historicalData/historicalDataBase.tsx
@@ -71,8 +71,8 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
     const { groupBy, intl } = this.props;
 
     let showWidget = false;
-    if (widget.network?.showWidgetOnGroupBy) {
-      for (const groupById of widget.network.showWidgetOnGroupBy) {
+    if (widget?.showWidgetOnGroupBy) {
+      for (const groupById of widget.showWidgetOnGroupBy) {
         if (groupById === groupBy) {
           showWidget = true;
           break;
@@ -102,28 +102,40 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
     return null;
   };
 
-  // Returns volume chart
+  // Returns storage summary
   private getVolumeChart = (widget: HistoricalDataWidget) => {
-    const { intl } = this.props;
+    const { groupBy, intl } = this.props;
 
-    return (
-      <Card>
-        <CardTitle>
-          <Title headingLevel="h2" size={TitleSizes.lg}>
-            {intl.formatMessage(messages.historicalChartTitle, {
-              value: this.getTitleKey(widget.reportPathsType, widget.reportType),
-            })}
-          </Title>
-        </CardTitle>
-        <CardBody>
-          <HistoricalDataVolumeChart
-            chartName={widget.chartName}
-            reportPathsType={widget.reportPathsType}
-            reportType={widget.reportType}
-          />
-        </CardBody>
-      </Card>
-    );
+    let showWidget = false;
+    if (widget?.showWidgetOnGroupBy) {
+      for (const groupById of widget.showWidgetOnGroupBy) {
+        if (groupById === groupBy) {
+          showWidget = true;
+          break;
+        }
+      }
+    }
+    if (showWidget) {
+      return (
+        <Card>
+          <CardTitle>
+            <Title headingLevel="h2" size={TitleSizes.lg}>
+              {intl.formatMessage(messages.historicalChartTitle, {
+                value: this.getTitleKey(widget.reportPathsType, widget.reportType),
+              })}
+            </Title>
+          </CardTitle>
+          <CardBody>
+            <HistoricalDataVolumeChart
+              chartName={widget.chartName}
+              reportPathsType={widget.reportPathsType}
+              reportType={widget.reportType}
+            />
+          </CardBody>
+        </Card>
+      );
+    }
+    return null;
   };
 
   // Returns trend chart
diff --git a/src/store/breakdown/costOverview/awsCostOverview/awsCostOverviewWidgets.ts b/src/store/breakdown/costOverview/awsCostOverview/awsCostOverviewWidgets.ts
@@ -19,31 +19,31 @@ export const accountSummaryWidget: AwsCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'account',
-    showWidgetOnGroupBy: ['region', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.aws,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['region', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const regionSummaryWidget: AwsCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'region',
-    showWidgetOnGroupBy: ['account', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.aws,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['account', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const serviceSummaryWidget: AwsCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'service',
-    showWidgetOnGroupBy: ['region', 'account', tagPrefix],
   },
   reportPathsType: ReportPathsType.aws,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['region', 'account', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
diff --git a/src/store/breakdown/costOverview/azureCostOverview/azureCostOverviewWidgets.ts b/src/store/breakdown/costOverview/azureCostOverview/azureCostOverviewWidgets.ts
@@ -18,31 +18,31 @@ export const accountSummaryWidget: AzureCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'subscription_guid',
-    showWidgetOnGroupBy: ['resource_location', 'service_name', tagPrefix],
   },
   reportPathsType: ReportPathsType.azure,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['resource_location', 'service_name', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const regionSummaryWidget: AzureCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'resource_location',
-    showWidgetOnGroupBy: ['subscription_guid', 'service_name', tagPrefix],
   },
   reportPathsType: ReportPathsType.azure,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['subscription_guid', 'service_name', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const serviceSummaryWidget: AzureCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'service_name',
-    showWidgetOnGroupBy: ['resource_location', 'subscription_guid', tagPrefix],
   },
   reportPathsType: ReportPathsType.azure,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['resource_location', 'subscription_guid', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
diff --git a/src/store/breakdown/costOverview/common/costOverviewCommon.ts b/src/store/breakdown/costOverview/common/costOverviewCommon.ts
@@ -17,24 +17,14 @@ export interface CostOverviewWidget {
   id: number;
   cluster?: {
     reportGroupBy: string; // Report group_by
-    showWidgetOnGroupBy?: string[]; // Show cluster card when group_by is matched
-  };
-  pvc?: {
-    showWidgetOnGroupBy?: string[]; // Show pvc chart when group_by is matched
-  };
-  usage?: {
-    showCapacityOnGroupBy?: string[]; // Show capacity when group_by is matched
   };
   reportSummary?: {
     reportGroupBy: string; // Report group_by
-    showWidgetOnPlatformCategory?: string[];
-    showWidgetOnGroupBy?: string[]; // Show summary card when group_by is matched
     usePlaceholder?: boolean; // Use placeholder to keep card placement when widget is not shown
   };
   reportPathsType: ReportPathsType; // Report URL path
   reportType: ReportType; // Report type; cost, storage, etc.
+  showWidgetOnGroupBy?: string[]; // Show widget when group_by is matched
+  showWidgetOnPlatformCategory?: string[]; // Show widget when platform category is matched
   type: CostOverviewWidgetType;
-  volume?: {
-    showWidgetOnGroupBy?: string[]; // Show volume usage chart when group_by is matched
-  };
 }
diff --git a/src/store/breakdown/costOverview/gcpCostOverview/gcpCostOverviewWidgets.ts b/src/store/breakdown/costOverview/gcpCostOverview/gcpCostOverviewWidgets.ts
@@ -18,42 +18,42 @@ export const accountSummaryWidget: GcpCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'account',
-    showWidgetOnGroupBy: ['gcp_project', 'region', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.gcp,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['gcp_project', 'region', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const projectSummaryWidget: GcpCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'gcp_project',
-    showWidgetOnGroupBy: ['account', 'region', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.gcp,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['account', 'region', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const regionSummaryWidget: GcpCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'region',
-    showWidgetOnGroupBy: ['account', 'gcp_project', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.gcp,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['account', 'gcp_project', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const serviceSummaryWidget: GcpCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'service',
-    showWidgetOnGroupBy: ['gcp_project', 'region', 'account', tagPrefix],
   },
   reportPathsType: ReportPathsType.gcp,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['gcp_project', 'region', 'account', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
diff --git a/src/store/breakdown/costOverview/ibmCostOverview/ibmCostOverviewWidgets.ts b/src/store/breakdown/costOverview/ibmCostOverview/ibmCostOverviewWidgets.ts
@@ -19,42 +19,42 @@ export const accountSummaryWidget: IbmCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'account',
-    showWidgetOnGroupBy: ['project', 'region', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.ibm,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['project', 'region', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const projectSummaryWidget: IbmCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'project',
-    showWidgetOnGroupBy: ['account', 'region', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.ibm,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['account', 'region', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const regionSummaryWidget: IbmCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'region',
-    showWidgetOnGroupBy: ['account', 'project', 'service', tagPrefix],
   },
   reportPathsType: ReportPathsType.ibm,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['account', 'project', 'service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const serviceSummaryWidget: IbmCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'service',
-    showWidgetOnGroupBy: ['project', 'region', 'account', tagPrefix],
   },
   reportPathsType: ReportPathsType.ibm,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['project', 'region', 'account', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
diff --git a/src/store/breakdown/costOverview/ociCostOverview/ociCostOverviewWidgets.ts b/src/store/breakdown/costOverview/ociCostOverview/ociCostOverviewWidgets.ts
@@ -18,31 +18,31 @@ export const accountSummaryWidget: OciCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'payer_tenant_id',
-    showWidgetOnGroupBy: ['region', 'product_service', tagPrefix],
   },
   reportPathsType: ReportPathsType.oci,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['region', 'product_service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const regionSummaryWidget: OciCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'region',
-    showWidgetOnGroupBy: ['payer_tenant_id', 'product_service', tagPrefix],
   },
   reportPathsType: ReportPathsType.oci,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['payer_tenant_id', 'product_service', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
 
 export const serviceSummaryWidget: OciCostOverviewWidget = {
   id: getId(),
   reportSummary: {
     reportGroupBy: 'product_service',
-    showWidgetOnGroupBy: ['region', 'payer_tenant_id', tagPrefix],
   },
   reportPathsType: ReportPathsType.oci,
   reportType: ReportType.cost,
+  showWidgetOnGroupBy: ['region', 'payer_tenant_id', tagPrefix],
   type: CostOverviewWidgetType.reportSummary,
 };
diff --git a/src/store/breakdown/costOverview/ocpCostOverview/ocpCostOverviewWidgets.ts b/src/store/breakdown/costOverview/ocpCostOverview/ocpCostOverviewWidgets.ts
diff --git a/src/store/breakdown/costOverview/rhelCostOverview/rhelCostOverviewWidgets.ts b/src/store/breakdown/costOverview/rhelCostOverview/rhelCostOverviewWidgets.ts
diff --git a/src/store/breakdown/historicalData/common/historicalDataCommon.ts b/src/store/breakdown/historicalData/common/historicalDataCommon.ts
diff --git a/src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataWidgets.ts b/src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataWidgets.ts
