From 4fe83a37d3341e6e40604aef1933850e29b5dffa Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Tue, 4 Mar 2025 09:23:44 -0500
Subject: [PATCH] [8.x] [Performance][Security Solution][4/4] - General
 Performance changes (#212488) (#212987)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Performance][Security Solution][4/4] - General Performance changes
(#212488)](https://github.com/elastic/kibana/pull/212488)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Michael
Olorunnisola","email":"michael.olorunnisola@elastic.co"},"sourceCommit":{"committedDate":"2025-03-03T17:59:43Z","message":"[Performance][Security
Solution][4/4] - General Performance changes (#212488)\n\n##
Summary\nPart 4 (Final) of
https://github.com/elastic/kibana/pull/212173\n\n### Testing\nFor setup
see testing section
here:\nhttps://github.com/elastic/kibana/pull/212173#issue-2870522020\n\nFor
testing, feel free to add a `console.count('!! - Number
of\nre-renders:)`
to\n`x-pack/solutions/security/plugins/security_solution/public/app/home/index.tsx`.\nThe
memoization
changes\n[here](https://github.com/elastic/kibana/pull/212488/files#diff-b0cdd6dc57dd06dba69d90894de8c88a7bb7c71c0e58753f324eb8ba664a0782R18)\nto
the plugin template wrapper, prevented 2 extra re-renders, but there\nis
still an underlying problem of how the `PageTemplateWrapper` is
used,\nas it causes unmounting and remounting of the security views
when\nnavigating between pages.\n\nThe only other change was to rely on
React's built in diffing on the\nalerts page for the page level
filters","sha":"7f32eb0225a9bb91167f4968548cfa46489521e7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.18.0","v9.1.0","v8.19.0","v8.17.3"],"title":"[Performance][Security
Solution][4/4] - General Performance
changes","number":212488,"url":"https://github.com/elastic/kibana/pull/212488","mergeCommit":{"message":"[Performance][Security
Solution][4/4] - General Performance changes (#212488)\n\n##
Summary\nPart 4 (Final) of
https://github.com/elastic/kibana/pull/212173\n\n### Testing\nFor setup
see testing section
here:\nhttps://github.com/elastic/kibana/pull/212173#issue-2870522020\n\nFor
testing, feel free to add a `console.count('!! - Number
of\nre-renders:)`
to\n`x-pack/solutions/security/plugins/security_solution/public/app/home/index.tsx`.\nThe
memoization
changes\n[here](https://github.com/elastic/kibana/pull/212488/files#diff-b0cdd6dc57dd06dba69d90894de8c88a7bb7c71c0e58753f324eb8ba664a0782R18)\nto
the plugin template wrapper, prevented 2 extra re-renders, but there\nis
still an underlying problem of how the `PageTemplateWrapper` is
used,\nas it causes unmounting and remounting of the security views
when\nnavigating between pages.\n\nThe only other change was to rely on
React's built in diffing on the\nalerts page for the page level
filters","sha":"7f32eb0225a9bb91167f4968548cfa46489521e7"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.x","8.17"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/212966","number":212966,"state":"MERGED","mergeCommit":{"sha":"f93acdea1585b265c9a74be93da1c2dfa562631b","message":"[9.0]
[Performance][Security Solution][4/4] - General Performance changes
(#212488) (#212966)\n\n# Backport\n\nThis will backport the following
commits from `main` to `9.0`:\n- [[Performance][Security Solution][4/4]
- General Performance
changes\n(#212488)](https://github.com/elastic/kibana/pull/212488)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Michael Olorunnisola
<michael.olorunnisola@elastic.co>"}},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212488","number":212488,"mergeCommit":{"message":"[Performance][Security
Solution][4/4] - General Performance changes (#212488)\n\n##
Summary\nPart 4 (Final) of
https://github.com/elastic/kibana/pull/212173\n\n### Testing\nFor setup
see testing section
here:\nhttps://github.com/elastic/kibana/pull/212173#issue-2870522020\n\nFor
testing, feel free to add a `console.count('!! - Number
of\nre-renders:)`
to\n`x-pack/solutions/security/plugins/security_solution/public/app/home/index.tsx`.\nThe
memoization
changes\n[here](https://github.com/elastic/kibana/pull/212488/files#diff-b0cdd6dc57dd06dba69d90894de8c88a7bb7c71c0e58753f324eb8ba664a0782R18)\nto
the plugin template wrapper, prevented 2 extra re-renders, but there\nis
still an underlying problem of how the `PageTemplateWrapper` is
used,\nas it causes unmounting and remounting of the security views
when\nnavigating between pages.\n\nThe only other change was to rely on
React's built in diffing on the\nalerts page for the page level
filters","sha":"7f32eb0225a9bb91167f4968548cfa46489521e7"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
---
 .../plugin_template_wrapper.tsx               | 24 +++++++------
 .../detection_engine/detection_engine.tsx     | 34 +++++++++----------
 ...urity_solution_plugin_template_wrapper.tsx | 27 ++++++++-------
 3 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx
index 9808cb864f800..ebc4fe82304b4 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { FC } from 'react';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template';
 import { useKibana } from '../../lib/kibana';
@@ -15,14 +15,18 @@ import { useKibana } from '../../lib/kibana';
  *
  * The `template` prop can be used to alter the page layout for a given plugin route / all routes within a plugin - depending on the nesting.
  */
-export const PluginTemplateWrapper: FC<KibanaPageTemplateProps> = ({ children, ...rest }) => {
-  const {
-    services: {
-      securityLayout: { getPluginWrapper },
-    },
-  } = useKibana();
+export const PluginTemplateWrapper: FC<KibanaPageTemplateProps> = React.memo(
+  ({ children, ...rest }) => {
+    const {
+      services: {
+        securityLayout: { getPluginWrapper },
+      },
+    } = useKibana();
 
-  const Wrapper = getPluginWrapper();
+    const Wrapper = useMemo(() => getPluginWrapper(), [getPluginWrapper]);
 
-  return <Wrapper {...rest}>{children}</Wrapper>;
-};
+    return <Wrapper {...rest}>{children}</Wrapper>;
+  }
+);
+
+PluginTemplateWrapper.displayName = 'PluginTemplateWrapper';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
index 6c74da49a2da6..1a19e1621fb91 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
@@ -23,7 +23,7 @@ import type { ConnectedProps } from 'react-redux';
 import { connect, useDispatch } from 'react-redux';
 import type { Dispatch } from 'redux';
 import { isTab } from '@kbn/timelines-plugin/public';
-import type { Filter } from '@kbn/es-query';
+import type { Filter, TimeRange } from '@kbn/es-query';
 import type { DocLinks } from '@kbn/doc-links';
 import {
   dataTableActions,
@@ -301,22 +301,13 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ()
     [isLoadingIndexPattern, areDetectionPageFiltersLoading]
   );
 
-  const AlertPageFilters = useMemo(
-    () => (
-      <DetectionEngineFilters
-        filters={topLevelFilters}
-        onFiltersChange={onFilterControlsChange}
-        query={query}
-        timeRange={{
-          from,
-          to,
-          mode: 'absolute',
-        }}
-        onInit={setDetectionPageFilterHandler}
-        indexPattern={indexPattern}
-      />
-    ),
-    [from, indexPattern, onFilterControlsChange, query, to, topLevelFilters]
+  const pageFiltersTimerange = useMemo<TimeRange>(
+    () => ({
+      from,
+      to,
+      mode: 'absolute',
+    }),
+    [from, to]
   );
 
   const renderAlertTable = useCallback(
@@ -410,7 +401,14 @@ const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ()
               </HeaderPage>
               <EuiHorizontalRule margin="none" />
               <EuiSpacer size="l" />
-              {AlertPageFilters}
+              <DetectionEngineFilters
+                filters={topLevelFilters}
+                onFiltersChange={onFilterControlsChange}
+                query={query}
+                timeRange={pageFiltersTimerange}
+                onInit={setDetectionPageFilterHandler}
+                indexPattern={indexPattern}
+              />
               <EuiSpacer size="l" />
               <ChartPanels
                 addFilter={addFilter}
diff --git a/x-pack/solutions/security/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx b/x-pack/solutions/security/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx
index c4b97d1b7e722..d260ed8b0815b 100644
--- a/x-pack/solutions/security/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx
+++ b/x-pack/solutions/security/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-types';
 import { useKibana } from '../hooks/use_kibana';
 
@@ -15,17 +15,18 @@ import { useKibana } from '../hooks/use_kibana';
  *
  * The `template` prop can be used to alter the page layout for a given plugin route / all routes within a plugin - depending on the nesting.
  */
-export const SecuritySolutionPluginTemplateWrapper: FC<KibanaPageTemplateProps> = ({
-  children,
-  ...rest
-}) => {
-  const {
-    services: {
-      securityLayout: { getPluginWrapper },
-    },
-  } = useKibana();
+export const SecuritySolutionPluginTemplateWrapper: FC<KibanaPageTemplateProps> = React.memo(
+  ({ children, ...rest }) => {
+    const {
+      services: {
+        securityLayout: { getPluginWrapper },
+      },
+    } = useKibana();
 
-  const Wrapper = getPluginWrapper();
+    const Wrapper = useMemo(() => getPluginWrapper(), [getPluginWrapper]);
 
-  return <Wrapper {...rest}>{children}</Wrapper>;
-};
+    return <Wrapper {...rest}>{children}</Wrapper>;
+  }
+);
+
+SecuritySolutionPluginTemplateWrapper.displayName = 'SecuritySolutionPluginTemplateWrapper';