Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NETOBSERV-1924 pf5 migration #658

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

jpinsonneau
Copy link
Contributor

@jpinsonneau jpinsonneau commented Nov 27, 2024

Description

Update to PF5 using dynamic sdk 1.0.0 and PF 5.4.0:

  • all dropdowns are not managing their states on their own
    • menu are managed using popper wich generate a delay impacting tests
  • had to refactore scope slider entirely using a progress stepper
  • also took the opportunity to place scope slider in overview page
  • onChange arguments been inverted 🙃
    • need to ensure we are not missing some events since tests are not covering all cases
  • updated topology components to align with the update
  • had to downgrade to react-router as the dynamic-plugin-sdk-webpack is now checking this
    • the only impact for us was on the standalone page that has been refactored accordingly
  • CSS fixes
    • most of the classes now start with pf-v5 (be carefull not every)
    • some components changed padding / margin and display
  • jest fixes
    • mostly failing due to popper issue
  • cypress fixes
    • mostly based on class name changes

We will probably have to maintain 2 plugins versions to support OCP 4.15+ and 4.12 -> 4.14.

OCP Version SDK Package Last Package Version PatternFly Versions
4.17.x @openshift-console/dynamic-plugin-sdk Latest ???
@openshift-console/dynamic-plugin-sdk-webpack Latest
4.16.x @openshift-console/dynamic-plugin-sdk 1.4.0 5.x + 4.x
@openshift-console/dynamic-plugin-sdk-webpack 1.1.1
4.15.x @openshift-console/dynamic-plugin-sdk 1.0.0 -> We are here 5.x + 4.x
@openshift-console/dynamic-plugin-sdk-webpack 1.0.2
4.14.x @openshift-console/dynamic-plugin-sdk 0.0.21 4.x
@openshift-console/dynamic-plugin-sdk-webpack 0.0.11
4.13.x @openshift-console/dynamic-plugin-sdk 0.0.19 4.x
@openshift-console/dynamic-plugin-sdk-webpack 0.0.9
4.12.x @openshift-console/dynamic-plugin-sdk 0.0.18 4.x
@openshift-console/dynamic-plugin-sdk-webpack 0.0.9

https://github.com/openshift/console/tree/master/frontend/packages/console-dynamic-plugin-sdk#openshift-console-versions-vs-sdk-versions

Previous attempt: #453

Dependencies

n/a

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

Copy link

openshift-ci bot commented Nov 27, 2024

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

Copy link

codecov bot commented Nov 27, 2024

Codecov Report

Attention: Patch coverage is 23.15202% with 551 lines in your changes missing coverage. Please review.

Project coverage is 55.71%. Comparing base (765ca7c) to head (050883a).
Report is 4 commits behind head on main.

Files with missing lines Patch % Lines
...nts/tabs/netflow-topology/2d/layouts/baseLayout.ts 2.03% 241 Missing ⚠️
...nts/tabs/netflow-topology/2d/layouts/colaLayout.ts 7.69% 96 Missing ⚠️
...nents/tabs/netflow-topology/2d/components/node.tsx 5.05% 94 Missing ⚠️
...nents/tabs/netflow-topology/2d/components/edge.tsx 9.09% 30 Missing ⚠️
web/src/utils/metrics-helper.ts 20.00% 12 Missing ⚠️
...c/components/tabs/netflow-overview/panel-kebab.tsx 31.25% 11 Missing ⚠️
web/src/components/dropdowns/scope-dropdown.tsx 12.50% 7 Missing ⚠️
.../components/dropdowns/topology-display-options.tsx 0.00% 6 Missing ⚠️
...b/src/components/toolbar/filters/quick-filters.tsx 25.00% 6 Missing ⚠️
...abs/netflow-topology/2d/styles/styleDecorators.tsx 0.00% 5 Missing ⚠️
... and 26 more
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #658      +/-   ##
==========================================
- Coverage   56.54%   55.71%   -0.84%     
==========================================
  Files         196      198       +2     
  Lines       10064    10467     +403     
  Branches     1195     1231      +36     
==========================================
+ Hits         5691     5832     +141     
- Misses       4008     4266     +258     
- Partials      365      369       +4     
Flag Coverage Δ
uitests 57.50% <23.15%> (-1.77%) ⬇️
unittests 51.73% <ø> (+1.14%) ⬆️

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

Files with missing lines Coverage Δ
pkg/config/config.go 43.79% <ø> (ø)
web/src/components/__tests-data__/scopes.ts 100.00% <ø> (ø)
...b/src/components/drawer/netflow-traffic-drawer.tsx 46.07% <100.00%> (+0.53%) ⬆️
web/src/components/drawer/record/record-field.tsx 52.04% <ø> (ø)
web/src/components/drawer/record/record-panel.tsx 52.23% <ø> (ø)
.../components/dropdowns/metric-function-dropdown.tsx 83.33% <100.00%> (+2.08%) ⬆️
...rc/components/dropdowns/query-options-dropdown.tsx 100.00% <100.00%> (+10.00%) ⬆️
...b/src/components/dropdowns/query-options-panel.tsx 79.41% <ø> (ø)
...src/components/dropdowns/table-display-options.tsx 100.00% <ø> (ø)
web/src/components/guided-tour/guided-tour.tsx 57.37% <ø> (ø)
... and 57 more

