From 47e1d664f9553d4b8c4ee11acef38eee2c6cf457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Fri, 6 Mar 2020 11:26:59 +0100 Subject: [PATCH 01/26] [SIEM] Timeline foot styles --- .../components/events_viewer/events_viewer.tsx | 1 - .../siem/public/components/flyout/pane/index.tsx | 3 ++- .../plugins/siem/public/components/page/index.tsx | 1 + .../public/components/timeline/footer/index.tsx | 8 ++++---- .../siem/public/components/timeline/helpers.tsx | 5 +---- .../siem/public/components/timeline/styles.tsx | 3 ++- .../siem/public/components/timeline/timeline.tsx | 15 ++++++++------- 7 files changed, 18 insertions(+), 18 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx index a913186d9ad3b..a6cf4bc53d3a0 100644 --- a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx +++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx @@ -201,7 +201,6 @@ const EventsViewerComponent: React.FC = ({ getUpdatedAt={getUpdatedAt} hasNextPage={getOr(false, 'hasNextPage', pageInfo)!} height={footerHeight} - isEventViewer={true} isLive={isLive} isLoading={loading} itemsCount={events.length} diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx index fb977417ffbbf..cdcdc7397838d 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx @@ -49,6 +49,7 @@ const EuiFlyoutContainer = styled.div<{ headerHeight: number }>` .timeline-flyout-body { overflow-y: hidden; padding: 0; + height: calc(100% - 60px); .euiFlyoutBody__overflow { padding: 0; } @@ -140,7 +141,7 @@ const FlyoutPaneComponent: React.FC = ({ enable={{ left: true }} defaultSize={{ width, - height: 'auto', + height: '100%', }} minWidth={minWidthPixels} maxWidth={`${maxWidthPercent}vw`} diff --git a/x-pack/legacy/plugins/siem/public/components/page/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/index.tsx index 781155c3ddc38..15e963aad7ba2 100644 --- a/x-pack/legacy/plugins/siem/public/components/page/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/page/index.tsx @@ -107,6 +107,7 @@ export const PageHeader = styled.div` PageHeader.displayName = 'PageHeader'; export const FooterContainer = styled.div` + flex: 0; bottom: 0; color: #666; left: 0; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx index 1fcc4382c1798..47ea93de78238 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx @@ -38,13 +38,16 @@ const FixedWidthLastUpdated = styled.div<{ compact: boolean }>` FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated'; const FooterContainer = styled(EuiFlexGroup)<{ height: number }>` - height: ${({ height }) => height}px; + /* height: ${({ height }) => height}px; */ + flex: 0; + height: 40px; `; FooterContainer.displayName = 'FooterContainer'; const FooterFlexGroup = styled(EuiFlexGroup)` height: 35px; + padding-bottom: 5px; width: 100%; `; @@ -177,7 +180,6 @@ interface FooterProps { getUpdatedAt: () => number; hasNextPage: boolean; height: number; - isEventViewer?: boolean; isLive: boolean; isLoading: boolean; itemsCount: number; @@ -196,7 +198,6 @@ export const FooterComponent = ({ getUpdatedAt, hasNextPage, height, - isEventViewer, isLive, isLoading, itemsCount, @@ -345,7 +346,6 @@ export const Footer = React.memo( prevProps.compact === nextProps.compact && prevProps.hasNextPage === nextProps.hasNextPage && prevProps.height === nextProps.height && - prevProps.isEventViewer === nextProps.isEventViewer && prevProps.isLive === nextProps.isLive && prevProps.isLoading === nextProps.isLoading && prevProps.itemsCount === nextProps.itemsCount && diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/helpers.tsx index 611d08e61be22..641619915deb0 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/helpers.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/helpers.tsx @@ -156,8 +156,6 @@ export const combineQueries = ({ interface CalculateBodyHeightParams { /** The the height of the flyout container, which is typically the entire "page", not including the standard Kibana navigation */ flyoutHeight?: number; - /** The flyout header typically contains a title and a close button */ - flyoutHeaderHeight?: number; /** All non-body timeline content (i.e. the providers drag and drop area, and the column headers) */ timelineHeaderHeight?: number; /** Footer content that appears below the body (i.e. paging controls) */ @@ -166,11 +164,10 @@ interface CalculateBodyHeightParams { export const calculateBodyHeight = ({ flyoutHeight = 0, - flyoutHeaderHeight = 0, timelineHeaderHeight = 0, timelineFooterHeight = 0, }: CalculateBodyHeightParams): number => - flyoutHeight - (flyoutHeaderHeight + timelineHeaderHeight + timelineFooterHeight); + flyoutHeight - (timelineHeaderHeight + timelineFooterHeight); /** * The CSS class name of a "stateful event", which appears in both diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx index d5e5d15eb8ad2..00d3a7a29efc2 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx @@ -31,9 +31,10 @@ export const TimelineBodyGlobalStyle = createGlobalStyle` export const TimelineBody = styled.div.attrs(({ className = '' }) => ({ className: `siemTimeline__body ${className}`, }))<{ bodyHeight: number }>` - height: ${({ bodyHeight }) => `${bodyHeight}px`}; + /* height: ${({ bodyHeight }) => `${bodyHeight}px`}; */ overflow: auto; scrollbar-width: thin; + flex: 1; &::-webkit-scrollbar { height: ${({ theme }) => theme.eui.euiScrollBar}; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx index 58bbbef328ddf..dace44286ba19 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx @@ -48,6 +48,7 @@ const TimelineContainer = styled(EuiFlexGroup)` padding: 0 10px 0 12px; user-select: none; width: 100%; + height: 100%; `; TimelineContainer.displayName = 'TimelineContainer'; @@ -94,7 +95,6 @@ export const TimelineComponent: React.FC = ({ end, eventType, filters, - flyoutHeaderHeight, flyoutHeight, id, indexPattern, @@ -135,6 +135,12 @@ export const TimelineComponent: React.FC = ({ }); const columnsHeader = isEmpty(columns) ? defaultHeaders : columns; + const bodyHeight = calculateBodyHeight({ + flyoutHeight, + timelineHeaderHeight, + timelineFooterHeight: footerHeight, + }); + return ( = ({ browserFields={browserFields} data={events} id={id} - height={calculateBodyHeight({ - flyoutHeight, - flyoutHeaderHeight, - timelineHeaderHeight, - timelineFooterHeight: footerHeight, - })} + height={bodyHeight} sort={sort} toggleColumn={toggleColumn} /> From 9112822e743179100c50282544c18499fa6827c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= Date: Fri, 6 Mar 2020 20:57:11 +0100 Subject: [PATCH 02/26] use euiflyoutfooter --- .../public/components/flyout/pane/index.tsx | 35 ++++- .../public/components/timeline/body/index.tsx | 4 +- .../timeline/body/stateful_body.tsx | 4 - .../public/components/timeline/styles.tsx | 3 +- .../public/components/timeline/timeline.tsx | 134 +++++++----------- 5 files changed, 81 insertions(+), 99 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx index e56464e6011c4..154dbaebeb5f9 100644 --- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiButtonIcon, EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiToolTip } from '@elastic/eui'; +import { EuiButtonIcon, EuiFlyout, EuiFlyoutHeader, EuiToolTip } from '@elastic/eui'; import React, { useCallback, useState } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import styled from 'styled-components'; @@ -46,13 +46,31 @@ const EuiFlyoutContainer = styled.div<{ headerHeight: number }>` overflow: hidden; padding: 5px 0 0 10px; } + .timeline-flyout-body { overflow-y: hidden; - padding: 0; + padding: 0 10px 0 12px; + + .euiFlyoutBody__overflow { + overflow: hidden; + } + .euiFlyoutBody__overflowContent { padding: 0; + height: 100%; + display: flex; + flex-direction: column; + + > div:first-child { + flex: 0; + } } } + + .timeline-flyout-footer { + background: none; + padding: 0 10px 0 12px; + } `; const FlyoutHeaderContainer = styled.div` @@ -68,6 +86,11 @@ const WrappedCloseButton = styled.div` margin-right: 5px; `; +const StyledResizable = styled(Resizable)` + display: flex; + flex-direction: column; +`; + const FlyoutHeaderWithCloseButtonComponent: React.FC<{ onClose: () => void; timelineId: string; @@ -136,7 +159,7 @@ const FlyoutPaneComponent: React.FC = ({ onClose={onClose} size="l" > - = ({ usersViewing={usersViewing} /> - - {children} - - + {children} + ); diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx index ea80d3351408a..e857774d6bb83 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/index.tsx @@ -38,7 +38,6 @@ export interface BodyProps { columnRenderers: ColumnRenderer[]; data: TimelineItem[]; getNotesByIds: (noteIds: string[]) => Note[]; - height: number; id: string; isEventViewer?: boolean; isSelectAllChecked: boolean; @@ -72,7 +71,6 @@ export const Body = React.memo( data, eventIdToNoteIds, getNotesByIds, - height, id, isEventViewer = false, isSelectAllChecked, @@ -112,7 +110,7 @@ export const Body = React.memo( return ( <> - + void; } @@ -57,7 +56,6 @@ const StatefulBodyComponent = React.memo( columnHeaders, data, eventIdToNoteIds, - height, id, isEventViewer = false, isSelectAllChecked, @@ -165,7 +163,6 @@ const StatefulBodyComponent = React.memo( data={data} eventIdToNoteIds={eventIdToNoteIds} getNotesByIds={getNotesByIds} - height={height} id={id} isEventViewer={isEventViewer} isSelectAllChecked={isSelectAllChecked} @@ -196,7 +193,6 @@ const StatefulBodyComponent = React.memo( prevProps.data === nextProps.data && prevProps.eventIdToNoteIds === nextProps.eventIdToNoteIds && prevProps.notesById === nextProps.notesById && - prevProps.height === nextProps.height && prevProps.id === nextProps.id && prevProps.isEventViewer === nextProps.isEventViewer && prevProps.isSelectAllChecked === nextProps.isSelectAllChecked && diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx index 00d3a7a29efc2..57013b8cce693 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx @@ -30,8 +30,7 @@ export const TimelineBodyGlobalStyle = createGlobalStyle` export const TimelineBody = styled.div.attrs(({ className = '' }) => ({ className: `siemTimeline__body ${className}`, -}))<{ bodyHeight: number }>` - /* height: ${({ bodyHeight }) => `${bodyHeight}px`}; */ +}))` overflow: auto; scrollbar-width: thin; flex: 1; diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx index dace44286ba19..aa07d267405f4 100644 --- a/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx +++ b/x-pack/legacy/plugins/siem/public/components/timeline/timeline.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiFlexGroup } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui'; import { getOr, isEmpty } from 'lodash/fp'; import React from 'react'; import styled from 'styled-components'; @@ -31,7 +31,7 @@ import { import { TimelineKqlFetch } from './fetch_kql_timeline'; import { Footer, footerHeight } from './footer'; import { TimelineHeader } from './header'; -import { calculateBodyHeight, combineQueries } from './helpers'; +import { combineQueries } from './helpers'; import { TimelineRefetch } from './refetch_timeline'; import { ManageTimelineContext } from './timeline_context'; import { esQuery, Filter, IIndexPattern } from '../../../../../../../src/plugins/data/public'; @@ -42,17 +42,6 @@ const WrappedByAutoSizer = styled.div` WrappedByAutoSizer.displayName = 'WrappedByAutoSizer'; -const TimelineContainer = styled(EuiFlexGroup)` - min-height: 500px; - overflow: hidden; - padding: 0 10px 0 12px; - user-select: none; - width: 100%; - height: 100%; -`; - -TimelineContainer.displayName = 'TimelineContainer'; - export const isCompactFooter = (width: number): boolean => width < 600; interface Props { @@ -118,9 +107,7 @@ export const TimelineComponent: React.FC = ({ sort, toggleColumn, }) => { - const { ref: measureRef, width = 0, height: timelineHeaderHeight = 0 } = useResizeObserver< - HTMLDivElement - >({}); + const { ref: measureRef, width = 0 } = useResizeObserver({}); const kibana = useKibana(); const combinedQueries = combineQueries({ config: esQuery.getEsQueryConfig(kibana.services.uiSettings), @@ -135,77 +122,58 @@ export const TimelineComponent: React.FC = ({ }); const columnsHeader = isEmpty(columns) ? defaultHeaders : columns; - const bodyHeight = calculateBodyHeight({ - flyoutHeight, - timelineHeaderHeight, - timelineFooterHeight: footerHeight, - }); - return ( - - }> - - + <> - {combinedQueries != null ? ( - c.id)} - sourceId="default" - limit={itemsPerPage} - filterQuery={combinedQueries.filterQuery} - sortField={{ - sortFieldId: sort.columnId, - direction: sort.sortDirection as Direction, - }} - > - {({ - events, - inspect, - loading, - totalCount, - pageInfo, - loadMore, - getUpdatedAt, - refetch, - }) => ( - - + c.id)} + sourceId="default" + limit={itemsPerPage} + filterQuery={combinedQueries?.filterQuery} + sortField={{ + sortFieldId: sort.columnId, + direction: sort.sortDirection as Direction, + }} + > + {({ events, inspect, loading, totalCount, pageInfo, loadMore, getUpdatedAt, refetch }) => ( + + + + }> + + + +