[Security Solution] Fix non-responsive rule details page #187953
Merged
Conversation
This file contains 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
maximpn
added
bug
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
|
Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management) |
vitaliidm
reviewed
Jul 10, 2024
maximpn
force-pushed
the
fix-non-responsive-rule-details-page
branch
from
c85cd51 to
f54c764
Compare
maximpn
force-pushed
the
fix-non-responsive-rule-details-page
branch
from
f54c764 to
3196198
Compare
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 15, 2024
) **Resolves:** elastic#177734 ## Summary This PR fixes a non-responsive rule details page under non default space. ## Details **[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [elastic#177734](elastic#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [elastic#181099](elastic#181099 is the cause. The problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx` ```ts const panels = useAsync( () => buildContextMenuForActions({ actions: contextMenuActions.map((action) => ({ action, context: {}, trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER, })), }), [contextMenuActions] ); ``` where `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [elastic#181099](elastic#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`. The actual fix is to replace ```ts const { lens, ...startServices } = useKibana().services; ``` with ```ts const startServices = useKibana().services; ``` Since `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem. (cherry picked from commit 8a539a8)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jul 15, 2024
) (#188305) # Backport This will backport the following commits from `main` to `8.15`: - [[Security Solution] Fix non-responsive rule details page (#187953)](#187953) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Maxim Palenov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-07-15T11:37:26Z","message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","impact:critical","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Rule Details","v8.15.0","v8.16.0"],"title":"[Security Solution] Fix non-responsive rule details page","number":187953,"url":"https://github.com/elastic/kibana/pull/187953","mergeCommit":{"message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187953","number":187953,"mergeCommit":{"message":"[Security Solution] Fix non-responsive rule details page (#187953)\n\n**Resolves:** https://github.com/elastic/kibana/issues/177734\r\n\r\n## Summary\r\n\r\nThis PR fixes a non-responsive rule details page under non default space.\r\n\r\n## Details\r\n\r\n**[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces [#177734](#177734 resurfaced back. Investigation has show that **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 is the cause.\r\n\r\nThe problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable `useAsync()` hook dependency. Every re-render `useAsync()` resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used in `x-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsx`\r\n\r\n```ts\r\n const panels = useAsync(\r\n () =>\r\n buildContextMenuForActions({\r\n actions: contextMenuActions.map((action) => ({\r\n action,\r\n context: {},\r\n trigger: VISUALIZATION_CONTEXT_MENU_TRIGGER,\r\n })),\r\n }),\r\n [contextMenuActions]\r\n );\r\n```\r\n\r\nwhere `contextMenuActions` is an unstable dependency. This is the case due to refactoring to `useSaveToLibrary()` hook by **[Security Solution] Remove usage of deprecated React rendering utilities [#181099](#181099 which started retuning a new object every render. The dependency chain is `contextMenuActions` -> `useActions()` -> `useSaveToLibrary()`.\r\n\r\nThe actual fix is to replace\r\n\r\n```ts\r\nconst { lens, ...startServices } = useKibana().services;\r\n```\r\n\r\nwith\r\n\r\n```ts\r\nconst startServices = useKibana().services;\r\n```\r\n\r\nSince `startServices` is used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stable `useKibana().services` fixes the problem.","sha":"8a539a8a4ce483d2e5d3aa484d8ec78887f338b8"}}]}] BACKPORT--> Co-authored-by: Maxim Palenov <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Resolves: #177734
Summary
This PR fixes a non-responsive rule details page under non default space.
Details
[Security Solution] Rule details page is not responsive and leads to page crash for rule in non-default spaces #177734 resurfaced back. Investigation has show that [Security Solution] Remove usage of deprecated React rendering utilities #181099 is the cause.
The problem is quite subtle to comprehend it just by looking at the code. In fact it boils down to an unstable
useAsync()hook dependency. Every re-renderuseAsync()resolves a promise causing an additional re-render to show updated results and the cycle repeats. Such hook is used inx-pack/plugins/security_solution/public/common/components/visualization_actions/actions.tsxwhere
contextMenuActionsis an unstable dependency. This is the case due to refactoring touseSaveToLibrary()hook by [Security Solution] Remove usage of deprecated React rendering utilities #181099 which started retuning a new object every render. The dependency chain iscontextMenuActions->useActions()->useSaveToLibrary().The actual fix is to replace
with
Since
startServicesis used as a hook dependency it must be stable. A rest property in object destruction expression is always a new object and can't be used as a dependency as is. Using stableuseKibana().servicesfixes the problem.