[ES|QL] Hide field statistics tab and Dashboard when ES|QL is in use,…

… disable Index data visualizer for MATCH and QSRT functions (elastic#197538) ## Summary Part of elastic#196995. This PR disables field statistics tab and Dashboard embeddable when ES|QL is in used. In Index data visualizer, it is disabled when MATCH & QSRT is in used. **1. Hide Discover's Field statistics tab:** https://github.com/user-attachments/assets/07cbf6ab-4e8f-4430-852a-2fe14269f26a **2. ML's Index data visualizer:** Message will popup and user will not be allowed to run query if it contains `MATCH` or `QRST` ![image](https://github.com/user-attachments/assets/42251d13-8b49-4eee-a65c-e275a4a7312f) **3. Dashboard:** Hide the option to add panel and show unavailable for existing ES|QL panel <img width="1728" alt="Screenshot 2024-11-05 at 09 44 21" src="https://github.com/user-attachments/assets/ef763c8d-cdd6-4ece-ae13-f45726e3ef16"> For existing dashboards and saved searches with ES|QL field statistics: <img width="1209" alt="Screenshot 2024-11-06 at 12 00 10" src="https://github.com/user-attachments/assets/3c423d01-42b1-48bc-994c-3340dee94bdc"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [ ] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Stratoula Kalafateli <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 61cc412)
kibanamachine · Nov 12, 2024 · 26ec970 · 26ec970
1 parent f3393e9
commit 26ec970
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}
     </>