[Performance][Security Solution][4/4] - General Performance changes (#…

…212488)

## Summary
Part 4 (Final) of #212173

### Testing
For setup see testing section here:
#212173 (comment)

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 7f32eb0)

# Conflicts:
#	x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx

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';

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}

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';