Merge pull request #4061 from dlabrecq/daterange-fix

Date range fix

Author: dlabrecq

src/routes/components/groupBy/groupBy.tsx

@@ -15,7 +15,6 @@ import { connect } from 'react-redux';
 import type { SelectWrapperOption } from 'routes/components/selectWrapper';
 import { SelectWrapper } from 'routes/components/selectWrapper';
 import type { PerspectiveType } from 'routes/explorer/explorerUtils';
-import { getDateRangeFromQuery } from 'routes/utils/dateRange';
 import { getTimeScopeValue } from 'routes/utils/timeScope';
 import type { FetchStatus } from 'store/common';
 import { createMapStateToProps } from 'store/common';
@@ -31,6 +30,7 @@ import { GroupByOrg } from './groupByOrg';
 import { GroupBySelect } from './groupBySelect';
 
 interface GroupByOwnProps extends RouterComponentProps, WrappedComponentProps {
+  endDate?: string;
   getIdKeyForGroupBy: (groupBy: Query['group_by']) => string;
   groupBy?: string;
   isDisabled?: boolean;
@@ -45,6 +45,7 @@ interface GroupByOwnProps extends RouterComponentProps, WrappedComponentProps {
   showCostCategories?: boolean;
   showOrgs?: boolean;
   showTags?: boolean;
+  startDate?: string;
   tagPathsType: TagPathsType;
 }
 
@@ -325,28 +326,25 @@ class GroupByBase extends React.Component<GroupByProps, GroupByState> {
 }
 
 const mapStateToProps = createMapStateToProps<GroupByOwnProps, GroupByStateProps>(
-  (state, { orgPathsType, router, resourcePathsType, tagPathsType }) => {
+  (state, { endDate, orgPathsType, router, resourcePathsType, startDate, tagPathsType }) => {
     const queryFromRoute = parseQuery<Query>(router.location.search);
     const timeScopeValue = getTimeScopeValue(queryFromRoute);
 
+    // Use start and end dates with Cost Explorer
     // Default to current month filter for details pages
-    let tagFilter: any = {
-      filter: {
-        resolution: 'monthly',
-        time_scope_units: 'month',
-        time_scope_value: timeScopeValue !== undefined ? timeScopeValue : -1,
-      },
-    };
-
-    // Replace with start and end dates for Cost Explorer
-    if (queryFromRoute.dateRangeType) {
-      const { end_date, start_date } = getDateRangeFromQuery(queryFromRoute);
-
-      tagFilter = {
-        end_date,
-        start_date,
-      };
-    }
+    const tagFilter =
+      startDate && endDate
+        ? {
+            end_date: endDate,
+            start_date: startDate,
+          }
+        : {
+            filter: {
+              resolution: 'monthly',
+              time_scope_units: 'month',
+              time_scope_value: timeScopeValue !== undefined ? timeScopeValue : -1,
+            },
+          };
 
     // Note: Omitting key_only would help to share a single, cached request -- the toolbar requires key values
     // However, for better server-side performance, we chose to use key_only here.

src/routes/explorer/explorer.tsx

@@ -375,6 +375,18 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
     }
   };
 
+  private handleOnDateRangeSelect = (dateRangeType: string) => {
+    const { query, router } = this.props;
+
+    const newQuery = {
+      ...JSON.parse(JSON.stringify(query)),
+      dateRangeType,
+      start_date: undefined,
+      end_date: undefined,
+    };
+    router.navigate(getRouteForQuery(newQuery, router.location, true), { replace: true });
+  };
+
   private handleOnExportModalClose = (isOpen: boolean) => {
     this.setState({ isExportModalOpen: isOpen });
   };
@@ -569,6 +581,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
           onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)}
           onCostTypeSelect={() => handleOnCostTypeSelect(query, router)}
           onCurrencySelect={() => handleOnCurrencySelect(query, router)}
+          onDateRangeSelect={this.handleOnDateRangeSelect}
           onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
           onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
           onGroupBySelect={this.handleOnGroupBySelect}

src/routes/explorer/explorerDatePicker.tsx

@@ -16,7 +16,7 @@ interface ExplorerDatePickerOwnProps extends RouterComponentProps, WrappedCompon
   dateRangeType?: DateRangeType;
   endDate?: string;
   onSelect(startDate: Date, endDate: Date);
