Skip to content

Commit 1285049

Browse files
artemmufazalovartemmufazalov
authored
feat(Network): add peer role filter (#1724)
1 parent e86c845 commit 1285049

File tree

12 files changed

+135
-12
lines changed

12 files changed

+135
-12
lines changed

‎src/containers/Nodes/Nodes.tsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ export interface NodesProps {
4242
parentRef: React.RefObject<HTMLElement>;
4343
additionalNodesProps?: AdditionalNodesProps;
4444

45+
withPeerRoleFilter?: boolean;
46+
4547
columns?: Column<NodesPreparedEntity>[];
4648
defaultColumnsIds?: NodesColumnId[];
4749
requiredColumnsIds?: NodesColumnId[];
@@ -54,6 +56,7 @@ export function Nodes({
5456
database,
5557
parentRef,
5658
additionalNodesProps,
59+
withPeerRoleFilter,
5760
columns = getNodesColumns({database, getNodeRef: additionalNodesProps?.getNodeRef}),
5861
defaultColumnsIds = DEFAULT_NODES_COLUMNS,
5962
requiredColumnsIds = REQUIRED_NODES_COLUMNS,
@@ -92,6 +95,7 @@ export function Nodes({
9295
path={path}
9396
database={database}
9497
parentRef={parentRef}
98+
withPeerRoleFilter={withPeerRoleFilter}
9599
columns={columns}
96100
defaultColumnsIds={defaultColumnsIds}
97101
requiredColumnsIds={requiredColumnsIds}
@@ -106,6 +110,7 @@ export function Nodes({
106110
path={path}
107111
database={database}
108112
parentRef={parentRef}
113+
withPeerRoleFilter={withPeerRoleFilter}
109114
columns={columns}
110115
defaultColumnsIds={defaultColumnsIds}
111116
requiredColumnsIds={requiredColumnsIds}
@@ -123,6 +128,8 @@ interface NodesComponentProps {
123128
database?: string;
124129
parentRef: React.RefObject<HTMLElement>;
125130

131+
withPeerRoleFilter?: boolean;
132+
126133
columns: Column<NodesPreparedEntity>[];
127134
defaultColumnsIds: NodesColumnId[];
128135
requiredColumnsIds: NodesColumnId[];
@@ -134,13 +141,14 @@ function NodesComponent({
134141
path,
135142
database,
136143
parentRef,
144+
withPeerRoleFilter,
137145
columns,
138146
defaultColumnsIds,
139147
requiredColumnsIds,
140148
selectedColumnsKey,
141149
groupByParams,
142150
}: NodesComponentProps) {
143-
const {searchValue, uptimeFilter} = useNodesPageQueryParams(groupByParams);
151+
const {searchValue, uptimeFilter, peerRoleFilter} = useNodesPageQueryParams(groupByParams);
144152
const {problemFilter} = useProblemFilter();
145153
const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
146154

@@ -157,6 +165,7 @@ function NodesComponent({
157165
<NodesControls
158166
withGroupBySelect={viewerNodesHandlerHasGrouping}
159167
groupByParams={groupByParams}
168+
withPeerRoleFilter={withPeerRoleFilter}
160169
columnsToSelect={columnsToSelect}
161170
handleSelectedColumnsUpdate={setColumns}
162171
entitiesCountCurrent={foundEntities}
@@ -173,6 +182,7 @@ function NodesComponent({
173182
searchValue={searchValue}
174183
problemFilter={problemFilter}
175184
uptimeFilter={uptimeFilter}
185+
peerRoleFilter={peerRoleFilter}
176186
columns={columnsToShow}
177187
parentRef={parentRef}
178188
renderControls={renderControls}
@@ -184,13 +194,14 @@ function GroupedNodesComponent({
184194
path,
185195
database,
186196
parentRef,
197+
withPeerRoleFilter,
187198
columns,
188199
defaultColumnsIds,
189200
requiredColumnsIds,
190201
selectedColumnsKey,
191202
groupByParams,
192203
}: NodesComponentProps) {
193-
const {searchValue, groupByParam} = useNodesPageQueryParams(groupByParams);
204+
const {searchValue, peerRoleFilter, groupByParam} = useNodesPageQueryParams(groupByParams);
194205
const [autoRefreshInterval] = useAutoRefreshInterval();
195206

196207
const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -206,6 +217,7 @@ function GroupedNodesComponent({
206217
path,
207218
database,
208219
filter: searchValue,
220+
filter_peer_role: peerRoleFilter,
209221
group: groupByParam,
210222
limit: 0,
211223
},
@@ -228,6 +240,7 @@ function GroupedNodesComponent({
228240
<NodesControls
229241
withGroupBySelect
230242
groupByParams={groupByParams}
243+
withPeerRoleFilter={withPeerRoleFilter}
231244
columnsToSelect={columnsToSelect}
232245
handleSelectedColumnsUpdate={setColumns}
233246
entitiesCountCurrent={found}
@@ -257,6 +270,7 @@ function GroupedNodesComponent({
257270
searchValue={searchValue}
258271
problemFilter={'All'}
259272
uptimeFilter={NodesUptimeFilterValues.All}
273+
peerRoleFilter={peerRoleFilter}
260274
filterGroup={name}
261275
filterGroupBy={groupByParam}
262276
initialEntitiesCount={count}

‎src/containers/Nodes/NodesControls/NodesControls.tsx

+20-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@ import {EntitiesCount} from '../../../components/EntitiesCount';
77
import {ProblemFilter} from '../../../components/ProblemFilter';
88
import {Search} from '../../../components/Search';
99
import {UptimeFilter} from '../../../components/UptimeFIlter';
10-
import {useViewerNodesHandlerHasGroupingBySystemState} from '../../../store/reducers/capabilities/hooks';
10+
import {
11+
useViewerNodesHandlerHasGroupingBySystemState,
12+
useViewerNodesHandlerHasNetworkStats,
13+
} from '../../../store/reducers/capabilities/hooks';
1114
import {useProblemFilter} from '../../../store/reducers/settings/hooks';
1215
import type {NodesGroupByField} from '../../../types/api/nodes';
16+
import {PeerRoleFilter} from '../PeerRoleFilter/PeerRoleFilter';
1317
import {getNodesGroupByOptions} from '../columns/constants';
1418
import i18n from '../i18n';
1519
import {b} from '../shared';
@@ -19,6 +23,8 @@ interface NodesControlsProps {
1923
withGroupBySelect?: boolean;
2024
groupByParams: NodesGroupByField[] | undefined;
2125

26+
withPeerRoleFilter?: boolean;
27+
2228
columnsToSelect: TableColumnSetupItem[];
2329
handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void;
2430

@@ -31,6 +37,8 @@ export function NodesControls({
3137
withGroupBySelect,
3238
groupByParams = [],
3339

40+
withPeerRoleFilter,
41+
3442
columnsToSelect,
3543
handleSelectedColumnsUpdate,
3644

@@ -41,17 +49,22 @@ export function NodesControls({
4149
const {
4250
searchValue,
4351
uptimeFilter,
52+
peerRoleFilter,
4453
groupByParam,
4554

4655
handleSearchQueryChange,
4756
handleUptimeFilterChange,
57+
handlePeerRoleFilterChange,
4858
handleGroupByParamChange,
4959
} = useNodesPageQueryParams(groupByParams);
5060
const {problemFilter, handleProblemFilterChange} = useProblemFilter();
5161

5262
const systemStateGroupingAvailable = useViewerNodesHandlerHasGroupingBySystemState();
5363
const groupByoptions = getNodesGroupByOptions(groupByParams, systemStateGroupingAvailable);
5464

65+
const networStatsAvailable = useViewerNodesHandlerHasNetworkStats();
66+
const shouldDisplayPeerRoleFilter = withPeerRoleFilter && networStatsAvailable;
67+
5568
const handleGroupBySelectUpdate = (value: string[]) => {
5669
handleGroupByParamChange(value[0]);
5770
};
@@ -70,6 +83,12 @@ export function NodesControls({
7083
{withGroupBySelect ? null : (
7184
<UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
7285
)}
86+
{shouldDisplayPeerRoleFilter ? (
87+
<React.Fragment>
88+
<Text variant="body-2">{i18n('controls_peer-role-label')}</Text>
89+
<PeerRoleFilter value={peerRoleFilter} onChange={handlePeerRoleFilterChange} />
90+
</React.Fragment>
91+
) : null}
7392
<TableColumnSetup
7493
popupWidth={200}
7594
items={columnsToSelect}

‎src/containers/Nodes/NodesTable.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import {Illustration} from '../../components/Illustration';
44
import type {RenderControls} from '../../components/PaginatedTable';
55
import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
66
import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
7-
import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
7+
import type {NodesFilters, NodesPreparedEntity} from '../../store/reducers/nodes/types';
88
import type {ProblemFilterValue} from '../../store/reducers/settings/types';
9-
import type {NodesGroupByField} from '../../types/api/nodes';
9+
import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
1010
import {NodesUptimeFilterValues} from '../../utils/nodes';
1111
import type {Column} from '../../utils/tableUtils/types';
1212

@@ -21,6 +21,7 @@ interface NodesTableProps {
2121
searchValue: string;
2222
problemFilter: ProblemFilterValue;
2323
uptimeFilter: NodesUptimeFilterValues;
24+
peerRoleFilter?: NodesPeerRole;
2425

2526
filterGroup?: string;
2627
filterGroupBy?: NodesGroupByField;
@@ -38,24 +39,35 @@ export function NodesTable({
3839
searchValue,
3940
problemFilter,
4041
uptimeFilter,
42+
peerRoleFilter,
4143
filterGroup,
4244
filterGroupBy,
4345
columns,
4446
parentRef,
4547
renderControls,
4648
initialEntitiesCount,
4749
}: NodesTableProps) {
48-
const tableFilters = React.useMemo(() => {
50+
const tableFilters: NodesFilters = React.useMemo(() => {
4951
return {
5052
path,
5153
database,
5254
searchValue,
5355
problemFilter,
5456
uptimeFilter,
57+
peerRoleFilter,
5558
filterGroup,
5659
filterGroupBy,
5760
};
58-
}, [path, database, searchValue, problemFilter, uptimeFilter, filterGroup, filterGroupBy]);
61+
}, [
62+
path,
63+
database,
64+
searchValue,
65+
problemFilter,
66+
uptimeFilter,
67+
peerRoleFilter,
68+
filterGroup,
69+
filterGroupBy,
70+
]);
5971

6072
const renderEmptyDataMessage = () => {
6173
if (problemFilter !== 'All' || uptimeFilter !== NodesUptimeFilterValues.All) {

‎src/containers/Nodes/PeerRoleFilter/PeerRoleFilter.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {RadioButton} from '@gravity-ui/uikit';
2+
3+
import type {NodesPeerRole} from '../../../types/api/nodes';
4+
5+
import {NODES_PEER_ROLES, NODES_PEER_ROLES_TITLES} from './utils';
6+
7+
interface PeerRoleFilterProps {
8+
value?: NodesPeerRole;
9+
onChange: (value: NodesPeerRole) => void;
10+
}
11+
12+
export function PeerRoleFilter({value = 'database', onChange}: PeerRoleFilterProps) {
13+
return (
14+
<RadioButton value={value} onUpdate={onChange}>
15+
{NODES_PEER_ROLES.map((role) => {
16+
return (
17+
<RadioButton.Option key={role} value={role}>
18+
{NODES_PEER_ROLES_TITLES[role]}
19+
</RadioButton.Option>
20+
);
21+
})}
22+
</RadioButton>
23+
);
24+
}

‎src/containers/Nodes/PeerRoleFilter/utils.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type {NodesPeerRole} from '../../../types/api/nodes';
2+
import i18n from '../i18n';
3+
4+
export const NODES_PEER_ROLES: NodesPeerRole[] = ['database', 'static', 'other', 'any'];
5+
6+
export const NODES_PEER_ROLES_TITLES: Record<NodesPeerRole, string> = {
7+
get database() {
8+
return i18n('database');
9+
},
10+
get static() {
11+
return i18n('static');
12+
},
13+
get other() {
14+
return i18n('other');
15+
},
16+
get any() {
17+
return i18n('any');
18+
},
19+
};
20+
21+
export function parseNodesPeerRoleFilter(paramToParse: unknown): NodesPeerRole | undefined {
22+
return NODES_PEER_ROLES.find((peerRoleParam) => peerRoleParam === paramToParse);
23+
}

‎src/containers/Nodes/getNodes.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,16 @@ export const getNodes: FetchData<
2727
} = params;
2828

2929
const {sortOrder, columnId} = sortParams ?? {};
30-
const {path, database, searchValue, problemFilter, uptimeFilter, filterGroup, filterGroupBy} =
31-
filters ?? {};
30+
const {
31+
path,
32+
database,
33+
searchValue,
34+
problemFilter,
35+
uptimeFilter,
36+
peerRoleFilter,
37+
filterGroup,
38+
filterGroupBy,
39+
} = filters ?? {};
3240

3341
const sortField = getNodesColumnSortField(columnId);
3442
const sort = sortField ? prepareSortValue(sortField, sortOrder) : undefined;
@@ -47,6 +55,7 @@ export const getNodes: FetchData<
4755
filter: searchValue,
4856
problems_only: getProblemParamValue(problemFilter),
4957
uptime: getUptimeParamValue(uptimeFilter),
58+
filter_peer_role: peerRoleFilter,
5059
filter_group: filterGroup,
5160
filter_group_by: filterGroupBy,
5261
fieldsRequired: dataFieldsRequired,

‎src/containers/Nodes/i18n/en.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,12 @@
66
"no-nodes-groups": "No nodes groups",
77

88
"controls_search-placeholder": "Host name",
9-
"controls_group-by-placeholder": "Group by:"
9+
"controls_group-by-placeholder": "Group by:",
10+
11+
"controls_peer-role-label": "Peer role:",
12+
13+
"database": "database",
14+
"static": "static",
15+
"other": "other",
16+
"any": "any"
1017
}

‎src/containers/Nodes/useNodesPageQueryParams.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
import {StringParam, useQueryParams} from 'use-query-params';
22

33
import {useViewerNodesHandlerHasGroupingBySystemState} from '../../store/reducers/capabilities/hooks';
4-
import type {NodesGroupByField} from '../../types/api/nodes';
4+
import type {NodesGroupByField, NodesPeerRole} from '../../types/api/nodes';
55
import type {NodesUptimeFilterValues} from '../../utils/nodes';
66
import {nodesUptimeFilterValuesSchema} from '../../utils/nodes';
77

8+
import {parseNodesPeerRoleFilter} from './PeerRoleFilter/utils';
89
import {parseNodesGroupByParam} from './columns/constants';
910

1011
export function useNodesPageQueryParams(groupByParams: NodesGroupByField[] | undefined) {
1112
const [queryParams, setQueryParams] = useQueryParams({
1213
uptimeFilter: StringParam,
14+
peerRole: StringParam,
1315
search: StringParam,
1416
nodesGroupBy: StringParam,
1517
});
1618

1719
const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter);
1820
const searchValue = queryParams.search ?? '';
21+
const peerRoleFilter = parseNodesPeerRoleFilter(queryParams.peerRole);
1922

2023
const systemStateGroupingAvailable = useViewerNodesHandlerHasGroupingBySystemState();
2124
const groupByParam = parseNodesGroupByParam(
@@ -30,17 +33,22 @@ export function useNodesPageQueryParams(groupByParams: NodesGroupByField[] | und
3033
const handleUptimeFilterChange = (value: NodesUptimeFilterValues) => {
3134
setQueryParams({uptimeFilter: value}, 'replaceIn');
3235
};
36+
const handlePeerRoleFilterChange = (value: NodesPeerRole) => {
37+
setQueryParams({peerRole: value}, 'replaceIn');
38+
};
3339
const handleGroupByParamChange = (value: string) => {
3440
setQueryParams({nodesGroupBy: value}, 'replaceIn');
3541
};
3642

3743
return {
3844
uptimeFilter,
3945
searchValue,
46+
peerRoleFilter,
4047
groupByParam,
4148

4249
handleSearchQueryChange,
4350
handleUptimeFilterChange,
51+
handlePeerRoleFilterChange,
4452
handleGroupByParamChange,
4553
};
4654
}

‎src/containers/Tenant/Diagnostics/Network/NetworkWrapper.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export function NetworkWrapper({
4141
path={path}
4242
database={database}
4343
parentRef={parentRef}
44+
withPeerRoleFilter
4445
additionalNodesProps={additionalNodesProps}
4546
columns={getNetworkTableNodesColumns({
4647
database: database,

‎src/store/reducers/capabilities/hooks.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const useViewerNodesHandlerHasGroupingBySystemState = () => {
6363
};
6464

6565
export const useViewerNodesHandlerHasNetworkStats = () => {
66-
return useGetFeatureVersion('/viewer/nodes') > 12;
66+
return useGetFeatureVersion('/viewer/nodes') > 13;
6767
};
6868

6969
export const useFeatureFlagsAvailable = () => {

0 commit comments

Comments
 (0)