From 69bdd0b10a5b51e6fe653fa5b9a33ae2ae1629fd Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Fri, 19 Sep 2025 18:30:41 +0300 Subject: [PATCH 1/3] feat(TableColumnSetup): support sortable columns --- src/components/PaginatedTable/TableChunk.tsx | 3 +- src/containers/Clusters/Clusters.tsx | 1 - .../PaginatedNodes/GroupedNodesComponent.tsx | 1 - .../Nodes/PaginatedNodes/NodesComponent.tsx | 1 - .../GroupedStorageGroupsComponent.tsx | 1 - .../StorageGroupsComponent.tsx | 1 - .../GroupedStorageNodesComponent.tsx | 1 - .../StorageNodesComponent.tsx | 1 - .../PartitionsControls/PartitionsControls.tsx | 1 - .../TopQueries/RunningQueriesData.tsx | 1 - .../Diagnostics/TopQueries/TopQueriesData.tsx | 1 - .../Diagnostics/TopicData/TopicData.tsx | 1 - src/utils/hooks/useSelectedColumns.ts | 89 +++++++++++++------ 13 files changed, 62 insertions(+), 41 deletions(-) diff --git a/src/components/PaginatedTable/TableChunk.tsx b/src/components/PaginatedTable/TableChunk.tsx index 0a7b3c1aa8..e19632e5bd 100644 --- a/src/components/PaginatedTable/TableChunk.tsx +++ b/src/components/PaginatedTable/TableChunk.tsx @@ -66,7 +66,8 @@ export const TableChunk = typedMemo(function TableChunk({ const [autoRefreshInterval] = useAutoRefreshInterval(); const {noBatching} = usePaginatedTableState(); - const columnsIds = columns.map((column) => column.name); + //sort ids to prevent refetch if only order was changed + const columnsIds = columns.map((column) => column.name).toSorted(); const queryParams = { offset: id * chunkSize, diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx index 20146f9bb7..033092bed6 100644 --- a/src/containers/Clusters/Clusters.tsx +++ b/src/containers/Clusters/Clusters.tsx @@ -211,7 +211,6 @@ export function Clusters() { items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> {clusters?.length ? ( diff --git a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx index 61b7f497c1..a8da11a5b9 100644 --- a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx +++ b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx @@ -213,7 +213,6 @@ export function GroupedNodesComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } error={error ? : null} diff --git a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx index e583674013..f2b63a8939 100644 --- a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx +++ b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx @@ -70,7 +70,6 @@ export function NodesComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } table={ diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx index 7379e4092e..4ccbd85076 100644 --- a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx @@ -183,7 +183,6 @@ export function GroupedStorageGroupsComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } error={error ? : null} diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx index fb1b5f2033..14c1f52656 100644 --- a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx @@ -41,7 +41,6 @@ export function StorageGroupsComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } table={ diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx index 385964fb6a..a27723fefa 100644 --- a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx @@ -184,7 +184,6 @@ export function GroupedStorageNodesComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } error={error ? : null} diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx index 4b603d3b7c..747361cc93 100644 --- a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx @@ -45,7 +45,6 @@ export function StorageNodesComponent({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> } table={ diff --git a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx index c174ea6c53..7d7b81474d 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx @@ -186,7 +186,6 @@ export function PartitionsTableColumnSetup({ items={columnsToSelect} showStatus onUpdate={handleTableColumnsSetupChange} - sortable={false} /> ); } diff --git a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx index 1158dd990f..c5fc7125ff 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx @@ -78,7 +78,6 @@ export const RunningQueriesData = ({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> ); }; diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx index 3c324384c3..a15fe96006 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx @@ -133,7 +133,6 @@ export const TopQueriesData = ({ items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> ); }; diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx index 1f16e62fcf..379fe828fa 100644 --- a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx +++ b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx @@ -278,7 +278,6 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath} items={columnsToSelect} showStatus onUpdate={setColumns} - sortable={false} /> ); }, [columnsToSelect, setColumns]); diff --git a/src/utils/hooks/useSelectedColumns.ts b/src/utils/hooks/useSelectedColumns.ts index 362583da8b..b799179ff6 100644 --- a/src/utils/hooks/useSelectedColumns.ts +++ b/src/utils/hooks/useSelectedColumns.ts @@ -4,6 +4,19 @@ import type {TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uiki import {settingsManager} from '../../services/settings'; +type OrderedColumn = {id: string; selected?: boolean}; + +function parseSavedColumn(saved: unknown): OrderedColumn | undefined { + if (typeof saved === 'string') { + return {id: saved, selected: true}; + } + if (saved && typeof saved === 'object' && 'id' in saved && typeof saved.id === 'string') { + const selected = 'selected' in saved ? Boolean(saved.selected) : false; + return {id: saved.id, selected}; + } + return undefined; +} + export const useSelectedColumns = ( columns: T[], storageKey: string, @@ -11,42 +24,60 @@ export const useSelectedColumns = ( defaultColumnsIds: string[], requiredColumnsIds?: string[], ) => { - const [selectedColumnsIds, setSelectedColumnsIds] = React.useState(() => { - return settingsManager.readUserSettingsValue(storageKey, defaultColumnsIds) as string[]; + const [orderedColumns, setOrderedColumns] = React.useState(() => { + const savedColumns = settingsManager.readUserSettingsValue( + storageKey, + defaultColumnsIds, + ) as unknown[]; + + const normalizedSavedColumns = savedColumns.map(parseSavedColumn); + + return columns.reduce((acc, column) => { + const savedColumn = normalizedSavedColumns.find((c) => c && c.id === column.name); + if (savedColumn) { + acc.push(savedColumn); + } else { + acc.push({id: column.name, selected: false}); + } + return acc; + }, []); }); + const columnsToSelect = React.useMemo(() => { + const preparedColumns = orderedColumns.reduce<(TableColumnSetupItem & {column: T})[]>( + (acc, {id, selected}) => { + const isRequired = requiredColumnsIds?.includes(id); + const column = columns.find((c) => c.name === id); + if (column) { + acc.push({ + id, + title: columnsTitles[id], + selected: selected || isRequired, + required: isRequired, + sticky: isRequired ? 'start' : undefined, + column, + }); + } + return acc; + }, + [], + ); + //required columns should be first to properly render columns settings + return preparedColumns.toSorted( + (a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required)), + ); + }, [columns, columnsTitles, requiredColumnsIds, orderedColumns]); + const columnsToShow = React.useMemo(() => { - return columns.filter((column) => { - const columnId = column.name; - const isSelected = selectedColumnsIds.includes(columnId); - const isRequired = requiredColumnsIds?.includes(columnId); - return isSelected || isRequired; - }); - }, [columns, requiredColumnsIds, selectedColumnsIds]); - - const columnsToSelect: TableColumnSetupItem[] = React.useMemo(() => { - const columnsIds = columns.map((column) => column.name); - - return columnsIds.map((id) => { - const isRequired = requiredColumnsIds?.includes(id); - const isSelected = selectedColumnsIds.includes(id); - - return { - id, - title: columnsTitles[id], - selected: isRequired || isSelected, - required: isRequired, - sticky: isRequired ? 'start' : undefined, - }; - }); - }, [columns, columnsTitles, requiredColumnsIds, selectedColumnsIds]); + return columnsToSelect.filter((c) => c.selected).map((c) => c.column); + }, [columnsToSelect]); const setColumns: TableColumnSetupProps['onUpdate'] = React.useCallback( (value) => { - const selectedColumns = value.filter((el) => el.selected).map((el) => el.id); + const preparedColumns = value.map(({id, selected}) => ({id, selected})); - settingsManager.setUserSettingsValue(storageKey, selectedColumns); - setSelectedColumnsIds(selectedColumns); + settingsManager.setUserSettingsValue(storageKey, preparedColumns); + setOrderedColumns(preparedColumns); }, [storageKey], ); From a30dd1e0f0514b47d41856e95500b7e21c594089 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Tue, 23 Sep 2025 13:07:02 +0300 Subject: [PATCH 2/3] fix: code-review --- .../Diagnostics/Partitions/Partitions.tsx | 48 ++++++-------- .../PartitionsControls/PartitionsControls.tsx | 62 +------------------ .../utils/useGetPartitionsColumns.ts | 24 ++----- 3 files changed, 27 insertions(+), 107 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx index 8906e5e82a..72fe44e863 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx @@ -4,27 +4,27 @@ import {skipToken} from '@reduxjs/toolkit/query'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable'; +import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup'; import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton'; import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout'; import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList'; import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions'; import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic'; import {cn} from '../../../../utils/cn'; -import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants'; -import { - useAutoRefreshInterval, - useSetting, - useTypedDispatch, - useTypedSelector, -} from '../../../../utils/hooks'; +import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants'; +import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; +import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns'; -import { - PartitionsControls, - PartitionsTableColumnSetup, -} from './PartitionsControls/PartitionsControls'; +import {PartitionsControls} from './PartitionsControls/PartitionsControls'; import {PARTITIONS_COLUMNS_WIDTH_LS_KEY} from './columns'; import i18n from './i18n'; import {addHostToPartitions} from './utils'; +import { + PARTITIONS_COLUMNS_IDS, + PARTITIONS_COLUMNS_TITLES, + allPartitionsColumnsIds, + generalPartitionColumnsIds, +} from './utils/constants'; import type {PreparedPartitionDataWithHosts} from './utils/types'; import {useGetPartitionsColumns} from './utils/useGetPartitionsColumns'; @@ -64,9 +64,15 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps) const nodesLoading = nodesIsFetching && nodesData === undefined; const nodeHostsMap = useTypedSelector((state) => selectNodesMap(state, database)); - const [hiddenColumns, setHiddenColumns] = useSetting(PARTITIONS_HIDDEN_COLUMNS_KEY); + const columns = useGetPartitionsColumns(selectedConsumer); - const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer); + const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns( + columns, + 'partitionsSelectedColumns', + PARTITIONS_COLUMNS_TITLES, + selectedConsumer ? allPartitionsColumnsIds : generalPartitionColumnsIds, + [PARTITIONS_COLUMNS_IDS.PARTITION_ID], + ); const params = topicLoading ? skipToken @@ -95,14 +101,6 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps) } }, [dispatch, topicLoading, selectedConsumer, consumers]); - const columnsToShow = React.useMemo(() => { - return columns.filter((column) => !hiddenColumns.includes(column.name)); - }, [columns, hiddenColumns]); - - const hadleTableColumnsSetupChange = (newHiddenColumns: string[]) => { - setHiddenColumns(newHiddenColumns); - }; - const handleSelectedConsumerChange = (value?: string) => { dispatch(setSelectedConsumer(value)); }; @@ -125,13 +123,7 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps) }; const renderExtraControls = () => { - return ( - - ); + return ; }; const renderContent = () => { diff --git a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx index 7d7b81474d..6959ee8bf2 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx @@ -1,15 +1,12 @@ import React from 'react'; -import type {SelectOption, TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit'; +import type {SelectOption} from '@gravity-ui/uikit'; import {Select} from '@gravity-ui/uikit'; import escapeRegExp from 'lodash/escapeRegExp'; import {Search} from '../../../../../components/Search/Search'; -import {TableColumnSetup} from '../../../../../components/TableColumnSetup/TableColumnSetup'; -import type {ValueOf} from '../../../../../types/common'; import {b} from '../Partitions'; import i18n from '../i18n'; -import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES} from '../utils/constants'; import type {PreparedPartitionDataWithHosts} from '../utils/types'; interface PartitionsControlsProps { @@ -132,60 +129,3 @@ export const PartitionsControls = ({ ); }; - -interface PartitionsTableColumnSetupProps { - hiddenColumns: string[]; - onHiddenColumnsChange: (newHiddenColumns: string[]) => void; - initialColumnsIds: string[]; -} - -export function PartitionsTableColumnSetup({ - hiddenColumns, - onHiddenColumnsChange, - initialColumnsIds, -}: PartitionsTableColumnSetupProps) { - const columnsToSelect = React.useMemo(() => { - const columns: TableColumnSetupItem[] = []; - for (const id of initialColumnsIds) { - const isId = id === PARTITIONS_COLUMNS_IDS.PARTITION_ID; - const column: TableColumnSetupItem = { - title: PARTITIONS_COLUMNS_TITLES[id as ValueOf], - selected: Boolean(!hiddenColumns.includes(id)), - id: id, - required: isId, - sticky: isId ? 'start' : undefined, - }; - if (isId) { - columns.unshift(column); - } else { - columns.push(column); - } - } - return columns; - }, [initialColumnsIds, hiddenColumns]); - const handleTableColumnsSetupChange: TableColumnSetupProps['onUpdate'] = (value) => { - const result = [...hiddenColumns]; - - // Process current set of columns - // This way we do not remove from hidden these columns, that are not displayed currently - // The reasons: set of columns differs for partitions with and without consumers - value.forEach((el) => { - if (!el.selected && !hiddenColumns.includes(el.id)) { - result.push(el.id); - } else if (el.selected && hiddenColumns.includes(el.id)) { - result.splice(hiddenColumns.indexOf(el.id)); - } - }); - - onHiddenColumnsChange(result); - }; - return ( - - ); -} diff --git a/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts b/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts index 5b83a47813..57f8255fbb 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts +++ b/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts @@ -1,28 +1,16 @@ import React from 'react'; -import type {Column} from '@gravity-ui/react-data-table'; - import {allColumns, generalColumns} from '../columns'; -import {allPartitionsColumnsIds, generalPartitionColumnsIds} from './constants'; -import type {PreparedPartitionDataWithHosts} from './types'; - // Columns are different for partitions with consumers and without -export const useGetPartitionsColumns = ( - selectedConsumer: string | undefined, -): [Column[], string[]] => { - const [columns, setColumns] = React.useState[]>([]); - const [columnsIdsForSelector, setColumnsIdsForSelector] = React.useState([]); - - React.useEffect(() => { +export const useGetPartitionsColumns = (selectedConsumer: string | undefined) => { + const columns = React.useMemo(() => { if (selectedConsumer) { - setColumns(allColumns); - setColumnsIdsForSelector(allPartitionsColumnsIds); - } else { - setColumns(generalColumns); - setColumnsIdsForSelector(generalPartitionColumnsIds); + return allColumns; } + + return generalColumns; }, [selectedConsumer]); - return [columns, columnsIdsForSelector]; + return columns; }; From b46d33cd71e4b4fed431a12d842efa7eaebaf009 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Tue, 23 Sep 2025 16:51:22 +0300 Subject: [PATCH 3/3] fix: review --- .../Diagnostics/Partitions/Partitions.tsx | 17 +----- .../utils/useGetPartitionsColumns.ts | 54 +++++++++++++++++-- 2 files changed, 51 insertions(+), 20 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx index 72fe44e863..9e754eca77 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx @@ -13,18 +13,11 @@ import {selectConsumersNames, topicApi} from '../../../../store/reducers/topic'; import {cn} from '../../../../utils/cn'; import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants'; import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../../../utils/hooks'; -import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns'; import {PartitionsControls} from './PartitionsControls/PartitionsControls'; import {PARTITIONS_COLUMNS_WIDTH_LS_KEY} from './columns'; import i18n from './i18n'; import {addHostToPartitions} from './utils'; -import { - PARTITIONS_COLUMNS_IDS, - PARTITIONS_COLUMNS_TITLES, - allPartitionsColumnsIds, - generalPartitionColumnsIds, -} from './utils/constants'; import type {PreparedPartitionDataWithHosts} from './utils/types'; import {useGetPartitionsColumns} from './utils/useGetPartitionsColumns'; @@ -64,15 +57,7 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps) const nodesLoading = nodesIsFetching && nodesData === undefined; const nodeHostsMap = useTypedSelector((state) => selectNodesMap(state, database)); - const columns = useGetPartitionsColumns(selectedConsumer); - - const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns( - columns, - 'partitionsSelectedColumns', - PARTITIONS_COLUMNS_TITLES, - selectedConsumer ? allPartitionsColumnsIds : generalPartitionColumnsIds, - [PARTITIONS_COLUMNS_IDS.PARTITION_ID], - ); + const {columnsToShow, columnsToSelect, setColumns} = useGetPartitionsColumns(selectedConsumer); const params = topicLoading ? skipToken diff --git a/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts b/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts index 57f8255fbb..3d609e946c 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts +++ b/src/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts @@ -1,16 +1,62 @@ import React from 'react'; +import {useSelectedColumns} from '../../../../../utils/hooks/useSelectedColumns'; import {allColumns, generalColumns} from '../columns'; +import { + PARTITIONS_COLUMNS_IDS, + PARTITIONS_COLUMNS_TITLES, + allPartitionsColumnsIds, + generalPartitionColumnsIds, +} from './constants'; + // Columns are different for partitions with consumers and without export const useGetPartitionsColumns = (selectedConsumer: string | undefined) => { + const { + columnsToShow: allColumnsToShow, + columnsToSelect: allColumnsToSelect, + setColumns: setAllColumns, + } = useSelectedColumns( + allColumns, + 'partitionsSelectedColumns', + PARTITIONS_COLUMNS_TITLES, + allPartitionsColumnsIds, + [PARTITIONS_COLUMNS_IDS.PARTITION_ID], + ); + const { + columnsToShow: generalColumnsToShow, + columnsToSelect: generalColumnsToSelect, + setColumns: setGeneralColumns, + } = useSelectedColumns( + generalColumns, + 'generalPartitionsSelectedColumns', + PARTITIONS_COLUMNS_TITLES, + generalPartitionColumnsIds, + [PARTITIONS_COLUMNS_IDS.PARTITION_ID], + ); + const columns = React.useMemo(() => { if (selectedConsumer) { - return allColumns; + return { + columnsToShow: allColumnsToShow, + columnsToSelect: allColumnsToSelect, + setColumns: setAllColumns, + }; } - return generalColumns; - }, [selectedConsumer]); - + return { + columnsToShow: generalColumnsToShow, + columnsToSelect: generalColumnsToSelect, + setColumns: setGeneralColumns, + }; + }, [ + allColumnsToSelect, + allColumnsToShow, + generalColumnsToSelect, + generalColumnsToShow, + selectedConsumer, + setAllColumns, + setGeneralColumns, + ]); return columns; };