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.10] [Security Solution]Expandable flyout - Alert reason formatting fix (#164861) (#164888)

Browse source 
# Backport

This will backport the following commits from `main` to `8.10`:
- [[Security Solution]Expandable flyout - Alert reason formatting fix
(#164861)](https://github.com/elastic/kibana/pull/164861)

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

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

<!--BACKPORT [{"author":{"name":"Jatin
Kathuria","email":"jatin.kathuria@elastic.co"},"sourceCommit":{"committedDate":"2023-08-25T18:25:20Z","message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Threat
Hunting:Investigations","Feature:Expandable
Flyout","v8.10.0","v8.11.0"],"number":164861,"url":"https://github.com/elastic/kibana/pull/164861","mergeCommit":{"message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"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/164861","number":164861,"mergeCommit":{"message":"[Security
Solution]Expandable flyout - Alert reason formatting fix (#164861)\n\n##
Summary\r\n\r\nThis PR handles
https://github.com/elastic/kibana/issues/164408\r\n\r\nThere are some
cases in which Alert Renderer cannot be wrapped beyond a\r\nminimum
width. To handle those cases, this PR handles
overflow\r\nscrolling.\r\n\r\nBelow before/after video shows the
differences.\r\n\r\n| Before | After |\r\n|--|--|\r\n|
<video\r\nsrc=\"6c95a74d-db85-41db-a2c6-4fc64998e82d\"\r\n/>
|
<video\r\nsrc=\"1b7944c8-66a7-4cd9-a579-06a2e0e05ebf\"\r\n/>
|\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not
applicable to this PR.\r\n\r\n- [x] This renders correctly on smaller
devices using a responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"2417b7975139d12c275f4e5305b524983beeca17"}}]}]
BACKPORT-->

Co-authored-by: Jatin Kathuria <jatin.kathuria@elastic.co>
This commit is contained in:
Kibana Machine 2023-08-25 16:53:20 -04:00 • committed by GitHub
parent 15be47415e
commit 9c27217697
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

33
x-pack/plugins/security_solution/public/flyout/preview/components/alert_reason_preview.tsx
View file

@ -7,12 +7,21 @@
import React, { useMemo } from 'react';
import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
import styled from '@emotion/styled';
import { euiThemeVars } from '@kbn/ui-theme';
import { ALERT_REASON_TITLE } from './translations';
import { ALERT_REASON_PREVIEW_BODY_TEST_ID } from './test_ids';
import { usePreviewPanelContext } from '../context';
import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer';
import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
const ReasonPreviewContainerWrapper = styled.div`
overflow-x: auto;
padding-block: ${euiThemeVars.euiSizeS};
`;
const ReasonPreviewContainer = styled.div``;
/**
* Alert reason renderer on a preview panel on top of the right section of expandable flyout
*/
@ -27,6 +36,19 @@ export const AlertReasonPreview: React.FC = () => {
[dataAsNestedObject]
);
const rowRenderer = useMemo(
() =>
renderer && dataAsNestedObject
? renderer.renderRow({
contextId: 'event-details',
data: dataAsNestedObject,
isDraggable: false,
scopeId: 'global',
})
: null,
[renderer, dataAsNestedObject]
);
if (!dataAsNestedObject || !renderer) {
return null;
}
@ -37,12 +59,11 @@ export const AlertReasonPreview: React.FC = () => {
<h6>{ALERT_REASON_TITLE}</h6>
</EuiTitle>
<EuiSpacer size="m" />
{renderer.renderRow({
contextId: 'event-details',
data: dataAsNestedObject,
isDraggable: false,
scopeId: 'global',
})}
<ReasonPreviewContainerWrapper>
<ReasonPreviewContainer className={'eui-displayInlineBlock'}>
{rowRenderer}
</ReasonPreviewContainer>
</ReasonPreviewContainerWrapper>
</EuiPanel>
);
};