Skip to content

Commit

Permalink
[Security Solution]Expandable flyout - Alert reason formatting fix (e…
Browse files Browse the repository at this point in the history
…lastic#164861)

## Summary

This PR handles elastic#164408

There are some cases in which Alert Renderer cannot be wrapped beyond a
minimum width. To handle those cases, this PR handles overflow
scrolling.

Below before/after video shows the differences.

| Before | After |
|--|--|
| <video
src="https://github.com/elastic/kibana/assets/7485038/6c95a74d-db85-41db-a2c6-4fc64998e82d"
/> | <video
src="https://github.com/elastic/kibana/assets/7485038/1b7944c8-66a7-4cd9-a579-06a2e0e05ebf"
/> |


### Checklist

Delete any items that are not applicable to this PR.

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
  • Loading branch information
logeekal authored Aug 25, 2023
1 parent 2171ecc commit 2417b79
Showing 1 changed file with 27 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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;
}
Expand All @@ -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>
);
};
Expand Down

0 comments on commit 2417b79

Please sign in to comment.