Report telemetry for autocomplete (#91428) (#91648)

* Report telemetry about autocomplete * error cound * position of selected suggestion * length of query used to generate the suggestions Also added a couple if handly telemetry events: * query language switch * filter bar bulk actions * Fix ts * Report the value suggestions funnel * docs * docs * fix jest * test * code review Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 17, 2021 · a374f14 · a374f14
1 parent a54063b
commit a374f14
Show file tree

Hide file tree

Showing 22 changed files with 244 additions and 68 deletions.
diff --git a/...nt/plugins/data/public/kibana-plugin-plugins-data-public.idatapluginservices.md b/...nt/plugins/data/public/kibana-plugin-plugins-data-public.idatapluginservices.md
@@ -21,4 +21,5 @@ export interface IDataPluginServices extends Partial<CoreStart>
 |  [savedObjects](./kibana-plugin-plugins-data-public.idatapluginservices.savedobjects.md) | <code>CoreStart['savedObjects']</code> |  |
 |  [storage](./kibana-plugin-plugins-data-public.idatapluginservices.storage.md) | <code>IStorageWrapper</code> |  |
 |  [uiSettings](./kibana-plugin-plugins-data-public.idatapluginservices.uisettings.md) | <code>CoreStart['uiSettings']</code> |  |
+|  [usageCollection](./kibana-plugin-plugins-data-public.idatapluginservices.usagecollection.md) | <code>UsageCollectionStart</code> |  |
 
diff --git a/...public/kibana-plugin-plugins-data-public.idatapluginservices.usagecollection.md b/...public/kibana-plugin-plugins-data-public.idatapluginservices.usagecollection.md
@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [IDataPluginServices](./kibana-plugin-plugins-data-public.idatapluginservices.md) &gt; [usageCollection](./kibana-plugin-plugins-data-public.idatapluginservices.usagecollection.md)
+
+## IDataPluginServices.usageCollection property
+
+<b>Signature:</b>
+
+```typescript
+usageCollection?: UsageCollectionStart;
+```
diff --git a/.../development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md b/.../development/plugins/data/public/kibana-plugin-plugins-data-public.searchbar.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
+SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
 }
 ```
diff --git a/src/plugins/data/public/autocomplete/autocomplete_service.ts b/src/plugins/data/public/autocomplete/autocomplete_service.ts
@@ -16,6 +16,8 @@ import {
 } from './providers/value_suggestion_provider';
 
 import { ConfigSchema } from '../../config';
+import { UsageCollectionSetup } from '../../../usage_collection/public';
+import { createUsageCollector } from './collectors';
 
 export class AutocompleteService {
   autocompleteConfig: ConfigSchema['autocomplete'];
@@ -47,9 +49,17 @@ export class AutocompleteService {
   private hasQuerySuggestions = (language: string) => this.querySuggestionProviders.has(language);
 
   /** @public **/
-  public setup(core: CoreSetup, { timefilter }: { timefilter: TimefilterSetup }) {
+  public setup(
+    core: CoreSetup,
+    {
+      timefilter,
+      usageCollection,
+    }: { timefilter: TimefilterSetup; usageCollection?: UsageCollectionSetup }
+  ) {
+    const usageCollector = createUsageCollector(core.getStartServices, usageCollection);
+
     this.getValueSuggestions = this.autocompleteConfig.valueSuggestions.enabled
-      ? setupValueSuggestionProvider(core, { timefilter })
+      ? setupValueSuggestionProvider(core, { timefilter, usageCollector })
       : getEmptyValueSuggestions;
 
     return {

diff --git a/src/plugins/data/public/autocomplete/collectors/create_usage_collector.ts b/src/plugins/data/public/autocomplete/collectors/create_usage_collector.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 { first } from 'rxjs/operators';
+import { StartServicesAccessor } from '../../../../../core/public';
+import { METRIC_TYPE, UsageCollectionSetup } from '../../../../usage_collection/public';
+import { AUTOCOMPLETE_EVENT_TYPE, AutocompleteUsageCollector } from './types';
+
+export const createUsageCollector = (
+  getStartServices: StartServicesAccessor,
+  usageCollection?: UsageCollectionSetup
+): AutocompleteUsageCollector => {
+  const getCurrentApp = async () => {
+    const [{ application }] = await getStartServices();
+    return application.currentAppId$.pipe(first()).toPromise();
+  };
+
+  return {
+    trackCall: async () => {
+      const currentApp = await getCurrentApp();
+      return usageCollection?.reportUiCounter(
+        currentApp!,
+        METRIC_TYPE.LOADED,
+        AUTOCOMPLETE_EVENT_TYPE.CALL
+      );
+    },
+    trackRequest: async () => {
+      const currentApp = await getCurrentApp();
+      return usageCollection?.reportUiCounter(
+        currentApp!,
+        METRIC_TYPE.LOADED,
+        AUTOCOMPLETE_EVENT_TYPE.REQUEST
+      );
+    },
+    trackResult: async () => {
+      const currentApp = await getCurrentApp();
+      return usageCollection?.reportUiCounter(
+        currentApp!,
+        METRIC_TYPE.LOADED,
+        AUTOCOMPLETE_EVENT_TYPE.RESULT
+      );
+    },
+    trackError: async () => {
+      const currentApp = await getCurrentApp();
+      return usageCollection?.reportUiCounter(
+        currentApp!,
+        METRIC_TYPE.LOADED,
+        AUTOCOMPLETE_EVENT_TYPE.ERROR
+      );
+    },
+  };
+};
diff --git a/src/plugins/data/public/autocomplete/collectors/index.ts b/src/plugins/data/public/autocomplete/collectors/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 { createUsageCollector } from './create_usage_collector';
+export { AUTOCOMPLETE_EVENT_TYPE, AutocompleteUsageCollector } from './types';
diff --git a/src/plugins/data/public/autocomplete/collectors/types.ts b/src/plugins/data/public/autocomplete/collectors/types.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 enum AUTOCOMPLETE_EVENT_TYPE {
+  CALL = 'autocomplete:call',
+  REQUEST = 'autocomplete:req',
+  RESULT = 'autocomplete:res',
+  ERROR = 'autocomplete:err',
+}
+
+export interface AutocompleteUsageCollector {
+  trackCall: () => Promise<void>;
+  trackRequest: () => Promise<void>;
+  trackResult: () => Promise<void>;
+  trackError: () => Promise<void>;
+}
diff --git a/src/plugins/data/public/autocomplete/providers/value_suggestion_provider.test.ts b/src/plugins/data/public/autocomplete/providers/value_suggestion_provider.test.ts
@@ -18,7 +18,7 @@ describe('FieldSuggestions', () => {
 
   beforeEach(() => {
     const uiSettings = { get: (key: string) => shouldSuggestValues } as IUiSettingsClient;
-    http = { fetch: jest.fn() };
+    http = { fetch: jest.fn().mockResolvedValue([]) };
 
     getValueSuggestions = setupValueSuggestionProvider({ http, uiSettings } as CoreSetup, {
       timefilter: ({

diff --git a/src/plugins/data/public/autocomplete/providers/value_suggestion_provider.ts b/src/plugins/data/public/autocomplete/providers/value_suggestion_provider.ts
@@ -11,12 +11,7 @@ import { memoize } from 'lodash';
 import { CoreSetup } from 'src/core/public';
 import { IIndexPattern, IFieldType, UI_SETTINGS, buildQueryFromFilters } from '../../../common';
 import { TimefilterSetup } from '../../query';
-
-function resolver(title: string, field: IFieldType, query: string, filters: any[]) {
-  // Only cache results for a minute
-  const ttl = Math.floor(Date.now() / 1000 / 60);
-  return [ttl, query, title, field.name, JSON.stringify(filters)].join('|');
-}
+import { AutocompleteUsageCollector } from '../collectors';
 
 export type ValueSuggestionsGetFn = (args: ValueSuggestionsGetFnArgs) => Promise<any[]>;
 
@@ -47,15 +42,31 @@ export const getEmptyValueSuggestions = (() => Promise.resolve([])) as ValueSugg
 
 export const setupValueSuggestionProvider = (
   core: CoreSetup,
-  { timefilter }: { timefilter: TimefilterSetup }
+  {
+    timefilter,
+    usageCollector,
+  }: { timefilter: TimefilterSetup; usageCollector?: AutocompleteUsageCollector }
 ): ValueSuggestionsGetFn => {
+  function resolver(title: string, field: IFieldType, query: string, filters: any[]) {
+    // Only cache results for a minute
+    const ttl = Math.floor(Date.now() / 1000 / 60);
+    return [ttl, query, title, field.name, JSON.stringify(filters)].join('|');
+  }
+
   const requestSuggestions = memoize(
-    (index: string, field: IFieldType, query: string, filters: any = [], signal?: AbortSignal) =>
-      core.http.fetch(`/api/kibana/suggestions/values/${index}`, {
-        method: 'POST',
-        body: JSON.stringify({ query, field: field.name, filters }),
-        signal,
-      }),
+    (index: string, field: IFieldType, query: string, filters: any = [], signal?: AbortSignal) => {
+      usageCollector?.trackRequest();
+      return core.http
+        .fetch(`/api/kibana/suggestions/values/${index}`, {
+          method: 'POST',
+          body: JSON.stringify({ query, field: field.name, filters }),
+          signal,
+        })
+        .then((r) => {
+          usageCollector?.trackResult();
+          return r;
+        });
+    },
     resolver
   );
 
@@ -85,6 +96,16 @@ export const setupValueSuggestionProvider = (
       : undefined;
     const filterQuery = timeFilter ? buildQueryFromFilters([timeFilter], indexPattern).filter : [];
     const filters = [...(boolFilter ? boolFilter : []), ...filterQuery];
-    return await requestSuggestions(title, field, query, filters, signal);
+    try {
+      usageCollector?.trackCall();
+      return await requestSuggestions(title, field, query, filters, signal);
+    } catch (e) {
+      if (!signal?.aborted) {
+        usageCollector?.trackError();
+      }
+      // Remove rejected results from memoize cache
+      requestSuggestions.cache.delete(resolver(title, field, query, filters));
+      return [];
+    }
   };
 };
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
@@ -116,7 +116,10 @@ export class DataPublicPlugin
     );
 
     return {
-      autocomplete: this.autocomplete.setup(core, { timefilter: queryService.timefilter }),
+      autocomplete: this.autocomplete.setup(core, {
+        timefilter: queryService.timefilter,
+        usageCollection,
+      }),
       search: searchService,
       fieldFormats: this.fieldFormatsService.setup(core),
       query: queryService,
@@ -200,10 +203,7 @@ export class DataPublicPlugin
       core,
       data: dataServices,
       storage: this.storage,
-      trackUiMetric: this.usageCollection?.reportUiCounter.bind(
-        this.usageCollection,
-        'data_plugin'
-      ),
+      usageCollection: this.usageCollection,
     });
 
     return {

diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
@@ -105,7 +105,6 @@ import { Type } from '@kbn/config-schema';
 import { TypeOf } from '@kbn/config-schema';
 import { UiActionsSetup } from 'src/plugins/ui_actions/public';
 import { UiActionsStart } from 'src/plugins/ui_actions/public';
-import { UiCounterMetricType } from '@kbn/analytics';
 import { Unit } from '@elastic/datemath';
 import { UnregisterCallback } from 'history';
 import { URL } from 'url';
@@ -1094,6 +1093,10 @@ export interface IDataPluginServices extends Partial<CoreStart_2> {
     storage: IStorageWrapper;
     // (undocumented)
     uiSettings: CoreStart_2['uiSettings'];
+    // Warning: (ae-forgotten-export) The symbol "UsageCollectionStart" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    usageCollection?: UsageCollectionStart;
 }
 
 // Warning: (ae-missing-release-tag) "IEsSearchRequest" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -2255,8 +2258,8 @@ export const SEARCH_SESSIONS_MANAGEMENT_ID = "search_sessions";
 // Warning: (ae-missing-release-tag) "SearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
-    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "trackUiMetric" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
+export const SearchBar: React.ComponentClass<Pick<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated">, any> & {
+    WrappedComponent: React.ComponentType<Pick<SearchBarProps, "query" | "isLoading" | "indexPatterns" | "filters" | "dataTestSubj" | "intl" | "refreshInterval" | "screenTitle" | "onRefresh" | "onRefreshChange" | "showQueryInput" | "showDatePicker" | "showAutoRefreshOnly" | "dateRangeFrom" | "dateRangeTo" | "isRefreshPaused" | "customSubmitButton" | "timeHistory" | "indicateNoData" | "onFiltersUpdated" | "savedQuery" | "showSaveQuery" | "onClearSavedQuery" | "showQueryBar" | "showFilterBar" | "onQueryChange" | "onQuerySubmit" | "onSaved" | "onSavedQueryUpdated"> & ReactIntl.InjectedIntlProps>;
 };
 
 // Warning: (ae-forgotten-export) The symbol "SearchBarOwnProps" needs to be exported by the entry point index.d.ts

diff --git a/src/plugins/data/public/types.ts b/src/plugins/data/public/types.ts
@@ -19,7 +19,7 @@ import { ISearchSetup, ISearchStart, SearchEnhancements } from './search';
 import { QuerySetup, QueryStart } from './query';
 import { IndexPatternsContract } from './index_patterns';
 import { IndexPatternSelectProps, StatefulSearchBarProps } from './ui';
-import { UsageCollectionSetup } from '../../usage_collection/public';
+import { UsageCollectionSetup, UsageCollectionStart } from '../../usage_collection/public';
 import { Setup as InspectorSetup } from '../../inspector/public';
 import { NowProviderPublicContract } from './now_provider';
 
@@ -120,4 +120,5 @@ export interface IDataPluginServices extends Partial<CoreStart> {
   http: CoreStart['http'];
   storage: IStorageWrapper;
   data: DataPublicPluginStart;
+  usageCollection?: UsageCollectionStart;
 }