From e164e8ab5968afe94dfd1c8249ccfd3a105148bc Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 22 Aug 2023 14:32:48 -0400
Subject: [PATCH] [8.9] [Security Selection][Detection engine] fixes rule
 preview performance issues (#164207) (#164487)

# Backport

This will backport the following commits from `main` to `8.9`:
- [[Security Selection][Detection engine] fixes rule preview performance
issues (#164207)](https://github.com/elastic/kibana/pull/164207)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Vitalii
Dmyterko","email":"92328789+vitaliidm@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-08-22T17:05:15Z","message":"[Security
Selection][Detection engine] fixes rule preview performance issues
(#164207)\n\n## Summary\r\n\r\nOn every single keyboard type on query
input, the whole preview part was\r\nre-rendering. If there are too many
alerts, it could take ~150ms-200ms,\r\nfor its re-render. Ultimately,
making form almost unusable\r\nSo, in this PR I'm adding memoization for
2 Preview components, to\r\nresolve this issue\r\n\r\n\r\n###
Before\r\n\r\n<img width=\"2529\" alt=\"Screenshot 2023-08-17 at 17 13
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/c0b137e6-828b-4068-b061-85a5b5ca99f1\">\r\n\r\n###
After\r\n\r\n<img width=\"2523\" alt=\"Screenshot 2023-08-17 at 17 07
56\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/06a0983c-d8e0-40c1-9b48-fd4bc106e922\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"cd8a94ba3203022a7791e85a8dd8a6c16ae381ab","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","backport:prev-minor","Team:Detection
Engine","v8.10.0","v8.11.0","v8.9.2"],"number":164207,"url":"https://github.com/elastic/kibana/pull/164207","mergeCommit":{"message":"[Security
Selection][Detection engine] fixes rule preview performance issues
(#164207)\n\n## Summary\r\n\r\nOn every single keyboard type on query
input, the whole preview part was\r\nre-rendering. If there are too many
alerts, it could take ~150ms-200ms,\r\nfor its re-render. Ultimately,
making form almost unusable\r\nSo, in this PR I'm adding memoization for
2 Preview components, to\r\nresolve this issue\r\n\r\n\r\n###
Before\r\n\r\n<img width=\"2529\" alt=\"Screenshot 2023-08-17 at 17 13
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/c0b137e6-828b-4068-b061-85a5b5ca99f1\">\r\n\r\n###
After\r\n\r\n<img width=\"2523\" alt=\"Screenshot 2023-08-17 at 17 07
56\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/06a0983c-d8e0-40c1-9b48-fd4bc106e922\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"cd8a94ba3203022a7791e85a8dd8a6c16ae381ab"}},"sourceBranch":"main","suggestedTargetBranches":["8.10","8.9"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164207","number":164207,"mergeCommit":{"message":"[Security
Selection][Detection engine] fixes rule preview performance issues
(#164207)\n\n## Summary\r\n\r\nOn every single keyboard type on query
input, the whole preview part was\r\nre-rendering. If there are too many
alerts, it could take ~150ms-200ms,\r\nfor its re-render. Ultimately,
making form almost unusable\r\nSo, in this PR I'm adding memoization for
2 Preview components, to\r\nresolve this issue\r\n\r\n\r\n###
Before\r\n\r\n<img width=\"2529\" alt=\"Screenshot 2023-08-17 at 17 13
07\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/c0b137e6-828b-4068-b061-85a5b5ca99f1\">\r\n\r\n###
After\r\n\r\n<img width=\"2523\" alt=\"Screenshot 2023-08-17 at 17 07
56\"\r\nsrc=\"https://github.com/elastic/kibana/assets/92328789/06a0983c-d8e0-40c1-9b48-fd4bc106e922\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"cd8a94ba3203022a7791e85a8dd8a6c16ae381ab"}},{"branch":"8.9","label":"v8.9.2","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>
---
 .../components/rules/rule_preview/index.tsx           |  4 ++--
 .../rules/rule_preview/preview_histogram.tsx          |  5 ++++-
 .../components/rules/rule_preview/preview_logs.tsx    | 11 +++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/index.tsx
index 55931e74ff9d4..c4d50062675d2 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/index.tsx
@@ -25,7 +25,7 @@ import { isEqual } from 'lodash';
 import * as i18n from './translations';
 import { usePreviewRoute } from './use_preview_route';
 import { PreviewHistogram } from './preview_histogram';
-import { PreviewLogsComponent } from './preview_logs';
+import { PreviewLogs } from './preview_logs';
 import { useKibana } from '../../../../common/lib/kibana';
 import { LoadingHistogram } from './loading_histogram';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
@@ -274,7 +274,7 @@ const RulePreviewComponent: React.FC<RulePreviewProps> = ({
           timeframeOptions={previewData.timeframeOptions}
         />
       )}
-      <PreviewLogsComponent logs={logs} hasNoiseWarning={hasNoiseWarning} isAborted={isAborted} />
+      <PreviewLogs logs={logs} hasNoiseWarning={hasNoiseWarning} isAborted={isAborted} />
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
index 89ed3aaf97b91..24f6b82383a13 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
@@ -69,7 +69,7 @@ interface PreviewHistogramProps {
 
 const DEFAULT_HISTOGRAM_HEIGHT = 300;
 
-export const PreviewHistogram = ({
+const PreviewHistogramComponent = ({
   previewId,
   addNoiseWarning,
   spaceId,
@@ -262,3 +262,6 @@ export const PreviewHistogram = ({
     </>
   );
 };
+
+export const PreviewHistogram = React.memo(PreviewHistogramComponent);
+PreviewHistogram.displayName = 'PreviewHistogram';
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx
index fe86abef3d79a..7443ec5e664cf 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx
@@ -10,7 +10,7 @@ import { EuiCallOut, EuiText, EuiSpacer, EuiAccordion } from '@elastic/eui';
 import type { RulePreviewLogs } from '../../../../../common/detection_engine/rule_schema';
 import * as i18n from './translations';
 
-interface PreviewLogsComponentProps {
+interface PreviewLogsProps {
   logs: RulePreviewLogs[];
   hasNoiseWarning: boolean;
   isAborted: boolean;
@@ -42,11 +42,7 @@ const addLogs = (
   allLogs: SortedLogs[]
 ) => (logs.length ? [{ startedAt, logs, duration }, ...allLogs] : allLogs);
 
-export const PreviewLogsComponent: React.FC<PreviewLogsComponentProps> = ({
-  logs,
-  hasNoiseWarning,
-  isAborted,
-}) => {
+const PreviewLogsComponent: React.FC<PreviewLogsProps> = ({ logs, hasNoiseWarning, isAborted }) => {
   const sortedLogs = useMemo(
     () =>
       logs.reduce<{
@@ -73,6 +69,9 @@ export const PreviewLogsComponent: React.FC<PreviewLogsComponentProps> = ({
   );
 };
 
+export const PreviewLogs = React.memo(PreviewLogsComponent);
+PreviewLogs.displayName = 'PreviewLogs';
+
 const LogAccordion: React.FC<LogAccordionProps> = ({ logs, isError, children }) => {
   const firstLog = logs[0];
   if (!(children || firstLog)) return null;