[Usage Collection] Home Page UI Metrics (#81827)

* Added telemetry for the home page * Added check for click handlers in overview page footer * Fixed ts error * Updated snapshots * Applied feedback Co-authored-by: Kibana Machine <[email protected]>
elastic · Nov 2, 2020 · d9eef77 · d9eef77
1 parent 29a17c6
commit d9eef77
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 146 deletions.
diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.js.snap
diff --git a/src/plugins/home/public/application/components/add_data/add_data.test.tsx b/src/plugins/home/public/application/components/add_data/add_data.test.tsx
@@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
   };
 });
 
+jest.mock('../../kibana_services', () => ({
+  getServices: () => ({
+    trackUiMetric: jest.fn(),
+  }),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
 });

diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx
@@ -17,69 +17,78 @@
  * under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import PropTypes from 'prop-types';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { METRIC_TYPE } from '@kbn/analytics';
 // @ts-expect-error untyped service
 import { FeatureCatalogueEntry } from '../../services';
 import { createAppNavigationHandler } from '../app_navigation_handler';
 // @ts-expect-error untyped component
 import { Synopsis } from '../synopsis';
+import { getServices } from '../../kibana_services';
 
 interface Props {
   addBasePath: (path: string) => string;
   features: FeatureCatalogueEntry[];
 }
 
-export const AddData: FC<Props> = ({ addBasePath, features }) => (
-  <section className="homDataAdd" aria-labelledby="homDataAdd__title">
-    <EuiFlexGroup alignItems="center">
-      <EuiFlexItem grow={1}>
-        <EuiTitle size="s">
-          <h2 id="homDataAdd__title">
-            <FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
-          </h2>
-        </EuiTitle>
-      </EuiFlexItem>
+export const AddData: FC<Props> = ({ addBasePath, features }) => {
+  const { trackUiMetric } = getServices();
 
-      <EuiFlexItem className="homDataAdd__actions" grow={false}>
-        <div>
-          <EuiButtonEmpty
-            className="homDataAdd__actionButton"
-            flush="left"
-            href="#/tutorial_directory/sampleData"
-            iconType="visTable"
-            size="xs"
-          >
-            <FormattedMessage
-              id="home.addData.sampleDataButtonLabel"
-              defaultMessage="Try our sample data"
-            />
-          </EuiButtonEmpty>
-        </div>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-
-    <EuiSpacer size="m" />
+  return (
+    <section className="homDataAdd" aria-labelledby="homDataAdd__title">
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={1}>
+          <EuiTitle size="s">
+            <h2 id="homDataAdd__title">
+              <FormattedMessage id="home.addData.sectionTitle" defaultMessage="Ingest your data" />
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
 
-    <EuiFlexGroup className="homDataAdd__content">
-      {features.map((feature) => (
-        <EuiFlexItem key={feature.id}>
-          <Synopsis
-            id={feature.id}
-            onClick={createAppNavigationHandler(feature.path)}
-            description={feature.description}
-            iconType={feature.icon}
-            title={feature.title}
-            url={addBasePath(feature.path)}
-            wrapInPanel
-          />
+        <EuiFlexItem className="homDataAdd__actions" grow={false}>
+          <div>
+            <EuiButtonEmpty
+              className="homDataAdd__actionButton"
+              flush="left"
+              href="#/tutorial_directory/sampleData"
+              iconType="visTable"
+              size="xs"
+            >
+              <FormattedMessage
+                id="home.addData.sampleDataButtonLabel"
+                defaultMessage="Try our sample data"
+              />
+            </EuiButtonEmpty>
+          </div>
         </EuiFlexItem>
-      ))}
-    </EuiFlexGroup>
-  </section>
-);
+      </EuiFlexGroup>
+
+      <EuiSpacer size="m" />
+
+      <EuiFlexGroup className="homDataAdd__content">
+        {features.map((feature) => (
+          <EuiFlexItem key={feature.id}>
+            <Synopsis
+              id={feature.id}
+              onClick={(event: MouseEvent) => {
+                trackUiMetric(METRIC_TYPE.CLICK, `ingest_data_card_${feature.id}`);
+                createAppNavigationHandler(feature.path)(event);
+              }}
+              description={feature.description}
+              iconType={feature.icon}
+              title={feature.title}
+              url={addBasePath(feature.path)}
+              wrapInPanel
+            />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </section>
+  );
+};
 
 AddData.propTypes = {
   addBasePath: PropTypes.func.isRequired,

diff --git a/src/plugins/home/public/application/components/home.js b/src/plugins/home/public/application/components/home.js
@@ -21,6 +21,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
+import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
 import {
   OverviewPageFooter,
@@ -120,7 +121,7 @@ export class Home extends Component {
 
   renderNormal() {
     const { addBasePath, solutions, directories } = this.props;
-
+    const { trackUiMetric } = getServices();
     const devTools = this.findDirectoryById('console');
     const addDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.DATA);
     const manageDataFeatures = this.getFeaturesByCategory(FeatureCatalogueCategory.ADMIN);
@@ -171,7 +172,16 @@ export class Home extends Component {
 
           <EuiHorizontalRule margin="xl" aria-hidden="true" />
 
-          <OverviewPageFooter addBasePath={addBasePath} path={HOME_APP_BASE_PATH} />
+          <OverviewPageFooter
+            addBasePath={addBasePath}
+            path={HOME_APP_BASE_PATH}
+            onSetDefaultRoute={() => {
+              trackUiMetric(METRIC_TYPE.CLICK, 'set_home_as_default_route');
+            }}
+            onChangeDefaultRoute={() => {
+              trackUiMetric(METRIC_TYPE.CLICK, 'change_to_different_default_route');
+            }}
+          />
         </div>
       </main>
     );

diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.test.tsx
@@ -27,6 +27,12 @@ jest.mock('../app_navigation_handler', () => {
   };
 });
 
+jest.mock('../../kibana_services', () => ({
+  getServices: () => ({
+    trackUiMetric: jest.fn(),
+  }),
+}));
+
 beforeEach(() => {
   jest.clearAllMocks();
 });