NETOBSERV-2182 & NETOBSERV-2183 PoC : Filters refactoring by jpinsonneau · Pull Request #877 · netobserv/netobserv-web-console

jpinsonneau · 2025-06-03T14:37:14Z

Description

Merge Match option and Back and forth ones into a single new dropdown appearing next to filters values as:

any => match at least one filter; source or destination is not mandatory in that case so you can simply specify a namespace / name for example
one way => strictly match filters mentioned, also allow specifying a filter without it's direction which will result in two queries (one for source, one for destination)
peers => specify up to two peers (behind the scene, Source and Destination) and run the opposite query to get return traffic

Add dropdowns under filters values allowing:

enable / disable
remove a src / dst if set
swap
remove

Removed the Source and Destination accordion from the filters selection. The source is forced only when using one way or peers, else it's both by default.

Added contains vs equals comparator. Contains is the exact same behavior of previous implementation and equals works as same as when using quotes.

Dependencies

Requires netobserv/netobserv-operator#1632 to get updated filters config

Checklist

If you are not familiar with our processes or don't know what to answer in the list below, let us know in a comment: the maintainers will take care of that.

openshift-ci · 2025-06-03T14:37:19Z

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

codecov · 2025-06-03T14:39:53Z

Codecov Report

❌ Patch coverage is 50.58997% with 335 lines in your changes missing coverage. Please review.
✅ Project coverage is 52.94%. Comparing base (c1d37b7) to head (888ce86).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
...components/toolbar/filters/filter-search-input.tsx	41.79%	98 Missing and 19 partials ⚠️
...b/src/components/toolbar/filters/filters-chips.tsx	48.00%	48 Missing and 4 partials ⚠️
web/src/utils/filters-helper.ts	33.89%	36 Missing and 3 partials ⚠️
...ents/toolbar/filters/filter-search-suggestions.tsx	14.81%	23 Missing ⚠️
web/src/components/dropdowns/match-dropdown.tsx	24.13%	22 Missing ⚠️
...rc/components/toolbar/filters/filters-dropdown.tsx	64.70%	9 Missing and 3 partials ⚠️
web/src/components/toolbar/filters-toolbar.tsx	55.55%	7 Missing and 1 partial ⚠️
...components/toolbar/filters/autocomplete-filter.tsx	42.85%	7 Missing and 1 partial ⚠️
...components/toolbar/filters/filter-search-panel.tsx	69.56%	6 Missing and 1 partial ⚠️
web/src/utils/back-and-forth.ts	50.00%	7 Missing ⚠️
... and 15 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #877      +/-   ##
==========================================
- Coverage   53.64%   52.94%   -0.70%     
==========================================
  Files         205      209       +4     
  Lines       10545    10943     +398     
  Branches     1309     1389      +80     
==========================================
+ Hits         5657     5794     +137     
- Misses       4371     4600     +229     
- Partials      517      549      +32

