From 83e166d4e16b027b76e5c347fe6f245c298384c3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 20 Mar 2024 01:10:24 +0000 Subject: [PATCH] Fixed small bugs in explorer (#1559) * disable ppl direct query autocomplete Signed-off-by: Paul Sebastian * disable sorting for s3 Signed-off-by: Paul Sebastian * fix pagination for s3 Signed-off-by: Paul Sebastian * fix flyout to use actual row doc Signed-off-by: Paul Sebastian * fix surrounding events Signed-off-by: Paul Sebastian * allow for surrounding fields to work on s3 Signed-off-by: Paul Sebastian * fix lint complaint Signed-off-by: Paul Sebastian * const instead of let Signed-off-by: Paul Sebastian * changed naming for isDataSource bool Signed-off-by: Paul Sebastian * update snapshot Signed-off-by: Paul Sebastian --------- Signed-off-by: Paul Sebastian (cherry picked from commit 3cec4dcdaf565d55361082fd2f0afe311accd1c7) Signed-off-by: github-actions[bot] --- .../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 1aac36bb6e..2b3d541272 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 3818564438..993c8c5f6d 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 b06eeffcd9..b3d93692ce 100644 --- a/public/components/event_analytics/explorer/events_views/data_grid.tsx +++ b/public/components/event_analytics/explorer/events_views/data_grid.tsx @@ -40,6 +40,7 @@ export interface DataGridProps { requestParams: any; startTime: string; endTime: string; + isDefaultDataSource: boolean; storedSelectedColumns: IField[]; formatGridColumn?: (columns: EuiDataGridColumn[]) => EuiDataGridColumn[]; OuiDataGridProps?: Partial; @@ -59,6 +60,7 @@ export function DataGrid(props: DataGridProps) { requestParams, startTime, endTime, + isDefaultDataSource, formatGridColumn = defaultFormatGrid, OuiDataGridProps, } = props; @@ -100,6 +102,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, @@ -112,6 +116,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, @@ -127,6 +140,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({ @@ -137,7 +151,7 @@ export function DataGrid(props: DataGridProps) { columns.push({ id: name, display: name, - isSortable: true, // TODO: add functionality here based on type + isSortable: isDefaultDataSource, }); } }); @@ -175,19 +189,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} /> ); }, @@ -198,7 +212,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 0319f0a6df..92c6b4e572 100644 --- a/public/components/event_analytics/explorer/explorer.tsx +++ b/public/components/event_analytics/explorer/explorer.tsx @@ -650,6 +650,9 @@ export const Explorer = ({ requestParams={requestParams} startTime={startTime} endTime={endTime} + isDefaultDataSource={ + explorerSearchMeta.datasources[0].type === DEFAULT_DATA_SOURCE_TYPE + } /> )}