Stubbed-out historical layout for network and storage features

Author: dlabrecq

locales/data.json

@@ -9799,6 +9799,14 @@
               }
             ]
           },
+          "network": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Network usage comparison"
+              }
+            ]
+          },
           "other": {
             "value": []
           },

locales/translations.json

@@ -339,7 +339,7 @@
   "groupByValuesTitleCase": "{value, select, account {{count, plural, one {Account} other {Accounts}}} aws_category {{count, plural, one {Cost category} other {Cost categories}}} cluster {{count, plural, one {Cluster} other {Clusters}}} gcp_project {{count, plural, one {GCP project} other {GCP projects}}} node {{count, plural, one {Node} other {Node}}} org_unit_id {{count, plural, one {Organizational unit} other {Organizational units}}} payer_tenant_id {{count, plural, one {Account} other {Accounts}}} product_service {{count, plural, one {Service} other {Services}}} project {{count, plural, one {Project} other {Projects}}} region {{count, plural, one {Region} other {Regions}}} resource_location {{count, plural, one {Region} other {Regions}}} service {{count, plural, one {Service} other {Services}}} service_name {{count, plural, one {Service} other {Services}}} subscription_guid {{count, plural, one {Account} other {Accounts}}} tag {{count, plural, one {Tag} other {Tags}}} other {}}",
   "historicalChartCostLabel": "Cost ({units})",
   "historicalChartDayOfMonthLabel": "Day of Month",
-  "historicalChartTitle": "{value, select, cost {Cost comparison} cpu {CPU usage, request, and limit comparison} instance_type {Compute usage comparison}memory {Memory usage, request, and limit comparison} modal {{name} daily usage comparison} storage {Storage usage comparison} virtual_machine {Virtual machine usage comparison}other {}}",
+  "historicalChartTitle": "{value, select, cost {Cost comparison} cpu {CPU usage, request, and limit comparison} instance_type {Compute usage comparison}memory {Memory usage, request, and limit comparison} modal {{name} daily usage comparison} network {Network usage comparison} storage {Storage usage comparison} virtual_machine {Virtual machine usage comparison}other {}}",
   "historicalChartUsageLabel": "{value, select, instance_type {hrs} storage {gb-mo} other {}}",
   "ibm": "IBM Cloud",
   "ibmComputeTitle": "Compute instances usage",

src/api/reports/ocpReports.ts

@@ -61,6 +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.volume]: 'reports/openshift/volumes/',
 };
 

src/locales/messages.ts

