Merge pull request #3828 from dlabrecq/network

Show network historical chart for cluster and node only
project-koku · Apr 27, 2024 · a46e2c3 · a46e2c3
2 parents 9083c0f + 43f7278
commit a46e2c3
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 16 deletions.
diff --git a/locales/data.json b/locales/data.json
@@ -774,6 +774,74 @@
       }
     ],
     "chartCostTooltip": [
+      {
+        "type": 0,
+        "value": "Cost ("
+      },
+      {
+        "type": 1,
+        "value": "month"
+      },
+      {
+        "type": 0,
+        "value": ")"
+      }
+    ],
+    "chartDataInLabel": [
+      {
+        "type": 0,
+        "value": "Data in ("
+      },
+      {
+        "type": 1,
+        "value": "dateRange"
+      },
+      {
+        "type": 0,
+        "value": ")"
+      }
+    ],
+    "chartDataInLabelNoData": [
+      {
+        "type": 0,
+        "value": "Data in (no data)"
+      }
+    ],
+    "chartDataInTooltip": [
+      {
+        "type": 0,
+        "value": "Data in ("
+      },
+      {
+        "type": 1,
+        "value": "month"
+      },
+      {
+        "type": 0,
+        "value": ")"
+      }
+    ],
+    "chartDataOutLabel": [
+      {
+        "type": 0,
+        "value": "Data out ("
+      },
+      {
+        "type": 1,
+        "value": "dateRange"
+      },
+      {
+        "type": 0,
+        "value": ")"
+      }
+    ],
+    "chartDataOutLabelNoData": [
+      {
+        "type": 0,
+        "value": "Data out (no data)"
+      }
+    ],
+    "chartDataOutTooltip": [
       {
         "type": 0,
         "value": "Data out ("

diff --git a/locales/translations.json b/locales/translations.json
@@ -40,7 +40,13 @@
   "chartCostForecastTooltip": "Cost forecast ({month})",
   "chartCostLabel": "Cost ({dateRange})",
   "chartCostLabelNoData": "Cost (no data)",
-  "chartCostTooltip": "Data out ({month})",
+  "chartCostTooltip": "Cost ({month})",
+  "chartDataInLabel": "Data in ({dateRange})",
+  "chartDataInLabelNoData": "Data in (no data)",
+  "chartDataInTooltip": "Data in ({month})",
+  "chartDataOutLabel": "Data out ({dateRange})",
+  "chartDataOutLabelNoData": "Data out (no data)",
+  "chartDataOutTooltip": "Data out ({month})",
   "chartDayOfTheMonth": "Day {day}",
   "chartLimitLabel": "Limit ({dateRange})",
   "chartLimitLabelNoData": "Limit (no data)",

diff --git a/src/api/reports/ocpReports.ts b/src/api/reports/ocpReports.ts
@@ -61,7 +61,7 @@ export const ReportTypePaths: Partial<Record<ReportType, string>> = {
   [ReportType.cost]: 'reports/openshift/costs/',
   [ReportType.cpu]: 'reports/openshift/compute/',
   [ReportType.memory]: 'reports/openshift/memory/',
-  [ReportType.network]: 'reports/openshift/volumes/', // TBD: Use "network" when API is available
+  [ReportType.network]: 'reports/openshift/network/',
   [ReportType.volume]: 'reports/openshift/volumes/',
 };
 

diff --git a/src/locales/messages.ts b/src/locales/messages.ts
@@ -258,32 +258,32 @@ export default defineMessages({
   chartDataInLabel: {
     defaultMessage: 'Data in ({dateRange})',
     description: 'Data in ({dateRange})',
-    id: 'chartCostTooltip',
+    id: 'chartDataInLabel',
   },
   chartDataInLabelNoData: {
     defaultMessage: 'Data in (no data)',
     description: 'Data in (no data)',
-    id: 'chartCostTooltip',
+    id: 'chartDataInLabelNoData',
   },
   chartDataInTooltip: {
     defaultMessage: 'Data in ({month})',
     description: 'Data in ({month})',
-    id: 'chartCostTooltip',
+    id: 'chartDataInTooltip',
   },
   chartDataOutLabel: {
     defaultMessage: 'Data out ({dateRange})',
     description: 'Data out ({dateRange})',
-    id: 'chartCostTooltip',
+    id: 'chartDataOutLabel',
   },
   chartDataOutLabelNoData: {
     defaultMessage: 'Data out (no data)',
     description: 'Data out (no data)',
-    id: 'chartCostTooltip',
+    id: 'chartDataOutLabelNoData',
   },
   chartDataOutTooltip: {
     defaultMessage: 'Data out ({month})',
     description: 'Data out ({month})',
-    id: 'chartCostTooltip',
+    id: 'chartDataOutTooltip',
   },
   chartDayOfTheMonth: {
     defaultMessage: 'Day {day}',

diff --git a/src/routes/details/components/historicalData/historicalDataBase.tsx b/src/routes/details/components/historicalData/historicalDataBase.tsx
@@ -17,6 +17,7 @@ interface HistoricalDataOwnProps {
   costDistribution?: string;
   costType?: string;
   currency?: string;
+  groupBy?: string;
 }
 
 export interface HistoricalDataStateProps {
@@ -67,9 +68,19 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
 
   // Returns network chart
   private getNetworkChart = (widget: HistoricalDataWidget) => {
-    const { intl, isOcpCloudNetworkingToggleEnabled } = this.props;
+    const { groupBy, intl, isOcpCloudNetworkingToggleEnabled } = this.props;
 
-    if (widget.reportPathsType === ReportPathsType.ocp && !isOcpCloudNetworkingToggleEnabled) {
+    let showWidget = false;
+
+    if (widget.network?.showWidgetOnGroupBy) {
+      for (const groupById of widget.network.showWidgetOnGroupBy) {
+        if (groupById === groupBy) {
+          showWidget = true;
+          break;
+        }
+      }
+    }
+    if (!showWidget || !isOcpCloudNetworkingToggleEnabled) {
       return null;
     }
     return (
@@ -96,7 +107,7 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
   private getVolumeChart = (widget: HistoricalDataWidget) => {
     const { intl, isOcpProjectStorageToggleEnabled } = this.props;
 
-    if (widget.reportPathsType === ReportPathsType.ocp && !isOcpProjectStorageToggleEnabled) {
+    if (!isOcpProjectStorageToggleEnabled) {
       return null;
     }
     return (

diff --git a/src/routes/details/ocpBreakdown/ocpBreakdown.tsx b/src/routes/details/ocpBreakdown/ocpBreakdown.tsx
@@ -118,7 +118,9 @@ const mapStateToProps = createMapStateToProps<OcpBreakdownOwnProps, BreakdownSta
     emptyStateTitle: intl.formatMessage(messages.ocpDetailsTitle),
     groupBy,
     groupByValue,
-    historicalDataComponent: <HistoricalData costDistribution={costDistribution} currency={currency} />,
+    historicalDataComponent: (
+      <HistoricalData costDistribution={costDistribution} currency={currency} groupBy={groupBy} />
+    ),
     isOptimizationsTab: queryFromRoute.optimizationsTab !== undefined,
     isRosToggleEnabled: FeatureToggleSelectors.selectIsRosToggleEnabled(state),
     optimizationsComponent: groupBy === 'project' && groupByValue !== '*' ? <Optimizations /> : undefined,

diff --git a/src/store/breakdown/costOverview/common/costOverviewCommon.ts b/src/store/breakdown/costOverview/common/costOverviewCommon.ts
@@ -17,24 +17,24 @@ export interface CostOverviewWidget {
   id: number;
   cluster?: {
     reportGroupBy: string; // Report group_by
-    showWidgetOnGroupBy?: string[]; // Show widget when group_by is matched
+    showWidgetOnGroupBy?: string[]; // Show cluster card when group_by is matched
   };
   pvc?: {
-    showWidgetOnGroupBy?: string[]; // Show widget when group_by is matched
+    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 widget when group_by is matched
+    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.
   type: CostOverviewWidgetType;
   volume?: {
-    showWidgetOnGroupBy?: string[]; // Show widget when group_by is matched
+    showWidgetOnGroupBy?: string[]; // Show volume usage chart when group_by is matched
   };
 }
diff --git a/src/store/breakdown/historicalData/common/historicalDataCommon.ts b/src/store/breakdown/historicalData/common/historicalDataCommon.ts
@@ -12,6 +12,9 @@ export const enum HistoricalDataWidgetType {
 export interface HistoricalDataWidget {
   chartName: string; // Will be the prefix for ids within the chart
   id: number;
+  network?: {
+    showWidgetOnGroupBy?: string[]; // Show network chart when group_by is matched
+  };
   reportPathsType: ReportPathsType; // Report URL path
   reportType: ReportType; // Report type; cost, storage, etc.
   type: HistoricalDataWidgetType;

diff --git a/src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataWidgets.ts b/src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataWidgets.ts
@@ -33,6 +33,9 @@ export const memoryUsageWidget: OcpHistoricalDataWidget = {
 export const networkUsageWidget: OcpHistoricalDataWidget = {
   chartName: 'ocpNetworkChart',
   id: getId(),
+  network: {
+    showWidgetOnGroupBy: ['cluster', 'node'],
+  },
   reportPathsType: ReportPathsType.ocp,
   reportType: ReportType.network,
   type: HistoricalDataWidgetType.network,