[Lens] Track actions in the UI by time

x-pack/legacy/plugins/apm/typings/elasticsearch.ts

@@ -64,11 +64,22 @@ declare module 'elasticsearch' {
 
   // eslint-disable-next-line @typescript-eslint/prefer-interface
   type FiltersAggregation<SubAggregationMap> = {
-    buckets: Array<
-      {
-        doc_count: number;
-      } & SubAggregation<SubAggregationMap>
-    >;
+    // The filters aggregation can have named filters or anonymous filters,
+    // which changes the structure of the return
+    // https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-filters-aggregation.html
+    buckets: SubAggregationMap extends {
+      filters: { filters: Record<string, unknown> };
+    }
+      ? {
+          [key in keyof SubAggregationMap['filters']['filters']]: {
+            doc_count: number;
+          } & SubAggregation<SubAggregationMap>;
+        }
+      : Array<
+          {
+            doc_count: number;
+          } & SubAggregation<SubAggregationMap>
+        >;
   };
 
   type SamplerAggregation<SubAggregationMap> = SubAggregation<

x-pack/legacy/plugins/lens/index.ts

@@ -88,6 +88,7 @@ export const lens: LegacyPluginInitializer = kibana => {
         savedObjects: server.savedObjects,
         usage: server.usage,
         config: server.config(),
+        server,
       });
 
       server.events.on('stop', () => {

x-pack/legacy/plugins/lens/mappings.json

@@ -15,5 +15,21 @@
         "type": "keyword"
       }
     }
+  },
+  "lens-ui-telemetry": {
+    "properties": {
+      "name": {
+        "type": "keyword"
+      },
+      "type": {
+        "type": "keyword"
+      },
+      "date": {
+        "type": "date"
+      },
+      "count": {
+        "type": "integer"
+      }
+    }
   }
 }

x-pack/legacy/plugins/lens/public/app_plugin/app.tsx

@@ -25,6 +25,7 @@ import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_reac
 import { Document, SavedObjectStore } from '../persistence';
 import { EditorFrameInstance } from '../types';
 import { NativeRenderer } from '../native_renderer';
