feat: add Nodes and Storage filters to url (#849)

Author: ValeraS

package-lock.json

@@ -48,7 +48,8 @@
     "url": "^0.11.3",
     "use-query-params": "^2.2.1",
     "web-vitals": "^1.1.2",
-    "ydb-ui-components": "^4.1.0"
+    "ydb-ui-components": "^4.1.0",
+    "zod": "^3.23.8"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",

package.json

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
 
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {AccessDenied} from '../../components/Errors/403';
@@ -12,13 +13,7 @@ import {ResizeableDataTable} from '../../components/ResizeableDataTable/Resizeab
 import {Search} from '../../components/Search';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {UptimeFilter} from '../../components/UptimeFIlter';
-import {
-    nodesApi,
-    setInitialState,
-    setSearchValue,
-    setSort,
-    setUptimeFilter,
-} from '../../store/reducers/nodes/nodes';
+import {nodesApi} from '../../store/reducers/nodes/nodes';
 import {filterNodes} from '../../store/reducers/nodes/selectors';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
 import {ProblemFilterValues, changeFilter} from '../../store/reducers/settings/settings';
@@ -35,6 +30,7 @@ import {
     NodesUptimeFilterValues,
     isSortableNodesProperty,
     isUnavailableNode,
+    nodesUptimeFilterValuesSchema,
 } from '../../utils/nodes';
 
 import {NODES_COLUMNS_WIDTH_LS_KEY, getNodesColumns} from './getNodesColumns';
@@ -50,16 +46,17 @@ interface NodesProps {
 }
 
 export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
+    const [queryParams, setQueryParams] = useQueryParams({
+        uptimeFilter: StringParam,
+        search: StringParam,
+    });
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const searchValue = queryParams.search ?? '';
+
     const dispatch = useTypedDispatch();
 
     const isClusterNodes = !path;
 
-    const {
-        uptimeFilter,
-        searchValue,
-        sortOrder = ASCENDING,
-        sortValue = 'NodeId',
-    } = useTypedSelector((state) => state.nodes);
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -77,32 +74,26 @@ export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
 
     const {currentData: data, isLoading, error} = useGetComputeNodes ? computeQuery : nodesQuery;
 
-    const [sort, handleSort] = useTableSort({sortValue, sortOrder}, (sortParams) =>
-        dispatch(setSort(sortParams as NodesSortParams)),
-    );
+    const [sortValue, setSortValue] = React.useState<NodesSortParams>({
+        sortValue: 'NodeId',
+        sortOrder: ASCENDING,
+    });
+    const [sort, handleSort] = useTableSort(sortValue, (sortParams) => {
+        setSortValue(sortParams as NodesSortParams);
+    });
 
     const handleSearchQueryChange = (value: string) => {
-        dispatch(setSearchValue(value));
+        setQueryParams({search: value || undefined}, 'replaceIn');
     };
 
     const handleProblemFilterChange = (value: ProblemFilterValue) => {
         dispatch(changeFilter(value));
     };
 
     const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
-        dispatch(setUptimeFilter(value));
+        setQueryParams({uptimeFilter: value}, 'replaceIn');
     };
 
-    // Since Nodes component is used in several places,
-    // we need to reset filters, searchValue
-    // in nodes reducer when path changes
-    React.useEffect(() => {
-        return () => {
-            // Clean data on component unmount
-            dispatch(setInitialState());
-        };
-    }, [dispatch, path]);
-
     const nodes = React.useMemo(() => {
         return filterNodes(data?.Nodes, {searchValue, uptimeFilter, problemFilter});
     }, [data, searchValue, uptimeFilter, problemFilter]);

src/containers/Nodes/Nodes.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {StringParam, useQueryParams} from 'use-query-params';
+
 import {EntitiesCount} from '../../components/EntitiesCount';
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -15,16 +17,18 @@ import type {
 } from '../../components/VirtualTable';
 import {ResizeableVirtualTable} from '../../components/VirtualTable/ResizeableVirtualTable';
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
-import {ProblemFilterValues} from '../../store/reducers/settings/settings';
+import {ProblemFilterValues, changeFilter} from '../../store/reducers/settings/settings';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 import {cn} from '../../utils/cn';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
 import {
     NodesUptimeFilterValues,
     getProblemParamValue,
     getUptimeParamValue,
     isSortableNodesProperty,
     isUnavailableNode,
+    nodesUptimeFilterValuesSchema,
 } from '../../utils/nodes';
 import type {NodesSortValue} from '../../utils/nodes';
 
@@ -43,13 +47,16 @@ interface NodesProps {
 }
 
 export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: NodesProps) => {
-    const [searchValue, setSearchValue] = React.useState('');
-    const [problemFilter, setProblemFilter] = React.useState<ProblemFilterValue>(
-        ProblemFilterValues.ALL,
-    );
-    const [uptimeFilter, setUptimeFilter] = React.useState<NodesUptimeFilterValues>(
-        NodesUptimeFilterValues.All,
-    );
+    const [queryParams, setQueryParams] = useQueryParams({
+        uptimeFilter: StringParam,
+        search: StringParam,
+    });
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const searchValue = queryParams.search ?? '';
+
+    const dispatch = useTypedDispatch();
+
+    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
 
     const filters = React.useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
@@ -76,16 +83,28 @@ export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: Node
     };
 
     const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
