github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.9] [Security Selection][Detection engine] fixes rule preview performance issues (#164207) (#164487)

Browse source 
# 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=\"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=\"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=\"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=\"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=\"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=\"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>
This commit is contained in:
Kibana Machine 2023-08-22 14:32:48 -04:00 • committed by GitHub
parent 2ac7591d36
commit e164e8ab59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/index.tsx
View file

@ -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} />
</>
);
};

5
x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_histogram.tsx
View file

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

11
x-pack/plugins/security_solution/public/detections/components/rules/rule_preview/preview_logs.tsx
View file

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