[Discover] Adding uiMetric to track Visualize link click (#82344)

* [Discover] Adding uiMetric around Visualize link click

* Change metric name

* Fixing wrong merge

* Applying PR fixes

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/discover/kibana.json

@@ -14,6 +14,6 @@
     "uiActions",
     "savedObjects"
   ],
-  "optionalPlugins": ["home", "share"],
+  "optionalPlugins": ["home", "share", "usageCollection"],
   "requiredBundles": ["kibanaUtils", "home", "kibanaReact"]
 }

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

@@ -122,6 +122,7 @@ export function DiscoverLegacy({
 }: DiscoverLegacyProps) {
   const [isSidebarClosed, setIsSidebarClosed] = useState(false);
   const { TopNavMenu } = getServices().navigation.ui;
+  const { trackUiMetric } = getServices();
   const { savedSearch, indexPatternList } = opts;
   const bucketAggConfig = opts.chartAggConfigs?.aggs[1];
   const bucketInterval =
@@ -189,6 +190,7 @@ export function DiscoverLegacy({
                     onRemoveField={onRemoveColumn}
                     selectedIndexPattern={searchSource && searchSource.getField('index')}
                     setIndexPattern={setIndexPattern}
+                    trackUiMetric={trackUiMetric}
                   />
                 </div>
               )}

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

@@ -19,6 +19,7 @@
 import React, { useState } from 'react';
 import { EuiPopover, EuiPopoverTitle, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { UiStatsMetricType } from '@kbn/analytics';
 import { DiscoverFieldDetails } from './discover_field_details';
 import { FieldIcon, FieldButton } from '../../../../../kibana_react/public';
 import { FieldDetails } from './types';
@@ -61,6 +62,12 @@ export interface DiscoverFieldProps {
    * Determines whether the field name is shortened test.sub1.sub2 = t.s.sub2
    */
   useShortDots?: boolean;
+  /**
+   * Metric tracking function
+   * @param metricType
+   * @param eventName
+   */
+  trackUiMetric?: (metricType: UiStatsMetricType, eventName: string | string[]) => void;
 }
 
 export function DiscoverField({
@@ -72,6 +79,7 @@ export function DiscoverField({
   getDetails,
   selected,
   useShortDots,
+  trackUiMetric,
 }: DiscoverFieldProps) {
   const addLabelAria = i18n.translate('discover.fieldChooser.discoverField.addButtonAriaLabel', {
     defaultMessage: 'Add {field} to table',
@@ -220,6 +228,7 @@ export function DiscoverField({
           field={field}
           details={getDetails(field)}
           onAddFilter={onAddFilter}
+          trackUiMetric={trackUiMetric}
         />
       )}
     </EuiPopover>

src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx

@@ -19,6 +19,7 @@
 import React, { useState, useEffect } from 'react';
 import { EuiLink, EuiIconTip, EuiText, EuiPopoverFooter, EuiButton, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { METRIC_TYPE, UiStatsMetricType } from '@kbn/analytics';
 import { DiscoverFieldBucket } from './discover_field_bucket';
 import { getWarnings } from './lib/get_warnings';
 import {
@@ -35,6 +36,7 @@ interface DiscoverFieldDetailsProps {
   indexPattern: IndexPattern;
   details: FieldDetails;
   onAddFilter: (field: IndexPatternField | string, value: string, type: '+' | '-') => void;
+  trackUiMetric?: (metricType: UiStatsMetricType, eventName: string | string[]) => void;
 }
 
 export function DiscoverFieldDetails({
@@ -42,6 +44,7 @@ export function DiscoverFieldDetails({
   indexPattern,
   details,
   onAddFilter,
+  trackUiMetric,
 }: DiscoverFieldDetailsProps) {
   const warnings = getWarnings(field);
   const [showVisualizeLink, setShowVisualizeLink] = useState<boolean>(false);
@@ -70,6 +73,9 @@ export function DiscoverFieldDetails({
   const handleVisualizeLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     // regular link click. let the uiActions code handle the navigation and show popup if needed
     event.preventDefault();
+    if (trackUiMetric) {
+      trackUiMetric(METRIC_TYPE.CLICK, 'visualize_link_click');
+    }
     triggerVisualizeActions(field, indexPattern.id, details.columns);
   };
 

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

@@ -101,6 +101,7 @@ function getCompProps() {
     selectedIndexPattern: indexPattern,
     setIndexPattern: jest.fn(),
     state: {},
+    trackUiMetric: jest.fn(),
   };
 }
 

src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx

@@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { sortBy } from 'lodash';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
+import { UiStatsMetricType } from '@kbn/analytics';
 import { DiscoverField } from './discover_field';
 import { DiscoverIndexPattern } from './discover_index_pattern';
 import { DiscoverFieldSearch } from './discover_field_search';
@@ -73,6 +74,12 @@ export interface DiscoverSidebarProps {
    * Callback function to select another index pattern
    */
   setIndexPattern: (id: string) => void;
+  /**
+   * Metric tracking function
+   * @param metricType
+   * @param eventName
+   */
+  trackUiMetric?: (metricType: UiStatsMetricType, eventName: string | string[]) => void;
 }
 
 export function DiscoverSidebar({
@@ -85,12 +92,12 @@ export function DiscoverSidebar({
   onRemoveField,
   selectedIndexPattern,
   setIndexPattern,
+  trackUiMetric,
 }: DiscoverSidebarProps) {
   const [showFields, setShowFields] = useState(false);
   const [fields, setFields] = useState<IndexPatternField[] | null>(null);
   const [fieldFilterState, setFieldFilterState] = useState(getDefaultFieldFilter());
   const services = useMemo(() => getServices(), []);
-
   useEffect(() => {
     const newFields = getIndexPatternFieldList(selectedIndexPattern, fieldCounts);
     setFields(newFields);
@@ -195,6 +202,7 @@ export function DiscoverSidebar({
                         getDetails={getDetailsByField}
                         selected={true}
                         useShortDots={useShortDots}
+                        trackUiMetric={trackUiMetric}
                       />
                     </li>
                   );
@@ -269,6 +277,7 @@ export function DiscoverSidebar({
                         onAddFilter={onAddFilter}
                         getDetails={getDetailsByField}
                         useShortDots={useShortDots}
+                        trackUiMetric={trackUiMetric}
                       />
                     </li>
                   );
@@ -299,6 +308,7 @@ export function DiscoverSidebar({
                     onAddFilter={onAddFilter}
                     getDetails={getDetailsByField}
                     useShortDots={useShortDots}
+                    trackUiMetric={trackUiMetric}
                   />
                 </li>
               );

src/plugins/discover/public/build_services.ts

@@ -37,6 +37,7 @@ import { Start as InspectorPublicPluginStart } from 'src/plugins/inspector/publi
 import { SharePluginStart } from 'src/plugins/share/public';
 import { ChartsPluginStart } from 'src/plugins/charts/public';
 
+import { UiStatsMetricType } from '@kbn/analytics';
 import { DiscoverStartPlugins } from './plugin';
 import { createSavedSearchesLoader, SavedSearch } from './saved_searches';
 import { getHistory } from './kibana_services';
@@ -67,6 +68,7 @@ export interface DiscoverServices {
   getSavedSearchUrlById: (id: string) => Promise<string>;
   getEmbeddableInjector: any;
   uiSettings: IUiSettingsClient;
+  trackUiMetric?: (metricType: UiStatsMetricType, eventName: string | string[]) => void;
 }
 
 export async function buildServices(
@@ -80,6 +82,7 @@ export async function buildServices(
     savedObjects: plugins.savedObjects,
   };
   const savedObjectService = createSavedSearchesLoader(services);
+  const { usageCollection } = plugins;
 
   return {
     addBasePath: core.http.basePath.prepend,
@@ -106,5 +109,6 @@ export async function buildServices(
     timefilter: plugins.data.query.timefilter.timefilter,
     toastNotifications: core.notifications.toasts,
     uiSettings: core.uiSettings,
+    trackUiMetric: usageCollection?.reportUiStats.bind(usageCollection, 'discover'),
   };
 }

src/plugins/discover/public/plugin.ts

@@ -69,6 +69,7 @@ import {
   DiscoverUrlGenerator,
 } from './url_generator';
 import { SearchEmbeddableFactory } from './application/embeddable';
+import { UsageCollectionSetup } from '../../usage_collection/public';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -139,6 +140,7 @@ export interface DiscoverStartPlugins {
   urlForwarding: UrlForwardingStart;
   inspector: InspectorPublicPluginStart;
   savedObjects: SavedObjectsStart;
+  usageCollection?: UsageCollectionSetup;
 }
 
 const innerAngularName = 'app/discover';