feat(Network): add peer role filter (#1724)

ydb-platform · Nov 29, 2024 · 1285049 · 1285049
1 parent e86c845
commit 1285049
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 12 deletions.
diff --git a/src/containers/Nodes/Nodes.tsx b/src/containers/Nodes/Nodes.tsx
@@ -42,6 +42,8 @@ export interface NodesProps {
     parentRef: React.RefObject<HTMLElement>;
     additionalNodesProps?: AdditionalNodesProps;
 
+    withPeerRoleFilter?: boolean;
+
     columns?: Column<NodesPreparedEntity>[];
     defaultColumnsIds?: NodesColumnId[];
     requiredColumnsIds?: NodesColumnId[];
@@ -54,6 +56,7 @@ export function Nodes({
     database,
     parentRef,
     additionalNodesProps,
+    withPeerRoleFilter,
     columns = getNodesColumns({database, getNodeRef: additionalNodesProps?.getNodeRef}),
     defaultColumnsIds = DEFAULT_NODES_COLUMNS,
     requiredColumnsIds = REQUIRED_NODES_COLUMNS,
@@ -92,6 +95,7 @@ export function Nodes({
                     path={path}
                     database={database}
                     parentRef={parentRef}
+                    withPeerRoleFilter={withPeerRoleFilter}
                     columns={columns}
                     defaultColumnsIds={defaultColumnsIds}
                     requiredColumnsIds={requiredColumnsIds}
@@ -106,6 +110,7 @@ export function Nodes({
                 path={path}
                 database={database}
                 parentRef={parentRef}
+                withPeerRoleFilter={withPeerRoleFilter}
                 columns={columns}
                 defaultColumnsIds={defaultColumnsIds}
                 requiredColumnsIds={requiredColumnsIds}
@@ -123,6 +128,8 @@ interface NodesComponentProps {
     database?: string;
     parentRef: React.RefObject<HTMLElement>;
 
+    withPeerRoleFilter?: boolean;
+
     columns: Column<NodesPreparedEntity>[];
     defaultColumnsIds: NodesColumnId[];
     requiredColumnsIds: NodesColumnId[];
@@ -134,13 +141,14 @@ function NodesComponent({
     path,
     database,
     parentRef,
+    withPeerRoleFilter,
     columns,
     defaultColumnsIds,
     requiredColumnsIds,
     selectedColumnsKey,
     groupByParams,
 }: NodesComponentProps) {
-    const {searchValue, uptimeFilter} = useNodesPageQueryParams(groupByParams);
+    const {searchValue, uptimeFilter, peerRoleFilter} = useNodesPageQueryParams(groupByParams);
     const {problemFilter} = useProblemFilter();
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
@@ -157,6 +165,7 @@ function NodesComponent({
             <NodesControls
                 withGroupBySelect={viewerNodesHandlerHasGrouping}
                 groupByParams={groupByParams}
+                withPeerRoleFilter={withPeerRoleFilter}
                 columnsToSelect={columnsToSelect}
                 handleSelectedColumnsUpdate={setColumns}
                 entitiesCountCurrent={foundEntities}
@@ -173,6 +182,7 @@ function NodesComponent({
             searchValue={searchValue}
             problemFilter={problemFilter}
             uptimeFilter={uptimeFilter}
+            peerRoleFilter={peerRoleFilter}
             columns={columnsToShow}
             parentRef={parentRef}
             renderControls={renderControls}
@@ -184,13 +194,14 @@ function GroupedNodesComponent({
     path,
     database,
     parentRef,
+    withPeerRoleFilter,
     columns,
     defaultColumnsIds,
     requiredColumnsIds,
     selectedColumnsKey,
     groupByParams,
 }: NodesComponentProps) {
-    const {searchValue, groupByParam} = useNodesPageQueryParams(groupByParams);
+    const {searchValue, peerRoleFilter, groupByParam} = useNodesPageQueryParams(groupByParams);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -206,6 +217,7 @@ function GroupedNodesComponent({
             path,
             database,
             filter: searchValue,
+            filter_peer_role: peerRoleFilter,
             group: groupByParam,
             limit: 0,
         },
@@ -228,6 +240,7 @@ function GroupedNodesComponent({
             <NodesControls
                 withGroupBySelect
                 groupByParams={groupByParams}
+                withPeerRoleFilter={withPeerRoleFilter}
                 columnsToSelect={columnsToSelect}
                 handleSelectedColumnsUpdate={setColumns}
                 entitiesCountCurrent={found}
@@ -257,6 +270,7 @@ function GroupedNodesComponent({
                             searchValue={searchValue}
                             problemFilter={'All'}
                             uptimeFilter={NodesUptimeFilterValues.All}
+                            peerRoleFilter={peerRoleFilter}
                             filterGroup={name}
                             filterGroupBy={groupByParam}
                             initialEntitiesCount={count}

diff --git a/src/containers/Nodes/NodesControls/NodesControls.tsx b/src/containers/Nodes/NodesControls/NodesControls.tsx
@@ -7,9 +7,13 @@ import {EntitiesCount} from '../../../components/EntitiesCount';
 import {ProblemFilter} from '../../../components/ProblemFilter';
 import {Search} from '../../../components/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
-import {useViewerNodesHandlerHasGroupingBySystemState} from '../../../store/reducers/capabilities/hooks';
+import {
+    useViewerNodesHandlerHasGroupingBySystemState,
+    useViewerNodesHandlerHasNetworkStats,
+} from '../../../store/reducers/capabilities/hooks';
 import {useProblemFilter} from '../../../store/reducers/settings/hooks';
 import type {NodesGroupByField} from '../../../types/api/nodes';
+import {PeerRoleFilter} from '../PeerRoleFilter/PeerRoleFilter';
 import {getNodesGroupByOptions} from '../columns/constants';
 import i18n from '../i18n';
 import {b} from '../shared';
@@ -19,6 +23,8 @@ interface NodesControlsProps {
     withGroupBySelect?: boolean;
     groupByParams: NodesGroupByField[] | undefined;
 
+    withPeerRoleFilter?: boolean;
+
     columnsToSelect: TableColumnSetupItem[];
     handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void;
 
@@ -31,6 +37,8 @@ export function NodesControls({
     withGroupBySelect,
     groupByParams = [],
 
+    withPeerRoleFilter,
+
     columnsToSelect,
     handleSelectedColumnsUpdate,
 
@@ -41,17 +49,22 @@ export function NodesControls({
     const {
         searchValue,
         uptimeFilter,
+        peerRoleFilter,
         groupByParam,
 
         handleSearchQueryChange,
         handleUptimeFilterChange,
+        handlePeerRoleFilterChange,
         handleGroupByParamChange,
     } = useNodesPageQueryParams(groupByParams);
     const {problemFilter, handleProblemFilterChange} = useProblemFilter();
 
     const systemStateGroupingAvailable = useViewerNodesHandlerHasGroupingBySystemState();
     const groupByoptions = getNodesGroupByOptions(groupByParams, systemStateGroupingAvailable);
 
+    const networStatsAvailable = useViewerNodesHandlerHasNetworkStats();
+    const shouldDisplayPeerRoleFilter = withPeerRoleFilter && networStatsAvailable;
+
     const handleGroupBySelectUpdate = (value: string[]) => {
         handleGroupByParamChange(value[0]);
     };
@@ -70,6 +83,12 @@ export function NodesControls({
             {withGroupBySelect ? null : (
                 <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
             )}
+            {shouldDisplayPeerRoleFilter ? (
+                <React.Fragment>
+                    <Text variant="body-2">{i18n('controls_peer-role-label')}</Text>
+                    <PeerRoleFilter value={peerRoleFilter} onChange={handlePeerRoleFilterChange} />
+                </React.Fragment>
+            ) : null}
             <TableColumnSetup
                 popupWidth={200}
                 items={columnsToSelect}

diff --git a/src/containers/Nodes/NodesTable.tsx b/src/containers/Nodes/NodesTable.tsx
@@ -4,9 +4,9 @@ import {Illustration} from '../../components/Illustration';
 import type {RenderControls} from '../../components/PaginatedTable';
 import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
 import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
-import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
+import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
-import type {NodesGroupByField} from '../../types/api/nodes';
+import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import type {Column} from '../../utils/tableUtils/types';
 
@@ -21,6 +21,7 @@ interface NodesTableProps {
     searchValue: string;
     problemFilter: ProblemFilterValue;
     uptimeFilter: NodesUptimeFilterValues;
+    peerRoleFilter?: NodesPeerRole;
 
     filterGroup?: string;
     filterGroupBy?: NodesGroupByField;
@@ -38,24 +39,35 @@ export function NodesTable({
     searchValue,
     problemFilter,
     uptimeFilter,
+    peerRoleFilter,
     filterGroup,
     filterGroupBy,
     columns,
     parentRef,
     renderControls,
     initialEntitiesCount,
 }: NodesTableProps) {
-    const tableFilters = React.useMemo(() => {
+    const tableFilters: NodesFilters = React.useMemo(() => {
         return {
             path,
             database,
             searchValue,
             problemFilter,
             uptimeFilter,
+            peerRoleFilter,
             filterGroup,
             filterGroupBy,
         };
-    }, [path, database, searchValue, problemFilter, uptimeFilter, filterGroup, filterGroupBy]);
+    }, [
+        path,
+        database,
+        searchValue,
+        problemFilter,
+        uptimeFilter,
+        peerRoleFilter,
+        filterGroup,
+        filterGroupBy,
+    ]);
 
     const renderEmptyDataMessage = () => {
         if (problemFilter !== 'All' || uptimeFilter !== NodesUptimeFilterValues.All) {

diff --git a/src/containers/Nodes/PeerRoleFilter/PeerRoleFilter.tsx b/src/containers/Nodes/PeerRoleFilter/PeerRoleFilter.tsx
@@ -0,0 +1,24 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {NodesPeerRole} from '../../../types/api/nodes';
+
+import {NODES_PEER_ROLES, NODES_PEER_ROLES_TITLES} from './utils';
+
+interface PeerRoleFilterProps {
+    value?: NodesPeerRole;
+    onChange: (value: NodesPeerRole) => void;
+}
+
+export function PeerRoleFilter({value = 'database', onChange}: PeerRoleFilterProps) {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            {NODES_PEER_ROLES.map((role) => {
+                return (
+                    <RadioButton.Option key={role} value={role}>
+                        {NODES_PEER_ROLES_TITLES[role]}
+                    </RadioButton.Option>
+                );
+            })}
+        </RadioButton>
+    );
+}
diff --git a/src/containers/Nodes/PeerRoleFilter/utils.tsx b/src/containers/Nodes/PeerRoleFilter/utils.tsx
@@ -0,0 +1,23 @@
+import type {NodesPeerRole} from '../../../types/api/nodes';
+import i18n from '../i18n';
+
+export const NODES_PEER_ROLES: NodesPeerRole[] = ['database', 'static', 'other', 'any'];
+
+export const NODES_PEER_ROLES_TITLES: Record<NodesPeerRole, string> = {
+    get database() {
+        return i18n('database');
+    },
+    get static() {
+        return i18n('static');
+    },
+    get other() {
+        return i18n('other');
+    },
+    get any() {
+        return i18n('any');
+    },
+};
+
+export function parseNodesPeerRoleFilter(paramToParse: unknown): NodesPeerRole | undefined {
+    return NODES_PEER_ROLES.find((peerRoleParam) => peerRoleParam === paramToParse);
+}
diff --git a/src/containers/Nodes/getNodes.ts b/src/containers/Nodes/getNodes.ts
@@ -27,8 +27,16 @@ export const getNodes: FetchData<
     } = params;
 
     const {sortOrder, columnId} = sortParams ?? {};
-    const {path, database, searchValue, problemFilter, uptimeFilter, filterGroup, filterGroupBy} =
-        filters ?? {};
+    const {
+        path,
+        database,
+        searchValue,
+        problemFilter,
+        uptimeFilter,
+        peerRoleFilter,
+        filterGroup,
+        filterGroupBy,
+    } = filters ?? {};
 
     const sortField = getNodesColumnSortField(columnId);
     const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
@@ -47,6 +55,7 @@ export const getNodes: FetchData<
         filter: searchValue,
         problems_only: getProblemParamValue(problemFilter),
         uptime: getUptimeParamValue(uptimeFilter),
+        filter_peer_role: peerRoleFilter,
         filter_group: filterGroup,
         filter_group_by: filterGroupBy,
         fieldsRequired: dataFieldsRequired,

diff --git a/src/containers/Nodes/i18n/en.json b/src/containers/Nodes/i18n/en.json
@@ -6,5 +6,12 @@
   "no-nodes-groups": "No nodes groups",
 
   "controls_search-placeholder": "Host name",
-  "controls_group-by-placeholder": "Group by:"
+  "controls_group-by-placeholder": "Group by:",
+
+  "controls_peer-role-label": "Peer role:",
+
+  "database": "database",
+  "static": "static",
+  "other": "other",
+  "any": "any"
 }
diff --git a/src/containers/Nodes/useNodesPageQueryParams.ts b/src/containers/Nodes/useNodesPageQueryParams.ts
@@ -1,21 +1,24 @@
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {useViewerNodesHandlerHasGroupingBySystemState} from '../../store/reducers/capabilities/hooks';
-import type {NodesGroupByField} from '../../types/api/nodes';
+import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
 import type {NodesUptimeFilterValues} from '../../utils/nodes';
 import {nodesUptimeFilterValuesSchema} from '../../utils/nodes';
 
+import {parseNodesPeerRoleFilter} from './PeerRoleFilter/utils';
 import {parseNodesGroupByParam} from './columns/constants';
 
 export function useNodesPageQueryParams(groupByParams: NodesGroupByField[] | undefined) {
     const [queryParams, setQueryParams] = useQueryParams({
         uptimeFilter: StringParam,
+        peerRole: StringParam,
         search: StringParam,
         nodesGroupBy: StringParam,
     });
 
     const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
     const searchValue = queryParams.search ?? '';
+    const peerRoleFilter = parseNodesPeerRoleFilter(queryParams.peerRole);
 
     const systemStateGroupingAvailable = useViewerNodesHandlerHasGroupingBySystemState();
     const groupByParam = parseNodesGroupByParam(
@@ -30,17 +33,22 @@ export function useNodesPageQueryParams(groupByParams: NodesGroupByField[] | und
     const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
         setQueryParams({uptimeFilter: value}, 'replaceIn');
     };
+    const handlePeerRoleFilterChange = (value: NodesPeerRole) => {
+        setQueryParams({peerRole: value}, 'replaceIn');
+    };
     const handleGroupByParamChange = (value: string) => {
         setQueryParams({nodesGroupBy: value}, 'replaceIn');
     };
 
     return {
         uptimeFilter,
         searchValue,
+        peerRoleFilter,
         groupByParam,
 
         handleSearchQueryChange,
         handleUptimeFilterChange,
+        handlePeerRoleFilterChange,
         handleGroupByParamChange,
     };
 }
diff --git a/src/containers/Tenant/Diagnostics/Network/NetworkWrapper.tsx b/src/containers/Tenant/Diagnostics/Network/NetworkWrapper.tsx
@@ -41,6 +41,7 @@ export function NetworkWrapper({
                     path={path}
                     database={database}
                     parentRef={parentRef}
+                    withPeerRoleFilter
                     additionalNodesProps={additionalNodesProps}
                     columns={getNetworkTableNodesColumns({
                         database: database,

diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts
@@ -63,7 +63,7 @@ export const useViewerNodesHandlerHasGroupingBySystemState = () => {
 };
 
 export const useViewerNodesHandlerHasNetworkStats = () => {
-    return useGetFeatureVersion('/viewer/nodes') > 12;
+    return useGetFeatureVersion('/viewer/nodes') > 13;
 };
 
 export const useFeatureFlagsAvailable = () => {