From 4aff6417aebb460f21d0840fb1448127fba4fe3e Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Mon, 3 Mar 2025 12:59:43 -0500
Subject: [PATCH] [Performance][Security Solution][4/4] - General Performance
 changes (#212488)

## Summary
Part 4 (Final) of https://github.com/elastic/kibana/pull/212173

### Testing
For setup see testing section here:
https://github.com/elastic/kibana/pull/212173#issue-2870522020

For testing, feel free to add a `console.count('!! - Number of
re-renders:)` to
`x-pack/solutions/security/plugins/security_solution/public/app/home/index.tsx`.
The memoization changes
[here](https://github.com/elastic/kibana/pull/212488/files#diff-b0cdd6dc57dd06dba69d90894de8c88a7bb7c71c0e58753f324eb8ba664a0782R18)
to the plugin template wrapper, prevented 2 extra re-renders, but there
is still an underlying problem of how the `PageTemplateWrapper` is used,
as it causes unmounting and remounting of the security views when
navigating between pages.

The only other change was to rely on React's built in diffing on the
alerts page for the page level filters

(cherry picked from commit 7f32eb0225a9bb91167f4968548cfa46489521e7)

# Conflicts:
#	x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
---
 .../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/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx
index 9808cb864f800..ebc4fe82304b4 100644
--- a/x-pack/plugins/security_solution/public/common/components/plugin_template_wrapper/plugin_template_wrapper.tsx
+++ b/x-pack/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/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
index 7784fbb5760c3..a746a55a99285 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx
+++ b/x-pack/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,
@@ -302,22 +302,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(
@@ -412,7 +403,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/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx b/x-pack/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx
index c4b97d1b7e722..d260ed8b0815b 100644
--- a/x-pack/plugins/threat_intelligence/public/containers/security_solution_plugin_template_wrapper.tsx
+++ b/x-pack/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';