@@ -2222,6 +2222,7 @@ export default defineMessages({
       'instance_type {Compute usage comparison}' +
       'memory {Memory usage, request, and limit comparison} ' +
       'modal {{name} daily usage comparison} ' +
+      'network {Network usage comparison} ' +
       'storage {Storage usage comparison} ' +
       'virtual_machine {Virtual machine usage comparison}' +
       'other {}}',

src/routes/details/components/historicalData/historicalDataBase.tsx

@@ -18,6 +18,8 @@ interface HistoricalDataOwnProps {
 }
 
 export interface HistoricalDataStateProps {
+  isOcpCloudNetworkingToggleEnabled?: boolean;
+  isOcpProjectStorageToggleEnabled?: boolean;
   selectWidgets?: Record<number, any>;
   widgets: number[];
 }
@@ -26,7 +28,9 @@ type HistoricalDataProps = HistoricalDataOwnProps & HistoricalDataStateProps & W
 
 class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
   private getTitleKey = (reportPathsType, reportType) => {
-    if (reportPathsType === ReportPathsType.azure) {
+    if (reportPathsType === ReportPathsType.ocp) {
+      return reportType === ReportType.volume ? 'storage' : reportType;
+    } else if (reportPathsType === ReportPathsType.azure) {
       return reportType === ReportType.instanceType ? 'virtual_machine' : reportType;
     }
     return reportType === ReportType.instanceType ? 'instance_type' : reportType;
@@ -59,6 +63,60 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
     );
   };
 
+  // Returns network chart
+  private getNetworkChart = (widget: HistoricalDataWidget) => {
+    const { intl, isOcpCloudNetworkingToggleEnabled } = this.props;
+
+    if (widget.reportPathsType === ReportPathsType.ocp && !isOcpCloudNetworkingToggleEnabled) {
+      return null;
+    }
+    return (
+      <Card>
+        <CardTitle>
+          <Title headingLevel="h2" size={TitleSizes.lg}>
+            {intl.formatMessage(messages.historicalChartTitle, {
+              value: this.getTitleKey(widget.reportPathsType, widget.reportType),
+            })}
+          </Title>
+        </CardTitle>
+        <CardBody>
+          <HistoricalDataUsageChart
+            chartName={widget.chartName}
+            reportPathsType={widget.reportPathsType}
+            reportType={widget.reportType}
+          />
+        </CardBody>
+      </Card>
+    );
+  };
+
+  // Returns storage chart
+  private getStorageChart = (widget: HistoricalDataWidget) => {
+    const { intl, isOcpProjectStorageToggleEnabled } = this.props;
+
+    if (widget.reportPathsType === ReportPathsType.ocp && !isOcpProjectStorageToggleEnabled) {
+      return null;
+    }
+    return (
+      <Card>
+        <CardTitle>
+          <Title headingLevel="h2" size={TitleSizes.lg}>
+            {intl.formatMessage(messages.historicalChartTitle, {
+              value: this.getTitleKey(widget.reportPathsType, widget.reportType),
+            })}
+          </Title>
+        </CardTitle>
+        <CardBody>
+          <HistoricalDataUsageChart
+            chartName={widget.chartName}
+            reportPathsType={widget.reportPathsType}
+            reportType={widget.reportType}
+          />
+        </CardBody>
+      </Card>
+    );
+  };
+
   // Returns trend chart
   private getTrendChart = (widget: HistoricalDataWidget) => {
     const { costType, currency, intl } = this.props;
@@ -114,6 +172,10 @@ class HistoricalDatasBase extends React.Component<HistoricalDataProps, any> {
     switch (widget.type) {
       case HistoricalDataWidgetType.cost:
         return this.getCostChart(widget);
+      case HistoricalDataWidgetType.network:
+        return this.getNetworkChart(widget);
+      case HistoricalDataWidgetType.storage:
+        return this.getStorageChart(widget);
       case HistoricalDataWidgetType.trend:
         return this.getTrendChart(widget);
       case HistoricalDataWidgetType.usage:

src/routes/details/ocpBreakdown/historicalData.tsx

@@ -3,6 +3,7 @@ import type { HistoricalDataStateProps } from 'routes/details/components/histori
 import { HistoricalDataBase } from 'routes/details/components/historicalData';
 import { ocpHistoricalDataSelectors } from 'store/breakdown/historicalData/ocpHistoricalData';
 import { createMapStateToProps } from 'store/common';
+import { FeatureToggleSelectors } from 'store/featureToggle';
 
 interface OcpHistoricalDataOwnProps {
   // TBD...
@@ -11,6 +12,8 @@ interface OcpHistoricalDataOwnProps {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const mapStateToProps = createMapStateToProps<OcpHistoricalDataOwnProps, HistoricalDataStateProps>((state, props) => {
   return {
+    isOcpCloudNetworkingToggleEnabled: FeatureToggleSelectors.selectIsOcpCloudNetworkingToggleEnabled(state),
+    isOcpProjectStorageToggleEnabled: FeatureToggleSelectors.selectIsOcpProjectStorageToggleEnabled(state),
     selectWidgets: ocpHistoricalDataSelectors.selectWidgets(state),
     widgets: ocpHistoricalDataSelectors.selectCurrentWidgets(state),
   };

src/store/breakdown/historicalData/common/historicalDataCommon.ts

@@ -3,6 +3,8 @@ import type { ReportPathsType, ReportType } from 'api/reports/report';
 // eslint-disable-next-line no-shadow
 export const enum HistoricalDataWidgetType {
   cost = 'cost', // This type displays historical cost chart
+  network = 'network', // This type displays historical network chart
+  storage = 'storage', // This type displays historical storage chart
   trend = 'trend', // This type displays historical trend chart
   usage = 'usage', // This type displays historical usage chart
 }

src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataReducer.ts

@@ -1,17 +1,31 @@
 import type { OcpHistoricalDataWidget } from './ocpHistoricalDataCommon';
-import { costWidget, cpuUsageWidget, memoryUsageWidget } from './ocpHistoricalDataWidgets';
+import {
+  costWidget,
+  cpuUsageWidget,
+  memoryUsageWidget,
+  networkUsageWidget,
+  storageUsageWidget,
+} from './ocpHistoricalDataWidgets';
 
 export type OcpHistoricalDataState = Readonly<{
   widgets: Record<number, OcpHistoricalDataWidget>;
   currentWidgets: number[];
 }>;
 
 export const defaultState: OcpHistoricalDataState = {
-  currentWidgets: [costWidget.id, cpuUsageWidget.id, memoryUsageWidget.id],
+  currentWidgets: [
+    costWidget.id,
+    cpuUsageWidget.id,
+    memoryUsageWidget.id,
+    networkUsageWidget.id,
+    storageUsageWidget.id,
+  ],
   widgets: {
     [costWidget.id]: costWidget,
     [cpuUsageWidget.id]: cpuUsageWidget,
     [memoryUsageWidget.id]: memoryUsageWidget,
+    [networkUsageWidget.id]: networkUsageWidget,
+    [storageUsageWidget.id]: storageUsageWidget,
   },
 };
 

src/store/breakdown/historicalData/ocpHistoricalData/ocpHistoricalDataWidgets.ts

@@ -29,3 +29,19 @@ export const memoryUsageWidget: OcpHistoricalDataWidget = {
   reportType: ReportType.memory,
   type: HistoricalDataWidgetType.usage,
 };
+
+export const networkUsageWidget: OcpHistoricalDataWidget = {
+  chartName: 'ocpNetworkChart',
+  id: getId(),
+  reportPathsType: ReportPathsType.ocp,
+  reportType: ReportType.network,
+  type: HistoricalDataWidgetType.network,
+};
+
+export const storageUsageWidget: OcpHistoricalDataWidget = {
+  chartName: 'ocpStorageChart',
+  id: getId(),
+  reportPathsType: ReportPathsType.ocp,
+  reportType: ReportType.volume,
+  type: HistoricalDataWidgetType.storage,
+};