... and 7 files with indirect coverage changes

@jpinsonneau jpinsonneau force-pushed the pf5-update branch 6 times, most recently from 233f64e to efbdbf2 Compare December 4, 2024 10:38
@jpinsonneau jpinsonneau marked this pull request as ready for review December 4, 2024 10:48
@jpinsonneau jpinsonneau added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Dec 4, 2024
Copy link

github-actions bot commented Dec 4, 2024

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

It will expire after two weeks.

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

USER=netobserv VERSION=7601fa5 make set-plugin-image

"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.6.0",
"webpack-node-externals": "^3.0.0"
"webpack": "5.75.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's a downgrade, is it necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can double check on that one but it aligns with OCP console version + sdk one

Comment on lines +127 to +128
"react-router": "^5.3.0",
"react-router-dom": "^5.3.0"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here also this is downgrades

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(we must make sure it won't introduce security regressions)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. As written in the description, dynamic-plugin-sdk-webpack is now doing checks on our dependencies and forces compatible versions with OCP Console ones.

web/src/app.tsx Outdated
<ToggleGroup>
<ToggleGroupItem
icon={
<svg className="pf-v5-svg" viewBox="0 0 512 512">
Copy link
Member

@jotak jotak Dec 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it netobserv icon? Where is it displayed, I don't see it anywhere
Or that's just for the standalone console

Copy link
Contributor Author

@jpinsonneau jpinsonneau Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No this is the Light / Dark theme switch. The icons are not available in PF Icons.

I can simply show text instead as:

          <ToggleGroup>
            <ToggleGroupItem
              text="Light"
              isSelected={!isDark}
              onClick={() => onThemeSelect(false)}
            />
            <ToggleGroupItem
              text="Dark"
              isSelected={isDark}
              onClick={() => onThemeSelect(true)}
            />
          </ToggleGroup>

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jotak
Copy link
Member

jotak commented Dec 6, 2024

I see there's no more little icons/decorators on graph nodes
image
was that removed from the PF topology ? On one hand I find it good for visibility - makes the graph less loaded - on the other hand we're loosing some good functionality/UX I think .. I especially likes the step into.
If this must be removed from the graph, maybe we could add some of those little actions in the side panel ?

/>
)}
>
{sizePx > 450 ? sd.name : sd.shortName}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this shortName is still needed ? Since it's now written horizontally

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, I can remove that part

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will be able to remove the shortname from the config on controller side too

@jotak
Copy link
Member

jotak commented Dec 6, 2024

Finished the review and only did a quick testing: overall lgtm but I'll do a couple more tests before validating.
I have the feeling that there's overall more padding here and there that makes it perhaps less good on small screens / laptops - but I'll compare side-by-side to make sure...

Anyway since it's a big PR we don't want to wait too much for it, so if there's some little things to polish we can do that in follow-ups.

BTW we also need to create a pf4 branch that won't receive this PR.

Thanks for this big upgrade @jpinsonneau !

@github-actions github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Dec 9, 2024
@jpinsonneau
Copy link
Contributor Author

I see there's no more little icons/decorators on graph nodes image was that removed from the PF topology ? On one hand I find it good for visibility - makes the graph less loaded - on the other hand we're loosing some good functionality/UX I think .. I especially likes the step into. If this must be removed from the graph, maybe we could add some of those little actions in the side panel ?

Good catch @jotak ! I missed that. The tooltips were messing up with the rendering so I separated these two using a ref.
050883a

I took the opportunity to only show the decorators when hovered or selected. It simplify a lot the view. Also fixed the CSS !

@jotak jotak added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Dec 9, 2024
Copy link

github-actions bot commented Dec 9, 2024

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

It will expire after two weeks.

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

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

@jotak
Copy link
Member

jotak commented Dec 9, 2024

Thanks @jpinsonneau
/lgtm

@openshift-ci openshift-ci bot added the lgtm label Dec 9, 2024
@openshift-ci openshift-ci bot removed the lgtm label Jan 6, 2025
Copy link

openshift-ci bot commented Jan 6, 2025

New changes are detected. LGTM label has been removed.

Copy link

openshift-ci bot commented Jan 6, 2025

[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 ask for approval from jotak. 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:

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

@github-actions github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 6, 2025
@jpinsonneau
Copy link
Contributor Author

Removed hardcoded styling import as it's supposed to be fixed in OCP 4.15.42
e83f298

@jpinsonneau jpinsonneau added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Jan 6, 2025
Copy link

github-actions bot commented Jan 6, 2025

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

It will expire after two weeks.

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

USER=netobserv VERSION=5c05e45 make set-plugin-image

@jpinsonneau
Copy link
Contributor Author

Removed hardcoded styling import as it's supposed to be fixed in OCP 4.15.42 e83f298

Well it's not !

image

We need to retry this on future releases...

Copy link

openshift-ci bot commented Jan 6, 2025

@jpinsonneau: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name Commit Details Required Rerun command
ci/prow/qe-e2e-console-tests e83f298 link false /test qe-e2e-console-tests
ci/prow/images e83f298 link true /test images

Full PR test history. Your PR dashboard.

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-sigs/prow repository. I understand the commands that are listed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ok-to-test To set manually when a PR is safe to test. Triggers image build on PR.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants