[ML] Fix data visualizer grid failing if one of the fields failed and not updating when refreshed

src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx

@@ -8,6 +8,7 @@
 import './discover_layout.scss';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  EuiSpacer,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,7 +17,6 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
-  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -43,8 +43,12 @@ import {
   SavedSearchURLConflictCallout,
   useSavedSearchAliasMatchRedirect,
 } from '../../../../../saved_searches';
-import { DiscoverDataVisualizerGrid } from '../../../../components/data_visualizer_grid';
+import { FieldStatisticsTable } from '../../../../components/field_stats_table';
 import { VIEW_MODE } from '../view_mode_toggle';
+import {
+  DOCUMENTS_VIEW_CLICK,
+  FIELD_STATISTICS_VIEW_CLICK,
+} from '../../../../components/field_stats_table/constants';
 
 /**
  * Local storage key for sidebar persistence state
@@ -54,7 +58,7 @@ export const SIDEBAR_CLOSED_KEY = 'discover:sidebarClosed';
 const SidebarMemoized = React.memo(DiscoverSidebarResponsive);
 const TopNavMemoized = React.memo(DiscoverTopNav);
 const DiscoverChartMemoized = React.memo(DiscoverChart);
-const DataVisualizerGridMemoized = React.memo(DiscoverDataVisualizerGrid);
+const DataVisualizerGridMemoized = React.memo(FieldStatisticsTable);
 
 export function DiscoverLayout({
   indexPattern,
@@ -95,8 +99,16 @@ export function DiscoverLayout({
   const setDiscoverViewMode = useCallback(
     (mode: VIEW_MODE) => {
       stateContainer.setAppState({ viewMode: mode });
+
+      if (trackUiMetric) {
+        if (mode === VIEW_MODE.AGGREGATED_LEVEL) {
+          trackUiMetric(METRIC_TYPE.CLICK, FIELD_STATISTICS_VIEW_CLICK);
+        } else {
+          trackUiMetric(METRIC_TYPE.CLICK, DOCUMENTS_VIEW_CLICK);
+        }
+      }
     },
-    [stateContainer]
+    [trackUiMetric, stateContainer]
   );
 
   const fetchCounter = useRef<number>(0);
@@ -324,6 +336,8 @@ export function DiscoverLayout({
                       columns={columns}
                       stateContainer={stateContainer}
                       onAddFilter={onAddFilter}
+                      trackUiMetric={trackUiMetric}
+                      savedSearchRefetch$={savedSearchRefetch$}
                     />
                   )}
                 </EuiFlexGroup>

src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx

@@ -58,9 +58,11 @@ const FieldInfoIcon: React.FC = memo(() => (
   </EuiToolTip>
 ));
 
-const DiscoverFieldTypeIcon: React.FC<{ field: IndexPatternField }> = memo(({ field }) => (
-  <FieldIcon type={field.type} label={getFieldTypeName(field.type)} scripted={field.scripted} />
-));
+const DiscoverFieldTypeIcon: React.FC<{ field: IndexPatternField }> = memo(({ field }) => {
+  // If it's a string type, we want to distinguish between keyword and text
+  const tempType = field.type === 'string' && field.esTypes ? field.esTypes[0] : field.type;
+  return <FieldIcon type={tempType} label={getFieldTypeName(tempType)} scripted={field.scripted} />;
+});
 
 const FieldName: React.FC<{ field: IndexPatternField }> = memo(({ field }) => {
   const title =

src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.test.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { each, cloneDeep } from 'lodash';
+import { cloneDeep, each } from 'lodash';
 import { ReactWrapper } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-expect-error

src/plugins/discover/public/application/apps/main/components/sidebar/lib/get_field_type_name.ts

@@ -51,6 +51,15 @@ export function getFieldTypeName(type: string) {
       return i18n.translate('discover.fieldNameIcons.stringFieldAriaLabel', {
         defaultMessage: 'String field',
       });
+    case 'text':
+      return i18n.translate('discover.fieldNameIcons.textFieldAriaLabel', {
+        defaultMessage: 'Text field',
+      });
+    case 'keyword':
+      return i18n.translate('discover.fieldNameIcons.keywordFieldAriaLabel', {
+        defaultMessage: 'Keyword field',
+      });
+
     case 'nested':
       return i18n.translate('discover.fieldNameIcons.nestedFieldAriaLabel', {
         defaultMessage: 'Nested field',

src/plugins/discover/public/application/apps/main/services/discover_state.ts

@@ -411,5 +411,7 @@ function createUrlGeneratorState({
         }
       : undefined,
     useHash: false,
+    viewMode: appState.viewMode,
+    hideAggregatedPreview: appState.hideAggregatedPreview,
   };
 }

src/plugins/discover/public/application/components/field_stats_table/constants.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+/** Telemetry related to field statistics table **/
+export const FIELD_STATISTICS_LOADED = 'field_statistics_loaded';
+export const FIELD_STATISTICS_VIEW_CLICK = 'field_statistics_view_click';
+export const DOCUMENTS_VIEW_CLICK = 'documents_view_click';

