diff --git a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx index 4ccbd85076..2e0f22c0bf 100644 --- a/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx @@ -96,7 +96,7 @@ export function GroupedStorageGroupsComponent({ viewContext, }: PaginatedStorageProps) { const [autoRefreshInterval] = useAutoRefreshInterval(); - const {searchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} = + const {groupsSearchValue, storageGroupsGroupByParam, visibleEntities, handleShowAllGroups} = useStorageQueryParams(); const {columnsToShow, columnsToSelect, setColumns} = useStorageGroupsSelectedColumns({ @@ -111,7 +111,7 @@ export function GroupedStorageGroupsComponent({ nodeId, groupId, pDiskId, - filter: searchValue, + filter: groupsSearchValue, shouldUseGroupsHandler: true, group: storageGroupsGroupByParam, }, @@ -152,7 +152,7 @@ export function GroupedStorageGroupsComponent({ groupId={groupId} pDiskId={pDiskId} filterGroupBy={storageGroupsGroupByParam} - searchValue={searchValue} + searchValue={groupsSearchValue} visibleEntities={'all'} scrollContainerRef={scrollContainerRef} onIsExpandedChange={setIsGroupExpanded} @@ -190,7 +190,7 @@ export function GroupedStorageGroupsComponent({ initialState={initialState} tableWrapperProps={{ scrollContainerRef, - scrollDependencies: [searchValue, storageGroupsGroupByParam, tableGroups], + scrollDependencies: [groupsSearchValue, storageGroupsGroupByParam, tableGroups], loading: isLoading, className: b('groups-wrapper'), }} diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx index 14c1f52656..dd131e5139 100644 --- a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsComponent.tsx @@ -18,7 +18,7 @@ export function StorageGroupsComponent({ scrollContainerRef, initialEntitiesCount, }: PaginatedStorageProps) { - const {searchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams(); + const {groupsSearchValue, visibleEntities, handleShowAllGroups} = useStorageQueryParams(); const storageGroupsHandlerHasGrouping = useStorageGroupsHandlerHasGrouping(); @@ -49,7 +49,7 @@ export function StorageGroupsComponent({ nodeId={nodeId} groupId={groupId} pDiskId={pDiskId} - searchValue={searchValue} + searchValue={groupsSearchValue} visibleEntities={visibleEntities} onShowAll={handleShowAllGroups} scrollContainerRef={scrollContainerRef} @@ -60,7 +60,7 @@ export function StorageGroupsComponent({ } tableWrapperProps={{ scrollContainerRef, - scrollDependencies: [searchValue, visibleEntities], + scrollDependencies: [groupsSearchValue, visibleEntities], }} /> ); diff --git a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx index ec9f18067e..0af22bcde9 100644 --- a/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx +++ b/src/containers/Storage/PaginatedStorageGroups/StorageGroupsControls.tsx @@ -32,11 +32,11 @@ export function StorageGroupsControls({ entitiesLoading, }: StorageControlsProps) { const { - searchValue, + groupsSearchValue, storageType, visibleEntities, storageGroupsGroupByParam, - handleTextFilterChange, + handleTextFilterGroupsChange, handleStorageTypeChange, handleVisibleEntitiesChange, handleStorageGroupsGroupByParamChange, @@ -60,8 +60,8 @@ export function StorageGroupsControls({ return ( diff --git a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx index a27723fefa..b6cac0d5dc 100644 --- a/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx @@ -98,7 +98,8 @@ export function GroupedStorageNodesComponent({ }: PaginatedStorageProps) { const [autoRefreshInterval] = useAutoRefreshInterval(); - const {searchValue, storageNodesGroupByParam, handleShowAllNodes} = useStorageQueryParams(); + const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} = + useStorageQueryParams(); const {handleDataFetched, columnsSettings} = useStorageColumnsSettings(); const {columnsToShow, columnsToSelect, setColumns} = useStorageNodesColumnsToSelect({ @@ -111,7 +112,7 @@ export function GroupedStorageNodesComponent({ { database, with: 'all', - filter: searchValue, + filter: nodesSearchValue, node_id: nodeId, group_id: groupId, group: storageNodesGroupByParam, @@ -151,7 +152,7 @@ export function GroupedStorageNodesComponent({ database={database} nodeId={nodeId} groupId={groupId} - searchValue={searchValue} + searchValue={nodesSearchValue} visibleEntities="all" filterGroupBy={storageNodesGroupByParam} scrollContainerRef={scrollContainerRef} @@ -191,7 +192,7 @@ export function GroupedStorageNodesComponent({ initialState={initialState} tableWrapperProps={{ scrollContainerRef, - scrollDependencies: [searchValue, storageNodesGroupByParam, tableGroups], + scrollDependencies: [nodesSearchValue, storageNodesGroupByParam, tableGroups], loading: isLoading, className: b('groups-wrapper'), }} diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx index 747361cc93..6187d5eb5a 100644 --- a/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx @@ -18,7 +18,7 @@ export function StorageNodesComponent({ scrollContainerRef, initialEntitiesCount, }: PaginatedStorageProps) { - const {searchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} = + const {nodesSearchValue, visibleEntities, nodesUptimeFilter, handleShowAllNodes} = useStorageQueryParams(); const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping(); @@ -52,7 +52,7 @@ export function StorageNodesComponent({ database={database} nodeId={nodeId} groupId={groupId} - searchValue={searchValue} + searchValue={nodesSearchValue} visibleEntities={visibleEntities} nodesUptimeFilter={nodesUptimeFilter} onShowAll={handleShowAllNodes} @@ -65,7 +65,7 @@ export function StorageNodesComponent({ } tableWrapperProps={{ scrollContainerRef, - scrollDependencies: [searchValue, visibleEntities, nodesUptimeFilter], + scrollDependencies: [nodesSearchValue, visibleEntities, nodesUptimeFilter], }} /> ); diff --git a/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx b/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx index 44293d9657..7b56886199 100644 --- a/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx +++ b/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx @@ -31,12 +31,12 @@ export function StorageNodesControls({ entitiesLoading, }: StorageControlsProps) { const { - searchValue, + nodesSearchValue, storageType, visibleEntities, nodesUptimeFilter, storageNodesGroupByParam, - handleTextFilterChange, + handleTextFilterNodesChange, handleStorageTypeChange, handleVisibleEntitiesChange, handleUptimeFilterChange, @@ -50,8 +50,8 @@ export function StorageNodesControls({ return ( diff --git a/src/containers/Storage/constants.ts b/src/containers/Storage/constants.ts new file mode 100644 index 0000000000..f479af1fb6 --- /dev/null +++ b/src/containers/Storage/constants.ts @@ -0,0 +1,4 @@ +export const STORAGE_SEARCH_PARAM_BY_TYPE: Record = { + groups: 'groupsSearch', + nodes: 'nodesSearch', +}; diff --git a/src/containers/Storage/useStorageQueryParams.ts b/src/containers/Storage/useStorageQueryParams.ts index 3caf92987e..169e60a392 100644 --- a/src/containers/Storage/useStorageQueryParams.ts +++ b/src/containers/Storage/useStorageQueryParams.ts @@ -1,3 +1,5 @@ +import React from 'react'; + import {StringParam, useQueryParams} from 'use-query-params'; import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types'; @@ -6,11 +8,14 @@ import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../util import {storageGroupsGroupByParamSchema} from './PaginatedStorageGroupsTable/columns/constants'; import {storageNodesGroupByParamSchema} from './PaginatedStorageNodesTable/columns/constants'; +import {STORAGE_SEARCH_PARAM_BY_TYPE} from './constants'; export function useStorageQueryParams() { const [queryParams, setQueryParams] = useQueryParams({ type: StringParam, visible: StringParam, + groupsSearch: StringParam, + nodesSearch: StringParam, search: StringParam, uptimeFilter: StringParam, storageNodesGroupBy: StringParam, @@ -20,7 +25,8 @@ export function useStorageQueryParams() { const storageType = storageTypeSchema.parse(queryParams.type); const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible); - const searchValue = queryParams.search ?? ''; + const groupsSearchValue = queryParams.groupsSearch ?? ''; + const nodesSearchValue = queryParams.nodesSearch ?? ''; const nodesUptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter); const storageGroupsGroupByParam = storageGroupsGroupByParamSchema.parse( @@ -30,8 +36,20 @@ export function useStorageQueryParams() { queryParams.storageNodesGroupBy, ); - const handleTextFilterChange = (value: string) => { - setQueryParams({search: value || undefined}, 'replaceIn'); + React.useEffect(() => { + if (queryParams.search) { + const patch: Record = {search: undefined}; + patch[STORAGE_SEARCH_PARAM_BY_TYPE[storageType]] = queryParams.search; + setQueryParams(patch, 'replaceIn'); + } + }, [queryParams.search, storageType]); + + const handleTextFilterGroupsChange = (value: string) => { + setQueryParams({groupsSearch: value || undefined}, 'replaceIn'); + }; + + const handleTextFilterNodesChange = (value: string) => { + setQueryParams({nodesSearch: value || undefined}, 'replaceIn'); }; const handleVisibleEntitiesChange = (value: VisibleEntities) => { @@ -49,6 +67,7 @@ export function useStorageQueryParams() { const handleStorageGroupsGroupByParamChange = (value: string) => { setQueryParams({storageGroupsGroupBy: value}, 'replaceIn'); }; + const handleStorageNodesGroupByParamChange = (value: string) => { setQueryParams({storageNodesGroupBy: value}, 'replaceIn'); }; @@ -65,12 +84,14 @@ export function useStorageQueryParams() { return { storageType, visibleEntities, - searchValue, + groupsSearchValue, + nodesSearchValue, nodesUptimeFilter, storageGroupsGroupByParam, storageNodesGroupByParam, - handleTextFilterChange, + handleTextFilterGroupsChange, + handleTextFilterNodesChange, handleVisibleEntitiesChange, handleStorageTypeChange, handleUptimeFilterChange,