[Search]Add custom telemetry events

packages/kbn-optimizer/limits.yml

@@ -97,9 +97,9 @@ pageLoadAssetSize:
   interactiveSetup: 36524
   intercepts: 21066
   kibanaOverview: 6339
-  kibanaReact: 21499
+  kibanaReact: 21495
   kibanaUsageCollection: 1736
-  kibanaUtils: 54161
+  kibanaUtils: 54084
   kql: 15428
   kubernetesSecurity: 6807
   lens: 90000
@@ -154,7 +154,7 @@ pageLoadAssetSize:
   searchAssistant: 7079
   searchGettingStarted: 6678
   searchHomepage: 9005
-  searchInferenceEndpoints: 10345
+  searchInferenceEndpoints: 13404
   searchNavigation: 8900
   searchNotebooks: 18826
   searchPlayground: 12122

x-pack/platform/plugins/shared/search_inference_endpoints/kibana.jsonc

@@ -25,6 +25,7 @@
       "cloudConnect",
       "console",
       "serverless",
+      "usageCollection",
     ],
     "requiredBundles": [
       "kibanaReact",

x-pack/platform/plugins/shared/search_inference_endpoints/public/analytics/constants.ts

@@ -0,0 +1,22 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export enum EventType {
+  ENDPOINT_CREATED = 'searchInferenceEndpoints_endpoint_created',
+  ENDPOINT_EDITED = 'searchInferenceEndpoints_endpoint_edited',
+  DEFAULT_MODEL_CHANGED = 'searchInferenceEndpoints_default_model_changed',
+  FEATURE_SETTINGS_SAVED = 'searchInferenceEndpoints_feature_settings_saved',
+  FILTER_APPLIED = 'searchInferenceEndpoints_filter_applied',
+  GROUP_BY_CHANGED = 'searchInferenceEndpoints_group_by_changed',
+  EMPTY_STATE_VIEWED = 'searchInferenceEndpoints_empty_state_viewed',
+  FLYOUT_OPENED = 'searchInferenceEndpoints_flyout_opened',
+  FLYOUT_CLOSED = 'searchInferenceEndpoints_flyout_closed',
+  MODAL_OPENED = 'searchInferenceEndpoints_modal_opened',
+  MODAL_CLOSED = 'searchInferenceEndpoints_modal_closed',
+  EIS_MODEL_VIEWED = 'searchInferenceEndpoints_eis_model_viewed',
+  COPY_TO_FEATURE_TOGGLED = 'searchInferenceEndpoints_copy_to_feature_toggled',
+}

x-pack/platform/plugins/shared/search_inference_endpoints/public/application.tsx

@@ -13,6 +13,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { Router } from '@kbn/shared-ux-router';
 import type { AppPluginStartDependencies } from './types';
+import { UsageTrackerContextProvider } from './contexts/usage_tracker_context';
 
 const renderMgmtApp = (
   core: CoreStart,
@@ -24,9 +25,11 @@ const renderMgmtApp = (
     <KibanaRenderContextProvider {...core}>
       <KibanaContextProvider services={{ ...core, ...services }}>
         <I18nProvider>
-          <Router history={services.history}>
-            <Component />
-          </Router>
+          <UsageTrackerContextProvider usageCollection={services.usageCollection}>
+            <Router history={services.history}>
+              <Component />
+            </Router>
+          </UsageTrackerContextProvider>
         </I18nProvider>
       </KibanaContextProvider>
     </KibanaRenderContextProvider>,

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/add_inference_endpoints/add_inference_flyout_wrapper.tsx

@@ -10,6 +10,8 @@ import React, { useCallback } from 'react';
 import InferenceFlyoutWrapper from '@kbn/inference-endpoint-ui-common';
 import { ServiceProviderKeys } from '@kbn/inference-endpoint-ui-common';
 import { useKibana } from '../../hooks/use_kibana';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 const EXCLUDED_PROVIDERS = [ServiceProviderKeys.elasticsearch, ServiceProviderKeys.elastic];
 
@@ -29,10 +31,12 @@ export const AddInferenceFlyoutWrapper: React.FC<AddInferenceFlyoutWrapperProps>
       serverless,
     },
   } = useKibana();
+  const usageTracker = useUsageTracker();
 
   const onSubmitSuccess = useCallback(() => {
+    usageTracker.count(EventType.ENDPOINT_CREATED);
     reloadFn();
-  }, [reloadFn]);
+  }, [reloadFn, usageTracker]);
 
   return (
     <InferenceFlyoutWrapper

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/all_inference_endpoints/group_by_select.tsx

@@ -18,6 +18,8 @@ import { i18n } from '@kbn/i18n';
 
 import { GroupByOptions } from '../../types';
 import { GroupByFilterButton, GroupBySelectableContainer } from './styles';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 interface GroupBySelectProps {
   value: GroupByOptions;
@@ -59,13 +61,16 @@ function parseGroupByValue(value: string | undefined): GroupByOptions {
 
 export const GroupBySelect = ({ value, onChange }: GroupBySelectProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const usageTracker = useUsageTracker();
   const handleValueChange = useCallback(
     (newOptions: EuiSelectableOption[]) => {
       const selectedOption = newOptions.find((option) => option.checked === 'on');
-      onChange(parseGroupByValue(selectedOption?.key));
+      const parsed = parseGroupByValue(selectedOption?.key);
+      usageTracker.count([EventType.GROUP_BY_CHANGED, `${EventType.GROUP_BY_CHANGED}_${parsed}`]);
+      onChange(parsed);
       setIsPopoverOpen(false);
     },
-    [onChange]
+    [onChange, usageTracker]
   );
   const { options, selectedOptionLabel } = useMemo(() => {
     let selectedOption = GROUP_BY_OPTIONS[0].label;

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/edit_inference_endpoints/edit_inference_flyout.tsx

@@ -12,6 +12,8 @@ import { flattenObject } from '@kbn/object-utils';
 import type { InferenceInferenceEndpointInfo } from '@elastic/elasticsearch/lib/api/types';
 import { useKibana } from '../../hooks/use_kibana';
 import { useQueryInferenceEndpoints } from '../../hooks/use_inference_endpoints';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 interface EditInterfaceFlyoutProps {
   onFlyoutClose: () => void;
@@ -29,9 +31,11 @@ export const EditInferenceFlyout: React.FC<EditInterfaceFlyoutProps> = ({
     },
   } = useKibana();
   const { refetch } = useQueryInferenceEndpoints();
+  const usageTracker = useUsageTracker();
   const onEditSuccess = useCallback(() => {
+    usageTracker.count(EventType.ENDPOINT_EDITED);
     refetch();
-  }, [refetch]);
+  }, [refetch, usageTracker]);
   const onFocusReturn = useCallback(() => {
     // Defer focus until after any closing animations complete
     requestAnimationFrame(() => {

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/external_inference_empty_prompt.tsx

@@ -5,12 +5,14 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { EuiButton, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
 import { docLinks } from '../../common/doc_links';
+import { useUsageTracker } from '../contexts/usage_tracker_context';
+import { EventType } from '../analytics/constants';
 
 interface ExternalInferenceEmptyPromptProps {
   onFlyoutOpen: () => void;
@@ -19,6 +21,10 @@ interface ExternalInferenceEmptyPromptProps {
 export const ExternalInferenceEmptyPrompt: React.FC<ExternalInferenceEmptyPromptProps> = ({
   onFlyoutOpen,
 }) => {
+  const usageTracker = useUsageTracker();
+  useEffect(() => {
+    usageTracker.count(EventType.EMPTY_STATE_VIEWED);
+  }, [usageTracker]);
   return (
     <KibanaPageTemplate.EmptyPrompt
       data-test-subj="externalInferenceEmptyPrompt"

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/filter/multi_select_filter.tsx

@@ -19,6 +19,8 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import _ from 'lodash';
 import { optionCountStyles } from './styles';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 export interface MultiSelectFilterOption {
   key: string;
@@ -48,6 +50,7 @@ export const MultiSelectFilter: React.FC<UseFilterParams> = ({
   const euiThemeContext = useEuiTheme();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const toggleIsPopoverOpen = () => setIsPopoverOpen((prevValue) => !prevValue);
+  const usageTracker = useUsageTracker();
   const options: MultiSelectFilterOption[] = _.uniqBy(
     rawOptions.map(({ key, label }) => ({
       label,
@@ -91,7 +94,11 @@ export const MultiSelectFilter: React.FC<UseFilterParams> = ({
         emptyMessage={i18n.translate('xpack.searchInferenceEndpoints.filter.emptyMessage', {
           defaultMessage: 'No options',
         })}
-        onChange={onChange}
+        onChange={(newOptions) => {
+          const filter = dataTestSubj ?? 'unknown';
+          usageTracker.count([EventType.FILTER_APPLIED, `${EventType.FILTER_APPLIED}_${filter}`]);
+          onChange(newOptions);
+        }}
         singleSelection={false}
         renderOption={renderOption}
       >

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/inference_endpoints.tsx

@@ -16,18 +16,23 @@ import { TabularPage } from './all_inference_endpoints/tabular_page';
 import { ExternalInferenceHeader } from './external_inference_header';
 import { AddInferenceFlyoutWrapper } from './add_inference_endpoints/add_inference_flyout_wrapper';
 import { ExternalInferenceEmptyPrompt } from './external_inference_empty_prompt';
+import { useUsageTracker } from '../contexts/usage_tracker_context';
+import { EventType } from '../analytics/constants';
 
 export const InferenceEndpoints: React.FC = () => {
   const { data, isLoading, refetch } = useQueryInferenceEndpoints();
   const [isAddInferenceFlyoutOpen, setIsAddInferenceFlyoutOpen] = useState<boolean>(false);
+  const usageTracker = useUsageTracker();
 
   const onFlyoutOpen = useCallback(() => {
+    usageTracker.count([EventType.FLYOUT_OPENED, `${EventType.FLYOUT_OPENED}_add_inference`]);
     setIsAddInferenceFlyoutOpen(true);
-  }, []);
+  }, [usageTracker]);
 
   const onFlyoutClose = useCallback(() => {
+    usageTracker.count([EventType.FLYOUT_CLOSED, `${EventType.FLYOUT_CLOSED}_add_inference`]);
     setIsAddInferenceFlyoutOpen(false);
-  }, []);
+  }, [usageTracker]);
 
   const reload = useCallback(() => {
     refetch();

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/model_detail_flyout/model_detail_flyout.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   EuiBadge,
   EuiButtonEmpty,
@@ -35,6 +35,8 @@ import {
 import { getModelId } from '../../utils/get_model_id';
 import { AddEndpointModal } from './add_endpoint_modal';
 import { ModelEndpointRow } from './model_endpoint_row';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 export interface ModelDetailFlyoutProps {
   modelId: string;
@@ -56,6 +58,11 @@ export const ModelDetailFlyout: React.FC<ModelDetailFlyoutProps> = ({
   const flyoutTitleId = useGeneratedHtmlId();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editingEndpoint, setEditingEndpoint] = useState<InferenceAPIConfigResponse | undefined>();
+  const usageTracker = useUsageTracker();
+
+  useEffect(() => {
+    usageTracker.count([EventType.EIS_MODEL_VIEWED, `${EventType.EIS_MODEL_VIEWED}_${modelId}`]);
+  }, [usageTracker, modelId]);
 
   const { endpoints, displayName, modelAuthor } = useMemo(() => {
     const filtered = allEndpoints.filter((ep) => getModelId(ep) === modelId);
@@ -89,19 +96,25 @@ export const ModelDetailFlyout: React.FC<ModelDetailFlyoutProps> = ({
   }, [endpoints]);
 
   const handleOpenAddModal = useCallback(() => {
+    usageTracker.count([EventType.MODAL_OPENED, `${EventType.MODAL_OPENED}_add_endpoint`]);
     setEditingEndpoint(undefined);
     setIsModalOpen(true);
-  }, []);
+  }, [usageTracker]);
 
-  const handleOpenEditModal = useCallback((endpoint: InferenceAPIConfigResponse) => {
-    setEditingEndpoint(endpoint);
-    setIsModalOpen(true);
-  }, []);
+  const handleOpenEditModal = useCallback(
+    (endpoint: InferenceAPIConfigResponse) => {
+      usageTracker.count([EventType.MODAL_OPENED, `${EventType.MODAL_OPENED}_edit_endpoint`]);
+      setEditingEndpoint(endpoint);
+      setIsModalOpen(true);
+    },
+    [usageTracker]
+  );
 
   const handleCloseModal = useCallback(() => {
+    usageTracker.count(EventType.MODAL_CLOSED);
     setIsModalOpen(false);
     setEditingEndpoint(undefined);
-  }, []);
+  }, [usageTracker]);
 
   const descriptionListItems = [
     {

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/settings/copy_to_modal.tsx

@@ -24,6 +24,8 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useRegisteredFeatures } from '../../hooks/use_registered_features';
 import type { InferenceFeatureResponse as InferenceFeatureConfig } from '../../../common/types';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 interface CopyToModalProps {
   sourceFeatureName: string;
@@ -43,10 +45,15 @@ export const CopyToModal: React.FC<CopyToModalProps> = ({
   const modalTitleId = useGeneratedHtmlId();
   const { features: registeredFeatures } = useRegisteredFeatures();
   const [idToSelectedMap, setIdToSelectedMap] = useState<Record<string, boolean>>({});
+  const usageTracker = useUsageTracker();
 
-  const handleToggle = useCallback((id: string) => {
-    setIdToSelectedMap((prev) => ({ ...prev, [id]: !prev[id] }));
-  }, []);
+  const handleToggle = useCallback(
+    (id: string) => {
+      usageTracker.count(EventType.COPY_TO_FEATURE_TOGGLED);
+      setIdToSelectedMap((prev) => ({ ...prev, [id]: !prev[id] }));
+    },
+    [usageTracker]
+  );
 
   const treeItems = useMemo(() => {
     const parentNameMap = new Map(

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/settings/default_model_section.tsx

@@ -24,6 +24,8 @@ import { NO_DEFAULT_MODEL } from '../../../common/constants';
 import { useConnectors } from '../../hooks/use_connectors';
 import { useConnectorExists } from '../../hooks/use_connector_exists';
 import type { UseDefaultModelSettingsReturn } from '../../hooks/use_default_model_settings';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 interface Props {
   defaultModelSettings: UseDefaultModelSettingsReturn;
@@ -89,6 +91,7 @@ export const DefaultModelSection: React.FC<Props> = ({ defaultModelSettings }) =
   const { exists: connectorExists, loading: connectorExistsLoading } = useConnectorExists(
     state.defaultModelId
   );
+  const usageTracker = useUsageTracker();
 
   const options = useMemo(() => getOptions(connectors), [connectors]);
   const selectedOptions = useMemo(
@@ -124,6 +127,7 @@ export const DefaultModelSection: React.FC<Props> = ({ defaultModelSettings }) =
 
   const onChangeDefaultModel = (selected: EuiComboBoxOptionOption<string>[]) => {
     const value = selected[0]?.value ?? NO_DEFAULT_MODEL;
+    usageTracker.count(EventType.DEFAULT_MODEL_CHANGED);
     setDefaultModelId(value);
   };
 

x-pack/platform/plugins/shared/search_inference_endpoints/public/components/settings/model_settings.tsx

@@ -28,6 +28,8 @@ import { useModelSettingsForm } from './use_model_settings_form';
 import { useDefaultModelSettings } from '../../hooks/use_default_model_settings';
 import { useConnectors } from '../../hooks/use_connectors';
 import { useKibana } from '../../hooks/use_kibana';
+import { useUsageTracker } from '../../contexts/usage_tracker_context';
+import { EventType } from '../../analytics/constants';
 
 export const ModelSettings: React.FC = () => {
   const {
@@ -78,14 +80,17 @@ export const ModelSettings: React.FC = () => {
     };
   }, [isDirty, history]);
 
+  const usageTracker = useUsageTracker();
+
   const handleSave = useCallback(async () => {
     if (isFeatureDirty) {
       saveFeatures();
     }
     if (defaultModelSettings.isDirty) {
       await defaultModelSettings.save();
     }
-  }, [isFeatureDirty, saveFeatures, defaultModelSettings]);
+    usageTracker.count(EventType.FEATURE_SETTINGS_SAVED);
+  }, [isFeatureDirty, saveFeatures, defaultModelSettings, usageTracker]);
 
   const handleDiscardAndLeave = useCallback(() => {
     defaultModelSettings.reset();