NETOBSERV-1764 frontend code styling followup

[jpinsonneau]

Description

Split netflow-traffic code that became too big for a single file

• netflow traffic model has been introduced to manage states
• drawer is now on its own separated component
• overview / table & topology are now under tabs folder with an additionnal tabs container component
• modals are centralized in modals component

Dependencies

#541

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

[codecov]

Codecov Report

Attention: Patch coverage is 57.24020% with 251 lines in your changes missing coverage. Please review.

Project coverage is 56.34%. Comparing base (3d6a89a) to head (3d1f578).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #551      +/-   ##
==========================================
+ Coverage   56.10%   56.34%   +0.24%     
==========================================
  Files         183      189       +6     
  Lines        9098     9155      +57     
  Branches     1185     1186       +1     
==========================================
+ Hits         5104     5158      +54     
- Misses       3623     3626       +3     
  Partials      371      371              

Flag	Coverage Δ
uitests	57.69% <57.24%> (+0.31%)	⬆️
unittests	52.54% <ø> (ø)

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

Files	Coverage Δ
...eb/src/components/drawer/element/element-field.tsx	100.00% <100.00%> (ø)
...b/src/components/drawer/element/element-fields.tsx	51.61% <100.00%> (ø)
...omponents/drawer/element/element-panel-content.tsx	68.57% <100.00%> (ø)
...omponents/drawer/element/element-panel-metrics.tsx	83.33% <100.00%> (ø)
.../components/drawer/element/element-panel-stats.tsx	86.36% <100.00%> (ø)
...eb/src/components/drawer/element/element-panel.tsx	72.41% <100.00%> (ø)
web/src/components/drawer/record/record-field.tsx	53.01% <100.00%> (ø)
web/src/components/drawer/record/record-panel.tsx	50.00% <100.00%> (ø)
web/src/components/modals/modals.tsx	100.00% <100.00%> (ø)
web/src/components/netflow-traffic-parent.tsx	50.00% <100.00%> (ø)
... and 42 more

[jpinsonneau]

@Amoghrd I rebased that PR and we should be good to go for a non regression testing 😸

I had to merge #541 since we had too many changes impacting the codebase. Let's validate this one properly ! Thanks

[Amoghrd]

/ok-to-test

[github-actions]

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

It will expire after two weeks.

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

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

[jpinsonneau]

Fixed column issue reported in jira in 7e3cc4d

[github-actions]

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

It will expire after two weeks.

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

USER=netobserv VERSION=092a2ad make set-plugin-image

[Amoghrd]

Reran the tests and all tests are now passing
/label qe-approved

[jpinsonneau]

Rebased without changes

@jotak I hope I didn't break your changes here 👼 If you can have a quick check I would appreciate

[github-actions]

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

It will expire after two weeks.

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

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

[jotak]

nit: can we name the file "netflow-traffic-drawer.tsx" so it matches the component name?

[jpinsonneau]

done in 7ecf824

[jotak]

Rebased without changes

@jotak I hope I didn't break your changes here 👼 If you can have a quick check I would appreciate

Tested and I didn't find any regression

[jotak]

Ideally, as part of this refactoring, it would be nice to move all the fetching functions in their respective sub-component (NetflowOverview, NetflowTable ...) ; so NetflowTraffic would only be responsible for doing the "switch(selectedView)", leaving the other components specialized in their domain, responsible both for fetching and displaying data. Currently, even with this refactoring, NetflowTraffic is still centralizing and dispatching everything, this is what I was hopeful we would be able to break

[jpinsonneau]

Ideally, as part of this refactoring, it would be nice to move all the fetching functions in their respective sub-component (NetflowOverview, NetflowTable ...) ; so NetflowTraffic would only be responsible for doing the "switch(selectedView)", leaving the other components specialized in their domain, responsible both for fetching and displaying data. Currently, even with this refactoring, NetflowTraffic is still centralizing and dispatching everything, this is what I was hopeful we would be able to break

Yes that's something we can do using the React.forwardRef as same as in the SearcComponent.
The child view ref will be propagated to the parent and callable. Let's merge this PR first and do this in a followup PR.

[jotak]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

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

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