Skip to content

Commit

Permalink
Merge pull request #3151 from dlabrecq/optimizations
Browse files Browse the repository at this point in the history 
Close optimizations drawer
  • Loading branch information
@dlabrecq
dlabrecq authored May 4, 2023
2 parents 62b9f96 + 7a79824 commit 88ab53d
Show file tree
Hide file tree
Showing 16 changed files with 194 additions and 152 deletions.
26 changes: 21 additions & 5 deletions src/routes/views/components/optimizations/optimizationsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ interface OptimizationsTableOwnProps extends RouterComponentProps {
}

interface OptimizationsTableState {
currentRow?: number;
columns?: any[];
rows?: any[];
}
Expand Down Expand Up @@ -147,22 +148,37 @@ class OptimizationsTableBase extends React.Component<OptimizationsTableProps, Op
};

private handleOnRowClick = (event: React.KeyboardEvent | React.MouseEvent, rowIndex: number) => {
const { openOptimizationsDrawer } = this.props;
const { rows } = this.state;
const { closeOptimizationsDrawer, isOpen, openOptimizationsDrawer } = this.props;
const { currentRow, rows } = this.state;

this.setState({ currentRow: rowIndex }, () => {
if (currentRow === rowIndex && isOpen) {
closeOptimizationsDrawer();
} else {
openOptimizationsDrawer(rows[rowIndex].optimization);
}
});
};

openOptimizationsDrawer(rows[rowIndex].optimization);
private handleOnSort = (value: string, isSortAscending: boolean) => {
const { closeOptimizationsDrawer, onSort } = this.props;

closeOptimizationsDrawer();
if (onSort) {
onSort(value, isSortAscending);
}
};

