[SIEM] Fix Timeline footer styling

x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx

@@ -201,7 +201,6 @@ const EventsViewerComponent: React.FC<Props> = ({
                         getUpdatedAt={getUpdatedAt}
                         hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
                         height={footerHeight}
-                        isEventViewer={true}
                         isLive={isLive}
                         isLoading={loading}
                         itemsCount={events.length}

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,11 +159,11 @@ const FlyoutPaneComponent: React.FC<Props> = ({
         onClose={onClose}
         size="l"
       >
-        <Resizable
+        <StyledResizable
           enable={{ left: true }}
           defaultSize={{
             width,
-            height: 'auto',
+            height: '100%',
           }}
           minWidth={minWidthPixels}
           maxWidth={`${maxWidthPercent}vw`}
@@ -163,10 +186,8 @@ const FlyoutPaneComponent: React.FC<Props> = ({
               usersViewing={usersViewing}
             />
           </EuiFlyoutHeader>
-          <EuiFlyoutBody data-test-subj="eui-flyout-body" className="timeline-flyout-body">
-            {children}
-          </EuiFlyoutBody>
-        </Resizable>
+          {children}
+        </StyledResizable>
       </EuiFlyout>
     </EuiFlyoutContainer>
   );

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;

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<BodyProps>(
     data,
     eventIdToNoteIds,
     getNotesByIds,
-    height,
     id,
     isEventViewer = false,
     isSelectAllChecked,
@@ -112,7 +110,7 @@ export const Body = React.memo<BodyProps>(
 
     return (
       <>
-        <TimelineBody data-test-subj="timeline-body" bodyHeight={height} ref={containerElementRef}>
+        <TimelineBody data-test-subj="timeline-body" ref={containerElementRef}>
           <EventsTable
             data-test-subj="events-table"
             // Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291

x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx

@@ -40,7 +40,6 @@ interface OwnProps {
   data: TimelineItem[];
   id: string;
   isEventViewer?: boolean;
-  height: number;
   sort: Sort;
   toggleColumn: (column: ColumnHeaderOptions) => void;
 }
@@ -57,7 +56,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
     columnHeaders,
     data,
     eventIdToNoteIds,
-    height,
     id,
     isEventViewer = false,
     isSelectAllChecked,
@@ -165,7 +163,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
         data={data}
         eventIdToNoteIds={eventIdToNoteIds}
         getNotesByIds={getNotesByIds}
-        height={height}
         id={id}
         isEventViewer={isEventViewer}
         isSelectAllChecked={isSelectAllChecked}
@@ -196,7 +193,6 @@ const StatefulBodyComponent = React.memo<StatefulBodyComponentProps>(
       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 &&

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 &&

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

x-pack/legacy/plugins/siem/public/components/timeline/styles.tsx

@@ -30,10 +30,10 @@ 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;
 
   &::-webkit-scrollbar {
     height: ${({ theme }) => theme.eui.euiScrollBar};