Skip to content

Commit f16a1e0

Browse files
dlabrecqdlabrecq
committed
Cost Explorer: Show previous data when current month is unavailable
1 parent e36dd8d commit f16a1e0

28 files changed

+454
-314
lines changed

‎src/routes/components/dateRange/dateRange.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import url("~@patternfly/patternfly/base/patternfly-variables.css");
2+
3+
.dropdownOverride {
4+
button.pf-v5-c-menu-toggle {
5+
max-width: unset;
6+
}
7+
}

‎src/routes/components/dateRange/dateRange.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import './dateRange.scss';
2+
3+
import type { MessageDescriptor } from '@formatjs/intl/src/types';
4+
import type { MenuToggleElement } from '@patternfly/react-core';
5+
import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
6+
import messages from 'locales/messages';
7+
import React from 'react';
8+
import { useIntl } from 'react-intl';
9+
import { getSinceDateRangeString } from 'utils/dates';
10+
11+
interface DateRangeOwnProps {
12+
dateRangeType?: string;
13+
isCurrentMonthData: boolean;
14+
isDisabled?: boolean;
15+
isExplorer?: boolean;
16+
onSelect(value: string);
17+
}
18+
19+
type DateRangeProps = DateRangeOwnProps;
20+
21+
const DateRange: React.FC<DateRangeProps> = ({ dateRangeType, isCurrentMonthData, isExplorer, onSelect }) => {
22+
const [isOpen, setIsOpen] = React.useState(false);
23+
const intl = useIntl();
24+
25+
const onToggleClick = () => {
26+
setIsOpen(!isOpen);
27+
};
28+
29+
const getOptions = () => {
30+
const options: {
31+
isDisabled?: boolean;
32+
label: MessageDescriptor;
33+
value: string;
34+
}[] = [
35+
{ label: messages.explorerDateRange, value: 'current_month_to_date', isDisabled: isCurrentMonthData === false },
36+
{ label: messages.explorerDateRange, value: 'previous_month' },
37+
];
38+
if (isExplorer) {
39+
options.push(
40+
{ label: messages.explorerDateRange, value: 'previous_month_to_date' },
41+
{ label: messages.explorerDateRange, value: 'last_thirty_days' },
42+
{ label: messages.explorerDateRange, value: 'last_sixty_days' },
43+
{ label: messages.explorerDateRange, value: 'last_ninety_days' },
44+
{ label: messages.explorerDateRange, value: 'custom' }
45+
);
46+
}
47+
return options;
48+
};
49+
50+
const handleOnSelect = (_evt, value) => {
51+
if (onSelect) {
52+
onSelect(value);
53+
}
54+
setIsOpen(false);
55+
};
56+
57+
return (
58+
<div className="dropdownOverride">
59+
<Dropdown
60+
isOpen={isOpen}
61+
onSelect={handleOnSelect}
62+
onOpenChange={(val: boolean) => setIsOpen(val)}
63+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
64+
<MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
65+
{intl.formatMessage(messages.explorerDateRange, { value: dateRangeType })}
66+
</MenuToggle>
67+
)}
68+
>
69+
<DropdownList>
70+
{getOptions().map((option, index) => (
71+
<DropdownItem
72+
value={option.value}
73+
isAriaDisabled={option.isDisabled}
74+
key={index}
75+
tooltipProps={
76+
option.isDisabled
77+
? {
78+
content: intl.formatMessage(messages.noDataForDate, {
79+
dateRange: getSinceDateRangeString(undefined, option.value === 'previous_month' ? 1 : 0, true),
80+
}),
81+
position: 'right',
82+
}
83+
: undefined
84+
}
85+
>
86+
{intl.formatMessage(option.label, { value: option.value })}
87+
</DropdownItem>
88+
))}
89+
</DropdownList>
90+
</Dropdown>
91+
</div>
92+
);
93+
};
94+
95+
export { DateRange };

‎src/routes/details/components/dateRange/index.ts‎ renamed to ‎src/routes/components/dateRange/index.ts‎

File renamed without changes.

‎src/routes/details/awsDetails/awsDetails.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,7 +419,6 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
419419
currency={currency}
420420
groupBy={groupById}
421421
isCurrentMonthData={isCurrentMonthData}
422-
isPreviousMonthData={isPreviousMonthData}
423422
onCostTypeSelect={() => handleOnCostTypeSelect(query, router)}
424423
onCurrencySelect={() => handleOnCurrencySelect(query, router)}
425424
onGroupBySelect={this.handleOnGroupBySelect}

