github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.15] [Security Solution] Fix - Unified Timeline Style fixes (#187937) (#188328)

Browse source 
# Backport

This will backport the following commits from `main` to `8.15`:
- [[Security Solution] Fix - Unified Timeline Style fixes
(#187937)](https://github.com/elastic/kibana/pull/187937)

<!--- Backport version: 8.9.8 -->

### 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":"2024-07-11T10:21:56Z","message":"[Security
Solution] Fix - Unified Timeline Style fixes (#187937)\n\n##
Summary\r\n\r\n## Unified Timeline\r\n\r\n### Before
\r\n![issue_unified_timeline\r\nmov](d60634b8-3f54-4aab-8264-7d20e269077d)\r\n\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](aa5eb6eb-511b-421a-abb4-fed7e5c93cd1)\r\n\r\n##
Old Timeline\r\n\r\n###
Before\r\n\r\n![issue_old_timeline\r\nmov](9719af8d-9485-4673-a9b7-dcc1028e8a66)\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](1f9b2c76-2dc5-4de4-b1f5-a09fdada550c)\r\n\r\n##
Row Renderers\r\n\r\n###
Before\r\n\r\n![grafik](9ddf057c-2a04-4f7e-9ba7-8940683e059d)\r\n\r\n###
After\r\n\r\n![grafik](c6628a7c-f07e-4a04-843c-7a7e220243dc)\r\n\r\n##
Stripes patterns in row renderer\r\n\r\nNotice the color changes to grow
for the same row when `Row Renderer` is\r\nswitched.\r\n\r\n###
Before\r\n\r\n![styles_row_renderer_switch_stripes_fixed\r\nmov](0d356771-1562-42aa-8256-de29c6879cd4)\r\n\r\n\r\n###
After\r\n\r\n![styles_row_renderer_switch_stripes\r\nmov](95d32feb-9a1f-40f0-9574-db2770980a05)","sha":"092e57408f560be1b4bfdfe7d50ffbc9abe25953","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:skip","Feature:Timeline","Team:Threat
Hunting:Investigations","v8.15.0","v8.16.0"],"number":187937,"url":"https://github.com/elastic/kibana/pull/187937","mergeCommit":{"message":"[Security
Solution] Fix - Unified Timeline Style fixes (#187937)\n\n##
Summary\r\n\r\n## Unified Timeline\r\n\r\n### Before
\r\n![issue_unified_timeline\r\nmov](d60634b8-3f54-4aab-8264-7d20e269077d)\r\n\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](aa5eb6eb-511b-421a-abb4-fed7e5c93cd1)\r\n\r\n##
Old Timeline\r\n\r\n###
Before\r\n\r\n![issue_old_timeline\r\nmov](9719af8d-9485-4673-a9b7-dcc1028e8a66)\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](1f9b2c76-2dc5-4de4-b1f5-a09fdada550c)\r\n\r\n##
Row Renderers\r\n\r\n###
Before\r\n\r\n![grafik](9ddf057c-2a04-4f7e-9ba7-8940683e059d)\r\n\r\n###
After\r\n\r\n![grafik](c6628a7c-f07e-4a04-843c-7a7e220243dc)\r\n\r\n##
Stripes patterns in row renderer\r\n\r\nNotice the color changes to grow
for the same row when `Row Renderer` is\r\nswitched.\r\n\r\n###
Before\r\n\r\n![styles_row_renderer_switch_stripes_fixed\r\nmov](0d356771-1562-42aa-8256-de29c6879cd4)\r\n\r\n\r\n###
After\r\n\r\n![styles_row_renderer_switch_stripes\r\nmov](95d32feb-9a1f-40f0-9574-db2770980a05)","sha":"092e57408f560be1b4bfdfe7d50ffbc9abe25953"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187937","number":187937,"mergeCommit":{"message":"[Security
Solution] Fix - Unified Timeline Style fixes (#187937)\n\n##
Summary\r\n\r\n## Unified Timeline\r\n\r\n### Before
\r\n![issue_unified_timeline\r\nmov](d60634b8-3f54-4aab-8264-7d20e269077d)\r\n\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](aa5eb6eb-511b-421a-abb4-fed7e5c93cd1)\r\n\r\n##
Old Timeline\r\n\r\n###
Before\r\n\r\n![issue_old_timeline\r\nmov](9719af8d-9485-4673-a9b7-dcc1028e8a66)\r\n\r\n###
After\r\n\r\n![Styles_old_timeline\r\nmov](1f9b2c76-2dc5-4de4-b1f5-a09fdada550c)\r\n\r\n##
Row Renderers\r\n\r\n###
Before\r\n\r\n![grafik](9ddf057c-2a04-4f7e-9ba7-8940683e059d)\r\n\r\n###
After\r\n\r\n![grafik](c6628a7c-f07e-4a04-843c-7a7e220243dc)\r\n\r\n##
Stripes patterns in row renderer\r\n\r\nNotice the color changes to grow
for the same row when `Row Renderer` is\r\nswitched.\r\n\r\n###
Before\r\n\r\n![styles_row_renderer_switch_stripes_fixed\r\nmov](0d356771-1562-42aa-8256-de29c6879cd4)\r\n\r\n\r\n###
After\r\n\r\n![styles_row_renderer_switch_stripes\r\nmov](95d32feb-9a1f-40f0-9574-db2770980a05)","sha":"092e57408f560be1b4bfdfe7d50ffbc9abe25953"}}]}]
BACKPORT-->
This commit is contained in:
Jatin Kathuria 2024-07-15 20:00:57 +02:00 • committed by GitHub
parent b29d62eb57
commit 1fadaaf8eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

