diff --git a/src/containers/Storage/PaginatedStorage.tsx b/src/containers/Storage/PaginatedStorage.tsx index 346ba24236..7ec52b32bf 100644 --- a/src/containers/Storage/PaginatedStorage.tsx +++ b/src/containers/Storage/PaginatedStorage.tsx @@ -3,7 +3,7 @@ import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedT import {PaginatedStorageGroups} from './PaginatedStorageGroups'; import {PaginatedStorageNodes} from './PaginatedStorageNodes'; import type {StorageViewContext} from './types'; -import {useStorageQueryParams} from './useStorageQueryParams'; +import {useSaveStorageType, useStorageQueryParams} from './useStorageQueryParams'; import {getStorageGroupsInitialEntitiesCount, getStorageNodesInitialEntitiesCount} from './utils'; export interface PaginatedStorageProps { @@ -21,6 +21,7 @@ export interface PaginatedStorageProps { export const PaginatedStorage = (props: PaginatedStorageProps) => { const {storageType} = useStorageQueryParams(); + useSaveStorageType(); const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges(); const isNodes = storageType === 'nodes'; diff --git a/src/containers/Storage/useStorageQueryParams.ts b/src/containers/Storage/useStorageQueryParams.ts index 169e60a392..dcf2ef0165 100644 --- a/src/containers/Storage/useStorageQueryParams.ts +++ b/src/containers/Storage/useStorageQueryParams.ts @@ -1,9 +1,12 @@ import React from 'react'; -import {StringParam, useQueryParams} from 'use-query-params'; +import {StringParam, useQueryParam, useQueryParams} from 'use-query-params'; +import {SETTING_KEYS} from '../../store/reducers/settings/constants'; +import {STORAGE_TYPES} from '../../store/reducers/storage/constants'; import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types'; import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types'; +import {useSetting} from '../../utils/hooks'; import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes'; import {storageGroupsGroupByParamSchema} from './PaginatedStorageGroupsTable/columns/constants'; @@ -22,6 +25,11 @@ export function useStorageQueryParams() { storageGroupsGroupBy: StringParam, }); + const [_savedStorageType, setSavedStorageType] = useSetting( + SETTING_KEYS.STORAGE_TYPE, + STORAGE_TYPES.groups, + ); + const storageType = storageTypeSchema.parse(queryParams.type); const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible); @@ -42,7 +50,7 @@ export function useStorageQueryParams() { patch[STORAGE_SEARCH_PARAM_BY_TYPE[storageType]] = queryParams.search; setQueryParams(patch, 'replaceIn'); } - }, [queryParams.search, storageType]); + }, [queryParams.search, storageType, setQueryParams]); const handleTextFilterGroupsChange = (value: string) => { setQueryParams({groupsSearch: value || undefined}, 'replaceIn'); @@ -56,9 +64,13 @@ export function useStorageQueryParams() { setQueryParams({visible: value}, 'replaceIn'); }; - const handleStorageTypeChange = (value: StorageType) => { - setQueryParams({type: value}, 'replaceIn'); - }; + const handleStorageTypeChange = React.useCallback( + (value: StorageType) => { + setQueryParams({type: value}, 'replaceIn'); + setSavedStorageType(value); + }, + [setQueryParams, setSavedStorageType], + ); const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => { setQueryParams({uptimeFilter: value}, 'replaceIn'); @@ -103,3 +115,22 @@ export function useStorageQueryParams() { handleShowAllNodes, }; } + +export function useSaveStorageType() { + const [queryStorageType, setQueryStorageType] = useQueryParam('type', StringParam); + const [savedStorageType] = useSetting( + SETTING_KEYS.STORAGE_TYPE, + STORAGE_TYPES.groups, + ); + + const normalizedStorageType = React.useMemo( + () => storageTypeSchema.parse(queryStorageType ?? savedStorageType), + [queryStorageType, savedStorageType], + ); + + React.useEffect(() => { + if (normalizedStorageType !== queryStorageType) { + setQueryStorageType(normalizedStorageType); + } + }, [normalizedStorageType, queryStorageType, setQueryStorageType]); +} diff --git a/src/store/reducers/settings/constants.ts b/src/store/reducers/settings/constants.ts index cbc1c8bed4..eff66c6f89 100644 --- a/src/store/reducers/settings/constants.ts +++ b/src/store/reducers/settings/constants.ts @@ -2,6 +2,7 @@ import type {ValueOf} from '../../../types/common'; import {AclSyntax} from '../../../utils/constants'; import {Lang} from '../../../utils/i18n'; import {DEFAULT_QUERY_SETTINGS, QUERY_ACTIONS} from '../../../utils/query'; +import {STORAGE_TYPES} from '../storage/constants'; import {TENANT_PAGES_IDS} from '../tenant/constants'; import type {SettingOptions} from './types'; @@ -36,6 +37,7 @@ export const SETTING_KEYS = { QUERY_SETTINGS_BANNER_LAST_CLOSED: 'querySettingsBannerLastClosed', QUERY_EXECUTION_SETTINGS: 'queryExecutionSettings', ACL_SYNTAX: 'aclSyntax', + STORAGE_TYPE: 'storageType', } as const; export type SettingKey = ValueOf; @@ -71,6 +73,7 @@ export const DEFAULT_USER_SETTINGS = { [SETTING_KEYS.QUERY_SETTINGS_BANNER_LAST_CLOSED]: undefined, [SETTING_KEYS.QUERY_EXECUTION_SETTINGS]: DEFAULT_QUERY_SETTINGS, [SETTING_KEYS.ACL_SYNTAX]: AclSyntax.YdbShort, + [SETTING_KEYS.STORAGE_TYPE]: STORAGE_TYPES.groups, } as const satisfies Record; export const SETTINGS_OPTIONS: Record = {