Skip to content

Commit

Permalink
[8.x] [Security Solution] - fixing infinite look on host flyout panel…
Browse files Browse the repository at this point in the history
… due to lack of memoization (#204999) (#205104)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] - fixing infinite look on host flyout panel due
to lack of memoization
(#204999)](#204999)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-23T15:55:30Z","message":"[Security
Solution] - fixing infinite look on host flyout panel due to lack of
memoization (#204999)\n\n## Summary\r\n\r\nThis PR fixes
[an\r\nissue](elastic/security-team#11424)
raised\r\nrecently where opening a preview panel for a host of user on
top of a\r\nflyout already showing a host or user was getting the UI
stuck into an\r\ninfinite loop.\r\n\r\nWhile we found a few ways to fix
the issue - primarily adding\r\nmemoization to the UI components within
the HostPanel and UserPanel, the\r\napproach in this PR fixes the issue
at a more root level.\r\n\r\nInfinite loop
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\r\n\r\nIssue
fixed\r\n\r\n\r\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\r\n\r\nThis
fix should also potentially bring some performance improvement to\r\nall
the components that are using the hook (we have a
few).","sha":"96264d29237f0b7cfc8c651393f12d248f0d84e0","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0"],"title":"[Security
Solution] - fixing infinite look on host flyout panel due to lack of
memoization","number":204999,"url":"https://github.com/elastic/kibana/pull/204999","mergeCommit":{"message":"[Security
Solution] - fixing infinite look on host flyout panel due to lack of
memoization (#204999)\n\n## Summary\r\n\r\nThis PR fixes
[an\r\nissue](elastic/security-team#11424)
raised\r\nrecently where opening a preview panel for a host of user on
top of a\r\nflyout already showing a host or user was getting the UI
stuck into an\r\ninfinite loop.\r\n\r\nWhile we found a few ways to fix
the issue - primarily adding\r\nmemoization to the UI components within
the HostPanel and UserPanel, the\r\napproach in this PR fixes the issue
at a more root level.\r\n\r\nInfinite loop
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\r\n\r\nIssue
fixed\r\n\r\n\r\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\r\n\r\nThis
fix should also potentially bring some performance improvement to\r\nall
the components that are using the hook (we have a
few).","sha":"96264d29237f0b7cfc8c651393f12d248f0d84e0"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204999","number":204999,"mergeCommit":{"message":"[Security
Solution] - fixing infinite look on host flyout panel due to lack of
memoization (#204999)\n\n## Summary\r\n\r\nThis PR fixes
[an\r\nissue](elastic/security-team#11424)
raised\r\nrecently where opening a preview panel for a host of user on
top of a\r\nflyout already showing a host or user was getting the UI
stuck into an\r\ninfinite loop.\r\n\r\nWhile we found a few ways to fix
the issue - primarily adding\r\nmemoization to the UI components within
the HostPanel and UserPanel, the\r\napproach in this PR fixes the issue
at a more root level.\r\n\r\nInfinite loop
behavior\r\n\r\n\r\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\r\n\r\nIssue
fixed\r\n\r\n\r\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\r\n\r\nThis
fix should also potentially bring some performance improvement to\r\nall
the components that are using the hook (we have a
few).","sha":"96264d29237f0b7cfc8c651393f12d248f0d84e0"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <[email protected]>
  • Loading branch information
kibanamachine and PhilippeOberti authored Dec 23, 2024
1 parent dc52bc5 commit 3d88e86
Showing 1 changed file with 10 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';

import { useDispatch } from 'react-redux';
Expand Down Expand Up @@ -200,12 +200,17 @@ export const useAlertsByStatus: UseAlertsByStatus = ({
}
}, [skip, refetchQuery]);

useQueryInspector({
deleteQuery,
inspect: {
const inspect = useMemo(
() => ({
dsl: [request],
response: [response],
},
}),
[request, response]
);

useQueryInspector({
deleteQuery,
inspect,
refetch,
setQuery,
queryId,
Expand Down

0 comments on commit 3d88e86

Please sign in to comment.