[SECURITY SOLUTION] Bundles _source -> Fields + able to sort on multiple fields in Timeline

x-pack/plugins/security_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;

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<

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

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.test.tsx

@@ -76,10 +76,12 @@ const eventsViewerDefaultProps = {
     language: 'kql',
   },
   start: from,
-  sort: {
-    columnId: 'foo',
-    sortDirection: 'none' as SortDirection,
-  },
+  sort: [
+    {
+      columnId: 'foo',
+      sortDirection: 'none' as SortDirection,
+    },
+  ],
   scopeId: SourcererScopeName.timeline,
   toggleColumn: jest.fn(),
   utilityBar,

x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx

@@ -106,7 +106,7 @@ interface Props {
   query: Query;
   onRuleChange?: () => void;
   start: string;
-  sort: Sort;
+  sort: Sort[];
   toggleColumn: (column: ColumnHeaderOptions) => void;
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
   // If truthy, the graph viewer (Resolver) is showing
@@ -196,11 +196,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 [
@@ -339,7 +340,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
 );

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -237,7 +237,7 @@ export const mockGlobalState: State = {
         pinnedEventIds: {},
         pinnedEventsSaveObject: {},
         itemsPerPageOptions: [5, 10, 20],
-        sort: { columnId: '@timestamp', sortDirection: Direction.desc },
+        sort: [{ columnId: '@timestamp', sortDirection: Direction.desc }],
         width: DEFAULT_TIMELINE_WIDTH,
         isSaving: false,
         version: null,

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -2140,10 +2140,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,
@@ -2176,7 +2178,7 @@ export const mockTimelineResult: TimelineResult = {
   templateTimelineId: null,
   templateTimelineVersion: null,
   savedQueryId: null,
-  sort: { columnId: '@timestamp', sortDirection: 'desc' },
+  sort: [{ columnId: '@timestamp', sortDirection: 'desc' }],
   version: '1',
 };
 
@@ -2245,7 +2247,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,

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx

@@ -103,80 +103,38 @@ describe('alert actions', () => {
           timeline: {
             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,
               },
             ],
@@ -243,10 +201,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,

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
           },
           {