Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom date range fix #4055

Merged
merged 1 commit into from
Oct 7, 2024
+98 −98
Merged

Custom date range fix #4055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 22 additions & 28 deletions src/routes/explorer/explorer.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading