[ES|QL] Hide field statistics tab and Dashboard when ES|QL is in use, disable Index data visualizer for MATCH and QSRT functions

packages/kbn-esql-utils/index.ts

@@ -32,6 +32,7 @@ export {
   isESQLColumnSortable,
   isESQLColumnGroupable,
   TextBasedLanguages,
+  queryCannotBeSampled,
 } from './src';
 
 export { ENABLE_ESQL, FEEDBACK_LINK } from './constants';

packages/kbn-esql-utils/src/index.ts

@@ -22,6 +22,7 @@ export {
   retrieveMetadataColumns,
   getQueryColumnsFromESQLQuery,
 } from './utils/query_parsing_helpers';
+export { queryCannotBeSampled } from './utils/query_contains_function';
 export { appendToESQLQuery, appendWhereClauseToESQLQuery } from './utils/append_to_query';
 export {
   getESQLQueryColumns,

packages/kbn-esql-utils/src/utils/query_contains_function.ts

@@ -0,0 +1,41 @@
+/*
+ * 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));
+  }
+  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);
+};

packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx

@@ -53,6 +53,10 @@ import {
 import { FieldSummaryMessage } from './field_summary_message';
 import { FieldNumberSummary, isNumberSummaryValid } from './field_number_summary';
 import { ErrorBoundary } from '../error_boundary';
+import {
+  FIELD_DATA_LABEL,
+  getReasonIfFieldStatsUnavailableForQuery,
+} from '../../utils/get_warning_message';
 
 export interface FieldStatsState {
   isLoading: boolean;
@@ -187,6 +191,18 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
       abortControllerRef.current?.abort();
       abortControllerRef.current = new AbortController();
 
+      /**
+       * If the ES|QL query is unsupported, we can exit early
+       */
+      const unsupportedReasonForQuery = isTextBased
+        ? getReasonIfFieldStatsUnavailableForQuery(query, FIELD_DATA_LABEL)
+        : undefined;
+
+      if (unsupportedReasonForQuery) {
+        setState((s) => ({ ...s, isLoading: false }));
+        return;
+      }
+
       const results = isTextBased
         ? await loadFieldStatsTextBased({
             services: { data },
@@ -336,6 +352,20 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
       : messageNoAnalysis;
   }
 
+  const unsupportedReasonForQuery = getReasonIfFieldStatsUnavailableForQuery(
+    query,
+    FIELD_DATA_LABEL
+  );
+  if (unsupportedReasonForQuery) {
+    const messageUnsupportedReason = <FieldSummaryMessage message={unsupportedReasonForQuery} />;
+
+    return overrideMissingContent
+      ? overrideMissingContent({
+          reason: 'unsupported',
+          element: messageUnsupportedReason,
+        })
+      : messageUnsupportedReason;
+  }
   if (canProvideNumberSummaryForField(field, isTextBased) && isNumberSummaryValid(numberSummary)) {
     title = (
       <EuiTitle size="xxxs">

packages/kbn-unified-field-list/src/utils/get_warning_message.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { queryCannotBeSampled } from '@kbn/esql-utils';
+
+const FIELD_STATISTICS_LABEL = i18n.translate('unifiedFieldList.fieldStats.fieldStatisticsLabel', {
+  defaultMessage: `Field statistics are`,
+});
+
+export const FIELD_DATA_LABEL = i18n.translate('unifiedFieldList.fieldStats.fieldDataLabel', {
+  defaultMessage: `Field data is`,
+});
+
+export const getReasonIfFieldStatsUnavailableForQuery = (
+  query?: AggregateQuery | Query | { [key: string]: any },
+  label: string = FIELD_STATISTICS_LABEL
+): string | undefined => {
+  if (queryCannotBeSampled(query)) {
+    return i18n.translate('unifiedFieldList.fieldStats.notAvailableForMatchESQLQueryDescription', {
+      defaultMessage: `{label} not supported for ES|QL queries with 'MATCH' or 'QSTR' functions.`,
+      values: { label },
+    });
+  }
+};

src/plugins/discover/public/components/view_mode_toggle/view_mode_toggle.tsx

@@ -8,12 +8,13 @@
  */
 
 import React, { useMemo, useEffect, useState, type ReactElement, useCallback } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { isLegacyTableEnabled, SHOW_FIELD_STATISTICS } from '@kbn/discover-utils';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import useMountedState from 'react-use/lib/useMountedState';
+import { getReasonIfFieldStatsUnavailableForQuery } from '@kbn/unified-field-list/src/utils/get_warning_message';
 import { VIEW_MODE } from '../../../common/constants';
 import { useDiscoverServices } from '../../hooks/use_discover_services';
 import type { DiscoverStateContainer } from '../../application/main/state_management/discover_state';
@@ -46,6 +47,11 @@ export const DocumentViewModeToggle = ({
     () => isLegacyTableEnabled({ uiSettings, isEsqlMode }),
     [uiSettings, isEsqlMode]
   );
+  const state = stateContainer.appState.getState();
+  const fieldStatsWarningMsgForQuery = useMemo(() => {
+    return getReasonIfFieldStatsUnavailableForQuery(state.query);
+  }, [state.query]);
+
   const [showPatternAnalysisTab, setShowPatternAnalysisTab] = useState<boolean | null>(null);
   const showFieldStatisticsTab = useMemo(
     () => uiSettings.get(SHOW_FIELD_STATISTICS) && dataVisualizerService !== undefined,
@@ -157,14 +163,17 @@ export const DocumentViewModeToggle = ({
 
             {showFieldStatisticsTab ? (
               <EuiTab
+                disabled={fieldStatsWarningMsgForQuery !== undefined}
                 isSelected={viewMode === VIEW_MODE.AGGREGATED_LEVEL}
                 onClick={() => setDiscoverViewMode(VIEW_MODE.AGGREGATED_LEVEL)}
                 data-test-subj="dscViewModeFieldStatsButton"
               >
-                <FormattedMessage
-                  id="discover.viewModes.fieldStatistics.label"
-                  defaultMessage="Field statistics"
-                />
+                <EuiToolTip content={fieldStatsWarningMsgForQuery}>
+                  <FormattedMessage
+                    id="discover.viewModes.fieldStatistics.label"
+                    defaultMessage="Field statistics"
+                  />
+                </EuiToolTip>
               </EuiTab>
             ) : null}
           </EuiTabs>

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}
     </>

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx

@@ -65,7 +65,7 @@ interface DataVisualizerTableProps<T extends object> {
   error?: Error | string;
 }
 
-export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
+const UnmemoizedDataVisualizerTable = <T extends DataVisualizerTableItem>({
   items,
   pageState,
   updatePageState,
@@ -506,3 +506,7 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
     </EuiResizeObserver>
   );
 };
+
+export const DataVisualizerTable = React.memo(
+  UnmemoizedDataVisualizerTable
+) as typeof UnmemoizedDataVisualizerTable;

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_esql.tsx

@@ -24,12 +24,13 @@ import {
   EuiPanel,
   EuiProgress,
   EuiSpacer,
+  EuiCallOut,
 } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/common';
 import { getIndexPatternFromESQLQuery } from '@kbn/esql-utils';
+import { getReasonIfFieldStatsUnavailableForQuery } from '@kbn/unified-field-list/src/utils/get_warning_message';
 import { getOrCreateDataViewByIndexPattern } from '../../search_strategy/requests/get_data_view_by_index_pattern';
 import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme';
-import type { FieldVisConfig } from '../../../common/components/stats_table/types';
 import { DATA_VISUALIZER_INDEX_VIEWER } from '../../constants/index_data_visualizer_viewer';
 import { useDataVisualizerKibana } from '../../../kibana_context';
 import type { GetAdditionalLinks } from '../../../common/components/results_links';
@@ -64,6 +65,8 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
   const [query, setQuery] = useState<ESQLQuery>(DEFAULT_ESQL_QUERY);
   const [currentDataView, setCurrentDataView] = useState<DataView | undefined>();
 
+  const unsupportedReasonForQuery = getReasonIfFieldStatsUnavailableForQuery(localQuery);
+
   const toggleShowEmptyFields = () => {
     setDataVisualizerListState({
       ...dataVisualizerListState,
@@ -202,8 +205,11 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
   const onTextLangQuerySubmit = useCallback(
     async (q: AggregateQuery | undefined) => {
       if (isESQLQuery(q)) {
-        resetData();
-        setQuery(q);
+        const isUnsupported = getReasonIfFieldStatsUnavailableForQuery(q) !== undefined;
+        if (!isUnsupported) {
+          resetData();
+          setQuery(q);
+        }
       }
     },
     [resetData]
@@ -224,8 +230,19 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
             data-test-subj="dataViewTitleHeader"
             direction="row"
             alignItems="center"
-            css={{ padding: `${euiTheme.euiSizeS} 0`, marginRight: `${euiTheme.euiSize}` }}
-          />
+            css={{ padding: 0, marginRight: 0 }}
+          >
+            {unsupportedReasonForQuery ? (
+              <EuiFlexItem grow={true}>
+                <EuiCallOut
+                  size="s"
+                  iconType="warning"
+                  color="warning"
+                  title={unsupportedReasonForQuery}
+                />
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
 
           {isWithinLargeBreakpoint ? <EuiSpacer size="m" /> : null}
           <EuiFlexGroup
@@ -253,7 +270,8 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
                 width="full"
                 needsUpdate={queryNeedsUpdate}
                 onRefresh={handleRefresh}
-                isDisabled={!hasValidTimeField}
+                isDisabled={unsupportedReasonForQuery !== undefined}
+                tooltipMessage={unsupportedReasonForQuery}
               />
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -276,6 +294,7 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
             hideRunQueryText={false}
             isLoading={queryHistoryStatus ?? false}
             displayDocumentationAsFlyout
+            disableSubmitAction={unsupportedReasonForQuery !== undefined}
           />
         </EuiFlexItem>
 
@@ -312,7 +331,7 @@ export const IndexDataVisualizerESQL: FC<IndexDataVisualizerESQLProps> = (dataVi
               <EuiSpacer size="s" />
 
               <EuiProgress value={combinedProgress} max={100} size="xs" />
-              <DataVisualizerTable<FieldVisConfig>
+              <DataVisualizerTable
                 items={configs}
                 pageState={dataVisualizerListState}
                 updatePageState={setDataVisualizerListState}