Skip to content

Commit 484ad0e

Browse files
dlabrecqdlabrecq
authored
Merge pull request #4052 from dlabrecq/integration-status
Integration status
2 parents 9c8e8d0 + b123a27 commit 484ad0e

File tree

24 files changed

+392
-48
lines changed

24 files changed

+392
-48
lines changed

‎src/components/featureToggle/featureToggle.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
55
import { FeatureToggleActions } from 'store/featureToggle';
66

77
export const enum FeatureToggle {
8+
accountInfoDetails = 'cost-management.ui.account-info-details', // https://issues.redhat.com/browse/COST-5386
89
accountInfoEmptyState = 'cost-management.ui.account-info-empty-state', // https://issues.redhat.com/browse/COST-5335
910
awsEc2Instances = 'cost-management.ui.aws-ec2-instances', // https://issues.redhat.com/browse/COST-4855
1011
chartSkeleton = 'cost-management.ui.chart-skeleton', // https://issues.redhat.com/browse/COST-5573
@@ -21,6 +22,10 @@ const useIsToggleEnabled = (toggle: FeatureToggle) => {
2122
return client.isEnabled(toggle);
2223
};
2324

25+
export const useIsAccountInfoDetailsToggleEnabled = () => {
26+
return useIsToggleEnabled(FeatureToggle.accountInfoDetails);
27+
};
28+
2429
export const useIsAccountInfoEmptyStateToggleEnabled = () => {
2530
return useIsToggleEnabled(FeatureToggle.accountInfoEmptyState);
2631
};
@@ -62,6 +67,7 @@ export const useFeatureToggle = () => {
6267
const dispatch = useDispatch();
6368
const { auth } = useChrome();
6469

70+
const isAccountInfoDetailsToggleEnabled = useIsAccountInfoDetailsToggleEnabled();
6571
const isAccountInfoEmptyStateToggleEnabled = useIsAccountInfoEmptyStateToggleEnabled();
6672
const isAwsEc2InstancesToggleEnabled = useIsAwsEc2InstancesToggleEnabled();
6773
const isChartSkeletonToggleEnabled = useIsChartSkeletonToggleEnabled();
@@ -82,6 +88,7 @@ export const useFeatureToggle = () => {
8288
// Workaround for code that doesn't use hooks
8389
dispatch(
8490
FeatureToggleActions.setFeatureToggle({
91+
isAccountInfoDetailsToggleEnabled,
8592
isAccountInfoEmptyStateToggleEnabled,
8693
isAwsEc2InstancesToggleEnabled,
8794
isChartSkeletonToggleEnabled,
@@ -98,6 +105,7 @@ export const useFeatureToggle = () => {
98105
fetchUser(identity => console.log('User identity:', identity));
99106
}
100107
}, [
108+
isAccountInfoDetailsToggleEnabled,
101109
isAccountInfoEmptyStateToggleEnabled,
102110
isAwsEc2InstancesToggleEnabled,
103111
isChartSkeletonToggleEnabled,

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { DetailsToolbar } from './detailsToolbar';
5656
interface AwsDetailsStateProps {
5757
costType: string;
5858
currency?: string;
59+
isAccountInfoDetailsToggleEnabled?: boolean;
5960
isAccountInfoEmptyStateToggleEnabled?: boolean;
6061
isCurrentMonthData?: boolean;
6162
isDetailsDateRangeToggleEnabled?: boolean;
@@ -215,7 +216,15 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
215216
};
216217

217218
private getTable = () => {
218-
const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props;
219+
const {
220+
isAccountInfoDetailsToggleEnabled,
221+
query,
222+
report,
223+
reportFetchStatus,
224+
reportQueryString,
225+
router,
226+
timeScopeValue,
227+
} = this.props;
219228
const { isAllSelected, selectedItems } = this.state;
220229

221230
const groupById = getIdKeyForGroupBy(query.group_by);
@@ -238,6 +247,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
238247
groupByCostCategory={groupByCostCategory}
239248
groupByTagKey={groupByTagKey}
240249
groupByOrg={groupByOrg}
250+
isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled}
241251
isAllSelected={isAllSelected}
242252
isLoading={reportFetchStatus === FetchStatus.inProgress}
243253
onSelect={this.handleonSelect}
@@ -524,6 +534,7 @@ const mapStateToProps = createMapStateToProps<AwsDetailsOwnProps, AwsDetailsStat
524534
return {
525535
costType,
526536
currency,
537+
isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
527538
isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
528539
isCurrentMonthData,
529540
isDetailsDateRangeToggleEnabled,

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

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'routes/components/dataTable/dataTable.scss';
22

3+
import { ProviderType } from 'api/providers';
34
import type { Query } from 'api/queries/query';
45
import type { AwsReport } from 'api/reports/awsReports';
56
import { ReportPathsType, ReportType } from 'api/reports/report';
@@ -13,6 +14,7 @@ import { DataTable } from 'routes/components/dataTable';
1314
import { styles } from 'routes/components/dataTable/dataTable.styles';
1415
import { EmptyValueState } from 'routes/components/state/emptyValueState';
1516
import { Actions } from 'routes/details/components/actions';
17+
import { ProviderDetailsModal } from 'routes/details/components/providerDetails';
1618
import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
1719
import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
1820
import { getOrgBreakdownPath } from 'routes/utils/paths';
@@ -30,6 +32,7 @@ interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentPro
3032
groupByCostCategory?: string;
3133
groupByOrg?: string;
3234
groupByTagKey?: string;
35+
isAccountInfoDetailsToggleEnabled?: boolean;
3336
isAllSelected?: boolean;
3437
isLoading?: boolean;
3538
onSelect(items: ComputedReportItem[], isSelected: boolean);
@@ -83,6 +86,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
8386
groupByOrg,
8487
groupByTagKey,
8588
intl,
89+
isAccountInfoDetailsToggleEnabled,
8690
isAllSelected,
8791
query,
8892
report,
@@ -93,6 +97,8 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
9397
return;
9498
}
9599

100+
const isGroupByAccount = groupBy === 'account';
101+
96102
const rows = [];
97103
const computedItems = getUnsortedComputedReportItems({
98104
report,
@@ -136,10 +142,14 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
136142
name: '',
137143
},
138144
{
139-
orderBy: groupBy === 'account' ? 'account_alias' : groupBy,
145+
orderBy: isGroupByAccount ? 'account_alias' : groupBy,
140146
name: intl.formatMessage(messages.detailsResourceNames, { value: groupBy }),
141147
...(computedItems.length && { isSortable: true }),
142148
},
149+
{
150+
hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled),
151+
name: intl.formatMessage(messages.costModelsLastUpdated),
152+
},
143153
{
144154
name: intl.formatMessage(messages.monthOverMonthChange),
145155
},
@@ -201,6 +211,17 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
201211
</>
202212
),
203213
},
214+
{
215+
hidden: !(isGroupByAccount && isAccountInfoDetailsToggleEnabled),
216+
value: (
217+
<ProviderDetailsModal
218+
isLastUpdatedStatus
219+
isOverallStatus
220+
uuId={item.source_uuid?.[0]}
221+
providerType={ProviderType.aws}
222+
/>
223+
),
224+
},
204225
{ value: monthOverMonth },
205226
{ value: cost, style: styles.managedColumn },
206227
{ value: actions },
@@ -211,9 +232,15 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
211232
});
212233
});
213234

