review II + bug fixes

elastic · Sep 11, 2019 · 9f375b5 · 9f375b5
1 parent afad526
commit 9f375b5
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 196 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
@@ -16,7 +16,7 @@ import { OnUpdateColumns } from '../timeline/events';
 import { EventFieldsBrowser } from './event_fields_browser';
 import { JsonView } from './json_view';
 import * as i18n from './translations';
-import { TimelineWidthContext } from '../timeline/timeline_context';
+import { useTimelineWidthContext } from '../timeline/timeline_context';
 
 export type View = 'table-view' | 'json-view';
 
@@ -51,7 +51,7 @@ export const EventDetails = React.memo<Props>(
     timelineId,
     toggleColumn,
   }) => {
-    const width = useContext(TimelineWidthContext);
+    const width = useTimelineWidthContext();
     const tabs: EuiTabbedContentTab[] = [
       {
         id: 'table-view',

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
@@ -23,9 +23,8 @@ import { DataProvider } from '../timeline/data_providers/data_provider';
 import { OnChangeItemsPerPage } from '../timeline/events';
 import { Footer, footerHeight } from '../timeline/footer';
 import { combineQueries } from '../timeline/helpers';
-import { TimelineRefetch } from '../timeline/refetch_timeline';
 import { isCompactFooter } from '../timeline/timeline';
-import { TimelineContext, TimelineWidthContext } from '../timeline/timeline_context';
+import { ManageTimelineContext } from '../timeline/timeline_context';
 
 import { EventsViewerHeader } from './events_viewer_header';
 
@@ -115,7 +114,6 @@ export const EventsViewer = React.memo<Props>(
                   style={{ height: '0px', width: '100%' }}
                 />
               </WrappedByAutoSizer>
-
               {combinedQueries != null ? (
                 <TimelineQuery
                   fields={columnsHeader.map(c => c.id)}
@@ -138,53 +136,44 @@ export const EventsViewer = React.memo<Props>(
                     refetch,
                     totalCount = 0,
                   }) => (
-                    <TimelineRefetch
-                      loading={loading}
-                      id={id}
-                      inputId="global"
-                      inspect={inspect}
-                      indexPattern={indexPattern}
-                      refetch={refetch}
-                    >
+                    <>
                       <EventsViewerHeader
                         id={id}
                         showInspect={showInspect}
                         totalCount={totalCount}
                       />
 
                       <div data-test-subj="events-container" style={{ width: `${width}px` }}>
-                        <TimelineContext.Provider value={loading}>
-                          <TimelineWidthContext.Provider value={width}>
-                            <StatefulBody
-                              browserFields={browserFields}
-                              data={events}
-                              id={id}
-                              isEventViewer={true}
-                              height={height}
-                              sort={sort}
-                              toggleColumn={toggleColumn}
-                            />
-                            <Footer
-                              compact={isCompactFooter(width)}
-                              getUpdatedAt={getUpdatedAt}
-                              hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
-                              height={footerHeight}
-                              isEventViewer={true}
-                              isLive={isLive}
-                              isLoading={loading}
-                              itemsCount={events.length}
-                              itemsPerPage={itemsPerPage}
-                              itemsPerPageOptions={itemsPerPageOptions}
-                              onChangeItemsPerPage={onChangeItemsPerPage}
-                              onLoadMore={loadMore}
-                              nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
-                              serverSideEventCount={totalCount}
-                              tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
-                            />
-                          </TimelineWidthContext.Provider>
-                        </TimelineContext.Provider>
+                        <ManageTimelineContext loading={loading} width={width}>
+                          <StatefulBody
+                            browserFields={browserFields}
+                            data={events}
+                            id={id}
+                            isEventViewer={true}
+                            height={height}
+                            sort={sort}
+                            toggleColumn={toggleColumn}
+                          />
+                          <Footer
+                            compact={isCompactFooter(width)}
+                            getUpdatedAt={getUpdatedAt}
+                            hasNextPage={getOr(false, 'hasNextPage', pageInfo)!}
+                            height={footerHeight}
+                            isEventViewer={true}
+                            isLive={isLive}
+                            isLoading={loading}
+                            itemsCount={events.length}
+                            itemsPerPage={itemsPerPage}
+                            itemsPerPageOptions={itemsPerPageOptions}
+                            onChangeItemsPerPage={onChangeItemsPerPage}
+                            onLoadMore={loadMore}
+                            nextCursor={getOr(null, 'endCursor.value', pageInfo)!}
+                            serverSideEventCount={totalCount}
+                            tieBreaker={getOr(null, 'endCursor.tiebreaker', pageInfo)}
+                          />
+                        </ManageTimelineContext>
                       </div>
-                    </TimelineRefetch>
+                    </>
                   )}
                 </TimelineQuery>
               ) : null}

diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_cards/index.tsx
@@ -8,12 +8,11 @@ import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { useContext } from 'react';
 import { Note } from '../../../lib/note';
 import { AddNote } from '../add_note';
 import { AssociateNote, GetNewNoteId, UpdateNote } from '../helpers';
 import { NoteCard } from '../note_card';
-import { TimelineWidthContext } from '../../timeline/timeline_context';
+import { useTimelineWidthContext } from '../../timeline/timeline_context';
 
 const AddNoteContainer = styled.div``;
 
@@ -30,7 +29,7 @@ interface NoteCardsCompProps {
 }
 
 const NoteCardsComp = React.memo<NoteCardsCompProps>(({ children }) => {
-  const width = useContext(TimelineWidthContext);
+  const width = useTimelineWidthContext();
 
   // Passing the styles directly to the component because the width is
   // being calculated and is recommended by Styled Components for performance

diff --git a/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx b/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.tsx
@@ -30,6 +30,7 @@ import {
   toStrSelector,
   isLoadingSelector,
   queriesSelector,
+  kqlQuerySelector,
 } from './selectors';
 import { InputsRange, Policy } from '../../store/inputs/model';
 
@@ -188,11 +189,8 @@ export const SuperDatePickerComponent = class extends Component<
     }
   };
 
-  private refetchQuery = (queries: inputsModel.GlobalQuery[]) => {
-    queries
-      .filter(q => q.id !== 'kql' && q.refetch != null)
-      .map(q => q.refetch as inputsModel.Refetch)
-      .forEach(refetch => refetch());
+  private refetchQuery = (queries: inputsModel.GlobalGraphqlQuery[]) => {
+    queries.forEach(q => q.refetch && (q.refetch as inputsModel.Refetch)());
   };
 
   private onTimeChange = ({ start, end, isQuickSelection, isInvalid }: OnTimeChangeProps) => {
@@ -298,6 +296,7 @@ export const makeMapStateToProps = () => {
   const getToStrSelector = toStrSelector();
   const getIsLoadingSelector = isLoadingSelector();
   const getQueriesSelector = queriesSelector();
+  const getKqlQuerySelector = kqlQuerySelector();
   return (state: State, { id }: OwnProps) => {
     const inputsRange: InputsRange = getOr({}, `inputs.${id}`, state);
     return {
@@ -309,8 +308,8 @@ export const makeMapStateToProps = () => {
       fromStr: getFromStrSelector(inputsRange),
       toStr: getToStrSelector(inputsRange),
       isLoading: getIsLoadingSelector(inputsRange),
-      queries: getQueriesSelector(inputsRange).filter(q => q.id !== 'kql'),
-      kqlQuery: getQueriesSelector(inputsRange).find(q => q.id === 'kql'),
+      queries: getQueriesSelector(inputsRange),
+      kqlQuery: getKqlQuerySelector(inputsRange),
     };
   };
 };

diff --git a/x-pack/legacy/plugins/siem/public/components/super_date_picker/selectors.ts b/x-pack/legacy/plugins/siem/public/components/super_date_picker/selectors.ts
@@ -64,5 +64,11 @@ export const isLoadingSelector = () =>
 export const queriesSelector = () =>
   createSelector(
     getQuery,
-    query => query
+    query => query.filter(q => q.id !== 'kql')
+  );
+
+export const kqlQuerySelector = () =>
+  createSelector(
+    getQuery,
+    query => query.find(q => q.id === 'kql')
   );
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
@@ -9,14 +9,13 @@ import * as React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
-import { useContext } from 'react';
 import { OnColumnRemoved } from '../../../events';
 import { Sort } from '../../sort';
 import { SortIndicator } from '../../sort/sort_indicator';
 import { ColumnHeader } from '../column_header';
 import { getSortDirection } from '../header/helpers';
 import * as i18n from '../translations';
-import { TimelineContext } from '../../../timeline_context';
+import { useTimelineContext } from '../../../timeline_context';
 
 const CLOSE_BUTTON_SIZE = 25; // px
 const SORT_INDICATOR_SIZE = 25; // px
@@ -68,7 +67,7 @@ export const CloseButton = pure<{
 CloseButton.displayName = 'CloseButton';
 
 export const Actions = React.memo<Props>(({ header, onColumnRemoved, show, sort }) => {
-  const isLoading = useContext(TimelineContext);
+  const isLoading = useTimelineContext();
   return (
     <ActionsContainer
       alignItems="center"

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header/index.tsx
@@ -9,7 +9,6 @@ import { noop } from 'lodash/fp';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { useContext } from 'react';
 import { FieldNameContainer } from '../../../../draggables/field_badge';
 import { OnResize, Resizeable } from '../../../../resize_handle';
 import {
@@ -27,7 +26,7 @@ import { Filter } from '../filter';
 import { HeaderToolTipContent } from '../header_tooltip_content';
 
 import { getNewSortDirectionOnClick } from './helpers';
-import { TimelineContext } from '../../../timeline_context';
+import { useTimelineContext } from '../../../timeline_context';
 
 const TITLE_PADDING = 10; // px
 const RESIZE_HANDLE_HEIGHT = 35; // px
@@ -64,7 +63,7 @@ interface HeaderCompProps {
 }
 
 const HeaderComp = React.memo<HeaderCompProps>(({ children, onClick, isResizing }) => {
-  const isLoading = useContext(TimelineContext);
+  const isLoading = useTimelineContext();
   return (
     <HeaderDiv
       data-test-subj="header"

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/row_renderer.tsx
@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import { BrowserFields } from '../../../../containers/source';
 import { Ecs } from '../../../../graphql/types';
-import { TimelineWidthContext } from '../../timeline_context';
+import { useTimelineWidthContext } from '../../timeline_context';
 
 interface RowRendererContainerProps {
   children: React.ReactNode;
 }
 
 export const RowRendererContainer = React.memo<RowRendererContainerProps>(({ children }) => {
-  const width = useContext(TimelineWidthContext);
+  const width = useTimelineWidthContext();
 
   // Passing the styles directly to the component because the width is
   // being calculated and is recommended by Styled Components for performance

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
@@ -17,6 +17,7 @@ import { getDraggableId, Providers } from './providers';
 import { DELETE_CLASS_NAME, ENABLE_CLASS_NAME, EXCLUDE_CLASS_NAME } from './provider_item_actions';
 
 describe('Providers', () => {
+  const mockTimelineContext: boolean = true;
   describe('rendering', () => {
     test('renders correctly against snapshot', () => {
       const wrapper = shallow(
@@ -95,7 +96,7 @@ describe('Providers', () => {
       const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -158,7 +159,7 @@ describe('Providers', () => {
       const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -240,7 +241,7 @@ describe('Providers', () => {
       const mockOnToggleDataProviderEnabled = jest.fn();
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -318,7 +319,7 @@ describe('Providers', () => {
 
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -427,7 +428,7 @@ describe('Providers', () => {
 
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -508,7 +509,7 @@ describe('Providers', () => {
 
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}
@@ -594,7 +595,7 @@ describe('Providers', () => {
 
       const wrapper = mount(
         <TestProviders>
-          <TimelineContext.Provider value={true}>
+          <TimelineContext.Provider value={mockTimelineContext}>
             <DroppableWrapper droppableId="unitTest">
               <Providers
                 browserFields={{}}

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/expandable_event/index.tsx
@@ -7,14 +7,13 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { useContext } from 'react';
 import { BrowserFields } from '../../../containers/source';
 import { ColumnHeader } from '../body/column_headers/column_header';
 import { DetailItem } from '../../../graphql/types';
 import { StatefulEventDetails } from '../../event_details/stateful_event_details';
 import { LazyAccordion } from '../../lazy_accordion';
 import { OnUpdateColumns } from '../events';
-import { TimelineWidthContext } from '../timeline_context';
+import { useTimelineWidthContext } from '../timeline_context';
 
 const ExpandableDetails = styled.div<{ hideExpandButton: boolean }>`
   ${({ hideExpandButton }) =>
@@ -52,7 +51,7 @@ export const ExpandableEvent = React.memo<Props>(
     toggleColumn,
     onUpdateColumns,
   }) => {
-    const width = useContext(TimelineWidthContext);
+    const width = useTimelineWidthContext();
     // Passing the styles directly to the component of LazyAccordion 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