[8.x] [ES|QL] Hide field statistics tab and Dashboard when ES|QL is i…

…n use, disable Index data visualizer for MATCH and QSRT functions (#197538) (#199861) # Backport This will backport the following commits from `main` to `8.x`: - [[ES|QL] Hide field statistics tab and Dashboard when ES|QL is in use, disable Index data visualizer for MATCH and QSRT functions (#197538)](#197538)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Quynh Nguyen (Quinn) <[email protected]>
elastic · Nov 12, 2024 · f157662 · f157662
1 parent 8968625
commit f157662
Show file tree

Hide file tree

Showing 27 changed files with 350 additions and 335 deletions.
diff --git a/packages/kbn-esql-utils/index.ts b/packages/kbn-esql-utils/index.ts
@@ -32,6 +32,7 @@ export {
   isESQLColumnSortable,
   isESQLColumnGroupable,
   TextBasedLanguages,
+  queryCannotBeSampled,
 } from './src';
 
 export { ENABLE_ESQL, FEEDBACK_LINK } from './constants';
diff --git a/packages/kbn-esql-utils/src/index.ts b/packages/kbn-esql-utils/src/index.ts
@@ -22,6 +22,7 @@ export {
   retrieveMetadataColumns,
   getQueryColumnsFromESQLQuery,
 } from './utils/query_parsing_helpers';
+export { queryCannotBeSampled } from './utils/query_cannot_be_sampled';
 export { appendToESQLQuery, appendWhereClauseToESQLQuery } from './utils/append_to_query';
 export {
   getESQLQueryColumns,

diff --git a/packages/kbn-esql-utils/src/utils/query_cannot_be_sampled.test.ts b/packages/kbn-esql-utils/src/utils/query_cannot_be_sampled.test.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { queryCannotBeSampled } from './query_cannot_be_sampled';
+describe('queryCannotBeSampled', () => {
+  it('should return true if query contains "match" function', () => {
+    expect(queryCannotBeSampled({ esql: 'FROM index | where match(field, "value")' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where match()' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where MATCH()' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where MATCH(fieldName,)' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where MATCH(,)' })).toBe(true);
+  });
+
+  it('should return true if query contains "qstr" function', () => {
+    expect(queryCannotBeSampled({ esql: 'FROM index | where qstr(field, "value")' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where qstr()' })).toBe(true);
+    expect(queryCannotBeSampled({ esql: 'FROM index | where QSTR()' })).toBe(true);
+  });
+
+  it('should return false if query contains names', () => {
+    expect(queryCannotBeSampled({ esql: 'FROM index | eval match =' })).toBe(false);
+    expect(queryCannotBeSampled({ esql: 'FROM index | eval MATCH =' })).toBe(false);
+    expect(queryCannotBeSampled({ esql: 'FROM index | eval qstr =' })).toBe(false);
+  });
+
+  it('should return false if query does not contain unsamplable functions', () => {
+    expect(queryCannotBeSampled({ esql: 'FROM index | eval otherFunction(field, "value")' })).toBe(
+      false
+    );
+    expect(queryCannotBeSampled({ esql: 'FROM index | where otherFunction(field, "value")' })).toBe(
+      false
+    );
+  });
+
+  it('should return false if query is undefined', () => {
+    expect(queryCannotBeSampled(undefined)).toBe(false);
+    expect(queryCannotBeSampled(null)).toBe(false);
+  });
+});
diff --git a/packages/kbn-esql-utils/src/utils/query_cannot_be_sampled.ts b/packages/kbn-esql-utils/src/utils/query_cannot_be_sampled.ts
@@ -0,0 +1,46 @@
+/*
+ * 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 type { AggregateQuery, Query } from '@kbn/es-query';
+import { Walker } from '@kbn/esql-ast';
+import { parse } from '@kbn/esql-ast';
+import { isOfAggregateQueryType } from '@kbn/es-query';
+
+/**
+ * Check if the query contains any of the function names being passed in
+ * @param query
+ * @param functions list of function names to check for
+ * @returns
+ */
+export const queryContainsFunction = (
+  query: AggregateQuery | Query | { [key: string]: any } | undefined | null,
+  functions: string[]
+): boolean => {
+  if (query && isOfAggregateQueryType(query)) {
+    const { root } = parse(query.esql);
+    return functions.some(
+      (f) =>
+        Walker.hasFunction(root, f) ||
+        // Walker API expects valid queries so we need to do additional check for partial matches
+        root.commands.some((c) => c.text.toLowerCase().includes(`${f}(`))
+    );
+  }
+  return false;
+};
+
+const UNSAMPLABLE_FUNCTIONS = ['match', 'qstr'];
+/**
+ * Check if the query contains any function that cannot be used after LIMIT clause
+ * @param query
+ * @returns
+ */
+export const queryCannotBeSampled = (
+  query: AggregateQuery | Query | { [key: string]: any } | undefined | null
+): boolean => {
+  return queryContainsFunction(query, UNSAMPLABLE_FUNCTIONS);
+};
diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_summary_message.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_summary_message.tsx
@@ -12,8 +12,16 @@ import { EuiText } from '@elastic/eui';
 
 export interface FieldSummaryMessageProps {
   message: string;
+  dataTestSubj?: string;
 }
 
-export const FieldSummaryMessage: React.FC<FieldSummaryMessageProps> = ({ message }) => {
-  return <EuiText size="s">{message}</EuiText>;
+export const FieldSummaryMessage: React.FC<FieldSummaryMessageProps> = ({
+  message,
+  dataTestSubj,
+}) => {
+  return (
+    <EuiText size="s" data-test-subj={dataTestSubj}>
+      {message}
+    </EuiText>
+  );
 };
diff --git a/...plugins/discover/public/application/main/components/field_stats_table/field_stats_tab.tsx b/...plugins/discover/public/application/main/components/field_stats_table/field_stats_tab.tsx
@@ -9,9 +9,10 @@
 
 import React from 'react';
 import { useQuerySubscriber } from '@kbn/unified-field-list/src/hooks/use_query_subscriber';
-import { FieldStatisticsTable, type FieldStatisticsTableProps } from './field_stats_table';
-import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useAdditionalFieldGroups } from '../../hooks/sidebar/use_additional_field_groups';
+import { useDiscoverServices } from '../../../../hooks/use_discover_services';
+import { FieldStatisticsTable, type FieldStatisticsTableProps } from './field_stats_table';
+import { useIsEsqlMode } from '../../hooks/use_is_esql_mode';
 
 export const FieldStatisticsTab: React.FC<Omit<FieldStatisticsTableProps, 'query' | 'filters'>> =
   React.memo((props) => {
@@ -20,8 +21,13 @@ export const FieldStatisticsTab: React.FC<Omit<FieldStatisticsTableProps, 'query
       data: services.data,
     });
     const additionalFieldGroups = useAdditionalFieldGroups();
+    const isEsql = useIsEsqlMode();
+
+    // Quit early if we know it's in ES|QL mode
+    if (isEsql && services.dataVisualizer?.FieldStatsUnavailableMessage) {
+      return <services.dataVisualizer.FieldStatsUnavailableMessage />;
+    }
 
-    if (!services.dataVisualizer) return null;
     return (
       <FieldStatisticsTable
         dataView={props.dataView}

diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.test.tsx
@@ -107,15 +107,15 @@ describe('Document view mode toggle component', () => {
     expect(findTestSubject(component, 'dscViewModeFieldStatsButton').exists()).toBe(false);
   });
 
-  it('should show document and field stats view if ES|QL', async () => {
+  it('should not show document and field stats view if ES|QL', async () => {
     const component = await mountComponent({ isEsqlMode: true });
-    expect(findTestSubject(component, 'dscViewModeToggle').exists()).toBe(true);
+    expect(findTestSubject(component, 'dscViewModeToggle').exists()).toBe(false);
     expect(findTestSubject(component, 'discoverQueryTotalHits').exists()).toBe(true);
 
-    expect(findTestSubject(component, 'dscViewModeDocumentButton').exists()).toBe(true);
+    expect(findTestSubject(component, 'dscViewModeDocumentButton').exists()).toBe(false);
     expect(findTestSubject(component, 'dscViewModePatternAnalysisButton').exists()).toBe(false);
-    expect(findTestSubject(component, 'dscViewModeFieldStatsButton').exists()).toBe(true);
-    expect(findTestSubject(component, 'dscViewModeDocumentButton').text()).toBe('Results (10)');
+    expect(findTestSubject(component, 'dscViewModeFieldStatsButton').exists()).toBe(false);
+    expect(findTestSubject(component, 'discoverQueryHits').text()).toBe('10');
   });
 
   it('should set the view mode to VIEW_MODE.DOCUMENT_LEVEL when dscViewModeDocumentButton is clicked', async () => {

diff --git a/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx b/src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx
@@ -46,10 +46,16 @@ export const DocumentViewModeToggle = ({
     () => isLegacyTableEnabled({ uiSettings, isEsqlMode }),
     [uiSettings, isEsqlMode]
   );
+
   const [showPatternAnalysisTab, setShowPatternAnalysisTab] = useState<boolean | null>(null);
   const showFieldStatisticsTab = useMemo(
-    () => uiSettings.get(SHOW_FIELD_STATISTICS) && dataVisualizerService !== undefined,
-    [dataVisualizerService, uiSettings]
+    () =>
+      // If user opens saved search with field stats in ES|QL,
+      // we show the toggle with the mode disabled so user can switch to document view
+      // instead of auto-directing
+      (viewMode === VIEW_MODE.AGGREGATED_LEVEL && isEsqlMode) ||
+      (!isEsqlMode && uiSettings.get(SHOW_FIELD_STATISTICS) && dataVisualizerService !== undefined),
+    [dataVisualizerService, uiSettings, isEsqlMode, viewMode]
   );
   const isMounted = useMountedState();
 
@@ -100,6 +106,12 @@ export const DocumentViewModeToggle = ({
     }
   `;
 
+  useEffect(() => {
+    if (viewMode === VIEW_MODE.AGGREGATED_LEVEL && isEsqlMode) {
+      setDiscoverViewMode(VIEW_MODE.DOCUMENT_LEVEL);
+    }
+  }, [viewMode, isEsqlMode, setDiscoverViewMode]);
+
   return (
     <EuiFlexGroup
       direction="row"
@@ -157,6 +169,7 @@ export const DocumentViewModeToggle = ({
 
             {showFieldStatisticsTab ? (
               <EuiTab
+                disabled={isEsqlMode}
                 isSelected={viewMode === VIEW_MODE.AGGREGATED_LEVEL}
                 onClick={() => setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)}
                 data-test-subj="dscViewModeFieldStatsButton"

diff --git a/...s/discover/public/embeddable/components/search_embeddable_field_stats_table_component.tsx b/...s/discover/public/embeddable/components/search_embeddable_field_stats_table_component.tsx
@@ -13,10 +13,10 @@ import { BehaviorSubject } from 'rxjs';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { FetchContext, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-
 import { FieldStatisticsTable } from '../../application/main/components/field_stats_table';
 import { isEsqlMode } from '../initialize_fetch';
 import type { SearchEmbeddableApi, SearchEmbeddableStateManager } from '../types';
+import { useDiscoverServices } from '../../hooks/use_discover_services';
 
 interface SavedSearchEmbeddableComponentProps {
   api: SearchEmbeddableApi & {
@@ -37,8 +37,13 @@ export function SearchEmbeddablFieldStatsTableComponent({
     api.fetchContext$,
     api.savedSearch$
   );
-
   const isEsql = useMemo(() => isEsqlMode(savedSearch), [savedSearch]);
+  const services = useDiscoverServices();
+
+  // Quit early if we know it's in ES|QL mode
+  if (isEsql && services.dataVisualizer?.FieldStatsUnavailableMessage) {
+    return <services.dataVisualizer.FieldStatsUnavailableMessage />;
+  }
 
   return (
     <FieldStatisticsTable

diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts
@@ -91,7 +91,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         expect(await testSubjects.exists('showQueryBarMenu')).to.be(false);
         expect(await testSubjects.exists('addFilter')).to.be(false);
-        expect(await testSubjects.exists('dscViewModeDocumentButton')).to.be(true);
+        expect(await testSubjects.exists('dscViewModeDocumentButton')).to.be(false);
         // when Lens suggests a table, we render an ESQL based histogram
         expect(await testSubjects.exists('unifiedHistogramChart')).to.be(true);
         expect(await testSubjects.exists('discoverQueryHits')).to.be(true);

diff --git a/test/functional/apps/discover/group6/_field_stats_table.ts b/test/functional/apps/discover/group6/_field_stats_table.ts
@@ -64,13 +64,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await testSubjects.existOrFail('discoverDocTable');
         });
 
-        it('should show Field Statistics data in ES|QL mode', async () => {
+        it('should not show Field Statistics data in ES|QL mode', async () => {
           await discover.selectTextBaseLang();
-          await discover.waitUntilSearchingHasFinished();
-
-          await testSubjects.click('dscViewModeFieldStatsButton');
           await header.waitUntilLoadingHasFinished();
-          await testSubjects.existOrFail('dataVisualizerTableContainer');
+          await discover.waitUntilSearchingHasFinished();
+          await testSubjects.missingOrFail('dscViewModeFieldStatsButton');
         });
       });
     });

diff --git a/test/functional/apps/discover/group6/_view_mode_toggle.ts b/test/functional/apps/discover/group6/_view_mode_toggle.ts
@@ -95,25 +95,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
           it('should not show', async function () {
             await testSubjects.missingOrFail('dscViewModePatternAnalysisButton');
-            await retry.try(async () => {
-              const documentTab = await testSubjects.find('dscViewModeDocumentButton');
-              expect(await documentTab.getAttribute('aria-selected')).to.be('true');
-            });
           });
         });
 
-        it('should show Field Statistics tab', async () => {
-          await testSubjects.click('dscViewModeFieldStatsButton');
-
-          await retry.try(async () => {
-            const fieldStatsTab = await testSubjects.find('dscViewModeFieldStatsButton');
-            expect(await fieldStatsTab.getAttribute('aria-selected')).to.be('true');
-          });
-
+        it('should not show Field Statistics tab', async () => {
           await testSubjects.existOrFail('dscViewModeToggle');
         });
 
-        it('should still show view mode toggle for ES|QL searches', async () => {
+        it('should not show view mode toggle for ES|QL searches', async () => {
           await testSubjects.click('dscViewModeDocumentButton');
 
           await retry.try(async () => {
@@ -125,7 +114,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
           await discover.selectTextBaseLang();
 
-          await testSubjects.existOrFail('dscViewModeToggle');
+          await testSubjects.missingOrFail('dscViewModeToggle');
+          await testSubjects.existOrFail('discoverQueryTotalHits');
 
           if (!useLegacyTable) {
             await testSubjects.existOrFail('unifiedDataTableToolbar');

diff --git a/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx b/x-pack/packages/ml/date_picker/src/components/date_picker_wrapper.tsx
@@ -18,6 +18,7 @@ import {
   EuiFlexItem,
   EuiSuperDatePicker,
   type EuiSuperDatePickerProps,
+  EuiToolTip,
 } from '@elastic/eui';
 
 import type { TimeRange } from '@kbn/es-query';
@@ -103,6 +104,10 @@ interface DatePickerWrapperProps {
    * when EuiSuperDatePicker's 'Refresh'|'Update' button is clicked
    */
   onRefresh?: () => void;
+  /**
+   * Tooltip message for the update button
+   */
+  tooltipMessage?: string;
 }
 
 /**
@@ -122,6 +127,7 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     isDisabled = false,
     needsUpdate,
     onRefresh,
+    tooltipMessage,
   } = props;
   const {
     data,
@@ -318,34 +324,40 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
           recentlyUsedRanges={recentlyUsedRanges}
           dateFormat={dateFormat}
           commonlyUsedRanges={commonlyUsedRanges}
+          isDisabled={isDisabled}
           updateButtonProps={{
             iconOnly: isWithinLBreakpoint,
             fill: false,
             ...(needsUpdate ? { needsUpdate } : {}),
           }}
           width={width}
-          isDisabled={isDisabled}
         />
       </EuiFlexItem>
       {showRefresh === true || !isTimeRangeSelectorEnabled ? (
         <EuiFlexItem grow={false}>
-          <EuiButton
-            fill={false}
-            color={needsUpdate ? 'success' : 'primary'}
-            iconType={needsUpdate ? 'kqlFunction' : 'refresh'}
-            onClick={handleRefresh}
-            data-test-subj={`mlDatePickerRefreshPageButton${isLoading ? ' loading' : ' loaded'}`}
-            isLoading={isLoading}
-          >
-            {needsUpdate ? (
-              <FormattedMessage id="xpack.ml.datePicker.pageUpdateButton" defaultMessage="Update" />
-            ) : (
-              <FormattedMessage
-                id="xpack.ml.datePicker.pageRefreshButton"
-                defaultMessage="Refresh"
-              />
-            )}
-          </EuiButton>
+          <EuiToolTip content={tooltipMessage}>
+            <EuiButton
+              fill={false}
+              color={needsUpdate ? 'success' : 'primary'}
+              iconType={needsUpdate ? 'kqlFunction' : 'refresh'}
+              onClick={handleRefresh}
+              data-test-subj={`mlDatePickerRefreshPageButton${isLoading ? ' loading' : ' loaded'}`}
+              isLoading={isLoading}
+              isDisabled={isDisabled}
+            >
+              {needsUpdate ? (
+                <FormattedMessage
+                  id="xpack.ml.datePicker.pageUpdateButton"
+                  defaultMessage="Update"
+                />
+              ) : (
+                <FormattedMessage
+                  id="xpack.ml.datePicker.pageRefreshButton"
+                  defaultMessage="Refresh"
+                />
+              )}
+            </EuiButton>
+          </EuiToolTip>
         </EuiFlexItem>
       ) : null}
     </>