[SIEM] Inject/apply KQL changed in refresh button (#45065) (#45389)

* wip to apply kql when refresh on hosts page * refactor to have less re-render * add network and timeline page * fix/add unit testing * from review remove any effect from render * clean up + review II * review II + bug fixes * review III
elastic · Sep 11, 2019 · 8fb4889 · 8fb4889
1 parent 8a535cf
commit 8fb4889
Show file tree

Hide file tree

Showing 29 changed files with 876 additions and 328 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,46 +136,44 @@ export const EventsViewer = React.memo<Props>(
                     refetch,
                     totalCount = 0,
                   }) => (
-                    <TimelineRefetch loading={loading} id={id} inspect={inspect} 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.test.tsx b/x-pack/legacy/plugins/siem/public/components/super_date_picker/index.test.tsx
@@ -265,6 +265,7 @@ describe('SIEM Super Date Picker', () => {
         const wrapperFixedEuiFieldSearch = wrapper.find(
           'input[data-test-subj="superDatePickerRefreshIntervalInput"]'
         );
+
         wrapperFixedEuiFieldSearch.simulate('change', { target: { value: '2' } });
         wrapper.update();
 
@@ -456,7 +457,7 @@ describe('SIEM Super Date Picker', () => {
           },
         ];
         const props2 = mapStateToProps(clone, { id: 'global' });
-        expect(props1.refetch).not.toBe(props2.refetch);
+        expect(props1.queries).not.toBe(props2.queries);
       });
     });
   });