NETOBSERV-2097 SDK + PF6 migration#1365
Open
jpinsonneau wants to merge 3 commits intonetobserv:mainfrom
Open
Conversation
|
Skipping CI for Draft Pull Request. |
jpinsonneau
force-pushed
the
4.22-migration
branch
2 times, most recently
from
0f4658e to
11b3cc6
Compare
jpinsonneau
requested review from
OlivierCazade,
jotak,
leandroberetta and
stleerh
jpinsonneau
force-pushed
the
4.22-migration
branch
2 times, most recently
from
5abca8c to
55214bb
Compare
jpinsonneau
force-pushed
the
4.22-migration
branch
from
49fd44e to
d7b103e
Compare
jpinsonneau
force-pushed
the
4.22-migration
branch
from
d7b103e to
62e5349
Compare
Member
Author
|
Rebased without changes |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR is a comprehensive upgrade of the web console from PatternFly v5 to v6, React 17 to React 18, and React Router v5-compat to v6. It updates all component selectors, CSS tokens, typography components, modal implementation, drag-drop library, testing infrastructure, and package dependencies to align with the new framework versions. Changes
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Possibly related PRs
✨ Finishing Touches🧪 Generate unit tests (beta)
|
Member
|
/ok-to-test |
openshift-ci
bot
added
the
ok-to-test
|
New image: quay.io/netobserv/network-observability-console-plugin:5ae2178
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=5ae2178 make set-plugin-image |
jpinsonneau
force-pushed
the
4.22-migration
branch
from
f937626 to
b5d7a94
Compare
Member
Author
|
Rebased without changes |
github-actions
bot
removed
the
ok-to-test
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/components/modals/overview-panels-modal.tsx (1)
280-280:⚠️ Potential issue | 🟡 MinorTooltip missing
trigger=""prop.In
columns-modal.tsx(line 256), the Tooltip usestrigger=""alongsideisVisible={isSaveDisabled()}to make it purely programmatic. Withouttrigger="", this Tooltip may also appear on hover, creating inconsistent UX.Add trigger prop for consistency
- <Tooltip content={t('At least one panel must be selected')} isVisible={isSaveDisabled()}> + <Tooltip content={t('At least one panel must be selected')} trigger="" isVisible={isSaveDisabled()}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/modals/overview-panels-modal.tsx` at line 280, The Tooltip in overview-panels-modal.tsx is missing the trigger prop so it can appear on hover; update the Tooltip component (the JSX element where Tooltip is used with isVisible={isSaveDisabled()}) to include trigger="" to make the tooltip purely programmatic, matching the pattern used in columns-modal.tsx and preventing hover-triggered display.
♻️ Duplicate comments (2)
web/src/components/drawer/element/element-panel.tsx (1)
178-178:⚠️ Potential issue | 🔴 Critical
alertis undefined — this will throw a ReferenceError.There's no
alertvariable in scope. Based on context (lines 179-181 referencedata.health), this should be:- key={`card-${alert.name}`} + key={`card-${data.health.name}`}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/drawer/element/element-panel.tsx` at line 178, The JSX key uses an undefined variable `alert` which will throw; replace it with the correct prop/variable (`data`) used in this component (e.g., change key={`card-${alert.name}`} to key={`card-${data.name}`}) and guard against missing names by using optional chaining or a fallback (e.g., `key={`card-${data?.name ?? idx}`}`) in the ElementPanel JSX where `key` is set.web/src/standalone/index.css (1)
100-100:⚠️ Potential issue | 🟡 MinorDeprecated
word-break: break-wordvalue.This was flagged in a previous review but remains unaddressed. Use
overflow-wrap: anywhereinstead.Fix
- word-break: break-word; + overflow-wrap: anywhere;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/standalone/index.css` at line 100, Replace the deprecated CSS declaration "word-break: break-word" in the stylesheet with the modern property "overflow-wrap: anywhere" (remove or replace the existing word-break: break-word line), ensuring any selector that relied on that rule—e.g., the rule block containing "word-break: break-word" in index.css—is updated to use "overflow-wrap: anywhere" so text wraps correctly across browsers.
🧹 Nitpick comments (1)
web/src/utils/url.ts (1)
28-33: Redundant if/else branches.Both branches execute
navigateRef.current(to). The type guard is unnecessary here since TypeScript already knowstoisstring | number, and the underlyingnavigatefunction accepts both.Simplify
return useCallback((to: string | number) => { - if (typeof to === 'number') { - navigateRef.current(to); - } else { - navigateRef.current(to); - } + navigateRef.current(to); }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/utils/url.ts` around lines 28 - 33, The if/else in the returned useCallback is redundant because both branches call navigateRef.current(to); remove the type guard and simplify the callback to a single call to navigateRef.current(to) inside the function returned by useCallback (the code around useCallback and navigateRef.current in web/src/utils/url.ts).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/components/modals/columns-modal.tsx`:
- Around line 177-182: Add a data-test attribute to the checkbox component so
E2E tests can target it: update the DataListCheck element (used with props
aria-labelledby={'table-column-management-item-' + i},
isChecked={column.isSelected}, id={column.id}, onChange={onCheck}) to include a
data-test value that uniquely identifies the row, e.g. derived from column.id or
the aria-labelledby string so each checkbox has
data-test={`table-column-checkbox-${column.id}`} (or similar) while leaving
existing props unchanged.
---
Outside diff comments:
In `@web/src/components/modals/overview-panels-modal.tsx`:
- Line 280: The Tooltip in overview-panels-modal.tsx is missing the trigger prop
so it can appear on hover; update the Tooltip component (the JSX element where
Tooltip is used with isVisible={isSaveDisabled()}) to include trigger="" to make
the tooltip purely programmatic, matching the pattern used in columns-modal.tsx
and preventing hover-triggered display.
---
Duplicate comments:
In `@web/src/components/drawer/element/element-panel.tsx`:
- Line 178: The JSX key uses an undefined variable `alert` which will throw;
replace it with the correct prop/variable (`data`) used in this component (e.g.,
change key={`card-${alert.name}`} to key={`card-${data.name}`}) and guard
against missing names by using optional chaining or a fallback (e.g.,
`key={`card-${data?.name ?? idx}`}`) in the ElementPanel JSX where `key` is set.
In `@web/src/standalone/index.css`:
- Line 100: Replace the deprecated CSS declaration "word-break: break-word" in
the stylesheet with the modern property "overflow-wrap: anywhere" (remove or
replace the existing word-break: break-word line), ensuring any selector that
relied on that rule—e.g., the rule block containing "word-break: break-word" in
index.css—is updated to use "overflow-wrap: anywhere" so text wraps correctly
across browsers.
---
Nitpick comments:
In `@web/src/utils/url.ts`:
- Around line 28-33: The if/else in the returned useCallback is redundant
because both branches call navigateRef.current(to); remove the type guard and
simplify the callback to a single call to navigateRef.current(to) inside the
function returned by useCallback (the code around useCallback and
navigateRef.current in web/src/utils/url.ts).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: da2f3ae6-66c4-4601-b74c-167f7af918a1
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json,!web/package-lock.json
📒 Files selected for processing (140)
.golangci.ymlweb/cypress/e2e/topology/topology.spec.tsweb/cypress/integration-tests/netflow_export.cy.tsweb/cypress/integration-tests/netflow_table.cy.tsweb/cypress/integration-tests/quickFilters.cy.tsweb/cypress/integration-tests/table_queryopts.cy.tsweb/cypress/integration-tests/topology_groups.cy.tsweb/cypress/integration-tests/topology_view.cy.tsweb/cypress/support/commands.tsweb/cypress/views/dashboards-page.tsweb/cypress/views/list-page.tsweb/cypress/views/netflow-page.tsweb/cypress/views/operator-hub-page.tsweb/cypress/views/yaml-editor.tsweb/locales/en/plugin__netobserv-plugin.jsonweb/package.jsonweb/setup-tests.tsxweb/src/components/alerts/banner.tsxweb/src/components/alerts/fetcher.tsxweb/src/components/drawer/element/element-field.tsxweb/src/components/drawer/element/element-fields.tsxweb/src/components/drawer/element/element-panel-content.tsxweb/src/components/drawer/element/element-panel-metrics.tsxweb/src/components/drawer/element/element-panel-stats.tsxweb/src/components/drawer/element/element-panel.cssweb/src/components/drawer/element/element-panel.tsxweb/src/components/drawer/record/record-field.cssweb/src/components/drawer/record/record-field.tsxweb/src/components/drawer/record/record-panel.cssweb/src/components/drawer/record/record-panel.tsxweb/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsxweb/src/components/dropdowns/overview-display-dropdown.cssweb/src/components/dropdowns/overview-display-dropdown.tsxweb/src/components/dropdowns/overview-display-options.tsxweb/src/components/dropdowns/query-options-dropdown.tsxweb/src/components/dropdowns/query-options-panel.tsxweb/src/components/dropdowns/table-display-dropdown.cssweb/src/components/dropdowns/table-display-dropdown.tsxweb/src/components/dropdowns/table-display-options.tsxweb/src/components/dropdowns/topology-display-dropdown.cssweb/src/components/dropdowns/topology-display-dropdown.tsxweb/src/components/dropdowns/topology-display-options.tsxweb/src/components/forms/consumption.tsxweb/src/components/forms/dynamic-form/dynamic-form.cssweb/src/components/forms/dynamic-form/error-boundary.tsxweb/src/components/forms/dynamic-form/fields.tsxweb/src/components/forms/dynamic-form/widgets.tsxweb/src/components/forms/editor-toggle.tsxweb/src/components/forms/flowCollector-status.tsxweb/src/components/forms/flowCollector-wizard.tsxweb/src/components/forms/flowMetric-wizard.tsxweb/src/components/forms/forms.cssweb/src/components/forms/resource-delete-modal.tsxweb/src/components/forms/resource-form.tsxweb/src/components/forms/resource-status.tsxweb/src/components/guided-tour/guided-tour.tsxweb/src/components/health/health-card.tsxweb/src/components/health/health-color-square.tsxweb/src/components/health/health-drawer-container.tsxweb/src/components/health/health-error.tsxweb/src/components/health/health-global.tsxweb/src/components/health/health-helper.tsweb/src/components/health/health-metric-card.tsxweb/src/components/health/health-scoring-drawer.tsxweb/src/components/health/health-summary.tsxweb/src/components/health/health.cssweb/src/components/health/network-health.tsxweb/src/components/health/rule-details.cssweb/src/components/health/rule-details.tsxweb/src/components/messages/empty.tsxweb/src/components/messages/error-suggestions.cssweb/src/components/messages/error-suggestions.tsxweb/src/components/messages/error.cssweb/src/components/messages/error.tsxweb/src/components/messages/panel-error-indicator.cssweb/src/components/messages/panel-error-indicator.tsxweb/src/components/messages/status-texts.tsxweb/src/components/metrics/chart-voronoi.tsxweb/src/components/metrics/histogram.tsxweb/src/components/metrics/metrics-content.cssweb/src/components/metrics/metrics-donut.tsxweb/src/components/metrics/metrics-graph-total.tsxweb/src/components/metrics/metrics-graph.tsxweb/src/components/modals/__tests__/columns-modal.spec.tsxweb/src/components/modals/__tests__/overview-panels-modal.spec.tsxweb/src/components/modals/__tests__/time-range-modal.spec.tsxweb/src/components/modals/columns-modal.cssweb/src/components/modals/columns-modal.tsxweb/src/components/modals/export-modal.tsxweb/src/components/modals/modal.cssweb/src/components/modals/modal.tsxweb/src/components/modals/overview-panels-modal.cssweb/src/components/modals/overview-panels-modal.tsxweb/src/components/modals/time-range-modal.tsxweb/src/components/netflow-traffic-dev-tab.tsxweb/src/components/netflow-traffic-parent.tsxweb/src/components/netflow-traffic-tab.tsxweb/src/components/netflow-traffic.cssweb/src/components/netflow-traffic.tsxweb/src/components/query-summary/flows-query-summary-content.tsxweb/src/components/query-summary/metrics-query-summary-content.tsxweb/src/components/query-summary/query-summary.cssweb/src/components/query-summary/stats-query-summary.tsxweb/src/components/query-summary/summary-panel-content.tsxweb/src/components/query-summary/summary-panel.cssweb/src/components/query-summary/summary-panel.tsxweb/src/components/tabs/netflow-overview/__tests__/netflow-overview-panel.spec.tsxweb/src/components/tabs/netflow-overview/netflow-overview-panel.tsxweb/src/components/tabs/netflow-overview/netflow-overview.cssweb/src/components/tabs/netflow-overview/panel-kebab.tsxweb/src/components/tabs/netflow-table/netflow-table-header.cssweb/src/components/tabs/netflow-table/netflow-table.cssweb/src/components/tabs/netflow-topology/2d/topology-content.cssweb/src/components/tabs/netflow-topology/__tests__/netflow-topology.spec.tsxweb/src/components/tabs/netflow-topology/netflow-topology.cssweb/src/components/tabs/netflow-topology/netflow-topology.tsxweb/src/components/tabs/netflow-topology/peer-resource-link.tsxweb/src/components/toolbar/filters-toolbar.cssweb/src/components/toolbar/filters/__tests__/filters-toolbar.spec.tsxweb/src/components/toolbar/filters/chips-popover.tsxweb/src/components/toolbar/filters/filter-hints.tsxweb/src/components/toolbar/filters/filters-chips.cssweb/src/components/toolbar/filters/filters-chips.tsxweb/src/components/toolbar/filters/summary-filter-button.cssweb/src/components/toolbar/view-options-toolbar.tsxweb/src/standalone/app.tsxweb/src/standalone/header.tsxweb/src/standalone/index.cssweb/src/standalone/index.tsxweb/src/utils/__tests__/fullscreen-hook.spec.tsweb/src/utils/__tests__/poll-hook.spec.tsweb/src/utils/__tests__/theme-hook.spec.tsweb/src/utils/dns.tsweb/src/utils/dscp.tsweb/src/utils/fullscreen-hook.tsweb/src/utils/icmp.tsweb/src/utils/outside-hook.tsweb/src/utils/pkt-drop.tsweb/src/utils/theme-hook.tsweb/src/utils/url.ts
💤 Files with no reviewable changes (3)
- web/cypress/views/dashboards-page.ts
- web/src/components/metrics/metrics-content.css
- web/src/components/modals/modal.css
✅ Files skipped from review due to trivial changes (82)
- web/src/components/dropdowns/table-display-dropdown.tsx
- web/cypress/integration-tests/topology_view.cy.ts
- web/src/components/query-summary/query-summary.css
- web/src/components/alerts/banner.tsx
- .golangci.yml
- web/src/components/toolbar/view-options-toolbar.tsx
- web/src/components/toolbar/filters/summary-filter-button.css
- web/src/components/dropdowns/query-options-dropdown.tsx
- web/src/components/dropdowns/overview-display-dropdown.css
- web/cypress/views/operator-hub-page.ts
- web/cypress/views/yaml-editor.ts
- web/src/utils/theme-hook.ts
- web/src/components/forms/editor-toggle.tsx
- web/src/utils/tests/poll-hook.spec.ts
- web/src/components/modals/tests/time-range-modal.spec.tsx
- web/src/components/tabs/netflow-topology/tests/netflow-topology.spec.tsx
- web/src/components/health/rule-details.css
- web/src/components/forms/resource-status.tsx
- web/src/components/netflow-traffic-parent.tsx
- web/src/components/dropdowns/table-display-dropdown.css
- web/src/components/netflow-traffic-dev-tab.tsx
- web/src/components/health/rule-details.tsx
- web/cypress/integration-tests/topology_groups.cy.ts
- web/src/components/drawer/element/element-fields.tsx
- web/cypress/integration-tests/netflow_export.cy.ts
- web/src/components/forms/flowCollector-wizard.tsx
- web/src/components/metrics/metrics-donut.tsx
- web/src/components/guided-tour/guided-tour.tsx
- web/src/components/forms/flowMetric-wizard.tsx
- web/src/components/tabs/netflow-overview/tests/netflow-overview-panel.spec.tsx
- web/src/components/forms/consumption.tsx
- web/src/components/dropdowns/tests/query-options-dropdown.spec.tsx
- web/src/components/health/health-summary.tsx
- web/src/components/toolbar/filters/filter-hints.tsx
- web/src/components/dropdowns/topology-display-dropdown.tsx
- web/src/components/metrics/metrics-graph.tsx
- web/src/components/drawer/element/element-panel.css
- web/src/components/dropdowns/overview-display-dropdown.tsx
- web/src/components/netflow-traffic.tsx
- web/src/utils/dns.ts
- web/src/components/messages/panel-error-indicator.css
- web/src/components/query-summary/summary-panel.css
- web/src/components/toolbar/filters/chips-popover.tsx
- web/src/components/drawer/element/element-panel-content.tsx
- web/src/components/toolbar/filters/filters-chips.css
- web/src/components/health/health-color-square.tsx
- web/src/components/tabs/netflow-overview/netflow-overview.css
- web/src/components/tabs/netflow-topology/netflow-topology.tsx
- web/src/components/modals/tests/overview-panels-modal.spec.tsx
- web/cypress/integration-tests/quickFilters.cy.ts
- web/cypress/e2e/topology/topology.spec.ts
- web/src/components/health/health-metric-card.tsx
- web/src/components/messages/error.css
- web/src/components/query-summary/summary-panel.tsx
- web/src/components/health/health-drawer-container.tsx
- web/src/components/query-summary/flows-query-summary-content.tsx
- web/src/components/dropdowns/table-display-options.tsx
- web/src/components/query-summary/stats-query-summary.tsx
- web/src/components/messages/panel-error-indicator.tsx
- web/src/utils/tests/fullscreen-hook.spec.ts
- web/src/components/dropdowns/overview-display-options.tsx
- web/src/components/forms/forms.css
- web/src/components/dropdowns/query-options-panel.tsx
- web/src/components/messages/error-suggestions.tsx
- web/src/components/drawer/record/record-field.css
- web/src/components/toolbar/filters/filters-chips.tsx
- web/src/components/messages/error-suggestions.css
- web/src/components/toolbar/filters-toolbar.css
- web/src/components/tabs/netflow-topology/netflow-topology.css
- web/src/components/drawer/element/element-panel-stats.tsx
- web/src/components/toolbar/filters/tests/filters-toolbar.spec.tsx
- web/src/utils/pkt-drop.ts
- web/src/components/forms/dynamic-form/widgets.tsx
- web/src/components/drawer/record/record-panel.tsx
- web/src/components/tabs/netflow-table/netflow-table-header.css
- web/src/components/tabs/netflow-topology/peer-resource-link.tsx
- web/src/components/modals/tests/columns-modal.spec.tsx
- web/src/utils/icmp.ts
- web/src/components/dropdowns/topology-display-options.tsx
- web/src/components/metrics/metrics-graph-total.tsx
- web/src/components/health/health-global.tsx
- web/src/components/health/health-scoring-drawer.tsx
🚧 Files skipped from review as they are similar to previous changes (42)
- web/setup-tests.tsx
- web/src/components/dropdowns/topology-display-dropdown.css
- web/src/components/drawer/element/element-panel-metrics.tsx
- web/src/utils/outside-hook.ts
- web/src/components/tabs/netflow-overview/panel-kebab.tsx
- web/src/components/alerts/fetcher.tsx
- web/cypress/integration-tests/table_queryopts.cy.ts
- web/src/components/forms/dynamic-form/error-boundary.tsx
- web/src/components/health/network-health.tsx
- web/src/components/tabs/netflow-table/netflow-table.css
- web/locales/en/plugin__netobserv-plugin.json
- web/src/components/modals/export-modal.tsx
- web/src/components/drawer/record/record-panel.css
- web/cypress/integration-tests/netflow_table.cy.ts
- web/src/components/health/health-error.tsx
- web/cypress/views/list-page.ts
- web/src/components/messages/empty.tsx
- web/src/components/metrics/histogram.tsx
- web/src/components/forms/dynamic-form/dynamic-form.css
- web/src/components/health/health-helper.ts
- web/src/components/modals/overview-panels-modal.css
- web/src/components/modals/time-range-modal.tsx
- web/src/components/metrics/chart-voronoi.tsx
- web/src/utils/fullscreen-hook.ts
- web/src/components/query-summary/summary-panel-content.tsx
- web/src/utils/dscp.ts
- web/src/components/drawer/record/record-field.tsx
- web/src/components/query-summary/metrics-query-summary-content.tsx
- web/src/components/netflow-traffic-tab.tsx
- web/src/components/forms/dynamic-form/fields.tsx
- web/src/components/tabs/netflow-overview/netflow-overview-panel.tsx
- web/cypress/support/commands.ts
- web/src/standalone/app.tsx
- web/src/components/modals/columns-modal.css
- web/src/components/netflow-traffic.css
- web/src/components/messages/error.tsx
- web/src/components/tabs/netflow-topology/2d/topology-content.css
- web/src/components/forms/flowCollector-status.tsx
- web/src/utils/tests/theme-hook.spec.ts
- web/src/standalone/header.tsx
- web/src/components/health/health-card.tsx
- web/cypress/views/netflow-page.ts
Comment on lines
+177
to
+182
| <DataListCheck | ||
| aria-labelledby={'table-column-management-item-' + i} | ||
| isChecked={column.isSelected} | ||
| id={column.id} | ||
| onChange={onCheck} | ||
| /> |
Contributor
There was a problem hiding this comment.
Missing data-test attribute on checkbox.
Per coding guidelines, clickable inputs need data-test for E2E testing.
Add data-test
<DataListCheck
aria-labelledby={'table-column-management-item-' + i}
isChecked={column.isSelected}
id={column.id}
+ data-test={`column-checkbox-${column.id}`}
onChange={onCheck}
/>As per coding guidelines: "Ensure clickable elements (buttons, links, inputs) have data-test attributes for E2E testing."
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <DataListCheck | |
| aria-labelledby={'table-column-management-item-' + i} | |
| isChecked={column.isSelected} | |
| id={column.id} | |
| onChange={onCheck} | |
| /> | |
| <DataListCheck | |
| aria-labelledby={'table-column-management-item-' + i} | |
| isChecked={column.isSelected} | |
| id={column.id} | |
| data-test={`column-checkbox-${column.id}`} | |
| onChange={onCheck} | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/components/modals/columns-modal.tsx` around lines 177 - 182, Add a
data-test attribute to the checkbox component so E2E tests can target it: update
the DataListCheck element (used with props
aria-labelledby={'table-column-management-item-' + i},
isChecked={column.isSelected}, id={column.id}, onChange={onCheck}) to include a
data-test value that uniquely identifies the row, e.g. derived from column.id or
the aria-labelledby string so each checkbox has
data-test={`table-column-checkbox-${column.id}`} (or similar) while leaving
existing props unchanged.
Member
|
/ok-to-test |
openshift-ci
bot
added
the
ok-to-test
|
New image: quay.io/netobserv/network-observability-console-plugin:8cab0c9
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=8cab0c9 make set-plugin-image |
Member
|
/label qe-approved |
github-actions
bot
removed
the
ok-to-test
Member
|
/ok-to-test |
openshift-ci
bot
added
the
ok-to-test
Amoghrd
added
ok-to-test
|
New image: quay.io/netobserv/network-observability-console-plugin:2a198f7
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=2a198f7 make set-plugin-image |
1 similar comment
|
New image: quay.io/netobserv/network-observability-console-plugin:2a198f7
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=2a198f7 make set-plugin-image |
github-actions
bot
removed
the
ok-to-test
Amoghrd
added
the
ok-to-test
|
New image: quay.io/netobserv/network-observability-console-plugin:e8d3cd5
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=e8d3cd5 make set-plugin-image |
jpinsonneau
force-pushed
the
4.22-migration
branch
from
b9c1ec0 to
505fdb4
Compare
Member
Author
|
Rebased without changes Created branch main-pf5 to unlock this PR: https://github.com/netobserv/netobserv-web-console/tree/main-pf5 |
github-actions
bot
removed
the
ok-to-test
|
New image: quay.io/netobserv/network-observability-console-plugin:efd7955
It will expire in two weeks. To deploy this build, run from the operator repo, assuming the operator is running: USER=netobserv VERSION=efd7955 make set-plugin-image |
|
@jpinsonneau: The following tests failed, say
Full PR test history. Your PR dashboard. DetailsInstructions 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
PatternFly 6, React 18, React Router 7, and OpenShift Console SDK 4.22 migration. This branch is rebased on
4.22-refactoring.Slack thread with more details: https://redhat-internal.slack.com/archives/C02939DP5L5/p1773758235406749
Dependencies: #1398 #1417
Cypress followup: #1426
Assisted-by:
claude-4.6-opus-highDependency Updates
OpenShift Console SDK
PatternFly 6
@patternfly/patternfly^5.4.0^6.4.0@patternfly/react-charts^7.4.0^8.0.0@patternfly/react-code-editor^5.4.0^6.0.0@patternfly/react-core^5.4.0^6.4.0@patternfly/react-icons^5.4.0^6.4.0@patternfly/react-styles^5.4.0^6.4.0@patternfly/react-table^5.4.0^6.4.0@patternfly/react-tokens^5.4.0^6.4.0@patternfly/react-topology^5.4.0^6.0.0Added:
@patternfly/react-drag-drop^6.4.0React 18
react^17.0.2^18.3.0react-dom^17.0.2^18.3.0@types/react^17.0.1^18.3.0@types/react-dom^17.0.1^18.3.0createRoot(React 18) instead ofReactDOM.renderchildren?: React.ReactNodeto component interfaces (no longer implicit inReact.FC)React Router 7
react-router5.3.x~7.13.1Removed:
react-router-dom5.3.xreact-router-dom-v5-compat6.11.2@types/react-router5.1.20@types/react-router-dom^5.3.3All imports updated from
react-router-dom-v5-compat→react-router.i18next
i18next^21.8.14~25.6.2react-i18next^11.8.11~16.5.8Testing
@testing-library/react^12.1.5^16.3.2Added:
@testing-library/dom^10.4.1Removed:
@testing-library/react-hooks(included in RTL 16)Webpack & Build
5.75.0^5.100.0webpack-cli5.1.4^5.1.4webpack-dev-server5.2.2^5.2.2Added:
ajv^8.17.0(direct devDep to resolveajv-keywordsv5 peer dep conflict with SDK's nestedajvv6)Other
victory^37.0.0(required for PF6 charts)react-modal(replaced with PF6 native Modal)@openshift-console/plugin-shared(now included in SDK)Automated Codemods Applied
Text/TextContent/TextList/TextListItem→ContentAccordionToggle: movedisExpandedprop toAccordionItemAccordionContent: removedisHiddenpropEmptyStatecomponent refactoring/victorypathpf-v5-*topf-v6-*--pf-t--temp--dev--tbd)TypeScript Error Resolution (All 125 errors fixed)
@rjsf/utils, fixedTFunctionimports, addedchildren?: React.ReactNodeto component interfaces, fixed ForwardRef patterns@rjsf/utilsv5.24.13 with@rjsf/corev5.24.12, fixed template/widget typingplaceholderfrom Select, fixed Label colors (cyan→teal,gold→yellow), replaced Text with Contentpatternfly-charts-theme-dark.cssandpatternfly-theme-dark.cssimports (dark theme now built-in to PF6)react-modalwrapper to native PF6Modal/ModalHeader/ModalBody/ModalFooterCSS / Theme Migration
Dark Mode
dark/lightclass toggles in table CSS; PF6 uses.pf-v6-theme-darkon<html>light-stripped/dark-strippedinto singlestrippedclass usingvar(--pf-t--global--background--color--secondary--default)light-bottom-shadow/dark-bottom-shadowintobottom-shadowusingvar(--pf-t--global--border--color--default)light-bottom-border/dark-bottom-borderintobottom-borderusingvar(--pf-t--global--border--color--default)pf-v5-theme-dark→pf-v6-theme-darkCSS Variable Migration (PF5 → PF6 tokens)
--pf-v5-global--BackgroundColor--100--pf-t--global--background--color--primary--default--pf-v5-global--BackgroundColor--200--pf-t--global--background--color--secondary--default--pf-v5-global--Color--100--pf-t--global--text--color--regular--pf-v5-global--Color--200--pf-t--global--text--color--subtle--pf-v5-global--FontSize--sm--pf-t--global--font--size--sm--pf-v5-global--BorderColor--*--pf-t--global--border--color--default--pf-v5-global--BorderRadius--sm--pf-t--global--border--radius--small--pf-v5-global--primary-color--100--pf-t--global--color--brand--default--pf-v5-global--success-color--100--pf-t--global--color--status--success--default--pf-v5-global--danger-color--100--pf-t--global--color--status--danger--default--pf-v5-global--warning-color--100--pf-t--global--color--status--warning--default--pf-v5-c-*--pf-v6-c-*pf-v5-m-*modifierspf-m-*(no version prefix in PF6)isDarkprop cleanupisDarkprop from:MetricsDonut,MetricsGraph,MetricsGraphWithTotal,ElementPanelMetrics,NetflowTableHeader,NetflowTableisDarkonly inhistogram.tsx(needed forBrushHandleComponentSVG colors andexportToPngbackground)PF6 Component Workarounds
DragDropSort portal target (
modal.tsx)DragDropContainerhardcodesdocument.getElementById('root'), but Console usesid="app"ensureRootElement()that creates a<div id="root">fallbackappendToprop toDragDropContainerNested Accordion expand/collapse (
fields.tsx,dynamic-form.css)<label htmlFor="...">insideAccordionTogglecaused double-click<label>with<span>in the toggle.co-dynamic-form__accordion .pf-v6-c-accordion__item:not(.pf-m-expanded) > .pf-v6-c-accordion__expandable-content { display: none; }Build Tooling
.golangci.ymlfor golangci-lint v2 (node_modules exclusion forflattedGo files)react-routerinstead ofreact-router-dom/react-router-dom-v5-compatChecklist
Tested on OCP 4.22.0-0-2026-04-02-114050-test-ci-ln-vi34h7b-latest
Summary by CodeRabbit
New Features/Enhancements
Bug Fixes
Updates