24
x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx
View file

@ -6,7 +6,13 @@
*/
import { noop } from 'lodash/fp';
import { EuiFocusTrap, EuiOutsideClickDetector, EuiScreenReaderOnly } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFocusTrap,
EuiOutsideClickDetector,
EuiScreenReaderOnly,
EuiFlexItem,
} from '@elastic/eui';
import React, { useMemo } from 'react';
import {
@ -73,13 +79,15 @@ export const StatefulRowRenderer = ({
<EuiScreenReaderOnly data-test-subj="eventRendererScreenReaderOnly">
<p>{i18n.YOU_ARE_IN_AN_EVENT_RENDERER(ariaRowindex)}</p>
</EuiScreenReaderOnly>
<div onKeyDown={onKeyDown}>
{rowRenderer.renderRow({
data: event.ecs,
isDraggable: true,
scopeId: timelineId,
})}
</div>
<EuiFlexGroup direction="column" onKeyDown={onKeyDown}>
<EuiFlexItem grow={true}>
{rowRenderer.renderRow({
data: event.ecs,
isDraggable: true,
scopeId: timelineId,
})}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFocusTrap>
</EuiOutsideClickDetector>
</div>

11
x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
View file

@ -9,7 +9,7 @@ import type { ComponentProps, ReactElement } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
import { RootDragDropProvider } from '@kbn/dom-drag-drop';
import { isEmpty } from 'lodash';
import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
import { StyledTableFlexGroup, StyledUnifiedTableFlexItem } from '../unified_components/styles';
import { UnifiedTimeline } from '../unified_components';
import { defaultUdtHeaders } from '../unified_components/default_headers';
import type { PaginationInputPaginated, TimelineItem } from '../../../../../common/search_strategy';
@ -65,8 +65,11 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
return (
<StyledTableFlexGroup direction="column" gutterSize="s">
<StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
<StyledTableFlexItem className="unifiedTimelineBody" data-test-subj="unifiedTimelineBody">
<StyledUnifiedTableFlexItem grow={false}>{header}</StyledUnifiedTableFlexItem>
<StyledUnifiedTableFlexItem
className="unifiedTimelineBody"
data-test-subj="unifiedTimelineBody"
>
<RootDragDropProvider>
<UnifiedTimeline
columns={columnsHeader}
@ -91,7 +94,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
leadingControlColumns={leadingControlColumns}
/>
</RootDragDropProvider>
</StyledTableFlexItem>
</StyledUnifiedTableFlexItem>
</StyledTableFlexGroup>
);
};

59
x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx
View file

@ -285,31 +285,29 @@ export const EqlTabContentComponent: React.FC<Props> = ({
</InPortal>
{NotesFlyoutMemo}
<FullWidthFlexGroup>
<ScrollableFlexItem grow={2}>
<UnifiedTimelineBody
header={unifiedHeader}
columns={augmentedColumnHeaders}
isSortEnabled={false}
rowRenderers={rowRenderers}
timelineId={timelineId}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
sort={TIMELINE_NO_SORTING}
events={events}
refetch={refetch}
dataLoadingState={dataLoadingState}
totalCount={isBlankTimeline ? 0 : totalCount}
onEventClosed={onEventClosed}
expandedDetail={expandedDetail}
showExpandedDetails={showExpandedDetails}
onChangePage={loadPage}
activeTab={activeTab}
updatedAt={refreshedAt}
isTextBasedQuery={false}
pageInfo={pageInfo}
leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
/>
</ScrollableFlexItem>
<UnifiedTimelineBody
header={unifiedHeader}
columns={augmentedColumnHeaders}
isSortEnabled={false}
rowRenderers={rowRenderers}
timelineId={timelineId}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
sort={TIMELINE_NO_SORTING}
events={events}
refetch={refetch}
dataLoadingState={dataLoadingState}
totalCount={isBlankTimeline ? 0 : totalCount}
onEventClosed={onEventClosed}
expandedDetail={expandedDetail}
showExpandedDetails={showExpandedDetails}
onChangePage={loadPage}
activeTab={activeTab}
updatedAt={refreshedAt}
isTextBasedQuery={false}
pageInfo={pageInfo}
leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
/>
</FullWidthFlexGroup>
</>
) : (
@ -325,14 +323,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
loading={isQueryLoading}
refetch={refetch}
/>
<FullWidthFlexGroup>
<ScrollableFlexItem grow={2}>
<EqlTabHeader
activeTab={activeTab}
setTimelineFullScreen={setTimelineFullScreen}
timelineFullScreen={timelineFullScreen}
timelineId={timelineId}
/>
<FullWidthFlexGroup gutterSize="s" direction="column">
<ScrollableFlexItem grow={false}>{unifiedHeader}</ScrollableFlexItem>
<ScrollableFlexItem grow={true}>
<EventDetailsWidthProvider>
<StyledEuiFlyoutBody
data-test-subj={`${TimelineTabs.eql}-tab-flyout-body`}

1
x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/shared/layout.tsx
View file

@ -16,7 +16,6 @@ import {
import styled from 'styled-components';
export const TabHeaderContainer = styled.div`
margin-top: ${(props) => props.theme.eui.euiSizeS};
width: 100%;
`;

4
x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/__snapshots__/custom_timeline_data_grid_body.test.tsx.snap generated
View file

@ -47,7 +47,7 @@ exports[`CustomTimelineDataGridBody should render exactly as snapshots 1`] = `
<div>
<div
class="c0 euiDataGridRow--striped euiDataGridRow euiDataGridRow--striped"
class="c0 euiDataGridRow "
role="row"
>
<div
@ -69,7 +69,7 @@ exports[`CustomTimelineDataGridBody should render exactly as snapshots 1`] = `
</div>
</div>
<div
class="c0 euiDataGridRow "
class="c0 euiDataGridRow--striped euiDataGridRow euiDataGridRow--striped"
role="row"
>
<div

2
x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/custom_timeline_data_grid_body.tsx
View file

@ -185,7 +185,7 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
return (
<CustomGridRow
className={`${rowIndex % 2 === 0 ? 'euiDataGridRow--striped' : ''}`}
className={`${rowIndex % 2 !== 0 ? 'euiDataGridRow--striped' : ''}`}
$cssRowHeight={cssRowHeight}
key={rowIndex}
>

2
x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
View file

@ -22,7 +22,7 @@ export const StyledTableFlexGroup = styled(EuiFlexGroup).attrs(({ className = ''
}
`;
export const StyledTableFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
export const StyledUnifiedTableFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
className: `${className}`,
}))`
${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}