NETOBSERV-1098: Show scope as slider

[jotak]

Borrow slider from patternfly, and adapt for vertical display

[jotak]

Opening as draft for now - we may clean the Slider component more to keep only what we need

[codecov]

Codecov Report

Merging #344 (3c1526d) into main (b9287d0) will decrease coverage by 1.63%.
The diff coverage is 11.24%.

@@            Coverage Diff             @@
##             main     #344      +/-   ##
==========================================
- Coverage   58.51%   56.88%   -1.63%     
==========================================
  Files         158      162       +4     
  Lines        7097     7337     +240     
  Branches      868      902      +34     
==========================================
+ Hits         4153     4174      +21     
- Misses       2698     2917     +219     
  Partials      246      246              

Flag	Coverage Δ
uitests	58.30% <11.24%> (-1.46%)	⬇️
unittests	52.71% <ø> (-2.10%)	⬇️

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

Impacted Files	Coverage Δ
web/src/components/slider/Slider.tsx	5.33% <5.33%> (ø)
web/src/components/scope-slider/scope-slider.tsx	45.45% <45.45%> (ø)
web/src/components/slider/SliderStep.tsx	71.42% <71.42%> (ø)
...c/components/netflow-topology/netflow-topology.tsx	68.75% <100.00%> (+1.00%)	⬆️

... and 3 files with indirect coverage changes

[openshift-ci-robot]

@jotak: This pull request references NETOBSERV-1098 which is a valid jira issue.

In response to this:

Borrow slider from patternfly, and adapt for vertical display

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[openshift-ci-robot]

@jotak: This pull request references NETOBSERV-1098 which is a valid jira issue.

In response to this:

Borrow slider from patternfly, and adapt for vertical display

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[jotak]

@jpinsonneau @andrew-ronaldson @stleerh

This is ready for review.
I know the approach is not perfect, in several ways:

• slider relies on a hacky rotation: ideally, something clean should be implemented upstream in PF
• @stleerh gave some feedback that texts can be confusing / he had a suggestion to use images instead. Or maybe we could find icons.
• We could probably spend time discussing if there are better placements, if another component would better fit, etc.

But given how useful this is, tbh, if we don't find any blocking issue / regression, I'd be in favour of merging & iterating via a follow-up rather than holding for potentially a long time.

About the Slider component included in this PR, it's copied from PF and slightly amended, in 2 different commits so that we can retrieve the diff & rebase more easily from upstream when needed.
Another approach could be to change it more aggressively and remove everything we don't need - pro would be a simpler component, cons would be more diverging from upstream hence less easy to re-apply upstream patches if any.

[OlivierCazade]

LGTM

[jotak]

For information, I opened an enhancement request on patternfly for an upstream (and clean) vertical slider implementation: https://github.com/orgs/patternfly/discussions/5775

[memodi]

/ok-to-test

[memodi]

@jotak - image building is failing here with below error:

82.84 ./components/scope-slider/scope-slider.tsx 3:9-20
82.84 [tsl] ERROR in /opt/app-root/web/src/components/scope-slider/scope-slider.tsx(3,10)
82.84       TS2305: Module '"../../model/flow-query"' has no exported member 'MetricScope'.

[openshift-ci]

New changes are detected. LGTM label has been removed.

[jotak]

@memodi yes, I didn't see, post-rebase issues, they should be fixed

[github-actions]

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

It will expire after two weeks.

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

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

[memodi]

/label qe-approved
tested with the slider and with swap/bnf buttons. Also tested with existing advance options.

[jotak]

hey @jpinsonneau are you ok with this plan: merge this and track the patternfly ticket for an upstream implementation?

[jpinsonneau]

hey @jpinsonneau are you ok with this plan: merge this and track the patternfly ticket for an upstream implementation?

sure, as it's still possible to manage it in the advance options I don't think it's a blocker to merge as is 😉
Thanks @jotak

[jotak]

/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jotak

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

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [jotak]

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