NETOBSERV-2182 & NETOBSERV-2183 PoC : Filters refactoring

[jpinsonneau]

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.

Dependencies

Requires netobserv/network-observability-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.

• Is this PR backed with a JIRA ticket? If so, make sure it is written as a title prefix (in general, PRs affecting the NetObserv/Network Observability product should be backed with a JIRA ticket - especially if they bring user facing changes).
• Does this PR require product documentation?
  • If so, make sure the JIRA epic is labelled with "documentation" and provides a description relevant for doc writers, such as use cases or scenarios. Any required step to activate or configure the feature should be documented there, such as new CRD knobs.
• Does this PR require a product release notes entry?
  • If so, fill in "Release Note Text" in the JIRA.
• Is there anything else the QE team should know before testing? E.g: configuration changes, environment setup, etc.
  • If so, make sure it is described in the JIRA ticket.
• QE requirements (check 1 from the list):
  • Standard QE validation, with pre-merge tests unless stated otherwise.
  • Regression tests only (e.g. refactoring with no user-facing change).
  • No QE (e.g. trivial change with high reviewer's confidence, or per agreement with the QE team).

[openshift-ci]

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

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign kalmanmeth for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 49.24%. Comparing base (832cdf7) to head (b4fe4b7).
Report is 4 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (832cdf7) and HEAD (b4fe4b7). Click for more details.

HEAD has 3 uploads less than BASE

Flag	BASE (832cdf7)	HEAD (b4fe4b7)
unittests	2	1
uitests	2	0

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #877      +/-   ##
==========================================
- Coverage   55.19%   49.24%   -5.96%     
==========================================
  Files         199       39     -160     
  Lines       10620     3314    -7306     
  Branches     1231        0    -1231     
==========================================
- Hits         5862     1632    -4230     
+ Misses       4391     1516    -2875     
+ Partials      367      166     -201     

Flag	Coverage Δ
uitests	?
unittests	49.24% <ø> (ø)

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

see 160 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]

1. 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.

2. 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"

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

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

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

6. 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.

7. 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]

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

1. 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.

2. 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.

3. 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.

4. 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 ?

5. 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.

6. 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.

7. 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 ?