[Security Solution] [Bugfix] Fix analyzer missing from alert table (#…

…109183) * fix n test heyyyy * more dead code * fix type things * change field type to const * type fix
elastic · Aug 23, 2021 · a0bd0af · a0bd0af
1 parent 2381522
commit a0bd0af
Show file tree

Hide file tree

Showing 7 changed files with 248 additions and 59 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@@ -116,7 +116,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
     selectedPatterns,
     loading: isLoadingIndexPattern,
   } = useSourcererScope(scopeId);
-  const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
+  const { globalFullScreen } = useGlobalFullScreen();
   // TODO: Once we are past experimental phase this code should be removed
   const tGridEnabled = useIsExperimentalFeatureEnabled('tGridEnabled');
   const tGridEventRenderedViewEnabled = useIsExperimentalFeatureEnabled(
@@ -180,7 +180,6 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
               onRuleChange,
               renderCellValue,
               rowRenderers,
-              setGlobalFullScreen,
               start,
               sort,
               additionalFilters,

diff --git a/x-pack/plugins/timelines/public/components/t_grid/integrated/index.test.tsx b/x-pack/plugins/timelines/public/components/t_grid/integrated/index.test.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TGridIntegrated, TGridIntegratedProps } from './index';
+import { TestProviders, tGridIntegratedProps } from '../../../mock';
+
+const mockId = tGridIntegratedProps.id;
+jest.mock('../../../container', () => ({
+  useTimelineEvents: () => [
+    false,
+    {
+      id: mockId,
+      inspect: {
+        dsl: [],
+        response: [],
+      },
+      totalCount: -1,
+      pageInfo: {
+        activePage: 0,
+        querySize: 0,
+      },
+      events: [],
+      updatedAt: 0,
+    },
+  ],
+}));
+jest.mock('../helpers', () => {
+  const original = jest.requireActual('../helpers');
+  return {
+    ...original,
+    getCombinedFilterQuery: () => ({
+      bool: {
+        must: [],
+        filter: [],
+      },
+    }),
+    buildCombinedQuery: () => ({
+      filterQuery: '{"bool":{"must":[],"filter":[]}}',
+    }),
+  };
+});
+const defaultProps: TGridIntegratedProps = tGridIntegratedProps;
+describe('integrated t_grid', () => {
+  const dataTestSubj = 'right-here-dawg';
+  it('does not render graphOverlay if graphOverlay=null', () => {
+    render(
+      <TestProviders>
+        <TGridIntegrated {...defaultProps} />
+      </TestProviders>
+    );
+    expect(screen.queryByTestId(dataTestSubj)).toBeNull();
+  });
+  it('does render graphOverlay if graphOverlay=React.ReactNode', () => {
+    render(
+      <TestProviders>
+        <TGridIntegrated {...defaultProps} graphOverlay={<span data-test-subj={dataTestSubj} />} />
+      </TestProviders>
+    );
+    expect(screen.queryByTestId(dataTestSubj)).not.toBeNull();
+  });
+});
diff --git a/x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/integrated/index.tsx
@@ -56,8 +56,6 @@ import { SummaryViewSelector, ViewSelection } from '../event_rendered_view/selec
 
 const AlertConsumers: typeof AlertConsumersTyped = AlertConsumersNonTyped;
 
-export const EVENTS_VIEWER_HEADER_HEIGHT = 90; // px
-
 const TitleText = styled.span`
   margin-right: 12px;
 `;