src/plugins/discover/public/application/components/field_stats_table/field_stats_table.tsx

@@ -0,0 +1,217 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Filter } from '@kbn/es-query';
+import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics';
+import { IndexPatternField, IndexPattern, DataView, Query } from '../../../../../data/common';
+import { DiscoverServices } from '../../../build_services';
+import {
+  EmbeddableInput,
+  EmbeddableOutput,
+  ErrorEmbeddable,
+  IEmbeddable,
+  isErrorEmbeddable,
+} from '../../../../../embeddable/public';
+import { SavedSearch } from '../../../saved_searches';
+import { GetStateReturn } from '../../apps/main/services/discover_state';
+import { FIELD_STATISTICS_LOADED } from './constants';
+import { DataRefetch$ } from '../../apps/main/services/use_saved_search';
+
+export interface DataVisualizerGridEmbeddableInput extends EmbeddableInput {
+  indexPattern: IndexPattern;
+  savedSearch?: SavedSearch;
+  query?: Query;
+  visibleFieldNames?: string[];
+  filters?: Filter[];
+  showPreviewByDefault?: boolean;
+  /**
+   * Callback to add a filter to filter bar
+   */
+  onAddFilter?: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+}
+export interface DataVisualizerGridEmbeddableOutput extends EmbeddableOutput {
+  showDistributions?: boolean;
+}
+
+export interface DiscoverDataVisualizerGridProps {
+  /**
+   * Determines which columns are displayed
+   */
+  columns: string[];
+  /**
+   * The used index pattern
+   */
+  indexPattern: DataView;
+  /**
+   * Saved search description
+   */
+  searchDescription?: string;
+  /**
+   * Saved search title
+   */
+  searchTitle?: string;
+  /**
+   * Discover plugin services
+   */
+  services: DiscoverServices;
+  /**
+   * Optional saved search
+   */
+  savedSearch?: SavedSearch;
+  /**
+   * Optional query to update the table content
+   */
+  query?: Query;
+  /**
+   * Filters query to update the table content
+   */
+  filters?: Filter[];
+  /**
+   * State container with persisted settings
+   */
+  stateContainer?: GetStateReturn;
+  /**
+   * Callback to add a filter to filter bar
+   */
+  onAddFilter?: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+  /**
+   * Metric tracking function
+   * @param metricType
+   * @param eventName
+   */
+  trackUiMetric?: (metricType: UiCounterMetricType, eventName: string | string[]) => void;
+  savedSearchRefetch$?: DataRefetch$;
+}
+
+export const FieldStatisticsTable = (props: DiscoverDataVisualizerGridProps) => {
+  const {
+    services,
+    indexPattern,
+    savedSearch,
+    query,
+    columns,
+    filters,
+    stateContainer,
+    onAddFilter,
+    trackUiMetric,
+    savedSearchRefetch$,
+  } = props;
+  const { uiSettings } = services;
+  const [embeddable, setEmbeddable] = useState<
+    | ErrorEmbeddable
+    | IEmbeddable<DataVisualizerGridEmbeddableInput, DataVisualizerGridEmbeddableOutput>
+    | undefined
+  >();
+  const embeddableRoot: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  const showPreviewByDefault = useMemo(
+    () =>
+      stateContainer ? !stateContainer.appStateContainer.getState().hideAggregatedPreview : true,
+    [stateContainer]
+  );
+
+  useEffect(() => {
+    const sub = embeddable?.getOutput$().subscribe((output: DataVisualizerGridEmbeddableOutput) => {
+      if (output.showDistributions !== undefined && stateContainer) {
+        stateContainer.setAppState({ hideAggregatedPreview: !output.showDistributions });
+      }
+    });
+
+    const refetch = savedSearchRefetch$?.subscribe(() => {
+      if (embeddable && !isErrorEmbeddable(embeddable)) {
+        embeddable.updateInput({ lastReloadRequestTime: Date.now() });
+      }
+    });
+    return () => {
+      sub?.unsubscribe();
+      refetch?.unsubscribe();
+    };
+  }, [embeddable, stateContainer, savedSearchRefetch$]);
+
+  useEffect(() => {
+    if (embeddable && !isErrorEmbeddable(embeddable)) {
+      // Update embeddable whenever one of the important input changes
+      embeddable.updateInput({
+        indexPattern,
+        savedSearch,
+        query,
+        filters,
+        visibleFieldNames: columns,
+        onAddFilter,
+      });
+      embeddable.reload();
+    }
+  }, [embeddable, indexPattern, savedSearch, query, columns, filters, onAddFilter]);
+
+  useEffect(() => {
+    if (showPreviewByDefault && embeddable && !isErrorEmbeddable(embeddable)) {
+      // Update embeddable whenever one of the important input changes
+      embeddable.updateInput({
+        showPreviewByDefault,
+      });
+
+      embeddable.reload();
+    }
+  }, [showPreviewByDefault, uiSettings, embeddable]);
+
+  useEffect(() => {
+    let unmounted = false;
+    const loadEmbeddable = async () => {
+      if (services.embeddable) {
+        const factory = services.embeddable.getEmbeddableFactory<
+          DataVisualizerGridEmbeddableInput,
+          DataVisualizerGridEmbeddableOutput
+        >('data_visualizer_grid');
+        if (factory) {
+          // Initialize embeddable with information available at mount
+          const initializedEmbeddable = await factory.create({
+            id: 'discover_data_visualizer_grid',
+            indexPattern,
+            savedSearch,
+            query,
+            showPreviewByDefault,
+            onAddFilter,
+          });
+          if (!unmounted) {
+            setEmbeddable(initializedEmbeddable);
+          }
+        }
+      }
+    };
+    loadEmbeddable();
+    return () => {
+      unmounted = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [services.embeddable, showPreviewByDefault]);
+
+  // We can only render after embeddable has already initialized
+  useEffect(() => {
+    if (embeddableRoot.current && embeddable) {
+      embeddable.render(embeddableRoot.current);
+
+      trackUiMetric?.(METRIC_TYPE.LOADED, FIELD_STATISTICS_LOADED);
+    }
+
+    return () => {
+      // Clean up embeddable upon unmounting
+      embeddable?.destroy();
+    };
+  }, [embeddable, embeddableRoot, uiSettings, trackUiMetric]);
+
+  return (
+    <div
+      data-test-subj="dscFieldStatsEmbeddedContent"
+      ref={embeddableRoot}
+      style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
+      // Match the scroll bar of the Discover doc table
+      className="kbnDocTableWrapper"
+    />
+  );
+};

src/plugins/discover/public/application/components/field_stats_table/field_stats_table_saved_search_embeddable.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
+import { FieldStatisticsTable, DiscoverDataVisualizerGridProps } from './field_stats_table';
+
+export function FieldStatsTableSavedSearchEmbeddable(renderProps: DiscoverDataVisualizerGridProps) {
+  return (
+    <I18nProvider>
+      <FieldStatisticsTable
+        savedSearch={renderProps.savedSearch}
+        services={renderProps.services}
+        indexPattern={renderProps.indexPattern}
+        query={renderProps.query}
+        filters={renderProps.filters}
+        columns={renderProps.columns}
+        stateContainer={renderProps.stateContainer}
+        onAddFilter={renderProps.onAddFilter}
+      />
+    </I18nProvider>
+  );
+}

src/plugins/discover/public/application/components/field_stats_table/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export { FieldStatisticsTable } from './field_stats_table';
+export { FieldStatsTableSavedSearchEmbeddable } from './field_stats_table_saved_search_embeddable';