[Security Selection][Detection engine] fixes rule preview performance…

… issues (elastic#164207) ## Summary On every single keyboard type on query input, the whole preview part was re-rendering. If there are too many alerts, it could take ~150ms-200ms, for its re-render. Ultimately, making form almost unusable So, in this PR I'm adding memoization for 2 Preview components, to resolve this issue ### Before <img width="2529" alt="Screenshot 2023-08-17 at 17 13 07" src="https://github.com/elastic/kibana/assets/92328789/c0b137e6-828b-4068-b061-85a5b5ca99f1"> ### After <img width="2523" alt="Screenshot 2023-08-17 at 17 07 56" src="https://github.com/elastic/kibana/assets/92328789/06a0983c-d8e0-40c1-9b48-fd4bc106e922"> --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine · Aug 22, 2023 · cd8a94b · cd8a94b
1 parent 433d4f2
commit cd8a94b
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/api/detection_engine';
 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;