diff --git a/src/components/PaginatedTable/PaginatedTableWithLayout.tsx b/src/components/PaginatedTable/PaginatedTableWithLayout.tsx index e8b49ced04..ac1933729e 100644 --- a/src/components/PaginatedTable/PaginatedTableWithLayout.tsx +++ b/src/components/PaginatedTable/PaginatedTableWithLayout.tsx @@ -8,6 +8,7 @@ import type {PaginatedTableState} from './types'; export interface PaginatedTableWithLayoutProps { controls?: React.ReactNode; + extraControls?: React.ReactNode; table: React.ReactNode; tableWrapperProps?: Omit; error?: React.ReactNode; @@ -42,12 +43,22 @@ const TableWrapper = ({ ); }; -const ControlsSection = ({controls}: {controls?: React.ReactNode}) => { - if (!controls) { +const ControlsSection = ({ + controls, + extraControls, +}: { + controls?: React.ReactNode; + extraControls?: React.ReactNode; +}) => { + if (!controls && !extraControls) { return null; } - return {controls}; + return ( + extraControls}> + {controls} + + ); }; const ErrorSection = ({error}: {error?: React.ReactNode}) => { @@ -60,6 +71,7 @@ const ErrorSection = ({error}: {error?: React.ReactNode}) => { export const PaginatedTableWithLayout = ({ controls, + extraControls, table, tableWrapperProps, error, @@ -70,7 +82,7 @@ export const PaginatedTableWithLayout = ({ return ( - + diff --git a/src/components/TableColumnSetup/TableColumnSetup.tsx b/src/components/TableColumnSetup/TableColumnSetup.tsx new file mode 100644 index 0000000000..f2db2246b7 --- /dev/null +++ b/src/components/TableColumnSetup/TableColumnSetup.tsx @@ -0,0 +1,33 @@ +import {Gear} from '@gravity-ui/icons'; +import type {TableColumnSetupProps as TableColumnSetupPropsUikit} from '@gravity-ui/uikit'; +import {Button, Icon, TableColumnSetup as TableColumnSetupUikit, Text} from '@gravity-ui/uikit'; + +interface TableColumnSetupProps extends Omit {} + +export function TableColumnSetup(props: TableColumnSetupProps) { + const {items, showStatus, disabled} = props; + const renderStatus = () => { + if (!showStatus) { + return null; + } + const selected = items.reduce((acc, cur) => (cur.selected ? acc + 1 : acc), 0); + const all = items.length; + const status = ( + + {selected}/{all} + + ); + + return status; + }; + const renderSwitcher: TableColumnSetupPropsUikit['renderSwitcher'] = (switcherProps) => { + return ( + + ); + }; + + return ; +} diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.scss b/src/components/TableWithControlsLayout/TableWithControlsLayout.scss index 168698bfab..26f5e2e2ca 100644 --- a/src/components/TableWithControlsLayout/TableWithControlsLayout.scss +++ b/src/components/TableWithControlsLayout/TableWithControlsLayout.scss @@ -16,6 +16,8 @@ &__controls-wrapper { z-index: 3; + align-items: center; + box-sizing: border-box; width: 100%; @@ -32,6 +34,13 @@ @include mixins.sticky-top(); } + &__extra-controls { + position: sticky; + right: var(--extra-controls-right, 0); + + margin: 0 0 0 auto; + } + &__table { position: relative; z-index: 2; diff --git a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx index cec3679ac5..8c01ec860e 100644 --- a/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx +++ b/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx @@ -39,14 +39,9 @@ TableWithControlsLayout.Controls = function TableControls({ className, }: TableWithControlsLayoutItemProps) { return ( - +
{children}
- {renderExtraControls?.()} +
{renderExtraControls?.()}
); }; diff --git a/src/containers/Cluster/Cluster.scss b/src/containers/Cluster/Cluster.scss index 95ea6b7228..7f096f8210 100644 --- a/src/containers/Cluster/Cluster.scss +++ b/src/containers/Cluster/Cluster.scss @@ -3,6 +3,8 @@ .ydb-cluster { --cluster-side-padding: var(--g-spacing-5); --sticky-tabs-height: 40px; + --extra-controls-right: calc(var(--cluster-side-padding) * 2); + position: relative; overflow: auto; diff --git a/src/containers/Clusters/Clusters.scss b/src/containers/Clusters/Clusters.scss index cb73b6ab99..4d82348b99 100644 --- a/src/containers/Clusters/Clusters.scss +++ b/src/containers/Clusters/Clusters.scss @@ -39,6 +39,9 @@ width: 320px; } } + &__column-setup { + margin-left: auto; + } &__empty-cell { color: var(--g-color-text-secondary); } diff --git a/src/containers/Clusters/Clusters.tsx b/src/containers/Clusters/Clusters.tsx index a9d598bf40..20146f9bb7 100644 --- a/src/containers/Clusters/Clusters.tsx +++ b/src/containers/Clusters/Clusters.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Magnifier} from '@gravity-ui/icons'; import DataTable from '@gravity-ui/react-data-table'; -import {Flex, Icon, Select, TableColumnSetup, Text} from '@gravity-ui/uikit'; +import {Flex, Icon, Select, Text} from '@gravity-ui/uikit'; import {Helmet} from 'react-helmet-async'; import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl'; @@ -11,6 +11,7 @@ import {ResponseError} from '../../components/Errors/ResponseError'; import {Loader} from '../../components/Loader'; import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable'; import {Search} from '../../components/Search'; +import {TableColumnSetup} from '../../components/TableColumnSetup/TableColumnSetup'; import { useDeleteClusterFeatureAvailable, useEditClusterFeatureAvailable, @@ -203,16 +204,15 @@ export function Clusters() { width="max" /> -
- -
+
{clusters?.length ? ( diff --git a/src/containers/Nodes/NodesControls/NodesControls.tsx b/src/containers/Nodes/NodesControls/NodesControls.tsx index e5533b85e2..401bfb9f45 100644 --- a/src/containers/Nodes/NodesControls/NodesControls.tsx +++ b/src/containers/Nodes/NodesControls/NodesControls.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import type {TableColumnSetupItem} from '@gravity-ui/uikit'; -import {Select, TableColumnSetup, Text} from '@gravity-ui/uikit'; +import {Select, Text} from '@gravity-ui/uikit'; import {EntitiesCount} from '../../../components/EntitiesCount'; import {ProblemFilter} from '../../../components/ProblemFilter'; @@ -26,9 +25,6 @@ interface NodesControlsProps { withPeerRoleFilter?: boolean; - columnsToSelect: TableColumnSetupItem[]; - handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void; - entitiesCountCurrent: number; entitiesCountTotal?: number; entitiesLoading: boolean; @@ -40,9 +36,6 @@ export function NodesControls({ withPeerRoleFilter, - columnsToSelect, - handleSelectedColumnsUpdate, - entitiesCountCurrent, entitiesCountTotal, entitiesLoading, @@ -91,13 +84,7 @@ export function NodesControls({ ) : null} - + {withGroupBySelect ? ( {i18n('controls_group-by-placeholder')} diff --git a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx index b02eaf2748..61b7f497c1 100644 --- a/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx +++ b/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx @@ -5,6 +5,7 @@ import {isNil} from 'lodash'; import {ResponseError} from '../../../components/Errors/ResponseError'; import type {Column} from '../../../components/PaginatedTable'; import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants'; import type {NodesColumnId} from '../../../components/nodesColumns/constants'; import {nodesApi} from '../../../store/reducers/nodes/nodes'; @@ -200,14 +201,21 @@ export function GroupedNodesComponent({ } + extraControls={ + + } error={error ? : null} table={renderGroups()} tableWrapperProps={{ diff --git a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx index 0f9ee68f63..e583674013 100644 --- a/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx +++ b/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx @@ -2,6 +2,7 @@ import React from 'react'; import type {Column} from '../../../components/PaginatedTable'; import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants'; import type {NodesColumnId} from '../../../components/nodesColumns/constants'; import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks'; @@ -61,8 +62,15 @@ export function NodesComponent({ withGroupBySelect={viewerNodesHandlerHasGrouping} groupByParams={groupByParams} withPeerRoleFilter={withPeerRoleFilter} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={setColumns} + /> + } + extraControls={ + } table={ diff --git a/src/containers/Nodes/PaginatedNodes/NodesControlsWithTableState.tsx b/src/containers/Nodes/PaginatedNodes/NodesControlsWithTableState.tsx index 8a80313af6..12bc922789 100644 --- a/src/containers/Nodes/PaginatedNodes/NodesControlsWithTableState.tsx +++ b/src/containers/Nodes/PaginatedNodes/NodesControlsWithTableState.tsx @@ -1,5 +1,3 @@ -import type {TableColumnSetupItem} from '@gravity-ui/uikit'; - import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext'; import type {NodesGroupByField} from '../../../types/api/nodes'; import {NodesControls} from '../NodesControls/NodesControls'; @@ -8,16 +6,12 @@ interface NodesControlsWithTableStateProps { withGroupBySelect: boolean; groupByParams: NodesGroupByField[]; withPeerRoleFilter?: boolean; - columnsToSelect: TableColumnSetupItem[]; - handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void; } export function NodesControlsWithTableState({ withGroupBySelect, groupByParams, withPeerRoleFilter, - columnsToSelect, - handleSelectedColumnsUpdate, }: NodesControlsWithTableStateProps) { const {tableState} = usePaginatedTableState(); @@ -26,8 +20,6 @@ export function NodesControlsWithTableState({ withGroupBySelect={withGroupBySelect} groupByParams={groupByParams} withPeerRoleFilter={withPeerRoleFilter} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={handleSelectedColumnsUpdate} entitiesCountCurrent={tableState.foundEntities} entitiesCountTotal={tableState.totalEntities} entitiesLoading={tableState.isInitialLoad} diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx index 41c674e892..7379e4092e 100644 --- a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {ResponseError} from '../../../components/Errors/ResponseError/ResponseError'; import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {storageApi} from '../../../store/reducers/storage/storage'; import type {GroupsGroupByField} from '../../../types/api/storage'; import {useAutoRefreshInterval} from '../../../utils/hooks'; @@ -174,8 +175,15 @@ export function GroupedStorageGroupsComponent({ entitiesCountCurrent={found} entitiesCountTotal={total} entitiesLoading={isLoading} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={setColumns} + /> + } + extraControls={ + } error={error ? : null} diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx index 0ecb6488bb..fb1b5f2033 100644 --- a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx @@ -1,4 +1,5 @@ import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {useStorageGroupsHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks'; import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage'; import type {PaginatedStorageProps} from '../PaginatedStorage'; @@ -32,8 +33,15 @@ export function StorageGroupsComponent({ + } + extraControls={ + } table={ diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx index 0841c7f97f..ec9f18067e 100644 --- a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import type {TableColumnSetupItem} from '@gravity-ui/uikit'; -import {Select, TableColumnSetup, Text} from '@gravity-ui/uikit'; +import {Select, Text} from '@gravity-ui/uikit'; import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount'; import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext'; @@ -22,9 +21,6 @@ interface StorageControlsProps { entitiesCountCurrent: number; entitiesCountTotal?: number; entitiesLoading: boolean; - - columnsToSelect: TableColumnSetupItem[]; - handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void; } export function StorageGroupsControls({ @@ -34,9 +30,6 @@ export function StorageGroupsControls({ entitiesCountCurrent, entitiesCountTotal, entitiesLoading, - - columnsToSelect, - handleSelectedColumnsUpdate, }: StorageControlsProps) { const { searchValue, @@ -81,13 +74,6 @@ export function StorageGroupsControls({ onChange={handleVisibleEntitiesChange} /> )} - {withGroupBySelect ? ( {i18n('controls_group-by-placeholder')} @@ -116,13 +102,9 @@ export function StorageGroupsControls({ export function StorageGroupsControlsWithTableState({ withTypeSelector, withGroupBySelect, - columnsToSelect, - handleSelectedColumnsUpdate, }: { withTypeSelector?: boolean; withGroupBySelect?: boolean; - columnsToSelect: any[]; - handleSelectedColumnsUpdate: (updated: any[]) => void; }) { const {tableState} = usePaginatedTableState(); @@ -133,8 +115,6 @@ export function StorageGroupsControlsWithTableState({ entitiesCountCurrent={tableState.foundEntities} entitiesCountTotal={tableState.totalEntities} entitiesLoading={tableState.isInitialLoad} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={handleSelectedColumnsUpdate} /> ); } diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx index 320c8cb1b2..385964fb6a 100644 --- a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {ResponseError} from '../../../components/Errors/ResponseError'; import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {storageApi} from '../../../store/reducers/storage/storage'; import type {NodesGroupByField} from '../../../types/api/nodes'; import {useAutoRefreshInterval} from '../../../utils/hooks'; @@ -175,8 +176,15 @@ export function GroupedStorageNodesComponent({ entitiesCountCurrent={found} entitiesCountTotal={total} entitiesLoading={isLoading} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={setColumns} + /> + } + extraControls={ + } error={error ? : null} diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx index 5869af50de..4b603d3b7c 100644 --- a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx @@ -1,4 +1,5 @@ import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout'; +import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup'; import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks'; import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage'; import type {PaginatedStorageProps} from '../PaginatedStorage'; @@ -36,8 +37,15 @@ export function StorageNodesComponent({ + } + extraControls={ + } table={ diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx index 3ac36e6147..44293d9657 100644 --- a/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import type {TableColumnSetupItem} from '@gravity-ui/uikit'; -import {Select, TableColumnSetup, Text} from '@gravity-ui/uikit'; +import {Select, Text} from '@gravity-ui/uikit'; import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount'; import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext'; @@ -21,9 +20,6 @@ interface StorageControlsProps { entitiesCountCurrent: number; entitiesCountTotal?: number; entitiesLoading: boolean; - - columnsToSelect: TableColumnSetupItem[]; - handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void; } export function StorageNodesControls({ @@ -33,9 +29,6 @@ export function StorageNodesControls({ entitiesCountCurrent, entitiesCountTotal, entitiesLoading, - - columnsToSelect, - handleSelectedColumnsUpdate, }: StorageControlsProps) { const { searchValue, @@ -74,13 +67,6 @@ export function StorageNodesControls({ {withGroupBySelect ? null : ( )} - {withGroupBySelect ? ( {i18n('controls_group-by-placeholder')} @@ -109,13 +95,9 @@ export function StorageNodesControls({ export function StorageNodesControlsWithTableState({ withTypeSelector, withGroupBySelect, - columnsToSelect, - handleSelectedColumnsUpdate, }: { withTypeSelector?: boolean; withGroupBySelect?: boolean; - columnsToSelect: any[]; - handleSelectedColumnsUpdate: (updated: any[]) => void; }) { const {tableState} = usePaginatedTableState(); @@ -126,8 +108,6 @@ export function StorageNodesControlsWithTableState({ entitiesCountCurrent={tableState.foundEntities} entitiesCountTotal={tableState.totalEntities} entitiesLoading={tableState.isInitialLoad} - columnsToSelect={columnsToSelect} - handleSelectedColumnsUpdate={handleSelectedColumnsUpdate} /> ); } diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss index a0550c7f34..cf349c27af 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.scss +++ b/src/containers/Tenant/Diagnostics/Diagnostics.scss @@ -43,6 +43,10 @@ padding-top: 0; } + &__controls-wrapper { + align-items: flex-start; + } + .data-table__sticky_moving, .ydb-paginated-table__head { top: 46px !important; diff --git a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx index 221369b14c..8906e5e82a 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx @@ -18,7 +18,10 @@ import { useTypedSelector, } from '../../../../utils/hooks'; -import {PartitionsControls} from './PartitionsControls/PartitionsControls'; +import { + PartitionsControls, + PartitionsTableColumnSetup, +} from './PartitionsControls/PartitionsControls'; import {PARTITIONS_COLUMNS_WIDTH_LS_KEY} from './columns'; import i18n from './i18n'; import {addHostToPartitions} from './utils'; @@ -117,6 +120,13 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps) selectDisabled={Boolean(error) || loading} partitions={partitionsWithHosts} onSearchChange={setPartitionsToRender} + /> + ); + }; + + const renderExtraControls = () => { + return ( + - {renderControls()} + + {renderControls()} + {error ? : null} {partitionsData ? renderContent() : null} diff --git a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx index b27a05c357..c174ea6c53 100644 --- a/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx +++ b/src/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx @@ -1,10 +1,11 @@ import React from 'react'; import type {SelectOption, TableColumnSetupItem, TableColumnSetupProps} from '@gravity-ui/uikit'; -import {Select, TableColumnSetup} 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'; @@ -18,9 +19,6 @@ interface PartitionsControlsProps { selectDisabled: boolean; partitions: PreparedPartitionDataWithHosts[] | undefined; onSearchChange: (filteredPartitions: PreparedPartitionDataWithHosts[]) => void; - hiddenColumns: string[]; - onHiddenColumnsChange: (newHiddenColumns: string[]) => void; - initialColumnsIds: string[]; } export const PartitionsControls = ({ @@ -30,9 +28,6 @@ export const PartitionsControls = ({ selectDisabled, partitions, onSearchChange, - hiddenColumns, - onHiddenColumnsChange, - initialColumnsIds, }: PartitionsControlsProps) => { const [generalSearchValue, setGeneralSearchValue] = React.useState(''); const [partitionIdSearchValue, setPartitionIdSearchValue] = React.useState(''); @@ -90,26 +85,6 @@ export const PartitionsControls = ({ return [{value: '', content: i18n('controls.consumerSelector.emptyOption')}, ...options]; }, [consumers]); - 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 handleConsumerSelectChange = (value: string[]) => { // Do not set empty string to state onSelectedConsumerChange(value[0] || undefined); @@ -123,23 +98,6 @@ export const PartitionsControls = ({ setGeneralSearchValue(value); }; - 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); - }; - const renderOption = (option: SelectOption) => { return (
{option.content}
@@ -171,14 +129,64 @@ export const PartitionsControls = ({ className={b('search', {general: true})} value={generalSearchValue} /> -
); }; + +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/TopQueries/RunningQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx index 103df2a61f..1158dd990f 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx @@ -1,10 +1,10 @@ import React from 'react'; import type {Column} from '@gravity-ui/react-data-table'; -import {TableColumnSetup} from '@gravity-ui/uikit'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {Search} from '../../../../components/Search'; +import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup'; import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout'; import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries'; import type {KeyValueRow} from '../../../../types/api/query'; @@ -71,9 +71,21 @@ export const RunningQueriesData = ({ const inputRef = React.useRef(null); + const renderExtraControls = () => { + return ( + + ); + }; + return ( - + {renderQueryModeControl()} - {error ? : null} diff --git a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx index 4cbc09abc6..3c324384c3 100644 --- a/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx +++ b/src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx @@ -1,13 +1,14 @@ import React from 'react'; import type {Column} from '@gravity-ui/react-data-table'; -import {Select, TableColumnSetup} from '@gravity-ui/uikit'; +import {Select} from '@gravity-ui/uikit'; import type {DateRangeValues} from '../../../../components/DateRange'; import {DateRange} from '../../../../components/DateRange'; import type {DrawerControl} from '../../../../components/Drawer/Drawer'; import {ResponseError} from '../../../../components/Errors/ResponseError'; import {Search} from '../../../../components/Search'; +import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup'; import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout'; import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries'; import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types'; @@ -125,9 +126,21 @@ export const TopQueriesData = ({ [getTopQueryUrl], ); + const renderExtraControls = () => { + return ( + + ); + }; + return ( - + {renderQueryModeControl()}