NETOBSERV-789 UI: Table Histogram shortcuts

[jpinsonneau]

This improves histogram user experience by adding buttons and keyboards shortcuts for the following actions:

• move range previous / next
  • binded to left and right arrow keys
• zoom / unzoom range
  • binded to minus and plus buttons
• move histogram selection previous / next
  • binded to page up and down

To let the user better understand what's happening, the custom time range label has been replaced by actual values.

Also I suggest to decrease default limit to 50 as queries will be faster and this new method allows a better navigation. The best option for me would be to replace the current selector by a number input in a followup

based on #271

[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

[jpinsonneau]

/hold for #271

[jpinsonneau]

/ok-to-test

[github-actions]

New image: ["quay.io/netobserv/network-observability-console-plugin:7b71b24"]. It will expire after two weeks.

[jpinsonneau]

/unhold

[jpinsonneau]

@jotak @OlivierCazade I have merged #271 and rebased this PR so you can review these extra changes when you have some time

@andrew-ronaldson feel free to give your feedback here or in a followup

Thank you !

[Amoghrd]

/ok-to-test

[Amoghrd]

/label ok-to-test

[Amoghrd]

/ok-to-test

[github-actions]

New image: ["quay.io/netobserv/network-observability-console-plugin:8e810b0"]. It will expire after two weeks.

[Amoghrd]

So @jpinsonneau The <> arrows moves the datapoints by 2 mins; <<>> arrows move the time range by 15 minutes and +- moves the time range by 30 minutes. thats the expected behavior right?
But one nit, the custom time range field can only take values which are given in the dropdown(which is every 30 mins), something like 14:22:23 cannot be one given as inputs.

[jpinsonneau]

So @jpinsonneau The <> arrows moves the datapoints by 2 mins; <<>> arrows move the time range by 15 minutes and +- moves the time range by 30 minutes. thats the expected behavior right?

Well these values are not fixed; it's context related:

• <> shift the selection inside the histogram and try to avoid limit reached by adapting the new width. If it can't, it will keep the previous selection width.
• <<>> move the time range by currently selected range on top right corner time range dropdown (Last 15 minutes in your example)
• +- select previous / next item in the list of the top right corner time range dropdown

But one nit, the custom time range field can only take values which are given in the dropdown(which is every 30 mins), something like 14:22:23 cannot be one given as inputs.

I'm not sure to get that point. Custom time range is fully free. You can pick any value there and the histogram shortcuts will do so.

[Amoghrd]

/label qe-approved

[OlivierCazade]

LGTM, my comment was more a general comment

[OlivierCazade]

More a general comment here.
In my opinion, NetflowTraffic has become too big and we should split it for maintainability.

[jpinsonneau]

Fully aligned with that. I'm planning to move the drawer away as I did in my PoC on connection tracking.

We can also move the modals away from that file creating a dedicated component.

I'm adding a note in https://issues.redhat.com/browse/NETOBSERV-268 to keep track.

[jpinsonneau]

/approve

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jpinsonneau

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 [jpinsonneau]

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