Skip to content

Commit

Permalink
Custom date range fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlabrecq
dlabrecq committed Oct 7, 2024
1 parent f4d3b0c commit dca0b2e
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 98 deletions.
50 changes: 22 additions & 28 deletions src/routes/explorer/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -83,6 +82,7 @@ interface ExplorerStateProps {
costType?: string;
currency?: string;
dateRangeType: DateRangeType;
endDate?: Date;
gcpProviders: Providers;
ibmProviders: Providers;
isAccountInfoEmptyStateToggleEnabled?: boolean;
Expand All @@ -103,6 +103,7 @@ interface ExplorerStateProps {
reportFetchStatus: FetchStatus;
reportQueryString: string;
rhelProviders: Providers;
startDate?: Date;
userAccess: UserAccess;
userAccessError: AxiosError;
userAccessFetchStatus: FetchStatus;
Expand All @@ -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;
Expand All @@ -132,7 +130,6 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
protected defaultState: ExplorerState = {
columns: [],
isAllSelected: false,
isDateRangeSelected: false,
isExportModalOpen: false,
rows: [],
selectedItems: [],
Expand Down Expand Up @@ -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);
Expand All @@ -308,7 +305,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
return (
<ExplorerTable
costDistribution={costDistribution}
dateRangeType={dateRangeType}
endDate={endDate}
groupBy={
groupByCostCategory
? `${awsCategoryPrefix}${groupByCostCategory}`
Expand All @@ -329,6 +326,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
query={query}
report={report}
selectedItems={selectedItems}
startDate={startDate}
/>
);
};
Expand Down Expand Up @@ -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 });
};
Expand Down Expand Up @@ -494,6 +480,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
costType,
currency,
dateRangeType,
endDate,
gcpProviders,
ibmProviders,
intl,
Expand All @@ -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;
Expand Down Expand Up @@ -561,13 +548,16 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
return <NoData title={title} />;
}

const isDateRangeSelected = query.dateRangeType !== undefined;

return (
<div style={styles.explorer}>
<ExplorerHeader
costDistribution={costDistribution}
costType={costType}
currency={currency}
dateRangeType={dateRangeType}
endDate={endDate}
groupBy={
groupByCostCategory
? `${awsCategoryPrefix}${groupByCostCategory}`
Expand All @@ -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()
Expand All @@ -610,6 +599,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
costType={costType}
currency={currency}
dateRangeType={dateRangeType}
endDate={endDate}
groupBy={
groupByCostCategory
? `${awsCategoryPrefix}${groupByCostCategory}`
Expand All @@ -618,6 +608,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
: groupById
}
perspective={perspective}
startDate={startDate}
/>
</div>
</div>
Expand All @@ -630,6 +621,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
costType={costType}
currency={currency}
dateRangeType={dateRangeType}
endDate={endDate}
groupBy={
groupByCostCategory
? `${awsCategoryPrefix}${groupByCostCategory}`
Expand All @@ -638,6 +630,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
: groupById
}
perspective={perspective}
startDate={startDate}
/>
</div>
</div>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -777,6 +769,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
costType,
currency,
dateRangeType,
endDate: end_date,
gcpProviders,
ibmProviders,
isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
Expand All @@ -793,6 +786,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
providersFetchStatus,
providersQueryString,
query,
startDate: start_date,
report,
reportError,
reportFetchStatus,
Expand Down
21 changes: 8 additions & 13 deletions src/routes/explorer/explorerChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -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 => {
Expand All @@ -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');
Expand Down Expand Up @@ -278,15 +276,14 @@ 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);
const group_by = queryFromRoute.group_by ? queryFromRoute.group_by : { [groupBy]: '*' }; // Ensure group_by key is not undefined

const costDistribution =
perspective === PerspectiveType.ocp && groupBy === 'project' ? getCostDistribution() : undefined;
const { end_date, start_date } = getDateRange(dateRangeType);

const query: any = {
...queryFromRoute,
Expand All @@ -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' },
}),
Expand All @@ -320,14 +317,12 @@ const mapStateToProps = createMapStateToProps<ExplorerChartOwnProps, ExplorerCha
);

return {
end_date,
perspective,
query,
report,
reportError,
reportFetchStatus,
reportQueryString,
start_date,
};
}
);
Expand Down
18 changes: 12 additions & 6 deletions src/routes/explorer/explorerDatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand All @@ -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'),
});
}
}
Expand Down
Loading

0 comments on commit dca0b2e

Please sign in to comment.