Add create_first_engine_button telemetry tracking to EmptyState

cee-chen · Jun 4, 2020 · dabdeaa · dabdeaa
1 parent 73ad80b
commit dabdeaa
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 8 deletions.
diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/.../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
@@ -7,6 +7,7 @@
 import React, { useContext } from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 
+import { sendTelemetry } from '../../../shared/telemetry';
 import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs';
 import { KibanaContext, IKibanaContext } from '../../../index';
 
@@ -15,7 +16,19 @@ import { EngineOverviewHeader } from '../engine_overview_header';
 import './empty_states.scss';
 
 export const EmptyState: React.FC<> = () => {
-  const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
+  const { enterpriseSearchUrl, http } = useContext(KibanaContext) as IKibanaContext;
+
+  const buttonProps = {
+    href: `${enterpriseSearchUrl}/as/engines/new`,
+    target: '_blank',
+    onClick: () =>
+      sendTelemetry({
+        http,
+        product: 'app_search',
+        action: 'clicked',
+        metric: 'create_first_engine_button',
+      }),
+  };
 
   return (
     <EuiPage restrictWidth className="empty-state">
@@ -35,12 +48,7 @@ export const EmptyState: React.FC<> = () => {
               </p>
             }
             actions={
-              <EuiButton
-                iconType="popout"
-                fill
-                href={`${enterpriseSearchUrl}/as/engines/new`}
-                target="_blank"
-              >
+              <EuiButton iconType="popout" fill {...buttonProps}>
                 Create your first Engine
               </EuiButton>
             }

diff --git a/...prise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx b/...prise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx
@@ -8,11 +8,17 @@ import '../../../__mocks__/shallow_usecontext.mock';
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { EuiEmptyPrompt, EuiCode, EuiLoadingContent } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiButton, EuiCode, EuiLoadingContent } from '@elastic/eui';
 
 jest.mock('../../utils/get_username', () => ({ getUserName: jest.fn() }));
 import { getUserName } from '../../utils/get_username';
 
+jest.mock('../../../shared/telemetry', () => ({
+  sendTelemetry: jest.fn(),
+  SendAppSearchTelemetry: jest.fn(),
+}));
+import { sendTelemetry } from '../../../shared/telemetry';
+
 import { ErrorState, NoUserState, EmptyState, LoadingState } from './';
 
 describe('ErrorState', () => {
@@ -51,6 +57,16 @@ describe('EmptyState', () => {
     expect(prompt).toHaveLength(1);
     expect(prompt.prop('title')).toEqual(<h2>There’s nothing here yet</h2>);
   });
+
+  it('sends telemetry on create first engine click', () => {
+    const wrapper = shallow(<EmptyState />);
+    const prompt = wrapper.find(EuiEmptyPrompt).dive();
+    const button = prompt.find(EuiButton);
+
+    button.simulate('click');
+    expect(sendTelemetry).toHaveBeenCalled();
+    sendTelemetry.mockClear();
+  });
 });
 
 describe('LoadingState', () => {

diff --git a/x-pack/plugins/enterprise_search/server/collectors/app_search/telemetry.test.ts b/x-pack/plugins/enterprise_search/server/collectors/app_search/telemetry.test.ts
@@ -22,6 +22,7 @@ describe('App Search Telemetry Usage Collector', () => {
         'ui_viewed.engines_overview': 20,
         'ui_error.cannot_connect': 3,
         'ui_error.no_as_account': 4,
+        'ui_clicked.create_first_engine_button': 40,
         'ui_clicked.header_launch_button': 50,
         'ui_clicked.engine_table_link': 60,
       },
@@ -67,6 +68,7 @@ describe('App Search Telemetry Usage Collector', () => {
           no_as_account: 4,
         },
         ui_clicked: {
+          create_first_engine_button: 40,
           header_launch_button: 50,
           engine_table_link: 60,
         },
@@ -90,6 +92,7 @@ describe('App Search Telemetry Usage Collector', () => {
           no_as_account: 0,
         },
         ui_clicked: {
+          create_first_engine_button: 0,
           header_launch_button: 0,
           engine_table_link: 0,
         },

diff --git a/x-pack/plugins/enterprise_search/server/collectors/app_search/telemetry.ts b/x-pack/plugins/enterprise_search/server/collectors/app_search/telemetry.ts
@@ -48,6 +48,7 @@ const fetchTelemetryMetrics = async (savedObjects: SavedObjectsServiceStart) =>
       no_as_account: 0,
     },
     ui_clicked: {
+      create_first_engine_button: 0,
       header_launch_button: 0,
       engine_table_link: 0,
     },

diff --git a/x-pack/plugins/enterprise_search/server/saved_objects/app_search/telemetry.ts b/x-pack/plugins/enterprise_search/server/saved_objects/app_search/telemetry.ts
@@ -18,6 +18,7 @@ export interface ITelemetrySavedObject {
     no_as_account: number;
   };
   ui_clicked: {
+    create_first_engine_button: number;
     header_launch_button: number;
     engine_table_link: number;
   };
@@ -55,6 +56,10 @@ export const appSearchTelemetryType: SavedObjectsType = {
       },
       ui_clicked: {
         properties: {
+          create_first_engine_button: {
+            type: 'long',
+            null_value: 0,
+          },
           header_launch_button: {
             type: 'long',
             null_value: 0,