[Security Solution] Fix sorting on unmapped fields in Timeline Events…

x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts

@@ -28,10 +28,14 @@ export interface TimelineRequestBasicOptions extends IEsSearchRequest {
   factoryQueryType?: TimelineFactoryQueryTypes;
 }
 
+export interface TimelineRequestSortField<Field = string> extends SortField<Field> {
+  type: string;
+}
+
 export interface TimelineRequestOptionsPaginated<Field = string>
   extends TimelineRequestBasicOptions {
   pagination: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
-  sort: Array<SortField<Field>>;
+  sort: Array<TimelineRequestSortField<Field>>;
 }
 
 export type TimelineStrategyResponseType<

x-pack/plugins/security_solution/common/types/timeline/index.ts

@@ -146,6 +146,7 @@ const SavedFavoriteRuntimeType = runtimeTypes.partial({
 
 const SavedSortObject = runtimeTypes.partial({
   columnId: unionWithNullType(runtimeTypes.string),
+  columnType: unionWithNullType(runtimeTypes.string),
   sortDirection: unionWithNullType(runtimeTypes.string),
 });
 const SavedSortRuntimeType = runtimeTypes.union([

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

@@ -104,6 +104,7 @@ const eventsViewerDefaultProps = {
   sort: [
     {
       columnId: 'foo',
+      columnType: 'number',
       sortDirection: 'asc' as SortDirection,
     },
   ],

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

@@ -216,8 +216,9 @@ const EventsViewerComponent: React.FC<Props> = ({
 
   const sortField = useMemo(
     () =>
-      sort.map(({ columnId, sortDirection }) => ({
+      sort.map(({ columnId, columnType, sortDirection }) => ({
         field: columnId,
+        type: columnType,
         direction: sortDirection as Direction,
       })),
     [sort]

x-pack/plugins/security_solution/public/common/components/page/index.tsx

@@ -26,6 +26,11 @@ SecuritySolutionAppWrapper.displayName = 'SecuritySolutionAppWrapper';
   and `EuiPopover`, `EuiToolTip` global styles
 */
 export const AppGlobalStyle = createGlobalStyle<{ theme: { eui: { euiColorPrimary: string } } }>`
+  // fixes double scrollbar on views with EventsTable
+  #kibana-body {
+    overflow: hidden;
+  }
+
   div.app-wrapper {
     background-color: rgba(0,0,0,0);
   }

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

@@ -238,7 +238,7 @@ export const mockGlobalState: State = {
         pinnedEventIds: {},
         pinnedEventsSaveObject: {},
         itemsPerPageOptions: [5, 10, 20],
-        sort: [{ columnId: '@timestamp', sortDirection: Direction.desc }],
+        sort: [{ columnId: '@timestamp', columnType: 'number', sortDirection: Direction.desc }],
         isSaving: false,
         version: null,
         status: TimelineStatus.active,

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

@@ -2150,6 +2150,7 @@ export const mockTimelineModel: TimelineModel = {
   sort: [
     {
       columnId: '@timestamp',
+      columnType: 'number',
       sortDirection: Direction.desc,
     },
   ],
@@ -2184,7 +2185,7 @@ export const mockTimelineResult: TimelineResult = {
   templateTimelineId: null,
   templateTimelineVersion: null,
   savedQueryId: null,
-  sort: [{ columnId: '@timestamp', sortDirection: 'desc' }],
+  sort: [{ columnId: '@timestamp', columnType: 'number', sortDirection: 'desc' }],
   version: '1',
 };
 
@@ -2202,7 +2203,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
   timeline: {
     activeTab: TimelineTabs.query,
     columns: [
-      { columnHeaderType: 'not-filtered', id: '@timestamp', width: 190 },
+      { columnHeaderType: 'not-filtered', id: '@timestamp', type: 'number', width: 190 },
       { columnHeaderType: 'not-filtered', id: 'message', width: 180 },
       { columnHeaderType: 'not-filtered', id: 'event.category', width: 180 },
       { columnHeaderType: 'not-filtered', id: 'event.action', width: 180 },
@@ -2254,7 +2255,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     selectedEventIds: {},
     show: false,
     showCheckboxes: false,
-    sort: [{ columnId: '@timestamp', sortDirection: Direction.desc }],
+    sort: [{ columnId: '@timestamp', columnType: 'number', sortDirection: Direction.desc }],
     status: TimelineStatus.draft,
     title: '',
     timelineType: TimelineType.default,

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

@@ -111,6 +111,7 @@ describe('alert actions', () => {
               {
                 columnHeaderType: 'not-filtered',
                 id: '@timestamp',
+                type: 'number',
                 width: 190,
               },
               {
@@ -207,6 +208,7 @@ describe('alert actions', () => {
             sort: [
               {
                 columnId: '@timestamp',
+                columnType: 'number',
                 sortDirection: 'desc',
               },
             ],

x-pack/plugins/security_solution/public/timelines/components/open_timeline/__mocks__/index.ts

@@ -151,6 +151,7 @@ export const mockTimeline = {
       savedQueryId: null,
       sort: {
         columnId: '@timestamp',
+        columnType: 'number',
         sortDirection: 'desc',
         __typename: 'SortTimelineResult',
       },
@@ -403,6 +404,7 @@ export const mockTemplate = {
       savedQueryId: null,
       sort: {
         columnId: '@timestamp',
+        columnType: 'number',
         sortDirection: 'desc',
         __typename: 'SortTimelineResult',
       },

x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts

@@ -246,6 +246,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -319,6 +320,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -347,6 +349,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -420,6 +423,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -448,6 +452,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -521,6 +526,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -547,6 +553,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -620,6 +627,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -652,7 +660,7 @@ describe('helpers', () => {
             example: undefined,
             id: '@timestamp',
             placeholder: undefined,
-            type: undefined,
+            type: 'number',
             width: 190,
           },
           {
@@ -760,6 +768,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -815,6 +824,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -929,6 +939,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -953,6 +964,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -1026,6 +1038,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],
@@ -1054,6 +1067,7 @@ describe('helpers', () => {
           {
             columnHeaderType: 'not-filtered',
             id: '@timestamp',
+            type: 'number',
             width: 190,
           },
           {
@@ -1127,6 +1141,7 @@ describe('helpers', () => {
         sort: [
           {
             columnId: '@timestamp',
+            columnType: 'number',
             sortDirection: 'desc',
           },
         ],

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/default_headers.ts

@@ -13,6 +13,7 @@ export const defaultHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: '@timestamp',
+    type: 'number',
     width: DEFAULT_DATE_COLUMN_MIN_WIDTH,
   },
   {

x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header/index.test.tsx

@@ -35,6 +35,7 @@ describe('Header', () => {
   const sort: Sort[] = [
     {
       columnId: columnHeader.id,
+      columnType: columnHeader.type ?? 'number',
       sortDirection: Direction.desc,
     },
   ];
@@ -124,6 +125,7 @@ describe('Header', () => {
           sort: [
             {
               columnId: columnHeader.id,
+              columnType: columnHeader.type ?? 'number',
               sortDirection: Direction.asc, // (because the previous state was Direction.desc)
             },
           ],
@@ -191,6 +193,7 @@ describe('Header', () => {
       const nonMatching: Sort[] = [
         {
           columnId: 'differentSocks',
+          columnType: columnHeader.type ?? 'number',
           sortDirection: Direction.desc,
         },
       ];
@@ -201,14 +204,19 @@ describe('Header', () => {
 
   describe('getNextSortDirection', () => {
     test('it returns "asc" when the current direction is "desc"', () => {
-      const sortDescending: Sort = { columnId: columnHeader.id, sortDirection: Direction.desc };
+      const sortDescending: Sort = {
+        columnId: columnHeader.id,
+        columnType: columnHeader.type ?? 'number',
+        sortDirection: Direction.desc,
+      };
 
       expect(getNextSortDirection(sortDescending)).toEqual('asc');
     });
 
     test('it returns "desc" when the current direction is "asc"', () => {
       const sortAscending: Sort = {
         columnId: columnHeader.id,
+        columnType: columnHeader.type ?? 'number',
         sortDirection: Direction.asc,
       };
 
@@ -218,6 +226,7 @@ describe('Header', () => {
     test('it returns "desc" by default', () => {
       const sortNone: Sort = {
         columnId: columnHeader.id,
+        columnType: columnHeader.type ?? 'number',
         sortDirection: 'none',
       };
 
@@ -230,6 +239,7 @@ describe('Header', () => {
       const sortMatches: Sort[] = [
         {
           columnId: columnHeader.id,
+          columnType: columnHeader.type ?? 'number',
           sortDirection: Direction.desc,
         },
       ];
@@ -246,6 +256,7 @@ describe('Header', () => {
       const sortDoesNotMatch: Sort[] = [
         {
           columnId: 'someOtherColumn',
+          columnType: columnHeader.type ?? 'number',
           sortDirection: 'none',
         },
       ];