[Lens] Order date fields first on discover drilldown

x-pack/plugins/lens/public/app_plugin/show_underlying_data.test.ts

@@ -9,6 +9,7 @@ import { createMockDatasource } from '../mocks';
 import { combineQueryAndFilters, getLayerMetaInfo } from './show_underlying_data';
 import { Filter } from '@kbn/es-query';
 import { DatasourcePublicAPI } from '../types';
+import { createMockedIndexPattern } from '../datasources/form_based/mocks';
 
 describe('getLayerMetaInfo', () => {
   const capabilities = {
@@ -174,7 +175,7 @@ describe('getLayerMetaInfo', () => {
       getOperationForColumnId: jest.fn(),
       getTableSpec: jest.fn(() => [{ columnId: 'col1', fields: ['bytes'] }]),
       getVisualDefaults: jest.fn(),
-      getSourceId: jest.fn(),
+      getSourceId: jest.fn(() => '1'),
       getMaxPossibleNumValues: jest.fn(),
       isTextBasedLanguage: jest.fn(() => false),
       getFilters: jest.fn(() => ({
@@ -187,13 +188,16 @@ describe('getLayerMetaInfo', () => {
       hasDefaultTimeField: jest.fn(() => true),
     };
     mockDatasource.getPublicAPI.mockReturnValue(updatedPublicAPI);
+    const sampleIndexPatternsFromService = {
+      '1': createMockedIndexPattern(),
+    };
     const { error, meta } = getLayerMetaInfo(
       mockDatasource,
       {}, // the publicAPI has been mocked, so no need for a state here
       {
         datatable1: { type: 'datatable', columns: [], rows: [] },
       },
-      {},
+      sampleIndexPatternsFromService,
       undefined,
       capabilities
     );
@@ -214,6 +218,42 @@ describe('getLayerMetaInfo', () => {
       disabled: { kuery: [], lucene: [] },
     });
   });
+
+  it('should order date fields first', () => {
+    const mockDatasource = createMockDatasource('testDatasource');
+    const updatedPublicAPI: DatasourcePublicAPI = {
+      datasourceId: 'formBased',
+      getOperationForColumnId: jest.fn(),
+      getTableSpec: jest.fn(() => [{ columnId: 'col1', fields: ['bytes', 'timestamp'] }]),
+      getVisualDefaults: jest.fn(),
+      getSourceId: jest.fn(() => '1'),
+      getMaxPossibleNumValues: jest.fn(),
+      isTextBasedLanguage: jest.fn(() => false),
+      getFilters: jest.fn(() => ({
+        enabled: {
+          kuery: [[{ language: 'kuery', query: 'memory > 40000' }]],
+          lucene: [],
+        },
+        disabled: { kuery: [], lucene: [] },
+      })),
+      hasDefaultTimeField: jest.fn(() => true),
+    };
+    mockDatasource.getPublicAPI.mockReturnValue(updatedPublicAPI);
+    const sampleIndexPatternsFromService = {
+      '1': createMockedIndexPattern(),
+    };
+    const { meta } = getLayerMetaInfo(
+      mockDatasource,
+      {}, // the publicAPI has been mocked, so no need for a state here
+      {
+        datatable1: { type: 'datatable', columns: [], rows: [] },
+      },
+      sampleIndexPatternsFromService,
+      undefined,
+      capabilities
+    );
+    expect(meta?.columns).toEqual(['timestamp', 'bytes']);
+  });
 });
 describe('combineQueryAndFilters', () => {
   it('should just return same query and filters if no fields or filters are in layer meta', () => {

x-pack/plugins/lens/public/app_plugin/show_underlying_data.ts

@@ -59,6 +59,27 @@ interface LayerMetaInfo {
   >;
 }
 
+const sortByDateFieldsFirst = (
+  datasourceAPI: DatasourcePublicAPI,
+  fields: string[],
+  indexPatterns: IndexPatternMap
+) => {
+  const dataViewId = datasourceAPI.getSourceId();
+  if (!dataViewId) return;
+
+  // for usability reasons we want to order the date fields first
+  // the fields order responds to the columns order in Discover
+  const dateFieldsFirst = fields.reduce((acc: string[], fieldName) => {
+    const field = indexPatterns[dataViewId]?.getFieldByName(fieldName);
+    if (field?.type === 'date') {
+      return [fieldName, ...acc];
+    }
+    return [...acc, fieldName];
+  }, []);
+
+  return dateFieldsFirst;
+};
+
 export function getLayerMetaInfo(
   currentDatasource: Datasource | undefined,
   datasourceState: unknown,
@@ -137,10 +158,12 @@ export function getLayerMetaInfo(
   }
 
   const uniqueFields = [...new Set(columnsWithNoTimeShifts.map(({ fields }) => fields).flat())];
+  const dateFieldsFirst = sortByDateFieldsFirst(datasourceAPI, uniqueFields, indexPatterns);
+
   return {
     meta: {
       id: datasourceAPI.getSourceId()!,
-      columns: uniqueFields,
+      columns: dateFieldsFirst ?? uniqueFields,
       filters: filtersOrError,
     },
     error: undefined,

x-pack/test/functional/apps/lens/group2/show_underlying_data.ts

@@ -44,7 +44,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.existOrFail('unifiedHistogramChart');
       // check the table columns
       const columns = await PageObjects.discover.getColumnHeaders();
-      expect(columns).to.eql(['extension.raw', '@timestamp', 'bytes']);
+      expect(columns).to.eql(['@timestamp', 'extension.raw', 'bytes']);
       await browser.closeCurrentWindow();
       await browser.switchToWindow(lensWindowHandler);
     });
@@ -142,7 +142,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.existOrFail('unifiedHistogramChart');
       // check the columns
       const columns = await PageObjects.discover.getColumnHeaders();
-      expect(columns).to.eql(['extension.raw', '@timestamp', 'memory']);
+      expect(columns).to.eql(['@timestamp', 'extension.raw', 'memory']);
       // check the query
       expect(await queryBar.getQueryString()).be.eql(
         '( ( bytes > 2000 ) AND ( ( extension.raw: "css" ) OR ( extension.raw: "gif" ) OR ( extension.raw: "jpg" ) ) )'

x-pack/test/functional/apps/lens/group2/show_underlying_data_dashboard.ts

@@ -50,7 +50,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await testSubjects.existOrFail('unifiedHistogramChart');
       // check the table columns
       const columns = await PageObjects.discover.getColumnHeaders();
-      expect(columns).to.eql(['ip', '@timestamp', 'bytes']);
+      expect(columns).to.eql(['@timestamp', 'ip', 'bytes']);
 
       await browser.closeCurrentWindow();
       await browser.switchToWindow(dashboardWindowHandle);