[7.x] [SECURITY SOLUTION] Bundles _source -> Fields + able to sort on…

… multiple fields in Timeline (#83761) (#85505) * [SECURITY SOLUTION] Bundles _source -> Fields + able to sort on multiple fields in Timeline (#83761) * replace _source with fields * wip * unit test * regroup sorting and number together * fix bugs from review * mistake * Update x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com> * fix snapshot * review + fix topN and filter from detail view * fix tests * fix test Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com> * Update timeline_details.ts Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>
elastic · Dec 10, 2020 · 0968676 · 0968676
1 parent 1909172
commit 0968676
Show file tree

Hide file tree

Showing 69 changed files with 1,475 additions and 609 deletions.
diff --git a/...curity_solution/common/search_strategy/security_solution/matrix_histogram/events/index.ts b/...curity_solution/common/search_strategy/security_solution/matrix_histogram/events/index.ts
@@ -28,6 +28,7 @@ export interface EventsActionGroupData {
 export interface EventHit extends SearchHit {
   sort: string[];
   _source: EventSource;
+  fields: Record<string, unknown[]>;
   aggregations: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [agg: string]: any;

diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts
@@ -31,7 +31,7 @@ export interface TimelineRequestBasicOptions extends IEsSearchRequest {
 export interface TimelineRequestOptionsPaginated<Field = string>
   extends TimelineRequestBasicOptions {
   pagination: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
-  sort: SortField<Field>;
+  sort: Array<SortField<Field>>;
 }
 
 export type TimelineStrategyResponseType<

diff --git a/x-pack/plugins/security_solution/common/types/timeline/index.ts b/x-pack/plugins/security_solution/common/types/timeline/index.ts
@@ -143,10 +143,15 @@ const SavedFavoriteRuntimeType = runtimeTypes.partial({
 /*
  *  Sort Types
  */
-const SavedSortRuntimeType = runtimeTypes.partial({
+
+const SavedSortObject = runtimeTypes.partial({
   columnId: unionWithNullType(runtimeTypes.string),
   sortDirection: unionWithNullType(runtimeTypes.string),
 });
+const SavedSortRuntimeType = runtimeTypes.union([
+  runtimeTypes.array(SavedSortObject),
+  SavedSortObject,
+]);
 
 /*
  *  Timeline Statuses

diff --git a/x-pack/plugins/security_solution/cypress/integration/events_viewer.spec.ts b/x-pack/plugins/security_solution/cypress/integration/events_viewer.spec.ts
@@ -157,9 +157,9 @@ describe('Events Viewer', () => {
 
     it('re-orders columns via drag and drop', () => {
       const originalColumnOrder =
-        '@timestampmessagehost.nameevent.moduleevent.datasetevent.actionuser.namesource.ipdestination.ip';
+        '@timestamp1messagehost.nameevent.moduleevent.datasetevent.actionuser.namesource.ipdestination.ip';
       const expectedOrderAfterDragAndDrop =
-        'message@timestamphost.nameevent.moduleevent.datasetevent.actionuser.namesource.ipdestination.ip';
+        'message@timestamp1host.nameevent.moduleevent.datasetevent.actionuser.namesource.ipdestination.ip';
 
       cy.get(HEADERS_GROUP).invoke('text').should('equal', originalColumnOrder);
       dragAndDropColumn({ column: 0, newPosition: 0 });

diff --git a/x-pack/plugins/security_solution/cypress/test_files/expected_timelines_export.ndjson b/x-pack/plugins/security_solution/cypress/test_files/expected_timelines_export.ndjson
@@ -1 +1 @@
-{"savedObjectId":"0162c130-78be-11ea-9718-118a926974a4","version":"WzcsMV0=","columns":[{"columnHeaderType":"not-filtered","id":"@timestamp"},{"columnHeaderType":"not-filtered","id":"message"},{"columnHeaderType":"not-filtered","id":"event.category"},{"columnHeaderType":"not-filtered","id":"event.action"},{"columnHeaderType":"not-filtered","id":"host.name"},{"columnHeaderType":"not-filtered","id":"source.ip"},{"columnHeaderType":"not-filtered","id":"destination.ip"},{"columnHeaderType":"not-filtered","id":"user.name"}],"created":1586256805054,"createdBy":"elastic","dataProviders":[],"dateRange":{"end":1586256837669,"start":1546343624710},"description":"description","eventType":"all","filters":[],"kqlMode":"filter","kqlQuery":{"filterQuery":{"kuery":{"expression":"host.name:*","kind":"kuery"},"serializedQuery":"{\"bool\":{\"should\":[{\"exists\":{\"field\":\"host.name\"}}],\"minimum_should_match\":1}}"}},"savedQueryId":null,"sort":{"columnId":"@timestamp","sortDirection":"desc"},"title":"SIEM test","updated":1586256839298,"updatedBy":"elastic","timelineType":"default","eventNotes":[],"globalNotes":[],"pinnedEventIds":[]}
+{"savedObjectId":"0162c130-78be-11ea-9718-118a926974a4","version":"WzcsMV0=","columns":[{"columnHeaderType":"not-filtered","id":"@timestamp"},{"columnHeaderType":"not-filtered","id":"message"},{"columnHeaderType":"not-filtered","id":"event.category"},{"columnHeaderType":"not-filtered","id":"event.action"},{"columnHeaderType":"not-filtered","id":"host.name"},{"columnHeaderType":"not-filtered","id":"source.ip"},{"columnHeaderType":"not-filtered","id":"destination.ip"},{"columnHeaderType":"not-filtered","id":"user.name"}],"created":1586256805054,"createdBy":"elastic","dataProviders":[],"dateRange":{"end":1586256837669,"start":1546343624710},"description":"description","eventType":"all","filters":[],"kqlMode":"filter","kqlQuery":{"filterQuery":{"kuery":{"expression":"host.name:*","kind":"kuery"},"serializedQuery":"{\"bool\":{\"should\":[{\"exists\":{\"field\":\"host.name\"}}],\"minimum_should_match\":1}}"}},"savedQueryId":null,"sort":[{"columnId":"@timestamp","sortDirection":"desc"}],"title":"SIEM test","updated":1586256839298,"updatedBy":"elastic","timelineType":"default","eventNotes":[],"globalNotes":[],"pinnedEventIds":[]}
diff --git a/...urity_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx b/...urity_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.tsx
@@ -19,7 +19,7 @@ import { allowTopN } from './helpers';
 import * as i18n from './translations';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
 import { TimelineId } from '../../../../common/types/timeline';
-import { SELECTOR_TIMELINE_BODY_CLASS_NAME } from '../../../timelines/components/timeline/styles';
+import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../../../timelines/components/timeline/styles';
 import { SourcererScopeName } from '../../store/sourcerer/model';
 import { useSourcererScope } from '../../containers/sourcerer';
 
@@ -230,7 +230,7 @@ export const useGetTimelineId = function (
         if (
           myElem != null &&
           myElem.classList != null &&
-          myElem.classList.contains(SELECTOR_TIMELINE_BODY_CLASS_NAME) &&
+          myElem.classList.contains(SELECTOR_TIMELINE_GLOBAL_CONTAINER) &&
           myElem.hasAttribute('data-timeline-id')
         ) {
           setTimelineId(myElem.getAttribute('data-timeline-id'));

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
@@ -79,10 +79,12 @@ const eventsViewerDefaultProps = {
     language: 'kql',
   },
   start: from,
-  sort: {
-    columnId: 'foo',
-    sortDirection: 'none' as SortDirection,
-  },
+  sort: [
+    {
+      columnId: 'foo',
+      sortDirection: 'none' as SortDirection,
+    },
+  ],
   scopeId: SourcererScopeName.timeline,
   utilityBar,
 };

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
@@ -115,7 +115,7 @@ interface Props {
   query: Query;
   onRuleChange?: () => void;
   start: string;
-  sort: Sort;
+  sort: Sort[];
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
   // If truthy, the graph viewer (Resolver) is showing
   graphEventId: string | undefined;
@@ -202,11 +202,12 @@ const EventsViewerComponent: React.FC<Props> = ({
   ]);
 
   const sortField = useMemo(
-    () => ({
-      field: sort.columnId,
-      direction: sort.sortDirection as Direction,
-    }),
-    [sort.columnId, sort.sortDirection]
+    () =>
+      sort.map(({ columnId, sortDirection }) => ({
+        field: columnId,
+        direction: sortDirection as Direction,
+      })),
+    [sort]
   );
 
   const [
@@ -341,7 +342,7 @@ export const EventsViewer = React.memo(
     prevProps.kqlMode === nextProps.kqlMode &&
     deepEqual(prevProps.query, nextProps.query) &&
     prevProps.start === nextProps.start &&
-    prevProps.sort === nextProps.sort &&
+    deepEqual(prevProps.sort, nextProps.sort) &&
     prevProps.utilityBar === nextProps.utilityBar &&
     prevProps.graphEventId === nextProps.graphEventId
 );
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -239,7 +239,7 @@ export const mockGlobalState: State = {
         pinnedEventIds: {},
         pinnedEventsSaveObject: {},
         itemsPerPageOptions: [5, 10, 20],
-        sort: { columnId: '@timestamp', sortDirection: Direction.desc },
+        sort: [{ columnId: '@timestamp', sortDirection: Direction.desc }],
         isSaving: false,
         version: null,
         status: TimelineStatus.active,

diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -2142,10 +2142,12 @@ export const mockTimelineModel: TimelineModel = {
   selectedEventIds: {},
   show: false,
   showCheckboxes: false,
-  sort: {
-    columnId: '@timestamp',
-    sortDirection: Direction.desc,
-  },
+  sort: [
+    {
+      columnId: '@timestamp',
+      sortDirection: Direction.desc,
+    },
+  ],
   status: TimelineStatus.active,
   title: 'Test rule',
   timelineType: TimelineType.default,
@@ -2177,7 +2179,7 @@ export const mockTimelineResult: TimelineResult = {
   templateTimelineId: null,
   templateTimelineVersion: null,
   savedQueryId: null,
-  sort: { columnId: '@timestamp', sortDirection: 'desc' },
+  sort: [{ columnId: '@timestamp', sortDirection: 'desc' }],
   version: '1',
 };
 
@@ -2247,7 +2249,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     selectedEventIds: {},
     show: false,
     showCheckboxes: false,
-    sort: { columnId: '@timestamp', sortDirection: Direction.desc },
+    sort: [{ columnId: '@timestamp', sortDirection: Direction.desc }],
     status: TimelineStatus.draft,
     title: '',
     timelineType: TimelineType.default,

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
@@ -105,80 +105,38 @@ describe('alert actions', () => {
             activeTab: TimelineTabs.query,
             columns: [
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: '@timestamp',
-                placeholder: undefined,
-                type: undefined,
                 width: 190,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'message',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'event.category',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'host.name',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'source.ip',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'destination.ip',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
               {
-                aggregatable: undefined,
-                category: undefined,
                 columnHeaderType: 'not-filtered',
-                description: undefined,
-                example: undefined,
                 id: 'user.name',
-                placeholder: undefined,
-                type: undefined,
                 width: 180,
               },
             ],
@@ -242,10 +200,12 @@ describe('alert actions', () => {
             selectedEventIds: {},
             show: true,
             showCheckboxes: false,
-            sort: {
-              columnId: '@timestamp',
-              sortDirection: 'desc',
-            },
+            sort: [
+              {
+                columnId: '@timestamp',
+                sortDirection: 'desc',
+              },
+            ],
             status: TimelineStatus.draft,
             title: '',
             timelineType: TimelineType.default,

diff --git a/x-pack/plugins/security_solution/public/graphql/introspection.json b/x-pack/plugins/security_solution/public/graphql/introspection.json
@@ -2231,7 +2231,7 @@
             "name": "sort",
             "description": "",
             "args": [],
-            "type": { "kind": "OBJECT", "name": "SortTimelineResult", "ofType": null },
+            "type": { "kind": "SCALAR", "name": "ToAny", "ofType": null },
             "isDeprecated": false,
             "deprecationReason": null
           },
@@ -2953,33 +2953,6 @@
         "enumValues": null,
         "possibleTypes": null
       },
-      {
-        "kind": "OBJECT",
-        "name": "SortTimelineResult",
-        "description": "",
-        "fields": [
-          {
-            "name": "columnId",
-            "description": "",
-            "args": [],
-            "type": { "kind": "SCALAR", "name": "String", "ofType": null },
-            "isDeprecated": false,
-            "deprecationReason": null
-          },
-          {
-            "name": "sortDirection",
-            "description": "",
-            "args": [],
-            "type": { "kind": "SCALAR", "name": "String", "ofType": null },
-            "isDeprecated": false,
-            "deprecationReason": null
-          }
-        ],
-        "inputFields": null,
-        "interfaces": [],
-        "enumValues": null,
-        "possibleTypes": null
-      },
       {
         "kind": "ENUM",
         "name": "TimelineStatus",
@@ -3650,7 +3623,15 @@
           {
             "name": "sort",
             "description": "",
-            "type": { "kind": "INPUT_OBJECT", "name": "SortTimelineInput", "ofType": null },
+            "type": {
+              "kind": "LIST",
+              "name": null,
+              "ofType": {
+                "kind": "NON_NULL",
+                "name": null,
+                "ofType": { "kind": "INPUT_OBJECT", "name": "SortTimelineInput", "ofType": null }
+              }
+            },
             "defaultValue": null
           },
           {