diff --git a/src/containers/Storage/PaginatedStorage.tsx b/src/containers/Storage/PaginatedStorage.tsx index b41708a282..663fcdea10 100644 --- a/src/containers/Storage/PaginatedStorage.tsx +++ b/src/containers/Storage/PaginatedStorage.tsx @@ -113,7 +113,6 @@ export const PaginatedStorage = ({ handleVisibleEntitiesChange={handleGroupVisibilityChange} nodesUptimeFilter={nodesUptimeFilter} handleNodesUptimeFilterChange={handleUptimeFilterChange} - withGroupsUsageFilter={false} entitiesCountCurrent={foundEntities} entitiesCountTotal={totalEntities} entitiesLoading={!inited} diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx index 8a27a50f2f..114360a081 100644 --- a/src/containers/Storage/Storage.tsx +++ b/src/containers/Storage/Storage.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {ArrayParam, StringParam, useQueryParams, withDefault} from 'use-query-params'; +import {StringParam, useQueryParams} from 'use-query-params'; import {AccessDenied} from '../../components/Errors/403'; import {isAccessError} from '../../components/Errors/PageError/PageError'; @@ -13,11 +13,7 @@ import { import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster'; import type {NodesSortParams} from '../../store/reducers/nodes/types'; import {VISIBLE_ENTITIES} from '../../store/reducers/storage/constants'; -import { - filterGroups, - filterNodes, - getUsageFilterOptions, -} from '../../store/reducers/storage/selectors'; +import {filterGroups, filterNodes} from '../../store/reducers/storage/selectors'; import {storageApi} from '../../store/reducers/storage/storage'; import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types'; import type { @@ -41,23 +37,6 @@ import {defaultSortNode, getDefaultSortGroup} from './utils'; import './Storage.scss'; -const UsageFilterParam = withDefault( - { - encode: ArrayParam.encode, - decode: (input) => { - if (input === null || input === undefined) { - return input; - } - - if (!Array.isArray(input)) { - return input ? [input] : []; - } - return input.filter(Boolean) as string[]; - }, - }, - [], -); - interface StorageProps { database?: string; nodeId?: string | number; @@ -78,7 +57,6 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { visible: StringParam, search: StringParam, uptimeFilter: StringParam, - usageFilter: UsageFilterParam, }); const storageType = storageTypeSchema.parse(queryParams.type); const isGroups = storageType === 'groups'; @@ -87,7 +65,6 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible); const filter = queryParams.search ?? ''; const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter); - const usageFilter = queryParams.usageFilter; const [nodeSort, setNodeSort] = React.useState({ sortOrder: undefined, @@ -158,12 +135,7 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { () => filterNodes(nodes, filter, uptimeFilter), [filter, nodes, uptimeFilter], ); - const storageGroups = React.useMemo( - () => filterGroups(groups, filter, usageFilter), - [filter, groups, usageFilter], - ); - - const usageFilterOptions = React.useMemo(() => getUsageFilterOptions(groups), [groups]); + const storageGroups = React.useMemo(() => filterGroups(groups, filter), [filter, groups]); const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => setNodeSort(params as NodesSortParams), @@ -172,10 +144,6 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { setGroupSort(params as StorageSortParams), ); - const handleUsageFilterChange = (value: string[]) => { - setQueryParams({usageFilter: value.length ? value : undefined}, 'replaceIn'); - }; - const handleTextFilterChange = (value: string) => { setQueryParams({search: value || undefined}, 'replaceIn'); }; @@ -251,9 +219,6 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { handleVisibleEntitiesChange={handleGroupVisibilityChange} nodesUptimeFilter={uptimeFilter} handleNodesUptimeFilterChange={handleUptimeFilterChange} - groupsUsageFilter={usageFilter} - groupsUsageFilterOptions={usageFilterOptions} - handleGroupsUsageFilterChange={handleUsageFilterChange} entitiesCountCurrent={entitiesCountCurrent} entitiesCountTotal={entitiesCount.total} entitiesLoading={isLoading} diff --git a/src/containers/Storage/StorageControls/StorageControls.tsx b/src/containers/Storage/StorageControls/StorageControls.tsx index bb348359df..bf50162859 100644 --- a/src/containers/Storage/StorageControls/StorageControls.tsx +++ b/src/containers/Storage/StorageControls/StorageControls.tsx @@ -11,8 +11,6 @@ import type {StorageType, VisibleEntities} from '../../../store/reducers/storage import type {NodesUptimeFilterValues} from '../../../utils/nodes'; import {StorageTypeFilter} from '../StorageTypeFilter/StorageTypeFilter'; import {StorageVisibleEntitiesFilter} from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter'; -import {UsageFilter} from '../UsageFilter/UsageFilter'; -import type {UsageFilterItem} from '../UsageFilter/UsageFilter'; import i18n from '../i18n'; import {b} from '../shared'; @@ -30,11 +28,6 @@ interface StorageControlsProps { nodesUptimeFilter: NodesUptimeFilterValues; handleNodesUptimeFilterChange: (value: NodesUptimeFilterValues) => void; - withGroupsUsageFilter?: boolean; - groupsUsageFilter?: string[]; - groupsUsageFilterOptions?: UsageFilterItem[]; - handleGroupsUsageFilterChange?: (value: string[]) => void; - entitiesCountCurrent: number; entitiesCountTotal?: number; entitiesLoading: boolean; @@ -57,11 +50,6 @@ export const StorageControls = ({ nodesUptimeFilter, handleNodesUptimeFilterChange, - withGroupsUsageFilter, - groupsUsageFilter, - groupsUsageFilterOptions, - handleGroupsUsageFilterChange, - entitiesCountCurrent, entitiesCountTotal, entitiesLoading, @@ -70,7 +58,6 @@ export const StorageControls = ({ handleSelectedColumnsUpdate, }: StorageControlsProps) => { const isNodes = storageType === STORAGE_TYPES.nodes; - const isGroups = storageType === STORAGE_TYPES.groups; const entityName = isNodes ? i18n('nodes') : i18n('groups'); return ( @@ -96,14 +83,6 @@ export const StorageControls = ({ {isNodes && ( )} - {isGroups && withGroupsUsageFilter && ( - - )} - void; - debounce?: number; -} - -const b = cn('usage-filter'); - -export const UsageFilter = (props: UsageFilterProps) => { - const {className, value = [], groups = [], onChange, debounce = 200} = props; - - const [filterValue, setFilterValue] = React.useState(value); - const timer = React.useRef(); - - React.useEffect(() => { - // sync inner state with external value - setFilterValue((prevValue) => { - if (prevValue.join(',') !== value.join(',')) { - return value; - } - - return prevValue; - }); - }, [value]); - - const options = React.useMemo( - () => - groups.map(({threshold, count}) => ({ - value: String(threshold), - text: `${threshold}%`, - data: {count}, - })), - [groups], - ); - - const handleUpdate = (newValue: string[]) => { - setFilterValue(newValue); - - window.clearTimeout(timer.current); - timer.current = window.setTimeout(() => { - onChange?.(newValue); - }, debounce); - }; - - const maxWidth = Math.max(...groups.map(({count}) => count)); - - const renderOption = ({value: optionValue, data, text}: SelectOption) => ( -
- -
- {i18n('groups_count', {count: data.count})} -
-
-
- ); - - return ( -