+        const handleSearchQueryChange = (value: string) => {
+            setQueryParams({search: value || undefined}, 'replaceIn');
+        };
+
+        const handleProblemFilterChange = (value: ProblemFilterValue) => {
+            dispatch(changeFilter(value));
+        };
+
+        const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
+            setQueryParams({uptimeFilter: value}, 'replaceIn');
+        };
+
         return (
             <React.Fragment>
                 <Search
-                    onChange={setSearchValue}
+                    onChange={handleSearchQueryChange}
                     placeholder="Host name"
                     className={b('search')}
                     value={searchValue}
                 />
-                <ProblemFilter value={problemFilter} onChange={setProblemFilter} />
-                <UptimeFilter value={uptimeFilter} onChange={setUptimeFilter} />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+                <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
                 <EntitiesCount
                     total={totalEntities}
                     current={foundEntities}

src/containers/Nodes/VirtualNodes.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {ArrayParam, StringParam, useQueryParams, withDefault} from 'use-query-params';
+
 import {AccessDenied} from '../../components/Errors/403';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
@@ -10,20 +12,9 @@ import {
     filterGroups,
     filterNodes,
     getUsageFilterOptions,
-    selectGroupsSortParams,
-    selectNodesSortParams,
 } from '../../store/reducers/storage/selectors';
-import {
-    setGroupsSortParams,
-    setInitialState,
-    setNodesSortParams,
-    setStorageTextFilter,
-    setStorageType,
-    setUptimeFilter,
-    setUsageFilter,
-    setVisibleEntities,
-    storageApi,
-} from '../../store/reducers/storage/storage';
+import {storageApi} from '../../store/reducers/storage/storage';
+import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types';
 import type {
     StorageSortParams,
     StorageType,
@@ -35,39 +26,69 @@ import {
     useNodesRequestParams,
     useStorageRequestParams,
     useTableSort,
-    useTypedDispatch,
     useTypedSelector,
 } from '../../utils/hooks';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes';
 
 import {StorageControls} from './StorageControls/StorageControls';
 import {StorageGroups} from './StorageGroups/StorageGroups';
 import {StorageNodes} from './StorageNodes/StorageNodes';
 import {b} from './shared';
+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 {
     additionalNodesProps?: AdditionalNodesProps;
     tenant?: string;
     nodeId?: string;
 }
 
 export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) => {
-    const dispatch = useTypedDispatch();
-
     const {autorefresh} = useTypedSelector((state) => state.schema);
-    const {
-        type,
-        visible: visibleEntities,
-        filter,
-        usageFilter,
-        uptimeFilter,
-    } = useTypedSelector((state) => state.storage);
+    const [queryParams, setQueryParams] = useQueryParams({
+        type: StringParam,
+        visible: StringParam,
+        search: StringParam,
+        uptimeFilter: StringParam,
+        usageFilter: UsageFilterParam,
+    });
+    const type = storageTypeSchema.parse(queryParams.type);
+    const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible);
+    const filter = queryParams.search ?? '';
+    const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
+    const usageFilter = queryParams.usageFilter;
 
     const nodesMap = useTypedSelector(selectNodesMap);
-    const nodesSortParams = useTypedSelector(selectNodesSortParams);
-    const groupsSortParams = useTypedSelector(selectGroupsSortParams);
+
+    const [nodeSort, setNodeSort] = React.useState<NodesSortParams>({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const nodesSortParams = nodeSort.sortValue ? nodeSort : defaultSortNode;
+
+    const [groupSort, setGroupSort] = React.useState<StorageSortParams>({
+        sortOrder: undefined,
+        sortValue: undefined,
+    });
+    const groupsSortParams = groupSort.sortOrder ? groupSort : getDefaultSortGroup(visibleEntities);
 
     // Do not display Nodes table for Node page (NodeId present)
     const isNodePage = nodeId !== undefined;
@@ -120,38 +141,31 @@ export const Storage = ({additionalNodesProps, tenant, nodeId}: StorageProps) =>
 
     const usageFilterOptions = React.useMemo(() => getUsageFilterOptions(groups), [groups]);
 
-    React.useEffect(() => {
-        return () => {
-            // Clean data on component unmount
-            dispatch(setInitialState());
-        };
-    }, [dispatch]);
-
     const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) =>
-        dispatch(setNodesSortParams(params as NodesSortParams)),
+        setNodeSort(params as NodesSortParams),
     );
     const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) =>
-        dispatch(setGroupsSortParams(params as StorageSortParams)),
+        setGroupSort(params as StorageSortParams),
     );
 
     const handleUsageFilterChange = (value: string[]) => {
-        dispatch(setUsageFilter(value));
+        setQueryParams({usageFilter: value.length ? value : undefined}, 'replaceIn');
     };
 
     const handleTextFilterChange = (value: string) => {
-        dispatch(setStorageTextFilter(value));
+        setQueryParams({search: value || undefined}, 'replaceIn');
     };
 
     const handleGroupVisibilityChange = (value: VisibleEntities) => {
-        dispatch(setVisibleEntities(value));
+        setQueryParams({visible: value}, 'replaceIn');
     };
 
     const handleStorageTypeChange = (value: StorageType) => {
-        dispatch(setStorageType(value));
+        setQueryParams({type: value}, 'replaceIn');
     };
 
     const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
-        dispatch(setUptimeFilter(value));
+        setQueryParams({uptimeFilter: value}, 'replaceIn');
     };
 
     const handleShowAllNodes = () => {