Flag	Coverage Δ
uitests	`54.93% <48.30%> (-1.01%)`	⬇️
unittests	`47.27% <75.43%> (-0.09%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
pkg/handler/resources.go	`13.63% <100.00%> (ø)`
pkg/handler/topology.go	`54.41% <100.00%> (ø)`
pkg/prometheus/query.go	`83.87% <100.00%> (ø)`
web/src/components/__tests-data__/filters.ts	`100.00% <100.00%> (ø)`
...eb/src/components/drawer/element/element-field.tsx	`100.00% <ø> (ø)`
...b/src/components/drawer/element/element-fields.tsx	`59.25% <ø> (ø)`
...eb/src/components/drawer/element/element-panel.tsx	`69.69% <ø> (ø)`
...rc/components/dropdowns/query-options-dropdown.tsx	`100.00% <ø> (ø)`
...b/src/components/dropdowns/query-options-panel.tsx	`75.86% <ø> (-2.93%)`	⬇️
web/src/components/netflow-traffic-tab.tsx	`55.55% <100.00%> (+0.62%)`	⬆️
... and 34 more

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

stleerh · 2025-06-13T19:33:35Z

It seems hard to understand because of all the different states.

a) What does it mean to have:

                Source                           Destination
Any:   From Namespace: "netobserv"   To Namespace: openshift-console

compared to:

                Peer A                           Peer B
Peers:    Namespace: "netobserv"   Namespace: openshift-console

b) The dropdown is used to combine/separate peers. This is not intuitive.

I add a Namespace "netobserv" as a filter. It is "One way". It appears as the Source Namespace.

a) How do I add Destination Namespace?

b) If I click "Swap", it changes to:

          Destination
To Namespace: "netobserv"

If I click "Swap" again, it changes to:

From Namespace: "netobserv"

Previously, there was no "From". It was just:

Namespace: "netobserv"

There's a lot of space wasted by having a label (e.g. "Source" or "Peer A") above the filter selection
The topology should not overlap the scope selection (e.g. Node).
When I click "Swap", the zoom level in topology resets.
In the filter field dropdown, since the list is quite long, I suggest to alphabetize it even though "Namespace" might be the most popular selection.
In the filter field dropdown, it doesn't have a scrollbar. The dropdown field scrolls with the window scrollbar which is kind of odd, and this only works with the scroller on my mouse. If I click the scrollbar, the dropdown disappears.

Thoughts:
I would still go back to "Source Namespace" and "Destination Namespace" fields. Then "Namespace" or explicitly "Source/Dest Namespace" means source or destination.

The "Swap" button would change the "Source" fields to "Destination" and vice versa.

jpinsonneau · 2025-06-16T08:35:23Z

Thanks for your feedback @stleerh. Let me try to adress all of these:

It seems hard to understand because of all the different states.

a) What does it mean to have:

                Source                           Destination
Any:   From Namespace: "netobserv"   To Namespace: openshift-console

compared to:

                Peer A                           Peer B
Peers:    Namespace: "netobserv"   Namespace: openshift-console

Any means you can have either source namespace = netobserv or destination namespace = openshift-console or both matching. I realise the From / To mentions should not appear in that case btw.

Peers means you will only get flows matching (source namespace = netobserv and destination namespace = openshift-console) OR (destination namespace = netobserv and source namespace = openshift-console)

If you feel it's not clear enough I can try to improve the display here but showing the full query will definitly take too much space in the screen.

b) The dropdown is used to combine/separate peers. This is not intuitive.

Do you have a better way to do so ? I tried to reduce the number of filters in the selection by separating Source / Destination from the dropdown.

I add a Namespace "netobserv" as a filter. It is "One way". It appears as the Source Namespace.

a) How do I add Destination Namespace?

For now, you need to click on the arrow next to your value and then click "as destination"

It's an extra step but I didn't found a better way yet. We may find a way to select Source / Destination before validating the filter but I don't want to keep the accordion in the filter selection.

b) If I click "Swap", it changes to:
          Destination
To Namespace: "netobserv"
If I click "Swap" again, it changes to:
From Namespace: "netobserv"
Previously, there was no "From". It was just:
Namespace: "netobserv"

The from / to should never appear. Let me fix that.

There's a lot of space wasted by having a label (e.g. "Source" or "Peer A") above the filter selection

That's not something we can easilly change here. I don't want to have Peer A: Namespace: netobserv in a row. Maybe I should move the tips away ?

These could become a tooltip / popover.

The topology should not overlap the scope selection (e.g. Node).

I'm not sure to get what you mean here. Could you please give an example ?

When I click "Swap", the zoom level in topology resets.

Yes, any filter change re-run a query and redraw the topology as usual. We can improve that in a followup but let's focus on the filtering engine first.

In the filter field dropdown, since the list is quite long, I suggest to alphabetize it even though "Namespace" might be the most popular selection.

Yes, since we don't have the accordion anymore it makes sense. I can even put an autocomplete here if you feel it will help.

In the filter field dropdown, it doesn't have a scrollbar. The dropdown field scrolls with the window scrollbar which is kind of odd, and this only works with the scroller on my mouse. If I click the scrollbar, the dropdown disappears.

Let me check what I can do there 👍

Thoughts: I would still go back to "Source Namespace" and "Destination Namespace" fields. Then "Namespace" or explicitly "Source/Dest Namespace" means source or destination.

The "Swap" button would change the "Source" fields to "Destination" and vice versa.

How do you want to keep these without having a huge list and removing the accordion ?

github-actions · 2025-07-15T08:15:51Z

New image:
quay.io/netobserv/network-observability-console-plugin:98ac525

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=98ac525 make set-plugin-image

jotak

Reviewed the go code first, will do the frontend later

jotak · 2025-07-15T08:21:43Z

 }

-func (q *FlowQueryBuilder) addLineFilters(key string, values []string, not bool, moreThan bool) {
+func (q *FlowQueryBuilder) addLineFilters(key string, values []string, not, equal, moreThan bool) {


nit: I guess having addLineFilters(filter Match, values []string) starts to make more sense now?

jotak · 2025-07-15T08:23:27Z

+		} else if equal {
+			lf, hasEmptyMatch = filters.StringLineFilter(key, values, not)
 		} else {
 			lf, hasEmptyMatch = filters.StringLineFilterCheckExact(key, values, not)


Now that "exact" doesn't rely anymore on the double-quotes, can we remove the old logic in StringLineFilterCheckExact ? Or is it still needed?

I wanted to keep it in case you explicitly put quotes. I guess that could be useful if the user is not typing the entire query and didn't notices he is in "contains" mode.

Also, that will cover all cases for quickfilters:
https://github.com/netobserv/network-observability-console-plugin/pull/877/files#diff-f541e57c7f8271ea4db204c1d4b20b8d9d4592947242d2b33924f6f87df071f6R29-R30

quickfilters can also be migrated to the new format (we could even implement an automatic migration in the operator, so that it's fully transparent to the user). It's just to avoid having 2 different ways to do the same thing
(but that could be done in a follow-up as well)

jotak · 2025-07-15T08:30:15Z

+func NewMatch(key, values string) Match {
+	return Match{Key: key, Values: values}
+}
+func NewEqual(key, values string) Match {
+	return Match{Key: key, Values: values, Equal: true}
+}


I think it would be more clear to have NewEqualMatch and NewRegexMatch, and also perhaps having a Regex bool instead of an Equal bool (reversing the logic), as the equal match is the most natural; I'm nitpicking a bit I know, just trying to make it as easy to understand as possible.

jotak · 2025-07-15T08:38:51Z

+		if !equal {
+			// match the begining of string if quoted without a star
+			// and case insensitive if no quotes
+			if !strings.HasPrefix(value, `"`) {


