Skip to content

Commit 3bed714

Browse files
jpinsonneaujpinsonneau
committed
address feedback
1 parent c4bdb2e commit 3bed714

18 files changed

+208
-232
lines changed

‎web/locales/en/plugin__netobserv-plugin.json‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
"Cluster name": "Cluster name",
1515
"UDN": "UDN",
1616
"Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.": "Can't find metrics for this element. Check your capture filters to ensure we can monitor it. Else it probably means there is no traffic here.",
17-
"Peer A": "Peer A",
17+
"Endpoint A": "Endpoint A",
1818
"Source": "Source",
19-
"Peer B": "Peer B",
19+
"Endpoint B": "Endpoint B",
2020
"Destination": "Destination",
2121
"Stats": "Stats",
2222
"Top 5 DNS latency": "Top 5 DNS latency",
@@ -74,9 +74,9 @@
7474
"Force": "Force",
7575
"Grid": "Grid",
7676
"Invalid": "Invalid",
77-
"Any": "Any",
78-
"All": "All",
79-
"Peers": "Peers",
77+
"OR": "OR",
78+
"AND": "AND",
79+
"Bidirectional": "Bidirectional",
8080
"rate": "rate",
8181
"Average": "Average",
8282
"Latest": "Latest",
@@ -105,6 +105,7 @@
105105
"Fully dropped": "Fully dropped",
106106
"Containing drops": "Containing drops",
107107
"Without drops": "Without drops",
108+
"All": "All",
108109
"Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.": "Log type to query. A conversation is an aggregation of flows between same peers. Only ended conversations will appear in Overview and Topology tabs.",
109110
"Log type": "Log type",
110111
"Only available when FlowCollector.processor.logTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"": "Only available when FlowCollector.processor.logTypes option equals \"CONNECTIONS\", \"ENDED_CONNECTIONS\" or \"ALL\"",
@@ -480,12 +481,7 @@
480481
"Filter": "Filter",
481482
"Comparator": "Comparator",
482483
"Add filter": "Add filter",
483-
"Peer": "Peer",
484-
"When a filter has multiple values, the logical OR operator is used between each of these.": "When a filter has multiple values, the logical OR operator is used between each of these.",
485-
"When using match any, the logical OR operator is used between filters.": "When using match any, the logical OR operator is used between filters.",
486-
"When using match {{match}}, the logical AND operator is used between filters.": "When using match {{match}}, the logical AND operator is used between filters.",
487-
"OR": "OR",
488-
"AND": "AND",
484+
"Endpoint": "Endpoint",
489485
"Not": "Not",
490486
"equals": "equals",
491487
"more than": "more than",
@@ -495,22 +491,21 @@
495491
"group filter": "group filter",
496492
"filter": "filter",
497493
"Edit": "Edit",
498-
"As peer A": "As peer A",
494+
"Either": "Either",
495+
"As endpoint A": "As endpoint A",
499496
"As source": "As source",
500-
"As peer B": "As peer B",
497+
"As endpoint B": "As endpoint B",
501498
"As destination": "As destination",
502499
"Remove": "Remove",
503-
"Match filters according to your needs.": "Match filters according to your needs.",
504-
"Any will match at least one filter": "Any will match at least one filter",
505-
"All will match all the filters": "All will match all the filters",
506-
"Peers will match all the filters and include the return traffic": "Peers will match all the filters and include the return traffic",
507-
"Match": "Match",
500+
"the logical OR operator is used between each values of the same filter.": "the logical OR operator is used between each values of the same filter.",
501+
"The logical OR operator is used between filters.": "The logical OR operator is used between filters.",
502+
"The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.": "The logical AND operator is used between Endpoints and common filters. The traffic is matched in both directions.",
503+
"The logical AND operator is used between filters keeping specified directions.": "The logical AND operator is used between filters keeping specified directions.",
508504
"Edit filters": "Edit filters",
509505
"Reset defaults": "Reset defaults",
510506
"Clear all": "Clear all",
511507
"Swap": "Swap",
512508
"Swap from and to filters": "Swap from and to filters",
513-
"Common": "Common",
514509
"Quick filters": "Quick filters",
515510
"More options": "More options",
516511
"Export overview": "Export overview",

