[8.9] [Security Selection][Detection engine] fixes rule preview perfo…

…rmance issues (elastic#164207) (elastic#164487) # Backport This will backport the following commits from `main` to `8.9`: - [[Security Selection][Detection engine] fixes rule preview performance issues (elastic#164207)](elastic#164207)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Vitalii Dmyterko <[email protected]>
juliaElastic · Aug 22, 2023 · e164e8a · e164e8a
1 parent 2ac7591
commit e164e8a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 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
@@ -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/...s/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx b/...s/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/...lugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx b/...lugins/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;