here also, shouldn't we get rid of the "foo" syntax recognition?

See #877 (comment)

jotak · 2025-07-15T08:55:31Z

When I tried to open the filters dropdown, it disappeared! (firefox here, if that matters; and ocp 4.19)

Kooha-2025-07-15-10-52-52.webm

jpinsonneau · 2025-07-15T09:00:43Z

When I tried to open the filters dropdown, it disappeared! (firefox here, if that matters; and ocp 4.19)

Kooha-2025-07-15-10-52-52.webm

did you deployed netobserv/netobserv-operator#1632 ?

jotak · 2025-07-15T09:05:37Z

Any means you can have either source namespace = netobserv or destination namespace = openshift-console or both matching. I realise the From / To mentions should not appear in that case btw.

Peers means you will only get flows matching (source namespace = netobserv and destination namespace = openshift-console) OR (destination namespace = netobserv and source namespace = openshift-console)

If you feel it's not clear enough I can try to improve the display here but showing the full query will definitly take too much space in the screen.

I think I'm not convinced with "peer" name, because that's not necessarily between 2 peers, it can be just from and to a namespace for instance ; in that case, "peer" doesn't make so much sense. I know @stleerh mentioned previously he found the "back and forth" naming confusing, but IMO it's still more accurate. What could we use, else? "With return traffic" ?