@@ -101,18 +99,23 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
 const SECURITY_ALERTS_CONSUMERS = [AlertConsumers.SIEM];
 
 export interface TGridIntegratedProps {
+  additionalFilters: React.ReactNode;
   browserFields: BrowserFields;
   columns: ColumnHeaderOptions[];
+  data?: DataPublicPluginStart;
   dataProviders: DataProvider[];
   defaultCellActions?: TGridCellAction[];
   deletedEventIds: Readonly<string[]>;
   docValueFields: DocValueFields[];
   end: string;
   entityType: EntityType;
   filters: Filter[];
+  filterStatus?: AlertStatus;
   globalFullScreen: boolean;
+  // If truthy, the graph viewer (Resolver) is showing
+  graphEventId: string | undefined;
   graphOverlay?: React.ReactNode;
-  filterStatus?: AlertStatus;
+  hasAlertsCrud: boolean;
   height?: number;
   id: TimelineId;
   indexNames: string[];
@@ -122,36 +125,35 @@ export interface TGridIntegratedProps {
   itemsPerPage: number;
   itemsPerPageOptions: number[];
   kqlMode: 'filter' | 'search';
-  query: Query;
+  leadingControlColumns?: ControlColumnProps[];
   onRuleChange?: () => void;
+  query: Query;
   renderCellValue: (props: CellValueElementProps) => React.ReactNode;
   rowRenderers: RowRenderer[];
-  setGlobalFullScreen: (fullscreen: boolean) => void;
-  start: string;
   sort: Sort[];
-  additionalFilters: React.ReactNode;
-  // If truthy, the graph viewer (Resolver) is showing
-  graphEventId: string | undefined;
-  leadingControlColumns?: ControlColumnProps[];
-  trailingControlColumns?: ControlColumnProps[];
-  data?: DataPublicPluginStart;
+  start: string;
   tGridEventRenderedViewEnabled: boolean;
-  hasAlertsCrud: boolean;
+  trailingControlColumns?: ControlColumnProps[];
   unit?: (n: number) => string;
 }
 
 const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
+  additionalFilters,
   browserFields,
   columns,
-  defaultCellActions,
+  data,
   dataProviders,
+  defaultCellActions,
   deletedEventIds,
   docValueFields,
   end,
   entityType,
   filters,
-  globalFullScreen,
   filterStatus,
+  globalFullScreen,
+  graphEventId,
+  graphOverlay = null,
+  hasAlertsCrud,
   id,
   indexNames,
   indexPattern,
@@ -160,21 +162,15 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   itemsPerPage,
   itemsPerPageOptions,
   kqlMode,
+  leadingControlColumns,
   onRuleChange,
   query,
   renderCellValue,
   rowRenderers,
-  setGlobalFullScreen,
-  start,
   sort,
-  additionalFilters,
-  graphOverlay = null,
-  graphEventId,
-  leadingControlColumns,
-  trailingControlColumns,
+  start,
   tGridEventRenderedViewEnabled,
-  data,
-  hasAlertsCrud,
+  trailingControlColumns,
   unit,
 }) => {
   const dispatch = useDispatch();
@@ -236,34 +232,36 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
   ] = useTimelineEvents({
     // We rely on entityType to determine Events vs Alerts
     alertConsumers: SECURITY_ALERTS_CONSUMERS,
+    data,
     docValueFields,
+    endDate: end,
     entityType,
     fields,
     filterQuery: combinedQueries!.filterQuery,
     id,
     indexNames,
     limit: itemsPerPage,
+    skip: !canQueryTimeline,
     sort: sortField,
     startDate: start,
-    endDate: end,
-    skip: !canQueryTimeline,
-    data,
   });
 
