fix: problem filter to query

src/components/ProblemFilter/ProblemFilter.tsx

@@ -1,23 +1,33 @@
+import React from 'react';
+
 import {SegmentedRadioGroup} from '@gravity-ui/uikit';
 
-import {ProblemFilterValues} from '../../store/reducers/settings/settings';
-import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import i18n from './i18n';
 
 interface ProblemFilterProps {
-    value: ProblemFilterValue;
-    onChange: (value: ProblemFilterValue) => void;
+    value: boolean;
+    onChange: (value: boolean) => void;
     className?: string;
 }
 
-export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
+export function ProblemFilter({value, onChange, className}: ProblemFilterProps) {
+    const handleValueChange = React.useCallback(
+        (value: string) => {
+            onChange(value === 'true');
+        },
+        [onChange],
+    );
+
     return (
-        <SegmentedRadioGroup value={value} onUpdate={onChange} className={className}>
-            <SegmentedRadioGroup.Option value={ProblemFilterValues.ALL}>
-                {ProblemFilterValues.ALL}
-            </SegmentedRadioGroup.Option>
-            <SegmentedRadioGroup.Option value={ProblemFilterValues.PROBLEMS}>
-                {ProblemFilterValues.PROBLEMS}
+        <SegmentedRadioGroup
+            value={value.toString()}
+            onUpdate={handleValueChange}
+            className={className}
+        >
+            <SegmentedRadioGroup.Option value={'false'}>{i18n('all')}</SegmentedRadioGroup.Option>
+            <SegmentedRadioGroup.Option value={'true'}>
+                {i18n('with-problems')}
             </SegmentedRadioGroup.Option>
         </SegmentedRadioGroup>
     );
-};
+}

src/components/ProblemFilter/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "all": "All",
+  "with-problems": "With problems"
+}

src/components/ProblemFilter/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-problem-filter';
+
+export default registerKeysets(COMPONENT, {en});

src/containers/Nodes/NodesControls/NodesControls.tsx