‎web/src/components/drawer/element/element-panel-content.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
157157
isExpanded={!hidden.includes('source')}
158158
id={'source'}
159159
>
160-
{filters.match === 'peers' ? t('Peer A') : t('Source')}
160+
{filters.match === 'bidirectionnal' ? t('Endpoint A') : t('Source')}
161161
</AccordionToggle>
162162
}
163163
<AccordionContent
@@ -185,7 +185,7 @@ export const ElementPanelContent: React.FC<ElementPanelContentProps> = ({
185185
isExpanded={!hidden.includes('destination')}
186186
id={'destination'}
187187
>
188-
{filters.match === 'peers' ? t('Peer B') : t('Destination')}
188+
{filters.match === 'bidirectionnal' ? t('Endpoint B') : t('Destination')}
189189
</AccordionToggle>
190190
}
191191
<AccordionContent

‎web/src/components/dropdowns/match-dropdown.tsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
11
import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
2-
import { BarsIcon, ListIcon, RouteIcon } from '@patternfly/react-icons';
2+
import { LongArrowAltDownIcon, LongArrowAltUpIcon } from '@patternfly/react-icons';
33
import * as React from 'react';
44
import { useTranslation } from 'react-i18next';
55
import { Match } from '../../model/flow-query';
66

77
export interface MatchDropdownProps {
88
selected: Match;
99
setMatch: (l: Match) => void;
10+
allowBidirectionnal?: boolean;
1011
id?: string;
1112
}
1213

13-
export const MatchValues = ['all', 'any', 'peers'] as Match[];
14+
export const MatchValues = ['any', 'all', 'bidirectionnal'] as Match[];
1415

15-
export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch, id }) => {
16+
export const MatchDropdown: React.FC<MatchDropdownProps> = ({ allowBidirectionnal, selected, setMatch, id }) => {
1617
const { t } = useTranslation('plugin__netobserv-plugin');
1718
const [isOpen, setOpen] = React.useState(false);
1819

19-
const getMatchDisplay = (layoutName: Match) => {
20+
const getMatchDisplay = (layoutName: Match, toggle?: boolean) => {
2021
switch (layoutName) {
2122
case 'any':
22-
return t('Any');
23+
return t('OR');
2324
case 'all':
24-
return t('All');
25-
case 'peers':
26-
return t('Peers');
27-
default:
28-
return t('Invalid');
29-
}
30-
};
31-
32-
const getIcon = (layoutName: Match) => {
33-
switch (layoutName) {
34-
case 'any':
35-
return <BarsIcon />;
36-
case 'all':
37-
return <ListIcon />;
38-
case 'peers':
39-
return <RouteIcon />;
25+
return t('AND');
26+
case 'bidirectionnal':
27+
if (allowBidirectionnal) {
28+
if (toggle) {
29+
return (
30+
<div style={{ transform: 'rotate(90deg)' }}>
31+
<LongArrowAltUpIcon />
32+
<LongArrowAltDownIcon />
33+
</div>
34+
);
35+
} else {
36+
return t('Bidirectional');
37+
}
38+
} else {
39+
// display as AND if bidirectionnal is not allowed here
40+
return t('AND');
41+
}
4042
default:
4143
return t('Invalid');
4244
}
@@ -56,13 +58,11 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch
5658
onClick={() => setOpen(!isOpen)}
5759
onBlur={() => setTimeout(() => setOpen(false), 500)}
5860
>
59-
{getIcon(selected)}
60-
&nbsp;
61-
{getMatchDisplay(selected)}
61+
{getMatchDisplay(selected, true)}
6262
</MenuToggle>
6363
)}
6464
>
65-
{MatchValues.map(v => (
65+
{MatchValues.filter(v => allowBidirectionnal || v !== 'bidirectionnal').map(v => (
6666
<DropdownItem
6767
data-test={v}
6868
id={v}
@@ -72,8 +72,6 @@ export const MatchDropdown: React.FC<MatchDropdownProps> = ({ selected, setMatch
7272
setMatch(v);
7373
}}
7474
>
75-
{getIcon(v)}
76-
&nbsp;
7775
{getMatchDisplay(v)}
7876
</DropdownItem>
7977
))}

‎web/src/components/netflow-traffic-tab.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
118118
values: [{ v: `${obj.kind}.${obj.metadata!.namespace}.${obj.metadata!.name}` }]
119119
}
120120
],
121-
match: 'peers'
121+
match: 'bidirectionnal'
122122
});
123123
break;
124124
case 'Service':
@@ -156,7 +156,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
156156
values: [{ v: obj!.metadata!.name as string }]
157157
}
158158
],
159-
match: 'peers'
159+
match: 'bidirectionnal'
160160
});
161161
break;
162162
case 'Node':
@@ -168,7 +168,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
168168
values: [{ v: obj!.metadata!.name as string }]
169169
}
170170
],
171-
match: 'peers'
171+
match: 'bidirectionnal'
172172
});
173173
break;
174174
case 'ReplicaSet':
@@ -182,7 +182,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
182182
})
183183
}
184184
],
185-
match: 'peers'
185+
match: 'bidirectionnal'
186186
});
187187
break;
188188
case 'HorizontalPodAutoscaler':
@@ -197,7 +197,7 @@ export const NetflowTrafficTab: React.FC<NetflowTrafficTabProps> = ({ match, obj
197197
]
198198
}
199199
],
200-
match: 'peers'
200+
match: 'bidirectionnal'
201201
});
202202
break;
203203
}

