Merge pull request #4177 from dlabrecq/COST-5830_2

Reset details page date range dropdown
project-koku · Jan 20, 2025 · 861d799 · 861d799
2 parents 6ef1723 + c3b0e9b
commit 861d799
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 27 deletions.
diff --git a/src/routes/details/awsDetails/detailsHeader.tsx b/src/routes/details/awsDetails/detailsHeader.tsx
@@ -21,7 +21,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedAwsReportItemsParams } from 'routes/utils/computedReport/getComputedAwsReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -83,11 +83,24 @@ const tagPathsType = TagPathsType.aws;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnCostTypeSelect = (value: string) => {
     const { onCostTypeSelect } = this.props;
 

diff --git a/src/routes/details/azureDetails/detailsHeader.tsx b/src/routes/details/azureDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedAzureReportItemsParams } from 'routes/utils/computedReport/getComputedAzureReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -76,11 +76,24 @@ const tagPathsType = TagPathsType.azure;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/details/gcpDetails/detailsHeader.tsx b/src/routes/details/gcpDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ 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';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -77,11 +77,24 @@ const tagPathsType = TagPathsType.gcp;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/details/ibmDetails/detailsHeader.tsx b/src/routes/details/ibmDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedIbmReportItemsParams } from 'routes/utils/computedReport/getComputedIbmReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedIbmReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -77,11 +77,24 @@ const tagPathsType = TagPathsType.ibm;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/details/ociDetails/detailsHeader.tsx b/src/routes/details/ociDetails/detailsHeader.tsx
@@ -18,7 +18,7 @@ import { GroupBy } from 'routes/components/groupBy';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedOciReportItemsParams } from 'routes/utils/computedReport/getComputedOciReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedOciReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -76,11 +76,24 @@ const tagPathsType = TagPathsType.oci;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/details/ocpDetails/detailsHeader.tsx b/src/routes/details/ocpDetails/detailsHeader.tsx
@@ -21,7 +21,7 @@ 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';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -86,23 +86,19 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, DetailsHeade
   public state: DetailsHeaderState = { ...this.defaultState };
 
   public componentDidMount() {
-    this.setState({ currentDateRangeType: this.getCurrentDateRangeType() });
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
   }
 
   public componentDidUpdate(prevProps: DetailsHeaderProps) {
     const { timeScopeValue } = this.props;
 
     if (prevProps.timeScopeValue !== timeScopeValue) {
-      this.setState({ currentDateRangeType: this.getCurrentDateRangeType() });
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
     }
   }
 
-  private getCurrentDateRangeType = () => {
-    const { timeScopeValue } = this.props;
-
-    return timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate;
-  };
-
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/details/rhelDetails/detailsHeader.tsx b/src/routes/details/rhelDetails/detailsHeader.tsx
@@ -19,7 +19,7 @@ import { EmptyValueState } from 'routes/components/state/emptyValueState';
 import { ProviderDetailsModal } from 'routes/details/components/providerStatus';
 import type { ComputedRhelReportItemsParams } from 'routes/utils/computedReport/getComputedRhelReportItems';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedRhelReportItems';
-import { DateRangeType } from 'routes/utils/dateRange';
+import { DateRangeType, getCurrentDateRangeType } from 'routes/utils/dateRange';
 import { filterProviders } from 'routes/utils/providers';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -79,11 +79,24 @@ const tagPathsType = TagPathsType.rhel;
 
 class DetailsHeaderBase extends React.Component<DetailsHeaderProps> {
   protected defaultState: DetailsHeaderState = {
-    currentDateRangeType:
-      this.props.timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate,
+    currentDateRangeType: DateRangeType.currentMonthToDate,
   };
   public state: DetailsHeaderState = { ...this.defaultState };
 
+  public componentDidMount() {
+    const { timeScopeValue } = this.props;
+
+    this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+  }
+
+  public componentDidUpdate(prevProps: DetailsHeaderProps) {
+    const { timeScopeValue } = this.props;
+
+    if (prevProps.timeScopeValue !== timeScopeValue) {
+      this.setState({ currentDateRangeType: getCurrentDateRangeType(timeScopeValue) });
+    }
+  }
+
   private handleOnDateRangeSelect = (value: string) => {
     const { onDateRangeSelect } = this.props;
 

diff --git a/src/routes/utils/dateRange.ts b/src/routes/utils/dateRange.ts
@@ -75,6 +75,10 @@ export const getDateRange = (dateRangeType: DateRangeType, isFormatted = true) =
   return dateRange;
 };
 
+export const getCurrentDateRangeType = (timeScopeValue: number) => {
+  return timeScopeValue === -2 ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate;
+};
+
 export const getDateRangeTypeDefault = (queryFromRoute: Query, defaultToPreviousMonth: boolean): DateRangeType => {
   if (queryFromRoute.dateRangeType) {
     return queryFromRoute.dateRangeType;