From 75e91db98299f00603e19ddb031f14394861c212 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 19 Mar 2024 19:20:34 -0700 Subject: [PATCH] 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 3cec4dcdaf565d55361082fd2f0afe311accd1c7) Signed-off-by: Paul Sebastian Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Shenoy Pratik --- .../common/search/direct_search.tsx | 4 +-- .../__snapshots__/data_grid.test.tsx.snap | 4 +-- .../explorer/events_views/data_grid.tsx | 29 ++++++++++++++----- .../event_analytics/explorer/explorer.tsx | 3 ++ 4 files changed, 29 insertions(+), 11 deletions(-) diff --git a/public/components/common/search/direct_search.tsx b/public/components/common/search/direct_search.tsx index 1aac36bb6..2b3d54127 100644 --- 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 index 169620d57..948812614 100644 --- 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 index e5130215c..2aede681f 100644 --- 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; @@ -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 index dbc13d3f2..7406253b8 100644 --- 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 + } /> )}