235+
const filteredColumns = (columns as any[]).filter(column => !column.hidden);
236+
const filteredRows = rows.map(({ ...row }) => {
237+
row.cells = row.cells.filter(cell => !cell.hidden);
238+
return row;
239+
});
240+
214241
this.setState({
215-
columns,
216-
rows,
242+
columns: filteredColumns,
243+
rows: filteredRows,
217244
});
218245
};
219246

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import { DetailsToolbar } from './detailsToolbar';
5252

5353
interface AzureDetailsStateProps {
5454
currency?: string;
55+
isAccountInfoDetailsToggleEnabled?: boolean;
5556
isAccountInfoEmptyStateToggleEnabled?: boolean;
5657
isCurrentMonthData?: boolean;
5758
isDetailsDateRangeToggleEnabled?: boolean;
@@ -202,7 +203,15 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
202203
};
203204

204205
private getTable = () => {
205-
const { query, report, reportFetchStatus, reportQueryString, router, timeScopeValue } = this.props;
206+
const {
207+
isAccountInfoDetailsToggleEnabled,
208+
query,
209+
report,
210+
reportFetchStatus,
211+
reportQueryString,
212+
router,
213+
timeScopeValue,
214+
} = this.props;
206215
const { isAllSelected, selectedItems } = this.state;
207216

208217
const groupById = getIdKeyForGroupBy(query.group_by);
@@ -215,6 +224,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
215224
filterBy={query.filter_by}
216225
groupBy={groupByTagKey ? `${tagPrefix}${groupByTagKey}` : groupById}
217226
groupByTagKey={groupByTagKey}
227+
isAccountInfoDetailsToggleEnabled={isAccountInfoDetailsToggleEnabled}
218228
isAllSelected={isAllSelected}
219229
isLoading={reportFetchStatus === FetchStatus.inProgress}
220230
onSelect={this.handleOnSelect}
@@ -468,6 +478,7 @@ const mapStateToProps = createMapStateToProps<AzureDetailsOwnProps, AzureDetails
468478

469479
return {
470480
currency,
481+
isAccountInfoDetailsToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoDetailsToggleEnabled(state),
471482
isAccountInfoEmptyStateToggleEnabled: FeatureToggleSelectors.selectIsAccountInfoEmptyStateToggleEnabled(state),
472483
isCurrentMonthData,
473484
isDetailsDateRangeToggleEnabled,

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

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'routes/components/dataTable/dataTable.scss';
22

3+
import { ProviderType } from 'api/providers';
34
import type { Query } from 'api/queries/query';
45
import type { AzureReport } from 'api/reports/azureReports';
56
import { ReportPathsType, ReportType } from 'api/reports/report';
@@ -13,6 +14,7 @@ import { DataTable } from 'routes/components/dataTable';
1314
import { styles } from 'routes/components/dataTable/dataTable.styles';
1415
import { EmptyValueState } from 'routes/components/state/emptyValueState';
1516
import { Actions } from 'routes/details/components/actions';
17+
import { ProviderDetailsModal } from 'routes/details/components/providerDetails';
1618
import type { ComputedReportItem } from 'routes/utils/computedReport/getComputedReportItems';
1719
import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
1820
import { getBreakdownPath } from 'routes/utils/paths';
@@ -26,9 +28,10 @@ import { withRouter } from 'utils/router';
2628
interface DetailsTableOwnProps extends RouterComponentProps, WrappedComponentProps {
2729
breadcrumbPath?: string;
2830
filterBy?: any;
29-
isAllSelected?: boolean;
3031
groupBy: string;
3132
groupByTagKey?: string;
33+
isAccountInfoDetailsToggleEnabled?: boolean;
34+
isAllSelected?: boolean;
3235
isLoading?: boolean;
3336
onSelect(items: ComputedReportItem[], isSelected: boolean);
3437
onSort(sortType: string, isSortAscending: boolean);
@@ -74,12 +77,24 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
7477
}
7578

7679
private initDatum = () => {
77-
const { breadcrumbPath, groupBy, groupByTagKey, intl, isAllSelected, query, report, router, selectedItems } =
78-
this.props;
80+
const {
81+
breadcrumbPath,
82+
groupBy,
83+
groupByTagKey,
84+
intl,
85+
isAccountInfoDetailsToggleEnabled,
86+
isAllSelected,
87+
query,
88+
report,
89+
router,
90+
selectedItems,
91+
} = this.props;
7992
if (!report) {
8093
return;
8194
}
8295

96+
const isGroupBySubscriptionGuid = groupBy === 'subscription_guid';
97+
8398
const rows = [];
8499
const computedItems = getUnsortedComputedReportItems({
85100
report,
@@ -112,10 +127,14 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
112127
name: '',
113128
},
114129
{
115-
orderBy: groupBy === 'subscription_guid' ? 'subscription_name' : groupBy,
130+
orderBy: isGroupBySubscriptionGuid ? 'subscription_name' : groupBy,
116131
name: intl.formatMessage(messages.detailsResourceNames, { value: groupBy }),
117132
...(computedItems.length && { isSortable: true }),
118133
},
134+
{
135+
hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled),
136+
name: intl.formatMessage(messages.costModelsLastUpdated),
137+
},
119138
{
120139
name: intl.formatMessage(messages.monthOverMonthChange),
121140
},
@@ -172,6 +191,17 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
172191
</>
173192
),
174193
},
194+
{
195+
hidden: !(isGroupBySubscriptionGuid && isAccountInfoDetailsToggleEnabled),
196+
value: (
197+
<ProviderDetailsModal
198+
isLastUpdatedStatus
199+
isOverallStatus
200+
uuId={item.source_uuid?.[0]}
201+
providerType={ProviderType.azure}
202+
/>
203+
),
204+
},
175205
{ value: monthOverMonth },
176206
{ value: cost, style: styles.managedColumn },
177207
{ value: actions },
@@ -183,9 +213,15 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
183213
});
184214
});
185215

