[Security Solution] Full screen timeline, Collapse event (#71786)

## Full screen Timeline & Timeline-based views

- Adds a _Full screen_ mode to Timeline, and all Timeline-based views, including:
  - Detections
  - Detections > Rule details
  - Hosts > Events
  - Hosts > External alerts
  - Network > External alerts
  - Timeline
- Enter full screen from any Resolver
- Adds a `Collapse event` action for quickly collapsing an expanded Timeline event
- Hides the `Add to case action` in timeline-based Resolver views, so those actions are only enabled in Timeline (a `TODO`  from #70111)

### Full screen detections
![full-screen-detections](https://user-images.githubusercontent.com/4459398/87493332-d348f280-c609-11ea-9399-126d2259daa2.gif)

### Enter full screen from any Resolver
![full-screen-resolver](https://user-images.githubusercontent.com/4459398/87493348-de038780-c609-11ea-86a3-52ab24055e38.gif)

### Full screen Timeline
![full-screen-timeline](https://user-images.githubusercontent.com/4459398/87493394-f4114800-c609-11ea-8d62-4add291d937a.gif)

### Collapse event
![collapse-event](https://user-images.githubusercontent.com/4459398/87493408-fa9fbf80-c609-11ea-88c8-fa87d82d1eb1.gif)

### Sort tooltip
![sort-tooltip](https://user-images.githubusercontent.com/4459398/87493417-012e3700-c60a-11ea-9905-44e3b7cfe60f.gif)

Author: andrew-goldstein

x-pack/plugins/security_solution/common/constants.ts

@@ -32,6 +32,8 @@ export const DEFAULT_INTERVAL_PAUSE = true;
 export const DEFAULT_INTERVAL_TYPE = 'manual';
 export const DEFAULT_INTERVAL_VALUE = 300000; // ms
 export const DEFAULT_TIMEPICKER_QUICK_RANGES = 'timepicker:quickRanges';
+export const FILTERS_GLOBAL_HEIGHT = 109; // px
+export const FULL_SCREEN_TOGGLED_CLASS_NAME = 'fullScreenToggled';
 export const NO_ALERT_INDEX = 'no-alert-index-049FC71A-4C2C-446F-9901-37XMC5024C51';
 export const ENDPOINT_METADATA_INDEX = 'metrics-endpoint.metadata-*';
 

x-pack/plugins/security_solution/public/app/home/index.tsx

@@ -32,7 +32,7 @@ Main.displayName = 'Main';
 const usersViewing = ['elastic']; // TODO: get the users viewing this timeline from Elasticsearch (persistance)
 
 /** the global Kibana navigation at the top of every page */
-const globalHeaderHeightPx = 48;
+export const globalHeaderHeightPx = 48;
 
 const calculateFlyoutHeight = ({
   globalHeaderSize,

x-pack/plugins/security_solution/public/cases/components/all_cases/columns.test.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
+import '../../../common/mock/match_media';
 import { ExternalServiceColumn } from './columns';
 
 import { useGetCasesMockState } from '../../containers/mock';

x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx

@@ -7,6 +7,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment-timezone';
+
+import '../../../common/mock/match_media';
 import { AllCases } from '.';
 import { TestProviders } from '../../../common/mock';
 import { useGetCasesMockState } from '../../containers/mock';

x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx

@@ -5,6 +5,7 @@
  */
 import { mount } from 'enzyme';
 import React from 'react';
+import '../../../common/mock/match_media';
 import { AllCasesModal } from '.';
 import { TestProviders } from '../../../common/mock';
 

x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
+import '../../../common/mock/match_media';
 import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
 import { CaseComponent, CaseProps, CaseView } from '.';
 import { basicCase, basicCaseClosed, caseUserActions } from '../../containers/mock';

x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import { ReactWrapper, mount } from 'enzyme';
 import { EuiText } from '@elastic/eui';
 
+import '../../../common/mock/match_media';
 import { ConfigureCaseButton, ConfigureCaseButtonProps } from './button';
 import { TestProviders } from '../../../common/mock';
 import { searchURL } from './__mock__';

x-pack/plugins/security_solution/public/cases/components/use_push_to_service/index.test.tsx

@@ -6,6 +6,8 @@
 /* eslint-disable react/display-name */
 import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
+
+import '../../../common/mock/match_media';
 import { usePushToService, ReturnUsePushToService, UsePushToService } from '.';
 import { TestProviders } from '../../../common/mock';
 import { usePostPushToService } from '../../containers/use_post_push_to_service';

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -58,13 +58,15 @@ const defaultAlertsFilters: Filter[] = [
 interface Props {
   timelineId: TimelineIdLiteral;
   endDate: string;
+  eventsViewerBodyHeight?: number;
   startDate: string;
   pageFilters?: Filter[];
 }
 
 const AlertsTableComponent: React.FC<Props> = ({
   timelineId,
   endDate,
+  eventsViewerBodyHeight,
   startDate,
   pageFilters = [],
 }) => {
@@ -91,6 +93,7 @@ const AlertsTableComponent: React.FC<Props> = ({
       pageFilters={alertsFilter}
       defaultModel={alertsDefaultModel}
       end={endDate}
+      height={eventsViewerBodyHeight}
       id={timelineId}
       start={startDate}
     />

x-pack/plugins/security_solution/public/common/components/alerts_viewer/index.tsx

@@ -5,8 +5,18 @@
  */
 import React, { useEffect, useCallback, useMemo } from 'react';
 import numeral from '@elastic/numeral';
+import { useWindowSize } from 'react-use';
+
+import { globalHeaderHeightPx } from '../../../app/home';
+import { DEFAULT_NUMBER_FORMAT, FILTERS_GLOBAL_HEIGHT } from '../../../../common/constants';
+import { useFullScreen } from '../../containers/use_full_screen';
+import { EVENTS_VIEWER_HEADER_HEIGHT } from '../events_viewer/events_viewer';
+import {
+  getEventsViewerBodyHeight,
+  MIN_EVENTS_VIEWER_BODY_HEIGHT,
+} from '../../../timelines/components/timeline/body/helpers';
+import { footerHeight } from '../../../timelines/components/timeline/footer';
 
-import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
 import { AlertsComponentsProps } from './types';
 import { AlertsTable } from './alerts_table';
 import * as i18n from './translations';
@@ -35,6 +45,8 @@ export const AlertsView = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
+  const { height: windowHeight } = useWindowSize();
+  const { globalFullScreen } = useFullScreen();
   const alertsHistogramConfigs: MatrixHisrogramConfigs = useMemo(
     () => ({
       ...histogramConfigs,
@@ -52,19 +64,32 @@ export const AlertsView = ({
 
   return (
     <>
-      <MatrixHistogramContainer
-        endDate={endDate}
-        filterQuery={filterQuery}
-        id={ID}
-        setQuery={setQuery}
-        sourceId="default"
-        startDate={startDate}
-        type={type}
-        {...alertsHistogramConfigs}
-      />
+      {!globalFullScreen && (
+        <MatrixHistogramContainer
+          endDate={endDate}
+          filterQuery={filterQuery}
+          id={ID}
+          setQuery={setQuery}
+          sourceId="default"
+          startDate={startDate}
+          type={type}
+          {...alertsHistogramConfigs}
+        />
+      )}
       <AlertsTable
         timelineId={timelineId}
         endDate={endDate}
+        eventsViewerBodyHeight={
+          globalFullScreen
+            ? getEventsViewerBodyHeight({
+                footerHeight,
+                headerHeight: EVENTS_VIEWER_HEADER_HEIGHT,
+                kibanaChromeHeight: globalHeaderHeightPx,
+                otherContentHeight: FILTERS_GLOBAL_HEIGHT,
+                windowHeight,
+              })
+            : MIN_EVENTS_VIEWER_BODY_HEIGHT
+        }
         startDate={startDate}
         pageFilters={pageFilters}
       />