diff --git a/src/plugins/unified_histogram/public/__mocks__/lens_vis.ts b/src/plugins/unified_histogram/public/__mocks__/lens_vis.ts index b27b654a88f22..9b59403e569b3 100644 --- a/src/plugins/unified_histogram/public/__mocks__/lens_vis.ts +++ b/src/plugins/unified_histogram/public/__mocks__/lens_vis.ts @@ -32,7 +32,7 @@ export const getLensVisMock = async ({ breakdownField, dataView, allSuggestions, - hasHistogramSuggestionForESQL, + isTransformationalESQL, table, }: { filters: QueryParams['filters']; @@ -44,7 +44,7 @@ export const getLensVisMock = async ({ timeRange?: TimeRange | null; breakdownField: DataViewField | undefined; allSuggestions?: Suggestion[]; - hasHistogramSuggestionForESQL?: boolean; + isTransformationalESQL?: boolean; table?: Datatable; }): Promise<{ lensService: LensVisService; @@ -60,7 +60,9 @@ export const getLensVisMock = async ({ if ('query' in context && context.query === query) { return allSuggestions; } - return hasHistogramSuggestionForESQL ? [histogramESQLSuggestionMock] : []; + return !isTransformationalESQL && dataView.isTimeBased() + ? [histogramESQLSuggestionMock] + : []; } : lensApi.suggestions, }); diff --git a/src/plugins/unified_histogram/public/chart/chart.test.tsx b/src/plugins/unified_histogram/public/chart/chart.test.tsx index ed00c05f6f179..e127e1a4ab41c 100644 --- a/src/plugins/unified_histogram/public/chart/chart.test.tsx +++ b/src/plugins/unified_histogram/public/chart/chart.test.tsx @@ -44,7 +44,7 @@ async function mountComponent({ isPlainRecord, hasDashboardPermissions, isChartLoading, - hasHistogramSuggestionForESQL, + isTransformationalESQL, }: { customToggle?: ReactElement; noChart?: boolean; @@ -57,7 +57,7 @@ async function mountComponent({ isPlainRecord?: boolean; hasDashboardPermissions?: boolean; isChartLoading?: boolean; - hasHistogramSuggestionForESQL?: boolean; + isTransformationalESQL?: boolean; } = {}) { (searchSourceInstanceMock.fetch$ as jest.Mock).mockImplementation( jest.fn().mockReturnValue(of({ rawResponse: { hits: { total: noHits ? 0 : 2 } } })) @@ -87,7 +87,9 @@ async function mountComponent({ const requestParams = { query: isPlainRecord - ? { esql: 'from logs | limit 10' } + ? isTransformationalESQL + ? { esql: 'from logs | limit 10 | stats var0 = avg(bytes) by extension' } + : { esql: 'from logs | limit 10' } : { language: 'kuery', query: '', @@ -108,7 +110,7 @@ async function mountComponent({ breakdownField: undefined, columns: [], allSuggestions, - hasHistogramSuggestionForESQL, + isTransformationalESQL, }) ).lensService; @@ -211,12 +213,111 @@ describe('Chart', () => { expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); }); - test('render when is text based and not timebased', async () => { - const component = await mountComponent({ isPlainRecord: true, dataView: dataViewMock }); + test('should render when is text based, transformational and non-time-based', async () => { + const component = await mountComponent({ + isPlainRecord: true, + dataView: dataViewMock, + isTransformationalESQL: true, + }); expect( component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() ).toBeTruthy(); expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeTruthy(); + }); + + test('should not render when is text based, non-transformational and non-time-based', async () => { + const component = await mountComponent({ + isPlainRecord: true, + dataView: dataViewMock, + isTransformationalESQL: false, + }); + expect( + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() + ).toBeTruthy(); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeFalsy(); + }); + + test('should not render when is text based, non-transformational, non-time-based and suggestions are available', async () => { + const component = await mountComponent({ + allSuggestions: allSuggestionsMock, + isPlainRecord: true, + dataView: dataViewMock, + isTransformationalESQL: false, + }); + expect( + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() + ).toBeTruthy(); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeFalsy(); + }); + + test('should render when is text based, non-transformational and time-based', async () => { + const component = await mountComponent({ + isPlainRecord: true, + isTransformationalESQL: false, + }); + expect( + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() + ).toBeTruthy(); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeTruthy(); + }); + + test('should render when is text based, transformational and time-based', async () => { + const component = await mountComponent({ + isPlainRecord: true, + isTransformationalESQL: true, + }); + expect( + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() + ).toBeTruthy(); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeTruthy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeTruthy(); + }); + + test('should not render when is text based, transformational and no suggestions available', async () => { + const component = await mountComponent({ + allSuggestions: [], + isPlainRecord: true, + isTransformationalESQL: true, + }); + expect( + component.find('[data-test-subj="unifiedHistogramToggleChartButton"]').exists() + ).toBeTruthy(); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() + ).toBeFalsy(); + expect( + component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() + ).toBeFalsy(); }); test('render progress bar when text based and request is loading', async () => { @@ -267,35 +368,17 @@ describe('Chart', () => { expect(component.find(BreakdownFieldSelector).exists()).toBeFalsy(); }); - it('should render the edit on the fly button when chart is visible and suggestions exist', async () => { - const component = await mountComponent({ - allSuggestions: allSuggestionsMock, - isPlainRecord: true, - }); - expect( - component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() - ).toBeTruthy(); - }); - - it('should not render the edit on the fly button when chart is visible and suggestions dont exist', async () => { + it('should not render the save button when text-based and the dashboard save by value permissions are false', async () => { const component = await mountComponent({ allSuggestions: [], - hasHistogramSuggestionForESQL: false, - isPlainRecord: true, - }); - expect( - component.find('[data-test-subj="unifiedHistogramEditFlyoutVisualization"]').exists() - ).toBeFalsy(); - }); - - it('should render the save button when chart is visible and suggestions exist', async () => { - const component = await mountComponent({ - allSuggestions: allSuggestionsMock, + isTransformationalESQL: false, isPlainRecord: true, + hasDashboardPermissions: false, }); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); expect( component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() - ).toBeTruthy(); + ).toBeFalsy(); }); it('should not render the save button when the dashboard save by value permissions are false', async () => { @@ -303,6 +386,7 @@ describe('Chart', () => { allSuggestions: allSuggestionsMock, hasDashboardPermissions: false, }); + expect(component.find('[data-test-subj="unifiedHistogramChart"]').exists()).toBeTruthy(); expect( component.find('[data-test-subj="unifiedHistogramSaveVisualization"]').exists() ).toBeFalsy(); diff --git a/src/plugins/unified_histogram/public/layout/helpers.ts b/src/plugins/unified_histogram/public/layout/helpers.ts deleted file mode 100644 index 3ab7942c31c51..0000000000000 --- a/src/plugins/unified_histogram/public/layout/helpers.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the "Elastic License - * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side - * Public License v 1"; you may not use this file except in compliance with, at - * your election, the "Elastic License 2.0", the "GNU Affero General Public - * License v3.0 only", or the "Server Side Public License, v 1". - */ - -import { AggregateQuery } from '@kbn/es-query'; -import { hasTransformationalCommand } from '@kbn/esql-utils'; - -export const shouldDisplayHistogram = (query: AggregateQuery) => { - return !hasTransformationalCommand(query.esql); -}; diff --git a/src/plugins/unified_histogram/public/services/lens_vis_service.attributes.test.ts b/src/plugins/unified_histogram/public/services/lens_vis_service.attributes.test.ts index 75734387a9368..babea0335e1c3 100644 --- a/src/plugins/unified_histogram/public/services/lens_vis_service.attributes.test.ts +++ b/src/plugins/unified_histogram/public/services/lens_vis_service.attributes.test.ts @@ -765,7 +765,7 @@ describe('LensVisService attributes', () => { columns: [], isPlainRecord: true, allSuggestions: [], // none available - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.visContext?.attributes.state.query).toStrictEqual(histogramQuery); }); diff --git a/src/plugins/unified_histogram/public/services/lens_vis_service.suggestions.test.ts b/src/plugins/unified_histogram/public/services/lens_vis_service.suggestions.test.ts index 09ee2a68ec248..baeb330180ab8 100644 --- a/src/plugins/unified_histogram/public/services/lens_vis_service.suggestions.test.ts +++ b/src/plugins/unified_histogram/public/services/lens_vis_service.suggestions.test.ts @@ -86,7 +86,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: false, + isTransformationalESQL: true, }); expect(lensVis.currentSuggestionContext?.type).toBe(UnifiedHistogramSuggestionType.unsupported); @@ -115,7 +115,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.currentSuggestionContext?.type).toBe( @@ -153,7 +153,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.currentSuggestionContext?.type).toBe( @@ -191,7 +191,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: true, }); expect(lensVis.currentSuggestionContext?.type).toBe(UnifiedHistogramSuggestionType.unsupported); @@ -225,7 +225,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.currentSuggestionContext?.type).toBe( @@ -276,7 +276,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: allSuggestionsMock, - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.currentSuggestionContext?.type).toBe( @@ -307,7 +307,7 @@ describe('LensVisService suggestions', () => { ], isPlainRecord: true, allSuggestions: [], - hasHistogramSuggestionForESQL: true, + isTransformationalESQL: false, }); expect(lensVis.currentSuggestionContext?.type).toBe( diff --git a/src/plugins/unified_histogram/public/services/lens_vis_service.ts b/src/plugins/unified_histogram/public/services/lens_vis_service.ts index 04bf810848f29..1f119ee5b1c92 100644 --- a/src/plugins/unified_histogram/public/services/lens_vis_service.ts +++ b/src/plugins/unified_histogram/public/services/lens_vis_service.ts @@ -13,6 +13,7 @@ import { removeDropCommandsFromESQLQuery, appendToESQLQuery, isESQLColumnSortable, + hasTransformationalCommand, } from '@kbn/esql-utils'; import type { DataView, DataViewField } from '@kbn/data-views-plugin/common'; import type { @@ -50,7 +51,6 @@ import { injectESQLQueryIntoLensLayers, } from '../utils/external_vis_context'; import { computeInterval } from '../utils/compute_interval'; -import { shouldDisplayHistogram } from '../layout/helpers'; import { enrichLensAttributesWithTablesData } from '../utils/lens_vis_from_table'; const UNIFIED_HISTOGRAM_LAYER_ID = 'unifiedHistogram'; @@ -67,7 +67,6 @@ export enum LensVisServiceStatus { interface LensVisServiceState { status: LensVisServiceStatus; - allSuggestions: Suggestion[] | undefined; currentSuggestionContext: UnifiedHistogramSuggestionContext; visContext: UnifiedHistogramVisContext | undefined; } @@ -87,7 +86,6 @@ export class LensVisService { private lensSuggestionsApi: LensSuggestionsApi; status$: Observable; currentSuggestionContext$: Observable; - allSuggestions$: Observable; visContext$: Observable; prevUpdateContext: | { @@ -111,7 +109,6 @@ export class LensVisService { this.state$ = new BehaviorSubject({ status: LensVisServiceStatus.initial, - allSuggestions: undefined, currentSuggestionContext: { suggestion: undefined, type: UnifiedHistogramSuggestionType.unsupported, @@ -121,7 +118,6 @@ export class LensVisService { const stateSelector = stateSelectorFactory(this.state$); this.status$ = stateSelector((state) => state.status); - this.allSuggestions$ = stateSelector((state) => state.allSuggestions); this.currentSuggestionContext$ = stateSelector( (state) => state.currentSuggestionContext, isEqual @@ -152,15 +148,9 @@ export class LensVisService { externalVisContextStatus: UnifiedHistogramExternalVisContextStatus ) => void; }) => { - const allSuggestions = this.getAllSuggestions({ - queryParams, - preferredVisAttributes: externalVisContext?.attributes, - }); - const suggestionState = this.getCurrentSuggestionState({ externalVisContext, queryParams, - allSuggestions, timeInterval, breakdownField, }); @@ -182,7 +172,6 @@ export class LensVisService { this.state$.next({ status: LensVisServiceStatus.completed, - allSuggestions, currentSuggestionContext: suggestionState.currentSuggestionContext, visContext: lensAttributesState.visContext, }); @@ -225,13 +214,11 @@ export class LensVisService { }; private getCurrentSuggestionState = ({ - allSuggestions, externalVisContext, queryParams, timeInterval, breakdownField, }: { - allSuggestions: Suggestion[]; externalVisContext: UnifiedHistogramVisContext | undefined; queryParams: QueryParams; timeInterval: string | undefined; @@ -242,34 +229,41 @@ export class LensVisService { let type = UnifiedHistogramSuggestionType.unsupported; let currentSuggestion: Suggestion | undefined; - // takes lens suggestions if provided - let availableSuggestionsWithType: Array<{ + const availableSuggestionsWithType: Array<{ suggestion: UnifiedHistogramSuggestionContext['suggestion']; type: UnifiedHistogramSuggestionType; }> = []; - if (allSuggestions.length) { - availableSuggestionsWithType.push({ - suggestion: allSuggestions[0], - type: UnifiedHistogramSuggestionType.lensSuggestion, - }); - } - if (queryParams.isPlainRecord) { - // appends an ES|QL histogram - const histogramSuggestionForESQL = this.getHistogramSuggestionForESQL({ - queryParams, - breakdownField, - preferredVisAttributes: externalVisContext?.attributes, - }); - if (histogramSuggestionForESQL) { - // In case if histogram suggestion, we want to empty the array and push the new suggestion - // to ensure that only the histogram suggestion is available - availableSuggestionsWithType = []; - availableSuggestionsWithType.push({ - suggestion: histogramSuggestionForESQL, - type: UnifiedHistogramSuggestionType.histogramForESQL, - }); + if (isOfAggregateQueryType(queryParams.query)) { + if (hasTransformationalCommand(queryParams.query.esql)) { + // appends the first lens suggestion if available + const allSuggestions = this.getAllSuggestions({ + queryParams, + preferredVisAttributes: externalVisContext?.attributes, + }); + + if (allSuggestions.length) { + availableSuggestionsWithType.push({ + suggestion: allSuggestions[0], + type: UnifiedHistogramSuggestionType.lensSuggestion, + }); + } + } else { + // appends an ES|QL histogram if available + const histogramSuggestionForESQL = this.getHistogramSuggestionForESQL({ + queryParams, + breakdownField, + preferredVisAttributes: externalVisContext?.attributes, + }); + + if (histogramSuggestionForESQL) { + availableSuggestionsWithType.push({ + suggestion: histogramSuggestionForESQL, + type: UnifiedHistogramSuggestionType.histogramForESQL, + }); + } + } } } else { // appends histogram for the data view mode @@ -482,10 +476,13 @@ export class LensVisService { const breakdownColumn = breakdownField?.name ? columns?.find((column) => column.name === breakdownField.name) : undefined; - if (dataView.isTimeBased() && query && isOfAggregateQueryType(query) && timeRange) { - const isOnHistogramMode = shouldDisplayHistogram(query); - if (!isOnHistogramMode) return undefined; + if ( + dataView.isTimeBased() && + timeRange && + isOfAggregateQueryType(query) && + !hasTransformationalCommand(query.esql) + ) { const interval = computeInterval(timeRange, this.services.data); const esqlQuery = this.getESQLHistogramQuery({ dataView, @@ -609,13 +606,17 @@ export class LensVisService { }): Suggestion[] => { const { dataView, columns, query, isPlainRecord } = queryParams; + if (!isPlainRecord || !isOfAggregateQueryType(query)) { + return []; + } + const preferredChartType = preferredVisAttributes ? mapVisToChartType(preferredVisAttributes.visualizationType) : undefined; let visAttributes = preferredVisAttributes; - if (query && isOfAggregateQueryType(query) && preferredVisAttributes) { + if (preferredVisAttributes) { visAttributes = injectESQLQueryIntoLensLayers(preferredVisAttributes, query); } @@ -625,17 +626,16 @@ export class LensVisService { textBasedColumns: columns, query: query && isOfAggregateQueryType(query) ? query : undefined, }; - const allSuggestions = isPlainRecord - ? this.lensSuggestionsApi( - context, - dataView, - ['lnsDatatable'], - preferredChartType, - visAttributes - ) ?? [] - : []; - return allSuggestions; + return ( + this.lensSuggestionsApi( + context, + dataView, + ['lnsDatatable'], + preferredChartType, + visAttributes + ) ?? [] + ); }; private getLensAttributesState = ({ diff --git a/test/functional/apps/discover/group3/_lens_vis.ts b/test/functional/apps/discover/group3/_lens_vis.ts index bf7c41c803f17..71757ecbfcd20 100644 --- a/test/functional/apps/discover/group3/_lens_vis.ts +++ b/test/functional/apps/discover/group3/_lens_vis.ts @@ -115,11 +115,19 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']); await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/logstash_functional'); await kibanaServer.importExport.load('test/functional/fixtures/kbn_archiver/discover'); + await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/many_fields'); + await kibanaServer.importExport.load( + 'test/functional/fixtures/kbn_archiver/many_fields_data_view' + ); await browser.setWindowSize(1300, 1000); }); after(async () => { await kibanaServer.importExport.unload('test/functional/fixtures/kbn_archiver/discover'); + await kibanaServer.importExport.unload( + 'test/functional/fixtures/kbn_archiver/many_fields_data_view' + ); + await esArchiver.unload('test/functional/fixtures/es_archiver/many_fields'); await kibanaServer.uiSettings.replace({}); await kibanaServer.savedObjects.cleanStandardList(); }); @@ -192,6 +200,18 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { expect(await discover.getVisContextSuggestionType()).to.be('histogramForDataView'); }); + it('should show no histogram for non-time-based data in data view and ES|QL modes', async () => { + await dataViews.switchToAndValidate('indices-stats*'); + await header.waitUntilLoadingHasFinished(); + await discover.waitUntilSearchingHasFinished(); + await checkNoVis('50'); + + await discover.selectTextBaseLang(); + await header.waitUntilLoadingHasFinished(); + await discover.waitUntilSearchingHasFinished(); + await checkNoVis('10'); + }); + it('should show ESQL histogram for ES|QL query', async () => { await discover.selectTextBaseLang();