Fixed small bugs in explorer (#1559) (#1580)

* disable ppl direct query autocomplete * disable sorting for s3 * fix pagination for s3 * fix flyout to use actual row doc * fix surrounding events * allow for surrounding fields to work on s3 * fix lint complaint * const instead of let * changed naming for isDataSource bool * update snapshot --------- (cherry picked from commit 3cec4dc) Signed-off-by: Paul Sebastian <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Shenoy Pratik <[email protected]>
opensearch-project · Mar 20, 2024 · 75e91db · 75e91db
1 parent d14447e
commit 75e91db
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/public/components/common/search/direct_search.tsx b/public/components/common/search/direct_search.tsx
@@ -21,6 +21,7 @@ import {
 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,7 +55,6 @@ import { formatError } from '../../event_analytics/utils';
 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;
@@ -384,7 +384,7 @@ export const DirectSearch = (props: any) => {
             getSuggestions={getSuggestions}
             onItemSelect={onItemSelect}
             tabId={tabId}
-            isSuggestionDisabled={queryLang === 'SQL'}
+            isSuggestionDisabled={true}
             isDisabled={explorerSearchMetadata.isPolling}
           />
           {queryLang === QUERY_LANGUAGE.PPL && (

diff --git a/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/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 {

diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -42,6 +42,7 @@ export interface DataGridProps {
   requestParams: any;
   startTime: string;
   endTime: string;
+  isDefaultDataSource: boolean;
   storedSelectedColumns: IField[];
   formatGridColumn?: (columns: EuiDataGridColumn[]) => EuiDataGridColumn[];
   OuiDataGridProps?: Partial<EuiDataGridProps>;
@@ -61,6 +62,7 @@ export function DataGrid(props: DataGridProps) {
     requestParams,
     startTime,
     endTime,
+    isDefaultDataSource,
     formatGridColumn = defaultFormatGrid,
     OuiDataGridProps,
   } = props;
@@ -104,6 +106,8 @@ export function DataGrid(props: DataGridProps) {
 
   const setPage = (page: number[]) => {
     pageFields.current = page;
+    if (!isDefaultDataSource) return; // avoid adjusting query if using s3
+
     redoQuery(
       startTime,
       endTime,
@@ -116,6 +120,15 @@ export function DataGrid(props: DataGridProps) {
     );
   };
 
+  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 @@ export function DataGrid(props: DataGridProps) {
           ...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 @@ export function DataGrid(props: DataGridProps) {
         columns.push({
           id: name,
           display: name,
-          isSortable: true, // TODO: add functionality here based on type
+          isSortable: isDefaultDataSource,
         });
       }
     });
@@ -179,19 +193,19 @@ export function DataGrid(props: DataGridProps) {
               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 @@ export function DataGrid(props: DataGridProps) {
 
   // 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 (

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/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">