From dca0b2eca16ed614701c8f6da711be6766c34a86 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 7 Oct 2024 13:57:03 -0400
Subject: [PATCH] Custom date range fix

---
 src/routes/explorer/explorer.tsx           | 50 ++++++++++------------
 src/routes/explorer/explorerChart.tsx      | 21 ++++-----
 src/routes/explorer/explorerDatePicker.tsx | 18 +++++---
 src/routes/explorer/explorerFilter.tsx     | 40 ++++++++++-------
 src/routes/explorer/explorerHeader.tsx     |  7 ++-
 src/routes/explorer/explorerTable.tsx      | 30 ++++++-------
 src/routes/utils/dateRange.ts              | 30 ++++++-------
 7 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/src/routes/explorer/explorer.tsx b/src/routes/explorer/explorer.tsx
index 859038f22..5d8d5a2af 100644
--- a/src/routes/explorer/explorer.tsx
+++ b/src/routes/explorer/explorer.tsx
@@ -25,8 +25,7 @@ import { ProviderDetails } from 'routes/details/components/providerDetails';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedExplorerReportItems';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
-import { DateRangeType, getDateRange } from 'routes/utils/dateRange';
-import { getDateRangeTypeDefault } from 'routes/utils/dateRange';
+import { DateRangeType, getDateRangeFromQuery } from 'routes/utils/dateRange';
 import { getGroupByCostCategory, getGroupById, getGroupByOrgValue, getGroupByTagKey } from 'routes/utils/groupBy';
 import { filterProviders, hasData } from 'routes/utils/providers';
 import { getRouteForQuery } from 'routes/utils/query';
@@ -83,6 +82,7 @@ interface ExplorerStateProps {
   costType?: string;
   currency?: string;
   dateRangeType: DateRangeType;
+  endDate?: Date;
   gcpProviders: Providers;
   ibmProviders: Providers;
   isAccountInfoEmptyStateToggleEnabled?: boolean;
@@ -103,6 +103,7 @@ interface ExplorerStateProps {
   reportFetchStatus: FetchStatus;
   reportQueryString: string;
   rhelProviders: Providers;
+  startDate?: Date;
   userAccess: UserAccess;
   userAccessError: AxiosError;
   userAccessFetchStatus: FetchStatus;
@@ -115,13 +116,10 @@ interface ExplorerDispatchProps {
 
 interface ExplorerState {
   columns?: any[];
-  endDate?: Date;
   isAllSelected?: boolean;
-  isDateRangeSelected?: boolean;
   isExportModalOpen?: boolean;
   rows?: any[];
   selectedItems?: ComputedReportItem[];
-  startDate?: Date;
 }
 
 type ExplorerOwnProps = RouterComponentProps & WrappedComponentProps;
@@ -132,7 +130,6 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
   protected defaultState: ExplorerState = {
     columns: [],
     isAllSelected: false,
-    isDateRangeSelected: false,
     isExportModalOpen: false,
     rows: [],
     selectedItems: [],
@@ -297,7 +294,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
   };
 
   private getTable = () => {
-    const { costDistribution, dateRangeType, perspective, query, report, reportFetchStatus, router } = this.props;
+    const { costDistribution, endDate, perspective, query, report, reportFetchStatus, router, startDate } = this.props;
     const { isAllSelected, selectedItems } = this.state;
 
     const groupById = getIdKeyForGroupBy(query.group_by);
@@ -308,7 +305,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
     return (
       <ExplorerTable
         costDistribution={costDistribution}
-        dateRangeType={dateRangeType}
+        endDate={endDate}
         groupBy={
           groupByCostCategory
             ? `${awsCategoryPrefix}${groupByCostCategory}`
@@ -329,6 +326,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
         query={query}
         report={report}
         selectedItems={selectedItems}
+        startDate={startDate}
       />
     );
   };
@@ -377,18 +375,6 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
     }
   };
 
-  private handleOnDatePickerSelect = (startDate: Date, endDate: Date) => {
-    const { query, router } = this.props;
-
-    this.setState({ startDate, endDate }, () => {
-      router.navigate(getRouteForQuery(query, router.location, true), { replace: true });
-    });
-  };
-
-  private handleOnDateRangeSelect = () => {
-    this.setState({ isDateRangeSelected: true });
-  };
-
   private handleOnExportModalClose = (isOpen: boolean) => {
     this.setState({ isExportModalOpen: isOpen });
   };
@@ -494,6 +480,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
       costType,
       currency,
       dateRangeType,
+      endDate,
       gcpProviders,
       ibmProviders,
       intl,
@@ -510,8 +497,8 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
       reportError,
       reportFetchStatus,
       router,
+      startDate,
     } = this.props;
-    const { isDateRangeSelected } = this.state;
 
     // Note: No need to test OCP on cloud here, since that requires at least one provider
     const noAwsProviders = !this.isAwsAvailable() && providersFetchStatus === FetchStatus.complete;
@@ -561,6 +548,8 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
       return <NoData title={title} />;
     }
 