216+
const filteredColumns = (columns as any[]).filter(column => !column.hidden);
217+
const filteredRows = rows.map(({ ...row }) => {
218+
row.cells = row.cells.filter(cell => !cell.hidden);
219+
return row;
220+
});
221+
186222
this.setState({
187-
columns,
188-
rows,
223+
columns: filteredColumns,
224+
rows: filteredRows,
189225
});
190226
};
191227

‎src/routes/details/components/providerDetails/components/overallStatus.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@ import { styles } from './component.styles';
2424
interface OverallStatusOwnProps {
2525
clusterId?: string;
2626
isLastUpdated?: boolean;
27+
isLastUpdatedStatus?: boolean;
2728
isStatusMsg?: boolean;
2829
providerId?: string;
2930
providerType: ProviderType;
31+
uuId?: string;
3032
}
3133

3234
interface OverallStatusStateProps {
@@ -41,9 +43,11 @@ type OverallStatusProps = OverallStatusOwnProps;
4143
const OverallStatus: React.FC<OverallStatusProps> = ({
4244
clusterId,
4345
isLastUpdated,
46+
isLastUpdatedStatus,
4447
isStatusMsg,
4548
providerId,
4649
providerType,
50+
uuId,
4751
}: OverallStatusProps) => {
4852
const { providers, providersError } = useMapToProps();
4953
const intl = useIntl();
@@ -55,7 +59,10 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
5559
// Filter OCP providers to skip an extra API request
5660
const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
5761
const provider = filteredProviders?.find(
58-
val => providerId === val.id || (clusterId && val.authentication?.credentials?.cluster_id === clusterId)
62+
val =>
63+
providerId === val.id ||
64+
(clusterId && val.authentication?.credentials?.cluster_id === clusterId) ||
65+
uuId === val.uuid
5966
);
6067
const cloudProvider = providers?.data?.find(val => val.uuid === provider?.infrastructure?.uuid);
6168

@@ -122,6 +129,18 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
122129
if (isLastUpdated) {
123130
return overallStatus.lastUpdated ? formatDate(overallStatus.lastUpdated) : null;
124131
}
132+
if (isLastUpdatedStatus) {
133+
return (
134+
<>
135+
<span style={styles.statusIcon}>{getOverallStatusIcon(overallStatus.status)}</span>
136+
<span style={styles.description}>
137+
{overallStatus.lastUpdated
138+
? formatDate(overallStatus.lastUpdated)
139+
: intl.formatMessage(messages.statusMsg, { value: overallStatus.status })}
140+
</span>
141+
</>
142+
);
143+
}
125144
if (overallStatus.msg && overallStatus.status) {
126145
return (
127146
<>

0 commit comments

Comments
 (0)