[Backport 2.13] Fixed small bugs in explorer

public/components/common/search/direct_search.tsx

@@ -21,6 +21,7 @@
 import { isEmpty, isEqual } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { batch, useDispatch, useSelector } from 'react-redux';
+import { i18n } from '@osd/i18n';
 import { ASYNC_POLLING_INTERVAL, QUERY_LANGUAGE } from '../../../../common/constants/data_sources';
 import {
   APP_ANALYTICS_TAB_ID_REGEX,
@@ -54,13 +55,12 @@
 import { usePolling } from '../../hooks/use_polling';
 import { PPLReferenceFlyout } from '../helpers';
 import { Autocomplete } from './autocomplete';
-import { i18n } from '@osd/i18n';
 export interface IQueryBarProps {
   query: string;
   tempQuery: string;
   handleQueryChange: (query: string) => void;
   handleQuerySearch: () => void;
   dslService: any;
 }
 
 export interface IDatePickerProps {
@@ -70,11 +70,11 @@
   setEndTime: () => void;
   setTimeRange: () => void;
   setIsOutputStale: () => void;
   handleTimePickerChange: (timeRange: string[]) => any;
   handleTimeRangePickerRefresh: () => any;
 }
 
 export const DirectSearch = (props: any) => {
   const {
     query,
     tempQuery,
@@ -115,7 +115,7 @@
     error: pollingError,
     startPolling,
     stopPolling,
   } = usePolling<any, any>((params) => {
     return sqlService.fetchWithJobId(params);
   }, ASYNC_POLLING_INTERVAL);
 
@@ -329,20 +329,20 @@
         })
       );
     }
   }, [pollingResult, pollingError]);
 
   useEffect(() => {
     return () => {
       stopPolling();
     };
   }, []);
 
   useEffect(() => {
     if (!explorerSearchMetadata.isPolling) {
       stopPolling();
       setIsQueryRunning(false);
     }
   }, [explorerSearchMetadata.isPolling]);
 
   return (
     <div className="globalQueryBar">
@@ -384,7 +384,7 @@
             getSuggestions={getSuggestions}
             onItemSelect={onItemSelect}
             tabId={tabId}
-            isSuggestionDisabled={queryLang === 'SQL'}
+            isSuggestionDisabled={true}
             isDisabled={explorerSearchMetadata.isPolling}
           />
           {queryLang === QUERY_LANGUAGE.PPL && (

public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap

@@ -289,7 +289,7 @@ exports[`Datagrid component Renders data grid component 1`] = `
                   "display": "Time (timestamp)",
                   "id": "timestamp",
                   "initialWidth": 200,
-                  "isSortable": true,
+                  "isSortable": undefined,
                   "schema": "datetime",
                 },
                 Object {
@@ -775,7 +775,7 @@ exports[`Datagrid component renders data grid with different timestamp 1`] = `
                   "display": "Time (utc_time)",
                   "id": "utc_time",
                   "initialWidth": 200,
-                  "isSortable": true,
+                  "isSortable": undefined,
                   "schema": "datetime",
                 },
                 Object {

public/components/event_analytics/explorer/events_views/data_grid.tsx

@@ -34,7 +34,7 @@
 export interface DataGridProps {
   http: HttpSetup;
   pplService: PPLService;
   rows: any[];
   explorerFields: IExplorerFields;
   timeStampField: string;
   rawQuery: string;
@@ -42,6 +42,7 @@
   requestParams: any;
   startTime: string;
   endTime: string;
+  isDefaultDataSource: boolean;
   storedSelectedColumns: IField[];
   formatGridColumn?: (columns: EuiDataGridColumn[]) => EuiDataGridColumn[];
   OuiDataGridProps?: Partial<EuiDataGridProps>;
@@ -61,6 +62,7 @@
     requestParams,
     startTime,
     endTime,
+    isDefaultDataSource,
     formatGridColumn = defaultFormatGrid,
     OuiDataGridProps,
   } = props;
@@ -104,6 +106,8 @@
 
   const setPage = (page: number[]) => {
     pageFields.current = page;
+    if (!isDefaultDataSource) return; // avoid adjusting query if using s3
+
     redoQuery(
       startTime,
       endTime,
@@ -116,6 +120,15 @@
     );
   };
 
+  const findTrueIndex = (rowIndex: number) => {
+    // if using default ds, data given to dg will be per page, need to adjust dg expected index and actual data index
+    if (isDefaultDataSource) {
+      // modulo of row length, i.e. pos on current page
+      rowIndex = rowIndex % pageFields.current[1];
+    }
+    return rowIndex;
+  };
+
   const columnNameTranslate = (name: string) => {
     return i18n.translate(`discover.events.dataGrid.${name.toLowerCase()}Column`, {
       defaultMessage: name,
@@ -131,6 +144,7 @@
           ...DEFAULT_TIMESTAMP_COLUMN,
           display: `${columnNameTranslate('Time')} (${timeStampField})`,
           id: timeStampField,
+          isSortable: isDefaultDataSource, // allow sorting for default ds, dont otherwise
         });
       } else if (name === '_source') {
         columns.push({
@@ -141,7 +155,7 @@
         columns.push({
           id: name,
           display: name,
-          isSortable: true, // TODO: add functionality here based on type
+          isSortable: isDefaultDataSource,
         });
       }
     });
@@ -179,19 +193,19 @@
               http={http}
               key={null}
               docId={'undefined'}
-              doc={rows[rowIndex % pageFields.current[1]]}
+              doc={data[findTrueIndex(rowIndex)]}
               selectedCols={explorerFields.queriedFields}
               timeStampField={timeStampField}
               explorerFields={explorerFields}
               pplService={pplService}
               rawQuery={rawQuery}
               onFlyoutOpen={() => {}}
-              dataGridColumns={dataGridColumns}
-              dataGridColumnVisibility={dataGridColumnVisibility}
+              dataGridColumns={dataGridColumns()}
+              dataGridColumnVisibility={dataGridColumnVisibility()}
               selectedIndex={rowIndex}
               sortingFields={sortingFields}
-              rowHeightsOptions={rowHeightsOptions}
-              rows={rows}
+              rowHeightsOptions={rowHeightsOptions()}
+              rows={data}
             />
           );
         },
@@ -202,7 +216,8 @@
 
   // renders what is shown in each cell, i.e. the content of each row
   const dataGridCellRender = ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
-    const trueIndex = rowIndex % pageFields.current[1]; // modulo of row length, i.e. pos on current page
+    const trueIndex = findTrueIndex(rowIndex);
+
     if (trueIndex < data.length) {
       if (columnId === '_source') {
         return (

public/components/event_analytics/explorer/explorer.tsx

@@ -651,6 +651,9 @@ export const Explorer = ({
                         requestParams={requestParams}
                         startTime={startTime}
                         endTime={endTime}
+                        isDefaultDataSource={
+                          explorerSearchMeta.datasources[0].type === DEFAULT_DATA_SOURCE_TYPE
+                        }
                       />
                     )}
                     <a tabIndex={0} id="discoverBottomMarker">