+    const isDateRangeSelected = query.dateRangeType !== undefined;
+
     return (
       <div style={styles.explorer}>
         <ExplorerHeader
@@ -568,6 +557,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
           costType={costType}
           currency={currency}
           dateRangeType={dateRangeType}
+          endDate={endDate}
           groupBy={
             groupByCostCategory
               ? `${awsCategoryPrefix}${groupByCostCategory}`
@@ -579,14 +569,13 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
           onCostDistributionSelect={() => handleOnCostDistributionSelect(query, router)}
           onCostTypeSelect={() => handleOnCostTypeSelect(query, router)}
           onCurrencySelect={() => handleOnCurrencySelect(query, router)}
-          onDatePickerSelect={this.handleOnDatePickerSelect}
-          onDateRangeSelect={this.handleOnDateRangeSelect}
           onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
           onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
           onGroupBySelect={this.handleOnGroupBySelect}
           onPerspectiveClicked={this.handleOnPerspectiveClick}
           perspective={perspective}
           report={report}
+          startDate={startDate}
         />
         {!isDataAvailable && isDetailsDateRangeToggleEnabled ? (
           this.getEmptyProviderState()
@@ -610,6 +599,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
                     costType={costType}
                     currency={currency}
                     dateRangeType={dateRangeType}
+                    endDate={endDate}
                     groupBy={
                       groupByCostCategory
                         ? `${awsCategoryPrefix}${groupByCostCategory}`
@@ -618,6 +608,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
                           : groupById
                     }
                     perspective={perspective}
+                    startDate={startDate}
                   />
                 </div>
               </div>
@@ -630,6 +621,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
                       costType={costType}
                       currency={currency}
                       dateRangeType={dateRangeType}
+                      endDate={endDate}
                       groupBy={
                         groupByCostCategory
                           ? `${awsCategoryPrefix}${groupByCostCategory}`
@@ -638,6 +630,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
                             : groupById
                       }
                       perspective={perspective}
+                      startDate={startDate}
                     />
                   </div>
                 </div>
@@ -729,11 +722,10 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
     rhelProviders,
   });
 
-  let dateRangeType = getDateRangeTypeDefault(queryFromRoute);
-  if (dateRangeType === DateRangeType.currentMonthToDate && !isCurrentMonthData && isDetailsDateRangeToggleEnabled) {
-    dateRangeType = DateRangeType.previousMonth;
-  }
-  const { end_date, start_date } = getDateRange(dateRangeType);
+  const { dateRangeType, end_date, start_date } = getDateRangeFromQuery(
+    queryFromRoute,
+    !isCurrentMonthData && isDetailsDateRangeToggleEnabled
+  );
 
   const query: any = {
     ...baseQuery,
@@ -777,6 +769,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
     costType,
     currency,
     dateRangeType,
+    endDate: end_date,
     gcpProviders,
     ibmProviders,
     isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
@@ -793,6 +786,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
     providersFetchStatus,
     providersQueryString,
     query,
+    startDate: start_date,
     report,
     reportError,
     reportFetchStatus,
diff --git a/src/routes/explorer/explorerChart.tsx b/src/routes/explorer/explorerChart.tsx
index bf783e0a1..a4ddd6c45 100644
--- a/src/routes/explorer/explorerChart.tsx
+++ b/src/routes/explorer/explorerChart.tsx
@@ -20,7 +20,6 @@ import { CostExplorerChart } from 'routes/components/charts/costExplorerChart';
 import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedExplorerReportItems';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
-import { type DateRangeType, getDateRange } from 'routes/utils/dateRange';
 import { getGroupByCostCategory, getGroupById, getGroupByOrgValue, getGroupByTagKey } from 'routes/utils/groupBy';
 import { skeletonWidth } from 'routes/utils/skeleton';
 import { createMapStateToProps, FetchStatus } from 'store/common';
@@ -39,20 +38,19 @@ interface ExplorerChartOwnProps extends RouterComponentProps, WrappedComponentPr
   costDistribution?: string;
   costType?: string;
   currency?: string;
-  dateRangeType?: DateRangeType;
+  endDate?: string;
   groupBy?: string;
   perspective: PerspectiveType;
+  startDate?: string;
 }
 
 interface ExplorerChartStateProps {
-  end_date?: string;
   perspective: PerspectiveType;
   query: Query;
   report: Report;
   reportError: AxiosError;
   reportFetchStatus: FetchStatus;
   reportQueryString: string;
-  start_date?: string;
 }
 
 interface ExplorerChartDispatchProps {
@@ -206,7 +204,7 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar
   // data series. The remaining data is left as is to allow for extrapolation. This allows us to display a "no data"
   // message in the tooltip, which helps distinguish between zero values and when there is no data available.
   private padChartDatums = (items: any[]): ChartDatum[] => {
-    const { end_date, start_date } = this.props;
+    const { endDate, startDate } = this.props;
     const result = [];
 
     items.map(datums => {
@@ -215,8 +213,8 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar
       const newItems = [];
 
       for (
-        let padDate = new Date(start_date + 'T00:00:00');
-        padDate <= new Date(end_date + 'T00:00:00');
+        let padDate = new Date(startDate + 'T00:00:00');
+        padDate <= new Date(endDate + 'T00:00:00');
         padDate.setDate(padDate.getDate() + 1)
       ) {
         const id = format(padDate, 'yyyy-MM-dd');
@@ -278,7 +276,7 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar
 }
 
 const mapStateToProps = createMapStateToProps<ExplorerChartOwnProps, ExplorerChartStateProps>(
-  (state, { costType, currency, dateRangeType, perspective, router }) => {
+  (state, { costType, currency, endDate, perspective, router, startDate }) => {
     const queryFromRoute = parseQuery<Query>(router.location.search);
 
     const groupBy = queryFromRoute.group_by ? getGroupById(queryFromRoute) : getGroupByDefault(perspective);
@@ -286,7 +284,6 @@ const mapStateToProps = createMapStateToProps<ExplorerChartOwnProps, ExplorerCha
 
     const costDistribution =
       perspective === PerspectiveType.ocp && groupBy === 'project' ? getCostDistribution() : undefined;
-    const { end_date, start_date } = getDateRange(dateRangeType);
 
     const query: any = {
       ...queryFromRoute,
@@ -295,12 +292,12 @@ const mapStateToProps = createMapStateToProps<ExplorerChartOwnProps, ExplorerCha
     const reportQuery = {
       cost_type: costType,
       currency,
-      end_date,
+      end_date: endDate,
       exclude: query.exclude,
       filter: { limit: 5 },
       filter_by: query.filter_by,
       group_by,
-      start_date,
+      start_date: startDate,
       ...(costDistribution === ComputedReportItemValueType.distributed && {
         order_by: { distributed_cost: 'desc' },
       }),
@@ -320,14 +317,12 @@ const mapStateToProps = createMapStateToProps<ExplorerChartOwnProps, ExplorerCha
     );
 
     return {
-      end_date,
       perspective,
       query,
       report,
       reportError,
       reportFetchStatus,
       reportQueryString,
-      start_date,
     };
   }
 );
diff --git a/src/routes/explorer/explorerDatePicker.tsx b/src/routes/explorer/explorerDatePicker.tsx
index 340fb6b9e..e73eb1ed3 100644
--- a/src/routes/explorer/explorerDatePicker.tsx
+++ b/src/routes/explorer/explorerDatePicker.tsx
@@ -5,7 +5,7 @@ import type { FormEvent } from 'react';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
-import { DateRangeType, getDateRange } from 'routes/utils/dateRange';
+import { DateRangeType } from 'routes/utils/dateRange';
 import { formatDate, getLast90DaysDate, getToday } from 'utils/dates';
 import type { RouterComponentProps } from 'utils/router';
 import { withRouter } from 'utils/router';
@@ -14,7 +14,9 @@ import { styles } from './explorerDatePicker.styles';
 
 interface ExplorerDatePickerOwnProps extends RouterComponentProps, WrappedComponentProps {
   dateRangeType?: DateRangeType;
+  endDate?: string;
   onSelect(startDate: Date, endDate: Date);
+  startDate?: Date;
 }
 
 interface ExplorerDatePickerState {
@@ -36,16 +38,20 @@ class ExplorerDatePickerBase extends React.Component<ExplorerDatePickerProps, Ex
   private endDateRef = React.createRef<DatePickerRef>();
 
   public componentDidMount() {
-    const { dateRangeType } = this.props;
-    const { end_date, start_date } = getDateRange(dateRangeType);
+    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);
     }
-    if (dateRangeType === DateRangeType.custom) {
+    if (dateRangeType === DateRangeType.custom && endDate && startDate) {
       this.setState({
-        startDate: new Date(start_date + 'T00:00:00'),
-        endDate: new Date(end_date + 'T00:00:00'),
+        startDate: new Date(startDate + 'T00:00:00'),
+        endDate: new Date(endDate + 'T00:00:00'),
       });
     }
   }
diff --git a/src/routes/explorer/explorerFilter.tsx b/src/routes/explorer/explorerFilter.tsx
index 91a59d9a4..eb188a75e 100644
--- a/src/routes/explorer/explorerFilter.tsx
+++ b/src/routes/explorer/explorerFilter.tsx
@@ -16,7 +16,7 @@ import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { DataToolbar } from 'routes/components/dataToolbar';
 import { DateRange } from 'routes/components/dateRange';
-import { DateRangeType, getDateRange, getDateRangeById } from 'routes/utils/dateRange';
+import { DateRangeType, getDateRangeById } from 'routes/utils/dateRange';
 import { isEqual } from 'routes/utils/equal';
 import type { Filter } from 'routes/utils/filter';
 import { getRouteForQuery } from 'routes/utils/query';
@@ -43,6 +43,7 @@ import {
 
 interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentProps {
   dateRangeType: DateRangeType;
+  endDate?: boolean;
   groupBy: string;
   isCurrentMonthData?: boolean;
   isDisabled?: boolean;
@@ -52,6 +53,7 @@ interface ExplorerFilterOwnProps extends RouterComponentProps, WrappedComponentP
   perspective: PerspectiveType;
   pagination?: React.ReactNode;
   query?: Query;
+  startDate?: boolean;
 }
 
 interface ExplorerFilterStateProps {
@@ -100,6 +102,7 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
 
     this.updateReport();
     this.setState({
+      currentDateRange: dateRangeType,
       categoryOptions: this.getCategoryOptions(),
       showDatePicker: dateRangeType === DateRangeType.custom,
     });
@@ -119,11 +122,12 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
       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 = DateRangeType.currentMonthToDate;
+      const currentDateRange = undefined;
       this.setState({ currentDateRange }, () => {
         this.updateDateRange(currentDateRange);
       });
@@ -183,12 +187,17 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
   };
 
   private getDatePickerComponent = () => {
-    const { dateRangeType } = this.props;
+    const { dateRangeType, endDate, startDate } = this.props;
     const { showDatePicker } = this.state;
 
     return showDatePicker ? (
-      <ExplorerDatePicker dateRangeType={dateRangeType} onSelect={this.handleOnDatePickerSelect} />
-    ) : undefined;
+      <ExplorerDatePicker
+        dateRangeType={dateRangeType}
+        endDate={endDate}
+        onSelect={this.handleOnDatePickerSelect}
+        startDate={startDate}
+      />
+    ) : null;
   };
 
   private handleOnDatePickerSelect = (startDate: Date, endDate: Date) => {
@@ -213,10 +222,11 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
     this.setState({ currentDateRange, showDatePicker }, () => {
       if (!showDatePicker) {
         this.updateDateRange(currentDateRange);
-      }
-      // Clear inline alert
-      if (onDateRangeSelect) {
-        onDateRangeSelect(currentDateRange);
+
+        // Clear inline alert
+        if (onDateRangeSelect) {
+          onDateRangeSelect(currentDateRange);
+        }
       }
     });
   };
@@ -298,13 +308,11 @@ export class ExplorerFilterBase extends React.Component<ExplorerFilterProps, Exp
 }
 
 const mapStateToProps = createMapStateToProps<ExplorerFilterOwnProps, ExplorerFilterStateProps>(
-  (state, { dateRangeType, perspective }) => {
-    const { end_date, start_date } = getDateRange(dateRangeType);
-
+  (state, { endDate, perspective, startDate }) => {
     // Omitting key_only to share a single request -- the toolbar needs key values
     const orgQueryString = getQuery({
-      end_date,
-      start_date,
+      end_date: endDate,
+      start_date: startDate,
       limit: 1000,
     });
 
@@ -335,8 +343,8 @@ const mapStateToProps = createMapStateToProps<ExplorerFilterOwnProps, ExplorerFi
     // 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.
     const tagQueryString = getQuery({
-      end_date,
-      start_date,
+      end_date: endDate,
+      start_date: startDate,
       key_only: true,
       limit: 1000,
     });
diff --git a/src/routes/explorer/explorerHeader.tsx b/src/routes/explorer/explorerHeader.tsx
index 0444742f1..f7ca49ed1 100644
--- a/src/routes/explorer/explorerHeader.tsx
+++ b/src/routes/explorer/explorerHeader.tsx
@@ -63,12 +63,12 @@ interface ExplorerHeaderOwnProps extends RouterComponentProps, WrappedComponentP
   costType?: string;
   currency?: string;
   dateRangeType?: DateRangeType;
+  endDate?: string;
   groupBy?: string;
   isCurrentMonthData?: boolean;
   onCostDistributionSelect(value: string);
   onCostTypeSelect(value: string);
   onCurrencySelect(value: string);
-  onDatePickerSelect(startDate: Date, endDate: Date);
   onDateRangeSelect(value: DateRangeType);
   onFilterAdded(filter: Filter);
   onFilterRemoved(filter: Filter);
@@ -76,6 +76,7 @@ interface ExplorerHeaderOwnProps extends RouterComponentProps, WrappedComponentP
   onPerspectiveClicked(value: string);
   perspective: PerspectiveType;
   report: Report;
+  startDate?: string;
 }
 
 interface ExplorerHeaderStateProps {
@@ -258,6 +259,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
       costType,
       currency,
       dateRangeType,
+      endDate,
       groupBy,
       intl,
       isCurrentMonthData,
@@ -274,6 +276,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
       providersFetchStatus,
       query,
       report,
+      startDate,
     } = this.props;
 
     // Note: No need to test OCP on cloud here, since that requires at least one provider
@@ -343,6 +346,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
         </Flex>
         <ExplorerFilter
           dateRangeType={dateRangeType}
+          endDate={endDate}
           groupBy={groupBy}
           isCurrentMonthData={isCurrentMonthData}
           isDisabled={noProviders}
@@ -351,6 +355,7 @@ class ExplorerHeaderBase extends React.Component<ExplorerHeaderProps, ExplorerHe
           onDateRangeSelect={onDateRangeSelect}
           perspective={perspective}
           query={query}
+          startDate={startDate}
         />
       </header>
     );
diff --git a/src/routes/explorer/explorerTable.tsx b/src/routes/explorer/explorerTable.tsx
index f8e5fe07f..9497ac551 100644
--- a/src/routes/explorer/explorerTable.tsx
+++ b/src/routes/explorer/explorerTable.tsx
@@ -35,7 +35,6 @@ import { ComputedReportItemType, ComputedReportItemValueType } from 'routes/comp
 import { EmptyFilterState } from 'routes/components/state/emptyFilterState';
 import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
-import { type DateRangeType, getDateRange } from 'routes/utils/dateRange';
 import { createMapStateToProps } from 'store/common';
 import { formatCurrency } from 'utils/format';
 import { classificationDefault, classificationUnallocated, noPrefix } from 'utils/props';
@@ -47,7 +46,7 @@ import { PerspectiveType } from './explorerUtils';
 
 interface ExplorerTableOwnProps extends RouterComponentProps, WrappedComponentProps {
   costDistribution?: string;
-  dateRangeType?: DateRangeType;
+  endDate?: string;
   groupBy: string;
   groupByCostCategory?: string;
   groupByOrg?: string;
@@ -60,11 +59,11 @@ interface ExplorerTableOwnProps extends RouterComponentProps, WrappedComponentPr
   query: Query;
   report: Report;
   selectedItems?: ComputedReportItem[];
+  startDate?: string;
 }
 
 interface ExplorerTableStateProps {
-  end_date?: string;
-  start_date?: string;
+  // TBD...
 }
 
 interface ExplorerTableDispatchProps {
@@ -118,7 +117,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
   private initDatum = () => {
     const {
       costDistribution,
-      end_date,
+      endDate,
       groupBy,
       groupByCostCategory,
       groupByOrg,
@@ -127,7 +126,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
       perspective,
       report,
       selectedItems,
-      start_date,
+      startDate,
       intl,
     } = this.props;
     if (!report) {
@@ -192,8 +191,8 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
 
     // Fill in missing columns
     for (
-      let currentDate = new Date(start_date + 'T00:00:00');
-      currentDate <= new Date(end_date + 'T00:00:00');
+      let currentDate = new Date(startDate + 'T00:00:00');
+      currentDate <= new Date(endDate + 'T00:00:00');
       currentDate.setDate(currentDate.getDate() + 1)
     ) {
       const mapId = format(currentDate, 'yyyy-MM-dd');
@@ -584,16 +583,11 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
   }
 }
 
-const mapStateToProps = createMapStateToProps<ExplorerTableOwnProps, ExplorerTableStateProps>(
-  (state, { dateRangeType }) => {
-    const { end_date, start_date } = getDateRange(dateRangeType);
-
-    return {
-      end_date,
-      start_date,
-    };
-  }
-);
+const mapStateToProps = createMapStateToProps<ExplorerTableOwnProps, ExplorerTableStateProps>(() => {
+  return {
+    // TBD
+  };
+});
 
 const mapDispatchToProps: ExplorerTableDispatchProps = {};
 
diff --git a/src/routes/utils/dateRange.ts b/src/routes/utils/dateRange.ts
index f27fbbbd7..34a331320 100644
--- a/src/routes/utils/dateRange.ts
+++ b/src/routes/utils/dateRange.ts
@@ -75,24 +75,22 @@ export const getDateRange = (dateRangeType: DateRangeType, isFormatted = true) =
   return dateRange;
 };
 
-export const getDateRangeTypeDefault = (queryFromRoute: Query) => {
-  return queryFromRoute.dateRangeType || DateRangeType.currentMonthToDate;
+export const getDateRangeTypeDefault = (queryFromRoute: Query, defaultToPreviousMonth: boolean): DateRangeType => {
+  if (queryFromRoute.dateRangeType) {
+    return queryFromRoute.dateRangeType;
+  }
+  return defaultToPreviousMonth ? DateRangeType.previousMonth : DateRangeType.currentMonthToDate;
 };
 
-export const getDateRangeFromQuery = (queryFromRoute: Query) => {
-  let end_date;
-  let start_date;
-
-  if (queryFromRoute.dateRangeType === DateRangeType.custom) {
-    end_date = queryFromRoute.end_date;
-    start_date = queryFromRoute.start_date;
-  }
-  if (!(end_date && start_date)) {
-    const dateRangeType = getDateRangeTypeDefault(queryFromRoute);
-    return getDateRange(dateRangeType);
-  }
+export const getDateRangeFromQuery = (queryFromRoute: Query, defaultToPreviousMonth: boolean = false) => {
+  const dateRangeType = getDateRangeTypeDefault(queryFromRoute, defaultToPreviousMonth);
+  const dateRange =
+    dateRangeType === DateRangeType.custom
+      ? { start_date: queryFromRoute.start_date, end_date: queryFromRoute.end_date }
+      : getDateRange(dateRangeType);
   return {
-    end_date,
-    start_date,
+    dateRangeType,
+    end_date: dateRange.end_date,
+    start_date: dateRange.start_date,
   };
 };