From ac6608236c92ff32e7b3b6355f8836053110f5e8 Mon Sep 17 00:00:00 2001
From: Philippe Oberti <philippe.oberti@elastic.co>
Date: Mon, 6 Jan 2025 18:51:47 +0100
Subject: [PATCH] [8.17] [Security Solution] - fixing infinite look on host
 flyout panel due to lack of memoization (#204999) (#205624)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Security Solution] - fixing infinite look on host flyout panel due
to lack of memoization
(#204999)](https://github.com/elastic/kibana/pull/204999)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"philippe.oberti@elastic.co"},"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](https://github.com/elastic/security-team/issues/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"],"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](https://github.com/elastic/security-team/issues/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":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^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](https://github.com/elastic/security-team/issues/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","labelRegex":"^v8.18.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/205104","number":205104,"state":"MERGED","mergeCommit":{"sha":"3d88e86b0787aa3faaa8c2bffd04b31d53d0008f","message":"[8.x]
[Security Solution] - fixing infinite look on host flyout panel due to
lack of memoization (#204999) (#205104)\n\n# Backport\n\nThis will
backport the following commits from `main` to `8.x`:\n- [[Security
Solution] - fixing infinite look on host flyout panel due\nto lack of
memoization\n(#204999)](https://github.com/elastic/kibana/pull/204999)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT
[{\"author\":{\"name\":\"Philippe\nOberti\",\"email\":\"philippe.oberti@elastic.co\"},\"sourceCommit\":{\"committedDate\":\"2024-12-23T15:55:30Z\",\"message\":\"[Security\nSolution]
- fixing infinite look on host flyout panel due to lack of\nmemoization
(#204999)\\n\\n## Summary\\r\\n\\r\\nThis PR
fixes\n[an\\r\\nissue](https://github.com/elastic/security-team/issues/11424)\nraised\\r\\nrecently
where opening a preview panel for a host of user on\ntop of
a\\r\\nflyout already showing a host or user was getting the UI\nstuck
into an\\r\\ninfinite loop.\\r\\n\\r\\nWhile we found a few ways to
fix\nthe issue - primarily adding\\r\\nmemoization to the UI components
within\nthe HostPanel and UserPanel, the\\r\\napproach in this PR fixes
the issue\nat a more root level.\\r\\n\\r\\nInfinite
loop\nbehavior\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\\r\\n\\r\\nIssue\nfixed\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\\r\\n\\r\\nThis\nfix
should also potentially bring some performance improvement
to\\r\\nall\nthe components that are using the hook (we have
a\nfew).\",\"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\nHunting:Investigations\",\"backport:version\",\"v8.18.0\"],\"title\":\"[Security\nSolution]
- fixing infinite look on host flyout panel due to lack
of\nmemoization\",\"number\":204999,\"url\":\"https://github.com/elastic/kibana/pull/204999\",\"mergeCommit\":{\"message\":\"[Security\nSolution]
- fixing infinite look on host flyout panel due to lack of\nmemoization
(#204999)\\n\\n## Summary\\r\\n\\r\\nThis PR
fixes\n[an\\r\\nissue](https://github.com/elastic/security-team/issues/11424)\nraised\\r\\nrecently
where opening a preview panel for a host of user on\ntop of
a\\r\\nflyout already showing a host or user was getting the UI\nstuck
into an\\r\\ninfinite loop.\\r\\n\\r\\nWhile we found a few ways to
fix\nthe issue - primarily adding\\r\\nmemoization to the UI components
within\nthe HostPanel and UserPanel, the\\r\\napproach in this PR fixes
the issue\nat a more root level.\\r\\n\\r\\nInfinite
loop\nbehavior\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\\r\\n\\r\\nIssue\nfixed\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\\r\\n\\r\\nThis\nfix
should also potentially bring some performance improvement
to\\r\\nall\nthe components that are using the hook (we have
a\nfew).\",\"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\nSolution]
- fixing infinite look on host flyout panel due to lack of\nmemoization
(#204999)\\n\\n## Summary\\r\\n\\r\\nThis PR
fixes\n[an\\r\\nissue](https://github.com/elastic/security-team/issues/11424)\nraised\\r\\nrecently
where opening a preview panel for a host of user on\ntop of
a\\r\\nflyout already showing a host or user was getting the UI\nstuck
into an\\r\\ninfinite loop.\\r\\n\\r\\nWhile we found a few ways to
fix\nthe issue - primarily adding\\r\\nmemoization to the UI components
within\nthe HostPanel and UserPanel, the\\r\\napproach in this PR fixes
the issue\nat a more root level.\\r\\n\\r\\nInfinite
loop\nbehavior\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/92cb60ad-7801-43ec-a247-8943e091b6a8\\r\\n\\r\\nIssue\nfixed\\r\\n\\r\\n\\r\\nhttps://github.com/user-attachments/assets/30b30b42-f32e-4c02-9407-9d0f671d7216\\r\\n\\r\\nThis\nfix
should also potentially bring some performance improvement
to\\r\\nall\nthe components that are using the hook (we have
a\nfew).\",\"sha\":\"96264d29237f0b7cfc8c651393f12d248f0d84e0\"}},{\"branch\":\"8.x\",\"label\":\"v8.18.0\",\"branchLabelMappingKey\":\"^v8.18.0$\",\"isSourceBranch\":false,\"state\":\"NOT_CREATED\"}]}]\nBACKPORT-->\n\nCo-authored-by:
Philippe Oberti <philippe.oberti@elastic.co>"}}]}] BACKPORT-->
---
 .../alerts_by_status/use_alerts_by_status.ts      | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
index e80f3ec0a0caf..9af905cab8580 100644
--- a/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
+++ b/x-pack/plugins/security_solution/public/overview/components/detection_response/alerts_by_status/use_alerts_by_status.ts
@@ -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';
@@ -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,