‎web/src/components/tabs/netflow-topology/2d/styles/styleDecorators.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,15 +136,15 @@ export const NodeDecorators: React.FC<NodeDecoratorsProps> = ({
136136
<ContextMenuItem key={'src'} onClick={onFilterDirClick('src')}>
137137
<Checkbox
138138
id={'context-src-checkbox'}
139-
label={match === 'peers' ? t('Peer A') : t('Source')}
139+
label={match === 'bidirectionnal' ? t('Endpoint A') : t('Source')}
140140
isChecked={isSrcFiltered}
141141
onChange={() => onFilterDirClick('src')}
142142
/>
143143
</ContextMenuItem>,
144144
<ContextMenuItem key={'dst'} onClick={onFilterDirClick('dst')}>
145145
<Checkbox
146146
id={'context-dst-checkbox'}
147-
label={match === 'peers' ? t('Peer B') : t('Destination')}
147+
label={match === 'bidirectionnal' ? t('Endpoint B') : t('Destination')}
148148
isChecked={isDstFiltered}
149149
onChange={() => onFilterDirClick('dst')}
150150
/>

‎web/src/components/tabs/netflow-topology/2d/topology-content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export const TopologyContent: React.FC<TopologyContentProps> = ({
223223
false,
224224
filters.list,
225225
list => {
226-
setFilters({ list: list, match: 'peers' });
226+
setFilters({ list: list, match: 'bidirectionnal' });
227227
},
228228
filterDefinitions
229229
);

‎web/src/components/toolbar/filters/__tests__/filter-search-input.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ describe('<FilterSearchInput />', () => {
5252

5353
//check form content
5454
const popper = wrapper.find('#filter-popper');
55-
expect(popper.find('#direction-filter-toggle').last().text()).toBe('Source');
55+
expect(popper.find('#radio-source').last().props().checked).toBe(true);
5656
expect(popper.find('#column-filter-toggle').last().text()).toBe('Name');
5757
expect(popper.find('#filter-compare-toggle-button').last().text()).toBe('Equals=');
5858
expect(popper.find('#search').last().props().value).toBe('loki');

‎web/src/components/toolbar/filters/filter-search-input.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
137137
newFilters.push({ def, compare, values: [filterValue] });
138138
}
139139

140-
// force peers mode to have directions set
141-
if (filters?.match === 'peers') {
140+
// force bidirectionnal mode to have directions set
141+
if (filters?.match === 'bidirectionnal') {
142142
newFilters = setTargeteableFilters(filterDefinitions, newFilters, direction === 'destination' ? 'dst' : 'src');
143143
}
144144
setFilters({ ...filters!, list: newFilters });
@@ -343,19 +343,19 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
343343
} else {
344344
suggestions = suggestions.filter(s => s.value != FilterCompare.moreThanOrEqual);
345345
}
346-
// also suggest other definitions starting by the same id
346+
// also suggest other definitions containing the id
347347
setSuggestions(
348348
suggestions.concat(
349349
filterDefinitions
350-
.filter(fd => fd.id !== updated.def!.id && fd.id.startsWith(updated.def!.id))
350+
.filter(fd => fd.id !== updated.def!.id && fd.id.includes(updated.def!.id))
351351
.map(defToSuggestion)
352352
)
353353
);
354354
}
355355
} else if (updated.value?.length) {
356356
// suggest fields if def is not matched yet
357357
const suggestions = filterDefinitions
358-
.filter(fd => fd.id.startsWith(updated.value!))
358+
.filter(fd => fd.id.includes(updated.value!))
359359
.map(defToSuggestion) as Suggestion[];
360360
if (filter.component === 'autocomplete') {
361361
filter
@@ -495,6 +495,7 @@ export const FilterSearchInput: React.FC<FilterSearchInputProps> = ({
495495
setSelectedDirection={setDirection}
496496
selectedFilter={filter}
497497
setSelectedFilter={setFilter}
498+
match={filters?.match}
498499
/>
499500
<FilterHints def={filter} />
500501
</FormGroup>

‎web/src/components/toolbar/filters/filters-chips.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,20 @@
2525
text-align: center;
2626
}
2727

28-
.and-or-text {
28+
.match-dropdown-container {
2929
align-self: center;
3030
padding: 0 0.5em 0 0.5em;
3131
}
3232

33+
.match-dropdown-container>button::before,
34+
.match-dropdown-container>button::after {
35+
display: none;
36+
}
37+
38+
.match-dropdown-container>button>.pf-v5-c-menu-toggle__controls {
39+
padding-left: 0.25em;
40+
}
41+
3342
.flex-block {
3443
display: flex;
3544
flex-wrap: wrap;

0 commit comments

Comments
 (0)