‎src/routes/details/awsDetails/detailsHeader.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { injectIntl } from 'react-intl';
1616
import { connect } from 'react-redux';
1717
import { CostType } from 'routes/components/costType';
1818
import { Currency } from 'routes/components/currency';
19+
import { DateRange } from 'routes/components/dateRange';
1920
import { GroupBy } from 'routes/components/groupBy';
20-
import { DateRange } from 'routes/details/components/dateRange';
2121
import type { ComputedAwsReportItemsParams } from 'routes/utils/computedReport/getComputedAwsReportItems';
2222
import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAwsReportItems';
2323
import { DateRangeType } from 'routes/utils/dateRange';
@@ -39,7 +39,6 @@ interface DetailsHeaderOwnProps {
3939
costType?: string;
4040
groupBy?: string;
4141
isCurrentMonthData?: boolean;
42-
isPreviousMonthData?: boolean;
4342
onCostTypeSelect(value: string);
4443
onCurrencySelect(value: string);
4544
onGroupBySelect(value: string);
@@ -116,7 +115,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
116115
isCurrentMonthData,
117116
isDetailsDateRangeToggleEnabled,
118117
isExportsToggleEnabled,
119-
isPreviousMonthData,
120118
onCurrencySelect,
121119
onGroupBySelect,
122120
providers,
@@ -169,7 +167,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
169167
dateRangeType={currentDateRangeType}
170168
isCurrentMonthData={isCurrentMonthData}
171169
isDisabled={!showContent}
172-
isPreviousMonthData={isPreviousMonthData}
173170
onSelect={this.handleOnDateRangeSelected}
174171
/>
175172
</FlexItem>

‎src/routes/details/azureDetails/azureDetails.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,6 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
376376
currency={currency}
377377
groupBy={groupById}
378378
isCurrentMonthData={isCurrentMonthData}
379-
isPreviousMonthData={isPreviousMonthData}
380379
onCurrencySelect={() => handleOnCurrencySelect(query, router)}
381380
onGroupBySelect={this.handleOnGroupBySelect}
382381
query={query}

‎src/routes/details/azureDetails/detailsHeader.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import type { WrappedComponentProps } from 'react-intl';
1313
import { injectIntl } from 'react-intl';
1414
import { connect } from 'react-redux';
1515
import { Currency } from 'routes/components/currency';
16+
import { DateRange } from 'routes/components/dateRange';
1617
import { GroupBy } from 'routes/components/groupBy';
17-
import { DateRange } from 'routes/details/components/dateRange';
1818
import type { ComputedAzureReportItemsParams } from 'routes/utils/computedReport/getComputedAzureReportItems';
1919
import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedAzureReportItems';
2020
import { DateRangeType } from 'routes/utils/dateRange';
@@ -35,7 +35,6 @@ interface DetailsHeaderOwnProps {
3535
currency?: string;
3636
groupBy?: string;
3737
isCurrentMonthData?: boolean;
38-
isPreviousMonthData?: boolean;
3938
onCurrencySelect(value: string);
4039
onGroupBySelect(value: string);
4140
query?: Query;
@@ -100,7 +99,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
10099
isCurrentMonthData,
101100
isDetailsDateRangeToggleEnabled,
102101
isExportsToggleEnabled,
103-
isPreviousMonthData,
104102
onCurrencySelect,
105103
onGroupBySelect,
106104
providers,
@@ -148,7 +146,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
148146
dateRangeType={currentDateRangeType}
149147
isCurrentMonthData={isCurrentMonthData}
150148
isDisabled={!showContent}
151-
isPreviousMonthData={isPreviousMonthData}
152149
onSelect={this.handleOnDateRangeSelected}
153150
/>
154151
</FlexItem>

‎src/routes/details/components/dateRange/dateRange.tsx‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎src/routes/details/gcpDetails/detailsHeader.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import type { WrappedComponentProps } from 'react-intl';
1313
import { injectIntl } from 'react-intl';
1414
import { connect } from 'react-redux';
1515
import { Currency } from 'routes/components/currency';
16+
import { DateRange } from 'routes/components/dateRange';
1617
import { GroupBy } from 'routes/components/groupBy';
17-
import { DateRange } from 'routes/details/components/dateRange';
1818
import type { ComputedGcpReportItemsParams } from 'routes/utils/computedReport/getComputedGcpReportItems';
1919
import { getIdKeyForGroupBy } from 'routes/utils/computedReport/getComputedGcpReportItems';
2020
import { DateRangeType } from 'routes/utils/dateRange';
@@ -35,7 +35,6 @@ interface DetailsHeaderOwnProps {
3535
currency?: string;
3636
groupBy?: string;
3737
isCurrentMonthData?: boolean;
38-
isPreviousMonthData?: boolean;
3938
onCurrencySelect(value: string);
4039
onGroupBySelect(value: string);
4140
query?: Query;
@@ -101,7 +100,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
101100
isCurrentMonthData,
102101
isDetailsDateRangeToggleEnabled,
103102
isExportsToggleEnabled,
104-
isPreviousMonthData,
105103
onCurrencySelect,
106104
onGroupBySelect,
107105
providers,
@@ -149,7 +147,6 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
149147
dateRangeType={currentDateRangeType}
150148
isCurrentMonthData={isCurrentMonthData}
151149
isDisabled={!showContent}
152-
isPreviousMonthData={isPreviousMonthData}
153150
onSelect={this.handleOnDateRangeSelected}
154151
/>
155152
</FlexItem>

‎src/routes/details/gcpDetails/gcpDetails.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,6 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
376376
currency={currency}
377377
groupBy={groupById}
378378
isCurrentMonthData={isCurrentMonthData}
379-
isPreviousMonthData={isPreviousMonthData}
380379
onCurrencySelect={() => handleOnCurrencySelect(query, router)}
381380
onGroupBySelect={this.handleOnGroupBySelect}
382381
query={query}

0 commit comments

Comments
 (0)