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

…1838)

## 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)

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}
       />

x-pack/plugins/security_solution/public/common/components/autocomplete/helpers.test.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import '../../../common/mock/match_media';
 import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks.ts';
 
 import {

x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx

@@ -12,6 +12,7 @@ import { ThemeProvider } from 'styled-components';
 
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { TestProviders } from '../../mock';
+import '../../mock/match_media';
 
 import { BarChartBaseComponent, BarChartComponent } from './barchart';
 import { ChartSeriesData } from './common';

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx

@@ -9,6 +9,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
+import '../../mock/match_media';
 import { TestProviders } from '../../mock';
 
 import { MIN_LEGEND_HEIGHT, DraggableLegend } from './draggable_legend';

x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx

@@ -9,6 +9,7 @@ import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
+import '../../mock/match_media';
 import { TestProviders } from '../../mock';
 
 import { DraggableLegendItem, LegendItem } from './draggable_legend_item';

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { DraggableStateSnapshot, DraggingStyle } from 'react-beautiful-dnd';
 
+import '../../mock/match_media';
 import { mockBrowserFields, mocksSource } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
 import { mockDataProviders } from '../../../timelines/components/timeline/data_providers/mock/mock_data_providers';

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 import { useWithSource } from '../../containers/source';
 import { mockBrowserFields } from '../../containers/source/mock';
+import '../../mock/match_media';
 import { useKibana } from '../../lib/kibana';
 import { TestProviders } from '../../mock';
 import { createKibanaCoreStartMock } from '../../mock/kibana_core';

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

@@ -8,6 +8,7 @@ import { shallow } from 'enzyme';
 import React from 'react';
 
 import { TestProviders } from '../../mock';
+import '../../mock/match_media';
 import { getEmptyString } from '../empty_value';
 import { useMountAppended } from '../../utils/use_mount_appended';
 

x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx

@@ -7,6 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
+import '../../mock/match_media';
 import { mockDetailItemData, mockDetailItemDataId } from '../../mock/mock_detail_item';
 import { TestProviders } from '../../mock/test_providers';
 
@@ -29,6 +30,7 @@ describe('EventDetails', () => {
           data={mockDetailItemData}
           id={mockDetailItemDataId}
           view="table-view"
+          onEventToggled={jest.fn()}
           onUpdateColumns={jest.fn()}
           onViewSelected={jest.fn()}
           timelineId="test"
@@ -50,6 +52,7 @@ describe('EventDetails', () => {
               data={mockDetailItemData}
               id={mockDetailItemDataId}
               view="table-view"
+              onEventToggled={jest.fn()}
               onUpdateColumns={jest.fn()}
               onViewSelected={jest.fn()}
               timelineId="test"
@@ -76,6 +79,7 @@ describe('EventDetails', () => {
             data={mockDetailItemData}
             id={mockDetailItemDataId}
             view="table-view"
+            onEventToggled={jest.fn()}
             onUpdateColumns={jest.fn()}
             onViewSelected={jest.fn()}
             timelineId="test"
@@ -88,5 +92,31 @@ describe('EventDetails', () => {
         wrapper.find('[data-test-subj="eventDetails"]').find('.euiTab-isSelected').first().text()
       ).toEqual('Table');
     });
+
+    test('it invokes `onEventToggled` when the collapse button is clicked', () => {
+      const onEventToggled = jest.fn();
+
+      const wrapper = mount(
+        <TestProviders>
+          <EventDetails
+            browserFields={mockBrowserFields}
+            columnHeaders={defaultHeaders}
+            data={mockDetailItemData}
+            id={mockDetailItemDataId}
+            view="table-view"
+            onEventToggled={onEventToggled}
+            onUpdateColumns={jest.fn()}
+            onViewSelected={jest.fn()}
+            timelineId="test"
+            toggleColumn={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      wrapper.find('[data-test-subj="collapse"]').first().simulate('click');
+      wrapper.update();
+
+      expect(onEventToggled).toHaveBeenCalled();
+    });
   });
 });