public render() {
const { isLoading, onSort } = this.props;
const { isLoading } = this.props;
const { columns, rows } = this.state;

return (
<DataTable
columns={columns}
isLoading={isLoading}
isOptimizations
onSort={onSort}
onSort={this.handleOnSort}
rows={rows}
onRowClick={this.handleOnRowClick}
/>
Expand Down
29 changes: 24 additions & 5 deletions src/routes/views/components/optimizations/optimizationsToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { connect } from 'react-redux';
import { DataToolbar } from 'routes/views/components/dataToolbar';
import type { Filter } from 'routes/views/utils/filter';
import { createMapStateToProps } from 'store/common';
import { uiActions } from 'store/ui';

interface OptimizationsToolbarOwnProps {
isDisabled?: boolean;
Expand All @@ -25,7 +26,7 @@ interface OptimizationsToolbarStateProps {
}

interface OptimizationsToolbarDispatchProps {
// TBD...
closeOptimizationsDrawer: typeof uiActions.closeOptimizationsDrawer;
}

interface OptimizationsToolbarState {
Expand Down Expand Up @@ -60,8 +61,26 @@ export class OptimizationsToolbarBase extends React.Component<OptimizationsToolb
return isProject ? options : options.filter(option => option.key !== 'project');
};

private handleOnFilterAdded = (filter: Filter) => {
const { closeOptimizationsDrawer, onFilterAdded } = this.props;

closeOptimizationsDrawer();
if (onFilterAdded) {
onFilterAdded(filter);
}
};

private handleOnFilterRemoved = (filter: Filter) => {
const { closeOptimizationsDrawer, onFilterRemoved } = this.props;

closeOptimizationsDrawer();
if (onFilterRemoved) {
onFilterRemoved(filter);
}
};

public render() {
const { isDisabled, itemsPerPage, itemsTotal, onFilterAdded, onFilterRemoved, pagination, query } = this.props;
const { isDisabled, itemsPerPage, itemsTotal, pagination, query } = this.props;
const { categoryOptions } = this.state;

return (
Expand All @@ -70,8 +89,8 @@ export class OptimizationsToolbarBase extends React.Component<OptimizationsToolb
isDisabled={isDisabled}
itemsPerPage={itemsPerPage}
itemsTotal={itemsTotal}
onFilterAdded={onFilterAdded}
onFilterRemoved={onFilterRemoved}
onFilterAdded={this.handleOnFilterAdded}
onFilterRemoved={this.handleOnFilterRemoved}
pagination={pagination}
query={query}
showFilter
Expand All @@ -88,7 +107,7 @@ const mapStateToProps = createMapStateToProps<OptimizationsToolbarOwnProps, Opti
});

const mapDispatchToProps: OptimizationsToolbarDispatchProps = {
// TBD...
closeOptimizationsDrawer: uiActions.closeOptimizationsDrawer,
};

const OptimizationsToolbarConnect = connect(mapStateToProps, mapDispatchToProps)(OptimizationsToolbarBase);
Expand Down
28 changes: 14 additions & 14 deletions src/routes/views/details/awsDetails/awsDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ import { NotAvailable } from 'routes/state/notAvailable';
import { ExportModal } from 'routes/views/components/export';
import { getGroupByCostCategory, getGroupByOrgValue, getGroupByTagKey } from 'routes/views/utils/groupBy';
import {
handleCostTypeSelected,
handleCurrencySelected,
handleFilterAdded,
handleFilterRemoved,
handlePerPageSelect,
handleSetPage,
handleSort,
handleOnCostTypeSelected,
handleOnCurrencySelected,
handleOnFilterAdded,
handleOnFilterRemoved,
handleOnPerPageSelect,
handleOnSetPage,
handleOnSort,
} from 'routes/views/utils/handles';
import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers';
import { getRouteForQuery } from 'routes/views/utils/query';
Expand Down Expand Up @@ -199,8 +199,8 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
isCompact={!isBottom}
isDisabled={isDisabled}
itemCount={count}
onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)}
onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)}
page={page}
perPage={limit}
titles={{
Expand Down Expand Up @@ -239,7 +239,7 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
isAllSelected={isAllSelected}
isLoading={reportFetchStatus === FetchStatus.inProgress}
onSelected={this.handleSelected}
onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)}
onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)}
report={report}
reportQueryString={reportQueryString}
selectedItems={selectedItems}
Expand Down Expand Up @@ -273,8 +273,8 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
itemsTotal={itemsTotal}
onBulkSelected={this.handleBulkSelected}
onExportClicked={this.handleExportModalOpen}
onFilterAdded={filter => handleFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleFilterRemoved(query, router, filter)}
onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
pagination={this.getPagination(isDisabled)}
query={query}
selectedItems={selectedItems}
Expand Down Expand Up @@ -393,8 +393,8 @@ class AwsDetails extends React.Component<AwsDetailsProps, AwsDetailsState> {
costType={costType}
currency={currency}
groupBy={groupById}
onCostTypeSelected={value => handleCostTypeSelected(query, router, value)}
onCurrencySelected={value => handleCurrencySelected(query, router, value)}
onCostTypeSelected={value => handleOnCostTypeSelected(query, router, value)}
onCurrencySelected={value => handleOnCurrencySelected(query, router, value)}
onGroupBySelected={this.handleGroupBySelected}
report={report}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/routes/views/details/awsDetails/detailsHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const resourcePathsType = ResourcePathsType.aws;
const tagPathsType = TagPathsType.aws;

class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
private handleCostTypeSelected = (value: string) => {
private handleOnCostTypeSelected = (value: string) => {
const { onCostTypeSelected } = this.props;

if (onCostTypeSelected) {
Expand Down Expand Up @@ -115,7 +115,7 @@ class DetailsHeaderBase extends React.Component<DetailsHeaderProps, any> {
tagPathsType={tagPathsType}
/>
<div style={styles.costType}>
<CostType costType={costType} onSelect={this.handleCostTypeSelected} />
<CostType costType={costType} onSelect={this.handleOnCostTypeSelected} />
</div>
</div>
{showContent && (
Expand Down
24 changes: 12 additions & 12 deletions src/routes/views/details/azureDetails/azureDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable';
import { ExportModal } from 'routes/views/components/export';
import { getGroupByTagKey } from 'routes/views/utils/groupBy';
import {
handleCurrencySelected,
handleFilterAdded,
handleFilterRemoved,
handlePerPageSelect,
handleSetPage,
handleSort,
handleOnCurrencySelected,
handleOnFilterAdded,
handleOnFilterRemoved,
handleOnPerPageSelect,
handleOnSetPage,
handleOnSort,
} from 'routes/views/utils/handles';
import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers';
import { getRouteForQuery } from 'routes/views/utils/query';
Expand Down Expand Up @@ -186,8 +186,8 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
isCompact={!isBottom}
isDisabled={isDisabled}
itemCount={count}
onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)}
onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)}
page={page}
perPage={limit}
titles={{
Expand Down Expand Up @@ -216,7 +216,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
isAllSelected={isAllSelected}
isLoading={reportFetchStatus === FetchStatus.inProgress}
onSelected={this.handleSelected}
onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)}
onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)}
report={report}
reportQueryString={reportQueryString}
selectedItems={selectedItems}
Expand All @@ -243,8 +243,8 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
itemsTotal={itemsTotal}
onBulkSelected={this.handleBulkSelected}
onExportClicked={this.handleExportModalOpen}
onFilterAdded={filter => handleFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleFilterRemoved(query, router, filter)}
onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
pagination={this.getPagination(isDisabled)}
query={query}
selectedItems={selectedItems}
Expand Down Expand Up @@ -352,7 +352,7 @@ class AzureDetails extends React.Component<AzureDetailsProps, AzureDetailsState>
<DetailsHeader
currency={currency}
groupBy={groupById}
onCurrencySelected={value => handleCurrencySelected(query, router, value)}
onCurrencySelected={value => handleOnCurrencySelected(query, router, value)}
onGroupBySelected={this.handleGroupBySelected}
report={report}
/>
Expand Down
12 changes: 6 additions & 6 deletions src/routes/views/details/components/breakdown/breakdownBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import { NoData } from 'routes/state/noData';
import { NoProviders } from 'routes/state/noProviders';
import { NotAvailable } from 'routes/state/notAvailable';
import {
handleCostDistributionSelected,
handleCostTypeSelected,
handleCurrencySelected,
handleOnCostDistributionSelected,
handleOnCostTypeSelected,
handleOnCurrencySelected,
} from 'routes/views/utils/handles';
import { hasCurrentMonthData } from 'routes/views/utils/providers';
import { FetchStatus } from 'store/common';
Expand Down Expand Up @@ -303,9 +303,9 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> {
description={description}
detailsURL={detailsURL}
groupBy={groupBy}
onCostDistributionSelected={value => handleCostDistributionSelected(query, router, value)}
onCostTypeSelected={value => handleCostTypeSelected(query, router, value)}
onCurrencySelected={value => handleCurrencySelected(query, router, value)}
onCostDistributionSelected={value => handleOnCostDistributionSelected(query, router, value)}
onCostTypeSelected={value => handleOnCostTypeSelected(query, router, value)}
onCurrencySelected={value => handleOnCurrencySelected(query, router, value)}
query={query}
report={report}
showCostDistribution={showCostDistribution}
Expand Down
24 changes: 12 additions & 12 deletions src/routes/views/details/gcpDetails/gcpDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable';
import { ExportModal } from 'routes/views/components/export';
import { getGroupByTagKey } from 'routes/views/utils/groupBy';
import {
handleCurrencySelected,
handleFilterAdded,
handleFilterRemoved,
handlePerPageSelect,
handleSetPage,
handleSort,
handleOnCurrencySelected,
handleOnFilterAdded,
handleOnFilterRemoved,
handleOnPerPageSelect,
handleOnSetPage,
handleOnSort,
} from 'routes/views/utils/handles';
import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers';
import { getRouteForQuery } from 'routes/views/utils/query';
Expand Down Expand Up @@ -186,8 +186,8 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
isCompact={!isBottom}
isDisabled={isDisabled}
itemCount={count}
onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)}
onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)}
page={page}
perPage={limit}
titles={{
Expand Down Expand Up @@ -215,7 +215,7 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
isAllSelected={isAllSelected}
isLoading={reportFetchStatus === FetchStatus.inProgress}
onSelected={this.handleSelected}
onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)}
onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)}
report={report}
reportQueryString={reportQueryString}
selectedItems={selectedItems}
Expand All @@ -242,8 +242,8 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
itemsTotal={itemsTotal}
onBulkSelected={this.handleBulkSelected}
onExportClicked={this.handleExportModalOpen}
onFilterAdded={filter => handleFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleFilterRemoved(query, router, filter)}
onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
pagination={this.getPagination(isDisabled)}
query={query}
selectedItems={selectedItems}
Expand Down Expand Up @@ -341,7 +341,7 @@ class GcpDetails extends React.Component<GcpDetailsProps, GcpDetailsState> {
<DetailsHeader
currency={currency}
groupBy={groupById}
onCurrencySelected={value => handleCurrencySelected(query, router, value)}
onCurrencySelected={value => handleOnCurrencySelected(query, router, value)}
onGroupBySelected={this.handleGroupBySelected}
report={report}
/>
Expand Down
24 changes: 12 additions & 12 deletions src/routes/views/details/ibmDetails/ibmDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable';
import { ExportModal } from 'routes/views/components/export';
import { getGroupByTagKey } from 'routes/views/utils/groupBy';
import {
handleCurrencySelected,
handleFilterAdded,
handleFilterRemoved,
handlePerPageSelect,
handleSetPage,
handleSort,
handleOnCurrencySelected,
handleOnFilterAdded,
handleOnFilterRemoved,
handleOnPerPageSelect,
handleOnSetPage,
handleOnSort,
} from 'routes/views/utils/handles';
import { hasCurrentMonthData } from 'routes/views/utils/providers';
import { filterProviders } from 'routes/views/utils/providers';
Expand Down Expand Up @@ -187,8 +187,8 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> {
isCompact={!isBottom}
isDisabled={isDisabled}
itemCount={count}
onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)}
onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)}
onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)}
page={page}
perPage={limit}
titles={{
Expand Down Expand Up @@ -217,7 +217,7 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> {
isAllSelected={isAllSelected}
isLoading={reportFetchStatus === FetchStatus.inProgress}
onSelected={this.handleSelected}
onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)}
onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)}
report={report}
reportQueryString={reportQueryString}
selectedItems={selectedItems}
Expand All @@ -244,8 +244,8 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> {
itemsTotal={itemsTotal}
onBulkSelected={this.handleBulkSelected}
onExportClicked={this.handleExportModalOpen}
onFilterAdded={filter => handleFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleFilterRemoved(query, router, filter)}
onFilterAdded={filter => handleOnFilterAdded(query, router, filter)}
onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)}
pagination={this.getPagination(isDisabled)}
query={query}
selectedItems={selectedItems}
Expand Down Expand Up @@ -343,7 +343,7 @@ class IbmDetails extends React.Component<IbmDetailsProps, IbmDetailsState> {
<DetailsHeader
currency={currency}
groupBy={groupById}
onCurrencySelected={value => handleCurrencySelected(query, router, value)}
onCurrencySelected={value => handleOnCurrencySelected(query, router, value)}
onGroupBySelected={this.handleGroupBySelected}
report={report}
/>
Expand Down
Loading

0 comments on commit 88ab53d

Please sign in to comment.