Skip to content

Commit a30dd1e

Browse files
RaubzeugRaubzeug
committed
fix: code-review
1 parent 69bdd0b commit a30dd1e

File tree

3 files changed

+27
-107
lines changed

3 files changed

+27
-107
lines changed

‎src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@ import {skipToken} from '@reduxjs/toolkit/query';
44

55
import {ResponseError} from '../../../../components/Errors/ResponseError';
66
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
7+
import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup';
78
import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
89
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
910
import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
1011
import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
1112
import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic';
1213
import {cn} from '../../../../utils/cn';
13-
import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants';
14-
import {
15-
useAutoRefreshInterval,
16-
useSetting,
17-
useTypedDispatch,
18-
useTypedSelector,
19-
} from '../../../../utils/hooks';
14+
import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
15+
import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks';
16+
import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
2017

21-
import {
22-
PartitionsControls,
23-
PartitionsTableColumnSetup,
24-
} from './PartitionsControls/PartitionsControls';
18+
import {PartitionsControls} from './PartitionsControls/PartitionsControls';
2519
import {PARTITIONS_COLUMNS_WIDTH_LS_KEY} from './columns';
2620
import i18n from './i18n';
2721
import {addHostToPartitions} from './utils';
22+
import {
23+
PARTITIONS_COLUMNS_IDS,
24+
PARTITIONS_COLUMNS_TITLES,
25+
allPartitionsColumnsIds,
26+
generalPartitionColumnsIds,
27+
} from './utils/constants';
2828
import type {PreparedPartitionDataWithHosts} from './utils/types';
2929
import {useGetPartitionsColumns} from './utils/useGetPartitionsColumns';
3030

@@ -64,9 +64,15 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
6464
const nodesLoading = nodesIsFetching && nodesData === undefined;
6565
const nodeHostsMap = useTypedSelector((state) => selectNodesMap(state, database));
6666

67-
const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(PARTITIONS_HIDDEN_COLUMNS_KEY);
67+
const columns = useGetPartitionsColumns(selectedConsumer);
6868

69-
const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
69+
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
70+
columns,
71+
'partitionsSelectedColumns',
72+
PARTITIONS_COLUMNS_TITLES,
73+
selectedConsumer ? allPartitionsColumnsIds : generalPartitionColumnsIds,
74+
[PARTITIONS_COLUMNS_IDS.PARTITION_ID],
75+
);
7076

7177
const params = topicLoading
7278
? skipToken
@@ -95,14 +101,6 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
95101
}
96102
}, [dispatch, topicLoading, selectedConsumer, consumers]);
97103

98-
const columnsToShow = React.useMemo(() => {
99-
return columns.filter((column) => !hiddenColumns.includes(column.name));
100-
}, [columns, hiddenColumns]);
101-
102-
const hadleTableColumnsSetupChange = (newHiddenColumns: string[]) => {
103-
setHiddenColumns(newHiddenColumns);
104-
};
105-
106104
const handleSelectedConsumerChange = (value?: string) => {
107105
dispatch(setSelectedConsumer(value));
108106
};
@@ -125,13 +123,7 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
125123
};
126124

127125
const renderExtraControls = () => {
128-
return (
129-
<PartitionsTableColumnSetup
130-
hiddenColumns={hiddenColumns}
131-
onHiddenColumnsChange={hadleTableColumnsSetupChange}
132-
initialColumnsIds={columnsIdsForSelector}
133-
/>
134-
);
126+
return <TableColumnSetup items={columnsToSelect} showStatus onUpdate={setColumns} />;
135127
};
136128

