[8.x] [ES|QL] Disable field stats panel in Dashboard if ES|QL is disa…

…bled (#193587) (#193643) # Backport This will backport the following commits from `main` to `8.x`: - [[ES|QL] Disable field stats panel in Dashboard if ES|QL is disabled (#193587)](#193587)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Quynh Nguyen (Quinn) <[email protected]>
elastic · Sep 20, 2024 · 1acb27e · 1acb27e
1 parent 22a51e9
commit 1acb27e
Show file tree

Hide file tree

Showing 8 changed files with 804 additions and 736 deletions.
diff --git a/.../public/application/index_data_visualizer/embeddables/field_stats/field_stats_factory.tsx b/.../public/application/index_data_visualizer/embeddables/field_stats/field_stats_factory.tsx
@@ -38,13 +38,14 @@ import {
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { dynamic } from '@kbn/shared-ux-utility';
 import { isDefined } from '@kbn/ml-is-defined';
-import { EuiFlexItem } from '@elastic/eui';
+import { EuiCallOut, EuiEmptyPrompt, EuiFlexItem } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { ActionExecutionContext } from '@kbn/ui-actions-plugin/public';
 import type { Filter } from '@kbn/es-query';
 import { FilterStateStore } from '@kbn/es-query';
-import { getESQLAdHocDataview } from '@kbn/esql-utils';
+import { ENABLE_ESQL, getESQLAdHocDataview } from '@kbn/esql-utils';
 import { ACTION_GLOBAL_APPLY_FILTER } from '@kbn/unified-search-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { DataVisualizerTableState } from '../../../../../common/types';
 import type { DataVisualizerPluginStart } from '../../../../plugin';
 import type { FieldStatisticsTableEmbeddableState } from '../grid_embeddable/types';
@@ -153,39 +154,40 @@ export const getFieldStatsChartEmbeddableFactory = (
         serializeFieldStatsChartState,
         onFieldStatsTableDestroy,
         resetData$,
-      } = initializeFieldStatsControls(state);
+      } = initializeFieldStatsControls(state, deps.uiSettings);
       const { onError, dataLoading, blockingError } = dataLoadingApi;
 
-      const defaultDataViewId = await deps.data.dataViews.getDefaultId();
-      const validDataViewId: string =
-        isDefined(state.dataViewId) && state.dataViewId !== ''
-          ? state.dataViewId
-          : defaultDataViewId ?? '';
-      let initialDataView: DataView[] | undefined;
+      const validDataViewId: string | undefined =
+        isDefined(state.dataViewId) && state.dataViewId !== '' ? state.dataViewId : undefined;
+      let initialDataView: DataView | undefined;
       try {
         const dataView = isESQLQuery(state.query)
           ? await getESQLAdHocDataview(state.query.esql, deps.data.dataViews)
-          : await deps.data.dataViews.get(validDataViewId);
-        initialDataView = [dataView];
+          : validDataViewId
+          ? await deps.data.dataViews.get(validDataViewId)
+          : undefined;
+        initialDataView = dataView;
       } catch (error) {
         // Only need to publish blocking error if viewtype is data view, and no data view found
         if (state.viewType === FieldStatsInitializerViewType.DATA_VIEW) {
           onError(error);
         }
       }
 
-      const dataViews$ = new BehaviorSubject<DataView[] | undefined>(initialDataView);
+      const dataViews$ = new BehaviorSubject<DataView[] | undefined>(
+        initialDataView ? [initialDataView] : undefined
+      );
 
       const subscriptions = new Subscription();
       if (fieldStatsControlsApi.dataViewId$) {
         subscriptions.add(
           fieldStatsControlsApi.dataViewId$
             .pipe(
               skip(1),
-              skipWhile((dataViewId) => !dataViewId && !defaultDataViewId),
+              skipWhile((dataViewId) => !dataViewId),
               switchMap(async (dataViewId) => {
                 try {
-                  return await deps.data.dataViews.get(dataViewId ?? defaultDataViewId);
+                  return await deps.data.dataViews.get(dataViewId);
                 } catch (error) {
                   return undefined;
                 }
@@ -324,6 +326,8 @@ export const getFieldStatsChartEmbeddableFactory = (
               api.viewType$,
               api.showDistributions$
             );
+          const isEsqlEnabled = deps.uiSettings.get(ENABLE_ESQL);
+
           const lastReloadRequestTime = useObservable(reload$, Date.now());
 
           const isEsqlMode = viewType === FieldStatsInitializerViewType.ESQL;
@@ -362,6 +366,49 @@ export const getFieldStatsChartEmbeddableFactory = (
             };
           }, []);
 
+          if (viewType === FieldStatsInitializerViewType.DATA_VIEW && !dataViews) {
+            return (
+              <EuiEmptyPrompt
+                color="primary"
+                title={
+                  <h3>
+                    <FormattedMessage
+                      id="xpack.dataVisualizer.dashboard.fieldStats.noDataViewSelected"
+                      defaultMessage="No data view selected"
+                    />
+                  </h3>
+                }
+                body={
+                  <p>
+                    <FormattedMessage
+                      id="xpack.dataVisualizer.dashboard.fieldStats.noDataViewSelectedDescription"
+                      defaultMessage="Pick a data view to view field statistics."
+                    />
+                  </p>
+                }
+              />
+            );
+          }
+
+          if (isEsqlMode && !isEsqlEnabled) {
+            return (
+              <EuiFlexItem css={statsTableCss} data-test-subj="dashboardFieldStatsEmbeddedContent">
+                <EuiCallOut
+                  title={
+                    <h3>
+                      <FormattedMessage
+                        id="xpack.dataVisualizer.fieldStats.noDataViewSelected"
+                        defaultMessage="ES|QL is disabled"
+                      />
+                    </h3>
+                  }
+                  color="warning"
+                  iconType="alert"
+                />
+              </EuiFlexItem>
+            );
+          }
+
           return (
             <EuiFlexItem css={statsTableCss} data-test-subj="dashboardFieldStatsEmbeddedContent">
               <FieldStatisticsWrapper

diff --git a/...lic/application/index_data_visualizer/embeddables/field_stats/field_stats_initializer.tsx b/...lic/application/index_data_visualizer/embeddables/field_stats/field_stats_initializer.tsx
@@ -223,6 +223,7 @@ export const FieldStatisticsInitializer: FC<FieldStatsInitializerProps> = ({
                   defaultMessage: 'Data view',
                 }
               )}
+              css={css({ padding: euiThemeVars.euiSizeM })}
             >
               <IndexPatternSelect
                 autoFocus={!dataViewId}

diff --git a/...lication/index_data_visualizer/embeddables/field_stats/initialize_field_stats_controls.ts b/...lication/index_data_visualizer/embeddables/field_stats/initialize_field_stats_controls.ts
@@ -15,13 +15,22 @@ import type { AggregateQuery } from '@kbn/es-query';
 import type { StateComparators } from '@kbn/presentation-publishing';
 import { BehaviorSubject } from 'rxjs';
 import fastIsEqual from 'fast-deep-equal';
+import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import { ENABLE_ESQL } from '@kbn/esql-utils';
 import { FieldStatsInitializerViewType } from '../grid_embeddable/types';
 import type { FieldStatsInitialState } from '../grid_embeddable/types';
 import type { FieldStatsControlsApi } from './types';
 
-export const initializeFieldStatsControls = (rawState: FieldStatsInitialState) => {
+export const initializeFieldStatsControls = (
+  rawState: FieldStatsInitialState,
+  uiSettings: IUiSettingsClient
+) => {
+  const isEsqlEnabled = uiSettings.get(ENABLE_ESQL);
+  const defaultType = isEsqlEnabled
+    ? FieldStatsInitializerViewType.ESQL
+    : FieldStatsInitializerViewType.DATA_VIEW;
   const viewType$ = new BehaviorSubject<FieldStatsInitializerViewType | undefined>(
-    rawState.viewType ?? FieldStatsInitializerViewType.ESQL
+    rawState.viewType ?? defaultType
   );
   const dataViewId$ = new BehaviorSubject<string | undefined>(rawState.dataViewId);
   const query$ = new BehaviorSubject<AggregateQuery | undefined>(rawState.query);

diff --git a/...sualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx b/...sualizer/public/application/index_data_visualizer/ui_actions/create_field_stats_table.tsx
@@ -17,6 +17,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import React from 'react';
 import { isDefined } from '@kbn/ml-is-defined';
 import { COMMON_VISUALIZATION_GROUPING } from '@kbn/visualizations-plugin/public';
+import { ENABLE_ESQL } from '@kbn/esql-utils';
 import { FIELD_STATS_EMBEDDABLE_TYPE } from '../embeddables/field_stats/constants';
 import type { DataVisualizerStartDependencies } from '../../common/types/data_visualizer_plugin';
 import type {
@@ -139,22 +140,31 @@ export function createAddFieldStatsTableAction(
       i18n.translate('xpack.dataVisualizer.fieldStatistics.displayName', {
         defaultMessage: 'Field statistics',
       }),
+    disabled: !coreStart.uiSettings.get(ENABLE_ESQL),
     async isCompatible(context: EmbeddableApiContext) {
-      return Boolean(await parentApiIsCompatible(context.embeddable));
+      return (
+        Boolean(await parentApiIsCompatible(context.embeddable)) &&
+        coreStart.uiSettings.get(ENABLE_ESQL)
+      );
     },
     async execute(context) {
       const presentationContainerParent = await parentApiIsCompatible(context.embeddable);
       if (!presentationContainerParent) throw new IncompatibleActionError();
 
+      const isEsqlEnabled = coreStart.uiSettings.get(ENABLE_ESQL);
       try {
         const defaultIndexPattern = await pluginStart.data.dataViews.getDefault();
-        const defaultInitialState: FieldStatsInitialState = {
-          viewType: FieldStatsInitializerViewType.ESQL,
-          query: {
-            // Initial default query
-            esql: `from ${defaultIndexPattern?.getIndexPattern()} | limit 10`,
-          },
-        };
+        const defaultInitialState: FieldStatsInitialState = isEsqlEnabled
+          ? {
+              viewType: FieldStatsInitializerViewType.ESQL,
+              query: {
+                // Initial default query
+                esql: `from ${defaultIndexPattern?.getIndexPattern()} | limit 10`,
+              },
+            }
+          : {
+              viewType: FieldStatsInitializerViewType.DATA_VIEW,
+            };
         const embeddable = await presentationContainerParent.addNewPanel<
           object,
           FieldStatisticsTableEmbeddableApi

diff --git a/x-pack/plugins/data_visualizer/tsconfig.json b/x-pack/plugins/data_visualizer/tsconfig.json
@@ -88,7 +88,8 @@
     "@kbn/core-lifecycle-browser",
     "@kbn/presentation-containers",
     "@kbn/react-kibana-mount",
-    "@kbn/visualizations-plugin"
+    "@kbn/visualizations-plugin",
+    "@kbn/core-ui-settings-browser"
   ],
   "exclude": [
     "target/**/*",