[8.16] [Performance][Security Solution][4/4] - General Performance changes (#212488) (#213132)

# Backport This will backport the following commits from `main` to `8.16`: - [[Performance][Security Solution][4/4] - General Performance changes (#212488)](https://github.com/elastic/kibana/pull/212488)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-23 17:28:26 -04:00 · 2025-03-04 13:37:18 -05:00 · 2025-03-04 13:37:18 -05:00 · d20996f8ce
commit d20996f8ce
parent 15d55918b0
3 changed files with 44 additions and 41 deletions
--- 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';
--- 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}
--- 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';