NO-JIRA: update perses and fix vulnerable dependencies#900
NO-JIRA: update perses and fix vulnerable dependencies#900jgbernalp wants to merge 1 commit intoopenshift:mainfrom
Conversation
Signed-off-by: Gabriel Bernal <gbernal@redhat.com>
|
@jgbernalp: This pull request explicitly references no jira issue. DetailsIn response to this:
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 openshift-eng/jira-lifecycle-plugin repository. |
WalkthroughDependency versions for Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 12✅ Passed checks (12 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/src/components/dashboards/perses/ExternalPanelAddition.tsx (1)
24-24: Narrow theuseDashboardStoreselector to avoid re-rendering on every store mutation.
useDashboardStore((state) => state)returns a new reference for the whole store on every change, which will re-run this component (and theuseEffecton lines 54–72 that depends ondashboardStore.panelEditor/dashboardStore.panelGroupOrder) on any unrelated dashboard-state update. OnlypanelEditorandpanelGroupOrderare actually read here — selecting just those (with shallow equality if you need both in one call) avoids the extra work and preserves the original intent of the Zustand selector pattern.♻️ Proposed fix
- const dashboardStore = useDashboardStore((state) => state); + const panelEditor = useDashboardStore((state) => state.panelEditor); + const panelGroupOrder = useDashboardStore((state) => state.panelGroupOrder);Then update the consumer effect accordingly:
useEffect(() => { // Apply externally added panel if (queuedPanel) { try { - // Use the temporary panelEditor to add changes to the dashboard. - const panelEditor = dashboardStore.panelEditor; - const groupId = dashboardStore.panelGroupOrder[0]; + // Use the temporary panelEditor to add changes to the dashboard. + const groupId = panelGroupOrder[0]; panelEditor.applyChanges({ ...queuedPanel, groupId }); panelEditor.close(); } finally { ... } } - }, [dispatch, dashboardStore.panelGroupOrder, dashboardStore.panelEditor, queuedPanel]); + }, [dispatch, panelGroupOrder, panelEditor, queuedPanel]);If a single call is preferred, consider
useDashboardStore(useShallow((s) => ({ panelEditor: s.panelEditor, panelGroupOrder: s.panelGroupOrder }))).`@perses-dev/dashboards` useDashboardStore selector zustand v5 breaking change🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/dashboards/perses/ExternalPanelAddition.tsx` at line 24, The component currently subscribes to the entire store via useDashboardStore((state) => state), causing unnecessary re-renders; change the selector to only subscribe to the pieces used (panelEditor and panelGroupOrder) — e.g. call useDashboardStore(s => ({ panelEditor: s.panelEditor, panelGroupOrder: s.panelGroupOrder })) or two separate selectors useDashboardStore(s => s.panelEditor) and useDashboardStore(s => s.panelGroupOrder), and update the effect dependencies to reference the selected values (panelEditor and panelGroupOrder) instead of dashboardStore.*; if you prefer combined selection use shallow equality helper (useShallow) to avoid reference churn.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@web/src/components/dashboards/perses/ExternalPanelAddition.tsx`:
- Line 24: The component currently subscribes to the entire store via
useDashboardStore((state) => state), causing unnecessary re-renders; change the
selector to only subscribe to the pieces used (panelEditor and panelGroupOrder)
— e.g. call useDashboardStore(s => ({ panelEditor: s.panelEditor,
panelGroupOrder: s.panelGroupOrder })) or two separate selectors
useDashboardStore(s => s.panelEditor) and useDashboardStore(s =>
s.panelGroupOrder), and update the effect dependencies to reference the selected
values (panelEditor and panelGroupOrder) instead of dashboardStore.*; if you
prefer combined selection use shallow equality helper (useShallow) to avoid
reference churn.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Central YAML (inherited)
Review profile: CHILL
Plan: Enterprise
Run ID: 8d78288b-c654-4f69-8562-36a7cd13d20c
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
web/package.jsonweb/src/components/dashboards/perses/ExternalPanelAddition.tsxweb/src/components/ols-tool-ui/helpers/AddToDashboardButton.tsx
|
/test ci/prow/periodics-images |
|
/test periodics-images |
|
@jgbernalp: all tests passed! 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. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: iNecas, jgbernalp The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
Update the perses dependencies to remove vulnerable dependencies.
cc @iNecas there were minor changes to the OLS plugin extension, PTAL.
Summary by CodeRabbit