Also, on not showing the full query because it takes too much space: how about having the full query displayed in a tooltip ?

jpinsonneau · 2025-07-15T09:13:06Z

Any means you can have either source namespace = netobserv or destination namespace = openshift-console or both matching. I realise the From / To mentions should not appear in that case btw.
Peers means you will only get flows matching (source namespace = netobserv and destination namespace = openshift-console) OR (destination namespace = netobserv and source namespace = openshift-console)
If you feel it's not clear enough I can try to improve the display here but showing the full query will definitly take too much space in the screen.

I think I'm not convinced with "peer" name, because that's not necessarily between 2 peers, it can be just from and to a namespace for instance ; in that case, "peer" doesn't make so much sense. I know @stleerh mentioned previously he found the "back and forth" naming confusing, but IMO it's still more accurate. What could we use, else? "With return traffic" ?

Asking AI about some keywords we could use here:

Bidirectionnal
Duplex traffic
Two-way communication
Endpoints (A & B) to replace Peers

Also, on not showing the full query because it takes too much space: how about having the full query displayed in a tooltip ?

My future goal is to bring a promQL input in the UI that will contains the current query when you switch from the guided view.

jotak · 2025-07-15T09:14:09Z

When I tried to open the filters dropdown, it disappeared! (firefox here, if that matters; and ocp 4.19)
Kooha-2025-07-15-10-52-52.webm

did you deployed netobserv/network-observability-operator#1632 ?

ah, no

jotak · 2025-07-15T09:16:08Z

There's a lot of space wasted by having a label (e.g. "Source" or "Peer A") above the filter selection

That's not something we can easilly change here. I don't want to have Peer A: Namespace: netobserv in a row. Maybe I should move the tips away ?

On that one, I think having 0-padding on pf-v5-c-menu-toggle (when it has a dropdown) helps a bit, although there's still the space taken by the upper label

jpinsonneau · 2025-07-15T09:38:01Z

Rebased without changes

Co-authored-by: Joel Takvorian <joel.takvorian@homeblocks.net>

jpinsonneau · 2025-12-16T11:37:24Z

Rebased and fixed gateway case in filters

jotak

nice work, LGTM
I think it's ok if we address some of the pending points currently under discussion in a follow-up

Amoghrd · 2025-12-17T18:23:56Z

/ok-to-test

github-actions · 2025-12-17T18:27:46Z

New image:
quay.io/netobserv/network-observability-console-plugin:c36b858

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=c36b858 make set-plugin-image

Amoghrd · 2025-12-17T18:46:08Z

@jpinsonneau We can go ahead and merge these PRs since its been sitting for a while.
I did find one issue where toggling between OR/AND button, causes filters to fall back to source. PTAL attached screen-recording

Screen.Recording.2025-12-17.at.1.40.06.PM.mov

I dont mind raising a bug for the same and tracking in that instead of holding these PRs

jpinsonneau · 2025-12-18T14:36:17Z

I dont mind raising a bug for the same and tracking in that instead of holding these PRs

Hey @Amoghrd, good catch. That sounds like a minor but we can adress later indeed.
Seems like the styling could be improved too. Let's merge this and open followups.

Thanks !

Amoghrd · 2025-12-18T14:37:18Z

/label qe-approved

openshift-ci Bot added the do-not-merge/work-in-progress label Jun 3, 2025

jpinsonneau requested a review from stleerh June 4, 2025 07:17

jpinsonneau added the needs-review Tells that the PR needs a review label Jun 4, 2025

jpinsonneau changed the title ~~PoC : Provide a way to change the filter field~~ NETOBSERV-2183 PoC : Provide a way to change the filter field Jun 4, 2025

jpinsonneau changed the title ~~NETOBSERV-2183 PoC : Provide a way to change the filter field~~ NETOBSERV-2182 & NETOBSERV-2183 PoC : Filters refactoring Jun 5, 2025