137129
const renderContent = () => {

‎src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx‎

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
import React from 'react';
22

3-
import type {SelectOption, TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit';
3+
import type {SelectOption} from '@gravity-ui/uikit';
44
import {Select} from '@gravity-ui/uikit';
55
import escapeRegExp from 'lodash/escapeRegExp';
66

77
import {Search} from '../../../../../components/Search/Search';
8-
import {TableColumnSetup} from '../../../../../components/TableColumnSetup/TableColumnSetup';
9-
import type {ValueOf} from '../../../../../types/common';
108
import {b} from '../Partitions';
119
import i18n from '../i18n';
12-
import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES} from '../utils/constants';
1310
import type {PreparedPartitionDataWithHosts} from '../utils/types';
1411

1512
interface PartitionsControlsProps {
@@ -132,60 +129,3 @@ export const PartitionsControls = ({
132129
</React.Fragment>
133130
);
134131
};
135-
136-
interface PartitionsTableColumnSetupProps {
137-
hiddenColumns: string[];
138-
onHiddenColumnsChange: (newHiddenColumns: string[]) => void;
139-
initialColumnsIds: string[];
140-
}
141-
142-
export function PartitionsTableColumnSetup({
143-
hiddenColumns,
144-
onHiddenColumnsChange,
145-
initialColumnsIds,
146-
}: PartitionsTableColumnSetupProps) {
147-
const columnsToSelect = React.useMemo(() => {
148-
const columns: TableColumnSetupItem[] = [];
149-
for (const id of initialColumnsIds) {
150-
const isId = id === PARTITIONS_COLUMNS_IDS.PARTITION_ID;
151-
const column: TableColumnSetupItem = {
152-
title: PARTITIONS_COLUMNS_TITLES[id as ValueOf<typeof PARTITIONS_COLUMNS_IDS>],
153-
selected: Boolean(!hiddenColumns.includes(id)),
154-
id: id,
155-
required: isId,
156-
sticky: isId ? 'start' : undefined,
157-
};
158-
if (isId) {
159-
columns.unshift(column);
160-
} else {
161-
columns.push(column);
162-
}
163-
}
164-
return columns;
165-
}, [initialColumnsIds, hiddenColumns]);
166-
const handleTableColumnsSetupChange: TableColumnSetupProps['onUpdate'] = (value) => {
167-
const result = [...hiddenColumns];
168-
169-
// Process current set of columns
170-
// This way we do not remove from hidden these columns, that are not displayed currently
171-
// The reasons: set of columns differs for partitions with and without consumers
172-
value.forEach((el) => {
173-
if (!el.selected && !hiddenColumns.includes(el.id)) {
174-
result.push(el.id);
175-
} else if (el.selected && hiddenColumns.includes(el.id)) {
176-
result.splice(hiddenColumns.indexOf(el.id));
177-
}
178-
});
179-
180-
onHiddenColumnsChange(result);
181-
};
182-
return (
183-
<TableColumnSetup
184-
key="TableColumnSetup"
185-
popupWidth={242}
186-
items={columnsToSelect}
187-
showStatus
188-
onUpdate={handleTableColumnsSetupChange}
189-
/>
190-
);
191-
}

‎src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,16 @@
11
import React from 'react';
22

3-
import type {Column} from '@gravity-ui/react-data-table';
4-
53
import {allColumns, generalColumns} from '../columns';
64

7-
import {allPartitionsColumnsIds, generalPartitionColumnsIds} from './constants';
8-
import type {PreparedPartitionDataWithHosts} from './types';
9-
105
// Columns are different for partitions with consumers and without
11-
export const useGetPartitionsColumns = (
12-
selectedConsumer: string | undefined,
13-
): [Column<PreparedPartitionDataWithHosts>[], string[]] => {
14-
const [columns, setColumns] = React.useState<Column<PreparedPartitionDataWithHosts>[]>([]);
15-
const [columnsIdsForSelector, setColumnsIdsForSelector] = React.useState<string[]>([]);
16-
17-
React.useEffect(() => {
6+
export const useGetPartitionsColumns = (selectedConsumer: string | undefined) => {
7+
const columns = React.useMemo(() => {
188
if (selectedConsumer) {
19-
setColumns(allColumns);
20-
setColumnsIdsForSelector(allPartitionsColumnsIds);
21-
} else {
22-
setColumns(generalColumns);
23-
setColumnsIdsForSelector(generalPartitionColumnsIds);
9+
return allColumns;
2410
}
11+
12+
return generalColumns;
2513
}, [selectedConsumer]);
2614

27-
return [columns, columnsIdsForSelector];
15+
return columns;
2816
};

0 commit comments

Comments
 (0)