[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 FieldStatisticsTableMemoized = 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);
@@ -315,7 +327,7 @@ export function DiscoverLayout({
                       stateContainer={stateContainer}
                     />
                   ) : (
-                    <DataVisualizerGridMemoized
+                    <FieldStatisticsTableMemoized
                       savedSearch={savedSearch}
                       services={services}
                       indexPattern={indexPattern}
@@ -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/data_visualizer_grid/data_visualizer_grid.tsx → src/plugins/discover/public/application/components/field_stats_table/field_stats_table.tsx

@@ -8,6 +8,7 @@
 
 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 {
@@ -19,6 +20,8 @@ import {
 } 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;
@@ -36,7 +39,7 @@ export interface DataVisualizerGridEmbeddableOutput extends EmbeddableOutput {
   showDistributions?: boolean;
 }
 
-export interface DiscoverDataVisualizerGridProps {
+export interface FieldStatisticsTableProps {
   /**
    * Determines which columns are displayed
    */
@@ -69,14 +72,24 @@ export interface DiscoverDataVisualizerGridProps {
    * 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 DiscoverDataVisualizerGrid = (props: DiscoverDataVisualizerGridProps) => {
+export const FieldStatisticsTable = (props: FieldStatisticsTableProps) => {
   const {
     services,
     indexPattern,
@@ -86,9 +99,10 @@ export const DiscoverDataVisualizerGrid = (props: DiscoverDataVisualizerGridProp
     filters,
     stateContainer,
     onAddFilter,
+    trackUiMetric,
+    savedSearchRefetch$,
   } = props;
   const { uiSettings } = services;
-
   const [embeddable, setEmbeddable] = useState<
     | ErrorEmbeddable
     | IEmbeddable<DataVisualizerGridEmbeddableInput, DataVisualizerGridEmbeddableOutput>
@@ -109,10 +123,16 @@ export const DiscoverDataVisualizerGrid = (props: DiscoverDataVisualizerGridProp
       }
     });
 
+    const refetch = savedSearchRefetch$?.subscribe(() => {
+      if (embeddable && !isErrorEmbeddable(embeddable)) {
+        embeddable.updateInput({ lastReloadRequestTime: Date.now() });
+      }
+    });
     return () => {
       sub?.unsubscribe();
+      refetch?.unsubscribe();
     };
-  }, [embeddable, stateContainer]);
+  }, [embeddable, stateContainer, savedSearchRefetch$]);
 
   useEffect(() => {
     if (embeddable && !isErrorEmbeddable(embeddable)) {
@@ -135,17 +155,11 @@ export const DiscoverDataVisualizerGrid = (props: DiscoverDataVisualizerGridProp
       embeddable.updateInput({
         showPreviewByDefault,
       });
+
       embeddable.reload();
     }
   }, [showPreviewByDefault, uiSettings, embeddable]);
 
-  useEffect(() => {
-    return () => {
-      // Clean up embeddable upon unmounting
-      embeddable?.destroy();
-    };
-  }, [embeddable]);
-
   useEffect(() => {
     let unmounted = false;
     const loadEmbeddable = async () => {
@@ -181,8 +195,15 @@ export const DiscoverDataVisualizerGrid = (props: DiscoverDataVisualizerGridProp
   useEffect(() => {
     if (embeddableRoot.current && embeddable) {
       embeddable.render(embeddableRoot.current);
+
+      trackUiMetric?.(METRIC_TYPE.LOADED, FIELD_STATISTICS_LOADED);
     }
-  }, [embeddable, embeddableRoot, uiSettings]);
+
+    return () => {
+      // Clean up embeddable upon unmounting
+      embeddable?.destroy();
+    };
+  }, [embeddable, embeddableRoot, uiSettings, trackUiMetric]);
 
   return (
     <div

src/plugins/discover/public/application/components/data_visualizer_grid/field_stats_table_embeddable.tsx → src/plugins/discover/public/application/components/field_stats_table/field_stats_table_saved_search_embeddable.tsx

@@ -8,15 +8,12 @@
 
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
-import {
-  DiscoverDataVisualizerGrid,
-  DiscoverDataVisualizerGridProps,
-} from './data_visualizer_grid';
+import { FieldStatisticsTable, FieldStatisticsTableProps } from './field_stats_table';
 
-export function FieldStatsTableEmbeddable(renderProps: DiscoverDataVisualizerGridProps) {
+export function FieldStatsTableSavedSearchEmbeddable(renderProps: FieldStatisticsTableProps) {
   return (
     <I18nProvider>
-      <DiscoverDataVisualizerGrid
+      <FieldStatisticsTable
         savedSearch={renderProps.savedSearch}
         services={renderProps.services}
         indexPattern={renderProps.indexPattern}

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

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { DiscoverDataVisualizerGrid } from './data_visualizer_grid';
+export { FieldStatisticsTable } from './field_stats_table';
+export { FieldStatsTableSavedSearchEmbeddable } from './field_stats_table_saved_search_embeddable';

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

@@ -47,7 +47,7 @@ import { getDefaultSort } from '../apps/main/components/doc_table';
 import { SortOrder } from '../apps/main/components/doc_table/components/table_header/helpers';
 import { updateSearchSource } from './helpers/update_search_source';
 import { VIEW_MODE } from '../apps/main/components/view_mode_toggle';
-import { FieldStatsTableEmbeddable } from '../components/data_visualizer_grid/field_stats_table_embeddable';
+import { FieldStatsTableSavedSearchEmbeddable } from '../components/field_stats_table';
 
 export type SearchProps = Partial<DiscoverGridProps> &
   Partial<DocTableProps> & {
@@ -391,7 +391,7 @@ export class SavedSearchEmbeddable
       Array.isArray(searchProps.columns)
     ) {
       ReactDOM.render(
-        <FieldStatsTableEmbeddable
+        <FieldStatsTableSavedSearchEmbeddable
           services={searchProps.services}
           indexPattern={searchProps.indexPattern}
           columns={searchProps.columns}

src/plugins/discover/public/url_generator.ts

@@ -10,6 +10,7 @@ import type { UrlGeneratorsDefinition } from '../../share/public';
 import type { TimeRange, Filter, Query, QueryState, RefreshInterval } from '../../data/public';
 import { esFilters } from '../../data/public';
 import { setStateToKbnUrl } from '../../kibana_utils/public';
+import { VIEW_MODE } from './application/apps/main/components/view_mode_toggle';
 
 export const DISCOVER_APP_URL_GENERATOR = 'DISCOVER_APP_URL_GENERATOR';
 
@@ -75,6 +76,8 @@ export interface DiscoverUrlGeneratorState {
    * id of the used saved query
    */
   savedQuery?: string;
+  viewMode?: VIEW_MODE;
+  hideAggregatedPreview?: boolean;
 }
 
 interface Params {
@@ -104,6 +107,8 @@ export class DiscoverUrlGenerator
     savedQuery,
     sort,
     interval,
+    viewMode,
+    hideAggregatedPreview,
   }: DiscoverUrlGeneratorState): Promise<string> => {
     const savedSearchPath = savedSearchId ? `view/${encodeURIComponent(savedSearchId)}` : '';
     const appState: {
@@ -114,6 +119,8 @@ export class DiscoverUrlGenerator
       interval?: string;
       sort?: string[][];
       savedQuery?: string;
+      viewMode?: VIEW_MODE;
+      hideAggregatedPreview?: boolean;
     } = {};
     const queryState: QueryState = {};
 
@@ -130,6 +137,8 @@ export class DiscoverUrlGenerator
     if (filters && filters.length)
       queryState.filters = filters?.filter((f) => esFilters.isFilterPinned(f));
     if (refreshInterval) queryState.refreshInterval = refreshInterval;
+    if (viewMode) appState.viewMode = viewMode;
+    if (hideAggregatedPreview) appState.hideAggregatedPreview = hideAggregatedPreview;
 
     let url = `${this.params.appBasePath}#/${savedSearchPath}`;
     url = setStateToKbnUrl<QueryState>('_g', queryState, { useHash }, url);