jpinsonneau force-pushed the 2183 branch from 1423a09 to ce2485d Compare June 5, 2025 13:04

jpinsonneau commented Jun 5, 2025

View reviewed changes

Comment thread web/src/utils/__tests__/back-and-forth.spec.ts

jpinsonneau mentioned this pull request Jun 12, 2025

NETOBSERV-2182 & NETOBSERV-2183 PoC : Filters refactoring netobserv/netobserv-operator#1632

Merged

10 tasks

jpinsonneau force-pushed the 2183 branch from ce2485d to ff787f5 Compare June 12, 2025 14:32

jpinsonneau force-pushed the 2183 branch from 9427285 to 49a0ed9 Compare July 2, 2025 10:36

jpinsonneau marked this pull request as ready for review July 2, 2025 10:38

openshift-ci Bot removed the do-not-merge/work-in-progress label Jul 2, 2025

jpinsonneau requested review from OlivierCazade and jotak July 3, 2025 13:07

jotak added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jul 15, 2025

jotak reviewed Jul 15, 2025

View reviewed changes

jpinsonneau force-pushed the 2183 branch from 650fdc3 to 7671e53 Compare July 15, 2025 09:37

github-actions Bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jul 15, 2025

jpinsonneau and others added 15 commits December 16, 2025 12:34

simplify addLineFilters args

be4ce0c

regex / equal match

a6f2a3e

remove padding on filters menu toggle

d12ff91

Update pkg/handler/flows.go

42c74d9

Co-authored-by: Joel Takvorian <joel.takvorian@homeblocks.net>

improve match dropdown

a635e32

move FilterCompare type to model

9dd995e

fix rebase

96e59d1

fix autocompletes empty values

b11c5a8

address feedback

b0e47d7

styling improvments

bade271

data-test

326336d

bugfixes

31f7879

type + endpoint

d41b42e

split panel / suggestions

e80154e

gateway case fix after rebase

310ac51

jpinsonneau force-pushed the 2183 branch from b8d640a to 310ac51 Compare December 16, 2025 11:36

fix cypress

888ce86

jpinsonneau requested a review from jotak December 16, 2025 16:23

jotak approved these changes Dec 17, 2025

View reviewed changes

openshift-ci Bot assigned jotak Dec 17, 2025

openshift-ci Bot added the lgtm label Dec 17, 2025

openshift-ci Bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Dec 17, 2025

jpinsonneau merged commit e6c08ce into netobserv:main Dec 18, 2025
13 of 14 checks passed

openshift-ci Bot added the qe-approved QE has approved this pull request label Dec 18, 2025

Conversation

jpinsonneau commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Dependencies

Checklist

Uh oh!

openshift-ci Bot commented Jun 3, 2025

Uh oh!

codecov Bot commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

stleerh commented Jun 13, 2025

Uh oh!

jpinsonneau commented Jun 16, 2025

Uh oh!

github-actions Bot commented Jul 15, 2025

Uh oh!

jotak left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jotak commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jpinsonneau commented Jul 15, 2025

Uh oh!

jotak commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jpinsonneau commented Jul 15, 2025

Uh oh!

jotak commented Jul 15, 2025

Uh oh!

jotak commented Jul 15, 2025

Uh oh!

jpinsonneau commented Jul 15, 2025

Uh oh!

jpinsonneau commented Dec 16, 2025

Uh oh!

jotak left a comment

Choose a reason for hiding this comment

Uh oh!

Amoghrd commented Dec 17, 2025

Uh oh!

github-actions Bot commented Dec 17, 2025

Uh oh!

Amoghrd commented Dec 17, 2025

Uh oh!

jpinsonneau commented Dec 18, 2025

Uh oh!

Uh oh!

Amoghrd commented Dec 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

jpinsonneau commented Jun 3, 2025 •

edited

Loading

codecov Bot commented Jun 3, 2025 •

edited

Loading

jotak commented Jul 15, 2025 •

edited

Loading

jotak commented Jul 15, 2025 •

edited

Loading