@@ -3,14 +3,13 @@ import React from 'react';
 import {Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount';
-import {ProblemFilter} from '../../../components/ProblemFilter';
+import {ProblemFilter} from '../../../components/ProblemFilter/ProblemFilter';
 import {Search} from '../../../components/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
 import {
     useViewerNodesHandlerHasGroupingBySystemState,
     useViewerNodesHandlerHasNetworkStats,
 } from '../../../store/reducers/capabilities/hooks';
-import {useProblemFilter} from '../../../store/reducers/settings/hooks';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {useIsViewerUser} from '../../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {PeerRoleFilter} from '../PeerRoleFilter/PeerRoleFilter';
@@ -45,13 +44,14 @@ export function NodesControls({
         uptimeFilter,
         peerRoleFilter,
         groupByParam,
+        withProblems,
 
         handleSearchQueryChange,
         handleUptimeFilterChange,
         handlePeerRoleFilterChange,
         handleGroupByParamChange,
+        handleWithProblemsChange,
     } = useNodesPageQueryParams(groupByParams, withPeerRoleFilter);
-    const {problemFilter, handleProblemFilterChange} = useProblemFilter();
     const isViewerUser = useIsViewerUser();
 
     const systemStateGroupingAvailable = useViewerNodesHandlerHasGroupingBySystemState();
@@ -73,7 +73,7 @@ export function NodesControls({
                 value={searchValue}
             />
             {systemStateGroupingAvailable && withGroupBySelect ? null : (
-                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+                <ProblemFilter value={withProblems} onChange={handleWithProblemsChange} />
             )}
             {withGroupBySelect ? null : (
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />

src/containers/Nodes/NodesTable.tsx

@@ -6,7 +6,6 @@ import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../components/nodesColumns/types';
 import type {NodesFilters} from '../../store/reducers/nodes/types';
-import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
@@ -22,7 +21,7 @@ interface NodesTableProps {
     databaseFullPath?: string;
 
     searchValue: string;
-    problemFilter: ProblemFilterValue;
+    withProblems: boolean;
     uptimeFilter: NodesUptimeFilterValues;
     peerRoleFilter?: NodesPeerRole;
 
@@ -42,7 +41,7 @@ export function NodesTable({
     database,
     databaseFullPath,
     searchValue,
-    problemFilter,
+    withProblems,
     uptimeFilter,
     peerRoleFilter,
     filterGroup,
@@ -58,7 +57,7 @@ export function NodesTable({
             databaseFullPath,
             database,
             searchValue,
-            problemFilter,
+            withProblems,
             uptimeFilter,
             peerRoleFilter,
             filterGroup,
@@ -69,15 +68,15 @@ export function NodesTable({
         databaseFullPath,
         database,
         searchValue,
-        problemFilter,
+        withProblems,
         uptimeFilter,
         peerRoleFilter,
         filterGroup,
         filterGroupBy,
     ]);
 
     const renderEmptyDataMessage = () => {
-        if (problemFilter !== 'All' || uptimeFilter !== NodesUptimeFilterValues.All) {
+        if (withProblems || uptimeFilter !== NodesUptimeFilterValues.All) {
             return <Illustration name="thumbsUp" width={200} />;
         }
 

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -71,7 +71,7 @@ const NodeGroup = React.memo(function NodeGroup({
                         databaseFullPath={databaseFullPath}
                         database={database}
                         searchValue={searchValue}
-                        problemFilter={'All'}
+                        withProblems={false}
                         uptimeFilter={NodesUptimeFilterValues.All}
                         peerRoleFilter={peerRoleFilter}
                         filterGroup={name}

src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -7,7 +7,6 @@ import {NODES_COLUMNS_TITLES} from '../../../components/nodesColumns/constants';
 import type {NodesColumnId} from '../../../components/nodesColumns/constants';
 import type {NodesColumn} from '../../../components/nodesColumns/types';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
-import {useProblemFilter} from '../../../store/reducers/settings/hooks';
 import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
@@ -43,11 +42,10 @@ export function NodesComponent({
     groupByParams,
     onDataFetched,
 }: NodesComponentProps) {
-    const {searchValue, uptimeFilter, peerRoleFilter} = useNodesPageQueryParams(
+    const {searchValue, uptimeFilter, peerRoleFilter, withProblems} = useNodesPageQueryParams(
         groupByParams,
         withPeerRoleFilter,
     );
-    const {problemFilter} = useProblemFilter();
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -81,7 +79,7 @@ export function NodesComponent({
                     database={database}
                     databaseFullPath={databaseFullPath}
                     searchValue={searchValue}
-                    problemFilter={problemFilter}
+                    withProblems={withProblems}
                     uptimeFilter={uptimeFilter}
                     peerRoleFilter={peerRoleFilter}
                     columns={columnsToShow}
@@ -91,7 +89,7 @@ export function NodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, problemFilter, uptimeFilter, peerRoleFilter],
+                scrollDependencies: [searchValue, withProblems, uptimeFilter, peerRoleFilter],
             }}
         />
     );

src/containers/Nodes/PaginatedNodes/PaginatedNodes.tsx

@@ -8,7 +8,6 @@ import {
     useCapabilitiesLoaded,
     useViewerNodesHandlerHasGrouping,
 } from '../../../store/reducers/capabilities/hooks';
-import {useProblemFilter} from '../../../store/reducers/settings/hooks';
 import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
@@ -34,12 +33,13 @@ export interface PaginatedNodesProps {
 }
 
 export function PaginatedNodes(props: PaginatedNodesProps) {
-    const {uptimeFilter, groupByParam, handleUptimeFilterChange} = useNodesPageQueryParams(
-        props.groupByParams,
-        props.withPeerRoleFilter,
-    );
-
-    const {problemFilter, handleProblemFilterChange} = useProblemFilter();
+    const {
+        uptimeFilter,
+        groupByParam,
+        withProblems,
+        handleUptimeFilterChange,
+        handleWithProblemsChange,
+    } = useNodesPageQueryParams(props.groupByParams, props.withPeerRoleFilter);
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
@@ -49,15 +49,15 @@ export function PaginatedNodes(props: PaginatedNodesProps) {
     React.useEffect(() => {
         if (
             viewerNodesHandlerHasGrouping &&
-            (problemFilter !== 'All' || uptimeFilter !== NodesUptimeFilterValues.All)
+            (withProblems || uptimeFilter !== NodesUptimeFilterValues.All)
         ) {
-            handleProblemFilterChange('All');
+            handleWithProblemsChange(false);
             handleUptimeFilterChange(NodesUptimeFilterValues.All);
         }
     }, [
-        handleProblemFilterChange,
+        handleWithProblemsChange,
         handleUptimeFilterChange,
-        problemFilter,
+        withProblems,
         uptimeFilter,
         viewerNodesHandlerHasGrouping,
     ]);

src/containers/Nodes/getNodes.ts

@@ -10,7 +10,7 @@ import type {PreparedStorageNode} from '../../store/reducers/storage/types';
 import {prepareStorageNodesResponse} from '../../store/reducers/storage/utils';
 import type {NodesRequestParams} from '../../types/api/nodes';
 import {prepareSortValue} from '../../utils/filters';
-import {getProblemParamValue, getUptimeParamValue} from '../../utils/nodes';
+import {getUptimeParamValue} from '../../utils/nodes';
 import {getRequiredDataFields} from '../../utils/tableUtils/getRequiredDataFields';
 
 export const getNodes: FetchData<
@@ -26,7 +26,7 @@ export const getNodes: FetchData<
         databaseFullPath,
         database,
         searchValue,
-        problemFilter,
+        withProblems,
         uptimeFilter,
         peerRoleFilter,
         filterGroup,
@@ -50,7 +50,7 @@ export const getNodes: FetchData<
         path: schemePathParam,
         database,
         filter: searchValue,
-        problems_only: getProblemParamValue(problemFilter),
+        problems_only: withProblems,
         uptime: getUptimeParamValue(uptimeFilter),
         filter_peer_role: peerRoleFilter,
         filter_group: filterGroup,

src/containers/Nodes/useNodesPageQueryParams.ts

@@ -1,4 +1,6 @@
-import {StringParam, useQueryParams} from 'use-query-params';
+import React from 'react';
+
+import {BooleanParam, StringParam, useQueryParams} from 'use-query-params';
 
 import {useViewerNodesHandlerHasGroupingBySystemState} from '../../store/reducers/capabilities/hooks';
 import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
@@ -18,12 +20,14 @@ export function useNodesPageQueryParams(
         peerRole: StringParam,
         search: StringParam,
         nodesGroupBy: StringParam,
+        withProblems: BooleanParam,
     });
 
     const isViewerUser = useIsViewerUser();
 
     const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
     const searchValue = queryParams.search ?? '';
+    const withProblems = Boolean(queryParams.withProblems);
 
     let peerRoleFilter: NodesPeerRole | undefined;
 
@@ -41,28 +45,48 @@ export function useNodesPageQueryParams(
         systemStateGroupingAvailable,
     );
 
-    const handleSearchQueryChange = (value: string) => {
-        setQueryParams({search: value || undefined}, 'replaceIn');
-    };
-    const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
-        setQueryParams({uptimeFilter: value}, 'replaceIn');
-    };
-    const handlePeerRoleFilterChange = (value: NodesPeerRole) => {
-        setQueryParams({peerRole: value}, 'replaceIn');
-    };
-    const handleGroupByParamChange = (value: string) => {
-        setQueryParams({nodesGroupBy: value}, 'replaceIn');
-    };
+    const handleSearchQueryChange = React.useCallback(
+        (value: string) => {
+            setQueryParams({search: value || undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+    const handleUptimeFilterChange = React.useCallback(
+        (value: NodesUptimeFilterValues) => {
+            setQueryParams({uptimeFilter: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+    const handlePeerRoleFilterChange = React.useCallback(
+        (value: NodesPeerRole) => {
+            setQueryParams({peerRole: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+    const handleGroupByParamChange = React.useCallback(
+        (value: string) => {
+            setQueryParams({nodesGroupBy: value}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
+    const handleWithProblemsChange = React.useCallback(
+        (value: boolean) => {
+            setQueryParams({withProblems: value || undefined}, 'replaceIn');
+        },
+        [setQueryParams],
+    );
 
     return {
         uptimeFilter,
         searchValue,
         peerRoleFilter,
         groupByParam,
+        withProblems,
 
         handleSearchQueryChange,
         handleUptimeFilterChange,
         handlePeerRoleFilterChange,
         handleGroupByParamChange,
+        handleWithProblemsChange,
     };
 }