From 61406f577b2cf06a64b7542e0e114602800ce850 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Sat, 16 Nov 2024 17:38:33 -0600 Subject: [PATCH] Add frozen tier, default show distribution to off --- .../expanded_row/index_based_expanded_row.tsx | 12 ++++- .../data_visualizer_stats_table.tsx | 5 ++- .../stats_table/use_table_settings.ts | 7 +-- .../index_data_visualizer_esql.tsx | 1 + .../search_panel/esql/limit_size.tsx | 8 ---- .../constants/esql_constants.ts | 2 +- .../embeddable_esql_field_stats_table.tsx | 1 + .../esql/use_data_visualizer_esql_data.tsx | 45 +++++++++++++++++-- .../hooks/esql/use_esql_overall_stats_data.ts | 1 - .../datavisualizer_selector.tsx | 4 +- 10 files changed, 65 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/index_based_expanded_row.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/index_based_expanded_row.tsx index e0c83f36399e9..2982df103bded 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/index_based_expanded_row.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/expanded_row/index_based_expanded_row.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { useEffect } from 'react'; import type { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import { useExpandedRowCss } from './use_expanded_row_css'; import { GeoPointContentWithMap } from './geo_point_content_with_map'; @@ -34,6 +34,7 @@ export const IndexBasedDataVisualizerExpandedRow = ({ totalDocuments, timeFieldName, typeAccessor = 'type', + onVisibilityChange, }: { item: FieldVisConfig; dataView: DataView | undefined; @@ -46,6 +47,7 @@ export const IndexBasedDataVisualizerExpandedRow = ({ */ onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void; timeFieldName?: string; + onVisibilityChange?: (visible: boolean, item: FieldVisConfig) => void; }) => { const config = { ...item, stats: { ...item.stats, totalDocuments } }; const { loading, existsInDocs, fieldName } = config; @@ -98,6 +100,14 @@ export const IndexBasedDataVisualizerExpandedRow = ({ } } + useEffect(() => { + onVisibilityChange?.(true, item); + + return () => { + onVisibilityChange?.(false, item); + }; + }, [item, onVisibilityChange]); + return (
{loading === true ? : getCardContent()} diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx index 3b591a85ff472..e0e43efb694f2 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx @@ -63,6 +63,7 @@ interface DataVisualizerTableProps { overallStatsRunning: boolean; renderFieldName?: FieldStatisticTableEmbeddableProps['renderFieldName']; error?: Error | string; + isEsql?: boolean; } const UnmemoizedDataVisualizerTable = ({ @@ -78,6 +79,7 @@ const UnmemoizedDataVisualizerTable = ({ overallStatsRunning, renderFieldName, error, + isEsql = false, }: DataVisualizerTableProps) => { const { euiTheme } = useEuiTheme(); @@ -87,7 +89,8 @@ const UnmemoizedDataVisualizerTable = ({ const { onTableChange, pagination, sorting } = useTableSettings( items, pageState, - updatePageState + updatePageState, + isEsql ); const [showDistributions, setShowDistributions] = useState(showPreviewByDefault ?? true); const [dimensions, setDimensions] = useState(calculateTableColumnsDimensions()); diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts index b2292970230c0..be427a6ebccae 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts @@ -27,7 +27,8 @@ interface UseTableSettingsReturnValue { export function useTableSettings( items: TypeOfItem[], pageState: DataVisualizerTableState, - updatePageState: (update: DataVisualizerTableState) => void + updatePageState: (update: DataVisualizerTableState) => void, + isEsql: boolean = false ): UseTableSettingsReturnValue { const { pageIndex, pageSize, sortField, sortDirection } = pageState; @@ -50,9 +51,9 @@ export function useTableSettings( pageIndex, pageSize, totalItemCount: items.length, - pageSizeOptions: PAGE_SIZE_OPTIONS, + pageSizeOptions: isEsql ? [10, 25] : PAGE_SIZE_OPTIONS, }), - [items, pageIndex, pageSize] + [items, pageIndex, pageSize, isEsql] ); const sorting = useMemo( diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx index c6190c87bcae5..5953144e715fb 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx @@ -332,6 +332,7 @@ export const IndexDataVisualizerESQL: FC = (dataVi + isEsql={true} items={configs} pageState={dataVisualizerListState} updatePageState={onTableChange} diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_data_visualizer_esql_data.tsx b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_data_visualizer_esql_data.tsx index 2323b231d67f7..272cbed634dda 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_data_visualizer_esql_data.tsx +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_data_visualizer_esql_data.tsx @@ -53,14 +53,14 @@ const defaultSearchQuery = { }; const FALLBACK_ESQL_QUERY: ESQLQuery = { esql: '' }; -const DEFAULT_LIMIT_SIZE = '10000'; +const DEFAULT_LIMIT_SIZE = '5000'; const defaults = getDefaultPageState(); export const getDefaultESQLDataVisualizerListState = ( overrides?: Partial ): Required => ({ pageIndex: 0, - pageSize: 25, + pageSize: 10, sortField: 'fieldName', sortDirection: 'asc', visibleFieldTypes: [], @@ -70,7 +70,7 @@ export const getDefaultESQLDataVisualizerListState = ( searchQuery: defaultSearchQuery, searchQueryLanguage: SEARCH_QUERY_LANGUAGE.KUERY, filters: [], - showDistributions: true, + showDistributions: false, showAllFields: false, showEmptyFields: false, probability: null, @@ -229,6 +229,24 @@ export const useESQLDataVisualizerData = ( } as QueryDslQueryContainer; } } + + // Ensure that we don't query frozen data + if (filter.bool && Array.isArray(filter.bool?.must_not)) { + filter.bool.must_not.push({ + term: { + _tier: 'data_frozen', + }, + }); + } else { + filter.bool = { + must_not: [ + { + term: { _tier: 'data_frozen' }, + }, + ], + }; + } + return { id: input.id, earliest, @@ -332,9 +350,25 @@ export const useESQLDataVisualizerData = ( const visibleFieldTypes = dataVisualizerListState.visibleFieldTypes ?? restorableDefaults.visibleFieldTypes; + const [expandedRows, setExpandedRows] = useState([]); + + const onVisibilityChange = useCallback((visible: boolean, item: FieldVisConfig) => { + if (visible) { + setExpandedRows((prev) => [...prev, item.fieldName]); + } else { + setExpandedRows((prev) => prev.filter((fieldName) => fieldName !== item.fieldName)); + } + }, []); + + const hasExpandedRows = useMemo(() => expandedRows.length > 0, [expandedRows]); useEffect( function updateFieldStatFieldsToFetch() { + if (dataVisualizerListState?.showDistributions === false && !hasExpandedRows) { + setFieldStatFieldsToFetch(undefined); + return; + } + const { sortField, sortDirection } = dataVisualizerListState; // Otherwise, sort the list of fields by the initial sort field and sort direction @@ -376,6 +410,8 @@ export const useESQLDataVisualizerData = ( dataVisualizerListState.sortDirection, nonMetricConfigs, metricConfigs, + dataVisualizerListState?.showDistributions, + hasExpandedRows, ] ); @@ -618,6 +654,7 @@ export const useESQLDataVisualizerData = ( typeAccessor="secondaryType" timeFieldName={timeFieldName} onAddFilter={input.onAddFilter} + onVisibilityChange={onVisibilityChange} /> ); } @@ -625,7 +662,7 @@ export const useESQLDataVisualizerData = ( }, {} as ItemIdToExpandedRowMap); }, // eslint-disable-next-line react-hooks/exhaustive-deps - [currentDataView, totalCount, query.esql, timeFieldName] + [currentDataView, totalCount, query.esql, timeFieldName, onVisibilityChange] ); const combinedProgress = useMemo( diff --git a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_esql_overall_stats_data.ts b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_esql_overall_stats_data.ts index 3d023a6fc3811..7ea012d2d4b28 100644 --- a/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_esql_overall_stats_data.ts +++ b/x-pack/plugins/data_visualizer/public/application/index_data_visualizer/hooks/esql/use_esql_overall_stats_data.ts @@ -313,7 +313,6 @@ export const useESQLOverallStatsData = ( { strategy: ESQL_ASYNC_SEARCH_STRATEGY } )) as ESQLResponse | undefined; setQueryHistoryStatus(false); - const columnInfo = columnsResp?.rawResponse ? columnsResp.rawResponse.all_columns ?? columnsResp.rawResponse.columns : []; diff --git a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx index e971590a19faf..41291e3ac5057 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx @@ -180,8 +180,8 @@ export const DatavisualizerSelector: FC = () => { color="hollow" tooltipContent={ } tooltipPosition={'right'}