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] [Investigations][Timeline] - Fix table styling issues (#187911) (#188103)

Browse source 
# Backport

This will backport the following commits from `main` to `8.15`:
- [[Investigations][Timeline] - Fix table styling issues
(#187911)](https://github.com/elastic/kibana/pull/187911)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Michael
Olorunnisola","email":"michael.olorunnisola@elastic.co"},"sourceCommit":{"committedDate":"2024-07-11T12:44:48Z","message":"[Investigations][Timeline]
- Fix table styling issues (#187911)\n\n## Summary\r\n\r\nSummarize your
PR. If it involves visual changes include a screenshot
or\r\ngif.\r\n\r\nThis PR:\r\n1. Fixes the ellipsis of the row cells
when the row renderers are\r\nenabled\r\n2. Re-enables the row height
toggle being able to change the height of\r\nthe custom grid body
row\r\n3. Aligns the icons and row text to the top of the row, how the
default\r\ntable
behaves\r\n\r\n\r\n\r\n9c68cbdd-d288-43c7-9b2d-6a5f6dad7e6b","sha":"9cb7451f6b9b3cf058cbaaed8104c193920d1128","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:Threat
Hunting:Investigations","v8.15.0","v8.16.0"],"title":"[Investigations][Timeline]
- Fix table styling
issues","number":187911,"url":"https://github.com/elastic/kibana/pull/187911","mergeCommit":{"message":"[Investigations][Timeline]
- Fix table styling issues (#187911)\n\n## Summary\r\n\r\nSummarize your
PR. If it involves visual changes include a screenshot
or\r\ngif.\r\n\r\nThis PR:\r\n1. Fixes the ellipsis of the row cells
when the row renderers are\r\nenabled\r\n2. Re-enables the row height
toggle being able to change the height of\r\nthe custom grid body
row\r\n3. Aligns the icons and row text to the top of the row, how the
default\r\ntable
behaves\r\n\r\n\r\n\r\n9c68cbdd-d288-43c7-9b2d-6a5f6dad7e6b","sha":"9cb7451f6b9b3cf058cbaaed8104c193920d1128"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187911","number":187911,"mergeCommit":{"message":"[Investigations][Timeline]
- Fix table styling issues (#187911)\n\n## Summary\r\n\r\nSummarize your
PR. If it involves visual changes include a screenshot
or\r\ngif.\r\n\r\nThis PR:\r\n1. Fixes the ellipsis of the row cells
when the row renderers are\r\nenabled\r\n2. Re-enables the row height
toggle being able to change the height of\r\nthe custom grid body
row\r\n3. Aligns the icons and row text to the top of the row, how the
default\r\ntable
behaves\r\n\r\n\r\n\r\n9c68cbdd-d288-43c7-9b2d-6a5f6dad7e6b","sha":"9cb7451f6b9b3cf058cbaaed8104c193920d1128"}}]}]
BACKPORT-->

Co-authored-by: Michael Olorunnisola <michael.olorunnisola@elastic.co>
This commit is contained in:
Kibana Machine 2024-07-11 16:25:38 +02:00 • committed by GitHub
parent 7c7100626c
commit 4874e64253
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 13 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
View file

@ -2133,7 +2133,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
savedSearch: null,
isDataProviderVisible: false,
sampleSize: 500,
rowHeight: 3,
rowHeight: 1,
},
to: '2018-11-05T19:03:25.937Z',
notes: null,

2
x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
View file

@ -454,7 +454,7 @@ describe('alert actions', () => {
savedSearchId: null,
savedSearch: null,
isDataProviderVisible: false,
rowHeight: 3,
rowHeight: 1,
sampleSize: 500,
},
to: '2018-11-05T19:03:25.937Z',

38
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

@ -9,8 +9,8 @@ exports[`CustomTimelineDataGridBody should render exactly as snapshots 1`] = `
}
.c0 . euiDataGridRowCell--controlColumn {
height: 40px;
min-height: 40px;
height: auto;
min-height: 34px;
}
.c0 .udt--customRow {
@ -32,45 +32,17 @@ exports[`CustomTimelineDataGridBody should render exactly as snapshots 1`] = `
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
height: auto;
}
.c1 .euiDataGridRowCell,
.c1 .euiDataGridRowCell__content {
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
min-height: 40px;
min-height: 34px;
}
.c1 .euiDataGridRowCell .unifiedDataTable__rowControl,
.c1 .euiDataGridRowCell__content .unifiedDataTable__rowControl {
margin-top: 0;
}
.c1 .euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
padding: 0;
margin-top: -4px;
}
<div>

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

@ -25,7 +25,7 @@ export type CustomTimelineDataGridBodyProps = EuiDataGridCustomBodyProps & {
};
// THE DataGrid Row default is 34px, but we make ours 40 to account for our row actions
const DEFAULT_UDT_ROW_HEIGHT = 40;
const DEFAULT_UDT_ROW_HEIGHT = 34;
/**
*
@ -117,24 +117,14 @@ const CustomGridRowCellWrapper = styled.div.attrs<{
className: `rowCellWrapper ${props.className ?? ''}`,
role: 'row',
}))`
display: flex;
align-items: center;
height: ${(props: { $cssRowHeight: string }) => props.$cssRowHeight};
.euiDataGridRowCell,
.euiDataGridRowCell__content {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
min-height: ${DEFAULT_UDT_ROW_HEIGHT}px;
.unifiedDataTable__rowControl {
margin-top: 0;
margin-top: -4px;
}
}
.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
padding: 0;
}
`;
type CustomTimelineDataGridSingleRowProps = {
@ -176,7 +166,7 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
rowRenderers: enabledRowRenderers,
});
const cssRowHeight: string = calculateRowHeightInPixels(rowHeightMultiple);
const cssRowHeight: string = calculateRowHeightInPixels(rowHeightMultiple - 1);
/**
* removes the border between the actual row ( timelineEvent) and `TimelineEventDetail` row
* which renders the row-renderer, notes and notes editor

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

@ -393,10 +393,11 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
visibleRowData={visibleRowData}
setCustomGridBodyProps={setCustomGridBodyProps}
enabledRowRenderers={enabledRowRenderers}
rowHeight={rowHeight}
refetch={refetch}
/>
),
[tableRows, enabledRowRenderers, refetch]
[tableRows, enabledRowRenderers, rowHeight, refetch]
);
const cellContext: UnifiedTimelineDataGridCellContext = useMemo(() => {

2
x-pack/plugins/security_solution/public/timelines/store/defaults.ts
View file

@ -101,7 +101,7 @@ export const timelineDefaults: SubsetTimelineModel &
savedSearch: null,
isDataProviderVisible: false,
sampleSize: 500,
rowHeight: 3,
rowHeight: 1,
};
export const getTimelineManageDefaults = (id: string) => ({