Improve timeline query

elastic · Jul 14, 2020 · f21e4cd · f21e4cd
1 parent 3191f98
commit f21e4cd
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 4 deletions.
diff --git a/...k/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx b/...k/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx
@@ -96,6 +96,64 @@ describe('EventsViewer', () => {
     expect(wrapper.find(`[data-test-subj="header-section-subtitle"]`).first().exists()).toBe(false);
   });
 
+  test('it does NOT render when start is empty', async () => {
+    mockUseFetchIndexPatterns.mockImplementation(() => [
+      {
+        browserFields: mockBrowserFields,
+        indexPatterns: mockIndexPattern,
+        docValueFields: mockDocValueFields,
+        isLoading: true,
+      },
+    ]);
+
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+          <StatefulEventsViewer
+            defaultModel={eventsDefaultModel}
+            end={to}
+            id={'test-stateful-events-viewer'}
+            start={''}
+          />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await wait();
+    wrapper.update();
+
+    expect(wrapper.find(`[data-test-subj="header-section-subtitle"]`).first().exists()).toBe(false);
+  });
+
+  test('it does NOT render when end is empty', async () => {
+    mockUseFetchIndexPatterns.mockImplementation(() => [
+      {
+        browserFields: mockBrowserFields,
+        indexPatterns: mockIndexPattern,
+        docValueFields: mockDocValueFields,
+        isLoading: true,
+      },
+    ]);
+
+    const wrapper = mount(
+      <TestProviders>
+        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
+          <StatefulEventsViewer
+            defaultModel={eventsDefaultModel}
+            end={''}
+            id={'test-stateful-events-viewer'}
+            start={from}
+          />
+        </MockedProvider>
+      </TestProviders>
+    );
+
+    await wait();
+    wrapper.update();
+
+    expect(wrapper.find(`[data-test-subj="header-section-subtitle"]`).first().exists()).toBe(false);
+  });
+
   test('it renders the Fields Browser as a settings gear', async () => {
     const wrapper = mount(
       <TestProviders>

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
@@ -125,8 +125,13 @@ const EventsViewerComponent: React.FC<Props> = ({
   });
 
   const canQueryTimeline = useMemo(
-    () => combinedQueries != null && isLoadingIndexPattern != null && !isLoadingIndexPattern,
-    [isLoadingIndexPattern, combinedQueries]
+    () =>
+      combinedQueries != null &&
+      isLoadingIndexPattern != null &&
+      !isLoadingIndexPattern &&
+      !isEmpty(start) &&
+      !isEmpty(end),
+    [isLoadingIndexPattern, combinedQueries, start, end]
   );
 
   const fields = useMemo(
@@ -158,6 +163,8 @@ const EventsViewerComponent: React.FC<Props> = ({
             limit={itemsPerPage}
             sortField={sortField}
             sourceId="default"
+            startDate={start}
+            endDate={end}
           >
             {({
               events,

diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts b/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts
@@ -27,6 +27,11 @@ export const mockEventViewerResponse = [
         ],
         filterQuery: '{"bool":{"must":[],"filter":[{"match_all":{}}],"should":[],"must_not":[]}}',
         sourceId: 'default',
+        timerange: {
+          interval: '12h',
+          from: '2019-08-26T22:10:56.791Z',
+          to: '2019-08-27T22:10:56.794Z',
+        },
         pagination: { limit: 25, cursor: null, tiebreaker: null },
         sortField: { sortFieldId: '@timestamp', direction: 'desc' },
         defaultIndex: ['filebeat-*', 'auditbeat-*', 'packetbeat-*'],

diff --git a/x-pack/plugins/security_solution/public/graphql/types.ts b/x-pack/plugins/security_solution/public/graphql/types.ts
@@ -4614,6 +4614,7 @@ export namespace GetTimelineQuery {
     defaultIndex: string[];
     inspect: boolean;
     docValueFields: DocValueFieldsInput[];
+    timerange: TimerangeInput;
   };
 
   export type Query = {

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
@@ -169,6 +169,30 @@ describe('Timeline', () => {
       expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(false);
     });
 
+    test('it does NOT render the timeline table when start is empty', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mocks}>
+            <TimelineComponent {...props} start={''} />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(false);
+    });
+
+    test('it does NOT render the timeline table when end is empty', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mocks}>
+            <TimelineComponent {...props} end={''} />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="events-table"]').exists()).toEqual(false);
+    });
+
     test('it does NOT render the paging footer when you do NOT have any data providers', () => {
       const wrapper = mount(
         <TestProviders>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
@@ -204,8 +204,13 @@ export const TimelineComponent: React.FC<Props> = ({
   );
 
   const canQueryTimeline = useMemo(
-    () => combinedQueries != null && isLoadingSource != null && !isLoadingSource,
-    [isLoadingSource, combinedQueries]
+    () =>
+      combinedQueries != null &&
+      isLoadingSource != null &&
+      !isLoadingSource &&
+      !isEmpty(start) &&
+      !isEmpty(end),
+    [isLoadingSource, combinedQueries, start, end]
   );
   const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
   const timelineQueryFields = useMemo(() => columnsHeader.map((c) => c.id), [columnsHeader]);

diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts b/x-pack/plugins/security_solution/public/timelines/containers/index.gql_query.ts
@@ -16,6 +16,7 @@ export const timelineQuery = gql`
     $defaultIndex: [String!]!
     $inspect: Boolean!
     $docValueFields: [docValueFieldsInput!]!
+    $timerange: TimerangeInput!
   ) {
     source(id: $sourceId) {
       id
@@ -26,6 +27,7 @@ export const timelineQuery = gql`
         filterQuery: $filterQuery
         defaultIndex: $defaultIndex
         docValueFields: $docValueFields
+        timerange: $timerange
       ) {
         totalCount
         inspect @include(if: $inspect) {

diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
@@ -49,13 +49,15 @@ export interface CustomReduxProps {
 
 export interface OwnProps extends QueryTemplateProps {
   children?: (args: TimelineArgs) => React.ReactNode;
+  endDate: string;
   eventType?: EventType;
   id: string;
   indexPattern?: IIndexPattern;
   indexToAdd?: string[];
   limit: number;
   sortField: SortField;
   fields: string[];
+  startDate: string;
 }
 
 type TimelineQueryProps = OwnProps & PropsFromRedux & WithKibanaProps & CustomReduxProps;
@@ -78,6 +80,7 @@ class TimelineQueryComponent extends QueryTemplate<
       children,
       clearSignalsState,
       docValueFields,
+      endDate,
       eventType = 'raw',
       id,
       indexPattern,
@@ -89,6 +92,7 @@ class TimelineQueryComponent extends QueryTemplate<
       filterQuery,
       sourceId,
       sortField,
+      startDate,
     } = this.props;
     const defaultKibanaIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
     const defaultIndex =
@@ -102,6 +106,11 @@ class TimelineQueryComponent extends QueryTemplate<
       fieldRequested: fields,
       filterQuery: createFilter(filterQuery),
       sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate,
+        to: endDate,
+      },
       pagination: { limit, cursor: null, tiebreaker: null },
       sortField,
       defaultIndex,