+import { trackUiEvent } from '../lens_ui_telemetry';
 
 interface State {
   isLoading: boolean;
@@ -84,6 +85,8 @@ export function App({
     const subscription = dataShim.filter.filterManager.getUpdates$().subscribe({
       next: () => {
         setState(s => ({ ...s, filters: dataShim.filter.filterManager.getFilters() }));
+
+        trackUiEvent('app_filters_updated');
       },
     });
     return () => {
@@ -198,6 +201,7 @@ export function App({
                           }
                         })
                         .catch(() => {
+                          trackUiEvent('save_failed');
                           core.notifications.toasts.addDanger(
                             i18n.translate('xpack.lens.editorFrame.docSavingError', {
                               defaultMessage: 'Error saving document',
@@ -214,6 +218,16 @@ export function App({
               screenTitle={'lens'}
               onQuerySubmit={payload => {
                 const { dateRange, query } = payload;
+
+                if (
+                  dateRange.from !== state.dateRange.fromDate ||
+                  dateRange.to !== state.dateRange.toDate
+                ) {
+                  trackUiEvent('app_date_change');
+                } else {
+                  trackUiEvent('app_query_change');
+                }
+
                 setState(s => ({
                   ...s,
                   dateRange: {

x-pack/legacy/plugins/lens/public/app_plugin/plugin.tsx

@@ -25,6 +25,12 @@ import {
 } from '../datatable_visualization_plugin';
 import { App } from './app';
 import { EditorFrameInstance } from '../types';
+import {
+  LensReportManager,
+  setReportManager,
+  stopReportManager,
+  trackUiEvent,
+} from '../lens_ui_telemetry';
 
 export interface LensPluginStartDependencies {
   data: DataPublicPluginStart;
@@ -63,7 +69,19 @@ export class AppPlugin {
 
     this.instance = editorFrameStartInterface.createInstance({});
 
+    // Sets it in memory for future click tracking
+    // If there was any previous manager set, clear it
+    stopReportManager();
+    setReportManager(
+      new LensReportManager({
+        storage: new Storage(localStorage),
+        basePath: core.http.basePath.get(),
+        http: core.http,
+      })
+    );
+
     const renderEditor = (routeProps: RouteComponentProps<{ id?: string }>) => {
+      trackUiEvent('loaded');
       return (
         <App
           core={core}
@@ -85,6 +103,7 @@ export class AppPlugin {
     };
 
     function NotFound() {
+      trackUiEvent('loaded_404');
       return <FormattedMessage id="xpack.lens.app404" defaultMessage="404 Not Found" />;
     }
 
@@ -106,6 +125,8 @@ export class AppPlugin {
       this.instance.unmount();
     }
 
+    stopReportManager();
+
     // TODO this will be handled by the plugin platform itself
     indexPatternDatasourceStop();
     xyVisualizationStop();

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx

@@ -18,6 +18,7 @@ import { i18n } from '@kbn/i18n';
 import { Visualization, FramePublicAPI, Datasource } from '../../types';
 import { Action } from './state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from './suggestion_helpers';
+import { trackUiEvent } from '../../lens_ui_telemetry';
 
 interface VisualizationSelection {
   visualizationId: string;
@@ -76,6 +77,8 @@ export function ChartSwitch(props: Props) {
   const commitSelection = (selection: VisualizationSelection) => {
     setFlyoutOpen(false);
 
+    trackUiEvent(`chart_switch`);
+
     switchToSuggestion(
       props.framePublicAPI,
       props.dispatch,

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx

@@ -27,6 +27,7 @@ import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
 import { ExpressionRenderer } from '../../../../../../../src/legacy/core_plugins/expressions/public';
 import { prependDatasourceExpression, prependKibanaContext } from './expression_helpers';
 import { debouncedComponent } from '../../debounced_component';
+import { trackUiEvent, trackSuggestionEvent } from '../../lens_ui_telemetry';
 
 const MAX_SUGGESTIONS_DISPLAYED = 5;
 
@@ -227,6 +228,7 @@ export function SuggestionPanel({
 
   function rollbackToCurrentVisualization() {
     if (lastSelectedSuggestion !== -1) {
+      trackSuggestionEvent('back_to_current');
       setLastSelectedSuggestion(-1);
       dispatch({
         type: 'ROLLBACK_SUGGESTION',
@@ -261,6 +263,7 @@ export function SuggestionPanel({
               data-test-subj="lensSubmitSuggestion"
               size="xs"
               onClick={() => {
+                trackUiEvent('suggestion_confirmed');
                 dispatch({
                   type: 'SUBMIT_SUGGESTION',
                 });
@@ -307,9 +310,11 @@ export function SuggestionPanel({
               ExpressionRenderer={ExpressionRendererComponent}
               key={index}
               onSelect={() => {
+                trackUiEvent('suggestion_clicked');
                 if (lastSelectedSuggestion === index) {
                   rollbackToCurrentVisualization();
                 } else {
+                  trackSuggestionEvent(`index_${index}_of_${suggestions.length}`);
                   setLastSelectedSuggestion(index);
                   switchToSuggestion(frame, dispatch, suggestion);
                 }

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

@@ -25,6 +25,7 @@ import { DragDrop, DragContext } from '../../drag_drop';
 import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
 import { buildExpression } from './expression_helpers';
 import { debouncedComponent } from '../../debounced_component';
+import { trackUiEvent } from '../../lens_ui_telemetry';
 
 export interface WorkspacePanelProps {
   activeVisualizationId: string | null;
@@ -60,6 +61,7 @@ export function InnerWorkspacePanel({
   core,
   ExpressionRenderer: ExpressionRendererComponent,
 }: WorkspacePanelProps) {
+  const [isEmpty, setIsEmpty] = useState(true);
   const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
   const emptyStateGraphicURL = IS_DARK_THEME
     ? '/plugins/lens/assets/lens_app_graphic_dark_2x.png'
@@ -93,6 +95,7 @@ export function InnerWorkspacePanel({
 
   function onDrop() {
     if (suggestionForDraggedField) {
+      trackUiEvent(isEmpty ? 'workspace_drop_on_empty' : 'workspace_drop_non_empty');
       switchToSuggestion(
         framePublicAPI,
         dispatch,
@@ -153,13 +156,19 @@ export function InnerWorkspacePanel({
       : null;
     const expression = useMemo(() => {
       try {
-        return buildExpression({
+        const tempExpression = buildExpression({
           visualization: activeVisualization,
           visualizationState,
           datasourceMap,
           datasourceStates,
           framePublicAPI,
         });
+        if (tempExpression) {
+          setIsEmpty(false);
+        } else {
+          setIsEmpty(true);
+        }
+        return tempExpression;
       } catch (e) {
         setExpressionError(e.toString());
       }

x-pack/legacy/plugins/lens/public/indexpattern_plugin/change_indexpattern.tsx

@@ -9,6 +9,7 @@ import React, { useState } from 'react';
 import { EuiButtonEmpty, EuiPopover, EuiSelectable, EuiButtonEmptyProps } from '@elastic/eui';
 import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 import { IndexPatternRef } from './types';
+import { trackUiEvent } from '../lens_ui_telemetry';
 
 export interface ChangeIndexPatternTriggerProps extends EuiButtonEmptyProps {
   label: string;
@@ -74,6 +75,7 @@ export function ChangeIndexPattern({
               const choice = (choices.find(({ checked }) => checked) as unknown) as {
                 value: string;
               };
+              trackUiEvent('indexpattern_changed');
               onChangeIndexPattern(choice.value);
               setPopoverIsOpen(false);
             }}

x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

@@ -35,6 +35,7 @@ import {
   IndexPatternField,
   IndexPatternRef,
 } from './types';
+import { trackUiEvent } from '../lens_ui_telemetry';
 import { syncExistingFields } from './loader';
 import { fieldExists } from './pure_helpers';
 
@@ -301,6 +302,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                   defaultMessage: 'Clear name and type filters',
                 }),
                 onClick: () => {
+                  trackUiEvent('indexpattern_filters_cleared');
                   setLocalState(s => ({
                     ...s,
                     nameFilter: '',
@@ -370,14 +372,15 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                     key={type}
                     icon={localState.typeFilter.includes(type) ? 'check' : 'empty'}
                     data-test-subj={`typeFilter-${type}`}
-                    onClick={() =>
+                    onClick={() => {
+                      trackUiEvent('indexpattern_type_filter_toggled');
                       setLocalState(s => ({
                         ...s,
                         typeFilter: localState.typeFilter.includes(type)
                           ? localState.typeFilter.filter(t => t !== type)
                           : [...localState.typeFilter, type],
-                      }))
-                    }
+                      }));
+                    }}
                   >
                     <LensFieldIcon type={type} /> {fieldTypeNames[type]}
                   </EuiContextMenuItem>
@@ -388,6 +391,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
                   compressed
                   checked={!showEmptyFields}
                   onChange={() => {
+                    trackUiEvent('indexpattern_existence_toggled');
                     onToggleEmptyFields();
                   }}
                   label={i18n.translate('xpack.lens.indexPatterns.toggleEmptyFieldsSwitch', {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx

@@ -22,6 +22,7 @@ import { DragContextState, ChildDragDropProvider, DragDrop } from '../../drag_dr
 import { changeColumn, deleteColumn } from '../state_helpers';
 import { isDraggedField, hasField } from '../utils';
 import { IndexPatternPrivateState, IndexPatternField } from '../types';
+import { trackUiEvent } from '../../lens_ui_telemetry';
 
 export type IndexPatternDimensionPanelProps = DatasourceDimensionPanelProps & {
   state: IndexPatternPrivateState;
@@ -137,6 +138,8 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
                 field: droppedItem.field,
               });
 
+          trackUiEvent('drop_onto_dimension');
+
           props.setState(
             changeColumn({
               state: props.state,
@@ -170,6 +173,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
               defaultMessage: 'Remove configuration',
             })}
             onClick={() => {
+              trackUiEvent('indexpattern_dimension_removed');
               props.setState(
                 deleteColumn({
                   state: props.state,

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx

@@ -18,6 +18,7 @@ import { LensFieldIcon } from '../lens_field_icon';
 import { DataType } from '../../types';
 import { OperationFieldSupportMatrix } from './dimension_panel';
 import { IndexPattern, IndexPatternField, IndexPatternPrivateState } from '../types';
+import { trackUiEvent } from '../../lens_ui_telemetry';
 import { fieldExists } from '../pure_helpers';
 
 export type FieldChoice =
@@ -170,6 +171,8 @@ export function FieldSelect({
           return;
         }
 
+        trackUiEvent('indexpattern_dimension_field_changed');
+
         onChoose((choices[0].value as unknown) as FieldChoice);
       }}
       renderOption={(option, searchValue) => {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx

@@ -34,6 +34,7 @@ import { FieldSelect } from './field_select';
 import { hasField } from '../utils';
 import { BucketNestingEditor } from './bucket_nesting_editor';
 import { IndexPattern, IndexPatternField } from '../types';
+import { trackUiEvent } from '../../lens_ui_telemetry';
 
 const operationPanels = getOperationDisplay();
 
@@ -162,10 +163,12 @@ export function PopoverEditor(props: PopoverEditorProps) {
               } else {
                 setInvalidOperationType(operationType);
               }
+              trackUiEvent(`indexpattern_dimension_operation_${operationType}`);
               return;
             }
             if (!compatibleWithCurrentField) {
               setInvalidOperationType(operationType);
+              trackUiEvent(`indexpattern_dimension_operation_${operationType}`);
               return;
             }
             if (incompatibleSelectedOperationType) {
@@ -182,6 +185,9 @@ export function PopoverEditor(props: PopoverEditorProps) {
               indexPattern: currentIndexPattern,
               field: hasField(selectedColumn) ? fieldMap[selectedColumn.sourceField] : undefined,
             });
+            trackUiEvent(
+              `indexpattern_dimension_operation_from_${selectedColumn.operationType}_to_${operationType}`
+            );
             setState(
               changeColumn({
                 state,

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

@@ -45,6 +45,7 @@ import { DatasourceDataPanelProps, DataType } from '../types';
 import { BucketedAggregation, FieldStatsResponse } from '../../common';
 import { IndexPattern, IndexPatternField } from './types';
 import { LensFieldIcon, getColorForDataType } from './lens_field_icon';
+import { trackUiEvent } from '../lens_ui_telemetry';
 
 export interface FieldItemProps {
   core: DatasourceDataPanelProps['core'];
@@ -141,6 +142,7 @@ export function FieldItem(props: FieldItemProps) {
   function togglePopover() {
     setOpen(!infoIsOpen);
     if (!infoIsOpen) {
+      trackUiEvent('indexpattern_field_info_click');
       fetchData();
     }
   }