-  const filterQuery = useMemo(() => {
-    return getCombinedFilterQuery({
-      config: esQuery.getEsQueryConfig(uiSettings),
-      dataProviders,
-      indexPattern,
-      browserFields,
-      filters,
-      kqlQuery: query,
-      kqlMode,
-      isEventViewer: true,
-      from: start,
-      to: end,
-    });
-  }, [uiSettings, dataProviders, indexPattern, browserFields, filters, start, end, query, kqlMode]);
+  const filterQuery = useMemo(
+    () =>
+      getCombinedFilterQuery({
+        config: esQuery.getEsQueryConfig(uiSettings),
+        browserFields,
+        dataProviders,
+        filters,
+        from: start,
+        indexPattern,
+        isEventViewer: true,
+        kqlMode,
+        kqlQuery: query,
+        to: end,
+      }),
+    [uiSettings, dataProviders, indexPattern, browserFields, filters, start, end, query, kqlMode]
+  );
 
   const totalCountMinusDeleted = useMemo(
     () => (totalCount > 0 ? totalCount - deletedEventIds.length : 0),
@@ -292,21 +290,22 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
       >
         {loading && <EuiProgress size="xs" position="absolute" color="accent" />}
 
+        {graphOverlay}
         {canQueryTimeline ? (
           <>
             <EventsContainerLoading
               data-timeline-id={id}
               data-test-subj={`events-container-loading-${loading}`}
             >
               <UpdatedFlexGroup gutterSize="m" justifyContent="flexEnd" alignItems={alignItems}>
-                <UpdatedFlexItem grow={false} show={!loading}>
+                <UpdatedFlexItem grow={false} $show={!loading}>
                   <InspectButton title={justTitle} inspect={inspect} loading={loading} />
                 </UpdatedFlexItem>
-                <UpdatedFlexItem grow={false} show={!loading}>
+                <UpdatedFlexItem grow={false} $show={!loading}>
                   {!resolverIsShowing(graphEventId) && additionalFilters}
                 </UpdatedFlexItem>
                 {tGridEventRenderedViewEnabled && entityType === 'alerts' && (
-                  <UpdatedFlexItem grow={false} show={!loading}>
+                  <UpdatedFlexItem grow={false} $show={!loading}>
                     <SummaryViewSelector viewSelected={tableView} onViewChange={setTableView} />
                   </UpdatedFlexItem>
                 )}
@@ -340,33 +339,33 @@ const TGridIntegratedComponent: React.FC<TGridIntegratedProps> = ({
                   ) : (
                     <>
                       <StatefulBody
-                        hasAlertsCrud={hasAlertsCrud}
                         activePage={pageInfo.activePage}
                         browserFields={browserFields}
-                        filterQuery={filterQuery}
                         data={nonDeletedEvents}
                         defaultCellActions={defaultCellActions}
+                        filterQuery={filterQuery}
+                        filterStatus={filterStatus}
+                        hasAlertsCrud={hasAlertsCrud}
                         id={id}
+                        indexNames={indexNames}
                         isEventViewer={true}
                         itemsPerPageOptions={itemsPerPageOptions}
+                        leadingControlColumns={leadingControlColumns}
                         loadPage={loadPage}
                         onRuleChange={onRuleChange}
                         querySize={pageInfo.querySize}
+                        refetch={refetch}
                         renderCellValue={renderCellValue}
                         rowRenderers={rowRenderers}
-                        tabType={TimelineTabs.query}
                         tableView={tableView}
+                        tabType={TimelineTabs.query}
+                        totalItems={totalCountMinusDeleted}
                         totalPages={calculateTotalPages({
                           itemsCount: totalCountMinusDeleted,
                           itemsPerPage,
                         })}
-                        totalItems={totalCountMinusDeleted}
-                        unit={unit}
-                        filterStatus={filterStatus}
-                        leadingControlColumns={leadingControlColumns}
                         trailingControlColumns={trailingControlColumns}
-                        refetch={refetch}
-                        indexNames={indexNames}
+                        unit={unit}
                       />
                       {tableView === 'gridView' && (
                         <Footer

diff --git a/x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/standalone/index.tsx
@@ -309,10 +309,10 @@ const TGridStandaloneComponent: React.FC<TGridStandaloneProps> = ({
               data-test-subj={`events-container-loading-${loading}`}
             >
               <UpdatedFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="baseline">
-                <UpdatedFlexItem grow={false} show={!loading}>
+                <UpdatedFlexItem grow={false} $show={!loading}>
                   <InspectButton title={justTitle} inspect={inspect} loading={loading} />
                 </UpdatedFlexItem>
-                <UpdatedFlexItem grow={false} show={!loading}>
+                <UpdatedFlexItem grow={false} $show={!loading}>
                   <LastUpdatedAt updatedAt={updatedAt} />
                 </UpdatedFlexItem>
               </UpdatedFlexGroup>

diff --git a/x-pack/plugins/timelines/public/components/t_grid/styles.tsx b/x-pack/plugins/timelines/public/components/t_grid/styles.tsx
@@ -465,8 +465,8 @@ export const UpdatedFlexGroup = styled(EuiFlexGroup)`
   right: 0px;
 `;
 
-export const UpdatedFlexItem = styled(EuiFlexItem)<{ show: boolean }>`
-  ${({ show }) => (show ? '' : 'visibility: hidden;')}
+export const UpdatedFlexItem = styled(EuiFlexItem)<{ $show: boolean }>`
+  ${({ $show }) => ($show ? '' : 'visibility: hidden;')}
 `;
 
 export const AlertCount = styled.span`

diff --git a/x-pack/plugins/timelines/public/mock/index.ts b/x-pack/plugins/timelines/public/mock/index.ts
@@ -15,3 +15,4 @@ export * from './mock_timeline_control_columns';
 export * from './mock_timeline_data';
 export * from './test_providers';
 export * from './plugin_mock';
+export * from './t_grid';