From 1acc5f202500e3c18a0d2d6dfb0fb603fdd97be7 Mon Sep 17 00:00:00 2001 From: Maja Grubic Date: Mon, 2 Nov 2020 18:43:30 +0000 Subject: [PATCH] [Discover] Adding uiMetric around Visualize link click --- src/plugins/discover/kibana.json | 2 +- .../application/components/discover_legacy.tsx | 2 ++ .../components/sidebar/discover_field.tsx | 9 +++++++++ .../components/sidebar/discover_field_details.tsx | 6 ++++++ .../components/sidebar/discover_sidebar.test.tsx | 1 + .../components/sidebar/discover_sidebar.tsx | 12 +++++++++++- src/plugins/discover/public/build_services.ts | 8 ++++++++ src/plugins/discover/public/plugin.ts | 2 ++ 8 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/kibana.json b/src/plugins/discover/kibana.json index 67c93ad8a406c..aab535c5b0ede 100644 --- a/src/plugins/discover/kibana.json +++ b/src/plugins/discover/kibana.json @@ -15,6 +15,6 @@ "visualizations", "savedObjects" ], - "optionalPlugins": ["home", "share"], + "optionalPlugins": ["home", "share", "usageCollection"], "requiredBundles": ["kibanaUtils", "home", "kibanaReact"] } diff --git a/src/plugins/discover/public/application/components/discover_legacy.tsx b/src/plugins/discover/public/application/components/discover_legacy.tsx index 3ca421f809640..283d9fe80c8d4 100644 --- a/src/plugins/discover/public/application/components/discover_legacy.tsx +++ b/src/plugins/discover/public/application/components/discover_legacy.tsx @@ -123,6 +123,7 @@ export function DiscoverLegacy({ }: DiscoverLegacyProps) { const [isSidebarClosed, setIsSidebarClosed] = useState(false); const { TopNavMenu } = getServices().navigation.ui; + const { trackUiMetric } = getServices(); const { savedSearch, indexPatternList } = opts; const bucketAggConfig = vis?.data?.aggs?.aggs[1]; const bucketInterval = @@ -190,6 +191,7 @@ export function DiscoverLegacy({ onRemoveField={onRemoveColumn} selectedIndexPattern={searchSource && searchSource.getField('index')} setIndexPattern={setIndexPattern} + trackUiMetric={trackUiMetric} /> )} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx index 8ff603884239e..0329b3a34580c 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx +++ b/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} /> )} diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx index 3061839bf3ef0..8f42f4c5457b6 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_field_details.tsx +++ b/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(false); @@ -70,6 +73,9 @@ export function DiscoverFieldDetails({ const handleVisualizeLinkClick = (event: React.MouseEvent) => { // regular link click. let the uiActions code handle the navigation and show popup if needed event.preventDefault(); + if (trackUiMetric) { + trackUiMetric(METRIC_TYPE.CLICK, 'discover_visualize_link_click'); + } triggerVisualizeActions(field, indexPattern.id, details.columns); }; diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx index 6177b60a0a7ad..3d2c20109a264 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx +++ b/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(), }; } diff --git a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx index 2407cff181901..8b3473a53a048 100644 --- a/src/plugins/discover/public/application/components/sidebar/discover_sidebar.tsx +++ b/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(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} /> ); @@ -269,6 +277,7 @@ export function DiscoverSidebar({ onAddFilter={onAddFilter} getDetails={getDetailsByField} useShortDots={useShortDots} + trackUiMetric={trackUiMetric} /> ); @@ -299,6 +308,7 @@ export function DiscoverSidebar({ onAddFilter={onAddFilter} getDetails={getDetailsByField} useShortDots={useShortDots} + trackUiMetric={trackUiMetric} /> ); diff --git a/src/plugins/discover/public/build_services.ts b/src/plugins/discover/public/build_services.ts index 27844cc2347b9..e33919cdcab06 100644 --- a/src/plugins/discover/public/build_services.ts +++ b/src/plugins/discover/public/build_services.ts @@ -38,6 +38,7 @@ import { SharePluginStart } from 'src/plugins/share/public'; import { ChartsPluginStart } from 'src/plugins/charts/public'; import { VisualizationsStart } from 'src/plugins/visualizations/public'; +import { UiStatsMetricType } from '@kbn/analytics'; import { DiscoverStartPlugins } from './plugin'; import { createSavedSearchesLoader, SavedSearch } from './saved_searches'; import { getHistory } from './kibana_services'; @@ -69,6 +70,7 @@ export interface DiscoverServices { getEmbeddableInjector: any; uiSettings: IUiSettingsClient; visualizations: VisualizationsStart; + trackUiMetric: (metricType: UiStatsMetricType, eventName: string | string[]) => void; } export async function buildServices( @@ -82,6 +84,11 @@ export async function buildServices( savedObjects: plugins.savedObjects, }; const savedObjectService = createSavedSearchesLoader(services); + const { usageCollection } = plugins; + let trackUiMetric = (metricType: UiStatsMetricType, eventName: string | string[]) => {}; + if (usageCollection) { + trackUiMetric = usageCollection.reportUiStats.bind(usageCollection, 'discover'); + } return { addBasePath: core.http.basePath.prepend, @@ -109,5 +116,6 @@ export async function buildServices( toastNotifications: core.notifications.toasts, uiSettings: core.uiSettings, visualizations: plugins.visualizations, + trackUiMetric, }; } diff --git a/src/plugins/discover/public/plugin.ts b/src/plugins/discover/public/plugin.ts index 11ec4f08d9514..13cbdce9fc105 100644 --- a/src/plugins/discover/public/plugin.ts +++ b/src/plugins/discover/public/plugin.ts @@ -70,6 +70,7 @@ import { DiscoverUrlGenerator, } from './url_generator'; import { SearchEmbeddableFactory } from './application/embeddable'; +import { UsageCollectionSetup } from '../../usage_collection/public'; declare module '../../share/public' { export interface UrlGeneratorStateMapping { @@ -142,6 +143,7 @@ export interface DiscoverStartPlugins { inspector: InspectorPublicPluginStart; visualizations: VisualizationsStart; savedObjects: SavedObjectsStart; + usageCollection?: UsageCollectionSetup; } const innerAngularName = 'app/discover';