-  startDate?: Date;
+  startDate?: string;
 }
 
 interface ExplorerDatePickerState {
@@ -39,11 +39,6 @@ class ExplorerDatePickerBase extends React.Component<ExplorerDatePickerProps, Ex
 
   public componentDidMount() {
     const { dateRangeType, endDate, startDate } = this.props;
-    // const queryFromRoute = parseQuery<Query>(router.location.search);
-    //
-    // // Query dates are undefined until a selection is made
-    // const end_date = queryFromRoute.end_date;
-    // const start_date = queryFromRoute.start_date;
 
     if (this.startDateRef?.current) {
       this.startDateRef.current.setCalendarOpen(dateRangeType !== DateRangeType.custom);

src/routes/explorer/explorerFilter.tsx

@@ -43,7 +43,7 @@ import {
 
 interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentProps {
   dateRangeType: DateRangeType;
-  endDate?: boolean;
+  endDate?: string;
   groupBy: string;
   isCurrentMonthData?: boolean;
   isDisabled?: boolean;
@@ -53,7 +53,7 @@ interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentP
   perspective: PerspectiveType;
   pagination?: React.ReactNode;
   query?: Query;
-  startDate?: boolean;
+  startDate?: string;
 }
 
 interface ExplorerFilterStateProps {
@@ -80,7 +80,6 @@ interface ExplorerFilterDispatchProps {
 
 interface ExplorerFilterState {
   categoryOptions?: ToolbarChipGroup[];
-  currentDateRange: DateRangeType;
   showDatePicker?: boolean;
 }
 
@@ -92,24 +91,20 @@ const tagType = TagType.tag;
 
 export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, ExplorerFilterState> {
   protected defaultState: ExplorerFilterState = {
-    currentDateRange: this.props.dateRangeType,
     showDatePicker: false,
   };
   public state: ExplorerFilterState = { ...this.defaultState };
 
   public componentDidMount() {
-    const { dateRangeType } = this.props;
-
     this.updateReport();
     this.setState({
-      currentDateRange: dateRangeType,
       categoryOptions: this.getCategoryOptions(),
-      showDatePicker: dateRangeType === DateRangeType.custom,
+      showDatePicker: this.props.dateRangeType === DateRangeType.custom,
     });
   }
 
   public componentDidUpdate(prevProps: ExplorerFilterProps) {
-    const { dateRangeType, orgReport, perspective, query, tagReport } = this.props;
+    const { dateRangeType, orgReport, query, tagReport } = this.props;
 
     if (query && !isEqual(query, prevProps.query)) {
       this.updateReport();
@@ -120,18 +115,10 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
       prevProps.dateRangeType !== dateRangeType
     ) {
       this.setState({
-        currentDateRange: dateRangeType,
         categoryOptions: this.getCategoryOptions(),
         showDatePicker: dateRangeType === DateRangeType.custom,
       });
     }
-    // Preserve filter -- see https://issues.redhat.com/browse/COST-1090
-    if (prevProps.perspective !== perspective) {
-      const currentDateRange = undefined;
-      this.setState({ currentDateRange }, () => {
-        this.updateDateRange(currentDateRange);
-      });
-    }
   }
 
   private getCategoryOptions = (): ToolbarChipGroup[] => {
@@ -172,12 +159,11 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
   };
 
   private getDateRangeComponent = () => {
-    const { isCurrentMonthData, isDisabled } = this.props;
-    const { currentDateRange } = this.state;
+    const { dateRangeType, isCurrentMonthData, isDisabled } = this.props;
 
     return (
       <DateRange
-        dateRangeType={currentDateRange}
+        dateRangeType={dateRangeType}
         isCurrentMonthData={isCurrentMonthData}
         isDisabled={isDisabled}
         isExplorer
@@ -219,30 +205,13 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
 
     const currentDateRange = getDateRangeById(value);
     const showDatePicker = value === DateRangeType.custom;
-    this.setState({ currentDateRange, showDatePicker }, () => {
-      if (!showDatePicker) {
-        this.updateDateRange(currentDateRange);
-
-        // Clear inline alert
-        if (onDateRangeSelect) {
-          onDateRangeSelect(currentDateRange);
-        }
+    this.setState({ showDatePicker }, () => {
+      if (onDateRangeSelect && !showDatePicker) {
+        onDateRangeSelect(currentDateRange);
       }
     });
   };
 
-  private updateDateRange = (value: string) => {
-    const { query, router } = this.props;
-
-    const newQuery = {
-      ...JSON.parse(JSON.stringify(query)),
-      dateRangeType: value,
-      start_date: undefined,
-      end_date: undefined,
-    };
-    router.navigate(getRouteForQuery(newQuery, router.location, true), { replace: true });
-  };
-
   private updateReport = () => {
     const {
       fetchOrg,

src/routes/explorer/explorerHeader.tsx

@@ -175,6 +175,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
 
     const newQuery = {
       ...JSON.parse(JSON.stringify(query)),
+      dateRangeType: undefined, // Clear inline alert
       exclude: undefined,
       filter_by: undefined,
       group_by: { [getGroupByDefault(value)]: '*' },
@@ -315,6 +316,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
               <FlexItem>{this.getPerspective(noProviders)}</FlexItem>
               <FlexItem>
                 <GroupBy
+                  endDate={endDate}
                   getIdKeyForGroupBy={getIdKeyForGroupBy}
                   groupBy={groupBy}
                   isDisabled={noProviders}
@@ -328,6 +330,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
                   }
                   showOrgs={orgPathsType}
                   showTags={tagPathsType}
+                  startDate={startDate}
                   tagPathsType={tagPathsType}
                 />
               </FlexItem>